/* ═══════════════════════════════════════════════════════════════
   CYREIX, CASTRO & ASOCS. — Consultoría Legal
   Sistema visual · Paleta derivada del logotipo (#031C3E / #B98D41)
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ───────────────────────────────────────────────── */
:root{
  /* Marca */
  --ink:#031C3E;
  --ink-2:#062748;
  --ink-3:#0B3459;
  --ink-deep:#010D1E;
  --ink-abyss:#00080F;

  --gold:#B98D41;
  --gold-400:#D0AC69;
  --gold-300:#E3CB9A;
  --gold-200:#F0E2C6;
  --gold-600:#9A7433;

  --bone:#FBF9F5;
  --bone-2:#F4F0E8;
  --bone-3:#E9E3D7;

  --txt:#122135;
  --muted:#5D6879;
  --muted-lt:rgba(251,249,245,.66);
  --line:rgba(3,28,62,.11);
  --line-lt:rgba(251,249,245,.14);

  /* Superficie «niebla»: gris azulado que reemplaza al azul profundo en las
     secciones de peso. Da seriedad sin oscurecer la página. */
  --mist:#E8EEF5;
  --mist-2:#DEE7F1;
  --mist-3:#F3F6FA;

  /* Colores relativos a la superficie. Los redefine cada isla oscura;
     todo lo demás hereda la versión clara. */
  --srf-txt:var(--ink);
  --srf-soft:var(--muted);
  --srf-faint:rgba(18,33,53,.5);
  --srf-line:rgba(3,28,62,.12);
  --srf-line-2:rgba(3,28,62,.22);
  --srf-acc:var(--gold-600);
  --srf-acc-2:var(--gold);
  --srf-panel:rgba(255,255,255,.66);
  --srf-panel-2:rgba(255,255,255,.9);

  /* Tipografía */
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Escala fluida */
  --fs-eyebrow:clamp(.68rem,.63rem + .2vw,.76rem);
  --fs-body:clamp(1rem,.96rem + .18vw,1.075rem);
  --fs-lead:clamp(1.06rem,1rem + .35vw,1.25rem);
  --fs-h3:clamp(1.25rem,1.14rem + .5vw,1.5rem);
  --fs-h2:clamp(2rem,1.5rem + 2.2vw,3.4rem);
  --fs-h1:clamp(2.4rem,1.6rem + 3.1vw,4.4rem);
  --fs-num:clamp(2.2rem,1.6rem + 2.4vw,3.4rem);

  /* Ritmo */
  --shell:1280px;
  --gap:clamp(1.5rem,1rem + 2.4vw,3.25rem);
  --sec-y:clamp(4.5rem,3rem + 7vw,9.5rem);
  --r-s:10px;
  --r-m:16px;
  --r-l:24px;

  /* Sombras */
  --sh-s:0 2px 8px rgba(3,28,62,.05), 0 10px 28px -14px rgba(3,28,62,.16);
  --sh-m:0 4px 14px rgba(3,28,62,.06), 0 26px 56px -28px rgba(3,28,62,.28);
  --sh-l:0 10px 30px rgba(3,28,62,.1), 0 50px 90px -40px rgba(3,28,62,.42);

  /* Curvas */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,.05,.28,1);

  --header-h:78px;
}

/* Islas oscuras: el «detalle serio» de la página. Sólo estas cuatro piezas
   conservan el azul profundo; el resto del sitio es claro. */
.ticker,.ctaband,.footer,.card--accent,.badge-quote{
  --srf-txt:var(--bone);
  --srf-soft:rgba(251,249,245,.68);
  --srf-faint:rgba(251,249,245,.42);
  --srf-line:rgba(251,249,245,.12);
  --srf-line-2:rgba(251,249,245,.26);
  --srf-acc:var(--gold-300);
  --srf-acc-2:var(--gold-400);
  --srf-panel:rgba(251,249,245,.06);
  --srf-panel-2:rgba(1,13,30,.45);
}

/* ── 2. RESET ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--sans);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.68;
  color:var(--txt);
  background:var(--bone);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
/* <picture> no genera caja: el <img> hereda el layout del contenedor real */
picture{display:contents}
/* Compensa la altura del header fijo en los saltos por ancla */
section[id],main[id]{scroll-margin-top:calc(var(--header-h) + 14px)}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--gold);color:#fff}

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

.skip-link{
  position:fixed;top:-100px;left:16px;z-index:999;
  background:var(--ink);color:var(--bone);
  padding:.75rem 1.15rem;border-radius:0 0 var(--r-s) var(--r-s);
  font-size:.85rem;font-weight:600;transition:top .3s var(--ease);
}
.skip-link:focus{top:0}

/* Iconografía base */
.ico,.card__ico svg,.ben__ico svg,.way__ico svg,.callcard__icons svg,.fab svg{
  width:1em;height:1em;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.card__ico svg,.ben__ico svg{width:100%;height:100%;stroke-width:1.35}
/* Marcas de terceros: glifo sólido, no de trazo (WhatsApp) */
.ico--brand,.way__ico svg.ico--brand,.fab svg.ico--brand{fill:currentColor;stroke:none}
/* El glifo sólido llega al borde del viewBox; los de trazo van insetados.
   Compensación óptica para que pesen igual al lado de los demás. */
.btn .ico--brand{font-size:.96rem}
.way__ico svg.ico--brand{width:.88em;height:.88em}
.fab svg.ico--brand{width:1.75rem;height:1.75rem}

/* ── 3. LAYOUT ───────────────────────────────────────────────── */
.shell{width:min(100% - 2.5rem,var(--shell));margin-inline:auto}
@media (max-width:640px){.shell{width:min(100% - 2rem,var(--shell))}}

.section{position:relative;padding-block:var(--sec-y)}
.section--bone{background:var(--bone-2)}
/* Superficie de peso, en claro: gris azulado + un lavado dorado arriba */
.section--mist{background:var(--mist);color:var(--txt);isolation:isolate}
.section--mist::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(80% 55% at 15% 0%,rgba(185,141,65,.14),transparent 62%),
    radial-gradient(75% 65% at 92% 100%,rgba(255,255,255,.95),transparent 66%);
}
.texture{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("../img/textura-marmol.webp") center/cover no-repeat;
  opacity:.2;mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 10%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 10%,transparent 78%);
}
.texture--soft{opacity:.12}

/* ── 4. TIPOGRAFÍA ───────────────────────────────────────────── */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:var(--fs-eyebrow);font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-600);margin-bottom:1.15rem;
}
/* Los modificadores «--light» ya no significan «sobre fondo oscuro»:
   significan «tomá el color que corresponda a esta superficie». */
.eyebrow--light{color:var(--srf-acc)}
.eyebrow__dot{
  width:22px;height:1px;background:currentColor;flex:none;opacity:.75;
  transform-origin:left;animation:dotIn .9s var(--ease) both;
}
@keyframes dotIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.h2{
  font-family:var(--serif);
  font-size:var(--fs-h2);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.015em;
  color:var(--ink);
  text-wrap:balance;
}
.h2 em{
  font-style:italic;font-weight:500;
  color:var(--gold-600);
  position:relative;
}
.h2--light{color:var(--srf-txt)}
.h2--light em{color:var(--srf-acc)}

.section__head{max-width:56rem;margin-bottom:clamp(2.5rem,1.6rem + 3vw,4.5rem)}
.section__head--center{margin-inline:auto;text-align:center}
.section__head--center .eyebrow{justify-content:center}
.section__lead{
  margin-top:1.35rem;font-size:var(--fs-lead);
  color:var(--muted);max-width:46rem;line-height:1.62;
}
.section__head--center .section__lead{margin-inline:auto}
.section__lead--light{color:var(--srf-soft)}

.prose{color:var(--muted);max-width:38rem}
/* El .h2 no trae margen propio: lo pone el contenedor. Cuando la prosa va
   directamente pegada al titular (estudio, mediación, exterior) hace falta
   declararlo acá o el texto se apoya sobre la última línea del título. */
.h2 + .prose{margin-top:clamp(1.4rem,1.1rem + .9vw,2.1rem)}
.prose p+p{margin-top:1.1rem}
.prose strong{color:var(--ink);font-weight:700}
.prose--light{color:var(--srf-soft)}
.prose--light strong{color:var(--srf-txt)}

/* ── TEXTO JUSTIFICADO ────────────────────────────────────────
   Pedido de la clienta: todos los párrafos de la web van justificados.
   Se lista selector por selector en vez de hacer un `p{}` global para no
   tocar los rótulos de una línea (eyebrows, claims, pies centrados), donde
   justificar no hace nada o directamente rompe la composición centrada.
   El guionado es obligatorio: sin partir palabras, el justificado abre ríos
   de blanco — sobre todo en las columnas angostas (tarjetas, beneficios). */
