/* Study with Thomas — estilos del sitio
   Mobile-first. Tokens según estrategia/diseno.md. Puntos de corte: 600, 768 y 1024 px. */

/* ---------- Fuente (alojada localmente, licencia SIL OFL: ver /fonts/OFL.txt) ---------- */
@font-face {
  font-family: "Comfortaa";
  src: url("/fonts/comfortaa-latin-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
/* Respaldo con métricas ajustadas para reducir el salto al cargar la fuente (CLS).
   Calibrado el 2026-10-21 midiendo Comfortaa contra Arial en el navegador: ancho 500 = 1,18× (700 = 1,11×),
   ascendente 0,88 em y descendente 0,23 em de Comfortaa, divididos por size-adjust. */
@font-face {
  font-family: "Comfortaa respaldo";
  src: local("Arial"), local("Helvetica Neue"), local("Roboto");
  size-adjust: 117%;
  ascent-override: 75%;
  descent-override: 20%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;

  /* Color */
  --verde: #4B5548;
  --verde-oscuro: #3A4238;
  --verde-profundo: #2F362E;
  --verde-claro: #56604F;
  --beige: #CFCEC1;
  --papel: #F4F3EC;
  --papel-activo: #E9E8DF;
  --crema: #F9F9F9;
  --crema-suave: #E3E5DD;
  --tinta: #1C1C1C;
  --tinta-suave: #3D3D3A;
  --blanco: #FFFFFF;
  --linea-clara: rgba(75, 85, 72, 0.2);
  --linea-oscura: rgba(249, 249, 249, 0.18);

  /* Tipografía */
  --fuente: "Comfortaa", "Comfortaa respaldo", system-ui, sans-serif;
  --t-h1: clamp(2rem, 1.55rem + 1.9vw, 3.25rem);
  --t-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2.375rem);
  --t-h3: clamp(1.1875rem, 1.1rem + 0.45vw, 1.4375rem);
  --t-precio: clamp(2rem, 1.7rem + 1.3vw, 2.75rem);
  --t-destacado: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --t-texto: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --t-chico: 1rem;

  /* Espaciado (escala de 4 px) */
  --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.25rem;
  --e-6: 1.5rem; --e-8: 2rem; --e-10: 2.5rem; --e-12: 3rem; --e-16: 4rem; --e-20: 5rem; --e-24: 6rem;
  --gutter: clamp(1rem, 0.25rem + 3.2vw, 2rem);
  --seccion-y: clamp(3rem, 1.9rem + 4.7vw, 6rem);

  /* Forma */
  --radio-chico: 8px;
  --radio: 12px;
  --radio-grande: 20px;
  --radio-pill: 999px;

  /* Sombras (solo sobre fondos claros) */
  --sombra-1: 0 1px 2px rgba(28, 28, 28, 0.06), 0 4px 12px rgba(28, 28, 28, 0.06);
  --sombra-2: 0 4px 10px rgba(28, 28, 28, 0.18), 0 10px 24px rgba(28, 28, 28, 0.14);

  /* Anchos */
  --ancho-max: 1120px;
  --ancho-medio: 800px;
  --ancho-angosto: 720px;
  --ancho-texto: 65ch;

  /* Movimiento */
  --t-rapida: 150ms;
  --t-media: 200ms;
  --curva: cubic-bezier(0.2, 0, 0, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--e-4);
  scroll-padding-bottom: 6rem; /* el botón flotante no tapa lo enfocado (WCAG 2.4.11) */
}

body {
  margin: 0;
  background: var(--verde);
  color: var(--tinta);
  font-family: var(--fuente);
  font-weight: 500;
  font-size: var(--t-texto);
  line-height: 1.65;
}

h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

h1, h2, h3 {
  font-weight: 600;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--t-h1); font-weight: 700; line-height: 1.15; text-wrap: balance; }
