/* ═══════════════════════════════════════════════════════════════════════
   RENTAS INTELIGENTES — Página de remarketing
   Hoja única, escrita a mano. Misma identidad que la página principal:
   Sora, verde #22c55e, degradado #68f6c1→#45f08d, oscuro #0f1115.

   Vistas de referencia (mismas reglas que la página principal):
     Móvil 390 · Tablet 834 · PC 1500
     Aire vertical de sección: 48 / 64 / 88 px
     Margen lateral:           20 / 32 / 48 px
     Titular de sección:       28 / 40 / 54 px
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tipografía: Sora variable, autoalojada ── */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fuentes/sora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fuentes/sora-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* ── Variables del sistema ── */
:root {
  --negro: #0f1115;
  --negro-suave: #14171d;
  --verde: #22c55e;
  --verde-texto: #15803d;      /* verde con contraste AA sobre blanco */
  --verde-oscuro: #166534;
  --grad-a: #68f6c1;
  --grad-b: #45f08d;
  --blanco: #ffffff;
  --gris-claro: #f9fafb;
  --gris-borde: #e5e7eb;
  --tinta: #111827;
  --tinta-suave: #4b5563;
  --tinta-tenue: #6b7280;
  --claro-suave: #b7bec9;      /* texto secundario sobre oscuro */
  --claro-medio: #e4e7ec;

  --aire-v: 48px;
  --aire-h: 20px;
  --radio: 27px;
  --radio-caja: 20px;
  --ancho-contenido: 1240px;
  --sombra-verde: 0 18px 48px rgba(34, 197, 94, 0.28);
}
@media (min-width: 768px) {
  :root { --aire-v: 64px; --aire-h: 32px; }
}
@media (min-width: 1200px) {
  :root { --aire-v: 88px; --aire-h: 48px; }
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--negro);
  overflow-x: clip;
}
@media (min-width: 768px)  { body { font-size: 16px; } }
@media (min-width: 1200px) { body { font-size: 18px; } }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; border-radius: 6px; }

/* Texto con degradado de marca. Holgura y nowrap NO por defecto: aquí los
   titulares fluyen; el recorte del clip se evita con padding-inline pequeño. */
.degradado {
  background-image: linear-gradient(to right, var(--grad-a), var(--grad-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Estructura de sección ── */
.seccion { position: relative; padding: var(--aire-v) var(--aire-h); }
.seccion-oscura { background: var(--negro); color: var(--blanco); }
.seccion-clara  { background: var(--blanco); }
.seccion-gris   { background: var(--gris-claro); }

.contenido { max-width: var(--ancho-contenido); margin-inline: auto; position: relative; }
.contenido-medio   { max-width: 900px; }
.contenido-angosto { max-width: 720px; }

.cabecera-seccion { text-align: center; margin-bottom: 40px; }
@media (min-width: 768px)  { .cabecera-seccion { margin-bottom: 52px; } }
@media (min-width: 1200px) { .cabecera-seccion { margin-bottom: 64px; } }

.antetitulo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde-texto);
  margin-bottom: 14px;
}
.antetitulo-claro { color: var(--grad-b); }
@media (min-width: 768px) { .antetitulo { font-size: 13px; } }

.titular {
  font-size: 28px;
  line-height: 1.18;
  font-weight: 800;
  color: var(--tinta);
  text-wrap: balance;
}
@media (min-width: 768px)  { .titular { font-size: 40px; } }
@media (min-width: 1200px) { .titular { font-size: 54px; } }
.titular-claro { color: var(--blanco); }

.subtitulo {
  font-size: 15px;
  color: var(--tinta-suave);
  max-width: 640px;
  margin: 18px auto 0;
}
@media (min-width: 768px)  { .subtitulo { font-size: 17px; } }
@media (min-width: 1200px) { .subtitulo { font-size: 20px; } }
.subtitulo-claro { color: var(--claro-suave); }

.parrafo-claro { color: var(--claro-medio); margin-top: 18px; }
.parrafo-remate { color: var(--blanco); }
.enlace-claro { color: var(--grad-b); text-decoration-color: rgba(69, 240, 141, 0.5); }

/* ═══════════════ Barra del plazo (pegada arriba) ═══════════════ */
.barra-plazo {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 14px;
  background-image: linear-gradient(to right, var(--grad-a), var(--grad-b));
  color: var(--negro);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}
.barra-plazo-icono { width: 17px; height: 17px; flex-shrink: 0; }
.barra-plazo-cuenta {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: rgba(15, 17, 21, 0.14);
  padding: 2px 9px;
  border-radius: 999px;
}
@media (min-width: 768px) { .barra-plazo { font-size: 15px; gap: 12px; } }

/* ═══════════════ Cabecera / oferta ═══════════════ */
.hero { overflow: clip; padding-top: calc(var(--aire-v) * 0.9); }
.hero-resplandor {
  position: absolute;
  inset: -20% -30% auto;
  height: 90%;
  background:
    radial-gradient(ellipse 55% 45% at 72% 30%, rgba(34, 197, 94, 0.20), transparent 65%),
    radial-gradient(ellipse 45% 40% at 18% 75%, rgba(104, 246, 193, 0.10), transparent 60%);
  pointer-events: none;
}
.hero-centro { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-logo { width: min(230px, 60vw); height: auto; margin-bottom: 26px; }

/* En el teléfono la cabecera se aprieta: con el mockup entre el subtitular
   y el precio, cada pixel de aire cuenta para que la tarjeta llegue pronto. */
@media (max-width: 767.98px) {
  .hero { padding-top: 34px; }
  .hero-logo { width: 150px; margin-bottom: 18px; }
  .pildora { margin-bottom: 16px; }
  .hero-titular { font-size: 27px; }
  .hero-sub { margin-top: 14px; font-size: 16px; }
  .hero-visual { margin-top: 6px; }
  .tarjeta-precio { margin-top: 34px; padding: 26px 18px 20px; }
  .precio-cifra { font-size: 50px; }
  .precio-ahorro { margin-top: 12px; font-size: 12.5px; }
  .plazo-caja { margin-top: 14px; padding: 11px 14px; }
  .plazo-digitos { font-size: 30px; }
  .boton { margin-top: 16px; min-height: 58px; padding: 15px 22px; gap: 11px; }
  .boton-texto { font-size: 17px; }
}

.pildora {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border: 1px solid rgba(69, 240, 141, 0.35);
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.10);
  color: var(--grad-b);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.pildora-punto {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--grad-b);
  box-shadow: 0 0 0 0 rgba(69, 240, 141, 0.6);
  animation: latido 2s ease-out infinite;
}
@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(69, 240, 141, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(69, 240, 141, 0); }
  100% { box-shadow: 0 0 0 0 rgba(69, 240, 141, 0); }
}
@media (min-width: 768px) { .pildora { font-size: 13px; } }
@media (max-width: 419.98px) { .pildora { font-size: 10px; letter-spacing: 0.09em; padding: 7px 13px; } }