.prose p,
.hero__lead,
.section__lead,
.card__txt,
.step__p,
.pstep__p,
.qa__body p,
.ben p,
.tz__note,
.footer__claim,
.footer__disclaimer{
  text-align:justify;
  text-justify:inter-word;
  -webkit-hyphens:auto;hyphens:auto;
}
/* Los encabezados centrados siguen centrados: ahí el justificado dejaría el
   titular al medio y el copete alineado a la izquierda. */
.section__head--center .section__lead{text-align:center;hyphens:manual}
/* En pantallas angostas ni el guionado alcanza: todo vuelve a bandera. */
@media (max-width:560px){
  .prose p,.hero__lead,.section__lead,.card__txt,.step__p,.pstep__p,
  .qa__body p,.ben p,.tz__note,.footer__claim,.footer__disclaimer{
    text-align:left;
  }
  .section__head--center .section__lead{text-align:center}
}

/* ── 5. BOTONES ──────────────────────────────────────────────── */
.btn{
  --bg:var(--ink);--fg:var(--bone);--bd:transparent;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.6rem;border-radius:999px;
  font-size:.9rem;font-weight:600;letter-spacing:.015em;
  color:var(--fg);background:var(--bg);
  border:1px solid var(--bd);
  overflow:hidden;isolation:isolate;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
  will-change:transform;
}
.btn .ico{font-size:1.05rem;transition:transform .45s var(--ease)}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--hover,var(--gold));
  transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:hover{box-shadow:var(--sh-m)}
.btn:hover .ico{transform:translateX(4px)}
.btn:hover .ico--brand{transform:scale(1.09)}  /* una marca no se desplaza, respira */
.btn:active{--ms:.975}

.btn--gold{--bg:var(--gold);--fg:#fff;--hover:var(--ink)}
.btn--ink{--bg:var(--ink);--fg:var(--bone);--hover:var(--gold)}
.btn--outline{
  --bg:transparent;--fg:currentColor;--bd:currentColor;--hover:var(--gold);
  opacity:.92;
}
.btn--outline:hover{--fg:#fff;color:#fff;border-color:var(--gold);opacity:1}
.btn--ghost{
  --bg:transparent;--fg:var(--ink);--bd:var(--line);--hover:var(--ink);
}
.btn--ghost:hover{color:var(--bone);border-color:var(--ink)}
.btn--sm{padding:.7rem 1.2rem;font-size:.82rem}
.btn--lg{padding:1.1rem 2rem;font-size:.95rem}

/* ── 6. HEADER ───────────────────────────────────────────────── */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:120;pointer-events:none;
}
.scroll-progress i{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--gold-600),var(--gold-300));
  box-shadow:0 0 14px rgba(185,141,65,.6);
}

.site-header{
  position:fixed;inset:0 0 auto;z-index:100;
  transition:transform .55s var(--ease),background .45s var(--ease),
             box-shadow .45s var(--ease),backdrop-filter .45s var(--ease);
}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  height:var(--header-h);
}
.site-header[data-state="top"]{background:transparent}
.site-header[data-state="scrolled"]{
  background:rgba(251,249,245,.86);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 1px 0 var(--line),0 18px 40px -34px rgba(3,28,62,.6);
  --header-h:66px;
}
.site-header[data-state="hidden"]{transform:translateY(-105%)}

/* Marca */
.brand{position:relative;z-index:2;display:inline-flex;align-items:center;gap:.75rem;flex:none}
.brand__mark{width:44px;height:44px;flex:none;transition:transform .6s var(--ease)}
.brand:hover .brand__mark{transform:rotate(-4deg) scale(1.06)}
.mark{width:100%;height:100%;overflow:visible}
.mark__ink{fill:var(--ink)}
.mark__stroke{stroke:var(--ink)}
.mark__gold{fill:var(--gold)}
.brand__type{display:flex;flex-direction:column;line-height:1}
.brand__name{
  font-family:var(--serif);font-size:1.52rem;font-weight:600;
  letter-spacing:.005em;color:var(--ink);white-space:nowrap;
}
.brand__name em{font-style:italic;color:var(--gold)}
.brand__sub{
  font-size:.63rem;font-weight:600;letter-spacing:.32em;
  text-transform:uppercase;color:var(--gold-600);margin-top:.38rem;
}
/* El hero ahora es claro: la marca conserva su color en todos los estados.
   Sólo se refuerza el trazo del nav mientras el header es transparente. */
.site-header[data-state="top"] .nav__list a{color:var(--txt)}
.site-header[data-state="top"] .btn--ghost{--bd:rgba(3,28,62,.22)}

/* Nav */
.nav__list{display:flex;align-items:center;gap:clamp(1rem,.3rem + 1.4vw,2rem)}
.nav__list a{
  position:relative;font-size:.845rem;font-weight:500;
  color:var(--muted);padding-block:.4rem;
  transition:color .35s var(--ease);
}
.nav__list a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__list a:hover{color:var(--ink)}
.nav__list a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__list a[aria-current="true"]{color:var(--ink)}
.nav__list a[aria-current="true"]::after{transform:scaleX(1)}
.nav__foot{display:none}

.header__actions{position:relative;z-index:2;display:flex;align-items:center;gap:.75rem;flex:none}

.burger{
  display:none;width:44px;height:44px;position:relative;
  border-radius:50%;transition:background .35s var(--ease);
}
.burger span{
  position:absolute;left:50%;width:20px;height:1.5px;background:var(--ink);
  border-radius:2px;transform:translateX(-50%);
  transition:transform .45s var(--ease),opacity .3s var(--ease),width .45s var(--ease);
}
.burger span:nth-child(1){top:18px}
.burger span:nth-child(2){top:25px;width:14px}
body.nav-open .burger span:nth-child(1){top:21.5px;transform:translateX(-50%) rotate(45deg)}
body.nav-open .burger span:nth-child(2){top:21.5px;width:20px;transform:translateX(-50%) rotate(-45deg)}

/* ── 7. HERO ─────────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  padding-top:calc(var(--header-h) + clamp(2rem,1rem + 4vw,4.5rem));
  padding-bottom:clamp(5rem,3rem + 6vw,8rem);
  background:
    radial-gradient(120% 90% at 78% 12%,#FFFFFF 0%,transparent 58%),
    linear-gradient(165deg,#FBF9F5 0%,#EDF2F8 56%,#DFE9F4 100%);
  color:var(--txt);
  overflow:hidden;
  isolation:isolate;
}
.hero__gl{
  position:absolute;inset:0;width:100%;height:100%;z-index:-2;
  opacity:0;transition:opacity 1.4s var(--ease);
}
.hero__gl.is-ready{opacity:1}
/* Vela clara: apoya la lectura del texto sin apagar el mármol de fondo */
.hero__veil{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to right,rgba(251,249,245,.93) 0%,rgba(251,249,245,.58) 44%,transparent 74%),
    linear-gradient(to top,rgba(251,249,245,.85),transparent 42%);
}
.hero::after{
  content:"";position:absolute;inset:auto 0 0;height:140px;z-index:-1;
  background:linear-gradient(to top,var(--bone),transparent);
  opacity:.8;
}

.hero__inner{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:center;gap:clamp(2rem,1rem + 4vw,5rem);
  width:min(100% - 2.5rem,var(--shell));
}

/* El eyebrow del hero pesa más: es la bajada institucional (consultoría
   legal + jurisdicciones), no un rótulo suelto. */
.hero__eyebrow{
  align-items:flex-start;          /* si entra en dos renglones, el guión
                                      queda pegado al primero, no al medio */
  font-size:clamp(.82rem,.72rem + .4vw,1.02rem);
  letter-spacing:.13em;
  line-height:1.5;
  margin-bottom:1.45rem;
}
.hero__eyebrow .eyebrow__dot{width:30px;margin-top:.72em}
/* Renglón 1: la actividad. Renglón 2: dónde. Se separan siempre, así el
   corte no queda librado al ancho de la ventana. */
.hero__eyebrow-txt{display:block;max-width:34rem}
.hero__eyebrow-txt b{
  display:block;font-weight:inherit;
  font-size:.88em;letter-spacing:.115em;opacity:.86;
  margin-top:.22em;
}

/* Anuncio para quienes consultan desde afuera. La clienta tiene familia y
   amigos en el exterior y no quería que ese servicio quedara sólo al fondo
   de la página: acá va, junto a las jurisdicciones, y baja a la sección. */
