/* ===========================================================================
   Landing comercial de PuntoClub — material de venta para clubes deportivos.
   =========================================================================== */

/* Los colores salen del logo, no de un gusto: el azul de "Club" es #23459c y
   el marino del símbolo es #031835. El fondo es ese mismo marino profundizado y
   el acento es ese mismo azul aclarado lo justo para leerse encima —el mismo
   tono que usa la versión clara del logo—. Así la página y la marca son la
   misma cosa.

   El verde y el rojo NO son decorativos ni de marca: son los que el sistema usa
   para "al día" y "debe". Se reservan para eso y para nada más.

   (No hay motivos de agua: el cliente puede ser un gimnasio o una escuela de
   fútbol, no solo un club de piscina.) */
:root{
  --marca:#23459c;         /* el azul de "Club", tal cual del logo */
  --azul:#7da6ff;          /* ese azul aclarado: acento sobre fondo oscuro */
  --azul-oscuro:#3d63d8;   /* relleno de botón, con texto blanco encima */
  --naranja:#ff8a5c;       /* "por vencer" */
  --verde:#35c17f;         /* "al día" */
  --rojo:#ff6b6b;          /* "debe" */
  --fondo:#040d1e;         /* el marino del logo, más profundo */
  --fondo-2:#07152c;
  --panel:#0b1c38;
  --panel-2:#112549;
  --linea:#1e3560;
  --texto:#eaf0fb;
  --texto-2:#a4b6d4;
  --texto-3:#7286a8;
  --max:1160px;
  /* La del logo: geométrica, de bowls circulares y terminaciones suaves. Poppins
     es la que más se le acerca de las disponibles. Va en caja mixta, como el
     propio logo —"PuntoClub", no "PUNTOCLUB"—, y con el tracking cerrado.
     Plex Mono se queda para las cifras: las hace leer como un registro. */
  --titular:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --cuerpo:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --datos:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
body{margin:0;font-family:var(--cuerpo);background:var(--fondo);color:var(--texto);line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
html{scroll-behavior:smooth}
img{max-width:100%;display:block}
a{color:var(--azul);text-decoration:none}
h1,h2,h3{line-height:1.1;margin:0 0 .5em}

.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.seccion{padding:92px 0;position:relative}
.seccion--panel{background:linear-gradient(180deg,transparent,var(--fondo-2) 12%,var(--fondo-2) 88%,transparent)}

.eyebrow{display:inline-block;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--azul);font-weight:700;margin-bottom:14px}
.titulo-seccion{font-family:var(--titular);font-weight:700;font-size:clamp(2rem,4.6vw,3.05rem);
  letter-spacing:-.028em;line-height:1.06}
.lead{color:var(--texto-2);font-size:1.08rem;max-width:660px}
.centro{text-align:center}
.centro .lead,.lead.centro{margin-left:auto;margin-right:auto}
.cabecera{margin-bottom:52px}
/* No todas las secciones centradas: un encabezado alineado a la izquierda con
   su filete rompe el ritmo de "antetítulo + titular gigante" repetido. */
.cabecera--filete{border-left:3px solid var(--azul);padding-left:22px;text-align:left;
  margin-bottom:8px}
.cabecera--filete .eyebrow{margin-bottom:8px}

/* ---------------------------------- nav ---------------------------------- */
.nav{position:fixed;inset:0 0 auto;z-index:60;display:flex;align-items:center;gap:16px;padding:15px 24px;
  transition:background .25s,padding .25s}
.nav.fija{background:rgba(5,11,18,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--linea);padding:10px 24px}
.nav__marca{display:flex;align-items:center;gap:10px;color:var(--texto)}
/* El logo ya dice el nombre: al lado no va texto que lo repita. */
.nav__logo{width:min(232px,52vw);height:auto;display:block}
.nav__links{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav__links a{padding:8px 13px;font-size:14px;font-weight:500;color:var(--texto-2);border-radius:9px}
.nav__links a:hover{color:#fff;background:var(--panel)}
.nav__toggle{display:none;margin-left:auto;background:none;border:1px solid var(--linea);border-radius:9px;
  width:40px;height:40px;color:#fff;font-size:18px;cursor:pointer}

/* Botón plano y de esquina corta. El degradado con halo azul es la firma de
   cualquier plantilla: un color sólido y un borde nítido se ven decididos, y
   además el texto encima se lee mejor. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 26px;border-radius:6px;
  font-weight:700;font-size:15px;border:1px solid transparent;cursor:pointer;
  transition:background .16s,border-color .16s,color .16s}
.btn--primario{background:var(--azul-oscuro);color:#fff}
.btn--primario:hover{background:#527ff0}
.btn--fantasma{border-color:var(--texto-3);color:var(--texto);background:transparent}
.btn--fantasma:hover{border-color:var(--texto);background:rgba(255,255,255,.04)}
.btn--naranja{background:var(--naranja);color:#fff}
.btn--sm{padding:9px 16px;font-size:13.5px;border-radius:5px}

/* --------------------------------- hero ---------------------------------- */
.hero{position:relative;padding:132px 0 84px;overflow:hidden}
.hero::before{content:'';position:absolute;inset:-30% -10% auto;height:820px;pointer-events:none;
  background:
    radial-gradient(760px 420px at 22% 8%,rgba(61,99,216,.30),transparent 62%),
    radial-gradient(620px 380px at 82% 26%,rgba(35,69,156,.22),transparent 64%)}
.hero__grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:48px;align-items:center;position:relative}
.hero h1{font-family:var(--titular);font-weight:700;font-size:clamp(2.4rem,4.8vw,3.7rem);letter-spacing:-.032em;
  margin-bottom:20px}   /* caja mixta, como el logo */
.hero h1 em{font-style:normal;color:var(--azul)}
.hero__lead{font-size:1.15rem;color:var(--texto-2);margin-bottom:30px;max-width:560px}
.hero__acciones{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.hero__nota{font-size:13px;color:var(--texto-3)}
.pildoras{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.pildora{font-size:12px;font-weight:600;padding:5px 12px;border-radius:30px;border:1px solid var(--linea);
  background:var(--panel);color:var(--texto-2)}

/* maqueta del panel en el hero */
.mock{background:var(--panel);border:1px solid var(--linea);border-radius:8px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.5);transform:perspective(1400px) rotateY(-7deg) rotateX(3deg)}
.mock__barra{display:flex;align-items:center;gap:6px;padding:11px 14px;background:var(--fondo-2);
  border-bottom:1px solid var(--linea)}
.mock__punto{width:10px;height:10px;border-radius:50%;background:#2a4258}
.mock__url{margin-left:10px;font-size:11.5px;color:var(--texto-3);font-family:ui-monospace,monospace}
.mock__cuerpo{padding:16px}
.mock__kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:12px}
.mock__kpi{background:var(--panel-2);border:1px solid var(--linea);border-radius:6px;padding:11px 12px}
.mock__kpi span{display:block;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3)}
.mock__kpi b{font-size:1.3rem;font-weight:800}
.mock__kpi.ok b{color:var(--verde)} .mock__kpi.warn b{color:#f5b53d} .mock__kpi.bad b{color:#ff5a63}
.mock__fila{display:flex;align-items:center;gap:9px;padding:9px 11px;border-bottom:1px solid rgba(28,49,69,.7);font-size:12px}
.mock__av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--azul),var(--azul-oscuro));
  display:grid;place-items:center;font-size:10px;font-weight:800;color:#04121f;flex:0 0 auto}
.mock__tag{margin-left:auto;font-size:10px;font-weight:700;padding:2px 9px;border-radius:20px}
.mock__tag.ok{background:rgba(46,204,143,.16);color:var(--verde)}
.mock__tag.warn{background:rgba(245,181,61,.16);color:#f5b53d}
.mock__tag.bad{background:rgba(255,90,99,.16);color:#ff5a63}

/* -------------------------------- bloques -------------------------------- */
.cols{display:grid;gap:20px}
.cols--2{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.cols--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cols--4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.tarjeta{background:var(--panel);border:1px solid var(--linea);border-radius:8px;padding:26px 24px;
  transition:transform .2s,border-color .2s}
.tarjeta:hover{transform:translateY(-4px);border-color:var(--azul)}
.tarjeta__ico{font-size:1.9rem;margin-bottom:12px}
.tarjeta h3{font-size:1.12rem;margin-bottom:7px}
.tarjeta p{color:var(--texto-2);font-size:.96rem;margin:0}

.dolor{border-left:3px solid var(--naranja);background:linear-gradient(90deg,rgba(255,107,107,.07),transparent);
  padding:18px 22px;border-radius:0 14px 14px 0;margin-bottom:12px}
.dolor b{display:block;margin-bottom:3px}
.dolor span{color:var(--texto-2);font-size:.95rem}

.beneficio{display:grid;grid-template-columns:46px 1fr;gap:16px;margin-bottom:24px;align-items:start}
.beneficio__ico{width:46px;height:46px;border-radius:6px;background:var(--panel-2);border:1px solid var(--linea);
  display:grid;place-items:center;font-size:20px}
.beneficio b{display:block;margin-bottom:3px;font-size:1.03rem}
.beneficio span{color:var(--texto-2);font-size:.96rem}

.pasos{counter-reset:paso;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.paso{background:var(--panel);border:1px solid var(--linea);border-radius:8px;padding:26px 22px;position:relative}
.paso::before{counter-increment:paso;content:counter(paso);position:absolute;top:-16px;left:22px;
  width:34px;height:34px;border-radius:6px;background:var(--azul);color:#04121f;
  display:grid;place-items:center;font-family:var(--titular);font-size:16px}
.paso h3{margin-top:10px;font-size:1.05rem}
.paso p{color:var(--texto-2);font-size:.95rem;margin:0}

/* align-items:start y no el stretch de fábrica: la tarjeta de portería tiene
   una sola línea y estirada hasta la altura del director dejaba un vacío que
   parecía un error. Que cada una mida lo que dice. */
.roles{display:grid;gap:14px;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(235px,1fr))}
.rol{background:var(--panel);border:1px solid var(--linea);border-radius:8px;padding:22px 20px}
.rol__ico{font-size:1.7rem;margin-bottom:8px}
.rol b{display:block;font-size:1rem;margin-bottom:5px}
.rol ul{list-style:none;padding:0;margin:10px 0 0}
.rol li{font-size:.87rem;color:var(--texto-2);padding:4px 0 4px 17px;position:relative}
.rol li::before{content:'▸';position:absolute;left:0;color:var(--azul)}

.precios{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:stretch}
.precio{background:var(--panel);border:1px solid var(--linea);border-radius:20px;padding:32px 26px;
  display:flex;flex-direction:column;position:relative}
.precio--destacado{border-color:var(--azul);box-shadow:0 0 0 1px var(--azul),0 24px 60px rgba(0,0,0,.45)}
.precio--destacado::before{content:'Recomendado';position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--azul);color:#04121f;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 14px;border-radius:20px;white-space:nowrap}
.precio h3{font-family:var(--titular);font-weight:600;letter-spacing:-.02em;font-size:1.3rem}
.precio__valor{font-size:2.3rem;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:6px 0 2px}
.precio__valor small{font-size:.85rem;font-weight:500;color:var(--texto-2);letter-spacing:0}
.precio__resumen{color:var(--texto-2);font-size:.95rem;min-height:48px}
.precio ul{list-style:none;padding:0;margin:18px 0 24px;flex:1}
.precio li{padding:7px 0 7px 25px;position:relative;color:var(--texto-2);font-size:.93rem;
  border-bottom:1px solid rgba(28,49,69,.6)}
.precio li::before{content:'✓';position:absolute;left:0;color:var(--verde);font-weight:800}


/* --------- sello de prueba social: el club real que ya lo usa ----------- */
.sello{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;
  color:var(--verde);background:rgba(46,204,143,.09);border:1px solid rgba(46,204,143,.3);
  border-radius:30px;padding:7px 15px;margin:0 0 14px}
.sello a{color:var(--verde);text-decoration:underline;text-underline-offset:2px}

/* ------- el dolor pega más sin explicación: solo la frase del cliente ---- */
.quotes{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.quotes blockquote{
  margin:0;padding:26px 26px 26px 30px;position:relative;
  background:var(--panel);border:1px solid var(--linea);border-left:3px solid var(--naranja);
  border-radius:0 16px 16px 0;
  font-size:1.18rem;font-weight:600;line-height:1.35;color:var(--texto);
  display:flex;align-items:center;min-height:104px;
}
.quotes blockquote::before{content:'“';position:absolute;top:6px;left:12px;
  font-family:var(--titular);font-size:2.6rem;color:var(--naranja);opacity:.28;line-height:1}


/* --------------- los tres beneficios, con los módulos como chips -------- */
/* --------------------------- las tres cosas ------------------------------
   LA FIRMA: la planilla. Todo club pequeño —de natación, de pesas, de fútbol—
   lleva la misma hoja: nombres a la izquierda, meses arriba, una marca por
   casilla. Es lo único que comparten todos, y es exactamente lo que este
   producto reemplaza, así que el separador entre bloques no es un filete: es
   una fila de casillas, algunas marcadas.

   Se descartó numerar 01/02/03 —tres funciones no son una secuencia— y también
   el motivo de piscina, porque el cliente puede ser un gimnasio. */
.golpes{list-style:none;margin:0;padding:0}
.golpe{display:grid;gap:10px 40px;padding:34px 0;
  grid-template-columns:minmax(0,1fr) minmax(0,290px);align-items:start;
  border-bottom:14px solid transparent;
  border-image:repeating-linear-gradient(90deg,
      var(--linea) 0 22px, transparent 22px 26px) 14}
.golpe:last-child{border-bottom:none}
.golpe h3{font-family:var(--titular);font-weight:600;font-size:1.4rem;
  letter-spacing:-.02em;margin:0 0 8px;line-height:1.15}
.golpe p{color:var(--texto-2);font-size:1.04rem;margin:0;max-width:46ch}

/* Cada etiqueta es una casilla marcada de esa hoja. */
.golpe__lista{list-style:none;margin:8px 0 0;padding:0;columns:2;column-gap:24px}
.golpe__lista li{font-family:var(--datos);font-size:.82rem;color:var(--texto-2);
  padding-left:19px;position:relative;break-inside:avoid;line-height:2.1}
.golpe__lista li::before{content:'';position:absolute;left:0;top:.75em;
  width:9px;height:9px;background:var(--verde);opacity:.85}

@media (max-width:860px){
  .golpe{grid-template-columns:minmax(0,1fr);gap:8px;padding:26px 0;border-bottom-width:10px}
  .golpe h3{font-size:1.55rem}
}
/* ------------------------- LA PLANILLA (la firma) ------------------------
   El objeto que todo club reconoce: nombres a la izquierda, meses arriba, una
   marca por casilla. Las casillas se marcan solas al cargar, escalonadas: la
   promesa del producto contada sin una sola frase de venta. Es EL gesto de la
   página; por eso todo lo demás está callado. */
.hoja{background:var(--panel);border:1px solid var(--linea);border-radius:10px;
  padding:6px;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.hoja__cab,.hoja__fila{display:grid;grid-template-columns:minmax(0,1fr) repeat(4,42px);
  gap:6px;align-items:center;padding:9px 12px}
.hoja__cab{border-bottom:1px solid var(--linea)}
.hoja__titulo{font-family:var(--titular);font-weight:600;letter-spacing:-.01em;
  font-size:.95rem;color:var(--texto-2)}
.hoja__mes{font-family:var(--datos);font-size:.66rem;color:var(--texto-3);text-align:center;
  letter-spacing:.06em}
.hoja__fila+.hoja__fila{border-top:1px solid rgba(255,255,255,.045)}
.hoja__quien b{display:block;font-size:.9rem;font-weight:600;line-height:1.2}
.hoja__quien small{font-size:.72rem;color:var(--texto-3)}

/* La casilla empieza vacía y se marca sola. */
.hoja__celda{display:block;height:26px;border-radius:3px;background:rgba(255,255,255,.05);
  border:1px solid var(--linea);animation:marcar .45s ease-out both;animation-delay:var(--t)}
.hoja__celda--ok{--c:var(--verde)}
.hoja__celda--pend{--c:var(--naranja)}
.hoja__celda--debe{--c:var(--rojo)}
@keyframes marcar{
  from{background:rgba(255,255,255,.05);border-color:var(--linea);transform:scale(.82)}
  to  {background:color-mix(in srgb,var(--c) 26%,transparent);border-color:var(--c);transform:none}
}
.hoja__pie{padding:10px 12px 8px;border-top:1px solid var(--linea)}
.hoja__pie span{font-family:var(--datos);font-size:.7rem;color:var(--verde);letter-spacing:.08em}

/* Quien pidió menos movimiento ve la hoja ya marcada, sin animación. */
@media (prefers-reduced-motion:reduce){
  .hoja__celda{animation:none;background:color-mix(in srgb,var(--c) 26%,transparent);
    border-color:var(--c)}
}
@media (max-width:640px){
  .hoja__cab,.hoja__fila{grid-template-columns:minmax(0,1fr) repeat(4,30px);padding:8px 10px}
  .hoja__celda{height:22px}
}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:11.5px;font-weight:600;color:var(--texto-2);background:var(--panel-2);
  border:1px solid var(--linea);border-radius:20px;padding:4px 11px}

/* ------------- capturas reales del sistema, no ilustraciones ------------ */
.capturas{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));margin-bottom:26px}
.captura{margin:0;background:var(--panel);border:1px solid var(--linea);border-radius:8px;overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.4)}
.captura__barra{display:flex;align-items:center;gap:6px;padding:10px 13px;background:var(--fondo-2);
  border-bottom:1px solid var(--linea)}
.captura__barra span{width:9px;height:9px;border-radius:50%;background:#2a4258}
.captura__barra em{margin-left:8px;font-style:normal;font-size:11px;color:var(--texto-3);
  font-family:ui-monospace,monospace}
.captura img{width:100%;display:block}
.captura figcaption{padding:14px 18px;font-size:13.5px;color:var(--texto-2)}

/* -------- el precio suelto no dice nada: al lado va la referencia ------- */
.precio__ancla{font-size:12.5px;color:var(--verde);font-weight:600;margin:0 0 4px}

.preguntas{max-width:760px;margin:44px auto 0}

.demo{background:var(--panel);border:1px solid var(--linea);border-radius:20px;padding:34px 30px}
.demo__nota{text-align:center;color:var(--texto-2);margin:0 0 18px;font-size:1.02rem}

/* ------------------------------ carrusel --------------------------------
   Se muestra una pantalla a la vez con su explicación, en vez de una rejilla
   de miniaturas donde no se lee nada. Se mueve con las flechas, con los puntos
   o arrastrando: en el celular se arrastra, que es lo natural. */
.carrusel{margin-bottom:26px}
.carrusel__viewport{overflow:hidden;border-radius:8px}
.carrusel__pista{display:flex;transition:transform .4s cubic-bezier(.4,0,.2,1);
  scroll-snap-type:x mandatory}
.carrusel__slide{flex:0 0 100%;margin:0;background:var(--panel);border:1px solid var(--linea);
  border-radius:8px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.carrusel__slide img{width:100%;display:block}
.carrusel__slide figcaption{padding:16px 20px;font-size:14px;color:var(--texto-2)}
.carrusel__slide figcaption b{display:block;color:var(--texto);font-size:1.05rem;margin-bottom:4px}

.carrusel__mando{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:18px}
.carrusel__flecha{width:42px;height:42px;border-radius:50%;flex:0 0 auto;cursor:pointer;
  background:var(--panel);border:1px solid var(--linea);color:var(--texto);font-size:22px;line-height:1}
.carrusel__flecha:hover{border-color:var(--azul);color:var(--azul)}
.carrusel__puntos{display:flex;gap:9px}
.carrusel__puntos button{width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  background:var(--linea);border:none;transition:background .2s,width .2s}
.carrusel__puntos button.activo{background:var(--azul);width:26px;border-radius:5px}

@media (max-width:640px){
  .carrusel__slide figcaption{padding:14px 16px;font-size:13.5px}
  .carrusel__flecha{width:46px;height:46px}
}

details.faq{border-bottom:1px solid var(--linea);padding:4px 0}
details.faq summary{padding:16px 4px;cursor:pointer;font-weight:600;list-style:none;display:flex;gap:12px;align-items:center}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:'+';margin-left:auto;color:var(--azul);font-size:20px;font-weight:400}
details.faq[open] summary::after{content:'–'}
details.faq p{color:var(--texto-2);margin:0 4px 18px;font-size:.97rem}

.cierre{background:linear-gradient(135deg,rgba(61,99,216,.20),rgba(35,69,156,.10));
  border:1px solid var(--linea);border-radius:24px;padding:52px 34px;text-align:center}
.cierre h2{font-family:var(--titular);font-weight:700;letter-spacing:-.028em;
  font-size:clamp(1.8rem,4.2vw,2.6rem);margin-bottom:14px}
.cierre .lead{font-size:1.05rem}
.cierre__acciones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.cierre__nota{font-size:12.5px;color:var(--texto-3);margin:18px 0 0}

.pie{border-top:1px solid var(--linea);padding:34px 0;color:var(--texto-3);font-size:13px}
.pie__fila{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}

.revelar{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease}
.revelar.visible{opacity:1;transform:none}

@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:36px}
  .mock{transform:none}
  .nav__links{position:fixed;inset:62px 14px auto 14px;flex-direction:column;align-items:stretch;display:none;
    background:rgba(5,11,18,.97);border:1px solid var(--linea);border-radius:8px;padding:10px;backdrop-filter:blur(14px)}
  .nav__links.abierto{display:flex}
  .nav__toggle{display:block}
  .seccion{padding:64px 0}
  .mock__kpis{grid-template-columns:repeat(2,1fr)}
}

/* ------------------------------- EL MANUAL -------------------------------
   Una lista de requisitos se lee de corrido, no se escanea como un inventario:
   por eso no reusa .golpe__lista, que va a dos columnas y en monoespaciada
   porque allá son cifras de un registro. Aquí son frases. */
.lista-manual{list-style:none;margin:10px 0 0;padding:0}
.lista-manual li{font-size:.95rem;color:var(--texto-2);padding:5px 0 5px 20px;position:relative}
.lista-manual li::before{content:'▸';position:absolute;left:0;color:var(--azul)}
.lista-manual b{color:var(--texto)}

/* La descripción del rol, debajo del nombre y antes de lo que puede hacer. */
.rol small{display:block;margin-bottom:4px;font-size:.83rem;line-height:1.45}

/* La barra es fija: sin esto el ancla deja el título tapado. */
[id]{scroll-margin-top:88px}