/* =========================================================================
   Eduardo Luraschi — hoja única
   Territorio: negro profundo, grano, foto protagonista y tipografía de afiche.
   Sin separadores decorativos ni grillas simétricas texto+imagen.
   ========================================================================= */

/* ── Montserrat, servida desde el mismo origen ──────────────────────────────
   Antes venía de Google Fonts: dos pedidos a un tercero, y uno de ellos
   bloqueando el primer pintado (el navegador tenía que traer la hoja de
   estilos de Google, leerla, y recién ahí pedir el woff2). Ahora el archivo
   está acá y se precarga desde el HTML.
   Las genera scripts/bajar-fuentes.mjs; no se editan a mano. Un solo archivo
   por subconjunto cubre de 400 a 800 porque es variable, y el navegador usa
   el unicode-range para bajar sólo el que necesita: en español, latin. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --negro: #06070a;
  --carbon: #0b0d12;
  --panel: #12151c;
  --panel-alto: #171b24;
  --borde: #232936;
  --tinta: #eef1f5;
  --gris: #99a1ae;
  /* No bajar de acá: sobre el negro del pie, #6b7382 daba 4.22:1 y el texto
     chico necesita 4.5:1. Este da ~5.7:1. */
  --gris-hondo: #838b98;
  --acento: #00d9ff;
  --acento-hondo: #0090ad;
  --wa: #25d366;

  --sombra-honda: 0 32px 80px -24px rgba(0, 0, 0, 0.9), 0 8px 24px -8px rgba(0, 0, 0, 0.7);
  --sombra-acento: 0 24px 64px -20px rgba(0, 217, 255, 0.28);

  /* Una sola familia en todo el sitio. El contraste lo dan el peso y la
     escala, no mezclar dos tipografías. */
  --display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --texto: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --borde-r: 14px;
  --ancho: 1280px;
  --canal: clamp(1.25rem, 5vw, 5rem);
}

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

/* ── Transiciones entre páginas ─────────────────────────────────────────────
   Al entrar a la ficha de un plan, su foto crece desde la tarjeta en vez de
   que la página salte en blanco. Es la API nativa del navegador: donde no
   está soportada, navega como siempre. No hay JavaScript de por medio ni
   librería, y por eso no puede romper nada.
   El emparejado lo hace `view-transition-name`, que construir.mjs pone con el
   slug del plan en la foto de la tarjeta y en la de la ficha: el navegador ve
   el mismo nombre de los dos lados y las trata como el mismo objeto. */
@view-transition { navigation: auto; }

::view-transition-group(*) {
  animation-duration: 0.42s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* La cabecera se queda quieta en vez de desvanecerse con el resto. */
.cabecera { view-transition-name: cabecera; }

html {
  scroll-behavior: smooth;
  /* La cabecera es fija: sin esto los anclajes dejan el título por debajo. */
  scroll-padding-top: 6.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--negro);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.075rem);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Grano: le saca el plano digital al negro sin sumar peso ni movimiento. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
}

/* height:auto es necesario, no cosmético: los atributos width/height del HTML
   cuentan como alto fijo y anulan el aspect-ratio, con lo que object-fit
   recorta de más. Donde hace falta alto completo se declara aparte. */
img { max-width: 100%; display: block; height: auto; }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0 0 1.1em; }

a { color: inherit; }
:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Iconos ─────────────────────────────────────────────────────────────────
   Dos familias: las de trazo se pintan con stroke y los logos de marca con
   fill. La distinción va por clase, no por dónde esté el icono, para que las
   reglas de un botón o del pie no deformen un logo. */
.ico-trazo {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico-marca { fill: currentColor; stroke: none; }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.saltar {
  position: fixed;
  top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: 10000;
  padding: 0.75rem 1.4rem;
  background: var(--acento);
  color: #041016;
  font-weight: 700;
  border-radius: 0 0 10px 10px;
  text-decoration: none;
  transition: transform 0.2s;
}
.saltar:focus { transform: translate(-50%, 0); }

/* ── Tipografía compartida ──────────────────────────────────────────────── */

/* Montserrat es geométrica y mucho más ancha que una condensada: los cuerpos
   son bastante menores que con Anton y el tracking va cerrado para que a
   tamaño grande no se abra. */
.titulo-seccion {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}

/* ── Botones ────────────────────────────────────────────────────────────── */

.boton {
  --alto: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: var(--alto);
  padding: 0 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1), background-color 0.25s, border-color 0.25s, box-shadow 0.25s, color 0.25s;
}
.boton svg { width: 1.15em; height: 1.15em; flex: none; }
.boton--grande { --alto: 3.5rem; padding: 0 2rem; font-size: 1.02rem; }