.hero__abroad{
  display:inline-flex;align-items:center;gap:.55rem;
  margin-bottom:1.5rem;padding:.5rem .95rem .5rem .72rem;
  border:1px solid rgba(185,141,65,.55);border-radius:999px;
  background:rgba(185,141,65,.09);
  font-size:.86rem;line-height:1.2;letter-spacing:.005em;
  color:var(--ink);text-transform:none;
  transition:background .35s var(--ease),border-color .35s var(--ease),gap .35s var(--ease);
}
.hero__abroad b{font-weight:700;color:var(--gold-600)}
.hero__abroad-ico{display:grid;place-items:center;width:19px;height:19px;flex:none;color:var(--gold-600)}
.hero__abroad-ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5}
.hero__abroad .ico{font-size:1rem;color:var(--gold-600);transition:transform .4s var(--ease)}
.hero__abroad:hover{background:rgba(185,141,65,.17);border-color:var(--gold);gap:.75rem}
.hero__abroad:hover .ico{transform:translateX(3px)}
/* En pantallas chicas se parte en dos renglones y el pill deja de serlo. */
@media (max-width:560px){
  .hero__abroad{
    flex-wrap:wrap;border-radius:var(--r-s,14px);
    row-gap:.15rem;font-size:.8rem;
  }
  .hero__abroad .ico{margin-left:auto}
}

.hero__title{
  font-family:var(--serif);
  font-size:var(--fs-h1);
  font-weight:600;line-height:1.01;letter-spacing:-.022em;
  color:var(--ink);margin-block:.15em .5em;
  text-wrap:balance;
}
.hero__title em{font-style:italic;font-weight:500;color:var(--gold-600)}
/* Segundo renglón del titular: sigue siendo H1, pero cede jerarquía
   para que «sucesiones» quede como el remate visual. */
.hero__title-sm{
  display:block;
  font-size:.52em;font-weight:500;letter-spacing:-.005em;
  line-height:1.15;color:var(--muted);
  margin-top:.28em;
}

/* La frase de posicionamiento pasa a segundo plano: acompaña al titular,
   ya no compite con él. */
.hero__claim{
  font-family:var(--serif);
  font-size:clamp(1.15rem,1.02rem + .5vw,1.5rem);
  font-style:italic;font-weight:500;line-height:1.3;
  color:var(--ink);opacity:.82;
  max-width:32rem;
  padding-left:1.05rem;
  border-left:2px solid var(--gold-400,var(--gold));
  margin-bottom:1.35rem;
}
.hero__title em .word>span{
  background-image:linear-gradient(100deg,var(--gold-600) 5%,var(--gold) 52%,var(--gold-400) 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* split por palabras */
.word{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.14em;margin-bottom:-.14em;
}
.js .word>span{
  display:inline-block;
  transform:translateY(108%) rotate(2.5deg);
  opacity:0;
  transition:transform 1s var(--ease),opacity .8s var(--ease);
  transition-delay:calc(var(--i,0) * 55ms);
}
.js [data-split].is-visible .word>span{transform:none;opacity:1}

.hero__lead{
  font-size:var(--fs-lead);color:var(--muted);
  max-width:34rem;line-height:1.65;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.9rem}
.hero__cta .btn--outline{color:var(--ink);border-color:rgba(3,28,62,.24)}

.hero__trust{
  display:flex;flex-wrap:wrap;gap:.7rem 1.75rem;margin-top:2.2rem;
  padding-top:1.5rem;border-top:1px solid var(--line);
}
.hero__trust li{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.815rem;font-weight:500;letter-spacing:.01em;
  color:var(--muted);
}
.hero__trust .ico{font-size:1.05rem;color:var(--gold)}

/* Encuadre editorial */
.hero__visual{
  position:relative;justify-self:center;width:100%;max-width:430px;
  animation:portalIn 1.5s var(--ease) .3s both;
}
@media (min-width:981px) and (max-height:860px){
  .hero__visual{max-width:370px}
}
@keyframes portalIn{
  from{opacity:0;transform:translateY(36px)}
  to{opacity:1;transform:none}
}
/* Marco dorado desplazado — profundidad sin recurso gráfico obvio */
.hero__visual::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  top:30px;left:30px;right:-30px;bottom:-30px;
  border:1px solid rgba(154,116,51,.35);
  border-radius:3px;
}
.hero__visual::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  right:-30px;bottom:-30px;width:74px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold));
}
.portal{
  position:relative;z-index:1;aspect-ratio:4/5;
  border-radius:3px;overflow:hidden;
  transform-style:preserve-3d;
  box-shadow:0 44px 90px -46px rgba(3,28,62,.6),0 0 0 1px rgba(3,28,62,.08);
}
.portal img{
  width:100%;height:100%;object-fit:cover;object-position:52% 40%;
  filter:saturate(.8) contrast(1.03) brightness(1.03);
  transform:scale(1.05);
  transition:transform 1.6s var(--ease);
}
.portal:hover img{transform:scale(1.1)}
/* Filete interior fino */
.portal__frame{
  position:absolute;inset:13px;
  border:1px solid rgba(251,249,245,.42);
  border-radius:1px;pointer-events:none;z-index:2;
}
/* Sólo el peso justo para que el filete y la tarjeta floten sobre la foto */
.portal__glow{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(to top,rgba(3,28,62,.42),rgba(3,28,62,0) 52%),
    radial-gradient(70% 50% at 72% 12%,rgba(255,255,255,.24),transparent 70%);
}

.float-card{
  position:absolute;z-index:3;
  display:flex;flex-direction:column;gap:.3rem;
  padding:.95rem 1.15rem;max-width:250px;
  border-radius:8px;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(3,28,62,.1);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 22px 44px -24px rgba(3,28,62,.42);
  animation:cardIn 1s var(--ease) both;
}
.float-card--a{left:-13%;top:20%;animation-delay:.95s}
.float-card--b{right:-11%;bottom:11%;animation-delay:1.15s}
@keyframes cardIn{
  from{opacity:0;transform:translate(0,22px) scale(.94)}
  to{opacity:1;transform:translate(var(--fx,0px),var(--fy,0px))}
}
.float-card__k{
  font-size:.6rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-600);
}
.float-card__v{font-size:.8rem;line-height:1.45;color:var(--txt);font-weight:500}

.hero__scroll{
  position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
  font-size:.62rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(18,33,53,.5);z-index:3;
  transition:color .4s var(--ease);
}
.hero__scroll:hover{color:var(--gold-600)}
.hero__scroll-line{
  width:1px;height:52px;background:linear-gradient(to bottom,transparent,rgba(3,28,62,.32));
  position:relative;overflow:hidden;
}
.hero__scroll-line::after{
  content:"";position:absolute;inset-inline:0;top:-52px;height:52px;
  background:linear-gradient(to bottom,transparent,var(--gold));
  animation:scrollDot 2.4s var(--ease-io) infinite;
}
@keyframes scrollDot{0%{transform:translateY(0)}60%,100%{transform:translateY(104px)}}
@media (max-height:720px){.hero__scroll{display:none}}

/* ── 8. TICKER ───────────────────────────────────────────────── */
.ticker{
  background:var(--ink);color:var(--bone);
  border-block:1px solid rgba(251,249,245,.08);
  padding-block:.95rem;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker__track{
  display:flex;align-items:center;gap:1.6rem;width:max-content;
  animation:tick 46s linear infinite;
}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker span{
  font-family:var(--serif);font-size:1.28rem;font-style:italic;
  color:rgba(251,249,245,.72);white-space:nowrap;
}
.ticker i{color:var(--gold);font-size:.5rem;font-style:normal;opacity:.85}
@keyframes tick{to{transform:translateX(-50%)}}

/* ── 9. EL ESTUDIO ───────────────────────────────────────────── */
.estudio__grid{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2.5rem,1.5rem + 4vw,5.5rem);align-items:center;
}
/* Este titular es el más largo del sitio (cuatro renglones). Baja un punto
   respecto de la escala general para no comerse la sección. */
.estudio__copy .h2{font-size:clamp(1.85rem,1.4rem + 1.95vw,3rem)}
.estudio__media{position:relative;padding-bottom:5rem}
.frame{
  position:relative;overflow:hidden;border-radius:var(--r-m);
  background:var(--bone-3);box-shadow:var(--sh-m);
}
.frame img{width:100%;height:100%;object-fit:cover}
.frame--tall{aspect-ratio:3/4}
.frame--wide{
  position:absolute;right:-6%;bottom:0;width:62%;aspect-ratio:4/3;
  border:6px solid var(--bone);z-index:2;
}
.section--bone .frame--wide{border-color:var(--bone-2)}
.frame--wide figcaption{
  position:absolute;inset:auto 0 0;padding:1.1rem .9rem .8rem;
  background:linear-gradient(to top,rgba(3,28,62,.9),transparent);
  font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-300);text-align:center;
}
/* La foto de mediación es apaisada (16:9) y la escena es la mesa completa:
   con 5/4 se recortaban las personas de los extremos. 16/10 deja la
   composición casi intacta y mantiene altura suficiente en la columna. */
