/* ═══════════════════════════════════════════════════════════
   Hermanos Javela — hoja de estilo principal
   Paleta tomada del logo (madera / marrón / crema) y del
   morado real con el que termina la fotografía "2".
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Oscuros: la habitación del video */
  --ink:      #0D1015;
  --ink-2:    #141920;
  --ink-3:    #1D242E;

  /* Crema y marrón del logo */
  --cream:    #F7F1E7;
  --cream-2:  #FCF8F2;
  --brown:    #33281E;

  /* Madera: color de acento */
  --wood:     #C8924F;
  --wood-lt:  #E3B172;
  --wood-dk:  #A9752F;

  /* Morado continuo con la imagen 2 */
  --purple-top:  #686296;
  --purple-bot:  #A4A2E5;
  --about-grad: linear-gradient(180deg,
      #686296 0%,  #7268A9 15%, #857DBD 30%, #8F8DCE 45%,
      #9C9ADA 58%, #A19FE4 72%, #A3A2E6 86%, #9A99E2 100%);
  /* Último color del degradado de "Nosotros": con él arranca la pared de
     "Instalaciones", para que las dos secciones sean el mismo morado.
     El JS lo reescribe con el color real muestreado de la foto. */
  --purple-seam: #9A99E2;
  /* Recorrido del paneo entre "Nosotros" e "Instalaciones". Lo comparten el
     tramo de scroll (.about__spacer--pan) y el clavado de la pared (.fac):
     cambiarlo aquí los mueve a los dos a la vez. */
  --pan-run: 90svh;

  --sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;

  --pad: clamp(20px, 5vw, 88px);
  --nav-h: clamp(62px, 7vw, 78px);
  --r:   16px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* El radio del círculo de servicios se registra como propiedad tipada
   para poder animarlo por separado de su posición: así se expande al
   aparecer, pero sigue al cursor sin retraso. */
@property --lens{
  syntax:"<length>";
  inherits:true;
  initial-value:0px;
}

/* ─────────────── base ─────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--sans);
  font-size:clamp(15px,.55vw + 13.5px,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* 'clip' no crea contenedor de scroll; 'hidden' sí, y eso rompe
     position:sticky en Safari de iOS. El primero queda de respaldo. */
  overflow-x:hidden;
  overflow-x:clip;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ margin:0; line-height:1.08; letter-spacing:-.022em; font-weight:800; }
p{ margin:0 0 1.1em; }
::selection{ background:var(--wood); color:#14100A; }

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:200;
  background:var(--wood); color:#14100A; padding:12px 18px; border-radius:10px; font-weight:700;
}
.skip-link:focus{ top:16px; }

:where(a,button,input,[tabindex]):focus-visible{
  outline:2px solid var(--wood-lt); outline-offset:3px; border-radius:6px;
}

/* ─────────────── pantalla de carga ───────────────
   El fondo es exactamente el del video del logo (#F9EFE3), así el
   encuadre 16:9 se funde con la pantalla y sólo se ve la animación.
   En móvil el video se agranda por encima del viewport: como el logo
   va centrado, lo que se recorta son los márgenes vacíos. */
:root{ --loader-bg:#FCF2E6; }   /* el crema del propio video, ya decodificado */

.preloader{
  display:none;                       /* sin JS no se muestra nunca */
  position:fixed; inset:0; z-index:1000;
  place-items:center; overflow:hidden;
  background:var(--loader-bg);
  opacity:1; transition:opacity .4s var(--ease);
}
html.is-loading .preloader{ display:grid; }
.preloader.is-done{ opacity:0; pointer-events:none; }

.preloader__media{
  width:clamp(720px, 100vw, 1040px);
  aspect-ratio:16/9;
  background:var(--loader-bg);
  object-fit:cover;
  /* difumina el borde del encuadre: el grano del video se funde con el
     fondo y no se nota el rectángulo. La animación vive en el centro. */
  -webkit-mask-image:radial-gradient(farthest-side ellipse at center, #000 62%, transparent 100%);
          mask-image:radial-gradient(farthest-side ellipse at center, #000 62%, transparent 100%);
}
/* Si no hay animación (movimiento reducido, autoplay bloqueado) el JS
   le pone un poster con el logo ya dibujado: 5 KB que sólo se bajan
   en ese caso. */

/* mientras carga no se puede desplazar la página.
   Ojo: sólo overflow — tocar la altura de <html>/<body> aquí le
   cambiaría el recorrido al hero y arrancaría con la animación al final. */
html.is-loading{ overflow:hidden; }

.wrap{ width:min(1260px, 100% - clamp(32px,7vw,96px)); margin-inline:auto; }

/* la nav fija no debe tapar el título al saltar por anclas */
section[id]{ scroll-margin-top:clamp(62px,7vw,78px); }
#inicio{ scroll-margin-top:0; }

/* ─────────────── tipografía compartida ─────────────── */
.eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--wood-dk); margin:0 0 1.15em;
}
.eyebrow--light{ color:var(--wood-lt); text-shadow:0 2px 16px rgba(0,0,0,.65); }
.eyebrow::after{
  content:""; display:inline-block; width:clamp(28px,4vw,54px); height:1px;
  background:currentColor; opacity:.55; margin-left:.9em; vertical-align:.32em;
}

.h2{
  font-size:clamp(1.95rem, 3.4vw + .55rem, 3.5rem);
  letter-spacing:-.032em; color:var(--brown);
}
.h2--light{ color:var(--cream); }
.h2 em, .hero__title em{
  font-family:var(--serif); font-style:italic; font-weight:300;
  letter-spacing:-.01em; color:var(--wood);
}
.h2--light em{ color:var(--wood-lt); }

.lead{
  font-size:clamp(1rem,.5vw + .92rem,1.16rem);
  line-height:1.72; max-width:56ch; opacity:.82; margin-top:1.35em;
}

.section-head{ max-width:none; margin-bottom:clamp(42px,5vw,76px); }

/* ─────────────── botones ─────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-weight:700; font-size:.95rem; letter-spacing:-.005em;
  padding:.92em 1.75em; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:transform .25s var(--ease), background-color .25s, border-color .25s, box-shadow .25s, opacity .25s;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--lg{ padding:1.05em 2.1em; font-size:1rem; }
.btn--sm{ padding:.7em 1.3em; font-size:.86rem; }
.btn--block{ width:100%; }

.btn--wood{ background:var(--wood); color:#170F05; box-shadow:0 8px 26px -12px rgba(200,146,79,.85); }
.btn--wood:hover{ background:var(--wood-lt); box-shadow:0 14px 34px -12px rgba(227,177,114,.9); }

.btn--ghost{ border-color:rgba(247,241,231,.42); color:var(--cream); backdrop-filter:blur(6px); }
.btn--ghost:hover{ border-color:var(--cream); background:rgba(247,241,231,.09); }

.btn[disabled]{ opacity:.35; pointer-events:none; }

/* ═══════════════ NAV ═══════════════ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:90;
  background:rgba(247,241,231,.82);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid rgba(51,40,30,.12);
  color:var(--brown);
  transform:translateY(-102%);
  transition:transform .55s var(--ease);
}
.nav.is-visible{ transform:none; }

.nav__inner{
  width:min(1360px,100% - clamp(24px,4vw,56px)); margin-inline:auto;
  display:flex; align-items:center; gap:clamp(16px,3vw,44px);
  height:clamp(62px,7vw,78px);
}
.nav__brand{ display:flex; align-items:center; gap:11px; flex:0 0 auto; }
.nav__brand img{ width:auto; height:clamp(28px,3.4vw,36px); }
.nav__brand-text{ display:flex; flex-direction:column; line-height:1; }
.nav__brand-text b{ font-size:.86rem; font-weight:800; letter-spacing:.02em; }
.nav__brand-text i{
  font-style:normal; font-size:.6rem; letter-spacing:.36em;
  color:var(--wood-dk); margin-top:3px;
}

.nav__links{ display:flex; gap:clamp(14px,2vw,30px); margin-left:auto; }
.nav__links a{
  font-size:.88rem; font-weight:600; opacity:.76; position:relative; padding:6px 0;
  transition:opacity .22s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0;
  background:var(--wood-dk); transition:width .28s var(--ease);
}
.nav__links a:hover{ opacity:1; }
.nav__links a:hover::after,
.nav__links a.is-active::after{ width:100%; }
.nav__links a.is-active{ opacity:1; }

.nav__burger{ display:none; width:44px; height:44px; margin-left:auto; position:relative; }
.nav__burger span{
  position:absolute; left:11px; width:22px; height:1.6px; background:var(--brown);
  transition:transform .3s var(--ease), opacity .2s;
}
.nav__burger span:nth-child(1){ top:19px; }
.nav__burger span:nth-child(2){ top:25px; }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:85; background:rgba(13,16,21,.97);
  backdrop-filter:blur(18px);
  display:flex; flex-direction:column; justify-content:center; gap:10px;
  padding:0 var(--pad);
  animation:menuIn .3s var(--ease);
}
.mobile-menu[hidden]{ display:none; }
.mobile-menu nav{ display:flex; flex-direction:column; gap:4px; margin-bottom:26px; }
.mobile-menu a:not(.btn){
  font-size:clamp(1.7rem,7vw,2.4rem); font-weight:800; letter-spacing:-.03em;
  padding:8px 0; border-bottom:1px solid rgba(247,241,231,.08);
}
@keyframes menuIn{ from{ opacity:0 } to{ opacity:1 } }

/* ═══════════════ HERO ═══════════════ */
.hero{
  position:relative;
  height:420vh;                 /* recorrido del scroll que "reproduce" el video */
  background:#05070A;
}
.hero__stage{
  position:sticky; top:0;
  height:100svh; overflow:hidden;
  display:grid; place-items:center;
}
/* Visible desde el principio: el atributo poster hace de primer fotograma
   mientras el video se descarga. Antes esperaba a 'loadeddata' para
   mostrarse, y en iOS —que no descarga hasta que hay un gesto— eso dejaba
   el hero en negro durante todo su recorrido de scroll. */
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 62%;
}

