/*
 * ceij-internas.css — piezas de las páginas internas del rediseño.
 *
 * Nace con la pantalla del Asistente de Consulta Nexus, pero sus bloques
 * —cabecera con imagen, rejilla de capacidades, aviso, requisitos, pasos
 * numerados y tarjetas de plataforma— se repiten en las demás internas, así que
 * viven aquí y no en una hoja por página.
 */

/* ---------------------------------------------------------------------
   Cabecera de interna
   --------------------------------------------------------------------- */

.ceij .ceij-seccion--hero-interna { padding: 0; }

.ceij .ceij-hero-interna {
    position: relative;
    isolation: isolate;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    min-height: 360px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.ceij .ceij-hero-interna__fondo {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}

/* Velo que garantiza el contraste sobre cualquier fotografía. */
.ceij .ceij-hero-interna::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        100deg,
        rgba(9, 48, 92, .93) 0%,
        rgba(9, 48, 92, .84) 36%,
        rgba(9, 48, 92, .35) 58%,
        rgba(9, 48, 92, 0) 76%
    );
}

.ceij .ceij-hero-interna__contenido {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding: var(--ceij-e-7) var(--ceij-e-5);
    color: var(--ceij-c-texto-inverso);
}

.ceij .ceij-hero-interna__titulo {
    margin: 0 0 var(--ceij-e-3);
    font-size: var(--ceij-fs-800);
    color: var(--ceij-c-texto-inverso);
    max-width: 20ch;
}

.ceij .ceij-hero-interna__entrada {
    margin: 0 0 var(--ceij-e-4);
    font-size: var(--ceij-fs-500);
    font-weight: var(--ceij-fw-medio);
    color: var(--ceij-c-texto-inverso);
    max-width: 52ch;
}

.ceij .ceij-hero-interna__texto {
    margin: 0 0 var(--ceij-e-5);
    font-size: var(--ceij-fs-300);
    line-height: 1.6;
    color: var(--ceij-c-texto-inverso);
    max-width: 62ch;
}

.ceij .ceij-hero-interna__accion { margin: 0 0 var(--ceij-e-2); }
.ceij .ceij-hero-interna__nota {
    margin: 0;
    font-size: var(--ceij-fs-300);
    color: var(--ceij-c-texto-inverso);
}

/* Sobre el velo azul el foco azul no se vería. */
.ceij .ceij-hero-interna :focus-visible { outline-color: var(--ceij-c-texto-inverso); }

/* ---------------------------------------------------------------------
   Contenedor y cabecera de sección
   --------------------------------------------------------------------- */

.ceij .ceij-interna,
.ceij .ceij-aviso,
.ceij .ceij-dos-columnas,
.ceij .ceij-plataformas,
.ceij .ceij-consejos,
.ceij .ceij-migas--interna {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--ceij-e-5);
}

.ceij .ceij-migas--interna { padding-block: var(--ceij-e-4) 0; }

.ceij .ceij-interna { padding-block: var(--ceij-e-6); }

.ceij .ceij-interna__cabecera { text-align: center; margin-bottom: var(--ceij-e-6); }

.ceij .ceij-interna__titulo {
    margin: 0 0 var(--ceij-e-3);
    font-size: var(--ceij-fs-700);
    color: #072B61;
    position: relative;
    padding-bottom: var(--ceij-e-3);
}
.ceij .ceij-interna__titulo::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 72px;
    height: 3px;
    background: var(--ceij-c-marca);
}

/* En Solicitud de Jurisprudencia la barra del título va en verde azulado. */
.ceij .ceij-interna__titulo--teal::after { background: #00A88E; width: 56px; }

/* En Protección de Datos el título de sección va sin la barra inferior. */
.ceij .ceij-interna__titulo--liso { padding-bottom: 0; }
.ceij .ceij-interna__titulo--liso::after { content: none; }

.ceij .ceij-interna__entrada {
    margin: 0;
    color: var(--ceij-c-texto-suave);
    font-size: var(--ceij-fs-300);
}

/* ---------------------------------------------------------------------
   Capacidades
   --------------------------------------------------------------------- */

.ceij .ceij-capacidades {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ceij-e-4);
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Con la quinta capacidad («Buscar resoluciones judiciales directamente»,
   pedida por el CEIJ en 2026-10) la fila de escritorio pasa a cinco. */
@media (min-width: 1200px) {
    .ceij .ceij-capacidades:has(> :nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.ceij .ceij-capacidad {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ceij-e-3);
    padding: var(--ceij-e-5) var(--ceij-e-4);
    background: var(--ceij-c-superficie);
    border: 1px solid var(--ceij-c-borde);
    border-radius: var(--ceij-r-medio);
    box-shadow: var(--ceij-sombra);
    text-align: center;
    height: 100%;
}

.ceij .ceij-capacidad__icono {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #E8F1FA;
}

.ceij .ceij-capacidad__titulo {
    margin: 0;
    font-size: var(--ceij-fs-400);
    color: #072B61;
    line-height: 1.3;
}

.ceij .ceij-capacidad__texto {
    margin: 0;
    font-size: var(--ceij-fs-300);
    line-height: 1.5;
    color: var(--ceij-c-texto-suave);
}

/* ---------------------------------------------------------------------
   Aviso de alcance
   --------------------------------------------------------------------- */

.ceij .ceij-aviso {
    margin-block: var(--ceij-e-5);
}
.ceij .ceij-aviso > * { max-width: none; }

.ceij .ceij-aviso {
    background: #FBF3E4;
    border-radius: var(--ceij-r-medio);
    padding: var(--ceij-e-5) var(--ceij-e-6);
}

.ceij .ceij-aviso__cabecera {
    display: flex;
    align-items: flex-start;
    gap: var(--ceij-e-4);
    padding-bottom: var(--ceij-e-4);
    border-bottom: 1px solid #E3D3B0;
}

.ceij .ceij-aviso__icono { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; }

.ceij .ceij-aviso__titulo {
    margin: 0 0 var(--ceij-e-1);
    font-size: var(--ceij-fs-500);
    color: #4A3708;              /* 8,9:1 sobre #FBF3E4 */
}
.ceij .ceij-aviso__texto {
    margin: 0;
    font-size: var(--ceij-fs-300);
    color: #5A4A21;              /* 6,7:1 */
}

.ceij .ceij-aviso__lista {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ceij-e-4);
    list-style: none;
    margin: var(--ceij-e-4) 0 0;
    padding: 0;
}
.ceij .ceij-aviso__lista li {
    position: relative;
    padding-left: var(--ceij-e-4);
    font-size: var(--ceij-fs-300);
    line-height: 1.5;
    color: #5A4A21;
}
.ceij .ceij-aviso__lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ceij-c-aviso);
}

/* ---------------------------------------------------------------------
   Dos columnas: requisitos y pasos
   --------------------------------------------------------------------- */

.ceij .ceij-dos-columnas {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--ceij-e-5);
    align-items: start;
    margin-block: var(--ceij-e-5);
}

.ceij .ceij-requisitos {
    display: flex;
    align-items: flex-start;
    gap: var(--ceij-e-4);
    background: #E4F5EF;
    border-radius: var(--ceij-r-medio);
    padding: var(--ceij-e-5);
}
.ceij .ceij-requisitos__icono { flex: 0 0 auto; display: grid; place-items: center; width: 96px; height: 96px; }

.ceij .ceij-requisitos__titulo {
    margin: 0 0 var(--ceij-e-3);
    font-size: var(--ceij-fs-600);
    font-weight: var(--ceij-fw-negrita);
    color: #0A1E3C;              /* mismo título que «¿Cómo se usa?» */
}

.ceij .ceij-requisitos__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ceij-e-3); }
.ceij .ceij-requisitos__lista li {
    position: relative;
    padding-left: var(--ceij-e-5);
    font-size: var(--ceij-fs-300);
    line-height: 1.5;
    color: #1F3A33;              /* 10,3:1 */
}
/* La marca es decorativa: el significado ya lo da la lista. Va en el mismo
   círculo verde, del tono del icono de la persona. */
.ceij .ceij-requisitos__lista { gap: var(--ceij-e-3); }
.ceij .ceij-requisitos__lista li { padding-left: calc(18px + var(--ceij-e-3)); }
.ceij .ceij-requisitos__lista li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: .2em;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #00A991;
    color: #fff;
    font-size: 10px;
    font-weight: var(--ceij-fw-negrita);
    line-height: 1;
}

.ceij .ceij-pasos {
    background: var(--ceij-c-superficie);
    border: 1px solid #EEF1F5;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(15, 35, 70, .07);
    padding: var(--ceij-e-5);
    text-align: center;
}
.ceij .ceij-pasos__titulo { margin: 0 0 var(--ceij-e-1); font-size: var(--ceij-fs-600); font-weight: var(--ceij-fw-negrita); color: #0A1E3C; }
.ceij .ceij-pasos__entrada { margin: 0 0 var(--ceij-e-5); font-size: var(--ceij-fs-meta); color: var(--ceij-c-texto-suave); }

.ceij .ceij-pasos__lista {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ceij-e-3);
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: paso;
}

.ceij .ceij-paso {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ceij-e-1);
    padding: var(--ceij-e-5) var(--ceij-e-3);
    background: var(--ceij-c-superficie);
    border: 1px solid #EEF1F5;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(15, 35, 70, .06);
    height: 100%;
}
/* Círculo con el icono del paso; el número (la imagen del HTML) va de
   insignia en la esquina inferior derecha. */
