/* TintedStatementBanner.css — Banner de foto a sangre completa con velo duotono opcional, para el
   encabezado de páginas individuales. Nodos 2611:25385 (PC, 1280x420), 2611:31044 (tablet,
   768x380) y 2611:31252 (mobile, 375x291) del Figma. Tipografía: site.css.
   Sin var(--container-max-width): el cuadro de texto tiene su propio ancho, y el fondo va a
   sangre completa. El velo duotono es opcional (TintedStatementBannerEntity.UseColorTint); el
   degradado de legibilidad siempre está. Los tres rangos centran el contenido verticalmente. */

.TintedStatementBanner {
    position: relative; /* Origen de las capas absolutas. */
    width: 100%; /* Ocupa el ancho de la ventana. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    overflow: hidden; /* Recorta la foto, que puede desbordar por el object-fit. */
    display: flex; /* Centra el contenido. */
    align-items: center; /* Centrado vertical. */
    /* 420/1280 = 32,8125vw; techo de 640px (no 420) para que la foto no se recorte de más en
       pantallas anchas. */
    min-height: clamp(340px, 32.8125vw, 640px);
    background-color: #1a1a1f; /* Respaldo mientras la foto carga o si su URL no resuelve. */
}

/* Foto de fondo. */
.TintedStatementBanner-image {
    position: absolute; /* Detrás de las capas. */
    inset: 0; /* Cubre la sección entera. */
    width: 100%; /* Ancho completo. */
    height: 100%; /* Alto completo. */
    max-width: none; /* Anula el max-width:100% que Bootstrap le pone a las imágenes. */
    object-fit: cover; /* Recorta en vez de deformar. */
    object-position: center; /* Centrada. */
    pointer-events: none; /* No intercepta clics. */
}

/* Velo duotono gris, encendido solo con el modificador --tinted (UseColorTint activo). */
.TintedStatementBanner-tint {
    display: none; /* Apagado por defecto. */
    position: absolute; /* Sobre la foto. */
    inset: 0; /* Cubre la sección entera. */
    background-color: #5b6770; /* Gris azulado del nodo. */
    opacity: 0.86; /* Opacidad del nodo. */
    mix-blend-mode: color; /* Tiñe la foto sin taparla: conserva su luminosidad. */
    pointer-events: none; /* No intercepta clics. */
}

    .TintedStatementBanner--tinted .TintedStatementBanner-tint {
        display: block;
    }

/* Degradado de legibilidad, siempre presente. */
.TintedStatementBanner-scrim {
    position: absolute; /* Sobre la foto y el velo. */
    inset: 0; /* Cubre la sección entera. */
    background-image:
        linear-gradient(rgba(15, 15, 18, 0.42), rgba(15, 15, 18, 0.42)),
        linear-gradient(rgba(91, 103, 112, 0.3), rgba(91, 103, 112, 0.3));
    pointer-events: none; /* No intercepta clics. */
}

/* --- Contenido: eyebrow, título, rayita de acento y descripción. --- */
.TintedStatementBanner-content {
    position: relative; /* Por encima de las capas absolutas. */
    z-index: 1; /* Encima de las capas sin depender del orden de pintado. */
    display: flex; /* Apila las piezas. */
    flex-direction: column; /* En columna. */
    align-items: flex-start; /* Cada pieza a su ancho natural. */
    gap: 16px; /* Separación del nodo de escritorio. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    width: 100%; /* Ocupa el ancho disponible dentro del techo de abajo. */
    max-width: min(67.8125vw, 868px); /* Ancho del texto del nodo (772px) + relleno (48px c/u). */
    padding: 56px 48px; /* Rellenos del nodo de escritorio. */
}

/* Etiqueta sobre el título. */
.TintedStatementBanner-eyebrow {
    display: flex; /* Cuadrado/punto y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 10px; /* Separación del nodo. */
    margin: 0; /* Quita el margen propio del párrafo. */
    font-size: 14px; /* Tamaño del nodo de escritorio. */
    font-weight: 700; /* Bold del nodo de escritorio. */
    letter-spacing: 0.5px; /* Apertura del nodo. */
    text-transform: uppercase; /* Las mayúsculas las pone el CSS, no el editor. */
    color: rgba(255, 255, 255, 0.9); /* Blanco casi pleno del nodo de escritorio. */
}

/* Cuadrado que precede a la etiqueta en escritorio; en tablet/mobile es un punto redondo. */
.TintedStatementBanner-eyebrow-dot {
    flex: 0 0 auto; /* No se comprime. */
    width: 7px; /* Lado del nodo de escritorio. */
    height: 7px; /* Cuadrado. */
    background-color: #ffffff; /* Blanco pleno, el color del nodo. */
}

