/* ═══════════════════════════════════════════════════════════
   SOMMET WEALTH PARTNERS · v2
   Paleta y tipografía según Manual de Marca V3 (Optima)
   ═══════════════════════════════════════════════════════════ */

:root {
  --green:#33483F; --forest:#22322B; --ink:#1E2A24; --sage:#3E564B;
  --ivory:#F4F2E6; --sand:#D6C7A5; --gold:#C2A45B; --gold-antique:#A6873F;
  --deep-sand:#8F815F; --abyss:#0F1614;

  --ivory-dim:rgba(244,242,230,.76);
  --ivory-mute:rgba(244,242,230,.56);
  --ivory-ghost:rgba(244,242,230,.16);
  --hair-light:rgba(244,242,230,.16);
  --hair-dark:rgba(30,42,36,.13);
  --green-dim:rgba(30,42,36,.62);

  --display:"Marcellus","Optima","Palatino Linotype",Palatino,Georgia,serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --wrap:1280px; --wrap-narrow:900px;
  --gut:clamp(1.5rem,5vw,4.5rem);
  --sec:clamp(5rem,11vh+4vw,10rem);

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

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;max-width:100%;scroll-padding-top:clamp(84px,11vh,116px)}
body{
  margin:0;background:var(--ink);color:var(--ivory);
  font-family:var(--body);font-size:clamp(1rem,.95rem + .2vw,1.0625rem);
  line-height:1.7;font-weight:350;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;max-width:100%;
}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.08;margin:0;letter-spacing:-.005em;text-wrap:balance}
p{margin:0 0 1.1em}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button{font:inherit}
::selection{background:var(--gold);color:var(--ink)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.narrow{max-width:var(--wrap-narrow)}
.section{padding-block:var(--sec);position:relative}

.skip{position:fixed;left:1rem;top:-100px;z-index:999;background:var(--gold);color:var(--ink);padding:.8rem 1.4rem;transition:top .2s var(--ease)}
.skip:focus{top:1rem}

/* ═══ Escala tipográfica ══════════════════════════════════ */
.t-hero{font-size:clamp(2.4rem,1rem + 4.6vw,5.25rem);line-height:1.04}
.t-xl{font-size:clamp(2.1rem,1.2rem + 3.8vw,4.35rem);letter-spacing:-.015em}
.t-lg{font-size:clamp(1.6rem,1.1rem + 2.1vw,2.75rem)}

.lede{font-size:clamp(1.0625rem,1rem + .5vw,1.3rem);line-height:1.6;color:var(--ivory-dim);font-weight:300;max-width:58ch}

.eyebrow{display:flex;align-items:center;gap:.875rem;font-family:var(--body);font-size:.6875rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0 0 1.75rem}
.eyebrow::before{content:"";width:clamp(28px,4.5vw,60px);height:1px;background:var(--gold);opacity:.8;flex:none}
.eyebrow--center{justify-content:center}

.on-ivory{background:var(--ivory);color:var(--ink)}
.on-ivory .lede{color:var(--green-dim)}
.on-ivory .eyebrow{color:var(--gold-antique)}
.on-ivory .eyebrow::before{background:var(--gold-antique)}
.on-green{background:var(--green)}

/* ═══ Botones ═════════════════════════════════════════════ */
.btn{
  --btn-fg:var(--ink);--btn-bg:var(--gold);
  position:relative;display:inline-flex;align-items:center;gap:.7rem;
  font-size:.8125rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  padding:1.05rem 2.1rem;border:1px solid var(--btn-bg);background:transparent;
  color:var(--btn-fg);cursor:pointer;overflow:hidden;isolation:isolate;
  transition:color .45s var(--ease),border-color .45s var(--ease);
}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--btn-bg);transition:transform .55s var(--ease-out)}
.btn:hover::before{transform:translateY(101%)}
.btn:hover{color:var(--btn-bg)}
.btn__arrow{transition:transform .45s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(5px)}

.ulink{position:relative;display:inline-block;padding-bottom:3px}
.ulink::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out)}
.ulink:hover::after{transform:scaleX(1);transform-origin:left}

/* ═══ Fotografía: gradación duotono de marca ══════════════
   Las fotos son de archivo; el tratamiento las vuelve un
   sistema propio en vez de stock reconocible.               */
.ph{position:relative;overflow:hidden;background:var(--ink) center/cover}
.ph img{
  width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.2s var(--ease);
}
.ph img.is-loaded{opacity:1}
/* La gradación de marca va horneada en el JPEG (ver build de fotos).
   Antes se hacía en vivo con mix-blend-mode; WebKit la componía
   distinto que Chrome y aparecían manchas magenta en las zonas claras. */

/* Revelado por máscara */
/* El desenfoque se resuelve conforme la foto sube por la pantalla.
   Arranca igual de borrosa que su placeholder, así el cambio de una
   a otra es imperceptible: no hay salto, solo enfoque progresivo. */
.ph--focus img{
  filter:blur(var(--blur,18px));
  /* El desenfoque muestrea más allá del borde y deja halo translúcido;
     un 4% de zoom lo empuja fuera del recorte del contenedor. */
  transform:scale(1.04);
  will-change:filter;
}
.ph--focus{background-size:cover;background-position:center}

