/* Margarita Maza 2026 — estilos compartidos */

/* Paleta oficial Secretaría de las Mujeres 2024-2030 (guía de marca):
   Guinda PANTONE 7421 C #611232 · Dorado PANTONE 1255 C #a6802d ·
   Negro PANTONE Neutral Black C #161a1d */
@font-face {
  font-family: 'Patria';
  src: url('/fonts/Patria-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Patria';
  src: url('/fonts/Patria-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Patria';
  src: url('/fonts/Patria-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Noto Sans y Material Symbols Outlined — auto-alojadas (antes desde
   fonts.googleapis.com) para no depender de un tercero en cada visita.
   Solo los subconjuntos latin/latin-ext (cubren español) — se omiten
   cirílico, griego, vietnamita, etc. que no usa este sitio. Un archivo
   real por cada peso usado en el sitio (400/600/700) — antes un único
   archivo Regular se declaraba falsamente como rango 400-700, así que
   el texto en negritas nunca se veía realmente en negritas. */
@font-face {
  font-family: 'Noto Sans';
  src: url('/fonts/NotoSans-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans';
  src: url('/fonts/NotoSans-latinext-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Sans';
  src: url('/fonts/NotoSans-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans';
  src: url('/fonts/NotoSans-latinext-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Sans';
  src: url('/fonts/NotoSans-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans';
  src: url('/fonts/NotoSans-latinext-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Material Symbols Outlined';
  src: url('/fonts/MaterialSymbolsOutlined.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playwrite GB S';
  src: url('/fonts/PlaywriteGBS-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Carlito: clon métrico libre de Calibri, la tipografía que usó la
   Secretaría para el texto impreso de la plantilla de constancia. Se usa
   solo en los campos que se rellenan encima (.constancia-field) para que
   combinen con el texto de la plantilla en vez de con Noto Sans. */
@font-face {
  font-family: 'Carlito';
  src: url('/fonts/Carlito-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Carlito';
  src: url('/fonts/Carlito-latinext-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Carlito';
  src: url('/fonts/Carlito-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Carlito';
  src: url('/fonts/Carlito-latinext-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --guinda-900: #490e26;
  --guinda-700: #611232;
  --guinda-600: #7a1a40;
  --guinda-500: #96345c;
  --guinda-100: #f5e6ec;
  --oro-500: #a6802d;
  --oro-100: #f6ecd9;
  --gris-900: #161a1d;
  --gris-700: #4b5263;
  --gris-500: #6b7280;
  --gris-300: #d7dae0;
  --gris-100: #f4f5f7;
  --blanco: #ffffff;
  --rojo-600: #b91c1c;
  --verde-600: #15803d;
  --radius: 12px;
  --shadow: 0 2px 10px rgba(73, 14, 38, 0.08);
  --shadow-lg: 0 12px 32px rgba(73, 14, 38, 0.16);
  --font-display: 'Patria', 'Georgia', serif;
  --font-body: 'Noto Sans', 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

.msi {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  vertical-align: -15%;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--gris-900);
  background: var(--gris-100);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--guinda-700); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; }

.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ── Topbar ─────────────────────────────────────────────────────────── */
.topbar {
  background: var(--guinda-900);
  color: var(--blanco);
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}
.topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--blanco);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .15s;
}
.topbar a.brand:hover { color: var(--blanco); opacity: .8; text-decoration: none; }
.topbar .brand small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .7rem;
  opacity: .8;
  letter-spacing: .04em;
}
.brand-logo { height: 32px; width: auto; display: block; flex-shrink: 0; }
.dash-sidebar .brand-logo { height: 24px; }
.auth-card .brand-logo { height: 34px; width: auto; margin: 0 auto; }
.topbar nav { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.topbar nav a { color: var(--blanco); opacity: .9; font-size: .92rem; }
.topbar nav a:hover { opacity: 1; text-decoration: none; border-bottom: 2px solid var(--oro-500); }

/* ── Cenefa institucional gob.mx ───────────────────────────────────── */
.gobmx-bar { background: var(--guinda-900); border-bottom: 3px solid var(--oro-500); }
.gobmx-bar-inner { display: flex; align-items: center; justify-content: space-between; padding: 8px 24px; }
.gobmx-wordmark { display: flex; align-items: center; text-decoration: none; }
.gobmx-wordmark img { height: 34px; width: auto; display: block; }
.gobmx-wordmark:hover { text-decoration: none; opacity: .85; }
.gobmx-bar-links { display: flex; align-items: center; gap: 22px; }
.gobmx-bar-links a { color: var(--blanco); font-size: .85rem; opacity: .92; }
.gobmx-bar-links a:hover { opacity: 1; text-decoration: none; }
.gobmx-search { display: flex; align-items: center; }
.gobmx-search .msi { font-size: 1.1rem; }
.btn-nav {
  background: var(--oro-500);
  color: var(--guinda-900) !important;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 600;
  border-bottom: none !important;
}

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(150deg, var(--guinda-900), var(--guinda-700) 60%, var(--guinda-500));
  color: var(--blanco);
  padding: 64px 0 72px;
  text-align: center;
}
.hero .eyebrow {
  display: inline-block;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.35);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.hero h1 { font-size: clamp(1.8rem, 4vw, 3rem); max-width: 820px; margin: 0 auto .4em; }
.hero .tema {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--oro-100);
  max-width: 700px;
  margin: 0 auto 28px;
}
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.hero-portrait {
  display: block;
  width: 136px; height: 136px; border-radius: 50%; overflow: hidden;
  margin: 0 auto 10px; border: 4px solid var(--oro-500); background: var(--blanco);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.hero-portrait:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.4); }
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-portrait-cap {
  display: block; font-size: .72rem; letter-spacing: .04em; color: var(--oro-100);
  opacity: .85; margin-bottom: 22px;
}

.btn {
  display: inline-block;
  padding: 13px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  border: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn-primary { background: var(--oro-500); color: var(--guinda-900); }
.btn-primary:hover { box-shadow: 0 6px 18px rgba(201,151,29,.4); }
.btn-outline { background: var(--blanco); color: var(--guinda-900); border: none; }
.btn-ghost { background: var(--gris-100); color: var(--gris-900); }
.btn-danger { background: var(--rojo-600); color: var(--blanco); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-sm { padding: 7px 16px; font-size: .82rem; }
.btn-block { display: block; width: 100%; text-align: center; }

/* ── Sections ───────────────────────────────────────────────────────── */
section.block { padding: 56px 0; }
section.block.alt { background: var(--blanco); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 36px; }
.section-head .kicker {
  color: var(--guinda-600);
  font-family: var(--font-script, var(--font-display));
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}
.section-head h2, .folio-box h2 { font-family: var(--font-script, var(--font-display)); font-weight: 400; }
.section-head p { color: var(--gris-700); }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.card {
  background: var(--blanco);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
  border: 1px solid var(--gris-300);
}
.card h3 { color: var(--guinda-700); font-size: 1.05rem; }
.card p { color: var(--gris-700); font-size: .92rem; line-height: 1.55; margin: 0; }
.card .icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--guinda-100); color: var(--guinda-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; margin-bottom: 14px;
}
.nav-card {
  cursor: pointer; text-align: left; width: 100%; font-family: inherit;
  transition: box-shadow .15s, transform .15s;
}
.nav-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* ── Timeline (cronograma) ─────────────────────────────────────────── */
.timeline { position: relative; margin-top: 20px; }
.timeline::before {
  content: ''; position: absolute; left: 19px; top: 6px; bottom: 6px;
  width: 2px; background: var(--gris-300);
}
.tl-item { position: relative; padding: 0 0 28px 54px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute; left: 10px; top: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--guinda-700); border: 3px solid var(--blanco);
  box-shadow: 0 0 0 2px var(--guinda-700);
}
.tl-item h4 { margin: 0 0 4px; font-size: 1rem; color: var(--gris-900); }
.tl-item .tl-meta { font-size: .8rem; color: var(--guinda-600); font-weight: 600; margin-bottom: 4px; }
.tl-item p { margin: 0; color: var(--gris-700); font-size: .9rem; }

/* ── Premios ────────────────────────────────────────────────────────── */
.premio-card { text-align: center; border-top: 4px solid var(--oro-500); }
.premio-card .monto { font-family: var(--font-display); font-size: 1.9rem; color: var(--guinda-800, var(--guinda-700)); margin: 6px 0; }
.premio-card .lugar { color: var(--oro-500); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: .78rem; }

/* ── Forms ──────────────────────────────────────────────────────────── */
.form-card {
  background: var(--blanco);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 32px;
  max-width: 760px;
  margin: 0 auto;
}
fieldset { border: none; padding: 0; margin: 0 0 26px; }
legend {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--guinda-700);
  font-size: 1.05rem;
  padding: 0;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--gris-300);
  padding-bottom: 8px;
  width: 100%;
}
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--gris-700);
  margin-bottom: 6px;
}
.field .hint { font-size: .78rem; color: var(--gris-500); margin-top: 4px; }
.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field input[type=number],
.field input[type=password],
.field input[type=search],
.field select,
.field textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid var(--gris-300);
  border-radius: 8px;
  font-size: .93rem;
  font-family: inherit;
  color: var(--gris-900);
  background: var(--blanco);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--guinda-600);
  box-shadow: 0 0 0 3px var(--guinda-100);
}
.field textarea { resize: vertical; min-height: 90px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }

/* ── Buscador de escuelas (catálogo CCT de la SEP) ─────────────────── */
.escuela-picker { position: relative; }
.escuela-picker input[disabled] { background: var(--gris-100); cursor: not-allowed; }
.field input[readonly] { background: var(--gris-100); color: var(--gris-700); }
.escuela-picker .link-btn, .escuela-manual .link-btn { display: inline-block; margin-top: 6px; }
.escuela-resultados {
  position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin-top: 4px;
  background: var(--blanco); border: 1.5px solid var(--gris-300); border-radius: 8px;
  box-shadow: var(--shadow-lg); max-height: 260px; overflow-y: auto;
}
.escuela-resultados button {
  display: block; width: 100%; text-align: left; padding: 9px 13px; border: none;
  background: none; cursor: pointer; font-family: inherit; border-bottom: 1px solid var(--gris-100);
}
.escuela-resultados button:last-child { border-bottom: none; }
.escuela-resultados button:hover, .escuela-resultados button:focus { background: var(--guinda-100); }
.escuela-resultados .nombre { display: block; font-size: .9rem; color: var(--gris-900); font-weight: 600; }
.escuela-resultados .meta { display: block; font-size: .76rem; color: var(--gris-500); margin-top: 1px; }
.escuela-resultados .vacio { padding: 10px 13px; font-size: .85rem; color: var(--gris-500); }
.escuela-picker.seleccionada input#escuela-buscar { border-color: var(--verde-600); }
.check-field { display: flex; gap: 10px; align-items: flex-start; padding: 12px; background: var(--gris-100); border-radius: 8px; margin-bottom: 10px; }
.check-field input { margin-top: 3px; }
.check-field label { font-size: .85rem; font-weight: 400; color: var(--gris-700); margin: 0; }
.file-drop {
  border: 2px dashed var(--gris-300);
  border-radius: 10px;
  padding: 24px;
  text-align: center;
  color: var(--gris-500);
  font-size: .88rem;
  cursor: pointer;
  transition: border-color .15s;
}
.file-drop:hover, .file-drop.drag { border-color: var(--guinda-600); color: var(--guinda-700); }
.file-drop input { display: none; }
.file-preview { margin-top: 12px; display: none; }
.file-preview img { max-height: 220px; border-radius: 8px; margin: 0 auto; border: 1px solid var(--gris-300); display: none; }
.file-preview-pdf {
  display: none; align-items: center; gap: 10px; padding: 12px 16px; max-width: 320px; margin: 0 auto;
  border: 1px solid var(--gris-300); border-radius: 8px; background: var(--gris-100); color: var(--guinda-700);
}
.file-preview-pdf .msi { font-size: 1.8rem; }
.file-preview-pdf span:last-child { font-size: .85rem; word-break: break-all; color: var(--gris-900); }

.alert { padding: 12px 16px; border-radius: 8px; font-size: .88rem; margin-bottom: 18px; }
.alert-error { background: #fdecec; color: var(--rojo-600); border: 1px solid #f4b8b8; }
.alert-success { background: #e9f9ef; color: var(--verde-600); border: 1px solid #b6e8c6; }
.alert-info { background: var(--guinda-100); color: var(--guinda-700); border: 1px solid #e3c1d8; }

.progress-bar { height: 6px; border-radius: 4px; background: var(--gris-300); overflow: hidden; margin: 14px 0; display: none; }
.progress-bar > div { height: 100%; background: var(--guinda-600); width: 0%; transition: width .2s; }

/* ── Confirmación / folio ──────────────────────────────────────────── */
.folio-box {
  text-align: center;
  padding: 40px;
}
.folio-box .check {
  width: 64px; height: 64px; border-radius: 50%; background: #e9f9ef; color: var(--verde-600);
  display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 18px;
}
.folio-code {
  font-family: 'Roboto Mono', monospace;
  background: var(--gris-100);
  border: 1px dashed var(--gris-300);
  border-radius: 8px;
  padding: 12px 20px;
  display: inline-block;
  font-size: 1rem;
  color: var(--guinda-700);
  margin: 14px 0;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
footer {
  background: var(--guinda-900);
  color: #e6d3da;
  padding: 40px 0 26px;
  font-size: .85rem;
}
footer a { color: var(--oro-500); }
footer .foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 24px; margin-bottom: 24px; }
footer h4 { color: var(--blanco); font-size: .85rem; margin: 0 0 10px; text-transform: uppercase; letter-spacing: .05em; }
footer .foot-bottom {
  border-top: 1px solid rgba(255,255,255,.15); padding-top: 18px; text-align: center; color: #d9c2cb; font-size: .78rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px;
}

/* ── Cenefa final institucional (idéntica a tiempodemujeres.mujeres.gob.mx) ── */
.gobmx-footer { background: var(--guinda-700); color: var(--blanco); padding: 40px 0 0; font-size: .85rem; }
.gobmx-footer-grid { display: flex; flex-wrap: wrap; gap: 32px 48px; padding-bottom: 32px; }
.gobmx-footer-logo { height: 64px; width: auto; align-self: flex-start; }
.gobmx-footer-col { display: flex; flex-direction: column; gap: 8px; min-width: 160px; }
.gobmx-footer-col h6 { margin: 0 0 4px; font-size: 1rem; font-weight: 700; color: var(--blanco); }
.gobmx-footer-col a { color: var(--blanco); opacity: .88; }
.gobmx-footer-col a:hover { opacity: 1; text-decoration: underline; }
.gobmx-footer-text { max-width: 220px; margin: 0; opacity: .88; }
.gobmx-footer-social { display: flex; align-items: center; gap: 10px; }
.gobmx-footer-social a { color: var(--blanco); opacity: .88; display: flex; }
.gobmx-footer-social a:hover { opacity: 1; }
.gobmx-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.18); padding: 16px 0; text-align: center; color: rgba(255,255,255,.75); font-size: .78rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px;
}
.gobmx-footer-bottom a { color: var(--blanco); }
.visit-counter { display: inline-flex; align-items: center; gap: 4px; }
.visit-counter .msi { font-size: 1rem; }
.visit-counter strong { color: #c7c9d1; font-weight: 600; }

/* ── Auth / login ───────────────────────────────────────────────────── */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, var(--guinda-900), var(--guinda-700));
  padding: 24px;
}
.auth-card {
  background: var(--blanco);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 36px 34px;
  width: 100%;
  max-width: 380px;
}
.auth-card .logo-row { text-align: center; margin-bottom: 22px; }
.auth-card .logo-row .badge-role {
  display: inline-block; background: var(--guinda-100); color: var(--guinda-700);
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px; margin-top: 6px;
}

/* ── Dashboard shell ────────────────────────────────────────────────── */
.dash-shell { display: flex; min-height: 100vh; }
.dash-sidebar {
  width: 240px; flex-shrink: 0; background: var(--guinda-900); color: var(--blanco);
  padding: 22px 16px; display: flex; flex-direction: column;
}
.dash-sidebar .brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.dash-sidebar .who { font-size: .78rem; opacity: .75; margin-bottom: 24px; }
.dash-sidebar nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.dash-sidebar nav a, .dash-sidebar nav button {
  color: var(--blanco); background: none; border: none; text-align: left;
  padding: 10px 12px; border-radius: 8px; font-size: .9rem; cursor: pointer; font-family: inherit;
}
.dash-sidebar nav a:hover, .dash-sidebar nav a.active { background: rgba(255,255,255,.12); text-decoration: none; }
.dash-sidebar .logout { margin-top: auto; opacity: .8; }
.dash-main { flex: 1; padding: 28px 32px; max-width: 100%; overflow-x: auto; }
.dash-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.dash-header h1 { font-size: 1.5rem; margin: 0; }
.dash-header .sub { color: var(--gris-500); font-size: .88rem; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 16px; margin-bottom: 26px; }
.stat-card { background: var(--blanco); border: 1px solid var(--gris-300); border-radius: var(--radius); padding: 18px 20px; }
.stat-card .num { font-family: var(--font-display); font-size: 1.8rem; color: var(--guinda-700); }
.stat-card .lbl { font-size: .78rem; color: var(--gris-500); text-transform: uppercase; letter-spacing: .04em; }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.toolbar select, .toolbar input[type=search] {
  padding: 8px 12px; border: 1.5px solid var(--gris-300); border-radius: 8px; font-size: .85rem; font-family: inherit;
}

.section-title { font-size: 1.02rem; font-weight: 700; color: var(--gris-900); margin: 0 0 14px; }

.estad-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: .82rem; }
.bar-label { width: 78px; flex: none; color: var(--gris-600); }
.bar-track { flex: 1; background: var(--gris-100); border-radius: 6px; height: 14px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--guinda-600); border-radius: 6px; }
.bar-count { width: 34px; text-align: right; flex: none; font-weight: 700; color: var(--gris-700); }

.eval-cat-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.eval-cat-tab {
  padding: 9px 18px; border-radius: 999px; border: 1.5px solid var(--gris-300); background: var(--blanco);
  color: var(--gris-700); font-size: .85rem; font-weight: 600; font-family: inherit; cursor: pointer;
}
.eval-cat-tab.active { background: var(--guinda-700); border-color: var(--guinda-700); color: var(--blanco); }

/* Reglas de tabla del panel (dashboard) — con scope a .table-wrap para
   que no se filtren a tablas del sitio público como .mm26-tabla-fechas
   (min-width:760px forzaba overflow horizontal cortado en mobile ahí). */
.table-wrap { background: var(--blanco); border-radius: var(--radius); border: 1px solid var(--gris-300); overflow: auto; box-shadow: var(--shadow); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 760px; }
.table-wrap thead th {
  text-align: left; padding: 12px 14px; background: var(--gris-100); color: var(--gris-700);
  font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--gris-300); white-space: nowrap;
}
.table-wrap tbody td { padding: 12px 14px; border-bottom: 1px solid var(--gris-100); vertical-align: middle; }
.table-wrap tbody tr:hover { background: var(--guinda-100); }
.table-wrap tbody tr:last-child td { border-bottom: none; }
.link-btn { background: none; border: none; color: var(--guinda-700); cursor: pointer; font-size: .85rem; font-weight: 600; padding: 0; font-family: inherit; }
.link-btn:hover { text-decoration: underline; }
.muted { color: var(--gris-500); }
.empty-state { text-align: center; padding: 60px 20px; color: var(--gris-500); }

.badge {
  display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700;
  background: color-mix(in srgb, var(--badge-color) 14%, white); color: var(--badge-color);
}

/* ── Modal ──────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(20,10,20,.55);
  display: none; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 100; overflow-y: auto;
}
.modal-overlay.open { display: flex; }

/* Imagen ampliable de la obra en el modal de evaluación — se apila sobre
   #modal-overlay (z-index mayor) sin cerrar ni perder la calificación en
   curso, ya que es un overlay aparte que no toca el DOM del modal. */
.obra-zoomable { cursor: zoom-in; }
.img-lightbox-overlay {
  position: fixed; inset: 0; background: rgba(10,5,10,.9); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out;
}
.img-lightbox-overlay img { max-width: 95vw; max-height: 92vh; border-radius: 8px; cursor: default; box-shadow: var(--shadow-lg); }
.img-lightbox-close {
  position: absolute; top: 18px; right: 22px; background: rgba(255,255,255,.15); color: var(--blanco);
  border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.img-lightbox-close:hover { background: rgba(255,255,255,.28); }

/* Ícono de información junto a cada criterio — abre el pop-up de definición
   y preguntas orientadoras sin salir de la evaluación en curso. */
.criterio-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.eval-puntaje-individual {
  background: var(--guinda-100); color: var(--guinda-700); border-radius: 8px;
  padding: 10px 14px; margin-bottom: 16px; font-size: .92rem;
}
.eval-puntaje-individual strong { font-size: 1.05rem; }
.criterio-info-btn {
  background: none; border: none; cursor: pointer; color: var(--guinda-700);
  font-size: 1rem; line-height: 1; padding: 0; flex-shrink: 0;
}
.criterio-info-btn:hover { opacity: .7; }
.criterio-info-overlay { cursor: default; }
.criterio-info-card {
  background: var(--blanco); border-radius: var(--radius); max-width: 520px; width: 100%;
  padding: 28px; box-shadow: var(--shadow-lg); max-height: 85vh; overflow-y: auto; position: relative; cursor: default;
}
.criterio-info-card h3 { margin: 0 24px 12px 0; font-size: 1.1rem; }
.criterio-info-card .img-lightbox-close { top: 14px; right: 14px; width: 32px; height: 32px; font-size: 1.1rem; color: var(--gris-700); background: var(--gris-100); }
.criterio-info-card .img-lightbox-close:hover { background: var(--gris-300); }
.criterio-info-def-wrap strong,
.criterio-info-preguntas strong { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--gris-700); }
.criterio-info-def { font-size: .9rem; color: var(--gris-900); margin: 6px 0 16px; }
.criterio-info-preguntas ul { margin: 8px 0 16px; padding-left: 20px; font-size: .88rem; color: var(--gris-900); }
.criterio-info-preguntas li { margin-bottom: 6px; }
.modal {
  background: var(--blanco); border-radius: var(--radius); max-width: 640px; width: 100%;
  padding: 28px; box-shadow: var(--shadow-lg); max-height: 90vh; overflow-y: auto;
}
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.modal-head h2 { font-size: 1.2rem; margin: 0; }
.modal-close { background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--gris-500); line-height: 1; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-bottom: 18px; font-size: .88rem; }
.detail-grid .full { grid-column: 1 / -1; }
.detail-grid dt { font-weight: 700; color: var(--gris-700); font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px; }
.detail-grid dd { margin: 0; color: var(--gris-900); }
.modal img.obra { width: 100%; border-radius: 10px; border: 1px solid var(--gris-300); margin-bottom: 18px; }
.modal .obra-pdf-wrap { margin-bottom: 18px; }
.modal .obra-pdf { width: 100%; height: 480px; border-radius: 10px; border: 1px solid var(--gris-300); display: block; }
.modal .obra-pdf-wrap .link-btn { display: inline-block; margin-top: 8px; }
.modal-actions { display: flex; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--gris-300); padding-top: 18px; }

