/* Onepercent — web puente · hoja de estilos única */

/* ── Tipografías ─────────────────────────────────── */
@font-face {
  font-family: "TWK Lausanne";
  src: url("../fonts/TWKLausanne-550.woff2") format("woff2"),
       url("../fonts/TWKLausanne-550.woff") format("woff");
  font-weight: 550;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ──────────────────────────────────────── */
:root {
  --bg: #0a0a0a;
  --panel: #121211;
  --panel-2: #1a1a18;
  --ink: #f6f8db;
  --ink-70: rgba(246, 248, 219, 0.85);
  --ink-50: rgba(246, 248, 219, 0.70);
  --ink-35: rgba(246, 248, 219, 0.54);
  --line: rgba(246, 248, 219, 0.17);
  --line-strong: rgba(246, 248, 219, 0.26);
  --lime: #bde084;
  --blue-text: #93add6;
  /* los tres estados del motor, para usarlos fuera del aro */
  --estado-bajo: #ee5647;
  --estado-medio: #eaca4c;
  --estado-alto: #8fe35a;
  --title: "TWK Lausanne", "Inter", -apple-system, sans-serif;
  --body: "Inter", -apple-system, sans-serif;
  --radius: 24px;
}

/* ── Base ────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* la banda de disciplinas se sale del contenedor a propósito; con barra de
   scroll clásica eso sacaría scroll horizontal. «clip» lo evita sin crear
   contexto de scroll, así que la cabecera sigue siendo sticky */
body { overflow-x: clip; }

/* Foco ambiental (3-sep): un resplandor muy suave, fijo en la parte alta de
   la ventana, para que toda la web se sienta un poco más iluminada sin
   tocar el negro base. z-index -1 basta para que quede detrás de todo el
   contenido normal, sin tener que tocar el z-index de header/secciones. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 650px at 50% -8%, rgba(189, 224, 132, 0.09), transparent 62%),
    radial-gradient(900px 500px at 85% 15%, rgba(246, 248, 219, 0.045), transparent 60%);
}

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

h1, h2, h3 {
  font-family: var(--title);
  font-weight: 550;
  letter-spacing: -0.035em;
  line-height: 1.15;
  text-wrap: balance;
}

.wrap { width: min(1080px, 100% - 40px); margin-inline: auto; }

/* etiqueta en versalitas — el papel de la monoespaciada */
.tag {
  font-family: var(--body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* ── Aparición al hacer scroll ───────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0s);
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ── Cabecera con menú ───────────────────────────── */
header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 10, 0.78);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
header.site.scrolled { border-bottom-color: var(--line); }
header.site .bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding-block: 18px;
}
.logo { color: var(--ink); display: inline-flex; }
.logo svg { height: 30px; width: auto; overflow: visible; }
.lg-i { fill: currentColor; }
.lg-c { fill: var(--bg); }

/* ── Logo animado ────────────────────────────────
   Al cargar: el símbolo entra y el logotipo se descubre de izquierda a derecha.
   Al pasar el ratón: las dos astas del símbolo se separan, una arriba y otra
   abajo — el mismo gesto que las dos mitades del día. */
.lg-mark, .lg-word { transform-box: view-box; }
.lg-mark { transform-origin: 91px 91.6px; }