/* Respaldo: si el video no llega a cargar (bajo consumo, red lenta, error),
   el hero se vuelve una imagen fija y deja de reservar scroll vacío. */
.hero.is-static{ height:100svh; }
.hero.is-static .hero__video,
.hero.is-static .hero__hint{ display:none; }
.hero.is-static .hero__stage{
  background:url("../assets/hero-final.jpg") center/cover no-repeat;
}

.hero__vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(5,7,10,.72) 0%, rgba(5,7,10,.18) 22%, transparent 42%),
    radial-gradient(120% 78% at 50% 52%, transparent 42%, rgba(5,7,10,.55) 100%);
}
.hero__scrim{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  transition:opacity .8s var(--ease);
  background:linear-gradient(to top,
      rgba(5,7,10,.95) 0%, rgba(5,7,10,.88) 22%, rgba(5,7,10,.62) 46%,
      rgba(5,7,10,.22) 68%, transparent 86%);
}
.hero.is-end .hero__scrim{ opacity:1; }

/* mini-nav: solo tres enlaces, sin fondo */
.hero__mininav{
  position:absolute; top:clamp(22px,3.4vw,38px); left:0; right:0; z-index:6;
  display:flex; justify-content:center; gap:clamp(22px,4vw,52px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.hero__mininav a{
  font-size:.78rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(247,241,231,.9); text-shadow:0 2px 20px rgba(0,0,0,.7);
  padding:6px 2px; position:relative;
}
.hero__mininav a::after{
  content:""; position:absolute; left:50%; right:50%; bottom:0; height:1px;
  background:var(--wood-lt); transition:left .3s var(--ease), right .3s var(--ease);
}
.hero__mininav a:hover::after{ left:0; right:0; }
.hero.is-end .hero__mininav{ opacity:0; transform:translateY(-14px); pointer-events:none; }

/* contenido del último frame */
.hero__content{
  position:relative; z-index:5;
  width:min(1260px, 100% - clamp(32px,7vw,96px));
  margin-top:auto; margin-bottom:clamp(64px,9vh,124px);
  align-self:end;
  opacity:0; transform:translateY(34px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  pointer-events:none;
}
.hero.is-end .hero__content{ opacity:1; transform:none; pointer-events:auto; }

.hero__title{
  font-size:clamp(2.4rem, 6.1vw, 5.6rem);
  letter-spacing:-.038em; line-height:1.02;
  max-width:17ch;
  text-shadow:0 8px 46px rgba(0,0,0,.55);
}
.hero__lead{
  margin-top:1.15em; max-width:50ch;
  font-size:clamp(1rem,.6vw + .92rem,1.2rem); line-height:1.68;
  color:rgba(247,241,231,.86);
  text-shadow:0 2px 24px rgba(0,0,0,.6);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2em; }

.hero__hint{
  position:absolute; z-index:5; bottom:clamp(24px,4vh,44px); left:50%; translate:-50% 0;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:.66rem; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(247,241,231,.78); text-shadow:0 2px 14px rgba(0,0,0,.85);
  transition:opacity .5s;
}
.hero__hint i{ width:1px; height:46px; background:linear-gradient(rgba(247,241,231,.7), transparent); position:relative; overflow:hidden; }
.hero__hint i::after{
  content:""; position:absolute; inset:0; background:var(--wood-lt);
  animation:hintRun 1.9s var(--ease) infinite;
}
@keyframes hintRun{ 0%{ transform:translateY(-100%) } 60%,100%{ transform:translateY(100%) } }
.hero.is-scrolled .hero__hint{ opacity:0; }

/* ═══════════════ SPLIT ═══════════════ */
.split{
  display:grid;
  /* la columna de la foto se lleva algo más de ancho para que quepa
     la imagen completa dentro del marco */
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  background:var(--ink);
  position:relative; z-index:2;
}
/* texto y marco bajan juntos: ninguno se queda fijo */
.split__text{
  padding:clamp(64px,7vw,112px) clamp(24px,3.4vw,58px);
  display:flex; align-items:center;
}
.split__text-inner{ max-width:600px; margin-left:auto; }
.split__text .h2{
  color:var(--cream);
  font-size:clamp(1.75rem, 2.1vw + .5rem, 2.62rem);
}
.split__text .lead{ margin-top:1.05em; }

.steps{ list-style:none; margin:clamp(26px,3vw,40px) 0 0; padding:0; display:grid; gap:2px; }
.step{
  display:flex; gap:clamp(16px,2vw,26px);
  padding:clamp(14px,1.7vw,20px) 0;
  border-top:1px solid rgba(247,241,231,.12);
}
.step:last-child{ border-bottom:1px solid rgba(247,241,231,.12); }
.step__num{
  font-family:var(--serif); font-size:1.05rem; font-weight:400; font-style:italic;
  color:var(--wood); flex:0 0 auto; padding-top:.15em; min-width:2.4ch;
}
.step h3{ font-size:1.16rem; letter-spacing:-.02em; margin-bottom:.5em; }
.step p{ margin:0; font-size:.95rem; line-height:1.65; opacity:.7; }

/* El cuadro es una ventana: la fotografía está anclada al viewport
   (background-attachment:fixed), así que al hacer scroll se mueve el
   marco y va destapando otras zonas de la misma foto quieta. */
.split__media{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(20px,2.1vw,34px); padding-left:0;
}
/* El ancho del marco y el encuadre del fondo los calcula el JS para que
   siempre se vea la fotografía completa de lado a lado. */
.split__window{
  width:100%; max-width:100%;
  height:clamp(380px, 66svh, 680px);
  border-radius:clamp(14px,1.5vw,22px);
  border:1px solid rgba(247,241,231,.22);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95),
             inset 0 0 0 1px rgba(13,16,21,.35);
  background-image:url("../assets/img/split-1.jpg");
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}


/* ═══════════════ SERVICIOS ═══════════════ */
.services{
  --svc-pad-t:clamp(78px,10vw,150px);
  --svc-pad-b:clamp(84px,11vw,160px);
  --lens:0px;                       /* radio del círculo que sigue al puntero */
  background:var(--cream); color:var(--brown);
  padding:var(--svc-pad-t) 0 var(--svc-pad-b);
  position:relative; z-index:2; overflow:hidden;
  /* sólo se anima el radio: la posición debe ser instantánea */
  transition:--lens .5s cubic-bezier(.22,.9,.3,1);
}
.services .lead{ opacity:.7; }

/* ── Círculo oscuro que sigue al puntero ──────────────────────────
   Es una copia exacta de la sección, pintada en oscuro y recortada a
   un círculo. El clon lo genera el JS, así que nunca se desincroniza. */
.services__dark{
  position:absolute; inset:0; z-index:3;
  padding:var(--svc-pad-t) 0 var(--svc-pad-b);
  background:var(--ink); color:var(--cream);
  pointer-events:none;
  clip-path:circle(var(--lens) at var(--lx,50%) var(--ly,50%));
  will-change:clip-path;
}
.services__dark .h2{ color:var(--cream); }
.services__dark .eyebrow{ color:var(--wood-lt); }
.services__dark .card{
  background:rgba(247,241,231,.06);
  border-color:rgba(247,241,231,.18);
  box-shadow:none; transform:none;
}
.services__dark .card__icon{ background:rgba(227,177,114,.18); color:var(--wood-lt); }

.cards{
  display:grid; gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(3,1fr);
}
.card{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--cream-2);
  border:1px solid rgba(51,40,30,.11);
  border-radius:var(--r);
  padding:clamp(26px,2.8vw,38px);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease),
             border-color .4s, color .45s var(--ease);
}
.card:hover{
  transform:translateY(-5px);
  border-color:rgba(200,146,79,.55);
  box-shadow:0 26px 54px -30px rgba(51,40,30,.5);
}
.card__icon{
  display:grid; place-items:center; width:50px; height:50px; border-radius:13px;
  background:rgba(200,146,79,.14); color:var(--wood-dk); margin-bottom:1.15em;
  transition:background-color .45s var(--ease), color .45s var(--ease);
}

