/* Libreta de Gym · landing de Argentina.
   Marca: carbón #0d0f12, lima #c2f24e, blanco cálido #f2f4f0. Títulos Anton, texto Hanken Grotesk (OFL, en fuentes/).
   Siempre en oscuro (es la paleta de la marca). Texto mínimo 16 px. Sin recursos externos. */

@font-face {
  font-family: "Anton";
  src: url("fuentes/anton-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fuentes/hanken-grotesk-latin-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --carbon: #0d0f12;
  --carbon-hondo: #08090b;
  --superficie: #14171b;
  --superficie-2: #1a1e23;
  --borde: #2a3038;
  --borde-fuerte: #3b424b;
  --lima: #c2f24e;
  --lima-suave: rgba(194, 242, 78, 0.14);
  --lima-brillo: rgba(194, 242, 78, 0.45);
  --blanco: #f2f4f0;
  --gris: #bcc2b7;
  --gris-2: #9aa196;
  --titulos: "Anton", "Impact", "Arial Narrow", sans-serif;
  --texto: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radio: 18px;
  --curva: cubic-bezier(0.2, 0.75, 0.2, 1);
  --gutter: 16px;
  --alto-encabezado: 72px;
}

/* Siempre oscuro, también con el sistema en claro: es la paleta de la marca. */
@media (prefers-color-scheme: light) {
  :root { color-scheme: dark; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--alto-encabezado) + 12px);
}
html.con-movimiento { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--carbon);
  color: var(--blanco);
  font-family: var(--texto);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--lima); text-underline-offset: 3px; }
p { margin: 0 0 0.75em; }
h1, h2, h3 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--lima);
  outline-offset: 3px;
  border-radius: 6px;
}

.saltar {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--lima);
  color: var(--carbon);
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
}
.saltar:focus { top: 12px; }

.contenedor {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.angosto { max-width: 860px; }

@media (min-width: 768px) {
  :root { --gutter: 28px; }
}

/* ---------- Barra legal (Disp. 954/2025: a simple vista, arriba) ---------- */
/* En el celular los dos botones van lado a lado, cada uno en dos renglones (una fila de unos 50 px en vez de
   dos de 44). Desde unos 520 px, cada uno entra en un renglón. Si no entran ni así (menos de ~330 px), se apilan. */
.barra-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 12px;
  padding: 2px var(--gutter);
  background: var(--carbon-hondo);
  border-bottom: 1px solid var(--borde);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.barra-legal a {
  flex: 1 1 0;
  min-width: min-content;
  max-width: 16em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 44px;
  color: var(--blanco);
  text-decoration: underline;
  text-decoration-color: var(--borde-fuerte);
  text-underline-offset: 4px;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.barra-legal a:hover { color: var(--lima); text-decoration-color: var(--lima); }

/* ---------- Encabezado ---------- */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(13, 15, 18, 0.82);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.encabezado.con-sombra {
  border-bottom-color: var(--borde);
  box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.9);
}
.encabezado-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--alto-encabezado);
}
.logo { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
.logo img { height: 44px; width: auto; transition: transform 0.4s var(--curva); }
.logo:hover img { transform: scale(1.04) rotate(-1.5deg); }

.menu { display: none; gap: 6px; }
.menu a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--gris);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: color 0.2s;
}
.menu a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  height: 2px;
  background: var(--lima);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--curva);
}
.menu a:hover { color: var(--blanco); }
.menu a:hover::after { transform: scaleX(1); }
@media (min-width: 960px) { .menu { display: flex; } }

