@charset "utf-8";
/* ============================================================================
   TUNA MÁLAGA — Hoja de estilos principal
   ----------------------------------------------------------------------------
   Concepto: «Tradición Ciber» — noche malagueña, oro viejo y brasa de atardecer.
   El negro no es negro: es azul petróleo quemado. El dorado no es amarillo:
   es la luz del atardecer sobre una guitarra de ciprés.

   ÍNDICE
     01. Tokens de diseño
     02. Base y reinicio
     03. Tipografía y utilidades
     04. Capas atmosféricas (grano, viñeta, cintas, cursor)
     05. Precarga
     06. Navegación
     07. Botones y enlaces
     08. Fondo cinematográfico
     09. Héroe
     10. Secciones: armazón y revelado
     11. 02 · Experiencia (desplazamiento horizontal)
     12. 03 · Sonido (tocadiscos + visualizador)
     13. 04 · Legado (línea de tiempo, polaroids, testimonios)
     14. 05 · Galería de cintas
     15. 06 · Contacto (formulario por pasos)
     16. Pie
     17. Responsive
     18. Accesibilidad y preferencias
   ============================================================================ */

/* ============================================================================
   01. TOKENS DE DISEÑO
   ============================================================================ */
:root{
  /* --- Estructura: noche de Málaga --- */
  --noche:#06070a;
  --carbon:#0b0d12;
  --pizarra:#11141b;
  --pizarra-alta:#171b24;
  --petroleo:#08202e;
  --petroleo-claro:#0f3346;

  /* --- Fuego: atardecer y oro --- */
  --brasa:#ff5f1f;
  --brasas:#ff7a3c;
  --naranja:#e3741c;
  --ambar:#f2a938;
  --oro:#e9bd67;
  --oro-claro:#f8e2ae;
  --oro-hondo:#9d6f1c;

  /* --- Tinta --- */
  --crema:#f4e9d8;
  --crema-88:rgba(244,233,216,.88);
  --crema-70:rgba(244,233,216,.70);
  --crema-52:rgba(244,233,216,.52);
  --crema-34:rgba(244,233,216,.34);
  --crema-18:rgba(244,233,216,.18);
  --linea:rgba(244,233,216,.11);
  --linea-media:rgba(244,233,216,.2);
  --linea-fuerte:rgba(244,233,216,.34);

  /* --- Cintas de la capa: colores reales del traje tuno --- */
  --cinta-roja:#c33a2c;
  --cinta-azul:#2f6fb5;
  --cinta-verde:#2e8b57;
  --cinta-oro:#d9a521;
  --cinta-rosa:#d1467f;
  --cinta-cielo:#63b8d8;
  --cinta-blanca:#e9e5dc;

  /* --- Gradientes firma --- */
  --fuego:linear-gradient(100deg,var(--brasas) 0%,var(--ambar) 42%,var(--oro) 70%,var(--oro-claro) 100%);
  --fuego-suave:linear-gradient(100deg,rgba(255,95,31,.16),rgba(233,189,103,.16));
  --vetical-noche:linear-gradient(180deg,var(--noche) 0%,var(--carbon) 45%,var(--petroleo) 100%);

  /* --- Tipografía --- */
  --serif:"Fraunces","Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* --- Métrica --- */
  --ancho:1280px;
  --ancho-texto:62ch;
  --barra:clamp(20px,4.4vw,72px);
  --radio:14px;
  --radio-lg:26px;

  /* --- Movimiento --- */
  --curva:cubic-bezier(.22,.61,.36,1);
  --curva-salida:cubic-bezier(.16,1,.3,1);
  --curva-entrada:cubic-bezier(.7,0,.84,0);
  --veloz:.24s;
  --media:.5s;
  --lenta:.9s;

  /* --- Sombras --- */
  --sombra-baja:0 24px 60px -28px rgba(0,0,0,.9);
  --sombra-alta:0 44px 110px -40px rgba(0,0,0,.95);
  --resplandor-oro:0 0 0 1px rgba(233,189,103,.22), 0 20px 50px -24px rgba(255,95,31,.45);

  /* --- Texturas procedurales (sin archivos externos) --- */
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E");
  --ruido-suave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

/* ============================================================================
   02. BASE Y REINICIO
   ============================================================================ */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
/* Cuando el scroll lo controla JS desactivamos el nativo para evitar peleas. */
html.sin-scroll-nativo{scroll-behavior:auto}

body{
  margin:0;
  background:var(--noche);
  color:var(--crema-88);
  font-family:var(--sans);
  font-size:clamp(15.5px,.42vw + 14.4px,17.5px);
  font-weight:300;
  line-height:1.72;
  letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  min-height:100vh;
}
body.bloqueado{overflow:hidden}

img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
h1,h2,h3,h4,h5,h6,p{margin:0}
hr{border:0;border-top:1px solid var(--linea);margin:0}
[hidden]{display:none !important}

/* Foco visible, dorado y elegante. */
:focus-visible{
  outline:2px solid var(--oro);
  outline-offset:4px;
  border-radius:3px;
}
::selection{background:rgba(255,95,31,.32);color:#fff}

/* Barra de desplazamiento coherente con la noche. */
*{scrollbar-width:thin;scrollbar-color:var(--oro-hondo) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:rgba(0,0,0,.35)}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--brasas),var(--oro-hondo));
  border-radius:99px;
  border:2px solid var(--noche);
}

/* Enlace de salto, solo visible con teclado. */
.salto{
  position:fixed;left:16px;top:-100px;z-index:200;
  background:var(--oro);color:#1a1207;
  padding:12px 20px;border-radius:8px;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  transition:top var(--veloz) var(--curva);
}
.salto:focus{top:16px}

/* Aviso que solo aparece si JavaScript está desactivado. */
.aviso-noscript{
  position:relative;z-index:35;
  margin:96px var(--barra) 0;
  max-width:62ch;
  padding:16px 20px;border-radius:10px;
  border:1px solid var(--linea-media);
  background:rgba(11,13,18,.75);
  font-family:var(--mono);font-size:12px;line-height:1.7;letter-spacing:.05em;
  color:var(--crema-70);
}
.aviso-noscript a{color:var(--oro);text-decoration:underline;text-underline-offset:3px}

/* Texto solo para lectores de pantalla. */
.solo-lectores{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ============================================================================
   03. TIPOGRAFÍA Y UTILIDADES
   ============================================================================ */
h1,h2,h3,h4,h5{
  font-family:var(--serif);
  font-weight:600;
  line-height:.98;
  letter-spacing:-.022em;
  color:var(--crema);
  font-variation-settings:"SOFT" 0,"WONK" 1;
  text-wrap:balance;
}

/* Titular de sección: enorme, filoso, con palabra en oro. */
.titular{
  font-size:clamp(2.5rem,7.4vw,6.4rem);
  line-height:.92;
  letter-spacing:-.035em;
  font-weight:600;
}
.titular em,.hero-titular em{
  font-style:italic;
  font-weight:400;
  background:var(--fuego);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  padding-right:.06em;
}

/* Subtítulo / entradilla. */
.entradilla{
  font-size:clamp(1.02rem,1.1vw + .7rem,1.32rem);
  line-height:1.62;
  color:var(--crema-70);
  max-width:56ch;
  font-weight:300;
}

/* Micro-etiqueta tipo consola: «02 — EXPERIENCIA». */
.etiqueta{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono);
  font-size:clamp(10.5px,.62vw + 8.6px,12.5px);
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--oro);
}
.etiqueta::before{
  content:"";width:clamp(24px,3.4vw,58px);height:1px;
  background:linear-gradient(90deg,transparent,var(--oro));
}
.etiqueta--centrada::after{
  content:"";width:clamp(24px,3.4vw,58px);height:1px;
  background:linear-gradient(270deg,transparent,var(--oro));
}
.etiqueta--sin-linea::before{display:none}

