/* =====================================================================
   CIUDADANO DIGITAL — Hoja de estilos del portal público
   Capa de marca sobre Bootstrap 5. Los valores provienen del
   Manual Básico de Identidad Visual (versión inicial, agosto 2026).
   ===================================================================== */

:root {
  /* Paleta institucional */
  --cd-azul-profundo: #0D2B4D;
  --cd-azul: #1565C0;
  --cd-azul-claro: #E8F1FB;
  --cd-verde: #43B649;
  --cd-verde-oscuro: #2F9435;
  --cd-verde-claro: #EAF7EB;
  --cd-gris-oscuro: #2D2D2D;
  --cd-gris-medio: #6B7280;
  --cd-gris-claro: #F5F7FB;
  --cd-borde: #E3E8F0;
  --cd-blanco: #FFFFFF;

  /* Tipografía */
  --cd-titulos: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cd-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Formas y profundidad: esquinas suaves, sombras discretas */
  --cd-radio: 14px;
  --cd-radio-sm: 10px;
  --cd-sombra: 0 1px 2px rgba(13, 43, 77, .04), 0 8px 24px rgba(13, 43, 77, .06);
  --cd-sombra-alta: 0 12px 40px rgba(13, 43, 77, .12);

  /* Ritmo vertical de las secciones */
  --cd-seccion: clamp(3.5rem, 7vw, 6rem);
}

/* ------------------------------------------------------------- BASE */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--cd-texto);
  color: var(--cd-gris-oscuro);
  background: var(--cd-blanco);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .cd-titulo {
  font-family: var(--cd-titulos);
  font-weight: 700;
  color: var(--cd-azul-profundo);
  line-height: 1.2;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }

p { margin-bottom: 1rem; }
a { color: var(--cd-azul); text-decoration: none; }
a:hover { color: var(--cd-azul-profundo); text-decoration: underline; }

/* Accesibilidad: foco siempre visible y con contraste suficiente */
:focus-visible {
  outline: 3px solid var(--cd-verde);
  outline-offset: 2px;
  border-radius: 4px;
}

