/* ============================================================
   PRODUCTO — primitivas y bloques centrales.

   Portado desde los componentes Tailwind de Evolfit
   (apps/web/src/components/landing/). Aquí no hay Tailwind: cada
   utilidad se traduce al token equivalente de variables.css.

   Este fichero define las PRIMITIVAS (.pr-section, .pr-eyebrow,
   .pr-h*, .pr-card, .pr-mono, .pr-check) que usan también
   product-hero.css, product-pricing.css y product-demo.css, así
   que se carga el PRIMERO de los cuatro.

   REGLA DE COLOR heredada del origen: el teal significa UNA cosa
   en esta página — "aprobado / firmado por ti". No se usa como
   decoración. Cuando un color lo dice todo en todas partes, deja
   de decir nada en el sitio donde importa, que aquí es el momento
   de la firma.
   ============================================================ */

/* ── Sección ─────────────────────────────────────────────────
   Ritmo vertical intencionadamente irregular (8/6/4rem): el
   espaciado uniforme es lo que hace que una página parezca
   generada. Son los tokens --section-py-lg / --section-py /
   --section-py-sm tal cual. */

.pr-section {
  padding-block: var(--section-py);
  /* Que el ancla del CTA no deje el título debajo de la barra fija. */
  scroll-margin-top: 5rem;
}

.pr-section--lg { padding-block: var(--section-py-lg); }
.pr-section--sm { padding-block: var(--section-py-sm); }

.pr-section--muted { background: var(--surface-muted); }

/* Banda de CONTRASTE: sube un peldaño, no baja. Sobre el marino de
   la página una banda más oscura desaparece dentro del fondo. */
.pr-section--contrast {
  background: var(--surface-contrast);
  border-block: 1px solid var(--border-subtle);
}

.pr-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-px);
}

/* ── Etiqueta de sección ─────────────────────────────────────
   No es decoración: marca dónde empieza cada bloque en una página
   larga y da el punto de anclaje al ojo que escanea. */

.pr-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--neutral-400);
}

.pr-eyebrow::before {
  content: '';
  width: 2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  flex-shrink: 0;
}

/* En la banda de contraste la etiqueta va en teal: es la sección de
   la aprobación, que es lo que ese color significa. */
.pr-eyebrow--accent { color: var(--teal-500); }

/* ── Titulares ───────────────────────────────────────────────
   Tracking negativo creciente: Archivo Black abre demasiado en
   tamaños grandes y sin esto el titular se deshilacha. */

.pr-h1, .pr-h2, .pr-h3 {
  font-family: var(--font-heading);
  color: var(--neutral-100);
  text-wrap: balance;
}

/* Interlineado 1.06 y no más apretado: el acento del hero lleva un
   trazo debajo y, cuando la frase se parte, con menos aire el trazo
   de un renglón queda pegado al siguiente y parece un tachón. */