/* Cifra gigante de fondo, marca de agua tipográfica. */
.cifra{
  font-family:var(--serif);
  font-size:clamp(8rem,26vw,24rem);
  line-height:.72;
  font-weight:600;
  color:transparent;
  -webkit-text-stroke:1px rgba(244,233,216,.07);
  pointer-events:none;user-select:none;
}

.contenedor{
  width:100%;max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:var(--barra);
}
.contenedor--ancho{max-width:1600px}

.pila{display:flex;flex-direction:column}
.pila--12{gap:12px}.pila--18{gap:18px}.pila--26{gap:26px}.pila--40{gap:40px}

.oro{color:var(--oro)}
.brasa{color:var(--brasas)}
.mono{font-family:var(--mono)}
.italica{font-style:italic}

/* Línea de pelo dorada que separa bloques. */
.filo{
  height:1px;width:100%;
  background:linear-gradient(90deg,transparent,var(--linea-media) 18%,var(--linea-media) 82%,transparent);
}

/* ============================================================================
   04. CAPAS ATMOSFÉRICAS
   ============================================================================ */
/* Grano de película sobre todo el sitio. Aporta «peso» fotográfico. */
#grano{
  position:fixed;inset:-40%;
  z-index:60;pointer-events:none;
  background-image:var(--grano);
  opacity:.05;
  mix-blend-mode:overlay;
  will-change:transform;
  animation:derivaGrano 6s steps(6) infinite;
}
@keyframes derivaGrano{
  0%{transform:translate3d(0,0,0)}
  20%{transform:translate3d(-2%,1%,0)}
  40%{transform:translate3d(1%,-2%,0)}
  60%{transform:translate3d(-1%,2%,0)}
  80%{transform:translate3d(2%,1%,0)}
  100%{transform:translate3d(0,0,0)}
}

/* Viñeta: oscurece las esquinas y empuja la mirada al centro. */
#vineta{
  position:fixed;inset:0;z-index:55;pointer-events:none;
  background:
    radial-gradient(120% 78% at 50% 42%,transparent 34%,rgba(6,7,10,.62) 100%),
    linear-gradient(180deg,rgba(6,7,10,.72) 0%,transparent 22%,transparent 74%,rgba(6,7,10,.86) 100%);
}

/* Rejilla técnica sutil, guiño al «ciber». */
#rejilla{
  position:fixed;inset:0;z-index:54;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(90deg,var(--linea) 1px,transparent 1px),
    linear-gradient(180deg,var(--linea) 1px,transparent 1px);
  background-size:clamp(72px,9vw,150px) clamp(72px,9vw,150px);
  mask-image:radial-gradient(80% 60% at 50% 45%,transparent 30%,#000 100%);
  -webkit-mask-image:radial-gradient(80% 60% at 50% 45%,transparent 30%,#000 100%);
}

/* --- Capa de cintas: el hilo conductor de todo el relato --- */
#cintas{
  position:fixed;inset:0;
  z-index:40;pointer-events:none;
  overflow:visible;
  /* «screen» hace que las cintas brillen sobre la noche y se fundan con la luz
     del atardecer, en lugar de taparlo con una banda opaca. */
  mix-blend-mode:screen;
}
#cintas path{will-change:d,opacity}

/* --- Ondas: anillos que emanan de cada pulsación de cuerda --- */
#ondas{
  position:fixed;inset:0;z-index:21;
  pointer-events:none;overflow:hidden;
}
#ondas i{
  position:absolute;left:0;top:0;
  width:14px;height:14px;margin:-7px 0 0 -7px;
  border-radius:50%;
  border:1px solid rgba(233,189,103,.75);
  box-shadow:0 0 20px rgba(255,122,60,.5),inset 0 0 12px rgba(255,180,90,.35);
  animation:ondaPantalla 1.4s var(--curva-salida) forwards;
  will-change:transform,opacity;
}
@keyframes ondaPantalla{
  0%{opacity:calc(.9 * var(--f,1));transform:scale(calc(.45 + var(--f,1) * .35))}
  100%{opacity:0;transform:scale(calc(8 + var(--f,1) * 12))}
}

/* --- Cortina de transición entre páginas --- */
#transicion{
  position:fixed;inset:0;z-index:150;
  pointer-events:none;
  background:
    radial-gradient(90% 70% at 50% 40%,rgba(15,51,70,.9),transparent 70%),
    var(--vetical-noche);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .62s var(--curva-salida);
}
#transicion.activa{clip-path:inset(0 0 0 0);pointer-events:auto}

/* --- Cursor propio --- */
#cursor,#cursor-punto{
  position:fixed;top:0;left:0;z-index:120;pointer-events:none;
  border-radius:50%;
  mix-blend-mode:difference;
  will-change:transform;
}
#cursor{
  width:38px;height:38px;
  border:1px solid rgba(244,233,216,.75);
  margin:-19px 0 0 -19px;
  transition:width .3s var(--curva),height .3s var(--curva),margin .3s var(--curva),opacity .3s,background-color .3s;
}
#cursor-punto{
  width:5px;height:5px;background:var(--crema);
  margin:-2.5px 0 0 -2.5px;
}
body.cursor-oculto #cursor,body.cursor-oculto #cursor-punto{opacity:0}
body.cursor-activo #cursor{
  width:78px;height:78px;margin:-39px 0 0 -39px;
  background:rgba(244,233,216,.1);
}
body.cursor-texto #cursor{width:8px;height:34px;border-radius:3px;margin:-17px 0 0 -4px}

/* ============================================================================
   05. PRECARGA
   ============================================================================ */
#precarga{
  position:fixed;inset:0;z-index:200;
  background:var(--noche);
  display:grid;place-items:center;
  transition:opacity .8s var(--curva-salida),visibility .8s;
}
#precarga.lista{opacity:0;visibility:hidden}
.precarga-caja{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:clamp(20px,4vh,40px);
  text-align:center;padding:24px;
}
.precarga-logo{
  width:clamp(120px,17vw,196px);height:auto;
  filter:drop-shadow(0 18px 42px rgba(255,95,31,.28));
  animation:latidoLogo 3.4s var(--curva) infinite;
}
@keyframes latidoLogo{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-10px) scale(1.022)}
}
.precarga-barra{
  width:min(58vw,340px);height:1px;background:var(--crema-18);position:relative;overflow:hidden;
}
.precarga-barra i{
  position:absolute;inset:0 100% 0 0;background:var(--fuego);
  transition:right .25s linear;
}
.precarga-datos{
  display:flex;justify-content:space-between;gap:24px;
  width:min(58vw,340px);
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--crema-52);
}
.precarga-palabra{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.1rem,2.6vw,1.7rem);color:var(--crema-52);
}
.precarga-cortina{
  position:absolute;inset:0;z-index:1;
  background:var(--vetical-noche);
}
#precarga.lista .precarga-cortina{animation:alejarCortina 1s var(--curva-salida) forwards}
@keyframes alejarCortina{to{opacity:0;transform:scale(1.08)}}

/* ============================================================================
   06. NAVEGACIÓN
   ============================================================================ */
#cabecera{
  position:fixed;top:0;left:0;right:0;z-index:90;
  padding:clamp(14px,1.7vw,26px) var(--barra);
  display:flex;align-items:center;gap:clamp(16px,2.4vw,40px);
  transition:background-color .5s var(--curva),backdrop-filter .5s,padding .5s var(--curva),transform .5s var(--curva);
}
#cabecera::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,7,10,.86),rgba(6,7,10,0));
  opacity:0;transition:opacity .5s var(--curva);
  pointer-events:none;
}
#cabecera.pegada{
  padding-block:clamp(9px,1vw,14px);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}