.hero-titular {
  font-size: 30px;
  line-height: 1.16;
  font-weight: 800;
  max-width: 21ch;
  text-wrap: balance;
}
.hero-titular .degradado { display: block; margin-top: 6px; }

/* "$10 USD" resaltado con fondo, dentro del titular degradado: el fondo se
   pinta como caja normal y el texto vuelve a color sólido, porque el clip
   del degradado del padre no debe alcanzarlo. */
.resalte {
  display: inline-block;
  padding: 0 12px;
  border-radius: 12px;
  background-image: linear-gradient(to right, var(--grad-a), var(--grad-b));
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--negro);
  -webkit-text-fill-color: var(--negro);
  box-shadow: 0 8px 26px rgba(34, 197, 94, 0.28);
}
@media (min-width: 768px)  { .hero-titular { font-size: 44px; } }
/* En escritorio el titular no crece más: con el lienzo a dos columnas, cada
   punto extra de cuerpo empuja el botón de compra por debajo del pliegue. */
@media (min-width: 1200px) { .hero-titular { font-size: 47px; } }

.hero-sub {
  margin-top: 20px;
  max-width: 52ch;
  color: var(--blanco);
  font-size: 17px;
  line-height: 1.6;
}
.hero-sub strong { color: var(--blanco); font-weight: 800; }
@media (min-width: 768px)  { .hero-sub { font-size: 20px; } }
@media (min-width: 1200px) { .hero-sub { font-size: 22px; } }

/* El mockup del programa, entre el subtitular y el precio */
.hero-visual { width: 100%; max-width: min(520px, 94%); margin-top: 10px; }
.hero-visual img {
  width: 100%;
  filter: drop-shadow(0 24px 70px rgba(34, 197, 94, 0.22));
}
@media (min-width: 768px)  { .hero-visual { max-width: 600px; } }
@media (min-width: 1200px) { .hero-visual { max-width: 680px; } }

/* La tarjeta del precio: marco degradado, la etiqueta de ahorro montada
   sobre el borde y el precio nuevo como única estrella. */
