/* ============================================================================
   home.css  —  Secciones propias de la HOME (estructura común; el HERO lo
   tematiza cada variante en su variante-*.css).
   ============================================================================ */

/* ---------- HERO (base; las variantes redefinen fondo y disposición) ---------- */
.hero {
  position: relative; min-height: var(--hero-min-h); display: flex; align-items: center;
  justify-content: center; text-align: center; color: #fff; overflow: hidden;
  background: var(--azul-marino);
}
.hero__inner { position: relative; z-index: 2; max-width: 880px; padding: var(--sp-8) var(--sp-4); }
.hero__title { color: #fff; font-size: clamp(2rem, 5vw, 3.4rem); margin-bottom: var(--sp-3); text-shadow: 0 2px 20px rgba(0,0,0,.3); }
.hero__subtitle { font-size: clamp(1rem, 2.2vw, 1.3rem); color: rgba(255,255,255,.92); margin-bottom: var(--sp-5); }
.hero__cta { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

/* Texto rotativo (variante C lo usa) */
.rotating-text-wrapper { position: relative; height: 3.4em; }
.rotating-text-wrapper h2 {
  position: absolute; inset: 0; color: #fff; font-size: clamp(1.8rem, 4.5vw, 3rem);
  opacity: 0; animation: rotateText 9s linear infinite;
}
.rotating-text-wrapper h2:nth-child(1) { animation-delay: 0s; }
.rotating-text-wrapper h2:nth-child(2) { animation-delay: 3s; }
.rotating-text-wrapper h2:nth-child(3) { animation-delay: 6s; }
@keyframes rotateText { 0%,28%{opacity:0;transform:translateY(12px);} 4%,24%{opacity:1;transform:translateY(0);} 32%,100%{opacity:0;} }

/* Indicador "scroll" (variante C) */
.hero__scroll { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 2; color: #fff; font-size: 1.6rem; animation: bounce 1.8s infinite; }
@keyframes bounce { 0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,10px);} }

/* ---------- Franja de accesos rápidos bajo el hero (variantes B/D) ---------- */
.hero-accesos { background: #fff; box-shadow: var(--sombra-md); border-radius: var(--radio-lg); margin: -40px auto var(--sp-6); position: relative; z-index: 5; max-width: var(--ancho-max); padding: var(--sp-4); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.hero-accesos a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--sp-3); border-radius: var(--radio); color: var(--azul-marino); font-weight: 600; font-size: .85rem; text-align: center; transition: background var(--t); }
.hero-accesos a:hover { background: var(--azul-tinte); }
.hero-accesos img { width: 34px; height: 34px; object-fit: contain; }
@media (min-width: 768px) { .hero-accesos { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Historia ---------- */
.hero-static { text-align: center; }
.hero-static .hero-content { max-width: 760px; margin: 0 auto; }
.historia-completa { overflow: hidden; opacity: 0; transition: opacity .5s ease; }
.historia-completa.show { opacity: 1; }
.historia-container { max-width: 820px; margin: 0 auto; background: var(--bg-alt); padding: var(--sp-6); border-radius: var(--radio); border-left: 5px solid var(--acento); }
.historia-paragraph { color: var(--texto-suave); }

/* ---------- MVV ---------- */
.mvv-flip-section { text-align: center; }
.mvv-flip-intro { color: var(--texto-suave); max-width: 640px; margin: 0 auto var(--sp-5); }

/* ---------- Accesos rápidos (sección oscura) ---------- */
.quick-access { background: var(--azul-marino); color: #fff; padding: var(--sp-9) 0; }
.quick-access .seccion-titulo { color: #fff; }
.quick-access-intro { text-align: center; color: rgba(255,255,255,.85); margin-bottom: var(--sp-6); }

/* ---------- Trámites ---------- */
.tramites-section { text-align: center; }
.tramites-intro { color: var(--texto-suave); max-width: 720px; margin: 0 auto; }

/* ---------- Mapa ---------- */
#mapa { text-align: center; position: relative; z-index: 1; }
#mapa #map { max-width: var(--ancho-max); margin: var(--sp-5) auto 0; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); border: 1px solid var(--borde); }
#mapa .leaflet-container,
#mapa .leaflet-pane { z-index: 1; }
#mapa .leaflet-top,
#mapa .leaflet-bottom { z-index: 2; }

/* envoltura genérica para centrar secciones con ancho */
.noticias-section, .mvv-flip-section, .tramites-section, .quick-access, #descripcion, #mapa, .galeria-eventos { padding-left: var(--sp-4); padding-right: var(--sp-4); }
.noticias-section { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }