/* Estilos compartidos de las guías DeCA — mismo lenguaje "documento" que la portada */
:root {
  --fondo: #f1f5f9;
  --tarjeta: #ffffff;
  --tinta: #1e293b;
  --gris: #64748b;
  --gris-claro: #94a3b8;
  --linea: #e2e8f0;
  --linea-doc: #cbd5e1;
  --asfalto: #111827;
  --asfalto-2: #1f2937;
  --sobre-asfalto: #f8fafc;
  --sobre-asfalto-suave: #9ca3af;
  --ambar: #d97706;
  --ambar-hover: #f59e0b;
  --ambar-claro: #fbbf24;
  --aviso-bg: #fef3c7;
  --aviso-tinta: #92400e;
  --ok: #059669;
  --ok-bg: #d1fae5;
  --rojo: #b91c1c;
  --rojo-bg: #fee2e2;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: 'Archivo', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ambar); }
.franja { padding-left: 20px; padding-right: 20px; }
.interior { max-width: 720px; margin: 0 auto; }

.barra { background: var(--tarjeta); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 10; }
.barra .interior { max-width: 960px; display: flex; align-items: center; justify-content: space-between; padding: 13px 0; }
.wordmark { font-weight: 800; font-size: 22px; letter-spacing: -0.02em; color: var(--tinta); text-decoration: none; }
.wordmark em { font-style: normal; color: var(--ambar); }
.barra nav a { color: var(--tinta); text-decoration: none; font-size: 14.5px; font-weight: 700; border: 2px solid var(--ambar); border-radius: 999px; padding: 7px 18px; }
.barra nav a:hover { background: var(--ambar); color: #fff; }

header.articulo { padding-top: 44px; padding-bottom: 34px; }
.miga { font-size: 13.5px; color: var(--gris); margin-bottom: 16px; }
.miga a { color: var(--gris); }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris); margin: 0 0 12px; }
.eyebrow::before { content: ''; display: inline-block; width: 26px; height: 4px; background: var(--ambar); border-radius: 2px; margin-right: 10px; vertical-align: 3px; }
h1 { font-size: clamp(28px, 5vw, 42px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.08; margin: 0 0 14px; text-wrap: balance; }
header.articulo p.entradilla { color: var(--gris); max-width: 58ch; margin: 0 0 26px; }
header.articulo .regla { border: 0; border-top: 2px solid var(--tinta); max-width: 720px; margin: 0; }

main { padding-top: 34px; padding-bottom: 30px; }
h2 { font-size: 23px; font-weight: 800; letter-spacing: -0.015em; margin: 38px 0 12px; text-wrap: balance; }
h2:first-child { margin-top: 0; }
h3 { font-size: 17.5px; font-weight: 700; margin: 24px 0 8px; }
p, ul, ol { max-width: 66ch; margin: 0 0 13px; }
ul, ol { padding-left: 1.5em; }
li { margin-bottom: 6px; }

.aviso { background: var(--aviso-bg); color: var(--aviso-tinta); border-radius: 12px; padding: 13px 16px; margin: 16px 0; font-size: 15px; }
.tabla-envoltorio { overflow-x: auto; margin: 16px 0; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; }
th { text-align: left; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ambar); padding: 10px 14px; border-bottom: 2px solid var(--linea); }
td { padding: 11px 14px; border-bottom: 1px solid var(--linea); vertical-align: top; }
tr:last-child td { border-bottom: none; }
.pastilla { display: inline-block; border-radius: 999px; padding: 2px 11px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.pastilla.si { background: var(--ok-bg); color: var(--ok); }
.pastilla.no { background: var(--rojo-bg); color: var(--rojo); }
.pastilla.media { background: var(--aviso-bg); color: var(--aviso-tinta); }

details { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 12px; padding: 13px 18px; margin-bottom: 9px; }
summary { font-weight: 700; cursor: pointer; }
summary:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; border-radius: 6px; }
details p { margin-top: 10px; margin-bottom: 0; }

.cta-caja { background: var(--asfalto-2); color: var(--sobre-asfalto); border: 3px solid var(--ambar); border-radius: 18px; padding: 26px 28px; margin: 40px 0 10px; }
.cta-caja h2 { color: #fff; margin: 0 0 10px; }
.cta-caja p { color: var(--sobre-asfalto-suave); }
.cta { display: inline-block; background: var(--ambar); color: #fff; font-weight: 700; font-size: 16.5px; text-decoration: none; border-radius: 999px; padding: 14px 28px; margin-top: 6px; box-shadow: 0 8px 20px rgba(217, 119, 6, 0.35); }
.cta:hover { background: var(--ambar-hover); }

.mas-guias { border-top: 2px solid var(--tinta); margin-top: 44px; padding-top: 20px; }
.mas-guias h2 { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris); margin: 0 0 12px; }
.mas-guias ul { list-style: none; padding: 0; margin: 0; }
.mas-guias li { padding: 8px 0; border-bottom: 1px dotted var(--linea-doc); }
.mas-guias a { font-weight: 600; color: var(--tinta); text-decoration: none; }
.mas-guias a:hover { color: var(--ambar); }

.nota-legal { color: var(--gris-claro); font-size: 13px; margin-top: 26px; max-width: 66ch; }

footer { background: var(--tarjeta); border-top: 1px solid var(--linea); color: var(--gris); font-size: 13.5px; margin-top: 40px; }
footer .interior { max-width: 960px; padding: 24px 0 32px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
footer a { color: var(--gris); }
footer a:hover { color: var(--tinta); }