:root{
  --bone:#F4F2EC;
  --bone-2:#FBFAF7;
  --paper:#FFFFFF;
  --ink:#0B0D11;
  --ink-soft:#575E6B;
  --ink-faint:#9AA1AD;
  --line:#E4E1D9;
  --line-soft:#EDEBE4;
  --azul:#4B7DDF;
  --cielo:#48ABD7;
  --deep:#050A1E;
  --band:#0A0C10;
  --danger:#B93B30;
  --on-dark:#FFFFFF;
  --on-dark-soft:#B9C6E8;
  --shadow:0 1px 2px rgba(11,13,17,.04), 0 12px 32px -12px rgba(11,13,17,.10);
  --r-lg:26px; --r-md:18px; --r-sm:12px;
  --pad:clamp(20px,4vw,44px);
  --maxw:1180px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bone:#0A0C11;
    --bone-2:#0F131A;
    --paper:#141922;
    --ink:#F1F0EA;
    --ink-soft:#A3AAB8;
    --ink-faint:#6B7280;
    --line:#242A34;
    --line-soft:#1C212A;
    --band:#171D26;
    --danger:#F08578;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -18px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --bone:#0A0C11;
  --bone-2:#0F131A;
  --paper:#141922;
  --ink:#F1F0EA;
  --ink-soft:#A3AAB8;
  --ink-faint:#6B7280;
  --line:#242A34;
  --line-soft:#1C212A;
  --band:#171D26;
  --danger:#F08578;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -18px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Figtree","Helvetica Neue",Arial,sans-serif;font-weight:400;letter-spacing:-.032em;margin:0;text-wrap:balance;line-height:1.06}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--azul);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
/* OJO: una sección que combine .wrap con su propia clase NUNCA debe usar el
   atajo "padding:", porque borra el padding lateral de .wrap y el contenido
   queda pegado al borde de la pantalla. Usa padding-top / padding-bottom. */

/* ---------- utility type ---------- */
.eyebrow{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--ink-faint);
  display:inline-flex;align-items:center;gap:8px;
}
.eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--azul)}
/* La marca se escribe siempre "Legalco.", con L mayúscula, el resto en
   minúsculas y el punto final. Este span la protege dentro de los rótulos que
   van en versales, para que no se convierta en "LEGALCO.". */
.marca{text-transform:none;letter-spacing:-.005em}
/* Un rótulo que nombra la marca no va en versales: "Legalco." rodeado de
   MAYÚSCULAS se lee incoherente. Pasa a caja normal, y con él el grupo
   completo al que pertenece (etiquetas del formulario, títulos del pie). */
.eyebrow.con-marca{text-transform:none;letter-spacing:.01em;font-size:12.5px}
.kicker.con-marca{text-transform:none;letter-spacing:.005em;font-size:12.5px}
.muted{color:var(--ink-soft)}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.num{font-variant-numeric:tabular-nums}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:42px;padding:0 20px;border-radius:999px;
  font-size:13.5px;font-weight:500;letter-spacing:-.005em;
  border:1px solid transparent;cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-dark{background:var(--ink);color:var(--bone-2)}