/* ── La foto del servicio, que el círculo destapa al llenar la tarjeta ── */
.card__shot{
  position:absolute; inset:0; z-index:-1;
  clip-path:circle(0px at var(--cx,50%) var(--cy,50%));
  transition:clip-path .55s var(--ease);
}
.card__shot img{ width:100%; height:100%; object-fit:cover; }
.card__shot::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(8,10,14,.82), rgba(8,10,14,.62));
}
@media (hover:hover) and (pointer:fine){
  .card:hover .card__shot{ clip-path:circle(150% at var(--cx,50%) var(--cy,50%)); }
  .card:hover{ color:var(--cream); border-color:rgba(247,241,231,.3); }
  .card:hover .card__icon{ background:rgba(227,177,114,.2); color:var(--wood-lt); }
}
.card__icon svg{ width:25px; height:25px; }
.card h3{ font-size:1.2rem; margin-bottom:.5em; letter-spacing:-.024em; }
.card p{ margin:0; font-size:.94rem; line-height:1.68; opacity:.72; }

/* ═══════════════ NOSOTROS ═══════════════ */
.about{
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  background:var(--about-grad);
  position:relative; z-index:2;
}
/* misma mecánica que la sección "cómo trabajamos": la foto se queda
   quieta y lo que se mueve es la ventana que la deja ver */
.about__media{ position:relative; }
/* El morado va aquí, en un muro clavado del ancho de la ventana, no en el
   fondo de la sección. Pintado en el fondo habría que reanclarlo en cada
   fotograma para que pareciera quieto, y ese reanclado va un fotograma por
   detrás del scroll: el morado tiembla bajo la foto y los cuadros, que sí los
   clava el compositor. Clavado, se pinta una vez y no se vuelve a tocar.
   Se queda con la foto y se suelta con ella, porque son hermanos. */
.about__wall{
  position:sticky; top:0; height:100svh; width:100vw;
  /* Va detrás de la foto en el marcado y sube una pantalla, para no ocupar
     sitio en el flujo. Tiene que ser margen ARRIBA y no abajo: el recorrido
     de un sticky se mide sobre su caja de margen, así que un margen negativo
     abajo lo dejaría clavado una pantalla de más y no se soltaría con la
     foto — con lo que el morado dejaría de terminar en el borde de la
     sección y se rompería la costura con "Instalaciones". */
  margin-top:-100svh;
  z-index:-1; background:var(--about-grad);
}
.about__media-inner{
  position:sticky; top:0; height:100svh; overflow:hidden;
}
.about__media-inner img{
  width:100%; height:100%; object-fit:cover; object-position:right center;
  /* La foto se disuelve en sus últimos píxeles sobre el mismo degradado
     que lleva detrás, así el paso al panel no es un corte sino una fusión. */
  -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 130px), transparent 100%);
  mask-image:linear-gradient(90deg, #000 calc(100% - 130px), transparent 100%);
}
/* Coreografía: primero se ve la foto sola, luego el texto sube desde abajo,
   se bloquea centrado y al final se va hacia arriba con la sección.
   El relleno superior de 100svh es el tramo en que sólo se ve la foto. */
.about__body{
  /* Sin fondo propio: el morado lo pinta .about__wall, que está clavado
     detrás y cruza las dos columnas. Si cada columna pintara su copia, al
     irse la foto los dos degradados dejarían una línea vertical donde se
     encuentran. */
  padding:0 clamp(26px,4.2vw,74px);
  color:#fff;
  position:relative; isolation:isolate;
}
/* Tramo inicial en que sólo se ve la foto, y colchón final.
   El colchón mide exactamente una pantalla, que es el alto de la banda
   fija de la foto: así la foto se suelta en el mismo punto en que el
   texto termina de salir por arriba. */
.about__spacer{ height:100svh; }
.about__spacer--end{ height:100svh; }
/* Tercer tramo: el recorrido del paneo. Empieza justo cuando el texto
   acaba de salir por arriba — por eso el colchón de arriba mide exactamente
   una pantalla — y durante él la página no avanza: la banda de la foto
   sigue clavada y "Instalaciones" también. Lo único que se mueve es el
   desplazamiento lateral. */
.about__spacer--pan{ height:var(--pan-run); }

/* --pan lo escribe el JS en :root: 0 mientras se lee el texto, 1 con la
   foto fuera y la pared ya colocada. Sin JS o en móvil vale 0 y no pasa nada. */
.about__media-inner img{
  transform:translate3d(calc(var(--pan,0) * -104%),0,0);
  will-change:transform;
}
/* al irse la foto el velo ya no protege ningún texto: estorba */
.about__body::before{ opacity:calc(1 - var(--pan,0)); }
/* sombra que cae desde la costura: el borde izquierdo conserva
   el color exacto de la foto y el texto gana contraste */
.about__body::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg,
      rgba(26,22,54,0) 0%, rgba(26,22,54,.30) 20%, rgba(26,22,54,.44) 100%);
}
/* el texto no se ancla: sube de corrido hasta salir de pantalla */
.about__inner{ max-width:560px; position:relative; }
.about__body p{ font-size:1rem; line-height:1.72; color:rgba(255,255,255,.9); }
.about__body strong{ color:#fff; font-weight:700; }
.about__body .h2{ font-size:clamp(1.8rem,2.3vw + .5rem,2.85rem); margin-bottom:.65em; }

.quote{
  margin:1.5em 0; padding:.85em 0 .85em 1.3em;
  border-left:2px solid rgba(255,255,255,.55);
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.1rem,1.4vw,1.34rem); line-height:1.45; color:#fff;
}

