/* GymReader — estilos del sitio (landing + ayuda), con el mismo sistema visual de la app */
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600;700&display=swap");

:root {
  --fondo: #070a13;                      /* fondo de la app */
  --panel: #0f172a;                      /* ventanas y menús de la app */
  --superficie: rgba(255, 255, 255, 0.05); /* tarjetas: bg-white/5 */
  --superficie-fuerte: rgba(255, 255, 255, 0.08);
  --borde: rgba(255, 255, 255, 0.1);     /* border-white/10 */
  --texto: #ffffff;
  --texto-suave: #94a3b8;                /* slate-400 */
  --texto-tenue: #64748b;                /* slate-500 */
  --primario: #2563eb;                   /* primary-600 */
  --primario-hover: #3b82f6;             /* primary-500 */
  --primario-claro: #60a5fa;             /* primary-400 */
  --verde: #22c55e;                      /* activo */
  --rojo: #ef4444;                       /* vencido */
  --amarillo: #eab308;                   /* deuda / aviso */
  --ancho: 1120px;
  --fuente: "Josefin Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--primario-claro); }
:focus-visible { outline: 3px solid var(--primario-hover); outline-offset: 3px; border-radius: 8px; }

h1, h2, h3 { font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.35rem; }
p { margin: 0; }

.contenedor { width: min(100% - 2rem, var(--ancho)); margin-inline: auto; }

/* Etiquetas chicas, como en la app (text-xs font-bold uppercase tracking-widest) */
.etiqueta { display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--texto-tenue); }

/* Tarjeta de la app */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 2rem; }

/* Marca */
.marca { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--texto); }
.marca img { width: 34px; height: 34px; border-radius: 10px; background: #fff; padding: 3px; }
.marca span { font-weight: 700; font-size: 1.45rem; letter-spacing: -0.04em; padding-top: 0.2rem; }

/* Barra superior flotante, como el Header de la app */
.barra { position: sticky; top: 0; z-index: 20; padding: 0.75rem 0; }
.barra .contenedor {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 64px; padding: 0 1.25rem;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--borde); border-radius: 1rem;
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.barra nav { display: flex; align-items: center; gap: 0.25rem; }
.barra nav a:not(.boton) { color: var(--texto-suave); text-decoration: none; padding: 0.5rem 1rem; border-radius: 0.75rem; transition: background-color 0.2s, color 0.2s; }
.barra nav a:not(.boton):hover { color: var(--texto); background: rgba(255, 255, 255, 0.1); }

/* Botones de la app */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: 700 1.0625rem var(--fuente); text-decoration: none; cursor: pointer;
  padding: 0.95rem 1.5rem; border-radius: 1rem; border: 1px solid transparent;
  transition: transform 0.12s ease, background-color 0.2s ease;
}
.boton:active { transform: scale(0.95); }
.boton-principal { background: var(--primario); color: #fff; box-shadow: 0 10px 25px -8px rgba(37, 99, 235, 0.55); }
.boton-principal:hover { background: var(--primario-hover); }
.boton-secundario { background: var(--superficie); color: var(--texto); border-color: var(--borde); }
.boton-secundario:hover { background: rgba(255, 255, 255, 0.1); }
.boton-verde { background: #16a34a; color: #fff; box-shadow: 0 10px 25px -8px rgba(22, 163, 74, 0.5); }
.boton-verde:hover { background: var(--verde); }
.barra .boton { padding: 0.6rem 1.1rem; font-size: 0.95rem; border-radius: 0.75rem; }

.pie { border-top: 1px solid var(--borde); padding: 2.5rem 0; color: var(--texto-tenue); font-size: 0.95rem; }
.pie .contenedor { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.pie nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.pie a { color: var(--texto-suave); }

@media (max-width: 720px) {
  .barra nav .solo-escritorio { display: none; }
  body { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.boton-claro { background: #fff; color: var(--panel); }
.boton-claro:hover { background: #e2e8f0; }
/* Pastilla de estado, como las etiquetas de la tarjeta de socio */
.pastilla { display: inline-flex; align-items: center; padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; border: 1px solid; }