/* ═══════════════════════════════════════════════════════════
   SISTEMA VISUAL DE PROMOCIONES — hoja común
   ═══════════════════════════════════════════════════════════

   Lo comparten las cuatro landings de web-nodus/proyectos/. No lleva ni
   un color ni una tipografía dentro: los pone piel-nodus.css (común) y,
   después, el assets/css/proyecto.css de cada promoción.

   Tokens que espera de theme.css:
     --ink / --ink-rgb        fondo más oscuro
     --deep / --deep-rgb      fondo oscuro de sección
     --deep-2                 variante del anterior
     --accent / --accent-rgb  color de marca
     --accent-hi              variante clara del acento
     --paper / --paper-rgb    fondo claro
     --sand                   fondo claro secundario
     --grey / --grey-2        texto corrido y texto secundario
     --serif / --sans         tipografías
     --curtain-bg             color medio del primer fotograma
     --curtain-img            url() de ese fotograma
     --texture-img            url() de la textura de la sección oscura
     --select-arrow           url() de la flecha del <select>
   ═══════════════════════════════════════════════════════════ */

:root{
  --wrap: 1240px;
  --gut: clamp(1.25rem, 5vw, 4rem);
  --sect: clamp(5rem, 11vw, 9.5rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

/* IMPRESCINDIBLE: `.lb` y `.menu` declaran display:grid/flex, y una regla de
   autor gana al `[hidden]{display:none}` del navegador. Sin esto, el lightbox
   oculto queda extendido sobre toda la página (z-index 150) y se come todos
   los clics del sitio. */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--grey);
  font-family:var(--sans);
  font-weight:300;
  font-size:1.0625rem;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body.is-locked{ overflow:hidden; }

img,video,svg{ display:block; max-width:100%; }
img,video{ height:auto; }

a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:var(--accent); color:var(--deep); }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }


/* ─────────── Tipografía ─────────── */

.eyebrow{
  display:block;
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  --track:.4em;
  letter-spacing:var(--track);
  text-transform:uppercase;
  color:var(--accent-dk);
  margin:0 0 1.6rem;
}
.eyebrow--light{ color:var(--accent-hi); }

.display{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.1rem, 5.2vw, 4.25rem);
  line-height:1.08;
  letter-spacing:-.015em;
  color:var(--deep);
  margin:0 0 2rem;
  position:relative;
}
.display--light{ color:var(--paper); }
.ital{ font-style:italic; color:var(--accent-dk); }
.display--light .ital{ color:var(--accent-hi); }

.lede{
  font-size:clamp(1.1rem,1.6vw,1.3rem);
  line-height:1.6;
  color:var(--deep);
}
.lede strong{ font-weight:500; }

.disclaimer{
  margin-top:3rem;
  font-size:.8rem;
  line-height:1.7;
  color:var(--grey-2);
  max-width:60ch;
}
.disclaimer--light{ color:rgb(var(--paper-rgb) / .5); }


/* ─────────── Botones ─────────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1.05rem 2.1rem;
  font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  border:1px solid transparent;
  border-radius:2px;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .3s var(--ease);
  will-change:transform;
}
.btn--gold{ background:var(--accent); color:var(--deep); }
.btn--gold:hover{ background:var(--accent-hi); transform:translateY(-2px); }
.btn--ghost{ border-color:rgb(var(--paper-rgb) / .45); color:var(--paper); }
.btn--ghost:hover{ border-color:var(--paper); background:rgb(var(--paper-rgb) / .1); transform:translateY(-2px); }
.btn--sm{ padding:.8rem 1.5rem; font-size:10px; }
.btn--block{ width:100%; }


/* ═══════════════ CORTINILLA DE ENTRADA ═══════════════

   El arranque es el primer fotograma del vídeo, con el mismo encuadre que
   usa el <video>, para que al retirarse no se note el cambio. El color de
   fondo es el tono medio de ese fotograma: si la imagen aún no ha pintado,
   se ve la imagen y no un fogonazo de color.
   Sin JS no aparece. Y aunque lo haya, un respaldo en CSS la retira a los
   4 s pase lo que pase: la web nunca se queda tapada. */
