/*
 * ceij-portada.css — portada del rediseño.
 *
 * Las tres secciones viven en SP Page Builder como bloques de texto con este
 * marcado: los editores cambian los textos desde el constructor y la estructura
 * y la accesibilidad siguen siendo nuestras.
 */

.ceij .ceij-seccion { padding-block: var(--ceij-e-7); }

/* ---------------------------------------------------------------------
   Hero — imagen a sangre completa con el texto encima
   --------------------------------------------------------------------- */

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

/* Igual que la cabecera: .body-innerwrapper limita el ancho a 1240px y las
   secciones con fondo tienen que sangrar hasta el borde de la ventana.
   En la franja el color va en la sección exterior; en el hero la imagen va en
   el elemento interior, que además arrastra el relleno de SP Page Builder, así
   que el sangrado se aplica ahí. */
.ceij .ceij-seccion--franja,
.ceij .ceij-hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.ceij .ceij-hero {
    position: relative;
    isolation: isolate;
    min-height: 460px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

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

/* Velo desde la izquierda: garantiza el contraste del texto pase lo que pase
   con la fotografía, que es el hallazgo de las 160 cabeceras de la auditoría. */
.ceij .ceij-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        100deg,
        rgba(233, 241, 249, .97) 0%,
        rgba(233, 241, 249, .93) 34%,
        rgba(233, 241, 249, .55) 52%,
        rgba(233, 241, 249, 0) 70%
    );
}

.ceij .ceij-hero__contenido {
    position: relative;
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding: var(--ceij-e-7) var(--ceij-e-5);
}

.ceij .ceij-hero__eyebrow {
    margin: 0 0 var(--ceij-e-3);
    font-family: var(--ceij-f-titulo);
    font-size: var(--ceij-fs-500);
    font-weight: var(--ceij-fw-fuerte);
    line-height: 1.3;
    color: #072B61;                       /* 13,4:1 sobre el velo */
}
.ceij .ceij-hero__sigla { color: var(--ceij-c-foco); }   /* 10,7:1 */

.ceij .ceij-hero__regla {
    width: 118px;
    margin: 0 0 var(--ceij-e-4);
    border: 0;
    border-top: 2px solid #072B61;
}

.ceij .ceij-hero__titulo {
    margin: 0 0 var(--ceij-e-4);
    font-size: var(--ceij-fs-800);
    line-height: 1.12;
    color: #072B61;
    max-width: 18ch;
}
/* Verde y ámbar del diseño, oscurecidos hasta cumplir AA sobre el velo:
   #0F6B5C da 5,6:1 y #8A6100 da 5,4:1. Los del Figma quedaban por debajo. */
.ceij .ceij-hero__acento  { color: #0F6B5C; }
.ceij .ceij-hero__acento2 { color: #8A6100; }

.ceij .ceij-hero__entrada {
    margin: 0;
    font-size: var(--ceij-fs-400);
    line-height: 1.55;
    color: #1B2733;                       /* 12,6:1 */
    max-width: 44ch;
}

/* ---------------------------------------------------------------------
   Servicios
   --------------------------------------------------------------------- */

.ceij .ceij-servicios {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--ceij-e-5);
}

.ceij .ceij-servicios__titulo {
    margin: 0 0 var(--ceij-e-1);
    font-size: var(--ceij-fs-600);
    color: #072B61;
}

.ceij .ceij-servicios__entrada {
    margin: 0 0 var(--ceij-e-6);
    color: var(--ceij-c-marca);
}

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

.ceij .ceij-servicio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ceij-e-3);
    padding: var(--ceij-e-6) var(--ceij-e-5) var(--ceij-e-5);
    background: var(--ceij-c-superficie);
    border: 1px solid var(--ceij-c-borde);
    border-radius: var(--ceij-r-medio);
    box-shadow: var(--ceij-sombra);
    height: 100%;
    text-align: center;
    transition: box-shadow .15s ease, transform .15s ease;
}
.ceij .ceij-servicio:hover { box-shadow: var(--ceij-sombra-alta); transform: translateY(-2px); }

