/* Cabecera y cierre comunes a toda página tipo "artículo guía" pública
   (sin sesión): /oposicion-*, /comparativa-oposiciones-estado/,
   /como-funciona/*, /avisos-oficiales/... Antes esto vivía duplicado casi
   literal en guias.css y como-funciona.css (prefijos .guia-/.cf-) y ya
   había empezado a divergir en tamaños sin que nadie lo decidiera a
   propósito. Aquí una sola definición para ambos prefijos; cada hoja
   conserva solo los componentes que le son propios (mockups en
   como-funciona.css; bloques de temario, requisitos y avisos oficiales en
   guias.css). Reutiliza los tokens de theme.css. */

body { background: var(--age-bg); color: var(--age-ink); margin: 0; }

.guia-wrap, .cf-wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}

.guia-migas, .cf-migas {
  font-size: 13px;
  color: var(--age-ink-soft);
  margin-bottom: 18px;
}
.guia-migas a, .cf-migas a { color: var(--age-ink-soft); }
.guia-migas a:hover, .cf-migas a:hover { color: var(--age-primary-dark); }

.guia-hero-etiqueta, .cf-hero-etiqueta {
  display: inline-block;
  background: var(--age-primary-soft);
  color: var(--age-primary-dark, var(--age-ink));
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.guia-wrap h1, .cf-wrap h1 {
  font-size: 2rem;
  line-height: 1.2;
  margin: 0 0 10px;
}

.guia-intro, .cf-intro {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--age-ink-soft);
  max-width: 680px;
  margin: 0 0 28px;
}

.guia-cta-fila, .cf-cta-fila {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.guia-wrap h2, .cf-wrap h2 {
  font-size: 1.3rem;
  margin: 44px 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.guia-wrap h2 .guia-h2-icono, .cf-wrap h2 .cf-h2-icono {
  display: inline-flex;
  color: var(--age-primary-dark, var(--age-ink));
}
.cf-wrap h2 .cf-h2-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--age-primary);
  color: #1b1200;
  font-size: 14px;
  font-weight: 800;
}

.guia-seccion-sub {
  color: var(--age-ink-soft);
  font-size: 14.5px;
  margin: 0 0 18px;
}

.guia-wrap p, .guia-wrap li,
.cf-wrap p, .cf-wrap li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--age-ink);
}
.guia-wrap ul, .cf-wrap ul { padding-left: 22px; margin: 10px 0; }
.guia-wrap a:not(.age-btn), .cf-wrap a:not(.age-btn) { color: var(--age-primary-dark); }

.guia-cta-final, .cf-cta-final {
  margin-top: 48px;
  padding: 32px;
  border-radius: var(--age-radius-lg);
  background: var(--age-navy, #1b2138);
  color: #fff;
  text-align: center;
}
.guia-cta-final h2, .cf-cta-final h2 { margin-top: 0; color: #fff; justify-content: center; }
.guia-cta-final p, .cf-cta-final p { color: rgba(255, 255, 255, 0.75); margin-bottom: 20px; }

.guia-otras, .cf-otras {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--age-border);
}
.guia-otras-lista, .cf-otras-lista {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.guia-otras-lista a, .cf-otras-lista a {
  display: inline-block;
  padding: 8px 16px;
  border: 1.5px solid var(--age-border);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--age-ink);
  text-decoration: none;
}
.guia-otras-lista a:hover, .cf-otras-lista a:hover { border-color: var(--age-primary); color: var(--age-primary-dark); }

@media (max-width: 600px) {
  .guia-wrap h1, .cf-wrap h1 { font-size: 1.6rem; }
  .guia-cta-final, .cf-cta-final { padding: 24px 18px; }
}