/* ============================================================
   RESPONSIVE.CSS · Mejoras por breakpoint (mobile-first).
   El diseño base es para móvil; aquí se amplía a tablet/escritorio.
   ============================================================ */

/* ---------- Tablet (>= 640px) ---------- */
@media (min-width: 640px) {
  .benefits__grid { grid-template-columns: repeat(2, 1fr); }
  .method__grid   { grid-template-columns: repeat(2, 1fr); }
  .testi__grid    { grid-template-columns: repeat(2, 1fr); }
  .service__grid  { grid-template-columns: repeat(2, 1fr); }
  .footer__grid   { grid-template-columns: 1.5fr 1fr 1fr; }
  .hero__trust    { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Escritorio (>= 960px) ---------- */
@media (min-width: 960px) {
  .nav { display: flex; }
  .nav-toggle { display: none; }

  .hero__grid     { grid-template-columns: 1.1fr .9fr; }
  .about__grid    { grid-template-columns: .9fr 1.1fr; }
  .benefits__grid { grid-template-columns: repeat(3, 1fr); }
  .method__grid   { grid-template-columns: repeat(3, 1fr); }
  .testi__grid    { grid-template-columns: repeat(3, 1fr); }
  /* Tarjetas antes/después: máx 2 por fila (más grandes que las de cita). */
  .testi__grid.testi__grid--ba { grid-template-columns: repeat(2, 1fr); }
  .finalcta__grid { grid-template-columns: 1fr 1fr; align-items: center; }
  .certs__list    { grid-template-columns: repeat(2, 1fr); }
}

/* En móvil ocultamos la nav de anclas y el CTA del header para no saturar;
   el acceso va por el menú hamburguesa. */
@media (max-width: 959px) {
  .header__actions .btn { display: none; }
  /* …pero el botón "Volver" de páginas internas (agenda, legales) SÍ se ve */
  .header__actions .btn--back { display: inline-flex; }
}

/* ---------- Ajustes de móvil ---------- */
@media (max-width: 639px) {
  /* El WhatsApp es un botón flotante pequeño y discreto (mismo en móvil
     y escritorio): nada de barra verde a todo el ancho. */

  /* Footer ordenado en móvil: marca arriba a lo ancho y las dos
     columnas de enlaces (Secciones / Contacto) una al lado de la otra. */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem 1.25rem;
    text-align: left;
  }
  .footer__brand { grid-column: 1 / -1; text-align: center; }
  .footer__brand p { margin-inline: auto; }
  .footer__links { justify-items: start; }
  .footer h4 { margin-bottom: .9rem; }
  .footer__social { justify-content: flex-start; }
}

/* ---------- Pantallas grandes (>= 1200px) ---------- */
@media (min-width: 1200px) {
  .service__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Respeto de movimiento reducido ----------
   IMPORTANTE: NO desactivamos las animaciones de entrada (.reveal ni
   split-text). Windows suele traer "reducir movimiento" activado por
   defecto y, si las gateáramos, la web se vería plana en muchos PCs.
   Solo apagamos efectos realmente intrusivos (mesh reactivo, pulso).
   El tilt 3D ya está gateado dentro de effects.js, no hace falta CSS. */
@media (prefers-reduced-motion: reduce) {
  .hero__mesh,
  .finalcta__mesh { transition: none; }
  .wa-float::after { animation: none; }
}