/* ============================================================
   ÁMATE — responsive.css
   Breakpoints: 480px · 768px · 1024px · 1280px
   Mobile-first — los estilos base son para móvil
   ============================================================ */

/* ─── MOBILE BASE (< 480px) ─────────────────────────────── */

/* Nav */
.nav__links,
.nav__cta { display: none; }
.nav__toggle { display: flex; }

/* Hero */
.hero { padding: var(--sp-12) 0; min-height: auto; }
.hero__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
.hero__visual { order: -1; }
.hero__desc { max-width: 100%; }

/* Stats */
.stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }

/* Footer */
.footer__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
.footer__bottom { flex-direction: column; align-items: flex-start; }
.footer__legal { flex-wrap: wrap; }

/* Formulario */
.form-grid { grid-template-columns: 1fr; }
.form-grid .form-group.full { grid-column: auto; }

/* Ajuar callout */
.ajuar-callout__grid { grid-template-columns: 1fr; }

/* Programs grid */
.programs-grid { grid-template-columns: 1fr; }

/* Features grid */
.features-grid { grid-template-columns: 1fr; }

/* Team grid */
.team-grid { grid-template-columns: 1fr; }

/* Values grid */
.values-grid { grid-template-columns: repeat(2, 1fr); }

/* Contact grid */
.contact-grid { grid-template-columns: 1fr; }

/* Testimonios */
.testimonials-grid { grid-template-columns: 1fr; }

/* CTA Banner */
.cta-banner { padding: var(--sp-12) var(--sp-8); }

/* Sección header */
.section-header { padding: 0 var(--sp-4); }

/* ─── PEQUEÑO (≥ 480px) ──────────────────────────────────── */
@media (min-width: 480px) {
  :root { --gutter: 1.5rem; }

  .hero__actions { gap: var(--sp-4); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── TABLET (≥ 768px) ───────────────────────────────────── */
@media (min-width: 768px) {
  :root { --gutter: 2rem; }

  /* Nav */
  .nav__toggle  { display: none; }
  .nav__links   { display: flex; }
  .nav__cta     { display: flex; }
  .nav__mobile  { display: none !important; }

  /* Hero */
  .hero {
    min-height: calc(100vh - var(--header-h));
    padding: var(--sp-24) 0;
  }
  .hero__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-12);
  }
  .hero__visual { order: 0; }

  /* Grids */
  .features-grid       { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid   { grid-template-columns: repeat(2, 1fr); }
  .contact-grid        { grid-template-columns: 1fr 1.5fr; }
  .values-grid         { grid-template-columns: repeat(3, 1fr); }
  .team-grid           { grid-template-columns: repeat(2, 1fr); }

  /* Formulario */
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .form-group.full { grid-column: 1 / -1; }

  /* Ajuar */
  .ajuar-callout__grid { grid-template-columns: 1fr 2fr; }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(4, 1fr); }

  /* Footer */
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr; }
  .footer__bottom { flex-direction: row; align-items: center; }

  /* Programs */
  .programs-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── DESKTOP (≥ 1024px) ────────────────────────────────── */
@media (min-width: 1024px) {
  :root { --gutter: 2.5rem; }

  /* Hero */
  .hero__grid { gap: var(--sp-16); }

  /* Grids */
  .features-grid       { grid-template-columns: repeat(4, 1fr); }
  .programs-grid       { grid-template-columns: repeat(3, 1fr); }
  .testimonials-grid   { grid-template-columns: repeat(3, 1fr); }
  .values-grid         { grid-template-columns: repeat(4, 1fr); }
  .team-grid           { grid-template-columns: repeat(3, 1fr); }

  /* Nav links - más espacio */
  .nav__links { gap: var(--sp-8); }
}

/* ─── WIDE (≥ 1280px) ───────────────────────────────────── */
@media (min-width: 1280px) {
  :root { --gutter: 3rem; }

  h1 { font-size: 3.75rem; }
  h2 { font-size: 2.75rem; }
}

/* ─── REDUCIR MOVIMIENTO (a11y) ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .fade-in { opacity: 1; transform: none; }
}

/* ─── PRINT ─────────────────────────────────────────────── */
@media print {
  .header, .footer, .nav__cta, .cta-banner, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  a[href]::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}