/* Rutas relativas a assets/, no al HTML: las url() de aquí
   se resuelven desde esta carpeta. Ver DECISIONES.md. */

/* Autoalojadas, variables, recortadas a latino + latino extendido.
   Cero peticiones a Google. Ver DECISIONES.md. */
@font-face{
  font-family:"Fraunces";
  src:url("fonts/fraunces.woff2") format("woff2-variations");
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Roboto";
  src:url("fonts/roboto.woff2") format("woff2-variations");
  font-weight:300 700; font-style:normal; font-display:swap;
}
/* Sin cursivas: los ficheros siguen en assets/fonts/ pero no se declaran. */

:root{
  --paper:#FBF8F3; --ink:#241D18; --ink-soft:#6B5D51; --hair:#E2D9CC;
  --terracota:#B0533A; --oliva:#6E7358; --arena:#E7DAC6; --piedra:#B9AC9B;
  --oro-claro:#E4D2A8; --oro:#9A7C3E;
  --crema:#fef9ef;
  --banda:#F2EADD; --oliva-hondo:#5A5E46;
  /* Azul noche del pie, la familia del logotipo de MÖLNIR. */
  --pie:#1A1A36;
  /* Naranja de marca para TODO lo que va sobre fondo claro.
     El oro claro solo sobrevive sobre el vídeo del header. */
  --titular:#D4541A;
  /* Variante honda, SOLO para rellenos con texto encima: el naranja
     normal da 3,90:1 y una etiqueta de botón pide 4,5. Este llega a 4,77. */
  --titular-hondo:#BE4915;

  --serif:"Fraunces","Iowan Old Style",Georgia,serif;
  --grot:"Roboto","Helvetica Neue",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  --gutter:clamp(1.5rem, 0.8rem + 3vw, 4rem);
  --page-max:1240px;
  /* Borde izquierdo del contenido, el mismo que usa .wrap. */
  /* Porcentaje, NO 100vw: 100vw incluye la barra de scroll y desalinea
     --inset 7,5px respecto de .wrap. Ver DECISIONES.md. */
  --inset:max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter)));
  --ease:cubic-bezier(.16,1,.3,1);
  /* Medida en rem, no en ch: el ch depende de la fuente y aquí conviven dos. */
  --measure:33rem;
  /* Hueco entre módulos. Cada bloque pone la mitad arriba y la mitad abajo. */
  --aire:6rem;
}
body{overflow-x:hidden}
*{box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}
/* font-synthesis:none impide que el navegador invente negritas o cursivas
   falsas cuando el fichero no existe. */
html{font-synthesis:none}
h1,h2,h3,h4,h5,h6,b,strong,th{font-weight:400}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--grot);font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,p,figure{margin:0}img{display:block;max-width:100%}

/* ===================== MENÚ ===================== */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;gap:2rem;
  padding:1.4rem var(--gutter);
  font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);
  background:transparent;border-bottom:1px solid transparent;
  /* Oculto mientras dura el header: sobre el vídeo no hay menú. */
  opacity:0;transform:translateY(-100%);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease),
             background .45s ease,border-color .45s ease}
.nav.is-stuck{opacity:1;transform:none;pointer-events:auto;
  color:var(--ink);background:rgba(251,248,243,.72);
  border-bottom-color:var(--hair);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px)}
.nav__links{display:flex;gap:1.8rem;margin:0 auto}
.nav a{color:inherit;text-decoration:none;transition:opacity .25s ease}
.nav a:hover{opacity:.6}
/* CTA permanente. Fuera de .nav__links a propósito: esa fila desaparece
   en móvil y el botón tiene que seguir en pantalla. */
.nav__cta{flex:0 0 auto;
  padding:.62rem 1.15rem;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--paper) !important;background:var(--titular);
  border:1px solid var(--titular);text-decoration:none;
  transition:background .3s ease,color .3s ease}
.nav__cta:hover{background:transparent;color:var(--titular) !important;opacity:1}
.nav__lang{display:flex;align-items:center;gap:.5rem;font-size:.78rem}
.nav__lang i{font-style:normal;opacity:.4}
.nav__lang a{opacity:.6}
.nav__lang .on{opacity:1}
/* --- menú móvil --- */
.nav__toggle{display:none;margin-left:auto;order:2;
  font:inherit;font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;
  color:inherit;background:none;border:0;padding:.3rem 0;cursor:pointer}
.nav__toggle span{display:inline-block;width:20px;height:1px;background:currentColor;
  vertical-align:middle;margin-left:.6rem;position:relative}
.nav__toggle span::before,.nav__toggle span::after{content:'';position:absolute;
  left:0;width:20px;height:1px;background:currentColor}
.nav__toggle span::before{top:-6px}
.nav__toggle span::after{top:6px}

