/* -------------------------------------------------------------
   REGLAS RESPONSIVAS Y MEDIA QUERIES
   Legasa Seguros - Adaptabilidad para tabletas y dispositivos móviles
   ------------------------------------------------------------- */

@import url('variables.css');

/* ==========================================================================
   1. DISPOSITIVOS MÓVILES (Celulares en vertical y horizontal: < 768px)
   ========================================================================== */
@media (max-width: 767px) {
  /* --- Sección Global --- */
  .section-padding {
    padding: 3.5rem 0;
  }

  /* --- Hero --- */
  .hero-section {
    padding: 5rem 0;
    text-align: center;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-cnsf-badge {
    justify-content: center;
  }

  /* --- Botón WhatsApp Flotante --- */
  .whatsapp-float {
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
  }

  .whatsapp-float svg {
    width: 24px;
    height: 24px;
  }
}

/* ==========================================================================
   2. TABLETAS Y MÓVILES EN PANTALLA ANCHA (Hasta 991px)
   ========================================================================== */
@media (max-width: 991px) {
  html {
    scroll-padding-top: 150px; /* Mayor margen superior en móviles por apilamiento del header */
  }

  /* --- Navegación Móvil (Menú Hamburguesa) --- */
  .menu-toggle {
    display: block;
  }
  
  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--color-white);
    flex-direction: column;
    align-items: stretch;
    padding: 1.5rem;
    box-shadow: var(--shadow-lg);
    border-top: 1px solid var(--color-border);
    gap: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-normal);
  }
  
  .nav-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  
  .nav-link {
    justify-content: space-between;
    padding: 0.75rem 1rem;
  }
  
  .dropdown-menu {
    position: static;
    width: 100%;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--color-border);
    border-radius: 0;
    margin-top: 0;
    padding: 0 0 0 1rem;
    display: none; /* JS controla el despliegue */
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  
  .nav-item.open .dropdown-menu {
    display: block;
  }
  
  .nav-item.open .nav-link svg {
    transform: rotate(180deg);
  }
  
  .nav-cta {
    margin-top: 1rem;
  }

  /* --- Grid de Tarjetas (Cards Grid) --- */
  .cards-grid {
    grid-template-columns: 1fr; /* Una columna limpia en pantallas táctiles y móviles */
    gap: 1.5rem;
    margin-top: 2rem;
  }
}

/* ==========================================================================
   3. TABLETAS VERTICALES / PANTALLAS MEDIANAS (768px a 991px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991px) {
  /* Grids a 2 columnas para tabletas */
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}