/* ReportChannelBanner.css — Banda "Canal de denuncias": foto de fondo bajo un velo azul, eyebrow,
   título, texto, botón y link de texto. Nodos 4376:84850 (PC, 1280) y 4376:85342 (tablet, 768);
   mobile apila el botón y el link. Tipografía base: site.css.

   SIN DESBORDES: cada texto admite su largo máximo del diseñador (eyebrow 60, título 120,
   descripción 600, y el texto libre de los enlaces) y baja de renglón; nada usa nowrap. */

/* --- Sección. --- */
.ReportChannelBanner {
    position: relative; /* Origen de la foto y el velo. */
    width: 100%; /* Ocupa el ancho de la ventana. */
    overflow: hidden; /* Recorta la foto. */
    background-color: #1c2b38; /* Azul del velo, sin foto. */
    font-family: var(--font-brand); /* Pila de marca. */
    color: #ffffff; /* Texto blanco. */
}

    .ReportChannelBanner *,
    .ReportChannelBanner *::before,
    .ReportChannelBanner *::after {
        box-sizing: border-box; /* Medidas predecibles. */
    }

    .ReportChannelBanner :where(h2, p) {
        margin: 0; /* El espaciado lo pone el contenedor. */
    }

.ReportChannelBanner-image {
    position: absolute; /* Detrás del contenido. */
    inset: 0; /* Cubre la banda. */
    width: 100%; /* Ídem. */
    height: 100%; /* Ídem. */
    max-width: none; /* Anula el max-width de Bootstrap. */
    object-fit: cover; /* Llena sin deformar. */
}

/* Velo azul del nodo. */
.ReportChannelBanner-veil {
    position: absolute; /* Sobre la foto. */
    inset: 0; /* La cubre entera. */
    background-color: rgba(28, 43, 56, 0.88); /* Velo del nodo. */
    pointer-events: none; /* No intercepta el clic. */
}

.ReportChannelBanner-content {
    position: relative; /* Sobre el velo. */
    display: flex; /* Piezas apiladas. */
    flex-direction: column; /* Ídem. */
    align-items: flex-start; /* Alineadas a la izquierda. */
    gap: 16px; /* Separación del nodo. */
    width: 100%; /* Ancho disponible. */
    max-width: var(--container-max-width, 1600px); /* Techo del contenido. */
    margin-inline: auto; /* Centrado. */
    padding: 64px 48px; /* Relleno del nodo. */
}

/* --- Eyebrow: cuadrito y texto celeste. --- */
.ReportChannelBanner-eyebrow {
    display: flex; /* Cuadrito y texto en línea. */
    align-items: center; /* Centrados. */
    gap: 9px; /* Separación del nodo. */
    max-width: 100%; /* No desborda. */
    font-size: 13px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold del nodo. */
    letter-spacing: 1.5px; /* Apertura del nodo. */
    text-transform: uppercase; /* "CANAL DE DENUNCIAS". */
    color: #73acff; /* Celeste del nodo. */
    overflow-wrap: anywhere; /* Una palabra larga no desborda. */
}

.ReportChannelBanner-eyebrow-dot {
    flex: none; /* No se comprime. */
    width: 9px; /* Tamaño del nodo. */
    height: 9px; /* Ídem. */
    background-color: #73acff; /* Celeste del nodo. */
}

.ReportChannelBanner-title {
    max-width: 100%; /* No desborda. */
    font-size: 30px; /* Tamaño del nodo de PC. */
    font-weight: 900; /* Black del nodo. */
    line-height: 1.2; /* Interlineado de titular. */
    color: #ffffff; /* Blanco. */
    overflow-wrap: anywhere; /* Una palabra larga no desborda. */
}

.ReportChannelBanner-description {
    max-width: min(900px, 100%); /* Ancho del nodo de PC. */
    font-size: 16px; /* Tamaño del nodo. */
    line-height: 1.45; /* Interlineado de lectura. */
    color: #ccd1d9; /* Gris claro del nodo. */
    white-space: pre-line; /* Respeta los saltos de línea del editor. */
    overflow-wrap: anywhere; /* Una palabra larga no desborda. */
}

