/* =============================================================
   EFECTOS (animaciones) Y DETALLES DE INTERFAZ
   js/efectos.js pone en <html>: data-entrada, data-titulo,
   data-fondo, data-hover y data-anim (ninguna | activa).
   ============================================================= */

/* Sin animación: la portada aparece quieta */
[data-anim="ninguna"] .escenario::after, [data-anim="ninguna"] .hero-texto h1, [data-anim="ninguna"] .lema,
[data-anim="ninguna"] .hero-acciones, [data-anim="ninguna"] .entrada { animation: none !important; }

/* ---------- Aparición de secciones ---------- */
.rv { opacity: 0; transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease), clip-path 1s var(--ease); transition-delay: calc(var(--rv-i, 0) * 90ms); }
.rv.visto { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0); }
[data-entrada="fundido"] .rv { transform: translateY(28px); }
[data-entrada="zoom"] .rv { transform: translateY(40px) scale(.94); }
[data-entrada="desenfoque"] .rv { filter: blur(14px); transform: scale(1.03); }
[data-entrada="cortina"] .rv { opacity: 1; clip-path: inset(0 0 100% 0); transform: translateY(16px); }
[data-entrada="giro"] .rv { transform: perspective(900px) rotateX(-28deg) translateY(30px); transform-origin: 50% 0; }
[data-entrada="lateral"] .rv-izq { transform: translateX(-60px); }
[data-entrada="lateral"] .rv-der { transform: translateX(60px); }

