/* ══════════════════════════════════════════════════════════════════════════
   Grupo Educar — Home: "Lo que ofrecemos", fondo de Revista e Indicadores
   Reutiliza los mismos colores por sección que el hero (paleta digital).
   Se carga solo en portada (is_front_page), despues de ge-main.
   ══════════════════════════════════════════════════════════════════════════ */

.home-sec--revista, .home-sec--stats { position: relative; overflow: hidden; }

.home-blob {
  position: absolute;
  border-radius: 46% 54% 50% 50% / 55% 45% 55% 45%;
  opacity: .16;
  pointer-events: none;
  animation: homeSecMorph 16s ease-in-out infinite alternate;
}
@keyframes homeSecMorph {
  0%   { border-radius: 46% 54% 50% 50% / 55% 45% 55% 45%; }
  100% { border-radius: 56% 44% 46% 54% / 46% 54% 46% 54%; }
}

/* ── Lo que ofrecemos: 5 tarjetas de color ── */
.offer-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.offer-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px 20px 46px; border-radius: var(--radius-lg);
  text-decoration: none; color: #fff;
  transition: transform .25s ease, box-shadow .25s ease;
}
.offer-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0,0,0,.18); color: inherit; }
.offer-card:focus-visible { outline: 3px solid #12232E; outline-offset: 3px; }
.offer-card h3 { position: relative; z-index: 1; font-family: var(--font-title); font-size: 16px; font-weight: 800; margin: 2px 0 0; color: inherit; }
.offer-card p { position: relative; z-index: 1; font-size: 12.5px; line-height: 1.45; margin: 0; opacity: .92; }
.offer-card p { font-family: var(--font-body); }
.offer-ic {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.2);
}
.offer-arrow {
  position: absolute; right: 16px; bottom: 16px; z-index: 1;
  opacity: .85; transition: transform .25s ease;
}
.offer-card:hover .offer-arrow { transform: translateX(3px); }
.offer-blob { position: absolute; border-radius: 46% 54% 50% 50% / 55% 45% 55% 45%; pointer-events: none; animation: homeSecMorph 16s ease-in-out infinite alternate; }
.offer-blob--1 { width: 120px; height: 120px; top: -30px; right: -30px; opacity: .2; }
.offer-blob--2 { width: 80px;  height: 80px;  bottom: -30px; left: -20px; opacity: .16; }

