/* Hoja de estilos del sitio público (portada `/` y `/funciones`). v243: salió del <style>
   de `index.html` para que las dos páginas compartan UNA copia — dos copias de la misma
   identidad divergen a la primera corrección. */
:root{
  /* v155 · LA IDENTIDAD DE UNA+ (`docs/IDENTIDAD-UNA-MAS.html`, §04 — opción B).
     Los neutros son los mismos de siempre: #13151A era ya el `theme-color` declarado por la
     app y el documento lo conserva a propósito. Lo que cambia es el acento.

     Y con él cambia la regla semántica que este fichero tenía escrita: ya NO es «naranja =
     acción, lima = logro», es **cian = acción, menta = logro**. Los papeles son los mismos
     —una sola cosa accionable y un solo logro resaltado por pantalla—; lo que se movió es la
     tinta. Esa regla sigue sin romperse «por estética».

     OJO: esto YA NO es copia de la paleta por defecto de la app. La app conserva su naranja
     como acento de interfaz (y sus otras cuatro paletas); el cian es el color de la MARCA,
     que en la app vive en los tokens `--marca*` de `public/index.html`. Aquí, donde todo lo
     que se ve es marca, el acento y la marca coinciden. */
  --bg:#13151A; --bg-deep:#0F1116; --surface:#1B1E25; --surface2:#20242C; --surface3:#262B34;
  --border:#495164; --border2:#5F6A7E; --divider:#22262E;
  --ink:#EDF2F5; --ink2:#C9D3E0; --muted:#8B94A4; --faint:#5A6270;
  --accent:#21E0EE; --accent-hover:#7FEFF7; --accent-soft:#0D2A2E;
  --achieve:#3BEFB6; --achieve-soft:#0E2A22;
  --on-accent:#0B0E13;
  --r-s:12px; --r-m:16px; --r-l:22px; --r-pill:999px;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --maxw:1080px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{
  margin:0;background:var(--bg);color:var(--ink2);
  font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.65;overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important;transition:none !important;}
}
img,svg{max-width:100%;}
a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--achieve);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;}
.kicker{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:500;
  letter-spacing:2.4px;text-transform:uppercase;color:var(--muted);}
h1,h2,h3{font-family:Oswald,'Arial Narrow',sans-serif;color:var(--ink);letter-spacing:.5px;margin:0;}
h2{font-size:clamp(27px,4.4vw,38px);font-weight:700;line-height:1.1;}
h3{font-size:19px;font-weight:700;}
p{margin:0 0 14px;}
section{padding:76px 0;border-top:1px solid var(--divider);}
section.alt{background:var(--bg-deep);}
.sec-head{max-width:620px;margin-bottom:38px;}
.sec-head h2{margin:10px 0 12px;}
.sec-head p{color:var(--muted);font-size:16.5px;margin:0;}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:15px 26px;border-radius:var(--r-m);border:1px solid transparent;
  font-family:Inter,sans-serif;font-size:15px;font-weight:700;letter-spacing:.4px;cursor:pointer;
  transition:background 160ms ease,border-color 160ms ease,transform 120ms ease;}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--accent);color:var(--on-accent);}
.btn-primary:hover{background:var(--accent-hover);color:var(--on-accent);}
.btn-ghost{background:transparent;border-color:var(--border2);color:var(--ink);}
.btn-ghost:hover{background:var(--surface2);border-color:var(--accent);color:var(--ink);}

/* ---------- nav ---------- */
header.nav{position:sticky;top:0;z-index:50;background:rgba(19,21,26,.88);
  -webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--divider);
  padding-top:var(--sat);}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:11px 20px;display:flex;align-items:center;gap:22px;}
.mark{font-family:Oswald,sans-serif;font-weight:700;font-size:23px;letter-spacing:1.4px;color:var(--ink);}
/* EL LOGOTIPO UNA+ (§01·A del documento): el `+` en superíndice, apoyado en la caja alta y
   al 40% de ella. Nunca centrado sobre el texto ni encerrado en un círculo.

   Va como SVG y no como el carácter '+' de Oswald a propósito: el glifo tipográfico tiene
   otro grosor y otro largo de brazo que el signo que lleva el ícono dentro del aro, y dos
   `+` distintos en la misma pantalla es exactamente lo que la identidad llama «el acento de
   la marca, no un adorno». Es el mismo trato que `plusMark()` le da en la app.

   Todo en `em` para que la misma regla sirva a 20px en el pie y a 58px en el hero — incluido
   el `line-height`, que se fija aquí para las TRES apariciones: sin él, el de la nav y el
   del pie heredarían el 1.65 del cuerpo, la caja de línea quedaría mucho más alta que las
   letras y `flex-start` dejaría el `+` flotando muy por encima de ellas.

   El margen negativo está MEDIDO a 4× sobre la pantalla, no elegido: el documento dibuja
   este lockup en Anton, cuya mayúscula ocupa casi toda la caja, y Oswald deja aire arriba.
   Con el margen positivo del documento el `+` caía por debajo de la caja alta. */
.mark,.wordmark{display:inline-flex;align-items:flex-start;gap:.05em;line-height:.9;}
.mark .plus,.wordmark .plus{width:.41em;height:.41em;fill:var(--accent);flex:0 0 auto;margin-top:-.045em;}
.nav-links{display:flex;gap:22px;margin-left:auto;align-items:center;}
.nav-links a{color:var(--muted);font-size:14px;font-weight:600;}
.nav-links a:hover{color:var(--ink);}
.nav-links .btn{min-height:42px;padding:10px 18px;font-size:14px;}
/* `.nav-links a` (0,1,1) le ganaba a `.btn-primary` (0,1,0) y pintaba el ÚNICO CTA de la
   barra en `--muted`: 1.9:1 sobre el cian, ilegible. Venía roto desde antes —sobre el
   naranja daba 2.4:1, que tampoco pasa— y sólo se ve al medirlo, porque a ojo un botón
   relleno parece que está bien. Se arregla con especificidad, no bajando `--muted`. */
.nav-links a.btn-primary{color:var(--on-accent);}
.nav-links a.btn-ghost{color:var(--ink);}
@media (max-width:860px){ .nav-links a:not(.btn){display:none;} }

/* ---------- hero ---------- */
.hero{padding:64px 0 72px;position:relative;overflow:hidden;border-top:none;}
/* Un solo brillo del acento, muy abierto y muy bajo de opacidad. Es el único degradado del
   sitio: el brief prohíbe los chillones, no la profundidad. */
.hero::before{content:'';position:absolute;left:50%;top:-320px;width:920px;height:620px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(33,224,238,.16),transparent 72%);}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center;position:relative;}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:40px;} }
.hero h1{font-size:clamp(38px,6.6vw,60px);font-weight:700;line-height:1.03;margin:16px 0 18px;}
.hero h1 em{font-style:normal;color:var(--accent);}
.hero .lede{font-size:17.5px;color:var(--ink2);max-width:36em;margin-bottom:26px;}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;}
.hero-note{margin-top:16px;font-size:13.5px;color:var(--muted);}
.wordmark{font-family:Oswald,sans-serif;font-weight:700;font-size:clamp(40px,7vw,58px);
  line-height:.9;letter-spacing:2px;color:var(--ink);}