/* ---------- Botones (microanimaciones: elevación, brillo, presión y onda) ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 14px 26px;
  border-radius: 14px;
  font-family: var(--texto);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.25s var(--curva), box-shadow 0.3s, background-color 0.25s, border-color 0.25s, color 0.25s;
}
.btn:active { transform: translateY(0) scale(0.97); }
.btn-primario {
  background: var(--lima);
  color: var(--carbon);
  border: 0;
  box-shadow: 0 0 0 0 var(--lima-brillo);
}
.btn-primario::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transform: translateX(-120%);
}
.btn-primario:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -10px var(--lima-brillo), 0 0 0 4px rgba(194, 242, 78, 0.16);
}
.con-movimiento .btn-primario:hover::after { animation: brillo 0.9s var(--curva); }
.btn-secundario {
  background: transparent;
  color: var(--blanco);
  border: 1.5px solid var(--borde-fuerte);
}
.btn-secundario:hover {
  transform: translateY(-2px);
  border-color: var(--lima);
  color: var(--lima);
}
.btn-chico { min-height: 44px; padding: 10px 16px; font-size: 16px; border-radius: 12px; }
.btn-ancho { width: 100%; }
.onda {
  position: absolute;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  background: rgba(13, 15, 18, 0.28);
  pointer-events: none;
  animation: onda 0.6s ease-out forwards;
}
.btn-secundario .onda { background: rgba(194, 242, 78, 0.3); }
@keyframes onda { to { transform: scale(14); opacity: 0; } }
@keyframes brillo { to { transform: translateX(120%); } }

/* ---------- Textos comunes ---------- */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--lima);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (min-width: 600px) { .etiqueta { letter-spacing: 0.12em; } }
@media (max-width: 599px) { .heroe .etiqueta { letter-spacing: 0.03em; } .heroe .etiqueta::before { display: none; } }
.etiqueta::before {
  content: "";
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
h2 {
  font-family: var(--titulos);
  font-size: clamp(2.3rem, 6.4vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: 0.005em;
  margin-bottom: 0.6em;
  text-wrap: balance;
}
h3 {
  font-family: var(--titulos);
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin-bottom: 0.4em;
}
em { font-style: normal; color: var(--lima); }
/* Pie de Funciones: 16 px mínimo. */
.leyenda-capturas {
  margin: 32px 0 0;
  color: var(--gris-2);
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
}
.leyenda-fiscal {
  margin: 0;
  color: var(--gris);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.equivale {
  margin: 0 0 4px;
  color: var(--gris);
  font-size: 16px;
  font-weight: 400;
}

.seccion { padding-block: clamp(64px, 9vw, 112px); position: relative; }

/* ---------- Héroe ---------- */
.heroe {
  position: relative;
  padding-block: clamp(32px, 7vw, 96px) clamp(56px, 9vw, 120px);
  overflow-x: clip;
  overflow-y: visible;
}
.heroe::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 50% at 75% 40%, rgba(194, 242, 78, 0.16), transparent 70%),
    radial-gradient(40% 40% at 10% 0%, rgba(194, 242, 78, 0.06), transparent 70%);
}
.heroe::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(242, 244, 240, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 244, 240, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(70% 60% at 60% 40%, #000 30%, transparent 80%);
  mask-image: radial-gradient(70% 60% at 60% 40%, #000 30%, transparent 80%);
}
.heroe-grilla {
  display: grid;
  gap: 28px;
  align-items: start;
}
@media (min-width: 960px) {
  .heroe-grilla {
    grid-template-columns: 1.08fr 0.92fr;
    grid-template-rows: auto auto;
    gap: 16px 40px;
    align-items: start;
  }
  .heroe-texto { grid-column: 1; grid-row: 1; }
  .heroe-impacto { grid-column: 1; grid-row: 2; }
  .heroe-visual { grid-column: 2; grid-row: 1 / span 2; }
}
.heroe h1 {
  font-family: var(--titulos);
  font-size: clamp(2.6rem, 8.6vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: 0.005em;
  margin-bottom: 0.4em;
  text-wrap: balance;
}
.bajada {
  max-width: 34em;
  color: var(--gris);
  font-size: clamp(18px, 2.2vw, 21px);
  margin-bottom: 28px;
}
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.acciones-centro { justify-content: center; }
.precio-corto p { margin: 0 0 4px; color: var(--gris); font-size: 16px; }
.precio-corto strong { color: var(--blanco); font-size: 18px; }
.precio-centro { text-align: center; }

/* En el celular (menos de 600 px): título más chico, menos aire arriba y "Ver cómo funciona" pasa debajo del
   celular (.como-movil), así la primera pantalla muestra la promesa, el botón, el precio y el celular asomando. */
.como-movil { display: none; }
@media (max-width: 599px) {
  :root { --alto-encabezado: 56px; }
  .heroe { padding-top: 8px; padding-bottom: 8px; }
  .heroe h1 { font-size: min(2.05rem, 8.6vw); margin-bottom: 0.28em; }
  .heroe .bajada { font-size: 16px; margin-bottom: 10px; }
  .heroe .acciones { margin-bottom: 8px; }
  .heroe .acciones .btn-primario { flex: 1 1 100%; min-height: 48px; }
  .heroe .como-ancho { display: none; }
  .heroe .precio-corto .leyenda-fiscal { display: none; }
  .heroe-grilla { gap: 10px; }
  .como-movil {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    font-size: 16px;
    font-weight: 700;
  }
}

.heroe-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.nota-telefono {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 14px;
}

/* ---------- Celular en 3D (CSS puro) ---------- */
.escena {
  position: relative;
  perspective: 1500px;
  perspective-origin: 50% 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.flotar { transform-style: preserve-3d; }
.con-movimiento .flotar { animation: flotar 7s ease-in-out infinite; }
.con-movimiento .flotar-lento { animation-duration: 8.5s; animation-delay: -2s; }
.con-movimiento .flotar-medio { animation-duration: 7.8s; animation-delay: -4s; }
@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.telefono {
  --ancho: min(70vw, 290px);
  --giro-y: -14deg;
  --giro-x: 5deg;
  --giro-z: 1deg;
  --giro-scroll: 0deg;
  --puntero-x: 0deg;
  --puntero-y: 0deg;
  position: relative;
  width: var(--ancho);
  transform-style: preserve-3d;
  transform:
    rotateY(calc(var(--giro-y) + var(--giro-scroll) + var(--puntero-y)))
    rotateX(calc(var(--giro-x) + var(--puntero-x)))
    rotateZ(var(--giro-z));
  transition: transform 0.7s var(--curva);
}
.funcion-invertida .telefono { --giro-y: 14deg; --giro-z: -1deg; }
.telefono-heroe { --ancho: min(72vw, 320px); --giro-y: -18deg; --giro-x: 6deg; }
@media (hover: hover) and (pointer: fine) {
  .funcion-visual:hover .telefono { --giro-y: -4deg; --giro-x: 2deg; --giro-z: 0deg; }
  .funcion-invertida .funcion-visual:hover .telefono { --giro-y: 4deg; }
}

/* Espesor: dos capas detrás del marco dan el canto al girar.
   z-index: -1 es para WebKit (Safari): ahí estas capas se pintaban en el orden del documento, ::after quedaba
   encima del marco y el celular se veía como una placa vacía, sin pantalla (medido en Playwright WebKit, 18/10).
   Chromium y Firefox las siguen ordenando por profundidad, como antes. */
.telefono::before,
.telefono::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 48px;
  background: linear-gradient(160deg, #2b3139, #0a0b0d 55%, #22272e);
}
.telefono::before { transform: translateZ(-14px); background: #060708; }
.telefono::after { transform: translateZ(-7px); }

.telefono-marco {
  position: relative;
  padding: 11px;
  border-radius: 48px;
  background: linear-gradient(145deg, #3a414a 0%, #15181c 22%, #0b0d10 60%, #2a3038 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(242, 244, 240, 0.14),
    inset 0 0 0 7px #050608,
    0 50px 90px -30px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(194, 242, 78, 0.07);
  transform: translateZ(0.1px);
}
/* Botones laterales */
.telefono-marco::before,
.telefono-marco::after {
  content: "";
  position: absolute;
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(90deg, #444b55, #1d2127);
}
.telefono-marco::before { left: -3px; top: 22%; height: 9%; }
.telefono-marco::after { right: -3px; top: 28%; height: 14%; }

/* overflow + border-radius dentro de un 3D a veces deja las esquinas cuadradas en WebKit (Safari):
   clip-path con el mismo radio y una capa propia (translateZ) las mantienen redondas. */
.telefono-pantalla {
  --radio-pantalla: 38px;
  position: relative;
  border-radius: var(--radio-pantalla);
  overflow: hidden;
  -webkit-clip-path: inset(0 round var(--radio-pantalla));
  clip-path: inset(0 round var(--radio-pantalla));
  transform: translateZ(0);
  background: #0d0f12;
  isolation: isolate;
}
/* Reflejo de vidrio */
.telefono-pantalla::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.03) 28%, transparent 42%);
  mix-blend-mode: screen;
}
.telefono-barra {
  position: relative;
  height: 34px;
  background: radial-gradient(120% 140% at 50% 100%, #1c2217 0%, #141613 70%);
}
.telefono-barra::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 9px;
  width: 30%;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
}
.telefono-captura {
  position: relative;
  aspect-ratio: 390 / 844;
  overflow: hidden;
  background: #0d0f12;
}
.telefono-captura img { width: 100%; height: auto; }

.sombra-piso {
  width: 70%;
  height: 34px;
  margin-top: 26px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.75), transparent);
  filter: blur(4px);
}
.escena-heroe .sombra-piso { background: radial-gradient(closest-side, rgba(194, 242, 78, 0.22), transparent); }
.con-movimiento .escena .sombra-piso { animation: sombra 7s ease-in-out infinite; }
@keyframes sombra {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(0.86); opacity: 0.7; }
}

/* Héroe: antes y después del tilde, con el mismo encuadre */
.telefono-heroe .telefono-captura img {
  position: absolute;
  inset: 0;
}
.telefono-heroe .img-antes { position: relative; }
.telefono-heroe .img-despues { transition: opacity 0.25s ease; }
.js.con-movimiento .telefono-heroe:not(.marcado) .img-despues { opacity: 0; }
.telefono-heroe .img-claro { opacity: 0; transition: opacity 0.45s ease; }
.telefono-heroe.en-claro .img-claro { opacity: 1; }
.toque {
  position: absolute;
  left: 87.7%;
  top: 87%;
  width: 16%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.4);
  border: 3px solid var(--lima);
  background: rgba(194, 242, 78, 0.25);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.telefono-heroe.tocando .toque { animation: toque 0.7s var(--curva) forwards; }
@keyframes toque {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
  35% { opacity: 1; transform: translate(-50%, -50%) scale(0.75); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); }
}

/* Globos que señalan la pantalla (solo en pantallas anchas) */
.globo {
  position: absolute;
  z-index: 5;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 14px;
  background: rgba(20, 23, 27, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--blanco);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9);
}
.globo-punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lima);
  box-shadow: 0 0 0 0 var(--lima-brillo);
}
.con-movimiento .globo-punto { animation: latido 2.2s ease-out infinite; }
@keyframes latido {
  0% { box-shadow: 0 0 0 0 var(--lima-brillo); }
  70%, 100% { box-shadow: 0 0 0 12px rgba(194, 242, 78, 0); }
}
.globo-check {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--lima);
  color: var(--carbon);
  font-weight: 800;
}
/* Están dentro de .escena-heroe, que mide lo mismo que el celular: se posicionan contra sus bordes. */
@media (min-width: 1240px) {
  .globo { display: inline-flex; }
  .globo-vez { right: calc(100% - 30px); top: 21%; }
  .globo-tilde { left: calc(100% - 64px); top: 80%; transition: opacity 0.35s, transform 0.45s var(--curva); }
  .js.con-movimiento .heroe-visual:not(.marcado-visible) .globo-tilde { opacity: 0; transform: translateY(10px) scale(0.96); }
  .con-movimiento .globo-vez { animation: flotar 6s ease-in-out infinite; animation-delay: -1.5s; }
}