.offer-card--revista { background: #E3F4FA; color: #12232E; }
.offer-card--revista .offer-ic { background: rgba(18,35,46,.10); }
.offer-card--revista .offer-blob--1 { background: #0A729B; opacity: .16; }
.offer-card--revista .offer-blob--2 { background: #4DADA1; opacity: .2; }

.offer-card--podcast { background: #4DADA1; color: #12232E; }
.offer-card--podcast .offer-ic { background: rgba(18,35,46,.14); }
.offer-card--podcast .offer-blob--1 { background: #fff; }
.offer-card--podcast .offer-blob--2 { background: #0A729B; }

.offer-card--seminarios { background: #C1C11F; color: #12232E; }
.offer-card--seminarios .offer-ic { background: rgba(18,35,46,.14); }
.offer-card--seminarios .offer-blob--1 { background: #fff; }
.offer-card--seminarios .offer-blob--2 { background: #0A729B; }

.offer-card--noticias { background: #FF9929; color: #12232E; }
.offer-card--noticias .offer-ic { background: rgba(18,35,46,.14); }
.offer-card--noticias .offer-blob--1 { background: #fff; }
.offer-card--noticias .offer-blob--2 { background: #F73D34; }

.offer-card--capacitaciones { background: #3F9C36; color: #fff; }
.offer-card--capacitaciones .offer-blob--1 { background: #fff; }
.offer-card--capacitaciones .offer-blob--2 { background: #C1C11F; }

@media (max-width: 1000px) { .offer-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .offer-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Revista: celeste muy claro + marcos definidos (modo "C") ── */
.home-sec--revista { background: #E3F4FA; padding-top: 56px; padding-bottom: 56px; }
.home-sec--revista .eyebrow {
  display: inline-block; background: #C1C11F; color: #12232E;
  padding: 5px 14px; border-radius: 999px; font-family: var(--font-title); font-weight: 800;
}
.home-sec--revista h2 { color: #12232E; font-family: var(--font-title); }
.home-sec--revista .ver-mas { color: #0A729B; font-weight: 700; }
.home-sec--revista .home-blob--1 { width: 220px; height: 220px; top: -60px; right: 8%; background: #0A729B; opacity: .16; }
.home-sec--revista .home-blob--2 { width: 150px; height: 150px; bottom: -50px; left: 4%; background: #4DADA1; opacity: .18; }

/* Marcos: portada y tarjetas de articulos mas definidas sobre el celeste */
.home-sec--revista .revista-portada-flip { border-radius: 8px; box-shadow: 0 14px 32px rgba(10,114,155,.18); }
.home-sec--revista .edicion-articulo-card > div {
  border: 1.5px solid rgba(10,114,155,.35) !important;
  box-shadow: 0 8px 20px rgba(10,114,155,.08);
}

/* ── Indicadores: igual al mockup — fondo azul plano, sin blobs, cada cifra en su tarjeta ── */
.home-sec--stats { background: #0A729B; }
.home-sec--stats .home-blob { display: none; }
.home-sec--stats .stat-item {
  position: relative; z-index: 1;
  background: rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
}
.stat-ic {
  display: inline-flex; align-items: center; justify-content: center;
  color: #C1C11F;
  margin-bottom: 8px;
}
.home-sec--stats .stat-number { font-family: var(--font-title); }
.home-sec--stats .stat-label { font-family: var(--font-body); }

@media (prefers-reduced-motion: reduce) {
  .home-blob, .offer-blob { animation: none !important; }
  .offer-card, .offer-arrow { transition: none !important; }
}

/* ── Actualidad (home): destacada grande + 3 para elegir, en naranja ── */
.home-sec--actualidad { background: #FF9929; padding-top: 48px; padding-bottom: 48px; }
.home-sec--actualidad .eyebrow, .home-sec--actualidad h2, .home-sec--actualidad .ver-mas {
  color: #12232E; font-family: var(--font-title);
}
.actualidad-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: stretch; }
.actualidad-featured { position: relative; display: block; overflow: hidden; border-radius: var(--radius-lg); min-height: 260px; text-decoration: none; }
.actualidad-featured img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.actualidad-featured-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,35,46,.92), rgba(18,35,46,.15) 60%); }
.actualidad-featured-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; height: 100%; padding: 24px; color: #fff; }
.actualidad-tag { align-self: flex-start; background: #C1C11F; color: #12232E; font-family: var(--font-title); font-weight: 800; font-size: 12px; line-height: 1; padding: 6px 12px; border-radius: 999px; }
.actualidad-featured-title { font-family: var(--font-title); font-weight: 800; font-size: 22px; line-height: 1.25; }
.actualidad-featured-bajada { font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.85); max-width: 92%; }
.actualidad-list { display: flex; flex-direction: column; gap: 10px; }
.actualidad-item { display: flex; align-items: center; gap: 12px; padding: 10px; background: rgba(255,255,255,.5); border-radius: 12px; text-decoration: none; color: #12232E; transition: background-color .2s ease, transform .2s ease; }
.actualidad-item:hover { background: #fff; transform: translateX(3px); color: #12232E; }
.actualidad-item-thumb { flex: none; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: rgba(18,35,46,.08); }
.actualidad-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.actualidad-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.actualidad-item-date { font-family: var(--font-title); font-weight: 800; font-size: 11px; opacity: .7; text-transform: capitalize; }
.actualidad-item-title { font-family: var(--font-body); font-weight: 600; font-size: 13.5px; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.actualidad-item-bajada { font-family: var(--font-body); font-size: 12px; line-height: 1.35; color: rgba(18,35,46,.7); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
@media (max-width: 900px) {
  .actualidad-grid { grid-template-columns: 1fr; }
  .actualidad-featured { min-height: 220px; }
}

/* ── Sigue aprendiendo: fusion de Biblioteca digital + Recursos + Capacitaciones ── */
.aprender-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.aprender-card { position: relative; overflow: hidden; display: flex; flex-direction: column; border-radius: var(--radius-lg); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.aprender-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,.16); color: inherit; }
.aprender-media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: rgba(0,0,0,.08); display: flex; align-items: center; justify-content: center; }
.aprender-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aprender-body { position: relative; z-index: 1; padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.aprender-tag { align-self: flex-start; font-family: var(--font-title); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; padding: 5px 10px; border-radius: 999px; }
.aprender-title { font-family: var(--font-title); font-weight: 800; font-size: 16px; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.aprender-more { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-title); font-weight: 800; font-size: 12.5px; margin-top: auto; }
.aprender-more svg { transition: transform .25s ease; }
.aprender-card:hover .aprender-more svg { transform: translateX(3px); }
.aprender-blob { position: absolute; border-radius: 46% 54% 50% 50% / 55% 45% 55% 45%; opacity: .18; pointer-events: none; animation: homeSecMorph 16s ease-in-out infinite alternate; }
.aprender-blob--1 { width: 100px; height: 100px; top: -20px; right: -20px; }
.aprender-blob--2 { width: 70px; height: 70px; bottom: 32%; left: -20px; }

.aprender-card--seminarios { background: #C1C11F; color: #12232E; }
.aprender-card--seminarios .aprender-tag { background: #12232E; color: #fff; }
.aprender-card--seminarios .aprender-blob--1 { background: #fff; }
.aprender-card--seminarios .aprender-blob--2 { background: #0A729B; }

.aprender-card--material { background: #E87474; color: #12232E; }
.aprender-card--material .aprender-tag { background: #12232E; color: #fff; }
.aprender-card--material .aprender-blob--1 { background: #fff; }
.aprender-card--material .aprender-blob--2 { background: #C1C11F; }

.aprender-card--capacitaciones { background: #3F9C36; color: #fff; }
.aprender-card--capacitaciones .aprender-tag { background: #12232E; color: #fff; }
.aprender-card--capacitaciones .aprender-media { background: rgba(255,255,255,.14); }
.aprender-card--capacitaciones .aprender-blob--1 { background: #fff; }
.aprender-card--capacitaciones .aprender-blob--2 { background: #C1C11F; }

@media (max-width: 900px) { .aprender-grid { grid-template-columns: 1fr; } }

/* ── Podcast (home): mismo teal y blobs que su slide en el hero ── */
.home-sec--podcast { position: relative; overflow: hidden; background: #4DADA1; }
.home-sec--podcast h2 { color: #12232E !important; }
.home-sec--podcast p { color: rgba(18,35,46,.75) !important; }
.home-sec--podcast .ec-badge-pill { background: #12232E; color: #fff; }
.home-sec--podcast a.btn { background: #12232E !important; color: #fff !important; border-color: #12232E !important; }
.home-sec--podcast .home-blob--1 { width: 200px; height: 200px; top: -60px; right: 8%; background: #0A729B; opacity: .22; }
.home-sec--podcast .home-blob--2 { width: 160px; height: 160px; bottom: -50px; left: 5%; background: #C1C11F; opacity: .2; }

/* ── Comunidad Educar: Facebook + Instagram ── */
.home-sec--comunidad { position: relative; overflow: hidden; background: #0A729B; }
.home-sec--comunidad .eyebrow { color: #C1C11F; }
.home-sec--comunidad h2 { color: #fff; }
.home-sec--comunidad .home-blob--1 { width: 200px; height: 200px; top: -60px; left: 8%; background: #4DADA1; opacity: .22; }
.home-sec--comunidad .home-blob--2 { width: 160px; height: 160px; bottom: -50px; right: 6%; background: #C1C11F; opacity: .18; }
.comunidad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; position: relative; z-index: 1; }
.comunidad-card { position: relative; overflow: hidden; background: #12232E; border-radius: var(--radius-lg); padding: 22px; color: #fff; }
.comunidad-head { display: flex; align-items: center; gap: 10px; font-family: var(--font-title); font-weight: 800; font-size: 15px; margin-bottom: 14px; }
.comunidad-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.comunidad-thumb { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.12); display: block; }
.comunidad-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* .comunidad-fallback ya no se usa: los recuadros vacios de abajo cumplen ese rol */
.comunidad-thumb--placeholder {
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.4);
  border: 1.5px dashed rgba(255,255,255,.25);
  background: rgba(255,255,255,.06);
}
.comunidad-handle { font-size: 12.5px; opacity: .75; margin: 0 0 16px; }
.comunidad-btn { display: inline-flex; align-items: center; gap: 6px; background: #C1C11F; color: #12232E; font-family: var(--font-title); font-weight: 800; font-size: 12.5px; padding: 8px 16px; border-radius: 999px; text-decoration: none; transition: transform .2s ease; }
.comunidad-btn:hover { color: #12232E; transform: translateY(-2px); }
@media (max-width: 700px) { .comunidad-grid { grid-template-columns: 1fr; } }

/* ── R1 · Indicadores en fondo blanco (feedback Carolina + Tania, sep. 2026) ──
   Reemplaza el fondo azul con tarjetas semitransparentes por un fondo blanco,
   con cifras grandes en el azul institucional para que "resalten mas los datos".
   Se usan selectores mas especificos que las reglas anteriores para no tener que
   borrarlas (asi es facil volver atras: basta con quitar este bloque). */
.stats-bar.home-sec--stats {
  background: #fff;
  color: #1f2937;
  border-top: 1px solid #eef0f3;
  border-bottom: 1px solid #eef0f3;
  padding: 56px 0;
}
.stats-bar.home-sec--stats .home-blob,
.stats-bar.home-sec--stats::before,
.stats-bar.home-sec--stats::after {
  display: none;
}
.stats-bar.home-sec--stats .stats-grid {
  background: transparent;
  gap: 0;
  border-radius: 0;
  overflow: visible;
}
.stats-bar.home-sec--stats .stat-item {
  background: transparent;
  border-radius: 0;
  padding: 8px 32px;
  text-align: center;
}
.stats-bar.home-sec--stats .stat-item + .stat-item {
  border-left: 1px solid #e5e7eb;
}
.stats-bar.home-sec--stats .stat-ic {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #eef5dd;
  color: #3F9C36;
  margin-bottom: 14px;
}
.stats-bar.home-sec--stats .stat-number {
  font-family: var(--font-title);
  font-size: clamp(44px, 5.2vw, 72px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #3F9C36;
  margin-bottom: 10px;
}
.stats-bar.home-sec--stats .stat-label {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 500;
  color: #374151;
}
@media (max-width: 768px) {
  .stats-bar.home-sec--stats { padding: 40px 0; }
  .stats-bar.home-sec--stats .stat-item { padding: 22px 16px; }
  .stats-bar.home-sec--stats .stat-item + .stat-item {
    border-left: 0;
    border-top: 1px solid #e5e7eb;
  }
  .stats-bar.home-sec--stats .stat-label { font-size: 16px; }
}

/* ── R2 · Burbujas de "Lo que ofrecemos" en posiciones distintas (feedback Carolina, sep. 2026) ──
   Antes las 5 tarjetas tenian sus 2 burbujas en el mismo lugar, con la misma animacion
   sincronizada. Ahora cada tarjeta tiene su propia composicion (posicion y tamano) y las
   burbujas, ademas de cambiar de forma, se desplazan suavemente con ritmos desfasados.
   Para volver atras basta con quitar este bloque. */

/* Las burbujas quedan detras del texto aunque se muevan hacia el centro. */
.offer-card { isolation: isolate; }
.offer-card .offer-blob { z-index: -1; }

@keyframes offerDriftA {
  0%   { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(10px, -12px) rotate(12deg); }
}
@keyframes offerDriftB {
  0%   { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-12px, 8px) rotate(-10deg); }
}

/* Revista: grande arriba a la izquierda, chica abajo a la derecha */
.offer-card--revista .offer-blob--1 { width: 140px; height: 140px; top: -55px; left: -45px; right: auto; bottom: auto;
  animation: homeSecMorph 17s ease-in-out infinite alternate, offerDriftA 11s ease-in-out infinite alternate; }
.offer-card--revista .offer-blob--2 { width: 70px; height: 70px; bottom: -22px; right: 34px; top: auto; left: auto;
  animation: homeSecMorph 13s ease-in-out -4s infinite alternate, offerDriftB 9s ease-in-out -2s infinite alternate; }

/* Podcast: grande abajo a la derecha, chica flotando arriba a la derecha */
.offer-card--podcast .offer-blob--1 { width: 115px; height: 115px; bottom: -42px; right: -30px; top: auto; left: auto;
  animation: homeSecMorph 15s ease-in-out -6s infinite alternate, offerDriftB 12s ease-in-out -3s infinite alternate; }
.offer-card--podcast .offer-blob--2 { width: 46px; height: 46px; top: 18px; right: 20px; bottom: auto; left: auto;
  animation: homeSecMorph 11s ease-in-out -2s infinite alternate, offerDriftA 8s ease-in-out -5s infinite alternate; }

/* Seminarios: muy grande asomando arriba al centro, mediana abajo a la izquierda */
.offer-card--seminarios .offer-blob--1 { width: 160px; height: 160px; top: -95px; right: 12px; bottom: auto; left: auto;
  animation: homeSecMorph 19s ease-in-out -9s infinite alternate, offerDriftA 13s ease-in-out -7s infinite alternate; }
.offer-card--seminarios .offer-blob--2 { width: 90px; height: 90px; bottom: -45px; left: 26px; top: auto; right: auto;
  animation: homeSecMorph 14s ease-in-out -1s infinite alternate, offerDriftB 10s ease-in-out -6s infinite alternate; }

/* Noticias: mediana a media altura por la derecha, chica arriba al centro */
.offer-card--noticias .offer-blob--1 { width: 110px; height: 110px; top: 38%; right: -52px; bottom: auto; left: auto;
  animation: homeSecMorph 16s ease-in-out -3s infinite alternate, offerDriftB 11s ease-in-out -8s infinite alternate; }
.offer-card--noticias .offer-blob--2 { width: 64px; height: 64px; top: -26px; left: 40%; bottom: auto; right: auto;
  animation: homeSecMorph 12s ease-in-out -7s infinite alternate, offerDriftA 9s ease-in-out -1s infinite alternate; }

/* Capacitaciones: grande abajo a la izquierda, chica asomando por la derecha */
.offer-card--capacitaciones .offer-blob--1 { width: 135px; height: 135px; bottom: -60px; left: -38px; top: auto; right: auto;
  animation: homeSecMorph 18s ease-in-out -5s infinite alternate, offerDriftA 12s ease-in-out -4s infinite alternate; }
.offer-card--capacitaciones .offer-blob--2 { width: 58px; height: 58px; top: 24px; right: -14px; bottom: auto; left: auto;
  animation: homeSecMorph 10s ease-in-out -8s infinite alternate, offerDriftB 8s ease-in-out -3s infinite alternate; }

/* ── Comunidad Educar, opcion C: plugin oficial de Facebook + invitacion a Instagram ──
   (mientras no haya token de la API; cuando lo haya, las tarjetas con fotos toman su lugar solas) */
.comunidad-card { display: flex; flex-direction: column; }
.comunidad-card .comunidad-btn { align-self: flex-start; margin-top: auto; }
.comunidad-fb {
  width: 100%; min-height: 460px; margin-bottom: 16px;
  border-radius: 10px; overflow: hidden; background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.comunidad-fb iframe { display: block; max-width: 100%; }
.comunidad-fb-fallback { color: #12232E; font-weight: 700; }
.comunidad-invita { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 8px 0 20px; }
.comunidad-invita-ic {
  width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF);
}
.comunidad-invita-txt { margin: 0; font-size: 16px; line-height: 1.55; max-width: 36ch; opacity: .92; }
.comunidad-invita .comunidad-handle { margin: 0; }

/* ── Revista en el home: portada + lista de reportajes, como Actualidad (feedback sep. 2026) ──
   Antes: dos columnas casi iguales (portada de ~480x640) y 3 tarjetas angostas arriba, con un
   gran espacio vacio. Ahora: portada de ancho acotado y los reportajes uno bajo otro, estirados
   al alto de la portada. */
.revista-home-grid {
  display: grid;
  grid-template-columns: clamp(240px, 33%, 380px) minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
}
.revista-home-lista { display: flex; flex-direction: column; gap: 14px; }
.revista-home-item {
  flex: 1;
  display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; align-items: center;
  padding: 12px; border-radius: 14px; background: #fff; color: #12232E; text-decoration: none;
  border: 1.5px solid rgba(10,114,155,.35); box-shadow: 0 8px 20px rgba(10,114,155,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.revista-home-item:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(10,114,155,.16); color: #12232E; }
.revista-home-thumb {
  display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden;
  background: #eef3f6; color: #9aa5b1;
}
.revista-home-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.revista-home-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.revista-home-seccion {
  font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #3F9C36;
}
.revista-home-titulo {
  font-family: var(--font-title); font-weight: 800; font-size: 17px; line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.revista-home-bajada {
  font-size: 14px; line-height: 1.45; color: #475569;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
@media (max-width: 900px) {
  .revista-home-grid { grid-template-columns: 1fr; }
  .revista-home-grid > a:first-child { width: min(100%, 320px); margin: 0 auto; }
}
@media (max-width: 520px) {
  .revista-home-item { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 10px; }
  .revista-home-titulo { font-size: 15px; }
  .revista-home-bajada { display: none; }
}

/* ── Indicador "Desde 1991": el año va fijo (sin conteo) y "Desde" mas chico ── */
.stats-bar.home-sec--stats .stat-prefijo { font-size: .42em; font-weight: 700; letter-spacing: 0; vertical-align: .12em; }

/* ── Comunidad Educar, opcion A: Instagram con una publicacion destacada y 3 mas, con su texto ── */
.comunidad-card .comunidad-fb { flex: 1 1 auto; }      /* Facebook se estira al alto de la tarjeta de Instagram */
.ig-dest { display: block; margin: 0 0 10px; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.06); color: #fff; text-decoration: none; transition: background .2s ease; }
.ig-dest img { display: block; width: 100%; height: 280px; object-fit: cover; }
.ig-cuerpo { display: block; padding: 12px 14px; }
.ig-txt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13.5px; line-height: 1.45; }
.ig-txt--3 { -webkit-line-clamp: 3; font-size: 14.5px; }
.ig-fecha { display: block; margin-top: 6px; font-size: 12px; color: #9fb3c2; }
.ig-lista { display: grid; gap: 10px; margin: 0 0 16px; }
.ig-item { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.06); color: #fff; text-decoration: none; transition: background .2s ease; }
.ig-item img { display: block; width: 84px; height: 84px; object-fit: cover; border-radius: 8px; }
.ig-dest:hover, .ig-item:hover { background: rgba(255,255,255,.12); color: #fff; }
@media (max-width: 700px) { .ig-dest img { height: 220px; } }