.boton--pleno {
  background: var(--acento);
  color: #04141a;
  box-shadow: var(--sombra-acento);
}
.boton--pleno:hover,
.boton--pleno:focus-visible {
  background: #5ce7ff;
  transform: translateY(-2px);
}

.boton--linea {
  border-color: var(--borde);
  color: var(--tinta);
  background: rgba(255, 255, 255, 0.02);
}
.boton--linea:hover,
.boton--linea:focus-visible {
  border-color: var(--acento);
  color: var(--acento);
  transform: translateY(-2px);
}

/* ── Cabecera ───────────────────────────────────────────────────────────── */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 0.85rem var(--canal);
  background: rgba(6, 7, 10, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background-color 0.3s, padding 0.3s;
}
.cabecera.esta-fija {
  border-bottom-color: var(--borde);
  background: rgba(6, 7, 10, 0.92);
  padding-block: 0.6rem;
}

/* Arriba de todo en la home, la cabecera se borra y deja ver el hero; al
   scrollear vuelve el fondo.
   La clase es POSITIVA y la pone el JS ("estoy arriba"), en vez de poner el
   fondo sólo al scrollear. Parece rebuscado y es a propósito: si main.js no
   llega a cargar, la cabecera se queda con su fondo de siempre en vez de
   quedar transparente para siempre, con el texto de la página pasándole por
   abajo. El estado seguro tiene que ser el que se ve sin JavaScript.
   El paso de sólido a transparente al cargar lo suaviza la transición que ya
   está declarada arriba. */
/* En la home la cabecera va FIJA, no pegajosa.
   `sticky` sigue ocupando su lugar en el flujo, así que el hero arrancaba 76px
   más abajo y volverla transparente no mostraba la foto: mostraba el fondo
   negro de la página. Fija se sale del flujo, el hero empieza en cero y la
   cabecera flota encima. El `scroll-padding-top` del html ya estaba puesto
   contando con esto, así que los anclajes siguen cayendo bien.
   En las páginas de plan se queda `sticky`: ahí abajo hay texto y conviene que
   la cabecera le reserve su espacio. */
.cabecera--sobre-hero {
  position: fixed;
  left: 0;
  right: 0;
}
.cabecera--sobre-hero.esta-arriba {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

/* Velo degradado detrás de la cabecera transparente.
   No es decoración: medido sobre el hero, el texto del nav caía a 1,67:1 de
   contraste donde cruza la cara iluminada de Eduardo, contra los 4,5:1 que
   necesita el texto chico. Un degradado que se desvanece hacia abajo lo
   resuelve sin volver a tapar la foto, que es lo que se quería evitar.
   Va sólo cuando la cabecera está transparente; al aparecer el fondo sólido
   se apaga. */
.cabecera--sobre-hero::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 190px;
  /* Calibrado midiendo, no a ojo: el peor punto del fondo detrás del nav queda
     en 9,05:1 en desktop y 10,25:1 en móvil, contra los 4,5:1 que pide el
     texto chico. Sin velo ese peor punto daba 1,67:1, ilegible. Más oscuro
     pasaba a leerse como una barra negra, que es justo lo que se quería sacar.
     Para medirlo hay que ocultar el contenido de la cabecera: si no, el pico
     de luminancia que se mide son los propios píxeles del texto blanco. */
  background: linear-gradient(
    to bottom,
    rgba(6, 7, 10, 0.72) 0%,
    rgba(6, 7, 10, 0.64) 38%,
    rgba(6, 7, 10, 0.34) 68%,
    transparent 100%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
}
.cabecera--sobre-hero.esta-arriba::before { opacity: 1; }
.cabecera__marca { flex: none; line-height: 0; }
.cabecera__marca img {
  width: clamp(150px, 17vw, 210px);
  height: auto;
  /* Antes acá iba mix-blend-mode:screen para disimular el fondo negro del
     JPEG. Ya no hace falta: el logo se genera como PNG con transparencia real
     (ver optimizar-imagenes.mjs). El blend además no servía con la cabecera
     transparente, porque el z-index le arma su propio contexto de apilado y
     nunca llegaba a mezclarse con el hero. */
}

.cabecera__nav { margin-left: auto; }
.cabecera__nav ul { display: flex; gap: clamp(1rem, 2vw, 1.9rem); }
.cabecera__nav a {
  position: relative;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gris);
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
}
.cabecera__nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: -6px;
  height: 2px;
  background: var(--acento);
  transition: right 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.cabecera__nav a:hover,
