@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-line-dark:rgb(244 245 245 / .16);
  --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%);
  --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);
}
/* .qa recorta con overflow:hidden: el contorno va por dentro o no se ve. */
.qa summary:focus-visible{outline-offset:-3px}
/* Sobre foto el azul de foco se pierde (1,0-2,8:1); ahi va en tinta clara. */
.cta :focus-visible,.hero :focus-visible{outline-color:var(--lbn-on-photo)}

/* ---------- 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}
/* --lbn-text y no --lbn-muted: sobre la foto difuminada de .bg, en el tercio
   inferior de la pantalla, el gris medio caia a 2,4:1 (auditoria 2026-09-14). */
.sec__head p{margin-top:.9rem;color:var(--lbn-text)}
.sec__head .eyebrow{color:var(--lbn-text)}
.hr{height:1px;background:var(--lbn-line);border:0;margin-block:1.15rem}
/* ---------- 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 claro sobre la tarjeta en tinta */
.chip--claro{
  border-color:transparent;
  background:var(--lbn-btn-ink);
  color:var(--lbn-btn);
}
.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, CTA y boton de menu acompanan al papel. Se retiran del foco
   mientras no se ven: sobre el banner la barra no existe todavia, y un boton
   de menu flotando solo sobre la foto delataba que aun no habia barra. */
.nav__links,.nav__cta,.nav__burger{opacity:var(--p)}
.nav--float .nav__links,.nav--float .nav__cta,.nav--float .nav__burger{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)}
/* Aqui vivia un halo radial detras del logo grande. Se quito por decision del
   estudio: se leia como una mancha sucia sobre la foto. Queda anotado el
   coste, medido sobre el banner actual: sin halo el wordmark cae a 1,7:1 de
   contraste sobre la zona media de la foto y a 1,2:1 sobre los armarios
   blancos. No incumple nada —WCAG exime a los logotipos del minimo de
   contraste— pero si el banner cambia a una foto muy clara, el logo se
   perdera. La salida entonces no es devolver el halo, sino oscurecer un poco
   mas --lbn-veil-top, que se lee como viñeteado y no como sombra. */
/* Sin sombra en el wordmark: quien lo sostiene sobre la foto es el halo de
   .nav__brand::before, y la sombra ademas ensuciaba los remates finos de
   Italiana en el estado grande. */
.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;transform-origin:left center}
/* Nitidez del logo de entrada. El texto se dibuja YA al cuerpo que tendra en
   la portada —initIntro fija --raster— y es la barra la que lo encoge al bajar.
   Antes se hacia al reves: se dibujaba al cuerpo de la barra y se ampliaba con
   scale(), asi que el navegador rasterizaba las letras pequenas y estiraba ese
   mapa de bits. Ampliar emborrona; reducir no.
   Hubo un intento intermedio con dos transformaciones anidadas —una en la
   barra y otra inversa aqui— cuyo producto daba 1. Chromium lo resolvia bien,
   pero Safari rasteriza cada capa por su cuenta y volvia a verse sucio. Ahora
   hay una sola transformacion, la de .nav__brand, y en la portada vale
   exactamente 1: ningun motor tiene nada que reescalar.
   .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;
  /* El hueco antes de STUDIO tiene que medir lo mismo que el que separa LO de
     BIANCO —el espacio de la fuente mas el tracking, 0,408 em medidos—. Con
     STUDIO en cuerpo pequeno bastaba la mitad; ahora que pesa igual, un hueco
     corto agrupaba BIANCO y STUDIO en un solo bloque y dejaba a LO suelto: el
     conjunto se leia desplazado a la izquierda aunque estuviera centrado al
     pixel. Tres palabras, tres huecos iguales. */
  gap:.408em;
  font-size:calc(1.26rem * var(--raster));
  letter-spacing:.11em;
}
/* Solo en la barra y en el banner: STUDIO deja de ser un subtitulo y pasa a
   pesar lo mismo que LO BIANCO. Misma Italiana, mismo cuerpo, mismo tracking y
   mismo color, para que las dos palabras se lean como un unico bloque y no
   como marca mas coletilla. El wordmark del pie sigue con el bloqueo apilado
   de siempre — ahi STUDIO va debajo, pequeno y en DM Sans.
   Todo en em: la pieza se escala entera con el wordmark. */
.nav__brand .wordmark i{
  font-family:inherit;
  font-size:1em;
  font-weight:inherit;
  letter-spacing:inherit;
  color:inherit;
  margin-top:0;
}
.nav__links{display:none;gap:.2rem}