.ceij .ceij-servicio__icono {
    display: grid;
    place-items: center;
    width: 110px;
    height: 110px;
}
.ceij .ceij-servicio__icono img { width: 100%; height: 100%; object-fit: contain; }
.ceij .ceij-servicio__sinicono {
    width: 100%; height: 100%;
    border-radius: var(--ceij-r-medio);
    background: var(--ceij-c-superficie-alt);
}

.ceij .ceij-servicio__titulo {
    margin: 0;
    font-size: var(--ceij-fs-400);
    font-weight: var(--ceij-fw-negrita);
    color: #072B61;
}

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

.ceij .ceij-servicio__accion { margin: auto 0 0; padding-top: var(--ceij-e-4); width: 100%; }
.ceij .ceij-servicio__accion .ceij-btn { width: 100%; }

/* ---------------------------------------------------------------------
   Franja de interés — tarjetas horizontales
   --------------------------------------------------------------------- */

.ceij .ceij-seccion--franja {
    background: #B1CCDB;
    padding-block: var(--ceij-e-7) var(--ceij-e-6);
}

/* Medidas tomadas de la pantalla de referencia sobre el lienzo de 1920:
   bloque de 1269px, tarjetas de 618px con 32px entre ellas y 150px de alto.
   Las medidas anteriores salían mal porque detectaba solo la parte blanca de
   la tarjeta y dejaba fuera el panel gris del icono. */
.ceij .ceij-franja {
    max-width: 1317px;   /* 1269 del diseño + el relleno lateral de la sección */
    margin-inline: auto;
    padding-inline: var(--ceij-e-5);
    /* La sección de SP Page Builder no trae relleno arriba y el rótulo
       «Canales oficiales y formación» quedaba pegado al borde de la franja
       azul; lleva 56px de aire (24 + 32). */
    padding-top: calc(var(--ceij-e-5) + var(--ceij-e-6));
    /* Y abajo, aire entre las tarjetas y el pie, como en el diseño. */
    padding-bottom: var(--ceij-e-4);
    text-align: center;
}

/* Aire alrededor del título de la franja, que es lo único que quedaba
   apretado en esta sección. */
.ceij .ceij-franja__eyebrow {
    margin: 0 0 var(--ceij-e-3);
    font-size: var(--ceij-fs-meta);
    font-weight: var(--ceij-fw-negrita);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ceij-c-marca);            /* 7,52:1 sobre #B1CCDB */
}

.ceij .ceij-franja__titulo {
    margin: 0 0 var(--ceij-e-3);
    font-size: var(--ceij-fs-600);
    line-height: 1.3;
    color: #072B61;                        /* 8,20:1 */
}

.ceij .ceij-franja__entrada {
    margin: 0 auto var(--ceij-e-7);
    font-size: var(--ceij-fs-300);
    color: #1B2733;
    max-width: 70ch;
}

.ceij .ceij-franja__lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

/* El icono va en su propio panel a la izquierda, a toda la altura de la
   tarjeta, y el contenido en blanco a la derecha. En la pantalla de referencia
   el panel mide 131px sobre una tarjeta de 614px. */
.ceij .ceij-franja__tarjeta {
    display: grid;
    grid-template-columns: minmax(120px, 21.3%) 1fr;
    align-items: stretch;
    min-height: 150px;
    background: var(--ceij-c-superficie);
    border-radius: var(--ceij-r-medio);
    box-shadow: var(--ceij-sombra);
    overflow: hidden;
}

.ceij .ceij-franja__icono {
    display: grid;
    place-items: center;
    background: #E6EFF4;
}
/* Sin relleno: el PNG trae su propio margen transparente. Medido en la
   pantalla de referencia, la caja de la imagen ocupa el panel de borde a borde
   (131px) y la tinta visible queda en 110px, el 84% de la caja. Si se le pone
   relleno al panel, el icono se queda pequeno como estaba. */
