/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg: #f5f7f6;
  --surface: #ffffff;
  --surface-2: #eef2f1;
  --text: #12211d;
  --text-muted: #52625d;
  --border: #d9e2df;
  --accent: #0f6e5c;
  --accent-strong: #0a4f42;
  --accent-contrast: #ffffff;

  --ok-bg: #e6f5ea; --ok-text: #146c2e; --ok-border: #b6e3c2;
  --warn-bg: #fff6e0; --warn-text: #8a5a00; --warn-border: #f2dd9c;
  --error-bg: #fdecec; --error-text: #a3241f; --error-border: #f3c2c0;
  --info-bg: #eef3fb; --info-text: #34547f; --info-border: #cfdcf0;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius: 12px;
  --radius-sm: 8px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-color: 10, 30, 25;
  --shadow-sm: 0 1px 2px rgba(var(--shadow-color), .06), 0 1px 1px rgba(var(--shadow-color), .05);
  --shadow-md: 0 2px 5px rgba(var(--shadow-color), .06), 0 8px 20px -6px rgba(var(--shadow-color), .12);
  --shadow-lg: 0 6px 14px rgba(var(--shadow-color), .1), 0 20px 44px -12px rgba(var(--shadow-color), .22);
  --shadow-glow: 0 0 0 1px rgba(var(--accent-rgb), .16), 0 10px 30px -8px rgba(var(--accent-rgb), .35);
  --accent-rgb: 15, 110, 92;
  --accent-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c1614;
    --surface: #12211d;
    --surface-2: #172823;
    --text: #eef5f2;
    --text-muted: #a9beb8;
    --border: #24413a;
    --accent: #35c299;
    --accent-strong: #59d6b1;
    --accent-contrast: #06120f;

    --ok-bg: #103322; --ok-text: #6fe0a0; --ok-border: #1c5238;
    --warn-bg: #362c0c; --warn-text: #f0c760; --warn-border: #5a4913;
    --error-bg: #3a1615; --error-text: #f5a19c; --error-border: #5c2624;
    --info-bg: #142337; --info-text: #a9c3ea; --info-border: #223a5c;

    --shadow-color: 0, 0, 0;
    --shadow-sm: 0 1px 2px rgba(var(--shadow-color), .35), 0 1px 1px rgba(var(--shadow-color), .3);
    --shadow-md: 0 2px 6px rgba(var(--shadow-color), .35), 0 10px 24px -6px rgba(var(--shadow-color), .45);
    --shadow-lg: 0 8px 18px rgba(var(--shadow-color), .4), 0 24px 50px -14px rgba(var(--shadow-color), .55);
    --accent-rgb: 53, 194, 153;
  }
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.12; letter-spacing: -0.01em; font-family: var(--serif); font-weight: 600; }
ul, ol { padding-left: 1.2em; }
::selection { background: var(--accent); color: var(--accent-contrast); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* =============================================================
   3. Utilities
   ============================================================= */
.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .6rem 1rem; background: var(--surface); color: var(--text);
  z-index: 9999; border-radius: var(--radius-sm); font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.skip-link:focus { top: 1rem; }
.container { width: min(1080px, 100% - 2.5rem); margin-inline: auto; }
.container-narrow { width: min(760px, 100% - 2.5rem); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* =============================================================
   4. Header / footer
   ============================================================= */
.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky; top: 0; z-index: 40;
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: .9rem;
}
.logo { display: flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.05rem; }
.logo-mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--accent-gradient); color: var(--accent-contrast);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700; font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 3px 8px -2px rgba(var(--accent-rgb), .55);
}
.nav-links { display: flex; gap: 1.4rem; align-items: center; font-size: .92rem; font-weight: 500; }
.nav-links a { color: var(--text-muted); transition: color .2s var(--ease-out); }
.nav-links a:hover, .nav-links a.is-active { color: var(--accent); }

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 4rem;
  padding-block: 2.4rem;
  color: var(--text-muted);
  font-size: .88rem;
}
.site-footer .container {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
}
.footer-links { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.footer-links a { transition: color .2s var(--ease-out); }
.footer-links a:hover { color: var(--accent); }
.footer-credit { width: 100%; font-size: .8rem; opacity: .75; margin-top: .6rem; }

/* =============================================================
   5. Hero
   ============================================================= */
.hero {
  padding-block: 2.6rem 1.6rem;
  position: relative;
}
.hero::before {
  content: "";
  position: absolute; z-index: -1; pointer-events: none;
  top: -4rem; left: -8%; width: 60%; height: 320px;
  background: radial-gradient(50% 60% at 30% 30%, rgba(var(--accent-rgb), .14), transparent 70%);
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .7rem;
}
.hero h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); max-width: 22ch; }
.hero p.lead {
  color: var(--text-muted); font-size: 1.06rem; max-width: 58ch; margin-top: .8rem;
}