/* Interruptor de tema de la captura */
.interruptor {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 14px 6px 8px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--blanco);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s var(--curva);
}
.interruptor[hidden] { display: none; }
.interruptor:hover { border-color: var(--lima); }
.interruptor:active { transform: scale(0.97); }
.interruptor-pista {
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: var(--borde-fuerte);
  transition: background-color 0.25s;
}
.interruptor-bola {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blanco);
  transition: transform 0.3s var(--curva);
}
.interruptor[aria-pressed="true"] .interruptor-pista { background: var(--lima); }
.interruptor[aria-pressed="true"] .interruptor-bola { transform: translateX(18px); background: var(--carbon); }

/* ---------- Problema (tipografía cinética) ---------- */
.problema {
  padding-block: clamp(64px, 10vw, 128px);
  text-align: center;
  background:
    linear-gradient(180deg, transparent, rgba(194, 242, 78, 0.035) 50%, transparent),
    var(--carbon);
  border-block: 1px solid var(--borde);
}
.cinetica {
  font-size: clamp(3.2rem, 13vw, 8.5rem);
  line-height: 1;
  margin-bottom: 0.35em;
}
.palabra {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.06em;
}
.palabra > span { display: inline-block; }
.resaltada > span {
  color: var(--carbon);
  background: var(--lima);
  padding: 0 0.12em;
  border-radius: 0.08em;
}
.js.con-movimiento .cinetica .palabra > span {
  transform: translateY(105%);
  transition: transform 0.75s var(--curva);
}
.js.con-movimiento .cinetica.visible .palabra > span { transform: none; }
.cinetica .palabra:nth-child(2) > span { transition-delay: 0.08s; }
.cinetica .palabra:nth-child(3) > span { transition-delay: 0.16s; }
.cinetica .palabra:nth-child(4) > span { transition-delay: 0.24s; }
.cinetica .palabra:nth-child(5) > span { transition-delay: 0.32s; }
.cinetica .palabra:nth-child(6) > span { transition-delay: 0.44s; }
.problema-texto {
  max-width: 36em;
  margin: 0 auto 18px;
  color: var(--gris);
  font-size: clamp(18px, 2.2vw, 21px);
}
.problema-respuesta {
  max-width: 30em;
  margin: 0 auto 26px;
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 700;
  line-height: 1.35;
}
.para-quien {
  display: inline-block;
  margin: 0;
  padding: 8px 16px;
  border: 1px dashed var(--borde-fuerte);
  border-radius: 12px;
  color: var(--gris);
  font-size: 16px;
}

/* ---------- Pasos ---------- */
.pasos {
  list-style: none;
  display: grid;
  gap: 16px;
  counter-reset: none;
}
@media (min-width: 820px) { .pasos { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.paso {
  position: relative;
  padding: 28px 24px 24px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: linear-gradient(180deg, var(--superficie-2), var(--superficie));
  overflow: hidden;
  transition: transform 0.35s var(--curva), border-color 0.3s, box-shadow 0.35s;
}
.paso::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--lima);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--curva);
}
.paso:hover {
  transform: translateY(-4px);
  border-color: rgba(194, 242, 78, 0.45);
  box-shadow: 0 24px 50px -30px rgba(194, 242, 78, 0.45);
}
.paso:hover::after { transform: scaleX(1); }
.paso-num {
  display: block;
  margin-bottom: 10px;
  font-family: var(--titulos);
  font-size: 4.2rem;
  line-height: 1;
  color: var(--lima);
}
.paso h3 { font-size: clamp(1.6rem, 3vw, 2rem); }
.paso p { margin: 0; color: var(--gris); }