/* ---------- Menu de hamburguesa ------------------------------------------
   Por debajo de 900px los enlaces de seccion no caben en la barra. Antes se
   ocultaban y punto: no habia forma de llegar a ellos desde un telefono o una
   tableta. Ahora ese mismo <nav> se convierte en un panel desplegable —no hay
   marcado duplicado, asi que no puede desincronizarse con la barra— y lo abre
   este boton. Por encima de 900px el boton desaparece y la lista vuelve a su
   fila de siempre. */
.nav__burger{
  display:none;
  position:relative;
  width:2.5rem;
  height:2.5rem;
  flex:none;
  border:1px solid var(--lbn-line-soft);
  border-radius:var(--r-pill);
  background:var(--lbn-glass);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  color:var(--lbn-title);
  cursor:pointer;
}
/* Tres trazos con un solo elemento: el central es el <span> y los otros dos
   son sus pseudoelementos. Al abrir, el central se desvanece y los extremos
   giran sobre el centro hasta formar la equis. */
.nav__burger span,
.nav__burger span::before,
.nav__burger span::after{
  position:absolute;
  left:50%;
  width:1.05rem;
  height:1.5px;
  margin-left:-.525rem;
  border-radius:2px;
  background:currentColor;
  transition:transform .34s var(--ease-out),background-color .2s linear;
}
.nav__burger span{top:50%;margin-top:-.75px}
.nav__burger span::before,.nav__burger span::after{content:'';left:0;margin-left:0}
.nav__burger span::before{top:-.34rem}
.nav__burger span::after{top:.34rem}
.nav--float .nav__burger{color:var(--lbn-on-photo)}
/* El trazo central se apaga por el FONDO, no por la opacidad: la opacidad
   crea un grupo de composicion y sus pseudoelementos —los otros dos trazos—
   se irian con el, por mucho que se les devuelva opacity:1 despues. */
.nav.is-open .nav__burger span{background:transparent}
.nav.is-open .nav__burger span::before{transform:translateY(.34rem) rotate(45deg)}
.nav.is-open .nav__burger span::after{transform:translateY(-.34rem) rotate(-45deg)}

@media (max-width:899px){
  .nav__burger{display:block}
  .nav__links{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:.1rem;
    position:absolute;
    top:calc(100% - .35rem);
    left:var(--gut);
    right:var(--gut);
    padding:.5rem;
    border-radius:var(--r-l);
    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),0 18px 40px -26px var(--lbn-scrim-3);
    /* Cerrado no ocupa sitio en el flujo ni recibe foco: visibility corta la
       navegacion por tabulador, que es lo que un opacity:0 solo no hace. */
    opacity:0;
    visibility:hidden;
    transform:translateY(-.5rem);
    transition:opacity .28s var(--ease-out),transform .28s var(--ease-out),visibility 0s .28s;
  }
  .nav.is-open .nav__links,
  .nav.is-open .nav__burger{
    opacity:1;
    visibility:visible;
    transform:none;
    transition:opacity .28s var(--ease-out),transform .28s var(--ease-out);
  }
  .nav__links a{padding:.72rem .8rem;font-size:.92rem;color:var(--lbn-title)}
  /* El subrayado deslizante es un gesto de raton: en el panel sobra. */
  .nav__links a::after{display:none}
  .nav__links a.on{background:var(--lbn-shade);border-radius:var(--r-m)}
}
.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)}
/* Instagram. Enlace normal, nunca un widget incrustado: el widget de Meta
   planta cookies de terceros y dejaria de ser cierta la pagina de cookies,
   que hoy afirma que el sitio no instala ninguna. */
.foot__ig{
  display:inline-flex;
  align-items:center;
  gap:.42rem;
  margin-top:.55rem;
  font-size:.735rem;
  line-height:1.5;
  color:var(--lbn-muted);
  transition:color .3s var(--ease);
}
.foot__ig:hover{color:var(--lbn-title)}
.foot__ig .ig{width:1.02em;height:1.02em;flex:none}
.ig-inline{
  color:var(--lbn-on-photo);
  text-decoration:underline;
  text-underline-offset:2px;
}

/* Conmutador de idioma. Va pegado al CTA porque es lo ultimo que se mira
   antes de decidir, y en movil es lo unico que sobrevive junto al logo. */
.nav__lang{
  flex:none;
  padding:.42rem .6rem;
  margin-right:.1rem;
  border-radius:var(--r-pill);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.09em;
  color:var(--lbn-muted);
  opacity:var(--p);
  transition:color .3s var(--ease),background .3s var(--ease);
}
.nav__lang:hover{color:var(--lbn-title);background:var(--lbn-glass-3)}
.nav--float .nav__lang{color:var(--lbn-on-photo)}
.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}
}
/* Con STUDIO al mismo cuerpo que LO BIANCO la marca mide la mitad de la barra,
   y por debajo de 360px el boton de WhatsApp se quedaba sin sitio para su
   propio texto. Un escalon mas de cuerpo devuelve el aire: es la marca la que
   cede, no el CTA. */