@keyframes lg-mark-in {
  from { opacity: 0; transform: scale(0.72); }
  to   { opacity: 1; transform: none; }
}
@keyframes lg-word-in {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
header.site .lg-mark { animation: lg-mark-in 0.62s cubic-bezier(0.16, 1, 0.3, 1) both; }
header.site .lg-word { animation: lg-word-in 0.78s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both; }

/* El gesto de separar las astas al pasar el ratón se retiró el 7-sep
   (decisión de Ángel): el logotipo se queda quieto. */

@media (prefers-reduced-motion: reduce) {
  header.site .lg-mark, header.site .lg-word { animation: none; }
}

.nav { display: flex; gap: 6px; justify-content: center; }
.nav a {
  color: var(--ink-35);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  transition: color 0.3s ease, background-color 0.3s ease;
  white-space: nowrap;
}
.nav a:hover { color: var(--ink-70); }
.nav a.activo { color: var(--ink); background: rgba(246, 248, 219, 0.07); }

header.site .fin-bar { justify-self: end; }

/* ── Héroe ───────────────────────────────────────── */
.hero {
  text-align: center;
  padding-block: clamp(64px, 9vw, 104px) clamp(56px, 8vw, 96px);
  display: grid;
  justify-items: center;
  gap: clamp(48px, 7vw, 72px);
}
.hero-texto { display: grid; justify-items: center; }
.hero h1 { font-size: clamp(32px, 4.6vw, 52px); max-width: 13em; text-wrap: pretty; }
.hero .lead {
  margin-top: 22px;
  font-size: clamp(14.5px, 1.4vw, 16px);
  line-height: 1.6;
  color: var(--ink-50);
  max-width: 27em;
}

/* ── El botón de descarga ────────────────────────────
   Píldora clara sobre el fondo oscuro: es la única acción de la página, así
   que se lleva el máximo contraste. Mientras no haya ficha en la App Store
   va como texto y no como enlace — un botón que no lleva a ningún sitio
   engaña más de lo que ayuda. */
.boton-app {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: clamp(26px, 3vw, 34px);
  padding: 13px 24px 13px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}
.boton-app svg { width: 16px; height: 19px; fill: currentColor; flex: none; }
a.boton-app:hover { transform: translateY(-2px); background: #fff; }
/* a la espera de la ficha: mismo peso visual, sin prometer un destino */
.boton-app.espera {
  background: transparent; color: var(--ink-70); border: 1px solid var(--line-strong); cursor: default;
  /* mismo foco ambiental de arriba: un halo lima muy suave, para que el
     único acento de color de la cabecera "emita" un poco de luz */
  box-shadow: 0 0 0 1px rgba(189, 224, 132, 0.16), 0 0 26px rgba(189, 224, 132, 0.14);
}
/* en la cabecera, el mismo botón a escala de barra */
.boton-app.compacto {
  margin-top: 0;
  padding: 8px 17px 8px 13px;
  gap: 8px;
  font-size: 13px;
}
.boton-app.compacto svg { width: 13px; height: 15.5px; }

/* ── La foto del héroe ───────────────────────────────
   Plana, con el mismo radio que los paneles. Al pasar el ratón la imagen
   se acerca un poco dentro de su marco, que no se mueve. */
.hero-foto { width: min(420px, 100%); }
.foto-escena {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  /* el recorte de un hijo transformado necesita una capa propia en Safari */
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
}
.foto-escena img {
  display: block; width: 100%; height: auto;
  transform: scale(1);
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.foto-escena:hover img { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) {
  .foto-escena img { transition: none; }
  .foto-escena:hover img { transform: none; }
}

/* ── Banda de disciplinas ────────────────────────────
   El respiro entre bloques: una sola idea, sin caja. Los nombres pasan
   despacio de derecha a izquierda; la fila está duplicada en el HTML y el
   bucle recorre justo la mitad, así que la costura no se ve. */
.banda {
  padding-block: clamp(80px, 10vw, 132px);
  /* se sale del contenedor para ir a sangre de lado a lado */
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
}
/* el desvanecido va aquí, en el ancho visible: puesto en la pista caería
   fuera de pantalla, porque la pista mide bastante más que la ventana */
.banda-pista-marco {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.banda-pista {
  display: flex;
  width: max-content;
  animation: banda-rueda 34s linear infinite;
}
.banda-fila {
  display: flex;
  gap: clamp(38px, 5vw, 72px);
  padding-right: clamp(38px, 5vw, 72px);
  white-space: nowrap;
}
.banda-fila span {
  font-family: var(--title);
  font-weight: 550;
  letter-spacing: -0.03em;
  font-size: clamp(22px, 3.3vw, 40px);
  color: var(--ink);
  line-height: 1.1;
}
/* uno sí, uno no: da ritmo y evita el muro de texto */
.banda-fila span:nth-child(even) { color: rgba(246, 248, 219, 0.28); }

/* el pie: una línea, centrada, sin competir con los nombres */
.banda-pie {
  text-align: center;
  margin-top: clamp(28px, 3.4vw, 42px);
  color: var(--ink-50);
  font-size: clamp(14px, 1.5vw, 16px);
}

@keyframes banda-rueda {
  from { transform: translateX(0); }
  /* con cuatro copias, media pista son dos filas: el relevo cae en un punto
     idéntico al de partida y no se ve la costura */
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  /* sin movimiento la banda se queda quieta y centrada, sin cortes */
  .banda-pista { animation: none; width: 100%; justify-content: center; }
  .banda-pista-marco { -webkit-mask-image: none; mask-image: none; }
  .banda-fila { flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .banda-fila + .banda-fila { display: none; }
}

/* ── Paneles ─────────────────────────────────────── */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(32px, 5vw, 64px) clamp(24px, 4.5vw, 56px);
  margin-block: 16px;
}
.panel-head { text-align: center; max-width: 40em; margin-inline: auto; }
.panel .kicker { display: block; margin-bottom: 14px; color: var(--ink-35); }
.kicker.prep { color: var(--lime); }
.kicker.reco { color: var(--blue-text); }
.panel h2 { font-size: clamp(25px, 3.4vw, 38px); }
.panel .intro {
  margin-top: 14px;
  color: var(--ink-50);
  font-size: clamp(15.5px, 1.6vw, 17px);
  line-height: 1.56;
}

/* ── Fichas del bloque 1 · slider (2-sep) ────────────
   Cerradas enseñan solo el título y el signo de ampliar; abiertas suben un
   panel translúcido con el texto entero. La foto no se mueve nunca.
   Reestructurado de rejilla fija a carril con scroll-snap, a petición de
   Roger, para poder ir añadiendo fichas sin rehacer el layout cada vez: el
   carril siempre enseña 1 (móvil), 2 (tablet) o 3 (escritorio) fichas
   completas, y desliza —a dedo o con el trackpad— para el resto. Llevó unas
   flechas de apoyo, retiradas el 3-sep (Roger las quitó): el gesto nativo
   basta y con las tres fichas de hoy no hay nada que desbordar en
   escritorio de todos modos. Si en el futuro se añaden más fichas de las
   que caben, no hay atajo de clic — solo el gesto de deslizar. */
.fichas-slider { margin-top: 44px; }
.fichas {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  /* sin esto, el eje vertical hereda «auto» solo por tener overflow-x propio,
     y el carril compite con la página por la rueda/el trackpad — se siente
     como un tope al bajar. Cerrado a cal y canto: aquí nunca hay overflow
     vertical que enseñar, así que no hay razón para que capture el gesto. */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* el gesto de deslizar se conserva; la barra de scroll no aporta nada aquí */
  scrollbar-width: none;
}
.fichas::-webkit-scrollbar { display: none; }
.ficha {
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: start;
  /* siempre se asoma un trozo de la siguiente, como en Oura: sin eso no se
     entiende que hay más fichas deslizando. Móvil enseña una entera + el
     asomo; de 640px sube a dos enteras + asomo, y de 1000px a tres enteras
     + asomo. */
  width: min(340px, 86%);
  aspect-ratio: 3 / 4;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel-2);
  isolation: isolate;
}
@media (min-width: 640px) {
  .ficha { width: 46%; }
}
@media (min-width: 1000px) {
  .ficha { width: 31%; }
}
.ficha > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.02);
  transform: scale(1);
  /* el mismo acercamiento que la foto de portada, para que sea un solo gesto */
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ficha:hover > img { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) {
  .ficha > img { transition: none; }
  .ficha:hover > img { transform: none; }
}
/* el degradado que sostiene el título sobre cualquier foto */
.ficha::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6, 6, 6, 0.9) 0%, rgba(6, 6, 6, 0.5) 32%, rgba(6, 6, 6, 0.04) 62%, rgba(6, 6, 6, 0.3) 100%);
  pointer-events: none;
}

