/* ===================================================================
   ESTILOS DE PÁGINAS · Inicio (hero) y Guías
   =================================================================== */

/* ====================== HERO (inicio) ====================== */
.hero {
  background: linear-gradient(135deg, var(--rojo-cetis), var(--rojo-oscuro));
  color: var(--blanco);
  border-radius: var(--radio);
  padding: 36px 30px;
  margin-bottom: 26px;
  display: flex; align-items: center; gap: 24px;
  box-shadow: var(--sombra);
}
.hero .hero-texto { flex: 1; min-width: 0; }
.hero h1 { font-size: 2rem; font-weight: 800; line-height: 1.15; }
.hero p { opacity: 0.95; margin-top: 8px; max-width: 540px; }
.hero .hero-acciones { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.hero .hero-logo { width: 120px; flex-shrink: 0; }

/* ====================== GUÍAS ====================== */
.grid-guias { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.guia-card {
  background: var(--blanco); border: 1px solid var(--gris-borde);
  border-radius: var(--radio); padding: 18px; display: flex; flex-direction: column; gap: 12px;
  transition: box-shadow var(--transicion);
}
.guia-card.resaltado { border-color: var(--rojo-cetis); box-shadow: 0 0 0 3px var(--rojo-suave); }
.guia-cabecera { display: flex; gap: 12px; align-items: flex-start; }
.guia-cabecera .icono-tema {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--rojo-suave); border-radius: 12px;
}
.video-embed {
  position: relative; padding-bottom: 56.25%; height: 0;
  border-radius: var(--radio-chico); overflow: hidden; background: #000;
}
.video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.nota-video { font-size: 0.78rem; color: var(--gris-texto); }

/* ---- Sección de canales del tema ---- */
.nombre-tema { font-weight: 800; font-size: 1rem; }
.desc-tema { font-size: 0.85rem; color: var(--gris-texto); }

/* ====================== RESPONSIVE ====================== */
@media (max-width: 640px) {
  .hero { flex-direction: column-reverse; text-align: center; padding: 22px 18px; gap: 16px; }
  .hero .hero-logo { width: 80px; }
  .hero h1 { font-size: 1.55rem; }
  .hero p { font-size: 0.9rem; }
  .hero .hero-acciones { justify-content: center; }
  .grid-guias { grid-template-columns: 1fr; gap: 12px; }
  .guia-card { padding: 16px; }
}

@media (max-width: 360px) {
  .hero h1 { font-size: 1.35rem; }
  .hero .hero-logo { width: 64px; }
}