@media (max-width:360px){
  .nav__brand .wordmark{font-size:calc(.84rem * var(--raster))}
  .nav__cta{padding-inline:.75rem}
}

/* ---------- 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)}
/* Portada: sin epigrafe ni entradilla, el titular y los botones van centrados.
   El titular baja un escalon porque, centrado y sin texto de apoyo alrededor,
   al tamano anterior se comia el banner. */
.hero__in--centro{text-align:center}
.hero__in--centro h1{font-size:clamp(1.7rem,.95rem + 3.4vw,3.2rem)}
/* Quien tiene que centrarse es .hero__foot, no .hero__ctas: esta ultima se
   ajusta a su contenido, asi que centrar dentro de ella no movia nada — la
   caja entera seguia pegada a la izquierda de .hero__foot. */
.hero__in--centro .hero__foot{justify-content:center}
.hero__in--centro .hero__ctas{justify-content:center}
/* El lema tiene max-width en ch: sin margen automatico, centrado el texto,
   la caja seguiria pegada a la izquierda. */
.hero__in--centro .hero__lede{margin-inline:auto}
/* Botones algo mas contenidos que el .btn--lg del resto del sitio: centrados
   y sin texto de apoyo al lado, los grandes pesaban demasiado. */
.hero__in--centro .btn--lg{padding:.82rem 1.35rem;font-size:.8rem}
@media (max-width:560px){
  /* En movil van uno debajo del otro y con el mismo ancho, que en columna dos
     anchos distintos se leen como una jerarquia que no existe. */
  .hero__in--centro .hero__ctas{flex-direction:column;align-items:center;width:100%}
  .hero__in--centro .hero__ctas .btn{width:min(100%,20rem);justify-content:center}
}
.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)}
/* Regla bajo el h1 de /packs, en la tinta clara de las fotos. */
.rule{width:3.2rem;height:2px;border-radius:var(--r-pill);background:var(--lbn-on-photo);margin:1rem 0 .2rem}
.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}
/* Tarjetas simetricas: arriba, nombre, precio, «Detalles del pack» y lista
   empiezan a la misma altura en las tres; abajo, el tachado, la ficha y el
   boton se apoyan en el pie y tambien coinciden. Anuncio Completo no lleva
   tachado: su .pack__base vacio guarda el mismo alto de linea. */
.pack__base{margin-top:auto}
.pack__base~.pack__foot{margin-top:0}
.pack__base:empty{min-height:1.45em}
/* Pack recomendado en tinta, el mismo grafito de los botones del sitio, con
   la tinta clara de las fotos encima. Destaca por valor, no por color: sin
   rosas ni rojos (decision del estudio, 2026-09-14). */
.pack--star{border:1px solid var(--lbn-btn);background:var(--lbn-btn);padding:0;color:var(--lbn-on-photo-2)}
.pack--star>.pack__inner{
  border-radius:calc(var(--r-l) - 1px);
  overflow:hidden;
  background:linear-gradient(165deg,var(--lbn-btn-hi) 0%,var(--lbn-btn) 55%);
  display:flex;
  flex-direction:column;
  flex:1;
}
.pack--star h3,.pack--star .price b,.pack--star .list li,.pack--star .qa summary,.pack--star .pack__foot a:not(.btn){color:var(--lbn-on-photo)}
.pack--star p,.pack--star .muted,.pack--star .price span,.pack--star .price s,.pack--star .price-note{color:var(--lbn-on-photo-2)}
.pack--star .list li::before{border-color:var(--lbn-on-photo-2)}
.pack--star .hr{background:var(--lbn-line-dark)}
.pack--star .qa__x::before,.pack--star .qa__x::after{background:var(--lbn-on-photo)}
.pack--star .qa__body p{color:var(--lbn-on-photo-2)}
.pack--star .btn{--btn-bg:var(--lbn-btn-ink);--btn-fg:var(--lbn-btn)}
.pack--star .btn:hover{background:var(--lbn-white)}
.pack--star :focus-visible{outline-color:var(--lbn-on-photo)}
.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);
}
/* Tarjetas de packs en escritorio: el icono de cada servicio ocupa el sitio
   del punto, dentro de la misma sangria de 1.15rem y mas bajo que la linea
   (.9rem frente a 1.19rem), asi que la tarjeta mide lo mismo que antes. */
.list--ico li::before{content:none}
.list__i{position:absolute;left:0;top:.2em;width:.9rem;height:.9rem;color:var(--lbn-muted)}
.pack--star .list__i{color:var(--lbn-on-photo-2)}
@media (min-width:680px){.packs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.packs{grid-template-columns:repeat(3,1fr)}}