.about__marks{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,34px);
  margin-top:2.1em; padding-top:1.9em;
  border-top:1px solid rgba(255,255,255,.28);
}
.about__marks div{ display:flex; flex-direction:column; }
.about__marks b{
  font-size:clamp(1.75rem,2.4vw,2.4rem); font-weight:800; letter-spacing:-.04em;
  line-height:1;
}
.about__marks span{
  font-size:.74rem; letter-spacing:.13em; text-transform:uppercase;
  opacity:.8; margin-top:8px; max-width:16ch;
}

/* ═══════════════ INSTALACIONES ═══════════════ */
/* La pared es la continuación del morado de "Nosotros": arranca en el
   color exacto con que termina esa sección (--purple-seam, muestreado de
   la foto por JS) y se oscurece hacia abajo para dar profundidad de muro. */
.fac{
  position:relative; z-index:2;
  color:#fff;

  /* La sección sube sobre los dos últimos tramos de "Nosotros" para
     compartir pantalla con ella: la última pantalla de texto y el recorrido
     del paneo. Sin ese encimado no hay forma de que la foto salga por la
     izquierda y la pared entre por la derecha en el mismo momento, porque
     cada una vive en una sección distinta. */
  --fac-lead: calc(100svh + var(--pan-run));
  margin-top: calc(-1 * var(--fac-lead));
  /* Aquí NO va overflow-x:clip aunque la pared se salga por la derecha: sobre
     un antepasado rompe el clavado de dentro. Va en .fac__pin. */
  /* deja sitio a la pared, que cuelga fuera de .fac__pin y no cuenta para el alto */
  padding-bottom:var(--fac-wall, 100svh);
  /* mientras está encimada no debe robarle el ratón a "Nosotros" */
  pointer-events:none;

  /* El morado propio sólo se pinta a partir de donde termina "Nosotros"
     (4px antes, para tapar su borde fraccionario, que el navegador funde
     con el fondo oscuro del body y deja una raya). Encima de ese punto la
     sección es transparente y lo que se ve es el morado de "Nosotros", que
     ahí sigue clavado: así nunca hay dos morados distintos en la misma
     pantalla. Se posiciona y se dimensiona la capa en vez de meter paradas
     en svh dentro del degradado, porque mezcladas con porcentajes dejan de
     ir en orden y el navegador las aplasta. */
  background:linear-gradient(180deg,
      var(--purple-seam) 0%, var(--purple-seam) 6%,
      #9793DA 34%, #8480C6 70%, #736FB2 100%)
      0 calc(var(--fac-lead) - 4px) / 100% calc(100% - var(--fac-lead) + 4px)
      no-repeat;
}
/* El recorrido del paneo: mientras dura, .fac__pin se queda clavado arriba.
   El clavado se suelta al terminarlo porque el recorrido del sticky es
   exactamente el alto de este contenedor menos el del elemento clavado (0). */
.fac__hold{ height:var(--pan-run); }
/* Se clava esto y no la pared: un elemento más alto que la ventana nunca
   llega a clavarse (el corrimiento permitido se limita a no sacar su borde
   inferior de la pantalla, y el de la pared ya está fuera — comprobado). Con
   alto 0 el problema desaparece y la pared simplemente cuelga por fuera.
   Tiene que ser sticky y no un translateY movido por JS: el JS va un
   fotograma por detrás del scroll y la pared tiembla contra la banda de la
   foto, que sí la mueve el compositor. */
.fac__pin{
  position:sticky; top:0; height:0;
  /* Recorta la pared aparcada 102vw a la derecha para que no ensanche el
     documento. Va AQUÍ y no en .fac: sobre un antepasado, el navegador toma
     la caja recortada como referencia del sticky y el clavado deja de
     funcionar (comprobado). Sobre el propio elemento clavado no le afecta, y
     con overflow-y en visible la pared sigue colgando entera hacia abajo. */
  overflow-x:clip;
}
.fac__inner{
  position:relative; z-index:1;
  pointer-events:auto;
  /* Cabe en una pantalla a propósito: en cuanto el paneo la deja colocada,
     una pantalla más de scroll y se sale de la sección. Si creciera habría
     que arrastrarse por el morado para llegar a lo siguiente. */
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(40px,5svh,68px) 0 clamp(44px,6svh,80px);
  /* entra por la derecha con el mismo avance con que la foto sale por la
     izquierda; 102vw para que a --pan:0 no asome por el borde. El valor por
     defecto es 1 (colocada) para que sin JS la pared no quede fuera. */
  transform:translate3d(calc((1 - var(--pan,1)) * 102vw),0,0);
  will-change:transform;
}
.fac__head{ max-width:52ch; margin-bottom:clamp(20px,3svh,38px); }
.fac__head .h2{ margin-bottom:.5em; }
.fac__lead{ font-size:1.02rem; line-height:1.7; color:rgba(255,255,255,.88); margin:0; }

/* Cuatro columnas que arrancan en diagonal descendente: así los marcos no
   forman una retícula sino un montaje de pared. Las proporciones de cada
   columna (r34+r11, r43+r34, r11+r43, r43+r11) están escogidas para que las
   cuatro terminen casi a la misma altura; si se cambia una hay que recalcular
   su desfase, o el conjunto se desploma hacia ese lado. */
.fac__wall{
  /* Los marcos se dimensionan por ALTO (--fh), no por ancho: es el alto lo
     que tiene que caber en la pantalla, y así el montaje se encoge con la
     ventana en vez de desbordar la sección. El ancho de cada uno sale solo
     de su proporción. */
  --fh:clamp(92px,19svh,190px);
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:clamp(14px,1.8vw,28px);
  /* sin tope los grupos quedarían separados por 250px de pared vacía. El
     tope crece con el número de columnas: con cuatro, 58rem las apretaba
     hasta hacerlas encogerse. */
  max-width:min(100%,74rem);
}
/* centrado, no estirado: la columna es tan ancha como su marco mayor y el
   estrecho se centra debajo. Estirándolo le crecería el paspartú por un lado. */
.fac__col{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(14px,1.8vw,28px);
}
/* Arranques en diagonal descendente, proporcionales al tamaño del marco.
   El reparto de proporciones deja la columna más alta (r34+r11) en la que no
   lleva desfase: así el conjunto es lo más bajo posible —que es lo que tiene
   que caber en la pantalla— y los tres bordes inferiores quedan casi a la
   misma altura. Reordenar las proporciones obliga a rehacer esto. */
.fac__col--b{ margin-top:calc(var(--fh) * .14); }
.fac__col--c{ margin-top:calc(var(--fh) * .28); }
/* .36 y no .42 (el siguiente paso de la diagonal): esta columna es de las
   bajas —r43+r11, 1.84 de alto— y con .42 su borde inferior se pasaba del
   de la primera, que es la que marca lo que tiene que caber en pantalla. */
.fac__col--d{ margin-top:calc(var(--fh) * .36); }
/* rezago al entrar: las columnas del fondo llegan un poco después, lo que
   da profundidad al gesto. Todas aterrizan en 0 cuando --pan llega a 1. */
.fac__col--b{ transform:translate3d(calc((1 - var(--pan,1)) * 9vw),0,0); }
.fac__col--c{ transform:translate3d(calc((1 - var(--pan,1)) * 18vw),0,0); }
.fac__col--d{ transform:translate3d(calc((1 - var(--pan,1)) * 27vw),0,0); }

/* Marco: passe-partout crema, filete oscuro alrededor del papel y una
   sombra en dos tiempos — la corta lo pega al muro, la larga lo separa. */
.fac__frame{
  margin:0; padding:clamp(9px,.95vw,16px);
  background:linear-gradient(158deg, var(--cream-2) 0%, var(--cream) 55%, #E7DECF 100%);
  border-radius:3px;
  box-shadow:
    inset 0 0 0 1px rgba(51,40,30,.22),
    0 2px 3px rgba(40,32,66,.30),
    0 22px 40px -14px rgba(40,32,66,.55);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.fac__frame img{
  display:block; height:var(--fh); width:auto; object-fit:cover;
  box-shadow:0 0 0 1px rgba(51,40,30,.30);
}
/* la proporción la lleva el marco, no la foto: cambiar de imagen no
   descuadra el montaje */
/* Cada proporción con su propio alto: si todos midieran --fh el montaje
   quedaría hecho una retícula. Los factores están escogidos para que los
   anchos salgan parecidos y los altos no, que es como cuelgan los cuadros
   de verdad. Al cambiarlos hay que rehacer los arranques de arriba. */
.fac__frame--r43 img{ aspect-ratio:4/3; height:calc(var(--fh) * .84); }
.fac__frame--r11 img{ aspect-ratio:1/1;  height:var(--fh); }
.fac__frame--r34 img{ aspect-ratio:3/4;  height:calc(var(--fh) * 1.22); }

@media (hover:hover){
  .fac__frame:hover{
    transform:translateY(-5px);
    box-shadow:
      inset 0 0 0 1px rgba(51,40,30,.22),
      0 3px 5px rgba(40,32,66,.28),
      0 34px 56px -16px rgba(40,32,66,.6);
  }
}

/* ═══════════════ CLIENTES ═══════════════ */
.clients{ background:var(--cream); padding:clamp(46px,5.5vw,74px) 0; position:relative; z-index:2; }
.clients__label{
  text-align:center; font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--brown); opacity:.5; margin-bottom:2.2em;
}
.clients__row{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(16px,2.4vw,30px);
}
.clients__row img{
  width:clamp(64px,7vw,86px); aspect-ratio:1; object-fit:cover;
  border-radius:14px; border:1px solid rgba(51,40,30,.12);
  opacity:.72; filter:saturate(.85);
  transition:opacity .35s, filter .35s, transform .35s var(--ease), box-shadow .35s;
}
.clients__row li:hover img{
  opacity:1; filter:none; transform:scale(1.12);
  box-shadow:0 16px 30px -18px rgba(51,40,30,.6);
}

/* ═══════════════ GALERÍA — carrusel con fondo ═══════════════ */
.gal{
  position:relative; overflow:hidden; z-index:2;
  height:clamp(620px, 90svh, 940px);
  background:var(--ink);
}
/* El fondo se ve a plena luz. Su geometría es idéntica a la del elemento
   que crece —mismo encuadre, sin escala ni desbordes— para que el relevo
   entre ambos al terminar el movimiento no se note. Sin fundido: el
   cambio ocurre bajo la imagen que ya está encima. */
.gal__bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0;
}
.gal__bg.is-on{ opacity:1; }
/* La miniatura que entra hace el viaje hasta el fondo con este elemento:
   va por encima del fondo en reposo y por debajo de la tira, que es lo
   que deja las demás tarjetas al frente durante todo el recorrido. */
.gal__zoom{
  position:absolute; z-index:1; overflow:hidden;
  opacity:0; pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.4), 0 18px 44px -20px rgba(0,0,0,.9);
}
.gal__zoom.is-on{ opacity:1; }
.gal__zoom img{ width:100%; height:100%; object-fit:cover; }
.gal__zoom.is-anim{
  transition:left .7s var(--ease), top .7s var(--ease),
             width .7s var(--ease), height .7s var(--ease),
             border-radius .7s var(--ease), opacity .7s var(--ease),
             box-shadow .7s var(--ease);
}

