/* ============================================================
   Á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-6) 0; min-height: auto; }
.hero__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
/* min-width:0 evita que la imagen natural (951px) explote la columna grid */
.hero__photo { order: -1; min-width: 0; }
.hero__visual { order: -1; }
.hero__desc { max-width: 100%; }
.hero h1 { font-size: 2rem; }
.hero__photo-img {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}

/* Galería taller — columna en móvil */
.taller-strip__inner { flex-direction: column; }
.taller-strip__img,
.taller-strip__img--tall { width: 100%; height: 260px; flex: none; }
.taller-strip__caption { flex: none; padding: var(--sp-6); }

/* CTA espiral */
.cta-espiral { padding: var(--sp-16) 0; }

/* Stats */
.stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.stat-item { min-width: 0; }
.stat-item__number { font-size: 2rem; }
.stat-item__label { overflow-wrap: break-word; }

/* 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-12) 0;
  }
  .hero__grid {
    grid-template-columns: 1fr 1.1fr;
    gap: var(--sp-12);
  }
  .hero__symbol { order: 0; }
  .hero__visual { order: 0; }
  .hero__photo { padding-left: 14px; }
  .logomark-hero { max-width: 100%; }
  /* Restaurar tamaño desktop de la foto hero (la base móvil la capa a 100%) */
  .hero__photo-img {
    max-width: 540px;
    box-shadow:
      0 8px 24px rgba(0,0,0,0.10),
      0 32px 64px rgba(0,0,0,0.08);
  }

  /* 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); }

  /* Galería taller — horizontal en tablet+ */
  .taller-strip__inner { flex-direction: row; }
  .taller-strip__img,
  .taller-strip__img--tall { width: 0; height: 340px; flex: 1; }
  .taller-strip__img--tall { flex: 0.75; }
  .taller-strip__caption { flex: 0.9; padding: var(--sp-8); }

  /* CTA espiral — altura completa en tablet+ */
  .cta-espiral { padding: var(--sp-24) 0; }

  /* Marca de agua del footer: mitad superior de logo_amate.svg
     (las 3 variantes blancas sobre fondo oscuro, 0–389pt del pliego 612×792).
     background-size fijo = recorte determinista; mask desvanece los bordes
     del rectángulo para que no se note el pliego. Solo ≥768px. */
  .footer::before {
    content: '';
    position: absolute;
    top: -20px; right: -50px;
    width: 640px; height: 400px;
    background: url('../images/logo_amate.svg') 0 0 / 640px auto no-repeat;
    opacity: 0.14;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 70% 75% at 55% 40%, #000 25%, transparent 74%);
    mask-image: radial-gradient(ellipse 70% 75% at 55% 40%, #000 25%, transparent 74%);
  }
}

/* ─── 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, .cta-espiral, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  a[href]::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}