/* GLOW · Fase 3 · Programa de Pilates
   Landing de venta, temario y portal privado de videos. */

/* ---------- Landing ---------- */
.pl-page {
  min-height: 100vh;
  padding: 0 0 90px;
  background: var(--bg);
}

.pl-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 22px var(--gutter);
}

.pl-top img { height: 42px; width: auto; }

.pl-hero {
  max-width: 780px;
  margin: 0 auto;
  padding: 40px var(--gutter) 0;
  text-align: center;
}

.pl-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
}

.pl-hero h1 {
  margin: 18px 0 0;
  font-family: var(--serif);
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  line-height: 1.08;
  color: var(--cream);
}

.pl-hero .pl-tagline {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  color: var(--gold-soft);
}

.pl-hero p.pl-desc {
  margin: 22px auto 0;
  max-width: 620px;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--cream-mute);
}

.pl-section {
  max-width: var(--container);
  margin: 0 auto;
  padding: 62px var(--gutter) 0;
}

.pl-section h2 {
  margin: 0 0 24px;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  color: var(--cream);
  text-align: center;
}

.pl-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.pl-benefit {
  display: flex;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-soft);
  color: var(--cream-mute);
  line-height: 1.6;
}

.pl-benefit svg { flex: 0 0 auto; margin-top: 2px; color: var(--gold); }

/* ---------- Precios ---------- */
.pl-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  max-width: 860px;
  margin: 0 auto;
}

.pl-plan {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px 26px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
  background: var(--surface-strong);
  text-align: center;
}

.pl-plan.is-featured {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold-line), var(--shadow-card);
}

.pl-plan-name {
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}

.pl-plan-price {
  font-family: var(--serif);
  font-size: 3rem;
  line-height: 1;
  color: var(--cream);
}

.pl-plan-price sup { font-size: 1.2rem; vertical-align: super; }

.pl-plan-note {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--cream-mute);
  min-height: 3em;
}

.pl-plan-tag {
  align-self: center;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--gold-glow);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
}

/* ---------- Temario ---------- */
.pl-modules {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 780px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.pl-module {
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-soft);
  overflow: hidden;
}

.pl-module-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
}

.pl-module-head h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--cream);
}

.pl-module-meta {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream-dim);
  white-space: nowrap;
}

.pl-module-desc {
  margin: 0;
  padding: 0 22px 14px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--cream-mute);
}

.pl-lessons {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--gold-line-soft);
}

.pl-lesson {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--gold-line-soft);
  color: var(--cream-mute);
}

.pl-lesson:last-child { border-bottom: 0; }

.pl-lesson-name { display: flex; align-items: center; gap: 10px; }
.pl-lesson-num { font-family: var(--mono); font-size: 0.8rem; color: var(--gold-deep); }
.pl-lesson-dur { font-size: 0.8rem; color: var(--cream-dim); white-space: nowrap; }

/* Clase abierta en el portal privado (link activo) */
a.pl-lesson { text-decoration: none; transition: background 0.25s var(--ease); }
a.pl-lesson:hover { background: var(--surface); }
a.pl-lesson.is-current { background: var(--gold-glow); color: var(--cream); }

/* ---------- Portal privado ---------- */
.pl-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--radius-lg);
  background: #000;
}

.pl-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.pl-player-empty {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px dashed var(--gold-line-soft);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
  color: var(--cream-dim);
}

.pl-locked {
  max-width: 560px;
  margin: 0 auto;
  padding: 34px 28px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
  background: var(--surface-strong);
  text-align: center;
}

.pl-locked h2 { margin: 0 0 10px; font-family: var(--serif); color: var(--cream); }
.pl-locked p { margin: 0 0 18px; color: var(--cream-mute); line-height: 1.65; }