.tarjeta-precio {
  position: relative;
  margin-top: 38px; /* deja sitio a la etiqueta que monta sobre el borde */
  width: 100%;
  max-width: 560px;
  padding: 30px 22px 24px;
  border-radius: var(--radio-caja);
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, #171b21, #0e1013) padding-box,
    linear-gradient(135deg, rgba(104, 246, 193, 0.55), rgba(69, 240, 141, 0.10) 45%, rgba(104, 246, 193, 0.45)) border-box;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 70px rgba(34, 197, 94, 0.10);
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 768px) { .tarjeta-precio { padding: 36px 38px 30px; } }

.precio-badge {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 20px;
  border-radius: 999px;
  background-image: linear-gradient(to right, var(--grad-a), var(--grad-b));
  color: var(--negro);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(34, 197, 94, 0.35);
}
@media (min-width: 768px) { .precio-badge { font-size: 14px; top: -18px; } }


.tarjeta-precio-filas {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
}
.precio-normal, .precio-hoy { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.precio-normal {
  justify-content: center;
  padding-right: 26px;
  margin-right: 26px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

/* En pantallas angostas las dos columnas no caben con aire: el precio viejo
   pasa a ser una línea pequeña encima del grande. */
@media (max-width: 479.98px) {
  .tarjeta-precio-filas { flex-direction: column; gap: 10px; align-items: center; }
  .precio-normal {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    padding: 0 0 10px;
    margin: 0 0 2px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .precio-tachado { font-size: 22px; }
}
.precio-etiqueta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--claro-suave);
}
.precio-tachado {
  font-size: 30px;
  font-weight: 700;
  color: var(--claro-suave);
  text-decoration: line-through;
  text-decoration-color: rgba(239, 68, 68, 0.85);
  text-decoration-thickness: 3px;
}
.precio-cifra {
  font-size: 54px;
  font-weight: 800;
  line-height: 1.05;
  padding-inline: 4px; /* holgura para el clip del degradado */
}
.precio-nota { font-size: 12.5px; color: var(--claro-suave); }
@media (min-width: 768px) {
  .precio-tachado { font-size: 36px; }
  .precio-cifra   { font-size: 68px; }
  .precio-nota    { font-size: 14px; }
}

.precio-ahorro {
  margin-top: 16px;
  font-size: 13px;
  color: var(--claro-medio);
  max-width: 40ch;
  text-align: center;
}
.precio-ahorro strong { color: var(--grad-b); }

/* Dentro de la tarjeta, el botón va ANTES del contador en todas las vistas:
   el CTA debe caber en la primera pantalla, y la urgencia ya la sostiene la
   barra pegada de arriba. El contador queda justo debajo, asomando. */
.tarjeta-precio-filas { order: 0; }
.tarjeta-precio .precio-ahorro { order: 1; }
.tarjeta-precio .boton { order: 2; }
.tarjeta-precio .plazo-caja { order: 3; }
.tarjeta-precio .confianza { order: 4; }

.plazo-caja {
  margin-top: 18px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px dashed rgba(69, 240, 141, 0.4);
  background: rgba(34, 197, 94, 0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.plazo-caja-titulo {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--claro-medio);
}
.plazo-digitos {
  font-size: 34px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--grad-b);
  line-height: 1.15;
}
.plazo-fecha { font-size: 12.5px; color: var(--claro-suave); }
@media (min-width: 768px) { .plazo-digitos { font-size: 40px; } }

/* ── Botón de marca ── */
.boton {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 560px;
  min-height: 64px;
  padding: 18px 30px;
  border-radius: var(--radio);
  background-image: linear-gradient(to right, var(--grad-a), var(--grad-b));
  color: var(--negro);
  text-decoration: none;
  box-shadow: var(--sombra-verde);
  transition: transform 0.22s ease, filter 0.22s ease;
}
.boton:hover  { transform: scale(1.025); filter: brightness(1.06); }
.boton:active { transform: scale(0.97); }
.boton-texto { font-size: 18px; font-weight: 800; line-height: 1.2; }
.boton-flecha { width: 30px; height: 30px; flex-shrink: 0; display: inline-flex; }
.boton-flecha svg { width: 100%; height: 100%; }
.boton-grande { min-height: 72px; }
@media (min-width: 768px) {
  .boton-texto { font-size: 21px; }
  .boton-grande .boton-texto { font-size: 24px; }
}
.boton-nota { margin-top: 12px; font-size: 12.5px; color: var(--tinta-tenue); text-align: center; }
.boton-nota-clara { color: var(--claro-suave); }
@media (min-width: 768px) { .boton-nota { font-size: 14px; } }

.confianza {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 20px;
}
.confianza li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--claro-suave);
}
.confianza svg { width: 17px; height: 17px; color: var(--verde); flex-shrink: 0; }
@media (min-width: 768px) { .confianza li { font-size: 13.5px; } }