h2 { font-size: var(--t-h2); line-height: 1.2; text-wrap: balance; }
h3 { font-size: var(--t-h3); line-height: 1.3; }
p { max-width: var(--ancho-texto); text-wrap: pretty; }
h2 + p { margin-top: var(--e-4); }
p + p { margin-top: var(--e-4); }

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--verde-oscuro); outline-offset: 2px; border-radius: 2px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.icono {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icono--wa { fill: currentColor; stroke: none; }

.contenedor { width: min(100% - 2 * var(--gutter), var(--ancho-max)); margin-inline: auto; }
.contenedor--medio { width: min(100% - 2 * var(--gutter), var(--ancho-medio)); }
.contenedor--angosto { width: min(100% - 2 * var(--gutter), var(--ancho-angosto)); }

.seccion--verde { background: var(--verde); color: var(--crema); }
.seccion--beige { background: var(--beige); color: var(--tinta); }
.seccion--verde :focus-visible { outline-color: var(--crema); }
.seccion--beige h2 { color: var(--verde); }

/* Enlace para saltar al contenido */
.saltar {
  position: absolute;
  left: var(--e-4);
  top: -10rem;
  z-index: 100;
  padding: var(--e-3) var(--e-4);
  background: var(--crema);
  color: var(--verde);
  font-weight: 600;
  border-radius: var(--radio-chico);
}
.saltar:focus { top: var(--e-4); }
.saltar:focus-visible { outline: 3px solid var(--crema); outline-offset: 3px; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  width: 100%;
  max-width: 420px;
  min-height: 52px;
  padding: var(--e-3) var(--e-6);
  font-family: var(--fuente);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  background: var(--verde);
  color: var(--blanco);
  border: 2px solid transparent; /* visible en modo de alto contraste */
  border-radius: var(--radio-chico);
  transition: background-color var(--t-rapida) var(--curva), transform var(--t-rapida) var(--curva);
}
.boton:hover { background: var(--verde-oscuro); }
.boton:active { background: var(--verde-profundo); transform: translateY(1px); }
.boton:focus-visible { outline: 3px solid var(--verde-oscuro); outline-offset: 3px; border-radius: var(--radio-chico); }

.boton--claro { background: var(--crema); color: var(--verde); }
.boton--claro:hover { background: var(--beige); }
.boton--claro:active { background: var(--beige); box-shadow: inset 0 2px 0 rgba(28, 28, 28, 0.12); }
.boton--claro:focus-visible { outline-color: var(--crema); }

.boton--secundario { background: transparent; color: var(--verde); border-color: var(--verde); }
.boton--secundario:hover { background: var(--papel); }
.boton--secundario:active { background: var(--papel-activo); }

.boton--grande { min-height: 56px; font-size: 1.125rem; padding-inline: var(--e-8); }

/* ---------- Encabezado ---------- */
.encabezado {
  position: relative;
  z-index: 40;
  background: var(--verde);
  color: var(--crema);
  border-bottom: 1px solid var(--linea-oscura);
}
.encabezado :focus-visible { outline-color: var(--crema); }
.encabezado__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--e-4);
  min-height: 64px;
}
.marca {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.marca__icono { width: 28px; height: 28px; color: var(--beige); }

.menu-boton {
  display: none;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  padding: 0 var(--e-4);
  font: 600 1rem/1 var(--fuente);
  color: var(--crema);
  background: transparent;
  border: 1.5px solid var(--linea-oscura);
  border-radius: var(--radio-chico);
  cursor: pointer;
}
.menu-boton__cerrar { display: none; }
.menu-boton[aria-expanded="true"] .menu-boton__abrir { display: none; }
.menu-boton[aria-expanded="true"] .menu-boton__cerrar { display: block; }

/* Sin JS: los enlaces se muestran en una fila que envuelve debajo de la marca */
.menu { width: 100%; }
.menu ul { display: flex; flex-wrap: wrap; column-gap: var(--e-4); padding-bottom: var(--e-2); }
.menu a {
  font-size: 1rem;
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
}
.menu a:hover { text-decoration: underline 2px var(--beige); text-underline-offset: 6px; }

/* Con JS, en celular: botón "Menú" y panel desplegable */
@media (max-width: 1023.98px) {
  .js .encabezado__fila { flex-wrap: nowrap; column-gap: var(--e-3); }
  .js .menu-boton { display: inline-flex; flex-shrink: 0; padding-inline: var(--e-3); }
  .js .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--verde-oscuro);
    box-shadow: var(--sombra-2);
  }
  .js .menu.menu--abierto { display: block; }
  .js .menu ul { display: block; padding: 0; }
  .js .menu a {
    min-height: 48px;
    padding: var(--e-3) var(--gutter);
    font-size: 1.125rem;
    border-top: 1px solid var(--linea-oscura);
  }
}