/* ---------- mockup ---------- */
.phone{width:100%;max-width:320px;margin:0 auto;display:block;
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.55));}

/* ---------- tira de confianza ---------- */
.trust{border-top:1px solid var(--divider);border-bottom:1px solid var(--divider);
  background:var(--bg-deep);padding:16px 0;}
.trust ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px 26px;margin:0;padding:0;}
.trust li{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px;}
.trust li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--achieve);flex:0 0 auto;}

/* ---------- pasos ---------- */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:paso;}
@media (max-width:820px){ .pasos{grid-template-columns:1fr;} }
.paso{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);padding:26px 24px;position:relative;}
.paso::before{counter-increment:paso;content:'0' counter(paso);
  font-family:Oswald,sans-serif;font-size:34px;font-weight:700;color:var(--accent);
  display:block;line-height:1;margin-bottom:14px;}
.paso h3{margin-bottom:8px;}
.paso p{color:var(--muted);font-size:14.5px;margin:0;}

/* ---------- funciones ---------- */
.fx{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media (max-width:900px){ .fx{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .fx{grid-template-columns:1fr;} }
.f{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);
  padding:20px;display:flex;flex-direction:column;gap:7px;}
/* v203 · Un icono por tarjeta. Veintinueve párrafos iguales son un muro de texto que se
   abandona a la tercera fila; el icono da a cada tarjeta una silueta propia y deja escanear
   la rejilla sin leerla entera. Es `aria-hidden`: no añade ninguna información que el título
   no diga ya, y anunciarlo sólo alargaría el recorrido de un lector de pantalla. */
.f-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--accent-soft);border:1px solid rgba(33,224,238,.28);margin-bottom:2px;}
.f-ico svg{width:19px;height:19px;stroke:var(--accent);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;}
/* Las de Premium se tiñen con el acento; las gratis, con el verde de logro. Es la MISMA
   distinción que ya hace la etiqueta de la esquina, reforzada — no una categoría nueva. */
.f.es-free .f-ico{background:var(--achieve-soft);border-color:rgba(59,239,182,.24);}
.f.es-free .f-ico svg{stroke:var(--achieve);}
.f-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.f h3{font-size:16.5px;}
.f p{color:var(--muted);font-size:14px;margin:0;line-height:1.55;}
.tag{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:1.1px;
  text-transform:uppercase;padding:3px 7px;border-radius:5px;flex:0 0 auto;}
.tag-prem{background:var(--accent-soft);color:var(--accent);border:1px solid rgba(33,224,238,.42);}
.tag-free{background:var(--achieve-soft);color:var(--achieve);border:1px solid rgba(59,239,182,.32);}

/* ---------- objetivos ---------- */
.metas{display:flex;flex-wrap:wrap;gap:10px;}
.meta{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-pill);
  padding:11px 18px;display:flex;align-items:baseline;gap:9px;}
.meta b{color:var(--ink);font-size:14.5px;font-weight:700;}
.meta span{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);}

/* ---------- precios ---------- */
.precios{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:start;}
@media (max-width:880px){ .precios{grid-template-columns:1fr;} }
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px;}
.dif{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);padding:22px;}
.dif h3{margin:0 0 8px;font-size:18px;}
.dif p{color:var(--muted);margin:0;}
.voz{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);padding:22px;}
.voz p{margin:0 0 10px;font-size:16px;} .voz footer{color:var(--muted);font-size:13px;}
.voz img{width:56px;height:56px;border-radius:50%;object-fit:cover;margin-bottom:12px;display:block;}
@media (max-width:860px){ .grid3{grid-template-columns:1fr;} }
/* Las clases dicen el PAPEL, no el periodo: `hero` es la tarjeta grande y `alt` la tira de
   abajo. Antes se llamaban `plan-anual` y `plan-mensual`, así que invertir cuál se recomienda
   obligaba a cambiar CSS además de contenido — y eso es lo que hace que una prueba de precio
   no se llegue a hacer nunca. Ahora se invierte moviendo el contenido y nada más.

   v113 puso el ANUAL de protagonista, con un motivo real: con dos tarjetas iguales al 50% la
   gente tomaba la barata por defecto. v204 lo invierte por decisión del dueño: aquella
   decisión nunca se validó con ventas, y el anual es el primer desembolso más caro posible
   para alguien que aún no conoce la app. El mensual baja el precio de decir «va, pruebo».
   Si algún día hay ventas que comparar, esta es la palanca que se mueve.
   (Este fichero es PÚBLICO: se sirve tal cual y lo leen buscadores y bots de IA. Nada de
   cifras internas del negocio en sus comentarios.) */
.plan-hero{background:var(--surface);border:1.5px solid var(--accent);border-radius:var(--r-l);
  padding:30px 28px;position:relative;box-shadow:0 10px 44px -22px var(--accent);}
.badge{position:absolute;top:-11px;left:28px;background:var(--accent);color:var(--on-accent);
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:1.3px;
  padding:4px 11px;border-radius:var(--r-pill);}
.precio{font-family:Oswald,sans-serif;font-size:52px;font-weight:700;color:var(--ink);line-height:1;}
.precio small{font-size:19px;color:var(--muted);font-weight:500;margin-left:6px;}
.desglose{font-size:14.5px;color:var(--achieve);font-weight:600;margin:10px 0 22px;}
.plan-alt{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-m);
  padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-top:16px;}
.plan-alt b{font-family:Oswald,sans-serif;font-size:24px;color:var(--ink);font-weight:700;}
.nota-pago{background:var(--achieve-soft);border:1px solid rgba(59,239,182,.3);
  border-radius:var(--r-m);padding:16px 18px;margin-top:20px;font-size:14.5px;color:var(--ink2);}
.nota-pago b{color:var(--achieve);}
.incluye{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);padding:26px 24px;}
.incluye h3{font-size:15px;margin-bottom:12px;}
.incluye ul{list-style:none;margin:0 0 22px;padding:0;}
.incluye li{display:flex;gap:10px;font-size:14.5px;color:var(--ink2);margin-bottom:9px;line-height:1.5;}
.incluye li::before{content:'';flex:0 0 auto;width:16px;height:16px;margin-top:4px;border-radius:50%;
  background:var(--achieve-soft);border:1px solid var(--achieve);}
.incluye .prem li::before{background:var(--accent-soft);border-color:var(--accent);}

/* ---------- coaches ---------- */
.coach{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--achieve);
  border-radius:0 var(--r-l) var(--r-l) 0;padding:28px 30px;
  display:flex;gap:26px;align-items:center;flex-wrap:wrap;}
.coach div{flex:1 1 340px;}
.coach h3{margin-bottom:8px;}
.coach p{color:var(--muted);font-size:15px;margin:0;}
.coach b{color:var(--achieve);}