/* el botón de ampliar: vidrio, y al abrir gira hasta ser un aspa */
.ficha-mas {
  position: absolute; top: 15px; right: 15px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink);
  border: 1px solid rgba(246, 248, 219, 0.38);
  background: rgba(246, 248, 219, 0.2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  /* la sombra es lo que lo mantiene visible sobre las zonas claras de la foto */
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, border-color 0.3s ease;
}
.ficha-mas svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.ficha-mas:hover { background: rgba(246, 248, 219, 0.28); border-color: rgba(246, 248, 219, 0.5); }
.ficha-mas:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ficha.abierta .ficha-mas, .macro.abierta .ficha-mas { transform: rotate(45deg); }

/* el panel de texto */
.ficha-texto {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 20px clamp(18px, 2vw, 22px) clamp(18px, 2vw, 22px);
  transition: background-color 0.45s ease, -webkit-backdrop-filter 0.45s ease, backdrop-filter 0.45s ease;
}
.ficha.abierta .ficha-texto {
  background: rgba(10, 10, 9, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  border-top: 1px solid rgba(246, 248, 219, 0.14);
}
.ficha-texto h3 {
  font-size: clamp(19px, 2vw, 22px);
  color: var(--ink);
  text-wrap: balance;
}
/* de 0fr a 1fr: es la única forma de que la altura real se anime */
.ficha-cuerpo {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, margin-top 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.ficha-cuerpo > p {
  overflow: hidden;
  color: var(--ink-70);
  font-size: 14.5px;
  line-height: 1.6;
}
.ficha.abierta .ficha-cuerpo { grid-template-rows: 1fr; opacity: 1; margin-top: 11px; }

@media (prefers-reduced-motion: reduce) {
  .ficha-mas, .ficha-texto, .ficha-cuerpo { transition: none; }
}

/* solo para lectores de pantalla */
.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── Pasos numerados (bloque 2) ──────────────────── */
/* ── Bloque 2 · índice fijo y pasos que desfilan ─────
   El índice se queda pegado mientras el visitante baja; el paso que está a la
   vista se enciende. En móvil no hay dos columnas: el índice pasa a ser una
   cabecera normal y los pasos se apilan. */
.pasos-rejilla { display: grid; gap: clamp(30px, 4vw, 60px); margin-top: clamp(40px, 5vw, 56px); }
.pasos-lista {
  display: grid; gap: 2px;
  margin-top: clamp(24px, 3vw, 36px);
  border-left: 1px solid var(--line);
}
.indice-item {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline;
  padding: 11px 0 11px 16px; margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--ink-35); text-decoration: none;
  transition: color 0.4s ease, border-color 0.4s ease;
}
.indice-item:hover { color: var(--ink-70); }
.indice-num { font-size: 10.5px; letter-spacing: 0.16em; font-variant-numeric: tabular-nums; }
.indice-tit { font-family: var(--title); font-weight: 550; letter-spacing: -0.02em; font-size: clamp(14px, 1.5vw, 16px); }
/* el paso a la vista: se enciende y marca el canto con el verde de marca */
.indice-item.activo { color: var(--ink); border-left-color: var(--lime); }
/* el número del índice y la píldora del paso comparten el mismo verde: son
   la misma señal de «estás aquí» en los dos lados de la rejilla */
.indice-item.activo .indice-num { color: var(--lime); }
.paso.activo .num { color: var(--lime); border-color: rgba(189, 224, 132, 0.42); }
.indice-num, .paso .num { transition: color 0.4s ease, border-color 0.4s ease; }
.indice-item:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

.pasos-flujo { display: grid; gap: clamp(56px, 7vw, 104px); }
.paso-cabeza { margin-bottom: clamp(22px, 2.6vw, 30px); }
.paso-cabeza h3 { font-size: clamp(20px, 2.4vw, 26px); margin-top: 14px; }
/* el párrafo bajó de tamaño el 3-sep, cuando el texto de los seis pasos pasó
   de una frase a explicar el proceso entero: al mismo tamaño de antes se
   sentía pesado —el «pegote» que Roger quería evitar— en la columna de
   240px del reparto en paralelo (ver más abajo). Más pequeño y algo más
   apretado de interlineado, cabe cómodo sin competir con el título. */
.paso-cabeza p { color: var(--ink-50); margin-top: 10px; font-size: clamp(13.5px, 1.35vw, 14.5px); line-height: 1.55; max-width: 42em; }
/* los assets vienen con su propio margen superior; aquí lo pone la rejilla */
.paso .mitades, .paso .traduccion, .paso .mockup { margin-top: 0; }
/* centrado en su columna, no pegado a la izquierda */
.paso .mockup { margin-inline: auto; }

@media (min-width: 900px) {
  .pasos-rejilla { grid-template-columns: minmax(0, 290px) minmax(0, 1fr); align-items: start; }
  /* el desplazamiento suave de la página ya deja hueco bajo la cabecera */
  .pasos-indice { position: sticky; top: 104px; }
}

/* ── Texto e imagen en paralelo, no apilados (2-sep) ──
   Roger pidió romper el «pegote» de título+párrafo apilados encima de la
   imagen: cuanto más creciera el texto, más empujaba la imagen hacia abajo y
   más aire muerto quedaba entre los dos. A partir de aquí, el paso reparte
   cabecera e imagen en dos columnas centradas como una sola pieza — el texto
   puede crecer sin mover la imagen ni descuadrar el conjunto. Marcado en el
   HTML con `data-con-visual` (lo llevan los cinco pasos con foto o aro;
   «Marca tu sesión como realizada» no lleva imagen y se queda en una sola
   columna, sin cambios). Arranca en un umbral más ancho que el índice
   (1100px, no 900px): repartir tres columnas —índice, texto, imagen— pide
   más aire del que hay a 900px; por debajo de 1100px sigue apilado como
   antes, que ya funcionaba bien a esos anchos. */
@media (min-width: 1100px) {
  .pasos-flujo .paso[data-con-visual] {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(28px, 3vw, 44px);
  }
  .pasos-flujo .paso[data-con-visual] .paso-cabeza { margin-bottom: 0; }
}

/* ── Pestañas Antes / Después (bloque 2) ─────────────
   Duplican el índice-fijo-y-pasos de arriba: cada pestaña carga su propia
   rejilla (.pasos-rejilla[data-fase-panel]) y solo una está visible. */
.fase-tabs {
  display: flex; justify-content: center; gap: 4px;
  width: fit-content; margin: 40px auto 0;
  padding: 4px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel-2);
}
.fase-tab {
  font-family: var(--body); font-weight: 550; font-size: 13.5px;
  color: var(--ink-50); background: none; border: none; cursor: pointer;
  padding: 10px 20px; border-radius: 999px; white-space: nowrap;
  transition: color 0.3s ease, background-color 0.3s ease;
}
.fase-tab:hover { color: var(--ink-70); }
.fase-tab.activa { color: var(--bg); background: var(--lime); }
.fase-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* la pestaña oculta no ocupa espacio ni se anima */
.pasos-rejilla[hidden] { display: none; }