/* ---------- 1. Hero ---------- */
.hero { padding: var(--e-8) 0 var(--e-12); }
.antetitulo {
  font-size: var(--t-destacado);
  font-weight: 600;
  line-height: 1.4;
  color: var(--beige);
  text-wrap: balance;
}
.hero h1 { margin-top: var(--e-3); color: var(--crema); }
.hero__parrafo { margin-top: var(--e-4); max-width: 60ch; }
.hero__accion { margin-top: var(--e-6); }
.hero__dato {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
  margin-top: var(--e-3);
  font-size: var(--t-chico);
  line-height: 1.4;
  color: var(--crema-suave);
}
.hero__dato .icono { color: var(--beige); margin-top: 1px; }
.bloque { display: block; }
.hero__imagen {
  width: 100%;
  margin-top: var(--e-8);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radio-grande);
}

/* ---------- 2. Franja de datos ---------- */
.franja { background: var(--beige); padding-block: var(--e-8); }
.franja__lista li {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding-block: var(--e-3);
  font-weight: 600;
  font-size: var(--t-chico);
  line-height: 1.35;
  color: var(--tinta);
}
.franja__lista li + li { border-top: 1px solid var(--linea-clara); }
.franja__icono {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--papel);
  color: var(--verde);
}
.franja__icono .icono { width: 24px; height: 24px; }

/* Bloques de lectura: alineados al borde izquierdo del contenedor general, con ancho limitado */
.lectura > :not(p, .boton) { max-width: var(--ancho-angosto); }
.lectura--medio > :not(p, .boton) { max-width: var(--ancho-medio); }

/* ---------- 3. El problema ---------- */
.problema { padding: var(--seccion-y) 0 var(--e-8); }
.remate {
  margin-top: var(--e-6);
  padding-left: var(--e-4);
  border-left: 4px solid var(--beige);
  font-size: var(--t-destacado);
  font-weight: 700;
  line-height: 1.4;
  color: var(--beige);
}
p + .remate { margin-top: var(--e-6); }

/* ---------- 4. La propuesta ---------- */
.propuesta { padding-top: var(--e-8); }
.propuesta__grilla { display: grid; gap: var(--e-6); }
.propuesta__accion { margin-top: var(--e-2); }

.tarjeta-oscura {
  background: var(--verde-claro);
  border: 1px solid var(--linea-oscura);
  border-radius: var(--radio);
  padding: var(--e-6);
}
.tarjeta-oscura__titulo { font-size: var(--t-destacado); font-weight: 600; line-height: 1.4; }

.lista-tildes { display: grid; gap: var(--e-3); margin-top: var(--e-4); }
.lista-tildes li { display: flex; gap: var(--e-3); align-items: flex-start; }
.lista-tildes .icono { color: var(--beige); margin-top: 0.2em; }

.arboles {
  width: 100%;
  height: auto;
  aspect-ratio: 2000 / 738; /* arboles-{1000,1440,2000}: < 1024 px */
  margin-top: var(--e-12);
}

/* ---------- 5. Cómo son las clases ---------- */
.clases { padding: var(--e-8) 0 var(--seccion-y); }
.clases__grilla { display: grid; gap: var(--e-6); margin-top: var(--e-6); }
.clases__imagen { width: 100%; border-radius: var(--radio); }
.caracteristicas { display: grid; gap: var(--e-3); }
.tarjeta {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--e-4);
  align-items: start;
  padding: var(--e-5);
  background: var(--papel);
  border: 1px solid var(--linea-clara);
  border-radius: var(--radio);
  box-shadow: var(--sombra-1);
}
.tarjeta h3 { margin-bottom: var(--e-1); color: var(--verde); text-wrap: pretty; }
.tarjeta__icono {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--verde);
  color: var(--crema);
}
.nota {
  display: flex;
  gap: var(--e-2);
  align-items: flex-start;
  margin-top: var(--e-5);
  font-size: var(--t-chico);
  line-height: 1.4;
  color: var(--tinta-suave);
}
.nota .icono { color: var(--verde); margin-top: 1px; }
.clases__detalle > .boton { margin-top: var(--e-6); }