.frame--big{aspect-ratio:16/10}

.stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.6rem 1.5rem;margin-top:2.8rem;
  padding-top:2.2rem;border-top:1px solid var(--line);
}
.stats li{display:flex;flex-direction:column;gap:.15rem}
.stats__n{
  font-family:var(--serif);font-size:var(--fs-num);font-weight:600;
  line-height:1;color:var(--ink);
  display:flex;align-items:baseline;
}
.stats li span{font-size:.815rem;color:var(--muted);line-height:1.45;max-width:15rem}

/* ── 10. SERVICIOS ───────────────────────────────────────────── */
.cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,.6rem + 1vw,1.5rem);
  /* Proporción de la foto de cada tarjeta. Va cuadrada porque las fotos vienen
     compuestas en 1:1: recortarlas a apaisado parte justo el motivo (la llave,
     la silla de ruedas, la maqueta). Centralizado acá para cambiarlo de una. */
  --card-ar:1/1;
}
.card{
  --card-pad:clamp(1.6rem,1.2rem + 1vw,2.15rem);
  position:relative;display:flex;flex-direction:column;
  padding:var(--card-pad);
  background:var(--bone);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  overflow:hidden;isolation:isolate;
  transform-style:preserve-3d;
}
.card::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(160deg,rgba(185,141,65,.09),transparent 55%);
  opacity:0;transition:opacity .6s var(--ease);
}
.card:hover{
  --ty:-6px;
  box-shadow:var(--sh-l);
  border-color:rgba(185,141,65,.42);
}
.card:hover::before{opacity:1}
/* ── FOTO DE LA TARJETA ───────────────────────────────────────
   Pedido de la clienta: una foto pegada arriba de cada tarjeta, «que tenga
   sentido con cada una». Sale del padding con margen negativo para llegar al
   borde; el redondeo se lo recorta la propia tarjeta (overflow:hidden).
   Las seis fotos las mandó ella y ya vienen como una serie: mismo formato
   cuadrado, misma luz, misma paleta de roble claro y azul marino. Por eso el
   tratamiento es leve —— una baja de saturación corta y un velo de tinta suave,
   apenas lo necesario para amarrarlas a la marca y para que el número blanco
   tenga sobre qué apoyarse. Desaturarlas más sería desperdiciarlas. */
.card__media{
  position:relative;
  margin:calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 1.3rem;
  aspect-ratio:var(--card-ar,1/1);
  overflow:hidden;background:var(--ink-2);
}
.card__media img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:saturate(.74) contrast(1.03) brightness(.97);
  transform:scale(1.02);
  transition:transform 1.2s var(--ease),filter .7s var(--ease);
}
.card:hover .card__media img{
  transform:scale(1.07);
  filter:saturate(1) contrast(1.03) brightness(1.01);
}
.card__media::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,28,62,.34),rgba(3,28,62,.04) 42%,rgba(3,28,62,.16));
  mix-blend-mode:multiply;
}
/* La foto se funde con la tarjeta en el borde de abajo: sin corte seco, la
   imagen entra en el papel en vez de quedar apoyada arriba como una etiqueta. */
.card__media::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:33%;z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(251,249,245,0),var(--bone));
}
.card--accent .card__media::after{
  background:linear-gradient(180deg,rgba(3,28,62,0),var(--ink));
}
.card__num{
  position:absolute;top:1.2rem;right:1.5rem;
  font-family:var(--serif);font-size:2.6rem;font-weight:600;
  color:var(--ink);opacity:.07;line-height:1;
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.card:hover .card__num{opacity:.13;transform:translateY(-3px)}
/* Con foto, el número queda encima de la imagen: pasa a hueso y sube de
   opacidad, porque la tinta sobre el velo oscuro no se vería. La sombra suave
   es por las fotos con ventana al fondo (comercial, análisis), donde el ángulo
   superior derecho queda casi blanco y el número se perdía. */
.card:has(.card__media) .card__num{
  z-index:3;color:var(--bone);opacity:.5;
  text-shadow:0 1px 14px rgba(3,28,62,.55);
}
.card:has(.card__media):hover .card__num{opacity:.72}
.card__ico{
  width:46px;height:46px;color:var(--gold);margin-bottom:1.35rem;
  display:grid;place-items:center;
  transition:transform .6s var(--ease),color .4s var(--ease);
}
/* Con foto arriba el ícono ya no necesita tanto aire propio: baja de tamaño y
   se acerca al título, para que la tarjeta no gane altura de más. */
.card:has(.card__media) .card__ico{width:38px;height:38px;margin-bottom:1rem}
.card:hover .card__ico{transform:translateY(-3px) scale(1.06);color:var(--gold-600)}
/* El título del área tiene que despegarse del cuerpo: sube un punto sobre la
   escala h3 y cierra con un filete dorado corto, al modo editorial. El cuerpo
   baja de tamaño y de tono para que la distancia se lea sola. */
/* El título de cada área va en dorado, no en tinta: es el pedido explícito de
   la clienta («cambiarle el color, que sean llamativas»). Se usa el dorado
   profundo —no el claro— para que a 23-29 px siga siendo legible sobre crema. */
.card__title{
  font-family:var(--serif);
  font-size:clamp(1.44rem,1.24rem + .82vw,1.82rem);
  font-weight:600;letter-spacing:-.015em;
  line-height:1.1;color:var(--gold-600);margin-bottom:1rem;
}
.card__title::after{
  content:"";display:block;
  width:38px;height:3px;margin-top:.85rem;
  background:var(--gold);
  transition:width .5s var(--ease);
}
.card:hover .card__title::after{width:60px}
.card__txt{font-size:.875rem;color:var(--muted);line-height:1.62}

/* La clienta pidió que los servicios «se hagan notar». Se resuelve por peso
   tipográfico, no por recuadros: el ítem pasa a tinta plena y a un rombo
   dorado. Nada de cajas ni de filetes entre renglones — eso lee a tabla. */
.card__foot{
  display:flex;flex-direction:column;flex:1;
  margin-top:1.4rem;
}
.card__list{display:flex;flex-direction:column;gap:.62rem}
.card__list li{
  position:relative;padding-left:1.35rem;
  font-size:.865rem;font-weight:500;color:var(--ink);line-height:1.45;
}
.card__list li::before{
  content:"";position:absolute;left:.05rem;top:.62em;
  width:5px;height:5px;transform:rotate(45deg);
  background:var(--gold);
}
/* Ancla inferior: el enlace queda al pie de todas las tarjetas y el filete
   convierte el aire sobrante en margen, no en hueco. */
.card__link{
  display:inline-flex;align-items:center;gap:.45rem;
  margin-top:auto;padding-top:1.4rem;
  border-top:1px solid var(--line);
  font-size:.815rem;font-weight:700;letter-spacing:.02em;color:var(--ink);
  transition:color .35s var(--ease),gap .35s var(--ease);
}
.card__link .ico{font-size:1rem;color:var(--gold);transition:transform .4s var(--ease)}
.card__link:hover{color:var(--gold-600);gap:.7rem}
.card__link:hover .ico{transform:translateX(3px)}

.card--accent{background:var(--ink);border-color:transparent}
.card--accent .card__title{color:var(--gold-300)}
.card--accent .card__title::after{background:var(--gold-400)}
.card--accent .card__txt{color:rgba(251,249,245,.68)}
.card--accent .card__list li{color:var(--bone)}
.card--accent .card__list li::before{background:var(--gold-400)}
.card--accent .card__link{border-top-color:rgba(251,249,245,.18)}
.card--accent .card__num{color:var(--bone);opacity:.11}
.card--accent .card__ico{color:var(--gold-400)}
.card--accent .card__link{color:var(--gold-300)}
.card--accent .card__link:hover{color:#fff}
.card--accent::before{background:linear-gradient(160deg,rgba(185,141,65,.28),transparent 60%)}

/* Las áreas van en dos bloques: patrimonio por un lado, personas por otro.
   Es una instrucción explícita de la clienta, no una decisión de maqueta. */
.areas{display:flex;flex-direction:column;gap:clamp(2.75rem,1.5rem + 3.5vw,4.75rem)}
/* Encabezado de cada bloque de áreas. La clienta lo quería «más grande y
   llamativo»: pasa de rótulo a titular, con un tramo dorado macizo a la
   izquierda que lo ancla y el filete fino que sigue hasta el margen. */
.group-t{
  display:flex;align-items:center;gap:1.25rem;
  margin-bottom:clamp(1.6rem,1.15rem + 1vw,2.3rem);
  font-family:var(--serif);font-weight:600;
  font-size:clamp(1.5rem,1.22rem + 1.25vw,2.15rem);
  letter-spacing:-.014em;
  line-height:1.15;color:var(--ink);
}
.group-t span{flex:none}
.group-t::before{
  content:"";flex:none;width:42px;height:3px;background:var(--gold);
}
.group-t::after{content:"";flex:1;height:1px;background:var(--line)}
.areas__note{
  margin-top:clamp(2.25rem,1.5rem + 2vw,3.25rem);
  padding-top:clamp(1.5rem,1rem + 1.4vw,2.15rem);
  border-top:1px solid var(--line);
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.02rem,.94rem + .35vw,1.24rem);
  color:var(--muted);text-align:center;
}

/* ── 11. ANÁLISIS INTEGRAL (scrollytelling) ──────────────────── */
.scrolly{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,1rem + 4vw,5rem);align-items:start;
}
.scrolly__media{
  position:sticky;top:calc(var(--header-h) + 4vh);
  display:flex;gap:1.25rem;align-items:stretch;
}
.scrolly__stack{
  position:relative;flex:1;aspect-ratio:4/5;
  border-radius:var(--r-l);overflow:hidden;
  box-shadow:0 36px 78px -46px rgba(3,28,62,.55);
  background:var(--bone-3);
  /* Capa propia. Dentro de un contenedor pegajoso, varios navegadores
     móviles no repintan el fundido de las fotos mientras se baja: la
     imagen recién aparecía al volver a subir. Promoviendo la pila a
     capa de composición el cambio de opacidad ya no depende de eso. */
  transform:translateZ(0);
}
.scrolly__img{
  position:absolute;inset:0;
  opacity:0;
  clip-path:inset(0 0 0 0);
  transform:scale(1.08) translateZ(0);
  backface-visibility:hidden;
  will-change:opacity,transform;
  transition:opacity 1s var(--ease),transform 1.6s var(--ease);
}
.scrolly__img img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) brightness(1.02) contrast(1.02)}
.scrolly__img.is-active{opacity:1;transform:scale(1) translateZ(0)}
.scrolly__frame{
  position:absolute;inset:16px;border:1px solid rgba(251,249,245,.45);
  border-radius:calc(var(--r-l) - 8px);pointer-events:none;z-index:3;
}
.scrolly__stack::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(3,28,62,.32),transparent 52%);
}
.scrolly__bar{
  width:2px;background:rgba(3,28,62,.12);border-radius:2px;overflow:hidden;flex:none;
}
.scrolly__bar i{
  display:block;width:100%;height:calc(var(--p,0) * 100%);
  background:linear-gradient(to bottom,var(--gold-400),var(--gold-600));
  transition:height .45s var(--ease);
}