#cabecera.pegada::before{opacity:1}
#cabecera.oculta{transform:translateY(-104%)}

.marca{display:flex;align-items:center;gap:14px;position:relative;z-index:2;flex:0 0 auto}
.marca img{width:clamp(46px,4.6vw,62px);height:auto;transition:transform .6s var(--curva)}
.marca:hover img{transform:rotate(-8deg) scale(1.06)}
.marca-texto{display:flex;flex-direction:column;line-height:1}
.marca-nombre{
  font-family:var(--serif);font-weight:600;font-size:clamp(15px,1.3vw,19px);
  letter-spacing:.01em;color:var(--crema);
}
.marca-lema{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--oro);margin-top:5px;
}

.menu{display:flex;align-items:center;gap:clamp(6px,1.5vw,26px);margin-left:auto;position:relative;z-index:2}
.menu a{
  position:relative;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--crema-70);padding:9px 4px;
  transition:color .35s var(--curva);
  white-space:nowrap;
}
.menu a::after{
  content:"";position:absolute;left:4px;right:4px;bottom:4px;height:1px;
  background:var(--fuego);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--curva-salida);
}
.menu a:hover,.menu a.activo{color:var(--crema)}
.menu a:hover::after,.menu a.activo::after{transform:scaleX(1)}
.menu a .num{
  font-size:9px;color:var(--oro);vertical-align:super;margin-right:3px;opacity:.75;
}

.cabecera-acciones{display:flex;align-items:center;gap:14px;position:relative;z-index:2}

/* Progreso de lectura: filo de oro bajo la cabecera. */
#progreso{
  position:fixed;top:0;left:0;height:2px;z-index:95;
  width:0%;background:var(--fuego);
  box-shadow:0 0 18px rgba(255,95,31,.6);
  transition:opacity .4s;
}

/* Botón hamburguesa (móvil). */
#hamburguesa{
  display:none;width:46px;height:46px;position:relative;z-index:2;
  border:1px solid var(--linea-media);border-radius:50%;
  align-items:center;justify-content:center;
}
#hamburguesa span{
  position:absolute;left:50%;width:18px;height:1.5px;background:var(--crema);
  transform:translateX(-50%);transition:transform .4s var(--curva),opacity .3s,background-color .3s;
}
#hamburguesa span:nth-child(1){top:19px}
#hamburguesa span:nth-child(2){top:24.5px}
#hamburguesa span:nth-child(3){top:30px}
body.menu-abierto #hamburguesa span:nth-child(1){transform:translateX(-50%) translateY(5.5px) rotate(45deg)}
body.menu-abierto #hamburguesa span:nth-child(2){opacity:0}
body.menu-abierto #hamburguesa span:nth-child(3){transform:translateX(-50%) translateY(-5.5px) rotate(-45deg)}

/* Cajón lateral para móvil. */
#cajon{
  position:fixed;inset:0;z-index:85;
  background:linear-gradient(160deg,var(--petroleo),var(--noche) 62%);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,9vw,80px) var(--barra);
  clip-path:circle(0% at calc(100% - 46px) 46px);
  transition:clip-path .8s var(--curva-salida);
  pointer-events:none;
}
body.menu-abierto #cajon{clip-path:circle(150% at calc(100% - 46px) 46px);pointer-events:auto}
#cajon nav{display:flex;flex-direction:column;gap:clamp(4px,.6vw,10px)}
#cajon nav a{
  font-family:var(--serif);font-size:clamp(2rem,10vw,3.4rem);font-weight:600;
  letter-spacing:-.03em;line-height:1.08;
  color:var(--crema-70);display:flex;align-items:baseline;gap:14px;
  transition:color .35s,transform .5s var(--curva-salida);
}
#cajon nav a span{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--oro);
}
#cajon nav a:hover,#cajon nav a:focus-visible{color:var(--crema);transform:translateX(14px)}
#cajon .cajon-pie{
  margin-top:clamp(28px,7vh,64px);display:flex;flex-direction:column;gap:8px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--crema-52);
}
#cajon .cajon-pie a:hover{color:var(--oro)}

/* ============================================================================
   07. BOTONES Y ENLACES
   ============================================================================ */
.boton{
  --btn-fondo:var(--fuego);
  position:relative;display:inline-flex;align-items:center;gap:14px;
  padding:17px 30px;border-radius:99px;
  font-family:var(--mono);font-size:12px;letter-spacing:.19em;text-transform:uppercase;
  color:#1c1206;background:var(--btn-fondo);
  overflow:hidden;isolation:isolate;
  box-shadow:0 20px 44px -22px rgba(255,95,31,.75);
  transition:transform .4s var(--curva-salida),box-shadow .4s var(--curva),color .35s;
  will-change:transform;
}
.boton::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,#fff5e2,var(--oro-claro));
  transform:translateY(101%);transition:transform .55s var(--curva-salida);
}
.boton:hover::before,.boton:focus-visible::before{transform:translateY(0)}
.boton:hover,.boton:focus-visible{box-shadow:0 28px 60px -22px rgba(255,95,31,.9)}
.boton__ico{width:16px;height:16px;flex:0 0 auto;transition:transform .5s var(--curva-salida)}
.boton:hover .boton__ico{transform:translateX(4px) rotate(45deg)}

/* Variante fantasma. */
.boton--fantasma{
  color:var(--crema);background:transparent;
  border:1px solid var(--linea-fuerte);box-shadow:none;
}
.boton--fantasma::before{background:var(--fuego)}
.boton--fantasma:hover,.boton--fantasma:focus-visible{color:#1c1206;box-shadow:0 22px 50px -24px rgba(255,95,31,.6)}

.boton--pequeno{padding:12px 22px;font-size:11px}

/* Enlace con subrayado que crece. */
.enlace{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--oro);padding-bottom:4px;
}
.enlace::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform-origin:right;transform:scaleX(1);
  transition:transform .5s var(--curva-salida);
}
.enlace:hover::after{transform:scaleX(0)}
.enlace svg{width:13px;height:13px;transition:transform .5s var(--curva-salida)}
.enlace:hover svg{transform:translate(3px,-3px)}

/* ============================================================================
   08. FONDO CINEMATOGRÁFICO
   ----------------------------------------------------------------------------
   Sustituye al «vídeo de fondo». Sin archivos de vídeo: cuatro fotogramas
   fijos con deriva lenta (efecto Ken Burns) que se funden entre sí según el
   progreso de lectura, más destellos de luz y grano. Si algún día se graba un
   vídeo real, basta con poner data-video en #cinematica (ver app.js).
   ============================================================================ */
/* Respaldo fijo del héroe: cuando la escena 3D no está disponible, este
   lienzo de atardecer ocupa su lugar. Queda por debajo del fondo
   cinematográfico y de la escena WebGL, así que nunca estorba. */
#hero-fondo{
  position:fixed;inset:0;z-index:5;pointer-events:none;
  background:
    radial-gradient(120% 92% at 74% 16%,rgba(255,122,60,.24),transparent 58%),
    radial-gradient(90% 70% at 12% 88%,rgba(47,111,181,.16),transparent 62%),
    linear-gradient(180deg,rgba(6,7,10,.62),rgba(6,7,10,.9) 62%,var(--noche)),
    url("../img/hero-atardecer.jpg") center/cover no-repeat;
}
#cinematica{
  position:fixed;inset:0;z-index:10;
  overflow:hidden;background:var(--noche);
  opacity:0;transition:opacity 1.2s var(--curva);
}
#cinematica.visible{opacity:1}
.cine-fotograma{
  position:absolute;inset:-6%;
  opacity:0;
  transition:opacity 1.4s var(--curva);
  will-change:opacity,transform;
}
.cine-fotograma img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.82) contrast(1.06) brightness(.62);
}
.cine-fotograma::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(90% 70% at 50% 50%,transparent 20%,rgba(6,7,10,.55) 78%),
    linear-gradient(180deg,rgba(6,7,10,.5),transparent 30%,transparent 60%,rgba(6,7,10,.75));
}
.cine-fotograma.activo{opacity:1}
.cine-fotograma video{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.82) contrast(1.06) brightness(.62);
}