/* ---------- Selector de packs (movil y tablet) -------------------------- */
/* Tres tarjetas pequenas arriba y, debajo, solo el pack elegido con lo que
   incluye fila a fila. En telefono y en tablet: por ancho, hasta 1023px, y
   las tablets tactiles tambien en horizontal (un iPad tumbado pasa de 1024).
   En escritorio las tres tarjetas siguen una al lado de la otra. Sin
   JavaScript tampoco cambia nada: .is-on e .is-planes los pone initPlanes.
   La misma condicion vive en initPlanes: si se toca aqui, se toca alli. */
.planes{display:none}
.incluye{display:none}
@media (max-width:1023px), (pointer:coarse) and (max-width:1366px){
  .planes.is-on{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;padding-top:.8rem;margin-bottom:.9rem}
  .packs.is-planes{grid-template-columns:1fr}
  /* En tablet, selector y pack a lo ancho de un telefono grande y centrados:
     a 1000px la tabla quedaba con el check a medio metro del nombre. */
  .planes.is-on,.packs.is-planes{max-width:40rem;margin-inline:auto}
  .packs.is-planes .pack:not(.is-sel){display:none}
  .packs.is-planes .pack__tag,
  .packs.is-planes .pack .price,
  .packs.is-planes .pack .hr,
  .packs.is-planes .pack .list,
  .packs.is-planes .pack__base:empty{display:none}
  /* El nombre ya esta en el selector; el h3 se queda para el lector de pantalla */
  .packs.is-planes .pack h3{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .packs.is-planes .incluye{display:block}
}
.plan{
  position:relative;
  display:grid;
  justify-items:center;
  align-content:start;
  gap:.32rem;
  padding:1.1rem .35rem .95rem;
  border-radius:var(--r-m);
  border:1px solid var(--lbn-line-soft);
  background:var(--lbn-glass-3);
  font:inherit;
  text-align:center;
  color:var(--lbn-title);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:box-shadow .3s var(--ease),border-color .3s var(--ease);
}
/* Dos lineas reservadas para el nombre: asi los tres precios quedan a la
   misma altura aunque «Exclusiva» ocupe una sola. */
.plan__n{display:flex;align-items:center;min-height:2.4em;font-size:.74rem;font-weight:500;line-height:1.2}
.plan__p{font-size:clamp(1.3rem,1.05rem + 1.4vw,1.75rem);font-weight:200;line-height:1;white-space:nowrap}
.plan__s{font-size:.66rem;letter-spacing:.03em;color:var(--lbn-muted)}
.plan--star{border-color:var(--lbn-btn);background:linear-gradient(165deg,var(--lbn-btn-hi) 0%,var(--lbn-btn) 60%);color:var(--lbn-on-photo)}
.plan--star .plan__s{color:var(--lbn-on-photo-2)}
.plan[aria-selected="true"]{border-color:var(--lbn-btn);box-shadow:0 0 0 2px var(--lbn-bg),0 0 0 3.5px var(--lbn-btn),0 12px 26px var(--lbn-shade-2)}
.plan:focus-visible{outline:2px solid var(--lbn-focus);outline-offset:5px}
.plan__tag{
  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%,-50%);
  padding:.3rem .6rem;
  border-radius:var(--r-pill);
  border:1px solid var(--lbn-btn);
  background:var(--lbn-btn-ink);
  color:var(--lbn-btn);
  font-size:.6rem;
  font-weight:500;
  letter-spacing:.06em;
  line-height:1;
  white-space:nowrap;
}
.incluye__h{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.6rem;border-bottom:1px solid var(--lbn-line);font-size:.72rem;font-weight:500;letter-spacing:.03em;color:var(--lbn-title)}
.incluye ul{list-style:none;margin:0;padding:0}
.incluye__f{display:grid;grid-template-columns:2.1rem minmax(0,1fr) 1.5rem;align-items:center;gap:.75rem;padding:.6rem 0;border-bottom:1px solid var(--lbn-line-soft)}
.incluye__f:last-child{border-bottom:0}
.incluye__i{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:var(--r-pill);border:1px solid var(--lbn-line);color:var(--lbn-title)}
.incluye__i svg,.incluye__s svg{width:1rem;height:1rem}
.incluye__t{display:grid;gap:.08rem}
.incluye__t b{font-size:.8rem;font-weight:500;line-height:1.3;color:var(--lbn-title)}
.incluye__t small{font-size:.72rem;line-height:1.35;color:var(--lbn-muted)}
.incluye__s{display:grid;place-items:center;color:var(--lbn-title)}
.pack--star .incluye__h{color:var(--lbn-on-photo);border-color:var(--lbn-line-dark)}
.pack--star .incluye__f{border-color:var(--lbn-line-dark)}
.pack--star .incluye__i{border-color:var(--lbn-line-dark);color:var(--lbn-on-photo)}
.pack--star .incluye__t b,.pack--star .incluye__s{color:var(--lbn-on-photo)}
.pack--star .incluye__t small{color:var(--lbn-on-photo-2)}

