/* 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;}
.asis-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:14px 8px;}
.asis{text-align:center;}
.asis img{width:68px;height:68px;border-radius:50%;object-fit:cover;border:2px solid var(--border);display:block;margin:0 auto 6px;background:var(--surface2);}
.asis.free img{border-color:var(--achieve);}
.asis b{display:block;font-size:13.5px;color:var(--ink);line-height:1.2;}
.asis small{display:block;font-size:11px;color:var(--muted);letter-spacing:.4px;}
.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: el texto arriba y la pantalla de la app ASOMA desde abajo (sólo su parte de
   arriba), recortada por el borde: cabe todo en una pantalla sin encoger el teléfono a un
   sello. La foto pasa a fondo completo, más tenue. */
@media (max-width:900px){
  :root{--nav-h:64px;}
  .car-slide{min-height:540px;}
  .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:28px;padding-bottom:64px;}
  .h1-logro,.car-titulo{font-size:clamp(40px,11.5vw,58px);}
  .h1-que{font-size:16.5px;margin-top:14px;}
  .car-lede{font-size:15.5px;margin:14px 0 18px;}
  .car-texto .hero-cta{gap:10px;}
  .car-texto .hero-cta .btn{min-height:48px;padding:12px 18px;flex:1 1 auto;}
  .car-pantalla{flex:1;align-items:flex-start;overflow:hidden;min-height:120px;margin-top:22px;
    -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);}
  .car-pantalla .shot{max-height:none;width:62%;max-width:250px;}
  .car-ctrl{padding-bottom:14px;}
  .car-ctrl-in{gap:12px;}
  .car-n{display:none;}
  .car-flechas .car-btn:not(#car-pausa){display:none;}
}
@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;}