/* En pantalla grande la cabecera sigue centrada, como la página principal,
   pero compacta: logo y aires contenidos para que el mockup y el precio
   entren pronto. */
@media (min-width: 1200px) {
  .hero { padding-top: 36px; }
  .hero-logo { width: 210px; margin-bottom: 20px; }
  .pildora { margin-bottom: 18px; }
  .hero-sub { margin-top: 16px; }
  .tarjeta-precio { margin-top: 42px; }
  .precio-cifra { font-size: 62px; }
  .plazo-caja { margin-top: 16px; padding: 11px 16px; }
  .plazo-digitos { font-size: 32px; }
  .boton { margin-top: 18px; }
}

/* ═══════════════ Marquesina ═══════════════ */
.marquesina {
  overflow: hidden;
  background-image: linear-gradient(to right, var(--grad-a), var(--grad-b));
  padding: 12px 0;
}
.marquesina-pista {
  display: flex;
  width: max-content;
  animation: marquesina 36s linear infinite;
}
.marquesina-pista span {
  white-space: nowrap;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--negro);
}
@keyframes marquesina {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (min-width: 768px) { .marquesina-pista span { font-size: 16px; } }

/* ═══════════════ Por qué el descuento ═══════════════
   El razonamiento como recorrido: tres estaciones con icono conectadas por
   una línea, que desembocan en la placa del precio. */
.porque .titular { text-align: center; margin-bottom: 34px; }

.porque-pasos { display: flex; flex-direction: column; }
.porque-pasos li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 22px;
}
/* La línea que une las estaciones */
.porque-pasos li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 46px;
  bottom: 2px;
  width: 2px;
  background: linear-gradient(to bottom, rgba(69, 240, 141, 0.5), rgba(69, 240, 141, 0.12));
}
.porque-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(69, 240, 141, 0.5);
  background: rgba(34, 197, 94, 0.10);
  color: var(--grad-b);
}
.porque-icono svg { width: 21px; height: 21px; }
.porque-pasos p {
  padding: 8px 16px 8px 0;
  color: var(--claro-medio);
  font-size: 15px;
  text-align: left;
}
.porque-pasos strong { color: var(--blanco); }
@media (min-width: 768px) {
  .porque-pasos li { gap: 20px; }
  .porque-pasos p { font-size: 17.5px; padding-top: 7px; }
}

/* El titular del regalo, encima del billete */
.porque-descuento {
  font-size: 23px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--blanco);
  padding-inline: 4px;
  padding-bottom: 12px;
}
@media (min-width: 768px)  { .porque-descuento { font-size: 30px; padding-bottom: 14px; } }
@media (min-width: 1200px) { .porque-descuento { font-size: 34px; } }

/* El billete del descuento, sobre la placa: ligeramente girado, como
   recién puesto encima de la mesa. */
.porque-billete {
  width: min(320px, 80%);
  height: auto;
  margin: 12px auto 32px;
  transform: rotate(-5deg);
  border-radius: 6px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 30px rgba(34, 197, 94, 0.18);
}
@media (min-width: 768px) { .porque-billete { width: 360px; margin: 14px auto 36px; } }

/* La placa del precio: el destino del recorrido */
.porque-placa {
  margin-top: 8px;
  padding: 22px 20px;
  border-radius: var(--radio-caja);
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, #171b21, #0e1013) padding-box,
    linear-gradient(135deg, rgba(104, 246, 193, 0.55), rgba(69, 240, 141, 0.10) 45%, rgba(104, 246, 193, 0.45)) border-box;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 50px rgba(34, 197, 94, 0.10);
  text-align: center;
}
.porque-precio {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  padding-inline: 6px; /* holgura para el clip del degradado */
}
.porque-plazo {
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--claro-suave);
}
@media (min-width: 768px)  { .porque-precio { font-size: 38px; } .porque-plazo { font-size: 14px; } }
@media (min-width: 1200px) { .porque-precio { font-size: 44px; } }

.porque-remate {
  margin-top: 24px;
  text-align: center;
  color: var(--claro-medio);
  font-size: 14.5px;
}
.porque-remate strong { color: var(--blanco); }
@media (min-width: 768px) { .porque-remate { font-size: 16.5px; } }

