/* ==========================================================================
   LA PORTADA: la web pública de GimnaX.

   Es la única pantalla que no es una herramienta de trabajo, así que aquí sí
   se gasta el color y el movimiento que en el panel estarían de más. Pero con
   la misma paleta de siempre (salvia, el verde de la X, azul y ámbar) y la
   misma letra: quien entra después en la app tiene que reconocer que está en
   el mismo sitio. Nada de colores nuevos.

   Todo lleva el prefijo `pt-` para no chocar con las ~4.600 líneas de
   app.css, que tiene nombres cortos y genéricos (.tarjeta, .chip, .barra…).
   ========================================================================== */

/* --- Qué se ve: la portada o la app (ver el script del <head> y app.js). */
.sin-portada .pt { display:none; }
html:not(.sin-portada) #raiz { display:none; }
html:not(.sin-portada) body { overscroll-behavior-y:auto; }
html:not(.sin-portada) { scroll-behavior:smooth; scroll-padding-top:80px; }

.pt {
  --pt-ancho:1180px;
  --pt-degradado:linear-gradient(100deg, var(--marca-fuerte) 0%, var(--marca-clara) 45%, var(--azul) 100%);
  --pt-tinta:#101413;
  color:var(--texto); overflow-x:clip;
}
/* Con :where para que no pese nada: `.pt a` le ganaba a `.pt-btn-p` y el texto
   del botón salía negro sobre negro. */
:where(.pt) a { color:inherit; text-decoration:none; }
.pt-lienzo {
  width:100%; max-width:var(--pt-ancho); margin:0 auto;
  padding-left:max(20px, env(safe-area-inset-left, 0px));
  padding-right:max(20px, env(safe-area-inset-right, 0px));
}
.pt-estrecho { max-width:820px; }

/* --------------------------------------------------------------- cabecera */
.pt-cab {
  position:-webkit-sticky; position:sticky; top:0; z-index:50;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  padding-top:env(safe-area-inset-top, 0px);
  background:color-mix(in srgb, var(--fondo) 72%, transparent);
  backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--medio), background var(--medio);
}
.pt-cab.con-sombra { border-bottom-color:var(--borde);
  background:color-mix(in srgb, var(--fondo) 88%, transparent); }
.pt-cab-fila { height:68px; display:flex; align-items:center; gap:28px; }
.pt-logo {
  font-size:25px; font-weight:750; letter-spacing:-.04em; line-height:1;
  display:inline-flex; align-items:flex-start; white-space:nowrap;
}
.pt-x { color:var(--marca-clara); }
.pt-nav { display:flex; gap:26px; flex:1; }
.pt-nav a {
  font-size:14.5px; font-weight:550; color:var(--apagado); position:relative; padding:6px 0;
  transition:color var(--rapido);
}
.pt-nav a::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px;
  background:var(--marca-clara); transform:scaleX(0); transform-origin:left;
  transition:transform var(--medio) var(--curva);
}
.pt-nav a:hover { color:var(--texto); }
.pt-nav a:hover::after { transform:scaleX(1); }
.pt-cab-acciones { display:flex; gap:10px; margin-left:auto; }