.spinner {
  width: 22px; height: 22px; border: 3px solid var(--guinda-100); border-top-color: var(--guinda-600);
  border-radius: 50%; animation: spin .7s linear infinite; margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Aviso de privacidad (bloque de aceptación en registro.html) ───── */
.aviso-body { font-size: .88rem; color: var(--gris-700); line-height: 1.65; margin-bottom: 22px; }
.aviso-body p { margin: 0 0 12px; }
.aviso-body p:last-child { margin-bottom: 0; }
.aviso-body strong { color: var(--gris-900); }

/* ── Constancia de participación (imprimible) ─────────────────────────
   Plantilla oficial (2000×1545px) provista por la Secretaría, aplanada a
   /img/2026/constancia-plantilla.webp — los 6 datos variables (nombre,
   obra, categoría, entidad, folio, día) se colocan encima con posiciones
   en % tomadas por detección de píxel de cada línea/raya en blanco de la
   plantilla (no a ojo). El mes ("octubre") ya viene impreso fijo en la
   plantilla, por eso no hay campo .c-mes. */
.constancia-doc { position: relative; max-width: 960px; margin: 0 auto; container-type: inline-size; }
.constancia-bg { display: block; width: 100%; height: auto; }
/* Tamaño de letra en cqw (proporcional al ancho REAL del contenedor, no al
   viewport): así el texto siempre guarda la misma proporción con el
   interlineado de la plantilla (~15.4pt entre renglones sobre 792pt de
   ancho, ≈1.94cqw) sin importar a qué tamaño se muestre .constancia-doc.
   El font-size en px antes del cqw es el valor de respaldo para navegadores
   sin soporte de container queries. */
.constancia-field {
  position: absolute; color: #1d1d1b; font-family: 'Carlito', var(--font-body);
  line-height: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 17px; font-size: 1.75cqw;
}
.c-nombre    { left: 20.90%; top: calc(46.70% - 1.05em); width: 58.20%; font-size: 19px; font-size: 1.95cqw; font-weight: 600; }
.c-titulo    { left: 49.10%; top: calc(51.46% - 1.05em); width: 36.50%; }
.c-categoria { left: 31.45%; top: calc(54.01% - 1.05em); width: 17.10%; }
.c-entidad   { left: 66.35%; top: calc(54.01% - 1.05em); width: 20.05%; }
.c-folio     { left: 51.15%; top: calc(56.60% - 1.05em); width: 17.20%; font-weight: 600; }
.c-dia       { left: 45.60%; top: calc(74.66% - 1.05em); width: 2.90%; overflow: visible; }

/* ══════════════════════════════════════════════════════════════════════
   REDISEÑO 2026 — portada ilustrada (assets de "Página web/", entregados
   por el equipo de diseño). Clases con prefijo mm26- para no tocar nada
   de lo que ya usan dashboard/registro/login/resultados/constancia.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --mm26-purpura: #8e6fc4;
  --mm26-purpura-osc: #704da3;
  --mm26-indigo: #4862b0;
  --mm26-verde: #3f643c;
  --mm26-dorado: #fdd467;
  --font-script: 'Playwrite GB S', var(--font-display);
}

.mm26-container { max-width: 1220px; margin: 0 auto; padding: 0 28px; position: relative; }

/* ── Header ilustrado ─────────────────────────────────────────────── */
/* Los fondos ilustrados a todo lo ancho (hero, objetivo, premios, CTA final)
   se pintan con una <img> real + object-fit:cover en vez de CSS
   background-image: en algunas combinaciones de navegador/pantalla,
   background-size:cover puede dejar una franja de 1‑2px (a veces más, según
   el redondeo de subpíxeles) del color de respaldo en un borde — un reporte
   real del usuario con Chrome en Mac que no se pudo reproducir aquí a
   ningún ancho probado, pero object-fit:cover en una <img> no tiene ese
   problema porque el navegador la mide como cualquier imagen normal. */
.mm26-hero {
  position: relative;
  overflow: visible;
  background: #8792c9;
  text-align: center;
  padding: 56px 0 0;
}
.mm26-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.mm26-hero > .mm26-bg-img { object-position: center 65%; }
/* Ni height con clamp() ni aspect-ratio fijo daban un recorte
   consistente de hero-fondo2.webp en todos los anchos (quedaba muy
   fina en mobile, marcando una costura con el azul de arriba). Se
   muestra la imagen completa a su proporción natural (sin recortar
   nada, igual que objetivo-fondo/premios-fondo) para que la
   superposición con el fondo azul sea siempre la misma. */
.mm26-hero-band { position: relative; margin-top: -20px; overflow: visible; }
.mm26-hero-band .mm26-bg-img { position: static; width: 100%; height: auto; object-fit: unset; display: block; }
.mm26-hero-inner { position: relative; z-index: 2; padding-bottom: 26px; }
.mm26-hero-title { max-width: 520px; margin: 0 auto; }
.mm26-hero-title img { width: 100%; height: auto; }
.mm26-hero-slogan { max-width: 620px; margin: 18px auto 0; }
.mm26-hero-slogan img { width: 100%; height: auto; }
.mm26-hero-kid { position: absolute; bottom: -110px; width: clamp(120px, 16vw, 230px); z-index: 3; pointer-events: none; }
.mm26-hero-kid.left { left: clamp(-10px, 2vw, 40px); }
.mm26-hero-kid.right { right: clamp(-10px, 2vw, 40px); }
.mm26-hero-cta { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 26px; position: relative; z-index: 2; }
.mm26-hero-green {
  color: var(--blanco); font-weight: 700; font-size: 1.02rem; text-align: center;
  background: #d49b35; border: none; border-radius: 999px; padding: 12px 28px; margin: 0;
  text-shadow: none;
}
.mm26-hero-green a { color: var(--blanco); text-decoration: underline; }
.mm26-hero-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.mm26-hero-buttons .btn { background: var(--blanco); color: var(--mm26-indigo); border: none; }
/* Mensaje al pasar el mouse sobre los botones de convocatoria, aclarando
   cuál es la versión completa y cuál la recortada para NNA. */
.mm26-tooltip { position: relative; }
.mm26-tooltip::after {
  content: attr(data-tooltip);
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(4px);
  background: var(--mm26-verde); color: var(--blanco); font-family: var(--font-body);
  font-size: .78rem; font-weight: 600; line-height: 1.35;
  padding: 8px 14px; border-radius: 10px; width: max-content; max-width: 220px; text-align: center;
  pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .15s ease, transform .15s ease; z-index: 10;
}
.mm26-tooltip:hover::after, .mm26-tooltip:focus-visible::after {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
@media (max-width: 780px) { .mm26-tooltip::after { display: none; } }

/* ── Secciones ─────────────────────────────────────────────────────── */
.mm26-section { position: relative; overflow: hidden; padding: 68px 0; }
.mm26-section.white { background: var(--blanco); }
/* Morado sólido, sin imagen de fondo (pedido explícito): objetivo-fondo.webp
   y premios-fondo.webp ya no se usan en #objetivo/#premios. */
.mm26-section.purpura { background: var(--mm26-purpura); color: var(--blanco); }
.mm26-section.verde { background: var(--mm26-verde); color: var(--blanco); }
.mm26-section .mm26-head { text-align: center; max-width: 680px; margin: 0 auto 36px; position: relative; z-index: 2; }
.mm26-section .kicker { display: block; font-family: var(--font-script, var(--font-display)); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; color: var(--mm26-indigo); }
.mm26-section.purpura .kicker, .mm26-section.verde .kicker { color: var(--mm26-dorado); }
.mm26-heading { font-family: var(--font-script); font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--mm26-indigo); margin: 0 0 6px; text-wrap: balance; }
.mm26-section.purpura .mm26-heading, .mm26-section.verde .mm26-heading { color: var(--blanco); }
.mm26-section p.lede { color: var(--gris-700); max-width: 640px; margin: 0 auto; }
/* "¿Quién puede participar?": en pantallas con espacio suficiente la
   oración cabe en una sola línea (pedido explícito de revisión); en
   angostas se deja envolver normal para no desbordar el contenedor. */
#categorias .mm26-head { max-width: 900px; }
@media (min-width: 900px) {
  #categorias .mm26-head p.lede { max-width: none; white-space: nowrap; }
}
.mm26-section.purpura p.lede, .mm26-section.verde p.lede { color: rgba(255,255,255,.92); }

.mm26-decor { position: absolute; z-index: 1; pointer-events: none; }
.mm26-decor img { width: 100%; height: auto; display: block; }

.mm26-cards { position: relative; z-index: 2; display: grid; gap: 22px; }
.mm26-cards.cols-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* flex en vez de grid: cuando el número de tarjetas no es múltiplo de 3
   (ej. 5 en "Materiales de apoyo"), la última fila incompleta queda
   centrada en vez de pegada a la izquierda. flex-grow:0 evita que esas
   tarjetas se estiren para llenar el ancho sobrante de la fila. */
.mm26-cards.cols-3 { display: flex; flex-wrap: wrap; justify-content: center; }
.mm26-cards.cols-3 > * { flex: 0 1 calc((100% - 44px) / 3); }
.mm26-cards.cols-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.mm26-card {
  background: var(--blanco);
  border: 1.5px solid var(--mm26-indigo);
  border-radius: 14px;
  padding: 22px;
  text-align: center;
}
.mm26-card h3 { font-family: var(--font-script); font-weight: 400; color: var(--mm26-indigo); font-size: 1.25rem; margin: 0 0 10px; }
.mm26-card p { color: var(--gris-700); font-size: .92rem; line-height: 1.55; margin: 0; }
.mm26-card .mm26-btn-gold { margin-top: 14px; }

.mm26-btn-gold {
  display: inline-block; background: var(--mm26-dorado); color: var(--mm26-indigo);
  font-weight: 700; font-size: .85rem; padding: 9px 22px; border-radius: 999px;
  border: none; cursor: pointer; text-decoration: none;
}
.mm26-btn-gold:hover { text-decoration: none; filter: brightness(1.05); }

/* ── Categorías / Bases (tarjetas simples sobre fondo blanco o verde) ── */
.mm26-simple-card {
  background: rgba(255,255,255,.06);
  border: 1.5px solid var(--mm26-indigo);
  border-radius: 14px; padding: 22px;
}
.mm26-section.white .mm26-simple-card { background: var(--blanco); }
.mm26-section.verde .mm26-simple-card { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.07); }
.mm26-simple-card h3 { font-family: var(--font-script); font-weight: 400; font-size: 1.2rem; margin: 0 0 8px; color: var(--mm26-indigo); }
.mm26-section.verde .mm26-simple-card h3 { color: var(--mm26-dorado); }
.mm26-simple-card p { margin: 0; font-size: .9rem; line-height: 1.5; }
.mm26-section.white .mm26-simple-card p { color: var(--gris-700); }