/* ---------- Funciones ---------- */
.funciones { overflow: clip; }
.funcion {
  display: grid;
  gap: 24px;
  align-items: center;
  padding-block: clamp(24px, 4.5vw, 44px);
}
@media (min-width: 880px) {
  .funcion { grid-template-columns: 1fr 1fr; gap: 56px; }
  .funcion-invertida .funcion-texto { order: 2; justify-self: start; }
  .funcion:not(.funcion-invertida) .funcion-texto { justify-self: end; }
}
.funcion-texto { max-width: 30em; }
.funcion-num {
  display: block;
  margin-bottom: 6px;
  font-family: var(--titulos);
  font-size: 1.6rem;
  color: var(--lima);
  letter-spacing: 0.06em;
}
.funcion-texto p { color: var(--gris); font-size: clamp(18px, 2vw, 20px); margin: 0; }
.funcion-visual {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.funcion-visual .telefono { --ancho: min(62vw, 262px); }
.funcion-texto h3 { font-size: clamp(1.9rem, 4.2vw, 3rem); }

/* ---------- Lo tuyo es tuyo ---------- */
.chips {
  list-style: none;
  display: grid;
  gap: 14px;
  margin-bottom: 24px;
}
@media (min-width: 720px) { .chips { grid-template-columns: repeat(2, 1fr); } }
.chip {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  font-weight: 600;
  line-height: 1.4;
  transition: transform 0.3s var(--curva), border-color 0.3s, background-color 0.3s;
}
.chip svg {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 9px;
  border-radius: 12px;
  background: var(--lima-suave);
  fill: none;
  stroke: var(--lima);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.45s var(--curva), background-color 0.3s;
}
.chip:hover { transform: translateY(-3px); border-color: rgba(194, 242, 78, 0.45); background: var(--superficie-2); }
.chip:hover svg { transform: rotate(-8deg) scale(1.08); background: rgba(194, 242, 78, 0.24); }
.aviso {
  margin: 0;
  padding: 16px 20px;
  border-left: 3px solid var(--lima);
  border-radius: 0 12px 12px 0;
  background: var(--superficie);
  color: var(--gris);
  font-size: 16px;
}
.aviso strong { color: var(--blanco); }

/* ---------- Precio ---------- */
.precio {
  background:
    radial-gradient(50% 45% at 30% 30%, rgba(194, 242, 78, 0.08), transparent 70%),
    var(--carbon);
}
.precio-grilla {
  display: grid;
  gap: 20px;
  align-items: start;
}
.planes {
  display: grid;
  gap: 20px;
  align-items: start;
}
@media (min-width: 720px) { .planes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .precio-grilla { grid-template-columns: 1.2fr 0.8fr; gap: 28px; } }
.planes .monto { font-size: clamp(2.8rem, 8vw, 4.2rem); }

@property --angulo {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.tarjeta-precio {
  position: relative;
  padding: 2px;
  border-radius: 24px;
  background: conic-gradient(from var(--angulo), rgba(194, 242, 78, 0.9), rgba(194, 242, 78, 0.12) 25%, rgba(194, 242, 78, 0.12) 60%, rgba(194, 242, 78, 0.9));
  box-shadow: 0 40px 80px -40px rgba(194, 242, 78, 0.35);
}
.con-movimiento .tarjeta-precio { animation: girar-borde 7s linear infinite; }
.tarjeta-precio-espera {
  background: var(--borde);
  box-shadow: none;
}
.con-movimiento .tarjeta-precio-espera { animation: none; }
@keyframes girar-borde { to { --angulo: 360deg; } }
.tarjeta-precio-interior {
  padding: clamp(24px, 4vw, 36px);
  border-radius: 22px;
  background: linear-gradient(180deg, #161a1f, #101317);
}
.producto {
  margin: 0 0 4px;
  color: var(--gris);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.monto {
  margin: 0;
  font-family: var(--titulos);
  font-size: clamp(3.6rem, 11vw, 5.2rem);
  line-height: 1.05;
}
.moneda { font-size: 0.45em; color: var(--lima); vertical-align: 0.9em; margin-right: 4px; }
.monto-nota { margin: 6px 0 4px; color: var(--blanco); font-size: 16px; }
.tarjeta-precio .leyenda-fiscal { margin-bottom: 4px; }
.tarjeta-precio .equivale { margin-bottom: 22px; }
.plus {
  margin: -8px 0 18px;
  color: var(--blanco);
  font-size: 16px;
  line-height: 1.45;
}
.btn-espera:disabled {
  cursor: not-allowed;
  background: var(--superficie-2);
  color: var(--gris);
  border: 1.5px solid var(--borde-fuerte);
  box-shadow: none;
  opacity: 1;
}
.btn-espera:disabled:hover,
.btn-espera:disabled:active { transform: none; box-shadow: none; }
.precio-grilla[data-completo-pago=""] [data-completo-link] { display: none !important; }
.incluye {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 0 0 26px;
  padding-top: 20px;
  border-top: 1px solid var(--borde);
}
.incluye li {
  position: relative;
  padding-left: 34px;
  font-size: 16px;
  line-height: 1.5;
}
.incluye li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--lima) no-repeat center / 14px url("iconos/tilde.svg");
}
.ver-resumen { margin: 8px 0 0; text-align: center; font-size: 16px; }
.ver-resumen a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.pago-nota { margin: 14px 0 10px; color: var(--gris); font-size: 16px; }
.ver-resumen + .pago-nota { margin-top: 4px; }

.columna-legal { display: grid; gap: 16px; }
.resumen,
.vende {
  padding: clamp(20px, 3.4vw, 28px);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
}
.resumen h3,
.vende h3 { font-size: 1.7rem; }
.resumen ol {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding-left: 1.4em;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gris);
}
.resumen ol li::marker { color: var(--lima); font-weight: 700; }
.resumen-links { margin: 0; font-size: 16px; }
/* Links sueltos: área de toque de 44 px. Los links dentro de una oración quedan en línea (excepción de WCAG 2.5.8). */
.resumen-links a,
.vende a,
.pie-datos > p > a,
.pie-links a {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}
.vende p { margin: 0; font-size: 16px; color: var(--gris); }

/* ---------- Preguntas frecuentes ---------- */
.faq { display: grid; gap: 10px; }
.faq details {
  border: 1px solid var(--borde);
  border-radius: 16px;
  background: var(--superficie);
  transition: border-color 0.3s, background-color 0.3s;
  interpolate-size: allow-keywords;
}
.faq details[open] { border-color: rgba(194, 242, 78, 0.45); background: var(--superficie-2); }
.faq summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 14px 60px 14px 20px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
  border-radius: 16px;
  transition: color 0.2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  border-radius: 50%;
  background: var(--lima-suave) no-repeat center / 14px url("iconos/mas.svg");
  transition: transform 0.35s var(--curva), background-color 0.3s;
}
.faq summary:hover { color: var(--lima); }
.faq details[open] summary::after { transform: rotate(135deg); background-color: rgba(194, 242, 78, 0.26); }
.faq details::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 0.35s var(--curva), content-visibility 0.35s allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }
.respuesta { padding: 0 20px 16px; color: var(--gris); }
.respuesta p { margin: 0 0 10px; }
.respuesta p:last-child { margin-bottom: 0; }

