/* ═══════════════════════════════════════════════════════════════════════════
   site-footer.css — el footer de TODO el sitio (AR, CL, CO, BR, MX)
   Lo escribe scripts/sync-footer.mjs a partir de scripts/_lib/footer.mjs.

   POR QUÉ (2026-10-03)
   El footer de la home AR usaba la mitad izquierda para una marca con tres líneas
   y la derecha para dos listas de UNA columna, con 14px de aire más el alto táctil
   de 44px: 16 filas ≈ 900px de footer en desktop. Las páginas de guías y
   comparativas, en cambio, cerraban con una línea de links (o sin nada).

   Ahora: marca angosta + dos grupos de links en DOS columnas cada uno. En móvil se
   apilan marca → Herramientas → Recursos, siempre con las listas en dos columnas.

   ⚠️ Los selectores llevan `footer.hcc-foot` adelante a propósito: las páginas
   generadas traen su propia regla `footer{…}` (centrado, padding, color) y esto
   tiene que ganarle sin `!important`.
   ═══════════════════════════════════════════════════════════════════════════ */
footer.hcc-foot{
  --ft-bg:#2c3635;
  background:var(--ft-bg);color:rgba(255,255,255,.72);
  margin:48px 0 0;padding:0 0 var(--ft-pb,0px);border:0;
  font:400 14px/1.5 -apple-system,BlinkMacSystemFont,"DM Sans","DM Sans Fallback","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  text-align:left;width:100%;max-width:none;box-sizing:border-box;position:relative;overflow:hidden;
}
footer.hcc-foot *{box-sizing:border-box}
footer.hcc-foot p{margin:0;color:inherit;font-size:inherit;max-width:none}
footer.hcc-foot a{color:rgba(255,255,255,.8);text-decoration:none;font-weight:500;border:0}
footer.hcc-foot a:hover{color:#fff}
footer.hcc-foot a:focus-visible{outline:2px solid #f5b841;outline-offset:2px;border-radius:4px}
footer.hcc-foot a:visited{color:rgba(255,255,255,.8)}

/* ── Marca + listas ─────────────────────────────────────────────────────── */
footer.hcc-foot .footer-grid{
  display:grid;grid-template-columns:minmax(210px,.7fr) minmax(0,2.3fr);gap:48px;
  max-width:1200px;margin:0 auto;padding:44px 28px 24px;align-items:start;
}
footer.hcc-foot .footer-logo{display:inline-flex;align-items:center;margin-bottom:14px;min-height:44px}
footer.hcc-foot .footer-logo img{display:block;width:auto;height:22px}
footer.hcc-foot .footer-desc{font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.7);max-width:290px;margin-bottom:12px}
footer.hcc-foot .footer-mail{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;min-height:36px}
footer.hcc-foot .footer-status{display:flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(255,255,255,.62);margin-top:2px}
footer.hcc-foot .footer-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;flex:0 0 auto}