/* ---------- instalar ---------- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.tab{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-s);
  padding:11px 18px;min-height:44px;color:var(--muted);font-size:13.5px;font-weight:700;
  cursor:pointer;font-family:Inter,sans-serif;}
.tab[aria-selected="true"]{background:var(--surface3);border-color:var(--accent);color:var(--ink);}
.pasos-inst{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);
  padding:22px 24px;}
.pasos-inst ol{margin:0;padding-left:22px;}
.pasos-inst li{margin-bottom:9px;font-size:15px;color:var(--ink2);}
.pasos-inst li:last-child{margin-bottom:0;}
.aviso{background:var(--surface);border:1px solid var(--marca,var(--accent));border-radius:var(--r-l);padding:16px;margin-bottom:14px;}
.aviso p{margin:0 0 8px;} .aviso .copiar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0;}
.aviso code{font-family:'JetBrains Mono',monospace;font-size:14px;}
#inst-guia-ios{display:block;margin:14px auto 0;max-width:100%;height:auto;border-radius:16px;}
/* v243 · `display:block` le ganaba al atributo `hidden` (que es sólo `display:none` de la hoja
   del navegador): la guía de iPhone ocupaba 200 px EN BLANCO en Android y en computadora. */
#inst-guia-ios[hidden]{display:none;}
#inst-qr{text-align:center;margin-top:14px;color:var(--muted);} #inst-qr img{margin-top:8px;border-radius:10px;background:#fff;}

/* ---------- faq ---------- */
.faq{max-width:800px;}
details{border-bottom:1px solid var(--divider);padding:4px 0;}
summary{cursor:pointer;list-style:none;padding:17px 34px 17px 0;position:relative;
  font-family:Inter,sans-serif;font-weight:700;font-size:16px;color:var(--ink);}
summary::-webkit-details-marker{display:none;}
/* El `+`/`−` de la FAQ va en `--muted`, NO en el acento. Con el acento naranja daba igual;
   con el cian son siete `+` cianes decorativos en la misma página que el logotipo, y la
   identidad es explícita: «el + siempre en cian [...] es el acento de la marca, no un
   adorno». Un `+` de marca y siete de adorno del mismo color no dejan marca ninguna.
   El afordance no se pierde: sigue siendo `+`/`−` y sigue estando donde estaba. */
summary::after{content:'+';position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:24px;font-weight:400;color:var(--muted);line-height:1;}
summary:hover::after{color:var(--ink);}
details[open] summary::after{content:'−';}
details p{color:var(--muted);font-size:15px;padding:0 0 16px;margin:0;max-width:62em;}

/* ---------- cierre + pie ---------- */
.cierre{text-align:center;}
.cierre h2{margin-bottom:14px;}
.cierre p{color:var(--muted);max-width:44em;margin:0 auto 26px;}
footer{background:var(--bg-deep);border-top:1px solid var(--border);
  padding:44px 0 calc(40px + var(--sab));font-size:14px;color:var(--muted);}
.pie-grid{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-bottom:26px;}
.pie-legal{display:flex;gap:8px 20px;flex-wrap:wrap;}
.pie-legal a{color:var(--ink2);font-weight:600;}
.pie-legal a:hover{color:var(--accent);}
.pie-fino{border-top:1px solid var(--divider);padding-top:20px;font-size:13px;color:var(--faint);}
/* v200 · capturas reales, galería y contacto */
.shot{width:100%;max-width:290px;height:auto;margin:0 auto;display:block;border-radius:34px;
  border:2px solid var(--border);background:var(--bg-deep);box-shadow:0 30px 70px rgba(0,0,0,.45);}
/* v203 · REJILLA, no tira que se desliza.
   El scroll horizontal escondía cuatro de las siete capturas: en escritorio no hay gesto de
   deslizar, la barra no se ve, y lo que no se ve no se mira. Una rejilla las enseña todas de
   golpe, y el lightbox es el que da el detalle — que es lo que la tira nunca daba, porque la
   miniatura de 250 px no deja leer una sola cifra de la pantalla. */
.galeria{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px 18px;padding:6px 0 4px;margin:0;}
.galeria figure{margin:0;}
.galeria .gal-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  border-radius:22px;position:relative;line-height:0;}
.galeria .gal-btn:focus-visible{outline:3px solid var(--marca,var(--accent));outline-offset:4px;}
.galeria img{width:100%;height:auto;border-radius:22px;border:1px solid var(--border);display:block;
  background:var(--surface);transition:transform .18s ease,border-color .18s ease;}
.galeria .gal-btn:hover img{transform:translateY(-4px);border-color:var(--marca,var(--accent));}
/* La lupa dice «esto se puede abrir» sin una línea de texto que haya que traducir. */
.galeria .gal-btn::after{content:"";position:absolute;right:10px;bottom:10px;width:30px;height:30px;
  border-radius:50%;background:rgba(10,12,16,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center/17px no-repeat;
  opacity:0;transition:opacity .18s ease;}
.galeria .gal-btn:hover::after,.galeria .gal-btn:focus-visible::after{opacity:1;}
.galeria figcaption{margin-top:12px;font-size:14px;color:var(--muted);line-height:1.45;}
.galeria figcaption b{display:block;color:var(--ink);font-size:15px;margin-bottom:2px;}

/* ── El lightbox. Nace oculto con `hidden`, así que sin JS la galería sigue siendo siete
      imágenes con su pie: no hay ninguna pantalla que dependa del script para existir. ── */
.lb{position:fixed;inset:0;z-index:90;background:rgba(6,8,11,.94);display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:16px;gap:12px;}
.lb[hidden]{display:none;}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-height:100%;}
.lb-img{max-height:74vh;max-width:min(92vw,380px);width:auto;height:auto;border-radius:26px;
  border:1px solid var(--border);background:var(--surface);display:block;}
.lb-cap{color:var(--ink);font-size:15px;text-align:center;max-width:36em;line-height:1.5;}
.lb-cap b{display:block;font-size:17px;margin-bottom:3px;}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
  border:1px solid var(--border);background:rgba(20,24,30,.9);color:var(--ink);font-size:26px;line-height:1;
  cursor:pointer;display:grid;place-items:center;}
.lb-nav:hover{border-color:var(--marca,var(--accent));}
.lb-nav:focus-visible{outline:3px solid var(--marca,var(--accent));outline-offset:3px;}
.lb-prev{left:12px;} .lb-next{right:12px;}
.lb-x{position:absolute;top:14px;right:14px;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--border);background:rgba(20,24,30,.9);color:var(--ink);font-size:24px;cursor:pointer;}
.lb-x:focus-visible{outline:3px solid var(--marca,var(--accent));outline-offset:3px;}
.lb-n{position:absolute;top:22px;left:50%;transform:translateX(-50%);font-family:'JetBrains Mono',monospace;
  font-size:12px;color:var(--muted);letter-spacing:1px;}
