/* ===================================================
   FLYER-INSPIRED PREMIUM AESTHETIC
   Degradados negro → azul profundo → rojo vibrante → amarillo
   Inspirado en la paleta del flyer #Educacion del Canal
   =================================================== */

/* Hero overlay con gradiente diagonal flyer */
.hero-slide .hero-overlay {
  background: linear-gradient(135deg, rgba(26,26,26,0.92) 0%, rgba(26,35,126,0.78) 45%, rgba(227,6,19,0.55) 100%) !important;
}
.hero-slide .hero-overlay::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: var(--grad-section);
  background-size: 200% 100%;
  animation: gradFlow 6s linear infinite;
}
@keyframes gradFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Cat-pill con sombra + degradado sutil */
.cat-pill {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%) !important;
  box-shadow: 0 2px 8px rgba(227,6,19,0.35);
  text-shadow: 0 1px 0 rgba(0,0,0,0.15);
}

/* Header con borde inferior degradado */
.site-header {
  border-bottom: 4px solid transparent !important;
  border-image: var(--grad-section) 1;
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%) !important;
}

/* Brand name con degradado de texto */
.brand-name {
  background: var(--grad-banner);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
}

/* Nav con franjas decorativas arriba y abajo */
.main-nav {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%) !important;
  position: relative;
}
/* Líneas decorativas del nav eliminadas (generaban líneas amarillas full-width) */

/* Slogan band con degradado del flyer */
.slogan-band {
  background: var(--grad-banner) !important;
  background-size: 200% 100%;
  animation: gradFlow 14s ease infinite;
  /* bordes amarillos eliminados — generaban líneas full-width */
}
.slogan-band-inner { color: white; font-weight: 800; letter-spacing: 1.5px; text-shadow: 0 2px 6px rgba(0,0,0,0.4); }

/* Section title premium con barra colorida */
.section-title-premium {
  position: relative;
  padding-left: 22px !important;
}
.section-title-premium::before {
  content: '' !important;
  position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 8px; height: auto !important; min-height: 32px;
  background: linear-gradient(180deg, var(--red) 0%, var(--yellow) 50%, var(--navy) 100%);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(227,6,19,0.3);
}
/* línea amarilla bajo títulos eliminada por petición del usuario */

/* News card con borde degradado al hover */
.news-card {
  border: 1px solid #ececec; border-radius: 12px; overflow: hidden;
  transition: all .3s ease; background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(26,35,126,0.18), 0 0 0 1px rgba(227,6,19,0.15);
}
.news-card .card-body { padding: 14px 16px 16px; }
.news-card h3 {
  font-family: var(--font-title); font-weight: 800;
  line-height: 1.25; font-size: 16px; margin: 8px 0;
  color: var(--text);
}
.news-card:hover h3 { color: var(--red); }

/* Reels overlay degradado azul→rojo */
.reel-overlay {
  background: linear-gradient(0deg, rgba(26,26,26,0.95) 0%, rgba(26,35,126,0.4) 70%, transparent 100%) !important;
}
.reel-card { border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.reel-card:hover { transform: scale(1.03); }
.reel-play {
  width: 50px !important; height: 50px !important;
  background: linear-gradient(135deg, var(--red), var(--red-dark)) !important;
  box-shadow: 0 4px 16px rgba(227,6,19,0.5);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: white;
}

/* Reels-section fondo oscuro con degradado */
.reels-section {
  background: var(--grad-hero) !important;
  position: relative;
  padding: 30px 0 !important;
}
.reels-section::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--grad-section);
}
.reels-section .section-title.light {
  color: white !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  padding-left: 22px;
  position: relative;
}
.reels-section .section-title.light::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 8px; background: linear-gradient(180deg, var(--yellow), var(--red));
  border-radius: 4px;
}

/* Widget headers con degradados */
.widget-header.red {
  background: var(--grad-red) !important;
  color: white !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  border-left: 5px solid var(--yellow);
}
.widget-header.yellow {
  background: var(--grad-yellow) !important;
  color: #4A2A00 !important;
  border-left: 5px solid var(--red);
}
.widget-header {
  background: linear-gradient(135deg, var(--navy), var(--navy-dark)) !important;
  color: white !important;
  border-left: 5px solid var(--red);
}

/* Aside widget */
.aside-widget {
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  border: 1px solid #ececec;
}

/* CTA boxes con degradados ricos */
.cta-box.red {
  background: var(--grad-banner) !important;
  position: relative; overflow: hidden;
}
.cta-box.red::before {
  content: ''; position: absolute; top: -50%; right: -10%; width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,214,0,0.15) 0%, transparent 70%);
}
.cta-box.yellow {
  background: linear-gradient(135deg, var(--yellow) 0%, #FFD21F 100%) !important;
  color: #1A1A1A !important;
}
.cta-box {
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* Footer con degradado */
.site-footer {
  background: linear-gradient(180deg, #1A1A1A 0%, #1A237E 50%, #1A1A1A 100%) !important;
  position: relative;
}
.site-footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: var(--grad-section);
  background-size: 200% 100%;
  animation: gradFlow 8s linear infinite;
}

/* Botones con degradado */
.btn-red {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%) !important;
  color: white !important; font-weight: 700;
  padding: 10px 20px; border-radius: 8px;
  box-shadow: 0 4px 14px rgba(227,6,19,0.35);
  transition: all .25s;
  display: inline-block;
}
.btn-red:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(227,6,19,0.5);
}
.btn-white {
  background: white; color: var(--red) !important; font-weight: 800;
  padding: 10px 20px; border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}