.scrolly__steps{display:flex;flex-direction:column}
.step{
  padding-block:clamp(3rem,2rem + 6vh,7rem);
  transition:opacity .7s var(--ease);
}
/* Sobre claro el texto atenuado necesita más cuerpo que sobre oscuro */
.js .step{opacity:.42}
.step:first-child{padding-top:0}
.step.is-current{opacity:1}
.step__n{
  display:inline-block;font-family:var(--serif);font-size:1rem;font-weight:600;
  letter-spacing:.1em;color:var(--gold-600);margin-bottom:1rem;
  position:relative;padding-left:2.6rem;
}
.step__n::before{
  content:"";position:absolute;left:0;top:50%;width:2rem;height:1px;
  background:var(--gold);transform:scaleX(.35);transform-origin:left;
  transition:transform .7s var(--ease);
}
.step.is-current .step__n::before{transform:scaleX(1)}
.step__t{
  font-family:var(--serif);font-size:clamp(1.5rem,1.2rem + 1.3vw,2.3rem);
  font-weight:600;line-height:1.12;color:var(--ink);margin-bottom:.85rem;
  letter-spacing:-.01em;
}
/* El justificado de este párrafo se define con el resto en la sección 4. */
.step__p{color:var(--muted);line-height:1.7;max-width:34rem}

/* ── 12. SPLIT (mediación / exterior) ────────────────────────── */
.split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.5rem,1.5rem + 4vw,5.5rem);align-items:center;
}
.split--reverse .split__copy{order:1}
.split--reverse .split__media{order:2}
.split__media{position:relative}

.badge-quote{
  position:absolute;left:-4%;bottom:-2.2rem;z-index:3;
  max-width:290px;padding:1.5rem 1.6rem 1.6rem;
  background:var(--ink);color:var(--bone);
  border-radius:var(--r-m);box-shadow:var(--sh-l);
}
.badge-quote__mark{
  font-family:var(--serif);font-size:3.4rem;line-height:.6;
  color:var(--gold);display:block;margin-bottom:.4rem;
}
.badge-quote p{
  font-family:var(--serif);font-size:1.28rem;font-style:italic;
  line-height:1.32;color:var(--bone);
}

.checks{display:flex;flex-direction:column;gap:.85rem;margin-top:2rem}
.checks li{
  display:flex;align-items:flex-start;gap:.75rem;
  font-size:.92rem;color:var(--muted);line-height:1.5;
}
.checks .ico{
  font-size:1.05rem;color:var(--gold);flex:none;margin-top:.22em;
  stroke-width:2;
}
.checks--light li{color:var(--srf-soft)}
.checks--light .ico{color:var(--srf-acc-2)}
.split__copy .btn{margin-top:2.2rem}

/* ── 13. EXTERIOR ────────────────────────────────────────────── */
.exterior{overflow:hidden}
.orbit{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.75}
.orbit span{
  position:absolute;top:50%;left:50%;border:1px solid rgba(3,28,62,.09);
  border-radius:50%;transform:translate(-50%,-50%);
  animation:spin 60s linear infinite;
}
.orbit span:nth-child(1){width:520px;height:520px}
.orbit span:nth-child(2){width:820px;height:820px;animation-duration:95s;animation-direction:reverse}
.orbit span:nth-child(3){width:1180px;height:1180px;animation-duration:140s}
.orbit span::before{
  content:"";position:absolute;top:-3px;left:50%;width:5px;height:5px;
  border-radius:50%;background:var(--gold);
  box-shadow:0 0 12px rgba(185,141,65,.6);
}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.exterior .split{position:relative;z-index:1}

.callcard{
  border-radius:var(--r-l);overflow:hidden;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(3,28,62,.1);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 36px 78px -46px rgba(3,28,62,.55);
  transform-style:preserve-3d;
}
.callcard__screen{position:relative;aspect-ratio:16/10;overflow:hidden}
.callcard__screen img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.88) brightness(1.02);
  transition:transform 1.4s var(--ease);
}
.callcard:hover .callcard__screen img{transform:scale(1.05)}
.callcard__rec{
  position:absolute;top:.95rem;left:.95rem;
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.35rem .7rem;border-radius:999px;
  background:rgba(1,13,30,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bone);
}
.callcard__rec i{
  width:6px;height:6px;border-radius:50%;background:#ef4444;
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
.callcard__bar{
  display:flex;align-items:center;gap:.7rem;
  padding:.95rem 1.15rem;border-top:1px solid rgba(3,28,62,.1);
}
.callcard__dot{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none;
  box-shadow:0 0 10px var(--c)}
.callcard__label{font-size:.8rem;font-weight:600;color:var(--txt);flex:1}
.callcard__icons{display:flex;gap:.6rem;font-size:1.05rem;color:rgba(18,33,53,.45)}

.tz{
  margin-top:1.5rem;padding:1.5rem 1.6rem;
  border:1px solid rgba(3,28,62,.1);border-radius:var(--r-m);
  background:rgba(255,255,255,.7);
}
.tz__t{
  display:block;font-size:.66rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-600);margin-bottom:1rem;
}
.tz ul{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem 1.2rem}
.tz li{
  display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  padding-bottom:.55rem;border-bottom:1px dashed rgba(3,28,62,.16);
}
.tz li b{font-size:.85rem;font-weight:600;color:var(--txt)}
.tz li span{font-family:var(--serif);font-size:1.05rem;color:var(--gold-600)}
.tz__note{margin-top:1rem;font-size:.72rem;line-height:1.5;color:rgba(18,33,53,.55)}