/* ---------- Título de la portada ---------- */
.pal { display: inline-block; white-space: nowrap; }
.letra { display: inline-block; animation: letra .8s var(--ease) both; animation-delay: calc(.3s + var(--l) * 45ms); }
@keyframes letra { from { opacity: 0; transform: translateY(.45em) rotate(6deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
[data-titulo="letras"] .hero-texto h1, [data-titulo="ola"] .hero-texto h1, [data-titulo="palabras"] .hero-texto h1,
[data-titulo="maquina"] .hero-texto h1, [data-titulo="resaltado"] .hero-texto h1 { animation: none; }

/* Ola: las letras entran y quedan ondulando suave */
.ola-l { animation: letra .8s var(--ease) both, ola 3.2s ease-in-out infinite; animation-delay: calc(.3s + var(--l) * 45ms), calc(1.6s + var(--l) * 90ms); }
@keyframes ola { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.08em); } }

/* Palabra por palabra, subiendo desde una máscara */
.mascara { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.palabra { display: inline-block; animation: palabra 1s var(--ease) both; animation-delay: calc(.25s + var(--l) * 140ms); }
@keyframes palabra { from { transform: translateY(105%); } to { transform: none; } }

/* Máquina de escribir */
.caret { display: inline-block; width: .06em; height: .85em; margin-left: .06em; background: currentColor; vertical-align: -.05em; animation: titila 1s steps(1) infinite; }
.tipeado .caret { opacity: 0; animation: none; transition: opacity .4s; }
@keyframes titila { 50% { opacity: 0; } }

/* Degradado animado */
.txt-degradado {
  background: linear-gradient(100deg, currentColor 20%, var(--acento) 45%, var(--primario) 55%, currentColor 80%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: subir 1.1s var(--ease) both .35s, brillo-txt 6s linear infinite 1.4s;
}
@keyframes brillo-txt { to { background-position: -250% 0; } }

/* Resaltador */
.marcador {
  background: linear-gradient(color-mix(in srgb, var(--acento) 60%, transparent), color-mix(in srgb, var(--acento) 60%, transparent)) no-repeat 0 88% / 0% 34%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .06em;
  animation: marcar 1.1s var(--ease) forwards .7s;
}
@keyframes marcar { to { background-size: 100% 34%; } }

/* ---------- Fondo de la portada ---------- */
.hero-fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

/* Profundidad */
[data-fondo="profundidad"] .escenario::after { transform: translateY(calc(var(--px, 0) * .35px)) scale(1.05); }
[data-fondo="profundidad"] .escenario::before { transform: translateY(calc(var(--px, 0) * .15px)); }
[data-fondo="profundidad"][data-estilo="bistro"] .escenario::before { transform: none; }
[data-fondo="profundidad"] .hero-texto { transform: translateY(calc(var(--px, 0) * -.12px)); }

/* Aurora */
.au { position: absolute; width: 55vmax; height: 55vmax; border-radius: 50%; filter: blur(70px); opacity: .5; mix-blend-mode: screen; }
[data-tono="claro"] .escenario .au { mix-blend-mode: multiply; opacity: .35; }
.au1 { background: var(--acento); top: -25%; left: -10%; animation: au1 18s ease-in-out infinite alternate; }
.au2 { background: var(--primario); bottom: -35%; right: -15%; animation: au2 22s ease-in-out infinite alternate; }
.au3 { background: color-mix(in srgb, var(--acento) 50%, #7cf); top: 20%; left: 40%; width: 35vmax; height: 35vmax; animation: au3 15s ease-in-out infinite alternate; }
@keyframes au1 { to { transform: translate(25vw, 15vh) scale(1.2); } }
@keyframes au2 { to { transform: translate(-20vw, -10vh) scale(.85); } }
@keyframes au3 { to { transform: translate(-15vw, 12vh) scale(1.3); } }

/* Ondas */
.ondas { position: absolute; left: 0; right: 0; bottom: -2px; height: 160px; }
.onda { position: absolute; bottom: 0; width: 200%; height: 100%; }
.onda path { fill: color-mix(in srgb, var(--acento) 22%, transparent); }
.onda.o1 { animation: onda 14s linear infinite; }
.onda.o2 { animation: onda 22s linear infinite reverse; opacity: .7; }
.onda.o3 path { fill: color-mix(in srgb, var(--fondo) 30%, transparent); }
.onda.o3 { animation: onda 30s linear infinite; height: 70%; }
@keyframes onda { to { transform: translateX(-50%); } }

/* Grilla en perspectiva */
.grilla-3d { position: absolute; inset: 40% -50% -20%; perspective: 340px; }
.grilla-3d i {
  position: absolute; inset: 0; transform: rotateX(62deg); transform-origin: 50% 0;
  background-image: linear-gradient(color-mix(in srgb, var(--acento) 55%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--acento) 55%, transparent) 1px, transparent 1px);
  background-size: 56px 56px; animation: grilla 2.4s linear infinite;
  -webkit-mask: linear-gradient(to bottom, transparent, #000 35%); mask: linear-gradient(to bottom, transparent, #000 35%);
}
@keyframes grilla { to { background-position: 0 56px; } }

/* Foco que sigue al mouse */
.foco { position: absolute; inset: 0; background: radial-gradient(circle 280px at var(--mx, 70%) var(--my, 30%), color-mix(in srgb, var(--acento) 38%, transparent), transparent 70%); transition: background .1s; }

/* Partículas */
.particulas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Al pasar el mouse ---------- */
/* Tarjetas en 3D */
[data-hover="3d"] .tarjeta { transition: transform .35s var(--ease), box-shadow .35s var(--ease), opacity .9s var(--ease), filter .9s var(--ease), clip-path 1s var(--ease); transform-style: preserve-3d; }
[data-hover="3d"] .tarjeta.inclinada { transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateY(-4px); }

/* Elevar */
@media (hover: hover) {
  [data-hover="elevar"] .tarjeta { transition: transform .35s var(--ease), box-shadow .35s var(--ease), opacity .9s var(--ease), filter .9s var(--ease), clip-path 1s var(--ease); }
  [data-hover="elevar"] .tarjeta.visto:hover, [data-hover="elevar"] .tarjeta:not(.rv):hover { transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(0,0,0,.4); }
  [data-hover="elevar"] .btn:hover { transform: translateY(-2px); }
}

/* Destello que cruza la tarjeta */
[data-hover="destello"] .tarjeta { position: relative; overflow: hidden; }
[data-hover="destello"] .tarjeta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.38) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat;
}
[data-hover="destello"] .tarjeta:hover::after { animation: destello .9s var(--ease); }
[data-hover="destello"] .btn { position: relative; overflow: hidden; }
@keyframes destello { to { background-position: 150% 0; } }

/* Borde animado (degradé que gira) */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
[data-hover="borde"] .tarjeta { position: relative; }
[data-hover="borde"] .tarjeta::before {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; z-index: 2; pointer-events: none;
  background: conic-gradient(from var(--ang), var(--acento), var(--primario), transparent 40%, var(--acento));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .3s;
}
[data-hover="borde"] .tarjeta:hover::before { opacity: 1; animation: girar 2.5s linear infinite; }
@keyframes girar { to { --ang: 360deg; } }

/* Botones magnéticos (el movimiento lo hace js/efectos.js) */
[data-hover="magnetico"] .btn { transition: translate .25s var(--ease), background-color .2s, color .2s; }

/* Cursor personalizado */
.con-cursor body, .con-cursor a, .con-cursor button, .con-cursor summary { cursor: none; }
.cursor-punto, .cursor-aro { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; border-radius: 50%; }
.cursor-punto { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--acento); }
.cursor-aro { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1.5px solid color-mix(in srgb, var(--acento) 70%, transparent); transition: width .25s, height .25s, margin .25s, background-color .25s; }
.cursor-aro.sobre { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: color-mix(in srgb, var(--acento) 15%, transparent); }

/* ---------- Cinta en movimiento ---------- */
.cinta { overflow: hidden; background: var(--acento); color: #15110B; border-block: 1px solid color-mix(in srgb, var(--texto) 20%, transparent); }
.cinta-in { display: flex; width: max-content; align-items: center; gap: 1.6rem; padding: .85rem 0; animation: cinta 38s linear infinite; }
.cinta-in span { font-family: var(--fuente-titulos); font-weight: var(--peso-titulos, 400); font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1; white-space: nowrap; }
.cinta-in i { font-style: normal; opacity: .6; }
.cinta:hover .cinta-in { animation-play-state: paused; }
@keyframes cinta { to { transform: translateX(-50%); } }
[data-estilo="afiche"] .cinta, [data-estilo="brutalista"] .cinta { background: var(--texto); color: var(--fondo); border-block: 2px solid var(--texto); }
[data-estilo="afiche"] .cinta-in span, [data-estilo="brutalista"] .cinta-in span { text-transform: uppercase; }
[data-estilo="bistro"] .cinta, [data-estilo="lujo"] .cinta, [data-estilo="editorial"] .cinta { background: var(--fondo); color: var(--primario); border-block: 1px solid var(--linea); }
[data-estilo="bistro"] .cinta-in span { font-style: italic; }
[data-estilo="neon"] .cinta, [data-estilo="tech"] .cinta { background: var(--fondo); color: var(--primario); text-shadow: 0 0 12px var(--primario); border-block: 1px solid color-mix(in srgb, var(--primario) 40%, transparent); }

/* =============================================================
   DETALLES DE INTERFAZ
   ============================================================= */
/* Barra de progreso */
.progreso { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; pointer-events: none; }
.progreso i { display: block; height: 100%; background: linear-gradient(90deg, var(--primario), var(--acento)); transform-origin: 0 50%; transform: scaleX(0); }

/* Volver arriba */
.btn-subir {
  position: fixed; right: 1.4rem; bottom: 5.6rem; z-index: 30; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--linea); cursor: pointer;
  background: color-mix(in srgb, var(--fondo) 85%, transparent); color: var(--texto);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 24px -10px rgba(0,0,0,.35);
  animation: subir .4s var(--ease);
}
.btn-subir:hover { border-color: var(--texto); }

/* Botón de modo oscuro */
.modo-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; flex: none; }
.modo-btn:hover { border-color: currentColor; }
.modo-btn.sol svg path { d: path("M12 4v1.5M12 18.5V20M4 12h1.5M18.5 12H20M6.3 6.3l1 1M16.7 16.7l1 1M6.3 17.7l1-1M16.7 7.3l1-1M15.5 12a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0z"); }

/* Barra de acción fija en el celular */
.barra-movil { display: none; }
@media (max-width: 720px) {
  .barra-movil:not([hidden]) {
    display: flex; gap: .5rem; position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 35;
    padding: .5rem; border-radius: 999px; background: color-mix(in srgb, var(--fondo) 82%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 12px 30px -10px rgba(0,0,0,.4); border: 1px solid var(--linea);
  }
  .barra-movil .btn { flex: 1; padding: .75rem 1rem; }
  .barra-movil .btn-wa { background: #1F9D55; color: #fff; }
  .con-barra .wa { display: none; }
  .con-barra .btn-subir { bottom: 5.4rem; }
  .con-barra .pie-legal { padding-bottom: 6rem; }
}

/* Textura de grano */
.grano body::after {
  content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-tono="oscuro"].grano body::after { mix-blend-mode: screen; opacity: .05; }

/* Lightbox de la galería */
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 1100px); max-height: 92vh; }
.lightbox::backdrop { background: rgba(8, 6, 12, .85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lightbox img { display: block; max-width: 100%; max-height: 82vh; border-radius: 10px; margin: 0 auto; }
.lightbox p { color: #fff; text-align: center; margin: .8rem 0 0; }
.lb-cerrar { position: fixed; top: 1rem; right: 1rem; width: 44px; height: 44px; border-radius: 50%; border: 0; font-size: 1.8rem; line-height: 1; cursor: pointer; background: rgba(255,255,255,.15); color: #fff; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
  .cinta-in, .au, .onda, .grilla-3d i { animation: none !important; }
}

/* Correcciones: elementos con display propio que deben respetar [hidden] */
.modo-btn[hidden], .btn-subir[hidden], .progreso[hidden], .car-btn[hidden] { display: none !important; }
/* En galería y bento la inicial va chica arriba, para no tapar el texto */
.tile-img.ph, .caja-img.ph { place-items: start end; padding: 1rem 1.3rem; }
.tile-img.ph span, .caja-img.ph span { font-size: clamp(2.4rem, 4vw, 3.4rem); opacity: .3; }