/* ═══════════════════════════════════════════════════════════════════════
   NATALIA DE SANDE · hoja de estilo única para las 7 páginas
   ───────────────────────────────────────────────────────────────────────
   Lenguaje visual tomado de luisfernandolopez.com (fondo claro, tipografía
   serif centrada, dorado como único color de acción, secciones oscuras de
   respiro) y paleta + tipografía del BrandBook de Natalia De Sande.

   ORDEN DEL ARCHIVO
     1. Tokens          6. Bandas y citas
     2. Base            7. Tarjetas y rejillas
     3. Cabecera        8. Acordeón
     4. Botones         9. Vídeos y reseñas
     5. Secciones      10. Pasos · Bio · CTA final · Pie
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ 1. TOKENS ═══════════════════════════════════════════════════════ */
:root{
  /* Gama del BrandBook */
  --negro:#000000;
  --petroleo:#1B333F;
  --petroleo-hondo:#0F2430;   /* fondo de las secciones oscuras */
  --azul:#2C577A;
  --oro:#A78E60;
  --oro-claro:#DFBF71;
  --oro-hondo:#8A7345;
  --humo:#F7F7F7;
  --blanco:#FEFEFE;

  /* Roles */
  --fondo:var(--humo);
  --fondo-alt:#FFFFFF;
  --tinta:#12222B;            /* texto principal: petróleo casi negro */
  --tinta-suave:#4A5A63;
  --tinta-tenue:#7B8890;
  --linea:rgba(27,51,63,.14);
  --linea-oro:rgba(167,142,96,.45);
  --sombra:0 2px 4px rgba(18,34,43,.04), 0 12px 32px rgba(18,34,43,.07);
  --sombra-alta:0 4px 8px rgba(18,34,43,.06), 0 24px 60px rgba(18,34,43,.12);

  --ancho:1160px;
  --ancho-texto:720px;
  --pad:clamp(20px,5vw,48px);
  --alto-barra:84px;

  /* Tipografía. Cinzel sustituye a Trajan Pro (misma capital romana);
     Cormorant da el aire serif de la referencia sin perder legibilidad en
     titulares con minúsculas; Raleway es la de texto que fija el BrandBook. */
  --display:Cinzel,"Trajan Pro",Georgia,serif;
  --serif:"Cormorant Garamond",Georgia,serif;
  --texto:Raleway,system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ═══ 2. BASE ════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--alto-barra) + 20px)}
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:var(--texto); font-weight:400;
  font-size:clamp(16px,.55vw + 14.5px,17.5px); line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2px solid var(--oro); outline-offset:3px}

h1,h2,h3,h4{margin:0 0 .6em; line-height:1.25; font-weight:600}
/* Los titulares del copy vienen en mayúsculas: la capital romana es su sitio */
h1,h2{font-family:var(--display); letter-spacing:.04em; color:var(--petroleo)}
h1{font-size:clamp(24px,3.1vw,38px); line-height:1.3}
h2{font-size:clamp(20px,2.35vw,29px); line-height:1.35}
/* Los de segundo nivel llevan minúsculas y piden una serif de lectura */
h3{font-family:var(--serif); font-size:clamp(21px,2.1vw,27px); font-weight:600; color:var(--petroleo); letter-spacing:.005em}
h4{font-family:var(--texto); font-size:clamp(17px,1.5vw,19px); font-weight:600; letter-spacing:.02em}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
strong{font-weight:600; color:var(--tinta)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Rótulo dorado sobre el titular */
.eyebrow{
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  letter-spacing:.24em; color:var(--oro);
  font-size:clamp(10.5px,.85vw,12.5px); line-height:1.6; margin:0 0 1.1em;
}
.lede{font-size:clamp(17px,1.1vw,19.5px); color:var(--tinta-suave); line-height:1.7}
.suave{color:var(--tinta-suave)}
.tenue{color:var(--tinta-tenue); font-size:.9em}
.centrado{text-align:center}
.medida{max-width:var(--ancho-texto); margin-left:auto; margin-right:auto}

/* Filete dorado de separación: el hilo del logotipo */
.filete{border:0; height:1px; margin:clamp(38px,5vw,60px) auto; max-width:120px;
  background:linear-gradient(90deg,transparent,var(--oro),transparent)}

/* ═══ 3. CABECERA ════════════════════════════════════════════════════ */
.barra{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--linea);
}
.barra-in{
  max-width:var(--ancho); margin:0 auto; padding:0 var(--pad);
  min-height:var(--alto-barra); display:flex; align-items:center; gap:20px;
}
/* Marca: el logotipo vectorial completo, sin retocar. Dos variantes del
   mismo archivo: el nombre en blanco para fondo oscuro y en petróleo para
   la barra, que va sobre fondo claro. */