/* ── 14. MÉTODO ──────────────────────────────────────────────── */
.path{
  position:relative;padding-top:1rem;
  /* El riel va de centro a centro de nodo, no de borde a borde de la sección */
  --path-gap:clamp(1.25rem,.5rem + 1.6vw,2.5rem);
  --path-col:calc((100% - 3 * var(--path-gap)) / 4);
  --path-rail:calc(100% - var(--path-col));
}
.path::before,.path::after{
  content:"";position:absolute;z-index:0;
  left:27px;top:calc(1rem + 27px);height:1px;
}
.path::before{width:var(--path-rail);background:var(--line)}
.path::after{
  background:linear-gradient(90deg,var(--gold-600),var(--gold-300));
  width:calc(var(--path-rail) * var(--p,0));
  transition:width .6s var(--ease);
  box-shadow:0 0 12px rgba(185,141,65,.5);
}
.path__list{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--path-gap);position:relative;
}
.pstep{display:flex;flex-direction:column}
.pstep__node{
  position:relative;z-index:1;
  width:54px;height:54px;border-radius:50%;flex:none;
  display:grid;place-items:center;margin-bottom:1.5rem;
  background:var(--bone-2);border:1px solid var(--line);
  transition:background .6s var(--ease),border-color .6s var(--ease),transform .6s var(--ease);
}
.pstep__node i{
  font-family:var(--serif);font-style:normal;font-size:1.35rem;font-weight:600;
  color:var(--ink);transition:color .5s var(--ease);
}
.pstep.is-visible .pstep__node{
  background:var(--ink);border-color:var(--ink);transform:scale(1.02);
}
.pstep.is-visible .pstep__node i{color:var(--gold-300)}
.pstep__t{
  font-family:var(--serif);font-size:1.4rem;font-weight:600;line-height:1.18;
  color:var(--ink);margin-bottom:.55rem;
}
.pstep__p{font-size:.9rem;color:var(--muted);line-height:1.6}

/* ── 15. BENEFICIOS ──────────────────────────────────────────── */
.bens{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(2rem,1.2rem + 2vw,3.25rem) clamp(1.5rem,1rem + 1.6vw,2.75rem);
}
.ben{position:relative;padding-top:1.5rem;border-top:1px solid var(--line)}
.ben::before{
  content:"";position:absolute;top:-1px;left:0;height:1px;width:0;
  background:var(--gold);transition:width .9s var(--ease) .1s;
}
.ben.is-visible::before{width:100%}
.ben__ico{
  display:block;width:32px;height:32px;flex:none;
  color:var(--gold);margin-bottom:1.15rem;
  transition:transform .5s var(--ease);
}
.ben:hover .ben__ico{transform:translateY(-4px)}
.ben h3{
  font-family:var(--serif);font-size:1.32rem;font-weight:600;
  line-height:1.2;color:var(--ink);margin-bottom:.5rem;
}
.ben p{font-size:.9rem;color:var(--muted);line-height:1.6;max-width:24rem}

/* ── 16. BANDA CTA ───────────────────────────────────────────── */
.ctaband{position:relative;padding-block:clamp(4rem,2.5rem + 5vw,7rem);color:var(--bone);isolation:isolate;overflow:hidden}
.ctaband__bg{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(115deg,rgba(3,28,62,.94),rgba(1,13,30,.9)),
    url("../img/textura-marmol.webp") center/cover no-repeat;
}
.ctaband__bg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 90% at 85% 20%,rgba(185,141,65,.25),transparent 65%);
}
.ctaband__inner{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(2rem,1rem + 3vw,4rem);align-items:center;
}
.ctaband .h2{font-size:clamp(1.8rem,1.3rem + 2.1vw,3.15rem)}
.ctaband__actions{display:flex;flex-direction:column;gap:.85rem;align-items:stretch}
.ctaband__actions .btn{width:100%}
.ctaband__actions .btn--outline{color:rgba(251,249,245,.9);border-color:rgba(251,249,245,.3)}

/* ── 17. FAQ ─────────────────────────────────────────────────── */
.faq__grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2.5rem,1.5rem + 4vw,5.5rem);align-items:start;
}
.faq__aside{position:sticky;top:calc(var(--header-h) + 3rem)}
.faq__aside .btn{margin-top:2rem}
.faq__list{display:flex;flex-direction:column}

.qa{border-bottom:1px solid var(--line)}
.qa:first-child{border-top:1px solid var(--line)}
.qa summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding-block:1.5rem;cursor:pointer;list-style:none;
  font-family:var(--serif);font-size:clamp(1.15rem,1rem + .6vw,1.45rem);
  font-weight:600;line-height:1.3;color:var(--ink);
  transition:color .35s var(--ease);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--gold-600)}
.qa__x{
  position:relative;width:20px;height:20px;flex:none;margin-top:.35em;
}
.qa__x::before,.qa__x::after{
  content:"";position:absolute;top:50%;left:50%;
  width:15px;height:1.5px;background:var(--gold);border-radius:2px;
  transform:translate(-50%,-50%);
  transition:transform .45s var(--ease),opacity .3s var(--ease);
}
.qa__x::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa[open] .qa__x::after{transform:translate(-50%,-50%) rotate(0);opacity:0}
.qa__body>p{
  color:var(--muted);font-size:.945rem;line-height:1.72;
  max-width:44rem;padding:0 2rem 1.65rem 0;
}
/* Apertura animada donde el navegador lo permite; si no, abre directo */
@supports selector(::details-content){
  .qa::details-content{
    block-size:0;overflow:hidden;opacity:0;
    transition:block-size .5s var(--ease),opacity .4s var(--ease),content-visibility .5s allow-discrete;
  }
  .qa[open]::details-content{block-size:auto;opacity:1}
}
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
}

/* ── 18. CONTACTO ────────────────────────────────────────────── */
.contacto__grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2.5rem,1.5rem + 4vw,5rem);align-items:start;
}
.contacto__ways{display:flex;flex-direction:column;gap:.7rem;margin-top:2.5rem}
.way{
  display:flex;align-items:center;gap:1rem;
  padding:1rem 1.2rem;border-radius:var(--r-m);
  border:1px solid rgba(3,28,62,.1);
  background:rgba(255,255,255,.62);
  transition:border-color .45s var(--ease),background .45s var(--ease),transform .45s var(--ease);
}
.way:hover{border-color:rgba(185,141,65,.55);background:rgba(255,255,255,.95);transform:translateX(4px)}
.way__ico{
  width:38px;height:38px;flex:none;border-radius:50%;
  display:grid;place-items:center;font-size:1.15rem;
  color:var(--gold-600);border:1px solid rgba(154,116,51,.3);
}
.way__txt{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1}
.way__txt b{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-600)}
/* «anywhere» partía el mail en cualquier letra. Con «break-word» sólo se
   corta si no hay más remedio, y el <wbr> del marcado dice dónde: antes de
   la arroba. El dato tiene que poder leerse de un vistazo. */
.way__txt span{font-size:.9rem;color:var(--txt);overflow-wrap:break-word}
.way__arrow{font-size:1.1rem;color:rgba(18,33,53,.35);transition:transform .45s var(--ease)}
.way:hover .way__arrow{transform:translateX(4px);color:var(--gold-600)}

.contacto__note{
  display:flex;gap:.8rem;margin-top:2rem;padding-top:1.5rem;
  border-top:1px solid var(--line);
}
.contacto__note .ico{font-size:1.3rem;color:var(--gold);flex:none;margin-top:.1rem}
.contacto__note p{font-size:.82rem;line-height:1.6;color:var(--muted)}