.menu{position:fixed;inset:0;z-index:60;background:var(--paper);color:var(--ink);
  display:flex;flex-direction:column;justify-content:center;gap:.4rem;
  padding:var(--gutter);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.menu.is-open{opacity:1;visibility:visible}
.menu a{font-family:var(--serif);font-size:clamp(1.75rem,1.2rem + 3vw,2.75rem);
  line-height:1.25;color:var(--ink);text-decoration:none}
.menu__lang{margin-top:2.5rem;display:flex;gap:.6rem;align-items:center;
  font-family:var(--mono);font-size:.85rem;letter-spacing:.12em}
.menu__lang i{font-style:normal;opacity:.4}
.menu__lang a{font-family:var(--mono);font-size:.85rem;opacity:.6}
.menu__lang .on{opacity:1}
.menu__close{position:absolute;top:1.4rem;right:var(--gutter);
  font:inherit;font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;
  background:none;border:0;color:var(--ink);cursor:pointer;padding:.3rem 0}

@media(max-width:880px){
  .nav__links{display:none}
  .nav__toggle{display:block}
  .nav__lang{display:none}  .nav__cta{margin-right:auto;padding:.55rem .9rem;font-size:.68rem;letter-spacing:.08em}
  .nav__toggle{margin-left:0}
}
body.menu-open{overflow:hidden}

/* Cuatro tiempos. El vídeo queda fijo y los rótulos lo atraviesan.
   --beats controla cuántos son. */
.hero{position:relative;height:760vh}.hero__stage{position:sticky;top:0;height:100vh;overflow:clip}
.hero__media{position:absolute;inset:0;
  /* Degradado de respaldo: se ve si el vídeo tarda o no puede reproducirse. */
  background:
    radial-gradient(90% 60% at 22% 18%, rgba(255,238,205,.85) 0%, transparent 55%),
    radial-gradient(80% 70% at 78% 78%, rgba(122,58,30,.75) 0%, transparent 60%),
    linear-gradient(165deg,#9FB3B4 0%,#D3A778 48%,#6E4227 100%)}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Velo: sin él, el oro del texto no aguanta sobre las zonas claras del mar. */
/* El velo es lo que sostiene el texto, no el color de la letra: el vídeo
   cambia y la letra no puede depender de qué haya detrás. Ver DECISIONES.md. */
.hero__media::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,rgba(30,18,10,.50) 0%,rgba(30,18,10,.34) 26%,rgba(30,18,10,.42) 62%,rgba(30,18,10,.72) 100%)}
/* z-index 2 OBLIGATORIO: el velo de .hero__media::after está en 1 y sin
   esto los rótulos se pintan debajo y salen apagados. Ver DECISIONES.md. */
.hero__lines{position:absolute;inset:0;z-index:2;
  display:grid;place-items:center;
  padding:0 var(--gutter);isolation:isolate}
/* Escudo local: oscurece solo donde vive el texto. Subir el velo general
   lo bastante para tapar las crestas apagaría la imagen entera. */
.hero__lines::before{content:'';position:absolute;inset:0;z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse 62% 34% at 50% 47%,
    rgba(14,9,4,.60) 0%, rgba(14,9,4,.40) 45%, rgba(14,9,4,0) 78%)}
.hero__line{grid-area:1/1;max-width:22ch;text-align:center;
  font-family:var(--serif);font-variation-settings:"opsz" 144,"SOFT" 25;color:var(--crema);
  font-size:clamp(2rem, 1rem + 4.2vw, 5rem);line-height:1.08;letter-spacing:-.01em;
  text-shadow:0 1px 2px rgba(12,7,3,.75), 0 3px 12px rgba(12,7,3,.65), 0 2px 48px rgba(30,18,10,.6);
  opacity:0;transform:translate3d(0,26px,0);will-change:opacity,transform}
/* El primer rótulo se pinta desde CSS: si dependiera del JS el header
   saldría vacío hasta el primer frame, y el LCP con él. */
.hero__line:first-child{opacity:1;transform:none}
h1.hero__line{margin:0;font-size:clamp(2rem, 1rem + 4.2vw, 5rem)}
.hero__line em{font-style:normal}
/* Aparece con el último rótulo: su opacidad la fija el mismo bucle. */
.hero__cta{position:absolute;left:0;right:0;top:63%;z-index:2;
  display:flex;justify-content:center;opacity:0;pointer-events:none}
.hero__cta a{pointer-events:auto;color:var(--crema);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.4em;
  text-decoration-color:rgba(228,210,168,.5);
  font-size:1.0625rem;letter-spacing:.02em;
  text-shadow:0 1px 18px rgba(50,28,12,.5);transition:text-decoration-color .3s ease}
.hero__cta a:hover{text-decoration-color:var(--crema)}
/* Rejilla de tres, no space-between: con espacio distribuido el rótulo
   central no cae en el centro real y no coincidía con el icono de scroll. */
/* Refuerzo local: el plano termina en roca clara justo bajo el pie del
   header y el degradado general se quedaba corto. */
.hero__meta::before{content:'';position:absolute;left:0;right:0;bottom:0;
  height:190%;z-index:-1;pointer-events:none;
  background:linear-gradient(to top, rgba(12,7,3,.72) 0%, rgba(12,7,3,.36) 55%, rgba(12,7,3,0) 100%)}
.hero__meta{position:absolute;left:0;right:0;bottom:0;z-index:2;isolation:isolate;
  display:grid;grid-template-columns:auto auto;justify-content:space-between;
  align-items:end;gap:1rem;
  padding:0 var(--gutter) 1.6rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  /* Al 85% se disolvía sobre la roca clara del final del plano. */
  color:#FFF;text-shadow:0 1px 2px rgba(12,7,3,.85), 0 2px 10px rgba(12,7,3,.7)}
.hero__meta > :last-child{justify-self:end;text-align:right}
.hero__meta > *{white-space:nowrap}
.hero__meta a{color:inherit;text-decoration:none}
/* Por debajo de ~380px los dos rótulos no caben y el derecho se salía.
   No se veía porque body lleva overflow-x:hidden. Ver DECISIONES.md. */
@media (max-width:379px){
  .hero__meta{font-size:.62rem;letter-spacing:.08em;gap:.6rem}
}

.hero__scroll{position:absolute;left:0;right:0;bottom:4.2rem;
  display:flex;justify-content:center;color:rgba(255,250,242,.7)}
.hero__scroll svg{display:block}
.hero__scroll .wheel{animation:rueda 2.2s var(--ease) infinite}
@keyframes rueda{
  0%   {transform:translateY(0);opacity:0}
  18%  {opacity:1}
  62%  {transform:translateY(8px);opacity:0}
  100% {transform:translateY(8px);opacity:0}
}
@media (prefers-reduced-motion:reduce){ .hero__scroll .wheel{animation:none;opacity:1} }

/* ===================== BLOQUES DE PAPEL ===================== */
.block{padding:calc(var(--aire) / 2) 0}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:1.4rem}

