@charset "utf-8";
/* ============================================================================
   Nocturne · tema claro — Lo Bianco Studio
   Tokens segun BRIEF_LANDING_LOBIANCO_v2_1.md §6. Prefijo --lbn-*.
   Regla: cero colores hardcodeados fuera de :root.
   ========================================================================= */

/* ---------- Fuentes autoalojadas ---------------------------------------- */
@font-face{
  font-family:'DM Sans';
  font-style:normal;
  font-weight:200 500;
  font-display:swap;
  src:url('../fonts/dmsans-latin-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Italiana';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/italiana-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- Tokens ------------------------------------------------------ */
:root{
  /* Color base — brief §6 */
  --lbn-bg:#E3E5E4;
  --lbn-text:#2C302F;
  --lbn-title:#121514;
  /* Desviacion documentada del brief §6. El valor original, #6C7271, rinde
     3,87:1 sobre --lbn-bg y no alcanza el AA de texto normal que exige §7.
     El caso peor no es el papel liso sino el texto sin tarjeta apoyado sobre
     el halo azul del fondo: ahi #5C6261 seguia en 4,26:1. Oscurecido hasta
     4,82:1 en ese peor fondo. Verificable con tools/contraste.py.
     El valor del brief se conserva en --lbn-muted-lg para texto grande y
     trazos, donde el minimo es 3:1. */
  --lbn-muted:#545A59;
  --lbn-muted-lg:#6C7271;
  --lbn-line:rgb(24 30 29 / .17);
  --lbn-line-soft:rgb(24 30 29 / .09);
  --lbn-edge:rgb(255 255 255 / .8);
  --lbn-glass:rgb(252 253 253 / .55);
  --lbn-glass-2:rgb(252 253 253 / .68);
  --lbn-glass-3:rgb(252 253 253 / .86);
  --lbn-nacre:linear-gradient(135deg,#E9CBC1 0%,#CBA8C6 32%,#A0B0CB 60%,#D2CDC3 100%);

  /* Halos perlados de la capa de fondo. La transparencia solo lee como
     cristal si hay color detras: no son decorativos. */
  --lbn-halo-1:rgb(233 203 193 / .42);
  --lbn-halo-2:rgb(203 168 198 / .30);
  --lbn-halo-3:rgb(160 176 203 / .28);
  --lbn-halo-0:rgb(160 176 203 / 0);

  /* Tinta sobre foto */
  --lbn-on-photo:#F4F5F5;
  --lbn-on-photo-2:rgb(244 245 245 / .82);
  --lbn-scrim:rgb(12 21 20 / .82);
  --lbn-scrim-2:rgb(12 21 20 / .74);
  --lbn-scrim-3:rgb(12 21 20 / .54);
  --lbn-scrim-4:rgb(12 21 20 / .2);
  --lbn-scrim-0:rgb(12 21 20 / 0);

  /* Alto de la franja de desvanecido del banner. Vive aqui y no en .hero__pane
     porque var() dentro de un custom property se resuelve donde se DECLARA,
     no donde se usa: si --fade solo existiera en el panel, --lbn-veil se
     computaria en :root sin poder resolverlo y heredaria invalido, dejando el
     banner sin velo. */
  --fade:clamp(10rem,34vh,24rem);

  /* Velo del banner: UN solo degradado, no dos elementos pegados.
     Con dos, en el punto de union las alfas se componen (0,72 sobre 0,86 da
     0,96) y aparece una costura horizontal sobre la foto.
     Las paradas del desvanecido van en unidades absolutas, calculadas sobre
     --fade, para que la curva no dependa de cuanto mida el panel: eso es lo
     que se rompia cuando el titular ganaba una linea.
     La curva es una smootherstep, no un reparto lineal, y por eso no se ve
     ninguna banda. Bajo el texto se mantiene entre 0,72 y 0,86. */
  --lbn-veil:linear-gradient(to bottom,
    rgb(12 21 20 / 0)    0,
    rgb(12 21 20 / .006) calc(var(--fade) * .10),
    rgb(12 21 20 / .039) calc(var(--fade) * .20),
    rgb(12 21 20 / .107) calc(var(--fade) * .30),
    rgb(12 21 20 / .209) calc(var(--fade) * .40),
    rgb(12 21 20 / .33)  calc(var(--fade) * .50),
    rgb(12 21 20 / .450) calc(var(--fade) * .60),
    rgb(12 21 20 / .553) calc(var(--fade) * .70),
    rgb(12 21 20 / .622) calc(var(--fade) * .80),
    rgb(12 21 20 / .654) calc(var(--fade) * .90),
    rgb(12 21 20 / .66)  var(--fade),
    rgb(12 21 20 / .82)  100%);
  /* Halo del logo en el estado de entrada. Sostiene el wordmark grande sobre
     un techo blanco sin tener que oscurecer la foto entera. */
  --lbn-halo-logo:radial-gradient(50% 50% at 50% 50%,rgb(12 21 20 / .55),rgb(12 21 20 / 0) 70%);
  --lbn-veil-top:linear-gradient(to bottom,
    rgb(12 21 20 / .26) 0%,
    rgb(12 21 20 / .17) 8%,
    rgb(12 21 20 / .09) 18%,
    rgb(12 21 20 / .03) 30%,
    rgb(12 21 20 / 0) 46%);

  /* Boton solido */
  --lbn-btn:#181C1B;
  --lbn-btn-hi:#2E3433;
  --lbn-btn-ink:#F1F3F2;

  /* Estados */
  --lbn-focus:#3E5C86;
  --lbn-shade:rgb(18 21 20 / .07);
  --lbn-shade-2:rgb(18 21 20 / .12);
  --lbn-sheen:rgb(255 255 255 / .55);
  --lbn-sheen-0:rgb(255 255 255 / 0);
  --lbn-white:#FFFFFF;

  /* Geometria — brief §6 */
  --r-s:12px;
  --r-m:18px;
  --r-l:24px;
  --r-pill:999px;
  --gut:clamp(1rem,4vw,2rem);
  --col:1220px;
  --blur:blur(22px) saturate(180%);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.6s;
}

/* ---------- Reset ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{
  font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:300;
  font-size:clamp(.95rem,.9rem + .2vw,1.02rem);
  line-height:1.62;
  color:var(--lbn-text);
  background:var(--lbn-bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--lbn-focus);
  outline-offset:3px;
  border-radius:var(--r-s);
}

/* ---------- Capa de fondo ---------------------------------------------- */
/* El cristal solo funciona si refracta algo. .bg es estructural. */
.bg{
  position:fixed;
  inset:0;
  z-index:-2;
  overflow:hidden;
  background:var(--lbn-bg);
  pointer-events:none;
}
.bg img{
  position:absolute;
  inset:-8%;
  width:116%;
  height:116%;
  object-fit:cover;
  filter:blur(60px) saturate(135%);
  opacity:.55;
}
.bg::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(58vw 46vw at 12% 4%,var(--lbn-halo-1),var(--lbn-halo-0) 62%),
    radial-gradient(52vw 44vw at 92% 30%,var(--lbn-halo-2),var(--lbn-halo-0) 60%),
    radial-gradient(64vw 54vw at 46% 104%,var(--lbn-halo-3),var(--lbn-halo-0) 64%);
}

/* ---------- Grano ------------------------------------------------------- */
/* Estructural. No se elimina y no se sube de .10 — arriba lee como suciedad. */
.grain{
  position:fixed;
  inset:0;
  z-index:60;
  pointer-events:none;
  opacity:.10;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size:160px 160px;
}

/* ---------- Cristal ----------------------------------------------------- */
.gl{
  background:var(--lbn-glass);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  border:1px solid var(--lbn-line-soft);
  box-shadow:inset 0 1px 0 var(--lbn-edge);
}
.gl-2{
  background:var(--lbn-glass-2);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  border:1px solid var(--lbn-line-soft);
  box-shadow:inset 0 1px 0 var(--lbn-edge);
}
/* Reflejo que sigue al cursor. Se apaga solo en tactil (--mx sin definir). */
.sheen{position:relative;isolation:isolate}
.sheen::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  transition:opacity .45s var(--ease);
  background:radial-gradient(18rem 18rem at var(--mx,50%) var(--my,50%),var(--lbn-sheen),var(--lbn-sheen-0) 70%);
}
@media (hover:hover) and (pointer:fine){
  .sheen:hover::after{opacity:1}
}

/* ---------- Tipografia -------------------------------------------------- */
/* Italiana aparece exclusivamente en el wordmark. Nada mas en toda la web. */
.wordmark{
  font-family:'Italiana',Georgia,serif;
  font-weight:400;
  font-size:1.05rem;
  letter-spacing:.14em;
  line-height:1;
  color:var(--lbn-title);
  white-space:nowrap;
}
.wordmark i{
  font-family:'DM Sans',system-ui,sans-serif;
  font-style:normal;
  font-size:.5rem;
  font-weight:400;
  letter-spacing:.42em;
  display:block;
  margin-top:.28em;
  color:var(--lbn-muted);
}

h1,h2,h3,h4{
  font-weight:400;
  letter-spacing:-.024em;
  line-height:1.04;
  color:var(--lbn-title);
  text-wrap:balance;
}
/* Todos los h1 del sitio son titulares de banner, asi que basta esta regla
   para que los cuatro bajen a la vez y no se descuadren entre paginas. */
h1{font-size:clamp(1.9rem,1.05rem + 3.9vw,3.7rem)}
h2{font-size:clamp(1.62rem,1.1rem + 2.3vw,2.6rem);line-height:1.08}
h3{font-size:clamp(1.12rem,.95rem + .78vw,1.44rem);line-height:1.14;letter-spacing:-.018em}
h4{font-size:1rem;letter-spacing:-.012em}
p{max-width:58ch;text-wrap:pretty}

.eyebrow{
  display:inline-block;
  font-size:.665rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--lbn-muted);
  line-height:1.4;
}
.muted{color:var(--lbn-muted)}
.sm{font-size:.815rem;line-height:1.55}
.xs{font-size:.735rem;line-height:1.5}
.num{
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:'tnum' 1,'lnum' 1;
  letter-spacing:-.03em;
}