/* ═══ Navegación ══════════════════════════════════════════ */
.nav{position:fixed;inset:0 0 auto;z-index:100;transition:background .5s var(--ease),backdrop-filter .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:clamp(76px,8vw,104px);transition:height .5s var(--ease)}
.nav.is-scrolled{background:rgba(20,28,24,.84);backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 1px 0 var(--hair-light)}
.nav.is-scrolled .nav__inner{height:72px}
/* El nav y el logotipo permanecen visibles en todo momento */
/* ── Lockup de marca, reconstruido en vectores ────────────
   El PNG oficial no sobrevive a tamaño de barra: "WEALTH
   PARTNERS" caía a 4px. Aquí cada pieza se escala aparte y
   la bajada se justifica al ancho de SOMMET, como pide el
   manual de marca.                                          */
.brand{display:inline-flex;align-items:center;gap:clamp(.7rem,1.1vw,1rem);text-decoration:none}
.brand__mark{
  width:clamp(42px,5.2vw,62px);height:auto;flex:none;color:var(--sand);
  transition:width .5s var(--ease),color .4s var(--ease);
}
.brand:hover .brand__mark{color:var(--gold)}
.brand__type{display:flex;flex-direction:column;gap:.24em}
.brand__name{
  font-family:var(--display);color:var(--ivory);line-height:1;
  font-size:clamp(1.3rem,2.3vw,1.95rem);
  letter-spacing:.226em;text-indent:.226em;
  transition:font-size .5s var(--ease);
}
.brand__sub{
  display:block;width:100%;
  font-family:var(--display);color:var(--gold);line-height:1;
  font-size:clamp(.5rem,.78vw,.66rem);
  letter-spacing:.52em;white-space:nowrap;
  transition:font-size .5s var(--ease);
}
.nav.is-scrolled .brand__mark{width:clamp(38px,4.2vw,48px)}
.nav.is-scrolled .brand__name{font-size:clamp(1.15rem,1.8vw,1.5rem)}
.nav.is-scrolled .brand__sub{font-size:clamp(.46rem,.6vw,.52rem)}

/* Un poco más de aire en la barra para que el logotipo respire */
@media(max-width:520px){
  .brand__mark{width:40px}
  .brand__name{font-size:1.22rem;letter-spacing:.2em;text-indent:.2em}
  .brand__sub{font-size:.48rem}
}
.nav__links{display:flex;align-items:center;gap:clamp(1.4rem,2.4vw,2.6rem)}
.nav__links a{font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ivory-dim);transition:color .3s var(--ease)}
.nav__links a:hover,.nav__links a.is-active{color:var(--ivory)}
.nav__cta{padding:.8rem 1.5rem;font-size:.6875rem}