.h2{font-family:var(--serif);font-variation-settings:"opsz" 120,"SOFT" 20;
  font-style:normal;color:var(--titular);
  font-size:clamp(1.85rem, 1.2rem + 2vw, 3rem);line-height:1.16;
  letter-spacing:-.01em;text-wrap:balance;margin-bottom:1.8rem}
/* Antetítulo: sans, mismo oro que el titular, un escalón por debajo. */
.kicker{font-family:var(--grot);font-style:normal;font-weight:400;
  font-size:clamp(1.05rem, .9rem + .45vw, 1.3rem);line-height:1.35;
  letter-spacing:.01em;text-transform:none;color:var(--titular);
  text-align:left;max-width:var(--measure);margin-bottom:.9rem}

.copy{font-size:1.0625rem;line-height:1.72;max-width:var(--measure);color:var(--ink)}
.copy + .copy{margin-top:1.4rem}
.copy i{font-style:normal}

/* 02 · titular a la izquierda, imagen sangrando por la derecha. El bloque
   vive fuera de .wrap: el texto se alinea vía --inset, sin márgenes negativos. */
.split{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}
.split__text{padding:0 var(--gutter)}
@media(min-width:960px){
  .split{grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:center}
  .split__text{padding:0 0 0 var(--inset)}
  .split .gallery{padding:0 var(--gutter) 0 0}}

/* Columna de texto y tres franjas verticales. En reposo el encuadre es
   estrecho; al pasar por encima se ensancha.                        */
.mod2{display:grid;grid-template-columns:1fr;gap:2.5rem;
  padding-left:var(--inset);padding-right:var(--gutter)}
@media(min-width:1000px){
  .mod2{grid-template-columns:minmax(15rem,1fr) 2.15fr;
        gap:clamp(2rem,4vw,4rem);align-items:stretch;padding-right:0}
}
.mod2__intro{display:flex;flex-direction:column}
.mod2__intro .h2{margin-bottom:1.8rem}
.mod2__sub{margin-top:1.1rem;font-family:var(--grot);color:var(--titular);
  font-size:clamp(1.05rem, .92rem + .5vw, 1.35rem);line-height:1.35;
  letter-spacing:.01em;max-width:var(--measure)}
.mod2__foot{margin-top:auto;padding-top:2.5rem}

.mod2__panels{display:flex;gap:.6rem;height:clamp(560px,82vh,900px)}
@media(min-width:1000px){ .mod2__panels{padding-right:var(--gutter)} }

.pnl{flex:1 1 0;min-width:0;position:relative;display:block;
  padding:0;border:0;overflow:clip;background:var(--piedra);
  transition:flex-grow .75s var(--ease)}
.pnl:hover{flex-grow:6}
.pnl img{width:100%;height:100%;object-fit:cover}

/* Las tres llevan texto, así que las tres necesitan velo. */
.pnl::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(28,18,10,.78) 0%,rgba(28,18,10,.25) 45%,transparent 72%)}
/* Ancho fijo: al estrecharse la franja el texto se recorta con el
     encuadre en vez de recomponerse línea a línea. */
.pnl__over{position:absolute;left:1.5rem;bottom:1.5rem;z-index:2;
  width:13rem;
  text-align:left;  color:var(--paper);font-size:1rem;line-height:1.58;
  text-shadow:0 1px 18px rgba(0,0,0,.5);
  transition:opacity .45s var(--ease)}
.pnl__over i{font-style:normal}
.mod2__panels:has(.pnl:hover) .pnl:not(:hover) .pnl__over{opacity:0}

/* Composición superpuesta: foto grande, cita pisando la esquina superior
   izquierda y segunda foto pisando la primera.                 */
.mod4{display:grid;gap:clamp(3rem,7vh,5.5rem)}

.comp{position:relative;padding:0 var(--gutter)}
.comp__main{margin:0 auto;max-width:min(74vw,980px)}
.comp__main img{width:100%;height:clamp(300px,62vh,700px);object-fit:cover;display:block}

.comp__cita{position:static;margin:1.5rem 0 0;
  background:var(--paper);color:var(--ink);padding:1.6rem 1.5rem}
.comp__cita q{quotes:none;font-family:var(--serif);font-variation-settings:"opsz" 96;font-style:normal;color:var(--titular);
  font-size:clamp(1.35rem,1.05rem + 1.25vw,2.1rem);line-height:1.24;display:block}
/* Comilla decorativa colgando del margen. Va en ::before y no en `quotes`
   porque necesita cuerpo, color y posición propios. Ver DECISIONES.md. */
