/* ============================================================
   Morocco Pulse Travel — responsive.css  (mobile-first overrides)
   ============================================================ */

@media (max-width: 960px) {
  .tours-grid { grid-template-columns: repeat(2, 1fr); }
  .values { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .testimonials { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; gap: 32px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  /* Header móvil: blanco puro (a petición), forzado para ganar a la cascada/caché.
     El "bicolor" era la barra de progreso naranja, ya oculta. */
  .header, .header.is-scrolled { background: #ffffff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-bottom-color: transparent; }
  .header.is-scrolled { box-shadow: 0 2px 12px rgba(8,8,12,0.06); }

  /* Nav móvil: panel a pantalla completa bajo el header (antes era de altura
     automática y dejaba ver el hero por debajo sin fondo). */
  .nav {
    position: fixed; inset: 72px 0 0 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #ffffff; overflow-y: auto;
    padding: 12px var(--gutter) 24px;
    transform: translateY(-120%); transition: transform var(--transition);
    box-shadow: var(--shadow-md);
  }
  .nav.is-open { transform: translateY(0); }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__link { display: block; padding: 12px 0; border-bottom: 1px solid var(--gray); }
  /* Cabecera móvil: burger a la izquierda · logo centrado · idiomas a la derecha (siempre visibles).
     Flex: el burger y los idiomas ocupan su tamaño; el brand crece en el medio y centra el logo
     (que se auto-escala con max-width para no chocar). La .nav es un panel fijo, fuera del flujo. */
  .header__inner { display: flex; align-items: center; gap: 10px; }
  .nav-toggle { display: block; order: 0; padding-left: 0; flex: 0 0 auto; }
  .brand { order: 1; flex: 1 1 auto; min-width: 0; justify-content: center; margin: 0; }
  .lang { order: 2; flex: 0 0 auto; margin: 0; gap: 2px; }
  .lang__btn { padding: 4px 6px; }

  .brand__logo { height: 34px; }

  .hero { min-height: 78vh; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }

  .tours-grid { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .footer__bottom { flex-direction: column; }
}

@media (max-width: 420px) {
  body { font-size: 16px; }
  .hero__meta { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

@media (max-width: 480px) {
  .wa-float { right: 14px; bottom: 14px; padding: 12px 16px; font-size: 0.9rem; }
  .hero__orb--1 { width: 80px; height: 80px; }
  .hero__orb--2 { display: none; }
}