/* ==========================================================================
   Variables de Color y Tipografía Base (Grupo Biomesa)
   ========================================================================== */
:root {
  /* Paleta Principal Biomesa (Emeralds y Grises) */
  --color-primary: #059669; /* emerald-600 */
  --color-primary-hover: #047857; /* emerald-700 */
  --color-primary-dark: #065f46; /* emerald-800 */
  --color-primary-light: #d1fae5; /* emerald-100 */
  --color-primary-text-on-dark: #a7f3d0; /* emerald-200 / 300 for highlights */

  --color-text-base: #1f2937; /* gray-800 */
  --color-text-muted: #4b5563; /* gray-600 */
  --color-text-on-primary: #ffffff;

  --color-background-light: #f9fafb; /* gray-50 */
  --color-background-white: #ffffff;
  --color-border: #e5e7eb; /* gray-200 */

  /* Fuentes */
  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-display: 'Poppins', var(--font-family-sans); /* Poppins con fallback a Inter/sans */

  /* Paletas Regionales (Acentos) - Las aplicaremos más adelante con clases específicas */
  --color-accent-iberica: #1D4ED8;       /* blue-700 */
  --color-accent-iberica-light: #DBEAFE; /* blue-100 */
  --color-accent-america: #0284C7;       /* sky-600 */
  --color-accent-america-light: #E0F2FE; /* sky-100 */
  --color-accent-delsur: #84CC16;        /* lime-500 */
  --color-accent-delsur-light: #F7FEE7;  /* lime-100 */
}

/* ==========================================================================
   Reseteo Básico y Estilos Globales
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px; /* Base para REMs */
}

body {
  font-family: var(--font-family-sans);
  color: var(--color-text-base);
  background-color: var(--color-background-light);
  line-height: 1.65; /* Un poco más de espacio entre líneas */
}

/* ==========================================================================
   Tipografía Aplicada (Complementando Tailwind)
   ========================================================================== */

/* Aplicar Poppins a los encabezados por defecto */
h1, h2, h3, h4, h5, h6,
.font-poppins { /* Clase helper por si la necesitamos */
  font-family: var(--font-family-display);
  color: var(--color-primary-dark); /* Color base para encabezados */
}

h1 { font-size: 2.5rem; line-height: 1.2; font-weight: 800; margin-bottom: 1rem;} /* ~text-4xl */
h2 { font-size: 2rem; line-height: 1.25; font-weight: 700; margin-bottom: 0.75rem;} /* ~text-3xl */
h3 { font-size: 1.5rem; line-height: 1.3; font-weight: 600; margin-bottom: 0.5rem;} /* ~text-2xl */

/* Aplicar Inter al cuerpo y elementos de UI por defecto */
p, li, a, button, input, select, textarea,
.font-inter { /* Clase helper */
  font-family: var(--font-family-sans);
}

p {
  margin-bottom: 1.25rem;
  color: var(--color-text-muted);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

/* ==========================================================================
   Ajustes Específicos (Header, Botones, Formularios)
   ========================================================================== */

/* --- Header Nav --- */
/* El HTML ya tiene 'sticky top-0 z-50 h-24' que definen el comportamiento */
.header-nav {
  /* background-color: var(--color-background-white); Ya está en el HTML con bg-white */
  /* box-shadow: 0 2px 4px rgba(0,0,0,0.05); Ya está con shadow */
}
.header-nav .font-poppins { /* Asegura que los ítems del menú usen Poppins */
  font-family: var(--font-family-display);
}
/* Para el texto "Grupo Biomesa" y los links del menú en el nav */
.header-nav span, .header-nav ul a, .header-nav ul button {
    font-family: var(--font-family-display); /* Poppins */
}
.header-nav ul a, .header-nav ul button {
    font-weight: 500; /* Medium */
}
.header-nav .group .group-hover\:block a { /* Dropdown items */
    font-family: var(--font-family-sans); /* Inter para el dropdown */
}


/* --- Botones --- */
/* Ya usas clases de Tailwind para botones. Esto es por si necesitas un estilo base extra. */
/* .btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-family-display);
  font-weight: 600;
  border-radius: 0.375rem;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  text-align: center;
}
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
}
.btn-primary:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
} */

/* --- Formularios --- */
/* Tailwind Forms plugin es muy bueno para esto, pero si no lo usas, algunos estilos base: */
input[type="text"],
input[type="email"],
input[type="tel"], /* Añadido para teléfono */
input[type="number"],
textarea,
select {
  font-family: var(--font-family-sans);
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem; /* rounded-md */
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2); /* Anillo de foco esmeralda */
}
textarea {
  min-height: 120px;
}
label {
  font-family: var(--font-family-sans); /* Inter para labels */
  font-weight: 500; /* medium */
  margin-bottom: 0.25rem;
  display: block;
}

/* --- Estilos para el Mapa Leaflet --- */
.leaflet-popup-content-wrapper {
  border-radius: 8px !important; /* Bordes más redondeados para el popup */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}
.leaflet-popup-content {
  font-family: var(--font-family-sans) !important; /* Inter para el contenido del popup */
  margin: 12px 18px !important; /* Más padding interno */
  line-height: 1.5 !important;
}
.leaflet-popup-content strong {
  font-family: var(--font-family-display) !important; /* Poppins para el nombre de la región en el popup */
  font-weight: 600 !important;
}
.leaflet-popup-tip {
  /* Puedes ocultar la "flechita" si prefieres un look más limpio, o estilizarla */
}

/* ==========================================================================
   Clases de Utilidad (Complementarias a Tailwind)
   ========================================================================== */
.text-shadow-sm {
  text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}
.text-shadow-md {
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Ajuste para video en Hero para que playsinline funcione mejor en iOS */
#hero video {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ==========================================================================
   Estilos específicos de tus archivos HTML (si los necesitas fuera de Tailwind)
   Este style.css será el "style.css" que ya tienes enlazado.
   En el futuro, podrías considerar usar el CLI de Tailwind para compilar
   tus clases de Tailwind y tu CSS personalizado en un solo archivo.
   Por ahora, esto funcionará bien.
   ========================================================================== */

/* Ejemplo de cómo aplicarías el color de acento a un título de Biomesa Ibérica:
   (Esto lo haríamos luego en las páginas específicas o con clases JS)

.region-iberica h2, .region-iberica h3 {
  color: var(--color-accent-iberica);
}
*/