/* ── Cronograma (Etapas) ──────────────────────────────────────────── */
.mm26-timeline { position: relative; z-index: 2; margin-top: 8px; max-width: 760px; }
.mm26-tl-item { position: relative; padding: 0 0 24px 32px; border-left: 2px solid var(--gris-300); }
.mm26-tl-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.mm26-tl-item::before {
  content: ''; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--mm26-indigo);
}
.mm26-tl-item .tl-meta { font-size: .78rem; font-weight: 700; color: var(--mm26-indigo); margin-bottom: 2px; }
.mm26-tl-item h4 { font-family: var(--font-script); font-weight: 400; font-size: 1.1rem; margin: 0 0 4px; color: var(--gris-900); }
.mm26-tl-item p { margin: 0; font-size: .88rem; color: var(--gris-700); }

/* ── Premios (sobre fondo morado) ─────────────────────────────────── */
.mm26-premio-card { text-align: center; border: 1.5px solid var(--mm26-dorado); border-radius: 14px; padding: 22px; }
.mm26-premio-card .lugar { font-family: var(--font-script); font-size: 1.15rem; color: var(--mm26-dorado); }
.mm26-premio-card .monto { font-size: 1.9rem; font-weight: 700; margin: 6px 0; color: var(--blanco); }
.mm26-premio-card .sub { font-size: .78rem; color: rgba(255,255,255,.8); }