.gal__scrim{
  position:absolute; z-index:2; inset:0; pointer-events:none;
  background:linear-gradient(90deg,
      rgba(8,10,14,.88) 0%, rgba(8,10,14,.72) 18%,
      rgba(8,10,14,.34) 36%, rgba(8,10,14,.06) 50%, transparent 60%);
}

.gal__inner{
  position:relative; z-index:3; height:100%;
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  align-items:center; gap:clamp(20px,3vw,54px);
  padding-left:clamp(22px,3vw,52px);
  padding-bottom:clamp(60px,9vh,96px);
}
.gal__info{ max-width:34ch; }
.gal__info .h2{ margin-bottom:.55em; }
.gal__caption{
  font-size:1rem; line-height:1.6; color:rgba(247,241,231,.82);
  min-height:3.2em; margin-bottom:.6em;
}
.gal__count{
  font-size:.78rem; letter-spacing:.22em; color:rgba(247,241,231,.5);
  margin-bottom:2em;
}
.gal__count b{ color:var(--wood-lt); font-size:1.05rem; }

/* recorta a la izquierda para que las miniaturas no invadan el texto,
   dejando aire arriba y abajo para las sombras */
.gal__strip{
  position:relative; overflow:hidden;
  padding-block:48px; margin-block:-48px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 5%);
  mask-image:linear-gradient(90deg, transparent 0, #000 5%);
}
.gal__track{
  display:flex; gap:clamp(12px,1.3vw,20px);
  transition:transform .65s var(--ease);
  will-change:transform;
}
.gal__card{
  flex:0 0 clamp(148px,16.5vw,248px);
  aspect-ratio:3/4; padding:0; border:0; margin:0;
  border-radius:clamp(14px,1.4vw,22px); overflow:hidden;
  background:rgba(247,241,231,.06); cursor:pointer;
  opacity:.82; transform:scale(.93);
  /* el anillo despega la miniatura de la foto de fondo, que va sin velo */
  box-shadow:0 0 0 1px rgba(255,255,255,.4), 0 18px 44px -20px rgba(0,0,0,.9);
  /* la opacidad no se anima: el relevo con el elemento que crece es seco */
  transition:transform .7s var(--ease), box-shadow .5s var(--ease);
}
.gal__card img{ width:100%; height:100%; object-fit:cover; }
.gal__card:not(.is-active):hover{ opacity:1; transform:scale(.97); }

/* La activa deja su hueco: su imagen está ocupando el fondo. */
.gal__card.is-active{
  opacity:0; box-shadow:none; cursor:zoom-in;
}
/* La que deja de ser fondo sigue oculta hasta que la imagen termina su
   viaje; si no, reaparece como miniatura y cruza por encima del movimiento. */
.gal__card.is-leaving{ opacity:0; }

