/* EthicsCommitmentSection.css — "El compromiso es de todos": foto de fondo, recuadro destacado con
   barra celeste, título y texto, y debajo un título y una descripción. Nodos 4031:91426 (PC, 1280),
   4031:91479 (tablet, 768) y 4031:91532 (mobile, 375). Tipografía base: site.css.

   PC: foto con velo negro al 20% y recuadro azul translúcido con desenfoque. TABLET: misma foto sin
   velo y recuadro azul más opaco. MOBILE: sin foto, fondo gris claro y recuadro blanco.

   SIN DESBORDES: cada texto admite su largo máximo del diseñador (título del recuadro 80, texto
   900, título 100, descripción 600), incluso sin espacios, y baja de renglón; nada usa nowrap. */

/* --- Sección. --- */
.EthicsCommitmentSection {
    position: relative; /* Origen de la foto y el velo. */
    width: 100%; /* Ocupa el ancho de la ventana. */
    overflow: hidden; /* Recorta la foto. */
    background-color: #f8f7f5; /* Gris claro del nodo (sin foto y en mobile). */
    font-family: var(--font-brand); /* Pila de marca. */
}

    .EthicsCommitmentSection *,
    .EthicsCommitmentSection *::before,
    .EthicsCommitmentSection *::after {
        box-sizing: border-box; /* Medidas predecibles. */
    }

    .EthicsCommitmentSection :where(h2, h3, p) {
        margin: 0; /* El espaciado lo pone el contenedor. */
    }

/* Foto de fondo. */
.EthicsCommitmentSection-image {
    position: absolute; /* Detrás del contenido. */
    inset: 0; /* Cubre la sección. */
    width: 100%; /* Ídem. */
    height: 100%; /* Ídem. */
    max-width: none; /* Anula el max-width de Bootstrap. */
    object-fit: cover; /* Llena sin deformar. */
}

/* Velo negro al 20% del nodo de PC, sobre la foto. */
.EthicsCommitmentSection--has-image::before {
    content: ""; /* Capa decorativa. */
    position: absolute; /* Sobre la foto. */
    inset: 0; /* La cubre entera. */
    z-index: 1; /* Sobre la foto, bajo el contenido. */
    background-color: rgba(0, 0, 0, 0.2); /* Velo del nodo. */
    pointer-events: none; /* No intercepta el clic. */
}

/* Velo elegido en el diseñador ("Image overlay"): reemplaza al velo suave del diseño, en PC y
   tablet. Su color y opacidad llegan en la variable de la sección. */
.EthicsCommitmentSection--has-overlay::before {
    background-color: var(--EthicsCommitmentSection-overlay); /* Color y opacidad elegidos. */
}

/* Contenido centrado dentro del techo del sitio. */
.EthicsCommitmentSection-container {
    position: relative; /* Sobre la foto y el velo. */
    z-index: 2; /* Ídem. */
    display: flex; /* Piezas apiladas. */
    flex-direction: column; /* Ídem. */
    align-items: flex-start; /* Alineadas a la izquierda. */
    gap: 24px; /* Separación del nodo. */
    width: 100%; /* Ancho disponible. */
    max-width: var(--container-max-width, 1600px); /* Techo del contenido. */
    margin-inline: auto; /* Centrado. */
    padding: 56px 48px; /* Relleno del nodo. */
}

/* --- Recuadro destacado. --- */
.EthicsCommitmentSection-callout {
    display: flex; /* Título y texto apilados. */
    flex-direction: column; /* Ídem. */
    gap: 12px; /* Separación del nodo. */
    width: 100%; /* Todo el ancho del contenido. */
    min-width: 0; /* Deja que el texto envuelva. */
    padding: 28px; /* Relleno del nodo. */
    border: 1px solid #e5e3de; /* Contorno del nodo. */
    border-radius: 10px; /* Esquinas del nodo. */
    background-color: rgba(36, 55, 70, 0.67); /* Azul translúcido del nodo de PC. */
    -webkit-backdrop-filter: blur(2px); /* Desenfoque del nodo (Safari). */
    backdrop-filter: blur(2px); /* Desenfoque del nodo. */
    color: #ffffff; /* Texto blanco. */
}