@media (max-width:640px){
  .lb-nav{width:44px;height:44px;} .lb-prev{left:4px;} .lb-next{right:4px;}
  .lb-img{max-height:64vh;}
}
/* Quien pide menos movimiento no recibe el empujón de la miniatura ni transiciones. */
@media (prefers-reduced-motion:reduce){
  .galeria img,.galeria .gal-btn::after{transition:none;}
  .galeria .gal-btn:hover img{transform:none;}
}
.visual-compartir{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;margin-top:26px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);padding:26px;}
@media (max-width:860px){ .visual-compartir{grid-template-columns:1fr;padding:20px;} }
.mini-shots{display:flex;gap:16px;justify-content:center;}
.mini-shots figure{margin:0;flex:0 0 auto;}
.mini-shots img{width:min(200px,42vw);height:auto;border-radius:18px;border:1px solid var(--border);display:block;background:var(--bg-deep);}
.mini-shots figcaption{margin-top:8px;font-size:12.5px;color:var(--muted);text-align:center;max-width:200px;}
/* v271 · La galería de asistentes (portada #equipo y /funciones #asistentes), generada por
   scripts/gen-sitio-asistentes.mjs. Antes eran círculos de 68 px en /funciones y tres tarjetas
   en la portada: los personajes —lo que más distingue a la app— se veían como avatares.
   Móvil: carrusel con scroll-snap, sin JS, con un trozo de la siguiente asomando para que se
   note que hay más. Escritorio: rejilla; los 13 caben en 3 filas a 1366 px. */
.asis-scroll{margin:0 -20px;padding:0 20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;}
.asis-scroll::-webkit-scrollbar{display:none;}
.asis-galeria{list-style:none;margin:0;padding:4px 0 8px;display:grid;grid-auto-flow:column;grid-auto-columns:min(74%,280px);gap:16px;}
.asis-c{scroll-snap-align:start;position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);overflow:hidden;}
.asis-c .rasgado{border-radius:0;}
.asis-c .chip{position:absolute;top:10px;left:10px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;padding:4px 9px;border-radius:var(--r-pill);background:rgba(15,17,22,.78);backdrop-filter:blur(4px);border:1px solid var(--border);color:var(--ink2);}
.asis-c .chip-free{color:var(--achieve);border-color:rgba(59,239,182,.5);}
.asis-c .chip-nuevo{color:#0F1116;background:var(--accent);border-color:var(--accent);font-weight:700;}
.asis-c b{display:block;font-family:Oswald,sans-serif;font-size:26px;text-transform:uppercase;letter-spacing:1px;color:var(--ink);line-height:1;padding:12px 16px 0;}
.asis-c small{display:block;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--achieve);margin:6px 16px 10px;}
.asis-c q{display:block;color:var(--ink2);font-size:14.5px;line-height:1.5;border-left:2px solid var(--accent);margin:0 16px 18px;padding-left:11px;quotes:'«' '»';}
.asis-c.es-nuevo{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 10px 34px -12px rgba(33,224,238,.45);}
.asis-pista{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin:10px 0 0;}
@media (min-width:900px){
  .asis-scroll{margin:0;padding:0;overflow:visible;}
  .asis-galeria{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));}
  .asis-pista{display:none;}
}
.asis-bloque{margin-top:46px;scroll-margin-top:90px;}
.asis-h{font-size:clamp(26px,3.6vw,38px);margin:0 0 10px;}
.mini-shots-txt{max-width:520px;}
.grupo{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;font-weight:500;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--accent);margin:34px 0 14px;}
.grupo:first-of-type{margin-top:0;}
.contacto-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start;}
@media (max-width:820px){ .contacto-grid{grid-template-columns:1fr;} }
.wa-caja{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);padding:26px;}
.wa-caja .num{font-family:Oswald,sans-serif;font-size:32px;font-weight:700;color:var(--ink);letter-spacing:.5px;margin:6px 0 14px;display:block;}
.form-c{display:grid;gap:14px;}
.form-c label{display:grid;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink2);}
.form-c input,.form-c textarea{width:100%;background:var(--surface);color:var(--ink);border:1px solid var(--border);
  border-radius:var(--r-s);padding:13px 14px;font:inherit;font-size:16px;min-height:48px;}
.form-c textarea{min-height:140px;resize:vertical;}
.form-c input:focus,.form-c textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);}
.form-c .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.form-c .estado{min-height:1.5em;font-size:14px;margin:0;}
.form-c .estado.ok{color:var(--achieve);} .form-c .estado.err{color:#FF8A7A;}
.form-c button[disabled]{opacity:.6;cursor:wait;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:16px;top:16px;z-index:100;background:var(--accent);color:var(--on-accent);
  padding:12px 18px;border-radius:var(--r-s);font-weight:700;}

/* ---------- v243 · la portada corta ----------
   Los tres pilares sustituyen a «Cómo funciona», «¿Otra app?» y «Dentro de la sesión», que
   vendían lo mismo tres veces. Son tres tarjetas de texto: las pantallas las enseña el
   carrusel del hero, y repetirlas aquí sólo alargaba la página. */
.pilares{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.pilar{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);padding:26px 24px;}
@media (max-width:900px){ .pilares{grid-template-columns:1fr;} }
.pilar .num{font-family:Oswald,sans-serif;font-size:34px;font-weight:700;color:var(--accent);line-height:1;display:block;margin-bottom:10px;}
.pilar h3{font-size:22px;line-height:1.15;margin-bottom:10px;}
.pilar p{color:var(--muted);font-size:15px;}
.pilar ul{list-style:none;margin:14px 0 0;padding:0;}
/* Bloque con el punto en absoluto, NO flex: con flex, el ejemplo de discos (un <span> dentro
   de la viñeta) se volvía una columna aparte y la frase se partía en dos. */
.pilar li{position:relative;padding-left:17px;color:var(--muted);font-size:15px;margin-bottom:8px;line-height:1.5;}
.pilar li::before{content:'';position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--achieve);}
.pilar .ejemplo{display:inline-block;margin-top:6px;font-family:'JetBrains Mono',monospace;font-size:13px;
  color:var(--achieve);background:var(--achieve-soft);border:1px solid rgba(59,239,182,.28);border-radius:8px;padding:6px 10px;}

/* ---------- gratis vs premium ----------
   Una tabla y no dos listas: lo que alguien quiere saber antes de pagar es la DIFERENCIA, y
   dos listas le obligan a hacer la resta a mano. */
.tabla-planes{width:100%;border-collapse:collapse;font-size:15px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-l);overflow:hidden;}
.tabla-planes th,.tabla-planes td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--divider);vertical-align:top;}
.tabla-planes tr:last-child td{border-bottom:none;}
.tabla-planes thead th{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--muted);background:var(--surface2);}
.tabla-planes thead th.gratis{color:var(--achieve);} .tabla-planes thead th.prem{color:var(--accent);}
.tabla-planes td{color:var(--ink2);}
.tabla-planes td:first-child{color:var(--ink);font-weight:600;width:46%;}
.tabla-planes .si{color:var(--achieve);font-weight:700;}
.tabla-planes .no{color:var(--faint);}
@media (max-width:600px){ .tabla-planes{font-size:13.5px;} .tabla-planes th,.tabla-planes td{padding:11px 10px;} }
.precios-v2{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:start;margin-top:30px;}
@media (max-width:880px){ .precios-v2{grid-template-columns:1fr;} }