/* 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}
/* Al abrir, visibility cambia al instante: con la transicion el boton de
   cerrar seguia oculto cuando se le daba el foco y el foco no se movia. */
.lb.is-on{transition:opacity .4s var(--ease)}
.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}
/* En un telefono la fila no cabe en una linea: el valor baja bajo la etiqueta
   y puede partir. Sin esto la fila mas larga (el domicilio en privacidad y
   condiciones) ensanchaba la tarjeta entera y el texto quedaba recortado. */
@media (max-width:559px){
  .row{flex-wrap:wrap;row-gap:.2rem}
  .row>span:last-child{white-space:normal}
}
@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 de dos columnas con nombres largos (extras de /packs): la etiqueta
   parte linea y la tabla cabe en un telefono sin desplazarse de lado. */
.tabla--wrap table{min-width:0}
.tabla--wrap tbody th{white-space:normal}
/* Comparativa de cuatro columnas en un telefono: cabeceras y celdas parten
   linea y la letra baja un punto, asi la tabla cabe sin desplazarse. */
.tabla--wrap thead th,.tabla--wrap td{white-space:normal}
@media (max-width:559px){
  .tabla--wrap table{font-size:.72rem}
  .tabla--wrap th,.tabla--wrap td{padding-right:.45rem}
  .tabla--wrap th:last-child,.tabla--wrap td:last-child{padding-right:0}
  .tabla--wrap tbody th{hyphens:auto;-webkit-hyphens:auto}
  .tabla--wrap thead th{letter-spacing:.04em}
  .tabla--wrap .tabla__precio b{font-size:1rem}
}
.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}
/* En un telefono el mapa entero se quedaba en letra de 5 px. Se muestra a un
   tamano legible como franja que se desliza de lado; initMapa la centra en
   la zona con desplazamiento incluido, de Fuengirola a Rincon. */
@media (max-width:559px){
  .mapa{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-inline:0}
  .mapa svg{width:560px;max-width:none}
}
.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}
/* Tramo de costa con desplazamiento incluido: un trazo ancho y suave. */
.mapa .zona{fill:none;stroke:var(--lbn-title);stroke-width:7;stroke-linecap:round;opacity:.14}
.mapa .mapa__zona{fill:var(--lbn-text);font-weight:500;letter-spacing:.12em;text-transform:uppercase;font-size:6.2px}

/* ---------- 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)}
/* Sin display:none: una region aria-live que aparece y se rellena en el
   mismo instante puede no anunciarse. Vacia, no ocupa nada. */
.form__msg{
  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:not(.is-on){padding:0;border:0}

/* ---------- 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-2) 100%);
}
.cta,.cta h2,.cta .eyebrow{color:var(--lbn-on-photo)}
.cta p{color:var(--lbn-on-photo-2)}
/* Enlaces dentro de texto: subrayados, no solo por color (WCAG 1.4.1). */
.cta .xs a,.hero__lede a{text-decoration:underline;text-underline-offset:2px}
.cta .field>span{color:var(--lbn-on-photo)}
.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-text);
}
.foot .muted{color:inherit}
.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. */
/* Solo con .js: sin JavaScript nada se queda oculto esperando una entrada. */
.js .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);
}
/* .js .rise.in pesa mas que .js .rise--head: sin esto el encabezado se
   quedaba 38 px abajo despues de entrar y montaba sobre su seccion. */
.rise.in,.js .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. */
.js .rise--head{transform:translate3d(0,38px,0)}
.js .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;
  }
  .js .rise,.js .rise--head .eyebrow{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)}
  .js .rise,.js .rise--head .eyebrow{opacity:1;transform:none}
  .nav{--p:1}
  .nav__brand{transform:none !important}
}

/* ---------- Piezas de la pagina de servicios ---------------------------- */
/* Cada entregable es una pieza: el material a un lado y su explicacion al
   otro. En movil se apilan. Se alternan los lados en las pares para que la
   pagina no se lea como una lista. */
