/* Paleta tomada de codia.org.do (2026-10-01): azul #1a3091, verde #0d6e35, amarillo #F9C74F. */
:root { --texto: #1c1c1c; --fondo: #ffffff; --acento: #1a3091; --verde: #0d6e35; --destacado: #f9c74f; --suave: #f0f4fb; --borde: #d6dcec; }
@media (prefers-color-scheme: dark) {
  :root { --texto: #ececec; --fondo: #12151c; --acento: #8fa4f5; --verde: #5fc088; --suave: #1c2029; --borde: #2c3342; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.65 Roboto, system-ui, sans-serif; color: var(--texto); background: var(--fondo); }
.cabecera, main, .pie { max-width: 62rem; margin: 0 auto; padding: 1rem; }
.cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; border-bottom: 4px solid var(--destacado); }
.marca { font-weight: 700; font-size: 1.15rem; color: var(--acento); text-decoration: none; }
nav ul { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; list-style: none; margin: 0; padding: 0; }
nav a { text-decoration: none; padding: .35rem 0; display: inline-block; border-bottom: 2px solid transparent; }
nav a:hover, nav a:focus-visible { border-bottom-color: var(--destacado); }
a { color: var(--acento); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--destacado); outline-offset: 2px; }
.hero { padding: 3rem 1rem; margin: 1rem 0; border-radius: 1rem; background: linear-gradient(135deg, var(--acento), #2d49c4); color: #fff; }
.hero h1 { margin: 0 0 .5rem; font-size: clamp(1.8rem, 5vw, 2.8rem); }
.lema { font-size: 1.15rem; margin: 0 0 1.25rem; opacity: .95; }
.boton { display: inline-block; padding: .65rem 1.2rem; border-radius: .5rem; background: var(--destacado); color: #1c1c1c; font-weight: 700; text-decoration: none; margin: 0 .5rem .5rem 0; }
.boton.secundario { background: transparent; color: #fff; border: 2px solid #fff; }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.tarjeta { display: block; padding: 1.1rem; border: 1px solid var(--borde); border-radius: .75rem; background: var(--suave); color: inherit; text-decoration: none; }
.tarjeta:hover, .tarjeta:focus-visible { border-color: var(--acento); }
.tarjeta h2 { margin: 0 0 .25rem; font-size: 1.1rem; color: var(--acento); }
.tarjeta p { margin: 0; }
.pendiente { padding: .6rem .9rem; border-left: 4px solid var(--destacado); background: var(--suave); }
article { margin: 1.5rem 0; padding-bottom: 1rem; border-bottom: 1px solid var(--borde); }
article img { max-width: 100%; height: auto; border-radius: .5rem; }
figcaption, .pie-foto, time { color: var(--verde); font-size: .9rem; }
form p { margin: .75rem 0; }
label { display: block; font-weight: 500; }
input, textarea { width: 100%; max-width: 36rem; padding: .55rem; font: inherit; color: inherit; background: var(--fondo); border: 1px solid var(--borde); border-radius: .4rem; }
button { padding: .55rem 1.1rem; font: inherit; font-weight: 700; border: 0; border-radius: .4rem; background: var(--acento); color: #fff; cursor: pointer; }
.en-linea { display: inline; }
[role="alert"] { padding: .6rem .9rem; border-left: 4px solid #c0392b; background: var(--suave); }
.pie { color: var(--verde); border-top: 1px solid var(--borde); margin-top: 2rem; }
@media (prefers-reduced-motion: no-preference) { .tarjeta, .boton, nav a { transition: border-color .15s, transform .15s; } .tarjeta:hover { transform: translateY(-2px); } }
.marca { display: flex; align-items: center; gap: .6rem; }
.marca img { display: block; height: 48px; width: auto; }
.marca-sede { font-size: .85rem; color: var(--verde); }
@media (prefers-color-scheme: dark) { .marca img { background: #fff; padding: 4px 8px; border-radius: .4rem; } }