.cabecera__nav a:focus-visible { color: var(--tinta); }
.cabecera__nav a:hover::after { right: 0; }

.cabecera__cta { flex: none; }

.hamburguesa {
  display: none;
  flex: none;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--borde);
  border-radius: 10px;
  cursor: pointer;
}
.hamburguesa span {
  display: block;
  width: 18px; height: 2px;
  margin: 3px auto;
  background: var(--tinta);
  transition: transform 0.3s, opacity 0.3s;
}
.hamburguesa[aria-expanded='true'] span:first-child { transform: translateY(2.5px) rotate(45deg); }
.hamburguesa[aria-expanded='true'] span:last-child { transform: translateY(-2.5px) rotate(-45deg); }

.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  background: rgba(6, 7, 10, 0.97);
  backdrop-filter: blur(8px);
}
.menu-movil[hidden] { display: none; }
.menu-movil ul { display: grid; gap: 1.6rem; text-align: center; }
.menu-movil a {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.35rem, 5.5vw, 2rem);
  letter-spacing: -0.02em;
  text-decoration: none;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: min(92svh, 900px);
  display: grid;
  align-items: end;
  padding: clamp(4rem, 12vh, 9rem) var(--canal) clamp(3rem, 7vh, 5rem);
  overflow: hidden;
  isolation: isolate;
}
.hero__medio {
  position: absolute;
  inset: -6% 0 0;
  z-index: -2;
  will-change: transform;
}
.hero__medio img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 68% 30%;
}
/* Doble velo: uno lateral que despeja la columna de texto y uno inferior que
   funde la foto con la sección siguiente. */
.hero__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, var(--negro) 12%, rgba(6, 7, 10, 0.82) 38%, rgba(6, 7, 10, 0.18) 62%, rgba(6, 7, 10, 0.5) 100%),
    linear-gradient(to top, var(--negro) 2%, rgba(6, 7, 10, 0) 45%);
}

/* Ancho atado al viewport: deja libre el tercio derecho, que es donde está
   Eduardo en la foto. */
.hero__contenido { max-width: min(58rem, 63vw); }

