/* ==============================
   MOBILE STYLES
   ============================== */
@media (max-width: 1024px) {
  /* Ajustes generales para tablets y móviles */
 /* Services Grid */
  .services-grid { flex-direction: column; gap: 20px; }
  .service-card { flex-direction: column; width: 100%; align-items: center; }
  .service-text { width: 100%; padding-left: 0; align-items: center; }
  .service-text p {margin-bottom: 1rem;}
  .service-btn { align-self: center; }
  .service-text h2, .service-text p { text-align: center; }
}


@media (max-width: 768px) {
  /* Mobile menu toggle */
  .menu-toggle { display: block; 
    font-size: 2rem; /* aumentamos tamaño */}

  nav ul.nav-links {
    display: none;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    background-color: var(--nav-bg);
    position: absolute;
    top: 60px;
    left: 0;
    padding: 1rem 0;
    align-items: center;
  }

  nav ul.nav-links.active { display: flex; }

  /* Hero */
  .hero-logo img { width: 200px; opacity: 1; }

  /* Secciones */
  section { padding-left: 0.5rem; padding-right: 0.5rem; }
  section h1 { font-size: 2.2rem; }
  section p { font-size: 1rem; }

  /* Sliders */
  .comparison-slider { width: 100%; padding-left: 0; }

  /* Gallery y Swiper */
  .gallery { display: none; }
  div.swiper.mySwiper { display: block; width: 100%; aspect-ratio: auto; }
  
  /* ==============================
   CONTACTO MÓVIL (ajuste horizontal)
   ============================== */
.contact-info {
  flex-direction: column;  /* elementos apilados */
  gap: 10px;               /* espacio entre elementos */
  align-items: center;     
  justify-content: center;
}

.contact-left,
.contact-right {
  flex-direction: row; /* fila */
  gap: 10px;           /* espacio entre iconos */
  align-items: center;
}

.divider {
  width: 80%;             /* separador horizontal */
  height: 1px;            /* delgado */
  background-color: #ccc;
  margin: 10px 0;         /* espacio arriba y abajo */
}

}