/* =============================================================
   6. Tool card
   ============================================================= */
.tool-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem;
  box-shadow: var(--shadow-md);
  margin-top: 1.6rem;
}
.tool-card[data-state="done"] .forms-columns { opacity: .96; }
.comparador-form { display: block; }

.forms-columns {
  display: grid; gap: 1.2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 960px) { .forms-columns { grid-template-columns: 1fr 1fr; } }

.doc-form {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem 1.2rem;
  box-shadow: var(--shadow-sm);
}
.doc-form h2 {
  font-size: 1.02rem; font-family: var(--sans); font-weight: 700;
  margin-bottom: .2rem; display: flex; align-items: center; gap: .45rem;
}
.doc-form .doc-sub { font-size: .82rem; color: var(--text-muted); margin-bottom: .9rem; }

.field { margin-block: .65rem; }
.field label {
  display: block; font-size: .82rem; font-weight: 600; margin-bottom: .3rem; color: var(--text);
}
.field .hint { font-weight: 400; color: var(--text-muted); font-size: .78rem; }
.field input, .field select {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: .55rem .65rem;
  font: inherit;
  font-size: .93rem;
  transition: border-color .15s var(--ease-out);
}
.field input:focus, .field select:focus { border-color: var(--accent); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }

.tool-actions {
  display: flex; flex-wrap: wrap; gap: .7rem; align-items: center;
  margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid var(--border);
}
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .68rem 1.3rem; border-radius: 999px;
  font-weight: 700; font-size: .92rem;
  transition: transform .2s var(--ease-out), background .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s var(--ease-out);
}
.btn-primary {
  background: var(--accent-gradient); color: var(--accent-contrast);
  box-shadow: 0 2px 6px -1px rgba(var(--accent-rgb), .4), 0 8px 18px -6px rgba(var(--accent-rgb), .5);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 10px -1px rgba(var(--accent-rgb), .45), 0 14px 28px -8px rgba(var(--accent-rgb), .55); }
.btn-ghost { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { color: var(--text); border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: scale(.97) translateY(0); }

.privacy-badge {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: .84rem; color: var(--text-muted);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .7rem .9rem;
  margin-top: 1rem;
}

/* =============================================================
   7. Resultado / reporte
   ============================================================= */
[data-resultado] { margin-top: 1.4rem; }
.resumen-badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.badge {
  font-size: .84rem; font-weight: 700; padding: .35rem .75rem; border-radius: 999px;
}
.badge-ok { background: var(--ok-bg); color: var(--ok-text); }
.badge-warn { background: var(--warn-bg); color: var(--warn-text); }
.badge-error { background: var(--error-bg); color: var(--error-text); }

.reporte-lista { list-style: none; padding: 0; display: grid; gap: .5rem; }
.reporte-item {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .65rem .8rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border); font-size: .89rem;
}
.reporte-item.estado-ok { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-text); }
.reporte-item.estado-warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }
.reporte-item.estado-error { background: var(--error-bg); border-color: var(--error-border); color: var(--error-text); }
.reporte-item.estado-info { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); }
.reporte-icono { flex-shrink: 0; }
.reporte-texto strong { font-weight: 700; }