.ceij .ceij-paso__icono {
    position: relative;
    width: 64px;
    height: 64px;
    margin-bottom: var(--ceij-e-3);
    border-radius: 50%;
    background: #EAF3FC no-repeat center / 26px;
}
.ceij .ceij-paso:nth-child(1) .ceij-paso__icono { background-image: url(../images/ceij/asistente-nexus/paso-icono-1.svg); }
.ceij .ceij-paso:nth-child(2) .ceij-paso__icono { background-image: url(../images/ceij/asistente-nexus/paso-icono-2.svg); }
.ceij .ceij-paso:nth-child(3) .ceij-paso__icono { background-image: url(../images/ceij/asistente-nexus/paso-icono-3.svg); }
.ceij .ceij-paso:nth-child(4) .ceij-paso__icono { background-image: url(../images/ceij/asistente-nexus/paso-icono-4.svg); }
.ceij .ceij-paso__icono img { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; }
.ceij .ceij-paso__titulo { margin: 0; font-size: var(--ceij-fs-300); font-weight: var(--ceij-fw-negrita); color: #0A1E3C; line-height: 1.3; }
.ceij .ceij-paso__texto  { margin: 0; font-size: var(--ceij-fs-meta); line-height: 1.45; color: var(--ceij-c-texto-suave); }

/* ---------------------------------------------------------------------
   Plataformas
   --------------------------------------------------------------------- */

.ceij .ceij-plataformas { text-align: center; margin-block: var(--ceij-e-6); }

.ceij .ceij-plataformas__titulo { margin: 0 0 var(--ceij-e-2); font-size: var(--ceij-fs-700); color: #072B61; }
/* Trazo corto bajo el arranque de la frase, no bajo toda: así va en el diseño. */
.ceij .ceij-subrayado { position: relative; display: inline-block; }
.ceij .ceij-subrayado::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -.12em;
    width: 36%;
    height: 4px;
    border-radius: 2px;
    background: var(--ceij-c-acento-fondo);
}
.ceij .ceij-plataformas__entrada { margin: 0 0 var(--ceij-e-5); font-size: var(--ceij-fs-300); color: var(--ceij-c-texto-suave); }

.ceij .ceij-plataformas__lista {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ceij-e-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Icono a la izquierda; nombre y botón apilados a su derecha. */
.ceij .ceij-plataforma {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: var(--ceij-e-4);
    row-gap: var(--ceij-e-3);
    padding: var(--ceij-e-6) var(--ceij-e-5);
    background: var(--ceij-c-superficie);
    border: 1px solid #EEF1F5;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(15, 35, 70, .07);
    text-align: left;
}
.ceij .ceij-plataforma__estado {
    position: absolute;
    top: 0;
    right: var(--ceij-e-5);
    transform: translateY(-50%);
    padding: 3px var(--ceij-e-3);
    border-radius: 8px;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.ceij .ceij-plataforma__icono { grid-row: 1 / 3; display: grid; place-items: center; width: 80px; height: 80px; }
.ceij .ceij-plataforma__icono img { width: 100%; height: 100%; object-fit: contain; }
/* El SVG de Gemini trae mucho aire alrededor de la estrella. */
.ceij .ceij-plataforma__icono img[src*="gemini"] { transform: scale(1.8); }
.ceij .ceij-plataforma__nombre { align-self: end; margin: 0; font-size: var(--ceij-fs-500); font-weight: var(--ceij-fw-negrita); color: var(--ceij-c-titulo); }
.ceij .ceij-plataforma__accion { align-self: start; margin: 0; }
.ceij .ceij-plataforma__accion .ceij-btn {
    width: 100%;
    max-width: 180px;
    border-radius: 8px;
    font-size: var(--ceij-fs-meta);
    font-weight: var(--ceij-fw-fuerte);
}
.ceij .ceij-plataforma__accion .ceij-btn--contorno { color: #0A2540; }
.ceij .ceij-plataforma__accion .ceij-btn--contorno:hover { background-color: #0A2540; color: var(--ceij-c-texto-inverso); }

/* Colores de los distintivos como en el diseño, oscurecidos lo justo para
   que el texto blanco cumpla AA. Copilot va en azul aunque esté disponible. */
.ceij .ceij-plataforma .ceij-distintivo--disponible { background: #1F7A4D; }
.ceij .ceij-plataforma:has(img[src*="copilot"]) .ceij-distintivo--disponible { background: #2F62C9; }
.ceij .ceij-plataforma .ceij-distintivo--proximamente { background: #8B3FD1; }

/* Estado no disponible: no es un enlace, y se anuncia como deshabilitado. */
.ceij .ceij-btn--inactivo {
    background: var(--ceij-c-superficie-alt);
    color: var(--ceij-c-texto-tenue);      /* 5,1:1 sobre #F1F5F9 */
    cursor: not-allowed;
    box-shadow: inset 0 0 0 1px var(--ceij-c-borde);
}

.ceij .ceij-distintivo--proximamente { background: #6D28A8; }   /* 7,1:1 con blanco */

/* ---------------------------------------------------------------------
   Consejos finales
   --------------------------------------------------------------------- */

.ceij .ceij-consejos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ceij-e-5);
    background: #EAF5FD;
    border-radius: var(--ceij-r-medio);
    padding: var(--ceij-e-5) var(--ceij-e-6);
    margin-block: var(--ceij-e-5) var(--ceij-e-8);
}
.ceij .ceij-consejos__cabecera { display: flex; align-items: center; gap: var(--ceij-e-4); flex: 0 0 auto; }
.ceij .ceij-consejos__icono { display: grid; place-items: center; width: 64px; height: 64px; }
.ceij .ceij-consejos__icono img { width: 100%; height: 100%; }
.ceij .ceij-consejos__titulo { margin: 0; font-size: var(--ceij-fs-500); font-weight: var(--ceij-fw-negrita); line-height: 1.15; color: #0A2A5C; max-width: 8ch; }

.ceij .ceij-consejos__lista {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 320px;
}
.ceij .ceij-consejos__lista li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--ceij-e-3);
    padding: var(--ceij-e-2) var(--ceij-e-5);
    font-family: var(--ceij-f-titulo);
    font-size: var(--ceij-fs-300);
    font-style: italic;
    font-weight: var(--ceij-fw-fuerte);
    line-height: 1.25;
    color: #0A2A5C;              /* 13:1 sobre #EAF5FD */
    border-left: 1px solid #1A3A6B;
}
.ceij .ceij-consejos__lista li:first-child { border-left: 0; }
/* Chulo de contorno, como en el diseño. Decorativo. */
.ceij .ceij-consejos__lista li::before {
    content: "";
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='%231A3A6B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13' cy='13' r='11.5'/%3E%3Cpath d='M8 13.3l3.4 3.4L18 9.6'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------------------------------------------------------------------
   Adaptación
   --------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
    .ceij .ceij-capacidades  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ceij .ceij-dos-columnas { grid-template-columns: 1fr; }
}
@media (max-width: 991.98px) {
    .ceij .ceij-hero-interna::before {
        background: linear-gradient(180deg, rgba(9,48,92,.94) 0%, rgba(9,48,92,.88) 100%);
    }
    .ceij .ceij-pasos__lista     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ceij .ceij-plataformas__lista { grid-template-columns: 1fr; }
    .ceij .ceij-aviso__lista     { grid-template-columns: 1fr; }
    .ceij .ceij-consejos__lista  { grid-template-columns: 1fr; }
    .ceij .ceij-consejos__lista li { border-left: 0; padding-inline: 0; }
}
@media (max-width: 575.98px) {
    .ceij .ceij-capacidades, .ceij .ceij-pasos__lista { grid-template-columns: 1fr; }
    .ceij .ceij-requisitos { flex-direction: column; align-items: center; text-align: center; }
    .ceij .ceij-interna, .ceij .ceij-aviso, .ceij .ceij-dos-columnas,
    .ceij .ceij-plataformas, .ceij .ceij-consejos, .ceij .ceij-migas--interna { padding-inline: var(--ceij-e-4); }
}

/* =====================================================================
   NEXUS-PJ — guía de búsquedas
   ---------------------------------------------------------------------
   Medidas tomadas de Nexus-PJ.png sobre el lienzo de 1920:
   contenedor 1444, columna principal 1052, lateral 332, canalón 40.
   El banner mide 1444x370 y la imagen que lo llena es de 1440x361.
   ===================================================================== */

.ceij .ceij-banner,
.ceij .ceij-columnas,
.ceij .ceij-cierre,
.ceij .ceij-migas--ancha {
    /* 1444 es el ancho util del diseno; el relleno lateral va por fuera para
       que el contenido mida 1444 exactos y no 1444 menos el relleno. */
    max-width: calc(1444px + var(--ceij-e-5) * 2);
    margin-inline: auto;
    padding-inline: var(--ceij-e-5);
}

/* El diseno de estas internas mide 1444px y el contenedor de SP Page Builder
   esta topado en 1320. Se suelta solo en las secciones marcadas como anchas;
   el ancho real lo pone cada bloque .ceij-* con su propio max-width. */
.ceij .ceij-seccion--ancha .sppb-row-container {
    max-width: none;
    padding-inline: 0;
}

/* --- Banner de cabecera: la imagen va de fondo y el texto encima ------
   A diferencia de .ceij-hero-interna, este no sangra a todo el ancho ni
   lleva velo oscuro: el arte ya reserva la mitad izquierda en claro. */
/* El banner arranca pegado a la barra de navegación: sin margen propio y sin
   el relleno superior que .ceij-seccion da al resto de bloques. */
.ceij .ceij-seccion--ancha { padding-block: 0 var(--ceij-e-7); }
.ceij .ceij-banner { margin-block: 0; }

.ceij .ceij-banner__lienzo {
    position: relative;
    overflow: hidden;
    /* Cada página trae su propio arte en --ceij-banner-arte (y sus recortes de
       tableta y teléfono), declarado en el style del elemento. */
    background: #DCE9F4 var(--ceij-banner-arte, none) no-repeat
                var(--ceij-banner-anclaje, right center) / var(--ceij-banner-encuadre, cover);
    aspect-ratio: 1444 / 370;
    display: grid;
    align-content: center;
    padding: var(--ceij-e-5) var(--ceij-e-6);
}

.ceij .ceij-banner__rejilla {
    display: grid;
    grid-template-columns: minmax(0, 410px) minmax(0, 240px);
    gap: 40px;
    align-items: start;
}

.ceij .ceij-banner__titulo {
    margin: 0 0 var(--ceij-e-3);
    font-size: var(--ceij-fs-900);
    line-height: 1.05;
    color: #0A2A4A;                        /* 12,1:1 sobre el claro del arte */
}
/* El «.PJ». #1E7F6B daba 3,4–4,3:1 sobre el claro del arte (hallazgo DTI);
   #0B5A49 da de 5,7:1 a 7,1:1. */
.ceij .ceij-banner__titulo b { font-weight: inherit; color: #0B5A49; }

.ceij .ceij-banner__lema {
    margin: 0 0 var(--ceij-e-5);
    font-size: var(--ceij-fs-400);   /* el lema va en una sola linea, como el diseno */
    font-weight: var(--ceij-fw-negrita);
    color: #10314F;
}

.ceij .ceij-banner__texto {
    margin: 0;
    font-size: var(--ceij-fs-400);
    line-height: var(--ceij-lh-normal);
    color: #1B3A56;
}

.ceij .ceij-banner__acciones { display: flex; flex-wrap: wrap; gap: var(--ceij-e-3); }
/* Relleno lateral mas justo: los dos botones caben en una linea dentro de los
   410px que les da el diseno. El alto se queda en los 44px de objetivo tactil,
   frente a los 34 del Figma: es la unica medida que no se copia. */
.ceij .ceij-banner__acciones .ceij-btn { padding-inline: var(--ceij-e-3); }

/* --- Rejilla principal + lateral ------------------------------------- */
.ceij .ceij-columnas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 332px;
    gap: 40px;
    align-items: start;
    padding-block: var(--ceij-e-6) var(--ceij-e-7);
}
.ceij .ceij-columnas__principal { min-width: 0; }
.ceij .ceij-columnas__lateral   { min-width: 0; display: grid; gap: var(--ceij-e-5); }

.ceij .ceij-columnas__titulo {
    margin: 0 0 var(--ceij-e-2);
    font-size: var(--ceij-fs-700);
    color: #0A2540;
}
.ceij .ceij-columnas__entrada {
    margin: 0 0 var(--ceij-e-5);
    font-size: var(--ceij-fs-400);
    color: var(--ceij-c-texto-suave);
}

/* --- Acordeón --------------------------------------------------------
   <details>/<summary>: abre y cierra sin JavaScript y el navegador ya
   expone el estado a los lectores de pantalla. */
.ceij .ceij-acordeon { display: grid; gap: var(--ceij-e-4); }

.ceij .ceij-acordeon__item {
    background: var(--ceij-c-superficie);
    border: 1px solid #E9EFF5;
    border-radius: 12px;
    box-shadow: var(--ceij-sombra);
}
.ceij .ceij-acordeon__item[open] { border: 2px solid #00B0DF; }

.ceij .ceij-acordeon__cabecera {
    display: flex;
    align-items: center;
    gap: var(--ceij-e-3);
    padding: var(--ceij-e-5);
    min-height: var(--ceij-tactil-min);
    cursor: pointer;
    list-style: none;
}
.ceij .ceij-acordeon__cabecera::-webkit-details-marker { display: none; }

.ceij .ceij-acordeon__numero {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: #00203F;                   /* 16,4:1 con blanco */
    color: var(--ceij-c-texto-inverso);
    font-size: var(--ceij-fs-300);
    font-weight: var(--ceij-fw-negrita);
}
.ceij .ceij-acordeon__icono {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid var(--ceij-c-borde);
}
.ceij .ceij-acordeon__icono img { width: 18px; height: 18px; }

.ceij .ceij-acordeon__titulo {
    flex: 1 1 auto;
    margin: 0;
    font-size: var(--ceij-fs-500);
    font-weight: var(--ceij-fw-negrita);
    color: #0A2540;
}
.ceij .ceij-acordeon__chevron {
    flex: 0 0 auto;
    width: 20px; height: 20px;
    color: #0A6FA8;
    transition: transform .2s ease;
}
.ceij .ceij-acordeon__item[open] .ceij-acordeon__chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
    .ceij .ceij-acordeon__chevron { transition: none; }
}

.ceij .ceij-acordeon__cuerpo {
    padding: 0 var(--ceij-e-5) var(--ceij-e-5);
    border-top: 1px solid #EDF1F6;
    margin-top: calc(-1 * var(--ceij-e-2));
    padding-top: var(--ceij-e-4);
}
.ceij .ceij-acordeon__entrada {
    margin: 0 0 var(--ceij-e-4);
    font-size: var(--ceij-fs-400);
    color: var(--ceij-c-texto);
}

/* Rejilla de cuatro apartados con separadores verticales */
.ceij .ceij-detalle {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: #F7FAFC;
    border-radius: var(--ceij-r-medio);
    padding: var(--ceij-e-5) 0;
    margin-bottom: var(--ceij-e-4);
}
.ceij .ceij-detalle > div {
    padding-inline: var(--ceij-e-4);
    border-left: 1px solid #E2E8F0;
}
.ceij .ceij-detalle > div:first-child { border-left: 0; }

.ceij .ceij-detalle__rotulo {
    margin: 0 0 var(--ceij-e-3);
    font-size: var(--ceij-fs-300);
    font-weight: var(--ceij-fw-negrita);
    color: #0A2540;
}
.ceij .ceij-detalle__texto {
    margin: 0;
    font-size: var(--ceij-fs-300);
    line-height: var(--ceij-lh-normal);
    color: var(--ceij-c-texto);
}
.ceij .ceij-detalle__ejemplo {
    margin: 0;
    display: grid;
    gap: var(--ceij-e-1);
    background: var(--ceij-c-superficie);
    border: 1px solid #D9E7F2;
    border-radius: var(--ceij-r-chico);
    padding: var(--ceij-e-2) var(--ceij-e-3);
    font-size: var(--ceij-fs-meta);
    color: #0A5C8C;                        /* 5,6:1 sobre blanco */
}

.ceij .ceij-consejo {
    display: flex;
    align-items: flex-start;
    gap: var(--ceij-e-2);
    background: #EBFDF4;
    border-left: 4px solid #00A855;
    border-radius: var(--ceij-r-chico);
    padding: var(--ceij-e-3) var(--ceij-e-4);
    font-size: var(--ceij-fs-300);
    line-height: var(--ceij-lh-normal);
    color: var(--ceij-c-texto);
    margin: 0;
}
.ceij .ceij-consejo img { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; }
.ceij .ceij-consejo b { color: #0A2540; }

/* --- Paneles del lateral --------------------------------------------- */
.ceij .ceij-panel {
    background: #F7FAFC;
    border: 1px solid #E4EBF2;
    border-radius: 12px;
    padding: var(--ceij-e-5);
}
.ceij .ceij-panel--destacado { background: #EFF4F8; border-color: #DCE6EE; text-align: center; }

.ceij .ceij-panel__titulo {
    display: flex;
    align-items: center;
    gap: var(--ceij-e-2);
    margin: 0 0 var(--ceij-e-3);
    font-size: var(--ceij-fs-400);
    font-weight: var(--ceij-fw-negrita);
    color: #0A2540;
}
.ceij .ceij-panel__titulo img { width: 18px; height: 18px; }
.ceij .ceij-panel--destacado .ceij-panel__titulo { justify-content: center; }

.ceij .ceij-panel__texto {
    margin: 0 0 var(--ceij-e-4);
    font-size: var(--ceij-fs-300);
    line-height: var(--ceij-lh-normal);
    color: var(--ceij-c-texto-suave);
}
.ceij .ceij-panel__rotulo {
    margin: 0 0 var(--ceij-e-3);
    font-size: var(--ceij-fs-300);
    font-weight: var(--ceij-fw-negrita);
    color: #0A2540;
}
.ceij .ceij-panel__ilustracion { width: 96px; height: auto; margin: 0 auto var(--ceij-e-3); display: block; }

.ceij .ceij-panel__lista {
    list-style: none;
    margin: 0 0 var(--ceij-e-5);
    padding: 0;
    display: grid;
    gap: var(--ceij-e-3);
}
.ceij .ceij-panel__lista li {
    display: flex;
    align-items: center;
    gap: var(--ceij-e-2);
    font-size: var(--ceij-fs-300);
    font-weight: var(--ceij-fw-negrita);
    color: #0A2540;
}
.ceij .ceij-panel__lista img { flex: 0 0 auto; width: 24px; height: 24px; }

.ceij .ceij-panel__marcas {
    list-style: none;
    margin: 0 0 var(--ceij-e-5);
    padding: 0;
    display: grid;
    gap: var(--ceij-e-2);
}
.ceij .ceij-panel__marcas li {
    position: relative;
    padding-left: var(--ceij-e-5);
    font-size: var(--ceij-fs-300);
    line-height: var(--ceij-lh-normal);
    color: var(--ceij-c-texto);
}
.ceij .ceij-panel__marcas li::before {
    content: '';
    position: absolute;
    left: 0; top: .35em;
    width: 14px; height: 9px;
    border-left: 2px solid #12805A;        /* 4,9:1 sobre #F7FAFC */
    border-bottom: 2px solid #12805A;
    transform: rotate(-45deg);
}

.ceij .ceij-panel__vinetas {
    margin: 0;
    padding-left: var(--ceij-e-4);
    display: grid;
    gap: var(--ceij-e-2);
    font-size: var(--ceij-fs-300);
    line-height: var(--ceij-lh-normal);
    color: var(--ceij-c-texto);
}

/* Maqueta del panel de filtros de Nexus.PJ: es una ilustración, va en
   texto real para que escale y se pueda leer con lupa o lector. */
.ceij .ceij-maqueta {
    background: var(--ceij-c-superficie);
    border: 1px solid #E4EBF2;
    border-radius: var(--ceij-r-medio);
    padding: var(--ceij-e-3);
    font-size: var(--ceij-fs-meta);
}
.ceij .ceij-maqueta__acciones { display: flex; gap: var(--ceij-e-2); margin-bottom: var(--ceij-e-3); }
.ceij .ceij-maqueta__accion {
    background: #E3F7EC;
    border-radius: var(--ceij-r-chico);
    padding: 3px var(--ceij-e-2);
    color: #0E6B4B;                          /* 5,83:1 sobre #E3F7EC; #12805A daba 4,41:1 */
    font-weight: var(--ceij-fw-fuerte);
}
.ceij .ceij-maqueta__grupo { border-top: 1px solid #EDF1F6; padding-top: var(--ceij-e-2); margin-top: var(--ceij-e-2); }
.ceij .ceij-maqueta__grupo:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.ceij .ceij-maqueta__nombre {
    display: flex; align-items: center; gap: 6px;
    margin: 0 0 var(--ceij-e-2);
    font-weight: var(--ceij-fw-negrita);
    color: #0A2540;
}
/* Son <h4> por pedido de la DTI (hallazgos 2026-10-09): conservan la letra
   que tenían como párrafo, heredada de la maqueta. */
.ceij .ceij-maqueta__nombre:is(h3, h4, h5) {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: none;
    text-wrap: wrap;
}
.ceij .ceij-maqueta__nombre::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%; background: #12805A;
}
.ceij .ceij-maqueta__campo {
    border: 1px solid var(--ceij-c-borde);
    border-radius: var(--ceij-r-chico);
    padding: 5px var(--ceij-e-2);
    color: var(--ceij-c-texto-tenue);
    margin-bottom: var(--ceij-e-2);
}
.ceij .ceij-maqueta__filas { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.ceij .ceij-maqueta__filas li { display: flex; justify-content: space-between; gap: var(--ceij-e-2); color: var(--ceij-c-texto-suave); }
.ceij .ceij-maqueta__filas b { font-weight: var(--ceij-fw-normal); color: var(--ceij-c-texto-tenue); }
.ceij .ceij-maqueta__mas { margin: var(--ceij-e-2) 0 0; color: #0A6FA8; font-weight: var(--ceij-fw-fuerte); }

/* --- Barra de cierre -------------------------------------------------- */
.ceij .ceij-cierre { padding-bottom: var(--ceij-e-7); }
.ceij .ceij-cierre__caja {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ceij-e-4);
    background: #F0F5F9;
    border-radius: var(--ceij-r-medio);
    padding: var(--ceij-e-4) var(--ceij-e-5);
}
.ceij .ceij-cierre__lema {
    display: flex; align-items: center; gap: var(--ceij-e-2);
    margin: 0;
    font-size: var(--ceij-fs-300);
    color: var(--ceij-c-texto);
}
.ceij .ceij-cierre__lema img { width: 18px; height: 18px; }
.ceij .ceij-cierre__firma {
    margin: 0;
    font-size: var(--ceij-fs-300);
    font-weight: var(--ceij-fw-negrita);
    letter-spacing: .04em;
    color: #0A2540;
}

/* --- Adaptación -------------------------------------------------------
   Las dos columnas aguantan hasta el telefono: en «Frame 110» (800) el Figma
   mantiene el acordeon y el lateral uno al lado del otro —463 y 214 de los
   689 utiles, con 12px de canalon—, no apilados. El lateral pasa a medirse en
   porcentaje (31%) para que la proporcion se conserve al estrecharse. */
@media (max-width: 1199.98px) {
    .ceij .ceij-columnas {
        grid-template-columns: minmax(0, 1fr) minmax(0, 31%);
        gap: var(--ceij-e-4);
    }
    .ceij .ceij-detalle  { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--ceij-e-4); }
    .ceij .ceij-detalle > div:nth-child(odd) { border-left: 0; }
}
@media (max-width: 767.98px) {
    .ceij .ceij-columnas { grid-template-columns: minmax(0, 1fr); gap: var(--ceij-e-5); }
}
@media (max-width: 767.98px) {
    .ceij .ceij-detalle { grid-template-columns: minmax(0, 1fr); }
    .ceij .ceij-detalle > div { border-left: 0; }
}
@media (max-width: 575.98px) {
    .ceij .ceij-banner,
    .ceij .ceij-columnas,
    .ceij .ceij-cierre,
    .ceij .ceij-migas--interna { padding-inline: var(--ceij-e-4); }
    /* Sin `wrap`: con los titulares largos —«Operadores de busqueda (AND / OR
       / NOT)», «Indice tematico y Tesauro»— el chevron se caia a una segunda
       linea y quedaba descolgado a la izquierda. En el Figma de movil la
       cabecera es una sola fila: numero, icono, titulo y chevron. */
    .ceij .ceij-acordeon__cabecera { padding: var(--ceij-e-4); }
    .ceij .ceij-acordeon__titulo   { min-width: 0; }
    .ceij .ceij-cierre__caja { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   PROTECCIÓN DE DATOS
   ---------------------------------------------------------------------
   Medidas de proteccion-de-datos.png sobre el lienzo de 1920: banner de
   1444x364, tabla de 1213 y bloque de dos columnas de 1321 (652+18+652).
   El diseño usa tres anchos distintos en la misma página; se respetan.
   ===================================================================== */

/* Variante de una sola columna de texto: el arte reserva la mitad izquierda
   en claro y el texto va en azul oscuro, como en Nexus.PJ. */
.ceij .ceij-banner--sencillo .ceij-banner__rejilla { grid-template-columns: minmax(0, 700px); }
.ceij .ceij-banner--sencillo .ceij-banner__titulo { font-size: var(--ceij-fs-800); }
/* Informes de Labores, medido sobre su Figma de 1920: el título parte tras
   «Rendición», la raya es naranja y llega hasta la «C» de «Cuentas», y la
   entrada va a 16px en una columna de ~480px. */
.ceij .ceij-banner--informes .ceij-banner__rejilla { grid-template-columns: minmax(0, 760px); }
/* Sin el reparto equilibrado: el diseño llena la primera línea. El ancho va
   en em para que parta tras «Rendición» con cualquier tamaño de letra. */
.ceij .ceij-banner--informes .ceij-banner__titulo { text-wrap: wrap; max-width: 17.5em; }
.ceij .ceij-banner--informes .ceij-banner__regla {
    /* Llega hasta el final de la «C» de «Cuentas»: 2,29 veces la letra del
       título, de ahí que tome su mismo tamaño. */
    font-size: var(--ceij-fs-800);
    width: 2.29em;
    height: 4px;
    margin: var(--ceij-e-3) 0 var(--ceij-e-4);
    background: #F59E0C;
}
/* Contacto, Capacitaciones, Lista de Difusión y Solicitud enviada también
   llevan la raya naranja bajo el título. */
.ceij .ceij-banner[aria-labelledby="ct-titulo"] .ceij-banner__regla,
.ceij .ceij-banner[aria-labelledby="ceij-cap-titulo"] .ceij-banner__regla,
.ceij .ceij-banner[aria-labelledby="ld-titulo"] .ceij-banner__regla,
.ceij .ceij-banner[aria-labelledby="se-titulo"] .ceij-banner__regla { background: #F59E0C; }
.ceij .ceij-banner--informes .ceij-banner__nota { max-width: 480px; font-size: var(--ceij-fs-400); }
.ceij .ceij-banner--sencillo .ceij-banner__texto {
    font-size: var(--ceij-fs-600);
    line-height: 1.45;
}
.ceij .ceij-banner__nota {
    margin: var(--ceij-e-4) 0 0;
    font-size: var(--ceij-fs-300);
    line-height: var(--ceij-lh-normal);
    color: #1B3A56;                         /* 7,9:1 sobre el claro del arte */
}

/* --- Banner del Asistente de Consulta Nexus ---------------------------
   Antes esta pagina llevaba un hero propio, oscuro y a sangre completa. En el
   Figma —tanto en «asistente nesus» (1920) como en «iPhone 16 & 17 Pro - 3»—
   el banner es claro y del mismo tamano que el de las demas internas, con el
   texto en azul sobre la parte clara del arte. Lleva mas texto que los otros
   (lema, parrafo, boton y nota), asi que las medidas se ajustan al Figma:
   columna de 779px de los 1444 (54%), titulo 48, lema 24, parrafo 15. */
.ceij .ceij-banner--asistente .ceij-banner__rejilla { grid-template-columns: minmax(0, 54%); }
.ceij .ceij-banner--asistente .ceij-banner__titulo {
    font-size: var(--ceij-fs-800);
    margin-bottom: var(--ceij-e-3);
}
.ceij .ceij-banner--asistente .ceij-banner__lema {
    font-size: var(--ceij-fs-600);
    line-height: 1.3;
    margin-bottom: var(--ceij-e-4);
}
.ceij .ceij-banner--asistente .ceij-banner__texto {
    font-size: var(--ceij-fs-300);
    line-height: var(--ceij-lh-normal);
}
.ceij .ceij-banner--asistente .ceij-banner__acciones { margin-top: var(--ceij-e-4); }
.ceij .ceij-banner--asistente .ceij-banner__nota { margin-top: var(--ceij-e-3); }

/* En tableta y telefono el texto ocupa el ancho y los cuerpos bajan un paso,
   como en «Frame 109» (800) y «iPhone 16 & 17 Pro - 3» (402). Las reglas van
   aqui, despues de las genericas del banner, porque comparten especificidad y
   decide el orden. */
@media (max-width: 991.98px) {
    /* La columna de texto la fija la regla general con `--ceij-banner-texto`,
       que es la misma medida que el panel macizo: si se pusiera `1fr`, el
       texto se saldria del macizo y volveria a caer sobre la ilustracion. */
    .ceij .ceij-banner--asistente .ceij-banner__titulo  { font-size: var(--ceij-fs-700); }
    .ceij .ceij-banner--asistente .ceij-banner__lema    { font-size: var(--ceij-fs-400); }
}
@media (max-width: 767.98px) {
    .ceij .ceij-banner--asistente .ceij-banner__titulo { font-size: var(--ceij-fs-600); }
    .ceij .ceij-banner--asistente .ceij-banner__lema   { font-size: var(--ceij-fs-300); }
}

/* --- Tabla de solicitudes --------------------------------------------- */
.ceij .ceij-tabla {
    max-width: calc(1213px + var(--ceij-e-5) * 2);
    margin-inline: auto;
    padding-inline: var(--ceij-e-5);
}
.ceij .ceij-tabla__caja {
    border: 2px solid var(--ceij-c-marca);
    border-radius: 10px;
    overflow: hidden;
}
.ceij .ceij-tabla table { width: 100%; border-collapse: collapse; }
.ceij .ceij-tabla th {
    background: #003068;                    /* 12,94:1 con blanco */
    color: var(--ceij-c-texto-inverso);
    font-size: var(--ceij-fs-500);
    font-weight: var(--ceij-fw-negrita);
    padding: var(--ceij-e-3) var(--ceij-e-5);
    text-align: center;
}
.ceij .ceij-tabla th + th { border-left: 1px solid rgba(255,255,255,.35); }
.ceij .ceij-tabla td {
    background: #F9F9F9;
    padding: var(--ceij-e-5);
    font-size: var(--ceij-fs-500);
    line-height: var(--ceij-lh-normal);
    color: var(--ceij-c-texto);             /* 9,84:1 */
    vertical-align: middle;
}
.ceij .ceij-tabla td + td { border-left: 2px solid var(--ceij-c-marca); }
.ceij .ceij-tabla th:first-child,
.ceij .ceij-tabla td:first-child { width: 40%; }

.ceij .ceij-tabla__asunto {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ceij-e-4);
    font-weight: var(--ceij-fw-negrita);
    color: #072B61;
}
.ceij .ceij-tabla__asunto img { flex: 0 0 auto; width: 64px; height: 64px; }

/* --- Bloque de dos columnas ------------------------------------------- */
.ceij .ceij-bloques {
    max-width: calc(1321px + var(--ceij-e-5) * 2);
    margin-inline: auto;
    padding-inline: var(--ceij-e-5);
    padding-block: var(--ceij-e-6);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}
/* Las dos columnas terminan a la misma altura: la última ficha de la derecha
   crece hasta el pie de la de la izquierda, como en el diseño. */
.ceij .ceij-bloques__columna { display: grid; gap: 18px; grid-template-rows: auto 1fr; }

.ceij .ceij-bloque {
    border-radius: 12px;
    padding: var(--ceij-e-6);
}
.ceij .ceij-bloque--azul  { background: #E5F8FF; }
.ceij .ceij-bloque--crema { background: #FAF3E9; }
.ceij .ceij-bloque--menta { background: #E0F6F4; }

.ceij .ceij-bloque__titulo {
    margin: 0 0 var(--ceij-e-6);
    padding-bottom: var(--ceij-e-3);
    font-size: var(--ceij-fs-600);
    color: #072B61;                          /* 14,2:1 sobre #E5F8FF */
    border-bottom: 4px solid var(--ceij-c-acento-fondo);
    display: inline-block;
}
.ceij .ceij-bloque--crema .ceij-bloque__titulo {
    font-size: var(--ceij-fs-500);
    border-bottom-width: 3px;
}

/* --- Pasos del trámite ------------------------------------------------- */
.ceij .ceij-tramites { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ceij-e-6); }
.ceij .ceij-tramite {
    display: grid;
    grid-template-columns: 40px 56px minmax(0, 1fr);
    align-items: center;
    gap: var(--ceij-e-4);
}
/* El número va en texto, no en imagen: el diseño solo trae los iconos del 1
   al 4 y la lista tiene cinco pasos. */
.ceij .ceij-tramite__numero {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--ceij-c-marca);
    color: var(--ceij-c-texto-inverso);      /* 12,61:1 */
    font-size: var(--ceij-fs-500);
    font-weight: var(--ceij-fw-negrita);
}
.ceij .ceij-tramite__icono { display: grid; place-items: center; }
.ceij .ceij-tramite__icono img { width: 48px; height: 48px; }
.ceij .ceij-tramite__cuerpo { min-width: 0; }
.ceij .ceij-tramite__titulo {
    margin: 0 0 var(--ceij-e-1);
    font-size: var(--ceij-fs-400);
    font-weight: var(--ceij-fw-negrita);
    color: #072B61;
}
.ceij .ceij-tramite__texto {
    margin: 0;
    font-size: var(--ceij-fs-300);
    line-height: var(--ceij-lh-normal);
    color: var(--ceij-c-texto);              /* 9,47:1 sobre #E5F8FF */
}

/* --- Recomendaciones ---------------------------------------------------- */
.ceij .ceij-recomendaciones { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ceij-e-5); }
.ceij .ceij-recomendacion {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: var(--ceij-e-4);
    align-items: start;
}
.ceij .ceij-recomendacion__icono {
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #F3E6CC;
}
.ceij .ceij-recomendacion__icono img { width: 30px; height: 30px; }
.ceij .ceij-recomendacion__titulo {
    margin: 0 0 var(--ceij-e-1);
    font-size: var(--ceij-fs-400);
    font-weight: var(--ceij-fw-negrita);
    color: #072B61;                          /* 14,1:1 sobre #FAF3E9 */
}
.ceij .ceij-recomendacion__texto {
    margin: 0;
    font-size: var(--ceij-fs-300);
    line-height: var(--ceij-lh-normal);
    color: var(--ceij-c-texto);              /* 9,40:1 sobre #FAF3E9 */
}

/* --- Formulario oficial -------------------------------------------------- */
.ceij .ceij-descarga {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: var(--ceij-e-5);
    align-items: center;
}
.ceij .ceij-descarga__icono { width: 88px; height: 88px; }
.ceij .ceij-descarga__rotulo {
    margin: 0 0 var(--ceij-e-2);
    font-size: var(--ceij-fs-400);
    font-weight: var(--ceij-fw-negrita);
    /* El diseño usa #00A88D, que sobre la menta da 2,67:1 y no cumple ni como
       texto grande. Se oscurece al mismo tono hasta 5,03:1. */
    color: #00755F;
}
.ceij .ceij-descarga__nombre {
    margin: 0 0 var(--ceij-e-2);
    font-size: var(--ceij-fs-600);
    color: #072B61;                          /* 13,8:1 sobre la menta */
}
.ceij .ceij-descarga__texto {
    margin: 0 0 var(--ceij-e-4);
    font-size: var(--ceij-fs-300);
    color: var(--ceij-c-texto);
}
.ceij .ceij-btn--verde {
    background-color: #006556;               /* 7,01:1 con blanco */
    color: var(--ceij-c-texto-inverso);
}
.ceij .ceij-btn--verde:hover,
.ceij .ceij-btn--verde:focus-visible {
    background-color: #00473C;
    color: var(--ceij-c-texto-inverso);
}

/* --- Aviso destacado ------------------------------------------------------ */
.ceij .ceij-alerta {
    max-width: calc(1321px + var(--ceij-e-5) * 2);
    margin-inline: auto;
    padding-inline: var(--ceij-e-5);
    padding-bottom: var(--ceij-e-7);
}
.ceij .ceij-alerta__caja {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--ceij-e-5);
    align-items: center;
    background: #FEDADA;
    border-radius: 12px;
    padding: var(--ceij-e-6);
}
.ceij .ceij-alerta__icono { width: 72px; height: 72px; }
.ceij .ceij-alerta__titulo {
    margin: 0 0 var(--ceij-e-2);
    font-size: var(--ceij-fs-600);
    /* El diseño usa #D20000 (4,35:1). Se oscurece a 5,35:1 para que cumpla
       también como texto normal. */
    color: #B80000;
}
.ceij .ceij-alerta__texto {
    margin: 0;
    font-size: var(--ceij-fs-500);
    line-height: var(--ceij-lh-normal);
    color: var(--ceij-c-texto);
}

/* Las dos columnas aguantan hasta el telefono: en «Frame 112» (800) «¿Cómo
   realizar la solicitud?» y las recomendaciones siguen una al lado de la otra,
   360px cada una de los 756 utiles. */
@media (max-width: 767.98px) {
    .ceij .ceij-bloques { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
    /* La tabla gira: en «iPhone 16 & 17 Pro - 6» los encabezados no se apilan
       sobre cada dato, sino que bajan a un raíl azul de 104px a la izquierda
       —«Solicitud» arriba, «Descripción» debajo— con los valores en blanco a
       la derecha, en 246px. La fila de <thead> se retira de la vista porque
       dos encabezados seguidos sin sus datos no se entienden; el rótulo lo
       repone `data-rotulo`. Sigue siendo una tabla para el lector de pantalla. */
    .ceij .ceij-tabla table,
    .ceij .ceij-tabla tbody,
    .ceij .ceij-tabla tr,
    .ceij .ceij-tabla td { display: block; width: auto; }
    .ceij .ceij-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .ceij .ceij-tabla td:first-child { width: auto; }
    .ceij .ceij-tabla td {
        position: relative;
        background: var(--ceij-c-superficie);
        padding: var(--ceij-e-4);
        padding-left: calc(clamp(92px, 30%, 116px) + var(--ceij-e-4));
        font-size: var(--ceij-fs-300);
    }
    .ceij .ceij-tabla td + td { border-left: 0; border-top: 1px solid #DCE6EC; }
    .ceij .ceij-tabla td::before {
        content: attr(data-rotulo);
        position: absolute;
        inset: 0 auto 0 0;
        width: clamp(92px, 30%, 116px);
        display: grid;
        place-items: center;
        margin: 0;
        padding-inline: var(--ceij-e-2);
        background: #003068;                /* 12,94:1 con blanco */
        color: var(--ceij-c-texto-inverso);
        font-size: var(--ceij-fs-300);
        font-weight: var(--ceij-fw-negrita);
        text-align: center;
    }
    /* El raíl es continuo: la línea entre los dos rótulos va por dentro. */
    .ceij .ceij-tabla td + td::before { border-top: 1px solid rgba(255, 255, 255, .45); }

    .ceij .ceij-tabla__asunto { justify-content: flex-start; gap: var(--ceij-e-3); }
    .ceij .ceij-tabla__asunto img { width: 44px; height: 44px; }
    .ceij .ceij-tramite { grid-template-columns: 40px minmax(0, 1fr); }
    .ceij .ceij-tramite__icono { display: none; }
    .ceij .ceij-descarga { grid-template-columns: minmax(0, 1fr); justify-items: start; }
    .ceij .ceij-alerta__caja { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   SOLICITUD DE JURISPRUDENCIA
   ---------------------------------------------------------------------
   Medidas de Solicitud-de-Jurisprudencia.png sobre el lienzo de 1920:
   banner 1440x365, bloque de canales y panel de contacto 1406, bloque de
   dos columnas 1155 (622 + 25 + 508).
   ===================================================================== */

/* Regla corta bajo el lema del banner. */
.ceij .ceij-banner__regla {
    width: 48px;
    height: 4px;
    margin: var(--ceij-e-4) 0;
    border: 0;
    background: #00A88E;
    border-radius: 2px;
    /* Es un <hr> y Bootstrap les pone `opacity: .25`: el color se veía a una
       cuarta parte de su fuerza. */
    opacity: 1;
}

/* El arte de esta página no trae transparencia: el lado izquierdo es blanco.
   El velo pinta el panel claro del diseño y se desvanece sobre la fotografía. */
.ceij .ceij-banner--velado .ceij-banner__lienzo {
    background-image: linear-gradient(90deg,
                          var(--ceij-banner-velo, #DEE5EA) 0%,
                          var(--ceij-banner-velo, #DEE5EA) 38%,
                          transparent 62%),
                      var(--ceij-banner-arte, none);
}

/* --- Canales de atención ---------------------------------------------- */
.ceij .ceij-canales,
.ceij .ceij-contacto {
    max-width: calc(1406px + var(--ceij-e-5) * 2);
    margin-inline: auto;
    padding-inline: var(--ceij-e-5);
}

.ceij .ceij-canales__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.ceij .ceij-canal {
    display: flex;
    flex-direction: column;
    gap: var(--ceij-e-3);
    text-align: center;
    background: var(--ceij-c-superficie);
    border: 1px solid #E4EBF2;
    border-radius: 12px;
    padding: var(--ceij-e-5);
}
.ceij .ceij-canal__icono { margin: 0 auto; width: 52px; height: 52px; }
.ceij .ceij-canal__titulo {
    margin: 0;
    font-size: var(--ceij-fs-500);
    font-weight: var(--ceij-fw-negrita);
    color: #072B61;
}
.ceij .ceij-canal__texto {
    margin: 0;
    font-size: var(--ceij-fs-300);
    line-height: var(--ceij-lh-normal);
    color: var(--ceij-c-texto-suave);
}
.ceij .ceij-canal__accion { margin: auto 0 0; padding-top: var(--ceij-e-3); }
.ceij .ceij-canal__accion .ceij-btn { width: 100%; border-radius: var(--ceij-r-medio); }

/* --- Panel de contacto -------------------------------------------------- */
.ceij .ceij-contacto { padding-block: var(--ceij-e-5) var(--ceij-e-6); }

.ceij .ceij-contacto__caja {
    background: #F7FBFC;
    border: 1px solid #E4EBF2;
    border-radius: 12px;
    padding: var(--ceij-e-5) var(--ceij-e-6);
}
.ceij .ceij-contacto__titulo {
    margin: 0 0 var(--ceij-e-5);
    font-size: var(--ceij-fs-500);
    color: #072B61;                          /* 14,9:1 sobre #F7FBFC */
}
.ceij .ceij-contacto__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.ceij .ceij-contacto__dato {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: var(--ceij-e-3);
    align-items: start;
    padding-inline: var(--ceij-e-4);
    border-left: 1px solid #DCE6EC;
}
.ceij .ceij-contacto__dato:first-child { border-left: 0; padding-left: 0; }
.ceij .ceij-contacto__dato img { width: 26px; height: 26px; }
.ceij .ceij-contacto__rotulo {
    margin: 0 0 var(--ceij-e-1);
    font-size: var(--ceij-fs-300);
    font-weight: var(--ceij-fw-negrita);
    color: #072B61;
}
.ceij .ceij-contacto__valor {
    margin: 0;
    font-size: var(--ceij-fs-300);
    font-weight: var(--ceij-fw-negrita);
    line-height: var(--ceij-lh-normal);
    color: var(--ceij-c-texto);              /* 9,94:1 sobre #F7FBFC */
    overflow-wrap: anywhere;
}
.ceij .ceij-contacto__valor--normal { font-weight: var(--ceij-fw-normal); }

.ceij .ceij-contacto__horario {
    display: flex;
    align-items: center;
    gap: var(--ceij-e-2);
    margin: var(--ceij-e-5) 0 0;
    padding-top: var(--ceij-e-4);
    border-top: 1px solid #DCE6EC;
    font-size: var(--ceij-fs-300);
    color: var(--ceij-c-texto);
}
.ceij .ceij-contacto__horario img { flex: 0 0 auto; width: 20px; height: 20px; }
.ceij .ceij-contacto__horario b { color: #072B61; }

/* --- Dos columnas de ayuda ---------------------------------------------- */
.ceij .ceij-ayuda {
    max-width: calc(1155px + var(--ceij-e-5) * 2);
    margin-inline: auto;
    padding-inline: var(--ceij-e-5);
    padding-bottom: var(--ceij-e-7);
    display: grid;
    grid-template-columns: minmax(0, 622fr) minmax(0, 508fr);
    gap: 25px;
    align-items: stretch;
}
/* Las dos columnas terminan a la misma altura: la última ficha de la derecha
   crece hasta el pie de la de la izquierda, como en el diseño. */
.ceij .ceij-ayuda__columna { display: grid; gap: 25px; grid-template-rows: auto 1fr; }

.ceij .ceij-ficha {
    background: var(--ceij-c-superficie);
    border: 1px solid #E4EBF2;
    border-radius: 12px;
    padding: var(--ceij-e-6);
}
.ceij .ceij-ficha--clara { background: #F7FBFC; }
.ceij .ceij-ficha--ambar { background: #FAF3E9; border-color: #DAB167; }

.ceij .ceij-ficha__titulo {
    margin: 0 0 var(--ceij-e-5);
    font-size: var(--ceij-fs-600);
    color: #072B61;
}
.ceij .ceij-ficha--ambar .ceij-ficha__titulo {
    font-size: var(--ceij-fs-400);
    margin-bottom: var(--ceij-e-2);
    color: #8A5200;                          /* 5,80:1 sobre #FAF3E9 */
}

.ceij .ceij-tipos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ceij-e-5); }
.ceij .ceij-tipo {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: var(--ceij-e-4);
    align-items: start;
}
.ceij .ceij-tipo__icono {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #E9F4F8;
}
.ceij .ceij-tipo__icono img { width: 22px; height: 22px; }
.ceij .ceij-tipo__titulo {
    margin: 0 0 var(--ceij-e-1);
    font-size: var(--ceij-fs-400);
    font-weight: var(--ceij-fw-negrita);
    color: #072B61;
}
.ceij .ceij-tipo__texto {
    margin: 0;
    font-size: var(--ceij-fs-300);
    line-height: var(--ceij-lh-normal);
    color: var(--ceij-c-texto);
}

.ceij .ceij-ficha--ambar .ceij-ficha__cabecera {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: var(--ceij-e-4);
    align-items: start;
}
.ceij .ceij-ficha--ambar .ceij-ficha__cabecera img { width: 44px; height: 44px; }
.ceij .ceij-ficha__texto {
    margin: 0;
    font-size: var(--ceij-fs-300);
    line-height: var(--ceij-lh-normal);
    color: var(--ceij-c-texto);              /* 9,40:1 sobre #FAF3E9 */
}

.ceij .ceij-pautas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ceij-e-4); counter-reset: pauta; }
.ceij .ceij-pauta {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: var(--ceij-e-3);
    align-items: start;
    font-size: var(--ceij-fs-300);
    line-height: var(--ceij-lh-normal);
    color: var(--ceij-c-texto);
}
.ceij .ceij-pauta::before {
    counter-increment: pauta;
    content: counter(pauta);
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--ceij-c-marca);
    color: var(--ceij-c-texto-inverso);      /* 12,61:1 */
    font-size: var(--ceij-fs-meta);
    font-weight: var(--ceij-fw-negrita);
}

@media (max-width: 1199.98px) {
    .ceij .ceij-canales__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ceij .ceij-contacto__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ceij-e-5); }
    .ceij .ceij-contacto__dato { border-left: 0; padding-left: 0; }
}
/* Las dos columnas de ayuda aguantan hasta el telefono: «Frame 111» (800)
   mantiene la ficha a la izquierda (359) y el aviso con las recomendaciones a
   la derecha (293), en las mismas proporciones que en escritorio. */
@media (max-width: 767.98px) {
    .ceij .ceij-ayuda { grid-template-columns: minmax(0, 1fr); }
}
/* En el telefono los dos bloques se quedan en DOS columnas, no en una: en
   «iPhone 16 & 17 Pro - 5» los canales miden 155px cada uno (2x2 en los 340
   utiles) y los datos de contacto 169px (2 por fila en 360). Apilarlos en una
   sola columna alargaba la pagina al doble sin ganar nada. */
@media (max-width: 575.98px) {
    .ceij .ceij-canales,
    .ceij .ceij-contacto,
    .ceij .ceij-ayuda { padding-inline: var(--ceij-e-4); }
    .ceij .ceij-canales__lista  { gap: var(--ceij-e-3); }
    .ceij .ceij-canal           { padding: var(--ceij-e-4) var(--ceij-e-3); }
    .ceij .ceij-canal__accion .ceij-btn { padding-inline: var(--ceij-e-2); }
    .ceij .ceij-contacto__lista { gap: var(--ceij-e-4) var(--ceij-e-3); }
    .ceij .ceij-contacto__caja  { padding: var(--ceij-e-5) var(--ceij-e-4); }
}

/* =====================================================================
   ACCESO A LA INFORMACIÓN PÚBLICA
   ---------------------------------------------------------------------
   Medidas de acceso-a-la-informacion.png sobre el lienzo de 1920: banner
   1444x363 y el resto del contenido en 1220.
   ===================================================================== */

.ceij .ceij-ancho,
.ceij .ceij-pasos-tarjetas,
.ceij .ceij-par,
.ceij .ceij-recursos,
.ceij .ceij-orientacion {
    max-width: calc(1220px + var(--ceij-e-5) * 2);
    margin-inline: auto;
    padding-inline: var(--ceij-e-5);
}

/* --- Tarjetas de pasos ------------------------------------------------- */
.ceij .ceij-pasos-tarjetas__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 28px;
    align-items: start;
}
.ceij .ceij-paso-tarjeta {
    display: flex;
    flex-direction: column;
    gap: var(--ceij-e-3);
    text-align: center;
    background: var(--ceij-c-superficie);
    border: 1px solid #E4EBF2;
    border-radius: 12px;
    padding: var(--ceij-e-5) var(--ceij-e-4);
}
.ceij .ceij-paso-tarjeta__icono { margin: 0 auto var(--ceij-e-2); width: 64px; height: 64px; }
.ceij .ceij-paso-tarjeta__titulo {
    margin: 0;
    font-size: var(--ceij-fs-400);
    font-weight: var(--ceij-fw-negrita);
    color: #072B61;
}
.ceij .ceij-paso-tarjeta__texto {
    margin: 0;
    font-size: var(--ceij-fs-300);
    line-height: var(--ceij-lh-normal);
    color: var(--ceij-c-texto-suave);
}
.ceij .ceij-paso-tarjeta__lista {
    margin: 0;
    padding-left: var(--ceij-e-4);
    text-align: left;
    font-size: var(--ceij-fs-300);
    line-height: var(--ceij-lh-normal);
    color: var(--ceij-c-texto-suave);
    display: grid;
    gap: var(--ceij-e-2);
}
/* Fila de medios de presentación dentro de la tarjeta 4. */
.ceij .ceij-medios {
    list-style: none;
    margin: auto 0 0;
    padding-top: var(--ceij-e-4);
    border-top: 1px solid #EDF1F6;
    display: grid;
    /* Tantas columnas como medios (desde 2026-10 son dos: Electrónico y
       Presencial); con tres fijas cada palabra se partía por la mitad. */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--ceij-e-2);
}
.ceij .ceij-medios li {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 0;
    font-size: 0.6875rem;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: normal;
    color: var(--ceij-c-texto-suave);
}
.ceij .ceij-medios img { width: 20px; height: 20px; }

/* --- Par de avisos ------------------------------------------------------ */
.ceij .ceij-par {
    padding-block: var(--ceij-e-6);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}
.ceij .ceij-nota {
    border-radius: 12px;
    padding: var(--ceij-e-6);
}
.ceij .ceij-nota--ambar { background: #FAF3E9; border: 1px solid #EFDCBA; }
.ceij .ceij-nota--azul  { background: #E5F8FF; }

.ceij .ceij-nota__cabecera {
    display: flex;
    align-items: center;
    gap: var(--ceij-e-3);
    margin-bottom: var(--ceij-e-4);
}
.ceij .ceij-nota__cabecera img { flex: 0 0 auto; width: 48px; height: 48px; }
.ceij .ceij-nota__titulo { margin: 0; font-size: var(--ceij-fs-500); color: #072B61; }
.ceij .ceij-nota__texto {
    margin: 0;
    font-size: var(--ceij-fs-400);
    line-height: var(--ceij-lh-normal);
    color: var(--ceij-c-texto);
}
.ceij .ceij-nota__texto + .ceij-nota__texto {
    margin-top: var(--ceij-e-4);
    padding-top: var(--ceij-e-4);
    border-top: 1px solid rgba(10,37,64,.14);
}
.ceij .ceij-nota__plazo {
    display: flex;
    align-items: center;
    gap: var(--ceij-e-3);
    margin: var(--ceij-e-4) 0 0;
    padding-top: var(--ceij-e-4);
    border-top: 1px solid #E3D2B4;
    font-size: var(--ceij-fs-400);
    font-weight: var(--ceij-fw-negrita);
    color: #072B61;
}
.ceij .ceij-nota__plazo img { flex: 0 0 auto; width: 36px; height: 36px; }

/* --- Recursos y normativa ----------------------------------------------- */
.ceij .ceij-recursos {
    padding-bottom: var(--ceij-e-6);
    display: grid;
    grid-template-columns: minmax(0, 796fr) minmax(0, 384fr);
    gap: 37px;
    align-items: start;
}
.ceij .ceij-panel-grande {
    background: var(--ceij-c-superficie);
    border: 1px solid #E4EBF2;
    border-radius: 14px;
    padding: var(--ceij-e-6);
}
.ceij .ceij-panel-grande__titulo { margin: 0 0 var(--ceij-e-1); font-size: var(--ceij-fs-600); color: #0A2540; }
.ceij .ceij-panel-grande__entrada { margin: 0 0 var(--ceij-e-5); font-size: var(--ceij-fs-300); color: var(--ceij-c-texto-suave); }

.ceij .ceij-filtros { display: flex; flex-wrap: wrap; gap: var(--ceij-e-2); margin-bottom: var(--ceij-e-5); }
.ceij .ceij-filtro {
    display: inline-flex;
    align-items: center;
    gap: var(--ceij-e-2);
    min-height: var(--ceij-tactil-min);
    padding: var(--ceij-e-2) var(--ceij-e-3);
    border: 0;
    border-radius: var(--ceij-r-pildora);
    background: #F0F5F9;
    color: var(--ceij-c-texto);              /* 9,43:1 */
    font-family: var(--ceij-f-texto);
    font-size: var(--ceij-fs-300);
    font-weight: var(--ceij-fw-fuerte);
    cursor: pointer;
}
.ceij .ceij-filtro img { width: 18px; height: 18px; }
.ceij .ceij-filtro[aria-pressed="true"] {
    background: #00203F;                     /* 16,43:1 con blanco */
    color: var(--ceij-c-texto-inverso);
}

.ceij .ceij-tabla-recursos { width: 100%; border-collapse: collapse; table-layout: auto; }
.ceij .ceij-tabla-recursos th {
    text-align: left;
    padding: var(--ceij-e-3) var(--ceij-e-3);
    border-bottom: 1px solid #E4EBF2;
    font-size: var(--ceij-fs-meta);
    font-weight: var(--ceij-fw-negrita);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #072B61;
}
.ceij .ceij-tabla-recursos td {
    padding: var(--ceij-e-4) var(--ceij-e-3);
    border-bottom: 1px solid #EDF1F6;
    font-size: var(--ceij-fs-300);
    line-height: var(--ceij-lh-normal);
    color: var(--ceij-c-texto);
    vertical-align: middle;
}
.ceij .ceij-tabla-recursos tr:last-child td { border-bottom: 0; }
/* Fecha y Acción se encogen a su contenido —`width:1%` con `nowrap` es el
   truco clásico— y el resto del ancho se reparte entre las tres primeras.
   Sin esto «Ver» y «Descargar» se apilan. */
.ceij .ceij-tabla-recursos th:nth-child(4),
.ceij .ceij-tabla-recursos th:nth-child(5) { width: 1%; }
.ceij .ceij-tabla-recursos td:nth-child(4),
.ceij .ceij-tabla-recursos td:nth-child(5) { white-space: nowrap; }
/* En el diseño el rótulo de Acción va a la derecha y los botones centrados,
   con aire a los lados: sin ese relleno la columna se encoge justo al ancho de
   los botones y «Descargar» queda pegado al borde de la tabla. */
.ceij .ceij-tabla-recursos th:nth-child(5) { text-align: right; }
.ceij .ceij-tabla-recursos th:nth-child(5),
.ceij .ceij-tabla-recursos td:nth-child(5) { padding-inline: var(--ceij-e-4); }
.ceij .ceij-tabla-recursos .ceij-acciones { flex-wrap: nowrap; justify-content: center; }
.ceij .ceij-recurso__nombre { display: flex; align-items: flex-start; gap: var(--ceij-e-3); font-weight: var(--ceij-fw-fuerte); color: #072B61; }
.ceij .ceij-recurso__nombre img { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px; }

.ceij .ceij-etiqueta {
    display: inline-block;
    padding: 3px var(--ceij-e-3);
    border-radius: var(--ceij-r-pildora);
    font-size: var(--ceij-fs-meta);
    font-weight: var(--ceij-fw-negrita);
    white-space: nowrap;
}
.ceij .ceij-etiqueta--guia       { background: #D6EBFF; color: #0A4A8F; }  /* 7,19:1 */
.ceij .ceij-etiqueta--infografia { background: #BFFAE5; color: #0A5C45; }  /* 6,85:1 */
.ceij .ceij-etiqueta--video      { background: #FFF3C6; color: #7A5200; }  /* 6,22:1 */
.ceij .ceij-etiqueta--documento  { background: #F7E9FF; color: #6B2E8F; }  /* 7,48:1 */
.ceij .ceij-etiqueta--capacitacion { background: #DCF5E6; color: #14532D; }  /* 7,92:1 */

.ceij .ceij-acciones { display: flex; flex-wrap: wrap; gap: var(--ceij-e-2); }
.ceij .ceij-accion {
    display: inline-flex;
    align-items: center;
    gap: var(--ceij-e-2);
    min-height: var(--ceij-tactil-min);
    padding: var(--ceij-e-2) var(--ceij-e-4);
    border-radius: var(--ceij-r-pildora);
    background: #EDF6FF;
    color: #0A2540;                          /* 14,23:1 */
    font-size: var(--ceij-fs-300);
    font-weight: var(--ceij-fw-fuerte);
    text-decoration: none;
}
.ceij .ceij-accion:hover { background: #DCEBFB; color: #0A2540; }
/* Sin flex: 0 0 auto el navegador encoge el botón y se come su relleno
   derecho: «Descargar» acaba pegado al borde de la píldora. */
.ceij .ceij-accion { white-space: nowrap; flex: 0 0 auto; }
.ceij .ceij-accion img { width: 16px; height: 16px; }

.ceij .ceij-mas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ceij-e-2);
    width: 100%;
    min-height: var(--ceij-tactil-min);
    margin-top: var(--ceij-e-5);
    padding: var(--ceij-e-3) var(--ceij-e-5);
    border: 1px solid #E3E8EF;
    border-radius: var(--ceij-r-pildora);
    background: #F8FAFC;
    color: #0A2540;                          /* 14,82:1 */
    font-family: var(--ceij-f-texto);
    font-size: var(--ceij-fs-300);
    font-weight: var(--ceij-fw-fuerte);
    cursor: pointer;
}
.ceij .ceij-mas:hover { background: #ECF2F7; border-color: #D3DCE5; }
/* Galón hacia abajo, como en el diseño. Es decorativo. */
.ceij .ceij-mas--galon::after {
    content: "";
    width: 9px; height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}

.ceij .ceij-normativa__lista { list-style: none; margin: 0 0 var(--ceij-e-5); padding: 0; display: grid; gap: var(--ceij-e-3); }
.ceij .ceij-normativa__lista a {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: var(--ceij-e-4);
    align-items: center;
    min-height: var(--ceij-tactil-min);
    padding: var(--ceij-e-4) var(--ceij-e-4);
    background: #F7FAFC;
    border: 1px solid #E4EBF2;
    border-radius: var(--ceij-r-medio);
    font-size: var(--ceij-fs-300);
    font-weight: var(--ceij-fw-fuerte);
    line-height: var(--ceij-lh-normal);
    color: #0A2540;
    text-decoration: none;
}
.ceij .ceij-normativa__lista a:hover { background: #ECF2F7; color: #0A2540; }
.ceij .ceij-normativa__lista img { width: 26px; height: 26px; }

/* --- Barra de orientación ------------------------------------------------ */
.ceij .ceij-orientacion { padding-bottom: var(--ceij-e-7); }
.ceij .ceij-orientacion__caja {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: var(--ceij-e-5);
    align-items: center;
    background: var(--ceij-c-superficie);
    border: 1px solid #E4EBF2;
    border-radius: 14px;
    padding: var(--ceij-e-5) var(--ceij-e-6);
}
/* El icono va dentro de un cuadro azul claro de 56px y radio 14, medido sobre
   el PNG del diseño. Los iconos de los pasos ya traen su cuadro en el SVG. */
.ceij .ceij-orientacion__icono {
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    border-radius: 14px;
    background: #EDF6FF;
}
.ceij .ceij-orientacion__icono img { width: 32px; height: 32px; }
.ceij .ceij-orientacion__titulo { margin: 0 0 var(--ceij-e-1); font-size: var(--ceij-fs-500); color: #072B61; }
.ceij .ceij-orientacion__texto { margin: 0; font-size: var(--ceij-fs-300); line-height: var(--ceij-lh-normal); color: var(--ceij-c-texto-suave); }

/* Botón de correo: rectángulo de esquina suave —no píldora— con el texto
   subrayado, como en el diseño. Medido sobre el PNG: 310x39 y radio 10. */
.ceij .ceij-orientacion__accion {
    display: inline-flex;
    align-items: center;
    gap: var(--ceij-e-3);
    min-height: var(--ceij-tactil-min);
    padding: var(--ceij-e-3) var(--ceij-e-5);
    border-radius: 10px;
    background: #00203F;                     /* 16,43:1 con blanco */
    color: var(--ceij-c-texto-inverso);
    font-size: var(--ceij-fs-300);
    font-weight: var(--ceij-fw-negrita);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}
.ceij .ceij-orientacion__accion:hover,
.ceij .ceij-orientacion__accion:focus-visible {
    background: var(--ceij-c-marca-oscuro);
    color: var(--ceij-c-texto-inverso);
}
.ceij .ceij-orientacion__accion img { flex: 0 0 auto; width: 18px; height: auto; }

@media (max-width: 1199.98px) {
    .ceij .ceij-pasos-tarjetas__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ceij .ceij-recursos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 991.98px) {
    /* Dos columnas, no tres: en la pantalla de tableta del Figma los pasos
       miden 331px de los 686 utiles. Con tres, la tarjeta bajaba a 220px y
       «Electrónico» se partia a media palabra en los medios de contacto. */
    .ceij .ceij-pasos-tarjetas__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ceij .ceij-orientacion__caja { grid-template-columns: 56px minmax(0, 1fr); }
    .ceij .ceij-orientacion__caja > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
    .ceij .ceij-pasos-tarjetas__lista { gap: var(--ceij-e-4); }
    /* El par «Importante» / «Información general» sigue en dos columnas en
       tableta —364px cada uno de los 750 utiles— y solo se apila en telefono. */
    .ceij .ceij-par { grid-template-columns: minmax(0, 1fr); }
    /* La tabla de recursos se apila: cada celda lleva su rótulo delante. */
    .ceij .ceij-tabla-recursos,
    .ceij .ceij-tabla-recursos tbody,
    .ceij .ceij-tabla-recursos tr,
    .ceij .ceij-tabla-recursos td { display: block; width: auto; }
    .ceij .ceij-tabla-recursos thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .ceij .ceij-tabla-recursos tr {
        border: 1px solid #E4EBF2;
        border-radius: var(--ceij-r-medio);
        padding: var(--ceij-e-3);
        margin-bottom: var(--ceij-e-4);
    }
    .ceij .ceij-tabla-recursos td,
    .ceij .ceij-tabla-recursos td:nth-child(5) { border-bottom: 0; padding: var(--ceij-e-2) 0; }
    /* Apilada, la columna de acciones se alinea con el resto del contenido. */
    .ceij .ceij-tabla-recursos .ceij-acciones { justify-content: flex-start; }
    .ceij .ceij-tabla-recursos td::before {
        content: attr(data-rotulo);
        display: block;
        margin-bottom: 4px;
        font-size: var(--ceij-fs-meta);
        font-weight: var(--ceij-fw-negrita);
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--ceij-c-texto-tenue);
    }
    .ceij .ceij-tabla-recursos td:first-child::before { content: none; }
}
@media (max-width: 575.98px) {
    .ceij .ceij-ancho,
    .ceij .ceij-pasos-tarjetas,
    .ceij .ceij-par,
    .ceij .ceij-recursos,
    .ceij .ceij-orientacion { padding-inline: var(--ceij-e-4); }
    .ceij .ceij-pasos-tarjetas__lista { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   LISTA DE DIFUSIÓN CEIJ
   ===================================================================== */

/* --- ¿Qué recibirá? ----------------------------------------------------- */
.ceij .ceij-recibira {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ceij-e-5);
}
.ceij .ceij-recibira__item {
    display: flex;
    flex-direction: column;
    gap: var(--ceij-e-3);
    text-align: center;
    background: var(--ceij-c-superficie);
    border: 1px solid #E4EBF2;
    border-radius: 12px;
    padding: var(--ceij-e-6) var(--ceij-e-5);
}
.ceij .ceij-recibira__icono {
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    margin: 0 auto var(--ceij-e-2);
    border-radius: 14px;
    background: #EDF4FA;
}
.ceij .ceij-recibira__titulo { margin: 0; font-size: var(--ceij-fs-400); font-weight: var(--ceij-fw-negrita); color: #072B61; }
.ceij .ceij-recibira__texto  { margin: 0; font-size: var(--ceij-fs-300); line-height: var(--ceij-lh-normal); color: var(--ceij-c-texto-suave); }

/* --- Marco de gestión --------------------------------------------------- */
.ceij .ceij-gestion-marco { margin-block: var(--ceij-e-7); }
.ceij .ceij-gestion {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    gap: var(--ceij-e-6);
    align-items: start;
    background: var(--ceij-c-superficie);
    border: 1px solid #E8EDF2;
    border-radius: 16px;
    padding: var(--ceij-e-7);
}

.ceij .ceij-gestion__caja {
    background: var(--ceij-c-superficie);
    border: 1px solid #E8EDF2;
    border-radius: 14px;
    padding: var(--ceij-e-6);
    box-shadow: var(--ceij-sombra);
}
.ceij .ceij-gestion__cabecera {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: var(--ceij-e-3);
    align-items: center;
    margin-bottom: var(--ceij-e-5);
}
.ceij .ceij-gestion__cabecera img { width: 34px; height: 34px; justify-self: center; }
.ceij .ceij-gestion__titulo { margin: 0; font-size: var(--ceij-fs-600); color: #0A2540; }
.ceij .ceij-gestion__entrada { margin: 0; font-size: var(--ceij-fs-300); color: var(--ceij-c-texto-suave); }

/* --- Pestañas ----------------------------------------------------------- */
.ceij .ceij-pestanas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    background: #F3F4F6;
    border-radius: var(--ceij-r-medio);
    padding: 4px;
    margin-bottom: var(--ceij-e-5);
}
.ceij .ceij-pestana {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ceij-e-2);
    min-height: var(--ceij-tactil-min);
    padding: var(--ceij-e-2) var(--ceij-e-3);
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ceij-c-texto-suave);       /* 7,1:1 sobre #F3F4F6 */
    font-family: var(--ceij-f-texto);
    font-size: var(--ceij-fs-300);
    font-weight: var(--ceij-fw-fuerte);
    cursor: pointer;
}
.ceij .ceij-pestana[aria-selected="true"] {
    background: var(--ceij-c-superficie);
    color: #0A2540;
    font-weight: var(--ceij-fw-negrita);
    box-shadow: var(--ceij-sombra);
}
.ceij .ceij-pestana--baja[aria-selected="true"] {
    background: #D20000;                     /* 5,52:1 con blanco */
    color: var(--ceij-c-texto-inverso);
}

/* --- Campos -------------------------------------------------------------- */
.ceij .ceij-formulario { display: grid; gap: var(--ceij-e-4); }
.ceij .ceij-campos-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ceij-e-4); }

.ceij .ceij-formulario .ceij-campo { display: grid; gap: var(--ceij-e-2); }
.ceij .ceij-formulario .ceij-campo > label,
.ceij .ceij-formulario .ceij-campo > .ceij-rotulo-encabezado > label {
    font-size: var(--ceij-fs-300);
    font-weight: var(--ceij-fw-negrita);
    color: #0A2540;
}
.ceij .ceij-campo__obligatorio { font-weight: var(--ceij-fw-normal); color: var(--ceij-c-error); }
.ceij .ceij-campo__opcional    { font-weight: var(--ceij-fw-normal); color: var(--ceij-c-texto-tenue); }

.ceij .ceij-formulario input[type="text"],
.ceij .ceij-formulario input[type="email"],
.ceij .ceij-formulario select {
    width: 100%;
    min-height: var(--ceij-tactil-min);
    padding: var(--ceij-e-3) var(--ceij-e-4);
    border: 1px solid #E2E8F0;
    border-radius: var(--ceij-r-medio);
    background: #FCFDFD;
    font-family: var(--ceij-f-texto);
    font-size: var(--ceij-fs-400);
    color: var(--ceij-c-texto);
}
.ceij .ceij-formulario input::placeholder { color: var(--ceij-c-texto-tenue); }  /* 5,3:1 */
.ceij .ceij-formulario input:hover,
.ceij .ceij-formulario select:hover { border-color: var(--ceij-c-borde-fuerte); }

.ceij .ceij-campo--casilla {
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    gap: var(--ceij-e-3);
}
.ceij .ceij-campo--casilla input { width: 20px; height: 20px; margin-top: 2px; }
.ceij .ceij-formulario .ceij-campo--casilla > label,
.ceij .ceij-formulario .ceij-campo--casilla > .ceij-rotulo-encabezado > label {
    font-size: var(--ceij-fs-300);
    font-weight: var(--ceij-fw-normal);
    line-height: var(--ceij-lh-normal);
    color: var(--ceij-c-texto);
}

.ceij .ceij-btn--envio { gap: var(--ceij-e-3); border-radius: var(--ceij-r-medio); }
.ceij .ceij-btn--envio img { width: 18px; height: 18px; }
.ceij .ceij-btn--peligro { background-color: #D20000; color: var(--ceij-c-texto-inverso); }
.ceij .ceij-btn--peligro:hover,
.ceij .ceij-btn--peligro:focus-visible { background-color: #A4231C; color: var(--ceij-c-texto-inverso); }

.ceij .ceij-instruccion {
    margin: 0;
    background: #EDF4FA;
    border-radius: var(--ceij-r-medio);
    padding: var(--ceij-e-4) var(--ceij-e-5);
    font-size: var(--ceij-fs-300);
    line-height: var(--ceij-lh-normal);
    color: var(--ceij-c-texto);
}
.ceij .ceij-instruccion b { display: block; color: #0A2540; }

.ceij .ceij-alerta-baja {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: var(--ceij-e-4);
    align-items: center;
    margin: 0;
    background: #FEDADA;
    border-radius: var(--ceij-r-medio);
    padding: var(--ceij-e-4) var(--ceij-e-5);
    font-size: var(--ceij-fs-300);
    line-height: var(--ceij-lh-normal);
    color: #8C1512;                          /* 6,1:1 sobre el rosa */
}

/* --- Protección de datos -------------------------------------------------- */
.ceij .ceij-proteccion {
    background: #F7FAFC;
    border: 1px solid #E4EBF2;
    border-radius: 14px;
    padding: var(--ceij-e-6);
}
.ceij .ceij-proteccion__titulo {
    display: flex;
    align-items: center;
    gap: var(--ceij-e-3);
    margin: 0 0 var(--ceij-e-4);
    font-size: var(--ceij-fs-500);
    color: #0A2540;                          /* 14,9:1 */
}
.ceij .ceij-proteccion__texto {
    margin: 0 0 var(--ceij-e-5);
    font-size: var(--ceij-fs-300);
    line-height: var(--ceij-lh-normal);
    color: var(--ceij-c-texto);
}
.ceij .ceij-proteccion__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ceij-e-4); }
.ceij .ceij-proteccion__lista li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: var(--ceij-e-3);
    align-items: start;
    font-size: var(--ceij-fs-300);
    line-height: var(--ceij-lh-normal);
    color: var(--ceij-c-texto);
}

@media (max-width: 991.98px) {
    .ceij .ceij-gestion { grid-template-columns: minmax(0, 1fr); padding: var(--ceij-e-5); }
    .ceij .ceij-recibira { gap: var(--ceij-e-3); }
    .ceij .ceij-recibira__item { padding: var(--ceij-e-5) var(--ceij-e-3); }
}
/* Las cuatro tarjetas aguantan hasta el telefono, donde pasan a 2x2: en
   «Frame 118» (800) miden 170px y en «iPhone 16 & 17 Pro - 11», 164. En una
   sola columna la seccion se iba a mas de 900px de alto. */
@media (max-width: 767.98px) {
    .ceij .ceij-recibira { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ceij .ceij-pestanas { grid-template-columns: minmax(0, 1fr); }
    .ceij .ceij-campos-par { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   CONTACTO
   =====================================================================
   OJO con el nombre: `.ceij-contacto` ya existe mas arriba, y es el panel de
   datos de contacto que llevan las internas (Solicitud de Jurisprudencia,
   entre otras). Estas reglas son LA PAGINA de Contacto, que es otra cosa.
   Sin acotarlas, al ser posteriores le ganaban al panel y lo dejaban metido en
   la primera columna de una rejilla de dos, con el titulo a 24px.
   El discriminante es la clase `ceij-ancho` que lleva el envoltorio de la
   pagina: `.ceij .ceij-ancho.ceij-contacto` (0-3-0) gana a `.ceij
   .ceij-contacto` (0-2-0) sin tocar el marcado de ninguna de las dos. */

.ceij .ceij-ancho.ceij-contacto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    gap: var(--ceij-e-6);
    align-items: start;
    padding-bottom: var(--ceij-e-8);
}

.ceij .ceij-contacto__formulario,
.ceij .ceij-ficha-contacto {
    background: var(--ceij-c-superficie);
    border: 1px solid #E8EDF2;
    border-radius: 16px;
    padding: var(--ceij-e-7);
    box-shadow: var(--ceij-sombra);
}

.ceij .ceij-ancho.ceij-contacto .ceij-contacto__titulo  { margin: 0 0 var(--ceij-e-2); font-size: var(--ceij-fs-600); color: #0A2540; }
.ceij .ceij-ancho.ceij-contacto .ceij-contacto__entrada { margin: 0 0 var(--ceij-e-6); font-size: var(--ceij-fs-300); color: var(--ceij-c-texto-suave); }

.ceij .ceij-formulario textarea {
    width: 100%;
    min-height: 9rem;
    padding: var(--ceij-e-3) var(--ceij-e-4);
    border: 1px solid #ECEEF1;
    border-radius: var(--ceij-r-medio);
    background: var(--ceij-c-superficie);
    font-family: var(--ceij-f-texto);
    font-size: var(--ceij-fs-400);
    line-height: var(--ceij-lh-normal);
    color: var(--ceij-c-texto);
    resize: vertical;
}
.ceij .ceij-formulario textarea::placeholder { color: var(--ceij-c-texto-tenue); }
.ceij .ceij-formulario textarea:hover { border-color: var(--ceij-c-borde-fuerte); }

.ceij .ceij-campo__ayuda { font-size: var(--ceij-fs-meta); color: var(--ceij-c-texto-tenue); }

.ceij .ceij-btn--enviar {
    text-transform: uppercase;
    letter-spacing: .06em;
    padding-inline: var(--ceij-e-6);
}

.ceij .ceij-contacto__lateral { display: grid; gap: var(--ceij-e-5); }
.ceij .ceij-ficha-contacto { padding: var(--ceij-e-6); }
.ceij .ceij-ficha-contacto__titulo { margin: 0 0 var(--ceij-e-3); font-size: var(--ceij-fs-500); color: #072B61; }
.ceij .ceij-ficha-contacto__texto  { margin: 0 0 var(--ceij-e-4); font-size: var(--ceij-fs-300); line-height: var(--ceij-lh-normal); color: var(--ceij-c-texto); }

.ceij .ceij-ficha-contacto__datos { margin: 0; font-size: var(--ceij-fs-300); line-height: var(--ceij-lh-normal); color: var(--ceij-c-texto); }
.ceij .ceij-ficha-contacto__datos dt { font-weight: var(--ceij-fw-negrita); color: #0A2540; }
.ceij .ceij-ficha-contacto__datos dd { margin: 0 0 var(--ceij-e-2); }
.ceij .ceij-ficha-contacto__datos dd:last-child { margin-bottom: 0; }

.ceij .ceij-btn-info {
    display: inline-flex;
    align-items: center;
    gap: var(--ceij-e-3);
    min-height: var(--ceij-tactil-min);
    padding: var(--ceij-e-2) var(--ceij-e-5);
    border-radius: var(--ceij-r-medio);
    background: #EDF1F5;
    color: #0A2540;                           /* 12,6:1 */
    font-size: var(--ceij-fs-300);
    font-weight: var(--ceij-fw-negrita);
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
}
.ceij .ceij-btn-info:hover { background: #DFE6ED; color: #0A2540; }

@media (max-width: 991.98px) {
    .ceij .ceij-ancho.ceij-contacto { grid-template-columns: minmax(0, 1fr); }
    .ceij .ceij-contacto__formulario { padding: var(--ceij-e-5); }
}

/* --- El formulario de contacto lo sirve Visforms ---------------------------
   Para que el CEIJ pueda administrarlo, el formulario viene del componente y
   no del marcado de la página. Visforms reparte etiqueta y control en una
   rejilla de Bootstrap (col-3 / col-9); aquí se apilan, como en el diseño.
   Las reglas van acotadas a esta tarjeta para no alterar los otros
   formularios del sitio. */

.ceij .ceij-contacto__formulario .visforms .form-group.row { display: block; margin: 0 0 var(--ceij-e-4); }

/* La etiqueta se queda oculta a la vista (la deja así el decorador propio de
   la plantilla), de modo que solo hay que soltar la columna del control. */
.ceij .ceij-contacto__formulario .visforms .form-group.row > div[class*="col-"] {
    flex: none;
    width: 100%;
    max-width: none;
    padding-inline: 0;
}

.ceij .ceij-contacto__formulario .visforms .form-control {
    width: 100%;
    min-height: var(--ceij-tactil-min);
    padding: var(--ceij-e-3) var(--ceij-e-4);
    border: 1px solid #ECEEF1;
    border-radius: var(--ceij-r-medio);
    background: var(--ceij-c-superficie);
    font-family: var(--ceij-f-texto);
    font-size: var(--ceij-fs-400);
    color: var(--ceij-c-texto);
}
.ceij .ceij-contacto__formulario .visforms textarea.form-control { min-height: 9rem; resize: vertical; }
.ceij .ceij-contacto__formulario .visforms .form-control:hover { border-color: var(--ceij-c-borde-fuerte); }

/* El botón vuelve a la izquierda y al azul institucional. `ceij-visforms.css`
   lo manda a la derecha con un !important heredado de la maqueta de agosto, y
   contra un !important no sirve ganar por especificidad. */
.ceij .ceij-contacto__formulario .visforms .form-group.row.justify-content-center,
.ceij .ceij-contacto__formulario .visforms .vf-button-container,
.ceij .ceij-contacto__formulario .visforms .vf-button-container .row {
    display: flex;
    justify-content: flex-start !important;
}
.ceij .ceij-contacto__formulario .visforms input[type="submit"] {
    /* `ceij-visforms.css` lo lleva a la derecha con `float: right` y le pone el
       relleno en porcentaje con !important; aquí se deshacen las dos cosas. */
    float: none;
    /* El avión va de imagen de fondo: Visforms pinta el envío como <input>, que
       no admite contenido, así que no se le puede meter un <img> dentro. */
    background-image: url('../images/ceij/contacto/enviar.svg');
    background-repeat: no-repeat;
    background-position: right var(--ceij-e-5) center;
    background-size: 18px 18px;
    padding: var(--ceij-e-3) calc(var(--ceij-e-5) + 18px + var(--ceij-e-4)) var(--ceij-e-3) var(--ceij-e-6) !important;
    min-height: var(--ceij-tactil-min);
    border: 0;
    border-radius: var(--ceij-r-medio);
    background-color: var(--ceij-c-marca);
    color: var(--ceij-c-texto-inverso);       /* 12,61:1 */
    font-family: var(--ceij-f-texto);
    font-size: var(--ceij-fs-400);
    font-weight: var(--ceij-fw-fuerte);
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
}
.ceij .ceij-contacto__formulario .visforms input[type="submit"]:hover:not([disabled]) { background-color: var(--ceij-c-marca-oscuro); }
.ceij .ceij-contacto__formulario .visforms input[type="submit"][disabled] { opacity: .6; cursor: progress; }

/* El marco de error de Visforms no necesita el relleno de Bootstrap. */
.ceij .ceij-contacto__formulario .visforms .row > div[class*="offset-"] { margin-left: 0; width: 100%; max-width: none; padding-inline: 0; }

/* ---------------------------------------------------------------------
   Banners en tableta y telefono: panel macizo + arte al lado
   ---------------------------------------------------------------------
   El arte va a opacidad COMPLETA —sin velo translucido encima, que era lo
   que lo apagaba— y el texto se apoya en un panel de color macizo a su
   izquierda. Asi la ilustracion se ve nitida y el contraste del texto no
   depende de lo que haya debajo.

   El ancho del panel y el de la columna de texto salen de la misma variable,
   `--ceij-banner-texto`, para que el texto nunca se salga del macizo.
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .ceij .ceij-banner .ceij-banner__lienzo {
        --ceij-banner-texto: 46%;
        aspect-ratio: auto;
        background-color: var(--ceij-banner-panel, #E8F1F8);
        background-image: linear-gradient(100deg,
                              var(--ceij-banner-panel, #E8F1F8) 0%,
                              var(--ceij-banner-panel, #E8F1F8) var(--ceij-banner-texto),
                              transparent calc(var(--ceij-banner-texto) + 16%)),
                          var(--ceij-banner-arte-tableta, var(--ceij-banner-arte, none));
        background-position: right center;
        background-size: auto, cover;
    }
    .ceij .ceij-banner .ceij-banner__rejilla {
        grid-template-columns: minmax(0, var(--ceij-banner-texto, 58%));
    }
}
@media (max-width: 767.98px) {
    /* El Figma movil compone la columna de texto en 184-208px sobre 402, es
       decir el 46-52 %, y deja la mitad derecha al dibujo. Solo «Solicitud de
       Jurisprudencia» y «Asistente» la ensanchan al 68 %. */
    .ceij .ceij-banner .ceij-banner__lienzo {
        --ceij-banner-texto: 46%;
        background-image: linear-gradient(100deg,
                              var(--ceij-banner-panel, #E8F1F8) 0%,
                              var(--ceij-banner-panel, #E8F1F8) var(--ceij-banner-texto),
                              transparent calc(var(--ceij-banner-texto) + 14%)),
                          var(--ceij-banner-arte-movil, var(--ceij-banner-arte, none));
        /* La franja de arte que queda a la vista en el telefono mide ~137px.
           Anclada a la derecha solo se veria el borde del dibujo, asi que se
           corre el encuadre al 72 %, que es donde el Figma coloca el motivo. */
        background-position: center center, var(--ceij-banner-anclaje-movil, 72% center);
        background-size: auto, cover;
        padding: var(--ceij-e-5) var(--ceij-e-4);
    }
    /* El titular tiene que caber en el macizo: «Jurisprudenciales» a 44px mide
       mas que la columna y se salia sobre la ilustracion. */
    /* Montserrat es mas ancha que la Segoe UI con la que compone el Figma:
       «Jurisprudenciales» no cabe en la columna. Se divide con guion en vez
       de partirse a lo bruto a mitad de palabra. */
    .ceij .ceij-banner .ceij-banner__titulo {
        font-size: var(--ceij-fs-600);
        hyphens: auto;
        overflow-wrap: break-word;
    }
    .ceij .ceij-banner .ceij-banner__texto { font-size: var(--ceij-fs-300); }
    .ceij .ceij-banner.ceij-banner--asistente .ceij-banner__lienzo,
    .ceij .ceij-banner.ceij-banner--velado .ceij-banner__lienzo { --ceij-banner-texto: 68%; }
    /* Los botones del banner tienen que caber en el macizo: a tamano de
       escritorio desbordaban sobre la ilustracion. */
    .ceij .ceij-banner .ceij-banner__acciones .ceij-btn {
        padding-inline: var(--ceij-e-3);
        font-size: var(--ceij-fs-300);
    }
}

/* ---------------------------------------------------------------------
   Banners en el teléfono: a sangre y con el arte entero detrás
   ---------------------------------------------------------------------
   Los diseños de móvil (Downloads/contenido para desarrollo/diseño para
   movil) no llevan el panel macizo: el banner va de borde a borde, en la
   proporción del arte (402x185), con la foto completa detrás y el texto
   encima a la izquierda, sobre una niebla clara que lo deja leer. El
   título baja a 22px y la entrada a 14px, el mínimo de ceij-tokens.css
   (el diseño la compone a ~12). Si el texto no cabe en los 185, el lienzo
   crece en vez de cortarlo.
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .ceij .ceij-banner { padding-inline: 0; }
    .ceij .ceij-banner .ceij-banner__lienzo,
    .ceij .ceij-banner.ceij-banner--asistente .ceij-banner__lienzo,
    .ceij .ceij-banner.ceij-banner--velado .ceij-banner__lienzo {
        --ceij-banner-texto: 60%;
        aspect-ratio: auto;
        /* `overflow: hidden` anula el mínimo automático de `aspect-ratio`:
           el alto del arte se fija como mínimo y el contenido lo estira. */
        min-height: calc(100vw * 185 / 402);
        background-color: var(--ceij-banner-niebla-fondo, #EEF2F5);
        background-image: linear-gradient(90deg,
                              var(--ceij-banner-niebla, rgba(255,255,255,.82)) 0%,
                              var(--ceij-banner-niebla, rgba(255,255,255,.82)) 0%,
                              transparent 0%),
                          var(--ceij-banner-arte-movil, var(--ceij-banner-arte, none));
        background-position: center center, center center;
        background-size: auto, cover;
        padding: var(--ceij-e-4) 20px;
    }
    .ceij .ceij-banner .ceij-banner__rejilla,
    .ceij .ceij-banner--sencillo .ceij-banner__rejilla,
    .ceij .ceij-banner--informes .ceij-banner__rejilla,
    .ceij .ceij-banner--asistente .ceij-banner__rejilla {
        grid-template-columns: minmax(0, var(--ceij-banner-texto));
    }
    .ceij .ceij-banner .ceij-banner__titulo,
    .ceij .ceij-banner--sencillo .ceij-banner__titulo,
    .ceij .ceij-banner--asistente .ceij-banner__titulo {
        font-size: 1.375rem;
        line-height: 1.12;
        margin-bottom: var(--ceij-e-1);
        /* A 22px las palabras caben enteras: sin el guion de la regla de 767. */
        hyphens: manual;
    }
    .ceij .ceij-banner .ceij-banner__regla,
    .ceij .ceij-banner--informes .ceij-banner__regla { margin: var(--ceij-e-2) 0 var(--ceij-e-3); }
    .ceij .ceij-banner .ceij-banner__lema,
    .ceij .ceij-banner--asistente .ceij-banner__lema {
        font-size: var(--ceij-fs-300);
        line-height: 1.35;
        margin-bottom: var(--ceij-e-2);
    }
    .ceij .ceij-banner .ceij-banner__texto,
    .ceij .ceij-banner--sencillo .ceij-banner__texto,
    .ceij .ceij-banner--asistente .ceij-banner__texto,
    .ceij .ceij-banner .ceij-banner__nota,
    .ceij .ceij-banner--informes .ceij-banner__nota {
        font-size: var(--ceij-fs-300);
        line-height: 1.4;
    }
    /* Colecciones: el arte trae su propio crema a la izquierda. */
    .ceij .ceij-banner--alto { --ceij-banner-niebla: rgba(253,247,241,.88); --ceij-banner-niebla-fondo: #FDF7F1; }
}

/* Solicitud de Jurisprudencia en el teléfono: el edificio va de fondo a todo
   el ancho tras un velo blanco translúcido, y el texto ocupa casi todo el
   banner encima. Se engancha por su `aria-labelledby` porque la variante
   --velado la comparte con Contacto. */
@media (max-width: 575.98px) {
    .ceij .ceij-banner[aria-labelledby="sj-titulo"] .ceij-banner__lienzo {
        --ceij-banner-texto: 88%;
        background-image: linear-gradient(rgba(255,255,255,.62), rgba(255,255,255,.62)),
                          var(--ceij-banner-arte-movil, var(--ceij-banner-arte, none));
        background-position: center center, right center;
        background-size: auto, cover;
    }
}

/* ---------------------------------------------------------------------
   Banners en el teléfono: fondo liso del color del arte y texto completo
   ---------------------------------------------------------------------
   Pedido del cliente (respuestas del 16 de octubre): en el teléfono el
   texto no se monta sobre la imagen. El banner pierde el arte, toma el color
   de fondo de su propia imagen y el texto ocupa todo el ancho.

   El color de cada banner lo fijó el diseñador («colores para banners
   moviles ceij», 19 de octubre; todos los textos pasan AA) y se declara en
   `--ceij-banner-fondo-movil`. Va con [aria-labelledby] para ganarle a las
   variantes de página (velado, asistente, colecciones) sin `!important`.
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .ceij .ceij-banner .ceij-banner__lienzo,
    .ceij .ceij-banner.ceij-banner--asistente .ceij-banner__lienzo,
    .ceij .ceij-banner.ceij-banner--velado .ceij-banner__lienzo,
    .ceij .ceij-banner[aria-labelledby] .ceij-banner__lienzo {
        --ceij-banner-texto: 100%;
        min-height: 0;
        background-color: var(--ceij-banner-fondo-movil, #EEF2F5);
        background-image: none;
    }

    .ceij .ceij-banner[aria-labelledby="as-titulo"]       { --ceij-banner-fondo-movil: #C8E0FF; }
    .ceij .ceij-banner[aria-labelledby="nx-titulo"]       { --ceij-banner-fondo-movil: #CAE2F1; }
    .ceij .ceij-banner[aria-labelledby="sj-titulo"]       { --ceij-banner-fondo-movil: #DEE5EA; }
    .ceij .ceij-banner[aria-labelledby="pd-titulo"]       { --ceij-banner-fondo-movil: #E8F2FB; }
    .ceij .ceij-banner[aria-labelledby="ai-titulo"]       { --ceij-banner-fondo-movil: #DAE6F0; }
    .ceij .ceij-banner[aria-labelledby="ceij-rb-titulo"]  { --ceij-banner-fondo-movil: #FCFCFC; }
    .ceij .ceij-banner[aria-labelledby="ceij-bol-titulo"] { --ceij-banner-fondo-movil: #E2EAEF; }
    .ceij .ceij-banner[aria-labelledby="ld-titulo"]       { --ceij-banner-fondo-movil: #F7F6F4; }
    .ceij .ceij-banner[aria-labelledby="ceij-cap-titulo"] { --ceij-banner-fondo-movil: #ECF0F6; }
    .ceij .ceij-banner[aria-labelledby="ceij-inf-titulo"] { --ceij-banner-fondo-movil: #ECEEEF; }
    .ceij .ceij-banner[aria-labelledby="ct-titulo"]       { --ceij-banner-fondo-movil: #E7ECEF; }
    .ceij .ceij-banner[aria-labelledby="ms-titulo"]       { --ceij-banner-fondo-movil: #FDFDFD; }
    /* Las colecciones comparten el id del título: se reconocen por su arte.
       Todas llevan el mismo crema (colores del diseñador, 19 de octubre). */
    .ceij .ceij-banner__lienzo[style*="revista-pueblos-indigenas"] { --ceij-banner-fondo-movil: #FCF7F1; }
    .ceij .ceij-banner__lienzo[style*="revista-discapacidad"]      { --ceij-banner-fondo-movil: #FCF7F1; }
    .ceij .ceij-banner__lienzo[style*="revista-ambiental"]         { --ceij-banner-fondo-movil: #FCF7F1; }
    .ceij .ceij-banner__lienzo[style*="revista-hostigamiento"],
    .ceij .ceij-banner__lienzo[style*="revista-otras-tematicas"]   { --ceij-banner-fondo-movil: #FCF7F1; }
}

/* =====================================================================
   BUSCADOR — página de resultados (/index.php/buscar)
   ---------------------------------------------------------------------
   Plantilla en html/com_finder/search. Sin diseño en el Figma: sigue la
   escala de las internas —titular de sección a 24-32px, cuerpo a 14-16px,
   tarjetas blancas con borde suave— en una columna de lectura de 960px.
   ===================================================================== */
.ceij .ceij-busqueda {
    max-width: calc(960px + var(--ceij-e-5) * 2);
    margin-inline: auto;
    padding: var(--ceij-e-5) var(--ceij-e-5) var(--ceij-e-8);
}
.ceij .ceij-busqueda__titulo {
    margin: var(--ceij-e-5) 0 var(--ceij-e-4);
    font-size: var(--ceij-fs-700);
    line-height: 1.2;
    color: var(--ceij-c-titulo);
}

.ceij .ceij-busqueda__form { margin-bottom: var(--ceij-e-5); }
.ceij .ceij-busqueda__fila {
    display: flex;
    align-items: stretch;
    gap: var(--ceij-e-2);
}
/* El selector lleva el elemento por la misma razón que el de la cabecera:
   template.css pinta input[type=search] con borde y radio propios. */
.ceij .ceij-busqueda__form input.ceij-busqueda__campo {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0 var(--ceij-e-5);
    border: 1px solid var(--ceij-c-borde);
    border-radius: var(--ceij-r-pildora);
    background: var(--ceij-c-superficie);
    font-size: var(--ceij-fs-300);
    color: var(--ceij-c-texto);
}
.ceij .ceij-busqueda__form input.ceij-busqueda__campo::placeholder { color: var(--ceij-c-texto-tenue); opacity: 1; }
.ceij .ceij-busqueda__form .ceij-btn {
    flex: 0 0 auto;
    height: 48px;
    min-height: 0;
    padding: 0 var(--ceij-e-6);
    font-size: var(--ceij-fs-300);
}

/* Filtros: tres listas en fila bajo el campo, con su rótulo encima. */
.ceij .ceij-busqueda__filtros {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: var(--ceij-e-3) var(--ceij-e-4);
    margin: var(--ceij-e-3) 0 0;
    padding: var(--ceij-e-3) var(--ceij-e-4);
    border: 0;
    border-radius: 12px;
    background: var(--ceij-c-superficie-alt);
}
.ceij .ceij-busqueda__filtro { display: grid; gap: 4px; min-width: 160px; }
.ceij .ceij-busqueda__filtro label {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--ceij-c-texto-suave);
}
.ceij .ceij-busqueda__filtro select {
    height: 40px;
    padding: 0 36px 0 var(--ceij-e-3);
    border: 1px solid var(--ceij-c-borde);
    border-radius: 8px;
    background: var(--ceij-c-superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23003366' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center;
    font-size: var(--ceij-fs-300);
    color: var(--ceij-c-texto);
    appearance: none;
    cursor: pointer;
}
.ceij .ceij-busqueda__limpiar {
    align-self: flex-end;
    line-height: 40px;
    font-size: var(--ceij-fs-300);
    color: var(--ceij-c-marca);
}

.ceij .ceij-busqueda__conteo,
.ceij .ceij-busqueda__sugerencia {
    margin: 0 0 var(--ceij-e-4);
    font-size: var(--ceij-fs-300);
    color: var(--ceij-c-texto-suave);
}

.ceij .ceij-busqueda__lista {
    display: grid;
    gap: var(--ceij-e-3);
    margin: 0;
    padding: 0;
    list-style: none;
}
.ceij .ceij-resultado {
    padding: var(--ceij-e-4) var(--ceij-e-5);
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: var(--ceij-c-superficie);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.ceij .ceij-resultado__tipo {
    margin: 0 0 var(--ceij-e-1);
    font-size: 11px;
    font-weight: var(--ceij-fw-negrita);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ceij-c-texto-tenue);
}
.ceij .ceij-resultado__titulo {
    margin: 0;
    font-family: var(--ceij-f-texto);
    font-size: var(--ceij-fs-400);
    font-weight: 600;
    line-height: 1.35;
}
.ceij .ceij-resultado__titulo a { color: var(--ceij-c-marca); text-decoration: none; }
.ceij .ceij-resultado__titulo a:hover { text-decoration: underline; }
.ceij .ceij-resultado__formato {
    display: inline-block;
    margin-left: var(--ceij-e-1);
    padding: 1px 6px;
    border-radius: var(--ceij-r-chico);
    background: var(--ceij-c-superficie-alt);
    font-size: 11px;
    font-weight: var(--ceij-fw-negrita);
    line-height: 1.4;
    color: var(--ceij-c-texto-suave);
    vertical-align: 2px;
}
.ceij .ceij-resultado__extracto {
    margin: var(--ceij-e-1) 0 0;
    font-size: var(--ceij-fs-300);
    line-height: 1.55;
    color: var(--ceij-c-texto-suave);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ceij .ceij-busqueda__vacio {
    padding: var(--ceij-e-5);
    border-radius: 12px;
    background: var(--ceij-c-superficie-alt);
}
.ceij .ceij-busqueda__vacio h2 { margin: 0 0 var(--ceij-e-2); font-size: var(--ceij-fs-500); color: var(--ceij-c-titulo); }
.ceij .ceij-busqueda__vacio p,
.ceij .ceij-busqueda__vacio ul { margin: 0 0 var(--ceij-e-2); font-size: var(--ceij-fs-300); color: var(--ceij-c-texto); }

/* Paginación de Joomla en pastillas. ceij-legacy-chrome.css pone toda
   .pagination en row-reverse (los números salían al revés); aquí se repone el
   orden. Las flechas de Font Awesome se cambian por caracteres: el ícono no
   siempre carga y dejaba cajas vacías. */
.ceij .ceij-busqueda__paginas { margin-top: var(--ceij-e-6); }
.ceij .ceij-busqueda__paginas .pagination {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--ceij-e-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Bootstrap estira los .page-item y cuadra las esquinas del primero y el
   último; aquí cada botón mide lo suyo y es una pastilla entera. */
.ceij .ceij-busqueda__paginas .page-item { flex: 0 0 auto; width: auto; margin: 0; }
.ceij .ceij-busqueda__paginas .page-item .page-link,
.ceij .ceij-busqueda__paginas .page-item:first-child .page-link,
.ceij .ceij-busqueda__paginas .page-item:last-child .page-link {
    margin: 0;
    border-radius: var(--ceij-r-pildora);
}
.ceij .ceij-busqueda__paginas .page-link {
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--ceij-e-2);
    border: 1px solid var(--ceij-c-borde);
    border-radius: var(--ceij-r-pildora);
    background: var(--ceij-c-superficie);
    font-size: var(--ceij-fs-300);
    font-weight: 600;
    color: var(--ceij-c-marca);
    text-decoration: none;
}
.ceij .ceij-busqueda__paginas a.page-link:hover { border-color: var(--ceij-c-marca); background: #EEF4FA; }
.ceij .ceij-busqueda__paginas .active .page-link { border-color: var(--ceij-c-marca); background: var(--ceij-c-marca); color: var(--ceij-c-texto-inverso); }
.ceij .ceij-busqueda__paginas .disabled { display: none; }
.ceij .ceij-busqueda__paginas .page-link .fas { font-size: 0; }
.ceij .ceij-busqueda__paginas .page-link .fa-angle-double-left::before { content: "«"; font: 600 var(--ceij-fs-400) / 1 var(--ceij-f-texto); }
.ceij .ceij-busqueda__paginas .page-link .fa-angle-left::before        { content: "‹"; font: 600 var(--ceij-fs-400) / 1 var(--ceij-f-texto); }
.ceij .ceij-busqueda__paginas .page-link .fa-angle-right::before       { content: "›"; font: 600 var(--ceij-fs-400) / 1 var(--ceij-f-texto); }
.ceij .ceij-busqueda__paginas .page-link .fa-angle-double-right::before { content: "»"; font: 600 var(--ceij-fs-400) / 1 var(--ceij-f-texto); }

@media (max-width: 575.98px) {
    .ceij .ceij-busqueda { padding-inline: var(--ceij-e-4); }
    .ceij .ceij-busqueda__titulo { font-size: var(--ceij-fs-600); }
    .ceij .ceij-busqueda__form .ceij-btn { padding-inline: var(--ceij-e-4); }
    .ceij .ceij-busqueda__filtro { flex: 1 1 140px; min-width: 0; }
    .ceij .ceij-busqueda__filtro select { width: 100%; }
    .ceij .ceij-resultado { padding: var(--ceij-e-3) var(--ceij-e-4); }
}

/* =====================================================================
   MAPA DEL SITIO (/index.php/mapa-de-sitio)
   ---------------------------------------------------------------------
   Plantilla propia en html/com_jmap/sitemap. Sigue la pantalla «Mapa del
   sitio» del rediseño: banner con las migas dentro, «Inicio» arriba, las
   secciones del menú en tres columnas con su rótulo en una franja clara,
   y las entradas sueltas debajo.
   ===================================================================== */
.ceij.com-jmap #sp-page-title { display: none; }
/* El gris lo heredaba del sitio anterior. */
.ceij.com-jmap #sp-main-body,
.ceij.com-jmap #sp-component,
.ceij.com-jmap #sp-component > .sp-column { background: #FFFFFF !important; }

.ceij .ceij-banner--mapa .ceij-migas { margin-bottom: var(--ceij-e-4); }
.ceij .ceij-banner--mapa .ceij-banner__regla { background: #F59E0C; }
.ceij .ceij-banner--mapa .ceij-banner__nota { font-size: var(--ceij-fs-400); }

.ceij .ceij-mapa {
    max-width: calc(1210px + var(--ceij-e-5) * 2);
    margin-inline: auto;
    padding: var(--ceij-e-6) var(--ceij-e-5) var(--ceij-e-8);
}
/* Con :where() el reinicio pesa menos que las reglas de cada lista. */
.ceij :where(.ceij-mapa) ul { margin: 0; padding: 0; list-style: none; }
.ceij .ceij-mapa a { color: var(--ceij-c-marca); text-decoration: underline; text-underline-offset: 3px; }

/* Entradas sin subpáginas: «Inicio» arriba; «Informes» y «Contacto» abajo. */
.ceij .ceij-mapa__sueltos { padding-inline: var(--ceij-e-4); }
.ceij .ceij-mapa__sueltos a {
    font-family: var(--ceij-f-titulo, var(--ceij-f-texto));
    font-size: var(--ceij-fs-500);
    font-weight: var(--ceij-fw-negrita);
}
.ceij .ceij-mapa__sueltos--fila {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--ceij-e-4);
    margin-top: var(--ceij-e-6);
    padding-top: var(--ceij-e-6);
    border-top: 1px solid #E2E8F0;
}

.ceij .ceij-mapa__columnas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--ceij-e-5);
    margin-top: var(--ceij-e-5);
}
.ceij .ceij-mapa__rotulo {
    display: flex;
    align-items: center;
    gap: var(--ceij-e-3);
    margin: 0 0 var(--ceij-e-4);
    padding: var(--ceij-e-4);
    border-radius: 8px;
    background: #F4F7FA;
    font-size: var(--ceij-fs-500);
    font-weight: var(--ceij-fw-negrita);
    color: var(--ceij-c-marca);
}
.ceij .ceij-mapa__rotulo svg { flex: 0 0 auto; }
.ceij .ceij-mapa__rotulo a { text-decoration: none; }
.ceij .ceij-mapa__rotulo a:hover { text-decoration: underline; }
.ceij .ceij-mapa__lista { display: grid; gap: var(--ceij-e-4); padding-inline: var(--ceij-e-4); }
.ceij .ceij-mapa__lista a { font-size: var(--ceij-fs-400); }
.ceij .ceij-mapa__lista--sub {
    margin: var(--ceij-e-3) 0 0;
    padding: 2px 0 2px var(--ceij-e-4);
    border-left: 2px solid #E2E8F0;
}

@media (max-width: 575.98px) {
    .ceij .ceij-mapa { padding-inline: var(--ceij-e-4); }
}

/* =====================================================================
   Rótulos que pasaron a ser encabezados (hallazgos DTI, 2026-10-09)
   ---------------------------------------------------------------------
   La revisión de la DTI pidió marcar como encabezado los rótulos y lemas
   que lo parecían. Cambia la etiqueta (p → h2/h3/h4), no el aspecto: aquí
   se les devuelve la tipografía de texto que tenían, porque .ceij h2-h4
   les pondría la de los titulares.
   ===================================================================== */
.ceij .ceij-banner__lema:is(h2, h3),
.ceij .ceij-banner__texto:is(h2, h3),
.ceij .ceij-panel__rotulo:is(h2, h3, h4),
.ceij .ceij-detalle__rotulo:is(h3, h4, h5),
.ceij .ceij-contacto__rotulo:is(h2, h3, h4),
.ceij .ceij-descarga__rotulo:is(h2, h3, h4) {
    font-family: var(--ceij-f-texto);
    letter-spacing: normal;
    text-transform: none;
}
.ceij .ceij-banner__lema:is(h2, h3),
.ceij .ceij-panel__rotulo:is(h2, h3, h4),
.ceij .ceij-detalle__rotulo:is(h3, h4, h5),
.ceij .ceij-contacto__rotulo:is(h2, h3, h4),
.ceij .ceij-descarga__rotulo:is(h2, h3, h4) { line-height: var(--ceij-lh-normal); }
.ceij .ceij-banner__texto:is(h2, h3) { font-weight: 400; }

/* Encabezados dentro de las cabeceras de tabla (hallazgos DTI, 2026-10-09).
   La DTI pide que los rótulos de las tablas sean encabezados. Van DENTRO del
   <th>, que sigue siendo la celda de cabecera para los lectores de pantalla,
   y heredan todo de la celda: no cambian ni la letra ni la caja. */
.ceij :is(th, dt) > .ceij-th {
    display: inline;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: inherit;
    /* Los titulares llevan reparto equilibrado y corte de palabra, que
       estrechan la columna; aquí manda lo que diga la celda. */
    text-wrap: inherit;
    overflow-wrap: inherit;
    word-break: inherit;
    hyphens: inherit;
    white-space: inherit;
}

/* Rótulos de campo como encabezado (hallazgos DTI, 2026-10-09): el <h3>
   envuelve al <label>. Con display: contents no genera caja, así que la
   etiqueta sigue colocada exactamente donde estaba. */
.ceij .ceij-rotulo-encabezado {
    display: contents;
    margin: 0;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

/* Contenido listo pero a la espera de material de la oficina (p. ej. los
   videos de Recursos y materiales de apoyo en Acceso a la Información): no se
   muestra hasta quitarle el atributo data-pendiente en la página. */
.ceij [data-pendiente] { display: none !important; }

/* =====================================================================
   SOLICITUD ENVIADA
   ---------------------------------------------------------------------
   Página a la que redirigen los formularios de Visforms (Contacto y Lista
   de Difusión) al enviarse, en lugar del mensaje del componente.
   ===================================================================== */
.ceij .ceij-confirmacion {
    max-width: 760px;
    margin: var(--ceij-e-6) auto var(--ceij-e-8);
    padding: var(--ceij-e-7) var(--ceij-e-6);
    background: var(--ceij-c-superficie);
    border: 1px solid var(--ceij-c-borde);
    border-radius: var(--ceij-r-grande);
    box-shadow: var(--ceij-sombra);
    text-align: center;
}
.ceij .ceij-confirmacion__icono {
    display: inline-grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: var(--ceij-e-4);
    border-radius: 50%;
    background: #DCF5E6;
}
.ceij .ceij-confirmacion__titulo {
    margin: 0 0 var(--ceij-e-3);
    font-size: var(--ceij-fs-700);
    color: var(--ceij-c-titulo);
}
.ceij .ceij-confirmacion__texto {
    max-width: 600px;
    margin: 0 auto var(--ceij-e-3);
    color: var(--ceij-c-texto);
}
.ceij .ceij-confirmacion__nota {
    max-width: 600px;
    margin: 0 auto;
    font-size: var(--ceij-fs-300);
    color: var(--ceij-c-texto-suave);
}
.ceij .ceij-confirmacion__acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ceij-e-3);
    margin-top: var(--ceij-e-6);
}
@media (max-width: 575.98px) {
    .ceij .ceij-confirmacion {
        margin-inline: var(--ceij-e-4);
        padding: var(--ceij-e-6) var(--ceij-e-4);
    }
    .ceij .ceij-confirmacion__acciones .ceij-btn { width: 100%; }
}