/* PortalPosterGrid.css — Pósters de portales para profesionales. Nodos 820:37287 (PC),
   820:41752 (tablet), 820:41650 (mobile); movimiento del prototipo 139:27227. Tipografía: site.css.
   EL HOVER SON DOS COSAS: la caja de texto crece anclada abajo y aparece el llamado a la acción. La
   foto, el degradado, el filete y las esquinas no se mueven. */

/* --- Sección: fondo propio a sangre completa. --- */
.PortalPosterGrid {
    width: 100%; /* Ocupa el ancho de la ventana. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    background-color: #ffffff; /* Blanco, como el bg-white del nodo 1535:16817. */
    padding: clamp(30px, 4.375vw, 56px) 0; /* 56px del nodo de PC. */
}

/* Contenido centrado dentro del techo del sitio. */
.PortalPosterGrid-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. NO lleva etiqueta con cuadrado: el nodo arranca directo en el título. --- */
.PortalPosterGrid-header {
    margin-bottom: clamp(14px, 1.875vw, 24px); /* Separación con la rejilla. */
}

/* Título de la sección. */
.PortalPosterGrid-title {
    margin: 0; /* Quita el margen propio del título. */
    font-size: clamp(26px, 3.67vw, 44px); /* Toca los 44px del nodo al piso del rango de escritorio. */
    font-weight: 900; /* Black del diseño. */
    line-height: 1.1; /* Interlineado de titular. */
    letter-spacing: -0.025em; /* -1.1px sobre 44px, en em para que acompañe al clamp. */
    color: #0f0f12; /* Casi negro del diseño. */
}

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

/* --- Rejilla de pósters. --- */
.PortalPosterGrid-grid {
    display: flex; /* Pósters en línea. */
    flex-wrap: wrap; /* Bajan de renglón cuando no entran. */
    gap: 20px; /* Separación del nodo. */
}

/* --- Póster: foto de fondo, degradado, filete, escuadra de color y caja de texto abajo. --- */
.PortalPosterGrid-poster {
    --PortalPosterGrid-corner: clamp(12px, 1.1vw, 14px); /* Grosor de las esquinas: no escala, o quedaría un hilo. */
    position: relative; /* Bloque contenedor del ::after que estira el enlace. */
    flex: 1 1 clamp(260px, 45%, 582px); /* Dos por fila; una sola columna cuando no entran dos. */
    aspect-ratio: 582 / 230; /* Proporción del nodo: el póster no depende de su contenido. */
    display: flex; /* Para anclar la caja de texto. */
    flex-direction: column; /* En columna. */
    justify-content: flex-end; /* Ancla la caja de texto al borde inferior. */
    overflow: hidden; /* Recorta las capas y anula el min-height que ignoraría el aspect-ratio. */
    isolation: isolate; /* Las capas con z-index negativo no se hunden tras el fondo. */
    background-color: #0f0f12; /* Se ve solo mientras la foto carga. */
}

/* --accent es la escuadra y --accent-veil el velo de la caja de texto. Son el MISMO color con
   distinta opacidad, y el velo va como rgba completo para que la opacidad no arrastre al texto que
   lleva adentro. El hover NO los toca: solo crece la caja y aparece el llamado a la acción.

   LOS COLORES YA NO ESTÁN ACÁ. Los elige el editor del módulo "colorpalettes" del backoffice, por
   póster, y la vista los emite en el style de cada uno ya combinados con las dos opacidades que
   también se eligen en el diseñador (100 % y 25 % por omisión, que son los valores del nodo). Lo
   único que queda en esta hoja es el valor de respaldo de cada var(), para un póster que llegue sin
   style.

   ATENCIÓN AL AGREGAR COLORES AL MÓDULO: la paleta del CMS NO TIENE los dos colores de este diseño.
   Medido el 2026-09-10 contra los 26 registros del módulo, el más cercano a #5B6770 es "Gris
   azulado" #596E7A (ΔE 4,2) y el más cercano a #C9A227 es "Ámbar" #F5B540 (ΔE 13,7, o sea otro
   color). Para que la sección se vea igual que el nodo hay que dar de alta los dos hexadecimales
   originales: #5B6770 y #C9A227. */

/* Foto de fondo del póster. */
.PortalPosterGrid-poster-image {
    position: absolute; /* Detrás de las capas. */
    inset: 0; /* Cubre el póster entero. */
    width: 100%; /* Ancho completo. */
    height: 100%; /* Alto completo. */
    object-fit: cover; /* Recorta en vez de deformar. */
    display: block; /* Quita el espacio de línea base. */
    z-index: -2; /* Debajo del degradado y del filete. */
    transform: scale(1); /* Punto de partida del acercamiento. */
    transition: transform 0.35s ease-out; /* Más lenta que el resto: recorre más distancia. */
}