/* ---------- Layout ------------------------------------------------------ */
.wrap{width:100%;max-width:var(--col);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(3.2rem,2rem + 5vw,6rem);scroll-margin-top:4.6rem}
.sec__head{margin-bottom:clamp(1.4rem,1rem + 1.6vw,2.4rem);max-width:52ch}
.sec__head .eyebrow{margin-bottom:.7rem}
.sec__head p{margin-top:.9rem;color:var(--lbn-muted)}
.hr{height:1px;background:var(--lbn-line);border:0;margin-block:1.15rem}
.rule{
  height:2px;
  width:clamp(4.5rem,14vw,8rem);
  border-radius:var(--r-pill);
  background:var(--lbn-nacre);
  background-size:220% 100%;
}

/* ---------- Botones ----------------------------------------------------- */
.btn{
  --btn-bg:var(--lbn-btn);
  --btn-fg:var(--lbn-btn-ink);
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.82rem 1.35rem;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.01em;
  line-height:1;
  cursor:pointer;
  overflow:hidden;
  transform:translate3d(var(--tx,0),var(--ty,0),0);
  transition:transform .35s var(--ease-out),background .3s var(--ease);
}
.btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,var(--lbn-sheen-0),var(--lbn-sheen),var(--lbn-sheen-0));
  transform:translateX(-120%);
  opacity:.5;
}
.btn:hover{background:var(--lbn-btn-hi)}
.btn:hover::before{transform:translateX(120%);transition:transform .75s var(--ease-out)}
.btn:active{transform:translate3d(var(--tx,0),calc(var(--ty,0px) + 1px),0)}
.btn svg{flex:none;width:1em;height:1em;transition:transform .4s var(--ease-out)}
.btn:hover svg{transform:translateX(2px)}