.hero__titulo {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  /* "comienza hoy" es la línea más larga: por encima de esto envuelve y el
     hero deja los botones fuera de pantalla. */
  font-size: clamp(1.95rem, 5.1vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 1.5rem;
  text-shadow: 0 18px 60px rgba(0, 0, 0, 0.75);
}
.hero__titulo .linea { display: block; }
.hero__titulo .linea--acento {
  color: transparent;
  background: linear-gradient(96deg, var(--acento) 8%, #8af3ff 55%, var(--acento) 92%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero__bajada {
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: #cdd3dc;
  margin-bottom: 0.6rem;
}
.hero__sumate {
  font-weight: 700;
  color: var(--tinta);
  margin-bottom: 2rem;
}

.hero__acciones { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* ── Credenciales ───────────────────────────────────────────────────────── */

.credenciales {
  padding: clamp(3rem, 7vw, 5rem) var(--canal);
  background: linear-gradient(to bottom, var(--negro), var(--carbon));
}
.credenciales ul {
  max-width: var(--ancho);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}
.credenciales__dato {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.25rem, 2.3vw, 1.85rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--acento);
  margin: 0 0 0.5rem;
}
.credenciales__pie {
  margin: 0;
  font-size: 0.9rem;
  color: var(--gris);
  line-height: 1.45;
}

/* ── Sobre mí ───────────────────────────────────────────────────────────── */

.sobre {
  padding: clamp(4rem, 10vw, 8rem) var(--canal) clamp(2.5rem, 6vw, 4rem);
  background: var(--carbon);
}
.sobre__cabecera { max-width: var(--ancho); margin-inline: auto; }

.sobre__grilla {
  max-width: var(--ancho);
  margin-inline: auto;
  display: grid;
  /* Asimétrica a propósito: el retrato manda y el texto corre al costado. */
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.sobre__retrato {
  margin: 0;
  position: sticky;
  top: 7rem;
  /* El alto lo fija el marco, no la imagen: adentro la foto es más alta para
     que el parallax tenga recorrido sin descubrir los bordes. */
  aspect-ratio: 7 / 9;
  border-radius: var(--borde-r);
  overflow: hidden;
  box-shadow: var(--sombra-honda);
}
.sobre__retrato img {
  width: 100%;
  height: 112%;
  object-fit: cover;
  will-change: transform;
}
.sobre__texto p { color: var(--gris); max-width: 62ch; }
.sobre__entrada {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.45;
  color: var(--tinta) !important;
  font-weight: 500;
  margin-bottom: 1.6em;
}

/* ── Tira de galería ────────────────────────────────────────────────────── */

.tira {
  padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 8vw, 6rem);
  background: var(--carbon);
  overflow: hidden;
}
.tira__pista {
  display: flex;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  width: max-content;
  padding-inline: var(--canal);
  will-change: transform;
}
.tira__item {
  margin: 0;
  flex: none;
  /* Achicadas cuando la tira pasó de 4 fotos a 14: a 330px la pista medía
     casi 10.000px y el scrub la hacía volar. Además así entran más a la vez,
     que es lo que le da aire de archivo y no de carrusel. */
  width: clamp(170px, 19vw, 260px);
  border-radius: var(--borde-r);
  overflow: hidden;
  filter: grayscale(1) contrast(1.06);
  transition: filter 0.5s;
}
.tira__item:hover { filter: grayscale(0) contrast(1); }
.tira__item img { width: 100%; aspect-ratio: 7 / 9; object-fit: cover; }

/* ── Planes ─────────────────────────────────────────────────────────────── */

.planes {
  padding: clamp(4rem, 10vw, 8rem) var(--canal);
  background: var(--negro);
}
.planes__intro {
  max-width: var(--ancho);
  margin: 0 auto clamp(2.5rem, 6vw, 4rem);
}
.planes__bajada {
  max-width: 60ch;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  color: var(--gris);
  margin-bottom: 0.5em;
}
.planes__charla {
  margin-top: 1.4rem;
  font-weight: 700;
  color: var(--tinta);
}
.planes__charla::after {
  content: '';
  display: block;
  width: 4.5rem;
  height: 3px;
  margin-top: 0.7rem;
  border-radius: 3px;
  background: var(--acento);
}

.planes__grilla {
  max-width: var(--ancho);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(1.1rem, 2.2vw, 1.75rem);
}

.plan {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--borde-r);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.35s, box-shadow 0.35s;
}
.plan:hover {
  transform: translateY(-6px);
  border-color: #2f3a4d;
  box-shadow: var(--sombra-honda);
}
.plan__foto { display: block; overflow: hidden; background: var(--panel-alto); }
.plan__foto img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.plan:hover .plan__foto img { transform: scale(1.05); }

.plan__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.35rem 1.35rem 1.5rem;
}
.plan__nombre {
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.75rem;
  text-wrap: balance;
}
/* El título de la tarjeta lleva a la página del plan. Sin subrayado porque es
   un encabezado de bloque, no un link dentro de un párrafo: lo que lo delata
   como interactivo son el hover y el foco, no la rayita. */
.plan__nombre a { text-decoration: none; }
.plan__nombre a:hover,
.plan__nombre a:focus-visible { color: var(--acento); }
.plan__desc {
  font-size: 0.92rem;
  color: var(--gris);
  line-height: 1.6;
  margin-bottom: 1.2rem;
}
.plan__lista { display: grid; gap: 0.5rem; margin-bottom: 1.2rem; }
.plan__lista li,
.porque__lista li,
.coach__lista li,
.tube__lista li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  font-size: 0.92rem;
  color: var(--gris);
  line-height: 1.55;
}
.plan__lista svg,
.porque__lista svg,
.coach__lista svg,
.tube__lista svg {
  width: 1.05em; height: 1.05em;
  margin-top: 0.32em;
  flex: none;
  color: var(--acento);
  stroke-width: 2.6;
}

