/*
 * ceij-pie.css — pie del rediseño.
 *
 * Tres zonas separadas por filetes: logotipo del Poder Judicial, información de
 * contacto en dos columnas y logotipo del CEIJ. Fondo azul institucional, texto
 * blanco: 12,61:1.
 */

.ceij .ceij-pie {
    background: var(--ceij-c-marca);
    color: var(--ceij-c-texto-inverso);
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.ceij .ceij-pie__interior {
    max-width: 1280px;
    margin-inline: auto;
    padding: var(--ceij-e-6) var(--ceij-e-5);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--ceij-e-6);
}

/* Filetes entre zonas, como el diseño. */
.ceij .ceij-pie__contacto {
    border-inline: 1px solid rgba(255, 255, 255, .28);
    padding-inline: var(--ceij-e-6);
}

.ceij .ceij-pie__marca img {
    height: auto;
    max-height: 86px;
    width: auto;
}
.ceij .ceij-pie__marca--ceij img { max-height: 62px; }

.ceij .ceij-pie__rotulo {
    margin: 0 0 var(--ceij-e-4);
    font-family: var(--ceij-f-texto);
    font-size: var(--ceij-fs-meta);
    font-weight: var(--ceij-fw-negrita);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ceij-c-texto-inverso);
    line-height: 1.3;
}

.ceij .ceij-pie__columnas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ceij-e-3) var(--ceij-e-6);
}

.ceij .ceij-pie__etiqueta {
    margin: 0 0 var(--ceij-e-1);
    font-size: var(--ceij-fs-meta);
    font-weight: var(--ceij-fw-negrita);
    color: var(--ceij-c-texto-inverso);
}
.ceij .ceij-pie__etiqueta + .ceij-pie__dato { margin-bottom: var(--ceij-e-4); }

.ceij .ceij-pie__dato {
    margin: 0;
    font-size: var(--ceij-fs-meta);
    font-style: normal;          /* <address> viene en cursiva por defecto */
    line-height: 1.55;
    color: var(--ceij-c-texto-inverso);
}

.ceij .ceij-pie__dato a,
.ceij .ceij-pie__mas a {
    color: var(--ceij-c-texto-inverso);
    text-decoration: underline;
    text-underline-offset: .2em;
}
.ceij .ceij-pie__dato a:hover,
.ceij .ceij-pie__mas a:hover { text-decoration-thickness: 2px; }

.ceij .ceij-pie__dato--correos a { display: inline-block; }

.ceij .ceij-pie__mas {
    margin: var(--ceij-e-3) 0 0;
    font-size: var(--ceij-fs-300);
    font-weight: var(--ceij-fw-negrita);
}

/* Linea de derechos reservados: el Figma la pone centrada bajo las tres zonas,
   a 8px. Aqui va al minimo de metadatos (12px) por legibilidad. */
.ceij .ceij-pie__derechos {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--ceij-e-5) var(--ceij-e-5);
    font-size: var(--ceij-fs-meta);
    font-weight: var(--ceij-fw-negrita);
    line-height: 1.4;
    text-align: center;
    color: var(--ceij-c-texto-inverso);
}

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

/* ---------------------------------------------------------------------
   Tableta (800) y telefono (402)
   ---------------------------------------------------------------------
   El Figma NO apila el pie: lo mantiene en una fila de 226px en tableta
   —logotipo PJ | filete | contacto en dos columnas | filete | logotipo CEIJ—
   y en una de 200px en el telefono, donde cae el logotipo del CEIJ y el
   contacto queda en una sola columna. La linea de derechos cierra abajo.
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .ceij .ceij-pie__interior {
        padding: var(--ceij-e-5) var(--ceij-e-4) var(--ceij-e-4);
        gap: var(--ceij-e-4);
    }
    .ceij .ceij-pie__contacto { padding-inline: var(--ceij-e-4); }
    .ceij .ceij-pie__marca img      { max-height: 62px; }
    .ceij .ceij-pie__marca--ceij img { max-height: 48px; }
    .ceij .ceij-pie__rotulo    { margin-bottom: var(--ceij-e-2); }
    .ceij .ceij-pie__columnas  { gap: var(--ceij-e-2) var(--ceij-e-4); }
    .ceij .ceij-pie__etiqueta + .ceij-pie__dato { margin-bottom: var(--ceij-e-2); }
    .ceij .ceij-pie__mas       { margin-top: var(--ceij-e-2); font-size: var(--ceij-fs-meta); }
    .ceij .ceij-pie__derechos  { padding-inline: var(--ceij-e-4); }
    /* En bloque, cada correo se lleva su propia linea y dejaba la barra suelta;
       en linea fluyen y la barra queda pegada al correo anterior. */
    .ceij .ceij-pie__dato--correos a { display: inline; overflow-wrap: anywhere; }
}

@media (max-width: 767.98px) {
    .ceij .ceij-pie__interior {
        grid-template-columns: auto minmax(0, 1fr);
        gap: var(--ceij-e-3);
        padding-inline: var(--ceij-e-3);
    }
    /* Solo queda el filete de la izquierda: el logotipo del CEIJ no viaja al
       telefono en el diseno. */
    .ceij .ceij-pie__contacto {
        border-inline: 0;
        border-left: 1px solid rgba(255, 255, 255, .28);
        padding-inline: var(--ceij-e-3) 0;
    }
    .ceij .ceij-pie__marca--ceij { display: none; }
    .ceij .ceij-pie__marca img   { max-height: 56px; }
    .ceij .ceij-pie__columnas    { grid-template-columns: minmax(0, 1fr); }
    .ceij .ceij-pie__extra       { display: none; }
    /* En linea y partible: en bloque, el segundo correo no cabia en la columna
       y se salia del pie. */
    .ceij .ceij-pie__dato--correos a { display: inline; overflow-wrap: anywhere; }
    /* El bloque de direccion y horario desaparece, asi que «Ver mas» sube
       pegado a los correos, como en el Figma. */
    .ceij .ceij-pie__columnas { gap: 0; }
    .ceij .ceij-pie__mas      { margin-top: var(--ceij-e-3); }
    .ceij .ceij-pie__derechos    { padding-inline: var(--ceij-e-3); }
}

/* Enlace al mapa de sitio junto a los derechos: blanco y subrayado, como los
   demás enlaces del pie (21:1 sobre el azul de marca). */
.ceij .ceij-pie__derechos .ceij-pie__mapa { color: var(--ceij-c-texto-inverso); text-decoration: underline; }

/* Los rótulos del pie («Teléfonos externos», «Dirección»…) son encabezados
   <h3> por pedido de la DTI (hallazgos 2026-10-09). Conservan la letra de
   texto que tenían como párrafo, no la de los titulares. */
.ceij .ceij-pie__etiqueta:is(h2, h3, h4) {
    font-family: var(--ceij-f-texto);
    line-height: var(--ceij-lh-normal);
    letter-spacing: normal;
    text-transform: none;
    text-wrap: wrap;
}