.comp__cita{position:relative}
.comp__cita::before{content:"\201C";position:absolute;z-index:1;
  /* La comilla alta se dibuja en la parte alta de su caja: por eso el
     desplazamiento vertical es negativo y aun así queda a la altura
     de la mayúscula. */
  top:.10em;left:0;transform:translateX(-64%);
  font-family:var(--serif);font-variation-settings:"opsz" 144;
  font-size:clamp(4.5rem, 2.5rem + 5vw, 8rem);line-height:1;
  color:var(--titular);opacity:.32;pointer-events:none}
.comp__cita cite{display:block;margin-top:1.4rem}
.comp__cita cite img{width:clamp(122px, 12vw, 156px);height:auto}

.comp__intro{background:var(--paper);color:var(--ink);margin:1.2rem 0 0;
  padding:1.4rem 1.5rem;font-size:1.0625rem;line-height:1.72}

@media(min-width:1000px){
  /* Las superposiciones solo existen aquí: en móvil se apilan y se leen
     en orden. */
  .comp{padding:0 var(--inset)}
  /* Simétrica: su texto muere a 10px del límite derecho de página. */
  .comp__cita{position:absolute;top:clamp(-8rem, -3rem - 5vw, -3.5rem);
    right:var(--inset);left:auto;
    z-index:2;width:min(46%,540px);margin:0;
    padding:2.4rem 10px 2.4rem 2.2rem}
  /* El texto —no la caja— arranca a 10px del límite de página. La caja es
     papel sobre papel, así que el ajuste va en el padding. */
  .comp__intro{position:absolute;left:var(--inset);
    bottom:clamp(-5rem, -2rem - 2.5vw, -2rem);
    z-index:2;width:min(42%,480px);margin:0;
    padding:2rem 2.2rem 2rem 10px}
  .mod4{gap:clamp(7rem,13vh,10rem)}
}

/* --- texto y pilares --- */
.mod4__bottom{padding:0 var(--gutter)}
@media(min-width:1000px){ .mod4__bottom{padding:0 var(--inset)} }
.mod4__intro{font-size:1.0625rem;line-height:1.72;max-width:56ch;margin-bottom:2.2rem}

.pilares{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:1000px){
  .pilares{grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem)}
}
.pilares li{border-top:1px solid var(--hair);padding:1.1rem 0 1.4rem;
  font-size:1rem;line-height:1.6}
.pilares em{display:block;font-family:var(--mono);font-style:normal;
  font-size:.72rem;letter-spacing:.12em;color:var(--ink-soft);margin-bottom:.7rem}
.pilares b{display:block;font-family:var(--serif);font-style:normal;font-weight:400;
  color:var(--titular);font-size:1.5rem;line-height:1.2;margin-bottom:.5rem}

/* Cambio de registro: primera persona y firmado, sin imagen. El silencio
   visual es lo que lo separa de una narración más. Ver DECISIONES.md. */
/* Banda a sangre. El tono está medido, no elegido a ojo: es el más
   oscuro que deja el azul del logo sobre 14:1 y el oro sobre 3:1. */
#b07{background:var(--banda);
  padding-top:clamp(4rem,9vh,7rem);padding-bottom:clamp(4rem,9vh,7rem)}
.mod7{display:grid;grid-template-columns:1fr;gap:clamp(1.8rem,4vh,3rem)}
@media(min-width:1000px){
  .mod7{grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:start}
}
.mod7__claim{font-family:var(--serif);font-variation-settings:"opsz" 120,"SOFT" 20;
  color:var(--titular);font-size:clamp(1.9rem, 1.2rem + 2.2vw, 3.1rem);
  line-height:1.14;letter-spacing:-.01em}
/* Un punto más hondo que el oliva de la página: aquel daba 4,13:1 sobre
   la banda, por debajo del mínimo para texto pequeño. Este, 5,63:1. */
#b07 .link{color:var(--oliva-hondo);text-decoration-color:rgba(90,94,70,.45)}
#b07 .link:hover{color:var(--ink);text-decoration-color:var(--oliva-hondo)}
/* El logo hace de firma, así que va a tamaño de firma. El PNG viene a
   sangre: el aire lo pone el margen de aquí. */
.mod7__logo{margin-top:1.7rem;width:clamp(148px, 15vw, 190px);height:auto}
.mod7__texto .copy{max-width:var(--measure)}
.mod7__texto .cta{margin-top:2.2rem}

/* Campos con filete, sin caja. El texto a 17px: por debajo de 16, Safari
   en iPhone hace zoom solo al enfocar.                             */
.mod8__intro{max-width:var(--measure);margin-bottom:clamp(2.4rem,6vh,3.8rem)}

.form{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,3vh,2rem)}
@media(min-width:760px){
  .form{grid-template-columns:1fr 1fr;gap:clamp(1.8rem,3vw,2.6rem)}
  .form__ancho{grid-column:1 / -1}
}
.campo{display:flex;flex-direction:column;gap:.55rem;min-width:0}
.campo > label{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft)}
.campo input,.campo select{
  font-family:var(--grot);font-size:1.0625rem;line-height:1.5;color:var(--ink);
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--hair);
  padding:.5rem 0;border-radius:0;-webkit-appearance:none;appearance:none;
  transition:border-color .3s ease}
.campo input:focus,.campo select:focus{outline:none;border-bottom-color:var(--oliva)}
.campo input::placeholder{color:var(--piedra)}
.campo--sel{position:relative}
.campo--sel::after{content:'';position:absolute;right:.2rem;bottom:1.15rem;
  width:0;height:0;pointer-events:none;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--ink-soft)}
.campo select{padding-right:1.6rem}

