/* TrendPosterGrid.css — "Tendencias". Nodos 820:36624 (PC), 820:38240 (tablet), 820:38116 (mobile).
   Tipografía: site.css. Los tres rangos pintan el MISMO DOM: escritorio es una cuadrícula que
   envuelve, tablet un carrusel de dos con flechas, y mobile una columna apilada.
   DOS DIFERENCIAS FÁCILES DE PASAR POR ALTO: el fondo es blanco en PC y #f7f7f9 en los otros dos, y
   la bajada (más el cuadrado de la etiqueta) SOLO existe en el nodo de PC.
   Hay un @media a 620px que NO es del estándar: es una guarda medida, documentada ahí. */

/* --- Sección: fondo blanco a sangre completa con el contenido acotado. --- */
.TrendPosterGrid {
    width: 100%; /* Ocupa el ancho de la ventana. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    background-color: #ffffff; /* Blanco en PC. Tablet y mobile lo pisan más abajo. */
    padding: clamp(30px, 4.375vw, 56px) 0; /* 56px del nodo de PC. */
}

/* Contenido centrado dentro del techo del sitio. */
.TrendPosterGrid-container {
    width: 100%; /* Ocupa el ancho disponible. */
    max-width: var(--container-max-width, 1600px); /* Techo del contenido. */
    margin: 0 auto; /* Centrado. */
    padding: 0 clamp(20px, 3.75vw, 48px); /* 48px laterales del nodo de PC. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
}

/* --- Encabezado: etiqueta con cuadrado, título y bajada. --- */
.TrendPosterGrid-header {
    margin-bottom: clamp(16px, 1.875vw, 24px); /* 24px hasta la cuadrícula, según el nodo. */
}

/* Etiqueta sobre el título. */
.TrendPosterGrid-eyebrow {
    display: flex; /* Cuadrado y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 10px; /* Separación entre los dos. */
    margin: 0 0 10px; /* Solo separación con el título. */
    font-size: 11px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold del diseño. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: #243746; /* Azul marino del nodo, no naranja. */
}

/* Cuadrado exacto y no un punto: el nodo es un frame de 7x7 sin radio. SOLO EXISTE EN PC. */
.TrendPosterGrid-eyebrow-dot {
    width: 0.4375rem; /* 7px: cuadrado decorativo de ancho fijo. */
    height: 7px; /* Cuadrado. */
    flex: none; /* No se comprime. */
    background-color: #243746; /* Acompaña al color de la etiqueta. */
}

/* Título de la sección. */
.TrendPosterGrid-title {
    margin: 0; /* Quita el margen propio del título. */
    font-size: clamp(28px, 3vw, 36px); /* Toca los 36px del nodo a partir de 1200px. */
    font-weight: 700; /* Bold del diseño, no Black. */
    line-height: 1.2; /* Interlineado de titular. */
    color: #0f0f12; /* Casi negro del diseño. */
}

/* Bajada del título. */
.TrendPosterGrid-description {
    margin: 10px 0 0; /* Separación con el título. */
    max-width: 46.64%; /* 597/1280 del nodo, en porcentaje para aguantar en monitores anchos. */
    font-size: 16px; /* Tamaño del nodo. */
    line-height: 1.6; /* Interlineado de lectura. */
    color: rgba(15, 15, 18, 0.6); /* Gris de cuerpo. */
}

/* --- Flechas del carrusel. SOLO SE VEN EN TABLET: acá quedan fuera del flujo, así que en
   escritorio y mobile no ocupan lugar ni entran en el orden de tabulación. --- */
.TrendPosterGrid-controls {
    display: none; /* Las enciende el bloque de tablet. */
}

/* Una flecha de navegación. */
.TrendPosterGrid-arrow {
    width: 36px; /* Diámetro del nodo. */
    height: 36px; /* Cuadrado, para que el radio dé un círculo. */
    flex: none; /* No se comprime. */
    display: flex; /* Para centrar el signo. */
    align-items: center; /* Centrado vertical. */
    justify-content: center; /* Centrado horizontal. */
    padding: 0; /* Sin relleno del button. */
    border: 1px solid rgba(15, 15, 18, 0.16); /* Contorno tenue. */
    border-radius: 18px; /* La mitad del lado: círculo exacto, como el nodo. */
    background-color: #ffffff; /* Fondo blanco. */
    font-size: 15px; /* Tamaño del signo. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1; /* Sin interlineado que descentre el glifo. */
    color: rgba(15, 15, 18, 0.75); /* Gris del signo. */
    cursor: pointer; /* Indica que es accionable. */
    transition: border-color 200ms ease, color 200ms ease; /* Suaviza el hover. */
}

    /* Flecha disponible con el puntero encima o con el foco. */
    .TrendPosterGrid-arrow:hover:not(:disabled),
    .TrendPosterGrid-arrow:focus-visible:not(:disabled) {
        border-color: #ff5a1f; /* Contorno naranja. */
        color: #ff5a1f; /* Signo naranja. */
    }

    /* Deshabilitada es la que llegó al extremo. Se deja visible y atenuada: si desapareciera, la
       fila de controles cambiaría de ancho y la otra flecha se correría bajo el dedo. */
    .TrendPosterGrid-arrow:disabled {
        opacity: 0.35; /* Atenuada. */
        cursor: default; /* Ya no es accionable. */
    }

/* --- Cuadrícula: TRES columnas que envuelven. ENVUELVE A PROPÓSITO, y es lo que sostiene el "sin
   tope de tarjetas": el diseño muestra tres porque hoy hay tres tendencias. --- */
.TrendPosterGrid-viewport {
    width: 100%; /* NO recorta acá: en tablet se convierte en la ventana del carrusel. */
}

/* Carril de las tarjetas. */
.TrendPosterGrid-track {
    /* Va como variable porque el ancho de cada tarjeta se calcula restándola y el script la lee
       para saber cuánto avanzar en cada movimiento. */
    --TrendPosterGrid-gap: clamp(12px, 1.5625vw, 20px);
    display: flex; /* Tarjetas en línea. */
    flex-wrap: wrap; /* Bajan de renglón cuando no entran. */
    gap: var(--TrendPosterGrid-gap); /* Separación entre tarjetas. */
}

/* --- La tarjeta, igual en los tres rangos: foto, degradado, filete, escuadra y caja de texto. --- */
.TrendPosterGrid-poster {
    position: relative; /* Origen de las capas decorativas. */
    display: flex; /* Para anclar la caja de texto. */
    flex-direction: column; /* En columna. */
    justify-content: flex-end; /* LA CAJA VA EN EL FLUJO y se ancla abajo: una caja posicionada se
                                  vuelve el bloque contenedor de cualquier ::after que se le agregue. */
    isolation: isolate; /* Los z-index negativos quedan detrás del texto y delante del respaldo. */
    flex: 0 0 calc((100% - (var(--TrendPosterGrid-gap) * 2)) / 3); /* Tres por fila, como el nodo. */
    aspect-ratio: 381 / 330; /* Proporción del nodo de PC, en vez de un alto fijo. */
    /* EL min-height NO ES DECORATIVO: un elemento flexible arranca en min-height:auto, que le gana
       al aspect-ratio. Sin esto, una foto pesada estira la tarjeta y el texto se va del recorte. */
    min-height: 0;
    overflow: hidden; /* Recorta las capas al borde de la tarjeta. */
    background-color: #1a1a1f; /* Respaldo mientras carga la foto o si su URL no resuelve. */
    --TrendPosterGrid-hover-duration: 350ms; /* Duración del hover. */
    --TrendPosterGrid-hover-easing: cubic-bezier(0, 0, 0.58, 1); /* Curva del hover. */
    --TrendPosterGrid-corner: clamp(12px, 1.1vw, 14px); /* Grosor de las esquinas: no escala. */
}

/* --accent pinta la escuadra Y el velo de la caja en reposo; --accent-strong es el MISMO color con
   más opacidad y lo usa SOLO la caja en el hover -- las escuadras se quedan en el de reposo, según
   los nodos. Que el hover suba la opacidad es DECISIÓN DEL USUARIO (2026-09-09) Y LE GANA AL
   PROTOTIPO, que en este widget no cambia ningún color entre Estado=Default y Estado=Hover.

   LAS DOS OPACIDADES LAS ELIGE EL EDITOR en el diseñador del widget (50 % y 80 % por omisión, que
   son los valores del diseño). Ya vienen aplicadas en los rgba() que emite la vista.

   LOS COLORES YA NO ESTÁN ACÁ. Los elige el editor del módulo "colorpalettes" del backoffice y la
   vista los emite como --accent y --accent-strong en el style de cada tarjeta, ya combinados con la
   opacidad que se eligió en el diseñador. Lo único que queda en esta hoja es el valor de respaldo de
   cada var(), para el caso de que la tarjeta llegue sin style.

   ATENCIÓN AL AGREGAR COLORES AL MÓDULO: la paleta del CMS NO TIENE los cuatro colores de este
   diseño. Medido el 2026-09-10 contra los 22 registros del módulo, el más cercano a cada uno queda a
   ΔE2000 de 5,5 (naranja y rojo), 7,7 (gris azulado) y 16,3 (verde petróleo, o sea otro color). Para
   que la sección se vea igual que antes hay que dar de alta en el módulo los cuatro hexadecimales
   originales: #454F63, #0E5D60, #FF5A1F y #ED1C24. */

/* Foto de fondo de la tarjeta. */
.TrendPosterGrid-poster-image {
    position: absolute; /* Detrás de las capas. */
    inset: 0; /* Cubre la tarjeta entera. */
    width: 100%; /* Ancho completo. */
    height: 100%; /* Alto completo. */
    object-fit: cover; /* Recorta en vez de deformar. */
    z-index: -1; /* Detrás del texto, delante del color de respaldo. */
    pointer-events: none; /* No intercepta clics. */
    transform: scale(1); /* Punto de partida del zoom. */
    transition: transform var(--TrendPosterGrid-hover-duration) var(--TrendPosterGrid-hover-easing); /* Suaviza el zoom. */
}

/* Zoom y color vivo al pasar el puntero. EL DEGRADADO NO ENTRA ACÁ: el prototipo lo deja igual en
   las dos variantes. Acotado a punteros finos: en táctil el hover emulado queda pegado después del
   toque. */
@media (hover: hover) and (pointer: fine) {
    /* La foto crece. */
    .TrendPosterGrid-poster:hover .TrendPosterGrid-poster-image,
    .TrendPosterGrid-poster:focus-within .TrendPosterGrid-poster-image {
        transform: scale(1.08); /* Crece un 8 %. */
    }

    /* La caja de texto pasa al color vivo. Es el MISMO tono: solo sube del 50 al 80 % de opacidad,
       así que no hay un segundo color que mantener. */
    .TrendPosterGrid-poster:hover .TrendPosterGrid-poster-caption,
    .TrendPosterGrid-poster:focus-within .TrendPosterGrid-poster-caption {
        background-color: var(--accent-strong, rgba(69, 79, 99, 0.8)); /* Velo reforzado. */
    }
}

/* Degradado de legibilidad, con las tres opacidades y la parada al 44 % de los nodos. ES EL MISMO
   EN REPOSO Y EN HOVER: el prototipo declara 0.10/0.44/0.84 en las dos variantes, así que acá no
   hay ningún cruce de degradados que animar.

   VA position: absolute Y NO relative. Es el bug que hacía que NINGÚN degradado se viera (corregido
   el 2026-09-09): la capa es un span en el flujo de un flex con justify-content:flex-end, así que
   en relative el inset:0 la anclaba pero la dejaba en 0 px DE ALTO -- y el degradado se pintaba
   sobre una superficie inexistente. Se medía veloAlto === 0 contra un póster de 370 px. */
.TrendPosterGrid-poster-veil {
    position: absolute; /* Cubre la tarjeta: en relative quedaba en 0 px de alto. */
    inset: 0; /* Contra los cuatro bordes del póster. */
    background-image: linear-gradient(180deg, rgba(15, 15, 18, 0.1) 0%, rgba(15, 15, 18, 0.44) 44%, rgba(15, 15, 18, 0.84) 100%); /* Degradado del nodo. */
    z-index: -1; /* Sobre la foto, debajo del texto. */
    pointer-events: none; /* No intercepta clics. */
}

/* Filete superior del nodo. */
.TrendPosterGrid-poster-fillet {
    position: absolute; /* Sobre las capas. */
    top: 0; /* Al borde de arriba. */
    left: 0; /* De borde a borde. */
    width: 100%; /* Ancho completo. */
    height: 1px; /* Línea del nodo. */
    background-color: rgba(255, 255, 255, 0.35); /* Blanco tenue. */
    z-index: -1; /* Sobre la foto, debajo del texto. */
    pointer-events: none; /* No intercepta clics. */
}

/* Escuadra del ángulo inferior derecho. Se ancla a ese ángulo —nunca con el top y el left literales
   del nodo— para que siga cerrada en cualquier ancho. VA POR ENCIMA DE LA CAJA DE TEXTO. */
.TrendPosterGrid-poster-corner {
    position: absolute; /* Anclada a la esquina. */
    right: 0; /* Al borde derecho. */
    bottom: 0; /* Al borde inferior. */
    background-color: var(--accent, rgba(69, 79, 99, 0.5)); /* Color de la paleta. */
    z-index: 1; /* Sobre la caja de texto. */
    pointer-events: none; /* No intercepta clics. */
}

/* Barra horizontal de la escuadra. */
.TrendPosterGrid-poster-corner--bottom {
    width: 34%; /* 128/381 del ancho de la tarjeta. */
    height: var(--TrendPosterGrid-corner); /* Grosor común. */
}

/* Barra vertical de la escuadra. */
.TrendPosterGrid-poster-corner--side {
    width: var(--TrendPosterGrid-corner); /* Grosor común. */
    height: 30%; /* 99/330 del alto, constante en los tres nodos. */
}

/* --- Caja de texto. SE ANCLA AL BORDE INFERIOR Y NO AL top DEL NODO: ahí el top declarado es
   exactamente el alto de la tarjeta menos el del contenido, y calcado a porcentaje se desalinearía
   en cuanto el texto real ocupe distinto que el del mockup. --- */
.TrendPosterGrid-poster-caption {
    width: 88%; /* 335/381 del ancho de la tarjeta en el nodo de PC. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    display: flex; /* Apila los tres textos. */
    flex-direction: column; /* En columna. */
    gap: 2px; /* Separación del nodo. */
    padding: 12px 16px 14px; /* Rellenos del nodo. */
    background-color: var(--accent, rgba(69, 79, 99, 0.5)); /* Velo del color de la paleta. */
    transition: background-color var(--TrendPosterGrid-hover-duration) var(--TrendPosterGrid-hover-easing); /* Arranca y termina con el zoom. */
}

/* Título de la tendencia. */
.TrendPosterGrid-poster-title {
    margin: 0; /* Quita el margen propio del título. */
    font-size: 24px; /* Tamaño del nodo. */
    font-weight: 600; /* Semibold del diseño, no Bold. */
    line-height: 1.25; /* Interlineado de titular. */
    color: #ffffff; /* Blanco sobre la foto. */
}

/* Descripción de la tendencia. */
.TrendPosterGrid-poster-description {
    margin: 0; /* Quita el margen propio del párrafo. */
    font-size: 16px; /* Tamaño del nodo. */
    line-height: 1.6; /* Interlineado de lectura. */
    color: rgba(255, 255, 255, 0.9); /* Blanco apenas atenuado. */
}

/* Línea de pie de la caja. AL REVÉS DE PillarPosterGrid: acá el hover ACHICA la caja ocultando esta
   línea. Como la caja se ancla abajo, al perder alto baja en vez de desbordar. */
.TrendPosterGrid-poster-tagline {
    margin: 0; /* Quita el margen propio del párrafo. */
    font-size: 13px; /* Tamaño del nodo. */
    font-weight: 400; /* Regular del diseño. */
    line-height: 1.3; /* Interlineado ajustado. */
    letter-spacing: 0.2px; /* Apertura del nodo. */
    color: rgba(255, 255, 255, 0.7); /* Blanco atenuado. */
    max-height: 20px; /* Alto natural de una línea a 13px/1.3, con margen de sobra. */
    opacity: 1; /* Visible en reposo. */
    overflow: hidden; /* Recorta al achicarse. */
    transition: max-height var(--TrendPosterGrid-hover-duration) var(--TrendPosterGrid-hover-easing),
                opacity var(--TrendPosterGrid-hover-duration) var(--TrendPosterGrid-hover-easing); /* Suaviza el cierre. */
}

/* Con el puntero encima, la línea de pie se oculta. */
@media (hover: hover) and (pointer: fine) {
    .TrendPosterGrid-poster:hover .TrendPosterGrid-poster-tagline,
    .TrendPosterGrid-poster:focus-within .TrendPosterGrid-poster-tagline {
        max-height: 0; /* Sin alto. */
        opacity: 0; /* Invisible. */
    }
}

/* --- TABLET: hasta 1024px (nodo 820:38240). El diseño pasa a ser un CARRUSEL de dos tarjetas con
   flechas: el carril deja de envolver, el viewport recorta y el desplazamiento lo aplica el JS.
   1024px y no 768px: un iPad real mide entre 810 y 834px en vertical. --- */
@media (max-width: 1024px) {
    .TrendPosterGrid {
        background-color: #f7f7f9; /* El fondo deja de ser blanco en este rango. */
        padding: clamp(30px, 5.99vw, 46px) 0; /* 46px del nodo de tablet. */
    }

    .TrendPosterGrid-container {
        padding: 0 clamp(20px, 4.17vw, 32px); /* 32px laterales del nodo de tablet. */
    }

    .TrendPosterGrid-header {
        margin-bottom: 18px; /* Separación del nodo hasta la fila de flechas. */
    }

    .TrendPosterGrid-eyebrow {
        margin-bottom: 18px; /* Separación con el título. */
        font-size: 10.5px; /* Tamaño del nodo de tablet. */
    }

    .TrendPosterGrid-eyebrow-dot {
        display: none; /* El cuadrado NO existe en el nodo de tablet: la etiqueta va sola. */
    }

    .TrendPosterGrid-title {
        font-size: clamp(26px, 4.43vw, 34px); /* 34px del nodo, en su propia mesa. */
    }

    /* LA BAJADA NO EXISTE EN TABLET NI EN MOBILE: el nodo pasa del título directo a las tarjetas. */
    .TrendPosterGrid-description {
        display: none; /* Fuera aunque el editor la haya cargado. */
    }

    /* Las flechas aparecen SOLO acá. Son dos condiciones distintas y las dos tienen que cumplirse:
       el rango lo decide el CSS, y si hay algo que recorrer lo decide el script después de medir. */
    .TrendPosterGrid-controls {
        display: flex; /* Visibles en este rango. */
        justify-content: flex-end; /* Contra el borde derecho. */
        align-items: center; /* Centradas entre sí. */
        gap: 8px; /* Separación entre las dos. */
        margin-bottom: 18px; /* Separación con el carril. */
    }

        /* El script quita el atributo cuando hay desbordamiento que recorrer. */
        .TrendPosterGrid-controls[hidden] {
            display: none; /* Ocultas mientras no haga falta. */
        }

    .TrendPosterGrid-viewport {
        overflow: hidden; /* La ventana del carrusel: recorta lo que queda fuera. */
    }

    .TrendPosterGrid-track {
        --TrendPosterGrid-gap: 16px; /* Separación del nodo de tablet. */
        --TrendPosterGrid-offset: 0px; /* Lo escribe el script; nace en cero por si el JS no corre. */
        flex-wrap: nowrap; /* El carril ya no envuelve. */
        transform: translateX(calc(var(--TrendPosterGrid-offset) * -1)); /* Desplazamiento actual. */
        transition: transform 400ms cubic-bezier(0.22, 0.61, 0.36, 1); /* Suaviza el paso. */
        will-change: transform; /* El carril se mueve entero. */
        /* EL DEDO NO DESPLAZA NADA POR SU CUENTA: pan-y le deja al navegador solo el eje vertical, o
           sea el desplazamiento de la página, y le saca el horizontal. El gesto lo lee el script. */
        touch-action: pan-y;
    }

        /* Mientras el dedo está apoyado el carril tiene que seguirlo sin interpolar: con los 400ms
           puestos, el carril va atrás del dedo. Lo pone y lo saca el script. */
        .TrendPosterGrid-track.is-dragging {
            transition: none; /* Sin interpolación durante el arrastre. */
        }

    .TrendPosterGrid-poster {
        flex: 0 0 calc((100% - var(--TrendPosterGrid-gap)) / 2); /* Dos visibles a la vez. */
        aspect-ratio: 344 / 250; /* Proporción del nodo de tablet. */
    }

    .TrendPosterGrid-poster-caption {
        width: 87%; /* 300/344 del ancho de la tarjeta en el nodo de tablet. */
    }
}

/* --- GUARDA DEL BORDE ANGOSTO DEL RANGO DE TABLET — hasta 620px. NO ES UN RANGO NUEVO: es la misma
   vista de tablet con UNA tarjeta por pantalla, para teléfonos chicos ACOSTADOS.
   El motivo es medible: la caja de texto crece cuando la tarjeta se angosta mientras el alto baja
   con su proporción, y cerca de los 600px la caja queda más alta que su tarjeta. --- */
@media (max-width: 620px) {
    .TrendPosterGrid-poster {
        flex-basis: 100%; /* Una por pantalla; el resto sobresale, listo para recorrerse. */
    }
}

/* --- MOBILE: hasta 500px (nodo 820:38116). El carrusel desaparece: las tarjetas se apilan y las
   flechas se ocultan. Va después del bloque de tablet para pisar solo lo que cambia. --- */
@media (max-width: 500px) {
    .TrendPosterGrid {
        padding: 34px 0; /* Relleno vertical del nodo de mobile. */
    }

    .TrendPosterGrid-container {
        padding: 0 20px; /* Relleno lateral del nodo de mobile. */
    }

    .TrendPosterGrid-header {
        margin-bottom: 16px; /* Separación entre bloques en el nodo de mobile. */
    }

    .TrendPosterGrid-eyebrow {
        margin-bottom: 16px; /* Separación con el título. */
        font-size: 10px; /* Tamaño del nodo de mobile. */
    }

    .TrendPosterGrid-title {
        font-size: clamp(22px, 6.93vw, 26px); /* 26px del nodo, en su propia mesa. */
    }

    /* Sin carrusel no hay flechas. Se declara aparte del [hidden] del script porque acá la razón es
       el rango y no la medición: en mobile se recorre con el desplazamiento natural de la página. */
    .TrendPosterGrid-controls {
        display: none; /* Fuera en este rango. */
    }

    .TrendPosterGrid-viewport {
        overflow: visible; /* No hay nada que recortar en una columna. */
    }

    .TrendPosterGrid-track {
        --TrendPosterGrid-gap: 12px; /* Separación del nodo de mobile. */
        flex-direction: column; /* Una tarjeta por fila. */
        /* ATENCIÓN: EL CARRIL NO SE DESPLAZA EN MOBILE. Se anula el transform porque el script puede
           haber dejado un desplazamiento escrito antes de llegar a este rango. */
        transform: none; /* Sin desplazamiento. */
        transition: none; /* Sin animación de paso. */
        will-change: auto; /* Sin preparación de capa. */
    }

    .TrendPosterGrid-poster {
        flex: 0 0 auto; /* Una por fila. */
        width: 100%; /* A todo el ancho. */
        aspect-ratio: 335 / 215; /* Proporción del nodo de mobile. */
    }

    .TrendPosterGrid-poster-caption {
        width: 88%; /* 295/335 del ancho de la tarjeta en el nodo de mobile. */
    }
}

/* --- Movimiento reducido: el carril igual cambia de posición —las flechas siguen funcionando— pero
   salta en vez de desplazarse. --- */
@media (prefers-reduced-motion: reduce) {
    .TrendPosterGrid-track,
    .TrendPosterGrid-arrow,
    .TrendPosterGrid-poster-image,
    .TrendPosterGrid-poster-caption,
    .TrendPosterGrid-poster-tagline {
        transition: none; /* Sin interpolación. */
    }
}