/* ============================================================
   InterHuman — sitio 2026 · marca ACTUAL (manual 2022) + mensajería nueva
   Paleta oficial: Space Cadet #131E4E · Dark Purple #482044 ·
   Maroon #A02C5A · Amaranth #E2364E (CTA) · Tart Orange #FF2E2E (mínimo)
   Tipografía oficial: BioRhyme (display) + Fort (texto/UI)
   ============================================================ */

@font-face { font-family:'BioRhyme'; src:url('../fonts/biorhyme-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'BioRhyme'; src:url('../fonts/biorhyme-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'BioRhyme'; src:url('../fonts/biorhyme-800.woff2') format('woff2'); font-weight:800; font-display:swap; }
@font-face { font-family:'Fort'; src:url('../fonts/fort-300.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'Fort'; src:url('../fonts/fort-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Fort'; src:url('../fonts/fort-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Fort'; src:url('../fonts/fort-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Fort'; src:url('../fonts/fort-900.woff2') format('woff2'); font-weight:900; font-display:swap; }

:root {
  --navy: #131E4E;
  --navy-92: rgba(19, 30, 78, 0.92);
  --vino: #482044;
  --carmin: #A02C5A;
  --magenta: #E2364E;      /* CTA oficial: magenta + texto blanco (fix del audit) */
  --rojo: #FF2E2E;         /* acento mínimo */
  --papel: #F8F7F4;
  --blanco: #FFFFFF;
  --gris-7: #454C66;
  --gris-5: #767D96;
  --gris-3: #C3C7D4;
  --gris-1: #EAECF1;
  --ok: #2E7D4F;           /* funcional: al corriente */
  --linea: rgba(19,30,78,0.14);
  --linea-inv: rgba(255,255,255,0.18);
  --grad: linear-gradient(135deg, #E2364E 0%, #482044 100%);
  --display: 'BioRhyme', 'Georgia', serif;
  --sans: 'Fort', -apple-system, 'Helvetica Neue', sans-serif;
  --sombra: 0 18px 44px -18px rgba(19,30,78,0.28);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--sans); font-size:17px; line-height:1.6; color:var(--navy); background:var(--papel); -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:inherit; }
.wrap { max-width:1140px; margin:0 auto; padding:0 24px; }

/* ---------- Header ---------- */
header.site {
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,0.94);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--linea);
}
header.site .bar { display:flex; align-items:center; gap:28px; padding:12px 24px; max-width:1140px; margin:0 auto; }
header.site .logo img { height:46px; width:auto; }
header.site nav { display:flex; gap:22px; margin-left:auto; }
header.site nav a { text-decoration:none; font-size:14.5px; font-weight:500; color:var(--gris-7); transition:color .18s; }
header.site nav a:hover { color:var(--magenta); }
header.site .cta-nav { margin-left:6px; }
@media (max-width: 920px){ header.site nav { display:none; } header.site .cta-nav { margin-left:auto; } }
@media (max-width: 600px){
  header.site .logo img { height:36px; }
  header.site .cta-nav { padding:9px 14px; font-size:12.5px; white-space:nowrap; }
  .btn + .btn { margin-left:0; margin-top:10px; }
}

/* ---------- Botones ---------- */
.btn { display:inline-block; font-family:var(--sans); font-weight:700; font-size:15.5px; text-decoration:none; padding:14px 28px; border-radius:8px; transition:transform .18s, box-shadow .18s; }
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:var(--magenta); color:#fff; box-shadow:0 8px 22px -8px rgba(226,54,78,0.55); }
.btn-ghost { border:1.5px solid var(--linea); color:var(--navy); background:transparent; }
.btn-ghost.inv { border-color:var(--linea-inv); color:#fff; }
.btn-whats { background:#25D366; color:#fff; box-shadow:0 8px 22px -8px rgba(37,211,102,0.5); }
.btn-sm { padding:10px 20px; font-size:13.5px; }
.btn + .btn { margin-left:10px; }

/* ---------- Tipografía ---------- */
.kicker { font-weight:700; font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--carmin); margin-bottom:16px; }
.kicker.inv { color:#F0A9B6; }
h1.display, h2.display { font-family:var(--display); font-weight:700; letter-spacing:-0.01em; line-height:1.14; }
h1.display { font-size:clamp(30px, 4.6vw, 52px); }
h2.display { font-size:clamp(24px, 3.2vw, 36px); margin-bottom:16px; }
.sub { font-size:19px; font-weight:300; color:var(--gris-7); max-width:56ch; }
.sub.inv { color:rgba(255,255,255,0.82); }
.ast { color:var(--magenta); }
.ast-nota { display:block; font-size:13px; color:var(--gris-5); margin-top:14px; max-width:60ch; }
.inv .ast-nota, .ast-nota.inv { color:rgba(255,255,255,0.6); }

/* ---------- Hero ---------- */
.hero { position:relative; background:var(--navy); color:#fff; overflow:hidden; }
.hero .fondo { position:absolute; inset:0; background-size:cover; background-position:center; }
.hero .fondo::after { content:""; position:absolute; inset:0; background:linear-gradient(100deg, var(--navy) 34%, var(--navy-92) 60%, rgba(19,30,78,0.8)); }
.hero .contenido { position:relative; z-index:2; padding:88px 0 64px; }
.hero h1.display { color:#fff; max-width:21ch; }
.hero .sub { margin:22px 0 32px; }

/* ---------- Franja de respaldo ---------- */
.franja { border-top:1px solid var(--linea-inv); position:relative; z-index:2; }
.franja .wrap { display:flex; gap:34px; flex-wrap:wrap; padding-top:16px; padding-bottom:16px; }
.franja span { font-size:12px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.66); }
.franja b { color:#fff; font-weight:700; }
.franja.clara { border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); background:var(--blanco); }
.franja.clara span { color:var(--gris-5); }
.franja.clara b { color:var(--navy); }

/* ---------- Secciones ---------- */
section.bloque { padding:84px 0; }
section.bloque.blanco { background:var(--blanco); }
section.bloque.navy { background:var(--navy); color:#fff; }
section.bloque.navy h2.display { color:#fff; }

/* ---------- Cards / puertas ---------- */
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width:900px){ .grid2,.grid3,.grid4 { grid-template-columns:1fr; } }
.card { background:var(--blanco); border:1px solid var(--linea); border-radius:14px; padding:32px; }
.puerta { border-radius:16px; padding:38px 34px; background:var(--blanco); border:1px solid var(--linea); box-shadow:var(--sombra); display:flex; flex-direction:column; gap:14px; transition:transform .2s; }
.puerta:hover { transform:translateY(-3px); }
.puerta .quien { font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--carmin); }
.puerta h3 { font-family:var(--display); font-size:24px; font-weight:700; line-height:1.2; }
.puerta ul { list-style:none; margin:4px 0 8px; }
.puerta ul li { padding:7px 0 7px 26px; position:relative; font-size:15.5px; color:var(--gris-7); border-bottom:1px solid var(--gris-1); }
.puerta ul li:last-child { border-bottom:0; }
.puerta ul li::before { content:"✓"; position:absolute; left:2px; color:var(--ok); font-weight:700; }
.puerta .btn { align-self:flex-start; margin-top:auto; }

/* ---------- Datos grandes ---------- */
.datos { display:flex; gap:56px; flex-wrap:wrap; }
.dato .num { font-family:var(--display); font-weight:800; font-size:clamp(34px,4vw,54px); line-height:1; color:var(--navy); }
.navy .dato .num { color:#fff; }
.dato .num .ast { font-size:0.5em; vertical-align:super; }
.dato .lbl { font-size:12px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--gris-5); margin-top:8px; }
.navy .dato .lbl { color:rgba(255,255,255,0.6); }

/* ---------- Tabla obligaciones ---------- */
.tabla-oblig { width:100%; border-collapse:collapse; background:var(--blanco); border:1px solid var(--linea); border-radius:14px; overflow:hidden; }
.tabla-oblig th { font-size:11.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--gris-5); text-align:left; padding:14px 18px; background:var(--gris-1); border-bottom:1px solid var(--linea); }
.tabla-oblig td { padding:13px 18px; border-bottom:1px solid var(--gris-1); font-size:15px; vertical-align:top; color:var(--navy); }
.tabla-oblig tr:last-child td { border-bottom:0; }
.tabla-oblig td.chk { color:var(--ok); font-weight:700; white-space:nowrap; }
.tabla-oblig td b { font-weight:700; color:var(--navy); }
.tabla-oblig td.aut { color:var(--gris-5); font-size:13.5px; }
.tabla-scroll { overflow-x:auto; }

/* ---------- Pasos ---------- */
.pasos { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:paso; }
@media (max-width:900px){ .pasos { grid-template-columns:1fr; } }
.paso { background:var(--blanco); border:1px solid var(--linea); border-radius:14px; padding:26px 24px; position:relative; }
.paso.destacado { border:2px solid var(--magenta); }
.paso .n { font-family:var(--display); font-weight:800; font-size:15px; color:var(--magenta); margin-bottom:10px; }
.paso h4 { font-size:17px; font-weight:700; margin-bottom:6px; }
.paso p { font-size:14px; color:var(--gris-7); }
.paso .gratis { position:absolute; top:-12px; right:14px; background:var(--magenta); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:0.08em; padding:4px 10px; border-radius:99px; }

/* ---------- FAQ ---------- */
details.faq { background:var(--blanco); border:1px solid var(--linea); border-radius:12px; margin-bottom:12px; overflow:hidden; }
details.faq summary { cursor:pointer; padding:20px 24px; font-weight:700; font-size:16.5px; list-style:none; position:relative; padding-right:52px; }
details.faq summary::-webkit-details-marker { display:none; }
details.faq summary::after { content:"+"; position:absolute; right:22px; top:50%; transform:translateY(-50%); font-family:var(--display); font-size:20px; color:var(--magenta); }
details.faq[open] summary::after { content:"–"; }
details.faq .resp { padding:0 24px 22px; font-size:15.5px; color:var(--gris-7); max-width:75ch; }

/* ---------- Foto + texto ---------- */
.split { display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center; }
@media (max-width:900px){ .split { grid-template-columns:1fr; } }
.split .foto { border-radius:16px; overflow:hidden; box-shadow:var(--sombra); }
.split .foto img { width:100%; height:100%; object-fit:cover; aspect-ratio:4/4.6; }
blockquote.cita { font-family:var(--display); font-size:21px; font-weight:400; line-height:1.5; color:var(--navy); border-left:4px solid var(--magenta); padding-left:22px; margin:18px 0; }
blockquote.cita footer { font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--gris-5); margin-top:10px; }

/* ---------- Clientes ---------- */
.clientes-row { display:flex; gap:14px; flex-wrap:wrap; }
.clientes-row span { flex:1; min-width:160px; text-align:center; border:1px solid var(--linea); background:var(--blanco); border-radius:10px; padding:18px 10px; font-weight:700; font-size:14px; letter-spacing:0.08em; color:var(--gris-7); }

/* ---------- CTA final ---------- */
.cta-final { background:var(--navy); color:#fff; text-align:center; padding:90px 24px; position:relative; overflow:hidden; }
.cta-final::before { content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--grad); }
.cta-final h2 { font-family:var(--display); font-weight:700; font-size:clamp(26px,3.6vw,40px); max-width:24ch; margin:0 auto 14px; }
.cta-final .sub { margin:0 auto 30px; }

/* ---------- Footer ---------- */
footer.site { background:#0D1538; color:rgba(255,255,255,0.72); padding:54px 0 30px; font-size:14px; }
footer.site .cols { display:grid; grid-template-columns:2fr 1fr 1fr; gap:36px; margin-bottom:36px; }
@media (max-width:800px){ footer.site .cols { grid-template-columns:1fr; } }
footer.site img.logo-f { height:52px; width:auto; margin-bottom:14px; }
footer.site h5 { color:#fff; font-size:12.5px; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:12px; }
footer.site a { color:rgba(255,255,255,0.72); text-decoration:none; display:block; padding:4px 0; }
footer.site a:hover { color:#fff; }
footer.site .legal { border-top:1px solid var(--linea-inv); padding-top:20px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; color:rgba(255,255,255,0.5); }

/* ---------- Landing ---------- */
body.lp header.lp-head { background:var(--blanco); border-bottom:1px solid var(--linea); }
body.lp header.lp-head .bar { display:flex; align-items:center; justify-content:space-between; padding:12px 24px; max-width:1000px; margin:0 auto; }
body.lp header.lp-head img { height:44px; }
body.lp header.lp-head .tel { font-size:14px; font-weight:700; color:var(--navy); text-decoration:none; }
body.lp main { max-width:1000px; margin:0 auto; padding:0 24px; }
body.lp .lp-hero { padding:64px 0 44px; }
body.lp footer.lp-foot { border-top:1px solid var(--linea); margin-top:70px; padding:26px 24px 40px; text-align:center; font-size:12.5px; color:var(--gris-5); }
body.lp footer.lp-foot a { color:var(--gris-5); }