/* ---------- 6. Sobre el profesor ---------- */
.profesor { padding-block: var(--seccion-y); }
.profesor__grilla {
  display: grid;
  grid-template-areas: "titulo" "foto" "texto";
  gap: var(--e-6);
}
.profesor__titulo { grid-area: titulo; }
.profesor__texto { grid-area: texto; }
.arco {
  grid-area: foto;
  justify-self: center;
  width: min(260px, 75%);
  aspect-ratio: 413 / 473;
  display: flex;
  align-items: flex-end;
  padding-top: var(--e-4);
  overflow: hidden;
  background: var(--beige);
  border-radius: var(--radio-pill) var(--radio-pill) var(--radio) var(--radio);
}
.arco img { width: 100%; }
.profesor__referencias {
  max-width: none;
  margin-top: var(--e-6);
  padding-top: var(--e-4);
  border-top: 1px solid var(--linea-oscura);
  font-size: var(--t-chico);
  color: var(--crema-suave);
}
.profesor__texto > .boton { margin-top: var(--e-8); }

/* ---------- 7. Precio ---------- */
.precio { padding-block: var(--seccion-y); }
.precios { display: grid; gap: var(--e-6); margin-top: var(--e-8); }
.tarjeta-precio {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-8) var(--e-6) var(--e-6);
  background: var(--papel);
  border: 1px solid var(--linea-clara);
  border-radius: var(--radio);
}
.tarjeta-precio p + p { margin-top: 0; }
.tarjeta-precio h3 { color: var(--verde); }
.tarjeta-precio--destacada {
  margin-top: var(--e-4);
  background: var(--blanco);
  border: 2px solid var(--verde);
  box-shadow: var(--sombra-1);
}
.tarjeta-precio__chip {
  position: absolute;
  top: 0;
  left: var(--e-6);
  transform: translateY(-50%);
  padding: var(--e-2) var(--e-3);
  font: 600 1rem/1 var(--fuente);
  background: var(--verde);
  color: var(--crema);
  border-radius: var(--radio-pill);
}
.tarjeta-precio__monto {
  font-size: var(--t-destacado);
  color: var(--tinta-suave);
  line-height: 1.2;
}
.tarjeta-precio__cifra {
  font-size: var(--t-precio);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.tarjeta-precio .tarjeta-precio__equivalencia {
  margin-top: auto; /* alinea las equivalencias al pie de las dos tarjetas */
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea-clara);
  font-size: var(--t-destacado);
  font-weight: 700;
  line-height: 1.3;
  color: var(--verde);
}
.tarjeta-precio__nota { font-size: var(--t-chico); line-height: 1.4; color: var(--tinta-suave); }
/* Desde 768 px las dos tarjetas comparten filas (subgrid): las equivalencias quedan alineadas
   aunque la destacada tenga además la nota de los meses con 5 sábados. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 768px) {
    .precios { grid-template-rows: repeat(5, auto); }
    .tarjeta-precio { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: var(--e-3); align-content: start; }
    .tarjeta-precio .tarjeta-precio__equivalencia { margin-top: 0; align-self: start; }
  }
}
.nota-precio { font-size: var(--t-chico); color: var(--tinta-suave); line-height: 1.4; }
.precios + .nota-precio { margin-top: var(--e-6); }
.nota-precio + .nota-precio { margin-top: var(--e-2); }
.precio .boton { margin-top: var(--e-5); }

/* ---------- 8. Preguntas frecuentes ---------- */
.faq { padding-block: var(--seccion-y); }
.faq__cuerpo { margin-top: var(--e-6); }
.faq__item { border-bottom: 1px solid var(--linea-oscura); }
.faq__item:first-child { border-top: 1px solid var(--linea-oscura); }
.faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-4);
  min-height: 56px;
  padding-block: var(--e-4);
  list-style: none;
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline: 3px solid var(--crema); outline-offset: 4px; border-radius: 4px; }
.faq__item h3 { font-size: 1.125rem; color: var(--crema); text-wrap: balance; }
.faq__item summary:hover h3 { text-decoration: underline 2px; text-underline-offset: 0.2em; }
.faq__icono {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--linea-oscura);
  border-radius: 50%;
  transition: background-color var(--t-media) var(--curva);
}
.faq__icono .icono { transition: transform var(--t-media) var(--curva); }
.faq__item[open] .faq__icono { background: var(--crema); color: var(--verde); }
.faq__item[open] .faq__icono .icono { transform: rotate(45deg); }
.faq__respuesta { padding-bottom: var(--e-5); color: var(--crema-suave); }
.faq__cuerpo > .boton { margin-top: var(--e-8); }

