/* ==============================================================
   ESTILOS EXCLUSIVOS: PÁGINA "PASAPORTE AL FUTURO" (NODE 96)

   Reescrito 2026-09-02: la versión anterior de este archivo NUNCA
   se subió al servidor (por eso la página se seguía viendo sin
   ningún estilo, con las 4 imágenes en tamaños distintos y el
   texto sin contenedor). Además, el pedido cambió: ya no es solo
   "título rojo + imágenes parejas", ahora el orden debe ser
   párrafo / 2 imágenes / párrafo / 2 imágenes intercalados.

   Estructura real (Layout Builder, layout de una columna):
   .layout__region--content
     .block-field-blocknodepagina-basicafield-imagen  (1 bloque)
       .field--name-field-imagen.field__items           (4 .field__item, uno por foto)
     .block-field-blocknodepagina-basicafield-cuerpo   (bloque de texto)
       .field--name-field-cuerpo.field__item
         div:nth-child(1) = título (con <strong>)
         div:nth-child(2) = párrafo 1
         div:nth-child(3) = párrafo 2 (también con un <strong> al inicio,
                             pero solo se pinta de rojo el de nth-child(1))

   Para intercalar párrafos e imágenes (que viven en DOS bloques
   de Layout Builder distintos) sin tocar el HTML del contenido,
   se convierte ".layout__region--content" en un grid y se le pone
   "display:contents" a TODOS los wrappers intermedios de ambas
   ramas. display:contents no cambia el DOM (los selectores CSS
   siguen viendo la jerarquía real), pero sí saca esas cajas de en
   medio del layout: sus hijos (los 3 divs del cuerpo y las 4
   fotos) pasan a comportarse como items directos del grid y se
   pueden reordenar libremente con "order" + "grid-column".

   El texto del Cuerpo se pegó desde Word/Outlook: cada párrafo es
   un <div class="x_elementToProof" style="color:rgb(0,0,0)
   !important;..."> con estilo EN LÍNEA. Un !important en línea no
   se puede vencer desde aquí — por eso no se toca el color de esos
   divs, solo el de los <strong>/<b> de adentro, que no traen
   estilo en línea propio.
   ============================================================== */

/* --- 0. GRID PRINCIPAL: contenedor igual que el resto del sitio --- */
.page-node-96 .layout__region--content {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 50px 30px !important;
}

/* --- 1. DISOLVER WRAPPERS: imagen y cuerpo quedan como items del grid --- */
.page-node-96 .block-field-blocknodepagina-basicafield-imagen,
.page-node-96 .block-field-blocknodepagina-basicafield-imagen > .content,
.page-node-96 .field--name-field-imagen.field__items,
.page-node-96 .block-field-blocknodepagina-basicafield-cuerpo,
.page-node-96 .block-field-blocknodepagina-basicafield-cuerpo > .content,
.page-node-96 .field--name-field-cuerpo.field__item {
    display: contents !important;
}

/* --- 2. TÍTULO: primer div del Cuerpo, en rojo institucional del
   sitio (mismo rojo del footer, #f5333f / --color-primary-red) --- */
.page-node-96 .field--name-field-cuerpo.field__item > div:nth-child(1) {
    grid-column: 1 / -1 !important;
    order: 1 !important;
}
.page-node-96 .field--name-field-cuerpo.field__item > div:nth-child(1) strong,
.page-node-96 .field--name-field-cuerpo.field__item > div:nth-child(1) b {
    color: #f5333f !important;
    font-size: 2rem !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
}

/* --- 3. ORDEN INTERCALADO: párrafo 1 / imágenes 1-2 / párrafo 2 / imágenes 3-4 --- */
.page-node-96 .field--name-field-cuerpo.field__item > div:nth-child(2) {
    grid-column: 1 / -1 !important;
    order: 2 !important;
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
}
.page-node-96 .field--name-field-imagen.field__items > .field__item:nth-of-type(1) { order: 3 !important; }
.page-node-96 .field--name-field-imagen.field__items > .field__item:nth-of-type(2) { order: 4 !important; }

.page-node-96 .field--name-field-cuerpo.field__item > div:nth-child(3) {
    grid-column: 1 / -1 !important;
    order: 5 !important;
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
}
.page-node-96 .field--name-field-imagen.field__items > .field__item:nth-of-type(3) { order: 6 !important; }
.page-node-96 .field--name-field-imagen.field__items > .field__item:nth-of-type(4) { order: 7 !important; }

/* --- 4. IMÁGENES: mismo tamaño para las 4 --- */
.page-node-96 .field--name-field-imagen.field__items > .field__item {
    border-radius: 1rem !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* CAUSA RAÍZ del tamaño inconsistente: field--name-field-media-image es
   el wrapper INTERNO propio de la entidad Media (no del campo field_imagen
   que la referencia) y Bootstrap-Barrio le pone "float:left" por defecto.
   Ese float lo encoge a "shrink-to-fit" (el ancho intrínseco de la foto,
   480px) en vez de estirarlo al 100% del .field__item real (538px) — por
   eso el img de abajo con "width:100%" calculaba mal su tamaño real.
   Ya se había visto este mismo patrón antes en Lab en Movimiento. */
.page-node-96 .field--name-field-imagen.field__items .field--name-field-media-image {
    float: none !important;
    width: 100% !important;
    height: 100% !important;
}
.page-node-96 .field--name-field-imagen.field__items a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}
.page-node-96 .field--name-field-imagen.field__items picture {
    display: block !important;
}
.page-node-96 .field--name-field-imagen.field__items img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    display: block !important;
}

/* ==============================================================
   5. RESPONSIVE
   ============================================================== */
@media (max-width: 700px) {
    .page-node-96 .layout__region--content {
        grid-template-columns: 1fr !important;
        padding: 30px 20px !important;
    }
    .page-node-96 .field--name-field-cuerpo.field__item > div:nth-child(1) strong,
    .page-node-96 .field--name-field-cuerpo.field__item > div:nth-child(1) b {
        font-size: 1.6rem !important;
    }
}

/* Fin de archivo */