/* un solo aro-card en vez de dos: se centra en vez de estirarse a lo ancho */
/* mismo ancho máximo que las fotos lisas (.mockup), para que las tarjetas
   del aro y las fotos del bloque 2 midan lo mismo a lo ancho */
.mitades.mitades-una { grid-template-columns: minmax(0, 460px); justify-content: center; }

/* En móvil se mantiene la misma píldora de dos opciones en fila que en
   escritorio — apilarlas rompía la lectura de «esto o lo otro». Cabe porque
   los dos botones se reparten el ancho a partes iguales y la letra encoge
   con la pantalla. */
@media (max-width: 560px) {
  .fase-tabs { width: min(400px, 100%); }
  .fase-tab {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    font-size: clamp(11px, 3vw, 13.5px);
    padding: 9px 10px;
    /* con el ancho de un móvil las dos etiquetas enteras en una línea
       obligarían a una letra de 9 px: mejor que caigan a dos líneas */
    white-space: normal;
    line-height: 1.25;
  }
}

.paso { scroll-margin-top: 110px; }
.paso .num {
  display: inline-block;
  color: var(--ink-35);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  margin-bottom: 14px;
}

/* ── El aro (componente vivo) ────────────────────── */
.aro { width: 100%; max-width: 300px; margin-inline: auto; }
.aro svg { display: block; width: 100%; height: auto; }