.curtain{ display:none; }
.js-ready .curtain{
  position:fixed; inset:0; z-index:200;
  display:block;
  background:var(--curtain-bg) var(--curtain-img) 50% 50%/cover no-repeat;
  transition:opacity .8s var(--ease), visibility .8s;
  animation:curtainFailsafe .8s var(--ease) 4s forwards;
}
@keyframes curtainFailsafe{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
.curtain.is-gone{ opacity:0; visibility:hidden; pointer-events:none; }
/* Corte seco: se usa cuando debajo está el vídeo en el mismo fotograma. */
.js-ready .curtain.is-instant{ transition:none; animation:none; }


/* ═══════════════ NAV ═══════════════ */

.nav{
  position:fixed; inset:0 0 auto; z-index:100;
  transition:background .5s var(--ease), box-shadow .5s var(--ease);
}
.nav__bar{
  max-width:var(--wrap); margin-inline:auto;
  padding:1.5rem var(--gut);
  display:flex; align-items:center; gap:2rem;
  transition:padding .5s var(--ease);
}
.nav__brand{ margin-right:auto; display:block; flex:none; line-height:1.1; }

/* Marca tipográfica: no hay logotipo vectorial de ninguna de las tres
   promociones, así que se compone con la tipografía en vez de rasterizar
   un recorte del PDF. Se ve nítida a cualquier resolución. */
.brand{ display:grid; gap:.15rem; }
.brand__name{
  font-family:var(--serif); font-size:clamp(1rem,1.5vw,1.22rem);
  line-height:1; letter-spacing:.02em; color:var(--paper);
  transition:color .4s var(--ease);
}
.brand__sub{
  font-size:8.5px; letter-spacing:.3em; text-transform:uppercase;
  color:rgb(var(--paper-rgb) / .6);
  transition:color .4s var(--ease);
}
.nav.is-stuck .brand__name{ color:var(--deep); }
.nav.is-stuck .brand__sub{ color:var(--grey-2); }

.nav__links{ display:flex; gap:1.7rem; }
.nav__links a{
  position:relative;
  font-size:11px; font-weight:400; letter-spacing:.15em; text-transform:uppercase;
  white-space:nowrap;
  color:rgb(var(--paper-rgb) / .82);
  transition:color .35s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-7px;
  width:100%; height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover{ color:var(--paper); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__links a.is-current{ color:var(--accent-hi); }

.nav__cta{ border-color:rgb(var(--paper-rgb) / .4); color:var(--paper); white-space:nowrap; flex:none; }
.nav__cta:hover{ background:var(--accent); border-color:var(--accent); color:var(--deep); }

/* estado "scrolled" */
.nav.is-stuck{
  background:rgb(var(--paper-rgb) / .96);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgb(var(--deep-rgb) / .1);
}
.nav.is-stuck .nav__bar{ padding-block:.85rem; }
.nav.is-stuck .nav__links a{ color:rgb(var(--deep-rgb) / .72); }
.nav.is-stuck .nav__links a:hover{ color:var(--deep); }
.nav.is-stuck .nav__cta{ border-color:rgb(var(--deep-rgb) / .3); color:var(--deep); }
.nav.is-stuck .nav__cta:hover{ background:var(--deep); border-color:var(--deep); color:var(--paper); }

/* hamburguesa */
.nav__burger{ display:none; width:42px; height:42px; position:relative; flex:none; }
.nav__burger span{
  position:absolute; left:9px; width:24px; height:1.5px; background:var(--paper);
  transition:transform .4s var(--ease), opacity .3s var(--ease), background .4s var(--ease);
}
.nav__burger span:nth-child(1){ top:18px; }
.nav__burger span:nth-child(2){ top:25px; }
.nav.is-stuck .nav__burger span{ background:var(--deep); }
.nav.is-open .nav__burger span{ background:var(--paper); }
.nav.is-open .nav__burger span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

/* Por debajo de 1200px no caben la vuelta a NODUS, la marca, los enlaces y el
   botón en una línea: pasamos a menú.
   (Debe ir DESPUÉS de `.nav__burger{display:none}` para ganar la cascada.) */
@media (max-width:1200px){
  .nav__links,
  .nav__cta{ display:none; }
  .nav__burger{ display:block; margin-left:auto; }
  .nav.is-open{ background:transparent; box-shadow:none; }
  .nav.is-open .brand__name{ color:var(--paper); }
  .nav.is-open .brand__sub{ color:rgb(var(--paper-rgb) / .6); }
}

/* menú móvil */
.menu{
  position:fixed; inset:0; z-index:95;
  background:var(--deep);
  display:flex; flex-direction:column; justify-content:center;
  padding:6rem var(--gut) 3rem;
  opacity:0; transition:opacity .45s var(--ease);
}
.menu.is-open{ opacity:1; }
.menu__links{ display:grid; gap:.3rem; }
.menu__links a{
  font-family:var(--serif); font-size:clamp(1.7rem,6.5vw,2.8rem); color:var(--paper);
  display:flex; align-items:baseline; gap:1.2rem;
  padding:.35rem 0;
  opacity:0; transform:translateY(20px);
  transition:color .3s var(--ease);
}
.menu.is-open .menu__links a{ animation:menuIn .6s var(--ease-out) forwards; }
.menu__links a:nth-child(1){ animation-delay:.06s; }
.menu__links a:nth-child(2){ animation-delay:.12s; }
.menu__links a:nth-child(3){ animation-delay:.18s; }
.menu__links a:nth-child(4){ animation-delay:.24s; }
.menu__links a:nth-child(5){ animation-delay:.30s; }
.menu__links a:nth-child(6){ animation-delay:.36s; }
.menu__links a:nth-child(7){ animation-delay:.42s; }
.menu__links a:hover{ color:var(--accent); }
.menu__links em{
  font-family:var(--sans); font-style:normal; font-size:11px;
  letter-spacing:.3em; color:var(--accent);
}
.menu__foot{ margin-top:3rem; }
@keyframes menuIn{ to{ opacity:1; transform:none; } }


/* ═══════════════ HERO ═══════════════ */

.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:9rem var(--gut) clamp(5rem,10vh,8rem);
  overflow:hidden;
  color:var(--paper);
  background:var(--deep);
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__video,.hero__still{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:var(--hero-pos,50% 50%);
}
.hero__still{ opacity:0; transition:opacity .8s var(--ease); }
/* Sin vídeo disponible: se muestra el render con un zoom muy lento */
.hero.no-video .hero__video{ display:none; }
.hero.no-video .hero__still{ opacity:1; animation:kenburns 30s ease-in-out infinite alternate; }
@keyframes kenburns{ from{ transform:scale(1.01) translate3d(0,0,0); } to{ transform:scale(1.07) translate3d(-1%,-.8%,0); } }

/* Variante "sin material": no hay render de cabecera todavía, así que el
   hueco se resuelve con un fondo trabajado en vez de una imagen estirada. */
.hero--pending .hero__still{ opacity:.22; filter:grayscale(1) contrast(1.15); }
.hero--pending.no-video .hero__still{ animation:none; transform:scale(1.02); }

.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgb(var(--ink-rgb) / .93) 0%, rgb(var(--ink-rgb) / .6) 38%, rgb(var(--ink-rgb) / .15) 68%, rgb(var(--ink-rgb) / .55) 100%),
    linear-gradient(to right, rgb(var(--ink-rgb) / .78) 0%, rgb(var(--ink-rgb) / .45) 38%, rgb(var(--ink-rgb) / .08) 70%, transparent 100%);
}
.hero__grain{
  position:absolute; inset:0; opacity:.055; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__body{ position:relative; z-index:3; max-width:min(64rem,100%); }

.hero__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(3rem, 11vw, 8.6rem);
  line-height:.94; letter-spacing:-.03em;
  margin:0 0 1.75rem;
  text-wrap:balance;
}
.hero__title span{ display:block; }
.hero__title .underlined{ position:relative; display:inline-block; }

.hero__sub{
  font-size:clamp(1.05rem,1.9vw,1.4rem);
  font-weight:200; line-height:1.65;
  color:rgb(var(--paper-rgb) / .9);
  max-width:46ch;
  margin:0 0 2.75rem;
}

/* width:fit-content para que la flecha dibujada quede junto a los botones
   y no perdida en el borde derecho del hero. */
.hero__actions{
  display:flex; flex-wrap:wrap; gap:1rem;
  position:relative; width:fit-content; max-width:100%;
}

.hero__cue{
  position:absolute; left:50%; bottom:2rem; z-index:3;
  transform:translateX(-50%);
  display:grid; justify-items:center; gap:.9rem;
  color:rgb(var(--paper-rgb) / .6);
  transition:color .35s var(--ease);
}
@media (max-width:1100px){ .hero__cue{ display:none; } }
.hero__cue:hover{ color:var(--paper); }
.hero__cue-label{ font-size:10px; letter-spacing:.34em; text-transform:uppercase; }
.hero__cue-line{
  width:1px; height:52px; background:linear-gradient(to bottom,var(--accent),transparent);
  position:relative; overflow:hidden;
}
.hero__cue-line::after{
  content:""; position:absolute; inset:0; background:var(--accent);
  animation:cue 2.2s var(--ease) infinite;
}
@keyframes cue{ 0%{transform:translateY(-100%);} 60%,100%{transform:translateY(100%);} }


/* ═══════════════ APERTURA CINEMATOGRÁFICA ═══════════════

   Al cargar, el vídeo manda: se retira la interfaz, el velo se aclara y la
   imagen queda ligeramente ampliada. Al terminar la apertura todo "se
   asienta" en el header con su coreografía normal. No hay un segundo vídeo:
   es el mismo elemento del hero, solo cambia el estado de la página. */

.opening{
  position:absolute; inset:0; z-index:6;
  display:grid; grid-template-rows:1fr auto;
  pointer-events:none;
}
body.is-opening{ overflow:hidden; }
/* Seguro: si el vídeo tardara en pintar, detrás está el tono del fotograma. */
body.is-opening .hero{ background:var(--curtain-bg); }

/* La interfaz se aparta mientras dura la apertura y vuelve con calma */
.nav,
.hero__cue,
.wa,
.doodles{ transition:opacity .9s var(--ease), visibility .9s; }

/* Se ocultan de golpe (aún detrás de la cortinilla) y solo se transicionan
   al volver: si se desvanecieran al empezar, la interfaz se vería flotar
   sobre el primer segundo de vídeo y se perdería el efecto de apertura. */
body.is-opening .nav,
body.is-opening .hero__cue,
body.is-opening .wa,
body.is-opening .doodles{
  opacity:0; visibility:hidden; pointer-events:none;
  transition:none;
}

/* El cuerpo del hero aparece sin fundido propio: así la entrada escalonada
   de sus hijos (.reveal) se ve limpia y no se solapan dos animaciones. */
body.is-opening .hero__body{ visibility:hidden; }

/* Durante la apertura el velo general se levanta casi del todo: cada rótulo
   ya lleva el suyo. */
.hero__scrim{ transition:opacity 1.4s var(--ease-out); }
body.is-opening .hero__scrim{ opacity:.26; }

.hero__video{ transition:transform 1.8s var(--ease-out); }
body.is-opening .hero__video{ transform:scale(1.07); }

/* Rótulos por etapa */
.opening__cues{
  position:relative;
  display:grid; place-items:center;
  padding:2rem var(--gut);
  text-align:center;
}
.opening__cue{
  grid-area:1/1; position:relative; z-index:1;
  max-width:min(92vw,52rem);
  opacity:0; transform:translateY(16px);
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.opening__cue.is-on{ opacity:1; transform:none; }

/* Velo suave DETRÁS DEL TEXTO, no sobre todo el plano: el vídeo pasa por
   zonas muy claras y el subtítulo en color se perdía. Al ir dentro del
   rótulo, entra y sale con él. */
.opening__cue::before{
  content:"";
  position:absolute; left:50%; top:50%; z-index:-1;
  width:150vw; height:66vh;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse 36% 44% at 50% 50%,
    rgb(var(--ink-rgb) / .6) 0%, rgb(var(--ink-rgb) / .3) 45%, transparent 72%);
  pointer-events:none;
}

/* El titular sí se estrecha; el subtítulo, con .34em de tracking, necesita
   todo el ancho para no partirse en dos líneas. */
.opening__cue b{
  display:block;
  max-width:20ch; margin-inline:auto;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2rem,6vw,4.5rem); line-height:1.05; letter-spacing:-.02em;
  color:var(--paper);
  text-shadow:0 2px 30px rgb(var(--ink-rgb) / .55);
}
.opening__cue i{
  display:block; margin-top:1.1rem;
  font-style:normal; font-size:12px; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--accent-hi);
  text-shadow:0 1px 3px rgb(var(--ink-rgb) / .9), 0 2px 22px rgb(var(--ink-rgb) / .8);
}
@media (max-width:640px){
  .opening__cue i{ font-size:10px; letter-spacing:.22em; }
}