/* ---------------------------------------------------------------- botones */
.pt-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:42px; padding:0 18px; border-radius:var(--r-pastilla);
  font:inherit; font-size:14.5px; font-weight:650; letter-spacing:-.005em;
  border:1px solid var(--borde-fuerte); background:var(--superficie); color:var(--texto);
  cursor:pointer; white-space:nowrap; position:relative; overflow:hidden;
  transition:transform var(--rapido) var(--curva), box-shadow var(--medio) var(--curva),
             background var(--rapido), border-color var(--rapido);
}
.pt-btn:hover { transform:translateY(-1px); box-shadow:var(--sombra-hero); }
.pt-btn:active { transform:translateY(0) scale(.98); }
.pt-btn-g { height:52px; padding:0 26px; font-size:16px; }
.pt-btn-p {
  background:var(--acento); color:var(--acento-texto); border-color:transparent;
}
.pt-btn-p:hover { box-shadow:0 10px 28px color-mix(in srgb, var(--marca-clara) 35%, transparent); }
/* El brillo que cruza al pasar el ratón, el mismo de la entrada. */
.pt-btn-p::after {
  content:""; position:absolute; inset:0; translate:-120% 0;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.3), transparent);
}
.pt-btn-p:hover::after { translate:120% 0; transition:translate .7s var(--curva-suave); }
.pt-btn-fantasma { border-color:transparent; background:transparent; }
.pt-btn-fantasma:hover { background:var(--superficie-2); box-shadow:none; }
.pt-btn-claro { background:#fff; color:#101413; border-color:transparent; }
.pt-btn-borde-claro { background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.pt-btn-borde-claro:hover { background:rgba(255,255,255,.1); }

/* ------------------------------------------------------------------ héroe */
.pt-heroe { position:relative; isolation:isolate; padding:56px 0 72px; }
/* Las mismas tres manchas a la deriva que la pantalla de entrada. */
.pt-aurora { position:absolute; inset:-80px 0 0; z-index:-1; overflow:hidden; pointer-events:none; }
.pt-aurora i {
  position:absolute; border-radius:50%; filter:blur(80px); opacity:.42; display:block;
}
.pt-aurora i:nth-child(1) {
  width:58vmax; height:58vmax; left:-22vmax; top:-20vmax;
  background:radial-gradient(circle, var(--marca) 0%, transparent 70%);
  animation:deriva-1 26s ease-in-out infinite alternate;
}
.pt-aurora i:nth-child(2) {
  width:46vmax; height:46vmax; right:-16vmax; top:4vmax;
  background:radial-gradient(circle, var(--azul) 0%, transparent 70%);
  animation:deriva-2 32s ease-in-out infinite alternate;
}
.pt-aurora i:nth-child(3) {
  width:30vmax; height:30vmax; left:34%; top:40%; opacity:.22;
  background:radial-gradient(circle, var(--ambar) 0%, transparent 72%);
  animation:deriva-2 22s ease-in-out infinite alternate-reverse;
}
.pt-heroe-rejilla {
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:40px; align-items:center;
}
.pt-chapa {
  display:inline-flex; align-items:center; gap:9px; margin:0 0 22px;
  padding:7px 14px 7px 11px; border-radius:var(--r-pastilla);
  background:color-mix(in srgb, var(--superficie) 70%, transparent);
  border:1px solid var(--borde); font-size:13px; font-weight:600; color:var(--apagado);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.pt-punto {
  width:8px; height:8px; border-radius:50%; background:var(--marca-clara);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--marca-clara) 60%, transparent);
  animation:pt-late 2.2s var(--curva) infinite;
}
@keyframes pt-late { 70% { box-shadow:0 0 0 9px transparent; } 100% { box-shadow:0 0 0 0 transparent; } }
.pt-h1 {
  font-size:clamp(40px, 6.4vw, 76px); font-weight:700; line-height:1.02;
  letter-spacing:-.045em; margin:0; text-wrap:balance;
}
.pt-degradado {
  background:var(--pt-degradado); -webkit-background-clip:text; background-clip:text;
  color:transparent; padding-bottom:.06em;
}
.pt-entradilla {
  font-size:clamp(17px, 1.6vw, 19.5px); line-height:1.55; color:var(--apagado);
  margin:22px 0 0; max-width:34em; text-wrap:pretty;
}
.pt-ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.pt-ctas-centro { justify-content:center; }
.pt-letra-peq {
  display:flex; flex-wrap:wrap; gap:6px 18px; margin:18px 0 0;
  font-size:13px; color:var(--tenue); font-weight:550;
}
.pt-letra-peq span::before { content:"✓ "; color:var(--marca-clara); font-weight:700; }

/* La entrada del héroe: sube escalonado, una vez. */
.pt-entra { animation:pt-sube .8s var(--curva) both; }
.pt-heroe-txt .pt-entra:nth-child(2) { animation-delay:.06s; }
.pt-heroe-txt .pt-entra:nth-child(3) { animation-delay:.14s; }
.pt-heroe-txt .pt-entra:nth-child(4) { animation-delay:.22s; }
.pt-heroe-txt .pt-entra:nth-child(5) { animation-delay:.3s; }
@keyframes pt-sube { from { opacity:0; transform:translateY(18px); } }

/* ------------------------------------------------------ el móvil de mentira
   Pintado con CSS, no una foto: pesa nada, se ve nítido y en oscuro se
   oscurece solo porque usa las mismas variables que la app. */
.pt-heroe-visual { position:relative; display:grid; place-items:center; min-height:560px; }
.pt-movil {
  position:relative; width:290px; aspect-ratio:9/19.3; border-radius:48px; padding:10px;
  background:linear-gradient(145deg, #2A302E, #0B0E0D 60%);
  box-shadow:0 0 0 1.5px #3A413E inset, 0 40px 80px -20px rgba(16,20,19,.45),
             0 18px 36px -18px rgba(16,20,19,.4);
}
.pt-movil-heroe { animation:pt-movil-entra 1.1s var(--curva) .2s both; }
@keyframes pt-movil-entra { from { opacity:0; transform:translateY(40px) rotate(-3deg) scale(.96); } }
.pt-isla {
  position:absolute; top:19px; left:50%; translate:-50% 0; z-index:3;
  width:86px; height:24px; border-radius:20px; background:#050606;
}
.pt-pantalla {
  height:100%; border-radius:38px; overflow:hidden; position:relative;
  background:var(--fondo); padding:50px 12px 0; display:flex; flex-direction:column; gap:9px;
  font-size:11px;
}
.pm-cab { display:flex; align-items:center; gap:7px; font-size:10.5px; letter-spacing:.02em; }
.pm-escudo {
  width:22px; height:22px; border-radius:7px; display:grid; place-items:center;
  background:var(--gradiente-hero); color:#fff; font-size:8.5px; font-weight:700;
}
.pm-cab b { flex:1; font-weight:650; }
.pm-yo {
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:var(--marca-suave); color:var(--marca-texto); font-weight:700; font-size:10px;
}
.pm-hero {
  background:var(--superficie); border-radius:16px; padding:13px 13px 11px;
  box-shadow:var(--sombra-hero); border:1px solid var(--borde);
}
.pm-saludo { display:flex; align-items:center; gap:6px; color:var(--apagado); font-size:10.5px; }
.pm-chapa {
  display:inline-flex; align-items:center; gap:4px; padding:2px 7px; border-radius:99px;
  background:var(--marca-suave); color:var(--marca-texto); font-size:8.5px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
}
.pm-chapa i { width:5px; height:5px; border-radius:50%; background:currentColor; }
.pm-eti { margin-top:9px; font-size:8.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--marca-texto); font-weight:700; }
.pm-rutina { font-size:17px; font-weight:650; letter-spacing:-.02em; margin-top:2px; }
.pm-sub { color:var(--tenue); font-size:10px; }
.pm-empezar {
  margin-top:10px; height:32px; border-radius:10px; display:grid; place-items:center;
  background:var(--acento); color:var(--acento-texto); font-weight:650; font-size:11.5px;
}
.pm-pie {
  display:flex; align-items:center; gap:9px; margin-top:11px; padding-top:10px;
  border-top:1px solid var(--borde);
}
.pm-pie b { display:block; font-size:14px; line-height:1.1; }
.pm-pie small { font-size:8.5px; color:var(--tenue); }
.pm-sep { width:1px; align-self:stretch; background:var(--borde); }
.pm-anillo { position:relative; width:36px; height:36px; display:grid; place-items:center; }
.pm-anillo svg { position:absolute; inset:0; transform:rotate(-90deg); }
.pm-anillo circle { fill:none; stroke:var(--superficie-3); stroke-width:3.2; }
.pm-anillo .pm-anillo-v {
  stroke:var(--marca-clara); stroke-linecap:round; stroke-dasharray:97.4;
  stroke-dashoffset:24.4; animation:pt-anillo 1.6s var(--curva) 1s both;
}
@keyframes pt-anillo { from { stroke-dashoffset:97.4; } }
.pm-anillo b { font-size:9.5px !important; }
.pm-tarjeta {
  background:var(--superficie); border-radius:14px; padding:4px 11px; border:1px solid var(--borde);
}
.pm-fila { display:flex; justify-content:space-between; padding:7px 0; font-size:10.5px; }
.pm-fila + .pm-fila { border-top:1px solid var(--borde); }
.pm-ej { font-weight:600; }
.pm-sube { color:var(--marca-clara); font-weight:700; }
.pm-igual { color:var(--tenue); font-weight:600; }
.pm-pestanas {
  margin-top:auto; margin-inline:-12px; height:46px; display:flex; justify-content:space-around;
  align-items:center; background:var(--superficie); border-top:1px solid var(--borde);
}
.pm-pestanas i { width:20px; height:20px; display:grid; place-items:center; color:var(--tenue); }
.pm-pestanas i.on { color:var(--marca-clara); }
.pm-pestanas .ico-svg { width:18px; height:18px; }

/* Las tarjetas que flotan alrededor del móvil. */
.pt-flota {
  position:absolute; display:flex; align-items:center; gap:10px; z-index:2;
  padding:10px 14px 10px 10px; border-radius:16px; max-width:250px;
  background:color-mix(in srgb, var(--superficie) 86%, transparent);
  border:1px solid var(--borde); box-shadow:var(--sombra-alta);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  animation:pt-flota-entra .9s var(--curva) both, pt-flota 6s ease-in-out infinite alternate;
}
.pt-flota b { display:block; font-size:13.5px; letter-spacing:-.01em; }
.pt-flota small { display:block; font-size:11.5px; color:var(--apagado); line-height:1.35; }
.pt-flota-1 { left:-17%; top:9%; animation-delay:.9s, 1.8s; }
.pt-flota-2 { right:-8%; top:46%; animation-delay:1.1s, 0s; }
.pt-flota-3 { left:-12%; bottom:12%; animation-delay:1.3s, .9s; }
@keyframes pt-flota-entra { from { opacity:0; transform:translateY(16px) scale(.92); } }
@keyframes pt-flota { to { translate:0 -10px; } }
.pt-flota-ico {
  width:36px; height:36px; flex:0 0 36px; border-radius:11px; display:grid; place-items:center;
}

/* Los iconos con su color: el mismo sistema de «un tono por sección». */
.pt-ico, .pt-flota-ico { --t:var(--marca-texto); color:var(--t);
  background:linear-gradient(135deg, color-mix(in srgb, var(--t) 22%, transparent),
                                     color-mix(in srgb, var(--t) 9%, transparent)); }
.pt .verde  { --t:var(--marca-clara); }
.pt .marca  { --t:var(--marca-texto); }
.pt .azul   { --t:var(--azul); }
.pt .ambar  { --t:var(--ambar); }
.pt .morado { --t:var(--morado); }
.pt .menta  { --t:var(--menta); }
.pt .cian   { --t:var(--cian); }
.pt-ico {
  width:44px; height:44px; flex:0 0 44px; border-radius:13px; display:grid; place-items:center;
}
.pt-ico .ico-svg, .pt-flota-ico .ico-svg { width:22px; height:22px; }

/* ----------------------------------------------------------------- franja */
.pt-franja { border-block:1px solid var(--borde); background:var(--superficie); }
.pt-franja-fila {
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0;
}
.pt-franja-fila > div {
  padding:28px 22px; display:flex; flex-direction:column; gap:4px;
}
.pt-franja-fila > div + div { border-left:1px solid var(--borde); }
.pt-franja-fila b {
  font-size:40px; font-weight:700; letter-spacing:-.045em; line-height:1;
  background:var(--pt-degradado); -webkit-background-clip:text; background-clip:text;
  color:transparent; font-variant-numeric:tabular-nums;
}
.pt-franja-fila span { font-size:14px; color:var(--apagado); max-width:22ch; }

/* --------------------------------------------------------------- secciones */
.pt-seccion { padding:112px 0; position:relative; }
.pt-cabecera { max-width:660px; margin-bottom:52px; }
.pt-centrada { margin-inline:auto; text-align:center; }
.pt-eti {
  margin:0 0 14px; font-size:12.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--marca-clara);
}
.pt-h2 {
  font-size:clamp(32px, 4.4vw, 52px); font-weight:700; line-height:1.06;
  letter-spacing:-.04em; margin:0; text-wrap:balance;
}
.pt-sub {
  font-size:18px; line-height:1.55; color:var(--apagado); margin:18px 0 0; text-wrap:pretty;
}
.pt-centrada .pt-sub { margin-inline:auto; max-width:36em; }

