/**
 * ============================================================================
 * GORILLA NUTRITION SINALOA - Responsive CSS
 * ============================================================================
 *
 * Media queries para adaptar el diseño a todos los tamaños de pantalla.
 *
 * Breakpoints:
 *   ≤1200px → Laptop pequeño
 *   ≤1024px → Tablet landscape (activar menú hamburguesa)
 *   ≤768px  → Tablet portrait
 *   ≤480px  → Móvil
 *
 * @package Gorilla_Nutrition
 * @since   1.0.0
 */

/* ═══════════════════════════════════════════════════════════════════════ */
/* ≤1200px — Laptop pequeño                                              */
/* ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
  :root {
    --container-padding: 48px;
  }

  /* Productos: 3 columnas (fallback estático) */
  .products__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Slider: 3 cards visibles */
  .products__track .product-card {
    flex: 0 0 calc((100% - 40px) / 3);
  }

  /* About: reducir gap */
  .about__inner {
    gap: 50px;
  }

  .about__image-col {
    height: 420px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* ≤1024px — Tablet landscape (activar hamburguesa)                      */
/* ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  :root {
    --container-padding: 32px;
    --nav-height: 68px;
  }

  /* ── Nav: menú hamburguesa ── */
  .nav-hamburger {
    display: flex;
  }

  .nav-links {
    /* Menú lateral desplegable */
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: rgba(7, 7, 7, 0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 80px 40px;
    gap: 28px;
    transition: right 0.4s ease;
    z-index: var(--z-nav);
    border-left: 1px solid var(--color-border-gold);
  }

  .nav-links.active {
    right: 0;
  }

  .nav-link {
    font-size: 14px;
    letter-spacing: 3px;
  }

  .nav-cta {
    width: 100%;
    text-align: center;
    padding: 14px 28px;
  }

  /* ── Hero ── */
  .hero__content {
    padding: 100px 32px 80px;
    max-width: 100%;
  }

  /* ── Productos: 2 columnas (fallback estático) ── */
  .products__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Slider: 2 cards visibles */
  .products__track .product-card {
    flex: 0 0 calc((100% - 20px) / 2);
  }

  /* ── Stats: 2 columnas ── */
  .stats-strip__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-item:nth-child(2) {
    border-right: none;
  }

  /* ── About: columna ── */
  .about__inner {
    flex-direction: column;
    gap: 50px;
  }

  .about__text {
    max-width: 100%;
  }

  .about__image-col {
    height: 380px;
  }

  /* ── Testimonios: reducir padding de la card ── */
  .testimonial-card {
    padding: 38px 32px;
  }

  /* ── Galería: 2 columnas ── */
  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .gallery__item {
    height: 220px;
  }

  /* ── Contacto: columna ── */
  .contact__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .contact__map {
    height: 350px;
  }

  /* ── Athlete tag ── */
  .hero__athlete-tag {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* ≤768px — Tablet portrait                                              */
/* ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  :root {
    --container-padding: 24px;
  }

  /* ── Hero (tablet portrait) ── */

  /* Intercambiar imagen de fondo en móvil/tablet */
  .hero__bg--desktop { display: none; }
  .hero__bg--mobile  { display: block; object-position: left top; }

  /* Overlay más oscuro y uniforme para que el texto sea legible
     sobre cualquier imagen vertical de móvil */
  .hero__overlay {
    background: linear-gradient(
      180deg,
      rgba(7, 7, 7, 0.70) 0%,
      rgba(7, 7, 7, 0.55) 40%,
      rgba(7, 7, 7, 0.75) 100%
    );
  }

  .hero__content {
    padding: 120px 24px 40px;   /* Más padding-top para centrar visualmente */
    max-width: 100%;
    justify-content: center;    /* Centrado vertical */
    align-items: flex-start;
  }

  .hero__title-gorilla {
    font-size: clamp(72px, 18vw, 110px);
  }

  .hero__title-nutrition {
    font-size: clamp(34px, 9vw, 56px);
    letter-spacing: 8px;
  }

  .hero__title-sinaloa {
    letter-spacing: 8px;
    font-size: clamp(22px, 5.5vw, 38px);
  }

  /* ── Athlete tag: visible en móvil, posición izquierda más arriba ── */
  .hero__athlete-tag {
    display: flex;
    right: auto;
    left: 24px;
    bottom: 80px;               /* Más arriba para que se vea bien */
    align-items: flex-start;
  }

  .hero__athlete-line {
    background: linear-gradient(to right, var(--color-gold), var(--color-red));
  }

  .hero__athlete-name {
    font-size: 14px;
    letter-spacing: 2px;
    text-align: left;
  }

  .hero__athlete-title {
    font-size: 8px;
    letter-spacing: 2px;
    text-align: left;
  }

  /* ── About stats ── */
  .about__stats {
    flex-wrap: wrap;
    gap: 30px;
  }

  .about__stat-divider {
    display: none;
  }

  /* ── Social buttons ── */
  .social-cta__buttons {
    flex-direction: column;
    align-items: center;
  }

  .social-btn {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }

  /* ── Footer: columna ── */
  .site-footer__inner {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .site-footer__brand {
    flex-direction: column;
  }

  .site-footer__nav {
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* ≤480px — Móvil                                                        */
/* ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  :root {
    --container-padding: 18px;
  }

  /* ── Nav ── */
  .main-nav {
    padding: 0 18px;
  }

  .nav-logo__img {
    width: 44px;
    height: 44px;
  }

  .nav-logo__brand {
    font-size: 18px;
    letter-spacing: 3px;
  }

  /* ── Hero (móvil) ── */
  .hero__content {
    padding: 90px 18px 50px;
  }

  .hero__title-gorilla {
    font-size: clamp(64px, 19vw, 96px);
  }

  .hero__title-nutrition {
    font-size: clamp(30px, 8vw, 48px);
    letter-spacing: 6px;
  }

  .hero__badge-text {
    font-size: 8px;
    letter-spacing: 3px;
  }

  .hero__title-sinaloa-row {
    gap: 10px;
  }

  .hero__title-accent {
    height: 30px;
  }

  .hero__tagline {
    font-size: 13px;
  }

  .hero__recommended {
    padding: 9px 16px;
  }

  .hero__recommended-text {
    font-size: 8.5px;
    letter-spacing: 2px;
  }

  .hero__ctas {
    flex-direction: column;
  }

  .hero__ctas .btn-cta,
  .hero__ctas .btn-outline {
    width: 100%;
    justify-content: center;
  }

  .hero__scroll-hint {
    margin-top: 40px;
  }

  /* ── Productos: 1 columna (fallback estático) ── */
  .products__grid {
    grid-template-columns: 1fr;
  }

  /* Slider: 1 card visible */
  .products__track .product-card {
    flex: 0 0 100%;
  }

  .products__arrow {
    width: 38px;
    height: 38px;
  }

  /* ── Stats: 2 columnas ── */
  .stats-strip__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-item {
    padding: 30px 15px;
  }

  /* ── Testimonios: card compacta en móvil ── */
  .testimonial-card {
    padding: 28px 20px;
  }

  .testimonial-card__quote {
    font-size: 60px;
    margin-bottom: -14px;
  }

  .testimonial-card__text {
    font-size: 14px;
  }

  .testimonials__arrow {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  /* ── Galería: 1 columna ── */
  .gallery__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .gallery__item {
    height: 200px;
  }

  /* ── About image ── */
  .about__image-col {
    height: 280px;
  }

  .about__image-frame,
  .about__image-square,
  .about__image-line {
    display: none;
  }

  /* ── Social CTA final card ── */
  .social-cta__final {
    padding: 32px 24px;
  }

  /* ── Contact WhatsApp btn ── */
  .contact__whatsapp-btn {
    width: 100%;
    justify-content: center;
  }

  /* ── WhatsApp float ── */
  .whatsapp-float {
    bottom: 24px;
    right: 18px;
    width: 54px;
    height: 54px;
  }

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