:root {
      --bg-dark: #000000;
      --bg-card: #333;
      --text-main: #f3f4f6;
      --accent-gold: #f59e0b;
      --accent-blue: #3b82f6;
    }

    * { box-sizing: border-box; }
    body { margin: 0; font-family: system-ui, -apple-system, sans-serif; background-color: var(--bg-dark); color: var(--text-main); line-height: 1.5; }

    /* Navigation */
    .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; background: rgba(0,0,0,0.75); backdrop-filter: blur(10px); }
    .nav-brand { font-weight: bold; font-size: 1.1rem; color: var(--text-main); text-decoration: none; letter-spacing: 0.5px; }
    .nav-links { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
    .nav-links a { color: #d1d5db; text-decoration: none; font-size: 0.95rem; transition: color 0.2s ease; }
    .nav-links a:hover { color: var(--accent-gold); }

    /* Hero */
    .hero-container { position: relative; width: 100%; height: 85vh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
    .hero-video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); object-fit: cover; z-index: 1; }
    .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.5) 65%, var(--bg-dark) 100%); z-index: 2; }
    .hero-content { position: relative; z-index: 3; text-align: center; padding: 0 20px; margin-top: 40px; }
    .hero-title { font-size: clamp(2.5rem, 6vw, 4.5rem); margin: 0; text-shadow: 0 4px 12px rgba(0,0,0,0.8); }
    .hero-subtitle { font-size: 1.25rem; color: #d1d5db; margin-top: 10px; }

    /* Main */
    .content-section { padding: 60px 20px; max-width: 1200px; margin: 0 auto; }
    .grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
    .card { background-color: var(--bg-card); border: 1px solid #27272a; border-radius: 12px; padding: 24px; }
    .card.alta { border-color: var(--accent-gold); }
    .card h3 { color: var(--accent-gold); margin-top: 0; }
    .badge { background-color: var(--accent-blue); color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; }
    a.btn-link { color: var(--accent-gold); text-decoration: none; font-weight: bold; display: inline-block; margin-top: 10px; }

    @media (max-width: 768px) {
      .navbar { flex-direction: column; gap: 10px; padding: 12px 15px; }
      .nav-links { flex-wrap: wrap; justify-content: center; gap: 12px; font-size: 0.85rem; }
    }

    .cta { text-align: center; padding: 40px 20px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0)); border-radius: 12px; }
    .cta a { display: inline-block; background: var(--accent-gold); color: black; padding: 10px 16px; border-radius: 8px; font-weight: bold; text-decoration: none; }

  
  

    /* CSS submenús Desplegable  */
  .nav-links > li {
  position: relative; /* Importante para posicionar el submenú */
  }

/* --- MAGIA DEL DESPLEGABLE --- */

/* Ocultar el submenú por defecto */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%; /* Lo coloca justo debajo del botón principal */
  left: 0;
  background-color: #333;
  min-width: 160px;
  list-style: none;
  padding: 0;
  margin: 0;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  z-index: 100; /* Asegura que quede por encima del banner o contenidos */
}

/* Estilos de los enlaces del submenú */
.dropdown-menu a {
  padding: 12px 16px;
}

/* Mostrar el submenú al pasar el ratón (Hover) */
.dropdown:hover .dropdown-menu {
  display: block;
}









/* ==========================================================================
   1. VARIABLES GLOBALES (Para cambiar colores y fuentes fácilmente)
   ========================================================================== */
:root {
  --fuente-principal: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  /* Colores de la interfaz */
  --color-oscuro-base: #2c3e50;    /* Color principal de navbar y cabeceras */
  --color-oscuro-hover: #34495e;   /* Color al pasar el ratón en la navbar */
  --color-texto-oscuro: #333333;   /* Texto general */
  --color-texto-claro: #ffffff;    /* Texto en fondos oscuros */
  
  /* Colores de tablas y componentes */
  --color-borde: #e0e0e0;
  --color-fila-cebra: #f8f9fa;
  --color-fila-hover: #f1f3f5;
  --sombra-suave: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   2. BARRA DE NAVEGACIÓN (Navbar con Desplegable)
   ========================================================================== */
.navbar {
  background-color: var(--color-oscuro-base);
  padding: 10px 20px;
  font-family: var(--fuente-principal);
}

.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.nav-links > li {
  position: relative; /* Ancla necesaria para el submenú */
}

.nav-links a {
  display: block;
  color: var(--color-texto-claro);
  text-decoration: none;
  padding: 14px 20px;
  font-size: 15px;
}

.nav-links a:hover {
  background-color: var(--color-oscuro-hover);
}

/* --- Submenú Desplegable --- */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--color-oscuro-base);
  min-width: 180px;
  list-style: none;
  padding: 0;
  margin: 0;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.15);
  z-index: 100;
}