.marca{display:flex; align-items:center; text-decoration:none; flex:none}
.marca img{height:52px; width:auto; flex:none}
@media(max-width:420px){.marca img{height:44px}}
/* En el pie no va el símbolo: solo la firma manuscrita, y con más presencia
   al ir sola. */
.marca-firma{height:auto; width:clamp(210px,24vw,290px); flex:none}
@media(max-width:420px){
  .marca-simbolo{width:40px; height:40px}
  .marca-simbolo img{width:168px; height:40px; margin-left:-64px}
  .marca-nombre{height:22px}
}

/* Firma manuscrita, para cerrar la biografía */
.firma-img{width:clamp(190px,20vw,250px); margin-top:1.4em}
.oscura .firma-img{filter:none}

.nav{margin-left:auto; display:flex; align-items:center; gap:clamp(14px,2vw,30px)}
.nav a{
  font-family:var(--texto); text-decoration:none; text-transform:uppercase;
  font-size:11.5px; letter-spacing:.14em; font-weight:500; color:var(--tinta-suave);
  padding:6px 0; border-bottom:1px solid transparent; transition:color .2s, border-color .2s; white-space:nowrap;
}
.nav a:hover{color:var(--petroleo)}
.nav a[aria-current="page"]{color:var(--petroleo); border-bottom-color:var(--oro)}
.nav .btn{margin-left:6px; padding:.95em 1.5em; font-size:clamp(9.5px,.75vw,11px); letter-spacing:.11em}

/* Menú desplegable: casilla oculta, sin una línea de JS.
   El corte está en 1150px, no en el clásico 960: la barra lleva cinco
   enlaces, uno de ellos muy largo ("Empresas y Alta Dirección"), más la
   marca y el botón. Medido, necesita 1160px para caber en una línea;
   por debajo se salía por la derecha en tablet apaisada. */