/* ═══════════════ Recap: los 4 pasos ═══════════════ */
.pasos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  counter-reset: paso;
}
@media (min-width: 768px)  { .pasos { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1200px) { .pasos { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

.paso {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 24px 22px 20px;
  border-radius: var(--radio-caja);
  background: var(--gris-claro);
  border: 1px solid var(--gris-borde);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.paso:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(17, 24, 39, 0.10); }

/* El acento de marca en el canto superior de cada ficha */
.paso::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-image: linear-gradient(to right, var(--grad-a), var(--grad-b));
}

/* El número de fase, grande y fantasmal al fondo */
.paso-fantasma {
  position: absolute;
  top: 10px;
  right: 16px;
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  color: rgba(34, 197, 94, 0.10);
  pointer-events: none;
}

.paso-cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.paso-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 13px;
  background-image: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  color: var(--negro);
  box-shadow: 0 8px 22px rgba(34, 197, 94, 0.28);
}
.paso-icono svg { width: 25px; height: 25px; }
.paso-fase {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde-texto);
}

.paso-titulo { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.paso-texto { font-size: 14.5px; color: var(--tinta-suave); margin-bottom: 16px; }

/* Con qué sales de la fase: el renglón que vende, anclado al pie para que
   las cuatro fichas lo alineen aunque sus textos midan distinto. */
.paso-resultado {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--gris-borde);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tinta);
}
.paso-resultado svg { width: 19px; height: 19px; color: var(--verde); flex-shrink: 0; margin-top: 1px; }

@media (min-width: 1200px) {
  .paso { padding: 28px 24px 22px; }
  .paso-titulo { font-size: 22px; }
  .paso-texto  { font-size: 15.5px; }
  .paso-resultado { font-size: 14.5px; }
  .paso-fantasma { font-size: 72px; }
}

/* La banda de la promesa: pieza oscura que remata la sección clara, con la
   cifra como titular y lo esencial como lista de verificación. */
.promesa-banda {
  margin-top: 32px;
  padding: 28px 22px;
  border-radius: var(--radio-caja);
  background:
    radial-gradient(ellipse 80% 100% at 50% -30%, rgba(34, 197, 94, 0.20), transparent 70%),
    var(--negro);
  text-align: center;
}
.promesa-titulo {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.25;
  padding-inline: 4px; /* holgura para el clip del degradado */
}
.promesa-checks {
  margin-top: 20px;
  display: grid;
  gap: 10px 24px;
  justify-content: center;
  text-align: left;
}
.promesa-checks li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--claro-medio);
  font-size: 13.5px;
  font-weight: 600;
}
.promesa-checks svg { width: 19px; height: 19px; color: var(--grad-b); flex-shrink: 0; margin-top: 1px; }
@media (min-width: 600px) { .promesa-checks { grid-template-columns: repeat(2, auto); } }
@media (min-width: 768px) {
  .promesa-banda { padding: 36px 32px; }
  .promesa-titulo { font-size: 28px; }
  .promesa-checks { margin-top: 24px; gap: 12px 40px; }
  .promesa-checks li { font-size: 15.5px; }
}
@media (min-width: 1200px) { .promesa-titulo { font-size: 33px; } }

/* ═══════════════ El video ═══════════════
   El reproductor de vturb se incrusta solo; mientras llega, el marco
   reserva su proporción para que la página no salte. */
.video-marco {
  border-radius: var(--radio-caja);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
  background:
    radial-gradient(ellipse 70% 85% at 50% 110%, rgba(34, 197, 94, 0.18), transparent 70%),
    #000;
}
.video-marco:empty { aspect-ratio: 16 / 9; }
.video-marco vturb-smartplayer { display: block; width: 100%; }

/* ═══════════════ Lo que recibes ═══════════════ */
.stack { display: flex; flex-direction: column; gap: 18px; }

.stack-fila {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: var(--radio-caja);
  overflow: hidden;
  border: 1px solid var(--gris-borde);
  background: var(--negro);
  color: var(--blanco);
}
.stack-media { background: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(34,197,94,0.14), transparent 70%); padding: 18px 18px 0; }
.stack-media img { width: 100%; }
.stack-cuerpo { padding: 22px 22px 26px; text-align: center; }
.stack-titulo { font-size: 21px; font-weight: 800; margin-bottom: 10px; }
.stack-texto { font-size: 14.5px; color: var(--claro-suave); max-width: 62ch; margin-inline: auto; }
@media (min-width: 768px) {
  .stack-titulo { font-size: 26px; }
  .stack-texto  { font-size: 16px; }
}

.stack-valor {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: var(--verde-texto);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.stack-fila .stack-valor { color: var(--grad-b); }
.stack-valor strong { color: inherit; }

.stack-bonos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 600px)  { .stack-bonos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .stack-bonos { grid-template-columns: repeat(4, 1fr); } }

.stack-bono {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 20px 24px;
  border-radius: var(--radio-caja);
  border: 1px solid var(--gris-borde);
  background: var(--gris-claro);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.stack-bono:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10); }