footer.hcc-foot .footer-links-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
footer.hcc-foot .footer-label{font-size:12px;font-weight:700;color:rgba(255,255,255,.62);text-transform:uppercase;letter-spacing:.12em;margin:0 0 10px}
footer.hcc-foot .footer-res-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}
footer.hcc-foot .footer-res-grid a{
  display:flex;align-items:flex-start;gap:9px;min-height:40px;padding:8px 0;
  font-size:14px;line-height:1.35;white-space:normal;
}
footer.hcc-foot .footer-res-grid .fic{flex:0 0 18px;width:18px;height:19px;display:inline-flex;align-items:center;justify-content:center;color:var(--ft-ico,#dbe64c)}
footer.hcc-foot .ico{width:18px;height:18px;flex:none}
footer.hcc-foot .footer-mail .ico{width:16px;height:16px;margin-right:2px;color:#dbe64c}

/* ── Fuentes, aclaración y créditos: alineados con el contenedor ─────────── */
footer.hcc-foot .footer-sources,
footer.hcc-foot .footer-note,
footer.hcc-foot .footer-bottom-in{max-width:1200px;margin:0 auto;padding-left:28px;padding-right:28px;position:relative}
footer.hcc-foot .footer-sources::before,
footer.hcc-foot .footer-bottom::before{content:"";position:absolute;top:0;left:28px;right:28px;border-top:1px solid rgba(255,255,255,.09)}
footer.hcc-foot .footer-sources{display:flex;flex-wrap:wrap;align-items:center;gap:2px 16px;padding-top:14px;padding-bottom:8px;font-size:12.5px;color:rgba(255,255,255,.62)}
footer.hcc-foot .footer-sources a{display:inline-flex;align-items:center;min-height:36px;font-weight:600;color:rgba(255,255,255,.82);text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);text-underline-offset:3px}
footer.hcc-foot .footer-sources a:hover{text-decoration-color:currentColor}
footer.hcc-foot .footer-sep{opacity:.4}
footer.hcc-foot .footer-note{font-size:12px;line-height:1.6;color:rgba(255,255,255,.58);padding-bottom:18px}
footer.hcc-foot .footer-note a{text-decoration:underline;text-underline-offset:2px}

footer.hcc-foot .footer-bottom{position:relative}
footer.hcc-foot .footer-bottom-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 24px;padding-top:12px;padding-bottom:16px;font-size:13px;color:rgba(255,255,255,.62)}
footer.hcc-foot .footer-made{line-height:1.5}
footer.hcc-foot .footer-made a{display:inline-flex;align-items:center;min-height:36px;padding:0 1px;color:rgba(255,255,255,.88)}
footer.hcc-foot .footer-heart{color:#ef4444}
footer.hcc-foot .footer-follow{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;font-size:12.5px}
footer.hcc-foot .footer-follow a{display:inline-flex;align-items:center;gap:6px;min-height:36px;color:rgba(255,255,255,.7)}
footer.hcc-foot .footer-follow a.footer-social:hover{color:#fff}
footer.hcc-foot .footer-by{color:rgba(255,255,255,.55)}

/* ── Tablet: marca arriba a todo el ancho, las dos listas debajo ─────────── */
@media(max-width:900px){
  footer.hcc-foot .footer-grid{grid-template-columns:minmax(0,1fr);gap:20px;padding-top:36px}
  footer.hcc-foot .footer-desc{max-width:520px}
  footer.hcc-foot .footer-links-row{grid-template-columns:minmax(0,1fr);gap:22px}
}
/* ── Móvil: se mantienen DOS columnas dentro de cada grupo (una sola columna
      hace el footer el doble de alto sin ganar legibilidad) ─────────────── */
@media(max-width:560px){
  footer.hcc-foot{margin-top:36px}
  footer.hcc-foot .footer-grid,
  footer.hcc-foot .footer-sources,
  footer.hcc-foot .footer-note,
  footer.hcc-foot .footer-bottom-in{padding-left:16px;padding-right:16px}
  footer.hcc-foot .footer-sources::before,
  footer.hcc-foot .footer-bottom::before{left:16px;right:16px}
  footer.hcc-foot .footer-grid{padding-top:30px;padding-bottom:16px}
  footer.hcc-foot .footer-res-grid{gap:0 14px}
  footer.hcc-foot .footer-res-grid a{font-size:13.5px;gap:7px;min-height:44px;padding:6px 0;align-items:center}
  footer.hcc-foot .footer-bottom-in{flex-direction:column;align-items:flex-start}
  footer.hcc-foot .footer-sep{display:none}
}
@media(max-width:340px){
  footer.hcc-foot .footer-res-grid{grid-template-columns:minmax(0,1fr)}
}
/* ═══ Controles táctiles en móvil (7-oct-2026) ═══════════════════════════════════════════════════
   Barrido en iPhone (320/375/414 px) de 57 páginas: sin desbordes, pero (1) 17 campos con fuente < 16 px — Safari hace
   zoom al enfocarlos y la página «salta» —, (2) resúmenes de FAQ de 26 px de alto, botones de rango de 22 px y
   selectores de idioma de 20 px, todos bajo los ~40 px que un dedo acierta bien. Reglas globales porque estas páginas
   no comparten hoja de estilo; el pie las carga todas. */
@media(max-width:640px){
  input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=button]):not([type=submit]):not([type=file]),select,textarea{font-size:16px!important}
  summary{min-height:44px;box-sizing:border-box}
  .chip-btn{min-height:40px}
  #lang-btn-es,#lang-btn-en,#btn-lang-es,#btn-lang-en,#b-es,#b-en{min-height:40px;min-width:40px}
  a.logo,a.home{display:inline-flex;align-items:center;min-height:44px}
  #lang-l1,#lang-en,.hcc-cm-trigger{min-width:40px}
  .filter-pill{min-height:40px}
  .rescue-opt{min-height:36px;padding-block:8px}
}
/* ═══ Barra fija «Calculá tu cuota» (scripts/_lib/cta-fijo.mjs; el HTML sólo existe en páginas de contenido) ═══ */
.cta-fijo{position:fixed;left:0;right:0;bottom:0;z-index:900;display:none;align-items:center;gap:10px;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid rgba(72,89,70,.14);box-shadow:0 -4px 18px rgba(44,54,53,.08);font-family:"DM Sans","DM Sans Fallback",system-ui,sans-serif}
.cta-fijo.on{display:flex}
.cta-fijo .cf-txt{flex:1;min-width:0;font-size:13.5px;font-weight:700;line-height:1.25;color:#2a2a26}
.cta-fijo .cf-go{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:12px;background:#dbe64c;color:#2a2a26;font-size:14px;font-weight:800;text-decoration:none;white-space:nowrap}
.cta-fijo .cf-x{flex:none;width:36px;height:44px;border:0;background:none;color:#5f5e5a;font-size:22px;line-height:1;cursor:pointer}
@media(min-width:900px){.cta-fijo{display:none!important}}
@media(max-width:899px){footer.hcc-foot{--ft-pb:calc(72px + env(safe-area-inset-bottom,0px))}}
@media print{.cta-fijo{display:none!important}}
@media print{footer.hcc-foot{display:none}}