.btn--ghost{
  --btn-bg:transparent;
  --btn-fg:var(--lbn-title);
  border-color:var(--lbn-line);
}
.btn--ghost:hover{background:var(--lbn-glass-3)}
.btn--on-photo{
  --btn-bg:transparent;
  --btn-fg:var(--lbn-on-photo);
  border-color:var(--lbn-on-photo-2);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.btn--on-photo:hover{background:var(--lbn-scrim-4)}
.btn--lg{padding:.98rem 1.6rem;font-size:.85rem}
.btn--full{width:100%}

/* Boton circular de flecha — cita de la referencia estructural */
.iconbtn{
  flex:none;
  display:grid;
  place-items:center;
  width:2.1rem;
  height:2.1rem;
  border-radius:var(--r-pill);
  border:1px solid var(--lbn-line);
  background:var(--lbn-glass-3);
  color:var(--lbn-title);
  cursor:pointer;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.iconbtn svg{width:.82rem;height:.82rem;transition:transform .45s var(--ease-out)}
a:hover>.iconbtn,.iconbtn:hover{background:var(--lbn-btn);border-color:var(--lbn-btn);color:var(--lbn-btn-ink)}
a:hover>.iconbtn svg,.iconbtn:hover svg{transform:translate(2px,-2px)}

/* ---------- Chips / pills ----------------------------------------------- */
.chip{
  display:inline-flex;
  align-items:center;
  gap:.42rem;
  padding:.42rem .8rem;
  border-radius:var(--r-pill);
  border:1px solid var(--lbn-line-soft);
  background:var(--lbn-glass-2);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.055em;
  line-height:1;
  color:var(--lbn-text);
  white-space:nowrap;
}
.chip--nacre{
  border-color:transparent;
  background:var(--lbn-nacre);
  color:var(--lbn-title);
}
.chip--photo{
  background:var(--lbn-scrim-3);
  border-color:var(--lbn-on-photo-2);
  color:var(--lbn-on-photo);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.chip svg{width:.72rem;height:.72rem;flex:none}

/* ---------- Barra superior ---------------------------------------------- */
/* De extremo a extremo, del color del papel y sin cristal: es un plano
   distinto del contenido, no una pieza que flota sobre el. */
.nav{
  --p:1;
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  transition:box-shadow .45s var(--ease);
}
/* El papel de la barra va en una capa propia para poder desvanecerlo con --p.
   A 0 la barra no existe: se ve la foto entera detras del logo grande. */
.nav::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--lbn-bg);
  border-bottom:1px solid var(--lbn-line-soft);
  opacity:var(--p);
  pointer-events:none;
}
.nav.is-stuck{box-shadow:0 1px 22px var(--lbn-shade)}
.nav__in{position:relative;z-index:1}
/* Enlaces y CTA acompanan al papel. Se retiran del foco mientras no se ven. */
.nav__links,.nav__cta{opacity:var(--p)}
.nav--float .nav__links,.nav--float .nav__cta{visibility:hidden}
/* Mientras flota sobre la foto, el wordmark es tinta clara. */
.nav__brand{
  transform-origin:left center;
  will-change:transform;
}
.nav--float .nav__brand .wordmark,
.nav--float .nav__brand .wordmark i{color:var(--lbn-on-photo)}
.nav__brand .wordmark,.nav__brand .wordmark i{transition:color .3s var(--ease)}
/* Halo suave detras del logo grande: lo sostiene sobre un techo blanco sin
   tener que oscurecer la foto entera. Se va con el propio logo. */
.nav__brand::before{
  content:'';
  position:absolute;
  left:-45%;
  right:-45%;
  top:-190%;
  bottom:-190%;
  z-index:-1;
  border-radius:50%;
  background:var(--lbn-halo-logo);
  opacity:calc(1 - var(--p));
  pointer-events:none;
}
.nav--float .nav__brand .wordmark{text-shadow:0 1px 26px var(--lbn-scrim-3)}
.nav__in{
  position:relative;
  display:flex;
  align-items:center;
  gap:1rem;
  max-width:var(--col);
  margin-inline:auto;
  padding:.72rem var(--gut);
  transition:padding .45s var(--ease);
}
.nav.is-stuck .nav__in{padding-block:.54rem}
.nav__brand{display:flex;align-items:center;margin-right:auto;--raster:1;--unraster:1}
/* El logo de entrada se agranda con scale() hasta 3,1. Si el texto se dibujara
   al cuerpo de la barra, Chromium rasterizaria las letras a 20px y estiraria
   ese mapa de bits: bordes sucios en el estado grande, que es justo donde mas
   se mira. Por eso el wordmark se dibuja YA al cuerpo grande —--raster lo fija
   initIntro— y se encoge con un scale inverso. El producto de las dos escalas
   es 1 en la portada, asi que las letras se rasterizan a tamano real. Reducir
   es inocuo; ampliar es lo que emborrona.
   .nav__brand lleva ancho y alto fijados desde JS porque el wordmark grande,
   aunque se vea pequeno, ocupa su caja sin encoger y desmontaria la barra. */
/* STUDIO va siempre en linea, detras de LO BIANCO, en todos los anchos. */
.nav__brand .wordmark{
  display:flex;
  align-items:baseline;
  gap:.35em;
  font-size:calc(1.26rem * var(--raster));
  /* --unraster se mide, no se deduce de 1/--raster: el ancho del texto no es
     exactamente lineal con el cuerpo —el ajuste de contornos pesa mas en los
     cuerpos pequenos— y la division dejaba el logo de la barra un 9% corto. */
  transform:scale(var(--unraster));
  transform-origin:left center;
  letter-spacing:.11em;
}
/* Las tres medidas de STUDIO van en em, no en rem: el bloqueo es una sola
   pieza y se escala entera con el wordmark. El alto y el ancho salen de medir
   la referencia de marca — 0,47 y 0,34 respecto a LO BIANCO. El hueco se
   cerro despues por decision del estudio: la referencia daba 0,07 de ese
   ancho y aqui va algo por debajo. */
.nav__brand .wordmark i{font-size:.47em;letter-spacing:.17em;margin-top:0}
.nav__links{display:none;gap:.2rem}
.nav__links a{
  position:relative;
  padding:.5rem .72rem;
  border-radius:var(--r-pill);
  font-size:.795rem;
  color:var(--lbn-text);
  transition:color .3s var(--ease);
}
.nav__links a::after{
  content:'';
  position:absolute;
  left:.72rem;
  right:.72rem;
  bottom:.34rem;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .42s var(--ease-out);
}
.nav__links a:hover{color:var(--lbn-title)}
.nav__links a:hover::after,.nav__links a.on::after{transform:scaleX(1)}
.nav__links a.on{color:var(--lbn-title)}
.nav__cta{display:inline-flex;padding-inline:1rem}
.nav__prog{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  overflow:hidden;
}
.nav__prog{opacity:var(--p)}
.nav__prog i{
  display:block;
  height:100%;
  width:100%;
  background:var(--lbn-title);
  transform:scaleX(var(--p,0));
  transform-origin:left;
  opacity:.34;
}
@media (min-width:900px){
  .nav__links{display:flex}
  .nav__cta{padding-inline:1.35rem}
}
@media (max-width:430px){
  .nav__in{gap:.6rem}
  /* Solo baja el cuerpo: el hueco y STUDIO van en em y siguen al wordmark. */
  .nav__brand .wordmark{font-size:calc(1rem * var(--raster))}
  .nav__cta{font-size:.74rem;padding-inline:.9rem}
}

/* ---------- Dock movil -------------------------------------------------- */
.dock{
  position:fixed;
  left:var(--gut);
  right:var(--gut);
  bottom:.7rem;
  z-index:50;
  padding:.5rem;
  border-radius:var(--r-pill);
  transform:translateY(calc(100% + 1.4rem));
  transition:transform .55s var(--ease-out);
}
.dock.is-up{transform:translateY(0)}
@media (min-width:900px){.dock{display:none}}

/* ---------- Hero a sangre --------------------------------------------- */
.hero{padding:0}
.hero__card{
  position:relative;
  width:100%;
  overflow:hidden;
  isolation:isolate;
  min-height:clamp(30rem,88svh,52rem);
  display:flex;
  align-items:flex-end;
}
/* La barra es fija y el panel de texto va pegado al fondo de la tarjeta. En la
   portada sobra sitio —el banner mide 88svh— pero en las interiores la tarjeta
   esta limitada a 26rem: en cuanto el titular es mas alto que ese minimo, la
   tarjeta crece hacia arriba y el epigrafe acaba debajo de la barra. Reservar
   el alto de la barra en el borde de arriba lo impide a cualquier ancho.
   4.6rem es el mismo valor con el que .sec esquiva la barra al saltar a un
   ancla, y deja ~10px de aire bajo ella. */
.hero:not([data-intro]) .hero__card{padding-top:4.6rem}
.hero__media{position:absolute;inset:0;z-index:-2;background:var(--lbn-bg)}
.hero__media picture,.hero__media img{position:absolute;inset:0;width:100%;height:100%}
.hero__media img{
  object-fit:cover;
  /* El banner es apaisado y la foto tambien. En movil el recorte se vuelve
     vertical y, centrado, se queda en el techo: se baja el encuadre para que
     la estancia caiga por encima del velo. */
  object-position:center 50%;
  opacity:0;
  transform:scale(1.06) translate3d(0,var(--par,0),0);
  transition:opacity .9s var(--ease);
}
/* Sin Ken Burns a proposito. Al animar scale() sobre una foto de 1800 px,
   Chromium rasteriza la capa compuesta una sola vez y luego la estira: la
   imagen se ve blanda mientras el texto de al lado sigue nitido. El escalado
   se deja fijo — es la holgura que necesita el paralaje para no dejar ver el
   borde — y el movimiento lo pone el desplazamiento vertical, que no obliga a
   rasterizar de nuevo. */
.hero__media img.is-on{opacity:1}
/* Vineta superior. Asienta la foto bajo la barra sin apagar el centro. */
.hero__card::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--lbn-veil-top);
}
/* El velo va anclado al panel de texto y su desvanecido es una franja de alto
   fijo por encima, no un porcentaje de la tarjeta.
   Con porcentajes el calculo se rompia en cuanto el titular ganaba una linea:
   el texto se corria hacia la zona clara del degradado y en movil acababa a
   1,2:1 sobre una pared encalada. Asi el contraste no depende de cuanta copia
   haya. Comprobado sobre foto blanca pura: 8,4:1 en la parte alta del panel
   y 11,3:1 en la baja. */