.pr-h1 {
  font-size: clamp(2.5rem, 5.2vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.pr-h2 {
  font-size: clamp(2.25rem, 4.4vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.pr-h2--md {
  font-size: clamp(1.85rem, 3.4vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.pr-h3 {
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* ── Entradilla ──────────────────────────────────────────────── */

.pr-lead {
  max-width: 42rem;
  margin-top: 1.5rem;
  font-size: 1.125rem;
  line-height: 1.7;
  font-weight: 300;
  color: var(--neutral-400);
  text-wrap: pretty;
}

/* ── Dato tabular (series, ritmo, precio) ────────────────────
   Monoespaciada y con cifras de ancho fijo: un entrenador lee
   "4 × 6 · RIR 2" como un dato, no como una frase. */

.pr-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── Tarjeta ─────────────────────────────────────────────────── */

.pr-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 1.5rem;
}

/* ── Marca de verificación ───────────────────────────────────
   El SVG lo pinta el componente; aquí solo el tamaño y el color. */

.pr-check {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--teal-500);
}

/* Listas de puntos con marca de verificación, que se repiten en
   ecosistema, personalización, aprobación y precios. */
.pr-checklist {
  list-style: none;
  display: grid;
  gap: 0.75rem;
}

.pr-checklist li {
  display: flex;
  gap: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--neutral-400);
}

/* ── 2 · CAPACIDAD — el problema real ────────────────────────── */

.pr-capacity__grid {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .pr-capacity__grid {
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 5rem;
  }
}

/* Lo mecánico que se lleva la plataforma, TACHADO: se ve de un
   vistazo sin gastar tres tarjetas y un párrafo cada una. */
.pr-capacity__list {
  list-style: none;
  display: grid;
  gap: 0.65rem;
  flex-shrink: 0;
}

.pr-capacity__list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--neutral-400);
}

.pr-capacity__list span {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.pr-capacity__list .pr-check { margin-top: 0; }

/* ── 3 · CÓMO FUNCIONA ───────────────────────────────────────
   La numeración está GANADA: esto es una máquina de estados real
   (borrador → aprobación → entrega), no tres features en fila. */

.pr-steps {
  list-style: none;
  display: grid;
  gap: 2.5rem;
  margin-top: 3rem;
}

@media (min-width: 768px) {
  .pr-steps { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

.pr-step__head {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.pr-step__num {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--neutral-400);
}

/* El paso 2 es el del entrenador: es el único que se marca. */
.pr-step__num--self { color: var(--teal-500); }

.pr-step__rule {
  height: 1px;
  flex-grow: 1;
  background: var(--border-subtle);
}

.pr-step__title { margin-top: 1.25rem; }

.pr-step__body {
  margin-top: 0.75rem;
  line-height: 1.7;
  color: var(--neutral-400);
}

/* ── 4 · ECOSISTEMA ──────────────────────────────────────────── */

.pr-groups {
  display: grid;
  gap: 2.5rem;
  margin-top: 3rem;
}

@media (min-width: 768px) {
  .pr-groups { grid-template-columns: repeat(3, 1fr); column-gap: 2.5rem; }
}

.pr-group {
  border-top: 2px solid rgba(var(--neutral-200-rgb), 0.8);
  padding-top: 1.25rem;
}

.pr-group__list { margin-top: 1rem; }

/* ── 5 · PERSONALIZACIÓN ─────────────────────────────────────
   Una tira, no una sección entera. */

.pr-adapted__grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .pr-adapted__grid {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 5rem;
  }
}

.pr-adapted__body {
  margin-top: 1rem;
  line-height: 1.7;
  color: var(--neutral-400);
  text-wrap: pretty;
}

@media (min-width: 640px) {
  .pr-adapted__points { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; }
}

.pr-adapted__points li { color: var(--neutral-200); }

/* ── 6 · APROBACIÓN — la línea que no se cruza ───────────────── */

.pr-approval__grid {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .pr-approval__grid { grid-template-columns: repeat(2, 1fr); gap: 5rem; }
}

.pr-approval__body {
  line-height: 1.7;
  color: var(--neutral-300);
  text-wrap: pretty;
}

.pr-approval__points {
  margin-top: 1.75rem;
  gap: 1rem;
}

.pr-approval__points li {
  font-size: 1rem;
  color: var(--neutral-200);
}

.pr-approval__points .pr-check {
  width: 1.25rem;
  height: 1.25rem;
}

/* ── 8 · FAQ ─────────────────────────────────────────────────
   <details> nativo: accesible y plegable SIN JavaScript. La página
   se sirve estática y esto evita mandar el runtime de un acordeón
   al navegador solo para abrir y cerrar. */

.pr-faq__list {
  margin-top: 2rem;
  max-width: 48rem;
}

.pr-faq__item { border-bottom: 1px solid var(--border-subtle); }

.pr-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
  font-weight: 500;
  color: var(--neutral-100);
  cursor: pointer;
  list-style: none;
  transition: color var(--transition);
}

/* El marcador por defecto del <summary>, en las dos sintaxis. */
.pr-faq__q::-webkit-details-marker { display: none; }
.pr-faq__q::marker { content: ''; }

.pr-faq__q:hover { color: var(--teal-300); }

.pr-faq__q:focus-visible {
  outline: 2px solid var(--teal-300);
  outline-offset: 2px;
}

.pr-faq__sign {
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--neutral-400);
  transition: transform 0.25s var(--ease-out-quart);
}

.pr-faq__item[open] .pr-faq__sign { transform: rotate(45deg); }

.pr-faq__a {
  padding-bottom: 1.25rem;
  line-height: 1.7;
  color: var(--neutral-400);
  text-wrap: pretty;
}

/* ── Aviso médico ────────────────────────────────────────────
   Obligatorio: la página habla de prescripción de entrenamiento y
   de dietas. En Evolfit vive en el pie; aquí el pie es el del sitio
   y no lo lleva, así que va al final del contenido. */

.pr-disclaimer {
  border-top: 1px solid var(--border-subtle);
  padding-block: 2rem;
}

.pr-disclaimer p {
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--neutral-500);
  max-width: 70ch;
}

.pr-disclaimer strong { color: var(--neutral-400); }

@media (prefers-reduced-motion: reduce) {
  .pr-faq__sign { transition: none; }
}