/* Barra de progreso de la apertura */
.opening__bar{
  height:2px; margin:0 var(--gut) 2.2rem;
  background:rgb(var(--paper-rgb) / .16); border-radius:2px; overflow:hidden;
}
.opening__bar span{
  display:block; height:100%; width:0;
  background:var(--accent);
  transition:width .15s linear;
}

.opening__skip{
  position:absolute; right:var(--gut); top:2rem;
  pointer-events:auto;
  padding:.6rem 1.1rem;
  border:1px solid rgb(var(--paper-rgb) / .3); border-radius:2px;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:rgb(var(--paper-rgb) / .8);
  background:rgb(var(--ink-rgb) / .25); backdrop-filter:blur(6px);
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.opening__skip:hover{ color:var(--paper); border-color:var(--paper); background:rgb(var(--ink-rgb) / .5); }

@media (max-width:640px){
  .opening__skip{ top:1.2rem; }
  .opening__bar{ margin-bottom:1.6rem; }
}

/* En pantallas estrechas el texto ocupa todo el ancho: el degradado lateral
   ya no basta y el contraste tiene que venir de abajo. */
@media (max-width:860px){
  .hero__scrim{
    background:linear-gradient(to top,
      rgb(var(--ink-rgb) / .95) 0%, rgb(var(--ink-rgb) / .75) 42%,
      rgb(var(--ink-rgb) / .38) 74%, rgb(var(--ink-rgb) / .6) 100%);
  }
}
@media (max-width:640px){
  .eyebrow{ --track:.24em; }
  .hero__actions{ width:100%; }
  .hero__actions .btn{ width:100%; }
}


/* ═══════════════ GARABATOS (scribble) ═══════════════ */

.scribble{
  fill:none;
  stroke:var(--accent);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
/* Solo escondemos el trazo si hay JS para dibujarlo.
   --len lo calcula main.js midiendo la longitud real en pantalla. */
.js-ready .scribble{
  stroke-dasharray:var(--len,1200);
  stroke-dashoffset:var(--len,1200);
}
.scribble--thin{ stroke-width:1.6; }

/* al activarse, el trazo se "dibuja" */
.is-drawn .scribble{
  animation:draw .95s var(--ease-out) forwards;
  animation-delay:var(--d,0s);
}
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* capa decorativa suelta del hero */
.doodles{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%;
  pointer-events:none;
  opacity:.75;
}
.doodles .scribble{ stroke:var(--accent-hi); }

/* Subrayado bajo una palabra.
   Los titulares usan line-height < 1, así que la caja del <span> acaba por
   encima de la base visual de las letras: hay que bajar el trazo bastante
   más de lo que parece para que no las atraviese. */
.scribble-line{
  position:absolute; left:-1%; bottom:-.2em;
  width:102%; height:.28em;
  overflow:visible; pointer-events:none;
}
.scribble-line--wide{ bottom:-.3em; }

/* círculo alrededor de una palabra */
.circled{ position:relative; display:inline-block; white-space:nowrap; margin-inline:.2em; }
.scribble-ring{
  position:absolute; left:-8%; top:-30%;
  width:116%; height:160%;
  overflow:visible; pointer-events:none;
}

/* flecha hacia el CTA */
.scribble-arrow{
  position:absolute; right:-6.5rem; top:-3.5rem;
  width:118px; height:76px;
  overflow:visible; pointer-events:none;
  transform:scaleX(-1);
}
@media (max-width:1100px){ .scribble-arrow{ display:none; } }
@media (max-width:860px){ .doodles{ display:none; } }


/* ═══════════════ CIFRAS ═══════════════ */

.figures{
  background:var(--deep);
  color:var(--paper);
  padding:clamp(2.5rem,5vw,3.6rem) 0;
  border-bottom:1px solid rgb(var(--accent-rgb) / .22);
}
.figures__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:2rem;
}
.figure{ display:grid; gap:.4rem; text-align:center; }
.figure__n{
  font-family:var(--serif); font-size:clamp(1.9rem,4vw,3.1rem); line-height:1;
  color:var(--accent); font-variant-numeric:lining-nums tabular-nums;
}
.figure__n em{ font-family:var(--sans); font-style:normal; font-size:.3em; letter-spacing:.1em; margin-left:.25em; }
.figure__l{ font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:rgb(var(--paper-rgb) / .65); }
@media (max-width:700px){ .figures__grid{ grid-template-columns:repeat(2,1fr); gap:2.2rem 1rem; } }


/* ═══════════════ MANIFIESTO ═══════════════ */

.manifesto{ padding:var(--sect) 0 0; background:var(--paper); }
.manifesto__cols{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem);
  margin-top:1rem;
}
@media (max-width:820px){ .manifesto__cols{ grid-template-columns:1fr; } }

