/* ============================================================
   Guía ECOEMS — guia-2027.css  (rediseño 02-oct-2026)
   Capa de tema que se carga DESPUÉS de site.css.
   Identidad: "cuaderno de estudio" — papel claro, renglones
   tenues, margen guinda, lectura cómoda. Paleta hermana de
   cursoecoems.mx (tokens --ce-* de CLAUDE.md, WCAG AA).
   Contrastes calculados con tools/contraste.py (ver PROPUESTA.md).
   Rollback: quitar el <link> a este archivo en _includes/head.php.
   ============================================================ */

:root {
  /* Paleta hermana cursoecoems */
  --ce-primary: #9D2555;       /* blanco encima 7.42:1 */
  --ce-primary-dark: #6B1E3A;  /* blanco encima 11.22:1 */
  --ce-secondary: #285C5E;     /* sobre papel 7.12:1 */
  --ce-accent-text: #8A6A1F;   /* sobre papel 4.76:1 (solo texto pequeño sobre papel/blanco) */
  --ce-black: #1A1D1D;         /* sobre papel 16.02:1 */
  --ce-gray-700: #565959;      /* sobre papel 6.68:1 */
  --ce-beige: #E0CCA6;         /* SOLO fondos y subrayados */

  /* Superficies */
  --g-paper: #FBF8F3;
  --g-tint: #F4ECDF;
  --g-rule: #E3D9C8;
  --g-line: rgba(40, 92, 94, 0.07); /* renglón del cuaderno */

  /* Re-mapeo de los tokens de site.css → toda la base hereda la paleta nueva */
  --c-primary: var(--ce-primary);
  --c-primary-deep: var(--ce-primary-dark);
  --c-primary-soft: var(--ce-beige);
  --c-primary-tint: var(--g-tint);
  --c-secondary: var(--ce-secondary);
  --c-secondary-deep: var(--ce-black);
  --c-secondary-soft: #4A7F81;
  --c-paper: var(--g-paper);
  --c-paper-deep: var(--g-tint);
  --c-paper-edge: var(--g-rule);
  --c-ink: var(--ce-black);
  --c-ink-soft: var(--ce-gray-700);
  --c-ink-mute: var(--ce-gray-700);
  --c-rule: var(--g-rule);
  --c-rule-soft: #EDE5D7;
  --c-buy: var(--ce-primary);
  --c-buy-deep: var(--ce-primary-dark);
  --c-buy-tint: #F7E9EF;

  --maxw-narrow: 720px;
  --focus-ring: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--ce-secondary);
  --sh-1: 0 1px 2px rgba(26, 29, 29, .04), 0 2px 8px rgba(26, 29, 29, .05);
  --sh-2: 0 2px 4px rgba(26, 29, 29, .06), 0 8px 20px rgba(26, 29, 29, .07);
}

/* ─── Base de lectura ─────────────────────────────────────── */
body {
  font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--g-paper);
  color: var(--ce-black);
}
body::before { display: none; } /* sin grano: el texto se lee más nítido */
h4, .card::after, .btn, .btn-buy, .ge-uninav, .faq-item summary,
table.data th, table.data td::before, .ge-unifooter h4 { font-family: 'Noto Sans', sans-serif; }
h1, h2, h3 { color: var(--ce-black); }
h4 { color: var(--ce-secondary); }
strong, b { color: inherit; }
em, i { color: inherit; }
a { color: var(--ce-secondary); }
a:hover { color: var(--ce-primary-dark); }
::selection { background: var(--ce-beige); color: var(--ce-black); }
:focus-visible { outline: 3px solid var(--ce-secondary); outline-offset: 2px; }

