/* ==========================================================================
   Base Styles & Variables
   ========================================================================== */

   :root {
    /* Paleta de Colores Inspirada en Valery (Ajustar según branding exacto) */
    --primary-color: #00529B; /* Azul principal (ej. botones, títulos) */
    --secondary-color: #007bff; /* Azul secundario/más brillante (ej. enlaces, acentos) */
    --accent-color: #4A90E2; /* Un azul más claro para detalles o hover */
    --text-color: #333333; /* Gris oscuro para texto general */
    --light-text-color: #FFFFFF; /* Blanco para fondos oscuros */
    --background-color: #FFFFFF; /* Fondo principal blanco */
    --light-background-color: #f8f9fa; /* Gris muy claro para secciones alternas */
    --border-color: #dee2e6; /* Gris claro para bordes sutiles */
    --success-color: #28a745; /* Verde para mensajes de éxito/certificación */
  
    /* Tipografía */
    --font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-base: 1rem; /* 16px por defecto */
    --line-height-base: 1.6;
  
    /* Espaciado */
    --spacing-unit: 1rem; /* Unidad base para padding/margin */
  
    /* Transiciones */
    --transition-speed: 0.3s;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html {
    font-size: 100%; /* Permite al usuario escalar si lo necesita */
    scroll-behavior: smooth; /* Desplazamiento suave para anclas */
  }
  
  body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--text-color);
    background-color: var(--background-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* ==========================================================================
     Layout & Utilities
     ========================================================================== */
  
  .container {
    width: 90%;
    max-width: 1140px; /* Ancho máximo para desktop */
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-unit);
    padding-right: var(--spacing-unit);
  }
  
  .section-padding {
    padding-top: calc(var(--spacing-unit) * 3);
    padding-bottom: calc(var(--spacing-unit) * 3);
  }
  
  .background-light {
    background-color: var(--light-background-color);
  }
  
  .text-center {
    text-align: center;
  }
  
  img {
    max-width: 100%;
    height: auto;
    display: block; /* Evita espacio extra debajo */
  }
  
  a {
    color: var(--secondary-color);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
  }
  
  a:hover, a:focus {
    color: var(--accent-color);
    text-decoration: underline;
  }
  
  
  /* ==========================================================================
     Typography
     ========================================================================== */
  
  h1, h2, h3, h4, h5, h6 {
    margin-bottom: calc(var(--spacing-unit) * 0.75);
    line-height: 1.3;
    font-weight: 600; /* Un poco más de peso */
    color: var(--primary-color); /* Títulos en azul principal */
  }
  
  h1 {
    font-size: clamp(2rem, 5vw, 2.8rem); /* Tamaño fluido */
  }
  
  h2 {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    text-align: center; /* Centrar títulos de sección */
    margin-bottom: calc(var(--spacing-unit) * 1.5);
  }
  
  h3 {
    font-size: clamp(1.3rem, 3.5vw, 1.7rem);
  }
  
  p {
    margin-bottom: var(--spacing-unit);
  }
  
  ul {
      list-style: none; /* Quitar puntos por defecto */
      padding-left: 0;
  }
  
  /* Para listas dentro de contenido donde sí queremos viñetas */
  article ul, aside ul {
      list-style: disc;
      padding-left: calc(var(--spacing-unit) * 1.5);
      margin-bottom: var(--spacing-unit);
  }
  
  strong {
      font-weight: 600;
      color: var(--primary-color); /* Resaltar texto importante */
  }
  
  /* ==========================================================================
     Buttons
     ========================================================================== */
  .button {
    display: inline-block;
    padding: calc(var(--spacing-unit)*0.7) calc(var(--spacing-unit)*1.5);
    font-size: var(--font-size-base);
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color var(--transition-speed) ease,
                border-color var(--transition-speed) ease,
                color var(--transition-speed) ease;
    margin: calc(var(--spacing-unit) * 0.25); /* Espacio entre botones */
  }
  
  .button-primary {
    background-color: var(--primary-color);
    color: var(--light-text-color);
    border-color: var(--primary-color);
  }
  .button-primary:hover, .button-primary:focus {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--light-text-color);
    text-decoration: none;
  }
  
  .button-secondary {
    background-color: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
  }
  .button-secondary:hover, .button-secondary:focus {
    background-color: var(--primary-color);
    color: var(--light-text-color);
    text-decoration: none;
  }
  
  .button-highlight { /* Alias para primario o un color distinto si se quiere */
      background-color: var(--secondary-color);
      color: var(--light-text-color);
      border-color: var(--secondary-color);
  }
  .button-highlight:hover, .button-highlight:focus {
      background-color: var(--accent-color);
      border-color: var(--accent-color);
      color: var(--light-text-color);
      text-decoration: none;
  }
  
  /* ==========================================================================
     Header
     ========================================================================== */
  .site-header {
    padding: calc(var(--spacing-unit)*0.8) 0;
    background-color: var(--background-color);
    border-bottom: 1px solid var(--border-color);
    position: sticky; /* Header fijo opcional */
    top: 0;
    z-index: 100;
  }
  
  .site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .logo a {
    display: inline-block; /* Para que el area clickeable sea solo el logo */
    text-decoration: none;
  }
  .logo img {
      height: 80px; /* Ajustar altura del logo */
      width: auto;
  }
  
  /* --- Mobile Navigation Toggle --- */
  .nav-toggle {
    display: block; /* Visible en móvil por defecto */
    background: none;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 101; /* Encima del nav */
  }
  
  .nav-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--primary-color);
    margin: 5px 0;
    transition: transform var(--transition-speed) ease, opacity var(--transition-speed) ease;
  }
  
  /* --- Main Navigation --- */
  .main-nav {
    /* Mobile styles: Oculto fuera de la pantalla */
    position: fixed;
    top: 0;
    right: 0;
    width: 80%; /* Ocupa el 80% del ancho */
    max-width: 300px;
    height: 100vh;
    background-color: var(--primary-color);
    padding: calc(var(--spacing-unit) * 4) var(--spacing-unit);
    transform: translateX(100%);
    transition: transform var(--transition-speed) ease-in-out;
    z-index: 99;
    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
  }
  
  .main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .main-nav li {
    margin-bottom: var(--spacing-unit);
  }
  
  .main-nav a {
    color: var(--light-text-color);
    text-decoration: none;
    font-size: 1.1rem;
    padding: calc(var(--spacing-unit) * 0.5) 0;
    display: block;
    transition: color var(--transition-speed);
  }
  
  .main-nav a:hover, .main-nav a:focus {
    color: var(--accent-color);
    text-decoration: none;
  }
  
  /* --- Navigation Open State (Toggled by JS) --- */
  body.nav-open .main-nav {
    transform: translateX(0);
  }
  
  /* Estilos para el botón hamburguesa cuando el menú está abierto */
  body.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  body.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
  }
  body.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
  /* (Opcional) Overlay oscuro detrás del menú móvil */
  body.nav-open::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 98;
  }
  
  
  /* ==========================================================================
     Hero Section
     ========================================================================== */
  .hero {
    background-color: var(--primary-color); /* Fondo azul principal */
    color: var(--light-text-color);
    padding: calc(var(--spacing-unit) * 4) 0;
    text-align: center;
  }
  
  .hero h1 {
    color: var(--light-text-color);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
  }
  
  .hero .subtitle {
    font-size: 1.2rem;
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    opacity: 0.9;
  }
  .hero .subtitle strong {
      color: var(--light-text-color); /* Hacer strong blanco en hero */
      font-weight: 700;
  }
  
  
  .hero .button-primary {
    background-color: var(--light-text-color);
    color: var(--primary-color);
    border-color: var(--light-text-color);
  }
  .hero .button-primary:hover, .hero .button-primary:focus {
    background-color: var(--background-color); /* Blanco un poco más opaco */
    border-color: var(--background-color);
  }
  
  .hero .button-secondary {
    color: var(--light-text-color);
    border-color: var(--light-text-color);
  }
  .hero .button-secondary:hover, .hero .button-secondary:focus {
    background-color: var(--light-text-color);
    color: var(--primary-color);
  }
  
  .certification-badge {
      display: inline-block;
      background-color: var(--success-color);
      color: var(--light-text-color);
      padding: calc(var(--spacing-unit)*0.2) calc(var(--spacing-unit)*0.6);
      border-radius: 15px;
      font-size: 0.8rem;
      font-weight: 500;
      margin-bottom: var(--spacing-unit);
  }
  
  
  /* ==========================================================================
     Homologation Details Section
     ========================================================================== */
  .homologation-details h2 {
      margin-bottom: calc(var(--spacing-unit)*2);
  }
  .homologation-details .content-columns {
    display: flex;
    flex-direction: column; /* Stack en móvil */
    gap: calc(var(--spacing-unit) * 2); /* Espacio entre columnas */
  }
  
  .certification-logos {
    display: flex;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1.5); /* Espacio entre logos */
    margin-bottom: calc(var(--spacing-unit) * 2);
  }
  .certification-logos img {
    max-width: 100px; /* Ajustar tamaño de los logos */
    height: auto;
  }

  .homologation-details article {
    flex: 2; /* Ocupa más espacio si hay disponible */
  }
  .homologation-details aside {
    flex: 1; /* Ocupa menos espacio */
    background-color: var(--light-background-color); /* Fondo ligero para aside */
    padding: var(--spacing-unit);
    border-radius: 5px;
  }
  .homologation-details aside h4 {
      margin-top: 0;
      color: var(--primary-color);
  }
  .homologation-details aside img {
      margin-bottom: var(--spacing-unit);
  }
  
  .text-link { /* Estilo específico si quieres enlaces de texto más prominentes */
      font-weight: 500;
  }
  
  
  /* ==========================================================================
     Product Overview Section
     ========================================================================== */
  .product-overview .section-description {
      text-align: center;
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: calc(var(--spacing-unit) * 2);
  }
  
  .features-grid {
    display: grid;
    grid-template-columns: 1fr; /* Una columna en móvil */
    gap: calc(var(--spacing-unit) * 1.5);
    margin-bottom: calc(var(--spacing-unit) * 2);
  }
  
  .feature-item {
    text-align: center;
    padding: var(--spacing-unit);
    /* border: 1px solid var(--border-color); opcional si quieres borde */
    border-radius: 5px;
  }
  
  .feature-item h3 {
      font-size: 1.2rem; /* Ajustar tamaño para features */
      margin-bottom: calc(var(--spacing-unit)*0.5);
  }
  
  /* Iconos (si los usas, ejemplo con FontAwesome)
  .feature-icon {
      font-size: 2.5rem;
      color: var(--primary-color);
      margin-bottom: var(--spacing-unit);
  } */
  
  .cta-center {
      text-align: center;
  }
  
  /* ==========================================================================
     CTA Final Section
     ========================================================================== */
  .cta-final {
    background-color: var(--primary-color);
    color: var(--light-text-color);
  }
  .cta-final h2 {
      color: var(--light-text-color);
  }
  .cta-final p {
      margin-bottom: calc(var(--spacing-unit)*1.5);
      opacity: 0.9;
  }
  .cta-final .button-highlight {
      background-color: var(--light-text-color);
      color: var(--primary-color);
      border-color: var(--light-text-color);
      padding: calc(var(--spacing-unit)*0.8) calc(var(--spacing-unit)*2); /* Botón más grande */
      font-size: 1.1rem;
  }
  .cta-final .button-highlight:hover, .cta-final .button-highlight:focus {
      background-color: var(--background-color);
      border-color: var(--background-color);
  }
  
  /* ==========================================================================
     Footer
     ========================================================================== */
  .site-footer {
    background-color: var(--light-background-color);
    color: var(--text-color);
    padding: calc(var(--spacing-unit) * 2) 0;
    text-align: center;
    font-size: 0.9rem;
    border-top: 1px solid var(--border-color);
  }
  
  .site-footer p {
      margin-bottom: calc(var(--spacing-unit)*0.5);
      opacity: 0.8;
  }
  
  .footer-nav a {
      color: var(--text-color);
      margin: 0 calc(var(--spacing-unit)*0.5);
  }
  .footer-nav a:hover, .footer-nav a:focus {
      color: var(--primary-color);
  }
  
  /* ==========================================================================
     Media Queries (Adaptaciones para pantallas más grandes)
     ========================================================================== */
  
  /* Tablets y Desktops Pequeños (ej. >= 768px) */
  @media (min-width: 768px) {
    :root {
      --font-size-base: 1.05rem; /* Ligeramente más grande */
    }
  
    .container {
        width: 85%;
    }
  
    /* --- Header & Navigation --- */
    .nav-toggle {
      display: none; /* Ocultar hamburguesa */
    }
  
    .main-nav {
      position: static; /* Volver a flujo normal */
      transform: none;
      height: auto;
      width: auto;
      background-color: transparent;
      padding: 0;
      box-shadow: none;
    }
  
    .main-nav ul {
      display: flex; /* Menú horizontal */
      gap: calc(var(--spacing-unit) * 1.5);
    }
  
    .main-nav li {
      margin-bottom: 0;
    }
  
    .main-nav a {
      color: var(--primary-color); /* Color de texto normal */
      font-size: var(--font-size-base);
      padding: calc(var(--spacing-unit) * 0.25) 0; /* Menos padding vertical */
    }
     .main-nav a:hover, .main-nav a:focus {
      color: var(--accent-color);
      text-decoration: none; /* Quitar subrayado en hover si se prefiere */
    }
  
    /* --- Layouts en columnas --- */
    .homologation-details .content-columns {
        flex-direction: row; /* Lado a lado */
    }
  
    .features-grid {
        /* 2 o 3 columnas, ajustar según preferencia */
        grid-template-columns: repeat(3, 1fr);
    }
    .feature-item {
        text-align: left; /* Alinear a la izquierda en desktop */
    }
    /* Si usas iconos, alinearlos a la izquierda tambien */
    /* .feature-icon { text-align: left; } */
  
     .site-footer .footer-content {
         display: flex;
         justify-content: space-between;
         align-items: center;
         flex-wrap: wrap; /* Por si no cabe todo */
         text-align: left;
     }
     .site-footer p {
         margin-bottom: 0;
     }
      .footer-nav {
         margin-top: 0;
     }
  
  
  } /* Fin media query 768px */
  
  
  /* Desktops más grandes (ej. >= 1024px) */
  @media (min-width: 1024px) {
    .container {
        width: 80%;
    }
      /* Ajustes adicionales si son necesarios para pantallas muy anchas */
    .hero {
        padding: calc(var(--spacing-unit) * 5) 0; /* Más padding vertical */
    }
  }
  
  /* ==========================================================================
     Accessibility
     ========================================================================== */
  /* Estilo para enfoque visible (navegación por teclado) */
  a:focus-visible, button:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.4); /* Sombra sutil de enfoque */
  }
  
  /* Ocultar visualmente pero mantener accesible para lectores de pantalla */
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* ==========================================================================
   Distributors Map Section
   ========================================================================== */