.aro-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel-2);
  padding: 30px 24px 28px;
  text-align: center;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}
.aro-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.aro-card .aro { max-width: 240px; }
.aro-card figcaption { margin-top: 18px; }
.aro-card blockquote { color: var(--ink-50); font-size: 14.5px; line-height: 1.58; }

/* dos mitades */
.mitades { display: grid; gap: 24px; margin-top: 36px; }
.mitad .aro { max-width: 260px; }

/* La foto va detrás del aro, muy apagada: aquí compite con un gráfico de
   colores vivos, así que se oscurece bastante más que en las tarjetas del
   bloque 3 y se remata con un velo plano. */
.mitad { position: relative; overflow: hidden; isolation: isolate; }
.mitad > .aro, .mitad > figcaption { position: relative; z-index: 2; }
.mitad-fondo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: brightness(0.4) saturate(0.75) contrast(1.05);
  transform: scale(1);
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mitad:hover .mitad-fondo { transform: scale(1.045); }
/* el velo iguala las dos fotos y deja el fondo lo bastante plano para que el
   aro y los números se lean sin esfuerzo */
.mitad::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(8, 8, 7, 0.58) 0%, rgba(8, 8, 7, 0.36) 40%, rgba(8, 8, 7, 0.74) 100%);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .mitad-fondo { transition: none; }
  .mitad:hover .mitad-fondo { transform: none; }
}
.mitad h3 { font-size: 20px; margin-top: 16px; }
.mitad .kicker { margin-bottom: 8px; }
.mitad p { color: var(--ink-50); margin-top: 9px; font-size: 14.5px; line-height: 1.58; }

/* ── Fotos lisas del bloque 2 ─────────────────────────
   Mismo hueco para las tres fotos que no llevan aro encima: el registro
   (manos, plato, el móvil con la pantalla real), la hora de la sesión
   (antes-01) y el cierre del día (después-03). Todas llegan ya recortadas
   en cuadrado antes de subirlas, así que un simple `height: auto` basta —
   sin object-fit, sin recorte por CSS. Esquinas redondeadas y borde fino,
   igual que las tarjetas de «mitades» (incluido el mismo ancho máximo,
   460px, para que las dos familias de foto midan lo mismo). */
.mockup {
  margin: 36px auto 0;
  width: min(460px, 100%);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.mockup img {
  display: block; width: 100%; height: auto;
  transform: scale(1);
  /* el mismo acercamiento sutil que el resto de fotos de la web */
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mockup:hover img { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) {
  .mockup img { transition: none; }
  .mockup:hover img { transform: none; }
}

/* ── Los tres macros (paso 03) ───────────────────────
   Cerrada, la tarjeta es solo la foto y el dato flotando en vidrio. Al pulsar
   «+», el texto crece desde abajo y el dato sube empujado por él: los dos
   viven en la misma columna, así que no hay que calcular alturas. */
.macros { display: grid; gap: clamp(16px, 2vw, 24px); }
.macro {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel-2);
  isolation: isolate;
  /* el pseudo marca el alto de la foto y el pie se apoya abajo en la misma
     celda: cerrada la tarjeta mide justo la foto, y si el texto desplegado
     necesita más, la fila crece en vez de recortarlo. La columna se declara
     al 100 %: sin eso la celda se ensancha con el texto y este se sale. */
  display: grid;
  grid-template-columns: 100%;
}
.macro::before { content: ""; grid-area: 1 / 1; aspect-ratio: 2.8; }
.macro > img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.02);
  transform: scale(1);
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.macro:hover > img { transform: scale(1.045); }
/* el degradado sostiene la parte baja, donde vive todo el contenido */
.macro::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(6, 6, 6, 0.72) 0%, rgba(6, 6, 6, 0.18) 45%, transparent 72%);
  pointer-events: none;
  transition: background 0.5s ease;
}
.macro.abierta::after { background: linear-gradient(to top, rgba(6, 6, 6, 0.88) 0%, rgba(6, 6, 6, 0.55) 55%, rgba(6, 6, 6, 0.2) 100%); }