/* =============================================================
   8. Ad slots
   ============================================================= */
.ad-slot {
  min-height: 90px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, var(--surface-2), var(--bg));
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: .78rem;
  margin-block: 1.6rem;
}

/* =============================================================
   9. Content sections
   ============================================================= */
.section { padding-block: 1.6rem; }
.section h2 { font-size: 1.5rem; margin-bottom: .9rem; }
.section .lead-copy { color: var(--text-muted); max-width: 68ch; }
.section .lead-copy + .lead-copy { margin-top: .8rem; }

.steps { display: grid; gap: 1rem; margin-top: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1.1rem;
  box-shadow: var(--shadow-sm); transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.step-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-gradient); color: var(--accent-contrast);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; margin-bottom: .6rem;
  box-shadow: 0 2px 6px -1px rgba(var(--accent-rgb), .45);
}
.step h3 { font-size: .98rem; font-family: var(--sans); margin-bottom: .3rem; }
.step p { font-size: .87rem; color: var(--text-muted); }

.faq-list { margin-top: 1rem; display: grid; gap: .6rem; }
.faq-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .2rem .2rem;
  box-shadow: var(--shadow-sm); transition: box-shadow .2s var(--ease-out), border-color .2s var(--ease-out);
}
.faq-item:hover { box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.faq-item summary {
  cursor: pointer; padding: .85rem 1rem; font-weight: 600; font-size: .95rem;
  list-style: none; display: flex; justify-content: space-between; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--accent); font-weight: 700; font-size: 1.1rem; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { padding: 0 1rem 1rem; color: var(--text-muted); font-size: .9rem; }

.more-tools { display: grid; gap: 1rem; margin-top: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .more-tools { grid-template-columns: 1fr 1fr; } }
.more-tool-card {
  display: block; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.2rem;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.more-tool-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.more-tool-card h3 { font-size: 1.02rem; font-family: var(--sans); margin-bottom: .35rem; }
.more-tool-card p { font-size: .87rem; color: var(--text-muted); }

/* =============================================================
   10. Checklist page
   ============================================================= */
.tipo-selector { margin-top: 1.4rem; }
.tipo-selector select { max-width: 340px; }

.progreso-wrap { margin-top: 1rem; }
.progreso-texto { font-size: .85rem; color: var(--text-muted); margin-bottom: .4rem; font-weight: 600; }
.progreso-barra-track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.progreso-barra {
  height: 100%; background: var(--accent); border-radius: 999px;
  width: 0%; transition: width .3s var(--ease-out);
}

.doc-checklist { list-style: none; padding: 0; display: grid; gap: .65rem; margin-top: 1.3rem; }
.doc-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease-out), background .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.doc-item:hover { box-shadow: var(--shadow-md); }
.doc-item.is-checked { border-color: var(--ok-border); background: var(--ok-bg); }
.doc-label { display: flex; gap: .8rem; align-items: flex-start; padding: .9rem 1rem; cursor: pointer; }
.doc-label input[type="checkbox"] { width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--accent); flex-shrink: 0; }
.doc-info { display: flex; flex-direction: column; gap: .25rem; }
.doc-nombre { font-weight: 700; font-size: .96rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.doc-desc { font-size: .86rem; color: var(--text-muted); }
.tag-obligatorio, .tag-opcional {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: .15rem .5rem; border-radius: 999px;
}
.tag-obligatorio { background: var(--error-bg); color: var(--error-text); }
.tag-opcional { background: var(--info-bg); color: var(--info-text); }

/* =============================================================
   11. Legal pages
   ============================================================= */
.legal-page { padding-block: 2.5rem 3rem; }
.legal-page h1 { font-size: 1.8rem; margin-bottom: 1.2rem; }
.legal-page h2 { font-size: 1.1rem; margin-block: 1.4rem .5rem; }
.legal-page p, .legal-page li { color: var(--text-muted); font-size: .93rem; }
.legal-page section + section { margin-top: .5rem; }

/* =============================================================
   12. Responsive
   ============================================================= */
@media (max-width: 539px) {
  .field-row { grid-template-columns: 1fr; }
  .site-header .container { flex-wrap: wrap; row-gap: .5rem; padding-block: .7rem; }
  .nav-links { width: 100%; flex-wrap: wrap; gap: .5rem 1rem; font-size: .82rem; }
}

/* =============================================================
   13. Reduced motion (only intrusive effects)
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .progreso-barra { transition: none; }
}

/* =============================================================
   14. Print
   ============================================================= */
@media print {
  .site-header, .site-footer, .ad-slot, .ad-popup, .ad-toast, .tool-actions, .more-tools { display: none; }
}

/* =============================================================
   15. Costeo de importación — formulario, resultados y sugerencias
   ============================================================= */
.costeo-form { display: block; }

.field-full { grid-column: 1 / -1; }
.field-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
@media (max-width: 719px) { .field-row-3 { grid-template-columns: 1fr 1fr; } }

.check-row {
  display: flex; align-items: flex-start; gap: .6rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .7rem .85rem; margin-block: .65rem;
  box-shadow: var(--shadow-sm);
}
.check-row input[type="checkbox"] { width: 19px; height: 19px; margin-top: .1rem; accent-color: var(--accent); flex-shrink: 0; }
.check-row .check-text { font-size: .87rem; }
.check-row .check-text strong { display: block; font-size: .93rem; margin-bottom: .1rem; }
.check-row.is-disabled { opacity: .55; }

.categoria-sugerida {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .82rem; color: var(--text-muted); margin-top: .35rem;
}
.categoria-sugerida .badge-suggest {
  background: var(--info-bg); color: var(--info-text);
  font-weight: 700; padding: .18rem .6rem; border-radius: 999px; font-size: .74rem;
}

.rutas-grid { display: grid; gap: 1rem; margin-top: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .rutas-grid { grid-template-columns: repeat(3, 1fr); } }
.ruta-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.1rem 1.1rem 1.2rem;
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.ruta-card:not(.is-no-disponible):hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ruta-card.is-recomendada { border-color: var(--accent); box-shadow: var(--shadow-glow); }
.ruta-card.is-recomendada:hover { box-shadow: var(--shadow-glow), var(--shadow-md); }
.ruta-card.is-no-disponible { opacity: .6; box-shadow: none; }
.ruta-titulo { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1rem; margin-bottom: .2rem; }
.ruta-badge-reco {
  position: absolute; top: -10px; right: 1rem;
  background: var(--accent-gradient); color: var(--accent-contrast);
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: .2rem .55rem; border-radius: 999px;
  box-shadow: 0 2px 6px -1px rgba(var(--accent-rgb), .5);
}
.ruta-total { font-family: var(--serif); font-size: 1.6rem; font-weight: 700; margin: .5rem 0 .15rem; }
.ruta-total .moneda { font-size: .95rem; font-weight: 600; color: var(--text-muted); }
.ruta-sub { font-size: .78rem; color: var(--text-muted); margin-bottom: .8rem; }
.ruta-desglose { list-style: none; padding: 0; display: grid; gap: .3rem; font-size: .84rem; }
.ruta-desglose li { display: flex; justify-content: space-between; gap: .6rem; padding-block: .18rem; }
.ruta-desglose li.total-line { border-top: 1px solid var(--border); margin-top: .3rem; padding-top: .45rem; font-weight: 700; }
.ruta-nota { font-size: .78rem; color: var(--text-muted); margin-top: .7rem; padding-top: .6rem; border-top: 1px dashed var(--border); }

.sugerencias-lista { list-style: none; padding: 0; display: grid; gap: .55rem; margin-top: 1rem; }
.sugerencia-item {
  display: flex; gap: .6rem; align-items: flex-start;
  background: var(--info-bg); color: var(--info-text); border: 1px solid var(--info-border);
  border-radius: var(--radius-sm); padding: .65rem .85rem; font-size: .88rem;
}
.sugerencia-item.tipo-ahorro { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-border); }
.sugerencia-item.tipo-alerta { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-border); }
.sugerencia-icono { flex-shrink: 0; }

