/* ============================================================
   PRODUCTO — hero y tarjeta de plan.

   Depende de las primitivas de product-sections.css (.pr-h1,
   .pr-mono, .pr-card…), que se carga antes.
   ============================================================ */

.pr-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-subtle);
  padding-block: var(--section-py);
}

/* Retícula de fondo: evoca la hoja pautada donde se escribe un
   programa. Muy tenue — es textura, no dibujo. */
.pr-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image:
    linear-gradient(to right, var(--neutral-200) 1px, transparent 1px),
    linear-gradient(to bottom, var(--neutral-200) 1px, transparent 1px);
  background-size: 56px 56px;
}

.pr-hero__grid {
  display: grid;
  gap: 3.5rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .pr-hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 5rem;
  }
}

.pr-hero__badge {
  display: inline-flex;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-btn);
  padding: 0.375rem 0.75rem;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neutral-400);
}

.pr-hero__title { margin-top: 1.75rem; }

.pr-hero__title span { display: block; }

/* El acento va con TRAZO y no coloreado: el teal significa
   "aprobado" en esta página. Y en dos bloques y no una frase con un
   <span> dentro, porque si la línea se parte por en medio el trazo
   cruza dos renglones y parece un error de maqueta. */
.pr-hero__accent {
  background-image: linear-gradient(
    to top,
    var(--teal-500) 0,
    var(--teal-500) 5px,
    transparent 5px
  );
  padding-bottom: 0.375rem;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.pr-hero__sub { margin-top: 2rem; }

.pr-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 2.25rem;
}

.pr-hero__note {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: var(--neutral-400);
}

.pr-hero__trust {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.875rem;
  color: var(--neutral-400);
}

.pr-hero__trust svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* ── Tarjeta de plan ─────────────────────────────────────────
   Pieza de firma de la página: es UNA hoja de entreno de verdad
   —bloque, series, RIR, la cinta con su velocidad e inclinación—
   que pasa de «Borrador · generado con IA» a «Aprobado por ti».
   Ese cambio de estado ES la tesis del producto, contado con el
   objeto propio del oficio en vez de con una captura.

   Es el único sitio de la página donde hay movimiento y el único
   donde el teal aparece a lo grande: significa «firmado». */

.pr-plan { width: 100%; }

.pr-plan__card {
  background: var(--surface-card);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  transition: border-color 0.7s var(--ease-out-quart),
              box-shadow 0.7s var(--ease-out-quart);
}

/* El estado firmado. Lo pone el script tras 1,8 s; sin JS la tarjeta
   se queda en borrador, que es un estado real y coherente con el pie. */
.pr-plan__card[data-state='approved'] {
  border-style: solid;
  border-color: var(--teal-500);
  box-shadow: 0 0 0 4px rgba(var(--teal-300-rgb), 0.12);
}

/* Etiqueta EJEMPLO, arriba y visible: esta tarjeta NO es una captura
   del producto, y hacerla pasar por una sería vender algo que no es. */
.pr-plan__example {
  display: inline-flex;
  margin-bottom: 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-btn);
  padding: 0.125rem 0.5rem;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--neutral-400);
}

.pr-plan__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-subtle);
}

.pr-plan__label {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--neutral-400);
}

.pr-plan__client {
  margin-top: 0.25rem;
  font-weight: 600;
  color: var(--neutral-100);
}

.pr-plan__phase {
  border-radius: var(--radius-btn);
  background: var(--surface-muted);
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  color: var(--neutral-400);
}

.pr-plan__body { padding-top: 1rem; }

.pr-plan__exercises {
  list-style: none;
  display: grid;
  gap: 0.625rem;
  margin-top: 0.75rem;
}

.pr-plan__exercises li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.875rem;
  color: var(--neutral-200);
}

.pr-plan__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pr-plan__data {
  display: flex;
  flex-shrink: 0;
  align-items: baseline;
  gap: 0.75rem;
}

.pr-plan__scheme { font-weight: 500; }

.pr-plan__intensity {
  font-size: 0.75rem;
  color: var(--neutral-400);
}

/* Pie: el estado. Es lo que cambia. */
.pr-plan__foot {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle);
}

.pr-plan__state {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--neutral-400);
  transition: color 0.5s var(--ease-out-quart);
}

.pr-plan__card[data-state='approved'] .pr-plan__state { color: var(--teal-500); }

.pr-plan__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface-muted);
  transition: background-color 0.5s var(--ease-out-quart);
}

/* Texto MARINO sobre el cian, no blanco: blanco sobre #0EA5E9 se
   queda en 2.4:1 y el check deja de verse. */
.pr-plan__card[data-state='approved'] .pr-plan__dot {
  background: var(--teal-500);
  color: var(--neutral-950);
}

.pr-plan__dot svg { width: 0.875rem; height: 0.875rem; }

/* Los dos iconos ocupan el mismo hueco y solo se muestra el del
   estado activo: así el pie no da un salto al firmarse. */
.pr-plan__card[data-state='draft'] .pr-plan__icon--approved,
.pr-plan__card[data-state='approved'] .pr-plan__icon--draft { display: none; }

.pr-plan__state-text {
  font-size: 0.75rem;
  font-weight: 500;
}

.pr-plan__signed {
  margin-left: auto;
  font-size: 0.65rem;
  color: var(--neutral-400);
}

.pr-plan__card[data-state='draft'] .pr-plan__signed { display: none; }

/* El pie cuenta en palabras lo que la animación cuenta en
   movimiento: quien no vea la transición —lector de pantalla,
   prefers-reduced-motion, JS desactivado— no se pierde nada. */
.pr-plan__caption {
  margin-top: 1rem;
  max-width: 24rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--neutral-400);
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  .pr-plan__card,
  .pr-plan__state,
  .pr-plan__dot { transition: none; }
}