.pl-foot {
  max-width: var(--container);
  margin: 70px auto 0;
  padding: 0 var(--gutter);
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

@media (max-width: 640px) {
  .pl-module-head { flex-direction: column; gap: 4px; }
  .pl-lesson { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ---------- Landing de venta de los 60 días ----------
   Todo va bajo .pl-venta: .pl-section y .pl-hero los comparten el portal
   privado, la página de gracias y la de cuenta, y ahí el texto centrado sí es
   lo correcto. */
.pl-venta .pl-section {
  /* Arriba Y abajo. Con padding solo arriba, la última tarjeta de una sección
     quedaba pegada a lo que viniera después: el borde de la banda siguiente
     salía justo del canto de la caja, sin aire. */
  padding-top: 76px;
  padding-bottom: 76px;
}

.pl-venta .pl-section h2 {
  margin: 0 0 20px;
  text-align: left;
}

.pl-venta .pl-eyebrow {
  display: block;
  margin-bottom: 12px;
}

/* La cabecera del sitio (.nav) va fija arriba. Aquí NO se le reserva sitio con
   padding: la foto del hero pasa por detrás de ella, que para eso es
   semitransparente. El hueco se lo deja el propio hero. */
.pl-venta {
  padding-top: 0;
  /* Más ancho que el resto del sitio: aquí el texto se quedaba en medio de la
     pantalla con un margen enorme a la izquierda. Es el mismo ancho que usa la
     cabecera, así el hero y el logo empiezan casi a la misma altura. */
  --container: 1460px;
}

/* ---------- Hero: la foto manda ----------
   Apilado por defecto (móvil y tablet): la foto arriba, entera y a todo el
   ancho, deshaciéndose por abajo hacia el fondo. El texto sube y entra en ese
   degradado, así no hay costura entre la foto y la página. */
.pl-venta .pl-hero {
  position: relative;
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-align: left;
}

.pl-hero-foto {
  position: relative;
  z-index: 1;
  margin-top: 86px;
  pointer-events: none;
}

.pl-hero-foto img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  /* La foto no se corta: se apaga. Arriba también, para que no se vea el canto
     donde empieza la imagen. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 72%, rgba(0, 0, 0, 0.45) 91%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 72%, rgba(0, 0, 0, 0.45) 91%, transparent 100%);
}

.pl-hero-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 8, 5, 0.62) 0%, rgba(10, 8, 5, 0) 18%),
    linear-gradient(0deg, var(--bg) 0%, rgba(10, 8, 5, 0) 20%);
}

.pl-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: -9vw auto 0;
  padding: 0 var(--gutter) 46px;
}

/* De 1101px para arriba la foto deja de ir encima del texto y pasa a ser el
   fondo del hero: entera, pegada a la derecha, y fundiéndose con el negro por
   la izquierda —que es donde va el texto— y por abajo. */
@media (min-width: 1101px) {
  .pl-venta .pl-hero {
    display: flex;
    align-items: center;
    /* Alto suficiente para que la foto quepa ENTERA con su degradado: si el
       hero se queda corto, overflow:hidden le corta la cola y vuelve el canto
       duro. 74px de margen arriba + el alto de la foto (ancho / 1.5) + aire. */
    min-height: calc(96px + min(64vw, 1060px) / 1.5);
  }

  /* La caja es exactamente la foto —no todo el hero— para que el degradado de
     la izquierda caiga siempre sobre su borde, esté donde esté según el ancho
     de la pantalla. Se mide por ancho, no por alto: así la foto entra completa
     en vez de agrandarse hasta que se le salen las piernas por abajo. */
  .pl-hero-foto {
    position: absolute;
    top: 74px;
    right: 0;
    left: auto;
    bottom: auto;
    width: min(64%, 1060px);
    margin: 0;
  }

  .pl-hero-foto img {
    position: static;
    width: 100%;
    height: auto;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 82%, rgba(0, 0, 0, 0.45) 95%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 82%, rgba(0, 0, 0, 0.45) 95%, transparent 100%);
  }

  .pl-hero-foto::after {
    background:
      linear-gradient(90deg, var(--bg) 0%, rgba(10, 8, 5, 0.92) 14%, rgba(10, 8, 5, 0.44) 32%, rgba(10, 8, 5, 0) 52%),
      linear-gradient(180deg, rgba(10, 8, 5, 0.55) 0%, rgba(10, 8, 5, 0) 14%),
      linear-gradient(0deg, var(--bg) 0%, rgba(10, 8, 5, 0) 20%);
  }

  .pl-hero-inner {
    margin: 0 auto;
    /* El relleno de abajo le hace sitio a los datos, que van más abajo que los
       sellos: sin él, overflow:hidden les corta el canto. */
    padding: 126px var(--gutter) 134px;
  }

  .pl-hero-text { max-width: 620px; }


  /* Los tres sellos, en una sola línea: uno solo en la fila de abajo se veía
     como algo que sobró. */
  .pl-venta .pl-trust {
    flex-wrap: nowrap;
    gap: 8px;
    font-size: 0.8rem;
  }

  .pl-venta .pl-trust li {
    padding: 8px 13px;
    white-space: nowrap;
  }
}

/* El titular con el "60" a otra escala: el número es el argumento, y así el
   hero deja de ser un bloque de texto uniforme.
   El número va SIEMPRE encima, no al lado: en la columna del hero el texto se
   quedaba con menos de la mitad del ancho y el titular caía en cuatro líneas
   cortas con el número flotando a su izquierda. Encima, el titular usa todo el
   ancho y respira. */
.pl-venta .pl-hero h1 {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 16px;
  margin: 0;
  font-size: clamp(1.6rem, 3.6vw, 2.85rem);
  line-height: 1.12;
}

/* El titular se parte donde tiene sentido —"días para transformar" / "tu cuerpo
   desde tu casa"— y no donde llegue a caber. */
.pl-h1-txt > span { display: block; }

.pl-big {
  position: relative;
  /* Que la caja mida lo que miden las cifras y no toda la columna: el destello
     se pinta sobre el fondo de la caja, y estirada hasta 620px el reflejo
     pasaba casi todo el rato por fuera del número. */
  justify-self: start;
  font-size: clamp(4.2rem, 9vw, 6.8rem);
  /* Interlineado cerrado para que las cifras no dejen un hueco enorme debajo. */
  line-height: 0.82;
  /* Pero con background-clip:text el fondo solo se pinta DENTRO de la caja, y
     con ese interlineado las cifras se salen ~0,25em por abajo: esa parte se
     quedaba sin degradado y, al ser el color transparente, se veía cortada.
     El relleno agranda la caja y el margen negativo le devuelve su sitio. */
  padding-bottom: 0.32em;
  margin-bottom: -0.32em;
  color: var(--gold-soft);
  letter-spacing: -0.03em;
}

/* El "60" en oro pulido: un degradado más claro en el centro que recorre el
   número muy despacio, como la luz sobre metal. El color plano se queda como
   base, así que si el navegador no recorta el fondo al texto no desaparece.
   La animación la apaga sola el bloque de prefers-reduced-motion del sitio. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .pl-big {
    /* Los extremos en oro pleno, no en --gold-deep: ese es un marrón apagado y
       en la fase oscura del barrido el número se veía sucio en vez de dorado.
       El barrido tiene que ser un reflejo, no un apagón. */
    /* Una raya de luz estrecha, no un degradado ancho: es un destello que
       recorre el número, como el reflejo sobre una pieza de metal. */
    background: linear-gradient(
      100deg,
      var(--gold) 0%,
      var(--gold) 42%,
      var(--gold-soft) 45%,
      #fff6de 48%,
      #fffdf6 50%,
      #fff6de 52%,
      var(--gold-soft) 55%,
      var(--gold) 58%,
      var(--gold) 100%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 26px rgba(216, 190, 126, 0.22));
    animation: oroPulido 5.5s var(--ease-soft) infinite;
  }
}