.mapa-entrada-wrap {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .8rem .8rem .6rem; margin-top: 1.2rem;
  box-shadow: var(--shadow-sm);
}
.mapa-entrada { width: 100%; height: auto; display: block; max-height: 340px; }
.mapa-entrada-fondo {
  font-family: var(--serif); font-size: 46px; font-weight: 700;
  fill: var(--surface-2); letter-spacing: 2px;
}
.nodo-entrada .nodo-anillo { fill: none; stroke: var(--border); stroke-width: 2.5; transition: stroke .2s var(--ease-out), stroke-width .2s var(--ease-out); }
.nodo-entrada .nodo-punto { fill: var(--border); transition: fill .2s var(--ease-out); }
.nodo-entrada .nodo-modo {
  font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .04em;
  fill: var(--text-muted); opacity: .55;
}
.nodo-entrada .nodo-label { font-family: var(--sans); font-size: 12.5px; font-weight: 600; fill: var(--text-muted); opacity: .6; }
.nodo-entrada.is-disponible .nodo-anillo { stroke: var(--accent); }
.nodo-entrada.is-disponible .nodo-punto { fill: var(--accent); }
.nodo-entrada.is-disponible .nodo-modo,
.nodo-entrada.is-disponible .nodo-label { fill: var(--text); opacity: 1; }
.nodo-entrada.is-mejor .nodo-anillo { stroke: var(--accent-strong); stroke-width: 4; }
.nodo-entrada.is-mejor .nodo-punto { fill: var(--accent-strong); r: 8; }
.nodo-entrada.is-mejor .nodo-label { font-weight: 700; }
.mapa-entrada-leyenda {
  display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; justify-content: center;
  font-size: .78rem; color: var(--text-muted); padding: .5rem 0 .3rem;
}
.mapa-entrada-leyenda .leyenda-punto {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--border); margin-right: .3rem; vertical-align: middle;
}
.leyenda-punto.is-mejor-leyenda { background: var(--accent-strong); }
.leyenda-punto.is-disponible-leyenda { background: var(--accent); }