/* ---------- Cierre con tres celulares ---------- */
.cierre {
  padding-block: clamp(80px, 12vw, 150px) clamp(48px, 8vw, 96px);
  text-align: center;
  overflow: clip;
  background:
    radial-gradient(55% 40% at 50% 75%, rgba(194, 242, 78, 0.14), transparent 70%),
    var(--carbon);
}
.cierre-titulo { font-size: clamp(2.6rem, 8vw, 5.4rem); }
.trio { margin: 48px 0 0; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.escena-trio {
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  perspective: 1600px;
}
.trio-item { transform-style: preserve-3d; }
.trio-item .telefono { --ancho: clamp(118px, 30vw, 250px); }
.trio-centro { position: relative; z-index: 2; }
.trio-centro .telefono { --ancho: clamp(146px, 37vw, 290px); --giro-y: 0deg; --giro-x: 4deg; --giro-z: 0deg; }
.trio-izq { margin-right: clamp(-46px, -6vw, -20px); margin-bottom: 24px; }
.trio-der { margin-left: clamp(-46px, -6vw, -20px); margin-bottom: 24px; }
.trio-izq .telefono { --giro-y: 26deg; --giro-z: -3deg; }
.trio-der .telefono { --giro-y: -26deg; --giro-z: 3deg; }
.telefono-chico::before,
.telefono-chico::after,
.telefono-chico .telefono-marco { border-radius: clamp(26px, 6vw, 46px); }
.telefono-chico .telefono-marco { padding: clamp(6px, 1.4vw, 10px); }
.telefono-chico .telefono-pantalla { --radio-pantalla: clamp(20px, 5vw, 36px); }
.telefono-chico .telefono-barra { height: clamp(18px, 4vw, 30px); }
.telefono-chico .telefono-barra::before { top: clamp(4px, 1vw, 8px); height: clamp(10px, 2.4vw, 20px); }

/* ---------- Pie ---------- */
.pie {
  padding-block: 56px 120px;
  border-top: 1px solid var(--borde);
  background: var(--carbon-hondo);
  color: var(--gris);
  font-size: 16px;
}
.pie-grilla { display: grid; gap: 28px; }
@media (min-width: 900px) { .pie-grilla { grid-template-columns: 1fr 2fr auto; gap: 48px; } }
.pie-marca img { height: 56px; width: auto; margin-bottom: 12px; }
.pie-marca p { margin: 0; }
.pie-datos p { margin: 0 0 6px; }
.pie-datos .pie-titulo { margin: 0; }
.pie-chico a.link-licencia { min-width: 44px; text-align: center; }
.pie-datos strong { color: var(--blanco); }
.pie-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin: 8px 0 10px;
}
.pie-links a { color: var(--blanco); }
.pie-links a:hover { color: var(--lima); }
.pie-chico { color: var(--gris-2); }
.pie-chico a { color: var(--gris); }
.enlace {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blanco);
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.enlace[hidden] { display: none; }
.enlace:hover { color: var(--lima); }
.marcador {
  display: inline-block;
  margin: 0;
  padding: 10px 14px;
  border: 1px dashed var(--borde-fuerte);
  border-radius: 10px;
  color: var(--gris);
}

/* ---------- Banner de cookies (T3) ---------- */
.cookies {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 60;
  max-width: 600px;
  margin: 0 auto;
  padding: 18px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 18px;
  background: rgba(22, 26, 31, 0.97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9);
  font-size: 16px;
  line-height: 1.5;
}
.cookies[hidden] { display: none; }
.con-movimiento .cookies:not([hidden]) { animation: subir 0.5s var(--curva); }
@keyframes subir { from { transform: translateY(24px); opacity: 0; } }
.cookies p { margin: 0 0 14px; color: var(--gris); }
.cookies strong { color: var(--blanco); }
.cookies-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-cookie {
  min-height: 48px;
  padding: 10px 16px;
  border: 1.5px solid var(--borde-fuerte);
  border-radius: 12px;
  background: var(--superficie-2);
  color: var(--blanco);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s var(--curva), background-color 0.2s;
}
.btn-cookie:hover { border-color: var(--lima); background: #20252b; }
.btn-cookie:active { transform: scale(0.97); }
@media (max-width: 599px) {
  .cookies { left: 8px; right: 8px; bottom: 8px; padding: 14px 14px 12px; line-height: 1.45; }
  .cookies p { margin-bottom: 10px; }
  .btn-cookie { min-height: 44px; }
}

/* ---------- Aparición al hacer scroll ---------- */
.js.con-movimiento [data-revela] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--curva), transform 0.9s var(--curva);
  transition-delay: var(--retraso, 0ms);
}
.js.con-movimiento .funcion-visual[data-revela] { transform: translateY(48px) scale(0.96); }
.js.con-movimiento [data-revela].visible { opacity: 1; transform: none; }
.js.con-movimiento .cinetica[data-revela] { opacity: 1; transform: none; }
/* Las preguntas aparecen solo con opacidad: con translateY, el salto a una pregunta por su link quedaba 28 px corrido. */
.js.con-movimiento .faq[data-revela] { transform: none; }
/* landing.js la pone en lo que un link interno muestra de golpe, para que el scroll caiga justo. */
.js.con-movimiento [data-revela].sin-transicion { transition: none; }

/* Modo suave (25/10/2026): con "reducir movimiento" lo que aparece entra solo con fundido, sin desplazarse.
   WCAG 2.3.3 no cuenta la opacidad como movimiento (Understanding «Animation from Interactions»). */
.js.movimiento-suave [data-revela] {
  opacity: 0;
  transition: opacity 0.7s ease-out;
  transition-delay: var(--retraso, 0ms);
}
.js.movimiento-suave [data-revela].visible { opacity: 1; }
.js.movimiento-suave [data-revela].sin-transicion { transition: none; }

/* ---------- Menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  /* El fundido del modo suave es lo único que queda con duración. */
  .js.movimiento-suave [data-revela] { transition-duration: 0.7s !important; transition-delay: var(--retraso, 0ms) !important; }
  .js.movimiento-suave [data-revela].sin-transicion { transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  .telefono { --giro-scroll: 0deg !important; --puntero-x: 0deg !important; --puntero-y: 0deg !important; }
}