/* ------------------------------------------------ bento de los entrenadores */
.pt-bento { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.pt-caja {
  background:var(--superficie); border:1px solid var(--borde); border-radius:24px;
  padding:28px; position:relative; overflow:hidden;
  transition:transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva),
             border-color var(--medio);
}
.pt-caja::before {
  /* Un velo de color que asoma por la esquina al pasar el ratón. */
  content:""; position:absolute; width:260px; height:260px; right:-120px; top:-120px;
  border-radius:50%; background:radial-gradient(circle, var(--velo-marca), transparent 70%);
  opacity:0; transition:opacity var(--lento);
}
.pt-caja:hover { transform:translateY(-4px); box-shadow:var(--sombra-alta);
  border-color:var(--marca-borde); }
.pt-caja:hover::before { opacity:1; }
.pt-caja h3 { font-size:20px; font-weight:650; letter-spacing:-.02em; margin:18px 0 8px; }
.pt-caja p { font-size:15px; line-height:1.6; color:var(--apagado); margin:0; }
.pt-caja-ancha {
  grid-column:span 2; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:28px; align-items:center;
}
.pt-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; }
.pt-chips span {
  padding:6px 12px; border-radius:99px; font-size:12.5px; font-weight:600;
  border:1px solid var(--borde-fuerte); color:var(--apagado);
}
.pt-chips span.on { background:var(--acento); color:var(--acento-texto); border-color:transparent; }