/* Título de la sección. BTCN-341: también en escritorio BAJA DE LÍNEA dentro del cuadro de texto
   (antes era nowrap, como la caja de una línea del nodo, y con el máximo de 100 caracteres quedaba
   cortado en el borde derecho de la pantalla). Un título corto se sigue viendo en una línea. */
.TintedStatementBanner-title {
    margin: 0; /* Quita el margen propio del título. */
    max-width: 100%; /* Nunca más ancho que el cuadro de texto. */
    white-space: normal; /* Envuelve en vez de salirse. */
    font-size: 36px; /* Tamaño del nodo de escritorio. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1.2; /* Interlineado de titular. */
    color: #ffffff; /* Blanco pleno. */
}

/* Rayita de acento, entre el título y la descripción. Mismas medidas en los tres rangos. */
.TintedStatementBanner-rule {
    display: block; /* Caja propia. */
    flex: none; /* No se comprime dentro del flex column. */
    width: min(52px, 100%); /* 52px del nodo. */
    height: 3px; /* Alto del nodo. */
    background-color: #ffffff; /* Blanco pleno. */
}

/* Párrafo de apoyo. */
.TintedStatementBanner-description {
    margin: 0; /* Quita el margen propio del párrafo. */
    width: 100%; /* Se ajusta al ancho que define el título, en vez de su propio ancho natural. */
    font-size: 16px; /* Tamaño del nodo de escritorio. */
    line-height: 1.6; /* Interlineado de lectura. */
    color: rgba(255, 255, 255, 0.9); /* Blanco casi pleno del nodo de escritorio. */
}

/* --- Tablet: hasta 1024px (nodo 768x380). --- */
@media (max-width: 1024px) {
    .TintedStatementBanner {
        min-height: clamp(320px, 49.48vw, 380px); /* 380/768 del nodo. */
    }

    .TintedStatementBanner-content {
        width: 100%; /* Ocupa el ancho disponible dentro del techo de abajo. */
        max-width: min(702px, 100%); /* Ancho del título de este rango + relleno lateral. */
        padding: 0 64px 0 32px; /* Relleno asimétrico del nodo; sin vertical, lo centra el flex. */
    }

    .TintedStatementBanner-eyebrow {
        font-size: 12px; /* Tamaño del nodo de tablet. */
        font-weight: 600; /* Semibold del nodo de tablet, no Bold. */
        letter-spacing: 0.48px; /* Apertura del nodo. */
        color: #ffffff; /* Blanco pleno, no el rgba(0.9) de escritorio. */
    }

    .TintedStatementBanner-eyebrow-dot {
        width: 6px; /* Diámetro del nodo. */
        height: 6px; /* Círculo. */
        border-radius: 50%; /* Redondo, a diferencia del cuadrado de escritorio. */
    }

    .TintedStatementBanner-title {
        font-size: 28px; /* Tamaño del nodo de tablet. */
    }

    .TintedStatementBanner-description {
        font-size: 14px; /* Tamaño del nodo de tablet. */
        color: rgba(255, 255, 255, 0.92); /* Un poco más opaco que en escritorio. */
    }

    .TintedStatementBanner-scrim {
        background-image:
            linear-gradient(rgba(15, 15, 18, 0.35), rgba(15, 15, 18, 0.35)),
            linear-gradient(rgba(91, 103, 112, 0.75), rgba(91, 103, 112, 0.75));
    }
}

/* --- Mobile: hasta 500px (nodo 375x291). Va después del bloque de tablet. --- */
@media (max-width: 500px) {
    .TintedStatementBanner {
        min-height: clamp(260px, 77.6vw, 291px); /* 291/375 del nodo. */
    }

    .TintedStatementBanner-content {
        width: 100%; /* El nodo llena el ancho disponible; no lo define el título como en los otros dos. */
        max-width: 100%;
        padding: 0 20px; /* Relleno lateral del nodo; sin vertical, lo centra el flex. */
    }

    .TintedStatementBanner-title {
        white-space: normal; /* Envuelve en dos líneas, según el nodo de mobile. */
        font-size: 24px; /* Tamaño del nodo de mobile. */
    }

    .TintedStatementBanner-description {
        font-size: 13px; /* Tamaño del nodo de mobile. */
    }
}

/* --- Textos largos sin espacios (bug de QA, Pilares soluciones): con el máximo de caracteres, una palabra o una
   cadena sin espacios (ej. "//QA//QA//...") desbordaba la pantalla o quedaba cortada en tablet y
   mobile. Se corta donde haga falta en vez de salirse. Solo SUMA esta propiedad; no cambia nada
   con textos normales. --- */
.TintedStatementBanner-eyebrow,
.TintedStatementBanner-title,
.TintedStatementBanner-description {
    overflow-wrap: anywhere; /* Una palabra larga se corta en vez de desbordar. */
}