.pieza{
  display:grid;
  gap:clamp(1.1rem,.8rem + 1.6vw,2.2rem);
  align-items:center;
}
@media (min-width:820px){
  .pieza{grid-template-columns:1fr .85fr}
  .sec:nth-of-type(even) .pieza .pieza__media{order:2}
}
.pieza__media{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-l);
  background:var(--lbn-shade);
}
.pieza__media img,.pieza__media video{width:100%;height:100%;object-fit:cover;display:block}
/* Marca el video que se reproduce solo. La clase la usa initVideo para
   observarlo; aqui solo se declara para que no quede huerfana. */
.reproduce{background:var(--lbn-shade)}

/* ---------- Captacion en Redes (/packs) -------------------------------- */
.captacion{align-items:center}
.captacion__v{position:relative;margin:0;border-radius:var(--r-m);overflow:hidden;aspect-ratio:9/16;width:min(100%,15rem);justify-self:center;background:var(--lbn-shade)}
.captacion__v video{display:block;width:100%;height:100%;object-fit:cover}
.captacion__v figcaption{position:absolute;left:.7rem;bottom:.7rem}
.captacion__txt{display:grid;gap:.7rem;justify-items:start}
@media (min-width:820px){.captacion{grid-template-columns:15rem minmax(0,1fr);gap:2.2rem}}

/* ---------- Anadidos filtrables (/packs) ------------------------------- */
.filtros{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1rem}
.filtro{cursor:pointer;font:inherit;font-size:.72rem}
.filtro[aria-pressed="true"]{background:var(--lbn-btn);border-color:var(--lbn-btn);color:var(--lbn-btn-ink)}
.extras{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));list-style:none;margin:0;padding:0}
.extra{display:grid;gap:.35rem;align-content:start;padding:1.1rem 1.15rem 1.2rem;border-radius:var(--r-m)}
.extra[hidden]{display:none}
.extra__cat{font-size:.66rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--lbn-text)}
.extra b{font-size:.95rem;font-weight:400;color:var(--lbn-title);letter-spacing:-.012em}
.extra p{font-size:.795rem;line-height:1.5;color:var(--lbn-text)}

/* ---------- Muestra de entregables (/packs) ---------------------------- */
/* Video vertical a la izquierda ocupando dos filas; tour y plano a la
   derecha. Sin textos debajo: una etiqueta sobre cada pieza. */
.muestra{display:grid;gap:.7rem;margin-top:.7rem}
.muestra figure{position:relative;margin:0;border-radius:var(--r-m);overflow:hidden;background:var(--lbn-shade)}
.muestra video,.muestra img{display:block;width:100%;height:100%;object-fit:cover}
.muestra__v{aspect-ratio:9/16;max-height:78vh}
.muestra__t{aspect-ratio:16/9}
.muestra__p{background:var(--lbn-white)}
.muestra__p img{object-fit:contain;padding:clamp(.6rem,2vw,1.2rem)}
.muestra figcaption{position:absolute;left:.7rem;bottom:.7rem}
@media (min-width:820px){
  .muestra{grid-template-columns:minmax(0,.58fr) minmax(0,1fr)}
  .muestra__v{grid-row:span 2;aspect-ratio:auto;max-height:none;min-height:100%}
  .muestra__p{aspect-ratio:16/10}
}
/* Telefono y tablet estrecha: la rejilla de fotos es de dos columnas y la
   sexta foto quedaba sola en su fila. initMuestra mete el recorrido en la
   rejilla (y le pone .grid--video): va entero, en 9:16 sin recortar, en la
   columna derecha de la fila 2 a la 4, con tres fotos apiladas a su lado y
   dos debajo. La rejilla cierra en rectangulo. Esas tres fotos no aportan
   alto propio (imagen en absoluto, sin aspect-ratio): el alto de sus filas
   lo pone el video y ellas lo llenan. En escritorio el video vuelve junto al
   tour y el plano. Sin JavaScript se queda debajo, mas pequeno y centrado.
   Mismo corte que la rejilla: 820px. */
@media (max-width:819px){
  .muestra__v{width:min(100%,12rem);max-height:none;justify-self:center}
  .grid>.muestra__v{position:relative;margin:0;width:auto;max-height:none;justify-self:stretch;grid-column:2;grid-row:2 / span 3;aspect-ratio:9/16;border-radius:var(--r-m);overflow:hidden;background:var(--lbn-shade)}
  .grid>.muestra__v video{display:block;width:100%;height:100%;object-fit:cover}
  .grid>.muestra__v figcaption{position:absolute;left:.7rem;bottom:.7rem}
  .grid--video .tile:nth-child(-n+4):not(:first-child){aspect-ratio:auto;min-height:0}
  .grid--video .tile:nth-child(-n+4):not(:first-child) img{position:absolute;inset:0}
}
/* El recorrido es vertical: se limita el alto para que no se coma la pantalla */
/* El recorrido es vertical. Se limita por ALTO y no por ancho: con un tope de
   anchura, el 9:16 lo estiraba hasta pasar de 46rem de alto y se comia la
   pantalla entera. */
