/* ===================================================
   LAYOUT FIXES — Aplicar después de styles.css y flyer-theme.css
   =================================================== */

/* === #1 NAVBAR no pegado al top — fluye con el contenido === */
.site-header {
  position: static !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
.main-nav {
  position: static !important;
  top: auto !important;
  margin-top: 0 !important;
  box-shadow: 0 4px 14px rgba(227,6,19,0.25);
}
/* Header con padding más cómodo y alineación */
.site-header {
  padding: 14px 28px !important;
  align-items: center !important;
  gap: 18px !important;
}

/* === #2 LOGO bien proporcionado === */
.brand {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
.brand-logo {
  width: 64px !important;
  height: 64px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 50% !important;
  background: white;
  padding: 2px;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.brand-text {
  min-width: 0;
  white-space: nowrap;
}
.brand-name {
  font-size: 17px !important;
  line-height: 1.1 !important;
}
.brand-slogan {
  font-size: 12px !important;
  margin-top: 2px !important;
}

/* === #3 TICKER ÚLTIMA HORA — más compacto, sin pause on hover === */
.ticker-bar {
  height: 30px !important;
  background: linear-gradient(90deg, #000 0%, #1A237E 50%, #000 100%) !important;
  background-size: 200% 100%;
  animation: tickerBgFlow 15s ease infinite;
}
@keyframes tickerBgFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.ticker-label {
  padding: 0 14px !important;
  font-size: 10px !important;
  letter-spacing: 1.2px !important;
}
.ticker-content {
  animation-duration: 38s !important;
  animation-play-state: running !important;
}
/* Quitar pausa en hover */
.ticker-bar:hover .ticker-content,
.ticker-track:hover .ticker-content,
.ticker-content:hover {
  animation-play-state: running !important;
}
.ticker-item {
  padding: 0 28px !important;
  font-size: 12px !important;
}
.ticker-item::after { margin-left: 28px !important; }

/* === #4 HERO-SIDE "Más noticias" — scroll independiente con header sticky === */
.hero {
  /* Asegurar que el aside tenga la altura del slide */
  align-items: stretch;
}
.hero-side {
  display: flex !important;
  flex-direction: column !important;
  height: 500px;            /* mismo alto que .hero-slides */
  max-height: 500px;
  overflow: hidden !important;   /* contiene el scroll interno */
  position: relative;
  background: #1A1A1A !important;
}
.hero-side-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  background: linear-gradient(135deg, #1A237E 0%, #0D1357 100%) !important;
  color: white !important;
  padding: 12px 16px !important;
  border-bottom: 2px solid var(--red, #E30613);
  border-left: 5px solid var(--yellow, #FFD600);
  font-family: var(--font-title);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
.side-news-list {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden;
  overscroll-behavior: contain;   /* No propaga scroll al body */
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--red, #E30613) #1a1a1a;
}
.side-news-list::-webkit-scrollbar { width: 6px; }
.side-news-list::-webkit-scrollbar-track { background: #1a1a1a; }
.side-news-list::-webkit-scrollbar-thumb { background: var(--red, #E30613); border-radius: 3px; }
.side-news-list::-webkit-scrollbar-thumb:hover { background: #FF3344; }

/* En tablet/móvil, el aside debe poder verse completo (no fijo a 500px) */
@media (max-width: 900px) {
  .hero-side { height: auto; max-height: 360px; }
}

/* Dark mode reglas movidas a darkmode.css */