/* ---------- instalar: el botón nativo y el aviso de navegador embebido ---------- */
#inst-nativo-caja{margin:0 0 18px;}
#inst-nativo-caja p{color:var(--muted);font-size:14px;margin:10px 0 0;}
.mas-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;margin-top:18px;}




/* ═══════════ Dirección visual 2026-09-25 · referencia «Ironhaus» del dueño ═══════════
   Lo que se toma de la referencia: tipografía condensada en mayúsculas a tamaño de cartel,
   personas de verdad (los asistentes) en fotos oscuras de gimnasio, bordes de papel rasgado,
   un trazo de tiza, cifras grandes en contorno y una cinta en movimiento. Lo que NO se toma:
   su naranja (aquí el acento es el cian de la marca) ni sus cifras de clientes y estrellas,
   que en UNA+ serían inventadas.
   Las fotos son las de los asistentes: 512×512. Por eso nunca se estiran a todo el ancho de
   una pantalla grande sin degradado encima — a ese tamaño se verían borrosas. */

/* --- títulos de cartel --- */
.sec-head h2,.cierre h2,.pilar h3,.dif h3{text-transform:uppercase;letter-spacing:.6px;}
.hero h1{margin-top:14px;}
.h1-logro{display:block;text-transform:uppercase;font-size:clamp(46px,7.4vw,84px);line-height:.94;letter-spacing:.6px;}
/* La categoría va en el mismo <h1> (SEO) pero con voz de subtítulo: dos bloques enormes en
   mayúsculas seguidos no se leen, se escanean y se olvidan. */
.h1-que{display:block;margin-top:24px;font-family:Inter,system-ui,sans-serif;font-size:clamp(18px,2vw,21px);
  font-weight:600;line-height:1.45;letter-spacing:0;text-transform:none;color:var(--ink2);max-width:30em;}
/* El trazo de tiza bajo «cada repetición»: un SVG a mano alzada como fondo del <em>.
   `box-decoration-break:clone` lo repite bajo cada línea cuando el texto se parte. */
.hero h1 em{white-space:nowrap;padding-bottom:.1em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13c40-6 88-9 140-8 52 1 100 4 154-3M8 17c60-5 130-6 200-4 30 1 58 2 86-1' fill='none' stroke='%2321E0EE' stroke-width='3.2' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E") left bottom / 100% .24em no-repeat;}

/* --- la cinta --- */
.cinta{background:var(--accent);color:var(--on-accent);overflow:hidden;transform:rotate(-1.4deg);
  margin:-10px -20px 10px;position:relative;z-index:2;box-shadow:0 12px 30px -14px rgba(33,224,238,.6);}
.cinta-pista{display:flex;width:max-content;animation:cinta 32s linear infinite;}
.cinta ul{display:flex;list-style:none;margin:0;padding:0;}
.cinta li{font-family:Oswald,sans-serif;font-weight:700;font-size:21px;text-transform:uppercase;letter-spacing:1.2px;
  white-space:nowrap;padding:13px 0 13px 26px;display:flex;align-items:center;gap:26px;}
.cinta li::after{content:'';width:9px;height:9px;background:var(--on-accent);transform:rotate(45deg);flex:0 0 auto;}
@keyframes cinta{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){
  .cinta-pista{animation:none;width:auto;justify-content:center;}
  .cinta ul{flex-wrap:wrap;justify-content:center;}
  .cinta ul[aria-hidden]{display:none;}
}

/* --- cifras en contorno --- */
.cifras{padding:60px 0;}
.cifras ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.cifras li{display:flex;flex-direction:column;gap:6px;border-left:1px solid var(--border);padding-left:18px;}
.cifras b{font-family:Oswald,sans-serif;font-weight:700;font-size:clamp(58px,8vw,92px);line-height:.9;
  color:transparent;-webkit-text-stroke:2px var(--accent);}
.cifras span{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);line-height:1.5;}
@media (max-width:760px){ .cifras ul{grid-template-columns:1fr 1fr;gap:30px 18px;} }

/* --- el equipo: fotos con borde de papel rasgado --- */
.equipo{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media (max-width:820px){ .equipo{grid-template-columns:1fr;max-width:420px;} }
.miembro{margin:0;}
.rasgado{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;filter:contrast(1.05) saturate(.9);
  clip-path:polygon(0 0,100% 0,100% 92%,96% 95%,91% 91%,86% 96%,80% 92%,74% 97%,68% 93%,61% 97%,55% 92%,48% 96%,42% 93%,35% 98%,29% 93%,22% 97%,16% 92%,10% 96%,5% 93%,0 96%);}
.miembro figcaption{padding:4px 2px 0;}
.miembro b{display:block;font-family:Oswald,sans-serif;font-size:30px;text-transform:uppercase;letter-spacing:1px;color:var(--ink);line-height:1;}
.miembro small{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--achieve);margin:6px 0 10px;}
.miembro q{display:block;color:var(--ink2);font-size:15.5px;border-left:2px solid var(--accent);padding-left:12px;quotes:'«' '»';}