/* ---------- 9. Cierre ---------- */
.cierre { padding-block: var(--e-16); text-align: center; }
.cierre__icono { width: 48px; height: 48px; margin: 0 auto var(--e-4); color: var(--verde); }
.cierre p { max-width: 48ch; margin-inline: auto; text-wrap: balance; }
.cierre .boton { margin-top: var(--e-8); }

/* ---------- 10. Pie ---------- */
.pie { padding-block: var(--e-12); background: var(--verde); color: var(--crema); }
.js .con-flotante .pie { padding-bottom: 6rem; } /* lugar para el botón flotante (solo en páginas que lo tienen) */
.pie :focus-visible { outline-color: var(--crema); }
.pie__marca {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-weight: 700;
  font-size: 1.125rem;
}
.pie__marca .icono { width: 28px; height: 28px; color: var(--beige); }
.pie__frase { margin-top: var(--e-2); color: var(--crema-suave); }
.pie__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  margin-top: var(--e-6);
}
.pie__copy {
  max-width: none;
  margin-top: var(--e-6);
  padding-top: var(--e-6);
  border-top: 1px solid var(--linea-oscura);
  font-size: var(--t-chico);
  color: var(--crema-suave);
}

/* ---------- Botón flotante de WhatsApp ---------- */
.flotante {
  position: fixed;
  right: max(var(--e-4), env(safe-area-inset-right) + var(--e-4));
  bottom: max(var(--e-4), env(safe-area-inset-bottom) + var(--e-4));
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  height: 56px;
  padding: 0 var(--e-5) 0 var(--e-4);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  background: var(--verde);
  color: var(--crema);
  border: 2px solid var(--crema);
  border-radius: var(--radio-pill);
  box-shadow: var(--sombra-2);
  transition: opacity var(--t-media) var(--curva), transform var(--t-media) var(--curva), visibility 0s linear 0s, background-color var(--t-rapida) var(--curva);
}
.flotante .icono { width: 24px; height: 24px; }
.flotante:hover { background: var(--verde-oscuro); }
.flotante:active { background: var(--verde-profundo); transform: translateY(1px); }
.flotante:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--crema), 0 0 0 6px var(--tinta), var(--sombra-2);
}
/* Con JS se oculta mientras se ven los botones del hero o del cierre. Sin JS queda siempre visible. */
.js .flotante:not(.flotante--visible) {
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--e-4));
  transition: opacity var(--t-media) var(--curva), transform var(--t-media) var(--curva), visibility 0s linear var(--t-media);
}
@media (max-width: 479.98px) {
  .flotante__extra { display: none; }
}
/* Pantallas muy chicas (< 360 px): botón Menú solo con ícono y botones más compactos para que entren en una línea */
@media (max-width: 359.98px) {
  .js .menu-boton { width: 44px; padding: 0; justify-content: center; }
  .menu-boton__texto {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .boton { padding-inline: var(--e-3); gap: var(--e-2); }
  .boton--grande { font-size: 1.0625rem; }
}

/* Sin JS no se muestra: la página ya tiene un botón de WhatsApp en cada sección */
html:not(.js) .flotante { display: none; }

/* ---------- Página 404 ---------- */
.error {
  display: grid;
  place-items: center;
  min-height: 60svh;
  padding-block: var(--e-16);
  text-align: center;
}
.error__icono { width: 64px; height: 64px; margin: 0 auto var(--e-4); color: var(--verde); }
.error h1 { color: var(--verde); }
.error p { max-width: 48ch; margin: var(--e-4) auto 0; }
.error__botones { display: grid; justify-items: center; gap: var(--e-3); margin-top: var(--e-8); }

/* ---------- 600 px ---------- */
@media (min-width: 600px) {
  .franja__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4) var(--e-6); }
  .franja__lista li { padding-block: 0; }
  .franja__lista li + li { border-top: 0; }
}

