/* TrendStatsSection.css — Banda de cifras destacadas. Nodos 2611:25325 (PC), 2611:30999 (tablet)
   y 2611:31207 (mobile). Tipografía: site.css. */

/* --- Sección: fondo blanco a sangre completa y contenido acotado. --- */
.TrendStatsSection {
    width: 100%; /* Ocupa el ancho de la ventana. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    background-color: #ffffff; /* Fondo de la sección, del nodo real. */
    padding-block: clamp(40px, 5.33vw, 64px) clamp(32px, 4.66vw, 56px); /* 64px arriba y 56px abajo del nodo, tocados al piso del rango de escritorio. */
    /* EL RELLENO LATERAL VA EN LA SECCIÓN, por fuera del techo de 1600px, y no adentro del
       contenido: la línea de la que arranca el encabezado tiene que ser el BORDE del techo, para que
       apoye sobre la misma vertical que las secciones vecinas. El desfase SOLO se ve arriba de
       1696px de ventana. ES FIJO Y NO FLUIDO: es la grilla del sitio y tiene que dar el mismo número
       que las vecinas en todo el rango. Tablet y mobile lo pisan más abajo. */
    padding-inline: 48px; /* Relleno lateral de escritorio, igual que las secciones vecinas. */
}

/* Contenido centrado dentro del techo del sitio. */
.TrendStatsSection-container {
    width: 100%; /* Ocupa el ancho disponible. */
    max-width: var(--container-max-width, 1600px); /* Techo del contenido. */
    margin: 0 auto; /* Centrado. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
}

/* --- Encabezado: etiqueta, título y bajada. --- */
.TrendStatsSection-header {
    display: flex; /* Apila las tres piezas. */
    flex-direction: column; /* En columna. */
    gap: 9px; /* Separación del nodo. */
    margin-bottom: clamp(20px, 2.33vw, 28px); /* Separación con las cifras, del nodo. */
}

/* Etiqueta sobre el título. */
.TrendStatsSection-eyebrow {
    display: flex; /* Cuadrado y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 10px; /* Separación del nodo. */
    margin: 0; /* El 0 es obligatorio: es un <p> usado como ítem de flex. */
    font-size: 14px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1.35; /* Interlineado del nodo. */
    letter-spacing: 0.5px; /* Apertura del nodo. */
    text-transform: uppercase; /* Las mayúsculas las pone el CSS, no el editor. */
    color: #243746; /* Azul oscuro del nodo (variable color/eyebrow del Figma). */
}

/* Cuadrado que precede a la etiqueta. */
.TrendStatsSection-eyebrow-dot {
    flex: 0 0 auto; /* No se comprime. */
    width: 7px; /* Lado del nodo. No escala: se volvería invisible. */
    height: 7px; /* Cuadrado. */
    background-color: #243746; /* Acompaña al color de la etiqueta. */
}

/* Título de la sección. */
.TrendStatsSection-title {
    margin: 0; /* La separación la da el gap del encabezado. */
    font-size: clamp(22px, 3vw, 36px); /* Toca los 36px del nodo al piso del rango de escritorio. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1.2; /* Interlineado de titular. */
    color: #0f0f12; /* Casi negro del diseño. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* Bajada de una línea. No está dibujada en el frame de escritorio, pero es contenido real del
   widget y se muestra en los tres rangos por decisión del usuario. */
.TrendStatsSection-subtitle {
    margin: 0; /* La separación la da el gap del encabezado. */
    font-size: 13px; /* Tamaño del nodo de tablet, que es donde está dibujada. */
    font-weight: 400; /* Regular del diseño. */
    line-height: 1.4; /* Interlineado de lectura. */
    color: #66666b; /* Gris del nodo. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* --- Bajada a la derecha del título ("Subtitle position: Beside"), solo PC. El encabezado usa las
   MISMAS cuatro columnas que las cifras: eyebrow y título ocupan las tres primeras y la bajada la
   cuarta, así queda alineada con la cuarta cifra. En tablet y mobile vuelve debajo del título. --- */
@media (min-width: 1025px) {

    .TrendStatsSection--subtitle-beside .TrendStatsSection-header {
        display: grid; /* Dos zonas. */
        grid-template-columns: repeat(4, minmax(0, 1fr)); /* Las columnas de las cifras. */
        column-gap: 24px; /* El de las cifras. */
        row-gap: 9px; /* El gap vertical del encabezado. */
        align-items: start; /* Cada pieza arriba. */
    }

        .TrendStatsSection--subtitle-beside .TrendStatsSection-header > * {
            grid-column: 1 / 4; /* Eyebrow y título: tres columnas. */
        }

        .TrendStatsSection--subtitle-beside .TrendStatsSection-header > .TrendStatsSection-subtitle {
            grid-column: 4; /* La columna de la cuarta cifra. */
            grid-row: 1; /* El renglón del título cuando no hay eyebrow. */
            align-self: center; /* Centrada con el título, a su misma altura. */
            line-height: 1.6; /* Párrafo de varios renglones. */
            color: rgba(15, 15, 18, 0.45); /* Más claro que debajo del título, como el diseño. */
        }

        /* Con eyebrow, el título baja al segundo renglón y la bajada lo acompaña. */
        .TrendStatsSection--subtitle-beside .TrendStatsSection-header:has(> .TrendStatsSection-eyebrow) > .TrendStatsSection-subtitle {
            grid-row: 2; /* El renglón del título. */
        }
}

/* --- Cuadrícula de cifras. CUATRO COLUMNAS, que es lo que dibuja el diseño; LA CANTIDAD DE CIFRAS
   NO TIENE TOPE, así que a partir de la quinta se envuelven a una fila nueva en vez de comprimir las
   columnas. --- */
.TrendStatsSection-grid {
    display: grid; /* Cuadrícula. */
    grid-template-columns: repeat(4, 1fr); /* Cuatro columnas iguales. */
    column-gap: 24px; /* Separación entre columnas, del nodo. */
    row-gap: 28px; /* Separación entre filas, para cuando el editor carga más de cuatro. */
}

/* Una cifra con su leyenda. */
.TrendStatsSection-stat {
    display: flex; /* Apila cifra y leyenda. */
    flex-direction: column; /* En columna. */
    gap: 6px; /* Separación del nodo. */
    min-width: 0; /* Sin esto una palabra larga estira la columna y desarma la cuadrícula. */
}

/* Cifra grande. */
.TrendStatsSection-stat-value {
    margin: 0; /* El 0 es obligatorio: es un <p> usado como ítem de flex. */
    font-size: clamp(24px, 2.33vw, 28px); /* Toca los 28px del nodo al piso del rango de escritorio. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1.15; /* Interlineado del nodo. */
    letter-spacing: 0.5px; /* Apertura del nodo. */
    text-transform: uppercase; /* Las cifras con letra ("29B") se leen parejas. */
    color: #0f0f12; /* Casi negro del diseño. */
}

/* Leyenda que explica la cifra. */
.TrendStatsSection-stat-caption {
    margin: 0; /* El 0 es obligatorio: es un <p> usado como ítem de flex. */
    font-size: 13px; /* Tamaño del nodo. */
    font-weight: 600; /* Semibold del diseño. */
    line-height: 1.3; /* Interlineado del nodo. */
    color: rgba(15, 15, 18, 0.5); /* Gris del nodo, sobre el fondo blanco. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* --- Tablet: hasta 1024px. Cubre el iPad Pro en vertical. Las cifras pasan a dos columnas. --- */
@media (max-width: 1024px) {

    .TrendStatsSection {
        padding-block: clamp(36px, 6.25vw, 56px) clamp(30px, 5.21vw, 48px); /* Tocan los 48px y 40px del nodo de tablet a 768px. */
        padding-inline: 32px; /* Relleno lateral del nodo de tablet. */
    }

    .TrendStatsSection-header {
        gap: 8px; /* Separación del nodo de tablet. */
        margin-bottom: 24px; /* Separación con las cifras, del nodo de tablet. */
    }

    .TrendStatsSection-eyebrow {
        gap: 8px; /* Separación del nodo de tablet. */
        font-size: 12px; /* Tamaño del nodo de tablet. */
    }

    .TrendStatsSection-title {
        font-size: clamp(22px, 3.65vw, 28px); /* Toca los 28px del nodo de tablet a 768px. */
    }

    .TrendStatsSection-grid {
        grid-template-columns: repeat(2, 1fr); /* Dos columnas, como el diseño de tablet. */
        row-gap: 28px; /* Separación entre filas, del nodo de tablet. */
    }

    .TrendStatsSection-stat {
        gap: 4px; /* Separación del nodo de tablet. */
    }

    .TrendStatsSection-stat-value {
        font-size: clamp(22px, 3.65vw, 28px); /* Toca los 28px del nodo de tablet a 768px. */
    }
}

/* --- Mobile: hasta 500px. Va después de tablet para pisar solo lo que cambia. --- */
@media (max-width: 500px) {

    .TrendStatsSection {
        padding-block: clamp(28px, 10.67vw, 40px) clamp(22px, 8.53vw, 32px); /* Tocan los 40px y 32px del nodo de mobile a 375px. */
        padding-inline: 20px; /* Relleno lateral del nodo de mobile. */
    }

    .TrendStatsSection-header {
        margin-bottom: 20px; /* Separación con las cifras, del nodo de mobile. */
    }

    .TrendStatsSection-title {
        font-size: clamp(18px, 5.87vw, 22px); /* Toca los 22px del nodo de mobile a 375px. */
    }

    .TrendStatsSection-grid {
        column-gap: 16px; /* Separación entre columnas, del nodo de mobile. */
        row-gap: 20px; /* Separación entre filas, del nodo de mobile. */
    }

    .TrendStatsSection-stat-value {
        font-size: clamp(20px, 6.4vw, 24px); /* Toca los 24px del nodo de mobile a 375px. */
    }

    .TrendStatsSection-stat-caption {
        font-size: 12px; /* 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. --- */
.TrendStatsSection-eyebrow,
.TrendStatsSection-title,
.TrendStatsSection-subtitle,
.TrendStatsSection-stat-value,
.TrendStatsSection-stat-caption {
    overflow-wrap: anywhere; /* Una palabra larga se corta en vez de desbordar. */
}