/* Live pill con animación */
.live-pill {
  background: linear-gradient(135deg, #FF3344, #E30613) !important;
  color: white !important;
  box-shadow: 0 0 0 0 rgba(255,51,68,0.7);
  animation: pulseLive 2s infinite;
}
@keyframes pulseLive {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,51,68,0.7); }
  50% { box-shadow: 0 0 0 8px rgba(255,51,68,0); }
}

/* CTA pill (PAUTE) — amarillo brillante */
.cta-pill {
  background: var(--grad-yellow) !important;
  color: #4A0000 !important; font-weight: 900;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

/* Hero-side panel */
.hero-side-header {
  background: linear-gradient(135deg, var(--navy), var(--navy-dark)) !important;
  color: white !important; padding: 12px 16px;
  font-family: var(--font-title); font-weight: 800;
  border-left: 5px solid var(--red);
}

/* Live badge */
.live-badge {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%) !important;
  color: white !important;
  padding: 12px 16px; border-radius: 8px;
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; text-transform: uppercase; font-size: 12px;
  box-shadow: 0 4px 14px rgba(227,6,19,0.4);
  margin-top: 12px;
  border: 2px solid rgba(255,214,0,0.4);
}

/* Newsletter form */
.newsletter input {
  background: rgba(255,255,255,0.95);
  border: 2px solid rgba(0,0,0,0.1);
  padding: 10px 14px; border-radius: 8px 0 0 8px;
  font-size: 14px;
}
.newsletter button {
  background: linear-gradient(135deg, #1A1A1A, #8A0000) !important;
  color: var(--yellow) !important;
  padding: 10px 20px; border-radius: 0 8px 8px 0;
  font-weight: 800; border: none;
  transition: all .25s;
}
.newsletter button:hover {
  background: linear-gradient(135deg, #8A0000, #1A1A1A) !important;
  color: white !important;
}

/* .section-divider eliminado por petición del usuario (generaba línea amarilla cruzando la pantalla) */
.section-divider { display: none !important; }

/* Cat-pill mini en side news */
.cat-mini {
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  color: white !important;
  padding: 2px 8px; border-radius: 12px;
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .5px; display: inline-block;
}

/* WhatsApp float button */
.wa-float {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  width: 60px; height: 60px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: fixed; bottom: 24px; right: 24px;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
  z-index: 1000;
  animation: pulseWA 3s infinite;
  border: 3px solid white;
}
@keyframes pulseWA {
  0%, 100% { box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5); }
  50% { box-shadow: 0 6px 28px rgba(37, 211, 102, 0.8); }
}

/* Director widget — más prominente */
.director-widget { padding: 20px; text-align: center; }
.dir-photo-circle {
  width: 100px; height: 100px; border-radius: 50%;
  margin: 0 auto 12px; overflow: hidden;
  background: var(--grad-banner);
  border: 4px solid var(--yellow);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.dir-photo-circle img { width: 100%; height: 100%; object-fit: cover; }
.director-fallback {
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 900; font-size: 28px;
  font-family: var(--font-title);
  width: 100%; height: 100%;
}

/* Admin access btn */
.admin-access-btn {
  background: white;
  border: 2px solid var(--red);
  color: var(--red); font-weight: 800;
  padding: 7px 14px; border-radius: 22px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; transition: all .25s;
  box-shadow: 0 2px 8px rgba(227,6,19,0.15);
}
.admin-access-btn:hover {
  background: var(--grad-red) !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(227,6,19,0.4);
}

/* Search-box estilo flyer */
.search-box {
  display: flex; align-items: center;
  background: white; border: 2px solid #e5e5e5;
  border-radius: 22px; padding: 4px 6px 4px 14px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}
.search-box input { border: none; padding: 6px 8px; font-size: 13px; min-width: 220px; background: transparent; outline: none; }
.search-box button {
  background: var(--grad-red); color: white;
  border: none; border-radius: 16px; padding: 6px 10px;
  cursor: pointer; box-shadow: 0 2px 6px rgba(227,6,19,0.3);
}

/* Breaking strip */
.breaking-strip {
  background: linear-gradient(90deg, #000 0%, #1A237E 50%, #E30613 100%) !important;
  background-size: 200% 100%;
  animation: gradFlow 12s linear infinite;
}

/* Hero dots */
.hero-dot {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid white;
  background: rgba(255,255,255,0.3);
  cursor: pointer; transition: all .25s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.hero-dot.active {
  background: var(--yellow);
  border-color: var(--yellow);
  transform: scale(1.3);
}

/* Ver más link */
.ver-mas {
  color: var(--red) !important; font-weight: 800; font-size: 13px;
  padding: 6px 14px; border-radius: 16px; background: rgba(227,6,19,0.08);
  transition: all .25s; display: inline-block;
}
.ver-mas:hover {
  background: var(--grad-red) !important;
  color: white !important;
  transform: translateX(4px);
}

/* Top bar (cuando se agregue datos del flyer en pequeño) */
.topbar {
  background: var(--grad-banner) !important;
  color: white;
  font-size: 12px;
  padding: 6px 0;
}
.topbar a { color: var(--yellow); }