/* ─── Navegación: blanca, 4 enlaces + CTA ─────────────────── */
.ge-uninav {
  background: rgba(255, 255, 255, 0.96);
  border-block-end: 1px solid var(--g-rule);
}
.ge-uninav-mark {
  background: var(--ce-primary);
  color: #FFFFFF;
  border-radius: 6px;
}
.ge-uninav-mark::after { border-color: rgba(255, 255, 255, 0.35); }
.ge-uninav-brand { color: var(--ce-black); }
.ge-brand-pre { color: var(--ce-primary); }
.ge-uninav-menu { gap: var(--sp-6); }
.ge-uninav-menu a { color: var(--ce-black); font-weight: 500; font-size: var(--fs-base); }
.ge-uninav-menu a:hover { color: var(--ce-primary); }
.ge-uninav-menu a::after { background: var(--ce-primary); }
.ge-uninav-menu a[aria-current="page"] { color: var(--ce-primary); }
.ge-uninav-menu .ge-uninav-cta {
  background: var(--ce-primary);
  color: #FFFFFF !important;
  border-radius: 999px;
  box-shadow: none;
}
.ge-uninav-menu .ge-uninav-cta:hover { background: var(--ce-primary-dark); filter: none; box-shadow: none; }
.ge-uninav-toggle span { background: var(--ce-black); }
@media (max-width: 920px) {
  .ge-uninav-menu { background: #FFFFFF; }
  .ge-uninav-menu a[aria-current="page"] { background: var(--g-tint); }
}

/* ─── Hero: papel claro con renglones y margen guinda ─────── */
.hero {
  background-color: #FFFFFF;
  background-image:
    repeating-linear-gradient(to bottom, transparent 0, transparent 2.15rem, var(--g-line) 2.15rem, var(--g-line) calc(2.15rem + 1px)),
    linear-gradient(180deg, #FFFFFF 0%, var(--g-paper) 100%);
  color: var(--ce-black);
  border-block-end: 1px solid var(--g-rule);
}
.hero::after { display: none; }
.hero::before { display: none; }
/* Margen guinda del cuaderno: solo donde hay espacio libre a la izquierda del texto */
@media (min-width: 1280px) {
  .hero::before {
    display: block;
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: calc((100% - var(--maxw)) / 2 - 1.5rem);
    width: 1px;
    background: rgba(157, 37, 85, 0.25);
    z-index: 0;
  }
}
.hero h1 { color: var(--ce-black); }
.hero h1 .accent {
  color: var(--ce-primary);
  background: linear-gradient(to top, rgba(224, 204, 166, 0.55) 0, rgba(224, 204, 166, 0.55) 0.32em, transparent 0.32em);
  padding-inline: 0.06em;
}
.hero h1 .accent::after { display: none; }
.hero-eyebrow {
  background: var(--g-tint);
  border: 1px solid var(--ce-beige);
  color: var(--ce-primary-dark);
  letter-spacing: 0.08em;
}
.hero-eyebrow::before { background: var(--ce-primary); box-shadow: none; animation: none; }
.hero .lead {
  font-family: 'Noto Sans', sans-serif;
  font-style: normal;
  font-size: var(--fs-lg);
  color: var(--ce-gray-700);
  line-height: 1.65;
}
.hero .lead strong { font-family: inherit; color: var(--ce-black); }
.hero .hero-targets { color: var(--ce-black) !important; } /* tenía color blanco en línea */
.ajolote { filter: drop-shadow(0 8px 18px rgba(26, 29, 29, 0.12)); }

/* ─── Botones: teal = estudiar, guinda = comprar ──────────── */
.btn-primary {
  background: var(--ce-secondary);
  color: #FFFFFF !important;
  box-shadow: var(--sh-1);
}
.btn-primary:hover { background: #1F4A4C; box-shadow: var(--sh-2); }
.btn-secondary { background: var(--ce-secondary); }
.btn-secondary:hover { background: #1F4A4C; }
.btn-outline-white {
  background: #FFFFFF;
  color: var(--ce-secondary) !important;
  border-color: var(--ce-secondary);
}
.btn-outline-white:hover { background: var(--g-tint); border-color: var(--ce-secondary); }
.btn, .btn-buy { border-radius: 999px; }
.btn-buy {
  background: var(--ce-primary);
  box-shadow: 0 4px 12px rgba(157, 37, 85, 0.22);
  white-space: normal;
  text-align: center;
}
.btn-buy::before { display: none; }
.btn-buy:hover { background: var(--ce-primary-dark); filter: none; box-shadow: 0 6px 16px rgba(107, 30, 58, 0.28); }
.btn-buy:focus-visible { box-shadow: var(--focus-ring); }

/* ─── Secciones y tarjetas ─────────────────────────────────── */
.section.alt { background: var(--g-tint); }
.section + .section:not(.alt):not(.hero)::before,
.section.alt + .section.alt::before { color: var(--ce-primary); background: var(--g-paper); border-color: var(--g-rule); }
.section-eyebrow { color: var(--ce-accent-text); }
.section-eyebrow::before, .section-eyebrow::after { background: var(--ce-beige); }
.section-sub { color: var(--ce-gray-700); }
.card { border-color: var(--g-rule); }
.card:hover { border-color: var(--ce-secondary); }
.card::before { --c-primary: var(--ce-secondary); }
.card::after { color: var(--ce-primary); }
.card-icon { background: var(--g-tint); }
.card:hover .card-icon { background: var(--ce-beige); }

/* ─── Artículo: medida de lectura y jerarquía clara ───────── */
.article p, .article ul, .article ol { font-size: 1.125rem; line-height: 1.75; }
.article > h1 { color: var(--ce-black); }
.article-meta { color: var(--ce-gray-700); border-color: var(--g-rule); }
.article h2 { color: var(--ce-black); }
.article h2::before { background: var(--ce-primary); width: 2.5rem; height: 3px; }
.article h3 { color: var(--ce-secondary); }
.article ul li::before { background: var(--ce-secondary); width: 0.42em; height: 0.42em; top: 0.72em; }
li::marker { color: var(--ce-secondary); }
.article a {
  color: var(--ce-secondary);
  text-decoration-color: rgba(40, 92, 94, 0.4);
}
.article a:hover { color: var(--ce-primary-dark); text-decoration-color: currentColor; }
.article blockquote { border-inline-start-color: var(--ce-primary); background: var(--g-tint); color: var(--ce-black); }
.article blockquote::before { color: var(--ce-primary); }
.breadcrumb { color: var(--ce-gray-700); }
.breadcrumb [aria-current="page"] { color: var(--ce-black); }

/* Tablas del temario */
.table-wrap { border-color: var(--g-rule); }
table.data th { background: var(--ce-secondary); color: #FFFFFF; }
table.data tbody tr:nth-child(even) { background: #FAF6EF; }
table.data tbody tr:hover { background: var(--g-tint); }
table.data td::before { color: var(--ce-secondary); }
table.data a { font-weight: 600; }

/* Pasos y FAQ */
.steps li { border-color: var(--g-rule); }
.steps li:hover { border-color: var(--ce-secondary); }
.steps li::before { background: var(--g-tint); color: var(--ce-primary-dark); border: 1px solid var(--ce-beige); }
.faq-item { border-color: var(--g-rule); }
.faq-item:hover { border-color: var(--ce-beige); }
.faq-item[open] { border-color: var(--ce-secondary); }
.faq-item summary { color: var(--ce-black); }
.faq-item summary::after { color: var(--ce-primary); }
.faq-item summary:focus-visible { background: var(--g-tint); }
.faq-item-body { color: var(--ce-gray-700); }

/* ─── Paneles ──────────────────────────────────────────────── */
.callout {
  background: var(--ce-secondary);
}
.callout p { color: #FFFFFF; }
.callout p strong { color: #FFFFFF; }
.callout::before, .callout::after { border-color: rgba(255, 255, 255, 0.4); }
.callout--pdf {
  background: #FFFFFF;
  border: 1px solid var(--g-rule);
  box-shadow: var(--sh-1);
}
.callout--pdf::before { background: var(--ce-primary); height: auto; width: 4px; }
.callout--pdf h2, .callout--pdf h3 { color: var(--ce-black); }
.callout--pdf p { color: var(--ce-gray-700); }
.callout--pdf p strong { color: var(--ce-black); }
.callout--note { background: var(--g-tint); border-color: var(--ce-beige); border-inline-start-color: var(--ce-secondary); }
.callout--note p { color: var(--ce-black); }
.callout--note h3, .callout--note h4 { color: var(--ce-black); }
.fine-print, .callout--pdf .fine-print { color: var(--ce-gray-700); }
.fine-print::before, .callout--pdf .fine-print::before { background: var(--ce-secondary); }
.ajolote-fig { background: var(--g-tint) !important; border: 1px solid var(--ce-beige) !important; }
.ajolote-fig::before { background: var(--ce-secondary); }
.disclaimer-distribucion { background: var(--g-tint); border-color: var(--ce-beige); border-inline-start-color: var(--ce-primary-dark); color: var(--ce-black); }
.disclaimer-distribucion .disclaimer-tag { background: var(--ce-primary-dark); }

/* Precio (comprar-guia) sobre el hero claro */
.price-block {
  background: #FFFFFF;
  border: 1px solid var(--g-rule);
  box-shadow: var(--sh-1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.price-block-amount { color: var(--ce-primary-dark); }
.price-block-meta { color: var(--ce-gray-700); }
.price-block-meta span:not(:last-child)::after { background: var(--ce-beige); opacity: 1; }
#compatibilidad { background: var(--g-tint) !important; border-color: var(--ce-beige) !important; }

/* ─── Footer ───────────────────────────────────────────────── */
.ge-unifooter { background: var(--ce-black); color: #D9D4CB; padding-block: var(--sp-8) var(--sp-5); }
.ge-unifooter::before { background: var(--ce-primary); height: 3px; }
.ge-unifooter h4 { color: #FFFFFF; }
.ge-unifooter p, .ge-unifooter a { color: #D9D4CB; }
.ge-unifooter a:hover { color: #FFFFFF; text-decoration: underline; }
.ge-unifooter-bottom, .ge-unifooter-bottom a { color: #D9D4CB; }
.ge-unifooter-aviso { border-color: rgba(224, 204, 166, 0.45); background: rgba(255, 255, 255, 0.04); }

@media print {
  .hero { background: #FFFFFF !important; }
}

/* Ajustes finos (02-oct): punto del fine-print en línea; sin barrita de h2 dentro de paneles */
.fine-print { display: block; }
.fine-print::before { display: inline-block; vertical-align: middle; margin-inline-end: 0.5em; }
.article .callout--pdf h2 { padding-block-start: 0; margin-block-start: 0; }
.article .callout--pdf h2::before { display: none; }