/* ============================================================
   Sal de tus deudas — hojas interiores, estilo de la portada
   nueva: base clara, Archivo de titulares, botones planos.
   ============================================================ */

:root{
  --bg:#F3F5F8;
  --paper:#FFFFFF;
  --navy:#0E1726;
  --navy-2:#16233A;
  --navy-3:#1C2C46;
  --ink:#0E1726;
  --ink-2:#4B5B73;
  --ink-3:#7A889C;
  --rule:#DDE3EB;
  --rule-navy:#26374F;
  --green:#183B35;
  --green-hover:#1F4F47;
  --mint:#5FB3A4;
  --mint-ink:#277668;   /* verde legible sobre claro: 5.4:1 en blanco */
  --wa:#25D366;
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1180px;
  --pad:clamp(20px,5vw,64px);
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* ---------- barra superior ---------- */
.util{background:var(--navy);color:#B9C6D8;font-size:.8rem;font-weight:600}
.util .wrap{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:16px}
.util span,.util a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;white-space:nowrap}
.util a:hover{color:#fff}
.util svg{width:13px;height:13px}
.util .r{display:flex;gap:22px}
@media (max-width:700px){.util .l{display:none}.util .wrap{justify-content:center}}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:90;background:var(--paper);border-bottom:1px solid var(--rule)}
.nav .wrap{display:flex;align-items:center;gap:26px;min-height:74px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:1.15rem}
.brand-mark{width:34px;height:34px;flex:none}
.links{display:flex;gap:26px;margin-left:auto;align-items:center}
.links > a,.dd > button{font-family:var(--body);font-weight:600;font-size:.93rem;color:var(--ink-2);
  text-decoration:none;background:none;border:0;padding:0;cursor:pointer;display:inline-flex;
  align-items:center;gap:6px;transition:color .3s var(--ease)}
.links > a:hover,.dd:hover > button,.dd.open > button{color:var(--ink)}
.dd{position:relative}
.dd > button svg{width:10px;height:10px;transition:transform .3s var(--ease)}
.dd:hover > button svg,.dd.open > button svg{transform:rotate(180deg)}
.dd-panel{position:absolute;top:calc(100% + 18px);left:50%;transform:translate(-50%,6px);
  width:310px;background:var(--paper);border:1px solid var(--rule);border-radius:8px;
  padding:8px;margin:0;list-style:none;box-shadow:0 22px 60px rgba(14,23,38,.14);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s linear .25s}
.dd:hover .dd-panel,.dd.open .dd-panel,.dd:focus-within .dd-panel{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition-delay:0s}
.dd-panel::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.dd-panel a{display:block;padding:10px 12px;border-radius:6px;text-decoration:none;
  color:var(--ink);font-size:.92rem;line-height:1.3;font-weight:600}
/* el nombre juridico bajo cada servicio: en la fuente de cuerpo, no en
   monoespaciada, que daba aire de plantilla tecnica */
.dd-panel a small{display:block;font-family:var(--body);font-size:.77rem;letter-spacing:0;
  color:var(--ink-3);margin-top:2px;font-weight:500;line-height:1.35}
.dd-panel a:hover{background:var(--bg)}
.dd-panel a[aria-current="page"]{background:var(--bg);box-shadow:inset 3px 0 0 var(--mint-ink)}
.dd-all{border-top:1px solid var(--rule);margin-top:6px;padding-top:6px}
.dd-all a{color:var(--ink-2);font-size:.85rem}
.nav .btn{padding:12px 22px}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--green);color:#fff;text-decoration:none;border:0;cursor:pointer;
  font-family:var(--body);font-weight:700;font-size:.95rem;letter-spacing:.01em;
  padding:14px 26px;border-radius:4px;
  transition:background .3s var(--ease),transform .3s var(--ease)}