.ceij .ceij-franja__icono img {
    width: 100%;
    max-width: 132px;      /* tope para cuando la tarjeta se apila en movil */
    height: auto;
    object-fit: contain;
}

.ceij .ceij-franja__cuerpo {
    min-width: 0;
    padding: var(--ceij-e-4) var(--ceij-e-5);
    display: flex;
    flex-direction: column;
    gap: var(--ceij-e-2);
    justify-content: center;
}
.ceij .ceij-franja__nombre { margin: 0; font-size: var(--ceij-fs-400); font-weight: var(--ceij-fw-negrita); color: #072553; }
.ceij .ceij-franja__texto  { margin: 0; font-size: var(--ceij-fs-300); color: var(--ceij-c-texto); }
.ceij .ceij-franja__cuerpo p:last-child { margin: var(--ceij-e-2) 0 0; }

@media (max-width: 1199.98px) {
    .ceij .ceij-servicios__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------
   Hero en movil y tableta
   ---------------------------------------------------------------------
   Medido en «iPhone 16 & 17 Pro - 1» (402x874) del Figma: el hero mide 185px
   y la ilustracion se ve de lado a lado; el velo solo cubre la mitad
   izquierda, donde va el texto. El velo plano del 90-96% que habia aqui la
   borraba por completo.

   Los cuerpos del Figma —12px el antetitulo, 15px el titular, 11px el
   parrafo— quedan por debajo del minimo de 14px que fija ceij-tokens.css, asi
   que se respeta la proporcion (1 : 1,4 : 1) y no el valor absoluto. Por eso
   el hero sale algo mas alto que los 185px del diseno.
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .ceij .ceij-hero { min-height: 0; }

    /* Probado en el navegador: en movil la ilustracion se encuadra por el 98%
       y sube por encima del velo. El velo sigue declarado porque se pinta en
       el borde izquierdo de la imagen, donde el arte es casi plano. */
    /* Sin z-index la ilustracion sube por encima del velo, que es como se ve
       en el Figma de movil: alli el arte se ve entero y el texto se apoya en
       la parte clara de la propia fotografia. */
    .ceij .ceij-hero__fondo {
        z-index: auto;
        object-position: 94% center;
    }
    .ceij .ceij-hero::before {
        background: linear-gradient(
            100deg,
            rgba(233, 241, 249, .96) 0%,
            rgba(233, 241, 249, .93) 58%,
            rgba(233, 241, 249, .82) 76%,
            rgba(233, 241, 249, .24) 90%,
            rgba(233, 241, 249, 0) 100%
        );
    }

    /* 78% de ancho con el relleno solo a la izquierda: el texto trae <br> que
       fijan los cortes del diseno de escritorio, y con una columna mas
       estrecha esas lineas volvian a partirse por la mitad. 78% deja 294px de
       caja, justo por encima de la linea mas larga («y promovemos el
       conocimiento juridico», 275px), y el resto queda para la ilustracion. */
    .ceij .ceij-hero__contenido {
        max-width: 78%;
        margin-inline: 0;      /* el ancho maximo de 1280px venia centrado */
        padding: var(--ceij-e-4) 0 var(--ceij-e-4) 20px;
    }
    .ceij .ceij-hero__eyebrow { font-size: var(--ceij-fs-300); margin-bottom: var(--ceij-e-2); }
    .ceij .ceij-hero__regla   { width: 88px; margin-bottom: var(--ceij-e-3); }
    .ceij .ceij-hero__titulo  {
        max-width: none;
        font-size: var(--ceij-fs-500);
        margin-bottom: var(--ceij-e-3);
    }
    .ceij .ceij-hero__entrada { font-size: var(--ceij-fs-300); max-width: none; }
}
@media (max-width: 767.98px) {
    .ceij .ceij-servicios__lista { grid-template-columns: 1fr; }
}

/* En el Figma de movil la tarjeta de la franja NO se apila: mantiene el panel
   del icono a la izquierda (130px de los 354 de la tarjeta, el 36,7%) y el
   texto con su boton a la derecha, en 194px de alto. El 21,3% de escritorio
   dejaria el panel en 75px y el icono se perderia. */
@media (max-width: 767.98px) {
    .ceij .ceij-franja__lista { grid-template-columns: 1fr; gap: var(--ceij-e-5); }
    .ceij .ceij-franja__tarjeta {
        grid-template-columns: 36.7% 1fr;
        min-height: 194px;
    }
    .ceij .ceij-franja__icono img { max-width: 100px; }
    .ceij .ceij-franja__cuerpo { padding: var(--ceij-e-4) var(--ceij-e-3); }
    /* El rotulo del boton va en una linea, como en el diseno. */
    .ceij .ceij-franja__cuerpo .ceij-btn {
        padding-inline: var(--ceij-e-4);
        white-space: nowrap;
    }
}

@media (max-width: 575.98px) {
    .ceij .ceij-seccion { padding-block: var(--ceij-e-6); }
    .ceij .ceij-servicios { padding-inline: var(--ceij-e-4); }
    /* 8px, no 24: SP Page Builder ya mete 16px de relleno en su columna, y
       entre los dos salen los 24px que marca el Figma (tarjeta de 354px en una
       ventana de 402). */
    .ceij .ceij-franja    { padding-inline: 8px; padding-top: var(--ceij-e-6); padding-bottom: var(--ceij-e-5); }

    /* En el Figma de movil el bloque de servicios va centrado: el titulo y la
       entrada sobre el eje, y las tarjetas en una columna de 292px con 55px de
       margen a cada lado. El boton no ocupa el ancho de la tarjeta: mide 163px
       y va centrado. */
    .ceij .ceij-servicios__titulo,
    .ceij .ceij-servicios__entrada { text-align: center; }

    .ceij .ceij-servicios__lista {
        max-width: 292px;
        margin-inline: auto;
    }
    .ceij .ceij-servicio__accion { display: flex; justify-content: center; }
    .ceij .ceij-servicio__accion .ceij-btn { width: auto; min-width: 163px; }
}

/* Hero en el teléfono: como los banners internos (ceij-internas.css), sin la
   ilustración, con el color de fondo de su arte de teléfono y el texto a todo
   el ancho. Pedido del cliente del 16 de octubre. */
@media (max-width: 575.98px) {
    .ceij .ceij-hero { background-color: #E9F1FA; }
    .ceij .ceij-hero__fondo,
    .ceij .ceij-hero::before { display: none; }
    .ceij .ceij-hero__contenido {
        max-width: none;
        padding: var(--ceij-e-4) 20px;
    }
    /* Observación del diseñador: el texto quedaba recostado a la izquierda.
       Los <br> fijan los cortes del diseño, así que en vez de soltarlos se
       agranda la letra con el ancho del teléfono hasta que la línea más
       larga de cada bloque llene ~95 % de la columna (100vw menos los 40px de
       relleno). Medido: por cada px de letra, «Información Jurisprudencial
       (CEIJ)» ocupa 17,7px, «Información jurisprudencial» 14,3px y
       «Facilitamos el acceso a la jurisprudencia» 19,1px. Los topes evitan
       que una línea se parta en pantallas anchas. */
    .ceij .ceij-hero__eyebrow { font-size: clamp(0.875rem, calc((100vw - 40px) * .052), 1.125rem); }
    .ceij .ceij-hero__titulo  { font-size: clamp(1.125rem, calc((100vw - 40px) * .066), 1.625rem); }
    .ceij .ceij-hero__entrada { font-size: clamp(0.875rem, calc((100vw - 40px) * .0495), 1.125rem); }
}