/* ── Selector de idioma ──────────────────────────────────── */
.lang{display:inline-flex;align-items:center;gap:.2rem;margin-left:clamp(.6rem,1.4vw,1.4rem)}
.lang__b{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.42rem .6rem;border:1px solid transparent;border-radius:2px;
  font-size:.6875rem;letter-spacing:.12em;color:var(--ivory-mute);
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.lang__b:hover{color:var(--ivory)}
.lang__b.is-on{color:var(--ivory);border-color:rgba(194,164,91,.45);background:rgba(194,164,91,.1)}
.lang__f{
  width:17px;height:auto;flex:none;border-radius:1px;
  box-shadow:0 0 0 .5px rgba(244,242,230,.3);
  opacity:.75;transition:opacity .3s var(--ease);
}
.lang__b.is-on .lang__f,.lang__b:hover .lang__f{opacity:1}

/* El selector vive en la barra en todos los tamaños: cambiar de
   idioma no debería exigir abrir el menú primero. En móvil se
   compacta —bandera y texto más chicos— para caber entre el logotipo
   y el botón del menú sin empujar nada. */
@media(max-width:940px){
  .nav__inner{gap:.75rem}
  .nav__inner > .lang{margin-left:auto;gap:.25rem}
  .nav__inner > .lang .lang__b{padding:.62rem .46rem;gap:.3rem;
    font-size:.625rem;letter-spacing:.08em}
  .nav__inner > .lang .lang__f{width:14px}
}
/* Ni el selector ni el botón del menú ceden ancho: sin esto el flex
   aplastaba el botón hasta cero en pantallas de 320 px y el menú
   desaparecía. */
.nav__inner > .lang,
.nav__burger{flex:none}
/* Y sólo por debajo de 940 px el logotipo puede ceder: en escritorio
   hay sitio de sobra y dejarlo encoger le cortaba la palabra. */
@media(max-width:940px){
  .brand{min-width:0}
  .brand__type{overflow:hidden}
}

@media(max-width:400px){
  .nav__inner{gap:.5rem}
  .nav__inner > .lang .lang__b{padding:.58rem .34rem;gap:.24rem;font-size:.5625rem}
  .nav__inner > .lang .lang__f{width:12px}
  .brand__mark{width:38px}
  .brand__name{font-size:1.16rem}
}
/* Por debajo de 360 px el logotipo baja un punto más: es eso o perder
   las banderas de la barra, y verlas sin abrir el menú es el objetivo. */
@media(max-width:360px){
  :root{--gut:1.25rem}
  .brand{gap:.5rem}
  .brand__mark{width:30px}
  .brand__name{font-size:.95rem}
  .nav__inner > .lang .lang__b{padding:.55rem .3rem;gap:.2rem;font-size:.5rem}
  .nav__inner > .lang .lang__f{width:11px}
/* 320 px: el ancho ya no da para el logotipo completo, el selector y
   el botón del menú a la vez. Se cede en el tamaño del logotipo,
   nunca en que se lea entero: cortar la palabra se ve roto. */
@media(max-width:340px){
  :root{--gut:1rem}
  .brand{gap:.45rem}
  .brand__mark{width:28px}
  .brand__name{font-size:.88rem}
  .nav__inner{gap:.4rem}
  .nav__inner > .lang .lang__b{padding:.5rem .26rem;gap:.16rem;font-size:.46rem}
  .nav__inner > .lang .lang__f{width:10px}
}
}

.nav__burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:0;position:relative;z-index:110}
.nav__burger span{position:absolute;left:10px;width:24px;height:1.5px;background:var(--ivory);transition:transform .45s var(--ease)}
.nav__burger span:nth-child(1){top:17px}
.nav__burger span:nth-child(2){top:25px}
.nav__burger.is-open span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;
  /* Por debajo de la barra (100): si no, el menú tapaba su propio
     botón de cerrar y no había forma de salir. */
  z-index:95;
  background:var(--abyss);display:flex;flex-direction:column;justify-content:center;
  padding:calc(clamp(76px,8vw,104px) + 2rem) var(--gut) 3rem;
  clip-path:inset(0 0 100% 0);transition:clip-path .75s var(--ease-out);visibility:hidden;
  overflow-y:auto;
}
.drawer.is-open{clip-path:inset(0 0 0 0);visibility:visible}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a{
  /* Los anclas son inline por defecto y se acomodaban en renglón,
     envolviéndose unas con otras. */
  display:block;width:100%;
  font-family:var(--display);font-size:clamp(1.6rem,6.4vw,2.4rem);line-height:1.15;
  padding:.62rem 0;border-bottom:1px solid var(--hair-light);
  opacity:0;transform:translateY(20px);
  transition:opacity .5s var(--ease) var(--d,0s),transform .5s var(--ease) var(--d,0s);
}
.drawer.is-open nav a{opacity:1;transform:none}
.drawer__foot{margin-top:2.5rem;color:var(--ivory-mute);font-size:.875rem}
@media(max-width:940px){.nav__links{display:none}.nav__burger{display:block}}

.progress{position:fixed;top:0;left:0;height:2px;z-index:120;background:linear-gradient(90deg,var(--sand),var(--gold));width:0}

/* ═══ HERO ════════════════════════════════════════════════ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding-block:clamp(8rem,18vh,12rem) clamp(6rem,13vh,9rem);overflow:hidden;background:var(--abyss)}
.hero__media{position:absolute;inset:-8% 0 0;z-index:0;will-change:transform}
.hero__media .ph{position:absolute;inset:0}
.hero__media img,
.hero__media canvas{transform:scale(1.18);animation:heroIn 3.4s var(--ease-out) forwards}
@keyframes heroIn{to{transform:scale(1.02)}}
/* ── Humo del volcán, deformado en vivo ──────────────────
   El lienzo se dibuja encima de la foto y la reemplaza pixel a
   pixel: dentro de la pluma, cada punto se muestrea desplazado
   por un campo de ruido que sube. No es una copia encimada —eso
   se leía como calca— sino la misma imagen empujada, que es lo
   que hace el humo de verdad.

   Fuera de la máscara el desplazamiento es cero, así que la
   montaña y la roca quedan idénticas a la foto original.
   Si no hay WebGL, el <img> de abajo se ve tal cual.           */
.hero__humo{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;opacity:0;transition:opacity .5s linear;
}
.hero__humo.is-on{opacity:1}

.hero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(20,28,24,.72) 0%,rgba(20,28,24,.16) 30%,rgba(20,28,24,.5) 62%,rgba(20,28,24,.96) 100%),
    linear-gradient(100deg,rgba(20,28,24,.82) 0%,rgba(20,28,24,.42) 42%,transparent 72%)}
.hero__inner{position:relative;z-index:2;width:100%}
.hero__title{max-width:15ch}
.hero__title em{font-style:normal;color:var(--sand)}
.hero__lede{margin-top:clamp(1.5rem,3vw,2.25rem)}
.hero__cta{margin-top:clamp(2rem,4vw,3rem);display:flex;flex-wrap:wrap;gap:1rem 1.75rem;align-items:center}

.hero__strip{position:absolute;left:0;right:0;bottom:0;z-index:3;border-top:1px solid var(--hair-light);background:linear-gradient(180deg,transparent,rgba(20,28,24,.55))}
.hero__strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-block:1.15rem}
.hero__scroll{display:inline-flex;align-items:center;gap:.75rem;font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ivory-mute)}
.hero__scroll i{display:block;width:1px;height:32px;background:var(--hair-light);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;inset:0;background:var(--gold);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
.hero__jur{display:flex;gap:1.5rem;font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ivory-mute)}
@media(max-width:760px){.hero__jur{display:none}}