/* Destello cálido que respira, como un foco de escenario. */
.cine-destello{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 44% at 74% 22%,rgba(255,122,60,.2),transparent 70%);
  mix-blend-mode:screen;
  animation:respirar 9s ease-in-out infinite;
}
@keyframes respirar{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}

/* Barrido de luz diagonal, muy tenue. */
.cine-barrido{
  position:absolute;inset:-30%;pointer-events:none;
  background:linear-gradient(74deg,transparent 42%,rgba(244,233,216,.055) 50%,transparent 58%);
  animation:barrido 13s linear infinite;
}
@keyframes barrido{0%{transform:translateX(-38%)}100%{transform:translateX(38%)}}

/* ============================================================================
   09. HÉROE
   ============================================================================ */
#lienzo{
  position:fixed;inset:0;z-index:20;
  width:100%;height:100%;
  pointer-events:none;               /* el arrastre se captura en .hero-zona */
}
#lienzo.activo{pointer-events:auto}

.hero{
  position:relative;z-index:30;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(94px,14vh,164px) 0 clamp(30px,5.6vh,66px);
  pointer-events:none;
}
.hero-zona{
  position:absolute;z-index:22;top:8vh;right:0;
  width:min(62vw,760px);height:84vh;
  cursor:grab;pointer-events:auto;
}
.hero-zona.arrastrando{cursor:grabbing}
.hero-rejilla{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,4vw,64px);align-items:end;
  width:100%;
}
.hero-texto{pointer-events:auto;max-width:min(100%,720px)}
.hero-titular{
  font-size:clamp(2.5rem,7.2vw,6.9rem);
  line-height:.88;
  letter-spacing:-.045em;
  font-weight:600;
  margin-block:.24em .44em;
}
.hero-titular .linea{display:block;overflow:hidden}
.hero-titular .linea i{
  display:block;font-style:normal;
  transform:translateY(115%);
  animation:subirLinea 1.1s var(--curva-salida) forwards;
}
.hero-titular .linea:nth-child(2) i{animation-delay:.1s}
.hero-titular .linea:nth-child(3) i{animation-delay:.2s}
.hero-titular .linea:nth-child(4) i{animation-delay:.3s}
@keyframes subirLinea{to{transform:translateY(0)}}

.hero-manifiesto{
  font-size:clamp(.98rem,.85vw + .74rem,1.2rem);
  color:var(--crema-70);max-width:44ch;font-weight:300;
}
.hero-acciones{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,1.8vw,26px);
  margin-top:clamp(24px,3.4vh,42px);
}

/* Ficha lateral: datos rápidos. */
.hero-lateral{
  display:flex;flex-direction:column;gap:clamp(16px,2.4vh,30px);
  align-items:flex-end;text-align:right;
  pointer-events:auto;
}
.hero-indicio{
  display:flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--crema-52);
}
.hero-indicio i{
  display:block;width:52px;height:1px;background:var(--linea-fuerte);position:relative;overflow:hidden;
}
.hero-indicio i::after{
  content:"";position:absolute;inset:0;background:var(--oro);
  animation:recorrerIndicio 2.6s var(--curva) infinite;
}
@keyframes recorrerIndicio{
  0%{transform:translateX(-100%)}
  60%,100%{transform:translateX(100%)}
}
.hero-pistas{
  display:flex;flex-direction:column;gap:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--crema-34);
}
.hero-pistas b{color:var(--crema-70);font-weight:400}

/* Barra inferior con datos y aviso de interacción. */
.hero-pie{
  position:relative;z-index:2;
  margin-top:clamp(30px,6vh,70px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px;pointer-events:auto;
}
.hero-pie .aviso-raton{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--crema-52);
}
.hero-pie .aviso-raton s{position:relative;display:block;width:15px;height:22px;border:1px solid var(--linea-fuerte);border-radius:9px;text-decoration:none}
.hero-pie .aviso-raton s::after{
  content:"";position:absolute;left:50%;top:4px;width:2px;height:5px;border-radius:2px;
  background:var(--oro);transform:translateX(-50%);
  animation:rueda 1.9s var(--curva) infinite;
}
@keyframes rueda{0%{opacity:0;transform:translate(-50%,0)}35%{opacity:1}100%{opacity:0;transform:translate(-50%,9px)}}

.hero-metricas{
  display:flex;gap:clamp(18px,3vw,44px);
}
.hero-metricas div{
  display:flex;flex-direction:column;
}
.hero-metricas b{
  font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.3rem);font-weight:600;
  line-height:1;color:var(--oro);
}
.hero-metricas span{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--crema-52);margin-top:7px;
}

/* Aviso si WebGL no está disponible. */
.hero-aviso{
  position:absolute;right:var(--barra);bottom:12vh;z-index:24;
  max-width:270px;padding:14px 16px;border:1px solid var(--linea);border-radius:10px;
  background:rgba(11,13,18,.72);backdrop-filter:blur(8px);
  font-family:var(--mono);font-size:10.5px;line-height:1.6;letter-spacing:.06em;
  color:var(--crema-52);pointer-events:none;
}

/* ============================================================================
   10. SECCIONES: ARMAZÓN Y REVELADO
   ============================================================================ */
.principal{position:relative;z-index:30}

.seccion{
  position:relative;
  padding-block:clamp(88px,15vh,190px);
}
.seccion--apretada{padding-block:clamp(64px,10vh,120px)}
.seccion-cabecera{
  display:flex;flex-direction:column;gap:clamp(14px,2vw,24px);
  margin-bottom:clamp(38px,6vh,72px);
}
.seccion-cabecera--partida{
  flex-direction:row;align-items:flex-end;justify-content:space-between;
  gap:clamp(24px,5vw,80px);flex-wrap:wrap;
}
.seccion-cabecera--partida .entradilla{max-width:38ch}

/* Fleco decorativo: las cintas tiemblan al entrar.
   El estado oculto va atado a `.tiene-js` (que añade un script en el <head>):
   así, si JavaScript no llega a ejecutarse, el contenido se ve igualmente. */
.tiene-js .revela{
  opacity:0;transform:translateY(38px);
  transition:opacity 1s var(--curva-salida),transform 1.1s var(--curva-salida);
  transition-delay:var(--retardo,0ms);
  will-change:opacity,transform;
}
.tiene-js .revela.visible{opacity:1;transform:none}

/* Variantes de entrada. */
.tiene-js .revela--izq{transform:translateX(-46px)}
.tiene-js .revela--der{transform:translateX(46px)}
.tiene-js .revela--zoom{transform:scale(.94)}
.tiene-js .revela--cortina{clip-path:inset(0 0 100% 0);transform:none;opacity:1}
.tiene-js .revela--cortina.visible{clip-path:inset(0 0 0 0)}

/* ============================================================================
   11. 02 · EXPERIENCIA
   ----------------------------------------------------------------------------
   Carrusel horizontal solidario con el scroll vertical: la sección se fija y
   la pista se desplaza en X. Con teclado y sin scroll se convierte en una
   rejilla apilada.
   ============================================================================ */