/* Señuelo antispam. Fuera de pantalla, NUNCA display:none: hay
   rellenadores automáticos que ignoran lo que está oculto del todo. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.consent{display:flex;gap:.85rem;align-items:flex-start;
  font-size:1rem;line-height:1.6;max-width:var(--measure)}
.consent input{flex:0 0 auto;margin:.28rem 0 0;width:1.05rem;height:1.05rem;
  accent-color:var(--oliva)}
.consent a{color:var(--oliva);text-underline-offset:.25em}
.form__envio{margin-top:.6rem}
.form__aviso{margin-top:1.2rem;font-size:1rem;color:var(--terracota);min-height:1.6em}
.form__aviso[data-tipo="ok"]{color:var(--oliva-hondo)}
/* Vacío no ocupa: si no, reserva 45px al final del formulario. */
.form__aviso:empty{display:none}

/* Sobre el oliva, el papel es la ÚNICA tinta de la paleta que llega a
   4,5:1. Aquí la jerarquía la ponen el cuerpo y el espaciado, no el color. */
.pie{background:var(--pie);color:var(--paper);
  /* El padding inferior es también el colchón que necesita el observador
     de entradas para revelar lo último de la página. */
  padding:clamp(2.4rem,6vh,3.8rem) 0 clamp(3rem,9vh,5rem)}
.pie__cols{display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:760px){ .pie__cols{grid-template-columns:repeat(3,1fr)} }
.pie__rot{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--paper);margin-bottom:.7rem}
.pie__logo{width:clamp(140px,14vw,170px);height:auto}
/* Datos del titular: los exige la LSSI y tienen que poder leerse. */
.pie__fiscal{margin-top:1.1rem;font-size:1rem;line-height:1.7;color:var(--paper)}
.pie a,.pie .enlace{color:var(--paper);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.3em;
  text-decoration-color:rgba(251,248,243,.45);transition:text-decoration-color .3s ease}
.pie a:hover,.pie .enlace:hover{text-decoration-color:var(--paper)}
.pie__idiomas{display:flex;gap:.55rem;align-items:baseline}
.pie__idiomas i{font-style:normal;color:rgba(251,248,243,.5)}
.pie__idiomas .on{color:var(--paper);text-decoration:none}
.pie__legal{margin-top:clamp(2.4rem,6vh,3.6rem);padding-top:1.5rem;
  border-top:1px solid rgba(251,248,243,.28);
  display:flex;flex-wrap:wrap;gap:.7rem 1.9rem;align-items:baseline;
  font-size:1rem;line-height:1.6;color:var(--paper)}
/* Abren una ventana, no navegan: por eso son <button> y no <a>. */
.enlace{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;
  text-decoration-color:var(--hair);transition:text-decoration-color .3s ease}
.enlace:hover{text-decoration-color:currentColor}

/* Un solo componente para aviso legal, cookies y preferencias.
   Cierra con la equis, con el fondo y con Esc.                   */
.vent{position:fixed;inset:0;z-index:80;display:grid;place-items:center;
  padding:var(--gutter)}