/* Barre una sola vez por vuelta y descansa en los extremos: en los dos el
   destello está fuera del número, así que el salto de vuelta no se ve. */
@keyframes oroPulido {
  0%, 26% { background-position: 132% 0; }
  74%, 100% { background-position: -32% 0; }
}

.pl-venta .pl-hero p.pl-desc {
  margin: 22px 0 0;
  max-width: 44ch;
}

.pl-hero-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 30px;
}

.pl-micro {
  margin: 0;
  max-width: 46ch;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--cream-dim);
}

.pl-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.86rem;
  color: var(--cream-mute);
}

.pl-trust li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border: 1px solid var(--gold-line-soft);
  border-radius: 999px;
  background: var(--surface-soft);
}

.pl-trust svg { flex: 0 0 auto; color: var(--gold); }

/* ---------- Los tres datos duros del hero ---------- */
/* Van bajo la descripción, separados por hairlines: encima de una foto una
   caja con borde y fondo pesa, y aquí ya no hace falta porque el texto está
   sobre el degradado oscuro. */
/* Sellos y datos en el mismo renglón: los sellos pegados al texto, los datos
   al otro extremo, encima de la foto. */
.pl-hero-abajo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  margin-top: 30px;
}

.pl-hero-abajo .pl-trust { margin: 0; }