.stack-bono img { width: min(200px, 70%); margin-bottom: 14px; }
.stack-bono-numero {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--verde-texto);
  margin-bottom: 6px;
}
.stack-bono-titulo { font-size: 17.5px; font-weight: 700; margin-bottom: 8px; }
.stack-bono-texto { font-size: 13.5px; color: var(--tinta-suave); }
@media (min-width: 1200px) {
  .stack-bono-titulo { font-size: 19px; }
  .stack-bono-texto  { font-size: 14.5px; }
}

.stack-extras { display: grid; gap: 12px; margin-top: 4px; }
@media (min-width: 768px) { .stack-extras { grid-template-columns: 1fr 1fr; } }
.stack-extras li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--gris-borde);
  background: var(--blanco);
  font-size: 14px;
  color: var(--tinta-suave);
}
.stack-extras strong { color: var(--tinta); }
.stack-extras svg { width: 22px; height: 22px; color: var(--verde); flex-shrink: 0; margin-top: 2px; }
@media (min-width: 768px) { .stack-extras li { font-size: 15px; } }

.stack-total {
  margin-top: 10px;
  padding: 34px 22px 30px;
  border-radius: var(--radio-caja);
  background:
    radial-gradient(ellipse 75% 90% at 50% -20%, rgba(34, 197, 94, 0.22), transparent 70%),
    var(--negro);
  color: var(--blanco);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stack-total-valor {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--claro-suave);
}
.stack-total-valor s { text-decoration-color: rgba(239, 68, 68, 0.85); text-decoration-thickness: 2.5px; }
.stack-total-frase { margin-top: 14px; font-size: 14.5px; color: var(--claro-medio); }
.stack-total-precio {
  font-size: 58px;
  font-weight: 800;
  line-height: 1.1;
  padding-inline: 6px;
}
.stack-total-nota { font-size: 13px; color: var(--claro-suave); }
@media (min-width: 768px) {
  .stack-total { padding: 44px 40px 40px; }
  .stack-total-precio { font-size: 76px; }
  .stack-total-nota { font-size: 14.5px; }
}

/* ═══════════════ Testimonios ═══════════════ */
.carrusel {
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carrusel::-webkit-scrollbar { display: none; }
.carrusel.arrastrando { cursor: grabbing; scroll-behavior: auto; }
.carrusel-pista {
  display: flex;
  gap: 18px;
  width: max-content;
  padding: 6px var(--aire-h) 18px;
}
.carrusel-pista img {
  width: min(320px, 78vw);
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--gris-borde);
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.10);
  background: var(--blanco);
  user-select: none;
}
@media (min-width: 768px)  { .carrusel-pista img { width: 380px; } }
@media (min-width: 1200px) { .carrusel-pista img { width: 420px; } }
.testimonios-cta {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: var(--aire-h);
}
.testimonios-cta .boton { margin-top: 0; }

/* ═══════════════ Garantía ═══════════════ */
.garantia { text-align: center; overflow: clip; }
.garantia-resplandor {
  position: absolute;
  inset: auto -20% -40% -20%;
  height: 80%;
  background: radial-gradient(ellipse 55% 55% at 50% 100%, rgba(34, 197, 94, 0.16), transparent 70%);
  pointer-events: none;
}
.garantia .contenido { display: flex; flex-direction: column; align-items: center; }
.garantia-sello {
  width: 170px;
  height: auto;
  margin-bottom: 22px;
  filter: drop-shadow(0 14px 40px rgba(34, 197, 94, 0.35));
}
@media (min-width: 768px)  { .garantia-sello { width: 200px; } }
@media (min-width: 1200px) { .garantia-sello { width: 220px; } }
.garantia .parrafo-claro { max-width: 52ch; margin-top: 14px; }
.garantia-correo { margin-top: 22px; font-size: 13px; color: var(--claro-suave); }
.garantia .boton { margin-top: 28px; }

/* ═══════════════ Mentora ═══════════════ */
.mentora-columnas {
  display: flex;
  flex-direction: column;
  gap: 34px;
  align-items: center;
}
.mentora-texto { text-align: center; max-width: 620px; }
.mentora-texto .subtitulo { margin-inline: auto; }
.mentora-linea2 { margin-top: 10px; }

/* La pregunta que abre la sección: más presencia que un antetítulo normal,
   partida en dos líneas a propósito. */
.mentora-pregunta {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--verde-texto);
  margin-bottom: 14px;
}
@media (min-width: 768px)  { .mentora-pregunta { font-size: 18px; } }
@media (min-width: 1200px) { .mentora-pregunta { font-size: 20px; } }