.btn-dark:hover{background:var(--azul);color:#fff}
.btn-light{background:#fff;color:#0B0D11}
.btn-light:hover{background:var(--cielo);color:#03121b}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);}
.link-arrow{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500}
.link-arrow svg{transition:transform .2s ease}
.link-arrow:hover svg{transform:translateX(3px)}

/* ---------- sticky nav (appears after hero) ---------- */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:60;
  background:color-mix(in srgb, var(--bone) 86%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  transform:translateY(-102%);transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.topbar.show{transform:none}
.topbar .inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;height:70px;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.topbar .logo{height:27px;width:auto}
.topbar .logo.on-dark{display:none}
:root[data-theme="dark"] .topbar .logo.on-light{display:none}
:root[data-theme="dark"] .topbar .logo.on-dark{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .topbar .logo.on-light{display:none}
  :root:not([data-theme="light"]) .topbar .logo.on-dark{display:block}
}
.topbar nav{display:flex;gap:30px;justify-self:center;font-size:13.5px;color:var(--ink-soft)}
.topbar nav a:hover{color:var(--ink)}
.nav-actions{justify-self:end;display:flex;align-items:center;gap:10px}

/* ---------- hero ---------- */
.hero-shell{padding:14px var(--pad) 0}
@media(min-width:900px){.hero-shell{padding:18px 18px 0}}
.hero{
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);
  min-height:min(90vh,760px);
  background:
    radial-gradient(140% 115% at 50% 50%, rgba(5,8,24,0) 38%, rgba(5,8,24,.34) 68%, rgba(4,7,20,.78) 100%),
    radial-gradient(120% 90% at 50% 52%, rgba(72,171,215,.5) 0%, rgba(75,125,223,.4) 26%, rgba(9,26,90,.14) 52%, rgba(5,10,30,0) 72%),
    linear-gradient(178deg,#04081A 0%,#0A1750 32%,#1B3EA6 58%,#2A5AC6 76%,#16336F 92%,#070C22 100%);
  display:flex;flex-direction:column;
  isolation:isolate;
}
/* Foto opcional del banner. Va bajo el velo oscuro para que se lea como
   atmósfera y no compita con el titular. La opacidad la controla el
   Personalizador con un style inline. */
.hero .hero-foto{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-position:center right;
}
.hero .hero-foto::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to right, rgba(4,8,26,.86) 0%, rgba(4,8,26,.5) 42%, rgba(4,8,26,.12) 78%),
    linear-gradient(to top, rgba(4,8,26,.82) 0%, rgba(4,8,26,.14) 46%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom, rgba(4,8,26,.28) 0%, rgba(4,8,26,0) 22%, rgba(4,8,26,0) 46%, rgba(4,8,26,.52) 100%);
}
.hero > *{position:relative;z-index:2}

.hero-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:22px clamp(20px,3.2vw,34px)}
.hero-nav .logo{height:32px;width:auto}
.hero-nav nav{display:flex;gap:30px;justify-self:center;font-size:13.5px;color:rgba(255,255,255,.72)}
.hero-nav nav a{transition:color .18s ease}
.hero-nav nav a:hover{color:#fff}
.hero-nav .btn{height:36px;font-size:13px}

/* ---------- menú móvil ---------- */
.burger{
  display:none;width:40px;height:40px;flex:none;
  align-items:center;justify-content:center;
  background:none;border:1px solid currentColor;border-radius:999px;
  color:inherit;cursor:pointer;opacity:.75;transition:opacity .2s ease;
}
.burger:hover{opacity:1}
.burger i{display:block;width:15px;height:1.5px;background:currentColor;border-radius:2px;position:relative}
.burger i::before,.burger i::after{
  content:"";position:absolute;left:0;width:15px;height:1.5px;background:currentColor;border-radius:2px;
}
.burger i::before{top:-5px}
.burger i::after{top:5px}
.hero-nav .burger{color:#fff}
.topbar .burger{color:var(--ink)}

@media (max-width:880px){
  .topbar .inner,.hero-nav{grid-template-columns:1fr auto}
  .topbar nav,.hero-nav nav{display:none}
  .burger{display:flex}
  .nav-actions .btn{height:34px;padding:0 15px;font-size:12.5px}
  .topbar .logo{height:23px}
  .hero-nav .logo{height:26px}
}
@media (max-width:359px){
  .nav-actions .btn{display:none}
}

.menu{
  position:fixed;inset:0;z-index:90;
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(72,171,215,.34) 0%, rgba(75,125,223,.26) 30%, rgba(5,10,30,0) 66%),
    linear-gradient(170deg,#04081A 0%,#0A1750 42%,#1B3EA6 78%,#0A1130 100%);
  color:#fff;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .3s ease, transform .35s cubic-bezier(.16,.84,.3,1), visibility 0s linear .35s;
}
.menu.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.menu-top{display:flex;align-items:center;justify-content:space-between;padding:22px clamp(20px,5vw,32px)}
.menu-top .logo{height:26px;width:auto}
.menu-close{
  width:40px;height:40px;border-radius:999px;border:1px solid rgba(255,255,255,.4);
  background:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s ease;
}
.menu-close:hover{background:rgba(255,255,255,.14)}
.menu-nav{
  flex:1;display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:0 clamp(20px,5vw,32px);
}
.menu-nav a{
  font-family:"Figtree",sans-serif;font-size:clamp(28px,8vw,40px);font-weight:300;
  letter-spacing:-.035em;color:#fff;padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.13);
  display:flex;align-items:baseline;gap:14px;
}
.menu-nav a span{font-family:"Instrument Sans",sans-serif;font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.42);font-variant-numeric:tabular-nums}
.menu-foot{padding:clamp(20px,5vw,32px);display:grid;gap:14px}
.menu-foot .btn{justify-content:center;width:100%;height:50px;font-size:14.5px}
.menu-foot .datos{display:flex;gap:16px;flex-wrap:wrap;font-size:13.5px;color:rgba(255,255,255,.7)}
.menu-foot .datos a:hover{color:#fff}

.hero-body{
  flex:1;display:grid;align-content:end;
  gap:clamp(26px,3.2vw,40px);
  padding:clamp(24px,4vw,44px) clamp(20px,3.2vw,38px) clamp(36px,4.2vw,54px);
}
@media(min-width:900px){
  .hero-body{
    grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:clamp(32px,5vw,72px);
    row-gap:clamp(30px,3.6vw,46px);
    align-items:end;
  }
  .hero-tit{grid-column:1;grid-row:1}
  .hero-copy{grid-column:2;grid-row:1;justify-self:end;padding-bottom:7px}
  .hero-cta{grid-column:1;grid-row:2}
}

.hero h1{
  margin:0;color:#fff;
  font-size:clamp(40px,7.4vw,86px);
  font-weight:300;max-width:14ch;letter-spacing:-.042em;
}
/* Cada palabra del titular entra deslizándose desde el borde izquierdo,
   una detrás de otra. El retardo lo pone el JS. */
.hero h1 .w{
  display:inline-block;
  opacity:0;
  transform:translate3d(-56px,0,0);
  transition:opacity 1s cubic-bezier(.16,.84,.3,1), transform 1.15s cubic-bezier(.16,.84,.3,1);
  will-change:transform,opacity;
}
.hero h1.lit .w{opacity:1;transform:none}
.hero h1 .dim{color:rgba(255,255,255,.42)}

.hero-copy{max-width:38ch;color:var(--on-dark-soft);font-size:14px;line-height:1.62}
.hero-copy strong{
  display:block;color:#fff;font-weight:500;font-size:16px;
  line-height:1.45;margin-bottom:10px;max-width:34ch;
}

.hero-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hero-cta .link-arrow{color:rgba(255,255,255,.85)}
.hero-cta .link-arrow:hover{color:#fff}

/* ---------- quiénes somos ---------- */
.statement{padding-top:clamp(72px,11vw,132px);padding-bottom:clamp(38px,5vw,62px);text-align:center}
.statement h2{margin:26px auto 0;max-width:22ch;font-size:clamp(28px,4.6vw,52px);font-weight:400;color:var(--ink)}
.statement-texto{margin:30px auto 0;max-width:60ch;display:grid;gap:14px}
.statement-texto p{font-size:15.5px;line-height:1.65;color:var(--ink-soft)}

/* ---------- fundador ---------- */
.fundador{
  padding-top:clamp(40px,6vw,76px);padding-bottom:clamp(40px,6vw,76px);
  display:grid;gap:clamp(26px,4vw,52px);align-items:center;
}
/* El retrato va primero: a la izquierda, y el nombre con sus datos a la
   derecha. En móvil el grid de una columna respeta ese mismo orden, así que
   la foto queda arriba y el texto debajo. */
@media(min-width:860px){.fundador{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}}
/* Retrato cuadrado con las esquinas redondeadas del sitio. object-fit:cover
   recorta centrado, así cualquier foto entra sin deformarse. */
.fundador-foto img{
  display:block;
  width:100%;border-radius:var(--r-lg);aspect-ratio:1/1;object-fit:cover;
  background:var(--bone-2);
}
.fundador-texto h2{margin:18px 0 0;font-size:clamp(28px,4vw,44px)}
.fundador-texto .fundador-lead{max-width:44ch}
.fundador-cargo{margin-top:10px;font-size:14.5px;color:var(--ink-soft)}
.fundador-lead{
  margin-top:20px;max-width:50ch;
  font-size:clamp(15px,1.7vw,17px);line-height:1.6;color:var(--ink-soft);
}

/* ---------- Legalco. en números ---------- */
/* Caja azul propia: entre Fundador, Personas y Empresas —todas claras— una
   banda de color le devuelve ritmo a la página y le da peso a las cifras. */
.numeros{
  background:linear-gradient(165deg,#08122F 0%,#123089 44%,#2C6ACF 74%,#48ABD7 100%);
  color:#fff;border-radius:var(--r-lg);margin:clamp(18px,2.4vw,30px) var(--pad);
  overflow:hidden;position:relative;
}
.numeros .wrap{
  position:relative;z-index:2;
  padding-top:clamp(34px,4.6vw,60px);padding-bottom:clamp(34px,4.6vw,60px);
}
/* Foto de fondo de la caja de cifras. Va detrás del contenido, con un velo
   oscuro encima para que la píldora blanca y las cifras nunca pierdan
   contraste, por clara que sea la foto que suban. Si no hay foto cargada,
   legalco_capa_foto() no imprime nada y la caja queda solo con el degradado. */
.numeros .cifras-foto{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-position:center;
}
.numeros .cifras-foto::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to right, rgba(6,14,44,.78) 0%, rgba(6,14,44,.46) 55%, rgba(6,14,44,.40) 100%),
    linear-gradient(to top, rgba(6,14,44,.62) 0%, rgba(6,14,44,.10) 55%);
}
.numeros .kicker{
  align-self:flex-start;display:inline-flex;
  background:#fff;color:#0B0D11;border-radius:999px;padding:8px 16px;
  font-family:"Instrument Sans",sans-serif;font-weight:600;
}
.numeros .kicker::before{display:none}
.numeros-grid{
  margin-top:clamp(28px,3.6vw,46px);display:grid;gap:clamp(24px,3vw,34px);
}
@media(min-width:760px){
  .numeros-grid{grid-template-columns:repeat(3,1fr);gap:0}
  .numero{padding-left:clamp(24px,3vw,42px);border-left:1px solid rgba(255,255,255,.22)}
  .numero:first-child{padding-left:0;border-left:0}
}
.numero b{
  display:block;font-family:"Figtree",sans-serif;font-weight:300;
  font-size:clamp(46px,6.4vw,82px);letter-spacing:-.05em;line-height:.95;color:#fff;
}
.numero span{display:block;margin-top:10px;font-size:14px;color:rgba(255,255,255,.82)}

/* ---------- Legalco. Personas / Legalco. Empresas ---------- */
.linea{padding-top:clamp(56px,8vw,104px);padding-bottom:clamp(30px,4vw,52px)}
.linea-head{max-width:62ch}
.linea-head h2{margin:20px 0 0;font-size:clamp(28px,4.2vw,46px);max-width:20ch}
.linea-lead{margin-top:16px;font-size:15px;line-height:1.6;color:var(--ink-soft);max-width:52ch}
.linea-grid{
  margin-top:clamp(32px,4vw,52px);display:grid;gap:0;
  border-top:1px solid var(--line);
}
@media(min-width:660px){.linea-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.linea-grid{grid-template-columns:repeat(3,1fr)}}
.area-card{
  padding:24px clamp(18px,2vw,28px) 26px 0;
  border-bottom:1px solid var(--line);
}
@media(min-width:660px){
  .area-card{border-right:1px solid var(--line);padding-left:clamp(20px,2vw,28px)}
  .area-card:nth-child(2n){border-right:0}
  .area-card:nth-child(2n+1){padding-left:0}
}
@media(min-width:1000px){
  .area-card{padding-left:clamp(20px,2vw,28px)}
  .area-card:nth-child(2n){border-right:1px solid var(--line)}
  .area-card:nth-child(3n){border-right:0}
  .area-card:nth-child(2n+1){padding-left:clamp(20px,2vw,28px)}
  .area-card:nth-child(3n+1){padding-left:0}
}
.area-card h3{font-size:clamp(17px,1.9vw,20px);font-weight:500;letter-spacing:-.022em}
.area-card p{margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
.linea-cta{
  margin-top:clamp(30px,4vw,46px);display:grid;gap:16px;align-items:center;
  padding:24px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bone-2);
}
@media(min-width:700px){.linea-cta{grid-template-columns:1fr auto}}
.linea-cta p{
  font-family:"Figtree",sans-serif;font-size:clamp(18px,2.2vw,24px);
  font-weight:400;letter-spacing:-.025em;color:var(--ink);
}

/* ---------- método (banda negra) ---------- */
/* OJO: este bloque quedó entre medio de otros dos al reordenar el archivo.
   Si alguna vez borras una sección completa, borra solo desde su comentario
   hasta el comentario siguiente CONTANDO cuál es, no "hasta el próximo
   encabezado que recuerdo". En la 1.3.8 se perdió entero justo así. */
.method{
  background:var(--band);color:#fff;
  border-radius:var(--r-lg);
  margin:0 var(--pad);overflow:hidden;
}
.method .eyebrow{color:rgba(255,255,255,.62)}
.method .eyebrow::before{background:var(--cielo)}
.method h2{color:#fff}
.method-head{
  padding-top:clamp(58px,8vw,98px);
  padding-bottom:clamp(30px,4vw,48px);
  display:grid;gap:20px;
}
@media(min-width:860px){.method-head{grid-template-columns:1fr 1fr;align-items:end;gap:40px}}
.method-head h2{font-size:clamp(26px,3.8vw,44px);max-width:15ch;margin-top:22px}
.method-head p{font-size:14.5px;color:rgba(255,255,255,.68);max-width:46ch;line-height:1.6}

.pillars{
  display:grid;gap:0;
  border-top:1px solid rgba(255,255,255,.14);
  padding-bottom:clamp(44px,6vw,76px);
}
@media(min-width:700px){.pillars{grid-template-columns:repeat(4,1fr)}}
.pillar{
  padding:clamp(26px,3vw,36px) clamp(18px,2.2vw,26px) 0;
  border-right:1px solid rgba(255,255,255,.14);
}
.pillar:first-child{padding-left:0}
.pillar:last-child{border-right:0;padding-right:0}
@media(max-width:699px){
  .pillar{padding:26px 0;border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}
  .pillar:last-child{border-bottom:0}
}
.pillar h3{font-size:19px;font-weight:400;letter-spacing:-.02em;max-width:9ch;color:#fff}
.pillar p{margin-top:12px;font-size:13px;line-height:1.55;color:rgba(255,255,255,.66)}
.pillar .idx{display:block;font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.42);margin-bottom:14px;font-variant-numeric:tabular-nums}

/* ---------- Legalco Solutions ---------- */
.solutions{
  background:
    radial-gradient(120% 100% at 78% 6%, rgba(72,171,215,.34) 0%, rgba(72,171,215,0) 55%),
    linear-gradient(168deg,#04081A 0%,#0A1A5C 40%,#1C46AE 74%,#22609E 100%);
  color:#fff;border-radius:var(--r-lg);margin:0 var(--pad);overflow:hidden;position:relative;
}
@media(min-width:900px){.solutions{margin:0 18px}}
.solutions .wrap{padding-top:clamp(54px,7vw,92px);padding-bottom:clamp(54px,7vw,92px)}
.solutions .eyebrow{color:rgba(255,255,255,.66)}
.solutions .eyebrow::before{background:var(--cielo)}
.solutions h2{color:#fff}

.sol-head{display:grid;gap:22px;margin-bottom:clamp(34px,4.5vw,54px)}
@media(min-width:860px){.sol-head{grid-template-columns:1.1fr 1fr;align-items:end}}
.sol-head h2{font-size:clamp(29px,4.4vw,50px);max-width:15ch;margin-top:22px}
.sol-lead{font-size:clamp(16px,1.9vw,20px);color:#fff;line-height:1.4;max-width:30ch;letter-spacing:-.015em}
.sol-sub{margin-top:10px;font-size:14px;color:var(--on-dark-soft);max-width:40ch;line-height:1.55}

.sol-grupo{
  font-family:"Instrument Sans",sans-serif;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:rgba(255,255,255,.55);margin:0 0 16px;
  padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.16);
}
.sol-grid{display:grid;gap:12px;margin-bottom:clamp(34px,4vw,50px)}
@media(min-width:640px){.sol-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.sol-grid{grid-template-columns:repeat(3,1fr)}}
.sol{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-md);padding:20px;
  display:flex;flex-direction:column;gap:12px;
  backdrop-filter:blur(8px);
  transition:background .22s ease,border-color .22s ease,transform .22s ease;
}
.sol:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.34);transform:translateY(-2px)}
.sol-top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.sol-ico{
  width:40px;height:40px;border-radius:11px;flex:none;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  color:#fff;display:flex;align-items:center;justify-content:center;
}
.sol-ico svg{width:20px;height:20px}
.sol h4{
  font-family:"Figtree",sans-serif;font-size:19px;font-weight:500;
  letter-spacing:-.022em;color:#fff;line-height:1.2;max-width:20ch;
}
.sol-uf{
  flex:none;font-family:"Figtree",sans-serif;font-size:26px;font-weight:300;
  letter-spacing:-.04em;color:#fff;line-height:1;font-variant-numeric:tabular-nums;
}
.sol-uf i{font-style:normal;font-size:12px;letter-spacing:.06em;color:var(--cielo);margin-left:2px}
.sol p{font-size:13px;line-height:1.5;color:rgba(255,255,255,.74)}
.btn-sol{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  height:38px;padding:0 16px;border-radius:999px;
  background:#fff;color:#0B0D11;font-size:13px;font-weight:500;
  transition:background .2s ease,color .2s ease,transform .18s ease;
}
.sol-flecha{
  width:22px;height:22px;border-radius:50%;flex:none;
  border:1px solid currentColor;display:flex;align-items:center;justify-content:center;
}
.sol-flecha svg{width:12px;height:12px}
.btn-sol:hover{background:var(--cielo);color:#03121b;transform:translateY(-1px)}

.sol-cierre{
  display:grid;gap:20px;align-items:center;
  padding:24px;border-radius:var(--r-md);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
}
@media(min-width:760px){.sol-cierre{grid-template-columns:1fr auto}}
.sol-frase{font-family:"Figtree",sans-serif;font-size:clamp(19px,2.4vw,26px);font-weight:400;letter-spacing:-.028em;color:#fff}
.sol-legal{
  margin-top:22px;font-size:11.5px;line-height:1.6;
  color:rgba(255,255,255,.52);max-width:82ch;
}

/* ---------- botón flotante de WhatsApp ---------- */
.wsp-burbuja{
  position:fixed;right:16px;bottom:78px;z-index:70;
  display:flex;align-items:flex-start;gap:6px;
  max-width:min(260px,calc(100vw - 32px));
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 10px 34px -10px rgba(11,13,17,.28);
  padding:13px 10px 13px 15px;
  opacity:0;transform:translateY(8px);
  transition:opacity .26s ease, transform .3s cubic-bezier(.16,.84,.3,1);
}
.wsp-burbuja.ver{opacity:1;transform:none}
.wsp-burbuja-txt{display:grid;gap:3px;min-width:0}
.wsp-burbuja-txt b{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.3}
.wsp-burbuja-txt span{font-size:12.5px;color:var(--ink-soft);line-height:1.35}
.wsp-burbuja-x{
  flex:none;width:20px;height:20px;border-radius:50%;
  border:0;background:var(--bone-2);color:var(--ink-faint);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.18s ease;
}
.wsp-burbuja-x:hover{background:var(--line);color:var(--ink)}
@media (max-width:700px){.wsp-burbuja{bottom:72px;right:14px}}
@media (prefers-reduced-motion:reduce){
  .wsp-burbuja{transition:none}
}

.wsp-flota{
  position:fixed;right:16px;bottom:16px;z-index:70;
  display:inline-flex;align-items:center;gap:9px;
  height:50px;padding:0 18px 0 15px;border-radius:999px;
  background:#1EBE5B;color:#04241A;
  font-size:14px;font-weight:500;letter-spacing:-.005em;
  box-shadow:0 6px 22px -6px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.16);
  transition:transform .2s ease, box-shadow .2s ease;
}
.wsp-flota svg{width:22px;height:22px;fill:currentColor;flex:none}
.wsp-flota:hover{transform:translateY(-2px);box-shadow:0 10px 28px -6px rgba(0,0,0,.5)}
@media(max-width:560px){
  .wsp-flota{right:14px;bottom:14px;height:52px;width:52px;padding:0;justify-content:center}
  .wsp-flota span{display:none}
}

/* ---------- cta ---------- */
.cta{padding-top:clamp(76px,11vw,140px);padding-bottom:clamp(56px,7vw,92px);text-align:center}
.cta h2{font-size:clamp(30px,5vw,58px);max-width:16ch;margin:22px auto 0}
.cta > p{margin:20px auto 0;max-width:46ch;color:var(--ink-soft);font-size:15px}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.cta-split{
  text-align:left;display:grid;gap:36px;
  padding-top:clamp(64px,9vw,118px);padding-bottom:clamp(64px,9vw,118px);
}
@media(min-width:940px){
  .cta-split{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(40px,5vw,72px);align-items:start}
  .cta-split .cta-copy{align-self:stretch}
  .cta-copy-in{position:sticky;top:104px}
}
.cta-split h2{margin:20px 0 0;max-width:15ch;font-size:clamp(28px,3.8vw,46px)}
.cta-split .cta-copy-in p{margin:18px 0 0;max-width:40ch;color:var(--ink-soft);font-size:15px;line-height:1.6}
.cta-split .cta-copy-in .wz-alt{margin-top:26px;font-size:13.5px}
.cta-split .wz{margin:0;max-width:none}
.cta-min{padding-top:clamp(58px,8vw,100px);padding-bottom:clamp(58px,8vw,100px)}
.cta-direccion{margin-top:26px;font-size:13.5px;color:var(--ink-soft)}
.cta-direccion a{border-bottom:1px solid var(--line)}
.cta-direccion a:hover{color:var(--ink);border-color:var(--ink)}
.cta-min h2{font-size:clamp(26px,3.6vw,40px)}

/* ---------- asistente guiado ---------- */
.wz{
  max-width:740px;margin:38px auto 0;text-align:left;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;
}
.wz-top{display:flex;align-items:center;gap:14px;padding:16px 22px;border-bottom:1px solid var(--line-soft);background:var(--bone-2)}
.wz-count{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;font-variant-numeric:tabular-nums}
.wz-bars{display:flex;gap:5px;margin-left:auto}
.wz-bars i{width:24px;height:3px;border-radius:2px;background:var(--line);display:block;transition:background .3s ease}
.wz-bars i.on{background:var(--azul)}
/* El alto del cuerpo se fija desde el JS al del paso más alto y nunca baja:
   si no, la caja se agranda y se achica en cada paso y la página salta. */
.wz-body{padding:26px 20px 24px;transition:min-height .3s cubic-bezier(.16,.84,.3,1)}
@media (prefers-reduced-motion:reduce){.wz-body{transition:none}}
@media(min-width:640px){.wz-body{padding:34px 34px 30px}}
.wz-pane{display:none}
.wz-pane.is-active{display:block;animation:wzIn .32s cubic-bezier(.2,.7,.3,1)}
@keyframes wzIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.wz-q{font-family:"Figtree",sans-serif;font-size:clamp(21px,3vw,29px);font-weight:400;letter-spacing:-.03em;line-height:1.15}
.wz-help{margin-top:10px;font-size:13.5px;color:var(--ink-soft);max-width:54ch;line-height:1.55}
.wz-grid{display:grid;gap:16px;margin-top:24px}
@media(min-width:560px){.wz-grid{grid-template-columns:1fr 1fr}}
.wz-field{display:grid;gap:7px;margin-top:24px}
.wz-grid .wz-field{margin-top:0}
.wz-field > label{font-size:12.5px;letter-spacing:.01em;color:var(--ink-faint);font-weight:600}
.wz-input{
  width:100%;height:48px;padding:0 14px;
  border:1px solid var(--line);border-radius:12px;
  background:var(--bone-2);color:var(--ink);font:inherit;font-size:15px;
  transition:border-color .2s ease,background .2s ease;
}
textarea.wz-input{height:auto;min-height:86px;padding:12px 14px;resize:vertical;line-height:1.5}
.wz-input:focus{outline:none;border-color:var(--azul);background:var(--paper)}
.wz-input::placeholder{color:var(--ink-faint)}
.wz-err{font-size:12.5px;color:var(--danger);display:none}
.wz-field.bad .wz-input{border-color:var(--danger)}
.wz-field.bad .wz-err{display:block}
.wz-nav{display:flex;gap:8px;align-items:center;margin-top:26px;flex-wrap:wrap}
.wz-nav .btn{min-width:132px}
/* El botón de volver tiene que leerse como botón: antes era texto plano al
   lado de uno negro y la gente no lo encontraba. */
.wz-back{
  display:inline-flex;align-items:center;gap:7px;
  height:42px;padding:0 16px;border-radius:999px;
  background:none;border:1px solid var(--line);
  font:inherit;font-size:13.5px;font-weight:500;color:var(--ink-soft);cursor:pointer;
  transition:border-color .18s ease,color .18s ease;
}
.wz-back:hover{border-color:var(--ink);color:var(--ink)}
.wz-back svg{flex:none}
.wz-seg{margin-top:18px;display:flex;gap:6px;padding:4px;background:var(--bone-2);border:1px solid var(--line);border-radius:999px;width:fit-content;max-width:100%;flex-wrap:wrap}
.wz-segb{
  background:none;border:0;font:inherit;font-size:13.5px;color:var(--ink-soft);
  padding:9px 18px;border-radius:999px;cursor:pointer;transition:.2s ease;white-space:nowrap;
}
.wz-segb:hover{color:var(--ink)}
.wz-segb[aria-pressed="true"]{background:var(--azul);color:#fff}
/* Áreas del paso 1.
   Seis opciones no necesitan buscador: se muestran todas. Al elegir una se
   despliega su bajada — la información aparece cuando alguien la pide y la
   lista se mantiene corta mientras tanto. El desplegado usa el truco de
   grid-template-rows 0fr → 1fr, que sí se puede animar. */
.wz-reslabel{
  margin:0 0 10px;font-size:12px;letter-spacing:.01em;
  color:var(--ink-faint);font-weight:600;
}
.wz-areas{display:grid;gap:7px}
@media(min-width:620px){.wz-areas{grid-template-columns:1fr 1fr}}
.wz-area{
  display:block;width:100%;text-align:left;
  border:1px solid var(--line);background:var(--bone-2);border-radius:13px;
  padding:11px 14px;font:inherit;color:var(--ink);cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.wz-area:hover{border-color:var(--azul)}
.wz-area-top{display:flex;align-items:center;gap:11px}
.wz-area .tick{
  flex:none;width:19px;height:19px;border-radius:6px;
  border:1.5px solid var(--line);background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  color:transparent;transition:.18s ease;
}
.wz-area .tick svg{width:11px;height:11px}
.wz-area .et{font-size:14px;line-height:1.3;font-weight:500;letter-spacing:-.015em}
.wz-area-info{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .28s cubic-bezier(.16,.84,.3,1);
}
.wz-area-info > span{overflow:hidden;font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
.wz-area[data-on="1"]{background:color-mix(in srgb,var(--azul) 9%,var(--paper));border-color:var(--azul)}
.wz-area[data-on="1"] .tick{background:var(--azul);border-color:var(--azul);color:#fff}
.wz-area[data-on="1"] .wz-area-info{grid-template-rows:1fr}
.wz-area[data-on="1"] .wz-area-info > span{padding:9px 0 2px 30px}
@media (prefers-reduced-motion:reduce){
  .wz-area,.wz-area-info{transition:none}
}
.wz-field label .op{text-transform:none;letter-spacing:0;color:var(--ink-faint);font-weight:400}

.wz-empty{margin-top:14px;font-size:13.5px;color:var(--ink-soft);line-height:1.55}
.wz-sum{margin-top:22px;border:1px solid var(--line);border-radius:16px;padding:20px;background:var(--bone-2);display:grid;gap:15px}
.wz-row{display:grid;gap:3px}
.wz-row b{font-size:12px;letter-spacing:.01em;color:var(--ink-faint);font-weight:600}
.wz-row span{font-size:14.5px}
.wz-list{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.wz-list li{font-size:14px;line-height:1.4;padding-left:15px;position:relative}
.wz-list li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:1px;background:var(--azul)}
.btn-wsp{background:var(--ink);color:var(--bone-2)}
.btn-wsp:hover{background:#1EBE5B;color:#04241A}
.btn-wsp svg{width:16px;height:16px;fill:currentColor}
.wz-fine{margin-top:14px;font-size:12px;color:var(--ink-faint);line-height:1.5;max-width:50ch}
.wz-alt{margin-top:26px;font-size:13.5px;color:var(--ink-soft)}
/* nowrap: un teléfono partido en dos líneas se lee como un dato cortado. */
.wz-alt a{color:var(--azul);border-bottom:1px solid color-mix(in srgb,var(--azul) 40%,transparent);white-space:nowrap}
.wz-alt-lead{display:inline-block}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:36px 0 44px}
@media(min-width:561px){.legal{padding-right:180px}}
@media(max-width:560px){footer{padding-bottom:96px}}
.foot{display:grid;gap:26px}
@media(min-width:760px){.foot{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.foot .logo{height:30px;width:auto}
.foot .logo.on-dark{display:none}
:root[data-theme="dark"] .foot .logo.on-light{display:none}
:root[data-theme="dark"] .foot .logo.on-dark{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .foot .logo.on-light{display:none}
  :root:not([data-theme="light"]) .foot .logo.on-dark{display:block}
}
.foot h4{font-size:12.5px;letter-spacing:.01em;color:var(--ink-faint);font-weight:600;margin-bottom:14px;font-family:"Instrument Sans",sans-serif}
.foot ul{margin:0;padding:0;list-style:none;display:grid;gap:9px;font-size:13.5px;color:var(--ink-soft)}
.foot ul a:hover{color:var(--ink)}
.foot .blurb{font-size:13px;color:var(--ink-soft);max-width:32ch;margin-top:16px}
/* La dirección usa la misma tipografía de cuerpo que el resto del pie. Sin
   esta regla heredaba el <p> general del sitio (más grande y con la fuente de
   titulares) y se veía de otra familia que los canales de al lado. */
.foot-dir{
  margin-top:16px;max-width:32ch;
  font-family:"Instrument Sans",system-ui,sans-serif;
  font-size:13px;line-height:1.55;color:var(--ink-soft);
}
.foot-dir a{color:inherit;text-decoration:none}
.foot-dir a:hover{color:var(--ink)}
.foot-redes{display:flex;gap:10px;margin-top:18px}
.foot-redes a{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--ink-soft);
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.foot-redes a:hover{background:var(--azul);border-color:var(--azul);color:#fff}
.foot-redes svg{width:17px;height:17px;fill:currentColor}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:1px solid var(--line-soft);font-size:12px;color:var(--ink-faint)}


/* ---------- animaciones de entrada ---------- */
.linea-grid,.sol-grid{overflow-x:clip}
[data-anim]{
  opacity:0;
  transform:translate3d(var(--ax,0),var(--ay,0),0) scale(var(--as,1));
  transition:opacity .85s cubic-bezier(.16,.84,.3,1), transform .95s cubic-bezier(.16,.84,.3,1);
}
[data-anim].in{opacity:1;transform:none}
[data-anim="up"]{--ay:26px}
[data-anim="left"]{--ax:-64px}
[data-anim="right"]{--ax:64px}
[data-anim="scale"]{--as:.97;--ay:20px}

/* En el banner el recorrido es más largo: el texto entra desde el borde. */
.hero-copy{--ax:104px}
.hero-cta{--ax:-80px}
@media (max-width:700px){
  /* en móvil las tarjetas ocupan todo el ancho: el desplazamiento lateral
     no aporta y solo arriesga scroll horizontal */
  [data-anim="left"],[data-anim="right"]{--ax:0;--ay:22px}
}

@media (max-width:700px){
  .hero{min-height:min(86vh,660px)}
  .hero-body{gap:20px;padding:20px 20px 30px}
  .hero h1{
    font-size:clamp(32px,8.6vw,44px);
    letter-spacing:-.038em;line-height:1.04;max-width:13ch;
  }
  .hero h1 .w{transform:translate3d(-30px,0,0)}
  .hero-copy{max-width:36ch;font-size:13px;line-height:1.5}
  .hero-copy strong{font-size:14.5px;line-height:1.35;margin-bottom:7px;max-width:30ch}
  .hero-cta{gap:14px}
  /* El selector persona/empresa se reparte el ancho en dos mitades iguales
     en vez de partirse en dos filas. */
  /* 16px exactos: por debajo de eso iOS hace zoom automático al tocar un
     campo, y la página queda desplazada de lado con el contenido cortado.
     No lo bajes. */
  .wz-input{font-size:16px}
  /* Cada dato de contacto en su propia línea. */
  .wz-alt{display:grid;gap:5px;justify-items:start}
  .wz-alt-sep{display:none}
  .wz-seg{width:100%;flex-wrap:nowrap}
  .wz-segb{flex:1 1 0;min-width:0;white-space:normal;text-align:center;padding:9px 12px;font-size:13px;line-height:1.25}
  .hero .hero-foto{background-position:center}
  .hero-cta .btn{height:40px}
}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .hero h1 .w{opacity:1;transform:none}
  .topbar{transform:none}
  [data-anim]{opacity:1!important;transform:none!important}
}
/* ---------- páginas interiores de WordPress ---------- */
.pagina{
  padding:calc(clamp(58px,8vw,100px) + 70px) var(--pad) clamp(60px,9vw,110px);
  max-width:var(--maxw);margin:0 auto;
}
.legalco-interior .topbar{transform:none}
.entrada-head{margin-bottom:clamp(26px,4vw,42px)}
.entrada-head h1{font-size:clamp(30px,5vw,52px);max-width:20ch}
.entrada-fecha{
  display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:600;margin-bottom:14px;
}
.entrada-imagen{margin:0 0 32px;border-radius:var(--r-md);overflow:hidden}
.entrada-cuerpo{max-width:68ch;font-size:16px;line-height:1.7;color:var(--ink)}
.entrada-cuerpo > * + *{margin-top:1.1em}
.entrada-cuerpo h2{font-size:clamp(22px,3vw,31px);margin-top:1.8em}
.entrada-cuerpo h3{font-size:clamp(18px,2.2vw,23px);margin-top:1.6em}
.entrada-cuerpo a{color:var(--azul);border-bottom:1px solid color-mix(in srgb,var(--azul) 40%,transparent)}
.entrada-cuerpo blockquote{
  margin:1.6em 0;padding-left:20px;border-left:2px solid var(--azul);
  color:var(--ink-soft);font-size:17px;
}
.entrada-cuerpo ul,.entrada-cuerpo ol{padding-left:22px}
.entrada-cuerpo li + li{margin-top:8px}
.entrada-cuerpo img{border-radius:var(--r-sm)}
.entrada-cuerpo code{
  background:var(--bone-2);border:1px solid var(--line-soft);
  border-radius:5px;padding:2px 6px;font-size:.9em;
}
.entrada-cuerpo pre{
  background:var(--band);color:#fff;padding:18px;border-radius:var(--r-sm);
  overflow-x:auto;font-size:13.5px;line-height:1.6;
}
.entrada-nav{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:48px;padding-top:24px;border-top:1px solid var(--line);
  font-size:14px;color:var(--ink-soft);
}
.entrada-nav a:hover{color:var(--ink)}

.lista-entradas{display:grid;gap:14px}
@media(min-width:760px){.lista-entradas{grid-template-columns:repeat(2,1fr)}}
.entrada-link{
  display:block;height:100%;padding:24px;
  background:var(--bone-2);border:1px solid var(--line-soft);border-radius:var(--r-md);
  transition:border-color .2s ease,transform .2s ease;
}
.entrada-link:hover{border-color:var(--azul);transform:translateY(-2px)}
.entrada-link h2{font-size:21px;font-weight:400;letter-spacing:-.025em;margin-bottom:10px}
.entrada-link p{font-size:13.5px;line-height:1.55;color:var(--ink-soft)}

.pagination{display:flex;gap:8px;flex-wrap:wrap;margin-top:36px;font-size:14px}
.pagination .page-numbers{
  min-width:38px;height:38px;padding:0 12px;border-radius:999px;
  border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink-soft);transition:.2s ease;
}
.pagination .page-numbers:hover{border-color:var(--ink);color:var(--ink)}
.pagination .current{background:var(--azul);border-color:var(--azul);color:#fff}

.pagina-404{text-align:center;max-width:640px}
.pagina-404 p{margin:18px auto 0;color:var(--ink-soft);font-size:15px;max-width:46ch}

.buscador{display:flex;gap:10px;margin-top:20px;max-width:460px}
.buscador .wz-input{flex:1}
.sin-resultados{color:var(--ink-soft);font-size:15px}

.foot-widget{font-size:13.5px;color:var(--ink-soft)}
.foot-widget h4{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:600;margin-bottom:14px;
}