/* ═══════════════════════════════════════════════════════════
   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%);

  --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; }
.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{
  /* el degradado real se calcula por JS desde el borde de la foto y se
     mantiene anclado a la banda de 100svh que ocupa la foto fija */
  background:var(--about-grad);
  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; }
/* 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;
}

/* ═══════════════ 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{
  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{ color:rgba(247,241,231,.38); }
.field input:focus{ border-color:var(--wood); background:rgba(9,11,15,.6); outline:none; }

.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; }

/* ═══════════════ 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__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%);
  }

  /* 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; }
  .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; }
  .cards{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .quiz{ border-radius:18px; }
  .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; }
}