/* --- Botón y link de texto. --- */
.ReportChannelBanner-actions {
    display: flex; /* En fila. */
    flex-wrap: wrap; /* Bajan si no caben. */
    align-items: center; /* Centrados. */
    gap: 12px 18px; /* Separación del nodo. */
    align-self: stretch; /* Ancho de la columna: el tope del botón se calcula contra ella. */
    max-width: 100%; /* No desborda. */
    padding-top: 8px; /* Relleno del nodo. */
}

/* Los cinco estados le ganan al a:hover de Bootstrap: nunca subrayado. */
.ReportChannelBanner-button,
.ReportChannelBanner-button:link,
.ReportChannelBanner-button:visited,
.ReportChannelBanner-button:hover,
.ReportChannelBanner-button:focus,
.ReportChannelBanner-button:active {
    color: #ffffff; /* Blanco. */
    text-decoration: none; /* Nunca subrayado. */
}

.ReportChannelBanner-button {
    display: inline-flex; /* Texto y flecha en línea. */
    align-items: center; /* Centrados. */
    gap: 6px; /* Separación estándar entre leyenda y flecha. */
    margin-inline-end: 4px; /* Reserva los 4px que crece en hover: el link de al lado no se mueve. */
    max-width: calc(100% - 4px); /* Nunca más que la fila, contando la reserva. */
    min-width: 0; /* Puede achicarse por debajo de su leyenda. */
    padding: 15px 26px; /* Relleno del nodo. */
    border-radius: 6px; /* Esquinas del nodo. */
    background-color: #429cde; /* Azul del nodo. */
    font-size: 15px; /* Tamaño del nodo. */
    font-weight: 600; /* Semibold del nodo. */
    line-height: 1.25; /* Interlineado si baja de renglón. */
    transition: background-color 0.2s ease, gap 0.2s ease-in-out, margin-inline-end 0.2s ease-in-out, max-width 0.2s ease-in-out; /* Fondo, flecha, reserva y tope. */
}

    .ReportChannelBanner-button:hover,
    .ReportChannelBanner-button:focus {
        background-color: #3a8bc4; /* Un punto más oscuro, como el resto del sitio. */
    }

    /* La flecha se corre al abrir la separación; el texto no se mueve. */
    .ReportChannelBanner-button:hover,
    .ReportChannelBanner-button:focus-visible {
        gap: 10px; /* Separación estándar en hover y foco. */
        margin-inline-end: 0; /* Cede la reserva: el ancho total no cambia. */
        max-width: 100%; /* El tope crece los 4px de la flecha. */
    }

/* Leyenda: dos renglones como máximo, con puntos suspensivos. */
.ReportChannelBanner-button-text,
.ReportChannelBanner-link-text {
    display: -webkit-box; /* Necesario para el recorte por renglones. */
    -webkit-box-orient: vertical; /* Ídem. */
    -webkit-line-clamp: 2; /* Tope de renglones. */
    line-clamp: 2; /* Ídem, versión estándar. */
    min-width: 0; /* Cede ancho a la flecha. */
    overflow: hidden; /* Recorta lo que no entra. */
    overflow-wrap: anywhere; /* Una palabra larga parte en vez de desbordar. */
}

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

/* Link de texto celeste (suele ser una URL). Los cinco estados le ganan a Bootstrap. */
.ReportChannelBanner-link,
.ReportChannelBanner-link:link,
.ReportChannelBanner-link:visited,
.ReportChannelBanner-link:hover,
.ReportChannelBanner-link:focus,
.ReportChannelBanner-link:active {
    color: #73acff; /* Celeste del nodo. */
    text-decoration: none; /* Nunca subrayado. */
}