/* ── Ejes temáticos (dentro de Objetivo) ──────────────────────────── */
.mm26-ejes-wrap { max-width: 760px; margin: 30px auto 0; position: relative; z-index: 2; }
.mm26-ejes-title { text-align: center; font-family: var(--font-script); font-weight: 400; font-size: 1.3rem; color: var(--blanco); margin: 0 0 18px; }
.mm26-ejes-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mm26-ejes-list li { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.35); border-radius: 12px; padding: 16px 20px; font-size: .92rem; line-height: 1.55; color: rgba(255,255,255,.92); }
.mm26-ejes-list strong { display: block; margin-bottom: 4px; font-family: var(--font-script); font-weight: 400; font-size: 1.05rem; color: var(--mm26-dorado); }

/* ── Pasos numerados (¿Cómo participar?) ──────────────────────────── */
.mm26-pasos { list-style: none; counter-reset: paso; margin: 8px auto 0; padding: 0; max-width: 760px; position: relative; z-index: 2; display: grid; gap: 26px; }
.mm26-pasos > li { position: relative; padding-left: 56px; }
.mm26-pasos > li::before {
  counter-increment: paso; content: counter(paso);
  position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%;
  background: var(--mm26-dorado); color: var(--gris-900); font-weight: 700; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
}
.mm26-pasos h4 { font-family: var(--font-script); font-weight: 400; font-size: 1.1rem; margin: 0 0 4px; color: var(--blanco); }
.mm26-pasos p { margin: 0 0 6px; font-size: .9rem; line-height: 1.5; color: rgba(255,255,255,.9); }
.mm26-pasos ul { margin: 6px 0 0; padding-left: 18px; font-size: .88rem; line-height: 1.6; color: rgba(255,255,255,.9); }
.mm26-pasos ul li { margin-bottom: 3px; }
.mm26-pasos .mm26-btn-gold { margin-top: 8px; display: inline-block; }