/* Fuera de .pl-hero-text ya no hereda su ancho: sin esto el aviso se estiraba
   de lado a lado del hero. */
.pl-hero-acceso { max-width: 620px; margin-top: 22px; }

.pl-hero-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  width: fit-content;
}

.pl-hero-datos div {
  text-align: left;
  padding-right: 24px;
  margin-right: 24px;
  border-right: 1px solid var(--gold-line);
}

.pl-hero-datos div:last-child {
  padding-right: 0;
  margin-right: 0;
  border-right: 0;
}

/* En pantalla ancha los datos se van al otro extremo del renglón, encima de la
   foto. Llevan caja porque ahí están sobre la imagen y necesitan despegarse. */
@media (min-width: 1101px) {
  .pl-hero-abajo {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
  }

  .pl-hero-datos {
    /* Más abajo que el renglón de los sellos: sobre el filo del mat, donde la
       foto ya se está apagando. Es un desplazamiento, no un hueco: la fila
       sigue midiendo lo mismo. */
    position: relative;
    top: 62px;
    padding: 16px 26px;
    border: 1px solid var(--gold-line);
    border-radius: var(--radius-lg);
    background: rgba(14, 11, 7, 0.62);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}

.pl-hero-datos dt {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.pl-hero-datos dd {
  margin: 4px 0 0;
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--cream);
}

/* ---------- Fotos ---------- */
.pl-figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-soft);
}

.pl-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pl-figure-wide {
  margin: 0 0 30px;
  aspect-ratio: 16 / 7;
}

/* Texto y foto en paralelo. En la fila invertida la foto va primero en el HTML
   para que quien navega con lector de pantalla la encuentre junto a su texto,
   y el orden visual lo arregla el grid. */
.pl-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  align-items: center;
  gap: clamp(26px, 4vw, 52px);
}

.pl-split .pl-figure { aspect-ratio: 4 / 3; }

@media (min-width: 901px) {
  .pl-split.is-reverse .pl-figure { order: -1; }
}

.pl-prose {
  max-width: 66ch;
}

.pl-prose p {
  margin: 0 0 16px;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--cream-mute);
}

.pl-prose p:last-child { margin-bottom: 0; }
.pl-prose strong { color: var(--cream); }

.pl-lead {
  max-width: 62ch;
  margin: 0 0 26px;
  line-height: 1.7;
  color: var(--cream-mute);
}

/* Dos columnas que se vuelven una sola cuando dejan de caber. */
.pl-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  margin: 30px 0 0;
}