.hero__pane{
  position:relative;
  width:100%;
  padding-block:clamp(1.5rem,1.2rem + 2.2vw,2.6rem) clamp(1.6rem,1.2rem + 2.6vw,3rem);
  color:var(--lbn-on-photo);
}
/* El velo se extiende --fade por encima del panel y llega hasta abajo del
   todo. Un unico elemento: no hay junta donde puedan sumarse dos alfas. */
.hero__pane::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:calc(-1 * var(--fade));
  bottom:0;
  background:var(--lbn-veil);
  pointer-events:none;
}
/* Posicionado para que se pinte por encima del velo: ambos son elementos
   posicionados y decide el orden del DOM. */
.hero__in{position:relative;max-width:var(--col);margin-inline:auto;padding-inline:var(--gut)}
.hero__in .eyebrow{color:var(--lbn-on-photo)}
.hero__in h1{color:var(--lbn-on-photo);text-shadow:0 1px 22px var(--lbn-scrim-3)}
.hero__in .rule{margin-block:1.1rem}
.hero__lede{
  color:var(--lbn-on-photo);
  max-width:46ch;
  line-height:1.5;
  font-size:clamp(.94rem,.88rem + .3vw,1.1rem);
  text-shadow:0 1px 16px var(--lbn-scrim-3);
}
.hero__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.7rem 1.2rem;
  margin-top:1.7rem;
}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.6rem}