#experiencia{position:relative}
.exp-pista-envoltorio{
  position:relative;
  height:calc(100svh * var(--alturas,3));
}
.exp-fijo{
  position:sticky;top:0;height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
  padding-top:clamp(70px,11vh,120px);
}
.exp-cabecera{
  display:flex;align-items:flex-end;justify-content:space-between;gap:30px;
  padding-inline:var(--barra);margin-bottom:clamp(20px,3.4vh,40px);
}
.exp-contador{
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--crema-52);
}
.exp-contador b{color:var(--oro);font-weight:400}
.exp-pista{
  display:flex;gap:clamp(16px,2.2vw,34px);
  padding-inline:var(--barra);
  will-change:transform;
}
.exp-tarjeta{
  position:relative;flex:0 0 auto;
  width:clamp(258px,29vw,430px);
  border-radius:var(--radio-lg);
  overflow:hidden;isolation:isolate;
  background:var(--pizarra);
  border:1px solid var(--linea);
  transition:transform .7s var(--curva-salida),box-shadow .7s var(--curva),border-color .5s;
  will-change:transform;
}
.exp-tarjeta:hover,.exp-tarjeta:focus-within{
  border-color:rgba(233,189,103,.4);
  box-shadow:var(--sombra-alta);
}
.exp-media{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
}
.exp-media img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.86) contrast(1.05) brightness(.76);
  transform:scale(1.06);
  transition:transform 1.5s var(--curva-salida),filter .8s var(--curva),scale .6s;
}
/* Distorsión líquida en el hover: la imagen respira y se ondula vía SVG. */
.exp-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(6,7,10,.55) 68%,rgba(6,7,10,.94));
  transition:opacity .6s var(--curva);
}
.exp-tarjeta:hover .exp-media img{transform:scale(1.14);filter:saturate(1.02) contrast(1.08) brightness(.86)}
.exp-media .onda{
  position:absolute;inset:0;opacity:0;transition:opacity .6s var(--curva);
  mix-blend-mode:soft-light;
}
.exp-tarjeta:hover .exp-media .onda{opacity:.85}

.exp-cuerpo{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:clamp(20px,2.2vw,30px);
  display:flex;flex-direction:column;gap:12px;
}
.exp-num{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--oro);
}
.exp-titulo{
  font-size:clamp(1.5rem,2.4vw,2.15rem);
  letter-spacing:-.028em;line-height:1;
}
.exp-desc{
  font-size:.92rem;color:var(--crema-70);line-height:1.62;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .7s var(--curva-salida),opacity .5s var(--curva),margin .7s var(--curva-salida);
}
.exp-tarjeta:hover .exp-desc,.exp-tarjeta:focus-within .exp-desc{
  max-height:190px;opacity:1;margin-top:4px;
}
.exp-lista{
  display:flex;flex-wrap:wrap;gap:7px;
}
.exp-lista li{
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--crema-52);border:1px solid var(--linea);border-radius:99px;
  padding:5px 11px;
  transition:color .4s,border-color .4s;
}
.exp-tarjeta:hover .exp-lista li{color:var(--crema-70);border-color:var(--linea-media)}
.exp-flecha{
  position:absolute;top:clamp(18px,2vw,26px);right:clamp(18px,2vw,26px);z-index:4;
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(244,233,216,.3);
  background:rgba(6,7,10,.45);backdrop-filter:blur(6px);
  color:var(--crema);
  transform:scale(.7);opacity:0;
  transition:transform .6s var(--curva-salida),opacity .5s,background-color .5s,color .4s;
}
.exp-tarjeta:hover .exp-flecha,.exp-tarjeta:focus-within .exp-flecha{
  transform:scale(1);opacity:1;background:var(--oro);color:#1c1206;border-color:transparent;
}
.exp-flecha svg{width:16px;height:16px}

/* Riel de progreso y controles. */
.exp-riel{
  margin-top:clamp(20px,3.4vh,38px);
  padding-inline:var(--barra);
  display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);
}
.exp-riel-barra{
  position:relative;flex:1;height:1px;background:var(--linea-media);
}
.exp-riel-barra i{
  position:absolute;left:0;top:-1px;height:3px;width:0;
  background:var(--fuego);border-radius:2px;
  box-shadow:0 0 14px rgba(255,95,31,.6);
}
.exp-flechas{display:flex;gap:10px}
.exp-flechas button{
  width:48px;height:48px;border-radius:50%;
  border:1px solid var(--linea-media);color:var(--crema);
  display:grid;place-items:center;
  transition:background-color .4s var(--curva),color .4s,transform .4s var(--curva-salida),border-color .4s;
}
.exp-flechas button:hover{background:var(--crema);color:var(--noche);border-color:transparent;transform:scale(1.08)}
.exp-flechas button svg{width:16px;height:16px}

/* ============================================================================
   12. 03 · SONIDO
   ============================================================================ */
#sonido{
  position:relative;
  background:linear-gradient(180deg,transparent,rgba(8,32,46,.42) 26%,rgba(8,32,46,.42) 74%,transparent);
}
.sonido-rejilla{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(34px,5vw,86px);align-items:center;
}
/* --- Tocadiscos --- */
.tocadiscos{
  position:relative;width:min(100%,460px);aspect-ratio:1;
  margin-inline:auto;
}
.tocadiscos-plato{
  position:absolute;inset:0;border-radius:50%;
  background:
    conic-gradient(from 210deg,rgba(244,233,216,.06),rgba(244,233,216,.015) 25%,rgba(244,233,216,.06) 50%,rgba(244,233,216,.015) 75%,rgba(244,233,216,.06)),
    radial-gradient(circle at 50% 50%,#0a0b0e 42%,#16181d 70%,#0a0b0e 100%);
  box-shadow:
    inset 0 0 0 1px rgba(244,233,216,.09),
    inset 0 0 60px rgba(0,0,0,.9),
    0 50px 90px -40px rgba(0,0,0,.95);
  animation:girarPlato 8s linear infinite;
  animation-play-state:paused;
}
.tocadiscos.sonando .tocadiscos-plato{animation-play-state:running}
@keyframes girarPlato{to{transform:rotate(360deg)}}
/* Surcos del vinilo, generados con gradientes repetidos (sin imágenes). */
.tocadiscos-surcos{
  position:absolute;inset:12%;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,
    rgba(244,233,216,.05) 0 1px,
    transparent 1px 5px);
  opacity:.85;
  pointer-events:none;
}
.tocadiscos-sello{
  position:absolute;top:50%;left:50%;width:31%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 38% 32%,var(--brasas),var(--naranja) 42%,var(--oro-hondo) 100%);
  display:grid;place-items:center;
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 12px 34px -12px rgba(255,95,31,.7);
}
.tocadiscos-sello img{width:62%;height:auto;filter:brightness(0) saturate(0)}
.tocadiscos-eje{
  position:absolute;top:50%;left:50%;width:11px;aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 30%,#fff,var(--crema-52) 60%,#2a2a2a);
  box-shadow:0 0 12px rgba(0,0,0,.9);
}
/* Aguja */
.tocadiscos-aguja{
  position:absolute;top:-4%;right:2%;width:34%;height:auto;
  transform-origin:88% 12%;
  transform:rotate(-26deg);
  transition:transform 1.1s var(--curva-salida);
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.85));
}
.tocadiscos.sonando .tocadiscos-aguja{transform:rotate(-6deg)}

/* Visualizador circular: reacciona al analizador de audio real. */
#visualizador{
  position:absolute;inset:-9%;width:118%;height:118%;
  pointer-events:none;
}
/* Ecualizador de barras */
#ecualizador{
  width:100%;height:74px;margin-top:clamp(22px,3vh,34px);
  opacity:.9;
}

