/* HighlightedBanner.css -- Encabezado opcional y una imagen a todo el ancho. Nodos 2611:29071 (PC),
   2611:28783 (tablet) y 2611:28475 (mobile). Encabezado del estándar del proyecto
   (CaptionedImageGrid). Tipografía base: site.css. */

/* --- Sección: fondo blanco a sangre completa; solo 30px arriba y abajo, sin relleno lateral. --- */
.HighlightedBanner {
    display: flex; /* Encabezado e imagen apilados. */
    flex-direction: column; /* En vertical. */
    gap: 24px; /* Separación estándar entre encabezado y contenido. */
    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: 30px 0; /* 30px arriba y abajo de sección. */
}

/* --- Encabezado: el relleno lateral va acá porque la imagen no lo lleva. --- */
.HighlightedBanner-header {
    display: flex; /* Piezas apiladas. */
    flex-direction: column; /* En vertical. */
    align-items: flex-start; /* Pegadas al borde de inicio. */
    gap: 9px; /* Separación estándar del encabezado. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    width: 100%; /* Ancho completo para poder centrarse. */
    max-width: var(--container-max-width); /* Techo del contenido. */
    margin-inline: auto; /* Centrado. */
    padding-inline: 48px; /* Lados estándar. */
    min-width: 0; /* No fuerza el ancho. */
}

/* Ninguna pieza pasa del ancho de su columna. */
.HighlightedBanner-header > * {
    max-width: 100%; /* Techo del ancho de la columna. */
}

/* Etiqueta con el cuadrado de marca. */
.HighlightedBanner-eyebrow {
    display: flex; /* Cuadrado y texto en línea. */
    align-items: flex-start; /* Cuadrado arriba si el texto parte renglón. */
    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. */
.HighlightedBanner-eyebrow-mark {
    flex-shrink: 0; /* No se comprime. */
    width: 7px; /* Lado del diseño. */
    height: 7px; /* Cuadrado. */
    margin-top: 6px; /* Centrado en el primer renglón: (14 x 1,35 - 7) / 2. */
    background-color: var(--color-cool-neutral-02); /* Azul de marca. */
}

/* Texto de la etiqueta: el estándar. */
.HighlightedBanner-eyebrow-text {
    min-width: 0; /* Cede ancho al cuadrado. */
    font-size: 14px; /* Tamaño estándar. */
    font-weight: 700; /* Bold. */
    line-height: 1.35; /* Interlineado estándar. */
    letter-spacing: 0.5px; /* Apertura estándar. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: var(--color-cool-neutral-02); /* Azul de marca. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* Título: 36px estándar al piso del rango de escritorio. */
.HighlightedBanner-title {
    margin: 0; /* La separación la da el gap. */
    font-size: clamp(24px, 3vw, 36px); /* 36 / 1200 * 100. */
    font-weight: 700; /* Bold. */
    line-height: 1.2; /* Interlineado de titular. */
    letter-spacing: -0.02em; /* Cierre del diseño. */
    color: #0f0f12; /* Casi negro. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* --- Imagen: a todo el ancho, con su proporción original en los tres dispositivos. --- */
.HighlightedBanner-image {
    display: block; /* Sin el hueco de línea de un img en línea. */
    width: 100%; /* Todo el ancho de la ventana. */
    height: auto; /* Mantiene la proporción de la imagen. */
    max-width: none; /* Anula el max-width de Bootstrap. */
}

/* --- Tablet: hasta 1024px. --- */
@media (max-width: 1024px) {
    .HighlightedBanner {
        gap: 20px; /* Separación de tablet. */
    }

    .HighlightedBanner-header {
        gap: 6px; /* Separación de tablet. */
        padding-inline: 40px; /* Lados estándar de tablet. */
    }
}

/* --- Mobile: hasta 500px. --- */
@media (max-width: 500px) {
    .HighlightedBanner-header {
        padding-inline: 20px; /* Lados estándar de mobile. */
    }

    .HighlightedBanner-title {
        font-size: 24px; /* Tamaño de mobile estándar. */
    }
}