/* ═══ Diferenciadores del hero ═══════════════════════════
   Diez, uno a la vez. En escritorio ocupan el costado derecho;
   en teléfono fluyen debajo del botón, compactos. Van dentro
   del contenido del hero para que el móvil los ordene solo.  */
.claims{
  margin-top:clamp(2rem,4vh,2.75rem);
  padding-left:clamp(1.1rem,1.6vw,1.9rem);
  position:relative;max-width:34rem;
}
.claims::before{
  content:"";position:absolute;z-index:-1;
  inset:-1.1rem -1.5rem -1.1rem 0;
  background:linear-gradient(90deg,rgba(15,22,20,.8),rgba(15,22,20,.5) 60%,transparent);
}
.claims::after{
  content:"";position:absolute;left:0;top:-.3rem;bottom:-.3rem;width:1px;
  background:linear-gradient(180deg,transparent,rgba(194,164,91,.7) 16%,rgba(194,164,91,.7) 84%,transparent);
}
.claims__list{position:relative;min-height:8.5rem}
.claims__i{
  position:absolute;inset:0;opacity:0;transform:translateY(12px);
  transition:opacity .7s var(--ease),transform .7s var(--ease-out);
  pointer-events:none;
}
.claims__i.is-on{opacity:1;transform:none}
.claims__n{
  display:block;font-family:var(--display);font-size:.8125rem;
  letter-spacing:.22em;color:var(--gold);margin-bottom:.85rem;
}
.claims__n i{font-style:normal;color:var(--ivory-mute);letter-spacing:.14em}
.claims__t{
  font-size:clamp(1.25rem,1rem + 1vw,1.7rem);line-height:1.2;
  color:var(--ivory);margin-bottom:.7rem;text-wrap:balance;
}
.claims__d{font-size:.9375rem;line-height:1.6;color:rgba(244,242,230,.82);font-weight:300;margin:0}
.claims__bar{height:1px;background:var(--hair-light);margin-top:1.25rem;position:relative;overflow:hidden}
.claims__bar i{
  position:absolute;inset:0 auto 0 0;width:100%;
  background:linear-gradient(90deg,var(--sand),var(--gold));
  transform:scaleX(0);transform-origin:left;
}
.claims__bar i.corre{transition:transform 5s linear;transform:scaleX(1)}

/* En escritorio se despega al costado derecho del hero */
@media(min-width:1180px){
  /* El panel toma el carril derecho y el titular baja un punto de
     escala: así cada verso cabe completo en su línea, en vez de
     partirse en cuatro con una palabra huérfana. */
  .hero__inner{padding-right:clamp(330px,26vw,390px)}
  .t-hero{font-size:clamp(2.4rem,1rem + 4vw,4.5rem)}
  .claims{
    position:absolute;margin-top:0;max-width:none;
    right:clamp(2rem,5vw,6rem);top:50%;transform:translateY(-50%);
    width:clamp(230px,23vw,320px);z-index:3;
  }
  .claims::before{inset:-1.6rem -2.5rem -1.6rem 0}
  .claims__list{min-height:11rem}
}
@media(prefers-reduced-motion:reduce){
  .claims__i{transition:none}
  .claims__bar{display:none}
}

/* ═══ Revelados ═══════════════════════════════════════════ */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease-out) var(--rd,0s),transform .9s var(--ease-out) var(--rd,0s)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal="fade"]{transform:none}
[data-reveal="left"]{transform:translateX(-40px)}
[data-reveal="right"]{transform:translateX(40px)}
[data-reveal="scale"]{transform:scale(.94)}

/* Titulares palabra por palabra */
.line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.word{display:inline-block;transform:translateY(110%);transition:transform .95s var(--ease-out) var(--wd,0s)}
.is-in .word{transform:none}

/* Cita que se ilumina al pasar */
.fillq{font-family:var(--display);font-size:clamp(1.5rem,1rem + 2.4vw,3rem);line-height:1.28;max-width:20ch;margin-inline:auto;text-align:center}
.fillq .w{color:var(--ivory-ghost);transition:color .35s linear}
.fillq .w.on{color:var(--ivory)}
.fillq em{font-style:normal}
.fillq em .w.on{color:var(--gold)}

/* Red de seguridad: si el JS no corre, nada queda invisible */
.no-js [data-reveal],.no-js .word,.no-js .dg-node,.no-js .dg-logo,.no-js .dg-grid__i,
.no-js .dg-hub,.no-js .dg-hub__t{opacity:1!important;transform:none!important}
.no-js .ph--focus img{filter:none!important;transform:none!important;opacity:1!important}
.no-js .dg-spoke{stroke-dashoffset:0!important}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .word{transform:none!important}
  .ph--focus img{filter:none!important;transform:none!important}
  .hero__media img,
  .hero__media canvas{animation:none;transform:scale(1.02)}
  .fillq .w{color:var(--ivory)}
}