/* Desplegable nativo: el resto de la descripción sin JS ni recortar texto. */
.plan__mas { margin-bottom: 1.2rem; }
.plan__mas summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  /* Alto mínimo para que sea un objetivo táctil cómodo. */
  min-height: 2.25rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--acento);
}
.plan__mas summary::-webkit-details-marker { display: none; }
.plan__mas summary::after {
  content: '';
  width: 0.45rem; height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s;
}
.plan__mas[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.plan__mas[open] summary { margin-bottom: 0.8rem; }
.plan__mas .plan__desc:last-child,
.plan__mas .plan__lista:last-child { margin-bottom: 0; }

.plan__pie { margin-top: auto; padding-top: 0.4rem; }
.plan__precio {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.85rem;
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 0 0 0.4rem;
}
.plan__cuotas,
.plan__transf {
  margin: 0 0 0.25rem;
  font-size: 0.82rem;
  font-weight: 600;
}
.plan__cuotas { color: #38e0a8; }
.plan__transf { color: var(--acento); }
.plan__cta { width: 100%; margin-top: 1rem; }

/* ── Cita ───────────────────────────────────────────────────────────────── */

.cita {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(70svh, 620px);
  padding: clamp(4rem, 10vw, 8rem) var(--canal);
  overflow: hidden;
  isolation: isolate;
}
.cita__medio {
  position: absolute;
  inset: -12% 0;
  z-index: -2;
  will-change: transform;
}
.cita__medio img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1) brightness(0.62);
}
.cita::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(70% 60% at 50% 50%, rgba(6, 7, 10, 0.35), rgba(6, 7, 10, 0.88));
}
.cita__texto {
  margin: 0;
  max-width: 22ch;
  text-align: center;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3.9vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-shadow: 0 16px 50px rgba(0, 0, 0, 0.8);
}

/* ── Entrenamiento a distancia ──────────────────────────────────────────── */

.distancia {
  padding: clamp(4rem, 10vw, 8rem) var(--canal);
  background: linear-gradient(to bottom, var(--negro), var(--carbon) 60%);
}
.distancia__intro { max-width: var(--ancho); margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); }
.distancia__lead {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 600;
  max-width: 46ch;
}
.distancia__bajada { max-width: 62ch; color: var(--gris); }

.porque {
  max-width: var(--ancho);
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--borde-r);
}
.porque__titulo {
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-weight: 700;
  margin: 0 0 1.3rem;
}
.porque__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 0.9rem clamp(1.5rem, 3vw, 2.5rem);
}
.porque__lista li { font-size: 0.97rem; }

.distancia__elegi {
  max-width: var(--ancho);
  margin: 0 auto 1.5rem;
  font-weight: 700;
}
.distancia__grilla {
  max-width: var(--ancho);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(1.1rem, 2.4vw, 1.75rem);
  align-items: start;
}