@media (min-width:820px){
  .hero__foot{justify-content:flex-start}
}

@media (max-width:760px){
  .hero__media img{object-position:center 66%}
}

/* Revelado por lineas del titular.
   El estado oculto se aplica solo con la clase .js, que pone un script en
   linea del <head>. Sin JavaScript el titular se ve tal cual: nunca puede
   quedarse escondido porque un fichero no haya cargado. */
.lines{display:block}
.line{display:block}
/* Sin mascara de overflow. La version anterior recortaba cada linea con
   overflow:hidden y desplazaba el texto un 110 %: al terminar la transicion
   el navegador conservaba el recorte antiguo y la linea entera desaparecia,
   pese a estar en su sitio, opaca y sin transform. Un desplazamiento corto
   con opacidad da la misma sensacion y no puede recortar nada. */
.line>span{display:block;transition:opacity .9s var(--ease-out),transform 1s var(--ease-out)}
.js .line>span{opacity:0;transform:translateY(.34em)}
.js .is-lit .line>span{opacity:1;transform:none}
.js .is-lit .line:nth-child(2)>span{transition-delay:.12s}
.js .is-done .line>span{transition:none}

/* ---------- Banda de imagen a sangre ----------------------------------- */
/* Respiro entre secciones. La imagen se desplaza mas despacio que la pagina:
   el sobredimensionado del 24 % es lo que da margen para ese recorrido. */
/* Va a sangre porque cuelga de <main>, no de .wrap. Si alguna vez se mete
   dentro de la columna habra que devolverle el margen negativo. */
.band{
  position:relative;
  margin-block:clamp(.5rem,2vw,1.5rem);
  width:100%;
  height:clamp(15rem,40vw,30rem);
  overflow:hidden;
  isolation:isolate;
}
.band picture{position:absolute;inset:0;display:block}
.band img{
  position:absolute;
  top:-12%;
  left:0;
  width:100%;
  height:124%;
  object-fit:cover;
  transform:translate3d(0,var(--par,0),0);
}
.band::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(to top,var(--lbn-scrim-2) 0%,var(--lbn-scrim-4) 38%,var(--lbn-scrim-0) 68%);
}
.band__txt{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  align-items:flex-end;
  max-width:var(--col);
  margin-inline:auto;
  padding:clamp(1.2rem,1rem + 2vw,2.2rem) var(--gut);
  color:var(--lbn-on-photo);
}
.band__txt p{
  max-width:34ch;
  font-size:clamp(1rem,.9rem + .7vw,1.5rem);
  line-height:1.25;
  letter-spacing:-.018em;
  text-shadow:0 1px 18px var(--lbn-scrim-3);
}
.band__txt .eyebrow{color:var(--lbn-on-photo-2);display:block;margin-bottom:.5rem}
.band__cta{margin-top:1.1rem;align-self:flex-start}
.band__txt{flex-direction:column;align-items:flex-start;justify-content:flex-end}

/* ---------- Precio ------------------------------------------------------ */
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:.42rem}
.price b{
  font-size:clamp(1.55rem,1.25rem + 1.3vw,2.1rem);
  font-weight:200;
  line-height:1;
  color:var(--lbn-title);
}
.price s{font-size:.85rem;color:var(--lbn-muted);text-decoration-thickness:1px}
.price span{font-size:.72rem;color:var(--lbn-muted);letter-spacing:.03em}
.price-note{display:block;font-size:.715rem;line-height:1.45;color:var(--lbn-muted)}

/* ---------- Stats ------------------------------------------------------- */
.stats{display:grid;gap:.7rem;grid-template-columns:repeat(2,1fr)}
.stat{padding:1.15rem 1.15rem 1.25rem;border-radius:var(--r-m)}
.stat em{
  display:block;
  font-style:normal;
  font-size:clamp(1.75rem,1.4rem + 1.7vw,2.5rem);
  font-weight:200;
  line-height:1;
  color:var(--lbn-title);
  margin-bottom:.5rem;
}
.stat b{display:block;font-size:.83rem;font-weight:500;color:var(--lbn-title);margin-bottom:.22rem}
.stat p{font-size:.755rem;line-height:1.5;color:var(--lbn-muted)}
@media (min-width:820px){.stats{grid-template-columns:repeat(4,1fr)}}