.cd-saltar {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--cd-azul-profundo); color: #fff;
  padding: .85rem 1.35rem; border-radius: 0 0 var(--cd-radio-sm) 0; font-weight: 600;
}
.cd-saltar:focus { left: 0; color: #fff; }

/* Solo para lectores de pantalla */
.cd-oculto-visual {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.cd-icono { width: 1.4em; height: 1.4em; flex: none; }

/* --------------------------------------------------------- CONTENEDOR */

.cd-seccion { padding: var(--cd-seccion) 0; }
.cd-seccion--claro { background: var(--cd-gris-claro); }
.cd-seccion--azul { background: var(--cd-azul-profundo); color: #E8EEF6; }
.cd-seccion--azul h2, .cd-seccion--azul h3 { color: #fff; }

.cd-encabezado-seccion { max-width: 46rem; margin-bottom: 2.5rem; }
.cd-encabezado-seccion.text-center { margin-inline: auto; }
.cd-antetitulo {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--cd-titulos); font-weight: 700; font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cd-verde-oscuro);
  margin-bottom: .75rem;
}
.cd-seccion--azul .cd-antetitulo { color: var(--cd-verde); }
.cd-bajada { font-size: 1.08rem; color: var(--cd-gris-medio); }
.cd-seccion--azul .cd-bajada { color: #C3D2E4; }

/* ------------------------------------------------------------ BOTONES */

.btn {
  font-family: var(--cd-titulos);
  font-weight: 600;
  border-radius: 999px;
  padding: .8rem 1.6rem;
  border-width: 2px;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.btn:active { transform: translateY(1px); }

.btn-cd-verde { background: var(--cd-verde); border-color: var(--cd-verde); color: #fff; }
.btn-cd-verde:hover, .btn-cd-verde:focus { background: var(--cd-verde-oscuro); border-color: var(--cd-verde-oscuro); color: #fff; }

.btn-cd-azul { background: var(--cd-azul-profundo); border-color: var(--cd-azul-profundo); color: #fff; }
.btn-cd-azul:hover, .btn-cd-azul:focus { background: #0a2039; border-color: #0a2039; color: #fff; }

.btn-cd-linea { background: transparent; border-color: var(--cd-azul-profundo); color: var(--cd-azul-profundo); }
.btn-cd-linea:hover { background: var(--cd-azul-profundo); color: #fff; }

.btn-cd-linea-claro { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; }
.btn-cd-linea-claro:hover { background: #fff; color: var(--cd-azul-profundo); border-color: #fff; }

.cd-enlace-flecha {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; font-family: var(--cd-titulos); font-size: .95rem;
}
.cd-enlace-flecha .cd-icono { width: 1.1em; height: 1.1em; transition: transform .18s ease; }
.cd-enlace-flecha:hover .cd-icono { transform: translateX(3px); }

/* ---------------------------------------------------------- ENCABEZADO */

.cd-cabecera {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--cd-borde);
}
.cd-cabecera__barra { display: flex; align-items: center; gap: 1rem; padding: .7rem 0; }

.cd-logo { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; }
.cd-logo:hover { text-decoration: none; }
.cd-logo img { width: 48px; height: auto; }
.cd-logo__pastilla {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 12px; padding: .3rem .35rem; flex: none;
}
.cd-logo__pastilla img { width: 40px; height: auto; display: block; }
.cd-logo--oscuro .cd-logo__nombre { color: #fff; }
.cd-logo__texto { display: flex; flex-direction: column; line-height: 1; }
.cd-logo__nombre {
  font-family: var(--cd-titulos); font-weight: 800; font-size: 1.02rem;
  letter-spacing: .02em; color: var(--cd-azul-profundo);
}
.cd-logo__nombre span { color: var(--cd-verde); letter-spacing: .22em; font-size: .78rem; display: block; margin-top: .18rem; }

.cd-nav { display: none; margin-left: auto; align-items: center; gap: .2rem; }
@media (min-width: 1100px) { .cd-nav { display: flex; } }

.cd-nav a {
  font-family: var(--cd-titulos); font-weight: 600; font-size: .93rem;
  color: var(--cd-azul-profundo); padding: .55rem .75rem; border-radius: 8px;
}
.cd-nav a:hover { background: var(--cd-azul-claro); text-decoration: none; }
.cd-nav a.es-activo { color: var(--cd-azul); }
.cd-nav a.es-activo::after {
  content: ''; display: block; height: 3px; border-radius: 3px;
  background: var(--cd-verde); margin-top: .25rem;
}
.cd-nav .cd-nav__destacado {
  background: var(--cd-verde); color: #fff; border-radius: 999px; padding: .55rem 1.25rem; margin-left: .4rem;
}
.cd-nav .cd-nav__destacado:hover { background: var(--cd-verde-oscuro); color: #fff; }
.cd-nav .cd-nav__destacado.es-activo::after { display: none; }

.cd-cabecera__acciones { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
@media (min-width: 1100px) { .cd-cabecera__acciones { margin-left: .5rem; } }

.cd-boton-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 999px;
  border: 1px solid var(--cd-borde); background: #fff; color: var(--cd-azul-profundo);
}
.cd-boton-icono:hover { background: var(--cd-azul-claro); }
@media (min-width: 1100px) { .cd-boton-menu { display: none; } }

/* Menú móvil */
.cd-menu-movil {
  display: none; border-top: 1px solid var(--cd-borde);
  background: #fff; padding: 1rem 0 1.5rem;
  max-height: calc(100vh - 70px); overflow-y: auto;
}
.cd-menu-movil.es-abierto { display: block; }
.cd-menu-movil a {
  display: block; padding: .8rem .25rem; font-family: var(--cd-titulos);
  font-weight: 600; color: var(--cd-azul-profundo); border-bottom: 1px solid var(--cd-gris-claro);
}
.cd-menu-movil a.cd-nav__destacado {
  margin-top: 1rem; background: var(--cd-verde); color: #fff;
  border-radius: 999px; text-align: center; border: 0;
}

/* Buscador desplegable */
.cd-buscador { display: none; padding: 1rem 0; border-top: 1px solid var(--cd-borde); background: var(--cd-gris-claro); }
.cd-buscador.es-abierto { display: block; }

/* ---------------------------------------------------------------- HERO */

.cd-hero {
  position: relative;
  background: linear-gradient(155deg, #0D2B4D 0%, #14406E 55%, #1565C0 100%);
  color: #fff; overflow: hidden;
  padding: clamp(2rem, 4.5vw, 3.25rem) 0 clamp(1.75rem, 3.5vw, 2.5rem);
}
.cd-hero::after {
  /* Trama de píxeles: lenguaje gráfico de la marca */
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 82% 18%, rgba(67,182,73,.32), transparent 46%),
    radial-gradient(circle at 12% 88%, rgba(21,101,192,.42), transparent 52%);
  pointer-events: none;
}
.cd-hero > * { position: relative; z-index: 1; }
.cd-hero h1 { color: #fff; margin-bottom: .85rem; font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
.cd-hero__lema {
  /* píldora del lema, compacta */
  display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  color: #fff; border-radius: 999px; padding: .4rem 1rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  font-family: var(--cd-titulos); margin-bottom: 1rem;
}
.cd-hero__texto { font-size: 1.02rem; color: #D8E4F2; max-width: 34rem; margin-bottom: 0; }
.cd-hero__acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }

.cd-hero__cifras {
  display: flex; flex-wrap: wrap; gap: 1.8rem; margin-top: 1.6rem;
  padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.16);
}
.cd-hero__cifra strong {
  display: block; font-family: var(--cd-titulos); font-size: 1.5rem; color: #fff; line-height: 1.1;
}
.cd-hero__cifra span { font-size: .82rem; color: #B9CBE1; text-transform: uppercase; letter-spacing: .07em; }

/* Alex: el avatar que da la bienvenida en el hero */
.cd-hero__avatar {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 300px;
}
.cd-hero__avatar::before {
  /* Halo suave detrás de la figura para separarla del degradado */
  content: '';
  position: absolute; inset: auto 0 0 50%;
  width: min(420px, 92%); aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(67,182,73,.28) 0%, rgba(21,101,192,.18) 45%, transparent 70%);
  border-radius: 50%;
}
.cd-hero__avatar img {
  position: relative;
  width: auto;
  max-width: 100%;
  max-height: 380px;
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .35));
}
.cd-hero__saludo {
  position: absolute; top: 4%; left: 0; z-index: 2;
  background: #fff; color: var(--cd-azul-profundo);
  font-family: var(--cd-titulos); font-size: .9rem; font-weight: 600;
  padding: .55rem 1rem; border-radius: 16px 16px 16px 4px;
  box-shadow: var(--cd-sombra-alta);
  animation: cd-saludo 5s ease-in-out infinite;
}
.cd-hero__saludo strong { color: var(--cd-verde-oscuro); }

@keyframes cd-saludo {
  0%, 88%, 100% { transform: translateY(0); }
  92%           { transform: translateY(-5px); }
  96%           { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .cd-hero__saludo { animation: none; }
}
@media (max-width: 991.98px) {
  .cd-hero__avatar { min-height: 240px; margin-top: 1rem; }
  .cd-hero__avatar img { max-height: 290px; }
  .cd-hero__saludo { left: 50%; transform: translateX(-50%); border-radius: 16px 16px 4px 16px; }
  @keyframes cd-saludo {
    0%, 88%, 100% { transform: translateX(-50%) translateY(0); }
    92%           { transform: translateX(-50%) translateY(-5px); }
    96%           { transform: translateX(-50%) translateY(-2px); }
  }
}

/* Botón de reproducción del video de Alex */
.cd-boton-video {
  display: inline-flex; align-items: center; gap: .65rem;
  background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.32);
  color: #fff; border-radius: 999px; padding: .55rem 1.3rem .55rem .55rem;
  font-family: var(--cd-titulos); font-weight: 600; font-size: .92rem;
  cursor: pointer; transition: background-color .18s ease, border-color .18s ease;
}
.cd-boton-video:hover { background: rgba(255,255,255,.2); border-color: #fff; }
.cd-boton-video__play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--cd-verde); color: #fff; flex: none;
}
.cd-boton-video__play svg { width: 18px; height: 18px; margin-left: 2px; }

/* Diálogo de video (elemento <dialog> nativo) */
.cd-dialogo {
  width: min(920px, 94vw); padding: 0; border: 0;
  border-radius: var(--cd-radio); background: #fff;
  box-shadow: 0 30px 80px rgba(0,0,0,.45); color: var(--cd-gris-oscuro);
  overflow: hidden;
}
.cd-dialogo::backdrop { background: rgba(6, 20, 36, .75); backdrop-filter: blur(3px); }
.cd-dialogo__cabecera {
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem 1.1rem; border-bottom: 1px solid var(--cd-borde);
}
.cd-dialogo__cabecera h2 { margin: 0; font-size: 1rem; }
.cd-dialogo__cerrar {
  margin-left: auto; flex: none; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--cd-borde); background: #fff; color: var(--cd-azul-profundo);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.cd-dialogo__cerrar:hover { background: var(--cd-azul-profundo); color: #fff; }
.cd-dialogo video {
  display: block; width: 100%; height: auto; max-height: 70vh;
  background: #0D2B4D; aspect-ratio: 1280 / 850;
}
.cd-dialogo__pie {
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end;
  padding: .9rem 1.1rem; border-top: 1px solid var(--cd-borde); background: var(--cd-gris-claro);
}

/* Video incrustado en página (presentación de Alex en el inicio) */
.cd-video-marco {
  border-radius: var(--cd-radio); overflow: hidden;
  border: 1px solid var(--cd-borde); box-shadow: var(--cd-sombra);
  background: var(--cd-azul-profundo);
}
.cd-video-marco video {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1280 / 850; object-fit: cover; background: var(--cd-azul-profundo);
}

/* --------------------------------------------------------------- FRASE */

.cd-frase {
  border-left: 5px solid var(--cd-verde);
  padding: 1.4rem 0 1.4rem 1.7rem;
  font-family: var(--cd-titulos); font-weight: 600;
  font-size: clamp(1.25rem, 2.6vw, 1.85rem);
  color: var(--cd-azul-profundo); line-height: 1.35;
}
.cd-seccion--azul .cd-frase { color: #fff; }

/* -------------------------------------------------------------- TARJETAS */

.cd-tarjeta {
  background: #fff; border: 1px solid var(--cd-borde); border-radius: var(--cd-radio);
  box-shadow: var(--cd-sombra); height: 100%; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cd-tarjeta:hover { transform: translateY(-4px); box-shadow: var(--cd-sombra-alta); border-color: #CFDBEA; }
.cd-tarjeta__cuerpo { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.cd-tarjeta__titulo { font-size: 1.12rem; margin-bottom: .5rem; }
.cd-tarjeta__titulo a { color: var(--cd-azul-profundo); }
.cd-tarjeta__titulo a:hover { color: var(--cd-azul); text-decoration: none; }
.cd-tarjeta__texto { color: var(--cd-gris-medio); font-size: .95rem; flex: 1; }
.cd-tarjeta__pie {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--cd-gris-claro);
  font-size: .82rem; color: var(--cd-gris-medio);
}
.cd-tarjeta__medio { aspect-ratio: 16/9; background: var(--cd-azul-claro); overflow: hidden; }
.cd-tarjeta__medio img { width: 100%; height: 100%; object-fit: cover; }
.cd-tarjeta__medio--vacio {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #E8F1FB, #EAF7EB); color: var(--cd-azul);
}
.cd-tarjeta__medio--vacio .cd-icono { width: 3rem; height: 3rem; opacity: .55; }

.cd-icono-caja {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--cd-azul-claro); color: var(--cd-azul); margin-bottom: 1rem;
}
.cd-icono-caja .cd-icono { width: 1.6rem; height: 1.6rem; }
.cd-icono-caja--verde { background: var(--cd-verde-claro); color: var(--cd-verde-oscuro); }

/* Etiquetas de estado y categoría */
.cd-etiqueta {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--cd-titulos); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: .3rem .7rem; border-radius: 999px;
  background: var(--cd-azul-claro); color: var(--cd-azul);
}
.cd-etiqueta--verde { background: var(--cd-verde-claro); color: var(--cd-verde-oscuro); }
.cd-etiqueta--gris { background: var(--cd-gris-claro); color: var(--cd-gris-medio); }
.cd-etiqueta--ambar { background: #FFF4E0; color: #9A6100; }

/* --------------------------------------------------------- PRINCIPIOS */

.cd-principio {
  display: flex; gap: 1rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--cd-borde); border-radius: var(--cd-radio);
  padding: 1.35rem; height: 100%; transition: border-color .2s ease, transform .2s ease;
}
.cd-principio:hover { border-color: var(--cd-verde); transform: translateY(-3px); }
.cd-principio__numero {
  flex: none; width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cd-titulos); font-weight: 800; font-size: 1.1rem;
  background: var(--cd-azul-profundo); color: #fff;
}
.cd-principio__titulo { font-size: 1.02rem; margin-bottom: .3rem; }
.cd-principio__titulo a { color: var(--cd-azul-profundo); }
.cd-principio__texto { font-size: .9rem; color: var(--cd-gris-medio); margin: 0; }

/* --------------------------------------------------------------- LISTAS */

.cd-lista-comprobacion { list-style: none; padding: 0; margin: 0; }
.cd-lista-comprobacion li {
  position: relative; padding-left: 1.9rem; margin-bottom: .7rem;
}
.cd-lista-comprobacion li::before {
  content: ''; position: absolute; left: 0; top: .45rem;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--cd-verde-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F9435' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center/.75rem no-repeat;
}

/* ------------------------------------------------------------- EVENTOS */

.cd-evento { display: flex; gap: 1.1rem; align-items: flex-start; }
.cd-evento__fecha {
  flex: none; width: 68px; text-align: center; border-radius: var(--cd-radio-sm);
  background: var(--cd-azul-profundo); color: #fff; padding: .6rem .2rem;
}
.cd-evento__fecha strong { display: block; font-family: var(--cd-titulos); font-size: 1.5rem; line-height: 1; }
.cd-evento__fecha span { font-size: .7rem; letter-spacing: .1em; }

/* -------------------------------------------------------------- ARTÍCULO */

.cd-articulo { max-width: 46rem; }
.cd-articulo__contenido { font-size: 1.06rem; }
.cd-articulo__contenido h2 { margin: 2.2rem 0 .9rem; font-size: 1.5rem; }
.cd-articulo__contenido h3 { margin: 1.8rem 0 .7rem; }
.cd-articulo__contenido ul, .cd-articulo__contenido ol { margin-bottom: 1.2rem; padding-left: 1.4rem; }
.cd-articulo__contenido li { margin-bottom: .45rem; }
.cd-articulo__contenido img { max-width: 100%; height: auto; border-radius: var(--cd-radio-sm); margin: 1.2rem 0; }
.cd-articulo__contenido blockquote {
  border-left: 4px solid var(--cd-verde); padding-left: 1.2rem; margin: 1.6rem 0;
  font-size: 1.12rem; color: var(--cd-azul-profundo); font-weight: 500;
}
.cd-articulo__contenido table { width: 100%; margin: 1.4rem 0; border-collapse: collapse; }
.cd-articulo__contenido th, .cd-articulo__contenido td { border: 1px solid var(--cd-borde); padding: .6rem .8rem; }
.cd-articulo__contenido iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--cd-radio-sm); }

/* «El consejo de Alex»: cierre de cada guía de la Academia */
.cd-consejo {
  display: flex; align-items: flex-start; gap: 1.1rem;
  margin: 2.4rem 0; padding: 1.4rem 1.5rem;
  background: linear-gradient(140deg, var(--cd-verde-claro), #fff 78%);
  border: 1px solid #CDE9CF; border-left: 5px solid var(--cd-verde);
  border-radius: var(--cd-radio);
}
.cd-consejo__retrato {
  flex: none; width: 84px; height: 84px; border-radius: 50%; overflow: hidden;
  background: #fff; border: 2px solid var(--cd-verde);
  box-shadow: 0 4px 14px rgba(13, 43, 77, .1);
}
.cd-consejo__retrato img {
  width: 100%; height: 100%; margin: 0; border-radius: 0;
  object-fit: cover; object-position: 50% 18%; display: block;
}
.cd-articulo__contenido .cd-consejo__titulo {
  margin: .1rem 0 .5rem; font-size: 1.15rem; color: var(--cd-verde-oscuro);
  display: flex; align-items: center; gap: .5rem;
}
.cd-articulo__contenido .cd-consejo blockquote {
  margin: 0; padding-left: 0; border-left: 0;
  font-size: 1.06rem; font-style: italic;
}
@media (max-width: 575.98px) {
  .cd-consejo { flex-direction: column; align-items: center; text-align: center; padding: 1.3rem 1.1rem; }
  .cd-consejo__retrato { width: 76px; height: 76px; }
  .cd-articulo__contenido .cd-consejo__titulo { justify-content: center; }
}

.cd-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem;
  font-size: .87rem; color: var(--cd-gris-medio);
}
.cd-meta > * { display: inline-flex; align-items: center; gap: .35rem; }
.cd-meta .cd-icono { width: 1.05rem; height: 1.05rem; }

.cd-compartir { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cd-compartir a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--cd-borde); color: var(--cd-azul-profundo);
}
.cd-compartir a:hover { background: var(--cd-azul-profundo); color: #fff; }

/* ---------------------------------------------------------- FORMULARIOS */

.cd-formulario {
  background: #fff; border: 1px solid var(--cd-borde);
  border-radius: var(--cd-radio); box-shadow: var(--cd-sombra); padding: clamp(1.5rem, 3vw, 2.5rem);
}
.form-label { font-weight: 600; font-size: .92rem; color: var(--cd-azul-profundo); margin-bottom: .35rem; }
.cd-req { color: #C62828; }
.form-control, .form-select {
  border-radius: var(--cd-radio-sm); border: 1.5px solid var(--cd-borde);
  padding: .7rem .9rem; font-size: .98rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--cd-azul); box-shadow: 0 0 0 .22rem rgba(21,101,192,.14);
}
.form-control.es-invalido, .form-select.es-invalido { border-color: #C62828; }
.form-text { font-size: .84rem; color: var(--cd-gris-medio); }
.cd-error { color: #C62828; font-size: .85rem; margin-top: .3rem; display: block; }

.form-check-input { width: 1.15em; height: 1.15em; margin-top: .18em; border-color: #B9C4D4; }
.form-check-input:checked { background-color: var(--cd-verde); border-color: var(--cd-verde); }
.form-check-label { font-size: .95rem; }

/* Selección múltiple en forma de fichas */
.cd-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .65rem; }
.cd-opcion {
  position: relative; display: flex; align-items: flex-start; gap: .6rem;
  border: 1.5px solid var(--cd-borde); border-radius: var(--cd-radio-sm);
  padding: .8rem .9rem; cursor: pointer; background: #fff; transition: border-color .15s ease, background .15s ease;
}
.cd-opcion:hover { border-color: var(--cd-azul); }
.cd-opcion input { margin-top: .15rem; }
.cd-opcion:has(input:checked) { border-color: var(--cd-verde); background: var(--cd-verde-claro); }
.cd-opcion span { font-size: .9rem; font-weight: 500; }
.cd-opcion small { display: block; color: var(--cd-gris-medio); font-weight: 400; }

/* CAPTCHA accesible y campo trampa oculto */
.cd-captcha__fila { display: flex; align-items: center; gap: .7rem; }
.cd-captcha__operacion {
  font-family: var(--cd-titulos); font-weight: 700; font-size: 1.15rem;
  background: var(--cd-gris-claro); border: 1.5px dashed var(--cd-borde);
  padding: .55rem .9rem; border-radius: var(--cd-radio-sm); color: var(--cd-azul-profundo); white-space: nowrap;
}
.cd-captcha__fila .form-control { max-width: 150px; }
.cd-trampa { position: absolute !important; left: -9999px; top: -9999px; height: 0; overflow: hidden; }

.cd-paso {
  display: flex; align-items: center; gap: .65rem; margin-bottom: 1.4rem;
  font-family: var(--cd-titulos); font-weight: 700; color: var(--cd-azul-profundo);
  padding-bottom: .7rem; border-bottom: 2px solid var(--cd-gris-claro);
}
.cd-paso__numero {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--cd-azul-profundo); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: .88rem;
}

/* ------------------------------------------------------------- AVISOS */

.cd-aviso {
  display: flex; gap: .8rem; align-items: flex-start;
  border-radius: var(--cd-radio-sm); padding: 1rem 1.15rem; margin-bottom: 1.2rem;
  border-left: 4px solid; font-size: .95rem;
}
.cd-aviso--exito { background: var(--cd-verde-claro); border-color: var(--cd-verde); color: #1E5C22; }
.cd-aviso--error { background: #FDECEC; border-color: #C62828; color: #8E1F1F; }
.cd-aviso--aviso { background: #FFF7E6; border-color: #E9A23B; color: #7A4E06; }
.cd-aviso--info  { background: var(--cd-azul-claro); border-color: var(--cd-azul); color: #10406F; }
.cd-aviso .cd-icono { flex: none; margin-top: .15rem; }

/* ------------------------------------------------------------ FILTROS */

.cd-filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.cd-filtros a {
  font-family: var(--cd-titulos); font-weight: 600; font-size: .87rem;
  padding: .45rem 1rem; border-radius: 999px;
  border: 1.5px solid var(--cd-borde); color: var(--cd-azul-profundo); background: #fff;
}
.cd-filtros a:hover { border-color: var(--cd-azul); text-decoration: none; }
.cd-filtros a.es-activo { background: var(--cd-azul-profundo); border-color: var(--cd-azul-profundo); color: #fff; }

/* --------------------------------------------------------- PAGINACIÓN */

.cd-paginacion ul {
  display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: 2.5rem 0 0; justify-content: center;
}
.cd-paginacion a, .cd-paginacion span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 .8rem; border-radius: var(--cd-radio-sm);
  border: 1px solid var(--cd-borde); color: var(--cd-azul-profundo); font-weight: 600; font-size: .92rem;
}
.cd-paginacion a:hover { background: var(--cd-azul-claro); text-decoration: none; }
.cd-paginacion .es-actual span { background: var(--cd-azul-profundo); border-color: var(--cd-azul-profundo); color: #fff; }
.cd-paginacion .es-inactivo span, .cd-paginacion .es-puntos span { color: #AFBACB; border-color: transparent; }

/* ---------------------------------------------------- BLOQUE DE CIERRE */

.cd-llamado {
  background: linear-gradient(140deg, var(--cd-azul-profundo), #14406E 60%, var(--cd-verde-oscuro) 190%);
  color: #fff; border-radius: 24px; padding: clamp(2rem, 5vw, 3.5rem); text-align: center;
}
.cd-llamado h2 { color: #fff; }
.cd-llamado p { color: #CBD9EA; max-width: 40rem; margin-inline: auto; }

.cd-boletin {
  background: var(--cd-gris-claro); border: 1px solid var(--cd-borde);
  border-radius: var(--cd-radio); padding: clamp(1.5rem, 3vw, 2.2rem);
}

/* --------------------------------------------------------------- PIE */

.cd-pie { background: var(--cd-azul-profundo); color: #B9CBE1; padding: 3.5rem 0 0; }
.cd-pie h3 {
  color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1.1rem;
}
.cd-pie a { color: #B9CBE1; font-size: .93rem; }
.cd-pie a:hover { color: #fff; text-decoration: none; }
.cd-pie ul { list-style: none; padding: 0; margin: 0; }
.cd-pie li { margin-bottom: .55rem; }
.cd-pie__marca { max-width: 22rem; }
.cd-pie__marca .cd-logo__nombre { color: #fff; }
.cd-pie__redes { display: flex; gap: .55rem; margin-top: 1.2rem; flex-wrap: wrap; }
.cd-pie__redes a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22); color: #fff;
}
.cd-pie__redes a:hover { background: var(--cd-verde); border-color: var(--cd-verde); }
.cd-pie__legal {
  margin-top: 3rem; padding: 1.4rem 0; border-top: 1px solid rgba(255,255,255,.13);
  font-size: .85rem; display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; justify-content: space-between; align-items: center;
}
.cd-pie__declaracion {
  background: rgba(255,255,255,.06); border-radius: var(--cd-radio-sm);
  padding: 1rem 1.2rem; font-size: .87rem; margin-top: 1.4rem;
}

/* --------------------------------------------------------- INDICADORES */

.cd-indicador {
  background: #fff; border: 1px solid var(--cd-borde); border-radius: var(--cd-radio);
  padding: 1.4rem; height: 100%;
}
.cd-indicador__valor {
  font-family: var(--cd-titulos); font-weight: 800; font-size: 2.3rem;
  color: var(--cd-azul-profundo); line-height: 1;
}
.cd-indicador__nombre { font-weight: 600; font-size: .95rem; margin: .5rem 0 .3rem; color: var(--cd-gris-oscuro); }
.cd-indicador__fuente { font-size: .78rem; color: var(--cd-gris-medio); }

/* Barras de resultados de encuestas */
.cd-barra { background: var(--cd-gris-claro); border-radius: 999px; height: 12px; overflow: hidden; margin: .35rem 0; }
.cd-barra__relleno { height: 100%; background: var(--cd-verde); border-radius: 999px; }

/* ------------------------------------------------------ MIGAS DE PAN */

.cd-migas { font-size: .85rem; color: var(--cd-gris-medio); padding: 1rem 0; }
.cd-migas a { color: var(--cd-gris-medio); }
.cd-migas span { margin: 0 .4rem; }

/* Encabezado de página interna */
.cd-portada {
  background: var(--cd-gris-claro); border-bottom: 1px solid var(--cd-borde);
  padding: clamp(2rem, 5vw, 3.5rem) 0;
}
.cd-portada--azul {
  background: linear-gradient(150deg, var(--cd-azul-profundo), #14406E);
  border: 0; color: #D8E4F2;
}
.cd-portada--azul h1 { color: #fff; }
.cd-portada--azul .cd-migas, .cd-portada--azul .cd-migas a { color: #A9BFD8; }
.cd-portada__bajada { font-size: 1.08rem; color: var(--cd-gris-medio); max-width: 44rem; }
.cd-portada--azul .cd-portada__bajada { color: #C3D2E4; }

/* ------------------------------------------------------------ UTILES */

.cd-vacio {
  text-align: center; padding: 3rem 1rem; color: var(--cd-gris-medio);
  border: 2px dashed var(--cd-borde); border-radius: var(--cd-radio); background: #fff;
}
.cd-vacio .cd-icono { width: 2.6rem; height: 2.6rem; color: #C3CDDC; margin-bottom: .8rem; }

.cd-linea-tiempo { border-left: 2px solid var(--cd-borde); padding-left: 1.6rem; }
.cd-linea-tiempo > li { position: relative; margin-bottom: 1.6rem; list-style: none; }
.cd-linea-tiempo > li::before {
  content: ''; position: absolute; left: -2.05rem; top: .45rem;
  width: .8rem; height: .8rem; border-radius: 50%; background: var(--cd-verde); border: 2px solid #fff;
}

/* =====================================================================
   CARTA DE DERECHOS Y DEBERES DEL CIUDADANO DIGITAL
   Sección con identidad propia dentro del mismo sistema de diseño.
   ===================================================================== */

.cd-carta-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, #0D2B4D 0%, #14406E 52%, #1565C0 100%);
  color: #D8E4F2; text-align: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.75rem);
}
.cd-carta-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 88% 12%, rgba(67,182,73,.30), transparent 44%),
    radial-gradient(circle at 8% 92%, rgba(21,101,192,.45), transparent 50%);
}
.cd-carta-hero > * { position: relative; z-index: 1; }
.cd-carta-hero .cd-migas, .cd-carta-hero .cd-migas a { color: #A9BFD8; }
.cd-carta-hero .cd-migas { padding-top: 0; }
.cd-carta-hero__sello {
  display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px; padding: .42rem 1.05rem; margin-bottom: 1.1rem;
  font-family: var(--cd-titulos); font-weight: 700; font-size: .76rem;
  letter-spacing: .12em; text-transform: uppercase; color: #fff;
}
.cd-carta-hero h1 { color: #fff; margin-bottom: 1rem; }
.cd-carta-hero h1 span { color: var(--cd-verde); }
.cd-carta-hero__bajada {
  font-family: var(--cd-titulos); font-weight: 600; font-size: clamp(1rem, 2vw, 1.2rem);
  color: #C3D2E4; margin-bottom: 1.6rem;
}
.cd-carta-hero__lema {
  max-width: 34rem; margin: 0 auto 2rem;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem); font-weight: 600; color: #fff;
  border-top: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2);
  padding: 1.1rem .5rem;
}
.cd-carta-hero__acciones { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* Aviso: qué es y qué no es esta Carta */
.cd-carta-aviso {
  display: flex; gap: .9rem; margin-top: 1.6rem; padding: 1.1rem 1.25rem;
  background: var(--cd-azul-claro); border: 1px solid #CFE0F5;
  border-left: 5px solid var(--cd-azul); border-radius: var(--cd-radio);
  font-size: .96rem;
}
.cd-carta-aviso .cd-icono { flex: none; width: 1.5rem; height: 1.5rem; color: var(--cd-azul); }

/* Intervención de Alex */
.cd-carta-alex {
  display: flex; gap: 1.1rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--cd-borde); border-radius: var(--cd-radio);
  box-shadow: var(--cd-sombra); padding: 1.4rem 1.5rem;
}
.cd-carta-alex img {
  flex: none; width: 96px; height: 96px; border-radius: 50%;
  object-fit: cover; object-position: 50% 18%;
  background: var(--cd-verde-claro); border: 2px solid var(--cd-verde);
}
.cd-carta-alex__texto { font-size: 1.02rem; color: var(--cd-gris-oscuro); margin-bottom: .9rem; }
.cd-carta-alex__pronto {
  display: inline-flex; align-items: center; gap: .45rem; margin: 0;
  font-size: .86rem; color: var(--cd-gris-medio);
}
.cd-carta-alex__pronto .cd-icono { width: 1.15rem; height: 1.15rem; color: var(--cd-verde-oscuro); }
.cd-carta-alex--oscuro {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); box-shadow: none;
}
.cd-carta-alex--oscuro img { width: 64px; height: 64px; }
.cd-carta-alex--oscuro .cd-carta-alex__texto { color: #E8EEF6; font-style: italic; }
.cd-boton-video--claro {
  background: var(--cd-azul-profundo); border-color: var(--cd-azul-profundo); color: #fff;
}
.cd-boton-video--claro:hover { background: #0a2039; border-color: #0a2039; }

/* Fichas desplegables de derechos y deberes (<details> nativo) */
.cd-ficha {
  height: 100%; background: #fff; border: 1px solid var(--cd-borde);
  border-radius: var(--cd-radio); box-shadow: var(--cd-sombra);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.cd-ficha[open] { box-shadow: var(--cd-sombra-alta); border-color: #CFE0F5; }
.cd-ficha summary {
  display: flex; align-items: center; gap: .8rem;
  padding: 1rem 1.1rem; cursor: pointer; list-style: none;
  font-family: var(--cd-titulos); font-weight: 600; color: var(--cd-azul-profundo);
  border-radius: var(--cd-radio);
}
.cd-ficha summary::-webkit-details-marker { display: none; }
.cd-ficha summary:hover { background: var(--cd-gris-claro); }
.cd-ficha__numero {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .88rem; font-weight: 700; color: #fff; background: var(--cd-azul);
}
.cd-ficha__icono { flex: none; display: inline-flex; color: var(--cd-azul); }
.cd-ficha__icono .cd-icono { width: 1.35rem; height: 1.35rem; }
.cd-ficha__titulo { flex: 1 1 auto; font-size: 1rem; line-height: 1.35; }
.cd-ficha__mas {
  flex: none; position: relative; width: 20px; height: 20px; color: var(--cd-gris-medio);
}
.cd-ficha__mas::before, .cd-ficha__mas::after {
  content: ''; position: absolute; background: currentColor; border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease;
}
.cd-ficha__mas::before { left: 0; top: 9px; width: 20px; height: 2px; }
.cd-ficha__mas::after  { left: 9px; top: 0; width: 2px; height: 20px; }
.cd-ficha[open] .cd-ficha__mas::after { transform: rotate(90deg); opacity: 0; }
.cd-ficha__texto {
  margin: 0; padding: 0 1.25rem 1.2rem 4rem;
  color: var(--cd-gris-medio); font-size: .97rem;
}
.cd-ficha--deber .cd-ficha__numero { background: var(--cd-verde); }
.cd-ficha--deber .cd-ficha__icono { color: var(--cd-verde-oscuro); }
.cd-ficha--deber[open] { border-color: #CDE9CF; }
@media (max-width: 575.98px) {
  .cd-ficha__texto { padding-left: 1.25rem; }
}

/* Inteligencia artificial */
.cd-carta-ia__lema {
  font-family: var(--cd-titulos); font-weight: 700; color: var(--cd-verde);
  font-size: clamp(1.1rem, 2.4vw, 1.35rem); line-height: 1.35;
}
.cd-carta-ia__lista { counter-reset: ia; list-style: none; padding: 0; margin: 0; }
.cd-carta-ia__lista li {
  counter-increment: ia; position: relative;
  padding: 1rem 1.2rem 1rem 3.6rem; margin-bottom: .75rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--cd-radio); color: #E8EEF6;
}
.cd-carta-ia__lista li::before {
  content: counter(ia); position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; background: var(--cd-verde); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--cd-titulos); font-weight: 700; font-size: .88rem;
}

/* Derecho + responsabilidad */
.cd-pareja {
  height: 100%; background: #fff; border: 1px solid var(--cd-borde);
  border-left: 5px solid var(--cd-azul); border-radius: var(--cd-radio);
  padding: 1.15rem 1.3rem; box-shadow: var(--cd-sombra);
}
.cd-pareja__derecho {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem;
  font-family: var(--cd-titulos); font-weight: 700; color: var(--cd-azul-profundo);
}
.cd-pareja__derecho .cd-icono { width: 1.2rem; height: 1.2rem; color: var(--cd-azul); }
.cd-pareja__deber { display: flex; gap: .5rem; margin: 0; color: var(--cd-gris-medio); }
.cd-pareja__flecha { color: var(--cd-verde); font-weight: 700; }

/* Marco jurídico */
.cd-norma {
  display: flex; gap: .9rem; height: 100%;
  background: #fff; border: 1px solid var(--cd-borde); border-radius: var(--cd-radio);
  padding: 1.15rem 1.3rem;
}
.cd-norma__icono { flex: none; color: var(--cd-azul); }
.cd-norma__icono .cd-icono { width: 1.4rem; height: 1.4rem; }
.cd-norma__titulo { font-size: 1rem; margin-bottom: .35rem; }
.cd-norma__texto { margin: 0; font-size: .93rem; color: var(--cd-gris-medio); }
.cd-carta-nota {
  display: flex; gap: .7rem; align-items: flex-start;
  font-size: .92rem; color: var(--cd-gris-medio);
}
.cd-carta-nota .cd-icono { flex: none; width: 1.25rem; height: 1.25rem; color: var(--cd-gris-medio); }

/* Test */
.cd-test { max-width: 46rem; margin: 0 auto; }
.cd-test__pregunta {
  background: #fff; border: 1px solid var(--cd-borde); border-radius: var(--cd-radio);
  box-shadow: var(--cd-sombra); padding: 1.3rem 1.4rem; margin-bottom: 1rem;
}
.cd-test__pregunta legend {
  display: flex; gap: .7rem; align-items: flex-start; float: none; width: 100%;
  font-family: var(--cd-titulos); font-weight: 600; font-size: 1.02rem;
  color: var(--cd-azul-profundo); margin-bottom: .9rem;
}
.cd-test__numero {
  flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--cd-azul-claro);
  color: var(--cd-azul); display: inline-flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 700;
}
.cd-test__opcion {
  display: grid; grid-template-columns: auto 1fr; gap: .1rem .65rem;
  align-items: start; padding: .55rem .7rem; border-radius: var(--cd-radio-sm);
}
.cd-test__opcion:hover { background: var(--cd-gris-claro); }
.cd-test__opcion label { cursor: pointer; }
.cd-test__opcion input { margin-top: .3rem; }
.cd-test__razon {
  grid-column: 2; margin: .35rem 0 0; font-size: .89rem; color: var(--cd-gris-medio);
  padding-left: .7rem; border-left: 3px solid var(--cd-borde);
}
.cd-test__opcion.es-elegida { background: var(--cd-gris-claro); }
.cd-test__opcion.es-optima .cd-test__razon { border-left-color: var(--cd-verde); color: var(--cd-verde-oscuro); }
.cd-test__opcion.es-parcial .cd-test__razon { border-left-color: #E8A33D; color: #8A5A12; }
.cd-test__opcion.es-riesgo  .cd-test__razon { border-left-color: #C62828; color: #A02020; }
.cd-test__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.2rem; }
.cd-test__progreso { margin: 0; font-size: .88rem; color: var(--cd-gris-medio); }
.cd-test__resultado {
  max-width: 46rem; margin: 1.5rem auto 0; padding: 1.6rem 1.7rem;
  background: linear-gradient(140deg, var(--cd-azul-claro), #fff 70%);
  border: 1px solid #CFE0F5; border-radius: var(--cd-radio); box-shadow: var(--cd-sombra);
}
.cd-test__resultado h3 { margin-bottom: .5rem; }
.cd-test__marcador {
  display: inline-flex; align-items: baseline; gap: .35rem; margin-bottom: .6rem;
  font-family: var(--cd-titulos); font-weight: 800; color: var(--cd-verde-oscuro); font-size: 1.6rem;
}
.cd-test__marcador span { font-size: .95rem; font-weight: 600; color: var(--cd-gris-medio); }
.cd-test__resultado ul { margin: .8rem 0 0; padding-left: 1.2rem; color: var(--cd-gris-medio); }

/* Compromiso */
.cd-compromiso {
  text-align: center; background: #fff; border: 1px solid var(--cd-borde);
  border-radius: var(--cd-radio); box-shadow: var(--cd-sombra);
  padding: clamp(1.6rem, 4vw, 2.6rem);
}
.cd-compromiso__texto {
  border: 0; padding: 0; margin: 1rem auto 1.6rem; max-width: 38rem;
  font-size: clamp(1.05rem, 2.2vw, 1.22rem); font-weight: 500; color: var(--cd-azul-profundo);
}
.cd-compromiso__confirmacion { margin-top: 1.6rem; }
.cd-compromiso__marca {
  display: inline-flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--cd-verde); color: #fff; margin-bottom: .9rem;
  animation: cd-marca .5s cubic-bezier(.2, .8, .3, 1.2) both;
}
.cd-compromiso__marca svg { width: 34px; height: 34px; }
@keyframes cd-marca {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.cd-compromiso__bienvenida {
  font-family: var(--cd-titulos); font-weight: 700; font-size: 1.2rem;
  color: var(--cd-verde-oscuro); margin-bottom: .4rem;
}
.cd-compromiso__nota { font-size: .92rem; color: var(--cd-gris-medio); margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .cd-compromiso__marca { animation: none; }
}

/* Compartir y tarjeta social */
.cd-carta-compartir { display: flex; flex-wrap: wrap; gap: .6rem; }
.cd-carta-compartir .btn { display: inline-flex; align-items: center; gap: .5rem; }
.cd-carta-compartir .cd-icono { width: 1.15rem; height: 1.15rem; }
.cd-carta-tarjeta {
  position: relative; overflow: hidden; margin: 0;
  aspect-ratio: 1200 / 630; border-radius: var(--cd-radio);
  background: linear-gradient(150deg, #0D2B4D 0%, #14406E 55%, #1565C0 100%);
  color: #fff; box-shadow: var(--cd-sombra-alta);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(1.4rem, 4vw, 2.6rem);
}
.cd-carta-tarjeta::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 88% 16%, rgba(67,182,73,.32), transparent 45%);
}
.cd-carta-tarjeta__lema {
  position: relative; z-index: 1; margin: 0;
  font-family: var(--cd-titulos); font-weight: 800; line-height: 1.25;
  font-size: clamp(1.1rem, 3.2vw, 1.85rem);
}
.cd-carta-tarjeta__pie {
  position: relative; z-index: 1; display: flex; align-items: center; gap: .6rem;
  margin-top: auto; padding-top: 1.2rem;
  font-family: var(--cd-titulos); font-weight: 600; letter-spacing: .04em; color: #C3D2E4;
}
.cd-carta-tarjeta__pie img { background: #fff; border-radius: 8px; padding: 3px; }

/* =====================================================================
   CONOCE A TU CANDIDATO
   Diseñado móvil primero. Todas las candidaturas comparten exactamente los
   mismos componentes: no hay variantes por partido ni destaques visuales.
   ===================================================================== */

.cd-ctc-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(158deg, #0D2B4D 0%, #14406E 58%, #1565C0 100%);
  color: #D8E4F2; padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2.2rem, 4.5vw, 3rem);
}
.cd-ctc-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 90% 10%, rgba(67,182,73,.28), transparent 46%),
    radial-gradient(circle at 5% 95%, rgba(21,101,192,.4), transparent 50%);
}
.cd-ctc-hero > * { position: relative; z-index: 1; }
.cd-ctc-hero .cd-migas, .cd-ctc-hero .cd-migas a { color: #A9BFD8; }
.cd-ctc-hero h1 { color: #fff; margin-bottom: .5rem; }
.cd-ctc-hero__sello {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px; padding: .38rem 1rem; margin-bottom: .9rem;
  font-family: var(--cd-titulos); font-weight: 700; font-size: .75rem;
  letter-spacing: .1em; text-transform: uppercase; color: #fff;
}
.cd-ctc-hero__lema {
  font-family: var(--cd-titulos); font-weight: 700; color: var(--cd-verde);
  font-size: clamp(1.05rem, 2.6vw, 1.4rem); margin-bottom: .9rem;
}
.cd-ctc-hero__texto { max-width: 44rem; color: #C3D2E4; margin-bottom: 1.6rem; }
.cd-ctc-buscador { display: flex; flex-wrap: wrap; gap: .6rem; max-width: 40rem; }
.cd-ctc-buscador input { flex: 1 1 14rem; min-height: 48px; }
.cd-ctc-buscador .btn { min-height: 48px; }

/* Opciones de candidatura */
.cd-ctc-opcion {
  display: flex; align-items: center; gap: 1rem; height: 100%;
  background: #fff; border: 1px solid var(--cd-borde); border-radius: var(--cd-radio);
  box-shadow: var(--cd-sombra); padding: 1.2rem 1.3rem; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.cd-ctc-opcion:hover {
  text-decoration: none; transform: translateY(-2px);
  box-shadow: var(--cd-sombra-alta); border-color: #CFE0F5;
}
.cd-ctc-opcion__icono {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--cd-azul-claro); color: var(--cd-azul);
}
.cd-ctc-opcion__icono .cd-icono { width: 1.6rem; height: 1.6rem; }
.cd-ctc-opcion__cuerpo { display: flex; flex-direction: column; flex: 1 1 auto; }
.cd-ctc-opcion__titulo { font-family: var(--cd-titulos); font-weight: 700; color: var(--cd-azul-profundo); }
.cd-ctc-opcion__texto { font-size: .92rem; color: var(--cd-gris-medio); }
.cd-ctc-opcion__flecha { flex: none; color: var(--cd-verde); }
.cd-ctc-opcion--proxima { opacity: .72; box-shadow: none; background: var(--cd-gris-claro); }
.cd-ctc-opcion--proxima .cd-ctc-opcion__icono { background: #E7EBF2; color: var(--cd-gris-medio); }

.cd-ctc-municipios { max-width: 34rem; }
.cd-ctc-municipios select { flex: 1 1 16rem; }

.cd-ctc-pasos { padding-left: 1.2rem; margin: 0 0 1.2rem; }
.cd-ctc-pasos li { margin-bottom: .55rem; }

.cd-ctc-aviso {
  display: flex; gap: .9rem; align-items: flex-start;
  background: var(--cd-verde-claro); border: 1px solid #CDE9CF;
  border-left: 5px solid var(--cd-verde); border-radius: var(--cd-radio);
  padding: 1.1rem 1.25rem; font-size: .95rem;
}
.cd-ctc-aviso .cd-icono { flex: none; width: 1.5rem; height: 1.5rem; color: var(--cd-verde-oscuro); }

/* Bloque de Alex */
.cd-ctc-alex {
  display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center;
  background: linear-gradient(140deg, var(--cd-azul-claro), #fff 72%);
  border: 1px solid #CFE0F5; border-radius: var(--cd-radio);
  padding: clamp(1.4rem, 4vw, 2.4rem);
}
.cd-ctc-alex img {
  flex: none; width: 128px; height: 128px; border-radius: 50%;
  object-fit: cover; object-position: 50% 18%;
  background: #fff; border: 3px solid var(--cd-verde);
}
.cd-ctc-alex > div { flex: 1 1 20rem; }
.cd-ctc-alex__texto { color: var(--cd-gris-oscuro); font-style: italic; margin-bottom: 1.2rem; }

/* Tarjeta de candidato */
.cd-candidato {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--cd-borde); border-radius: var(--cd-radio);
  box-shadow: var(--cd-sombra); overflow: hidden;
}
.cd-candidato__foto {
  display: block; aspect-ratio: 1 / 1; background: var(--cd-gris-claro); overflow: hidden;
}
.cd-candidato__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.cd-candidato__foto--vacia {
  display: flex; align-items: center; justify-content: center; color: #B8C4D6;
}
.cd-candidato__foto--vacia .cd-icono { width: 3.4rem; height: 3.4rem; }
.cd-candidato__cuerpo { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.cd-candidato__nombre { font-size: 1.12rem; margin-bottom: .25rem; }
.cd-candidato__nombre a { color: var(--cd-azul-profundo); }
.cd-candidato__cargo {
  font-family: var(--cd-titulos); font-weight: 600; font-size: .88rem;
  color: var(--cd-azul); margin-bottom: .6rem;
}
.cd-candidato__dato {
  display: flex; align-items: center; gap: .4rem; margin-bottom: .3rem;
  font-size: .9rem; color: var(--cd-gris-medio);
}
.cd-candidato__dato .cd-icono { width: 1.05rem; height: 1.05rem; flex: none; }
.cd-candidato .btn { margin-top: auto; }

/* Distintivo de verificación */
.cd-verificado {
  display: inline-flex; align-items: center; gap: .45rem; margin: .6rem 0 0;
  font-family: var(--cd-titulos); font-weight: 700; font-size: .88rem; color: var(--cd-verde-oscuro);
}
.cd-verificado__marca {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--cd-verde); color: #fff; font-size: .72rem; flex: none;
}
.cd-verificado--pendiente { color: var(--cd-gris-medio); font-weight: 600; }
.cd-verificado--grande { font-size: 1rem; margin-top: 1rem; }
.cd-verificado--grande .cd-verificado__marca { width: 24px; height: 24px; font-size: .85rem; }

/* Filtros del listado */
.cd-ctc-filtros {
  display: grid; gap: .8rem; margin-bottom: 1.5rem;
  background: #fff; border: 1px solid var(--cd-borde); border-radius: var(--cd-radio);
  box-shadow: var(--cd-sombra); padding: 1.1rem 1.2rem;
}
@media (min-width: 768px) { .cd-ctc-filtros { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .cd-ctc-filtros { grid-template-columns: repeat(4, 1fr); align-items: end; } }
.cd-ctc-filtros .form-label { margin-bottom: .25rem; }
.cd-ctc-filtros__acciones { display: flex; gap: .5rem; }
.cd-ctc-filtros__acciones .btn { flex: 1 1 auto; }
.cd-ctc-conteo { font-size: .92rem; color: var(--cd-gris-medio); margin-bottom: 1.2rem; }

/* Perfil */
.cd-ctc-perfil {
  background: linear-gradient(150deg, var(--cd-azul-profundo), #14406E);
  color: #D8E4F2; padding: 0 0 clamp(2rem, 4vw, 2.8rem);
}
.cd-ctc-perfil .cd-migas, .cd-ctc-perfil .cd-migas a { color: #A9BFD8; }
.cd-ctc-perfil__cabecera { display: flex; flex-wrap: wrap; gap: clamp(1.2rem, 3vw, 2.2rem); align-items: flex-start; }
.cd-ctc-perfil__foto {
  flex: none; width: clamp(120px, 34vw, 200px); aspect-ratio: 1 / 1;
  border-radius: var(--cd-radio); overflow: hidden;
  background: rgba(255,255,255,.1); border: 3px solid rgba(255,255,255,.25);
}
.cd-ctc-perfil__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.cd-ctc-perfil__foto--vacia { display: flex; align-items: center; justify-content: center; color: #7E9AC0; }
.cd-ctc-perfil__foto--vacia .cd-icono { width: 3rem; height: 3rem; }
.cd-ctc-perfil__datos { flex: 1 1 18rem; }
.cd-ctc-perfil__datos h1 { color: #fff; margin-bottom: .3rem; font-size: clamp(1.6rem, 4vw, 2.4rem); }
.cd-ctc-perfil__cargo {
  font-family: var(--cd-titulos); font-weight: 600; color: var(--cd-verde); margin-bottom: 1rem;
}
.cd-ctc-perfil__lista { list-style: none; padding: 0; margin: 0 0 .4rem; display: grid; gap: .35rem; }
.cd-ctc-perfil__lista li { display: flex; align-items: center; gap: .5rem; color: #C3D2E4; font-size: .95rem; }
.cd-ctc-perfil__lista .cd-icono { width: 1.1rem; height: 1.1rem; flex: none; color: #8FB0D6; }
.cd-ctc-perfil .cd-verificado { color: #fff; }
.cd-ctc-perfil__nota { font-size: .85rem; color: #A9BFD8; max-width: 34rem; margin: .35rem 0 0; }
.cd-ctc-perfil__acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }

.cd-ctc-texto { font-size: 1.03rem; }
.cd-ctc-bloque {
  height: 100%; background: #fff; border: 1px solid var(--cd-borde);
  border-radius: var(--cd-radio); padding: 1.1rem 1.2rem;
}
.cd-ctc-bloque h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.02rem; margin-bottom: .5rem; }
.cd-ctc-bloque .cd-icono { width: 1.2rem; height: 1.2rem; color: var(--cd-azul); }
.cd-ctc-bloque p { margin: 0; color: var(--cd-gris-medio); font-size: .95rem; }

.cd-ctc-indicadores, .cd-ctc-redes {
  background: var(--cd-gris-claro); border: 1px solid var(--cd-borde);
  border-radius: var(--cd-radio); padding: 1.2rem 1.3rem; margin-bottom: 1rem;
}
.cd-ctc-indicadores h3, .cd-ctc-redes h3 { font-size: 1rem; margin-bottom: .8rem; }
.cd-ctc-indicadores dl { margin: 0; display: grid; gap: .45rem; }
.cd-ctc-indicadores dl > div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.cd-ctc-indicadores dt { font-size: .92rem; color: var(--cd-gris-medio); font-weight: 400; }
.cd-ctc-indicadores dd {
  margin: 0; font-family: var(--cd-titulos); font-weight: 700; color: var(--cd-azul-profundo);
}
.cd-ctc-indicadores__nota { font-size: .82rem; color: var(--cd-gris-medio); margin: .8rem 0 0; }
.cd-ctc-redes ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.cd-ctc-redes a {
  display: flex; align-items: center; gap: .55rem; padding: .5rem .7rem;
  background: #fff; border: 1px solid var(--cd-borde); border-radius: var(--cd-radio-sm);
  color: var(--cd-azul-profundo); font-weight: 600; font-size: .92rem; min-height: 44px;
}
.cd-ctc-redes a:hover { background: var(--cd-azul-profundo); color: #fff; text-decoration: none; }

.cd-ctc-tema {
  height: 100%; background: #fff; border: 1px solid var(--cd-borde);
  border-radius: var(--cd-radio); padding: 1.2rem 1.3rem; box-shadow: var(--cd-sombra);
}
.cd-ctc-tema__titulo {
  display: flex; align-items: center; gap: .55rem; font-size: 1.05rem;
  padding-bottom: .7rem; margin-bottom: .9rem; border-bottom: 1px solid var(--cd-borde);
}
.cd-ctc-tema__titulo .cd-icono { width: 1.3rem; height: 1.3rem; color: var(--cd-verde-oscuro); }
.cd-ctc-propuesta + .cd-ctc-propuesta { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--cd-borde); }
.cd-ctc-propuesta h4 { font-family: var(--cd-titulos); font-size: 1rem; color: var(--cd-azul-profundo); margin-bottom: .3rem; }
.cd-ctc-propuesta p { margin: 0; color: var(--cd-gris-medio); font-size: .95rem; }

.cd-ctc-programa {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  background: #fff; border: 1px solid var(--cd-borde); border-left: 5px solid var(--cd-azul);
  border-radius: var(--cd-radio); box-shadow: var(--cd-sombra); padding: 1.3rem 1.4rem;
}
.cd-ctc-programa__icono {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px; background: var(--cd-azul-claro); color: var(--cd-azul);
}
.cd-ctc-programa__icono .cd-icono { width: 1.6rem; height: 1.6rem; }
.cd-ctc-programa h3 { font-size: 1.08rem; margin-bottom: .25rem; }
.cd-ctc-programa__meta { margin: 0; font-size: .88rem; color: var(--cd-gris-medio); }

/* Preguntas ciudadanas */
.cd-ctc-preguntas { display: grid; gap: 1rem; }
.cd-ctc-pregunta {
  background: #fff; border: 1px solid var(--cd-borde); border-radius: var(--cd-radio);
  padding: 1.2rem 1.3rem; box-shadow: var(--cd-sombra);
}
.cd-ctc-pregunta__texto { font-size: 1.05rem; margin-bottom: .4rem; }
.cd-ctc-pregunta__meta { font-size: .85rem; color: var(--cd-gris-medio); margin-bottom: .8rem; }
.cd-ctc-pregunta__pie { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.cd-ctc-pregunta__pie .btn { min-height: 44px; }
.cd-ctc-respuesta {
  background: var(--cd-verde-claro); border: 1px solid #CDE9CF;
  border-radius: var(--cd-radio); padding: 1rem 1.15rem; margin-top: .6rem;
}
.cd-ctc-respuesta__sello {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem;
  font-family: var(--cd-titulos); font-weight: 700; font-size: .85rem; color: var(--cd-verde-oscuro);
}
.cd-ctc-respuesta__texto { color: var(--cd-gris-oscuro); }

/* Formulario de solicitud */
.cd-ctc-campos { border: 0; padding: 0; margin: 0 0 1.8rem; }
.cd-ctc-campos legend {
  display: flex; align-items: center; gap: .55rem; float: none; width: 100%;
  font-family: var(--cd-titulos); font-weight: 700; font-size: 1.05rem;
  color: var(--cd-azul-profundo); padding-bottom: .6rem; margin-bottom: 1rem;
  border-bottom: 2px solid var(--cd-borde);
}
.cd-ctc-campos legend .cd-icono { width: 1.25rem; height: 1.25rem; color: var(--cd-verde-oscuro); }
.cd-ctc-campos__nota { font-size: .9rem; color: var(--cd-gris-medio); margin-bottom: 1rem; }
.cd-ctc-campos--privado {
  background: var(--cd-gris-claro); border-radius: var(--cd-radio);
  padding: 1.2rem 1.3rem; border: 1px solid var(--cd-borde);
}
.cd-ctc-campos--privado legend { border-bottom-color: #D9E0EC; }
.cd-ctc-autorizacion {
  background: var(--cd-azul-claro); border: 1px solid #CFE0F5;
  border-radius: var(--cd-radio); padding: 1.2rem 1.3rem; margin-bottom: 1.5rem;
}
.cd-ctc-compromiso {
  height: 100%; background: #fff; border: 1px solid var(--cd-borde);
  border-radius: var(--cd-radio); padding: 1.3rem 1.4rem; box-shadow: var(--cd-sombra);
}
.cd-ctc-compromiso h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; margin-bottom: .8rem; }
.cd-ctc-compromiso .cd-icono { width: 1.25rem; height: 1.25rem; color: var(--cd-verde-oscuro); }
.cd-ctc-compromiso ul { padding-left: 1.2rem; margin: 0; color: var(--cd-gris-medio); }
.cd-ctc-compromiso li { margin-bottom: .4rem; }

.cd-ctc-gracias {
  text-align: center; background: #fff; border: 1px solid var(--cd-borde);
  border-radius: var(--cd-radio); box-shadow: var(--cd-sombra);
  padding: clamp(1.8rem, 5vw, 3rem);
}
.cd-ctc-gracias h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); margin-bottom: 1rem; }
.cd-ctc-gracias__codigo {
  display: inline-flex; flex-direction: column; gap: .2rem; margin-bottom: 1.2rem;
  background: var(--cd-gris-claro); border: 1px dashed var(--cd-borde);
  border-radius: var(--cd-radio); padding: .9rem 1.6rem;
}
.cd-ctc-gracias__codigo span { font-size: .82rem; color: var(--cd-gris-medio); }
.cd-ctc-gracias__codigo strong {
  font-family: var(--cd-titulos); font-size: 1.5rem; color: var(--cd-azul-profundo); letter-spacing: .04em;
}
.cd-ctc-gracias__texto { max-width: 38rem; margin: 0 auto 1rem; color: var(--cd-gris-medio); }

/* Panel del candidato */
.cd-ctc-panel-nav {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.8rem;
  border-bottom: 1px solid var(--cd-borde); padding-bottom: .8rem;
}
.cd-ctc-panel-nav a {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px;
  padding: .5rem 1rem; border-radius: 999px;
  font-family: var(--cd-titulos); font-weight: 600; font-size: .92rem;
  color: var(--cd-azul-profundo); background: var(--cd-gris-claro);
}
.cd-ctc-panel-nav a:hover { background: var(--cd-azul-claro); text-decoration: none; }
.cd-ctc-panel-nav a.es-activo { background: var(--cd-azul-profundo); color: #fff; }
.cd-ctc-panel-nav .cd-icono { width: 1.1rem; height: 1.1rem; }
.cd-ctc-panel-cabecera {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  margin-bottom: 1.4rem;
}

/* Toque cómodo en móvil */
@media (max-width: 767.98px) {
  .cd-ctc-perfil__acciones .btn,
  .cd-ctc-filtros__acciones .btn { width: 100%; min-height: 48px; }
  .cd-ctc-programa .btn { width: 100%; }
}

@media print {
  .cd-cabecera, .cd-pie, .cd-compartir, .btn { display: none !important; }
  body { font-size: 11pt; }
  .cd-ficha__texto { display: block !important; }
}