/*==========================================
    RESPONSIVE.CSS
==========================================*/

@media (max-width: 1200px) {
  section { padding: 90px 5%; }
}

@media (max-width: 992px) {
  header { padding: 0 30px; }
  nav ul { gap: 18px; }
  .hero-content h1 { font-size: 58px; }
  .about { grid-template-columns: 1fr; text-align: center; }
  .about-content h2 { text-align: center; }
  .appointment form { grid-template-columns: 1fr; }
  .appointment button { grid-column: auto; }
}

/*==============================
          CELULAR
===============================*/
@media (max-width: 768px) {
  header {
    height: 80px;
    padding: 0 20px;
  }

  .logo img {
    width: 55px; height: 55px; /* Mantiene la proporción circular */
  }

  /*==== MENÚ HAMBURGUESA ====*/
  .menu-toggle {
    display: block; /* Muestra el icono solo en celular */
  }

  nav ul {
    flex-direction: column;
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    background: rgba(17, 17, 17, 0.98);
    backdrop-filter: blur(15px);
    display: none; /* Oculto por defecto */
    padding: 30px 0;
    gap: 25px;
    text-align: center;
    border-bottom: 2px solid var(--primary);
  }

  /* Clase que el Javascript activa para mostrar el menú */
  nav ul.active {
    display: flex; 
  }

  nav a {
    font-size: 20px;
    display: block;
  }

  .hero-content h1 { font-size: 44px; }
  h2 { font-size: 34px; }

  /* Ajuste de grids a 1 columna */
  .cards, .gallery-grid, .testimonial-container {
    grid-template-columns: 1fr;
  }

  .footer-content { grid-template-columns: 1fr; text-align: center; gap: 40px; }
  .footer-brand img { margin: 0 auto 20px auto; }
  .footer-links ul { align-items: center; }
  .social-icons-footer { justify-content: center; }
  
  .whatsapp { width: 60px; height: 60px; font-size: 28px; right: 20px; bottom: 20px; }
}

@media (max-width: 576px) {
  section { padding: 70px 20px; }
  .hero-content h1 { font-size: 36px; }
  h2 { font-size: 30px; }
  .card img { height: 220px; }
  .member img { height: 350px; }
}
/*====================================================
   ESTILOS GENERALES: TARJETA DE CONTACTO CENTRADA
====================================================*/

/* Permite que las tarjetas del equipo mantengan una estructura flexible y centrada */
.single-barber {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px; /* Espacio entre la tarjeta de perfil y la de contacto si están juntas */
  flex-wrap: wrap;
}

/* Asegura un ancho base limpio para las tarjetas */
.single-barber .member {
  max-width: 400px;
  width: 100%;
}

/* Espacios internos de la tarjeta de contacto */
.contact-card {
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra el contenido horizontalmente en cualquier pantalla */
  text-align: center;  /* Centra los textos */
}

/* Centra perfectamente los textos y la lista de contactos */
.contact-card ul {
  padding: 0;
  margin: 20px 0;
  display: block;
  text-align: center;
  width: 100%;
}

/* Centra los iconos junto con sus textos */
.contact-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  text-decoration: none;
}


/*====================================================
   RESPONSIVE: SOLO PARA CELULARES (Apilar tarjetas)
====================================================*/
@media (max-width: 768px) {
  .single-barber {
    flex-direction: column !important;
  }

  .single-barber .member {
    max-width: 100% !important;
    width: 100% !important;
  }
}