/* ═══ Nosotros ════════════════════════════════════════════ */
.about{display:grid;gap:clamp(2.5rem,5vw,4.5rem);grid-template-columns:1fr;align-items:start}
@media(min-width:960px){.about{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}}
.about__media{aspect-ratio:3/4}
/* El sticky solo cuando hay dos columnas. En una sola, la imagen
   se montaba encima del texto por ser un elemento posicionado. */
@media(min-width:960px){.about__media{position:sticky;top:120px}}
/* En móvil, primero el texto y después la imagen: se lee mejor. */
@media(max-width:959px){.about__media{order:2;margin-top:clamp(2rem,5vw,3rem)}}
.about__q{font-family:var(--display);font-size:clamp(1.5rem,1rem + 2vw,2.35rem);line-height:1.25;margin-bottom:1.75rem}

.stat__n sup{font-size:.45em;vertical-align:super;color:var(--gold-antique)}

/* ═══ Modelo ══════════════════════════════════════════════ */
.duo{display:grid;gap:1px;grid-template-columns:1fr;background:var(--hair-light);border-block:1px solid var(--hair-light)}
@media(min-width:820px){.duo{grid-template-columns:1fr 1fr}}
.duo__cell{background:var(--forest);padding:clamp(2.25rem,4.5vw,4rem);position:relative;overflow:hidden}
.duo__cell::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-out)}
.duo__cell:hover::after{transform:scaleX(1)}
.duo__icon{width:44px;height:44px;color:var(--gold);margin-bottom:1.75rem}
.duo__cell h3{font-size:clamp(1.375rem,1.1rem + 1vw,1.85rem);margin-bottom:1rem}
.duo__cell p{color:var(--ivory-dim);margin:0;font-weight:300}

/* ═══ Diagrama de arquitectura abierta ══════════════════ */
.diagram{
  display:grid;gap:clamp(2rem,4vw,4rem);grid-template-columns:1fr;align-items:center;
  padding-block:clamp(1rem,3vw,2.5rem);
}
@media(min-width:1000px){.diagram{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}}
.diagram__copy h3{margin-bottom:1.25rem}
.diagram__copy p{color:var(--ivory-dim);font-weight:300;margin:0;max-width:42ch}

.dg{width:100%;height:auto;overflow:hidden;display:block}
.dg-ring{fill:none;stroke:var(--hair-light);stroke-width:1}
.dg-spoke{
  fill:none;stroke:var(--sand);stroke-width:1.1;stroke-opacity:.42;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.1s var(--ease-out) calc(var(--i)*.075s);
}
.is-in .dg-spoke{stroke-dashoffset:0}
.dg-node{
  fill:var(--sand);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.2);
  transition:opacity .5s var(--ease) calc(.55s + var(--i)*.075s),
             transform .6s var(--ease-out) calc(.55s + var(--i)*.075s);
}
.is-in .dg-node{opacity:1;transform:scale(1)}
.dg-logo{
  opacity:0;
  transition:opacity .7s var(--ease) calc(.6s + var(--i)*.07s);
}
.is-in .dg-logo{opacity:.62}
.dg-logo:hover{opacity:1}

.dg-hub__disc{fill:var(--ink)}
.dg-hub__ring{fill:none;stroke:rgba(194,164,91,.5);stroke-width:1}
.dg-hub__mark{fill:none;stroke:var(--sand);stroke-width:1.2;stroke-opacity:.7}
.dg-hub__chev{fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linecap:round}
.dg-hub{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.82);
  transition:opacity .8s var(--ease),transform .9s var(--ease-out)}
.is-in .dg-hub{opacity:1;transform:scale(1)}
.dg-hub__t{
  font-family:var(--display);font-size:17px;fill:var(--sand);letter-spacing:.14em;
  text-transform:uppercase;opacity:0;transition:opacity .7s var(--ease) .4s;
}
.is-in .dg-hub__t{opacity:1}

/* En móvil las 12 etiquetas quedaban a 6px: ilegibles y apretadas.
   Se ocultan, el SVG se acerca al centro y los nombres se listan aparte. */
/* En teléfono el anillo de 14 logos deja cada uno en 39px.
   Se cierra el encuadre al núcleo y las marcas pasan a una
   rejilla donde sí se leen. */
.dg-strip{display:none}
/* En teléfono el anillo queda como un círculo vacío con puntos:
   mucho alto para no decir nada. Se deja solo el núcleo —el símbolo
   y la promesa— y las marcas pasan a la cinta. */
@media(max-width:820px){
  .dg-logos,.dg-ring,.dg-spokes,.dg-nodes{display:none}
  .dg{max-width:300px;margin-inline:auto}
  .dg-hub__t{font-size:34px}
  .dg-strip{display:block;margin-top:1.5rem;border-block:1px solid var(--hair-light)}
  .dg-strip .strip__track{animation-duration:46s}
  .dg-strip .strip__i{width:clamp(128px,36vw,168px)}
  .dg-strip .strip__i img{opacity:.8}
  .diagram{gap:1.5rem}
}
@media(prefers-reduced-motion:reduce){
  .dg-spoke{stroke-dashoffset:0!important}
  .dg-node,.dg-hub,.dg-hub__t{opacity:1!important;transform:none!important}
  .dg-logo{opacity:.7!important}
}