.distributors-map .section-description {
  text-align: center;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: calc(var(--spacing-unit) * 2);
}

.map-distributor-wrapper {
  display: flex;
  flex-direction: column; /* Apilado en móvil */
  gap: calc(var(--spacing-unit) * 2);
}

.map-container {
  flex: 1; /* Ocupa el espacio disponible */
  max-width: 600px; /* Limita el ancho máximo del mapa */
  margin: 0 auto; /* Centrar el mapa si es más estrecho que el wrapper */
  border: 1px solid var(--border-color); /* Borde opcional */
  border-radius: 5px;
  overflow: hidden; /* Para contener el SVG */
  background-color: var(--light-background-color); /* Fondo ligero detrás del mapa */
}

.map-container svg {
  display: block; /* Eliminar espacio extra */
  width: 100%;
  height: auto; /* Mantiene la proporción */
}

/* Estilos para los paths del SVG (ya incluidos en el ejemplo SVG, pero puedes definirlos aquí también) */

/* Estilos para los paths del SVG */ /* Puedes ajustar este comentario */

/* Estilos para los paths del SVG */

.map-container svg .estado {
  fill: #B0B0B0 !important; /*  Gris medio MÁS OSCURO y forzado */
  stroke: #ffffff !important; /* Borde NEGRO y forzado */
  stroke-width: 0.5px !important; /* Borde fino pero visible */
  transition: fill 0.2s ease;
  cursor: pointer;
  visibility: visible !important; /* Asegurar visibilidad */
  opacity: 1 !important; /* Asegurar opacidad */
  display: block !important; /* Asegurar display */
}