.pl-card {
  padding: 26px 24px;
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-soft);
}

.pl-card h3 {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--cream);
}

.pl-card p { margin: 0; line-height: 1.75; color: var(--cream-mute); }

.pl-list,
.pl-check,
.pl-cross {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.6;
  color: var(--cream-mute);
}

.pl-list li { padding-left: 16px; position: relative; }
.pl-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

.pl-list strong { color: var(--cream); }

/* La palomita y la cruz se dibujan con CSS y no con un emoji: el emoji cambia
   de forma y de color en cada sistema, y aquí son parte de la lectura. */
.pl-check li,
.pl-cross li { padding-left: 26px; position: relative; }

.pl-check li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.32em;
  width: 11px;
  height: 6px;
  border-left: 1.8px solid var(--gold);
  border-bottom: 1.8px solid var(--gold);
  transform: rotate(-45deg);
}

.pl-cross li::before,
.pl-cross li::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.62em;
  width: 11px;
  height: 1.8px;
  background: var(--cream-dim);
}

.pl-cross li::before { transform: rotate(45deg); }
.pl-cross li::after { transform: rotate(-45deg); }

/* Las dos fases eran dos tarjetas idénticas y no se leía que una va después de
   la otra. El número lo dice antes que el texto. */
.pl-fase { position: relative; }

.pl-fase-num {
  display: block;
  margin-bottom: 6px;
  font-family: var(--serif);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--gold-soft);
  opacity: 0.55;
}

.pl-fase-tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--gold-glow);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
}

.pl-fase h3 { margin-bottom: 10px; }

.pl-sub {
  margin: 44px 0 16px;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--cream);
}

/* ---------- La semana ----------
   Era una tabla. Cuatro filas de tres columnas no necesitan una tabla, y
   parecía un documento pegado en medio de la página. */
.pl-semana {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: dia;
}

.pl-semana li {
  position: relative;
  overflow: hidden;
  padding: 22px 22px 20px;
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-soft);
}

/* El número del día en marca de agua: ordena de un vistazo sin gritar. */
.pl-semana li::before {
  counter-increment: dia;
  content: counter(dia);
  position: absolute;
  top: -18px;
  right: 2px;
  font-family: var(--serif);
  font-size: 5.4rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.1;
  pointer-events: none;
}

.pl-semana-dia {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.pl-semana h4 {
  margin: 8px 0 14px;
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.25;
  color: var(--cream);
}

.pl-semana-imp {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--gold-line-soft);
  font-size: 0.86rem;
  color: var(--cream-mute);
}

.pl-semana-imp svg { flex: 0 0 auto; color: var(--gold); }

/* ---------- El kit ---------- */
/* Tres por fila: son seis implementos, así quedan dos filas parejas en vez de
   una de cuatro y otra de dos. */
.pl-kit {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 1100px) {
  .pl-kit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .pl-kit { grid-template-columns: 1fr; }
}

/* El mismo vidrio de las tarjetas de la portada: fondo translúcido, desenfoque
   de lo que hay detrás, un filo dorado arriba y el levantón al pasar el ratón. */
.pl-kit-item {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 24px 22px;
  overflow: hidden;
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.pl-kit-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
  opacity: 0.5;
  transition: opacity 0.5s var(--ease);
}

.pl-kit-item:hover {
  transform: translateY(-6px);
  border-color: var(--gold-line);
  box-shadow: var(--shadow-card), 0 0 0 1px var(--gold-line-soft) inset;
}

.pl-kit-item:hover::before { opacity: 1; }

.pl-kit-item:hover .pl-kit-ico {
  color: var(--gold-soft);
  border-color: var(--gold-line);
}

.pl-kit-ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid var(--gold-line-soft);
  border-radius: 13px;
  background: var(--gold-glow);
  color: var(--gold);
}

.pl-kit-item h3 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--cream);
}