.coach {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--borde-r);
}
.coach--destacado {
  background: linear-gradient(168deg, var(--panel-alto), var(--panel) 70%);
  border-color: rgba(0, 217, 255, 0.4);
  box-shadow: var(--sombra-acento);
}
.coach__cinta {
  position: absolute;
  top: -0.75rem; left: clamp(1.5rem, 3vw, 2.25rem);
  margin: 0;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: var(--acento);
  color: #04141a;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.coach__nombre {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0.6rem;
  text-wrap: balance;
}
.coach__bajada { color: var(--gris); font-size: 0.97rem; margin-bottom: 1.3rem; }
.coach__precio {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 0 0 1.3rem;
}
.coach__precio span {
  font-family: var(--texto);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gris);
  letter-spacing: 0;
}
.coach__cta { width: 100%; margin-bottom: 1.6rem; }
.coach--destacado .coach__cta { background: var(--wa); color: #04140a; box-shadow: 0 20px 50px -18px rgba(37, 211, 102, 0.5); }
.coach--destacado .coach__cta:hover { background: #3ee87d; }
.coach__lista { display: grid; gap: 0.75rem; }

/* ── YouTube ────────────────────────────────────────────────────────────── */

.tube {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  max-width: var(--ancho);
  margin-inline: auto;
  padding: clamp(4rem, 10vw, 8rem) var(--canal);
}
.tube__texto p { color: var(--gris); max-width: 52ch; }
.tube__lista { display: grid; gap: 0.6rem; margin: 1.5rem 0; }
.tube__cierre { font-weight: 700; color: var(--tinta) !important; margin-bottom: 1.8rem; }

.tube__video { position: relative; }
.tube__lanzar {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: var(--borde-r);
  overflow: hidden;
  background: var(--panel);
  cursor: pointer;
  box-shadow: var(--sombra-honda);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.35s;
}
.tube__lanzar:hover { transform: translateY(-4px); border-color: #2f3a4d; }
.tube__lanzar img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tube__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.tube__play svg {
  width: 4.5rem; height: 4.5rem;
  box-sizing: content-box;
  padding: 1.15rem 1rem 1.15rem 1.35rem;
  border-radius: 50%;
  background: rgba(6, 7, 10, 0.72);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  transition: transform 0.3s, background-color 0.3s;
}
.tube__lanzar:hover .tube__play svg { transform: scale(1.08); background: var(--acento); color: #04141a; }
.tube__video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--borde-r); display: block; }

/* ── Pie ────────────────────────────────────────────────────────────────── */

.pie {
  padding: clamp(3rem, 7vw, 5rem) var(--canal) 2rem;
  background: var(--negro);
  border-top: 1px solid var(--borde);
}
.pie__arriba {
  max-width: var(--ancho);
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem clamp(2rem, 8vw, 6rem);
  align-items: start;
}
/* Sin mix-blend-mode: el logo ya viene con transparencia real. */
.pie__marca img { width: 210px; margin-bottom: 1rem; }
.pie__marca p { max-width: 34ch; font-weight: 700; margin: 0; }
.pie__redes p { font-size: 0.9rem; color: var(--gris); margin-bottom: 0.75rem; }
.pie__redes ul { display: flex; gap: 0.6rem; }
.pie__redes a {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--borde);
  border-radius: 11px;
  color: var(--gris);
  transition: color 0.25s, border-color 0.25s, transform 0.25s;
}
.pie__redes a:hover { color: var(--acento); border-color: var(--acento); transform: translateY(-3px); }
.pie__redes svg { width: 18px; height: 18px; }

.pie__abajo {
  max-width: var(--ancho);
  margin-inline: auto;
  padding-top: 1.75rem;
  border-top: 1px solid var(--borde);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
}
.pie__abajo p { margin: 0; font-size: 0.85rem; color: var(--gris-hondo); }
.pie__abajo a { color: var(--acento); text-decoration: none; }
.pie__abajo a:hover { text-decoration: underline; }

/* ── WhatsApp flotante ──────────────────────────────────────────────────── */

.flotante {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0.9rem;
  border-radius: 999px;
  background: var(--wa);
  color: #04140a;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 18px 44px -14px rgba(37, 211, 102, 0.6);
  transition: gap 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), padding 0.35s, transform 0.25s;
}
.flotante svg { width: 26px; height: 26px; flex: none; }
.flotante span {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.92rem;
  transition: max-width 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.flotante:hover,
.flotante:focus-visible {
  gap: 0.6rem;
  padding-inline: 1.1rem 1.4rem;
  transform: translateY(-2px);
}
.flotante:hover span,
.flotante:focus-visible span { max-width: 14rem; }

/* ── Reveals: estado inicial sólo si GSAP va a animarlos ────────────────── */

.js-anim [data-revelar],
.js-anim [data-partir] { visibility: hidden; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .tube { grid-template-columns: 1fr; }
  .tube__texto p { max-width: none; }
}

@media (max-width: 980px) {
  .sobre__grilla { grid-template-columns: 1fr; }
  .sobre__retrato { position: static; max-width: 460px; }
}

@media (max-width: 860px) {
  .cabecera__nav { display: none; }
  .cabecera__cta { display: none; }
  .hamburguesa { display: block; margin-left: auto; }
  .hero { min-height: 100svh; align-items: end; }
  .hero__contenido { max-width: none; }
  .hero__medio img { object-position: 50% 22%; }
  .hero__velo {
    background:
      linear-gradient(to top, var(--negro) 22%, rgba(6, 7, 10, 0.55) 55%, rgba(6, 7, 10, 0.25) 100%);
  }
  .flotante span { display: none; }
}

@media (max-width: 560px) {
  .plan__cta { --alto: 3.25rem; }
  .pie__abajo { flex-direction: column; }
}

/* ── Página individual de plan ──────────────────────────────────────────────
   Como la de gracias: HTML plano, sin reveals ni GSAP. Son las páginas que
   tiene que poder leer un buscador y alguien que llega de Google sin más. */

.cabecera--simple .cabecera__nav ul { gap: clamp(0.9rem, 2vw, 1.6rem); }

.ficha {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: clamp(6.5rem, 12vw, 9rem) var(--canal) clamp(4rem, 8vw, 6rem);
}
.ficha__migas {
  font-size: 0.82rem;
  color: var(--gris-hondo);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.ficha__migas a { color: var(--gris); text-decoration: none; }
.ficha__migas a:hover,
.ficha__migas a:focus-visible { color: var(--tinta); }
.ficha__migas span { margin: 0 0.4rem; }
.ficha__migas [aria-current] { color: var(--gris-hondo); margin: 0; }

.ficha__grilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.ficha__foto {
  border-radius: var(--borde-r);
  overflow: hidden;
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-honda);
}
/* Sin height:auto el atributo height del img gana y anula el aspect-ratio:
   ya pasó una vez y recortaba las placas por el medio. */
.ficha__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.ficha__titulo {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0 0 1.2rem;
}
.ficha__precio {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 0 0 1.5rem;
}
.ficha__cta { width: 100%; }
.ficha__entrega {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1.2rem 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: #38e0a8;
}
.ficha__entrega svg { width: 1.1em; height: 1.1em; flex: none; }
.ficha__consulta {
  margin: 0.9rem 0 0;
  font-size: 0.88rem;
  color: var(--gris-hondo);
}
.ficha__consulta a { color: var(--acento); }

.ficha__texto {
  max-width: 68ch;
  margin: clamp(3rem, 7vw, 5rem) 0 0;
  color: var(--gris);
}
.ficha__texto p { margin: 0 0 1.1rem; }
.ficha__sub {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  letter-spacing: -0.03em;
  color: var(--tinta);
  margin: 2.2rem 0 1rem;
}
.ficha__lista { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 0.7rem; }
.ficha__lista li { display: flex; gap: 0.7rem; align-items: start; }
.ficha__lista svg { width: 1.15em; height: 1.15em; flex: none; color: var(--acento); margin-top: 0.25em; }

.ficha__otros { margin-top: clamp(4rem, 9vw, 7rem); }
.ficha__otros-grilla {
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}
.ficha__otros-grilla a {
  display: grid;
  gap: 0.5rem;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--borde-r);
  overflow: hidden;
  padding-bottom: 1rem;
  text-decoration: none;
  transition: border-color 0.25s, transform 0.25s;
}
.ficha__otros-grilla a:hover,
.ficha__otros-grilla a:focus-visible { border-color: var(--acento-hondo); transform: translateY(-3px); }
.ficha__otros-grilla img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.ficha__otros-nombre {
  padding: 0 0.9rem;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--tinta);
}
.ficha__otros-precio {
  padding: 0 0.9rem;
  font-family: var(--display);
  font-weight: 800;
  color: var(--gris);
}
.ficha__volver { margin-top: 2rem; }
.ficha__volver a { color: var(--acento); font-weight: 600; }