/* ---------- Packs ------------------------------------------------------- */
.packs{display:grid;gap:.7rem;grid-template-columns:1fr}
.pack{
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:var(--r-l);
  overflow:hidden;
}
.pack__ph{position:relative;aspect-ratio:16/10;overflow:hidden}
.pack__ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.pack:hover .pack__ph img{transform:scale(1.045)}
.pack__tag{position:absolute;top:.72rem;left:.72rem}
.pack__pane{display:flex;flex-direction:column;gap:.6rem;padding:1.2rem 1.25rem 1.3rem;flex:1}
.pack__pane>.list{margin-top:.1rem}
.pack__foot{margin-top:auto;display:flex;flex-direction:column;gap:.5rem;padding-top:.9rem}
.pack--star{border:1px solid transparent;background:var(--lbn-nacre);padding:1px}
.pack--star>.pack__inner{
  border-radius:calc(var(--r-l) - 1px);
  overflow:hidden;
  background:var(--lbn-glass-2);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  display:flex;
  flex-direction:column;
  flex:1;
}
.list{display:flex;flex-direction:column;gap:.42rem}
.list li{
  position:relative;
  padding-left:1.15rem;
  font-size:.795rem;
  line-height:1.5;
  color:var(--lbn-text);
}
.list li::before{
  content:'';
  position:absolute;
  left:.05rem;
  top:.62em;
  width:.42rem;
  height:.42rem;
  border-radius:var(--r-pill);
  border:1px solid var(--lbn-muted-lg);
}
@media (min-width:680px){.packs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.packs{grid-template-columns:repeat(3,1fr)}}

/* El abono es un contrato, no una compra suelta: se separa visualmente. */
.abono{
  margin-top:1.5rem;
  border-radius:var(--r-l);
  padding:clamp(1.2rem,1rem + 1.4vw,1.9rem);
  display:grid;
  gap:1.15rem;
  border:1px dashed var(--lbn-line);
}
.abono__grid{display:grid;gap:1.15rem}
.abono__cta{display:flex;flex-direction:column;gap:.55rem;align-self:end}
@media (min-width:820px){
  .abono__grid{grid-template-columns:1.4fr 1fr;align-items:start;gap:2rem}
}

/* ---------- Pasos ------------------------------------------------------- */
.steps{display:grid;gap:.7rem;counter-reset:s}
.step{position:relative;padding:1.2rem 1.25rem 1.3rem;border-radius:var(--r-m)}
.step em{
  display:block;
  font-style:normal;
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.2em;
  color:var(--lbn-muted);
  margin-bottom:.85rem;
}
.step b{display:block;font-size:.98rem;font-weight:400;color:var(--lbn-title);margin-bottom:.4rem;letter-spacing:-.014em}
.step p{font-size:.795rem;color:var(--lbn-muted)}
@media (min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}

/* ---------- Linea de entrega ------------------------------------------- */
.tl{position:relative;display:grid;gap:0}
.tl__track{
  position:absolute;
  left:.72rem;
  top:.6rem;
  bottom:.6rem;
  width:1px;
  background:var(--lbn-line);
}
.tl__fill{
  position:absolute;
  left:.72rem;
  top:.6rem;
  width:1px;
  height:calc((100% - 1.2rem) * var(--p,0));
  background:var(--lbn-title);
  opacity:.5;
  transition:height .18s linear;
}
.tl__item{position:relative;padding:0 0 1.6rem 2.4rem}
.tl__item:last-child{padding-bottom:0}
.tl__item::before{
  content:'';
  position:absolute;
  left:.35rem;
  top:.42rem;
  width:.78rem;
  height:.78rem;
  border-radius:var(--r-pill);
  background:var(--lbn-bg);
  border:1px solid var(--lbn-line);
  transition:background .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease-out);
}
.tl__item.is-on::before{background:var(--lbn-title);border-color:var(--lbn-title);transform:scale(1.15)}
.tl__when{
  display:block;
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--lbn-muted);
  margin-bottom:.3rem;
}
.tl__item.is-on .tl__when{color:var(--lbn-title)}
.tl__what{display:block;font-size:1rem;color:var(--lbn-title);letter-spacing:-.016em;margin-bottom:.28rem}
.tl__item p{font-size:.795rem;color:var(--lbn-muted)}

/* ---------- Galeria ----------------------------------------------------- */
.grid{display:grid;gap:.55rem;grid-template-columns:repeat(2,1fr)}
.tile{
  position:relative;
  display:block;
  border-radius:var(--r-m);
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--lbn-shade);
  cursor:zoom-in;
}
.tile:first-child{grid-column:span 2;aspect-ratio:16/9}
/* La foto se posa desde un encuadre algo mas cerrado cuando la celda entra.
   El hover solo se activa despues, para que no compita con la entrada. */
.tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.07);
  transition:transform 1.5s var(--ease-out);
}
.tile.in img{transform:scale(1)}
.tile.in:hover img{transform:scale(1.05);transition-duration:1.15s}
.tile figcaption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:1.6rem .8rem .7rem;
  background:linear-gradient(to top,var(--lbn-scrim-2),var(--lbn-scrim-0));
  color:var(--lbn-on-photo);
  font-size:.715rem;
  letter-spacing:.03em;
  opacity:0;
  transform:translateY(.4rem);
  transition:opacity .4s var(--ease),transform .5s var(--ease-out);
}
.tile:hover figcaption,.tile:focus-visible figcaption{opacity:1;transform:translateY(0)}
@media (min-width:820px){
  .grid{grid-template-columns:repeat(3,1fr);gap:.7rem}
  .tile:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
}