.mentora-vista {
  margin-top: 24px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--tinta-tenue);
}
.mentora-logos {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
}
.mentora-logos img {
  height: 24px;
  width: auto;
  opacity: 0.75;
  filter: grayscale(1);
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.mentora-logos li:hover img { opacity: 1; filter: grayscale(0); }
@media (min-width: 768px) { .mentora-logos img { height: 28px; } }

/* La foto con su credencial debajo: quién es, y dónde la has visto */
.mentora-foto {
  width: min(380px, 86vw);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mentora-foto img {
  border-radius: var(--radio-caja);
  box-shadow: 0 24px 60px rgba(17, 24, 39, 0.18);
}
@media (min-width: 1200px) {
  .mentora-columnas { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 60px; }
  .mentora-texto { text-align: left; flex: 1; }
  .mentora-texto .subtitulo { margin-inline: 0; }
  .mentora-foto { flex: 0 0 400px; width: 400px; }
}

/* ═══════════════ Preguntas frecuentes ═══════════════ */
.titular-faq { text-align: center; color: var(--verde-oscuro); margin-bottom: 40px; }
@media (min-width: 768px) { .titular-faq { margin-bottom: 56px; } }

.faq-lista { display: flex; flex-direction: column; gap: 16px; }
.faq-item {
  background: var(--blanco);
  border: 1.125px solid #f3f4f6;
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: box-shadow 0.25s ease;
}
.faq-item:hover { box-shadow: 0 8px 26px rgba(17, 24, 39, 0.08); }
.faq-pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 20px 22px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
  color: var(--tinta);
  line-height: 1.4;
}
@media (min-width: 768px)  { .faq-pregunta { padding: 26px 30px; font-size: 18.5px; } }
@media (min-width: 1200px) { .faq-pregunta { font-size: 20px; } }
.faq-flecha { flex-shrink: 0; transition: transform 0.3s ease; }
.faq-item[data-abierta] .faq-flecha { transform: rotate(180deg); }
.faq-respuesta {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-respuesta-cuerpo { padding: 0 22px 22px; }
@media (min-width: 768px) { .faq-respuesta-cuerpo { padding: 0 30px 28px; } }
.faq-respuesta-cuerpo p {
  color: var(--tinta-suave);
  font-size: 14.5px;
  line-height: 1.7;
}
.faq-respuesta-cuerpo p + p { margin-top: 12px; }
@media (min-width: 768px) { .faq-respuesta-cuerpo p { font-size: 16px; } }

.faq-cierre {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.boton-whatsapp {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  min-height: 54px;
  padding: 14px 24px;
  border-radius: var(--radio);
  border: 1.5px solid rgba(37, 211, 102, 0.5);
  color: #128c4b;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.22s ease;
}
.boton-whatsapp:hover { background: rgba(37, 211, 102, 0.08); transform: scale(1.015); }

/* ═══════════════ Entrar es simple ═══════════════ */
.entrada-pasos {
  display: grid;
  gap: 14px;
  max-width: 920px;
  margin-inline: auto;
  counter-reset: entrada;
}
@media (min-width: 768px) { .entrada-pasos { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.entrada-pasos li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 24px 20px;
  border-radius: var(--radio-caja);
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
}
.entrada-numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-image: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  color: var(--negro);
  font-size: 19px;
  font-weight: 800;
  box-shadow: 0 8px 22px rgba(34, 197, 94, 0.30);
}
.entrada-pasos p { font-size: 14.5px; font-weight: 600; color: var(--tinta); max-width: 24ch; }
@media (min-width: 1200px) { .entrada-pasos p { font-size: 16px; } }

/* ═══════════════ Cierre ═══════════════ */
.cierre { text-align: center; overflow: clip; }
.cierre-resplandor {
  position: absolute;
  inset: -30% -30% auto;
  height: 100%;
  background: radial-gradient(ellipse 55% 50% at 50% 0%, rgba(34, 197, 94, 0.16), transparent 70%);
  pointer-events: none;
}
.cierre .contenido { display: flex; flex-direction: column; align-items: center; }
.cierre-sub {
  margin-top: 16px;
  font-size: 15px;
  color: var(--claro-suave);
  max-width: 34ch;
}
@media (min-width: 768px) { .cierre-sub { font-size: 18px; } }

/* La tarjeta final: eco de la tarjeta del precio con la que abre la página.
   El borde degradado se pinta con dos fondos: el interior recortado al
   relleno y el degradado del marco recortado al borde. */
.tarjeta-cierre {
  margin-top: 30px;
  width: 100%;
  max-width: 560px;
  padding: 26px 22px;
  border-radius: var(--radio-caja);
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, #171b21, #0e1013) padding-box,
    linear-gradient(135deg, rgba(104, 246, 193, 0.55), rgba(69, 240, 141, 0.10) 45%, rgba(104, 246, 193, 0.45)) border-box;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5), 0 0 70px rgba(34, 197, 94, 0.10);
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 768px) { .tarjeta-cierre { padding: 34px 38px 30px; } }
.tarjeta-cierre .boton { margin-top: 20px; }
.cierre-precio-solo { font-size: 16px; color: var(--claro-medio); }
.cierre-precio-solo strong { color: var(--grad-b); }

.cierre-precios {
  display: flex;
  align-items: center;
  gap: 20px;
}
.cierre-antes {
  font-size: 36px;
  font-weight: 700;
  color: var(--claro-suave);
  text-decoration: line-through;
  text-decoration-color: rgba(239, 68, 68, 0.85);
  text-decoration-thickness: 3.5px;
}
.cierre-flecha { width: 34px; height: 20px; color: var(--claro-suave); }
.cierre-ahora { font-size: 62px; font-weight: 800; line-height: 1.05; padding-inline: 5px; }
@media (min-width: 768px) {
  .cierre-antes { font-size: 46px; }
  .cierre-ahora { font-size: 84px; }
  .cierre-flecha { width: 44px; height: 26px; }
}
.plazo-caja-cierre { max-width: 460px; margin-top: 20px; }
.posdata {
  margin-top: 34px;
  max-width: 58ch;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--claro-suave);
  text-align: left;
  border-left: 3px solid rgba(69, 240, 141, 0.5);
  padding-left: 16px;
}
.posdata p + p { margin-top: 12px; }
.posdata strong { color: var(--grad-b); }
@media (min-width: 768px) { .posdata { font-size: 15px; } }

/* ═══════════════ Pie ═══════════════
   El pie conserva sus grises apagados originales: es letra de trámite y no
   debe competir con el resto de la página. */
.pie {
  background: #0a0c0f;
  color: #9ca3af;
  padding: calc(var(--aire-v) * 0.9) var(--aire-h) calc(var(--aire-v) * 0.8);
  text-align: center;
}
.pie .contenido { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.pie-logo { width: min(200px, 55vw); height: auto; opacity: 0.95; }
.pie-enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
.pie-enlaces a {
  color: #9ca3af;
  font-size: 13px;
  text-decoration: none;
  transition: color 0.2s ease;
}
.pie-enlaces a:hover { color: var(--blanco); }
.pie-descargo { max-width: 760px; font-size: 11.5px; line-height: 1.7; color: #7b8494; }
.pie-copy { font-size: 11px; letter-spacing: 0.06em; color: #7b8494; }

/* ═══════════════ Barra de compra fija (móvil) ═══════════════ */
.barra-compra {
  position: fixed;
  left: 12px;
  right: 12px;
  /* En iPhone con barra de gestos, la caja sube lo que marque el sistema */
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: none;
  gap: 10px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.barra-compra.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (max-width: 767.98px) { .barra-compra { display: flex; } }
.barra-boton {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 58px;
  padding: 9px 16px;
  border-radius: 18px;
  background-image: linear-gradient(to right, var(--grad-a), var(--grad-b));
  color: var(--negro);
  text-decoration: none;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45), var(--sombra-verde);
}
.barra-boton:active { transform: scale(0.97); }
.barra-titulo { font-size: 15.5px; font-weight: 800; line-height: 1.2; }
.barra-nota { font-size: 11.5px; font-weight: 600; opacity: 0.85; font-variant-numeric: tabular-nums; }
.barra-whatsapp {
  flex: 0 0 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  border-radius: 18px;
  background: #25d366;
  color: #fff;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
}

/* ═══════════════ Estados de la oferta ═══════════════
   El JS pone .rm-expirada en <html> cuando la ventana del visitante venció.
   Cada estado esconde lo del contrario con !important —hay reglas de
   maquetación más específicas que, si no, ganarían— y lo visible conserva
   el display que le den sus propias reglas. */
html:not(.rm-expirada) .solo-expirada { display: none !important; }
.rm-expirada .solo-oferta { display: none !important; }

/* ═══════════════ Aparición al hacer scroll ═══════════════ */
.rev { opacity: 0; transform: translateY(24px); transition: opacity 0.65s ease, transform 0.65s ease; }
.rev.vis { opacity: 1; transform: translateY(0); }

/* ═══════════════ Movimiento reducido ═══════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rev { opacity: 1; transform: none; transition: none; }
  .marquesina-pista { animation: none; }
  .pildora-punto { animation: none; }
  .boton, .paso, .stack-bono, .faq-flecha, .faq-respuesta { transition: none; }
}