.bleed{
  margin:clamp(3.5rem,7vw,6rem) 0 0;
  position:relative;
}
.bleed img{ width:100%; }
.bleed figcaption{
  max-width:var(--wrap); margin-inline:auto; padding:.9rem var(--gut) 0;
  font-size:.75rem; font-style:italic; color:var(--grey-2);
}
/* Variante para cerrar una sección oscura a sangre */
.bleed--edge{ margin-top:clamp(3.5rem,7vw,6rem); }
.bleed--edge figcaption{ color:rgb(var(--paper-rgb) / .45); }

.split{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
  margin-top:clamp(3.5rem,7vw,6rem);
}
@media (max-width:880px){ .split{ grid-template-columns:1fr; } }
.split--flip{ grid-template-columns:1.15fr .85fr; }
.split__fig{ margin:0; }
.split__fig img{ width:100%; border-radius:2px; }
.split__fig figcaption{ padding-top:.9rem; font-size:.75rem; font-style:italic; color:var(--grey-2); }
.split__body .eyebrow{ margin-bottom:.5rem; }

.specs{
  list-style:none; margin:clamp(3rem,6vw,5rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:0;
  border-top:1px solid rgb(var(--deep-rgb) / .13);
}
.specs--stack{ grid-template-columns:1fr; margin-top:1rem; }
.specs li{
  display:grid; gap:.5rem;
  padding:2rem 2.4rem 2rem 0;
  border-bottom:1px solid rgb(var(--deep-rgb) / .13);
}
.specs li:nth-child(odd){ border-right:1px solid rgb(var(--deep-rgb) / .13); padding-right:2.4rem; }
.specs li:nth-child(even){ padding-left:2.4rem; }

/* Variante en una columna (junto al render): sin sangría alterna ni filete
   central. Debe ir después de las reglas :nth-child para ganar la cascada. */
.specs--stack li,
.specs--stack li:nth-child(odd),
.specs--stack li:nth-child(even){ padding:1.35rem 0; border-right:0; }
.specs__k{ font-family:var(--serif); font-size:1.3rem; color:var(--deep); }
.specs__v{ font-size:.95rem; color:var(--grey-2); }
@media (max-width:760px){
  .specs{ grid-template-columns:1fr; }
  .specs li,.specs li:nth-child(odd),.specs li:nth-child(even){ padding:1.5rem 0; border-right:0; }
}


/* ═══════════════ SHOWROOM (vídeos de interiores) ═══════════════

   Cada pieza es un hueco de vídeo ya cableado: el <video> apunta a un
   archivo de assets/video/ y, mientras ese archivo no exista, main.js marca
   la pieza como `is-pending` y deja a la vista el render con su distintivo.
   En cuanto se suba el mp4, el vídeo se reproduce solo al entrar en pantalla.
   No hay que tocar el HTML. */

.showroom{ padding:var(--sect) 0; background:var(--deep-2); color:rgb(var(--paper-rgb) / .78); }
.showroom__head{ margin-bottom:clamp(2.5rem,5vw,4rem); }
.showroom__head .lede{ color:rgb(var(--paper-rgb) / .8); max-width:52ch; }

.showroom__grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(1rem,2vw,1.6rem);
}
.showroom__grid > .tour--wide{ grid-column:1/-1; }
@media (max-width:820px){ .showroom__grid{ grid-template-columns:1fr; } }

/* position:relative es imprescindible: el <figcaption> se coloca en absoluto
   sobre la imagen, y sin esto se iría al bloque contenedor inicial (acabaría
   flotando sobre la cabecera). */
.tour{ margin:0; position:relative; }
.tour__media{
  position:relative; overflow:hidden; border-radius:2px;
  aspect-ratio:16/10; background:var(--ink);
}
.tour--wide .tour__media{ aspect-ratio:21/9; }
@media (max-width:560px){
  .tour__media,.tour--wide .tour__media{ aspect-ratio:4/3; }
}
.tour__still,.tour__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.tour__video{ opacity:0; transition:opacity .7s var(--ease); z-index:1; }
.tour.is-playing .tour__video{ opacity:1; }
.tour__still{ transition:transform 1.2s var(--ease-out), filter .6s var(--ease); }
.tour:hover .tour__still{ transform:scale(1.04); }

.tour__media::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to top, rgb(var(--ink-rgb) / .78) 0%, rgb(var(--ink-rgb) / .1) 45%, transparent 70%);
}

.tour__play{
  position:absolute; inset:0; z-index:3;
  display:grid; place-items:center;
  color:var(--paper);
}
.tour__play span{
  width:66px; height:66px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgb(var(--paper-rgb) / .55);
  background:rgb(var(--ink-rgb) / .3);
  backdrop-filter:blur(6px);
  transition:background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.tour__play:hover span{ background:var(--accent); border-color:var(--accent); color:var(--deep); transform:scale(1.06); }
.tour__play svg{ width:17px; height:19px; margin-left:3px; fill:currentColor; }
.tour.is-playing .tour__play span{ opacity:0; }
.tour.is-playing:hover .tour__play span{ opacity:1; }
.tour.is-pending .tour__play{ display:none; }

/* Estado "el vídeo aún no está subido" */
.tour__badge{
  position:absolute; left:1rem; top:1rem; z-index:4;
  display:none; align-items:center; gap:.5rem;
  padding:.45rem .8rem; border-radius:2px;
  background:rgb(var(--ink-rgb) / .62); backdrop-filter:blur(6px);
  border:1px solid rgb(var(--accent-rgb) / .45);
  font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent-hi);
}
.tour.is-pending .tour__badge{ display:inline-flex; }
.tour__badge::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--accent); flex:none;
  animation:ping 2.4s var(--ease) infinite;
}

.tour figcaption{
  position:absolute; left:1.2rem; right:1.2rem; bottom:1rem; z-index:4;
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  pointer-events:none;
}
.tour__label{
  font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--paper);
}
.tour__note{ font-size:.78rem; font-style:italic; color:rgb(var(--paper-rgb) / .6); }
@media (max-width:560px){ .tour__note{ display:none; } }