/* Al imprimir, todo a la vista aunque no se haya bajado hasta ahí. */
@media print {
  .js [data-revela], .js.con-movimiento [data-revela], .js.movimiento-suave [data-revela] {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

.nw { white-space: nowrap; }

/* =====================================================================================================
   v2 (19/10/2026): más animaciones automáticas al navegar y más elementos visuales (pedido del usuario:
   "más animaciones automáticas a la hora de ir navegando en la web y algunos elementos visuales más").
   Todo lo que se mueve depende de .con-movimiento (landing.js la pone solo sin "reducir movimiento").
   Solo se anima transform, opacity, stroke-dashoffset y background-size: nada empuja el contenido.
   ===================================================================================================== */

/* ---------- Barra de avance de lectura (arriba de todo) ---------- */
.progreso-scroll {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: 3px;
  pointer-events: none;
}
.progreso-scroll-barra {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(194, 242, 78, 0.55), var(--lima));
  box-shadow: 0 0 12px var(--lima-brillo);
  transform: scaleX(var(--avance, 0));
  transform-origin: left;
}
.js:not(.con-movimiento) .progreso-scroll { display: none; }

/* ---------- Héroe: luz que respira, grilla que avanza y subrayado de "la vez pasada" ---------- */
.con-movimiento .heroe::before { animation: deriva 16s ease-in-out infinite alternate; }
@keyframes deriva {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to { transform: translate3d(3%, 3%, 0) scale(1.12); }
}
@media (min-width: 900px) and (hover: hover) {
  .con-movimiento .heroe::after { animation: grilla 7s linear infinite; }
}
@keyframes grilla { to { background-position: 0 48px, 48px 0; } }
.heroe h1 em {
  background: linear-gradient(var(--lima-suave), var(--lima-suave)) no-repeat 0 92% / 100% 0.2em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.js.con-movimiento .heroe h1 em { background-size: 0% 0.2em; }
.js.con-movimiento .heroe h1.visible em { animation: subrayar 0.9s var(--curva) 0.75s forwards; }
@keyframes subrayar { to { background-size: 100% 0.2em; } }

/* ---------- Cinta de ejercicios ---------- */
/* El marco recorta la cinta inclinada: sin él, sus puntas ensanchaban la página (scroll horizontal). */
.cinta-marco { position: relative; z-index: 2; overflow: hidden; padding-block: 18px; margin-block: -18px; pointer-events: none; }
.cinta-marco .cinta { pointer-events: auto; }
.cinta {
  position: relative;
  z-index: 2;
  margin: 0 -3%;
  padding: 14px 0;
  overflow: hidden;
  background: var(--lima);
  color: var(--carbon);
  transform: rotate(-1.6deg);
  box-shadow: 0 18px 40px -24px rgba(194, 242, 78, 0.55);
}
.cinta-pista {
  display: flex;
  align-items: center;
  gap: 22px;
  width: max-content;
  font-family: var(--titulos);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cinta-pista i {
  font-style: normal;
  font-family: var(--texto);
  font-weight: 800;
  font-size: 0.8em;
  opacity: 0.55;
}
.con-movimiento .cinta-pista { animation: cinta 38s linear infinite; }
/* Fuera de pantalla no se anima (landing.js pone .fuera-de-vista) */
.con-movimiento .fuera-de-vista .cinta-pista,
.con-movimiento .fuera-de-vista .chispas span { animation-play-state: paused; }
@keyframes cinta { to { transform: translateX(-50%); } }
.cinta:hover .cinta-pista { animation-play-state: paused; }

/* ---------- Problema: disco de pesas que gira con el scroll ---------- */
.problema { position: relative; overflow: hidden; overflow: clip; }
.problema > .contenedor { position: relative; z-index: 1; }
.disco {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: max(-180px, -14vw);
  width: clamp(260px, 42vw, 540px);
  height: auto;
  margin-top: calc(clamp(260px, 42vw, 540px) / -2);
  fill: none;
  stroke: var(--lima);
  stroke-width: 1.4;
  opacity: 0.09;
  transform: rotate(var(--giro-disco, 0deg));
  pointer-events: none;
}
.disco text {
  fill: var(--lima);
  stroke: none;
  font-family: var(--titulos);
  font-size: 22px;
  letter-spacing: 0.12em;
}

/* ---------- Cómo funciona: la barra de cada paso se dibuja sola y el número entra con un golpe ---------- */
.paso-num { transition: transform 0.7s var(--curva), opacity 0.5s; transition-delay: calc(var(--retraso, 0ms) + 220ms); }
.js.con-movimiento .paso:not(.visible) .paso-num { opacity: 0; transform: scale(0.4) rotate(-14deg); }
.js.con-movimiento .paso.visible::after { transform: scaleX(1); transition-delay: calc(var(--retraso, 0ms) + 420ms); }

/* ---------- Datos que cuentan ---------- */
.datos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 28px;
}
@media (min-width: 820px) { .datos { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.dato {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 18px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(194, 242, 78, 0.1), transparent 60%),
    var(--superficie);
}
.dato-num {
  font-family: var(--titulos);
  font-size: clamp(3rem, 7vw, 4.4rem);
  line-height: 1;
  color: var(--lima);
  font-variant-numeric: tabular-nums;
}
.dato-txt { color: var(--gris); font-size: 16px; line-height: 1.35; }
.con-movimiento .dato.contando .dato-num { text-shadow: 0 0 22px var(--lima-brillo); }

/* ---------- Funciones: tarjetas que salen del celular ---------- */
.tarjeta-flotante {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 14px;
  background: rgba(20, 23, 27, 0.9);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(194, 242, 78, 0.06) inset;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.6s, transform 0.8s var(--curva);
}
.tf-arriba { top: 14%; left: -16%; }
.tf-abajo { bottom: 20%; right: -16%; }
.funcion-invertida .tf-arriba { left: auto; right: -16%; }
.funcion-invertida .tf-abajo { right: auto; left: -16%; }
.tf-etiqueta {
  color: var(--gris);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}
.tf-valor { font-size: 20px; font-weight: 800; line-height: 1.2; color: var(--blanco); }
.tf-valor small { font-size: 16px; font-weight: 700; color: var(--gris); margin-left: 2px; }
.tf-tilde { flex-direction: row; align-items: center; gap: 10px; }
.tf-tilde .tf-valor { font-size: 18px; }
.js.con-movimiento .funcion-visual:not(.visible) .tarjeta-flotante { opacity: 0; transform: translateY(18px) scale(0.9); }
.js.con-movimiento .funcion-visual.visible .tf-arriba { transition-delay: 0.45s; }
.js.con-movimiento .funcion-visual.visible .tf-abajo { transition-delay: 0.7s; }
.con-movimiento .funcion-visual.visible .tf-arriba { animation: flotar-tarjeta 6.5s ease-in-out 1.4s infinite; }
.con-movimiento .funcion-visual.visible .tf-abajo { animation: flotar-tarjeta 7.2s ease-in-out 1.8s infinite reverse; }
@keyframes flotar-tarjeta {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}
/* En pantallas angostas, las tarjetas se acercan para no salirse */
@media (max-width: 420px) {
  .tf-arriba, .funcion-invertida .tf-abajo { left: -10%; }
  .tf-abajo, .funcion-invertida .tf-arriba { right: -10%; }
  .tarjeta-flotante { padding: 8px 12px; }
}

/* ---------- Lo tuyo es tuyo: los íconos se dibujan ---------- */
.js.con-movimiento .chip svg > * {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s var(--curva);
  transition-delay: calc(var(--retraso, 0ms) + 280ms);
}
.js.con-movimiento .chip:not(.visible) svg > * { stroke-dashoffset: 1; }

/* ---------- Títulos que suben palabra por palabra (landing.js arma las palabras) ---------- */
.titulo-cinetico .palabra { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.06em; }
.titulo-cinetico .palabra > span { display: inline-block; }
.js.con-movimiento .titulo-cinetico[data-revela] { opacity: 1; transform: none; }
.js.con-movimiento .titulo-cinetico .palabra > span {
  transform: translateY(105%);
  transition: transform 0.75s var(--curva);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js.con-movimiento .titulo-cinetico.visible .palabra > span { transform: none; }

/* ---------- Cierre: los celulares se abren y suben chispas ---------- */
.cierre { position: relative; }
.cierre > .contenedor { position: relative; z-index: 1; }
.chispas { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.chispas span {
  position: absolute;
  bottom: -12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lima);
  box-shadow: 0 0 10px var(--lima-brillo);
  opacity: 0;
}
.con-movimiento .chispas span { animation: chispa 9s linear infinite; }
.con-movimiento .cierre:not(.en-vista) .chispas span { animation-play-state: paused; }
.chispas span:nth-child(1) { left: 6%; animation-delay: -1s; }
.chispas span:nth-child(2) { left: 14%; animation-delay: -5s; animation-duration: 11s; }
.chispas span:nth-child(3) { left: 23%; animation-delay: -2.5s; width: 4px; height: 4px; }
.chispas span:nth-child(4) { left: 31%; animation-delay: -7s; animation-duration: 12s; }
.chispas span:nth-child(5) { left: 40%; animation-delay: -3.6s; width: 4px; height: 4px; }
.chispas span:nth-child(6) { left: 52%; animation-delay: -8.2s; animation-duration: 10s; }
.chispas span:nth-child(7) { left: 61%; animation-delay: -0.4s; }
.chispas span:nth-child(8) { left: 69%; animation-delay: -6.1s; width: 4px; height: 4px; animation-duration: 13s; }
.chispas span:nth-child(9) { left: 77%; animation-delay: -4.4s; }
.chispas span:nth-child(10) { left: 85%; animation-delay: -9.3s; animation-duration: 11s; }
.chispas span:nth-child(11) { left: 92%; animation-delay: -2s; width: 4px; height: 4px; }
.chispas span:nth-child(12) { left: 47%; animation-delay: -10.5s; animation-duration: 14s; }
@keyframes chispa {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  12% { opacity: 0.85; }
  80% { opacity: 0.5; }
  100% { transform: translateY(-110vh) scale(1); opacity: 0; }
}
.js.con-movimiento .trio .trio-izq,
.js.con-movimiento .trio .trio-der { transition: transform 1.1s var(--curva) 0.3s, opacity 0.8s 0.3s; }
.js.con-movimiento .trio:not(.visible) .trio-izq { transform: translateX(42%) scale(0.88); opacity: 0; }
.js.con-movimiento .trio:not(.visible) .trio-der { transform: translateX(-42%) scale(0.88); opacity: 0; }
.con-movimiento .cierre-titulo.visible em { animation: destello 3.6s ease-in-out 1.2s 2; }
@keyframes destello {
  0%, 70%, 100% { text-shadow: 0 0 0 transparent; }
  80% { text-shadow: 0 0 26px var(--lima-brillo); }
}
/* Tarjetas: en la Agenda y en Cuerpo, la de arriba baja un poco para no tapar el resumen de la pantalla */
.funcion:nth-of-type(3) .tf-arriba { top: 52%; }
.funcion:nth-of-type(4) .tf-arriba { top: 36%; }
/* En pantallas anchas hay lugar al costado: las tarjetas salen más del celular */
@media (min-width: 880px) {
  .tf-arriba { left: -50%; }
  .tf-abajo { right: -50%; }
  .funcion-invertida .tf-arriba { left: auto; right: -50%; }
  .funcion-invertida .tf-abajo { right: auto; left: -50%; }
}

/* Revisión de Grok (19/10/2026): el desenfoque de las tarjetas solo en equipos con mouse (en celular cuesta mucho) */
@media (hover: hover) and (pointer: fine) {
  .tarjeta-flotante { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
/* Texto solo para lectores de pantalla (los contadores animados quedan aria-hidden) */
.solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* N5b (28/10/2026): ideas 1, 6 y 10 del análisis de videos, en CSS/SVG.
   Objetos que sobresalen, interruptor bloc→app y tarjeta de privacidad con escudo.
   Solo transform/opacity; prefers-reduced-motion lo apaga. */
.heroe-impacto { position: relative; z-index: 2; }
.impacto-piezas {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
  padding: 34px 0 0;
  overflow: visible;
}
.pieza {
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 92px;
  padding: 36px 8px 10px;
  border-radius: 18px;
  background:
    linear-gradient(165deg, rgba(194, 242, 78, 0.16), transparent 48%),
    linear-gradient(180deg, #1c2128, #101317);
  border: 1px solid rgba(194, 242, 78, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(242, 244, 240, 0.14),
    0 16px 28px -18px rgba(0, 0, 0, 0.9);
}
.pieza-obj {
  position: absolute;
  top: -30px;
  left: 50%;
  width: 68px;
  height: 68px;
  transform: translateX(-50%) rotate(-12deg);
  filter: drop-shadow(0 12px 10px rgba(0, 0, 0, 0.55));
  pointer-events: none;
  z-index: 2;
}
.pieza-obj-crono { transform: translateX(-50%) rotate(8deg); top: -34px; }
.pieza-obj-medalla { transform: translateX(-50%) rotate(-6deg); top: -38px; }
.pieza-obj-escudo { transform: translateX(-50%) rotate(6deg); top: -40px; }
.con-movimiento .pieza-obj { animation: flotar-pieza 6.4s ease-in-out infinite; }
.con-movimiento .pieza-obj-crono { animation-delay: -2s; }
.con-movimiento .pieza-obj-medalla { animation-delay: -3.4s; }
.con-movimiento .pieza-obj-escudo { animation-delay: -4.6s; }
@keyframes flotar-pieza {
  0%, 100% { transform: translateX(-50%) rotate(-12deg) translateY(0); }
  50% { transform: translateX(-50%) rotate(-6deg) translateY(-7px); }
}
.pieza-etiq {
  color: var(--lima);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}
.pieza-valor {
  font-family: var(--titulos);
  font-size: 16px;
  line-height: 1.15;
  color: var(--blanco);
  font-weight: 400;
}
.switch-bloc { display: flex; justify-content: center; }
.interruptor-bloc {
  width: 100%;
  max-width: 420px;
  justify-content: space-between;
  padding: 8px 12px;
  gap: 8px;
}
.interruptor-bloc .switch-etiq {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--gris);
}
.interruptor-bloc[aria-pressed="true"] .switch-etiq[data-lado="on"],
.interruptor-bloc[aria-pressed="false"] .switch-etiq[data-lado="off"] {
  color: var(--blanco);
}
.interruptor-bloc .interruptor-pista { flex: none; }

.escena-heroe { padding-top: 28px; position: relative; }
.escena-heroe .flotar { position: relative; z-index: 3; }
.escena-heroe .sombra-piso { position: relative; z-index: 1; }

.nota-caotica {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 8%;
  width: min(78%, 280px);
  transform: translateX(-50%) rotate(-3deg);
  padding: 16px 16px 18px;
  border-radius: 8px 12px 10px 8px;
  background:
    repeating-linear-gradient(180deg, #f4ecd4 0 28px, #e7dcb8 28px 29px);
  color: #2a2418;
  box-shadow: 0 22px 40px -18px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08);
  opacity: 0;
  pointer-events: none;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 600;
}
.nota-caotica p { margin: 0 0 6px; }
.nota-caotica-etiq {
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b5c3a;
  margin-bottom: 8px;
}
.heroe-visual.en-notas .nota-caotica { opacity: 1; }
.heroe-visual.en-notas .telefono-heroe { opacity: 0.12; }
.js.con-movimiento .nota-caotica {
  transition: opacity 0.45s var(--curva);
}
.js.con-movimiento .heroe-visual.en-notas .telefono-heroe,
.js.con-movimiento .heroe-visual.en-libreta .telefono-heroe {
  transition: opacity 0.45s var(--curva);
}

.tarjeta-privacidad {
  position: absolute;
  z-index: 5;
  left: 2%;
  bottom: 18%;
  width: min(58%, 200px);
  padding: 28px 12px 10px 14px;
  border-radius: 16px;
  background:
    linear-gradient(165deg, rgba(194, 242, 78, 0.18), transparent 50%),
    linear-gradient(180deg, #1c2128, #101317);
  border: 1px solid rgba(194, 242, 78, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(242, 244, 240, 0.14),
    0 18px 30px -16px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}
.escudo-obj {
  position: absolute;
  top: -28px;
  right: 10px;
  width: 52px;
  height: 62px;
  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.55));
}
.con-movimiento .escudo-obj { animation: flotar-escudo 5.6s ease-in-out infinite; }
@keyframes flotar-escudo {
  0%, 100% { transform: rotate(8deg) translateY(0); }
  50% { transform: rotate(4deg) translateY(-6px); }
}
.priv-etiq {
  display: block;
  color: var(--lima);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.priv-valor {
  display: block;
  font-family: var(--titulos);
  font-size: 16px;
  line-height: 1.15;
  color: var(--blanco);
  font-weight: 400;
}
@media (max-width: 599px) {
  .escena-heroe { padding-top: 4px; }
  .telefono-heroe { --ancho: min(70vw, 270px); --giro-y: -8deg; --giro-x: 3deg; }
  .impacto-piezas { padding-top: 26px; gap: 6px; margin-bottom: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pieza { min-height: 76px; padding: 28px 4px 6px; }
  .pieza-obj { width: 58px; height: 58px; top: -28px; }
  .pieza-obj-crono { top: -30px; }
  .pieza-obj-medalla { top: -34px; }
  .pieza-obj-escudo { top: -34px; }
  /* En el primer pantallazo el escudo va en el flujo, entre el interruptor y el celular. */
  .tarjeta-privacidad {
    position: relative;
    left: auto;
    bottom: auto;
    top: auto;
    width: 100%;
    margin: 0 0 6px;
    padding: 18px 12px 8px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .escudo-obj {
    position: relative;
    top: -22px;
    right: auto;
    width: 42px;
    height: 52px;
    flex: none;
    margin-bottom: -18px;
  }
  .nota-caotica { width: min(72%, 240px); top: 6%; }
}
@media (min-width: 960px) {
  .pieza-obj { width: 78px; height: 78px; top: -36px; }
  .tarjeta-privacidad { left: -8%; bottom: 14%; width: 210px; }
}

/* Más profundidad en el celular y en las tarjetas que salen de la pantalla. */
.telefono-marco {
  box-shadow:
    inset 0 0 0 1.5px rgba(242, 244, 240, 0.16),
    inset 0 0 0 7px #050608,
    0 50px 90px -30px rgba(0, 0, 0, 0.85),
    0 0 40px -8px rgba(194, 242, 78, 0.18),
    0 0 0 1px rgba(194, 242, 78, 0.1);
}
.tarjeta-flotante {
  box-shadow:
    0 22px 44px -16px rgba(0, 0, 0, 0.95),
    6px 10px 0 -2px rgba(194, 242, 78, 0.16),
    0 0 0 1px rgba(194, 242, 78, 0.1) inset;
  transform: rotateY(-6deg) rotateX(3deg);
}
.funcion-invertida .tarjeta-flotante { transform: rotateY(6deg) rotateX(3deg); }
.js.con-movimiento .funcion-visual:not(.visible) .tarjeta-flotante {
  opacity: 0;
  transform: translateY(18px) scale(0.9) rotateY(-6deg);
}
.js.con-movimiento .funcion-visual.visible .tarjeta-flotante { transform: rotateY(-6deg) rotateX(3deg); }
.js.con-movimiento .funcion-invertida .funcion-visual.visible .tarjeta-flotante { transform: rotateY(6deg) rotateX(3deg); }

.btn-primario {
  box-shadow: 0 12px 28px -12px var(--lima-brillo), 0 0 0 0 var(--lima-brillo);
}
.btn-primario:focus-visible { outline-offset: 4px; }
.btn-cookie[data-cookies="aceptadas"] {
  background: var(--lima);
  color: var(--carbon);
  border-color: var(--lima);
}
.btn-cookie[data-cookies="aceptadas"]:hover { background: #d4f86a; color: var(--carbon); }

/* v1 (30/10): «Sin nube» es la cuarta pieza de la fila de abajo, no una tarjeta flotante. */
@media (min-width: 600px) and (max-width: 959px) {
  .impacto-piezas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .impacto-piezas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .pieza { padding: 36px 6px 10px; }
  .pieza-obj { width: 64px; height: 64px; top: -30px; }
}