/* --- cierre con foto --- */
.cierre-foto{position:relative;overflow:hidden;isolation:isolate;padding:120px 0;}
.cierre-atleta{position:absolute;left:50%;top:0;transform:translateX(-50%);height:100%;width:min(100%,760px);object-fit:cover;
  object-position:center 25%;z-index:-1;opacity:.32;
  -webkit-mask-image:radial-gradient(closest-side,#000 45%,transparent 100%);mask-image:radial-gradient(closest-side,#000 45%,transparent 100%);}
.cierre-foto h2{font-size:clamp(34px,5.4vw,58px);}

/* La cinta va inclinada y un poco más ancha que la pantalla: el marco recorta lo que sobra,
   que si no se convertía en scroll horizontal en escritorio. */
.cinta-marco{overflow:hidden;padding:18px 0 8px;margin-top:-18px;position:relative;z-index:2;}
.cinta{margin:0 -20px;}

/* --- ¿qué quieres lograr? --- */
.logros{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
@media (max-width:1000px){ .logros{grid-template-columns:repeat(3,1fr);} }
@media (max-width:640px){ .logros{grid-template-columns:1fr 1fr;gap:14px;} }
.logro h3{text-transform:uppercase;font-size:22px;letter-spacing:.6px;margin:8px 0 6px;line-height:1.05;}
.logro p{color:var(--muted);font-size:14px;line-height:1.5;margin:0;}
@media (max-width:640px){ .logro h3{font-size:19px;} .logro p{font-size:13.5px;} }

.coach-franja{padding:48px 0;}

/* ═══════════ v243 · EL HERO ES EL CARRUSEL, a pantalla completa ═══════════
   Cada diapositiva ocupa el alto de la pantalla menos la barra (`--nav-h`) y se mueve ENTERA:
   foto de fondo, titular, texto, botones y la pantalla de la app. `svh` y no `vh`: en el
   móvil `vh` cuenta la barra del navegador escondida y los controles caían bajo el borde. */
:root{--nav-h:66px;}
.hero-car{padding:0;border-top:none;position:relative;}
.hero-car::before{display:none;}
.car-pista{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;overscroll-behavior-x:contain;}
.car-pista::-webkit-scrollbar{display:none;}
.car-pista:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;}
.car-slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative;overflow:hidden;isolation:isolate;
  height:calc(100vh - var(--nav-h));height:calc(100svh - var(--nav-h));min-height:460px;max-height:980px;}
/* La foto: a la derecha, a media opacidad, fundida hacia el texto y hacia abajo. */
.car-fondo{position:absolute;right:0;top:0;height:100%;width:min(62%,860px);object-fit:cover;z-index:-2;opacity:.55;
  filter:saturate(.85) contrast(1.05);
  -webkit-mask-image:linear-gradient(to left,#000 30%,transparent 100%);mask-image:linear-gradient(to left,#000 30%,transparent 100%);}
.car-slide::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% -10%,rgba(33,224,238,.14),transparent 70%),
             linear-gradient(to top,var(--bg) 0,transparent 26%);}
.car-grid{height:100%;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-bottom:78px;}
.car-texto{max-width:600px;}
.car-texto .kicker{margin:0 0 14px;}
.h1-logro,.car-titulo{display:block;font-family:Oswald,'Arial Narrow',sans-serif;font-weight:700;color:var(--ink);
  text-transform:uppercase;font-size:clamp(44px,6.6vw,86px);line-height:.94;letter-spacing:.6px;margin:0;}
.car-titulo em,.h1-logro em{font-style:normal;color:var(--accent);white-space:nowrap;padding-bottom:.1em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13c40-6 88-9 140-8 52 1 100 4 154-3M8 17c60-5 130-6 200-4 30 1 58 2 86-1' fill='none' stroke='%2321E0EE' stroke-width='3.2' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E") left bottom / 100% .24em no-repeat;}
.car-texto h1{margin:0;}
.car-lede{font-size:clamp(16px,1.6vw,18.5px);color:var(--ink2);margin:20px 0 26px;max-width:34em;}
.car-pantalla{display:flex;justify-content:center;align-items:center;height:100%;min-height:0;}
.car-pantalla .shot{height:auto;max-height:calc(100% - 40px);width:auto;max-width:100%;aspect-ratio:780/1688;object-fit:contain;
  box-shadow:0 30px 70px rgba(0,0,0,.55);}

/* Controles anclados abajo, siempre dentro de la pantalla. */
.car-ctrl{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 0 22px;pointer-events:none;}
.car-ctrl[hidden]{display:none;}
.car-ctrl-in{display:flex;align-items:center;gap:18px;pointer-events:auto;}
.car-n{font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:1.4px;color:var(--ink2);min-width:64px;}
/* Una barra por diapositiva; la activa se llena mientras corre el avance solo. */
.car-puntos{display:flex;gap:6px;flex:1;max-width:420px;}
.car-punto{flex:1;height:28px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;}
.car-punto::before{content:'';display:block;width:100%;height:3px;border-radius:3px;background:rgba(255,255,255,.22);
  background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;background-size:0% 100%;}
.car-punto.visto::before{background-size:100% 100%;}
.car-punto[aria-current="true"]::before{background-size:100% 100%;}
.car-punto.corre::before{animation:carBarra var(--car-ms,6500ms) linear forwards;}
@keyframes carBarra{from{background-size:0% 100%;}to{background-size:100% 100%;}}
.car-punto:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}
.car-flechas{display:flex;gap:8px;margin-left:auto;}
.car-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--border2);background:rgba(19,21,26,.7);
  cursor:pointer;display:grid;place-items:center;padding:0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.car-btn:hover{border-color:var(--accent);}
.car-btn svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.car-btn .i-play{display:none;fill:var(--ink);stroke:none;}
#car-pausa.parado .i-pausa{display:none;} #car-pausa.parado .i-play{display:block;}

/* Móvil (2026-09-25, pedido del dueño: «no se ve la pantalla completa»). Antes la pantalla
   de la app ASOMABA recortada desde abajo; ahora se ve ENTERA y se lleva el espacio que sobra.
   Para que quepa: los dos botones dejan cada diapositiva y van UNA vez en la barra de abajo,
   junto a los controles (`.car-cta`); fuera el antetítulo; titular y texto más compactos. Se
   midió en el alto real de Safari con sus barras (390×664), no sólo en 390×844. */
