/* =========================================================
   Renta de Trajes Leo — mobile.css
   Prioridad total a móvil: catálogo y checkout futuros dependen
   de que esta base se vea impecable en una sola columna.
   ========================================================= */

/* ---------- Tablet / escritorio angosto ---------- */
@media (max-width: 960px) {
  .about__inner {
    grid-template-columns: 1fr;
  }
  .about__media { order: -1; }

  .footer__top {
    grid-template-columns: 1fr 1fr;
  }
  .footer__brand { grid-column: 1 / -1; }
}

/* ---------- Móvil ---------- */
@media (max-width: 720px) {
  :root {
    --section-pad-x: 1.1rem;
  }

  /* Header: colapsa nav-row y muestra "MENÚ" en su lugar */
  .nav-row { display: none; }
  .main-nav {
    flex-direction: row;
    justify-content: space-between;
    padding-block: 0.9rem;
  }
  .brand-mark { font-size: 1.1rem; text-align: left; }
  .brand-mark small { display: none; }
  .brand-mark--compact { font-size: 0.95rem; }

  .mobile-menu-label { display: block; }
  .mobile-menu-toggle:checked ~ .mobile-menu-panel {
    display: flex;
  }
  .mobile-menu-panel {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--color-black);
    color: var(--color-ink-invert);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
  }
  .mobile-menu-panel a {
    font-size: 1.6rem;
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }
  .mobile-menu-panel .nav-cta {
    color: var(--color-gold);
    font-size: 1.1rem;
  }
  .mobile-menu-panel__close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    font-size: 0.75rem;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-ink-invert-soft);
  }

  .utility-bar .container { font-size: 0.62rem; gap: 0.5rem; }
  .utility-bar__links { gap: 0.9rem; }

  /* Hero: una columna, texto ajustado */
  .hero { min-height: 100svh; }
  /* La foto está centrada en la persona; en pantallas angostas eso deja
     poco margen oscuro a la derecha (a diferencia de escritorio) y el
     logo termina cayendo encima del saco. Recorremos el encuadre hacia
     la izquierda para liberar esquina superior derecha para el logo. */
  .hero .ph-image img { object-position: 30% top; }
  .hero__logo,
  .hero .hero__logo { width: clamp(130px, 40vw, 190px); margin-bottom: 1.1rem; }
  /* Respaldo propio del logo en móvil: un halo más presente para que se
     lea bien incluso si cae sobre tela oscura del traje, no solo sobre
     el fondo liso. */
  .hero .hero__logo::before { inset: -26%; filter: blur(9px); background: radial-gradient(circle, rgba(20, 19, 16, 0.75) 0%, rgba(20, 19, 16, 0.4) 55%, rgba(20, 19, 16, 0) 80%); }
  .hero h1 { max-width: 100%; }
  .hero p { max-width: 100%; }
  .btn { width: 100%; text-align: center; }
  .hero__actions .btn { width: auto; }

  .promo-strip .container { flex-direction: column; align-items: flex-start; }
  .promo-strip__link { margin-left: 0; }

  /* Tabs + carrusel: cards a ancho casi completo, scroll horizontal claro */
  .explore__head { flex-direction: column; align-items: flex-start; }
  .card { width: 78vw; }
  .card--branch { width: 84vw; }

  /* Quiénes somos */
  .about__text p { max-width: 100%; }

  /* Footer en una sola columna */
  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  /* Ícono flotante de WhatsApp (Etapa 8): un poco más chico y más
     pegado a la esquina en pantallas angostas, tamaño táctil (44px+)
     siempre respetado. */
  .whatsapp-flotante {
    width: 52px;
    height: 52px;
    right: 1rem;
    bottom: 1rem;
  }
}