/* ═══════════════ ENTORNO ═══════════════ */

.entorno{
  background:var(--deep);
  color:rgb(var(--paper-rgb) / .78);
  padding:var(--sect) 0;
}
.entorno__head{
  display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:end;
  margin-bottom:clamp(3rem,6vw,5rem);
}
@media (max-width:880px){ .entorno__head{ grid-template-columns:1fr; } }

.entorno__grid{
  display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(1.5rem,3vw,2.5rem);
  align-items:start;
}
@media (max-width:980px){ .entorno__grid{ grid-template-columns:1fr; } }

.entorno__map{ margin:0; position:relative; overflow:hidden; border-radius:2px; background:var(--paper); }
.entorno__map img{ width:100%; }
.entorno__map figcaption{
  position:absolute; left:1.2rem; bottom:1.2rem;
  display:flex; align-items:center; gap:.65rem;
  background:rgb(var(--ink-rgb) / .8); backdrop-filter:blur(6px);
  padding:.6rem 1rem; border-radius:2px;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--paper);
}
.pin{
  width:9px; height:9px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 rgb(var(--accent-rgb) / .65);
  animation:ping 2.4s var(--ease) infinite;
}
@keyframes ping{ 70%,100%{ box-shadow:0 0 0 12px rgb(var(--accent-rgb) / 0); } }

.entorno__cards{ display:grid; gap:clamp(1rem,2vw,1.4rem); }
.card-min{
  border:1px solid rgb(var(--accent-rgb) / .28);
  border-radius:2px;
  padding:clamp(1.5rem,3vw,2.1rem);
  transition:border-color .45s var(--ease), background .45s var(--ease), transform .45s var(--ease);
}
.card-min:hover{ border-color:rgb(var(--accent-rgb) / .6); background:rgb(var(--accent-rgb) / .05); transform:translateY(-3px); }
.card-min__n{
  display:block; font-family:var(--serif); font-size:clamp(2.2rem,4.5vw,3.1rem); line-height:1;
  color:var(--accent); margin-bottom:.7rem;
}
.card-min__n em{ font-family:var(--sans); font-style:normal; font-size:.28em; letter-spacing:.1em; margin-left:.3em; }
.card-min h3{
  font-family:var(--serif); font-weight:400; font-size:1.25rem; line-height:1.3;
  color:var(--paper); margin:0 0 .6rem;
}
.card-min p{ margin:0; font-size:.95rem; }

.tags{
  list-style:none; display:flex; flex-wrap:wrap; gap:.45rem;
  margin:1.2rem 0 0; padding:0;
}
.tags li{
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  padding:.4rem .7rem; border:1px solid rgb(var(--paper-rgb) / .18); border-radius:2px;
  color:rgb(var(--paper-rgb) / .6);
}

.entorno__plot{
  margin:clamp(2rem,4vw,3rem) 0 0;
  position:relative; overflow:hidden; border-radius:2px;
}
.entorno__plot img{ width:100%; }
.entorno__plot figcaption{
  padding-top:.9rem;
  font-size:.8rem; font-style:italic; color:rgb(var(--paper-rgb) / .55);
}

.pull{
  margin:clamp(3.5rem,7vw,6rem) 0 0; padding:0;
  max-width:34ch;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.4rem,3vw,2.1rem); line-height:1.4;
  color:var(--paper);
  border-left:1px solid var(--accent); padding-left:clamp(1.2rem,3vw,2.2rem);
}

/* Rejilla de servicios / hitos del entorno con foto */
.spots{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2vw,1.5rem);
  margin-top:clamp(2.5rem,5vw,4rem);
}
@media (max-width:900px){ .spots{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .spots{ grid-template-columns:1fr; } }
.spot{ margin:0; }
.spot__img{ position:relative; overflow:hidden; border-radius:2px; aspect-ratio:16/10; background:var(--ink); }
.spot__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out); }
.spot:hover .spot__img img{ transform:scale(1.05); }
.spot h3{
  font-family:var(--serif); font-weight:400; font-size:1.15rem;
  color:var(--paper); margin:1rem 0 .4rem;
}
.spot p{ margin:0; font-size:.9rem; line-height:1.6; }


/* ═══════════════ GALERÍA ═══════════════ */

.galeria{ padding:var(--sect) 0; background:var(--paper); }
.galeria__head{ margin-bottom:clamp(2.5rem,5vw,4rem); }

/* Retícula de 6 columnas con altura de fila fija: cada pieza declara cuántas
   columnas y filas ocupa, de modo que las imágenes teselan sin huecos.
   (Con aspect-ratio por pieza el navegador deja agujeros al no poder encajar
   la siguiente en el hueco restante.) */
.bento{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:clamp(6rem,8.5vw,10.5rem);
  gap:clamp(.5rem,1.1vw,.9rem);
}
.shot{
  position:relative; overflow:hidden; border-radius:2px;
  padding:0; background:var(--sand);
  grid-column:span 2; grid-row:span 2;
}
.shot--c3{ grid-column:span 3; }
.shot--c4{ grid-column:span 4; }
.shot--c6{ grid-column:1/-1; }
.shot--r3{ grid-row:span 3; }
.shot img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease-out), filter .6s var(--ease);
}
.shot::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgb(var(--ink-rgb) / .72), transparent 55%);
  opacity:0; transition:opacity .5s var(--ease);
}
.shot__cap{
  position:absolute; left:1.1rem; bottom:1rem; z-index:2;
  font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--paper);
  opacity:0; transform:translateY(8px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.shot:hover img{ transform:scale(1.06); }
.shot:hover::after{ opacity:1; }
.shot:hover .shot__cap{ opacity:1; transform:none; }

@media (max-width:900px){
  .bento{ grid-template-columns:repeat(2,1fr); }
  .shot,.shot--c3{ grid-column:span 1; grid-row:span 2; }
  .shot--c4,.shot--c6{ grid-column:1/-1; grid-row:span 3; }
  .shot:last-child{ grid-column:1/-1; }
}
/* En móvil, dos columnas: a una sola la galería se vuelve interminable. */
@media (max-width:560px){
  .bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:auto; }
  .shot,.shot--c3{ grid-column:span 1; grid-row:auto; aspect-ratio:1/1; }
  .shot--c4,.shot--c6,.shot:last-child{ grid-column:1/-1; grid-row:auto; aspect-ratio:4/3; }
}


/* ═══════════════ TIPOLOGÍAS ═══════════════ */

.tipos{ padding:var(--sect) 0; background:var(--sand); }
.tipos__head{ margin-bottom:clamp(2.5rem,5vw,4rem); }

.filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2rem; }
.chip{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.7rem 1.25rem;
  border:1px solid rgb(var(--deep-rgb) / .2); border-radius:2px;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--deep);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.chip em{ font-style:normal; font-size:9px; opacity:.55; }