/* Formulario */
.form{
  padding:clamp(1.5rem,1rem + 2vw,2.6rem);
  border-radius:var(--r-l);
  background:rgba(255,255,255,.74);
  border:1px solid rgba(3,28,62,.1);
  box-shadow:var(--sh-s);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.form__row+.form__row{margin-top:1.15rem}
.form__row--2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem}
.field{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.field label{
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}
.field label b{color:var(--gold-600)}
.field input,.field textarea,.select select{
  width:100%;padding:.85rem 1rem;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(3,28,62,.16);
  border-radius:var(--r-s);
  color:var(--txt);font-size:.92rem;
  transition:border-color .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
}
.field textarea{resize:vertical;min-height:120px;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:rgba(18,33,53,.38)}
.field input:focus,.field textarea:focus,.select select:focus{
  outline:none;border-color:var(--gold);background:#fff;
  box-shadow:0 0 0 3px rgba(185,141,65,.18);
}
.select{position:relative}
.select select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.6rem}
.select select option{background:#fff;color:var(--ink);font-weight:400}
/* Los grupos del desplegable repiten la división patrimonial / personal */
.select select optgroup{background:#fff;color:var(--gold-600);font-weight:700;font-style:normal}
.select .ico{
  position:absolute;right:1rem;top:50%;transform:translateY(-50%);
  font-size:1.1rem;color:var(--gold-600);pointer-events:none;
}
.field__err{
  display:none;font-size:.75rem;color:#A62B2B;font-weight:600;
}
.field.has-error input,.field.has-error textarea,.field.has-error select{
  border-color:rgba(166,43,43,.6);
}
.field.has-error .field__err{display:block}
.field__err--check{margin-top:-.4rem}
.check.has-error+.field__err--check{display:block}

.check{
  display:flex;align-items:flex-start;gap:.7rem;
  margin-top:1.35rem;cursor:pointer;
}
.check input{position:absolute;opacity:0;width:0;height:0}
.check__box{
  width:20px;height:20px;flex:none;margin-top:.15rem;border-radius:5px;
  border:1px solid rgba(3,28,62,.28);
  display:grid;place-items:center;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.check__box svg{
  width:12px;height:12px;fill:none;stroke:var(--ink);stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:0;transform:scale(.5);
  transition:opacity .25s var(--ease),transform .35s var(--ease);
}
.check input:checked+.check__box{background:var(--gold);border-color:var(--gold)}
.check input:checked+.check__box svg{opacity:1;transform:scale(1)}
.check input:focus-visible+.check__box{outline:2px solid var(--gold-400);outline-offset:3px}
.check__txt{font-size:.82rem;line-height:1.5;color:var(--muted)}
.check__txt b{color:var(--gold-600)}
.check.has-error .check__box{border-color:rgba(166,43,43,.75)}

.form__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.9rem}
.form__actions .btn--outline{color:var(--ink);border-color:rgba(3,28,62,.24)}
.form__hint{
  margin-top:1rem;font-size:.8rem;color:var(--gold-600);min-height:1.2em;
  opacity:0;transform:translateY(-4px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.form__hint.is-on{opacity:1;transform:none}

/* ── 19. FOOTER ──────────────────────────────────────────────── */
.footer{background:var(--ink-deep);color:var(--bone);padding-top:clamp(3.5rem,2.5rem + 3vw,5.5rem)}
.footer__top{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  gap:clamp(2.5rem,1.5rem + 3vw,4.5rem);
  padding-bottom:clamp(2.5rem,2rem + 2vw,4rem);
}
.brand--footer .mark__ink{fill:var(--bone)}
.brand--footer .mark__stroke{stroke:var(--bone)}
.brand--footer .brand__name{color:var(--bone)}
.brand--footer .brand__sub{color:var(--gold-300)}
.brand--footer .brand__mark{width:44px;height:44px}
.footer__claim{
  margin-top:1.5rem;font-size:.885rem;line-height:1.65;
  color:rgba(251,249,245,.55);max-width:24rem;
}
/* Dos columnas, no tres: el contacto se mudó a la columna ancha de la marca.
   El mail entero mide 326 px y una columna de esta grilla nunca pasa de 206:
   quedaba partido al medio de la palabra («…cyreixcas / tro@gmail.com»). */
.footer__nav{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.5rem,1rem + 2vw,3rem);
}
.footer__contact{margin-top:2.25rem;max-width:24rem}
.footer__nav h4,.footer__contact h4{
  font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-300);margin-bottom:1.15rem;
}
.footer__nav ul,.footer__contact ul{display:flex;flex-direction:column;gap:.65rem}
.footer__nav a,.footer__contact a,.footer__muted{
  font-size:.865rem;color:rgba(251,249,245,.6);line-height:1.4;
  overflow-wrap:break-word;transition:color .3s var(--ease);
}
.footer__nav a:hover,.footer__contact a:hover{color:var(--gold-300)}
/* El teléfono es un dato, no una frase: el navegador lo cortaba después del
   guión («+54 9 11 4173-» / «5586») y se leía como dos números distintos. */
.footer__contact a.js-wa{white-space:nowrap}
.footer__muted{color:rgba(251,249,245,.38)}

.footer__legal{
  padding-block:1.75rem;border-top:1px solid rgba(251,249,245,.1);
  display:flex;flex-direction:column;gap:.9rem;
}
.footer__disclaimer{font-size:.755rem;line-height:1.6;color:rgba(251,249,245,.4);max-width:62rem}
.footer__copy{font-size:.755rem;color:rgba(251,249,245,.33)}

/* ── 20. FAB WHATSAPP ────────────────────────────────────────── */
.fab{
  position:fixed;right:clamp(1rem,.5rem + 1vw,1.75rem);bottom:clamp(1rem,.5rem + 1vw,1.75rem);
  z-index:90;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;font-size:1.6rem;
  color:#fff;background:#1FA855;
  box-shadow:0 10px 26px -8px rgba(31,168,85,.7),0 4px 10px rgba(0,0,0,.2);
  transition:transform .6s var(--ease),box-shadow .4s var(--ease);
}
.js .fab{transform:scale(0) rotate(-30deg)}
.js .fab.is-on{transform:scale(1) rotate(0)}
.fab:hover{box-shadow:0 16px 34px -8px rgba(31,168,85,.8)}
.fab:hover,.js .fab.is-on:hover{transform:scale(1.07)}
.fab::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(31,168,85,.6);
  animation:ripple 2.6s var(--ease-io) infinite;
}
@keyframes ripple{0%{transform:scale(1);opacity:.8}70%,100%{transform:scale(1.65);opacity:0}}
.fab__tip{
  position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(8px);
  white-space:nowrap;padding:.5rem .85rem;border-radius:999px;
  background:var(--ink);color:var(--bone);font-size:.76rem;font-weight:600;
  opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.fab:hover .fab__tip{opacity:1;transform:translateY(-50%) translateX(0)}
@media (max-width:640px){.fab__tip{display:none}}

/* ── 21. MOTION: REVEAL · PARALLAX · TILT · MAGNETISMO ───────── */
/* Una sola transformación compuesta para que ningún efecto pise a otro.
   --rev entrada · --py parallax · --ty hover · --rx/--ry inclinación 3D
   --mx/--my magnetismo del cursor · --ms pulsación                        */
.btn,[data-reveal],[data-tilt]{
  transform:
    translate3d(
      var(--mx,0px),
      calc(var(--rev,0px) + var(--py,0px) + var(--ty,0px) + var(--my,0px)),
      0)
    perspective(1200px)
    rotateX(var(--rx,0deg))
    rotateY(var(--ry,0deg))
    scale(var(--ms,1));
}
.js .magnetic.is-magnet{transition:transform .14s linear}
.js [data-reveal]{
  opacity:0;--rev:26px;
  transition:
    opacity .95s var(--ease) var(--d,0s),
    transform .95s var(--ease) var(--d,0s),
    box-shadow .6s var(--ease),
    border-color .6s var(--ease);
  will-change:opacity,transform;
}
.js [data-reveal].is-visible{opacity:1;--rev:0px}
[data-tilt]:not([data-reveal]){
  transition:transform .5s var(--ease),box-shadow .6s var(--ease);
}
/* Respuesta inmediata mientras el puntero recorre la pieza */
.js [data-tilt].is-tilting{transition:transform .1s linear}
.js [data-tilt].is-untilting{transition:transform .65s var(--ease)}
[data-parallax],[data-float]{will-change:transform}

/* ── 22. RESPONSIVE ──────────────────────────────────────────── */
@media (max-width:1100px){
  .nav__list{gap:1rem}
  .nav__list a{font-size:.8rem}
  /* Marca ampliada: entre 980 y 1100px el nav sigue visible, así que la
     bajamos un punto para que no se pisen. */
  .brand__name{font-size:1.32rem}
  .brand__mark{width:40px;height:40px}
  .float-card--a{left:-6%}
  .float-card--b{right:-4%}
}

@media (max-width:1024px){
  .cards,.bens{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:980px){
  :root{--header-h:70px}

  /* Nav móvil */
  .burger{display:block}
  .header__actions .btn{display:none}
  .nav{
    position:fixed;inset:0;z-index:1;
    display:flex;flex-direction:column;justify-content:center;gap:2.5rem;
    padding:calc(var(--header-h) + 2rem) 2rem 3rem;
    background:var(--ink);
    clip-path:circle(0% at calc(100% - 46px) 34px);
    transition:clip-path .8s var(--ease);
    overflow-y:auto;
  }
  body.nav-open .nav{clip-path:circle(150% at calc(100% - 46px) 34px)}
  body.nav-open{overflow:hidden}

  /* Con el menú abierto, el panel es azul profundo y la marca y la cruz de
     cerrar están dibujadas en ese mismo azul: quedaban invisibles y no había
     forma visible de cerrar el menú. Se invierten a claro, con un retraso
     que las hace aparecer cuando el círculo ya las cubrió.               */
  .brand__name,.brand__sub,.burger span,.mark__ink,.mark__stroke{
    transition:color .3s var(--ease),background .3s var(--ease),
               fill .3s var(--ease),stroke .3s var(--ease);
  }
  body.nav-open .brand__name{color:var(--bone)}
  body.nav-open .brand__sub{color:var(--gold-300)}
  body.nav-open .mark__ink{fill:var(--bone)}
  body.nav-open .mark__stroke{stroke:var(--bone)}
  body.nav-open .burger span{background:var(--bone)}
  .nav__list{flex-direction:column;align-items:flex-start;gap:.15rem}
  .nav__list li{overflow:hidden}
  .nav__list a{
    display:block;font-family:var(--serif);font-size:clamp(1.9rem,1.2rem + 3.6vw,2.8rem);
    font-weight:600;color:var(--bone)!important;padding-block:.32rem;line-height:1.15;
    transform:translateY(105%);opacity:0;
    transition:transform .8s var(--ease),opacity .6s var(--ease),color .3s var(--ease);
    transition-delay:calc(var(--i,0)*45ms);
  }
  body.nav-open .nav__list a{transform:none;opacity:1}
  .nav__list a::after{display:none}
  .nav__list a:hover{color:var(--gold-300)!important}
  .nav__foot{
    display:flex;flex-direction:column;gap:.6rem;
    padding-top:2rem;border-top:1px solid rgba(251,249,245,.14);
    opacity:0;transform:translateY(14px);
    transition:opacity .7s var(--ease) .35s,transform .7s var(--ease) .35s;
  }
  body.nav-open .nav__foot{opacity:1;transform:none}
  .nav__phone{font-family:var(--serif);font-size:1.6rem;color:var(--gold-300)}
  .nav__mail{font-size:.85rem;color:rgba(251,249,245,.6);overflow-wrap:break-word}

  /* Hero */
  .hero{min-height:auto;padding-top:calc(var(--header-h) + 3.5rem);padding-bottom:4.5rem}
  .hero__inner{grid-template-columns:1fr;gap:3.5rem}
  .hero__visual{max-width:420px;margin-inline:auto}
  .hero__lead{max-width:38rem}
  .hero__scroll{display:none}

  /* Bloques */
  .estudio__grid,.split,.faq__grid,.contacto__grid,.ctaband__inner{grid-template-columns:1fr}
  .split--reverse .split__copy,.split--reverse .split__media{order:0}
  .faq__aside{position:static}
  .estudio__media{order:2;padding-bottom:0}
  .frame--wide{position:relative;right:auto;bottom:auto;width:100%;margin-top:1rem;border-width:0}
  .frame--tall{aspect-ratio:16/11}
  .badge-quote{position:relative;left:auto;bottom:auto;margin-top:-2.5rem;margin-left:1rem;max-width:320px}
  .ctaband__actions{flex-direction:row;flex-wrap:wrap}
  .ctaband__actions .btn{width:auto;flex:1 1 220px}
  .path__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 1.5rem}
  .path::before,.path::after{display:none}

  /* El pie se apila acá y no en 640: en tablet, con marca y enlaces al lado,
     cada columna quedaba en 112 px y cada área de práctica ocupaba 3 o 4
     líneas. Apilado, los enlaces reciben el ancho completo de la pantalla. */
  .footer__top{grid-template-columns:1fr}
  .footer__contact{margin-top:2rem}
}

/* Scrollytelling apilado. Corta en 900 y no en 760 para que el iPad vertical
   (768/810/834) también lo reciba: en dos columnas a ese ancho la foto queda
   diminuta y el texto en una columna de ~300 px, ilegible. */
@media (max-width:900px){
  .scrolly{grid-template-columns:1fr;gap:1.5rem}
  .scrolly__media{top:calc(var(--header-h) + 8px);padding-block:.75rem;background:var(--mist);z-index:5}
  /* Banda opaca detrás de la foto pegajosa, de borde a borde de la pantalla.
     Se estira exactamente el margen del .shell (1.25rem, 1rem por debajo de
     640px): con -50vw sobresalía media pantalla de cada lado y, aunque el
     body lo recorta, el documento quedaba más ancho que el viewport y en
     algunos navegadores móviles la página se podía desplazar de costado. */
  .scrolly__media::before{
    content:"";position:absolute;inset:-1rem -1.25rem;background:var(--mist);z-index:-1;
  }
  /* El tope de altura es para la tablet: a 860 px de ancho, 16/10 daría una
     foto de 537 px que se comería media pantalla estando pegada arriba. */
  .scrolly__stack{aspect-ratio:16/10;flex:none;width:100%;max-height:42svh}
  /* En una pantalla chica se recorre mucho más rápido: con el fundido de
     1 s el cambio se leía como retraso. Acá tiene que sentirse inmediato. */
  .scrolly__img{transition:opacity .5s var(--ease),transform .8s var(--ease)}
  /* El indicador de avance pasa de hilo vertical al costado a línea
     horizontal bajo la foto: apilado, un bar vertical de 2 px no se lee. */
  .scrolly__media{flex-direction:column;gap:.55rem}
  .scrolly__bar{width:100%;height:2px}
  .scrolly__bar i{
    width:calc(var(--p,0) * 100%);height:100%;
    background:linear-gradient(to right,var(--gold-400),var(--gold-600));
    transition:width .45s var(--ease);
  }
  .step{padding-block:2.5rem;opacity:.55}
  .step:first-child{padding-top:1.5rem}
}

@media (max-width:640px){
  /* Acá el .shell pasa a 1rem de margen: la banda tiene que acompañarlo. */
  .scrolly__media::before{inset:-1rem -1rem}
  .cards,.bens{grid-template-columns:1fr}
  /* A una columna la tarjeta ocupa todo el ancho y un cuadrado sería casi una
     pantalla de foto por área. Se recorta a 4:3, que baja la altura sin comerse
     el motivo —— apaisado del todo sí lo partiría. */
  .cards{--card-ar:4/3}
  .brand__name{font-size:1.18rem}
  .brand__sub{font-size:.54rem;letter-spacing:.28em}
  .brand__mark{width:36px;height:36px}
  .stats{grid-template-columns:1fr 1fr;gap:1.4rem 1rem}
  .stats li span{font-size:.775rem}
  .form__row--2{grid-template-columns:1fr}
  /* Una sola columna: en dos, cada lista quedaba en 171 px, «Sucesiones y
     planificación patrimonial» se partía en dos líneas y las columnas
     quedaban desparejas (4 ítems contra 7). A pantalla completa entran
     todas las áreas en una línea. */
  .footer__nav{grid-template-columns:1fr;gap:2rem}
  .tz ul{grid-template-columns:1fr}
  .path__list{grid-template-columns:1fr;gap:0}
  .pstep{
    display:grid;grid-template-columns:54px 1fr;gap:0 1.15rem;
    padding-bottom:2rem;position:relative;
  }
  .pstep::before{
    content:"";position:absolute;left:26px;top:54px;bottom:0;width:1px;
    background:linear-gradient(to bottom,var(--gold),transparent);
    opacity:.4;
  }
  .pstep:last-child::before{display:none}
  .pstep__node{margin-bottom:0;grid-row:span 2}
  .pstep__t{margin-top:.5rem}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  .float-card{max-width:200px;padding:.75rem .9rem}
  .float-card--a{left:-4%;top:10%}
  .float-card--b{right:-4%;bottom:6%}
  .float-card__v{font-size:.72rem}
  .badge-quote{margin-left:0;margin-top:-1.5rem}
  .ticker span{font-size:1.05rem}
  .form__actions .btn{width:100%}
  .qa summary{gap:1rem}
  .qa__body>p{padding-right:0}
}

@media (max-width:400px){
  /* El nombre del estudio ES la identidad (la clienta no se muestra): en el
     celular más común no puede desaparecer del encabezado. Se sacrifica la
     bajada «Consultoría Legal», que igual se repite en el pie: por eso la
     regla está acotada a la cabecera y no toca la marca del pie, donde el
     ancho sobra. */
  .site-header .brand__sub{display:none}
  .site-header .brand__name{font-size:.95rem}
  .site-header .brand{gap:.55rem}
}

/* ── 23. MOVIMIENTO REDUCIDO ─────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .js [data-reveal],.js .word>span{opacity:1!important;--rev:0px;transform:none!important}
  .js .step{opacity:1}
  .js .fab{transform:none!important}
  .orbit span::before{display:none}
  .ticker__track{animation:none}
}

/* ── 24. IMPRESIÓN ───────────────────────────────────────────── */
@media print{
  .site-header,.fab,.hero__gl,.hero__scroll,.ticker,.scroll-progress{display:none!important}
  .section--mist,.footer,.ctaband{background:#fff!important;color:#000!important}
  .h2--light,.step__t{color:#000!important}
  .card--accent,.badge-quote{background:#fff!important;color:#000!important;border:1px solid #999!important}
  [data-reveal]{opacity:1!important;transform:none!important}
}