/* Mantenemos estos como estaban (sin !important por ahora) */
.map-container svg .estado:hover,
.map-container svg .estado:focus {
  /*fill: var(--accent-color); /* Azul claro al pasar/enfocar */
  fill: var(--accent-color) !important; /* Azul claro al pasar/enfocar */
  outline: none;
}

.map-container svg .estado.active-state {
  /* fill: var(--primary-color); Azul principal al seleccionar */
  fill: var(--primary-color) !important; /* Azul principal al seleccionar */
}


.distributor-list-container {
  flex: 1; /* Ocupa espacio disponible */
  min-height: 250px; /* Altura mínima para que no salte mucho */
  padding: var(--spacing-unit);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  background-color: var(--background-color);
}

.distributor-list-container h3 {
  margin-top: 0;
  margin-bottom: var(--spacing-unit);
  color: var(--primary-color);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: calc(var(--spacing-unit) * 0.5);
}

#distributor-list-content ul {
  list-style: none;
  padding: 0;
}

#distributor-list-content li {
  margin-bottom: var(--spacing-unit);
  padding-bottom: var(--spacing-unit);
  border-bottom: 1px dashed var(--border-color);
}
#distributor-list-content li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

#distributor-list-content strong {
  display: block; /* Nombre en línea separada */
  margin-bottom: calc(var(--spacing-unit) * 0.25);
  color: var(--text-color); /* Usar color de texto normal para el nombre */
  font-weight: 600;
}

#distributor-list-content span {
  display: block; /* Cada detalle en una línea */
  font-size: 0.9rem;
  color: #555; /* Un gris un poco más claro para detalles */
  margin-bottom: calc(var(--spacing-unit) * 0.15);
}
#distributor-list-content span i { /* Si usas iconos FontAwesome */
  margin-right: calc(var(--spacing-unit) * 0.3);
  color: var(--primary-color);
  width: 1em; /* Alinear iconos */
  text-align: center;
}


/* --- Media Query para layout lado a lado --- */
@media (min-width: 992px) { /* Ajusta este breakpoint según necesites */
  .map-distributor-wrapper {
      flex-direction: row; /* Lado a lado en pantallas grandes */
      align-items: flex-start; /* Alinear arriba */
  }

  .map-container {
      flex-basis: 55%; /* Darle más espacio al mapa */
      margin: 0; /* Quitar centrado */
  }

  .distributor-list-container {
      flex-basis: 45%; /* Espacio restante para la lista */
      /* position: sticky; */ /* Opcional: hacer la lista fija al hacer scroll */
      /* top: calc(var(--spacing-unit) * 5); */ /* Ajustar al alto del header + margen */
  }
}