.chip:hover{ border-color:var(--deep); }
.chip.is-on{ background:var(--deep); border-color:var(--deep); color:var(--paper); }
.chip.is-on em{ color:var(--accent); opacity:1; }

.tipos__grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:clamp(1rem,2vw,1.6rem);
}
.tipo{
  background:var(--paper);
  border-radius:2px;
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.tipo:hover{ transform:translateY(-4px); box-shadow:0 22px 48px -24px rgb(var(--deep-rgb) / .35); }
.tipo[hidden]{ display:none; }

.tipo__plan{ aspect-ratio:4/3; overflow:hidden; background:#fff; border-bottom:1px solid rgb(var(--deep-rgb) / .08); }
.tipo__plan img{
  width:100%; height:100%; object-fit:contain; padding:.7rem;
  transition:transform .8s var(--ease-out);
}
.tipo:hover .tipo__plan img{ transform:scale(1.05); }

.tipo__info{ padding:1.6rem 1.6rem 1.8rem; display:flex; flex-direction:column; flex:1; }
.tipo__info header{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; }
.tipo__info h3{ font-family:var(--serif); font-weight:400; font-size:1.85rem; line-height:1; color:var(--deep); margin:0; }
.tipo__floor{ font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-dk); text-align:right; }

/* Una sola columna: a dos columnas los valores tipo "80,78 m²" se partían
   en dos líneas dentro de la tarjeta. */
.tipo__data{ margin:0 0 1.1rem; display:grid; }
.tipo__data > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.55rem 0; border-bottom:1px solid rgb(var(--deep-rgb) / .09);
}
.tipo__data dt{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey-2);
  white-space:nowrap;
}
.tipo__data dd{
  margin:0; font-size:.95rem; font-weight:500; color:var(--deep);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

.tipo__note{ margin:0 0 1.4rem; font-size:.88rem; color:var(--grey-2); flex:1; }

.tipo__btn{
  align-self:flex-start;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--deep);
  padding-bottom:.35rem; border-bottom:1px solid var(--accent);
  transition:color .35s var(--ease);
}
.tipo__btn:hover{ color:var(--accent-dk); }


/* ═══════════════ PLANOS GENERALES / LÁMINAS ═══════════════ */

.sheets{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:clamp(1rem,2vw,1.6rem);
}
.sheet{
  margin:0; padding:0; background:#fff; border-radius:2px; overflow:hidden;
  border:1px solid rgb(var(--deep-rgb) / .1);
  display:flex; flex-direction:column; width:100%;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.sheet:hover{ transform:translateY(-4px); box-shadow:0 22px 48px -24px rgb(var(--deep-rgb) / .3); }
.sheet__img{ aspect-ratio:4/3; overflow:hidden; }
.sheet__img img{ width:100%; height:100%; object-fit:contain; padding:.6rem; }
.sheet figcaption{
  padding:1rem 1.2rem 1.2rem;
  border-top:1px solid rgb(var(--deep-rgb) / .08);
  display:grid; gap:.3rem; text-align:left;
}
.sheet__t{ font-family:var(--serif); font-size:1.1rem; color:var(--deep); }
.sheet__s{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--grey-2); }


/* ═══════════════ TABLA DE VIVIENDAS ═══════════════ */

.table-wrap{ overflow-x:auto; margin-top:clamp(2rem,4vw,3rem); }
.table{
  width:100%; border-collapse:collapse;
  font-size:.92rem; font-variant-numeric:tabular-nums;
  min-width:560px;
}
.table caption{
  text-align:left; padding-bottom:1rem;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--grey-2);
}
.table th,.table td{
  padding:.85rem 1rem; text-align:right;
  border-bottom:1px solid rgb(var(--deep-rgb) / .1);
}
.table th:first-child,.table td:first-child{ text-align:left; padding-left:0; }
.table td:last-child,.table th:last-child{ padding-right:0; }
.table thead th{
  font-size:9.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--grey-2);
  border-bottom-color:rgb(var(--deep-rgb) / .3);
}
.table tbody th{ font-weight:500; color:var(--deep); font-family:var(--serif); font-size:1.05rem; }
.table tbody tr:hover{ background:rgb(var(--accent-rgb) / .07); }
.table tfoot td,.table tfoot th{
  font-weight:500; color:var(--deep);
  border-top:1px solid rgb(var(--deep-rgb) / .3); border-bottom:0;
}

/* Sobre fondo oscuro */
.table--light th,.table--light td{ border-bottom-color:rgb(var(--paper-rgb) / .14); }
.table--light thead th{ color:rgb(var(--paper-rgb) / .55); border-bottom-color:rgb(var(--paper-rgb) / .3); }
.table--light tbody th{ color:var(--paper); }
.table--light tbody tr:hover{ background:rgb(var(--paper-rgb) / .05); }
.table--light caption{ color:rgb(var(--paper-rgb) / .5); }
.table--light tfoot td,.table--light tfoot th{ color:var(--paper); border-top-color:rgb(var(--paper-rgb) / .3); }


/* ═══════════════ BARRAS DE DATOS ═══════════════

   Gráfico de barras de una sola serie: la magnitud ya es el mensaje, así que
   no hay leyenda (sobra con una serie) ni color por categoría. Barra fina,
   extremo redondeado anclado a la línea de base, valor rotulado al lado y
   eje recesivo. El texto lleva color de texto, nunca el de la barra. */

.bars{ list-style:none; margin:clamp(1.5rem,3vw,2.5rem) 0 0; padding:0; display:grid; gap:1.35rem; }
.bars li{ display:grid; gap:.5rem; }
.bars__top{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
}
.bars__k{ font-size:.92rem; line-height:1.4; color:rgb(var(--paper-rgb) / .85); }
.bars__v{
  font-size:.95rem; font-weight:500; font-variant-numeric:tabular-nums;
  color:var(--paper); white-space:nowrap;
}
.bars__track{
  height:10px; border-radius:2px;
  background:rgb(var(--paper-rgb) / .09);
  overflow:hidden;
}
.bars__fill{
  display:block; height:100%; width:0;
  border-radius:0 4px 4px 0;
  background:var(--accent);
  transition:width 1.1s var(--ease-out);
  transition-delay:var(--d,0s);
}
.is-in .bars__fill,
.bars.is-in .bars__fill{ width:var(--w,0%); }
.bars__note{ margin:1.4rem 0 0; font-size:.76rem; color:rgb(var(--paper-rgb) / .45); }

/* Dato suelto grande (no es un gráfico: es un titular numérico) */
.stat{ display:grid; gap:.5rem; }
.stat__n{
  font-family:var(--serif); font-size:clamp(2.6rem,6vw,4.2rem); line-height:1;
  color:var(--accent); font-variant-numeric:lining-nums tabular-nums;
}
.stat__l{ font-size:.95rem; line-height:1.5; color:rgb(var(--paper-rgb) / .7); max-width:26ch; }
.stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,3rem);
  margin-top:clamp(2rem,4vw,3rem);
}
@media (max-width:760px){ .stats{ grid-template-columns:1fr; gap:2rem; } }