.ReportChannelBanner-link {
    min-width: 0; /* Puede achicarse por debajo de su leyenda. */
    max-width: 100%; /* No desborda. */
    font-size: 14px; /* Tamaño del nodo. */
    font-weight: 500; /* Medium del nodo. */
}

    .ReportChannelBanner-link:hover,
    .ReportChannelBanner-link:focus {
        color: #ffffff; /* Se aclara al pasar. */
    }

.ReportChannelBanner-button:focus-visible,
.ReportChannelBanner-link:focus-visible {
    outline: 2px solid #ffffff; /* Anillo de foco visible sobre el fondo oscuro. */
    outline-offset: 3px;
}

/* --- Tablet: hasta 1024px (nodo 4376:85342). --- */
@media (max-width: 1024px) {

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

    .ReportChannelBanner-description {
        max-width: 100%; /* Todo el ancho en tablet. */
    }
}

/* --- Mobile: hasta 767px. Botón y link apilados; el botón a todo el ancho. --- */
@media (max-width: 767px) {

    .ReportChannelBanner-content {
        gap: 14px; /* Algo más junto. */
        padding: 48px 20px; /* Relleno de mobile. */
    }

    .ReportChannelBanner-title {
        font-size: 22px; /* Tamaño de mobile. */
    }

    .ReportChannelBanner-description {
        font-size: 15px; /* Tamaño de mobile. */
    }

    .ReportChannelBanner-actions {
        flex-direction: column; /* Apilados. */
        align-items: stretch; /* El botón a todo el ancho. */
        width: 100%; /* Ídem. */
    }

    .ReportChannelBanner-button {
        justify-content: center; /* Texto centrado en el botón ancho. */
        margin-inline-end: 0; /* Botón ancho: la reserva pasa a la flecha. */
        max-width: 100%; /* Todo el ancho. */
        text-align: center; /* Ídem si baja de renglón. */
    }

    /* Centrado: la flecha guarda los 4px y los cede en hover; el texto no se corre. */
    .ReportChannelBanner-arrow {
        margin-inline-end: 4px; /* Reserva dentro del botón. */
        transition: margin-inline-end 0.2s ease-in-out; /* Al ritmo del gap. */
    }

    .ReportChannelBanner-button:hover,
    .ReportChannelBanner-button:focus-visible {
        margin-inline-end: 0; /* El botón no cambia de ancho. */
        max-width: 100%; /* Ídem. */
    }

    .ReportChannelBanner-button:hover .ReportChannelBanner-arrow,
    .ReportChannelBanner-button:focus-visible .ReportChannelBanner-arrow {
        margin-inline-end: 0; /* Cede la reserva a la separación. */
    }

    .ReportChannelBanner-link {
        text-align: center; /* Centrado bajo el botón. */
    }
}

/* --- Movimiento reducido. --- */
@media (prefers-reduced-motion: reduce) {

    .ReportChannelBanner-button,
    .ReportChannelBanner-arrow {
        transition: none; /* Sin animaciones. */
    }

    /* La flecha no se corre: separación, reserva y tope de reposo. */
    .ReportChannelBanner-button:hover,
    .ReportChannelBanner-button:focus-visible {
        gap: 6px; /* Separación de reposo. */
        margin-inline-end: 4px; /* La reserva se queda. */
        max-width: calc(100% - 4px); /* El tope no crece. */
    }
}

/* Movimiento reducido en mobile: la reserva sigue en la flecha. */
@media (prefers-reduced-motion: reduce) and (max-width: 767px) {

    .ReportChannelBanner-button:hover,
    .ReportChannelBanner-button:focus-visible {
        margin-inline-end: 0; /* Botón ancho. */
        max-width: 100%; /* Ídem. */
    }

    .ReportChannelBanner-button:hover .ReportChannelBanner-arrow,
    .ReportChannelBanner-button:focus-visible .ReportChannelBanner-arrow {
        margin-inline-end: 4px; /* La reserva se queda. */
    }
}