/* --- Panel de pistas --- */
.pistas{
  display:flex;flex-direction:column;
  border-top:1px solid var(--linea);
}
.pista{
  position:relative;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(14px,2vw,28px);
  padding:clamp(16px,2.2vh,24px) clamp(4px,1vw,12px);
  border-bottom:1px solid var(--linea);
  text-align:left;width:100%;
  transition:background-color .5s var(--curva),padding .5s var(--curva);
  cursor:pointer;
}
.pista::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--fuego);transform:scaleY(0);transform-origin:bottom;
  transition:transform .5s var(--curva-salida);
}
.pista:hover{background:rgba(244,233,216,.03);padding-left:clamp(14px,2vw,26px)}
.pista:hover::before,.pista.activa::before{transform:scaleY(1)}
.pista-num{
  font-family:var(--mono);font-size:11px;color:var(--crema-34);letter-spacing:.14em;width:2.4em;
}
.pista.activa .pista-num{color:var(--oro)}
.pista-cuerpo{display:flex;flex-direction:column;gap:5px;min-width:0}
.pista-titulo{
  font-family:var(--serif);font-size:clamp(1.15rem,1.8vw,1.6rem);font-weight:600;
  letter-spacing:-.02em;color:var(--crema-88);
  transition:color .4s;
}
.pista:hover .pista-titulo,.pista.activa .pista-titulo{color:var(--crema)}
.pista-meta{
  display:flex;flex-wrap:wrap;gap:10px 18px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--crema-52);
}
.pista-meta em{font-style:normal;color:var(--oro)}
.pista-estado{
  display:flex;align-items:center;gap:11px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--crema-52);
}
/* Barras del «ahora suena» */
.pista-ondas{display:flex;align-items:flex-end;gap:2.5px;height:16px}
.pista-ondas i{display:block;width:2.5px;background:var(--oro);height:20%;border-radius:2px}
.pista.activa .pista-ondas i{animation:ondula .9s ease-in-out infinite}
.pista-ondas i:nth-child(2){animation-delay:.14s}
.pista-ondas i:nth-child(3){animation-delay:.28s}
.pista-ondas i:nth-child(4){animation-delay:.42s}
@keyframes ondula{0%,100%{height:22%}50%{height:100%}}

.sonido-controles{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,2vw,22px);
  margin-top:clamp(24px,3.4vh,38px);
}
.sonido-play{
  width:clamp(62px,6vw,76px);aspect-ratio:1;border-radius:50%;
  background:var(--fuego);color:#1c1206;
  display:grid;place-items:center;
  box-shadow:0 20px 48px -20px rgba(255,95,31,.85);
  transition:transform .5s var(--curva-salida),box-shadow .5s;
  flex:0 0 auto;
}
.sonido-play:hover{transform:scale(1.07)}
.sonido-play svg{width:24px;height:24px}
.sonido-tiempo{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--crema-52);
  display:flex;align-items:center;gap:8px;
}
.sonido-tiempo b{color:var(--crema-88);font-weight:400}
.sonido-nota{
  font-family:var(--mono);font-size:10.5px;line-height:1.7;letter-spacing:.06em;
  color:var(--crema-34);border-left:1px solid var(--linea);padding-left:14px;max-width:34ch;
}
.sonido-nota b{color:var(--crema-52);font-weight:400}

/* ============================================================================
   13. 04 · LEGADO
   ============================================================================ */
#legado{position:relative}
/* La espina solo aporta el contexto de posicionamiento del hilo; cada hito
   viaja en su propia fila de tres columnas: [texto] [nudo] [texto]. */
.legado-espina{position:relative}
.legado-hitos{display:flex;flex-direction:column}
/* Hilo vertical dorado que se dibuja al hacer scroll. */
.legado-hilo{
  position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:var(--linea);transform:translateX(-50%);
}
.legado-hilo i{
  position:absolute;top:0;left:-1px;width:3px;height:0;
  background:var(--fuego);border-radius:2px;
  box-shadow:0 0 16px rgba(255,95,31,.55);
}
.legado-fila{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:0 clamp(16px,3vw,52px);align-items:center;
}
.hito{
  position:relative;
  padding-block:clamp(26px,5vh,64px);
  display:flex;flex-direction:column;gap:14px;
}
/* Colocación alterna: el texto salta de un lado al otro del hilo. */
.legado-fila:nth-child(odd) .hito{grid-column:1;align-items:flex-end;text-align:right}
.legado-fila:nth-child(even) .hito{grid-column:3;align-items:flex-start;text-align:left}
.hito-marca{
  grid-column:2;position:relative;display:flex;align-items:center;justify-content:center;
}
.hito-marca span{
  position:absolute;width:13px;height:13px;border-radius:50%;
  background:var(--noche);border:1px solid var(--oro-hondo);
  transition:background-color .6s var(--curva),border-color .6s,transform .6s var(--curva-salida),box-shadow .6s;
}
.hito-marca.dentro span{
  background:var(--fuego);border-color:var(--oro-claro);transform:scale(1.5);
  box-shadow:0 0 0 6px rgba(255,95,31,.14),0 0 24px rgba(255,95,31,.6);
}
.hito-anio{
  font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--oro);
}
.hito-titulo{
  font-size:clamp(1.45rem,2.8vw,2.5rem);letter-spacing:-.03em;line-height:1.02;
  max-width:20ch;
}
.hito-texto{
  font-size:.95rem;color:var(--crema-70);line-height:1.68;max-width:42ch;
}
.hito-foto{
  position:relative;width:min(100%,330px);margin-top:8px;
  border-radius:6px;overflow:hidden;
  border:7px solid #f6f1e6;border-bottom-width:38px;
  box-shadow:var(--sombra-baja);
  transform:rotate(var(--giro,-2.4deg));
  transition:transform .8s var(--curva-salida),box-shadow .8s var(--curva);
  will-change:transform;
}
.hito-foto:hover{transform:rotate(0deg) scale(1.035);z-index:5;box-shadow:var(--sombra-alta)}
.hito-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.9) contrast(1.04)}
.hito-foto figcaption{
  position:absolute;left:0;right:0;bottom:-33px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#6b6154;text-align:center;
}

/* Cita grande del legado. */
.legado-cita{
  margin-block:clamp(48px,9vh,120px);
  text-align:center;
  font-family:var(--serif);
  font-size:clamp(1.4rem,3.6vw,3.1rem);
  line-height:1.24;font-weight:400;font-style:italic;
  color:var(--crema);
  max-width:22ch;margin-inline:auto;
  letter-spacing:-.02em;
}
.legado-cita::before{
  content:"“";display:block;
  font-size:clamp(3rem,8vw,6rem);line-height:.6;color:var(--oro);font-style:normal;
  margin-bottom:.12em;
}
.legado-cita cite{
  display:block;margin-top:clamp(20px,3vh,32px);
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  font-style:normal;color:var(--crema-52);
}

/* --- Testimonios --- */
.testimonios{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(282px,1fr));
  gap:clamp(16px,2.2vw,30px);
}
.testimonio{
  position:relative;
  padding:clamp(26px,3vw,40px);
  border:1px solid var(--linea);border-radius:var(--radio-lg);
  background:linear-gradient(160deg,rgba(244,233,216,.045),rgba(244,233,216,.012));
  display:flex;flex-direction:column;gap:18px;
  overflow:hidden;
  transition:border-color .6s var(--curva),transform .7s var(--curva-salida),background-color .6s;
}
.testimonio::after{
  content:"";position:absolute;top:-40%;right:-30%;width:66%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(255,95,31,.16),transparent 68%);
  opacity:0;transition:opacity .7s var(--curva);pointer-events:none;
}
.testimonio:hover{border-color:rgba(233,189,103,.34);transform:translateY(-6px)}
.testimonio:hover::after{opacity:1}
.testimonio-estrellas{display:flex;gap:4px;color:var(--oro)}
.testimonio-estrellas svg{width:14px;height:14px}
.testimonio-texto{
  font-family:var(--serif);font-size:clamp(1.02rem,1.4vw,1.22rem);
  line-height:1.6;color:var(--crema-88);font-weight:400;
  flex:1;
}
.testimonio-autor{display:flex;align-items:center;gap:13px;margin-top:auto}
.testimonio-monograma{
  width:42px;height:42px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;
  background:var(--fuego);color:#1c1206;
  font-family:var(--serif);font-weight:600;font-size:16px;
}
.testimonio-autor b{display:block;font-weight:500;font-size:.95rem;color:var(--crema)}
.testimonio-autor span{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--crema-52);
}