/* ---------- 768 px ---------- */
@media (min-width: 768px) {
  .boton { width: auto; min-height: 48px; }
  .boton--grande { min-height: 56px; }
  .clases__imagen { max-width: 560px; margin-inline: auto; }
  .precios { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .tarjeta-precio--destacada { margin-top: 0; }
  .error__botones { display: flex; justify-content: center; gap: var(--e-4); }
}

/* ---------- 1024 px ---------- */
@media (min-width: 1024px) {
  .encabezado__fila { flex-wrap: nowrap; min-height: 76px; }
  .marca { font-size: 1.1875rem; }
  .menu { width: auto; }
  .menu ul { column-gap: var(--e-6); padding-bottom: 0; }
  .menu a { padding: var(--e-3) var(--e-2); }
  .menu li:last-child a { margin-right: calc(-1 * var(--e-2)); } /* alinea el texto con el borde del contenedor */

  .hero { padding: var(--e-16) 0 var(--e-20); }
  .hero__grilla {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--e-12);
    align-items: center;
  }
  .hero__accion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4) var(--e-6); }
  .hero__dato { margin-top: 0; }
  .hero__imagen { margin-top: 0; aspect-ratio: 4 / 3; object-position: 50% 62%; }

  .franja { padding-block: var(--e-10); }
  .franja__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-6); }
  .franja__lista li + li { border-left: 1px solid var(--linea-clara); padding-left: var(--e-6); }

  .problema { padding-bottom: var(--e-12); }

  .propuesta__grilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    grid-template-areas: "intro tarjeta" "accion tarjeta";
    grid-template-rows: auto 1fr;
    column-gap: var(--e-16);
    row-gap: 0;
    align-items: start;
  }
  .propuesta__intro { grid-area: intro; }
  .tarjeta-oscura { grid-area: tarjeta; }
  .propuesta__accion { grid-area: accion; margin-top: var(--e-8); }
  .arboles { margin-top: var(--e-10); aspect-ratio: 2400 / 593; } /* arboles-ancho-*: franja más baja en escritorio */

  .clases__intro { max-width: var(--ancho-texto); }
  .clases__grilla {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--e-12);
    align-items: start;
    margin-top: var(--e-10);
  }
  .clases__imagen { position: sticky; top: var(--e-8); max-width: none; }

  .profesor__grilla {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "foto titulo" "foto texto";
    column-gap: var(--e-16);
    row-gap: var(--e-4);
    align-items: center;
  }
  .profesor__titulo { align-self: end; }
  .profesor__texto { align-self: start; }
  .arco { width: 340px; justify-self: start; }

  .faq__grilla {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--e-16);
    align-items: start;
  }
  .faq__grilla h2 { position: sticky; top: var(--e-8); }
  .faq__cuerpo { margin-top: 0; }
  .faq__item h3 { font-size: var(--t-h3); }

  .cierre { padding-block: var(--e-24); }

  .js .con-flotante .pie { padding-bottom: var(--e-12); }
  .pie__fila { display: flex; justify-content: space-between; align-items: center; gap: var(--e-8); }
  .pie__whatsapp { margin-top: 0; }

  .flotante {
    right: max(var(--e-8), env(safe-area-inset-right) + var(--e-8));
    bottom: max(var(--e-8), env(safe-area-inset-bottom) + var(--e-8));
  }
}

/* ---------- Movimiento ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* !important justificado: anula cualquier transición o animación cuando el usuario pidió reducir el movimiento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .flotante { transform: none !important; }
}