/* ============================================================
   EXCENTRIC BARBERÍA — Responsive (Mobile First)
   Los estilos base (style.css) están pensados para móvil;
   aquí se escalan progresivamente con min-width.
   Breakpoints: 36em (576) · 48em (768) · 64em (1024) · 80em (1280)
   ============================================================ */

/* ------------------------------------------------------------
   ≥ 576px — móviles grandes
   ------------------------------------------------------------ */
@media (min-width: 36em) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .form__row--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .article-nav {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .detail-info {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ------------------------------------------------------------
   ≥ 768px — tabletas
   ------------------------------------------------------------ */
@media (min-width: 48em) {
  :root {
    --gutter: 2rem;
  }
  .stats {
    grid-template-columns: repeat(4, 1fr);
  }
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .about-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
  .contact-grid {
    grid-template-columns: 1fr 1.2fr;
    align-items: start;
  }
  .scroll-hint {
    display: flex;
  }
  .hero__meta {
    gap: 3rem;
  }
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  /* La fila destacada de la galería ocupa 2 columnas */
  .gallery-item--wide {
    grid-column: span 2;
  }
  .gallery-item--wide img {
    aspect-ratio: 16 / 9;
  }
}

/* ------------------------------------------------------------
   ≥ 1024px — escritorio
   ------------------------------------------------------------ */
@media (min-width: 64em) {
  :root {
    --header-h: 5.5rem;
  }
  /* Navegación de escritorio visible, hamburguesa oculta */
  .nav {
    display: block;
  }
  .burger,
  .mobile-menu {
    display: none;
  }
  .header__cta {
    display: inline-flex;
  }
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .team-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .layout-sidebar {
    grid-template-columns: 1fr 20rem;
    gap: 4rem;
  }
  .layout-sidebar--left {
    grid-template-columns: 20rem 1fr;
  }
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 3rem;
  }
  .hero__content {
    padding-block: 6rem;
  }
  /* El slider de testimonios muestra el slide con más aire */
  .testimonial {
    padding: 3.2rem 3.5rem;
  }
}

/* ------------------------------------------------------------
   ≥ 1280px — pantallas amplias
   ------------------------------------------------------------ */
@media (min-width: 80em) {
  .gallery-grid {
    gap: 1.5rem;
  }
  .services-grid,
  .blog-grid,
  .team-grid {
    gap: 2rem;
  }
}

/* ------------------------------------------------------------
   Ajustes de altura corta (móviles apaisados)
   ------------------------------------------------------------ */
@media (max-height: 30em) {
  .hero {
    min-height: 36rem;
  }
  .scroll-hint {
    display: none;
  }
}

/* ------------------------------------------------------------
   Dispositivos táctiles: fondo fijo del CTA desactivado
   (background-attachment: fixed penaliza en iOS/Safari)
   ------------------------------------------------------------ */
@media (hover: none) {
  .cta-banner {
    background-attachment: scroll;
  }
  /* Los iconos sociales de las tarjetas siempre visibles en táctil */
  .team-card__social a {
    opacity: 1;
    transform: none;
  }
}