/* ============================================================================
   14. 05 · GALERÍA DE CINTAS
   ----------------------------------------------------------------------------
   Cinta horizontal de fotografías con desfase (marquesina) y marco SVG de
   cintas de colores, guiño a las cintas de la capa del tuno.
   ============================================================================ */
#galeria{position:relative;overflow:hidden}
.cintas-marco{
  position:absolute;left:0;right:0;height:clamp(60px,10vw,130px);
  pointer-events:none;opacity:.9;
}
.cintas-marco--arriba{top:0}
.cintas-marco--abajo{bottom:0;transform:scaleY(-1)}
.cintas-marco svg{width:100%;height:100%}

.marquesina{
  display:flex;gap:clamp(12px,1.6vw,22px);
  width:max-content;
  animation:desfilar 58s linear infinite;
}
.marquesina--reversa{animation-direction:reverse;animation-duration:76s}
.marquesina-pista:hover .marquesina{animation-play-state:paused}
@keyframes desfilar{to{transform:translateX(-50%)}}
.marco-foto{
  position:relative;flex:0 0 auto;
  width:clamp(190px,23vw,336px);aspect-ratio:3/4;
  border-radius:8px;overflow:hidden;
  border:1px solid var(--linea);
  filter:grayscale(.55) contrast(1.06) brightness(.82);
  transition:filter .7s var(--curva),transform .7s var(--curva-salida),border-color .6s;
}
.marco-foto:hover{filter:none;transform:scale(1.045);border-color:rgba(233,189,103,.45)}
.marco-foto img{width:100%;height:100%;object-fit:cover}
.marco-foto figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:34px 14px 12px;
  background:linear-gradient(180deg,transparent,rgba(6,7,10,.9));
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--crema-70);
  opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--curva),transform .6s var(--curva-salida);
}
.marco-foto:hover figcaption{opacity:1;transform:none}

/* Cita de cierre de galería. */
.galeria-pie{
  margin-top:clamp(34px,6vh,70px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px;
}

/* ============================================================================
   15. 06 · CONTACTO
   ============================================================================ */
#contacto{position:relative}
.contacto-rejilla{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(34px,5vw,84px);align-items:start;
}
.contacto-datos{display:flex;flex-direction:column;gap:clamp(20px,3vh,32px)}
.dato{
  display:flex;flex-direction:column;gap:6px;
  padding-bottom:clamp(16px,2.4vh,24px);
  border-bottom:1px solid var(--linea);
}
.dato-rotulo{
  font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--crema-34);
}
.dato-valor{
  font-family:var(--serif);font-size:clamp(1.1rem,1.9vw,1.55rem);font-weight:500;
  color:var(--crema);letter-spacing:-.015em;
  transition:color .4s;
  word-break:break-word;
}
a.dato-valor:hover{color:var(--oro)}
.dato-nota{font-size:.88rem;color:var(--crema-52);line-height:1.6}

/* --- Formulario por pasos --- */
.formulario{
  position:relative;
  border:1px solid var(--linea);border-radius:var(--radio-lg);
  background:linear-gradient(165deg,rgba(244,233,216,.05),rgba(244,233,216,.01));
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding:clamp(24px,3.2vw,48px);
  overflow:hidden;
}
.form-progreso{
  display:flex;align-items:center;gap:12px;margin-bottom:clamp(26px,4vh,42px);
}
.form-progreso-barra{
  position:relative;flex:1;height:2px;background:var(--crema-18);border-radius:2px;overflow:hidden;
}
.form-progreso-barra i{
  position:absolute;inset:0 100% 0 0;background:var(--fuego);
  transition:right .6s var(--curva-salida);
}
.form-progreso-texto{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--crema-52);
  white-space:nowrap;
}
.form-progreso-texto b{color:var(--oro);font-weight:400}

.paso{display:none;flex-direction:column;gap:clamp(18px,2.6vh,28px)}
.paso.activo{display:flex;animation:entrarPaso .6s var(--curva-salida) both}
@keyframes entrarPaso{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.paso-titulo{
  font-size:clamp(1.5rem,2.6vw,2.15rem);letter-spacing:-.028em;
}
.paso-ayuda{font-size:.9rem;color:var(--crema-52);margin-top:-6px}

.campo{display:flex;flex-direction:column;gap:9px;min-width:0}
.campo label,.campo .rotulo{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--crema-52);
}
.campo label .req{color:var(--brasas)}
.campo input,.campo select,.campo textarea{
  width:100%;
  padding:15px 2px;
  background:transparent;border:0;border-bottom:1px solid var(--linea-media);
  color:var(--crema);font-size:1rem;font-weight:300;
  transition:border-color .4s var(--curva),background-color .4s;
  border-radius:0;
  font-family:var(--sans);
}
.campo textarea{resize:vertical;min-height:96px;line-height:1.6}
.campo select{appearance:none;cursor:pointer}
.campo select option{background:var(--pizarra);color:var(--crema)}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--oro);
}
.campo input::placeholder,.campo textarea::placeholder{color:var(--crema-34)}
.campo.error input,.campo.error select,.campo.error textarea{border-color:var(--cinta-roja)}
.campo .error-texto{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:#e57366;
  min-height:0;
}
.campo-fila{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,28px)}

/* Selector de tipo de evento: fichas elegantes. */
.opciones{display:flex;flex-wrap:wrap;gap:10px}
.opcion{
  position:relative;
  border:1px solid var(--linea-media);border-radius:99px;
  padding:11px 19px;
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--crema-70);
  transition:color .4s,border-color .4s,background-color .4s,transform .4s var(--curva-salida);
}
.opcion input{position:absolute;inset:0;opacity:0;cursor:pointer}
.opcion:hover{border-color:var(--linea-fuerte);color:var(--crema);transform:translateY(-2px)}
.opcion:has(input:checked){
  background:var(--fuego);color:#1c1206;border-color:transparent;font-weight:500;
}
.opcion:has(input:focus-visible){outline:2px solid var(--oro);outline-offset:3px}

/* Casilla de privacidad. */
.consentimiento{
  display:flex;gap:13px;align-items:flex-start;
  font-size:.88rem;color:var(--crema-52);line-height:1.6;
}
.consentimiento input{
  width:20px;height:20px;flex:0 0 auto;margin-top:2px;
  appearance:none;border:1px solid var(--linea-fuerte);border-radius:5px;
  background:transparent;cursor:pointer;position:relative;
  transition:background-color .3s,border-color .3s;
}
.consentimiento input:checked{background:var(--fuego);border-color:transparent}
.consentimiento input:checked::after{
  content:"";position:absolute;left:6px;top:2.5px;width:6px;height:11px;
  border:solid #1c1206;border-width:0 2px 2px 0;transform:rotate(43deg);
}
.consentimiento a{color:var(--oro);text-decoration:underline;text-underline-offset:3px}

/* Navegación del formulario. */
.form-pie{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  margin-top:clamp(8px,1.6vh,16px);
}
.form-pie .grupo{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.form-atras{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--crema-52);
  transition:color .4s;
}
.form-atras:hover{color:var(--crema)}
.form-atras svg{width:13px;height:13px}

/* Resumen antes de enviar. */
.resumen{
  display:flex;flex-direction:column;gap:12px;
  padding:clamp(18px,2.4vw,26px);
  border:1px solid var(--linea);border-radius:var(--radio);
  background:rgba(6,7,10,.4);
}
.resumen div{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.resumen dt{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--crema-34);
}
.resumen dd{margin:0;color:var(--crema-88);text-align:right;font-size:.95rem}