@media (max-width: 860px) {
  .cabecera--simple .cabecera__cta { display: inline-flex; margin-left: auto; }
  .ficha__grilla { grid-template-columns: minmax(0, 1fr); }
}

/* ── Página de gracias ──────────────────────────────────────────────────────
   Adonde cae el comprador después de pagar. Sin animaciones de entrada a
   propósito: es la única pantalla del sitio donde alguien ya puso plata, y
   tiene que verse aunque no corra una línea de JavaScript. */

.gracias {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 3rem var(--canal);
}
.gracias__caja {
  width: min(34rem, 100%);
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--borde-r);
  box-shadow: var(--sombra-honda);
  padding: clamp(2rem, 5vw, 3.25rem);
}
.gracias__sello {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgba(56, 224, 168, 0.12);
  color: #38e0a8;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gracias__sello svg { width: 1.05em; height: 1.05em; }
.gracias__titulo {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.2rem, 7vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0 0 0.5rem;
}
.gracias__plan {
  margin: 0 0 2rem;
  color: var(--gris);
  font-weight: 600;
}
.gracias__bajar { width: 100%; }
.gracias__nota,
.gracias__ayuda {
  margin: 1.4rem 0 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--gris-hondo);
}
.gracias__ayuda a { color: var(--acento); }
.gracias__volver {
  display: inline-block;
  margin-top: 1.8rem;
  color: var(--gris);
  font-size: 0.88rem;
}
.gracias__volver:hover,
.gracias__volver:focus-visible { color: var(--tinta); }

/* ── Menos movimiento ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js-anim [data-revelar],
  .js-anim [data-partir] { visibility: visible !important; }

  /* Las transiciones de página también son movimiento: acá el cambio es seco. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}