/* el pie: dato arriba, texto debajo. Al crecer el texto, el dato sube solo */
.macro-pie {
  grid-area: 1 / 1; align-self: end; z-index: 2;
  /* sin esto el pie se dimensiona por su contenido y el texto se sale de la
     tarjeta en vez de envolver */
  justify-self: stretch; min-width: 0;
  padding: clamp(14px, 1.8vw, 20px);
  display: grid; justify-items: start; gap: 0;
}
.macro-dato {
  min-width: min(168px, 56%);
  padding: 11px 15px 13px;
  border-radius: 14px;
  background: rgba(10, 10, 9, 0.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
  border: 1px solid rgba(246, 248, 219, 0.12);
  display: grid; gap: 8px;
}
.macro-dato .tag { color: rgba(246, 248, 219, 0.62); font-size: 10px; }
.macro-cifra {
  font-family: var(--title); font-weight: 550;
  letter-spacing: -0.03em; line-height: 1;
  font-size: clamp(22px, 2.3vw, 27px);
  color: var(--c);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}
.macro-cifra span { font-size: 0.46em; color: rgba(246, 248, 219, 0.62); letter-spacing: 0; }
.macro-barra {
  display: block; height: 3px; border-radius: 999px;
  background: rgba(246, 248, 219, 0.22);
  position: relative; overflow: hidden;
}
.macro-barra::after {
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: var(--pct);
  background: var(--c);
  border-radius: inherit;
}

/* de 0fr a 1fr: la única forma de animar una altura que no se conoce */
.macro-cuerpo {
  display: grid;
  min-width: 0;
  grid-template-rows: 0fr;
  opacity: 0;
  justify-self: stretch;
  transition: grid-template-rows 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.35s ease, margin-top 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.macro-cuerpo > div { overflow: hidden; min-width: 0; display: grid; gap: 8px; }
.macro.abierta .macro-cuerpo { grid-template-rows: 1fr; opacity: 1; margin-top: 12px; }
.macro-cuerpo blockquote { color: var(--ink-70); font-size: 13.5px; line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
  .macro > img, .macro::after, .macro-cuerpo { transition: none; }
  .macro:hover > img { transform: none; }
}

/* ── Autoridad ───────────────────────────────────── */
.autoridad { padding-block: clamp(48px, 6vw, 76px); }

/* Llevó una foto de fondo (pista de atletismo) y luego un panel con borde y
   fondo plano; Roger quitó las dos cosas el 2-sep: ya no hay tarjeta ni
   caja, solo el texto centrado sobre el fondo de la página. */
.autoridad-tarjeta {
  display: grid;
  place-items: center;
  text-align: center;
}
.autoridad-texto {
  padding: clamp(28px, 4vw, 56px);
}
.autoridad h2 { font-size: clamp(24px, 3.6vw, 40px); color: var(--ink); }

/* ── Dato clave · nutrición y rendimiento (retocado 3-sep) ─────
   Sin tarjeta, solo texto centrado sobre el fondo de la página — mismo
   patrón que Autoridad. Una sola frase, una sola cifra en lima, sin
   subtítulo debajo. Pasó por varias vueltas de contenido (ver
   estructura-web.md): la clave fue no dejar que la frase afirmara nada de
   rendimiento que el estudio citado no midiera — «no improvisa lo que come
   antes de entrenar» sí es justo lo que mide Hull et al. */
.dato-clave { padding-block: clamp(48px, 6vw, 76px); }
.dato-clave-texto {
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
  max-width: 40em;
  margin-inline: auto;
  padding: clamp(28px, 4vw, 56px);
}
.dato-clave-cifra {
  font-family: var(--title);
  font-weight: 550;
  font-size: clamp(24px, 3.6vw, 40px);
  line-height: 1.3;
  color: var(--ink);
}
.dato-clave-num { color: var(--lime); }
.dato-clave-fuente { color: var(--ink-35); font-size: 12.5px; letter-spacing: 0.03em; margin-top: 10px; }

/* ── Objetivo físico ──────────────────────────────
   Foto de fondo + velo radial + texto encima — el mismo tratamiento que
   llevó «Autoridad» antes de quitarle la foto (ver arriba). La foto es
   mucho más clara que la de la pista, así que necesita bastante más
   oscurecido para que el texto se sostenga. */
.objetivo-seccion { margin-block: 16px; }
.objetivo-tarjeta {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  isolation: isolate;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  text-align: center;
}
.objetivo-tarjeta::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  /* fuerte en el centro, donde va el texto; casi transparente en los bordes,
     para que el cielo y el agua se vean con luz */
  background: radial-gradient(65% 80% at 50% 50%, rgba(4, 4, 4, 0.46) 0%, rgba(4, 4, 4, 0.28) 50%, rgba(4, 4, 4, 0.1) 80%, rgba(4, 4, 4, 0) 100%);
  pointer-events: none;
}
.objetivo-tarjeta > img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.8) saturate(0.95);
  transform: scale(1);
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.objetivo-tarjeta:hover > img { transform: scale(1.045); }
.objetivo-texto {
  position: relative; z-index: 2;
  padding: clamp(28px, 4vw, 56px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 26px rgba(0, 0, 0, 0.5);
}
.objetivo-texto h2 { font-size: clamp(24px, 3.6vw, 40px); color: var(--ink); }
/* el «+» y el párrafo desplegable reutilizan los mismos componentes que las
   fichas del bloque 1 (`.ficha-mas`, `.ficha-cuerpo`) — mismo botón, mismo
   giro a aspa, misma animación de alto — así que solo hace falta sumar
   `.objetivo-tarjeta.abierta` a los selectores que ya los abren. La tarjeta
   ya no crece al abrir (ver más abajo): el párrafo aparece dentro del mismo
   alto fijo de siempre, y como `.objetivo-texto` es el único hijo de una
   rejilla centrada, al crecer su contenido se recoloca solo — el título
   sube, el párrafo entra debajo, sin una sola línea de código para moverlo
   a propósito. */
.objetivo-tarjeta.abierta .ficha-mas { transform: rotate(45deg); }
.objetivo-tarjeta.abierta .objetivo-cuerpo { grid-template-rows: 1fr; opacity: 1; margin-top: 14px; }
.objetivo-cuerpo p { color: var(--ink-70); font-size: clamp(14px, 1.5vw, 15.5px); line-height: 1.5; }

@media (min-width: 760px) {
  .objetivo-tarjeta { aspect-ratio: 2.4; }
}
@media (prefers-reduced-motion: reduce) {
  .objetivo-tarjeta > img { transition: none; }
  .objetivo-tarjeta:hover > img { transform: none; }
}

/* ── Beneficios ──────────────────────────────────── */
/* ── Tarjetas del bloque 3 ───────────────────────────
   Mismo lenguaje que las fichas del bloque 1 — foto oscurecida + «+» que
   despliega el texto —, pero apaisadas: de entrada solo se lee el título.
   Reescrito el 4-sep (antes el texto se leía siempre, sin desplegar; Roger
   pidió unificar con el resto de la web). */
.tarjetas { display: grid; gap: 16px; margin-top: 40px; }
.tarjeta {
  position: relative;
  /* apaisada solo cuando hay ancho de sobra: en tarjetas estrechas el texto
     ocupa dos líneas y a 16/9 se comería más de la mitad de la foto */
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel-2);
  isolation: isolate;
}
.tarjeta > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* el mismo revelado para las cuatro, vengan como vengan */
  filter: brightness(0.92) saturate(0.92) contrast(1.02);
  transform: scale(1);
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.tarjeta:hover > img { transform: scale(1.045); }
/* el degradado remata la esquina donde cae el texto */
.tarjeta::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4, 4, 4, 0.88) 0%, rgba(4, 4, 4, 0.52) 26%, rgba(4, 4, 4, 0.16) 55%, rgba(4, 4, 4, 0) 100%);
  pointer-events: none;
}
.tarjeta-texto {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: clamp(18px, 2.2vw, 26px);
  transition: background-color 0.45s ease, -webkit-backdrop-filter 0.45s ease, backdrop-filter 0.45s ease;
}
.tarjeta-texto h3 { font-size: clamp(18px, 1.9vw, 21px); color: var(--ink); }
.tarjeta-texto p { margin-top: 7px; color: var(--ink-70); font-size: 14.5px; line-height: 1.55; }
/* el «+» y el desplegable reutilizan `.ficha-mas`. El panel al abrir empezó
   siendo un color plano (el mismo de las fichas del bloque 1), pero aquí
   dejaba una costura dura donde arrancaba el panel — Roger pidió un
   degradado más transparente en las cuatro. En vez de un color de fondo,
   ahora es un degradado que nace transparente (se funde con la foto, sin
   línea de corte) y se cierra en oscuro donde hace falta para que el texto
   se lea; sin borde superior, porque el degradado ya no lo necesita. */