/* ---------- Lightbox ---------------------------------------------------- */
.lb{
  position:fixed;
  inset:0;
  z-index:70;
  display:grid;
  place-items:center;
  padding:var(--gut);
  background:var(--lbn-scrim);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  opacity:0;
  visibility:hidden;
  transition:opacity .4s var(--ease),visibility .4s;
}
.lb[open],.lb.is-on{opacity:1;visibility:visible}
.lb__fig{display:grid;justify-items:center;max-width:100%}
.lb img{
  max-width:100%;
  max-height:78vh;
  width:auto;
  margin-inline:auto;
  border-radius:var(--r-m);
  transform:scale(.94);
  opacity:0;
  transition:transform .55s var(--ease-out),opacity .4s var(--ease);
}
.lb.is-on img{transform:scale(1);opacity:1}
.lb__cap{
  margin-top:.9rem;
  color:var(--lbn-on-photo-2);
  font-size:.755rem;
  letter-spacing:.04em;
  text-align:center;
}
.lb__x{
  position:absolute;
  top:var(--gut);
  right:var(--gut);
  width:2.4rem;
  height:2.4rem;
  display:grid;
  place-items:center;
  border-radius:var(--r-pill);
  border:1px solid var(--lbn-on-photo-2);
  background:transparent;
  color:var(--lbn-on-photo);
  cursor:pointer;
}
.lb__nav{position:absolute;bottom:var(--gut);display:flex;gap:.5rem}
.lb__nav button{
  width:2.4rem;
  height:2.4rem;
  display:grid;
  place-items:center;
  border-radius:var(--r-pill);
  border:1px solid var(--lbn-on-photo-2);
  background:transparent;
  color:var(--lbn-on-photo);
  cursor:pointer;
}
.lb svg{width:1rem;height:1rem}

/* ---------- Filas de datos --------------------------------------------- */
.rows{display:grid;gap:0}
.row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  padding:.72rem 0;
  border-bottom:1px solid var(--lbn-line-soft);
  font-size:.83rem;
}
.row:last-child{border-bottom:0}
.row>span:first-child{color:var(--lbn-text)}
.row>span:last-child{color:var(--lbn-title);font-weight:500;white-space:nowrap}
.row small{display:block;font-size:.7rem;color:var(--lbn-muted);font-weight:300;letter-spacing:0}
@media (min-width:760px){
  .rows--two{grid-template-columns:1fr 1fr;column-gap:2.4rem}
  .rows--two .row:nth-last-child(2):nth-child(odd){border-bottom:0}
}

/* ---------- Tabla comparativa ------------------------------------------ */
/* Ancha por naturaleza: se desplaza dentro de su caja, nunca empuja el body. */
.tabla{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut)}
.tabla table{border-collapse:collapse;width:100%;min-width:46rem;font-size:.8rem}
.tabla th,.tabla td{
  text-align:left;
  padding:.68rem .8rem .68rem 0;
  border-bottom:1px solid var(--lbn-line-soft);
  vertical-align:baseline;
}
.tabla thead th{
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--lbn-muted);
  border-bottom:1px solid var(--lbn-line);
  white-space:nowrap;
}
.tabla tbody th{font-weight:400;color:var(--lbn-text);white-space:nowrap;padding-right:1.6rem}
.tabla td{color:var(--lbn-title)}
.tabla .off{color:var(--lbn-muted-lg)}
.tabla tr:last-child th,.tabla tr:last-child td{border-bottom:0}
.tabla__precio th,.tabla__precio td{padding-top:1rem}
.tabla__precio b{font-size:1.15rem;font-weight:200}
.tabla__precio .xs{color:var(--lbn-muted)}

/* ---------- Mapa cobertura --------------------------------------------- */
.mapa{border-radius:var(--r-m);overflow:hidden;padding:1.1rem}
.mapa svg{width:100%;height:auto}
.mapa .coast{fill:none;stroke:var(--lbn-line);stroke-width:1.2}
.mapa .land{fill:var(--lbn-shade)}
.mapa .pin{fill:var(--lbn-title)}
.mapa .pin--out{fill:none;stroke:var(--lbn-muted-lg);stroke-width:1.1}
.mapa .ring{fill:none;stroke:var(--lbn-line);stroke-width:1;stroke-dasharray:3 4}
.mapa text{
  font-size:7.4px;
  font-weight:400;
  letter-spacing:.06em;
  fill:var(--lbn-muted);
}
.mapa .lbl-on{fill:var(--lbn-title);font-weight:500}

/* ---------- FAQ --------------------------------------------------------- */
.faq{display:grid;gap:.5rem}
.qa{border-radius:var(--r-m);overflow:hidden}
.qa summary{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.15rem;
  cursor:pointer;
  list-style:none;
  font-size:.9rem;
  color:var(--lbn-title);
  letter-spacing:-.012em;
}
.qa summary::-webkit-details-marker{display:none}
.qa__x{position:relative;flex:none;width:.85rem;height:.85rem;margin-top:.3rem}
.qa__x::before,.qa__x::after{
  content:'';
  position:absolute;
  inset:50% 0 auto 0;
  height:1px;
  background:var(--lbn-title);
  transition:transform .42s var(--ease-out);
}
.qa__x::after{transform:rotate(90deg)}
.qa[open] .qa__x::after{transform:rotate(0)}
.qa__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .48s var(--ease-out)}
.qa[open] .qa__body{grid-template-rows:1fr}
.qa__body>div{overflow:hidden}
.qa__body p{padding:0 1.15rem 1.15rem;font-size:.83rem;color:var(--lbn-muted);max-width:64ch}

/* ---------- Formulario -------------------------------------------------- */
.form{display:grid;gap:.75rem}
.f2{display:grid;gap:.75rem}
@media (min-width:620px){.f2{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:.34rem}
.field>span{font-size:.715rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--lbn-muted)}
.field input,.field select,.field textarea{
  width:100%;
  padding:.72rem .85rem;
  border-radius:var(--r-s);
  border:1px solid var(--lbn-line);
  background:var(--lbn-glass-3);
  font-size:.865rem;
  font-weight:300;
  color:var(--lbn-text);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.field textarea{min-height:6.5rem;resize:vertical}
.field select{appearance:none;cursor:pointer}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--lbn-muted-lg)}
.field input::placeholder,.field textarea::placeholder{color:var(--lbn-muted-lg)}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.755rem;color:var(--lbn-muted);line-height:1.5}
.consent input{flex:none;width:1rem;height:1rem;margin-top:.18rem;accent-color:var(--lbn-btn)}
.consent a{color:var(--lbn-title);text-decoration:underline;text-underline-offset:2px}
/* Oculto de verdad: honeypot del formulario y titulos de tabla para lectores
   de pantalla. Nada que deba poder enfocarse con el teclado. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* El salto al contenido si se enfoca: fuera de pantalla hasta que llega el
   tabulador, y entonces aparece como cualquier otro boton. */
