/* ═══════════════════════════════════════════════════════════════════════════
   KIT CB NORTH TEAM — fuente única de color y tipografía del hub del cliente
   REGLA: las páginas consumen ESTE kit por <link> y definen layout con estos
   tokens. Cero colores y cero tipografías hardcodeadas en las páginas.
   Paleta: marca real del cliente (#012169 verificado en cbnorthteam.com.ar,
   10-ago-2026) + manual Coldwell Banker 2024 (celestial) + registro Global
   Luxury (champagne). Dirección: hub/BUILD-NOTES.md §G4.
   Tipografía self-hosted (Poppins woff2, font-display block): la pieza abre
   igual con el internet malo de un teléfono en la ruta.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Poppins";src:url("fonts/poppins-400-normal.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"Poppins";src:url("fonts/poppins-500-normal.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:"Poppins";src:url("fonts/poppins-600-normal.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:"Poppins";src:url("fonts/poppins-700-normal.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:block}

:root{
  /* marca */
  --azul-cb:#012169;        /* base de marca, verificado en su web */
  --noche:#0B1633;          /* fondo hero / bloques oscuros */
  --noche-2:#122455;        /* tinta secundaria de su web */
  --celestial:#418FDE;      /* interactivo (manual CB) */
  --celestial-soft:#E3EEFA;
  --champagne:#C2A265;      /* acento Global Luxury: pins, highlights, números */
  --champagne-soft:#F5EDDD;
  /* lectura */
  --bg:#FFFFFF;--marfil:#F7F5F0;--mesa-cb:#DFE4EF;--line:#E3E1DA;--line-dark:#24345E;
  --tinta:#1A2233;--muted:#5C6674;--muted-dark:#93A0BE;
  /* estados (vocabulario cerrado, siempre con label textual) */
  --ok:#1F7A44;--ok-soft:#E4F2E8;
  --warn:#8A6A1F;--warn-soft:#FBF3DD;
  --lock:#6B686F;
  /* plano ilustrativo del master plan (signature) — solo ilustración, no UI */
  --plano-fondo:#0F1D40;--plano-calle:#3D5080;--plano-lote:#1D2F5E;
  --plano-verde:#2E5C49;--plano-agua:#2F5FA8;
  /* tipografía */
  --font-display:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* ritmo */
  --radius:14px;--radius-s:8px;
  --pad-x:clamp(20px,5vw,64px);
  --maxw:1060px;
}

*{box-sizing:border-box}
html{scroll-padding-top:24px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--tinta);font-family:var(--font-body);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}

h1,h2,h3,h4{font-family:var(--font-display);line-height:1.2;margin:0 0 .45em;
  letter-spacing:-0.01em;color:var(--tinta)}
h1{font-size:clamp(30px,4.6vw,46px);font-weight:700}
h2{font-size:clamp(22px,3vw,30px);font-weight:600}
h3{font-size:clamp(17px,2.2vw,20px);font-weight:600}
p{margin:0 0 1em}
a{color:var(--celestial)}
img,svg{max-width:100%;height:auto}

/* ── utilidades comunes ── */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
.kicker{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--champagne);margin:0 0 10px}
.kicker--azul{color:var(--celestial)}
.lead{font-size:clamp(16px,2vw,18.5px);color:var(--muted);max-width:62ch}

.pill{display:inline-block;font-family:var(--font-mono);font-size:11px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;border-radius:100px;padding:4px 12px;white-space:nowrap}
.pill--activo{color:var(--ok);background:var(--ok-soft)}
.pill--lock{color:var(--muted);background:var(--marfil);border:1px solid var(--line)}
.pill--gold{color:#7A6335;background:var(--champagne-soft)}
.pill--azul{color:var(--azul-cb);background:var(--celestial-soft)}

/* ── bloques oscuros (hero) ── */
.dark{background:linear-gradient(168deg,var(--noche) 0%,var(--azul-cb) 130%);color:#F2F5FB}
.dark h1,.dark h2,.dark h3{color:#FFFFFF}
.dark .lead{color:var(--muted-dark)}
.dark a{color:#9CC4EF}

/* ── tarjetas de etapa (la escalera del hub) ── */
.etapas{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:860px){.etapas{grid-template-columns:1fr}}
.etapa{display:block;border:1px solid var(--line-dark);border-radius:var(--radius);
  padding:26px 24px 22px;background:rgba(255,255,255,.035);text-decoration:none;color:inherit;
  position:relative;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.etapa .num{font-family:var(--font-mono);font-size:11px;color:var(--champagne);letter-spacing:.1em}
.etapa h3{margin:10px 0 8px;color:#fff}
.etapa p{font-size:14px;color:var(--muted-dark);margin:0 0 14px}
.etapa--activa{border-color:var(--champagne)}
.etapa--activa:hover{transform:translateY(-3px);background:rgba(255,255,255,.07)}
.etapa--lock{opacity:.62;cursor:default}
.etapa--lock:hover{transform:none}
.etapa .cta{font-weight:600;font-size:14px;color:var(--champagne)}
.candado{position:absolute;top:22px;right:20px;width:18px;height:18px;opacity:.85}

/* ── secciones de lectura ── */
.sec{padding:clamp(44px,7vw,76px) 0}
.sec--marfil{background:var(--marfil)}
.sec--noche{background:var(--noche);color:#F2F5FB}
.sec--noche h2,.sec--noche h3{color:#fff}

/* ── tarjetas de proyecto / valor ── */
.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);
  padding:24px 24px 20px}
.card h3{margin-top:2px}
.card .que-gana{color:var(--muted);font-size:14.5px;margin:0}

/* ── precios: valor arriba, precio abajo ── */
.precio-linea{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:16px;padding-top:14px}
.precio-lista{font-family:var(--font-mono);font-size:13px;color:var(--muted);text-decoration:line-through}
.precio-final{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--azul-cb)}
.precio-nota{font-size:12.5px;color:var(--muted)}
.ancla{font-size:12.5px;color:var(--muted);background:var(--marfil);border-radius:var(--radius-s);
  padding:8px 12px;margin-top:10px}

/* ── tablas ── */
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:8px 10px;border-bottom:2px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.tabla-scroll{overflow-x:auto}

/* ── colapsable "al 55%" ── */
details{border:1px solid var(--line);border-radius:var(--radius-s);background:var(--bg);
  padding:0;margin:10px 0}
details summary{cursor:pointer;padding:12px 16px;font-weight:600;font-size:14px;color:var(--azul-cb);
  list-style:none;display:flex;align-items:center;gap:8px}
details summary::before{content:"+";font-family:var(--font-mono);color:var(--champagne);
  font-weight:700;transition:transform .15s ease}
details[open] summary::before{transform:rotate(45deg)}
details .det-body{padding:0 16px 14px;font-size:14px;color:var(--muted)}

/* ── footer ── */
.foot{padding:34px 0 44px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.dark .foot,.sec--noche .foot{border-top-color:var(--line-dark);color:var(--muted-dark)}

/* ── foco visible (Tab de verdad) ── */
a:focus-visible,summary:focus-visible,button:focus-visible{
  outline:3px solid var(--celestial);outline-offset:2px;border-radius:4px}

/* ── pins del master plan (signature) ── */
@media (prefers-reduced-motion:no-preference){
  .pin-late{transform-origin:center bottom;animation:pinlate 2.6s ease-in-out infinite}
  @keyframes pinlate{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
}

/* ── print (respaldo PDF del pre-assessment) ── */
@media print{
  .no-print{display:none !important}
  .sec{padding:22px 0}
  body{font-size:12.5px}
  a{color:var(--tinta);text-decoration:none}
}