/* Estado de éxito. */
.exito{
  display:none;flex-direction:column;align-items:center;gap:20px;text-align:center;
  padding:clamp(20px,4vh,40px) 0;
}
.exito.activo{display:flex;animation:entrarPaso .7s var(--curva-salida) both}
.exito-sello{
  width:84px;height:84px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--fuego);color:#1c1206;
  box-shadow:0 0 0 1px rgba(255,255,255,.16),0 24px 54px -20px rgba(255,95,31,.8);
}
.exito-sello svg{width:34px;height:34px}
.exito h3{font-size:clamp(1.6rem,3vw,2.4rem)}
.exito p{color:var(--crema-70);max-width:46ch}
.exito-acciones{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:8px}
.exito-correo{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--oro);
}

/* Estado de envío: el formulario se retira y queda la confirmación. */
.formulario.enviado .form-progreso,
.formulario.enviado .paso,
.formulario.enviado .form-pie{display:none}

/* Consentimiento sin marcar. */
.campo.error .consentimiento{color:#e57366}
.campo.error .consentimiento input{border-color:var(--cinta-roja)}

/* El bloque de acciones del formulario queda siempre a la derecha. */
.form-pie .grupo{margin-left:auto}

/* ============================================================================
   16. PIE
   ============================================================================ */
#pie{
  position:relative;z-index:30;
  padding-block:clamp(52px,9vh,110px) clamp(28px,4vh,52px);
  border-top:1px solid var(--linea);
  background:linear-gradient(180deg,transparent,rgba(6,7,10,.9));
}
.pie-rejilla{
  display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));
  gap:clamp(28px,4vw,64px);
  padding-bottom:clamp(34px,5vh,60px);
}
.pie-marca{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.pie-marca img{width:clamp(52px,5vw,70px)}
.pie-lema{font-size:.94rem;color:var(--crema-52);max-width:36ch;line-height:1.7}
.pie-columna h4{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--oro);font-weight:400;margin-bottom:20px;
}
.pie-columna ul{display:flex;flex-direction:column;gap:12px}
.pie-columna a{
  font-size:.95rem;color:var(--crema-70);transition:color .35s,transform .45s var(--curva-salida);
  display:inline-block;
}
.pie-columna a:hover{color:var(--oro);transform:translateX(5px)}
.pie-legal{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  padding-top:clamp(24px,3vh,36px);border-top:1px solid var(--linea);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--crema-34);
}
.pie-legal a:hover{color:var(--oro)}
.pie-legal nav{display:flex;flex-wrap:wrap;gap:20px}

/* Botón «volver arriba». */
#subir{
  position:fixed;right:var(--barra);bottom:var(--barra);z-index:80;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(11,13,18,.8);border:1px solid var(--linea-media);color:var(--crema);
  backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .5s var(--curva),visibility .5s,transform .5s var(--curva-salida),background-color .4s,color .4s;
}
#subir.visible{opacity:1;visibility:visible;transform:none}
#subir:hover{background:var(--fuego);color:#1c1206;border-color:transparent}
#subir svg{width:16px;height:16px}

/* ============================================================================
   17. RESPONSIVE
   ============================================================================ */
@media (max-width:1180px){
  .menu{gap:12px}
  .hero-rejilla{grid-template-columns:1fr}
  .hero-lateral{align-items:flex-start;text-align:left;flex-direction:row;flex-wrap:wrap;gap:26px}
  .hero-zona{width:100%;right:auto;left:0;top:0;height:100%}
  .hero{cursor:default}
}

@media (max-width:980px){
  .menu{display:none}
  #hamburguesa{display:flex}
  .sonido-rejilla{grid-template-columns:1fr;gap:44px}
  .contacto-rejilla{grid-template-columns:1fr;gap:40px}
  .pie-rejilla{grid-template-columns:1fr 1fr}
  .pie-marca-col{grid-column:1 / -1}
  /* La sección horizontal pasa a rejilla vertical: más cómodo en táctil. */
  .exp-pista-envoltorio{height:auto}
  .exp-fijo{position:static;height:auto;overflow:visible;padding-top:0}
  .exp-pista{
    flex-direction:column;transform:none !important;
    width:100%;padding-inline:var(--barra);gap:24px;
  }
  .exp-tarjeta{width:100%}
  .exp-media{aspect-ratio:16/11}
  .exp-desc{max-height:none;opacity:1}
  .exp-flecha{transform:scale(1);opacity:1}
  .exp-flechas,.exp-riel-barra{display:none}
  .exp-riel{justify-content:center}
}

@media (max-width:760px){
  :root{--barra:20px}
  .seccion{padding-block:clamp(64px,11vh,110px)}
  .hero{padding-top:120px}
  .hero-pie{flex-direction:column;align-items:flex-start;gap:24px}
  .hero-metricas{gap:22px}
  .legado-hilo,.hito-marca{display:none}
  .legado-fila{grid-template-columns:1fr;gap:0}
  .legado-fila .hito{grid-column:1 !important;align-items:flex-start !important;text-align:left !important}
  .hito-foto{width:min(100%,290px)}
  .campo-fila{grid-template-columns:1fr}
  .pie-rejilla{grid-template-columns:1fr}
  .marco-foto{width:60vw;aspect-ratio:3/4}
  .testimonios{grid-template-columns:1fr}
  .resumen div{flex-direction:column;gap:4px}
  .resumen dd{text-align:left}
  #subir{right:18px;bottom:18px}
  #cursor,#cursor-punto{display:none}
}

@media (max-width:480px){
  .boton{padding:15px 22px;font-size:11px}
  .hero-metricas{flex-wrap:wrap;gap:16px 26px}
  .formulario{padding:20px 16px}
}

/* ============================================================================
   18. ACCESIBILIDAD Y PREFERENCIAS
   ============================================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .tiene-js .revela{opacity:1;transform:none;clip-path:none}
  .hero-titular .linea i{transform:none}
  #grano{animation:none}
  .marquesina{animation:none}
  .tocadiscos-plato{animation:none}
}

/* Modo alto contraste del sistema. */
@media (prefers-contrast:more){
  :root{
    --crema-70:rgba(244,233,216,.88);
    --crema-52:rgba(244,233,216,.78);
    --crema-34:rgba(244,233,216,.62);
    --linea:rgba(244,233,216,.28);
    --linea-media:rgba(244,233,216,.45);
  }
  #grano,#rejilla,#vineta{display:none}
}

@media print{
  #cabecera,#cintas,#lienzo,#cinematica,#grano,#vineta,#rejilla,#precarga,#subir,#cursor,#cursor-punto,#transicion,#ondas,#hero-fondo{display:none !important}
  body{background:#fff;color:#111}
  .seccion{page-break-inside:avoid;padding-block:24px}
}

/* ============================================================================
   19. PÁGINA LEGAL
   ============================================================================ */
.pagina-legal{padding-block:clamp(120px,18vh,200px) clamp(60px,10vh,130px)}
.prosa{max-width:74ch;display:flex;flex-direction:column;gap:20px}
.prosa h2{
  font-size:clamp(1.4rem,2.6vw,2.05rem);
  margin-top:clamp(16px,3vh,32px);
}
.prosa h3{font-size:clamp(1.05rem,1.7vw,1.3rem);margin-top:6px}
.prosa p,.prosa li{color:var(--crema-70);font-size:1rem;line-height:1.78}
.prosa ul{list-style:disc;padding-left:1.35em;display:flex;flex-direction:column;gap:8px}
.prosa a{color:var(--oro);text-decoration:underline;text-underline-offset:3px}
.prosa strong{color:var(--crema);font-weight:500}
.prosa .destacado{
  border-left:2px solid var(--oro);padding-left:18px;color:var(--crema-88);
}
.prosa .actualizado{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--crema-34);
}