/* =============================================================
   16. Ad slot variants (rect / mid-content) + interstitial + toast
   ============================================================= */
.ad-slot--rect {
  min-height: 250px; max-width: 336px; margin-inline: auto;
  flex-direction: column; gap: .3rem;
}
.ad-slot-tag { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }

.ad-popup {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0; max-width: min(420px, 92vw); width: 100%;
  background: var(--surface); color: var(--text);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.ad-popup::backdrop { background: rgba(10, 20, 18, .55); }
.ad-popup-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 1rem; border-bottom: 1px solid var(--border);
}
.ad-popup-head span { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.ad-popup-close {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; line-height: 1; color: var(--text-muted);
  transition: background .15s var(--ease-out), color .15s var(--ease-out);
}
.ad-popup-close:hover { background: var(--surface-2); color: var(--text); }
.ad-popup-body { padding: 1.1rem; }
.ad-popup .ad-slot { margin-block: 0; min-height: 220px; }
.ad-popup-foot { padding: .8rem 1rem 1.1rem; text-align: center; }

.ad-toast {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 60;
  max-width: 280px; width: calc(100vw - 2rem);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  padding: .8rem .9rem;
  display: flex; align-items: flex-start; gap: .6rem;
  transform: translateY(16px); opacity: 0; pointer-events: none;
  transition: transform .3s var(--ease-out), opacity .3s var(--ease-out);
}
.ad-toast.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.ad-toast-tag { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); display: block; margin-bottom: .2rem; }
.ad-toast-body { font-size: .82rem; flex: 1; }
.ad-toast-close {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: .95rem;
}
.ad-toast-close:hover { background: var(--surface-2); color: var(--text); }
@media (prefers-reduced-motion: reduce) { .ad-toast { transition: opacity .2s linear; } }