.gal__nav{
  position:absolute; z-index:3; left:50%; translate:-50% 0;
  bottom:clamp(20px,4vh,46px);
  display:flex; gap:12px;
}
.gal__nav button{
  width:clamp(44px,3.6vw,54px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(250,246,238,.94); color:var(--brown);
  box-shadow:0 10px 28px -12px rgba(0,0,0,.75);
  transition:transform .25s var(--ease), background-color .25s;
}
.gal__nav button:hover{ transform:translateY(-2px); background:#fff; }
.gal__nav svg{ width:22px; height:22px; }

/* ═══════════════ RENDER vs OBRA ═══════════════ */
.compare{
  background:var(--cream); color:var(--brown);
  padding:clamp(72px,9vw,130px) 0 clamp(80px,10vw,150px);
  position:relative; z-index:2;
}
.compare__head{ max-width:60ch; margin-bottom:clamp(34px,4vw,56px); }
.compare .lead{ opacity:.72; }

.cmp{
  --pos:50%;
  position:relative; margin:0;
  aspect-ratio:16/9; width:100%;
  user-select:none; touch-action:pan-y;
}
/* el recorte y las esquinas van aquí; el tirador queda fuera */
.cmp__frame{
  position:absolute; inset:0; overflow:hidden;
  border-radius:clamp(14px,1.6vw,24px);
  background:var(--ink);
  box-shadow:0 40px 90px -46px rgba(51,40,30,.75);
}
.cmp__img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  pointer-events:none;
}
/* El recorte va en la capa, no en la imagen: así el corte queda en
   coordenadas de la caja y no se mueve con el encuadre del render. */
.cmp__layer{
  position:absolute; inset:0; z-index:2; overflow:hidden;
  clip-path:inset(0 calc(100% - var(--pos)) 0 0);
}
/* el render se reencuadra para calzar con la foto de obra */
.cmp__img--a{
  --cmp-x:14%; --cmp-y:-9%; --cmp-s:1.28;
  transform:translate(var(--cmp-x), var(--cmp-y)) scale(var(--cmp-s));
  transform-origin:center;
}

.cmp__tag{
  position:absolute; bottom:clamp(12px,1.6vw,22px); z-index:3;
  font-size:.68rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  padding:.5em 1em; border-radius:999px;
  background:rgba(8,10,14,.62); color:var(--cream);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  pointer-events:none; transition:opacity .3s;
}
.cmp__tag--a{ left:clamp(12px,1.6vw,22px); }
.cmp__tag--b{ right:clamp(12px,1.6vw,22px); }

.cmp__handle{
  position:absolute; top:0; bottom:0; left:var(--pos); z-index:6;
  width:2px; margin-left:-1px; background:var(--cream);
  box-shadow:0 0 0 1px rgba(8,10,14,.28);
  pointer-events:none;
}
.cmp__grip{
  position:absolute; top:50%; left:50%; translate:-50% -50%;
  width:clamp(44px,3.8vw,56px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center;
  background:var(--cream); color:var(--brown);
  box-shadow:0 10px 28px -10px rgba(8,10,14,.7);
}
.cmp__grip svg{ width:24px; height:24px; }

/* el range invisible aporta arrastre, toque y teclado */
.cmp__range{
  position:absolute; inset:0; z-index:5;
  width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize;
  appearance:none; -webkit-appearance:none; background:transparent;
}
.cmp__range::-webkit-slider-thumb{
  -webkit-appearance:none; width:56px; height:100%; cursor:ew-resize;
}
.cmp__range::-moz-range-thumb{
  width:56px; height:100%; border:0; background:transparent; cursor:ew-resize;
}
.cmp__range:focus-visible ~ .cmp__handle .cmp__grip{
  outline:2px solid var(--wood-dk); outline-offset:3px;
}

/* ═══════════════ CONTACTO ═══════════════ */
.contact{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(84px,10vw,150px) 0 clamp(90px,10vw,150px);
  z-index:2;
}
.contact__bg{
  position:absolute; inset:0; z-index:-2;
  background:url("../assets/img/contact-mid.jpg") center/cover no-repeat;
  background-attachment:fixed;
}
.contact__overlay{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(9,11,15,.9) 0%, rgba(9,11,15,.74) 34%, rgba(9,11,15,.88) 100%),
    radial-gradient(80% 60% at 30% 40%, rgba(200,146,79,.16), transparent 70%);
}
.contact__wrap{ position:relative; }
.contact__head{ margin-bottom:clamp(34px,4vw,54px); max-width:44ch; }

.quiz{
  background:rgba(247,241,231,.06);
  border:1px solid rgba(247,241,231,.16);
  backdrop-filter:blur(22px) saturate(130%);
  -webkit-backdrop-filter:blur(22px) saturate(130%);
  border-radius:24px;
  padding:clamp(24px,3.4vw,46px);
  max-width:860px;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}
.quiz__bar{ height:2px; background:rgba(247,241,231,.16); border-radius:2px; overflow:hidden; }
.quiz__bar i{ display:block; height:100%; width:25%; background:var(--wood); transition:width .45s var(--ease); }
.quiz__count{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  opacity:.6; margin:1.1em 0 1.6em;
}
.quiz__count b{ color:var(--wood-lt); }

.quiz__viewport{ overflow:hidden; }
.quiz__track{
  display:flex; align-items:flex-start;
  transition:transform .55s var(--ease), height .45s var(--ease);
}
.qcard{
  flex:0 0 100%; min-width:100%; margin:0; padding:0; border:0;
  transition:opacity .4s var(--ease);
}
.qcard:not(.is-active){ opacity:.18; pointer-events:none; }
.qcard__q{
  padding:0; font-size:clamp(1.35rem,2.3vw,1.95rem); font-weight:800;
  letter-spacing:-.03em; line-height:1.15; margin-bottom:1.1em; color:var(--cream);
}

.opts{ display:grid; gap:10px; }
.opts--row{ grid-template-columns:repeat(3,1fr); }
.opt{
  position:relative; display:flex; align-items:center; gap:12px;
  padding:1.02em 1.25em; border-radius:14px;
  border:1.5px solid rgba(247,241,231,.2);
  background:rgba(247,241,231,.04);
  cursor:pointer; transition:border-color .25s, background-color .25s, transform .25s var(--ease);
}
.opt:hover{ border-color:rgba(227,177,114,.65); background:rgba(247,241,231,.08); transform:translateX(3px); }
.opts--row .opt{ justify-content:center; transform:none; }
.opts--row .opt:hover{ transform:translateY(-3px); }
.opt input[type=radio]{
  appearance:none; -webkit-appearance:none; margin:0; flex:0 0 auto;
  width:19px; height:19px; border-radius:50%;
  border:1.5px solid rgba(247,241,231,.45); transition:border-color .2s, box-shadow .2s;
}
.opt input[type=radio]:checked{ border-color:var(--wood); box-shadow:inset 0 0 0 5px var(--wood); }
.opt span{ font-weight:600; font-size:.97rem; }
.opt:has(input:checked){ border-color:var(--wood); background:rgba(200,146,79,.15); }

.opt--other{ flex-wrap:wrap; }
.opt__free{
  flex:1 1 100%; margin-top:.7em; display:none;
  background:rgba(9,11,15,.4); border:1px solid rgba(247,241,231,.22);
  border-radius:10px; padding:.75em .95em; color:var(--cream); font:inherit; font-size:.95rem;
}
.opt__free::placeholder{ color:rgba(247,241,231,.4); }
.opt--other:has(input[type=radio]:checked) .opt__free{ display:block; }

.fields{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:1.4em; }
.field{ display:flex; flex-direction:column; gap:.5em; }
.field span{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; opacity:.6; }
.field input, .field select, .field textarea{
  background:rgba(9,11,15,.4); border:1.5px solid rgba(247,241,231,.22);
  border-radius:12px; padding:.92em 1.05em; color:var(--cream); font:inherit;
  transition:border-color .25s, background-color .25s;
}
.field input::placeholder, .field textarea::placeholder{ color:rgba(247,241,231,.38); }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--wood); background:rgba(9,11,15,.6); outline:none;
}
.field textarea{ resize:vertical; min-height:5.4em; line-height:1.55; }
/* la flecha nativa se pinta a mano: sobre fondo oscuro el control del
   sistema aparece con su propio blanco y rompe la fila de campos */
.field select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  padding-right:2.6em;
  background-image:linear-gradient(45deg,transparent 50%,var(--wood-lt) 50%),
                   linear-gradient(135deg,var(--wood-lt) 50%,transparent 50%);
  background-position:calc(100% - 1.25em) 55%, calc(100% - 1em) 55%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
/* el desplegable sí lo pinta el sistema: sin esto el texto sale claro
   sobre fondo claro en Windows */
.field select option{ background:var(--ink-2); color:var(--cream); }

.summary{ list-style:none; margin:0 0 1.6em; padding:0; display:grid; gap:9px; }
.summary li{
  display:flex; flex-wrap:wrap; gap:.5em 1em; padding:.85em 1.1em;
  background:rgba(247,241,231,.05); border-left:2px solid var(--wood); border-radius:0 10px 10px 0;
}
.summary b{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; opacity:.6; flex:0 0 auto; align-self:center; }
.summary span{ font-weight:600; }