/* Barra celeste y título en línea; con dos renglones, la barra queda junto al primero. */
.EthicsCommitmentSection-callout-title {
    display: flex; /* Barra y texto en línea. */
    align-items: flex-start; /* La barra acompaña al primer renglón. */
    gap: 12px; /* Separación del nodo. */
    min-width: 0; /* Deja que el texto envuelva. */
    font-size: 20px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold del nodo. */
    line-height: 1.2; /* Interlineado de titular. */
}

.EthicsCommitmentSection-callout-bar {
    flex: none; /* No se comprime. */
    width: 4px; /* Ancho del nodo. */
    height: 22px; /* Alto del nodo. */
    margin-top: 1px; /* Centrada con el primer renglón (24px). */
    background-color: #429cde; /* Celeste del nodo. */
}

.EthicsCommitmentSection-callout-title-text {
    min-width: 0; /* Deja que el texto envuelva. */
    overflow-wrap: anywhere; /* Una palabra larga se corta en vez de desbordar. */
}

.EthicsCommitmentSection-callout-text {
    font-size: 18px; /* Tamaño del nodo. */
    font-weight: 400; /* Regular del nodo. */
    line-height: 1.35; /* Interlineado de lectura. */
    overflow-wrap: anywhere; /* Una palabra larga se corta en vez de desbordar. */
    white-space: pre-line; /* Respeta los saltos de línea del editor. */
}

/* --- Título y descripción bajo el recuadro. --- */
.EthicsCommitmentSection-title {
    max-width: 100%; /* No pasa del contenido. */
    font-size: 22px; /* Tamaño del nodo. */
    font-weight: 900; /* Black del nodo. */
    line-height: 1.2; /* Interlineado de titular. */
    color: #0f0f12; /* Casi negro del nodo. */
    overflow-wrap: anywhere; /* Una palabra larga se corta en vez de desbordar. */
}

.EthicsCommitmentSection-description {
    width: 100%; /* Ocupa la columna... */
    max-width: 672px; /* ...hasta el ancho del nodo de PC. */
    font-size: 18px; /* Tamaño del nodo. */
    font-weight: 400; /* Regular del nodo. */
    line-height: 1.35; /* Interlineado de lectura. */
    color: #243746; /* Azul oscuro del nodo de PC. */
    overflow-wrap: anywhere; /* Una palabra larga se corta en vez de desbordar. */
    white-space: pre-line; /* Respeta los saltos de línea del editor. */
}

/* --- Tablet: hasta 1024px. Misma foto sin velo y recuadro más opaco, sin desenfoque. --- */
@media (max-width: 1024px) {

    .EthicsCommitmentSection--has-image::before {
        display: none; /* El nodo de tablet no trae velo. */
    }

    /* El velo elegido en el diseñador sí se ve en tablet. */
    .EthicsCommitmentSection--has-overlay::before {
        display: block;
    }

    .EthicsCommitmentSection-container {
        padding: 56px 40px; /* Relleno del nodo de tablet. */
    }

    .EthicsCommitmentSection-callout {
        background-color: rgba(36, 55, 70, 0.8); /* Azul del nodo de tablet. */
        -webkit-backdrop-filter: none; /* Sin desenfoque en el nodo de tablet. */
        backdrop-filter: none; /* Ídem. */
    }

    .EthicsCommitmentSection-callout-text {
        font-size: 15px; /* Tamaño del nodo de tablet. */
    }

    .EthicsCommitmentSection-description {
        max-width: none; /* A todo el ancho, como el nodo. */
        font-size: 15px; /* Tamaño del nodo de tablet. */
        color: #5c5e63; /* Gris del nodo de tablet. */
    }
}

/* --- Mobile: hasta 500px. Sin foto: fondo gris claro y recuadro blanco. --- */
@media (max-width: 500px) {

    .EthicsCommitmentSection-image,
    .EthicsCommitmentSection--has-image::before {
        display: none; /* El nodo de mobile no trae foto, así que tampoco velo. */
    }

    .EthicsCommitmentSection-container {
        padding: 56px 20px; /* Relleno del nodo de mobile. */
    }

    .EthicsCommitmentSection-callout {
        background-color: #ffffff; /* Recuadro blanco del nodo de mobile. */
        color: #0f0f12; /* Título casi negro. */
    }

    .EthicsCommitmentSection-callout-text {
        color: #5c5e63; /* Gris del nodo de mobile. */
    }
}