.pt-mini-panel {
  background:var(--fondo); border:1px solid var(--borde); border-radius:18px; padding:16px;
}
.pt-mini-cifras { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pt-mini-cifras > div {
  background:var(--superficie); border:1px solid var(--borde); border-radius:13px; padding:11px 12px;
}
.pt-mini-cifras small { display:block; font-size:10px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tenue); }
.pt-mini-cifras b { display:block; font-size:24px; letter-spacing:-.03em; margin:3px 0 7px; }
.pt-mini-cifras i {
  display:block; height:5px; border-radius:5px; background:var(--superficie-3); position:relative;
  overflow:hidden;
}
.pt-mini-cifras i::after {
  content:""; position:absolute; inset:0 auto 0 0; width:var(--v); border-radius:5px;
  background:var(--gradiente-acento);
}
.pt-mini-barras {
  display:flex; align-items:flex-end; gap:8px; height:120px; margin-top:14px; padding-bottom:18px;
}
.pt-mini-barras span {
  flex:1; height:100%; position:relative; border-radius:8px 8px 4px 4px;
  background:var(--superficie-3);
}
.pt-mini-barras span::before {
  content:""; position:absolute; inset:auto 0 0; height:var(--h); border-radius:8px 8px 4px 4px;
  background:linear-gradient(180deg, var(--marca-clara), var(--marca));
  transform-origin:bottom; transition:transform 1s var(--curva);
}
.pt-mini-barras span:nth-child(3)::before { background:linear-gradient(180deg, #4E7FB8, var(--azul)); }
.pt-mini-barras em {
  position:absolute; bottom:-18px; left:0; right:0; text-align:center;
  font-style:normal; font-size:10.5px; font-weight:700; color:var(--tenue);
}
/* Las barras crecen cuando la caja entra en pantalla (sin JS, ya crecidas). */
.revela-lista .pt-caja:not(.visto) .pt-mini-barras span::before { transform:scaleY(0); }
.pt-mini-barras span:nth-child(2)::before { transition-delay:.06s; }
.pt-mini-barras span:nth-child(3)::before { transition-delay:.12s; }
.pt-mini-barras span:nth-child(4)::before { transition-delay:.18s; }
.pt-mini-barras span:nth-child(5)::before { transition-delay:.24s; }
.pt-mini-barras span:nth-child(6)::before { transition-delay:.3s; }

.pt-cuerpo { display:flex; justify-content:center; gap:14px; }
.pt-cuerpo .figura { filter:drop-shadow(0 10px 18px rgba(16,20,19,.08)); }

/* ------------------------------------------------ la sección de los socios
   Oscura siempre, también de día: es el cambio de ritmo de la página, y
   el modo gimnasio de verdad se usa a pantalla completa con fondo oscuro. */
.pt-oscura {
  background:radial-gradient(900px 500px at 15% 20%, rgba(55,146,99,.28), transparent 60%),
             radial-gradient(700px 500px at 90% 90%, rgba(46,110,140,.25), transparent 60%),
             var(--pt-tinta);
  color:#E8EAE8;
  /* Las variables de la app, en su versión de noche, para lo de dentro. */
  --texto:#E8EAE8; --apagado:#B4BCB8; --tenue:#8A928E; --borde:#2B322F;
  --superficie:#181D1B; --superficie-2:#1F2523; --superficie-3:#252B29; --fondo:#101413;
  --marca-clara:#8FE3B0; --marca-texto:#A6CBB6; --azul:#A9C4EE; --ambar:#F0B48C;
  --morado:#C9AEE0; --menta:#7FD1C1; --cian:#8FCBDE;
  --acento:#E8EAE8; --acento-texto:#101413;
}
.pt-socios-rejilla {
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:64px; align-items:center;
}
.pt-socios-visual { display:grid; place-items:center; position:-webkit-sticky; position:sticky; top:110px; }
.pt-lista { list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:1fr 1fr; gap:26px 30px; }
.pt-lista li { display:flex; gap:16px; }
.pt-lista h3 { font-size:17px; font-weight:650; margin:2px 0 5px; letter-spacing:-.01em; }
.pt-lista p { margin:0; font-size:14.5px; line-height:1.6; color:var(--apagado); }

.pt-pantalla-gym {
  background:#0C100E; color:#E8EAE8; padding:52px 16px 16px; gap:11px; font-size:11px;
}
.pg-cab { display:flex; justify-content:space-between; align-items:baseline; }
.pg-cab span { font-size:18px; font-weight:700; letter-spacing:-.02em; }
.pg-cab small { color:#8A928E; font-weight:600; }
.pg-barra { height:5px; border-radius:5px; background:#252B29; overflow:hidden; }
.pg-barra i { display:block; height:100%; width:33%; border-radius:5px; background:#8FE3B0; }
.pg-ultima { color:#B4BCB8; font-size:10.5px; }
.pg-ultima b { color:#E8EAE8; }
.pg-consejo {
  padding:9px 11px; border-radius:12px; font-size:10.5px; line-height:1.45;
  background:rgba(143,227,176,.12); color:#BFE9CE; border:1px solid rgba(143,227,176,.22);
}
.pg-consejo b { color:#8FE3B0; }
.pg-serie {
  background:#181D1B; border:1px solid #2B322F; border-radius:16px; padding:12px;
  display:flex; flex-direction:column; gap:9px;
}
.pg-serie > small { color:#8A928E; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  font-size:8.5px; }
.pg-num { display:flex; align-items:center; justify-content:space-between; }
.pg-num b { font-size:26px; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.pg-num b i { font-style:normal; font-size:11px; color:#8A928E; margin-left:3px; font-weight:600; }
.pg-mas {
  width:34px; height:34px; border-radius:11px; display:grid; place-items:center;
  background:#252B29; font-size:17px; font-weight:600;
}
.pg-hecha {
  height:36px; border-radius:11px; display:grid; place-items:center; font-weight:700;
  background:#8FE3B0; color:#0C100E; font-size:12px;
}
.pg-descanso {
  margin-top:auto; display:flex; align-items:center; gap:12px; padding:10px 12px;
  border-radius:16px; background:#181D1B; border:1px solid #2B322F;
}
.pg-descanso svg { width:44px; height:44px; transform:rotate(-90deg); }
.pg-descanso circle { fill:none; stroke:#252B29; stroke-width:4; }
.pg-descanso .v { stroke:#8FE3B0; stroke-linecap:round; stroke-dasharray:119.4;
  animation:pt-cuenta 12s linear infinite; }
@keyframes pt-cuenta { from { stroke-dashoffset:0; } to { stroke-dashoffset:119.4; } }
.pg-descanso b { display:block; font-size:18px; font-variant-numeric:tabular-nums; }
.pg-descanso small { color:#8A928E; }

.pt-instalar-caja {
  margin-top:40px; display:flex; align-items:center; gap:14px; padding:14px 14px 14px 16px;
  border-radius:20px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
}
.pt-instalar-caja[hidden] { display:none; }
.pt-instalar-caja > div { flex:1; min-width:0; }
.pt-instalar-caja b { display:block; font-size:15px; }
.pt-instalar-caja small { color:var(--apagado); font-size:13px; }

/* ------------------------------------------------------------------ pasos */
.pt-pasos { list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; counter-reset:paso; }
.pt-pasos li {
  padding:30px 28px; border-radius:24px; background:var(--superficie); border:1px solid var(--borde);
  position:relative;
}
.pt-pasos li:not(:last-child)::after {
  /* La flecha que une un paso con el siguiente. */
  content:"→"; position:absolute; right:-16px; top:44px; z-index:1; width:30px; height:30px;
  display:grid; place-items:center; border-radius:50%; background:var(--fondo);
  border:1px solid var(--borde); color:var(--tenue); font-size:14px;
}
.pt-paso-n {
  display:grid; place-items:center; width:48px; height:48px; border-radius:15px;
  background:var(--gradiente-hero); color:#fff; font-size:21px; font-weight:750;
  box-shadow:var(--sombra-color);
}
.pt-pasos h3 { font-size:19px; font-weight:650; margin:20px 0 8px; letter-spacing:-.02em; }
.pt-pasos p { margin:0; font-size:15px; line-height:1.6; color:var(--apagado); }

/* ---------------------------------------------------------------- precios */
.pt-precios-fondo {
  background:linear-gradient(180deg, transparent, var(--velo-marca) 30%, var(--velo-azul) 80%, transparent);
}
.pt-planes { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px;
  align-items:stretch; }
.pt-plan {
  display:flex; flex-direction:column; padding:30px 28px 28px; border-radius:26px;
  background:var(--superficie); border:1px solid var(--borde); position:relative;
  transition:transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
.pt-plan:hover { transform:translateY(-4px); box-shadow:var(--sombra-alta); }
.pt-plan h3 { font-size:17px; font-weight:650; color:var(--apagado); margin:0; }
.pt-precio { margin:14px 0 4px; display:flex; align-items:baseline; gap:6px; }
.pt-precio b { font-size:56px; font-weight:750; letter-spacing:-.05em; line-height:1; }
.pt-precio span { color:var(--tenue); font-weight:600; }
.pt-plan-para { margin:0 0 26px; color:var(--apagado); font-size:15px; min-height:2.9em; }
.pt-plan-extras { list-style:none; margin:-12px 0 24px; padding:0; font-size:14px; color:var(--apagado); }
.pt-plan-extras li { padding:3px 0; }
.pt-plan-extras li::before { content:"+ "; color:var(--marca-clara); font-weight:700; }
.pt-plan-extras .pronto { color:var(--tenue); }
.pt-plan .pt-btn { margin-top:auto; width:100%; }
/* El del medio, destacado con el degradado de la marca por el borde. */
.pt-plan-destacado {
  border:1.5px solid transparent;
  background:linear-gradient(var(--superficie), var(--superficie)) padding-box,
             var(--pt-degradado) border-box;
  box-shadow:var(--sombra-color);
}
.pt-incluye {
  margin-top:26px; padding:24px 28px; border-radius:22px; border:1px dashed var(--borde-fuerte);
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 28px;
}
.pt-incluye > p { margin:0; }
.pt-incluye ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 22px;
  flex:1; font-size:14.5px; color:var(--apagado); }
.pt-incluye li::before { content:"✓ "; color:var(--marca-clara); font-weight:700; }
.pt-incluye .pt-letra-peq { margin:0; width:100%; }

/* -------------------------------------------------------------- privacidad */
.pt-datos { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:56px;
  align-items:start; }
.pt-datos .pt-cabecera { margin-bottom:0; }
.pt-enlace {
  margin-top:22px; background:none; border:none; padding:0; font:inherit; font-weight:650;
  color:var(--marca-clara); cursor:pointer; font-size:15.5px;
}
.pt-enlace:hover { text-decoration:underline; text-underline-offset:4px; }
.pt-datos-lista { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.pt-datos-lista li {
  display:flex; gap:16px; padding:18px 20px; border-radius:18px;
  background:var(--superficie); border:1px solid var(--borde);
}
.pt-datos-lista li > span { color:var(--marca-clara); flex:0 0 auto; margin-top:1px; }
.pt-datos-lista b { display:block; font-size:16px; }
.pt-datos-lista small { display:block; color:var(--apagado); font-size:14px; line-height:1.5; margin-top:2px; }

/* -------------------------------------------------------------- preguntas */
.pt-preguntas { display:grid; gap:10px; }
.pt-preguntas details {
  border-radius:18px; background:var(--superficie); border:1px solid var(--borde);
  transition:border-color var(--rapido), box-shadow var(--medio);
}
.pt-preguntas details[open] { border-color:var(--marca-borde); box-shadow:var(--sombra-hero); }
.pt-preguntas summary {
  list-style:none; cursor:pointer; padding:20px 56px 20px 22px; font-size:16.5px; font-weight:620;
  position:relative;
}
.pt-preguntas summary::-webkit-details-marker { display:none; }
.pt-preguntas summary::after {
  content:""; position:absolute; right:22px; top:50%; width:10px; height:10px; margin-top:-7px;
  border-right:2px solid var(--tenue); border-bottom:2px solid var(--tenue);
  transform:rotate(45deg); transition:transform var(--medio) var(--curva);
}
.pt-preguntas details[open] summary::after { transform:rotate(225deg); margin-top:-2px; }
.pt-preguntas details p { margin:0; padding:0 22px 20px; color:var(--apagado); line-height:1.65; }

/* ---------------------------------------------------------------- remate */
.pt-remate-caja { padding-top:0; }
.pt-remate {
  border-radius:32px; padding:72px 32px; text-align:center; color:#fff; position:relative;
  overflow:hidden; isolation:isolate; background:var(--gradiente-hero);
  box-shadow:0 30px 70px -30px rgba(55,146,99,.55);
}
.pt-remate::before, .pt-remate::after {
  content:""; position:absolute; z-index:-1; border-radius:50%; filter:blur(50px);
}
.pt-remate::before { width:420px; height:420px; left:-120px; top:-160px;
  background:rgba(143,227,176,.45); animation:deriva-1 20s ease-in-out infinite alternate; }
.pt-remate::after { width:380px; height:380px; right:-100px; bottom:-180px;
  background:rgba(169,196,238,.4); animation:deriva-2 24s ease-in-out infinite alternate; }
.pt-remate .pt-h2 { color:#fff; max-width:16em; margin-inline:auto; }
.pt-remate p { margin:16px 0 0; font-size:18px; color:rgba(255,255,255,.82); }

/* ------------------------------------------------------------------- pie */
.pt-pie { border-top:1px solid var(--borde); padding:44px 0 calc(28px + env(safe-area-inset-bottom, 0px)); }
.pt-pie-fila { display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; }
.pt-logo-peq { font-size:21px; }
.pt-pie p { margin:10px 0 0; color:var(--tenue); font-size:14px; }
.pt-pie-enlaces { display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center; }
.pt-pie-enlaces a, .pt-pie-enlaces button {
  font:inherit; font-size:14.5px; color:var(--apagado); background:none; border:none; padding:0;
  cursor:pointer;
}
.pt-pie-enlaces a:hover, .pt-pie-enlaces button:hover { color:var(--texto); }
.pt-pie-legal { margin-top:30px; color:var(--tenue); font-size:13px; }

/* ---------------------------------------------------- aparecer al bajar
   Solo si portada.js está en marcha (pone .revela-lista en <html>): si el
   JavaScript no llega, se ve todo tal cual, que es lo importante. */
.revela-lista .pt .revela {
  opacity:0; transform:translateY(22px);
  transition:opacity .8s var(--curva), transform .8s var(--curva);
  transition-delay:var(--retraso, 0s);
}
.revela-lista .pt .revela.visto { opacity:1; transform:none; }

/* ------------------------------------------------------------------ oscuro */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .pt-movil { box-shadow:0 0 0 1.5px #3A413E inset,
    0 40px 90px -20px rgba(0,0,0,.8); }
  :root:not([data-tema="claro"]) .pt-oscura { --pt-tinta:#0A0D0C; }
  :root:not([data-tema="claro"]) .pt-btn-p:hover { box-shadow:0 10px 28px rgba(143,227,176,.22); }
}
:root[data-tema="oscuro"] .pt-oscura { --pt-tinta:#0A0D0C; }

/* ---------------------------------------------------------------- tableta */
@media (max-width:1060px) {
  .pt-nav { display:none; }
  .pt-heroe-rejilla { grid-template-columns:1fr; gap:24px; }
  .pt-heroe-txt { text-align:center; }
  .pt-entradilla { margin-inline:auto; }
  .pt-ctas, .pt-heroe .pt-letra-peq { justify-content:center; }
  .pt-flota-1 { left:max(0px, 50% - 330px); top:9%; } .pt-flota-2 { right:max(0px, 50% - 340px); }
  .pt-flota-3 { left:max(0px, 50% - 320px); }
  .pt-socios-rejilla { grid-template-columns:1fr; gap:48px; }
  .pt-socios-visual { position:static; order:2; }
  .pt-datos { grid-template-columns:1fr; gap:36px; }
}

/* ------------------------------------------------------------------ móvil */
@media (max-width:760px) {
  .pt-cab-fila { height:60px; gap:12px; }
  .pt-logo { font-size:23px; }
  .pt-solo-ancho { display:none; }
  .pt-heroe { padding:36px 0 40px; }
  .pt-chapa { font-size:12px; margin-bottom:18px; }
  .pt-ctas { flex-direction:column; align-items:stretch; }
  .pt-ctas .pt-btn { width:100%; }
  .pt-heroe-visual { min-height:0; padding:24px 0 10px; }
  .pt-movil { width:258px; border-radius:44px; }
  .pt-pantalla { border-radius:35px; }
  .pt-flota { max-width:210px; padding:8px 11px 8px 8px; }
  .pt-flota b { font-size:12.5px; } .pt-flota small { font-size:10.5px; }
  .pt-flota-ico { width:30px; height:30px; flex-basis:30px; border-radius:9px; }
  .pt-flota-ico .ico-svg { width:18px; height:18px; }
  .pt-flota-1 { left:-6px; top:4%; } .pt-flota-2 { right:-8px; top:56%; }
  .pt-flota-3 { left:-4px; bottom:6%; }
  .pt-franja-fila { grid-template-columns:1fr 1fr; }
  .pt-franja-fila > div { padding:22px 14px; }
  .pt-franja-fila > div:nth-child(3) { border-left:none; }
  .pt-franja-fila > div:nth-child(n+3) { border-top:1px solid var(--borde); }
  .pt-franja-fila b { font-size:32px; }
  .pt-franja-fila span { font-size:13px; }
  .pt-seccion { padding:72px 0; }
  .pt-cabecera { margin-bottom:34px; }
  .pt-sub { font-size:16.5px; }
  .pt-bento { grid-template-columns:1fr; gap:14px; }
  .pt-caja { padding:24px 22px; border-radius:22px; }
  .pt-caja-ancha { grid-column:auto; grid-template-columns:1fr; gap:22px; }
  .pt-lista { grid-template-columns:1fr; gap:22px; }
  .pt-pasos, .pt-planes { grid-template-columns:1fr; gap:14px; }
  .pt-pasos li:not(:last-child)::after { content:"↓"; right:auto; left:50%; top:auto;
    bottom:-22px; translate:-50% 0; }
  .pt-plan-para { min-height:0; }
  .pt-incluye { padding:20px; }
  .pt-remate { padding:52px 22px; border-radius:26px; }
  .pt-preguntas summary { font-size:15.5px; padding:18px 48px 18px 18px; }
  .pt-preguntas details p { padding:0 18px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .pt-aurora i, .pt-remate::before, .pt-remate::after, .pt-flota, .pt-movil-heroe,
  .pt-entra, .pt-punto, .pg-descanso .v, .pm-anillo .pm-anillo-v {
    animation:none !important;
  }
  .revela-lista .pt .revela { opacity:1; transform:none; transition:none; }
  html:not(.sin-portada) { scroll-behavior:auto; }
}

/* ==========================================================================
   Las maquetas, al día con el interior nuevo («Pista»): el «Hoy» del socio
   con su saludo, el semáforo, la tarjeta oscura y la semana; y el modo
   gimnasio con sus números grandes. Y la sección de la IA.
   ========================================================================== */
.pm-nueva { background:#F4F3EE; gap:8px; padding:48px 11px 0; }
.pm-nueva .pm-escudo { background:linear-gradient(135deg, #22A05A, #1F8FB0); }
.pm-nueva .pm-yo { background:linear-gradient(135deg, #22A05A, #1F8FB0); color:#fff; }
.pm-fecha { font-size:7.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#7C847F; margin-top:2px; }
.pm-hola { font-size:19px; font-weight:750; letter-spacing:-.045em; line-height:1.02; color:#141917; margin-top:-3px; }
.pm-semaforo { display:flex; align-items:center; gap:7px; padding:6px 8px 6px 6px; border-radius:11px;
  background:color-mix(in srgb, #22A05A 9%, #fff); border:1px solid color-mix(in srgb, #22A05A 25%, transparent); }
.pm-semaforo i { width:15px; height:15px; border-radius:50%; flex:0 0 15px; background:radial-gradient(circle at 35% 35%, #7EF0AE, #1E9A55);
  box-shadow:0 0 0 3px rgba(34,160,90,.18), 0 0 10px #3ed084; animation:pt-late 2.6s ease-in-out infinite; }
@keyframes pt-late { 50% { box-shadow:0 0 0 5px rgba(34,160,90,.08), 0 0 14px #3ed084; } }
.pm-semaforo span { flex:1; min-width:0; line-height:1.2; }
.pm-semaforo b { display:block; font-size:9.5px; color:#141917; }
.pm-semaforo small { font-size:8px; color:#4B534F; }
.pm-semaforo em { font-style:normal; font-size:11px; background:linear-gradient(120deg, #22A05A, #1F8FB0, #7B5CC4);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.pm-estrella { position:relative; overflow:hidden; isolation:isolate; border-radius:17px; padding:12px; background:#0E1311; color:#EEF3F0;
  box-shadow:0 16px 28px -16px rgba(34,160,90,.7); }
.pm-estrella::before { content:""; position:absolute; z-index:-1; width:220px; height:220px; left:-80px; top:-110px; border-radius:50%;
  filter:blur(26px); background:radial-gradient(closest-side, #22A05A, transparent); opacity:.85; }
.pm-estrella::after { content:""; position:absolute; z-index:-1; width:170px; height:170px; right:-70px; bottom:-100px; border-radius:50%;
  filter:blur(26px); background:radial-gradient(closest-side, #1F8FB0, transparent); opacity:.6; }
.pm-estrella .pm-eti { margin:0; color:#8FE3B0; font-size:7.5px; font-weight:800; letter-spacing:.16em; }
.pm-estrella .pm-rutina { color:#fff; font-size:18px; font-weight:750; letter-spacing:-.04em; line-height:1.05; margin:3px 0 7px; }
.pm-fichas { display:flex; gap:4px; flex-wrap:wrap; }
.pm-fichas span { font-size:8px; font-weight:650; padding:3px 7px; border-radius:99px; background:rgba(255,255,255,.1); }
.pm-fichas span.viva { background:rgba(143,227,176,.2); color:#8FE3B0; }
.pm-nueva .pm-empezar { margin-top:10px; height:30px; border-radius:99px; background:#fff; color:#0E1311; font-weight:750; font-size:10.5px;
  display:flex; align-items:center; justify-content:center; gap:5px; box-shadow:0 8px 16px -8px rgba(143,227,176,.9); }
.pm-semana { background:#fff; border-radius:15px; padding:9px; border:1px solid rgba(20,26,24,.08); box-shadow:0 10px 20px -16px rgba(16,20,19,.4); }
.pm-racha { display:flex; align-items:center; gap:7px; }
.pm-racha > span:nth-child(2) { flex:1; line-height:1.15; }
.pm-racha b { display:block; font-size:11px; color:#141917; letter-spacing:-.02em; }
.pm-racha small { font-size:8px; color:#4B534F; }
.pm-fuego { width:22px; height:22px; border-radius:7px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(160deg, #F7A04B, #E0582E); }
.pm-fuego .ico-svg { width:13px; height:13px; }
.pm-nueva .pm-anillo { width:28px; height:28px; }
.pm-nueva .pm-anillo circle { stroke:rgba(20,26,24,.08); }
.pm-nueva .pm-anillo .pm-anillo-v { stroke:#22A05A; }
.pm-dias { display:grid; grid-template-columns:repeat(7, 1fr); gap:3px; margin-top:7px; }
.pm-dias i { aspect-ratio:1; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:8px; font-weight:750;
  color:#141917; border:1.5px dashed rgba(20,26,24,.18); }
.pm-dias i.h { border:none; color:#fff; background:linear-gradient(135deg, #2BB568, #1E8F50); }
.pm-dias i.hoy { border:2px solid #22A05A; color:#22A05A; }
.pm-dias i.l { border:none; background:#F8F7F3; color:#7C847F; }
.pm-nueva .pm-pestanas { margin:auto 0 8px; height:38px; border-radius:15px; border:1px solid rgba(20,26,24,.08);
  background:rgba(255,255,255,.85); box-shadow:0 10px 20px -12px rgba(16,20,19,.4); }
.pm-nueva .pm-pestanas i.on { color:#22A05A; background:rgba(34,160,90,.14); border-radius:10px; width:34px; height:28px; }
.pm-nueva .pm-pestanas .ico-svg { width:15px; height:15px; }

/* El modo gimnasio, como en la app. */
.pg-segmentos { display:flex; gap:3px; }
.pg-segmentos i { flex:1; height:4px; border-radius:4px; background:rgba(255,255,255,.12); }
.pg-segmentos i.h { background:#8FE3B0; }
.pg-segmentos i.a { background:linear-gradient(90deg, #8FE3B0 60%, rgba(255,255,255,.12) 60%); }
.pg-pasos { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.pg-paso { border-radius:13px; background:#0D1210; border:1px solid rgba(255,255,255,.06); padding:8px 6px 7px; text-align:center; }
.pg-paso b { display:block; font-size:26px; font-weight:750; letter-spacing:-.05em; line-height:1; }
.pg-paso i { font-style:normal; font-size:7px; font-weight:800; letter-spacing:.14em; color:#8A928E; text-transform:uppercase; }
.pg-paso span { display:flex; justify-content:space-between; margin-top:6px; }
.pg-paso em { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:14px;
  background:rgba(255,255,255,.08); }
.pg-paso em.mas { background:rgba(143,227,176,.16); color:#8FE3B0; }
.pg-hecha { border-radius:99px; background:linear-gradient(135deg, #2BB568, #1E8F50); color:#fff;
  box-shadow:0 10px 18px -10px rgba(34,160,90,.8); }

/* ------------------------------------------------------------- la IA */
.pt-degradado-ia { background:linear-gradient(120deg, #22A05A, #1F8FB0 40%, #7B5CC4 75%, #D9822B);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.pt-ia-rejilla { display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-top:44px; }
.pt-ia-caja { border-radius:26px; padding:1.5px; background:linear-gradient(120deg, #22A05A, #1F8FB0 40%, #7B5CC4 75%, #D9822B);
  box-shadow:0 24px 50px -30px rgba(123,92,196,.6); transition:transform .5s var(--curva); }
.pt-ia-caja:hover { transform:translateY(-6px); }
.pt-ia-dentro { height:100%; border-radius:24.5px; background:var(--superficie); padding:20px; display:flex; flex-direction:column; }
.pt-ia-cab { display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.pt-destello { font-size:17px; background:linear-gradient(120deg, #22A05A, #1F8FB0, #7B5CC4); -webkit-background-clip:text;
  background-clip:text; color:transparent; animation:pt-destella 4s ease-in-out infinite; display:inline-block; }
@keyframes pt-destella { 0%, 70%, 100% { transform:none; } 80% { transform:scale(1.25) rotate(14deg); } }
.pt-ia-muestra { margin:14px 0 0; font-size:15px; line-height:1.55; color:var(--texto); }
.pt-ia-botones { display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }
.pt-ia-botones span { font-size:12.5px; font-weight:700; padding:7px 12px; border-radius:99px; border:1px solid var(--borde); }
.pt-charla { display:flex; flex-direction:column; gap:7px; margin-top:14px; }
.pt-charla span { max-width:92%; padding:9px 13px; border-radius:17px; font-size:13.5px; line-height:1.45; }
.pt-charla .yo { align-self:flex-end; background:#0E1311; color:#fff; border-bottom-right-radius:5px; }
.pt-charla .coach { align-self:flex-start; background:var(--superficie-2); border:1px solid var(--borde); border-bottom-left-radius:5px; }
.pt-semaforo-m { display:flex; align-items:center; gap:10px; margin-top:14px; padding:11px; border-radius:16px;
  background:color-mix(in srgb, #22A05A 9%, var(--superficie)); border:1px solid color-mix(in srgb, #22A05A 25%, transparent); }
.pt-semaforo-m i { width:26px; height:26px; flex:0 0 26px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #7EF0AE, #1E9A55);
  box-shadow:0 0 0 4px rgba(34,160,90,.18), 0 0 16px #3ed084; animation:pt-late 2.6s ease-in-out infinite; }
.pt-semaforo-m b { display:block; font-size:14px; }
.pt-semaforo-m small { font-size:12.5px; color:var(--apagado); }
.pt-ia-dentro h3 { font-size:17px; font-weight:700; letter-spacing:-.01em; margin:auto 0 4px; padding-top:18px; }
.pt-ia-dentro > p:last-child { margin:0; font-size:14.5px; line-height:1.55; color:var(--apagado); }
@media (max-width:1100px) { .pt-ia-rejilla { grid-template-columns:1fr 1fr; } }
@media (max-width:640px) { .pt-ia-rejilla { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce) {
  .pm-semaforo i, .pt-semaforo-m i, .pt-destello { animation:none; }
}
.pm-billete { display:flex; border-radius:15px; background:#fff; border:1px solid rgba(20,26,24,.08); overflow:hidden;
  box-shadow:0 10px 20px -16px rgba(16,20,19,.4); }
.pm-billete > div { width:62px; flex:0 0 62px; text-align:center; padding:7px 0;
  background:linear-gradient(160deg, color-mix(in srgb, #3D7BD9 15%, #fff), color-mix(in srgb, #3D7BD9 5%, #fff));
  border-right:1.5px dashed color-mix(in srgb, #3D7BD9 30%, transparent); }
.pm-billete > div small { font-size:6.5px; font-weight:800; letter-spacing:.12em; color:#3D7BD9; text-transform:uppercase; }
.pm-billete > div b { display:block; font-size:15px; letter-spacing:-.04em; color:#141917; }
.pm-billete > span { padding:7px 9px; line-height:1.25; min-width:0; }
.pm-billete > span b { display:block; font-size:9.5px; color:#141917; }
.pm-billete > span small { font-size:8px; color:#3D7BD9; font-weight:700; }