/* prensa.css — estilos de la sección Prensa. Complementa el CSS compilado del sitio. */
/* .font-sans usa var(--font-inter), que el sitio setea vía una clase de módulo Next.js
hasheada en (inter_*-module__*__variable). Esta página estática no la incluye,
así que sin este fallback el body cae a la fuente serif del navegador. */
:root { --font-inter: "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif; }
/* Grid de tarjetas: columnas fluidas de ~320px — 1 col en mobile, 2 en pantallas medias,
3 en desktop. auto-fill preserva los tracks vacíos, así una sola tarjeta no se estira
a todo el ancho (la imagen cuadrada quedaba gigante en ventanas angostas). */
.p-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 2rem; }
/* Tope extra: en 1 columna, la tarjeta sola no pasa de 26rem */
.p-card { max-width: 26rem; }
/* Padding-top para compensar el header fijo (pt-16 no existe en el CSS compilado, tree-shaken) */
.p-pt-16 { padding-top: 4rem; }
/* Tarjeta de nota */
.p-card {
display: block;
overflow: hidden;
border-radius: 1rem;
border: 1px solid hsl(var(--border));
background: hsl(var(--card));
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.p-card:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.15); }
.p-card-media { aspect-ratio: 1 / 1; overflow: hidden; }
.p-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Fallback para notas futuras sin imagen (spec: fondo verde + gota Ligier).
Uso: sin ![]()
. */
.p-card-media--fallback {
background: hsl(var(--primary)) url("/logo/Ligier-Identidad-Gota.png") center / 35% no-repeat;
}
/* Nota destacada: la más reciente (o única) en layout horizontal a todo el ancho,
imagen a la izquierda y texto centrado a la derecha. Evita que una sola tarjeta
deje 2/3 del grid vacío. En mobile se comporta como tarjeta normal. */
@media (min-width: 768px) {
.p-card--featured {
grid-column: 1 / -1;
max-width: none;
display: grid;
grid-template-columns: minmax(0, 26rem) 1fr;
}
.p-card--featured > div:not(.p-card-media) {
align-self: center;
padding: 2.5rem 3rem;
}
.p-card--featured h3 { font-size: 1.5rem; line-height: 1.3; }
.p-card--featured .p-clamp-2 { -webkit-line-clamp: 3; }
}
/* Clamp de copete a 2 líneas (line-clamp-2 no existe en el CSS compilado) */
.p-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Cuerpo de nota */
.p-prose { max-width: 48rem; margin: 0 auto; }
.p-prose p { margin-bottom: 1.25rem; font-size: 1.0625rem; line-height: 1.75; color: hsl(var(--muted-foreground)); }
.p-prose strong { color: hsl(var(--foreground)); }
.p-lead { font-size: 1.25rem; line-height: 1.7; font-weight: 500; color: hsl(var(--foreground)); }
.p-highlight {
border-left: 4px solid hsl(var(--accent));
background: hsl(var(--secondary));
border-radius: 0 0.75rem 0.75rem 0;
padding: 1.25rem 1.5rem;
margin: 2rem 0;
}
.p-highlight p { margin-bottom: 0.5rem; }
.p-highlight p:last-child { margin-bottom: 0; }
/* Scroll-spy de la sección Prensa en el home (inject.js togglea p-prensa-active en ).
El subrayado activo del sitio es un elemento compartido de Framer Motion que se DESLIZA
entre items (translate3d + ajuste de ancho, resorte ~450ms). Para replicarlo, no se
dibuja un subrayado propio: se DESPLAZA el subrayado nativo (que React deja en el item
"Equipo Comercial") hasta la posición de "Prensa" vía transform. inject.js calcula el
offset (--p-ul-x) y el ratio de ancho (--p-ul-s) y togglea p-ul-anim durante el
deslizamiento para darle la transición con rebote. !important pisa el estilo inline
de Framer Motion. */
html.p-prensa-active header nav a[href="/prensa"] {
color: hsl(var(--accent)) !important;
}
html.p-prensa-active header nav a.text-accent[href^="/#"] {
color: hsl(var(--primary-foreground) / 0.8) !important;
}
html.p-prensa-active header nav a.text-accent[href^="/#"] > span,
html.p-ul-hold header nav a.text-accent[href^="/#"] > span {
transform: translate3d(var(--p-ul-x, 0px), 0, 0) scaleX(var(--p-ul-s, 1)) !important;
}
/* Transición tipo resorte, activa solo durante el deslizamiento que gestiona inject.js
(si fuera permanente, suavizaría de más las animaciones por-frame de Framer Motion). */
html.p-ul-anim header nav a.text-accent[href^="/#"] > span {
transition: transform 0.45s cubic-bezier(0.3, 1.35, 0.4, 1);
}
/* Botón (estilo CTA del sitio) */
.p-btn {
display: inline-flex; align-items: center; gap: 0.5rem;
border-radius: 0.5rem; background: hsl(var(--accent)); color: hsl(var(--accent-foreground));
padding: 0.75rem 1.75rem; font-weight: 600; font-size: 0.9375rem;
transition: opacity 0.2s ease;
}
.p-btn:hover { opacity: 0.9; }