.car-cta{display:none;}
@media (max-width:900px){
  :root{--nav-h:64px;}
  .car-slide{min-height:440px;}
  .car-fondo{width:100%;opacity:.3;-webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent 95%);mask-image:linear-gradient(to bottom,#000 40%,transparent 95%);}
  .car-grid{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding-top:18px;padding-bottom:124px;}
  .car-texto .kicker{display:none;}
  /* Sólo cuando el carrusel arrancó (`inicio.js` pone `.car-listo`): sin JS no hay barra de
     abajo, y los botones de cada diapositiva son los únicos que hay. */
  .car-listo .car-texto .hero-cta{display:none;}
  .hero-car:not(.car-listo) .car-grid{padding-bottom:24px;}
  .h1-logro,.car-titulo{font-size:clamp(32px,9.4vw,46px);line-height:.95;}
  .h1-que{font-size:14.5px;line-height:1.4;margin-top:10px;}
  .car-lede{font-size:14.5px;line-height:1.45;margin:8px 0 0;}
  .car-pantalla{flex:1 1 0;min-height:0;height:auto;margin-top:14px;align-items:stretch;justify-content:center;}
  .car-pantalla .shot{height:100%;width:auto;max-height:100%;max-width:100%;aspect-ratio:780/1688;
    object-fit:contain;border-radius:22px;box-shadow:0 18px 40px rgba(0,0,0,.5);}
  /* La barra de abajo: progreso + pausa arriba, los dos botones debajo, en una fila. */
  .car-ctrl{padding-bottom:12px;background:linear-gradient(to top,var(--bg) 55%,rgba(19,21,26,0));padding-top:18px;}
  .car-ctrl-in{flex-wrap:wrap;gap:8px 12px;}
  .car-n{display:none;}
  .car-flechas{margin-left:0;}
  .car-flechas .car-btn:not(#car-pausa){display:none;}
  .car-flechas .car-btn{width:36px;height:36px;}
  .car-puntos{max-width:none;}
  .car-cta{display:flex;gap:10px;flex:1 0 100%;}
  .car-cta .btn{flex:1 1 0;min-height:46px;padding:10px 12px;font-size:14px;}
}
@media (prefers-reduced-motion:reduce){ .car-pista{scroll-behavior:auto;} }

/* ---------- v243 · evidencia (bloque de la portada y página /evidencia) ---------- */
.ev-h1{font-size:clamp(40px,6vw,66px);text-transform:uppercase;line-height:.98;margin:10px 0 16px;}
.evs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width:900px){ .evs{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .evs{grid-template-columns:1fr;} }
.ev{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);padding:22px;display:flex;flex-direction:column;}
.ev h3{font-size:19px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;line-height:1.15;}
.ev p{color:var(--ink2);font-size:14.5px;line-height:1.55;margin:0 0 12px;}
/* La fuente va al pie de la tarjeta, en mono y en el verde de «logro»: se distingue de un
   vistazo del texto que explica, que es lo que se busca al escanear. */
.ev .ev-src{margin:auto 0 0;padding-top:12px;border-top:1px solid var(--divider);font-family:'JetBrains Mono',monospace;
  font-size:11.5px;letter-spacing:.4px;color:var(--achieve);line-height:1.5;}
.propias{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:860px;}
.propias li{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:0 var(--r-m) var(--r-m) 0;padding:14px 18px;color:var(--ink2);font-size:15px;line-height:1.55;}
.propias li b{color:var(--ink);}
.biblio{margin:0;padding-left:22px;max-width:900px;display:grid;gap:12px;}
.biblio li{color:var(--ink2);font-size:14px;line-height:1.6;padding-left:6px;}
.biblio li::marker{color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:12px;}
.biblio a{word-break:break-all;}
/* El bloque de la portada: pocas palabras, las fuentes como sellos y el enlace a la página. */
.evidencia-portada{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;}
@media (max-width:860px){ .evidencia-portada{grid-template-columns:1fr;gap:22px;} }
.sellos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.sellos li{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.4px;color:var(--ink2);
  border:1px solid var(--border2);border-radius:999px;padding:8px 13px;background:var(--surface);}
.evidencia-portada h2{text-transform:uppercase;letter-spacing:.6px;}

/* ---------- v243 · páginas de contenido (/rutinas, /glosario, /inbody) ---------- */
.migas ol{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:6px;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.6px;color:var(--muted);}
.migas li:not(:last-child)::after{content:'/';margin-left:6px;color:var(--faint);}
.migas a{color:var(--ink2);}
.para-quien{color:var(--ink2);margin:0 0 22px;}
.para-quien b{color:var(--achieve);}
.dias{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
@media (max-width:860px){ .dias{grid-template-columns:1fr;} }
.dia{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);padding:20px;}
.dia h3{text-transform:uppercase;letter-spacing:.6px;font-size:20px;margin-bottom:12px;}
.dia-descanso{background:transparent;border-style:dashed;padding:14px 20px;}
.dia-descanso h3{font-size:16px;margin:0 0 2px;color:var(--muted);} .dia-descanso p{margin:0;color:var(--faint);}
.tabla-rutina{width:100%;border-collapse:collapse;font-size:14.5px;}
.tabla-rutina th{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:0 8px 8px 0;border-bottom:1px solid var(--divider);font-weight:500;}
.tabla-rutina td{padding:10px 8px 10px 0;border-bottom:1px solid var(--divider);color:var(--ink2);vertical-align:top;}
.tabla-rutina td:first-child{color:var(--ink);font-weight:600;}
.tabla-rutina td:not(:first-child){white-space:nowrap;font-family:'JetBrains Mono',monospace;font-size:13px;}
.tabla-rutina tr:last-child td{border-bottom:none;}
.tabla-rutina .tipo{display:table;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1px;
  text-transform:uppercase;color:var(--accent);border:1px solid rgba(33,224,238,.4);border-radius:5px;padding:2px 6px;margin-bottom:5px;}
.dia .cardio{margin:12px 0 0;color:var(--achieve);font-size:14px;}
.vol-musculos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
@media (max-width:760px){ .vol-musculos{grid-template-columns:repeat(2,1fr);} }
.vol-musculos li{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);padding:14px 16px;display:flex;flex-direction:column;}
.vol-musculos b{font-family:Oswald,sans-serif;font-size:36px;line-height:1;color:var(--accent);}
.vol-musculos span{font-size:13px;color:var(--muted);margin-top:4px;}
.lista-enlaces{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.lista-enlaces a{font-weight:600;}
.ev .lista-enlaces{margin-top:auto;padding-top:10px;}
.glosario{margin:0 0 30px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
@media (max-width:760px){ .glosario{grid-template-columns:1fr;} }
.glosario > div{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);padding:14px 16px;scroll-margin-top:90px;}
.glosario dt{font-family:Oswald,sans-serif;font-weight:700;font-size:18px;color:var(--ink);text-transform:uppercase;letter-spacing:.5px;}
.glosario dd{margin:4px 0 0;color:var(--ink2);font-size:14.5px;line-height:1.55;}
.glosario > div:target{border-color:var(--accent);}
.sellos a{color:var(--ink2);}
.logro-link{display:inline-block;margin-top:8px;font-size:13.5px;font-weight:700;}

/* ═══════════ v251 · lo que vino de la propuesta del dueño en Claude Design (2026-09-27) ═══════════
   Se tomó el CONTENIDO y la estructura de su propuesta; la piel es la de siempre (Oswald en
   mayúsculas, cian = acción, menta = logro, superficies y bordes de estos mismos tokens). */

/* --- las tres dudas del primer día: el miedo, en grande y entre comillas --- */
.dudas{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media (max-width:900px){ .dudas{grid-template-columns:1fr;} }
.duda{background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--accent);
  border-radius:0 0 var(--r-l) var(--r-l);padding:24px 24px 22px;}
.duda-q{font-family:Oswald,sans-serif;font-weight:700;font-size:clamp(24px,2.6vw,30px);line-height:1.05;
  text-transform:uppercase;letter-spacing:.5px;color:var(--accent);margin:0 0 14px;}
.duda h3{font-size:19px;margin-bottom:8px;}
.duda p:last-child{color:var(--muted);font-size:15px;margin:0;}

/* --- comparativa: la tabla de precios con una columna más. En un teléfono de 360 px
   cuatro columnas no caben sin partir cada palabra, así que se desliza DENTRO de su caja
   y nunca ensancha la página. --- */
/* El borde y las esquinas pasan de la tabla a su caja: `overflow:hidden` en la tabla (que es
   como `.tabla-planes` redondea) anula el `position:sticky` de su primera columna. */
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:var(--r-l);}
.tabla-comp{min-width:620px;overflow:visible;border:0;border-radius:0;}
.tabla-comp td:first-child{width:30%;}
.tabla-comp td{font-size:14.5px;}
/* Al deslizar, la columna de «qué hace» se queda fija: sin ella, a media tabla nadie sabe
   de qué fila habla el «No». Y el aviso de deslizar sólo existe donde hace falta. */
.tabla-comp th:first-child,.tabla-comp td:first-child{position:sticky;left:0;z-index:1;background:var(--surface);}
.tabla-comp thead th:first-child{background:var(--surface2);}
.desliza{display:none;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--muted);margin:0 0 10px;}
@media (max-width:700px){ .desliza{display:block;} .tabla-comp{min-width:560px;} .tabla-comp td:first-child{width:36%;} .tabla-comp td{font-size:13.5px;} }
.nota-comp{color:var(--faint);font-size:13px;margin:14px 0 0;max-width:62em;}
.nota-comp a{color:var(--muted);text-decoration:underline;}

