/* EthicsRulesSection.css — Sección de texto con foto al costado. Nodos 2647:49326 (PC), 2647:49419
   (tablet) y 2647:49512 (mobile). Tipografía: site.css. */

/* --- Sección: fondo blanco a sangre completa. El relleno lateral va acá, no en el contenedor. --- */
.EthicsRulesSection {
    width: 100%; /* Ocupa el ancho de la ventana. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    background-color: #ffffff; /* Fondo del diseño. */
    padding: 72px 48px 56px; /* Arriba, lados y abajo del nodo de PC. */
}

/* Contenido centrado dentro del techo del sitio, en dos columnas iguales. */
.EthicsRulesSection-container {
    display: grid; /* Dos columnas. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* Iguales, y el texto largo no las ensancha. */
    align-items: center; /* Texto y foto centrados entre sí. */
    gap: 48px; /* Separación del diseño. */
    max-width: var(--container-max-width); /* Techo del contenido. */
    margin-inline: auto; /* Centrado. */
}

/* Con la foto a la izquierda solo cambia el orden visual; el HTML sigue con el texto primero. */
.EthicsRulesSection--image-left .EthicsRulesSection-media {
    order: -1; /* La foto pasa a la primera columna. */
}

/* --- Bloque de texto. --- */
.EthicsRulesSection-text {
    display: flex; /* Eyebrow, título y texto apilados. */
    flex-direction: column; /* En vertical. */
    align-items: flex-start; /* Pegados al borde de inicio. */
    gap: 16px; /* Separación del diseño entre las tres piezas. */
    min-width: 0; /* No fuerza el ancho de la columna. */
}

/* Etiqueta con el cuadrado de marca. */
.EthicsRulesSection-eyebrow {
    display: flex; /* Cuadrado y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 9px; /* Separación del diseño. */
    margin: 0; /* El 0 es obligatorio: es un <p> usado como ítem de flex. */
}

/* Cuadrado de la etiqueta. */
.EthicsRulesSection-eyebrow-mark {
    flex-shrink: 0; /* No se comprime. */
    width: 9px; /* Lado del diseño. */
    height: 9px; /* Cuadrado. */
    background-color: var(--color-cool-neutral-02); /* #243746 del diseño. */
}

/* Texto de la etiqueta. */
.EthicsRulesSection-eyebrow-text {
    font-size: 13px; /* Tamaño del diseño. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1.23; /* 16px sobre 13px, del nodo. */
    letter-spacing: 1.5px; /* Apertura del diseño. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: var(--color-cool-neutral-02); /* #243746 del diseño. */
}

/* Título de la sección. Es igual en los tres nodos: 28px, sin clamp. */
.EthicsRulesSection-title {
    margin: 0; /* La separación la da el gap del bloque. */
    font-size: 28px; /* Tamaño del diseño. */
    font-weight: 900; /* Black del diseño. */
    line-height: 1.21; /* 34px sobre 28px, del nodo. */
    color: #0f0f12; /* Casi negro del diseño. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* Texto de la sección. */
.EthicsRulesSection-description {
    margin: 0; /* La separación la da el gap del bloque. */
    font-size: 18px; /* Tamaño del nodo de PC. */
    font-weight: 400; /* Regular del diseño. */
    line-height: 1.22; /* 22px sobre 18px, del nodo. */
    color: #5c5e63; /* Gris del diseño; no coincide con ningún token de la paleta. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* --- Foto. --- */
.EthicsRulesSection-media {
    min-width: 0; /* No fuerza el ancho de la columna. */
}

.EthicsRulesSection-image {
    display: block; /* Sin el hueco de línea de un img en línea. */
    width: 100%; /* Llena la columna. */
    height: 340px; /* Alto del diseño en PC y tablet. */
    object-fit: cover; /* Recorta en vez de deformar. */
    border-radius: 10px; /* Esquinas del diseño. */
}

/* --- Tablet: hasta 1024px. Cubre el iPad Pro en vertical. Mantiene las dos columnas. --- */
@media (max-width: 1024px) {

    .EthicsRulesSection {
        padding-inline: 40px; /* Relleno lateral del nodo de tablet. */
    }

    /* Toca los 28px del nodo a 768px y se achica solo por debajo: con columnas de ~186px a 501px,
       "comportamiento" a 28px (231px) desbordaría la columna. */
    .EthicsRulesSection-title {
        font-size: clamp(20px, 3.65vw, 28px); /* 3,65vw = 28px sobre 768px. */
    }

    .EthicsRulesSection-description {
        font-size: 15px; /* Tamaño del nodo de tablet. */
        line-height: 1.2; /* 18px sobre 15px, del nodo. */
    }
}

/* --- Mobile: hasta 500px. Una columna, texto arriba y foto abajo. Va después de tablet para
   pisar solo lo que cambia. --- */
@media (max-width: 500px) {

    .EthicsRulesSection {
        padding-inline: 20px; /* Relleno lateral del nodo de mobile. */
    }

    .EthicsRulesSection-container {
        grid-template-columns: minmax(0, 1fr); /* Una sola columna. */
        align-items: start; /* Cada pieza arriba de su fila. */
    }

    /* En mobile la foto siempre queda abajo, aunque el editor la haya puesto a la izquierda. */
    .EthicsRulesSection--image-left .EthicsRulesSection-media {
        order: 0; /* Vuelve al orden del HTML. */
    }

    /* Vuelve a los 28px del nodo de mobile: en una sola columna de 335px la palabra más larga entra. */
    .EthicsRulesSection-title {
        font-size: 28px; /* Tamaño del nodo de mobile. */
    }

    .EthicsRulesSection-image {
        height: auto; /* El alto lo da la proporción. */
        aspect-ratio: 335 / 458; /* Proporción del nodo de mobile. */
    }
}