.abrir-menu,.cerrar-menu{display:none}
@media(max-width:1150px){
  .nav{
    position:fixed; inset:var(--alto-barra) 0 auto 0; flex-direction:column; gap:0;
    background:#fff; border-bottom:1px solid var(--linea); padding:10px 0 22px;
    transform:translateY(-120%); transition:transform .32s cubic-bezier(.3,.8,.3,1);
    box-shadow:var(--sombra-alta); max-height:calc(100vh - var(--alto-barra)); overflow:auto;
  }
  .nav a{padding:15px var(--pad); width:100%; border-bottom:1px solid var(--linea); font-size:12.5px}
  .nav .btn{margin:18px var(--pad) 0; width:calc(100% - var(--pad)*2)}
  .abrir-menu{
    display:flex; margin-left:auto; width:44px; height:44px; align-items:center; justify-content:center;
    flex-direction:column; gap:5px;
  }
  .abrir-menu span{display:block; width:23px; height:1.5px; background:var(--petroleo); transition:transform .3s, opacity .2s}
  #menu:checked ~ .nav{transform:translateY(0)}
  #menu:checked ~ .abrir-menu span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  #menu:checked ~ .abrir-menu span:nth-child(2){opacity:0}
  #menu:checked ~ .abrir-menu span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}

/* Franja intermedia: cabe en una línea, pero justo. Menos aire y menos
   cuerpo para que no quede pegado al borde. */
@media(min-width:1151px) and (max-width:1340px){
  .nav{gap:17px}
  .nav a{font-size:10.5px; letter-spacing:.1em}
  .nav .btn{padding:.9em 1.15em; letter-spacing:.08em}
  .barra-in{gap:12px}
}

/* ═══ 4. BOTONES ═════════════════════════════════════════════════════ */
.btn{
  display:inline-block; text-decoration:none; text-align:center;
  background:var(--oro); color:#fff; border:1px solid var(--oro);
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  letter-spacing:.13em; font-size:clamp(10.5px,.9vw,12.5px); line-height:1.4;
  padding:1.15em 2.4em; border-radius:2px;
  transition:background .2s, border-color .2s, transform .18s, box-shadow .2s;
}
.btn:hover{background:var(--oro-hondo); border-color:var(--oro-hondo); transform:translateY(-1px); box-shadow:0 10px 24px rgba(138,115,69,.28)}
.btn:active{transform:translateY(0)}
.btn-bloque{display:block; width:100%}
/* Secundario: solo contorno. Es el de "ver vídeo", "descargar", "leer más" */
.btn-linea{
  display:inline-block; text-decoration:none; text-align:center;
  background:none; color:var(--oro-hondo); border:1px solid var(--linea-oro);
  font-family:var(--texto); text-transform:uppercase; font-weight:600;
  letter-spacing:.13em; font-size:clamp(10px,.85vw,11.5px); line-height:1.4;
  padding:.95em 1.7em; border-radius:2px; transition:background .2s, color .2s, border-color .2s;
}
.btn-linea:hover{background:var(--oro); border-color:var(--oro); color:#fff}
/* Sobre fondo oscuro */
.oscura .btn-linea{color:var(--oro-claro); border-color:rgba(223,191,113,.5)}
.oscura .btn-linea:hover{background:var(--oro); border-color:var(--oro); color:#fff}
.btn-nota{margin-top:14px; font-size:13.5px; color:var(--tinta-tenue)}
.oscura .btn-nota{color:rgba(255,255,255,.6)}

/* Las tres condiciones de la primera conversación, bajo cada botón: duración,
   formato y coste. Son las tres preguntas que frenan a alguien con el cursor
   encima, y responderlas ahí evita que tenga que buscarlas. */
.condiciones{
  display:block; margin-top:13px;
  font-size:13px; letter-spacing:.02em; color:var(--tinta-tenue);
}
.oscura .condiciones{color:rgba(255,255,255,.62)}
.tarjeta .condiciones{margin-top:11px; text-align:center; font-size:12.5px}

/* La promesa de esfuerzo, dicha en voz alta junto a la llamada */
.alivio{
  font-family:var(--serif); font-size:clamp(18px,1.8vw,22px); line-height:1.45;
  color:var(--petroleo); max-width:34ch; margin:0 auto 22px;
}
.oscura .alivio{color:#fff}

/* ═══ 5. SECCIONES ═══════════════════════════════════════════════════ */
.seccion{position:relative; padding:clamp(56px,7vw,104px) var(--pad)}
.seccion.compacta{padding-block:clamp(40px,4.5vw,64px)}
.contenedor{position:relative; z-index:2; max-width:var(--ancho); margin:0 auto}
.contenedor.estrecho{max-width:var(--ancho-texto)}
.clara{background:var(--fondo)}
.blanca{background:var(--fondo-alt)}

/* Sección oscura: petróleo con una fotografía de textura al fondo,
   velada para que el texto nunca pelee con la imagen. */
.oscura{background:var(--petroleo-hondo); color:#fff}
.oscura h1,.oscura h2{color:#fff}
.oscura h3,.oscura h4{color:var(--oro-claro)}
.oscura .lede,.oscura .suave{color:rgba(255,255,255,.82)}
.oscura .tenue{color:rgba(255,255,255,.6)}
.oscura .eyebrow{color:var(--oro-claro)}
.fondo-foto{position:absolute; inset:0; z-index:0; overflow:hidden}
.fondo-foto img{width:100%; height:100%; object-fit:cover; opacity:.28}
.fondo-foto::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 30%, rgba(15,36,48,.72), rgba(15,36,48,.94) 70%);
}

/* ═══ HERO ═══ */
.hero{padding-block:clamp(64px,9vw,132px); text-align:center}
.hero .emblema{width:clamp(190px,20vw,260px); margin:0 auto clamp(20px,2.6vw,32px)}
.hero h1{margin-bottom:.15em; max-width:960px; margin-left:auto; margin-right:auto}
/* Los titulares largos (el de Empresas ocupa tres líneas) no deben llegar al
   borde de la columna: con el tope de arriba respiran a los lados. */
/* El segundo renglón del titular, más pequeño y con minúsculas */
.hero .h1-b{
  display:block; font-family:var(--serif); font-weight:600; letter-spacing:.02em;
  font-size:clamp(20px,2.4vw,30px); color:var(--oro-claro); margin-bottom:.7em;
}
.hero p{max-width:660px; margin-left:auto; margin-right:auto}
.hero .btn{margin-top:clamp(20px,2.5vw,30px)}
.hero-enlaces{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:26px}

/* ═══ 6. BANDAS Y CITAS ══════════════════════════════════════════════ */
/* La franja de identificación: una pregunta enmarcada, nada más */
.banda{
  max-width:var(--ancho); margin:0 auto; padding:clamp(26px,3.4vw,40px) clamp(20px,3vw,40px);
  border:1px solid var(--linea-oro); text-align:center; background:var(--fondo-alt);
}
.banda h2,.banda h3{margin-bottom:.4em}
.banda p:last-child{color:var(--tinta-suave); font-size:.95em}

/* Cita destacada: una frase que respira sola */
.cita{
  max-width:820px; margin:clamp(30px,4vw,52px) auto; text-align:center;
  font-family:var(--serif); font-size:clamp(21px,2.5vw,30px); line-height:1.45;
  color:var(--petroleo); font-weight:600;
}
.oscura .cita{color:#fff}
.cita::before,.cita::after{content:""; display:block; width:34px; height:1px; background:var(--oro); margin:22px auto}

/* ═══ 7. TARJETAS Y REJILLAS ═════════════════════════════════════════ */
.rejilla{display:grid; gap:clamp(18px,2.4vw,30px)}
.rejilla-2{grid-template-columns:1fr}
.rejilla-3{grid-template-columns:1fr}
@media(min-width:760px){.rejilla-2{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.rejilla-3{grid-template-columns:repeat(3,1fr)}}

.tarjeta{
  background:var(--fondo-alt); border:1px solid var(--linea); border-radius:2px;
  box-shadow:var(--sombra); padding:clamp(26px,3.2vw,40px);
  display:flex; flex-direction:column; gap:14px;
  transition:box-shadow .25s, transform .25s;
}
.tarjeta:hover{box-shadow:var(--sombra-alta); transform:translateY(-2px)}
.tarjeta .btn{margin-top:auto}
.oscura .tarjeta{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); box-shadow:none}
.oscura .tarjeta:hover{background:rgba(255,255,255,.08)}

/* Tarjeta de servicio: ilustración circular, título dorado, texto centrado */
.tarjeta-servicio{text-align:center; align-items:center}
.tarjeta-servicio .ilustracion{width:clamp(150px,17vw,208px); margin-bottom:6px}
.tarjeta-servicio h2,.tarjeta-servicio h3{
  font-family:var(--display); font-size:clamp(15px,1.5vw,19px); letter-spacing:.12em;
  text-transform:uppercase; color:var(--oro-hondo); margin:0;
}
.tarjeta-servicio .pregunta{font-weight:600; color:var(--tinta)}
.tarjeta-servicio p{color:var(--tinta-suave); margin:0}

/* Tarjeta de proceso: la pieza grande y centrada de la página de referencia */
.tarjeta-proceso{
  max-width:820px; margin:0 auto; text-align:center; align-items:center; gap:18px;
  padding:clamp(30px,4vw,56px);
}
.tarjeta-proceso .ilustracion{width:clamp(180px,22vw,300px)}
.tarjeta-proceso h2{margin:0}
.tarjeta-proceso p{color:var(--tinta-suave); max-width:60ch}
.tarjeta-proceso .destacado{color:var(--tinta); font-weight:600}

/* Situación reconocible: la frase que dice el cliente, entrecomillada */
.situacion{border-left:2px solid var(--oro); padding-left:clamp(18px,2.4vw,28px)}
.situacion h3{
  font-family:var(--display); font-size:clamp(14px,1.35vw,17px); letter-spacing:.09em;
  text-transform:uppercase; color:var(--petroleo); margin-bottom:.7em; line-height:1.5;
}
.situacion p{color:var(--tinta-suave); margin-bottom:.8em}

/* Beneficio con icono */
.beneficio{text-align:center}
.beneficio svg{width:44px; height:44px; color:var(--oro); margin:0 auto 16px}
.beneficio h4{color:var(--petroleo)}
.oscura .beneficio h4{color:#fff}
.beneficio p{color:var(--tinta-suave); font-size:.95em; margin:0}
.oscura .beneficio p{color:rgba(255,255,255,.78)}

/* ═══ 8. ACORDEÓN ════════════════════════════════════════════════════ */
.acordeon{display:grid; gap:14px; align-content:start}
@media(min-width:860px){.acordeon-2{grid-template-columns:1fr 1fr; align-items:start}}
.acordeon details{
  background:var(--fondo-alt); border:1px solid var(--linea); border-radius:2px;
  box-shadow:var(--sombra); transition:box-shadow .2s, border-color .2s; height:max-content;
}
.acordeon details[open]{border-color:var(--linea-oro); box-shadow:var(--sombra-alta)}
.acordeon summary{
  list-style:none; cursor:pointer; display:flex; gap:18px; align-items:flex-start;
  justify-content:space-between; padding:20px clamp(18px,2.2vw,26px);
  font-weight:600; font-size:clamp(15px,1.15vw,16.5px); line-height:1.5; color:var(--petroleo);
}
.acordeon summary::-webkit-details-marker{display:none}
/* El "+" dorado que se convierte en "−" al abrir */
.acordeon summary::after{
  content:""; flex:none; width:14px; height:14px; margin-top:5px; position:relative;
  background:
    linear-gradient(var(--oro),var(--oro)) center/14px 1.5px no-repeat,
    linear-gradient(var(--oro),var(--oro)) center/1.5px 14px no-repeat;
  transition:transform .25s ease;
}
.acordeon details[open] summary::after{
  background:linear-gradient(var(--oro),var(--oro)) center/14px 1.5px no-repeat;
  transform:rotate(180deg);
}
.acordeon .respuesta{padding:0 clamp(18px,2.2vw,26px) 24px; color:var(--tinta-suave); font-size:.97em}
.acordeon .respuesta p:first-child{margin-top:0}

/* ═══ 9. VÍDEOS Y RESEÑAS ════════════════════════════════════════════ */
.videos{display:grid; gap:clamp(18px,2.4vw,28px); grid-template-columns:1fr}
@media(min-width:720px){.videos{grid-template-columns:1fr 1fr}}
.video{
  position:relative; display:block; width:100%; padding:0; overflow:hidden;
  border:1px solid var(--oro); border-radius:2px; background:#000; aspect-ratio:16/9;
  transition:transform .2s, box-shadow .2s;
}
.video:hover{transform:translateY(-2px); box-shadow:var(--sombra-alta)}
.video img{width:100%; height:100%; object-fit:cover}
.video::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.45))}
.video .play{
  position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%);
  width:62px; height:44px; border-radius:3px; background:rgba(167,142,96,.92);
  display:grid; place-items:center;
}
.video .play svg{width:18px; height:18px; color:#fff; margin-left:2px}
.video .pie{
  position:absolute; z-index:2; left:0; right:0; bottom:0; padding:12px 14px;
  color:#fff; font-size:13px; font-weight:600; text-align:center; line-height:1.35;
}

/* Reseña: la tarjeta gris con avatar, estrellas y texto */
.resenas{display:grid; gap:16px; grid-template-columns:1fr}
@media(min-width:640px){.resenas{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.resenas{grid-template-columns:repeat(3,1fr)}}
.resena{background:#EDEDED; border-radius:2px; padding:18px 20px; font-size:14.5px; line-height:1.6}
.oscura .resena{background:rgba(255,255,255,.07); color:rgba(255,255,255,.86)}
.resena-cab{display:flex; align-items:center; gap:11px; margin-bottom:10px}
.resena-cab img,.resena-avatar{width:38px; height:38px; border-radius:50%; flex:none; object-fit:cover; background:var(--oro)}
.resena-cab b{display:block; font-size:14px; font-weight:600; color:var(--petroleo)}
.oscura .resena-cab b{color:#fff}
.resena-cab span{display:block; font-size:11.5px; color:var(--tinta-tenue)}
.estrellas{color:var(--oro); letter-spacing:.12em; font-size:13px; margin-bottom:8px}
.resena p{margin:0; color:var(--tinta-suave)}
.oscura .resena p{color:rgba(255,255,255,.82)}

/* ═══ 10. PASOS · BIO · CTA FINAL · PIE ══════════════════════════════ */
/* Método de 3 fases y "sigue estos 3 pasos" comparten pieza */
.pasos{counter-reset:paso; display:grid; gap:clamp(22px,3vw,34px); grid-template-columns:1fr}
@media(min-width:860px){.pasos{grid-template-columns:repeat(3,1fr)}}
.paso{position:relative; padding-top:16px}
.paso::before{
  counter-increment:paso; content:"0" counter(paso);
  font-family:var(--display); font-size:clamp(30px,3.6vw,44px); font-weight:400;
  color:var(--oro); opacity:.42; line-height:1; display:block; margin-bottom:12px;
}
.paso h3{
  font-family:var(--display); font-size:clamp(15px,1.5vw,18px); letter-spacing:.14em;
  text-transform:uppercase; color:var(--petroleo); margin-bottom:.75em;
}
.oscura .paso h3{color:#fff}
.paso p{color:var(--tinta-suave); font-size:.97em}
.oscura .paso p{color:rgba(255,255,255,.8)}

/* Biografía: retrato a un lado, texto al otro */
.bio{display:grid; gap:clamp(28px,4vw,60px); align-items:center}
@media(min-width:900px){.bio{grid-template-columns:minmax(260px,.8fr) 1.2fr}}
.bio-foto{border-radius:2px; overflow:hidden; box-shadow:var(--sombra-alta)}
.bio-foto img{width:100%; aspect-ratio:4/5; object-fit:cover}
.bio .firma{
  font-family:var(--serif); font-size:clamp(20px,2vw,25px); font-style:italic;
  color:var(--oro-hondo); margin-top:1.2em;
}
.oscura .bio .firma{color:var(--oro-claro)}

/* Cierre: sección oscura, una frase y un botón */
.cierre{text-align:center}
.cierre .emblema{width:clamp(160px,17vw,215px); margin:0 auto 24px}
.cierre h2{max-width:22ch; margin-left:auto; margin-right:auto}
.cierre p{max-width:56ch; margin-left:auto; margin-right:auto}

.pie{background:var(--petroleo-hondo); color:rgba(255,255,255,.7); padding:clamp(40px,5vw,66px) var(--pad); font-size:14px}
.pie-in{max-width:var(--ancho); margin:0 auto; display:grid; gap:26px; justify-items:center; text-align:center}
.pie-nav{display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:center}
.pie-nav a{
  text-decoration:none; text-transform:uppercase; font-size:11.5px;
  letter-spacing:.14em; color:rgba(255,255,255,.75); transition:color .2s;
}
.pie-nav a:hover{color:var(--oro-claro)}
.pie-legal{border-top:1px solid rgba(255,255,255,.12); padding-top:22px; width:100%;
  display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center; font-size:12.5px; color:rgba(255,255,255,.5)}
.pie-legal a{text-decoration:none}
.pie-legal a:hover{color:var(--oro-claro)}

/* ═══ ENTRADA AL SCROLL ══════════════════════════════════════════════ */
.js .aparece{opacity:0; transform:translateY(18px)}
.js .aparece.visible{opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.22,.8,.3,1)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .js .aparece{opacity:1 !important; transform:none !important}
}

/* ═══ VENTANA DE VÍDEO ═══════════════════════════════════════════════ */
.lb{position:fixed; inset:0; z-index:99; display:none; background:rgba(9,20,26,.94); padding:20px; align-items:center; justify-content:center}
.lb.abierto{display:flex}
.lb-in{width:min(980px,100%); position:relative}
.lb-marco{position:relative; width:100%; aspect-ratio:16/9; background:#000; border:1px solid var(--linea-oro); border-radius:2px; overflow:hidden}
.lb-marco iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.lb-cerrar{
  position:absolute; top:-54px; right:0; width:44px; height:44px; border-radius:2px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3);
  display:grid; place-items:center; color:#fff;
}
.lb-cerrar svg{width:20px; height:20px}