/* =========================================================
   responsive.css
   Mejoras progresivas para tablet y escritorio.
   Mobile-first: aquí solo AÑADIMOS a partir de breakpoints.
   ========================================================= */

/* ---------- Tablet ---------- */
@media (min-width: 640px) {
  .cards--3 { grid-template-columns: repeat(2, 1fr); }
  .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .testimonials { grid-template-columns: repeat(2, 1fr); }
  .certs { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Desktop pequeño ---------- */
@media (min-width: 900px) {
  /* Navegación de escritorio visible, hamburguesa oculta */
  .nav { display: block; }
  .header__cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .mobile-menu { display: none !important; }

  /* Hero a una sola columna (sin imagen): texto a la izquierda, ancho cómodo */
  .hero__content { max-width: 820px; }

  /* Secciones con media a dos columnas */
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-2--cta { grid-template-columns: 1fr 1fr; }

  .cards--3 { grid-template-columns: repeat(3, 1fr); }
  .cards--4 { grid-template-columns: repeat(4, 1fr); }
  .testimonials { grid-template-columns: repeat(3, 1fr); }

  .section__head { text-align: center; }
}

/* ---------- Desktop grande ---------- */
@media (min-width: 1200px) {
  .hero { padding-top: calc(var(--header-h) + var(--space-9)); }
}

/* ---------- Ajustes de móvil muy estrecho ---------- */
@media (max-width: 400px) {
  .hero__trust { gap: var(--space-4); }
  .hero__trust li + li { padding-left: var(--space-4); }
  .brand__text { font-size: var(--fs-base); }
  .cta-final__actions .btn { width: 100%; }
}

/* ---------- Pantallas que prefieren movimiento reducido ---------- */
/* (El resto del control está en base.css; aquí solo suavizamos hovers de transform) */
@media (prefers-reduced-motion: reduce) {
  .card:hover,
  .btn--primary:hover,
  .whatsapp-float:hover { transform: none; }
}