.skip{
  position:fixed;
  top:.6rem;
  left:50%;
  z-index:80;
  transform:translate(-50%,-160%);
  padding:.7rem 1.2rem;
  border-radius:var(--r-pill);
  background:var(--lbn-btn);
  color:var(--lbn-btn-ink);
  font-size:.8rem;
  font-weight:500;
  transition:transform .3s var(--ease-out);
}
.skip:focus-visible{transform:translate(-50%,0)}
.form__msg{
  display:none;
  padding:.85rem 1rem;
  border-radius:var(--r-s);
  border:1px solid var(--lbn-line);
  background:var(--lbn-glass-3);
  font-size:.8rem;
  color:var(--lbn-title);
}
.form__msg.is-on{display:block}

/* ---------- Panel / CTA final ------------------------------------------ */
.panel{border-radius:var(--r-l);padding:clamp(1.2rem,1rem + 1.6vw,2rem)}
.cta{
  position:relative;
  border-radius:var(--r-l);
  overflow:hidden;
  display:grid;
  gap:1.6rem;
  padding:clamp(1.5rem,1.1rem + 2.4vw,2.8rem);
}
.cta__ph{position:absolute;inset:0;z-index:-2}
.cta__ph img{width:100%;height:100%;object-fit:cover}
.cta::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(to top,var(--lbn-scrim) 0%,var(--lbn-scrim-2) 40%,var(--lbn-scrim-3) 100%);
}
.cta,.cta h2,.cta .eyebrow{color:var(--lbn-on-photo)}
.cta p{color:var(--lbn-on-photo-2)}
.cta .field>span{color:var(--lbn-on-photo-2)}
.cta .field input,.cta .field select,.cta .field textarea{
  background:var(--lbn-scrim-4);
  border-color:var(--lbn-on-photo-2);
  color:var(--lbn-on-photo);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.cta .field input::placeholder,.cta .field textarea::placeholder{color:var(--lbn-on-photo-2)}
.cta .consent{color:var(--lbn-on-photo-2)}
.cta .consent a{color:var(--lbn-on-photo)}
.cta .form__msg{background:var(--lbn-scrim-4);border-color:var(--lbn-on-photo-2);color:var(--lbn-on-photo)}
.cta .btn{--btn-bg:var(--lbn-on-photo);--btn-fg:var(--lbn-title)}
.cta .btn:hover{--btn-bg:var(--lbn-white)}
@media (min-width:900px){
  .cta{grid-template-columns:.85fr 1fr;gap:2.6rem;align-items:center}
}

/* ---------- Footer ------------------------------------------------------ */
.foot{
  padding-block:2.2rem 6rem;
  border-top:1px solid var(--lbn-line-soft);
  margin-top:clamp(2.5rem,2rem + 3vw,4rem);
  display:grid;
  gap:1.4rem;
  font-size:.755rem;
  color:var(--lbn-muted);
}
.foot a:hover{color:var(--lbn-title)}
.foot nav{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem}
.foot__legal{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem}
@media (min-width:900px){
  .foot{grid-template-columns:1fr auto;align-items:end;padding-bottom:2.2rem}
}

/* ---------- Entrada ----------------------------------------------------- */
/* Entrada de tarjetas: recorrido corto y curva larga. Lo que se busca es que
   la seccion se asiente, no que salte. */
.rise{
  opacity:0;
  transform:translate3d(0,28px,0) scale(.992);
  transition:opacity 1s var(--ease-out),transform 1.05s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.rise.in{opacity:1;transform:none}

/* Los encabezados de seccion entran antes y mas lejos que sus tarjetas: leen
   como una sola pieza que se asienta de arriba abajo. */
.rise--head{transform:translate3d(0,38px,0)}
.rise--head .eyebrow{
  opacity:0;
  transform:translate3d(0,10px,0);
  transition:opacity .9s var(--ease-out) .1s,transform .9s var(--ease-out) .1s;
}
.rise--head.in .eyebrow{opacity:1;transform:none}


/* Fondo LQIP. Solo pinta la miniatura difuminada bajo la imagen real. */
.lqip{background-size:cover;background-position:center}
/* Aparicion progresiva del <img> sobre ese fondo. No se pone en contenedores
   con varias imagenes superpuestas: ahi manda la clase de estado, no la carga. */
.ph{background-size:cover;background-position:center}
.ph img{opacity:0;transition:opacity .7s var(--ease)}
.ph img.is-loaded{opacity:1}

/* ---------- Movimiento reducido ---------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .rise{opacity:1;transform:none}
  .nav{--p:1}
  .nav__brand{transform:none !important}
  .js .line>span{opacity:1;transform:none}
  .hero__media img{opacity:1;transform:scale(1.02)}
  .hero__media img:not(.is-on){opacity:0}
  .ph img{opacity:1}
  .tile img{transform:none}
  .dot::after{display:none}
  .tl__fill{height:calc(100% - 1.2rem)}
  .tl__item::before{background:var(--lbn-title);border-color:var(--lbn-title)}
}

/* ---------- Impresion --------------------------------------------------- */
@media print{
  .nav,.dock,.grain,.bg,.lb{display:none !important}
  body{background:var(--lbn-white)}
  .rise{opacity:1;transform:none}
  .nav{--p:1}
  .nav__brand{transform:none !important}
}