/* =============================================================
   17. Portada (hub) — hero de impacto + 3 tarjetas de acción
   ============================================================= */
.hub-hero {
  position: relative;
  padding-block: 3.2rem 1rem;
  overflow: clip;
}
.hub-hero::before {
  content: "";
  position: absolute; inset: -20% -10% auto -10%; height: 480px;
  background: radial-gradient(55% 60% at 50% 0%, rgba(15,110,92,.16), transparent 70%);
  pointer-events: none;
}
.hub-hero h1 { font-size: clamp(2.1rem, 5vw, 3rem); max-width: 20ch; margin-inline: auto; text-align: center; }
.hub-hero .hero-kicker { display: flex; justify-content: center; }
.hub-hero .lead { max-width: 56ch; margin-inline: auto; text-align: center; }

.trust-row {
  display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .5rem 1.3rem;
  margin-top: 1rem; font-size: .84rem; color: var(--text-muted); font-weight: 600;
}
.trust-row span { display: inline-flex; align-items: center; gap: .35rem; }
.hub-hero .trust-row { justify-content: center; margin-top: 1.6rem; }

.action-cards {
  display: grid; gap: 1.4rem; grid-template-columns: 1fr;
  margin-top: 2.2rem; position: relative;
}
@media (min-width: 960px) { .action-cards { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }

.action-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.6rem 1.5rem 1.7rem;
  box-shadow: var(--shadow-md);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out);
  opacity: 0; animation: actionCardIn .5s var(--ease-out) forwards;
}
.action-card:nth-child(1) { animation-delay: .05s; }
.action-card:nth-child(2) { animation-delay: .18s; }
.action-card:nth-child(3) { animation-delay: .31s; }
@keyframes actionCardIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .action-card { animation-duration: .01s; animation-delay: 0s !important; }
}
.action-card:hover, .action-card:focus-within {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
}
.action-card-num {
  position: absolute; top: -14px; left: 1.4rem;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent-gradient); color: var(--accent-contrast);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem; box-shadow: 0 3px 10px -1px rgba(var(--accent-rgb), .5);
}
.action-card-icon {
  width: 54px; height: 54px; border-radius: var(--radius-sm);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; margin-bottom: 1rem;
  transition: transform .25s var(--ease-out);
}
.action-card:hover .action-card-icon { transform: scale(1.08) rotate(-3deg); }
.action-card h2 { font-size: 1.15rem; font-family: var(--sans); font-weight: 700; margin-bottom: .45rem; }
.action-card p { color: var(--text-muted); font-size: .9rem; flex: 1; }
.action-card .btn { margin-top: 1.2rem; align-self: flex-start; }

.action-card-arrow {
  display: none;
  position: absolute; top: 50%; right: -1.05rem; translate: 0 -50%;
  font-size: 1.3rem; color: var(--border); z-index: 1;
}
@media (min-width: 960px) {
  .action-card:not(:last-child) .action-card-arrow { display: block; }
}

.hub-value-row {
  display: grid; gap: 1rem; margin-top: 1rem; grid-template-columns: 1fr;
}
@media (min-width: 720px) { .hub-value-row { grid-template-columns: repeat(3, 1fr); } }
.hub-value-item { text-align: center; }
.hub-value-item .value-icon { font-size: 1.8rem; margin-bottom: .5rem; }
.hub-value-item h3 { font-size: 1rem; font-family: var(--sans); margin-bottom: .3rem; }
.hub-value-item p { font-size: .87rem; color: var(--text-muted); }