/* ============================================================
   app.css — Roxi en Movimiento
   Paleta pastel, minimalista, pensada para leerse cómodo.

   DECISIÓN DE FONDO: el público del sitio tiene 50 años para
   arriba. Todo acá está calibrado para eso —tipografía grande,
   interlineado amplio, contraste alto y botones de al menos
   48px— y no para que "entre" más contenido en pantalla.
   Si algo se ve grande, está bien así.
   ============================================================ */

/* ── Tokens ──────────────────────────────────────────────── */
/* La base sigue siendo suave, pero los acentos van plenos y no
   lavados: al lado de los pictogramas, un pastel muy claro se veía
   desteñido, y en la miniatura del link de WhatsApp se perdía. Los
   valores coinciden con los de scripts/generar_ilustraciones.php
   para que las ilustraciones y la página sean el mismo set. */
:root{
  --crema:      #FAF7F2;
  --crema-2:    #F3EDE3;
  --blanco:     #FFFFFF;

  --salvia:     #86AE99;   /* primario */
  --salvia-suave:#DCE9E0;
  --salvia-onda:#BFD6C6;
  --salvia-hondo:#33564A;  /* texto y botones: el verde de las figuras */

  --durazno:    #F2C9A6;
  --durazno-suave:#FAE4D2;
  --terracota:  #C4562F;

  --lavanda:    #C9C1DE;

  /* Neutros */
  --tinta:      #26332C;
  --tinta-2:    #55635B;
  --linea:      #E2DACE;

  /* Tipografía */
  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Medidas */
  --ancho:      1180px;
  --radio:      22px;
  --radio-sm:   14px;
  --sombra:     0 2px 4px rgba(47,58,52,.04), 0 12px 32px rgba(47,58,52,.07);
  --sombra-alta:0 4px 10px rgba(47,58,52,.06), 0 24px 56px rgba(47,58,52,.11);
  --hdr-h:      76px;
}

/* ── Reset mínimo ────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Sin esto, al hacer clic en el menú el header fijo tapa el título. */
  scroll-padding-top: calc(var(--hdr-h) + 16px);
}
body{
  margin:0;
  background:var(--crema);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:1.0625rem;      /* 17px */
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--salvia-hondo); }
button{ font:inherit; }
h1,h2,h3{ font-family:var(--serif); font-weight:500; line-height:1.18; margin:0; letter-spacing:-.015em; }
p{ margin:0 0 1rem; }
ul,ol{ margin:0; padding:0; list-style:none; }

/* Foco visible en todo lo navegable: quien usa teclado tiene que
   saber siempre dónde está parado. */
:focus-visible{
  outline:3px solid var(--salvia-hondo);
  outline-offset:3px;
  border-radius:6px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--tinta); color:#fff; padding:.9rem 1.4rem; border-radius:0 0 12px 0;
}
.skip:focus{ left:0; }

/* ── Estructura ──────────────────────────────────────────── */
.wrap{ width:min(100% - 2.5rem, var(--ancho)); margin-inline:auto; }
.wrap--angosto{ width:min(100% - 2.5rem, 780px); }

.seccion{ padding:clamp(4rem, 9vw, 7.5rem) 0; position:relative; }
.seccion--angosta{ padding:clamp(3rem, 6vw, 5rem) 0; }
.seccion--crema{ background:var(--crema-2); }
.seccion--salvia{ background:var(--salvia-suave); }
.seccion--oscura{ background:var(--salvia-hondo); color:#F2F6F3; }

.grid-2{
  display:grid; gap:clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns:1fr 1fr; align-items:center;
}
.grid-2--form{ align-items:start; }
.grid-4{ display:grid; gap:1.5rem; grid-template-columns:repeat(4,1fr); }

/* ── Tipografía de sección ───────────────────────────────── */
.volanta{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.82rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--salvia-hondo); margin:0 0 1rem;
}
.volanta--clara{ color:var(--durazno); }
.volanta .ico{ opacity:.85; }