.pieza__media--vertical{aspect-ratio:9/16;height:min(68vh,32rem);width:auto;max-width:100%;margin-inline:auto}
.pieza__media--apaisado{aspect-ratio:16/9}
.pieza__media--plano{background:var(--lbn-white);padding:clamp(.6rem,2vw,1.4rem)}
.pieza__media--plano img{object-fit:contain;height:auto}
.pieza__txt h3{margin-bottom:.5rem}
.pieza__txt p+p{margin-top:.5rem}
.pieza__txt p{color:var(--lbn-text)}

/* ---------- Vertical para redes ----------------------------------------- */
/* Los vídeos se sirven desde este dominio, no incrustados desde Instagram ni
   TikTok: no hay peticiones a Meta ni a ByteDance, no hay cookies de terceros
   y no hace falta pedir consentimiento para verlos. El enlace a la cuenta de
   cada agente es un enlace normal.
   Se limita el ancho de columna: en 9:16 una columna ancha da una caja de más
   de 40rem de alto y la sección se vuelve una escalera. */
.reels{
  display:grid;
  gap:clamp(.9rem,2.4vw,1.6rem);
  justify-content:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),17rem));
}
.reel{margin:0}
.reel__media{
  position:relative;
  aspect-ratio:9/16;
  overflow:hidden;
  border-radius:var(--r-l);
  background:var(--lbn-shade);
}
.reel__media video{width:100%;height:100%;object-fit:cover;display:block}
/* En columna, no a dos extremos. Una pieza puede llevar dos cuentas y
   @fanny.strandproperties solo ya ocupa 23 caracteres: en una columna de 17rem
   el space-between partia la linea y dejaba la propiedad y el usuario a
   distinta altura. Apilado se leen como ficha: que es, y de quien. */
.reel__pie{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.22rem;
  margin-top:.7rem;
  font-size:.735rem;
}
.reel__prop{color:var(--lbn-muted)}
.reel__ig{
  display:inline-flex;
  align-items:center;
  gap:.36rem;
  color:var(--lbn-muted);
  transition:color .3s var(--ease);
}
.reel__ig:hover{color:var(--lbn-title)}
.reel__ig svg{width:1.02em;height:1.02em;flex:none}

/* Logo de agencia con la que se ha trabajado. Se muestra pequeno a proposito:
   el fichero original mide 168 px de ancho y por encima de 84 px CSS pierde
   nitidez en pantalla retina. */
/* Credito de cliente al pie de la cabecera de una seccion de la galeria. El
   logo va donde esta el trabajo que se hizo para esa marca, no en una fila
   suelta de logotipos: asi el credito se lee sobre lo que lo respalda.
   84px es el ancho maximo al que el PNG de 168px sigue nitido en retina. */
.credito{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-top:.7rem;
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--lbn-muted);
}
.credito img{width:84px;height:auto;opacity:.78}

/* Fila de botones que cierra una seccion. La disposicion sigue en el style
   en linea de cada pagina; esta clase existe como enganche estable para el
   centrado en movil y tablet. */
/* ---------- Precio de entrada -------------------------------------------
   Una sola cifra, la de partida, y siempre acompanada de la condicion que la
   hace creible: presupuesto cerrado antes de reservar. No es una tarifa; es la
   respuesta a "cuanto cuesta esto" para que nadie tenga que escribir solo para
   averiguarlo. Hereda el color del parrafo, asi que funciona igual sobre papel
   y sobre foto —dentro de .cta manda .cta p—. */
.desde{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.1rem .45rem;
  margin-top:1.1rem;
  font-size:.8rem;
  color:var(--lbn-muted);
}
.desde b{font-weight:500;font-size:.95rem;color:var(--lbn-title)}
/* El separador lo pone el CSS, no el texto: cuando la linea se parte en dos
   —y en un telefono se parte siempre— un punto medio al principio del renglon
   queda huerfano. Asi desaparece con el salto en vez de encabezarlo. */
.desde span::before{content:'·';margin-right:.45rem}
.cta .desde{margin-top:.7rem}
.cta .desde b{color:var(--lbn-on-photo)}

/* Cabecera de seccion centrada a cualquier ancho. No es el centrado tactil de
   mas abajo: aqui el centro es la forma que se le ha querido dar al bloque. */
.sec__head--centro{text-align:center;margin-inline:auto}
.sec__head--centro p{margin-inline:auto}
.sec__head--centro .desde{justify-content:center}