.btn:hover{background:var(--green-hover);transform:translateY(-1px)}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 8px 24px rgba(37,211,102,.32)}
.btn-wa:hover{background:#1EBE5D;box-shadow:0 10px 28px rgba(37,211,102,.4)}
.btn-wa .wa-logo{width:20px;height:20px}
.wa-logo{flex:none}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-ghost.dark{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-ghost.dark:hover{background:rgba(14,23,38,.06)}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- flotante de whatsapp ---------- */
.fab{position:fixed;right:18px;bottom:18px;z-index:95;width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;background:var(--wa);color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .35s var(--ease)}
.fab::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--wa);
  animation:pulso 2.4s var(--ease) infinite;z-index:-1}
@keyframes pulso{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.55);opacity:0}100%{transform:scale(1.55);opacity:0}}
.fab:hover{transform:scale(1.07)}
.fab svg{width:32px;height:32px}

/* ---------- encabezado de la hoja: banda oscura con la ciudad ---------- */
.hoja{position:relative;color:#fff;overflow:hidden;
  background:var(--navy) url('santiago.jpg') center 30%/cover no-repeat}
@media (max-width:700px){.hoja{background-image:url('santiago-m.jpg');background-position:center 34%}}
.hoja::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(14,23,38,.88) 0%,rgba(14,23,38,.68) 52%,rgba(14,23,38,.36) 100%)}
.hoja .wrap{position:relative;padding-top:clamp(34px,6vh,66px);padding-bottom:clamp(38px,7vh,74px)}
.miga{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-family:var(--body);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:#93A6BF;margin-bottom:22px}
.miga a{text-decoration:none;transition:color .3s var(--ease)}
.miga a:hover{color:#fff}
.miga span{opacity:.5}
.miga b{color:var(--mint);font-weight:400}
.kicker{font-family:var(--body);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mint);display:block;margin-bottom:14px}
h1{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.022em;
  line-height:.98;font-size:clamp(2.2rem,5.2vw,3.9rem);margin:0;max-width:18ch;
  text-shadow:0 2px 24px rgba(5,8,14,.45)}
.sub{font-family:var(--display);font-weight:500;letter-spacing:-.012em;
  font-size:clamp(1.15rem,2.3vw,1.6rem);line-height:1.22;
  color:var(--mint);margin:16px 0 0;max-width:34ch}
.entrada{color:#C8D4E2;font-size:1.04rem;max-width:62ch;margin:20px 0 0}
.entrada + .entrada{margin-top:12px}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ---------- bloques de contenido ---------- */
/* Los bloques alternan papel y gris, igual que la portada. Antes iban todos
   sobre el mismo blanco y separados solo por aire, asi que la pagina entera
   se leia como un unico parrafo largo.                                     */
.bloque{padding:clamp(38px,5.6vh,66px) 0}
.bloque:nth-of-type(even){background:var(--bg)}
.bloque h2{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1.45rem,2.9vw,2.1rem);line-height:1.08;margin:0 0 18px;max-width:24ch}
.bloque p{color:var(--ink-2);max-width:62ch;margin:0 0 14px;font-size:1.03rem}
.bloque p:last-child{margin-bottom:0}
.bloque p b{color:var(--ink);font-weight:700}

/* Lo que podemos hacer: tarjetas numeradas a dos columnas. En una sola fila
   vertical la lista competia con los parrafos y se perdia; numerada y en
   rejilla se lee como lo que es, un conjunto de pasos concretos.          */
.logros{list-style:none;margin:6px 0 0;padding:0;counter-reset:logro;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:760px){.logros{grid-template-columns:1fr}}
.logros li{counter-increment:logro;background:var(--paper);border:1px solid var(--rule);
  border-top:3px solid var(--green);border-radius:0 0 8px 8px;
  padding:20px 22px;color:var(--ink-2);font-size:1rem;line-height:1.5}
.logros li::before{content:counter(logro,decimal-leading-zero);display:block;
  font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.08em;
  color:var(--green);margin-bottom:9px}


/* etapas del procedimiento */
.pasos{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.pasos i{font-style:normal;font-family:var(--body);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);padding:10px 16px;border-radius:4px}
.pasos b{color:var(--mint-ink);font-weight:400;font-size:1rem}

/* Aviso de "actuar a tiempo". Ya no es un bloque oscuro en medio del texto:
   destaca por la regla verde y el titulo en verde, igual que las cifras de la
   portada, y asi el fondo sigue siendo el mismo papel de toda la pagina.     */
.aviso{margin-top:26px;background:var(--bg);border:1px solid var(--rule);
  border-radius:8px;padding:24px 26px 24px 30px;max-width:64ch;position:relative;overflow:hidden}
.aviso::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--green)}
.aviso h3{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.012em;
  font-size:1.2rem;margin:0 0 8px;color:var(--green)}