/* ═══ Ruptura full-bleed con cita ═════════════════════════ */
.break{position:relative;min-height:min(88vh,760px);display:grid;place-items:center;overflow:hidden;background:var(--abyss);isolation:isolate}
.break__media{position:absolute;inset:-12% 0;z-index:-1;will-change:transform}
.break__media .ph{position:absolute;inset:0}
.break::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,28,24,.8),rgba(20,28,24,.5) 45%,rgba(20,28,24,.88))}
.break .wrap{position:relative;z-index:1;text-align:center}

/* ═══ Tradicional vs independiente ════════════════════════ */
.versus{display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:1fr}
@media(min-width:860px){.versus{grid-template-columns:1fr 1fr}}
.vcard{padding:clamp(2rem,4vw,3rem);border:1px solid var(--hair-dark)}
.vcard--new{background:var(--green);color:var(--ivory);border-color:var(--green)}
.vcard__tag{font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--green-dim);margin-bottom:1.5rem;display:block}
.vcard--new .vcard__tag{color:var(--gold)}
.vcard h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.65rem);margin-bottom:1.75rem}
.vcard li{display:flex;gap:1rem;padding:1rem 0;border-top:1px solid var(--hair-dark);font-size:.9375rem;line-height:1.6}
.vcard--new li{border-color:var(--hair-light);color:var(--ivory-dim)}
.vcard li svg{width:17px;height:17px;flex:none;margin-top:.32em;opacity:.5}
.vcard--new li svg{color:var(--gold);opacity:1}

/* ═══ Propuesta de valor ══════════════════════════════════ */
.value{border-top:1px solid var(--hair-light)}
.vrow{display:grid;gap:.5rem clamp(1.5rem,4vw,4rem);align-items:start;grid-template-columns:auto 1fr;padding:clamp(1.75rem,3.5vw,2.75rem) 0;border-bottom:1px solid var(--hair-light);position:relative;isolation:isolate;transition:padding-left .6s var(--ease)}
@media(min-width:880px){.vrow{grid-template-columns:5.5rem minmax(0,.9fr) minmax(0,1.1fr);align-items:center}}
.vrow::before{content:"";position:absolute;inset:0 auto 0 0;width:0;background:rgba(194,164,91,.07);transition:width .7s var(--ease-out);z-index:-1}
.vrow:hover::before{width:100%}
.vrow:hover{padding-left:clamp(.75rem,2vw,1.75rem)}
.vrow__n{font-family:var(--display);font-size:1rem;color:var(--gold)}
.vrow h3{font-size:clamp(1.25rem,1.05rem + .9vw,1.65rem)}
.vrow p{color:var(--ivory-dim);margin:0;font-size:.9375rem;font-weight:300}

/* ═══ Soluciones · scroll horizontal fijado ═══════════════ */
.hs{position:relative;background:var(--ivory);color:var(--ink)}
.hs__pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.hs__head{padding-inline:var(--gut);max-width:var(--wrap);margin-inline:auto;width:100%;flex:none;padding-top:clamp(5rem,10vh,7rem)}
.hs__head h2{font-size:clamp(1.75rem,1.2rem + 2.4vw,3rem)}
.hs__viewport{flex:1;display:flex;align-items:center;overflow:hidden;min-height:0}
.hs__track{display:flex;gap:clamp(1rem,2vw,1.75rem);padding-inline:var(--gut);will-change:transform}
.hs__bar{flex:none;height:2px;background:var(--hair-dark);margin:0 var(--gut) clamp(2.5rem,5vh,4rem);position:relative;max-width:var(--wrap);width:calc(100% - 2*var(--gut));margin-inline:auto}
.hs__bar i{position:absolute;inset:0 auto 0 0;width:12%;background:var(--gold-antique);transform-origin:left}

.panel{flex:none;width:min(78vw,360px);background:#fff;border:1px solid var(--hair-dark);padding:clamp(1.75rem,2.6vw,2.4rem);display:flex;flex-direction:column;gap:.9rem;min-height:min(58vh,420px);transition:border-color .5s var(--ease),box-shadow .5s var(--ease)}
.panel:hover{border-color:var(--sand);box-shadow:0 24px 60px -34px rgba(30,42,36,.45)}
.panel__fam{font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-antique)}
.panel__icon{width:34px;height:34px;color:var(--gold-antique);margin-top:auto}
.panel h4{font-size:clamp(1.15rem,1rem + .5vw,1.35rem)}
.panel p{color:var(--green-dim);font-size:.9rem;line-height:1.6;margin:0}
.panel--intro{background:var(--green);color:var(--ivory);border-color:var(--green);justify-content:center}
.panel--intro h3{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);margin-bottom:.75rem}
.panel--intro p{color:var(--ivory-dim)}

/* En móvil: swipe nativo con snap, sin pin */
@media(max-width:900px),(prefers-reduced-motion:reduce){
  .hs{height:auto!important}
  .hs__pin{position:static;height:auto;padding-block:var(--sec)}
  .hs__head{padding-top:0}
  .hs__viewport{display:block;overflow:visible;padding-block:2rem}
  .hs__track{
    display:grid;grid-template-columns:1fr;gap:1rem;
    width:auto;transform:none!important;
    padding-inline:var(--gut);max-width:var(--wrap);margin-inline:auto;
  }
  .panel{width:auto;min-height:0}
  .panel--intro{order:-1}
  .panel__icon{margin-top:1rem}
  .hs__bar{display:none}
}
@media(min-width:620px) and (max-width:900px){
  .hs__track{grid-template-columns:1fr 1fr}
  .panel--intro{grid-column:1/-1}
}