.vent[hidden]{display:none}
.vent__fondo{position:absolute;inset:0;background:rgba(36,29,24,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.vent__caja{position:relative;background:var(--paper);color:var(--ink);
  width:min(56rem,100%);max-height:min(82vh,860px);
  display:flex;flex-direction:column;
  box-shadow:0 24px 70px rgba(36,29,24,.28)}
.vent__cab{display:flex;align-items:baseline;gap:1rem;
  padding:clamp(1.4rem,3vw,2.2rem) clamp(1.4rem,3vw,2.6rem) 1rem;
  border-bottom:1px solid var(--hair)}
.vent__titulo{font-family:var(--serif);font-variation-settings:"opsz" 96;
  color:var(--titular);font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem);line-height:1.2;
  margin-right:auto}
.vent__x{font:inherit;font-size:1.9rem;line-height:1;color:var(--ink-soft);
  background:none;border:0;cursor:pointer;padding:0 .2rem;
  transition:color .25s ease}
.vent__x:hover{color:var(--ink)}
.vent__cuerpo{overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:clamp(1.4rem,3vw,2.2rem) clamp(1.4rem,3vw,2.6rem) clamp(1.8rem,4vw,2.6rem);
  font-size:1rem;line-height:1.72}
.vent__cuerpo:focus{outline:none}
.vent__cuerpo p{margin:0 0 1.1rem}
.vent__cuerpo p:last-child{margin-bottom:0}
.vent__cuerpo strong{font-family:var(--mono);font-weight:400;font-size:.76rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
  display:block;margin-top:1.8rem}
.vent__cuerpo p:first-child strong{margin-top:0}
.vent__cuerpo a{color:var(--oliva)}
.vent__cuerpo em{font-style:normal;font-weight:400;color:var(--ink)}
.vent__pie{margin-top:2rem}
body.vent-abierta{overflow:hidden}

/* ===================== AVISO DE COOKIES ===================== */
.ck{position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2rem;
  padding:clamp(1.1rem,2.5vw,1.6rem) var(--inset);
  background:var(--paper);border-top:1px solid var(--hair);
  box-shadow:0 -14px 40px rgba(36,29,24,.10)}
.ck[hidden]{display:none}
.ck__texto{flex:1 1 22rem;min-width:0;font-size:1rem;line-height:1.6}
.ck__texto p{margin:0}
.ck__titulo{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.45rem !important}
.ck__botones{display:flex;flex-wrap:wrap;gap:.7rem;flex:0 0 auto}
/* Rechazar y aceptar conservan tamaño y posición: la AEPD lo mide en
   clics y en área, no en color. */
.ck .btn,.vent .btn{background:var(--titular);border-color:var(--titular);color:var(--paper)}
.ck .btn:hover,.vent .btn:hover{background:transparent;color:var(--titular)}
.ck .btn.btn--fino,.vent .btn.btn--fino{background:transparent;color:var(--titular)}
.ck .btn.btn--fino:hover{background:var(--titular);color:var(--paper)}
/* En móvil los tres no caben en fila y aceptar se salía 126px, fuera de
   alcance por el overflow-x:hidden del body. Rejilla de dos. */
@media (max-width:700px){
  .ck{flex-direction:column;align-items:stretch;gap:1.1rem}
  /* Al pasar a columna el flex-basis de 22rem deja de medir ancho y mide
     ALTO: el aviso se iba a 515px. */
  .ck__texto{flex:0 0 auto}
  .ck__botones{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
  .ck__botones .btn{padding-left:1rem;padding-right:1rem;text-align:center}
  .ck__botones [data-ck="rechazar"]{order:1}
  .ck__botones [data-ck="aceptar"]{order:2}
  .ck__botones [data-ck-abrir]{order:3;grid-column:1 / -1}
}
/* Variante de contorno. Doble clase a propósito: este bloque está por
   encima de .btn y con una sola perdería el empate de especificidad. */
.btn.btn--fino{color:var(--oliva);background:transparent}
.btn.btn--fino:hover{background:var(--oliva);color:var(--paper)}

.ck__fila{display:flex;align-items:flex-start;gap:1.5rem;
  padding:1.2rem 0;border-top:1px solid var(--hair)}
.ck__fila h3{font-family:var(--serif);font-size:1.2rem;line-height:1.25;
  color:var(--ink);margin:0 0 .35rem}
.ck__fila p{margin:0;font-size:1rem;line-height:1.6;color:var(--ink-soft)}
.ck__fila em{font-style:normal;color:var(--terracota)}
/* El input real sigue ahí, solo tapado: conserva el foco por teclado y
   lo que anuncia el lector de pantalla. */
.ck__sw{flex:0 0 auto;margin-top:.2rem;position:relative;
  width:46px;height:26px;cursor:pointer}
.ck__sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.ck__sw span{position:absolute;inset:0;background:var(--hair);
  transition:background .25s ease}
.ck__sw span::after{content:'';position:absolute;top:3px;left:3px;
  width:20px;height:20px;background:var(--paper);
  transition:transform .25s var(--ease)}
.ck__sw input:checked + span{background:var(--oliva)}
.ck__sw input:checked + span::after{transform:translateX(20px)}
.ck__sw input:disabled + span{background:var(--piedra)}
.ck__sw input:focus-visible + span{outline:2px solid var(--oliva);outline-offset:3px}

/* La aérea abre a ancho de página y debajo titular y cuerpo se reparten
   dos columnas.                                                    */
#b03{padding-top:calc(var(--aire) / 2)}

/* La cita del 04 sobresale 119px por encima de su módulo: sin esto se
   metía dentro del 03. Ver DECISIONES.md. */
#b04{padding-top:calc(var(--aire) / 2 + 7.5rem)}

.mod5__mapa{margin:0 0 clamp(2.2rem,5vh,3.4rem)}
.mod5__mapa img{width:100%;height:auto;display:block}

.mod5__intro{display:grid;grid-template-columns:1fr;gap:1.4rem;
  margin-bottom:clamp(2.4rem,6vh,3.8rem)}
@media(min-width:900px){
  .mod5__intro{grid-template-columns:1fr 1fr;
    column-gap:clamp(2.5rem,5vw,5rem);align-items:start}
}
.mod5__intro .h2{margin-bottom:0}
.mod5__texto .copy + .copy{margin-top:1.2rem}

.cifras{list-style:none;margin:0 0 clamp(2.4rem,6vh,3.8rem);padding:0;
  display:grid;grid-template-columns:1fr;gap:1.4rem}
@media(min-width:760px){ .cifras{grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem)} }
.cifras li{border-top:1px solid var(--hair);padding-top:1.1rem}
.cifras b{display:block;font-family:var(--serif);font-variation-settings:"opsz" 96;
  color:var(--titular);font-size:clamp(2.2rem, 1.4rem + 2.4vw, 3.4rem);
  line-height:1.05;letter-spacing:-.01em}
.cifras em{display:block;margin-top:.5rem;font-family:var(--mono);font-style:normal;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}

.rasgos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr}
@media(min-width:700px){  .rasgos{grid-template-columns:1fr 1fr;column-gap:clamp(2rem,4vw,3.5rem)} }
@media(min-width:1080px){ .rasgos{grid-template-columns:repeat(4,1fr)} }
.rasgos li{border-top:1px solid var(--hair);padding:1.1rem 0 1.5rem;
  font-size:1rem;line-height:1.6}
.rasgos b{display:block;font-family:var(--serif);color:var(--titular);
  font-size:1.2rem;line-height:1.25;margin-bottom:.45rem}

/* Filas alternas: la foto cambia de lado en cada paso, para que el
   recorrido del ojo marque el avance del relato.               */
/* El padding va en los contenedores; las filas no lo repiten o se
   sumaría dos veces. */
.mod6__pasos{max-width:var(--page-max);margin-inline:auto;
  padding:0 var(--gutter)}
.mod6__titulo{margin-bottom:2rem}

.paso{display:grid;grid-template-columns:1fr;gap:1.5rem;
  margin-bottom:clamp(3rem,8vh,6rem)}
