/* ==========================================================
   VOTE360 — Páginas del motor de contenido
   Se carga DESPUÉS de pages-index-landing-2026-r2.css y hereda
   todos sus tokens (--gold-*, --ink-*, --line, --shell…).
   Aquí solo va lo específico de una página de contenido largo.
   Ver CONTENT_ENGINE_SPEC.md §4.1
   ========================================================== */

/* El landing es una secuencia de secciones a pantalla completa; una página
   de contenido es un documento. Ancho de lectura, no de escaparate. */
.content-page .shell { max-width: 1080px; }

/* ---------- Hero ---------- */
.cont-hero {
  position: relative;
  padding: clamp(96px, 12vw, 150px) 0 clamp(40px, 6vw, 70px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.cont-hero h1 {
  font-size: clamp(34px, 5.2vw, 66px);
  margin: 18px 0 22px;
  max-width: 18ch;
}
.cont-hero .lead-answer {
  max-width: 68ch;
  font-size: clamp(16px, 1.5vw, 19px);
}
.cont-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Migas: discretas pero presentes (acompañan al BreadcrumbList del schema) */
.cont-trail {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 26px;
}
.cont-trail a { color: var(--ink-3); border-bottom: 1px solid transparent; }
.cont-trail a:hover { color: var(--gold-2); border-bottom-color: var(--gold-4); }
.cont-trail [aria-current="page"] { color: var(--gold-3); }
.trail-sep { color: var(--ink-4); }

/* ---------- Cuerpo ---------- */
.cont-body { padding: clamp(50px, 7vw, 90px) 0 clamp(70px, 9vw, 110px); }
.cont-sec { margin-bottom: clamp(50px, 7vw, 88px); }
.cont-sec .section-title {
  font-size: clamp(26px, 3.4vw, 42px);
  margin-bottom: 22px;
  max-width: 24ch;
}
.cont-sec .lead + .lead { margin-top: 16px; }
.cont-sec .lead { max-width: 72ch; }
.cont-sec a { color: var(--gold-2); border-bottom: 1px solid var(--gold-5); }
.cont-sec a:hover { border-bottom-color: var(--gold-2); }

/* ---------- Lista de conceptos ---------- */
.cont-lista { display: grid; gap: 14px; margin-top: 26px; }
.cont-lista li {
  display: grid; grid-template-columns: minmax(140px, 210px) 1fr;
  gap: 20px; align-items: baseline;
  padding: 20px 22px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.014);
  transition: border-color var(--t-med), transform var(--t-med);
}
.cont-lista li:hover { border-color: var(--line-strong); transform: translateX(4px); }
.cont-lista strong { color: var(--gold-2); font-weight: 500; font-size: 16px; }
.cont-lista span { color: var(--ink-2); font-size: 15px; line-height: 1.6; }
@media (max-width: 720px) {
  .cont-lista li { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- Pasos numerados ---------- */
.cont-pasos { display: grid; gap: 4px; margin-top: 26px; counter-reset: paso; }
.cont-pasos li {
  display: grid; grid-template-columns: 54px 1fr; gap: 18px;
  padding: 22px 20px;
  border-bottom: 1px solid var(--line);
}
.cont-pasos li:last-child { border-bottom: 0; }
.paso-num {
  font-size: 13px; color: var(--gold-4); letter-spacing: 0.08em;
  padding-top: 2px;
}
.cont-pasos strong {
  display: block; color: var(--ink); font-weight: 500;
  font-size: 17px; margin-bottom: 6px; letter-spacing: -0.01em;
}
.cont-pasos span { color: var(--ink-2); font-size: 15px; line-height: 1.6; }

/* ---------- Datos ---------- */
.cont-datos {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.6vw, 34px);
  margin-top: 30px; padding: clamp(26px, 3.6vw, 42px);
  border: 1px solid var(--line-strong); border-radius: var(--radius-xl);
  background:
    radial-gradient(620px 300px at 50% -20%, rgba(233, 213, 154, 0.08), transparent 65%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
}
@media (max-width: 720px) { .cont-datos { grid-template-columns: repeat(2, 1fr); } }
.cont-dato { display: flex; flex-direction: column; gap: 5px; }
.cont-dato strong {
  font-size: clamp(26px, 3vw, 40px); font-weight: 500;
  letter-spacing: -0.03em; line-height: 1;
}
.cont-dato span { color: var(--ink-3); font-size: 13px; line-height: 1.45; }
.cont-nota {
  margin-top: 16px; font-size: 10.5px; letter-spacing: 0.14em;
  color: var(--ink-4); text-transform: uppercase;
}

/* ---------- Comparativa: check dorado (el landing usa una imagen) ---------- */
.cont-sec .cmp-ok {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex: 0 0 18px;
  border-radius: 4px; font-size: 11px;
  background: rgba(233, 213, 154, 0.12); color: var(--gold-2);
}

/* ---------- FAQ ---------- */
.cont-faq { padding-top: 10px; }

/* ---------- Relacionadas ---------- */
.cont-rel-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px; margin-top: 26px;
}
.cont-rel-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px 22px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.014);
  transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
}
.cont-rel-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-gold);
}
.cont-rel-tag {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-4);
}
.cont-rel-card strong {
  color: var(--ink); font-weight: 500; font-size: 19px;
  letter-spacing: -0.015em; line-height: 1.25;
}
.cont-rel-d { color: var(--ink-3); font-size: 14px; line-height: 1.55; }
.cont-rel-card .sol-cta { margin-top: auto; padding-top: 8px; color: var(--gold-2); font-size: 14px; }