/* Degradado de legibilidad. Las tres paradas son las del nodo y NO cambian con el hover. */
.PortalPosterGrid-poster-veil {
    position: absolute; /* Sobre la foto. */
    inset: 0; /* Cubre el póster entero. */
    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. */
.PortalPosterGrid-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 color del portal, abajo a la derecha. VA POR ENCIMA DE LA CAJA DE TEXTO, como en
   el nodo. Va en porcentaje para que se vea igual en los tres rangos. --- */
.PortalPosterGrid-poster-corner {
    position: absolute; /* Anclada a la esquina. */
    right: 0; /* Al borde derecho. */
    bottom: 0; /* Al borde inferior. */
    background-color: var(--accent, #5b6770); /* Color del portal. */
    z-index: 2; /* Sobre la caja de texto. */
    pointer-events: none; /* No intercepta clics. */
}

/* Barra horizontal de la escuadra. */
.PortalPosterGrid-poster-corner--bottom {
    width: 34%; /* 198/582 del ancho del póster. */
    height: var(--PortalPosterGrid-corner); /* Grosor común. */
}

/* Barra vertical de la escuadra. */
.PortalPosterGrid-poster-corner--side {
    width: var(--PortalPosterGrid-corner); /* Grosor común. */
    height: 30%; /* 69/230 del alto del póster. */
}

/* --- Caja de texto. VA EN EL FLUJO, anclada abajo por el justify-content del póster: un ancestro
   posicionado más cercano dejaría el ::after del enlace reducido a esta caja. --- */
.PortalPosterGrid-poster-caption {
    width: 84%; /* 489/582 del nodo de PC. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    display: flex; /* Apila título, subtítulo y CTA. */
    flex-direction: column; /* En columna. */
    padding: 12px 16px 14px; /* Rellenos del nodo. */
    background-color: var(--accent-veil, rgba(91, 103, 112, 0.25)); /* Velo del color del portal. */
}

/* Nombre del portal. */
.PortalPosterGrid-poster-title {
    margin: 0; /* Quita el margen propio del título. */
    font-size: 32px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1.2; /* Interlineado de titular. */
    color: #ffffff; /* Blanco sobre la foto. */
}

/* LOS CINCO ESTADOS VAN JUNTOS: el a:hover de Bootstrap le gana a la clase suelta y pintaría el
   título azul y subrayado. */
.PortalPosterGrid-poster-link,
.PortalPosterGrid-poster-link:hover,
.PortalPosterGrid-poster-link:focus,
.PortalPosterGrid-poster-link:active,
.PortalPosterGrid-poster-link:visited {
    color: inherit; /* Hereda el blanco del título. */
    text-decoration: none; /* Sin subrayado en ningún estado. */
}

    /* Estira el área clickeable al póster entero; el ancla envuelve solo al título. */
    .PortalPosterGrid-poster-link::after {
        content: ""; /* Necesario para que el pseudoelemento exista. */
        position: absolute; /* Contra el póster. */
        inset: 0; /* Lo cubre entero. */
        z-index: 3; /* Sobre todas las capas, escuadra incluida. */
    }

    /* El anillo lo dibuja el ::after, sobre el póster entero. */
    .PortalPosterGrid-poster-link:focus-visible {
        outline: none; /* Fuera el anillo del navegador. */
    }

        /* Anillo de foco sobre el póster. */
        .PortalPosterGrid-poster-link:focus-visible::after {
            outline: 2px solid #ffffff; /* Blanco, visible sobre la foto. */
            outline-offset: -3px; /* Hacia adentro, para no salirse del recorte. */
        }

/* Bajada del portal. */
.PortalPosterGrid-poster-subtitle {
    margin: 2px 0 0; /* Separación del nodo con el título. */
    font-size: 11.5px; /* Tamaño del nodo. */
    line-height: 16px; /* Interlineado del nodo. */
    color: rgba(255, 255, 255, 0.9); /* Blanco apenas atenuado. */
}

/* --- Llamado a la acción. EN REPOSO NO OCUPA LUGAR: el prototipo pasa la caja de 82 a 130px, que
   son los 16px de separación más los 31px de la píldora. --- */
.PortalPosterGrid-poster-cta {
    display: flex; /* Leyenda y flecha en línea. */
    align-items: center; /* Centradas entre sí. */
    gap: 6px; /* Separación entre las dos. */
    align-self: flex-start; /* Se ciñe a su texto. */
    margin-top: 0; /* Sin separación mientras está cerrado. */
    height: 0; /* No ocupa lugar en reposo. */
    opacity: 0; /* Invisible en reposo. */
    overflow: hidden; /* Recorta el texto mientras el alto es cero. */
    font-size: 12px; /* Tamaño del prototipo. */
    font-weight: 700; /* Bold del diseño. */
    color: #ffffff; /* Blanco sobre el velo. */
    transition: height 0.25s ease-in-out, margin-top 0.25s ease-in-out, opacity 0.25s ease-in-out; /* 250 ms del prototipo. */
}

/* Flecha del CTA, dibujada y no como el carácter "→": así el grosor no depende de la fuente. */
.PortalPosterGrid-poster-cta-arrow {
    --PortalPosterGrid-arrow-weight: 2.75; /* Grosor del trazo, ajustable desde acá. */
    width: 1.1em; /* En em para que acompañe al cuerpo del texto. */
    height: 1.1em; /* Cuadrada. */
    flex: none; /* No se comprime. */
    fill: none; /* Sin relleno: solo trazo. */
    stroke: currentColor; /* Toma el color de la leyenda. */
    stroke-width: var(--PortalPosterGrid-arrow-weight); /* Grosor declarado arriba. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
}

/* --- Hover. Acotado a punteros finos: en táctil el hover emulado se queda pegado en el último
   póster tocado. El foco de teclado se cubre aparte. --- */
@media (hover: hover) and (pointer: fine) {
    /* El llamado a la acción aparece. */
    .PortalPosterGrid-poster:hover .PortalPosterGrid-poster-cta {
        margin-top: 16px; /* Separación con el subtítulo. */
        height: 31px; /* Alto de la píldora en el prototipo. */
        opacity: 1; /* Visible. */
    }

    /* Acercamiento sutil de la foto. NO está en el prototipo: es un pedido del usuario. */
    .PortalPosterGrid-poster:hover .PortalPosterGrid-poster-image {
        transform: scale(1.04); /* Crece un 4 %. */
    }
}

/* Mismo estado con el foco de teclado: el CTA aparece. */
.PortalPosterGrid-poster:focus-within .PortalPosterGrid-poster-cta {
    margin-top: 16px; /* Separación con el subtítulo. */
    height: 31px; /* Alto de la píldora. */
    opacity: 1; /* Visible. */
}

/* Mismo estado con el foco de teclado: la foto se acerca. */
.PortalPosterGrid-poster:focus-within .PortalPosterGrid-poster-image {
    transform: scale(1.04); /* Crece un 4 %. */
}

/* --- Tablet: hasta 1024px (un iPad vertical mide 810-834px y el iPad Pro llega a 1024). --- */
@media (max-width: 1024px) {
    .PortalPosterGrid {
        padding: clamp(30px, 5.99vw, 46px) 0; /* Relleno vertical del nodo de tablet. */
    }

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

    .PortalPosterGrid-header {
        margin-bottom: 14px; /* Separación más corta con la rejilla. */
    }

    .PortalPosterGrid-title {
        font-size: clamp(26px, 4.17vw, 32px); /* 32px del nodo de tablet. */
        letter-spacing: normal; /* El nodo de tablet no aplica tracking. */
    }

    .PortalPosterGrid-description {
        display: none; /* La bajada no existe en los nodos de tablet ni de mobile. */
    }

    .PortalPosterGrid-grid {
        gap: 12px; /* Separación del nodo de tablet. */
    }

    .PortalPosterGrid-poster {
        aspect-ratio: 346 / 173; /* Más cuadrado que en PC. */
        flex: 1 1 clamp(260px, 45%, 346px); /* Dos por fila, con el ancho del nodo de tablet. */
    }

    .PortalPosterGrid-poster-caption {
        width: 100%; /* Ancho completo del póster, no el 84 % de PC. */
    }
}

/* --- Mobile: hasta 500px. Va después de tablet para pisar solo lo que cambia. --- */
@media (max-width: 500px) {
    .PortalPosterGrid {
        padding: 30px 0; /* Relleno vertical del nodo de mobile. */
    }

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

    .PortalPosterGrid-title {
        font-size: clamp(22px, 6.93vw, 26px); /* 26px del nodo de mobile. */
    }

    .PortalPosterGrid-poster {
        aspect-ratio: 335 / 168; /* Proporción del nodo de mobile. */
        flex: 1 1 100%; /* Un solo póster por fila. */
    }

    /* ATENCIÓN: EL NODO DECLARA 32px ACÁ Y NO ENTRA EN SU PROPIA CAJA: con el póster de 335px la
       caja deja 303px útiles y un título largo se recorta. El techo de 26px es el que aguanta. */
    .PortalPosterGrid-poster-title {
        font-size: clamp(22px, 6.93vw, 26px); /* Techo que entra completo. */
    }
}

/* --- Movimiento reducido: el llamado a la acción aparece de una vez, sin transición. --- */
@media (prefers-reduced-motion: reduce) {
    .PortalPosterGrid-poster-cta,
    .PortalPosterGrid-poster-image {
        transition: none; /* Sin interpolación. */
    }

    /* El acercamiento se apaga entero: es movimiento puro y no comunica nada que el CTA no diga. */
    .PortalPosterGrid-poster:hover .PortalPosterGrid-poster-image,
    .PortalPosterGrid-poster:focus-within .PortalPosterGrid-poster-image {
        transform: none; /* La foto no crece. */
    }
}