.acciones{display:flex;flex-wrap:wrap;gap:.6rem}
/* Variante centrada a cualquier ancho. La usa el boton que cierra Redes
   Sociales: ahi el centrado no depende del dispositivo, es la forma de la
   seccion —dos columnas de video y una llamada debajo, en el eje. */
.acciones--centro{justify-content:center}
/* Iconos de plataforma dentro de un boton. Van delante del texto —al reves
   que la flecha, que empuja— y algo mas grandes: son marca reconocible, no
   direccion. El de WhatsApp es relleno, asi que no hereda el trazo. */
.btn svg.ig-btn{width:1.15em;height:1.15em}
.btn svg.wa-btn{width:1.25em;height:1.25em;stroke:none}

/* En la barra el icono de WhatsApp esta puesto pero no se ve: en escritorio
   manda la palabra. Solo en telefono se cambian los papeles —icono si, texto
   y flecha no— porque ahi cada pixel de la barra lo pide el logo. El texto se
   oculta con display:none, asi que el nombre accesible del enlace lo sostiene
   su aria-label, que dice lo mismo que la palabra que desaparece. */
.nav__cta .wa-btn{display:none}

@media (max-width:1023px) and (pointer:coarse){
  .nav__cta .wa-btn{display:block}
  .nav__cta .nav__cta-txt,
  .nav__cta > svg:not(.wa-btn){display:none}
  .nav__cta{padding-inline:.8rem}
}

/* ---------- Movil: las bandas se quedan en foto --------------------------
   En una pantalla de telefono la banda mide poco mas que el texto que lleva
   encima, y la foto —que es el argumento— queda reducida a un fondo tapado.
   Se retira el parrafo y se deja la imagen limpia con su boton. Solo en
   telefono: en tablet hay ancho de sobra y el texto se lee bien.
   Es contenido, no decoracion, asi que desaparece tambien para un lector de
   pantalla; el mismo mensaje esta desarrollado en las secciones de alrededor. */
@media (max-width:767px) and (pointer:coarse){
  .band__txt p{display:none}
  .band__txt{justify-content:flex-end}
}

/* ---------- Movil y tablet: contenido centrado --------------------------- */
/* Dos condiciones, y las dos importan.
   El ancho no basta: una ventana de escritorio encogida por debajo de 1024px
   tambien lo cumple, y ahi el centrado no se quiere. Por eso se pide ademas
   pointer:coarse, que solo cumplen los punteros gruesos —el dedo—. Un raton,
   por estrecha que sea la ventana, es pointer:fine y no entra.
   Asi el centrado vive en moviles y tablets de verdad, y el escritorio queda
   exactamente como estaba a cualquier tamano de ventana.
   Se centran cabeceras, textos de apoyo, tarjetas, bandas y botones. NO se
   tocan las filas de dos columnas, la tabla, los campos del formulario ni el
   acordeon de preguntas —ahi el centrado rompe la relacion entre etiqueta y
   valor— ni la seccion #contacto, que por decision del estudio se ve igual en
   todos los anchos. */
@media (max-width:1023px) and (pointer:coarse){
  .sec__head{text-align:center;margin-inline:auto}
  .sec__head p{margin-inline:auto}

  /* Tarjetas de las cuatro decisiones y tramos de la entrega */
  .step{text-align:center}
  .step em{margin-inline:auto}

  /* Bandas de foto a sangre. El boton no se centraba con text-align porque
     .band__txt es un flex en columna: manda align-items, no la alineacion
     de texto. Por eso hay que tocar tambien el align-self del propio boton. */
  .band__txt{text-align:center;align-items:center}
  .band__txt p{margin-inline:auto}
  .band__cta{align-self:center}

  /* Banner de las paginas interiores; el de la portada ya va centrado */
  .hero__in{text-align:center}
  .hero__in .hero__lede{margin-inline:auto}
  .hero__in .rule{margin-inline:auto}
  .hero__foot,.hero__ctas{justify-content:center}

  /* Explicacion de cada pieza en la pagina de servicios, y ficha al pie de
     cada vertical. En movil la pieza se apila y el texto queda debajo del
     material: si no se centra, se lee desalineado respecto a la cabecera de su
     propia seccion. */
  .pieza__txt{text-align:center}
  .reel__pie{align-items:center;text-align:center}

  /* Filas de botones que cierran una seccion. Llevan la clase .acciones y no
     un selector sobre el atributo style: initReveal escribe --d con
     setProperty, el navegador reserializa el atributo entero y "display:flex"
     pasa a "display: flex". Un [style*="display:flex"] deja de coincidir en
     cuanto arranca el JavaScript, que es justo lo que pasaba. */
  .acciones{justify-content:center}
  .desde{justify-content:center}
  .desde span{width:100%;text-align:center}
  .desde span::before{content:none}
}