/* ═══════════════ CALIDADES ═══════════════ */

.calidades{
  background:var(--deep-2);
  color:rgb(var(--paper-rgb) / .76);
  padding:var(--sect) 0;
  position:relative;
}
.calidades::before{
  content:""; position:absolute; inset:0;
  background:var(--texture-img) center/cover no-repeat;
  opacity:.08; mix-blend-mode:luminosity;
}
.calidades .wrap{ position:relative; z-index:1; }

.calidades__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem);
  margin-top:clamp(2rem,4vw,3rem);
}
@media (max-width:860px){ .calidades__grid{ grid-template-columns:1fr; gap:0; } }

.acc__item{ border-bottom:1px solid rgb(var(--accent-rgb) / .26); }
.acc__item summary{
  list-style:none; cursor:pointer;
  padding:1.4rem 2.5rem 1.4rem 0; position:relative;
  font-family:var(--serif); font-size:clamp(1.1rem,2vw,1.35rem); color:var(--paper);
  transition:color .35s var(--ease);
}
.acc__item summary::-webkit-details-marker{ display:none; }
.acc__item summary::after{
  content:""; position:absolute; right:.35rem; top:50%;
  width:11px; height:11px;
  border-right:1px solid var(--accent); border-bottom:1px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .4s var(--ease);
}
.acc__item[open] summary::after{ transform:translateY(-20%) rotate(-135deg); }
.acc__item summary:hover{ color:var(--accent-hi); }
.acc__item ul{
  margin:0; padding:0 1rem 1.8rem 1.1rem; list-style:none;
  display:grid; gap:.7rem;
}
.acc__item li{ position:relative; padding-left:1.1rem; font-size:.94rem; line-height:1.65; }
.acc__item li::before{
  content:""; position:absolute; left:0; top:.68em;
  width:5px; height:1px; background:var(--accent);
}
.acc__item[open] ul{ animation:accIn .5s var(--ease-out); }
@keyframes accIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }


/* ═══════════════ CONTACTO ═══════════════ */

.contacto{ background:var(--ink); color:rgb(var(--paper-rgb) / .75); padding:var(--sect) 0; }
.contacto__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5.5rem);
  align-items:start;
}
@media (max-width:900px){ .contacto__grid{ grid-template-columns:1fr; } }

.contacto__copy .display{ display:inline-block; position:relative; }
.contacto__meta{
  list-style:none; margin:clamp(2.5rem,5vw,4rem) 0 0; padding:0;
  display:grid; gap:1.4rem;
}
.contacto__meta li{ display:grid; gap:.25rem; }
.contacto__meta .eyebrow{ margin:0; font-size:9.5px; }
.contacto__meta strong{ font-weight:400; font-size:1.05rem; color:var(--paper); }
.contacto__meta a:hover{ color:var(--accent); }

.form{ display:grid; gap:1.1rem; }
.form__row{ display:grid; gap:1.1rem; }
.form__row--2{ grid-template-columns:1fr 1fr; }
@media (max-width:520px){ .form__row--2{ grid-template-columns:1fr; } }

