/* QuoteBanner.css — Banda de cita sobre foto en duotono. Widget general, reutilizable en cualquier
   vertiente. Nodo 499:29727. Tipografía: site.css. Solo hay diseño de escritorio. */

/* --- Sección: banda de imagen a sangre completa. --- */
.QuoteBanner {
    position: relative; /* Origen de la imagen, el velo y el oscurecido. */
    width: 100%; /* Ocupa el ancho de la ventana. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    /* 338/1280 = 26.41vw (nodo "BANNER · Ambition 2030"). Sin este piso, una cita corta deja el
       alto real muy por debajo de esa proporción -- con object-fit:cover eso recorta de más la
       imagen de fondo y se ve "acercada". Es un piso, no un alto fijo: una cita larga sigue
       creciendo la sección sin que el techo la recorte. */
    min-height: clamp(338px, 26.41vw, 460px);
    background-color: #2c2c2e; /* Respaldo si se usa sin imagen. */
    overflow: hidden; /* Recorta las capas al borde de la sección. */
    display: flex; /* Para centrar el contenido. */
    align-items: center; /* Centrado vertical. */
    justify-content: center; /* Centrado horizontal. */
}

/* Imagen de fondo, opcional. */
.QuoteBanner-image {
    position: absolute; /* Detrás del contenido. */
    inset: 0; /* Cubre la sección entera. */
    width: 100%; /* Ancho completo. */
    height: 100%; /* Alto completo. */
    max-width: none; /* Anula el max-width de Bootstrap. */
    object-fit: cover; /* Recorta en vez de deformar. */
    object-position: center; /* Conserva el centro al recortar. */
    pointer-events: none; /* No intercepta clics. */
}

/* Velo que tiñe la foto de gris (duotono). */
.QuoteBanner-veil {
    position: absolute; /* Sobre la imagen. */
    inset: 0; /* Cubre la sección entera. */
    background-color: rgba(15, 15, 18, 0.85); /* Gris neutro del nodo. */
    mix-blend-mode: color; /* Cambia el tono sin tocar la luminosidad. */
    pointer-events: none; /* No intercepta clics. */
}

/* Oscurecido final. VA EN UN ELEMENTO APARTE del velo: dentro de un mix-blend-mode:color no
   oscurecería nada, porque ese modo conserva la luminosidad del fondo. */
.QuoteBanner-shade {
    position: absolute; /* Sobre el velo. */
    inset: 0; /* Cubre la sección entera. */
    background-color: rgba(15, 15, 18, 0.58); /* Negro translúcido. */
    pointer-events: none; /* No intercepta clics. */
}

/* Velo simple para cuando UseDuotoneImage está apagado: la imagen se ve tal cual, solo con este
   oscurecido parejo para que el texto blanco siga siendo legible (nodo "BANNER · Ambition 2030"). */
.QuoteBanner-plain-veil {
    position: absolute; /* Sobre la imagen. */
    inset: 0; /* Cubre la sección entera. */
    background-color: rgba(15, 15, 18, 0.5); /* Negro translúcido del nodo, sin ningún tinte. */
    pointer-events: none; /* No intercepta clics. */
}

/* --- Contenido: la cita centrada dentro del techo del sitio. --- */
.QuoteBanner-content {
    position: relative; /* Por encima de la imagen y los velos. */
    z-index: 1; /* Sobre las capas de fondo. */
    width: 100%; /* Ocupa el ancho disponible. */
    max-width: var(--container-max-width); /* Techo del contenido. */
    margin-inline: auto; /* Centrado. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    display: flex; /* Apila comilla, cita y firma. */
    flex-direction: column; /* En columna. */
    align-items: center; /* Centradas entre sí. */
    gap: 16px; /* Separación del nodo, igual en las 3 mesas. */
    padding: 64px 200px; /* Vertical fijo en las 3 mesas; el horizontal cambia por breakpoint. */
    text-align: center; /* Texto centrado. */
}

/* Comilla decorativa sobre la cita. */
.QuoteBanner-icon {
    margin: 0; /* Quita el margen propio del párrafo. */
    font-size: 88px; /* Tamaño real del nodo, igual en las 3 mesas. */
    font-weight: 900; /* Archivo Black del diseño. */
    line-height: 1; /* Ajustado al glifo, sin aire extra de línea. */
    color: #ffffff; /* Blanco pleno, del nodo real -- no atenuado. */
}

/* Texto de la cita. */
.QuoteBanner-description {
    margin: 0; /* Quita el margen propio del párrafo. */
    max-width: min(880px, 100%); /* Ancho de línea real del nodo PC. */
    font-size: 32px; /* Tamaño real del nodo PC. */
    font-weight: 400; /* Regular del diseño. */
    line-height: 1.3; /* Interlineado del diseño. */
    color: #ffffff; /* Blanco pleno. */
}

/* Firma o autor de la cita. */
.QuoteBanner-label {
    margin: 0; /* Quita el margen propio del párrafo. */
    font-size: 11px; /* Tamaño real del nodo, igual en las 3 mesas. */
    font-weight: 700; /* Bold del diseño. */
    letter-spacing: 0.5px; /* Apertura del diseño. */
    color: rgba(255, 255, 255, 0.85); /* Blanco atenuado. */
    white-space: nowrap; /* En una sola línea. */
}

/* --- Tablet: hasta 1024px. --- */
@media (max-width: 1024px) {
    .QuoteBanner-content {
        padding: 64px 108px; /* Relleno horizontal real del nodo tablet (766px de mesa). */
    }

    .QuoteBanner-description {
        max-width: min(550px, 100%); /* Ancho de línea real del nodo tablet. */
        font-size: 27px; /* Tamaño real del nodo tablet. */
    }
}

/* --- Mobile: hasta 500px. --- */
@media (max-width: 500px) {
    .QuoteBanner-content {
        padding: 64px 40.5px; /* Relleno horizontal real del nodo mobile (375px de mesa). */
    }

    .QuoteBanner-description {
        max-width: min(294px, 100%); /* Ancho de línea real del nodo mobile. */
        font-size: 27px; /* Tamaño real del nodo mobile. */
    }
}

/* El marcador del editor usa las clases WidgetPlaceholder de site.css, no este archivo. */