/* ── Tabla de fechas (cronograma simplificado) ────────────────────── */
.mm26-tabla-fechas {
  width: 100%; max-width: 640px; margin: 8px auto 0; border-collapse: collapse;
  table-layout: fixed;
  position: relative; z-index: 2; background: var(--blanco); border-radius: 12px;
  overflow: hidden; box-shadow: var(--shadow);
}
.mm26-tabla-fechas th {
  background: var(--mm26-purpura-osc); color: var(--blanco); font-family: var(--font-script);
  font-weight: 400; font-size: 1rem; padding: 12px 18px; text-align: left;
}
.mm26-tabla-fechas td { padding: 12px 18px; font-size: .92rem; color: var(--gris-900); border-top: 1px solid var(--gris-100); }
.mm26-tabla-fechas tr:nth-child(even) td { background: var(--gris-100); }

/* ── CTA final ─────────────────────────────────────────────────────── */
/* documentos-fondo.webp es una loma recortada: solo tiene ilustración en
   la franja inferior. Anclada abajo, la curva del pasto siempre se ve
   completa en vez de cortarse a media sección. */
.mm26-cta-final { position: relative; overflow: hidden; padding: 70px 0 60px; background: #96b84a; text-align: center; }
.mm26-cta-final > .mm26-bg-img { object-position: bottom center; }
.mm26-cta-card {
  position: relative; z-index: 2; background: var(--mm26-purpura-osc); color: var(--blanco);
  border-radius: 22px; padding: 30px 34px; max-width: 620px; margin: 0 auto 26px;
}
.mm26-cta-card h2 { font-family: var(--font-script); font-weight: 400; font-size: 1.5rem; margin: 0 0 10px; }
.mm26-cta-card p { margin: 0; font-size: .95rem; line-height: 1.55; }
.mm26-cta-btn {
  position: relative; z-index: 2; display: inline-block; background: var(--mm26-verde); color: var(--blanco);
  border: 4px solid var(--mm26-dorado); border-radius: 999px; padding: 16px 40px; text-transform: uppercase;
  font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; letter-spacing: .04em; text-decoration: none;
}
.mm26-cta-btn:hover { text-decoration: none; filter: brightness(1.08); }
.mm26-cta-btn.is-disabled { opacity: .55; cursor: not-allowed; filter: grayscale(.35); }
.mm26-registro-aviso { position: relative; z-index: 2; display: block; margin: 8px auto 0; color: var(--blanco); font-size: .85rem; font-weight: 700; text-align: center; }
.mm26-cta-soporte {
  position: relative; z-index: 2; margin: 16px auto 0; max-width: 520px;
  color: var(--blanco); font-size: .92rem; line-height: 1.5;
}
.mm26-cta-soporte a { color: var(--mm26-dorado); font-weight: 700; }

@media (max-width: 780px) {
  .mm26-hero { padding-top: 40px; }
  .mm26-hero-kid { display: none; }
  .mm26-section { padding: 48px 0; }
  .mm26-cta-card { padding: 24px 22px; }
}
/* Zona intermedia (tablets, ventanas partidas): las flores/lápices decorativos
   ya no caben en el margen del contenedor y se encimarían con el texto. */
@media (max-width: 980px) {
  .mm26-decor { display: none; }
  .mm26-cards.cols-3 > * { flex-basis: calc((100% - 22px) / 2); }
}

@media print {
  .no-print { display: none !important; }
  body { background: var(--blanco); }
  section.block { padding: 0; }
  .constancia-doc { max-width: none; }
  @page { size: landscape; margin: 0.4in; }
}

@media (max-width: 400px) {
  .gobmx-bar-inner { flex-wrap: wrap; row-gap: 4px; }
  .gobmx-wordmark img { height: 26px; }
  .gobmx-bar-links { gap: 12px; }
  .gobmx-bar-links a { font-size: .78rem; }
}

@media (max-width: 780px) {
  .mm26-cards.cols-3 > * { flex-basis: 100%; }
  .topbar .container { flex-direction: column; align-items: flex-start; gap: 10px; }
  .topbar nav { width: 100%; row-gap: 8px; }
  .dash-shell { flex-direction: column; }
  .dash-sidebar { width: 100%; flex-direction: column; align-items: stretch; padding: 14px 16px; }
  .dash-sidebar .who { display: none; }
  .dash-sidebar nav { flex-direction: row; flex-wrap: wrap; gap: 6px; margin-top: 12px; flex: none; }
  .dash-sidebar nav a { flex: none; }
  .dash-sidebar .logout { margin-top: 12px; }
  .dash-main { padding: 20px 16px; }
  .stat-row {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 6px;
    margin-bottom: 20px;
    -webkit-overflow-scrolling: touch;
  }
  .stat-card { flex: 0 0 156px; }
  .detail-grid { grid-template-columns: 1fr; }
  .estad-cols { grid-template-columns: 1fr; }
}