/* ═══ Proceso ═════════════════════════════════════════════ */
.steps{display:grid}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.25rem clamp(1.5rem,3.5vw,3rem);padding:clamp(1.75rem,3vw,2.5rem) 0;border-top:1px solid var(--hair-light)}
@media(min-width:820px){.step{grid-template-columns:4.5rem minmax(0,.85fr) minmax(0,1.15fr);align-items:baseline}}
.step:last-child{border-bottom:1px solid var(--hair-light)}
.step__n{width:2.6rem;height:2.6rem;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:.9375rem;color:var(--gold)}
.step h3{font-size:clamp(1.15rem,1rem + .7vw,1.45rem)}
.step p{color:var(--ivory-dim);font-size:.9375rem;margin:0;font-weight:300}

.reassure{display:grid;gap:1rem 2.5rem;grid-template-columns:1fr;margin-top:clamp(2.5rem,5vw,4rem)}
@media(min-width:860px){.reassure{grid-template-columns:repeat(3,1fr)}}
.reassure li{display:flex;gap:.75rem;align-items:flex-start;font-size:.9375rem;color:var(--ivory-dim)}
.reassure svg{width:18px;height:18px;color:var(--gold);flex:none;margin-top:.3em}

/* ═══ Respaldo · Lakpa + custodios ════════════════════════ */
.backing{background:var(--abyss);position:relative;overflow:hidden}
.backing__glow{position:absolute;left:50%;top:-32%;width:min(130vw,1300px);aspect-ratio:1;transform:translateX(-50%);pointer-events:none;background:radial-gradient(circle,rgba(194,164,91,.22) 0%,rgba(194,164,91,.05) 38%,transparent 66%)}
.partner{text-align:center;max-width:64ch;margin-inline:auto;position:relative;z-index:1}
.partner__logo{
  display:inline-flex;align-items:flex-end;gap:1rem;padding:1.6rem 3rem;
  border:1px solid rgba(194,164,91,.34);margin-bottom:2.75rem;
  background:linear-gradient(180deg,rgba(244,242,230,.07),rgba(244,242,230,.02));
  box-shadow:0 0 60px -20px rgba(194,164,91,.3);
}
.partner__logo img{height:clamp(34px,4.4vw,50px);width:auto}
.partner__logo:has(img){padding:1.5rem 2.75rem}
.partner__logo b{font-family:var(--display);font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem);letter-spacing:.16em;font-weight:400;line-height:1}
.partner__logo span{font-size:.625rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);padding-bottom:.3rem}
.partner__legal{
  font-size:clamp(.875rem,.82rem + .18vw,.95rem);line-height:1.85;
  color:rgba(244,242,230,.74);margin:0;text-align:left;
  border-top:1px solid var(--hair-light);padding-top:2rem;
}
.partner__legal strong{color:var(--sand)}
.partner__legal a{color:var(--sand);border-bottom:1px solid rgba(214,199,165,.35)}

/* Cintillo de custodios · una sola cinta continua */
.custody{margin-top:clamp(3.5rem,7vw,5.5rem);position:relative;z-index:1}
.custody__lbl{text-align:center;font-size:.6875rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ivory-mute);margin-bottom:2.25rem}

.strip{
  --strip-fade:var(--ink);
  position:relative;overflow:hidden;
  border-block:1px solid var(--hair-light);
  padding-block:clamp(1.5rem,3vw,2.25rem);
  background:linear-gradient(180deg,rgba(244,242,230,.025),transparent);
}
.strip::before,.strip::after{
  content:"";position:absolute;top:0;bottom:0;width:14%;z-index:2;pointer-events:none;
}
.strip::before{left:0;background:linear-gradient(90deg,var(--strip-fade),transparent)}
.strip::after{right:0;background:linear-gradient(270deg,var(--strip-fade),transparent)}
.backing .strip{--strip-fade:var(--abyss)}
/* Sin animación CSS, sin translateZ(0) ni backface-visibility: esa
   combinación —capa forzada + traslado en porcentaje sobre un
   width:max-content— deja la capa en blanco en WebKit y ahí
   desaparecía la barra en iPhone. El movimiento lo pone el JS
   midiendo el ancho real en pixeles. */
.strip__track{display:flex;width:max-content;align-items:center}