.pl-kit-item p { margin: 0; font-size: 0.92rem; line-height: 1.7; color: var(--cream-mute); }

.pl-extra {
  margin: 16px 0 0;
}

/* ---------- Precios ---------- */
.pl-venta .pl-plans {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
  max-width: none;
}

.pl-venta .pl-plan {
  gap: 16px;
  text-align: left;
}

.pl-venta .pl-plan-tag { align-self: flex-start; }

/* La foto va a sangre dentro de la tarjeta: el plan se ve antes de leerlo.
   Los márgenes negativos anulan el padding de la tarjeta solo arriba. */
.pl-plan-foto {
  margin: -30px -26px 6px;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  aspect-ratio: 4 / 3;
}

.pl-plan-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

.pl-plan-price small {
  font-family: var(--sans);
  font-size: 1.1rem;
  color: var(--cream-mute);
}

.pl-plan p { margin: 0; line-height: 1.7; color: var(--cream-mute); }
.pl-plan strong { color: var(--cream); }

/* La mensualidad es el plan de después, no una alternativa al de $350: se pinta
   más sobria para que no compita con él. */
.pl-after { background: var(--surface-soft); }

.pl-secure {
  max-width: 62ch;
  margin: 26px 0 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--cream-dim);
}

/* ---------- Preguntas (acordeón) ---------- */
.pl-faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 860px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pl-faq li {
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-soft);
}

.pl-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--cream);
  list-style: none;
}

.pl-faq summary::-webkit-details-marker { display: none; }
.pl-faq summary:hover { color: var(--gold-soft); }

/* El signo se dibuja con dos trazos: uno se desvanece al abrir y queda un
   guion. Un carácter "+" no se puede animar ni queda alineado. */
.pl-faq-mas {
  position: relative;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
}

.pl-faq-mas::before,
.pl-faq-mas::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 13px;
  height: 1.5px;
  background: var(--gold);
  transition: transform 0.24s var(--ease), opacity 0.24s var(--ease);
}

.pl-faq-mas::after { transform: rotate(90deg); }
.pl-faq details[open] .pl-faq-mas::after { transform: rotate(0deg); opacity: 0; }

.pl-faq p {
  margin: 0;
  padding: 0 22px 20px;
  font-size: 0.94rem;
  line-height: 1.75;
  color: var(--cream-mute);
}

/* ---------- Barra de compra que sigue el scroll ---------- */
.pl-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: rgba(12, 9, 6, 0.93);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid var(--gold-line);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.32s var(--ease), visibility 0.32s;
}

.pl-sticky.is-on { transform: translateY(0); visibility: visible; }

.pl-sticky-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: var(--container);
  margin: 0 auto;
}

.pl-sticky-txt { display: flex; flex-direction: column; gap: 2px; }
.pl-sticky-txt strong { font-size: 0.95rem; color: var(--cream); }
.pl-sticky-txt span { font-size: 0.82rem; color: var(--cream-dim); }
.pl-sticky .btn { flex: 0 0 auto; }

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

/* ---------- Ritmo: bandas de fondo alternas ----------
   Ocho secciones seguidas sobre el mismo negro se leen como un solo bloque
   larguísimo. La banda marca dónde empieza una y termina otra. */
.pl-band {
  background: linear-gradient(180deg, rgba(255, 252, 245, 0.022), rgba(255, 252, 245, 0.045));
  border-top: 1px solid var(--gold-line-soft);
  border-bottom: 1px solid var(--gold-line-soft);
}


/* ---------- Cierre ----------
   Banda a ancho completo con la foto del kit detrás: el último empujón se ve
   distinto al resto de la página, no como una sección más. */
/* La foto de esta banda es vertical (una persona), no un bodegón: en una tira
   ancha y baja se le corta la cabeza. Se le da alto para que quepa entera de
   la cabeza a las rodillas, y el encuadre se sube para no cortarle la cara. */