.tarjeta.abierta .ficha-mas { transform: rotate(45deg); }
.tarjeta.abierta .tarjeta-cuerpo { grid-template-rows: 1fr; opacity: 1; margin-top: 7px; }
.tarjeta.abierta .tarjeta-texto {
  background: linear-gradient(to bottom, rgba(6, 6, 6, 0) 0%, rgba(6, 6, 6, 0.55) 30%, rgba(6, 6, 6, 0.88) 100%);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
}
@media (prefers-reduced-motion: reduce) {
  .tarjeta-texto, .tarjeta-cuerpo { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta > img { transition: none; }
  .tarjeta:hover > img { transform: none; }
}

@media (min-width: 1100px) {
  .tarjeta { aspect-ratio: 16 / 9; }
}

/* ── Cierre ──────────────────────────────────────── */
.cierre { text-align: center; padding-block: clamp(72px, 10vw, 128px); }
.cierre h2 { font-size: clamp(26px, 4vw, 44px); }
.cierre .sub { margin: 16px auto 0; color: var(--ink-50); font-size: clamp(15.5px, 1.6vw, 17px); max-width: 30em; }
.cierre .boton-app { margin-top: clamp(28px, 3.2vw, 36px); }

/* ── Pie ─────────────────────────────────────────── */
footer.site {
  border-top: 1px solid var(--line);
  padding-block: 48px 60px;
  font-size: 14px;
  color: var(--ink-50);
}
/* La disposición es la original: el isologotipo arriba y las columnas
   debajo. Lo que cambió el 7-sep es qué va dentro (fuera el inglés y las
   legales de la app) y el tamaño del logotipo. */
footer.site .logo { display: block; margin-bottom: 34px; }
footer.site .logo svg { height: 30px; }

.legal-cols { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.legal-cols .tag { color: var(--ink-35); display: block; margin-bottom: 14px; }
.legal-cols ul { list-style: none; }
.legal-cols li { margin-bottom: 9px; }
.legal-cols a { color: var(--ink-70); text-decoration: none; transition: color 0.2s ease; }
.legal-cols a:hover { color: var(--ink); }

footer.site .fin { margin-top: 40px; color: var(--ink-35); }

/* ── Páginas legales ─────────────────────────────── */
.legal-page { width: min(700px, 100% - 40px); margin-inline: auto; padding-block: 20px 72px; }
.legal-page header.site { position: static; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: none; display: flex; align-items: center; justify-content: space-between; padding-block: 26px; }
.legal-page .lang { font-size: 13.5px; color: var(--ink-50); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; }
.legal-page .lang:hover { color: var(--ink); }
.legal-page h1 { font-size: clamp(27px, 4.4vw, 36px); margin-block: 36px 10px; }
.legal-page .meta { color: var(--ink-35); font-size: 13.5px; margin-bottom: 36px; }
.legal-page h2 { font-size: clamp(19px, 2.6vw, 22px); margin-block: 40px 12px; }
.legal-page h3 { font-size: 17px; margin-block: 28px 10px; }
.legal-page p { color: var(--ink-50); margin-bottom: 13px; }
.legal-page p strong { color: var(--ink); font-weight: 500; }
.legal-page ul, .legal-page ol { margin: 0 0 13px 22px; color: var(--ink-50); }
.legal-page li { margin-bottom: 7px; }
.legal-page a { color: var(--ink); }

/* ── Escritorio ──────────────────────────────────── */
@media (max-width: 719px) {
  header.site .bar { grid-template-columns: auto auto; }
  header.site .fin-bar { display: none; }
  /* los tres enlaces juntos se pasaban del ancho de un móvil y sacaban
     scroll horizontal a toda la página: aquí caben o bajan de línea */
  .nav { grid-column: 1 / -1; order: 3; margin-top: 4px; flex-wrap: wrap; gap: 2px; }
  .nav a { padding: 7px 8px; font-size: 10.5px; letter-spacing: 0.12em; }
}
@media (min-width: 1000px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) clamp(340px, 32vw, 420px);
    align-items: center;
    text-align: left;
    justify-items: stretch;
    gap: clamp(36px, 4.5vw, 60px);
    /* el héroe ocupa la pantalla entera menos la cabecera, y su contenido
       queda centrado: así el bloque siguiente no asoma por abajo */
    min-height: calc(100svh - 60px);
    align-content: center;
    padding-block: clamp(40px, 5vw, 72px);
  }
  .hero-texto { justify-items: start; }
  /* el ancho fuerza el salto antes de «entrenamiento» */
  .hero h1 { max-width: 11em; }
  .hero .lead { margin-inline: 0; max-width: 30em; }
  .hero-foto { justify-self: end; }
}

/* entre móvil y 900px el botón no cabe junto al logo y el menú; en ese tramo
   el visitante ya se encuentra el botón grande del héroe */
@media (max-width: 899px) {
  header.site .fin-bar { display: none; }
}

@media (min-width: 720px) {
  .tarjetas { grid-template-columns: 1fr 1fr; }
  .mitades { grid-template-columns: 1fr 1fr; gap: 24px; }
  /* el dato a la izquierda, las palabras mandando a la derecha */
  .trad { grid-template-columns: 190px 1fr; gap: clamp(26px, 3.4vw, 40px); }
}