/* TextImageSection.css — Encabezado de sección y un elemento de texto con foto al costado. Nodos de escritorio:
   3655:48832 (encabezado) y 3655:48838 (elemento). Sin nodos de tablet ni mobile. Tipografía: site.css. */

/* --- Sección: fondo blanco a sangre completa. El relleno lateral va acá, no en el contenedor. --- */
.TextImageSection {
    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: 32px 48px; /* Arriba y abajo, y lados. */
}

/* Contenido centrado dentro del techo del sitio: encabezado y elemento apilados. */
.TextImageSection-container {
    display: flex; /* Encabezado y elemento en columna. */
    flex-direction: column; /* En vertical. */
    gap: 48px; /* Separación entre encabezado y elemento. */
    max-width: var(--container-max-width); /* Techo del contenido. */
    margin-inline: auto; /* Centrado. */
}

/* --- Encabezado. --- */
.TextImageSection-header {
    display: flex; /* Eyebrow y título apilados. */
    flex-direction: column; /* En vertical. */
    align-items: flex-start; /* Pegados al borde de inicio. */
    gap: 10px; /* Separación del nodo 3655:48834. */
    min-width: 0; /* No fuerza el ancho. */
}

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

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

/* Texto de la etiqueta. */
.TextImageSection-eyebrow-text {
    font-size: 14px; /* Tamaño del diseño. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1.35; /* Interlineado del nodo. */
    letter-spacing: 0.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. */
.TextImageSection-title {
    margin: 0; /* La separación la da el gap del encabezado. */
    font-size: 42px; /* Tamaño del nodo 3655:48836. */
    font-weight: 700; /* Bold del diseño. */
    line-height: normal; /* Interlineado del nodo. */
    letter-spacing: -1.05px; /* Cierre del diseño. */
    color: #0f0f12; /* Casi negro del diseño. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* --- Elemento: foto y texto en la proporción 570:504 del nodo. --- */
.TextImageSection-item {
    display: grid; /* Dos columnas. */
    grid-template-columns: minmax(0, 504fr) minmax(0, 570fr); /* Texto y foto; el texto va primero en el HTML. */
    align-items: center; /* Texto y foto centrados entre sí. */
    gap: 56px; /* Separación del diseño. */
}

/* Con la foto a la izquierda se invierten las columnas y el orden visual. */
.TextImageSection-item--image-left {
    grid-template-columns: minmax(0, 570fr) minmax(0, 504fr); /* Foto y texto. */
}

.TextImageSection-item--image-left .TextImageSection-media {
    order: -1; /* La foto pasa a la primera columna; el HTML sigue con el texto primero. */
}

/* Bloque de texto del elemento. */
.TextImageSection-text {
    display: flex; /* Piezas apiladas. */
    flex-direction: column; /* En vertical. */
    align-items: flex-start; /* Pegadas al borde de inicio. */
    gap: 16px; /* Separación del nodo 3655:48840. */
    min-width: 0; /* No fuerza el ancho de la columna. */
}

/* Ninguna pieza pasa del ancho de su columna: sin esto una palabra sin espacios la ensancha y
   se pinta debajo de la foto, porque break-word no achica el ancho mínimo. */
.TextImageSection-header > *,
.TextImageSection-text > * {
    max-width: 100%; /* Techo del ancho de la columna. */
}

/* Título del elemento. */
.TextImageSection-item-title {
    margin: 0; /* La separación la da el gap del bloque. */
    font-size: 28px; /* Tamaño del nodo 3655:48844. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1.29; /* 36px sobre 28px, del nodo. */
    color: #1b2d3a; /* Color del diseño. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* Texto del elemento. */
.TextImageSection-description {
    margin: 0; /* Sin el margen del navegador. */
    font-size: 16px; /* Tamaño del nodo 3655:48845. */
    font-weight: 400; /* Regular del diseño. */
    line-height: 1.625; /* 26px sobre 16px, del nodo. */
    color: rgba(34, 42, 48, 0.75); /* Color del diseño. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* Línea entre las dos descripciones. El color llega en línea desde la paleta. */
.TextImageSection-divider {
    display: block; /* Caja propia. */
    flex: none; /* No se comprime. */
    width: 48px; /* Ancho del nodo 2740:26429. */
    height: 3px; /* Alto del nodo. */
    border-radius: 2px; /* Esquinas del nodo. */
}

/* Texto secundario. Mismo cuerpo en los tres rangos. */
.TextImageSection-secondary-description {
    margin: 0; /* Sin el margen del navegador. */
    font-size: 15px; /* Tamaño del nodo 2740:26430. */
    font-weight: 400; /* Regular del diseño. */
    line-height: 1.667; /* 25px sobre 15px, del nodo. */
    color: #222a30; /* Color del diseño. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* Lista de viñetas: mismo cuerpo que la descripción. */
.TextImageSection-list {
    display: flex; /* Elementos apilados. */
    flex-direction: column; /* En vertical. */
    gap: 6px; /* Separación del nodo 3655:48847. */
    margin: 0; /* El 0 es obligatorio: es un <ul> usado como ítem de flex. */
    padding: 0; /* Sin la sangría del navegador. */
    list-style: none; /* La viñeta la pone el ::before. */
    font-size: 16px; /* Tamaño del diseño. */
    font-weight: 400; /* Regular del diseño. */
    line-height: 1.625; /* 26px sobre 16px, del nodo. */
    color: rgba(34, 42, 48, 0.75); /* Color del diseño. */
}

/* Viñeta y texto en dos columnas: los renglones partidos se alinean con el texto, no con la viñeta. */
.TextImageSection-list-item {
    display: flex; /* Viñeta y texto lado a lado. */
    align-items: baseline; /* Viñeta a la altura del primer renglón. */
}

/* Viñeta del diseño. */
.TextImageSection-list-item::before {
    content: "\2022\00a0"; /* Punto y espacio duro. */
    flex: none; /* No se comprime. */
}

/* Texto del elemento de la lista. */
.TextImageSection-list-text {
    min-width: 0; /* Puede achicarse por debajo de su palabra más larga. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* Enlace del elemento: los cinco estados para ganarle al a:hover de Bootstrap. */
.TextImageSection-link,
.TextImageSection-link:link,
.TextImageSection-link:visited,
.TextImageSection-link:hover,
.TextImageSection-link:focus,
.TextImageSection-link:active {
    color: #222a30; /* Color del nodo 3655:48848. */
    text-decoration: none; /* Nunca subrayado. */
}

.TextImageSection-link {
    display: inline-flex; /* Leyenda y flecha en línea. */
    align-items: center; /* Centradas entre sí. */
    gap: 6px; /* Separación estándar entre leyenda y flecha. */
    font-size: 14px; /* Tamaño del diseño. */
    font-weight: 700; /* Bold del diseño. */
    line-height: normal; /* Interlineado del nodo. */
    transition: gap 0.2s ease-in-out; /* Animación estándar de LegalLinksSection. */
}

/* La flecha se corre al abrir la separación, sin animar transform. */
.TextImageSection-link:hover,
.TextImageSection-link:focus-visible {
    gap: 10px; /* Separación estándar en hover y foco. */
}

/* Flecha estándar de LegalLinksSection. */
.TextImageSection-link-arrow {
    width: 14px; /* Tamaño estándar. */
    height: 14px; /* Cuadrada. */
    flex: none; /* No se comprime. */
    fill: none; /* Solo trazo. */
    stroke: currentColor; /* Toma el color del enlace. */
    stroke-width: 2.75; /* Grosor estándar. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
}

/* --- Foto. --- */
.TextImageSection-media {
    display: grid; /* Centra la foto dentro del cuadro. */
    place-items: center; /* En los dos ejes. */
    min-width: 0; /* No fuerza el ancho de la columna. */
    aspect-ratio: 570 / 468; /* El cuadro: proporción del nodo 3655:48839. */
}

/* La foto entra completa en el cuadro: los topes la achican sin recortar ni deformar, y la caja
   del img queda del tamaño de la foto, así el redondeo cae en sus esquinas y no en el cuadro. */
.TextImageSection-image {
    display: block; /* Sin el hueco de línea de un img en línea. */
    width: auto; /* Ancho natural, achicado por el tope. */
    height: auto; /* Alto natural, achicado por el tope. */
    max-width: 100%; /* No pasa del ancho del cuadro. */
    max-height: 100%; /* No pasa del alto del cuadro. */
    min-width: 0; /* El tope le gana al mínimo automático del ítem de grilla. */
    min-height: 0; /* Ídem en el alto. */
    border-radius: 10px; /* Esquinas redondeadas, a pedido del usuario. */
}

/* Con la proporción que pasa el JS, la foto chica también se agranda: el ancho es el menor entre
   el del cuadro y el que la deja con el alto del cuadro (468/570 es el alto sobre el ancho). */
.TextImageSection-image.is-fitted {
    width: min(100%, calc(100% * var(--image-ratio) * 468 / 570)); /* El alto sale de la proporción. */
}

/* --- "Image size" = "Match text height" (nodo 4031:91418): la foto toma el alto del bloque de
   texto y lo llena recortando lo que sobre, con las esquinas redondeadas. Sin la opción, el cuadro
   de siempre. --- */
.TextImageSection--image-match-text .TextImageSection-item {
    align-items: stretch; /* La celda de la foto mide lo mismo que la del texto. */
}

.TextImageSection--image-match-text .TextImageSection-media {
    position: relative; /* Ancla de la foto. */
    display: block; /* Sin el centrado del cuadro. */
    aspect-ratio: auto; /* Sin la proporción fija: el alto lo da el texto. */
    min-height: 240px; /* Con poco texto, la foto no queda como una tira. */
    overflow: hidden; /* La foto recortada no se sale. */
    border-radius: 10px; /* Las esquinas redondeadas pasan al cuadro. */
}

    /* Tres clases: le gana también a la foto ajustada por el JS (is-fitted). */
    .TextImageSection--image-match-text .TextImageSection-media .TextImageSection-image {
        position: absolute; /* Llena el cuadro sin empujar su alto. */
        inset: 0; /* Entera. */
        width: 100%; /* Todo el ancho. */
        height: 100%; /* Todo el alto. */
        max-width: none; /* Sin los topes del modo de siempre. */
        max-height: none; /* Ídem. */
        object-fit: cover; /* Llena recortando, sin deformar. */
        border-radius: 0; /* El redondeo lo da el cuadro. */
    }

/* --- Tablet: hasta 1024px. Sin nodo: mantiene las dos columnas. --- */
@media (max-width: 1024px) {

    .TextImageSection {
        padding: 32px 40px; /* Arriba y abajo, y lados de tablet. */
    }

    /* 42px a 1024px y se achica por debajo. */
    .TextImageSection-title {
        font-size: clamp(30px, 4.1vw, 42px); /* 4,1vw = 42px sobre 1024px. */
        letter-spacing: -0.025em; /* Mismo cierre en proporción. */
    }

    .TextImageSection-item,
    .TextImageSection-item--image-left {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* Columnas iguales. */
        gap: 32px; /* Separación de tablet. */
    }

    /* 28px a 768px y se achica por debajo para no desbordar la columna. */
    .TextImageSection-item-title {
        font-size: clamp(22px, 3.65vw, 28px); /* 3,65vw = 28px sobre 768px. */
    }
}

/* --- Mobile: hasta 500px. Una columna; la foto abajo, o arriba con el modificador. --- */
@media (max-width: 500px) {

    .TextImageSection {
        padding: 24px 20px; /* Arriba y abajo, y lados de mobile. */
    }

    .TextImageSection-title {
        font-size: 30px; /* Piso del rango de tablet. */
    }

    .TextImageSection-item,
    .TextImageSection-item--image-left {
        grid-template-columns: minmax(0, 1fr); /* Una sola columna. */
        align-items: start; /* Cada pieza arriba de su celda. */
        gap: 24px; /* Separación de mobile. */
    }

    /* En mobile el lado de escritorio no cuenta: la foto queda abajo por defecto. */
    .TextImageSection-item--image-left .TextImageSection-media {
        order: 0; /* Vuelve al orden del HTML. */
    }

    /* --- Foto arriba de todo: el elemento se disuelve y texto y foto pasan al contenedor. --- */
    .TextImageSection--mobile-image-top .TextImageSection-container {
        gap: 24px; /* Separación entre foto y encabezado, y entre foto y texto sin encabezado. */
    }

    .TextImageSection--mobile-image-top .TextImageSection-item {
        display: contents; /* Sus hijos se ordenan junto al encabezado. */
    }

    .TextImageSection--mobile-image-top .TextImageSection-media {
        order: -1; /* Delante del encabezado. */
    }

    .TextImageSection--mobile-image-top .TextImageSection-header {
        margin-bottom: 24px; /* Suma con el gap: los 48px de siempre entre encabezado y texto. */
    }

    .TextImageSection-item-title {
        font-size: 24px; /* Tamaño de mobile. */
    }

    /* "Match text height" en mobile: la foto va sola en su fila, sin texto al lado del que tomar el
       alto, así que vuelve a la proporción del cuadro de siempre (recortando lo que sobre). */
    .TextImageSection--image-match-text .TextImageSection-media {
        aspect-ratio: 570 / 468; /* Proporción del nodo 3655:48839. */
        min-height: 0; /* La da la proporción. */
    }
}

/* Sin animación para quien la desactivó en el sistema. */
@media (prefers-reduced-motion: reduce) {

    .TextImageSection-link {
        transition: none; /* Sin interpolación. */
    }

    .TextImageSection-link:hover,
    .TextImageSection-link:focus-visible {
        gap: 6px; /* La flecha no se corre. */
    }
}