.aviso p{margin:0;color:var(--ink-2)}

/* contenido en preparación */
.preparando{margin-top:8px;border:1px dashed #C2CCD9;border-radius:8px;
  padding:26px 24px;max-width:64ch;background:var(--paper)}
.preparando h3{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.012em;
  font-size:1.18rem;margin:0 0 10px}
.preparando p{margin:0;color:var(--ink-2)}

/* otros caminos, al pie del contenido */
.otros{border-top:1px solid var(--rule);margin-top:clamp(40px,6vh,72px);padding-top:clamp(30px,4vh,46px)}
.otros h2{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.012em;
  font-size:1.4rem;margin:0 0 20px}
.otros-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.otro{background:var(--paper);border:1px solid var(--rule);border-radius:8px;padding:18px 20px;
  text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:6px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.otro:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(14,23,38,.1)}
.otro b{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.012em;
  font-size:1.02rem;line-height:1.15}
.otro span{font-family:var(--body);font-size:.6rem;letter-spacing:.08em;color:var(--mint-ink)}
@media (max-width:900px){.otros-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.otros-grid{grid-template-columns:1fr}}

/* ---------- cierre ---------- */
/* el cierre en papel, separado del contenido por una regla en vez de por color */
.cierre{margin-top:clamp(44px,7vh,84px);padding:clamp(44px,7vh,84px) 0;
  background:var(--paper);border-top:1px solid var(--rule);position:relative;overflow:hidden}
.cierre .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.85fr);
  gap:clamp(30px,5vw,64px);align-items:center}