.h2{ font-size:clamp(1.85rem, 3.6vw, 2.75rem); margin-bottom:1rem; }
.h2--claro{ color:#fff; }

.bajada{
  font-size:1.1rem; color:var(--tinta-2);
  max-width:60ch; margin-inline:auto;
}
.bajada--izq{ margin-inline:0; }
.bajada--clara{ color:#D4E3D9; }

.cabecera{ text-align:center; margin-bottom:clamp(2.5rem, 5vw, 4rem); }
.parrafo{ color:var(--tinta-2); margin-bottom:1.1rem; }

/* ── Botones ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:52px; padding:.85rem 1.7rem;
  border:1px solid transparent; border-radius:999px;
  font-weight:600; font-size:1rem; text-decoration:none; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn--primario{
  background:var(--salvia-hondo); color:#fff;
  box-shadow:0 6px 18px rgba(51,86,74,.26);
}
.btn--primario:hover{ background:#27443A; box-shadow:0 10px 26px rgba(51,86,74,.32); }
.btn--fantasma{
  background:transparent; color:var(--tinta); border-color:var(--linea);
}
.btn--fantasma:hover{ border-color:var(--salvia); background:var(--blanco); }
.btn--wa{ background:var(--salvia-onda); color:#2C4A39; padding:.6rem 1.15rem; min-height:44px; }
.btn--wa:hover{ background:var(--salvia); }
.btn--ancho{ width:100%; }

/* ── Header ──────────────────────────────────────────────── */
.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(250,247,242,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
/* La clase la agrega app.js recién cuando se scrollea: sobre la portada
   el header queda invisible y no compite con el título. */
.hdr.is-scroll{ border-bottom-color:var(--linea); box-shadow:0 4px 20px rgba(47,58,52,.05); }

.hdr__in{ display:flex; align-items:center; gap:1.25rem; height:var(--hdr-h); }

.marca{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--tinta); margin-right:auto; }
.marca__ico{ color:var(--salvia-hondo); display:grid; place-items:center; flex:none; }
.marca__txt strong{ display:block; font-family:var(--serif); font-size:1.15rem; line-height:1.2; }
.marca__txt small{ display:block; font-size:.74rem; color:var(--tinta-2); letter-spacing:.02em; }

.nav{ display:flex; gap:.35rem; }
.nav a{
  padding:.5rem .8rem; border-radius:999px;
  color:var(--tinta-2); text-decoration:none; font-size:.95rem; font-weight:500;
  white-space:nowrap;   /* "Gimnasia adaptada" partido en dos renglones queda pésimo */
  transition:background .18s ease, color .18s ease;
}
.nav a:hover, .nav a.is-activo{ background:var(--salvia-suave); color:var(--salvia-hondo); }

.burger{ display:none; background:none; border:0; padding:.6rem; cursor:pointer; }
.burger span{ display:block; width:24px; height:2px; background:var(--tinta); border-radius:2px; transition:.25s; }
.burger span+span{ margin-top:6px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ── Portada ─────────────────────────────────────────────── */
.hero{ position:relative; padding:clamp(3rem, 7vw, 6rem) 0 clamp(3.5rem, 7vw, 6rem); overflow:hidden; }
.hero__deco{
  position:absolute; inset:auto -12% 0 auto;
  width:min(760px, 78vw); aspect-ratio:1;
  background:
    radial-gradient(closest-side, var(--durazno-suave), transparent 72%),
    radial-gradient(closest-side, var(--salvia-suave), transparent 70%);
  background-position:30% 20%, 75% 70%; background-repeat:no-repeat;
  background-size:70% 70%, 80% 80%;
  filter:blur(6px); opacity:.85; pointer-events:none;
}
.hero__in{
  position:relative; display:grid; gap:clamp(2.5rem, 5vw, 4rem);
  grid-template-columns:1.05fr .95fr; align-items:center;
}
.hero__h1{ font-size:clamp(2.3rem, 5.4vw, 3.9rem); margin-bottom:1.35rem; }
.hero__h1 em{ display:block; font-style:normal; color:var(--salvia-hondo); }
.hero__bajada{ font-size:1.15rem; color:var(--tinta-2); max-width:52ch; margin-bottom:1.75rem; }
.hero__acciones{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem; }
.hero__firma{
  margin-top:2rem; padding-top:1.25rem; border-top:1px solid var(--linea);
  font-size:.92rem; color:var(--tinta-2); letter-spacing:.01em;
}

.chips{ display:flex; flex-wrap:wrap; gap:.55rem; }
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .95rem; border-radius:999px;
  background:var(--blanco); border:1px solid var(--linea);
  font-size:.9rem; color:var(--tinta-2); font-weight:500;
}
.chip .ico{ color:var(--salvia-hondo); }

/* ── Marcos de imagen ────────────────────────────────────── */
.marco{
  margin:0; border-radius:var(--radio); overflow:hidden;
  background:var(--blanco); box-shadow:var(--sombra-alta);
  border:1px solid var(--linea);
}
/* Las ilustraciones SVG traen su propio fondo pastel y ya vienen
   encuadradas: se muestran enteras. Las fotos reales, en cambio,
   se recortan para que todas las tarjetas queden parejas. */
.marco img{ width:100%; object-fit:contain; }
.marco--foto img{ object-fit:cover; aspect-ratio:4/5; }
.marco--grande{ border-radius:calc(var(--radio) + 10px); }

.hero__img, .sobre__img, .clase__img{ position:relative; }

.tarjeta-flota{
  position:absolute; left:-1.25rem; bottom:1.75rem;
  display:flex; align-items:center; gap:.85rem;
  padding:.9rem 1.15rem; border-radius:var(--radio-sm);
  background:var(--blanco); box-shadow:var(--sombra-alta); border:1px solid var(--linea);
  max-width:19rem;
}
.tarjeta-flota__ico{
  display:grid; place-items:center; flex:none;
  width:44px; height:44px; border-radius:50%;
  background:var(--durazno-suave); color:var(--terracota);
}
.tarjeta-flota strong{ display:block; font-size:.97rem; }
.tarjeta-flota small{ display:block; font-size:.82rem; color:var(--tinta-2); line-height:1.45; }

.sello{
  position:absolute; right:-1rem; top:1.5rem;
  display:flex; align-items:center; gap:.6rem;
  padding:.75rem 1.1rem; border-radius:999px;
  background:var(--blanco); box-shadow:var(--sombra); border:1px solid var(--linea);
  font-size:.86rem; font-weight:600; color:var(--salvia-hondo);
}
.sello small{ display:block; font-weight:400; color:var(--tinta-2); font-size:.78rem; }

/* ── Franja de credenciales ──────────────────────────────── */
.credenciales{ background:var(--blanco); border-block:1px solid var(--linea); padding:2.5rem 0; }
.credenciales__in{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.75rem; }
.cred{ display:flex; gap:.9rem; align-items:flex-start; }
.cred__ico{
  display:grid; place-items:center; flex:none;
  width:46px; height:46px; border-radius:14px;
  background:var(--salvia-suave); color:var(--salvia-hondo);
}
.cred strong{ display:block; font-size:1rem; line-height:1.35; }
.cred span{ display:block; font-size:.88rem; color:var(--tinta-2); line-height:1.5; }

/* ── Aviso (la aclaración profesional) ───────────────────── */
.aviso{
  display:flex; gap:1rem; margin-top:1.75rem;
  padding:1.25rem 1.4rem; border-radius:var(--radio-sm);
  background:var(--durazno-suave); border:1px solid #EDD2BC;
}
.aviso__ico{ flex:none; color:var(--terracota); margin-top:.15rem; }
.aviso strong{ display:block; margin-bottom:.3rem; color:var(--terracota); }
.aviso p{ margin:0; font-size:.95rem; color:var(--tinta-2); }

/* ── Tarjetas ────────────────────────────────────────────── */
.card{
  padding:1.9rem 1.6rem; border-radius:var(--radio);
  background:var(--blanco); border:1px solid var(--linea);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--sombra); border-color:var(--salvia-onda); }
.card__ico{
  display:grid; place-items:center;
  width:52px; height:52px; border-radius:16px; margin-bottom:1.1rem;
  background:var(--salvia-suave); color:var(--salvia-hondo);
}
.card__h{ font-size:1.18rem; margin-bottom:.55rem; }
.card__p{ font-size:.97rem; color:var(--tinta-2); margin:0; }

/* ── Beneficios ──────────────────────────────────────────── */
.beneficios{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.benef{
  padding:1.9rem 1.7rem; border-radius:var(--radio);
  background:var(--blanco); border:1px solid #D6E4DB;
}
.benef__n{
  display:block; font-family:var(--serif); font-size:1.6rem;
  color:var(--salvia); margin-bottom:.6rem;
}
.benef__h{ font-size:1.22rem; margin-bottom:.5rem; }
.benef__p{ font-size:.97rem; color:var(--tinta-2); margin:0; }

/* ── Modalidades ─────────────────────────────────────────── */
.grid-4--altas .mod{ display:flex; flex-direction:column; }
.mod{
  border-radius:var(--radio); overflow:hidden;
  background:var(--blanco); border:1px solid var(--linea);
  transition:transform .22s ease, box-shadow .22s ease;
}
.mod:hover{ transform:translateY(-4px); box-shadow:var(--sombra-alta); }
.mod__img{ margin:0; background:var(--crema-2); }
.mod__img img{ width:100%; aspect-ratio:16/11; object-fit:contain; }
.mod__img.marco--foto img{ object-fit:cover; }
.mod__cuerpo{ padding:1.5rem 1.4rem 1.1rem; flex:1; position:relative; }
.mod__ico{
  position:absolute; top:-22px; right:1.3rem;
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:var(--blanco); color:var(--salvia-hondo); border:1px solid var(--linea);
}
.lista-check{ margin-top:1rem; display:grid; gap:.4rem; }
.lista-check li{ display:flex; align-items:center; gap:.5rem; font-size:.9rem; color:var(--tinta-2); }
.lista-check .ico{ color:var(--salvia); flex:none; }
.mod__cta{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.4rem; margin-top:auto;
  border-top:1px solid var(--linea);
  color:var(--salvia-hondo); font-weight:600; font-size:.95rem; text-decoration:none;
  transition:background .18s ease, gap .18s ease;
}
.mod__cta:hover{ background:var(--salvia-suave); }

/* ── Línea de tiempo de la clase ─────────────────────────── */
.linea{ margin-top:2rem; display:grid; gap:0; }
.linea__item{
  position:relative; padding:0 0 2rem 2.4rem;
  border-left:2px solid var(--salvia-onda);
}
.linea__item:last-child{ border-left-color:transparent; padding-bottom:0; }
.linea__item::before{
  content:""; position:absolute; left:-9px; top:.45rem;
  width:16px; height:16px; border-radius:50%;
  background:var(--blanco); border:3px solid var(--salvia);
}
.linea__min{
  display:inline-block; margin-bottom:.35rem;
  font-size:.78rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--terracota);
}
.linea__h{ font-size:1.18rem; margin-bottom:.35rem; }
.linea__p{ font-size:.97rem; color:var(--tinta-2); margin:0; }

/* ── Galería ─────────────────────────────────────────────── */
.galeria{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.galeria__item{
  margin:0; border-radius:var(--radio); overflow:hidden;
  background:var(--blanco); border:1px solid var(--linea); position:relative;
}
.galeria__item img{ width:100%; aspect-ratio:1; object-fit:contain; }
.galeria__item.marco--foto img{ object-fit:cover; }
.galeria__item figcaption{
  padding:.85rem 1.1rem; font-size:.88rem; color:var(--tinta-2);
  border-top:1px solid var(--linea);
}

/* ── Preguntas frecuentes ────────────────────────────────── */
.faq{ display:grid; gap:.75rem; }
.faq__item{
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:var(--radio-sm); overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.faq__item[open]{ border-color:var(--salvia-onda); box-shadow:var(--sombra); }
.faq__p{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem 1.4rem; cursor:pointer; list-style:none;
  font-weight:600; font-size:1.03rem;
}
.faq__p::-webkit-details-marker{ display:none; }
.faq__mas{ flex:none; color:var(--salvia-hondo); transition:transform .25s ease; }
.faq__item[open] .faq__mas{ transform:rotate(45deg); }
.faq__r{ padding:0 1.4rem 1.3rem; }
.faq__r p{ margin:0; color:var(--tinta-2); font-size:.99rem; }
.faq__pie{ margin-top:1.75rem; text-align:center; color:var(--tinta-2); font-size:.97rem; }

/* ── Contacto ────────────────────────────────────────────── */
.contacto__datos{ display:grid; gap:.4rem; margin-top:2rem; }
.contacto__datos li > *{
  display:flex; align-items:center; gap:.9rem;
  padding:.8rem .9rem; border-radius:var(--radio-sm);
  color:inherit; text-decoration:none;
  transition:background .18s ease;
}
.contacto__datos a:hover{ background:rgba(255,255,255,.1); }
.contacto__ico{
  display:grid; place-items:center; flex:none;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.14); color:var(--durazno);
}
.contacto__datos strong{ display:block; font-size:.97rem; }
.contacto__datos small{ display:block; font-size:.88rem; color:#C5D9CC; }

.form-caja{
  background:var(--blanco); color:var(--tinta);
  border-radius:var(--radio); padding:clamp(1.6rem, 3vw, 2.25rem);
  box-shadow:var(--sombra-alta);
}
.form{ display:grid; gap:1.1rem; }
.campo{ display:grid; gap:.4rem; }
.campo label{ font-size:.92rem; font-weight:600; }
.req{ color:var(--terracota); }
.campo input, .campo select, .campo textarea{
  width:100%; padding:.85rem 1rem; min-height:52px;
  font:inherit; font-size:1rem; color:var(--tinta);
  background:var(--crema); border:1px solid var(--linea); border-radius:var(--radio-sm);
  transition:border-color .18s ease, background .18s ease;
}
.campo textarea{ min-height:120px; resize:vertical; line-height:1.6; }
.campo input:focus, .campo select:focus, .campo textarea:focus{
  background:var(--blanco); border-color:var(--salvia);
}
.campo ::placeholder{ color:#A2ACA6; }

.form__nota{
  display:flex; align-items:flex-start; gap:.45rem;
  margin:.25rem 0 0; font-size:.86rem; color:var(--tinta-2);
}
.form__nota .ico{ flex:none; margin-top:.25rem; color:var(--salvia); }

/* Honeypot: fuera de pantalla, pero NO con display:none —
   varios bots detectan ese truco y saltean el campo. */
.miel{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.flash{
  display:flex; align-items:flex-start; gap:.6rem;
  padding:.9rem 1.1rem; border-radius:var(--radio-sm); margin-bottom:1.25rem;
  font-size:.95rem;
}
.flash .ico{ flex:none; margin-top:.2rem; }
.flash--ok{    background:var(--salvia-suave); color:var(--salvia-hondo); }
.flash--error{ background:var(--durazno-suave); color:var(--terracota); }

/* ── Pie ─────────────────────────────────────────────────── */
.pie{ background:var(--crema-2); border-top:1px solid var(--linea); padding:3.5rem 0 1.75rem; }
.pie__in{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:2.5rem; }
.pie__marca strong{ font-family:var(--serif); font-size:1.3rem; display:block; margin-bottom:.4rem; }
.pie__marca p{ margin:0 0 .3rem; font-size:.93rem; color:var(--tinta-2); }
.pie__zona{ display:flex; align-items:center; gap:.35rem; }
.pie__zona .ico{ color:var(--salvia-hondo); }
.pie__nav{ display:grid; gap:.45rem; align-content:start; }
.pie__nav a{ color:var(--tinta-2); text-decoration:none; font-size:.95rem; }
.pie__nav a:hover{ color:var(--salvia-hondo); }
.pie__contacto{ display:grid; gap:.6rem; align-content:start; }
.pie__link{
  display:flex; align-items:center; gap:.5rem;
  color:var(--tinta); text-decoration:none; font-size:.95rem; font-weight:500;
}
.pie__link:hover{ color:var(--salvia-hondo); }
.pie__link .ico{ color:var(--salvia-hondo); }

.pie__legal{
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--linea);
  display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:space-between;
}
.pie__legal p{ margin:0; font-size:.83rem; color:var(--tinta-2); }
.pie__disclaimer{ max-width:52ch; }

/* ── WhatsApp flotante ───────────────────────────────────── */
.wa-flota{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:90;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.3rem; border-radius:999px;
  background:var(--salvia-hondo); color:#fff; text-decoration:none; font-weight:600;
  box-shadow:0 10px 30px rgba(47,58,52,.25);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
}
.wa-flota.is-visible{ opacity:1; visibility:visible; transform:none; }
.wa-flota:hover{ background:#27443A; }

/* ── Aparición al scrollear ──────────────────────────────── */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-in{ opacity:1; transform:none; }
.reveal--d1{ transition-delay:.09s; }
.reveal--d2{ transition-delay:.18s; }
.reveal--d3{ transition-delay:.27s; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:1024px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .credenciales__in{ grid-template-columns:repeat(2,1fr); }
  .beneficios{ grid-template-columns:repeat(2,1fr); }
  .pie__in{ grid-template-columns:1fr 1fr; }
}

/* El corte es en 1080px y no en 860: con seis ítems, el logo de dos
   líneas y el botón de WhatsApp, la barra se apreta antes de llegar
   al ancho de tablet. Mejor pasar al desplegable un poco antes. */
@media (max-width:1080px){
  :root{ --hdr-h:68px; }

  /* En mobile el menú baja como panel desplegable. */
  .nav{
    position:absolute; inset:var(--hdr-h) 0 auto; flex-direction:column; gap:0;
    padding:.75rem 1.25rem 1.25rem;
    background:var(--crema); border-bottom:1px solid var(--linea);
    box-shadow:0 18px 30px rgba(47,58,52,.08);
    display:none;
  }
  .nav.is-abierto{ display:flex; }
  .nav a{ padding:.85rem .5rem; border-radius:10px; font-size:1.02rem; }
  .burger{ display:block; order:3; }
  .hdr__cta{ order:2; }
  .hdr__cta span{ display:none; }
  .btn--wa{ padding:.6rem; width:44px; }
}

/* Las dos columnas aguantan bien hasta el ancho de tablet: recién acá
   se apilan. El menú ya colapsó antes, pero eso es otro problema. */
@media (max-width:860px){
  .hero__in, .grid-2{ grid-template-columns:1fr; }

  /* Apilada, la imagen pasa a ocupar todo el ancho y se come la
     primera pantalla entera: el título queda abajo del pliegue y no
     se entiende de qué se trata la página. Se le pone un tope y se
     centra. */
  .hero__img, .sobre__img, .clase__img{ max-width:420px; margin-inline:auto; width:100%; }
  /* La foto va arriba del texto en mobile: entra por los ojos primero. */
  .hero__img{ order:-1; }
  .grid-2--invertida > *:first-child{ order:-1; }
  .grid-2--form .form-caja{ order:2; }

  .hero__h1{ font-size:clamp(2rem, 8vw, 2.7rem); }

  /* En pantalla angosta la tarjeta flotante le tapaba las piernas a la
     figura. Baja a ser una tarjeta normal, montada sobre el borde
     inferior de la imagen: se sigue leyendo como "pegada" a la foto
     pero ya no oculta nada. */
  .tarjeta-flota{
    position:relative; inset:auto; max-width:none;
    margin:-1.75rem 1rem 0; z-index:2;
  }
  .sello{ right:.5rem; top:.75rem; }

  .galeria{ grid-template-columns:repeat(2,1fr); }
  .pie__legal{ flex-direction:column; }
}

@media (max-width:560px){
  body{ font-size:1.02rem; }
  .grid-4, .credenciales__in, .beneficios{ grid-template-columns:1fr; }
  .galeria{ grid-template-columns:1fr 1fr; }
  .pie__in{ grid-template-columns:1fr; }
  .hero__acciones .btn{ width:100%; }
  .wa-flota__txt{ display:none; }
  .wa-flota{ padding:1rem; right:1rem; bottom:1rem; }
  .marca__txt small{ display:none; }

  /* En un celular de 320px el título quedaba justo abajo del pliegue:
     se abría el link y solo se veía el dibujo, sin una sola palabra de
     qué es esto. La imagen achica y la portada arranca más arriba para
     que "Gimnasia adaptada y personalizada" entre sin scrollear. */
  .hero{ padding-top:1.5rem; }
  .hero__img{ max-width:260px; }
  .tarjeta-flota{ margin:-1.5rem .5rem 0; padding:.75rem .9rem; gap:.7rem; }
  .tarjeta-flota__ico{ width:38px; height:38px; }
  .tarjeta-flota strong{ font-size:.9rem; }
  .tarjeta-flota small{ font-size:.78rem; }
}

/* ── Preferencias del sistema ────────────────────────────── */
/* Quien pidió menos animación en su sistema operativo lo pidió por
   algo (mareos, vértigo): se respeta y se apaga todo el movimiento. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}

@media print{
  .hdr, .wa-flota, .burger, .hero__deco{ display:none !important; }
  body{ background:#fff; }
  .reveal{ opacity:1; transform:none; }
}