.field{ display:grid; gap:.55rem; }
.field > span{
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:rgb(var(--paper-rgb) / .55);
}
.field > span em{ font-style:normal; text-transform:none; letter-spacing:.05em; opacity:.6; }
.field input,.field select,.field textarea{
  width:100%;
  font:inherit; font-size:.98rem; font-weight:300;
  color:var(--paper);
  background:rgb(var(--paper-rgb) / .045);
  border:1px solid rgb(var(--paper-rgb) / .16);
  border-radius:2px;
  padding:.95rem 1.1rem;
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.field textarea{ resize:vertical; min-height:96px; }
.field select{ appearance:none; cursor:pointer;
  background-image:var(--select-arrow);
  background-repeat:no-repeat; background-position:right 1.1rem center;
  padding-right:2.6rem;
}
.field select option{ color:#111; }
.field input::placeholder,.field textarea::placeholder{ color:rgb(var(--paper-rgb) / .3); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--accent); background:rgb(var(--paper-rgb) / .07);
}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{ border-color:#b4664f; }

.check{ display:flex; gap:.85rem; align-items:flex-start; margin-top:.4rem; cursor:pointer; }
.check input{ margin-top:.32rem; accent-color:var(--accent); width:16px; height:16px; flex:none; }
.check span{ font-size:.82rem; line-height:1.6; color:rgb(var(--paper-rgb) / .6); }
.check.is-bad span{ color:#d08d78; }

.form .btn{ margin-top:.6rem; }
.form__status{ margin:0; font-size:.88rem; min-height:1.4em; }
.form__status.is-ok{ color:var(--accent-hi); }
.form__status.is-bad{ color:#d08d78; }


/* ═══════════════ FOOTER ═══════════════ */

.foot{ background:var(--deep); color:rgb(var(--paper-rgb) / .55); padding:clamp(3.5rem,7vw,5.5rem) 0 2.5rem; }
.foot__grid{
  display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:clamp(2rem,5vw,3.5rem);
  padding-bottom:clamp(2.5rem,5vw,4rem);
  border-bottom:1px solid rgb(var(--accent-rgb) / .2);
}
@media (max-width:760px){ .foot__grid{ grid-template-columns:1fr; } }

.foot__brand .brand__name{ font-size:1.5rem; }
.foot__brand p{ margin:1.1rem 0 0; font-size:10px; letter-spacing:.26em; text-transform:uppercase; }

.foot__nav{ display:grid; gap:.7rem; align-content:start; }
.foot__nav a{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; transition:color .3s var(--ease); }
.foot__nav a:hover{ color:var(--accent); }

.foot__legal{ display:grid; gap:1.2rem; align-content:start; }
.foot__legal p{ margin:0; color:var(--paper); font-size:1rem; font-weight:300; }
.foot__legal .eyebrow{ margin:0 0 .2rem; font-size:9.5px; }

.foot__base{ padding-top:2rem; display:grid; gap:1rem; }
.foot__base p{ margin:0; font-size:.76rem; line-height:1.7; max-width:70ch; }
.foot__copy{ opacity:.7; }
.foot__copy a{ border-bottom:1px solid rgb(var(--accent-rgb) / .4); }
.foot__copy a:hover{ color:var(--accent); }


/* ═══════════════ WHATSAPP ═══════════════ */

.wa{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:90;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:#25d366; color:#fff;
  box-shadow:0 10px 28px -8px rgba(0,0,0,.45);
  transition:transform .3s var(--ease);
}
.wa:hover{ transform:scale(1.07); }
.wa:active{ transform:scale(.95); }


/* ═══════════════ LIGHTBOX ═══════════════ */

.lb{
  position:fixed; inset:0; z-index:150;
  display:grid; place-items:center;
  padding:clamp(1rem,5vw,4rem);
  background:rgb(var(--ink-rgb) / .96);
  opacity:0; transition:opacity .35s var(--ease);
}
.lb.is-on{ opacity:1; }
.lb__fig{ margin:0; display:grid; gap:1rem; justify-items:center; max-height:100%; }
.lb__fig img{
  max-width:100%; max-height:82vh; object-fit:contain;
  background:#fff; border-radius:2px;
  transform:scale(.97); transition:transform .4s var(--ease-out);
}
.lb.is-on .lb__fig img{ transform:none; }
.lb__fig figcaption{
  font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--accent-hi); text-align:center;
}
.lb__close{
  position:absolute; top:1.2rem; right:1.6rem;
  width:44px; height:44px; font-size:2rem; line-height:1;
  color:var(--paper); opacity:.7; transition:opacity .3s var(--ease);
}
.lb__close:hover{ opacity:1; }


/* ═══════════════ REVELADO AL SCROLL ═══════════════ */

/* Sin JS, todo visible desde el primer momento. */
.js-ready .reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay:var(--d,0s);
}
.js-ready .reveal.is-in{ opacity:1; transform:none; }


/* ═══════════════ ANIMACIÓN DE TEXTO ═══════════════ */

/* Antetítulos: el tracking se abre y se cierra al aparecer. */
.js-ready .eyebrow.reveal{
  letter-spacing:calc(var(--track) + .16em);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out),
             letter-spacing 1.2s var(--ease-out);
  transition-delay:var(--d,0s);
}
.js-ready .eyebrow.reveal.is-in{ letter-spacing:var(--track); }

/* Titulares: main.js envuelve cada palabra en .wrd y le asigna --ln, el
   número de línea real tras el reflujo. Así cada línea entra por separado
   y el efecto se mantiene aunque el texto se reparta distinto en móvil. */
.wrd{ display:inline-block; }

.js-ready .is-split{ opacity:1 !important; transform:none !important; transition:none; }
.js-ready .is-split .wrd{
  opacity:0;
  transform:translateY(.42em);
  will-change:opacity, transform;
}
.js-ready .is-split.is-in .wrd{
  animation:wordIn .85s var(--ease-out) forwards;
  animation-delay:calc(var(--ln,0) * 95ms + var(--d,0s));
}
@keyframes wordIn{ to{ opacity:1; transform:none; } }

/* Parallax suave en las imágenes grandes (lo mueve main.js).
   El recorte va en .frame, no en el <figure>, para no tapar el pie de foto. */
.frame{ overflow:hidden; border-radius:2px; line-height:0; }
.frame img{ width:100%; will-change:transform; }


/* ═══════════════ ECOSISTEMA NODUS ═══════════════

   Cada landing es una página de NODUS: en la cabecera lleva la vuelta a
   la marca madre y en el pie, el crédito y el acceso al porfolio. */

.nav__back{
  display:inline-flex; align-items:center; gap:.55rem; flex:none;
  padding-right:1.4rem; margin-right:-.6rem;
  border-right:1px solid rgb(var(--paper-rgb) / .25);
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:rgb(var(--paper-rgb) / .7);
  transition:color .3s var(--ease), border-color .4s var(--ease);
}
.nav__back b{
  font-family:var(--serif); font-size:16px; font-weight:600;
  letter-spacing:.02em; text-transform:none; color:var(--paper);
  transition:color .4s var(--ease);
}
.nav__back b i{ font-style:normal; color:var(--accent); }
.nav__back:hover{ color:var(--paper); }
.nav.is-stuck .nav__back{ color:var(--grey-2); border-right-color:rgb(var(--deep-rgb) / .15); }
.nav.is-stuck .nav__back b{ color:var(--deep); }
.nav.is-stuck .nav__back:hover{ color:var(--deep); }
.nav.is-open .nav__back,.nav.is-open .nav__back b{ color:var(--paper); }
/* El rótulo «Proyectos» solo cuando sobra sitio de verdad */
@media (max-width:1439px){ .nav__back span{ display:none; } }
@media (max-width:640px){
  .nav__back span{ display:none; }
  .nav__back{ padding-right:.9rem; }
}

.foot__nodus{
  display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; align-items:baseline;
  padding-bottom:1rem; margin-bottom:.4rem;
  border-bottom:1px solid rgb(var(--accent-rgb) / .2);
  font-size:.9rem !important; color:rgb(var(--paper-rgb) / .7);
}
.foot__nodus b{ font-family:var(--serif); font-weight:600; color:var(--paper); }
.foot__nodus b i{ font-style:normal; color:var(--accent); }
.foot__nodus a{ color:var(--accent-hi); border-bottom:1px solid rgb(var(--accent-rgb) / .4); }
.foot__nodus a:hover{ color:var(--paper); }

/* ── Jerarquía de marca ──
   NODUS es la marca madre: su logotipo manda en la cabecera y en el pie.
   El nombre de la promoción baja a segundo nivel, como dato del proyecto. */
.nav__back b{ font-size:21px; }
.nav__brand .brand__name{ font-size:clamp(.88rem,1.1vw,1rem); letter-spacing:.03em; }
.nav__brand .brand__sub{ font-size:8px; }

.foot__logo{
  display:inline-block; margin-bottom:.9rem;
  font-family:var(--serif); font-size:1.9rem; font-weight:600; letter-spacing:.02em;
  color:var(--paper);
}
.foot__logo i{ font-style:normal; color:var(--accent); }
.foot__brand p{ margin:0 0 .35rem; font-size:.95rem; letter-spacing:0; text-transform:none; color:rgb(var(--paper-rgb) / .7); }
.foot__contact{ margin-top:.9rem !important; line-height:1.8; }
.foot__contact a:hover{ color:var(--accent-hi); }

/* Contacto: arriba NODUS; debajo, más discreto, de qué proyecto se trata */
.contacto__meta--proyecto{
  margin-top:1.8rem; padding-top:1.4rem; gap:.9rem;
  border-top:1px solid rgb(var(--paper-rgb) / .14);
}
.contacto__meta--proyecto strong{ font-size:.95rem; color:rgb(var(--paper-rgb) / .72); }

/* Antetítulos en secciones oscuras: con el acento oscuro no se leerían.
   Así ninguna landing depende de acordarse de poner eyebrow--light. */
.showroom .eyebrow,.entorno .eyebrow,.calidades .eyebrow,
.contacto .eyebrow,.foot .eyebrow,.menu .eyebrow{ color:var(--accent-hi); }


/* ═══════════════ ACCESIBILIDAD ═══════════════ */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js-ready .reveal{ opacity:1; transform:none; }
  .js-ready .eyebrow.reveal{ letter-spacing:var(--track); }
  .js-ready .is-split .wrd{ opacity:1; transform:none; animation:none; }
  .scribble{ stroke-dashoffset:0 !important; }
  .hero.no-video .hero__still{ animation:none; transform:scale(1.04); }
  /* Las barras necesitan su anchura final aunque no se animen. */
  .bars__fill{ width:var(--w,0%); transition:none; }
}