/* --- precios: las tres tarjetas. La destacada toma la piel de `.plan-hero` (borde cian y
   halo); la anual lleva su chapa en menta porque lo que anuncia es un logro (el ahorro),
   no una acción. --- */
.planes3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch;}
@media (max-width:900px){ .planes3{grid-template-columns:1fr;max-width:460px;} }
.plan-c{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);
  padding:28px 24px 24px;display:flex;flex-direction:column;}
.plan-c-hero{border:1.5px solid var(--accent);box-shadow:0 10px 44px -22px var(--accent);}
.plan-c .kicker{margin:0 0 8px;}
.plan-c .precio{font-size:46px;}
.plan-c .precio small{font-size:14px;margin-left:2px;}
.plan-c .desglose{margin:10px 0 0;}
.plan-c ul{list-style:none;margin:18px 0 22px;padding:0;flex:1;}
.plan-c li{display:flex;gap:10px;font-size:14.5px;color:var(--ink2);margin-bottom:9px;line-height:1.5;}
.plan-c li::before{content:'';flex:0 0 auto;width:16px;height:16px;margin-top:4px;border-radius:50%;
  background:var(--achieve-soft);border:1px solid var(--achieve);}
.plan-c .prem li::before{background:var(--accent-soft);border-color:var(--accent);}
.plan-c .btn{width:100%;}
.badge-logro{background:var(--achieve);}
.planes-nota{color:var(--muted);font-size:13.5px;margin:14px 0 0;}

/* --- entrenadores: los pasos a la izquierda, el panel de muestra a la derecha --- */
.coach-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;}
@media (max-width:900px){ .coach-grid{grid-template-columns:1fr;gap:30px;} }
.coach-pasos{list-style:none;counter-reset:paso;margin:0 0 26px;padding:0;display:grid;gap:14px;}
.coach-pasos li{counter-increment:paso;position:relative;padding-left:46px;color:var(--muted);font-size:15px;line-height:1.5;}
.coach-pasos li::before{content:counter(paso,decimal-leading-zero);position:absolute;left:0;top:-2px;
  font-family:Oswald,sans-serif;font-weight:700;font-size:24px;color:var(--achieve);line-height:1;}
.coach-pasos b{display:block;color:var(--ink);font-size:15.5px;margin-bottom:2px;}
.coach-cta{display:flex;gap:12px;flex-wrap:wrap;}
.panel-demo{margin:0;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--achieve);
  border-radius:0 var(--r-l) var(--r-l) 0;padding:22px 22px 16px;}
.panel-demo .kicker{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 14px;}
.panel-demo-tag{border:1px solid var(--border2);border-radius:var(--r-pill);padding:2px 9px;font-size:10px;letter-spacing:1.2px;}
.panel-demo ul{list-style:none;margin:0;padding:0;}
.panel-demo li{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--divider);font-size:14px;}
.panel-demo li:last-child{border-bottom:none;}
.panel-demo li b{color:var(--ink);font-weight:700;}
.panel-demo li span{color:var(--muted);}
.panel-demo li em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--faint);}
.panel-demo li em.sube{color:var(--achieve);}
.panel-demo figcaption{color:var(--faint);font-size:12.5px;margin-top:8px;}
@media (max-width:420px){ .panel-demo li{grid-template-columns:1fr auto;} .panel-demo li span{grid-column:1 / -1;grid-row:2;} }

/* v271 · Anfitriones de /funciones: cada grupo lo presenta un asistente con una frase suya
   (scripts/lib/sitio-asistentes.mjs, ANFITRIONES). La foto va a la izquierda con el mismo borde
   rasgado de la portada; el título del grupo sigue siendo el <h2> de siempre. */
.grupo-anf{display:grid;grid-template-columns:132px 1fr;gap:18px;align-items:center;margin:46px 0 18px;
  padding:0;border-bottom:1px solid var(--divider);}
.grupo-anf img{width:132px;height:132px;object-fit:cover;object-position:center 22%;display:block;
  clip-path:polygon(0 0,100% 0,100% 90%,92% 95%,82% 90%,72% 96%,62% 91%,52% 97%,42% 92%,32% 97%,22% 91%,12% 96%,0 92%);}
.grupo-anf .grupo{margin:0 0 8px;}
.grupo-anf q{display:block;font-family:Oswald,sans-serif;font-size:clamp(19px,2.4vw,24px);line-height:1.2;color:var(--ink);quotes:'«' '»';}
.grupo-anf span{display:block;margin-top:6px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--achieve);}
@media (max-width:560px){ .grupo-anf{grid-template-columns:96px 1fr;gap:14px;} .grupo-anf img{width:96px;height:96px;} }

/* v272 · /empezar: seis pasos, texto a un lado y la captura real de esa pantalla al otro.
   En móvil la captura va debajo y más estrecha: es una pantalla de teléfono, a ancho completo
   ocuparía tres alturas de pantalla. */
.pasos-indice{list-style:none;counter-reset:p;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.pasos-indice li{counter-increment:p;}
.pasos-indice a{display:inline-flex;gap:8px;align-items:center;padding:7px 12px;border:1px solid var(--border);border-radius:var(--r-pill);font-size:13px;color:var(--ink2);background:var(--surface);}
.pasos-indice a::before{content:counter(p,decimal-leading-zero);font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent);}
.qs-pasos{display:flex;flex-direction:column;gap:22px;}
.qs-paso{display:grid;grid-template-columns:1fr 260px;gap:34px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);padding:28px 30px;scroll-margin-top:90px;}
.qs-paso .num{font-family:Oswald,sans-serif;font-size:40px;font-weight:700;color:var(--accent);line-height:1;display:block;margin-bottom:10px;}
.qs-paso h2{font-size:clamp(22px,2.8vw,30px);line-height:1.12;margin:0 0 12px;}
.qs-paso p{color:var(--ink2);font-size:16px;line-height:1.6;margin:0;}
.qs-paso ul{list-style:none;margin:14px 0 0;padding:0;}
.qs-paso li{position:relative;padding-left:17px;color:var(--muted);font-size:14.5px;margin-bottom:8px;line-height:1.5;}
.qs-paso li::before{content:'';position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--achieve);}
.qs-shot{margin:0;}
.qs-shot img{width:100%;height:auto;border-radius:22px;border:1px solid var(--border);display:block;background:var(--bg-deep);}
.qs-shot figcaption,.qs-asis figcaption{margin-top:8px;font-size:12.5px;color:var(--muted);text-align:center;}
.qs-asis{margin:0;}
.qs-asis q{display:block;font-family:Oswald,sans-serif;font-size:19px;color:var(--ink);quotes:'«' '»';text-align:left;border-left:2px solid var(--accent);padding-left:10px;}
@media (max-width:760px){
  .qs-paso{grid-template-columns:1fr;gap:20px;padding:22px 20px;}
  .qs-shot,.qs-asis{max-width:240px;margin:0 auto;}
}