.paso:last-child{margin-bottom:0}
@media(min-width:1000px){
  /* Sin aire entre filas: las fotos se apilan a hueso. El gap sigue
     siendo solo la calle central. */
  .paso{--calle:clamp(2.5rem,5vw,5rem);
    grid-template-columns:1fr 1fr;gap:var(--calle);
    align-items:center;margin-bottom:0}
  /* Impares: foto a la izquierda; pares, a la derecha. */
  .paso__media{order:-1}
  .paso:nth-child(even) .paso__media{order:1}
  /* La foto invade media calle y llega al eje. Como las filas no tienen
     hueco, una termina donde empieza la siguiente y dibujan una diagonal. */
  .paso__media{margin-right:calc(var(--calle) / -2)}
  .paso:nth-child(even) .paso__media{margin-right:0;margin-left:calc(var(--calle) / -2)}
}
.paso__media{height:clamp(260px,52vh,560px);background:var(--arena);
  display:grid;place-items:center}
.paso__media img{width:100%;height:100%;object-fit:cover}
.paso__media span{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);text-align:center;
  line-height:1.8;padding:1.5rem}
.paso__num{display:block;margin-bottom:.9rem}
.paso__num em{display:block;font-family:var(--mono);font-style:normal;
  font-size:.72rem;letter-spacing:.12em;color:var(--ink-soft);margin-bottom:.7rem}
.paso__num b{display:block;font-family:var(--serif);font-weight:400;
  color:var(--titular);font-size:1.5rem;line-height:1.2}
.paso__texto{font-size:1.0625rem;line-height:1.72;max-width:46ch}
/* El botón cae en el hueco que deja la columna de texto junto a la
   última foto: la fila no crece. En móvil sí suma su altura. */
.paso__cta{margin-top:2rem}

/* Se usa flex-grow y no grid-template-columns porque anima de forma
   fiable en todos los navegadores.                                */
.gallery{display:flex;gap:.5rem;height:clamp(360px,58vh,640px);
  padding:0 var(--gutter)}
.ph{flex:1 1 0;min-width:0;position:relative;display:block;padding:0;border:0;
  overflow:clip;cursor:pointer;background:var(--arena);
  transition:flex-grow .75s var(--ease)}
.ph:hover,.ph:focus-visible{flex-grow:2.6}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
/* El velo: tinte oliva sobre la foto. Se va al pasar por encima. */
.ph::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(36,29,24,.15),rgba(110,115,88,.62));
  transition:opacity .55s var(--ease)}
.ph:hover::before,.ph:focus-visible::before{opacity:0}
.ph figcaption{position:absolute;left:1rem;right:1rem;bottom:.9rem;z-index:2;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:#FBF8F3;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.ph:focus-visible{outline:2px solid var(--oliva);outline-offset:3px}

/* El fondo oscuro va en los planos, no en la sección: ahí teñiría
   también el bloque de texto del cierre. */
.panel{position:relative;height:100vh;min-height:520px;display:grid;place-items:center;
  overflow:clip;background:var(--ink)}/* Se solapan 1px: con alturas fraccionarias el redondeo dejaba una
   costura del fondo entre planos. */
.panel + .panel{margin-top:-1px}
.panel__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1)}
/* Solo transform, y solo mientras se ve. */
@keyframes acercar{ from{transform:scale(1)} to{transform:scale(1.13)} }
.panel.is-live .panel__media{animation:acercar 20s linear forwards;will-change:transform}
@media (prefers-reduced-motion:reduce){
  .panel.is-live .panel__media{animation:none;will-change:auto}
}
/* Velo sobre la foto: el oro del rótulo necesita fondo que lo sostenga. */
.panel::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(30,18,10,.20),rgba(30,18,10,.52))}
/* Los planos sin rótulo no necesitan velo: la imagen manda sola. */
.panel:not(:has(p))::after{background:linear-gradient(to bottom,rgba(30,18,10,.06),rgba(30,18,10,.14))}
.panel p{position:relative;z-index:1;max-width:20ch;text-align:center;
  font-family:var(--serif);color:var(--oro-claro);
  font-size:clamp(1.6rem, 1rem + 2.4vw, 3rem);line-height:1.18;
  text-shadow:0 2px 36px rgba(50,28,12,.5)}