.dropdown-menu a {
  padding: 12px 16px;
  font-size: 14px;
}

.dropdown:hover .dropdown-menu {
  display: block; /* Muestra el submenú al pasar el ratón */
}


/* ==========================================================================
   3. CUERPO PRINCIPAL Y WIDGET METEOROLÓGICO (Transparente en Esquina)
   ========================================================================== */
.cuerpo-principal {
  position: relative; /* Ancla necesaria para posicionar el tiempo */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 60px; /* Evita que el widget tape el contenido */
  font-family: var(--fuente-principal);
}

.widget-esquina-tiempo {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 150px; /* Tamaño compacto para solo el icono, palabra y grados */
  z-index: 10;
  background: transparent;
}

.contenido-pagina {
  padding: 20px;
}


/* ==========================================================================
   4. BANNER ROTATIVO (Intercambiador de HTMLs / Iframes)
   ========================================================================== */
.banner-rotativo-container {
  position: relative;
  width: 100%;
  height: 220px; /* Ajusta según la altura de los iframes que metas */
  overflow: hidden;
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  margin-bottom: 30px;
}

.banner-rotativo-container .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 1;
}

.banner-rotativo-container .slide.active {
  opacity: 1;
  z-index: 2;
}

.banner-rotativo-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}





/* ==========================================================================
   FRAGMENTO CSS PARA LA ANIMACIÓN DEL BANNER ASTRONÓMICO
   ========================================================================== */

/* Contenedor del banner (opcional, ajusta la altura que desees) */
#banner-astronomico div {
  position: relative;
  width: 100%;
  height: 400px; /* Define la altura que mejor se adapte a tus imágenes */
  overflow: hidden;
}

/* Oculta todas las imágenes del banner por defecto */
#banner-astronomico img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ajusta la imagen al contenedor sin deformarla */
  opacity: 0;
  z-index: 1;
  transition: opacity 0.8s ease-in-out; /* Transición suave de desvanecimiento */
}

/* Muestra únicamente la imagen activa controlada por el JavaScript */
#banner-astronomico img[data-slide="active"] {
  opacity: 1;
  z-index: 2;
}








/* ==========================================================================
   ESTILOS DE LA HUERTA (TEXTO BLANCO ROTO Y TRANSPARENCIA)
   ========================================================================== */

/* Fondo general transparente y texto blanco roto para la zona de la huerta */
#seccion-huerta, 
#seccion-huerta table, 
#seccion-huerta section {
  background: transparent !important;
  color: #f5f5f5 !important;
}

/* Encabezados en blanco puro para contrastar */
#seccion-huerta h1, 
#seccion-huerta h2, 
#seccion-huerta h3, 
#seccion-huerta th {
  color: #ffffff !important;
}

/* Líneas divisorias de la tabla-calendario */
#seccion-huerta th, 
#seccion-huerta td {
  border-bottom: 1px solid rgba(245, 245, 245, 0.15) !important;
}

/* Efecto cebra translúcido para la tabla de 100 vegetales */
#seccion-huerta tbody tr:nth-of-type(even) {
  background-color: rgba(245, 245, 245, 0.04) !important;
}

#seccion-huerta tbody tr:hover {
  background-color: rgba(245, 245, 245, 0.08) !important;
}

/* --- BANNER DE LA HUERTA (Ajustado a 3 segundos) --- */
#banner-huerta div {
  position: relative;
  width: 100%;
  overflow: hidden;
}

#banner-huerta img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.5s ease-in-out; /* Transición rápida para ciclo de 3s */
}

#banner-huerta img[data-slide="active"] {
  opacity: 1;
  z-index: 2;
}