.quiz__nav{ display:flex; justify-content:space-between; gap:12px; margin-top:1.8em; }
.quiz__fineprint{ font-size:.78rem; opacity:.5; text-align:center; margin:1em 0 0; }
.quiz__error{ margin:1em 0 0; color:#FFAF8A; font-size:.88rem; font-weight:600; }
.qcard--done .quiz__nav{ display:none; }

/* ═══════════════ TRABAJA CON NOSOTROS ═══════════════
   Franja corta entre "Contacto" y el pie: menos de la mitad del alto de una
   sección normal mientras está cerrada. Al pulsar "Únete a nosotros" el
   panel se estira y la franja pasa a ser el formulario de postulación. */
.join{
  position:relative; z-index:2; color:var(--cream);
  background:var(--ink-2);
  padding:clamp(34px,4vw,60px) 0;
  border-top:1px solid rgba(200,146,79,.28);
}
/* el mismo halo de madera del contacto, para que la franja se lea como su
   continuación y no como una sección suelta */
.join::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 120% at 78% 0%, rgba(200,146,79,.14), transparent 68%);
}
.join__wrap{ position:relative; }

.join__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(20px,3vw,54px); flex-wrap:wrap;
}
.join__pitch{ max-width:46ch; }
.join__pitch .eyebrow{ margin-bottom:.9em; }
/* más pequeño que un .h2 normal a propósito: la franja no debe pesar lo
   que una sección */
.join__title{ font-size:clamp(1.5rem, 1.9vw + .72rem, 2.5rem); margin:0; }
.join__lead{ margin:.9em 0 0; font-size:.99rem; line-height:1.65; opacity:.78; }
.join__cta{ flex:0 0 auto; }

/* Cerrado mide 0 y el alto lo escribe el JS, que es la única forma de
   animarlo. Lo que lo saca del orden de tabulación es visibility, no un
   atributo hidden: hidden es display:none y no habría transición, y
   devolverlo al cerrar obligaría a esperar un transitionend, que no se
   dispara si el navegador decide no animar (pestaña de fondo). Con el
   retraso en la transición, la visibilidad se apaga justo al terminar de
   plegarse. */
.join__panel{
  height:0; overflow:hidden; visibility:hidden;
  transition:height .55s var(--ease), visibility 0s linear .55s;
}
.join__panel.is-open{
  visibility:visible;
  transition:height .55s var(--ease), visibility 0s;
}
.join__form{
  margin-top:clamp(26px,3vw,40px);
  padding-top:clamp(24px,3vw,36px);
  border-top:1px solid rgba(247,241,231,.14);
  max-width:860px;
}
/* auto-fit y no dos columnas fijas: así no hace falta media query y en
   tableta pasa a una sola columna cuando los campos ya no caben */
.join__fields{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,16rem), 1fr));
}
.join__field--wide{ margin-top:1.4em; }

.join__group{ margin:1.4em 0 0; padding:0; border:0; }
.join__group legend{
  padding:0 0 .8em; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; opacity:.6;
}

.join__cv{ margin-top:1.4em; }
.join__file{
  position:relative;
  display:flex; align-items:center; gap:.85em; flex-wrap:wrap;
  padding:1.05em 1.25em; border-radius:14px; cursor:pointer;
  border:1.5px dashed rgba(247,241,231,.28);
  background:rgba(247,241,231,.04);
  transition:border-color .25s, background-color .25s;
}
.join__file:hover{ border-color:rgba(227,177,114,.7); background:rgba(247,241,231,.08); }
.join__file svg{ width:20px; height:20px; flex:0 0 auto; color:var(--wood-lt); }
.join__file b{ font-weight:700; font-size:.97rem; }
.join__file em{ font-style:normal; font-size:.82rem; opacity:.55; }
/* el input nativo no se puede estilar; se esconde sin sacarlo del foco */
.join__file input[type=file]{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}
.join__file:has(input:focus-visible){ border-color:var(--wood); }
.join__filename{
  margin:.8em 0 0; font-size:.88rem; font-weight:600; color:var(--wood-lt);
  display:flex; align-items:center; gap:.5em;
}
.join__file--set{ border-style:solid; border-color:var(--wood); background:rgba(200,146,79,.12); }

#joinSend{ margin-top:1.7em; }
.join__fineprint{ font-size:.78rem; opacity:.55; text-align:center; margin:1em auto 0; max-width:52ch; line-height:1.6; }
.join__alt{
  border:0; background:none; padding:0; font:inherit; color:var(--wood-lt);
  text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
.join__error{ margin:1em 0 0; color:#FFAF8A; font-size:.88rem; font-weight:600; }

/* ═══════════════ FOOTER ═══════════════ */
.footer{ background:var(--cream); color:var(--brown); position:relative; z-index:2; }
.footer__grid{
  display:grid; gap:clamp(34px,4vw,56px);
  grid-template-columns:1.5fr 1fr 1fr 1.4fr;
  padding:clamp(58px,7vw,96px) 0 clamp(42px,5vw,64px);
}
.footer__brand img{ width:clamp(158px,16vw,214px); height:auto; margin:0 0 1.5em; }
.footer__brand p{ font-size:.92rem; line-height:1.7; opacity:.68; max-width:34ch; }

.footer__col h4{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--wood-dk); margin-bottom:1.3em; font-weight:700;
}
.footer__col a, .footer__col p{
  display:block; font-size:.92rem; opacity:.68; margin:0 0 .72em;
  transition:opacity .2s, color .2s;
}
.footer__col a:hover{ opacity:1; color:var(--wood-dk); }
.footer__col--contact p{ line-height:1.6; }

.footer__social{ display:flex; gap:10px; margin-top:1.3em; }
.footer__social a{
  display:grid; place-items:center; width:40px; height:40px; border-radius:11px;
  border:1px solid rgba(51,40,30,.2); opacity:.72;
  transition:border-color .25s, opacity .25s, transform .25s var(--ease);
}
.footer__social a:hover{ border-color:var(--wood-dk); opacity:1; transform:translateY(-2px); }
.footer__social svg{ width:18px; height:18px; }

.footer__bar{ border-top:1px solid rgba(51,40,30,.14); }
.footer__bar-inner{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px;
  padding:22px 0; font-size:.8rem; opacity:.5;
}

/* ═══════════════ WHATSAPP ═══════════════ */
.wa{
  position:fixed; right:clamp(16px,2.2vw,30px); bottom:clamp(16px,2.2vw,30px); z-index:95;
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center;
  background:#25D366; color:#0A2E17;
  box-shadow:0 14px 34px -12px rgba(37,211,102,.8), 0 4px 14px rgba(0,0,0,.35);
  opacity:0; transform:scale(.4) translateY(14px); pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease), box-shadow .3s;
}
.wa.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.wa:hover{ box-shadow:0 18px 42px -12px rgba(37,211,102,.95), 0 4px 14px rgba(0,0,0,.4); }
.wa svg{ width:32px; height:32px; }
.wa__tip{
  position:absolute; right:calc(100% + 12px); top:50%; translate:0 -50%;
  background:var(--ink-3); color:var(--cream); font-size:.82rem; font-weight:600;
  padding:.55em .95em; border-radius:9px; white-space:nowrap;
  opacity:0; transform:translateX(8px); transition:opacity .25s, transform .25s var(--ease);
  pointer-events:none;
}
.wa:hover .wa__tip{ opacity:1; transform:none; }

/* ═══════════════ LIGHTBOX ═══════════════ */
.lb{
  position:fixed; inset:0; z-index:120; background:rgba(6,8,11,.94);
  display:grid; place-items:center; padding:clamp(16px,4vw,54px);
  animation:menuIn .25s var(--ease);
  backdrop-filter:blur(8px);
}
.lb[hidden]{ display:none; }
.lb__img{ max-width:100%; max-height:88vh; object-fit:contain; border-radius:8px; }
.lb__close{
  position:absolute; top:clamp(12px,2vw,26px); right:clamp(12px,2vw,26px);
  width:46px; height:46px; font-size:2rem; line-height:1; opacity:.7;
}
.lb__close:hover{ opacity:1; }
.lb__nav{
  position:absolute; top:50%; translate:0 -50%;
  width:54px; height:54px; font-size:2.4rem; line-height:1; opacity:.55;
  border-radius:50%; transition:opacity .2s, background-color .2s;
}
.lb__nav:hover{ opacity:1; background:rgba(247,241,231,.1); }
.lb__nav--prev{ left:clamp(6px,1.6vw,22px); }
.lb__nav--next{ right:clamp(6px,1.6vw,22px); }

/* ═══════════════ REVEAL ═══════════════ */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:1080px){
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  .nav__burger{ display:block; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
}

@media (max-width:900px){
  .hero{ height:340vh; }
  .split{ grid-template-columns:1fr; }
  .split__text{ order:2; padding:clamp(56px,9vw,84px) var(--pad); }
  .split__text-inner{ margin-left:0; }
  /* en móvil background-attachment:fixed es poco fiable (iOS): foto normal */
  .split__media{ order:1; height:auto; padding:var(--pad); }
  .split__window{
    width:100% !important; height:52svh;
    background-attachment:scroll; background-size:cover; background-position:center;
  }

  .about{ grid-template-columns:1fr; --about-fade:var(--purple-bot); }
  .about__wall{ display:none; }   /* apilado el morado lo lleva el panel */
  .about__media{ height:52svh; overflow:hidden; }
  .about__media-inner{ position:relative; height:52svh; }
  .about__media-inner img{
    object-position:center;
    -webkit-mask-image:none; mask-image:none;   /* apilado el fundido es vertical */
  }
  .about__body{ padding:clamp(52px,8vw,76px) var(--pad); }
  .about__inner{ position:relative; top:auto; }
  .about__spacer{ display:none; }
  /* la foto se funde con el morado del panel de abajo */
  .about__media::after{
    content:""; position:absolute; left:0; right:0; bottom:-1px; height:34%;
    background:linear-gradient(180deg, transparent 0%, var(--about-fade) 92%);
    pointer-events:none;
  }
  .about__body::before{
    background:linear-gradient(180deg, rgba(26,22,54,0) 0%, rgba(26,22,54,.30) 22%, rgba(26,22,54,.40) 100%);
    opacity:1;   /* apilado no hay paneo que valga */
  }
  /* Sin paneo: "Instalaciones" vuelve a ser una sección normal debajo de
     "Nosotros", con su morado propio de arriba abajo y el solape de 4px
     para tapar el borde fraccionario. */
  .about__spacer--pan{ display:none; }
  .about__media-inner img{ transform:none; }
  .fac{
    --fac-lead:0px;
    margin-top:-4px; pointer-events:auto; padding-bottom:0;
    background:linear-gradient(180deg,
        var(--purple-seam) 0%, var(--purple-seam) 16%,
        #9793DA 44%, #8480C6 74%, #736FB2 100%);
  }
  .fac__hold{ height:auto; }
  .fac__pin{ position:static; height:auto; }
  .fac__inner{
    transform:none; min-height:0; display:block;
    padding:clamp(62px,9vw,104px) 0 clamp(76px,11vw,130px);
  }
  .fac__head{ margin-bottom:clamp(34px,6vw,58px); }
  .fac__col{ transform:none; }
  /* apilado manda el ancho, no el alto: los marcos llenan su columna */
  .fac__wall{ display:grid; align-items:start; gap:clamp(18px,3vw,30px); }
  .fac__col{ gap:clamp(18px,3vw,30px); }
  .fac__frame img{ width:100%; height:auto; }

  /* la pared pasa a dos columnas y los desfases se recortan */
  .fac__wall{ grid-template-columns:1fr 1fr; }
  .fac__col--b{ margin-top:clamp(28px,6vw,60px); }
  .fac__col--c, .fac__col--d{ margin-top:0; display:contents; }
  .fac__col--c .fac__frame, .fac__col--d .fac__frame{ align-self:start; }

  /* galería: la info arriba, las miniaturas debajo */
  .gal{ height:auto; padding:clamp(70px,10vw,110px) 0 clamp(96px,13vw,130px); }
  .gal__inner{
    grid-template-columns:1fr; align-items:start;
    gap:clamp(26px,5vw,44px);
    padding-left:var(--pad); padding-bottom:0;
  }
  /* apilado el texto va encima de la foto: el apoyo pasa a ser vertical
     y sólo cubre la franja del titular, no las miniaturas */
  .gal__scrim{
    background:linear-gradient(180deg,
        rgba(8,10,14,.9) 0%, rgba(8,10,14,.78) 30%,
        rgba(8,10,14,.42) 52%, rgba(8,10,14,.1) 70%, transparent 82%);
  }
  .gal__info{ max-width:none; }
  .gal__caption{ min-height:0; }
  /* a lo ancho no hay texto que proteger: sin degradado de recorte */
  .gal__strip{ -webkit-mask-image:none; mask-image:none; }
  .gal__count{ margin-bottom:1.4em; }
  .gal__card{ flex-basis:clamp(140px,42vw,200px); }
  .gal__nav{ bottom:clamp(28px,5vw,44px); }

  .contact__bg{ background-attachment:scroll; }
  /* apilada, la franja deja el botón debajo del texto y no a su lado */
  .join__head{ align-items:flex-start; }
  .fields{ grid-template-columns:1fr; }
  .opts--row{ grid-template-columns:1fr; }
  .opts--row .opt{ justify-content:flex-start; }
}

@media (max-width:560px){
  .hero{ height:300vh; }
  .hero__content{ margin-bottom:clamp(72px,12vh,110px); }
  .hero__actions .btn{ flex:1 1 100%; }
  .hero__hint{ display:none; }
  .about__marks{ grid-template-columns:repeat(2,1fr); gap:22px 26px; }
  .fac__wall{ grid-template-columns:1fr; }
  .fac__col--b{ margin-top:0; }
  .fac__col{ display:contents; }
  .cards{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .quiz{ border-radius:18px; }
  .join__cta{ width:100%; }
  .wa{ width:54px; height:54px; }
  .wa svg{ width:29px; height:29px; }
}

/* accesibilidad: sin animación */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .hero{ height:100svh; }
  .hero__content{ opacity:1; transform:none; pointer-events:auto; }
  .hero__scrim{ opacity:1; }
  .hero__hint{ display:none; }
  [data-reveal]{ opacity:1; transform:none; }
  .about__body::before{ opacity:1; }
  /* Sin paneo: "Instalaciones" vuelve a ser una sección normal debajo de
     "Nosotros", con su morado propio de arriba abajo y el solape de 4px
     para tapar el borde fraccionario. */
  .about__spacer--pan{ display:none; }
  .about__media-inner img{ transform:none; }
  .fac{
    --fac-lead:0px;
    margin-top:-4px; pointer-events:auto; padding-bottom:0;
    background:linear-gradient(180deg,
        var(--purple-seam) 0%, var(--purple-seam) 16%,
        #9793DA 44%, #8480C6 74%, #736FB2 100%);
  }
  .fac__hold{ height:auto; }
  .fac__pin{ position:static; height:auto; }
  .fac__inner{
    transform:none; min-height:0; display:block;
    padding:clamp(62px,9vw,104px) 0 clamp(76px,11vw,130px);
  }
  .fac__head{ margin-bottom:clamp(34px,6vw,58px); }
  .fac__col{ transform:none; }
  /* apilado manda el ancho, no el alto: los marcos llenan su columna */
  .fac__wall{ display:grid; align-items:start; gap:clamp(18px,3vw,30px); }
  .fac__col{ gap:clamp(18px,3vw,30px); }
  .fac__frame img{ width:100%; height:auto; }
}