.pl-close {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(76vh, 660px);
  padding: clamp(60px, 9vw, 110px) var(--gutter);
  background: url("/assets/pilates/hero.jpg") center 24% / cover no-repeat;
}

/* El velo va en su propia capa y no en el shorthand del fondo: así se cambia
   en móvil sin repetir la ruta de la imagen. En horizontal el texto ocupa la
   mitad izquierda y la foto puede respirar a la derecha; en vertical ocupa todo
   el ancho, y con el mismo velo el texto caía encima de la foto sin contraste. */
.pl-close::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Tres capas: el velo en diagonal que deja leer el texto, y dos que apagan la
     foto contra el negro de la página por arriba y por abajo. Sin esas dos, la
     foto llegaba entera al canto de la sección y se veía la costura. */
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(10, 8, 5, 0.55) 6%, rgba(10, 8, 5, 0) 16%),
    linear-gradient(0deg, var(--bg) 0%, rgba(10, 8, 5, 0.55) 6%, rgba(10, 8, 5, 0) 16%),
    linear-gradient(
      100deg,
      rgba(10, 8, 5, 0.94) 0%,
      rgba(10, 8, 5, 0.86) 46%,
      rgba(10, 8, 5, 0.5) 100%
    );
}

.pl-close-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}

.pl-close h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1.12;
  max-width: 18ch;
  color: var(--cream);
}

@media (max-width: 900px) {
  .pl-figure-wide { aspect-ratio: 4 / 3; }
  .pl-venta .pl-section { padding-top: 48px; padding-bottom: 48px; }

  .pl-hero-abajo { gap: 20px; }
  .pl-hero-datos { gap: 0 14px; order: -1; }
  .pl-hero-datos div { padding-right: 18px; margin-right: 18px; }
  .pl-hero-datos dd { font-size: 1.15rem; }

  .pl-venta .pl-hero p.pl-desc { font-size: 0.97rem; }
  .pl-trust { gap: 8px; font-size: 0.8rem; }
  .pl-trust li { padding: 8px 13px; }
  .pl-kit-item,
  .pl-card { padding: 20px 18px; }
  .pl-faq summary { padding: 16px 18px; font-size: 0.94rem; }
  .pl-faq p { padding: 0 18px 18px; }
  /* En vertical la foto se recorta por los lados: se encuadra sobre ella, que
     está a la derecha, en vez de por el centro (que sería suelo y pared). */
  .pl-close {
    min-height: min(70vh, 560px);
    background-position: 72% 20%;
  }

  .pl-close::before {
    background:
      linear-gradient(180deg, var(--bg) 0%, rgba(10, 8, 5, 0.55) 5%, rgba(10, 8, 5, 0) 14%),
      linear-gradient(0deg, var(--bg) 0%, rgba(10, 8, 5, 0.55) 5%, rgba(10, 8, 5, 0) 14%),
      linear-gradient(180deg, rgba(10, 8, 5, 0.86) 0%, rgba(10, 8, 5, 0.74) 55%, rgba(10, 8, 5, 0.5) 100%);
  }

  /* En móvil el precio ya lo lleva el botón: la barra se queda con lo justo. */
  .pl-sticky-inner { gap: 12px; }
  .pl-sticky-txt strong { font-size: 0.88rem; }
  .pl-sticky-txt span { font-size: 0.76rem; }
  .pl-sticky .btn { padding-left: 18px; padding-right: 18px; }
}

/* El "60" al lado del titular solo funciona cuando el hero es de dos columnas.
   En una sola, el texto se queda sin ancho y deja huérfana la última palabra,
   con el número flotando al lado. Apilado se lee como un titular. */
@media (max-width: 900px) {
  .pl-venta .pl-hero h1 {
    row-gap: 14px;
    font-size: clamp(1.72rem, 7.1vw, 2.5rem);
  }
  .pl-big { font-size: clamp(3.8rem, 17vw, 6rem); }
}