body.vista-sabias-que { background: var(--fondo); }
.sabias-hero {
position: relative;
overflow: hidden;
padding: 72px 40px 56px;
text-align: center;
background: linear-gradient(145deg, var(--titular) 0%, #1a3d2a 60%, #0d4a28 100%);
}
.sabias-hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 500px 350px at 25% 60%, rgba(0, 166, 75, 0.14) 0%, transparent 70%),
radial-gradient(ellipse 350px 250px at 80% 30%, rgba(151, 201, 235, 0.10) 0%, transparent 70%);
pointer-events: none;
}
.sabias-hero::after {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1.5px 1.5px, rgba(255, 255, 255, 0.03) 1px, transparent 0);
background-size: 30px 30px;
pointer-events: none;
}
.sabias-hero > .container {
position: relative;
z-index: 1;
}
.sabias-hero__titulo {
margin: 0 0 12px;
font-size: 46px;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--blanco);
}
.sabias-hero__texto {
margin: 0;
font-size: 16px;
color: rgba(255, 255, 255, 0.55);
}
.sabias {
padding: 56px 0 80px;
}
.sabias__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.sabias__vacio {
text-align: center;
font-size: 15px;
}
.sabias-card {
display: flex;
flex-direction: column;
background: var(--blanco);
border: 1px solid var(--borde);
border-radius: var(--radio-lg);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
overflow: hidden;
transition: var(--transicion);
}
.sabias-card:hover {
transform: translateY(-6px);
border-color: rgba(0, 166, 75, 0.12);
box-shadow: 0 20px 56px rgba(0, 166, 75, 0.12);
}
.sabias-card__imagen {
display: block;
flex-shrink: 0;
aspect-ratio: 16 / 10;
overflow: hidden;
}
.sabias-card__imagen img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.sabias-card:hover .sabias-card__imagen img { transform: scale(1.05); }
.sabias-card__cuerpo {
display: flex;
flex-direction: column;
flex: 1;
padding: 24px 24px 28px;
}
.sabias-card__meta {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
font-size: 12px;
}
.sabias-card__meta time { opacity: 0.7; }
.sabias-card__categoria {
padding: 3px 10px;
border-radius: 20px;
background: var(--verde-claro);
color: var(--verde-oscuro);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.sabias-card__titulo {
margin: 0 0 12px;
font-size: 17px;
font-weight: 700;
line-height: 1.35;
}
.sabias-card__titulo a { transition: color 0.2s ease; }
.sabias-card__titulo a:hover { color: var(--verde); }
.sabias-card__resumen {
flex: 1;
margin: 0 0 20px;
font-size: 13.5px;
line-height: 1.7;
}
.sabias-card__enlace {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: 700;
color: var(--verde);
transition: gap 0.3s ease, color 0.2s ease;
}
.sabias-card__enlace:hover {
gap: 8px;
color: var(--verde-oscuro);
}
@media (max-width: 968px) {
.sabias-hero {
padding: 56px 24px 44px;
}
.sabias-hero__titulo { font-size: 34px; }
.sabias { padding: 40px 0 60px; }
.sabias__grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (max-width: 580px) {
.sabias-hero__titulo { font-size: 28px; }
.sabias-hero__texto { font-size: 14px; }
.sabias { padding: 32px 0 48px; }
.sabias__grid { grid-template-columns: 1fr; }
.sabias-card__cuerpo { padding: 20px 20px 24px; }
.sabias-card__titulo { font-size: 16px; }
}