.cierre h2{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1.8rem,4vw,2.7rem);line-height:1.05;margin:0;max-width:18ch}
.cierre p{color:var(--ink-2);margin:14px 0 0;max-width:48ch}
/* el contorno blanco era para el fondo oscuro */
.cierre .btn-ghost{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.cierre .btn-ghost:hover{background:rgba(14,23,38,.06)}
.cierre .acciones{margin-top:26px}
/* La foto del cierre la elige cada pagina, para que las cinco no repitan la
   misma cara al pie. El valor de reserva mantiene el sitio en pie si alguna
   pagina olvidara declararla.                                             */
.cierre-foto{border-radius:8px;aspect-ratio:4/5;
  background:var(--cierre-retrato,url('assets/equipo/foto-52.jpg')) center top/cover no-repeat;
  box-shadow:0 26px 60px rgba(14,23,38,.18)}
@media (max-width:860px){
  .cierre .wrap{grid-template-columns:1fr}
  /* sigue vertical y acotada; en 16/10 quedaba una franja del torso */
  .cierre-foto{width:min(100%,300px)}
}
@media (max-width:560px){
  .cierre-foto{width:100%}
}

/* ---------- pie ---------- */
.foot{background:var(--navy);color:#9CADC3;padding:clamp(40px,6vh,64px) 0 24px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
.foot .brand{color:#fff}
.foot h4{font-family:var(--body);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  margin:0 0 14px;font-weight:400;color:#7F91A8}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot ul a{text-decoration:none;font-size:.92rem;display:inline-flex;align-items:center;gap:9px;
  transition:color .3s var(--ease)}
.foot ul a:hover{color:#fff}
.foot ul svg{width:15px;height:15px;color:var(--mint)}
.tagline{font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.02em;
  margin:14px 0 0;color:#fff}
.about{font-size:.9rem;margin:10px 0 0;max-width:40ch}
.foot-legal{margin-top:34px;padding-top:20px;border-top:1px solid var(--rule-navy);
  display:flex;flex-wrap:wrap;gap:8px 26px;font-size:.78rem;color:#7F91A8}
/* El credito de quien hizo el sitio, al cierre de todo. El logo va en PNG con
   fondo transparente y algo rebajado, para que acompane sin competirle a la
   marca del estudio, que es la que manda en esta pagina.                    */
.hecho{margin-top:22px;display:flex;align-items:center;justify-content:center;gap:11px;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#8FA1B8}
/* el relleno da alto de dedo al area de clic; el margen negativo lo devuelve
   al sitio para que el diseno no se mueva                                   */
.hecho a{display:block;line-height:0;padding:6px 8px;margin:-6px -8px}
.hecho img{width:104px;height:auto;display:block;opacity:.88;transition:opacity .3s var(--ease)}
.hecho a:hover img,.hecho a:focus-visible img{opacity:1}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}}

/* ---------- entradas al hacer scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.logros .reveal:nth-child(2){transition-delay:.07s}
.logros .reveal:nth-child(3){transition-delay:.14s}
.logros .reveal:nth-child(4){transition-delay:.21s}
.logros .reveal:nth-child(5){transition-delay:.28s}

/* ============================================================
   RESPONSIVO — hamburguesa y pantallas chicas
   ============================================================ */
.burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;padding:10px;
  flex-direction:column;justify-content:center;gap:5px;border-radius:6px}
.burger span{display:block;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .3s var(--ease),opacity .3s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{position:fixed;left:0;right:0;bottom:0;z-index:89;background:var(--paper);overflow:auto;
  -webkit-overflow-scrolling:touch;border-top:1px solid var(--rule)}
.mnav-in{padding:18px var(--pad) 40px;max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column}
.mnav-h{font-family:var(--body);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mint-ink);margin:8px 0 6px}
.mnav-sub,.mnav-top{text-decoration:none;color:var(--ink);padding:13px 0;border-bottom:1px solid var(--rule);
  font-weight:600;font-size:1rem;display:block}
.mnav-sub{padding-left:14px;font-weight:500;color:var(--ink-2)}
.mnav-sub[aria-current="page"]{color:var(--mint-ink)}
.mnav-top{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;font-size:1.2rem;padding:16px 0}
.mnav-top:first-of-type{margin-top:12px}
.mnav-cta{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.mnav-cta .btn{width:100%}
body.menu-open{overflow:hidden}
@media (max-width:900px){
  .links{display:none}
  .burger{display:flex}
  .nav .nav-cta{margin-left:auto}
}
@media (max-width:600px){
  .nav .nav-cta{display:none}
  .burger{margin-left:auto}
  .nav .wrap{min-height:64px}
  .brand{font-size:1.02rem}
  .brand-mark{width:30px;height:30px}
}
@media (max-width:480px){
  .util #utilMail{display:none}
  h1{font-size:clamp(2.1rem,10.5vw,2.9rem)}
  .sub{font-size:1.12rem}
  .acciones .btn{width:100%}
  .cierre h2{font-size:clamp(1.7rem,8vw,2.2rem)}
  .fab{width:54px;height:54px;right:14px;bottom:14px}
  .fab svg{width:28px;height:28px}
}
@media (max-width:360px){.util .r{gap:12px;font-size:.74rem}}

/* ---------- etiquetas pequenias: de monoespaciada a Inter ---------- */
.miga{font-size:.72rem;letter-spacing:.1em;font-weight:600}
.kicker{font-size:.74rem;letter-spacing:.14em;font-weight:600}
.pasos i{font-size:.8rem;letter-spacing:.04em;font-weight:600}
.otro span{font-size:.76rem;letter-spacing:0;font-weight:500}
.foot h4{font-size:.72rem;letter-spacing:.13em;font-weight:600}
.mnav-h{font-size:.72rem;letter-spacing:.13em;font-weight:600}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important}
  .fab::before{animation:none}
  .reveal{opacity:1;transform:none}
}