/* ---------- CTA final ---------- */
.cont-cta {
  margin-top: clamp(60px, 8vw, 100px);
  padding: clamp(36px, 5vw, 64px);
  text-align: center;
  border: 1px solid var(--line-strong); border-radius: var(--radius-xl);
  background:
    radial-gradient(700px 340px at 50% -10%, rgba(233, 213, 154, 0.10), transparent 65%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
}
.cont-cta .final-title {
  font-size: clamp(28px, 4vw, 50px);
  margin: 0 auto 18px; max-width: 20ch;
}
.cont-cta .lead { margin: 0 auto 30px; max-width: 62ch; }

/* Evita que el CTA fijo del móvil tape el final del documento */
@media (max-width: 820px) {
  .cont-body { padding-bottom: 120px; }
}


/* ============================================================
 * CALENDARIO ELECTORAL (fase D) — bloques calendario_pais y
 * calendario_regional. La tabla scrollea en su contenedor; el
 * body nunca scrollea horizontal.
 * ============================================================ */
.cal-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); margin-top: 26px; -webkit-overflow-scrolling: touch; }
.cal-table { width: 100%; border-collapse: collapse; min-width: 680px; font-size: 14.5px; }
.cal-table th { text-align: left; padding: 12px 16px; font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line-strong); background: rgba(255, 255, 255, .02); white-space: nowrap; }
.cal-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); line-height: 1.5; }
.cal-table tbody tr:last-child td { border-bottom: 0; }
.cal-table tbody tr:hover td { background: rgba(255, 255, 255, .015); }
.cal-fecha { white-space: nowrap; color: var(--gold-2); font-size: 13px; }
.cal-titulo strong { display: block; color: var(--ink-1); font-weight: 500; }
.cal-nota { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-3); }
.cal-cargos { font-size: 13.5px; }
.cal-pais a { color: var(--ink-1); text-decoration: none; white-space: nowrap; }
.cal-pais a:hover { color: var(--gold-2); }
.cal-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-family: var(--font-mono, monospace); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; border: 1px solid; }
.cal-ok   { color: #7ddb8a; border-color: rgba(125, 219, 138, .35); background: rgba(125, 219, 138, .08); }
.cal-ley  { color: var(--gold-2); border-color: rgba(233, 213, 154, .35); background: rgba(233, 213, 154, .07); }
.cal-proy { color: var(--ink-3); border-color: var(--line-strong); background: rgba(255, 255, 255, .03); }
.cal-inc  { color: #e0a3a3; border-color: rgba(224, 163, 163, .35); background: rgba(224, 163, 163, .07); }
.cal-anio { margin: 40px 0 0; font-size: 22px; color: var(--gold-2); letter-spacing: .04em; }
.cal-anio:first-of-type { margin-top: 26px; }
.cal-fuente { margin-top: 12px; font-size: 12.5px; color: var(--ink-3); }
.cal-link-full { margin-top: 14px; }
.cal-link-full a { color: var(--gold-2); text-decoration: none; font-weight: 500; }
.cal-link-full a:hover { text-decoration: underline; }
@media (max-width: 720px) {
    .cal-table { min-width: 560px; font-size: 13.5px; }
    .cal-table th, .cal-table td { padding: 10px 12px; }
}