.strip__i{
  flex:none;display:grid;place-items:center;
  width:clamp(150px,15vw,215px);padding-inline:clamp(1rem,2vw,1.75rem);
  position:relative;
}
.strip__i::after{
  content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:1px;height:34px;background:var(--hair-light);
}
.strip__i img{
  width:100%;height:auto;opacity:.46;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.strip__i:hover img{opacity:1;transform:scale(1.05)}

@media(prefers-reduced-motion:reduce){
  .strip{overflow-x:auto}
  .strip::before,.strip::after{display:none}
}

/* ═══ Diagnóstico ═════════════════════════════════════════ */
.grid6{display:grid;gap:1px;background:var(--hair-light);border:1px solid var(--hair-light);grid-template-columns:1fr}
@media(min-width:560px){.grid6{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid6{grid-template-columns:repeat(3,1fr)}}
.gcell{background:var(--green);padding:clamp(1.75rem,3vw,2.5rem);transition:background .5s var(--ease)}
.gcell:hover{background:var(--sage)}
.gcell h4{font-size:1.15rem;margin-bottom:.7rem;color:var(--sand)}
.gcell p{font-size:.875rem;color:var(--ivory-dim);margin:0;font-weight:300}

/* ═══ Contacto ════════════════════════════════════════════ */
.contact{display:grid;gap:clamp(2.5rem,6vw,5rem);grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.contact{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}}
.cdata{margin-top:clamp(2.5rem,5vw,3.5rem)}
.cdata li{padding:1.15rem 0;border-top:1px solid var(--hair-dark);display:grid;gap:.25rem}
.cdata li:last-child{border-bottom:1px solid var(--hair-dark)}
.cdata dt{font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--deep-sand)}
.cdata dd{margin:0;font-size:1.0625rem;color:var(--ink)}

.form{display:grid;gap:1.5rem}
.form__row{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media(min-width:620px){.form__row{grid-template-columns:1fr 1fr}}
.field{position:relative}
.field label{position:absolute;left:0;top:1rem;font-size:1rem;color:var(--green-dim);pointer-events:none;transform-origin:left;transition:transform .35s var(--ease),color .35s var(--ease)}
.field input,.field textarea,.field select{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--hair-dark);padding:1rem 0 .7rem;border-radius:0}
.field select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231E2A24' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .25rem center}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-bottom-color:var(--gold-antique)}
.field input:focus + label,.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,.field textarea:not(:placeholder-shown) + label{transform:translateY(-1.15rem) scale(.72);color:var(--gold-antique)}
.field--select label{transform:translateY(-1.15rem) scale(.72);color:var(--deep-sand)}
.field__err{display:none;font-size:.75rem;color:#9b3b2f;margin-top:.4rem}
.field.has-error input,.field.has-error textarea,.field.has-error select{border-bottom-color:#9b3b2f}
.field.has-error .field__err{display:block}
.form__consent{display:flex;gap:.75rem;align-items:flex-start;font-size:.8125rem;color:var(--green-dim);line-height:1.6}
.form__consent input{margin-top:.28em;accent-color:var(--green);width:16px;height:16px;flex:none}
.form__consent a{border-bottom:1px solid var(--hair-dark)}
.form__status{font-size:.875rem;margin:0;min-height:1.4em}
.form__status[data-state="ok"]{color:#2f6b4f}
.form__status[data-state="err"]{color:#9b3b2f}

/* ═══ Pie ═════════════════════════════════════════════════ */
.footer{background:var(--abyss);padding-block:clamp(4rem,8vw,6rem) 2.5rem}
.footer__top{display:grid;gap:clamp(2.5rem,5vw,4rem);grid-template-columns:1fr;padding-bottom:clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--hair-light)}
@media(min-width:820px){.footer__top{grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,.85fr))}}
.footer__logo img{height:46px;width:auto;margin-bottom:1.5rem}
.footer__tag{color:var(--ivory-mute);font-size:.9375rem;max-width:34ch;margin:0}
.footer h4{font-family:var(--body);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1.25rem;font-weight:500}
.footer li{padding:.4rem 0}
.footer li a,.footer address{font-size:.9375rem;color:var(--ivory-dim);font-style:normal;line-height:1.75}
.footer li a:hover{color:var(--ivory)}
.legal{padding-top:2.5rem}
.legal p{font-size:.8125rem;line-height:1.85;color:rgba(244,242,230,.58);max-width:100ch}
.legal__bar{display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;margin-top:2rem;font-size:.75rem;color:rgba(244,242,230,.4)}
.legal__bar a:hover{color:var(--ivory-dim)}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.on-ivory :focus-visible,.hs :focus-visible{outline-color:var(--gold-antique)}


/* ═══ Móvil: objetivos táctiles y respiro ════════════════ */
@media(max-width:900px){
  .cdata dd a,.footer li a,.footer address a,.legal__bar a{display:inline-block;padding-block:.4rem}
  .hero__cta .ulink{padding-block:.5rem}
  .nav__logo{display:inline-block;padding-block:.4rem}
  .drawer a{padding-block:.7rem}
  .partner__legal{font-size:.875rem;line-height:1.8}
  .diagram__copy p{max-width:none}
}
@media(max-width:880px){
  .vrow{grid-template-columns:1fr;gap:.55rem;padding-block:1.6rem}
  .vrow__n{font-size:.8125rem;letter-spacing:.16em}
  .vrow h3{font-size:1.3rem}
  .vrow:hover{padding-left:0}
  .step{grid-template-columns:1fr;gap:.75rem}
  .step__n{margin-bottom:.35rem}
}
@media(max-width:520px){
  .t-hero{font-size:clamp(2.05rem,8.2vw,2.6rem)}
  .hero{min-height:92svh}
}