.m1{background:linear-gradient(158deg,#E6D9C4 0%,#C8A87E 55%,#8E6A44 100%)}
.m2{background:linear-gradient(158deg,#F0E7D8 0%,#C9B393 50%,#7C6449 100%)}
.m3{background:linear-gradient(158deg,#8FC4CC 0%,#4E93A6 55%,#2A5F6E 100%)}
.m4{background:linear-gradient(158deg,#F2C89A 0%,#D08A50 45%,#7A3F22 100%)}
/* También a 16px: es un párrafo largo y la regla no admite excepción. */
.disclaimer{font-size:1rem;line-height:1.62;color:var(--ink-soft);max-width:var(--measure);
  margin-top:0}
/* La página termina en el pie: aquí no va el colchón de 200px que
   llevaba cuando terminaba en contenido. Ver DECISIONES.md. */

/* El módulo de El Campello cierra en foto: sin este recorte quedaban
   180px muertos hasta el filete de la promotora. */
/* Junto a una banda de color el vecino de papel pone el aire ENTERO:
   la banda no aporta papel. */
#b06{padding-bottom:var(--aire)}
#b08{padding-top:var(--aire);padding-bottom:var(--aire)}

.slider-nav{display:none}
/* Enlace editorial: texto subrayado, sin caja. */
.link{font-family:var(--mono);font-size:.8rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--titular);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.5em;
  text-decoration-color:rgba(212,84,26,.45);
  transition:text-decoration-color .3s ease,color .3s ease}
.link:hover{text-decoration-color:var(--titular);color:var(--ink)}

.cta{margin-top:2.8rem}
/* Un solo color para todos los CTA que llevan al formulario. */
.btn{display:inline-block;padding:1rem 2.1rem;
  font-family:var(--mono);font-size:.8rem;letter-spacing:.11em;text-transform:uppercase;
  text-decoration:none;color:var(--paper);background:var(--titular);
  border:1px solid var(--titular);transition:background .3s ease,color .3s ease}
.btn:hover{background:transparent;color:var(--titular)}
.btn--light{color:var(--oro-claro);background:transparent;border-color:rgba(228,210,168,.55)}
.btn--light:hover{background:var(--oro-claro);color:#3A2A16;border-color:var(--oro-claro)}

.h2--left{text-align:left;max-width:var(--measure);margin-bottom:2rem}

/* Entradas. El retardo viaja en una variable y no en transition-delay:
   la franja redeclara `transition` y la abreviada lo reiniciaría a cero. */
[data-reveal]{--d:0s;opacity:0;transform:translate3d(0,22px,0);
  transition:opacity .62s var(--ease) var(--d),transform .62s var(--ease) var(--d)}
[data-reveal].in{opacity:1;transform:none}
/* El titular sube más y tarda más: es su propia escena. */
[data-reveal="lift"]{transform:translate3d(0,64px,0);transition-duration:1.15s}
[data-reveal-delay="1"]{--d:.18s}
[data-reveal-delay="2"]{--d:.42s}
[data-reveal-delay="3"]{--d:.66s}
[data-reveal-delay="4"]{--d:.90s}
[data-reveal-delay="5"]{--d:1.14s}
.pnl[data-reveal]{transition:opacity .62s var(--ease) var(--d),
  transform .62s var(--ease) var(--d),flex-grow .75s var(--ease)}
/* =====================================================================
   MÓVIL  ·  todo lo de aquí abajo es exclusivo de pantalla pequeña.
   El diseño de escritorio no se toca.
   ===================================================================== */
@media (max-width:880px){

  /* --- separación entre módulos ---
     Apilado en una columna, el aire de escritorio obliga a arrastrar
     dos veces por un hueco vacío. Se recorta a la mitad. */
  :root{--aire:3.75rem}   /* mismo modelo, más apretado en pantalla de mano */

  /* --- 02 · las imágenes pasan a carrusel arrastrable ---
     scroll-snap nativo, sin JS. El 82% deja ver el borde de la
     siguiente, que es lo que dice que hay más. */
  .slider-nav{display:none}
  .mod2__panels{
    display:flex;height:auto;gap:.7rem;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:0 var(--gutter);scroll-padding-left:var(--gutter);
    scrollbar-width:none}
  .mod2__panels::-webkit-scrollbar{display:none}

  /* Ancho en vw, no en %: el porcentaje se calculaba sobre la caja de
     contenido, que ya descontaba dos paddings, y la lámina salía estrecha. */
  .pnl{flex:0 0 78vw;scroll-snap-align:start;
       display:flex;flex-direction:column;height:auto;background:transparent}
  .pnl:hover{flex-grow:0}          /* el ensanchado es de ratón, no de dedo */
  .pnl::after{display:none}        /* sin velo: el texto ya no va encima */
  .pnl img{flex:0 0 auto;height:clamp(240px,38svh,360px)}

  /* El texto sale de la imagen y se coloca debajo, dentro de su lámina. */
  .pnl__over{position:static;width:auto;opacity:1 !important;
    margin-top:.9rem;color:var(--ink);text-shadow:none;font-size:1rem}

  /* Paginación: 47px de la siguiente lámina no son pista suficiente. */
  .slider-nav{display:flex;align-items:center;gap:1rem;
    padding:1.1rem var(--gutter) 0}
  .slider-nav__count{font-family:var(--mono);font-size:.72rem;letter-spacing:.11em;
    color:var(--ink-soft);flex:0 0 auto}
  .slider-nav__count b{color:var(--oliva)}
  .slider-nav__bars{display:flex;gap:.5rem;flex:1 1 auto}
  .slider-nav button{flex:1 1 0;height:2px;padding:0;border:0;cursor:pointer;
    background:var(--hair);transition:background .35s var(--ease)}
  .slider-nav button.is-on{background:var(--oliva)}

  /* --- 04 · la cita va delante y la foto ocupa todo el ancho --- */
  .comp{display:flex;flex-direction:column;padding:0}
  .comp__cita{order:1;margin:0;padding:0 var(--gutter) 1.6rem}
  .comp__cita q{font-size:clamp(1.6rem, 1.2rem + 2.2vw, 2rem)}
  .comp__main{order:2;max-width:none;margin:0}
  .comp__main img{height:clamp(320px,58svh,560px)}
  .comp__intro{order:3;margin:0;padding:1.6rem var(--gutter) 0}

  .mod2{padding-left:0;padding-right:0}
  .mod2__intro{padding:0 var(--gutter)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;transition:none}
  .hero{height:auto}
  .hero__stage{position:static;height:auto;padding:8rem 0}
  .hero__lines{position:static;display:block}
  .hero__line{opacity:1;transform:none;margin:0 auto 1.5rem;max-width:none}
}