/* ═══════════════════════════════════════════════════════════════════
   Landing de ventas · Sistema Profit Core
   Negro con acentos en rojo. Una sola columna, sin distracciones.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --negro:      #08090b;
  --negro2:     #0e1014;
  --negro3:     #14161b;
  --linea:      #23262e;
  --linea2:     #2f333d;
  --texto:      #f3f4f6;
  --suave:      #9ba1ac;
  --tenue:      #6b7280;
  --rojo:       #ff2f43;
  --rojo-hondo: #c00f24;
  --rojo-tinta: rgba(255, 47, 67, .22);
  --verde:      #2fd88a;
  --radio:      14px;
  --ancho:      920px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--texto);
  background:
    radial-gradient(circle at 50% -8%, rgba(255, 47, 67, .13), transparent 34rem),
    radial-gradient(circle at 12% 42%, rgba(255, 47, 67, .05), transparent 30rem),
    var(--negro);
  font: 17px/1.68 "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .88em;
  padding: .12em .42em;
  border-radius: 5px;
  background: #1b1e25;
  border: 1px solid var(--linea);
  color: #ffd3d8;
}

.oculto { display: none !important; }

/* Velo anti-destello: lo pone ventas-velo.js desde el <head> y ventas.js lo quita.
   Evita que el precio se alcance a ver un instante con la puerta activa. */
.velo-puerta [data-puerta] { display: none; }

/* ─────────────────────────────────────────── resaltados */

/* pintadita: marcador rojo por detras del texto */
.marca {
  background: linear-gradient(101deg,
    rgba(255, 47, 67, 0) .8%,
    var(--rojo-tinta) 2.2%,
    rgba(255, 47, 67, .17) 96%,
    rgba(255, 47, 67, 0) 99.2%);
  padding: .08em .34em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: #ffe9eb;
  font-weight: 600;
}

/* subrayado a mano alzada */
.sub {
  position: relative;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.6C42 4.2 84 11 124 5.6c34-4.4 72 6 113 1.2' fill='none' stroke='%23ff2f43' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% .34em;
  padding-bottom: .16em;
}

.rojo { color: var(--rojo); font-weight: 700; }
.verde { color: var(--verde); }
.rojo-suave { color: #ff8a95; }

/* ─────────────────────────────────────────── cinta de oferta */
.cinta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 16px;
  font-size: 13px;
  letter-spacing: .1px;
  color: #ffd9dd;
  background: linear-gradient(90deg, #1a0508, #2b070f 50%, #1a0508);
  border-bottom: 1px solid #40121c;
}
.cinta .punto {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rojo);
  box-shadow: 0 0 10px var(--rojo);
  animation: latir 1.8s ease-in-out infinite;
}
.cinta-reloj {
  font-variant-numeric: tabular-nums;
  padding: 2px 9px;
  border-radius: 99px;
  background: rgba(0, 0, 0, .45);
  border: 1px solid #581b26;
  font-weight: 700;
  color: #fff;
}
@keyframes latir {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.82); }
}

/* ─────────────────────────────────────────── cabecera */
.tope {
  max-width: var(--ancho);
  margin: auto;
  padding: 20px 22px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.marca-tope { display: flex; align-items: center; gap: 11px; font-size: 15px; }
.marca-tope img {
  width: 34px; height: 34px;
  border-radius: 10px;
  object-fit: cover;
  background: #000;
  border: 1px solid var(--linea2);
}
.etiqueta-tope {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tenue);
  border: 1px solid var(--linea);
  border-radius: 99px;
  padding: 4px 12px;
}

/* ─────────────────────────────────────────── layout general */
main { max-width: var(--ancho); margin: auto; padding: 0 22px; }

.ceja {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: #ff8894;
}
.centro { text-align: center; }

/* ─────────────────────────────────────────── 1. gancho */
.gancho { padding: 40px 0 30px; text-align: center; }

.gancho h1 {
  margin: 0 0 24px;
  font-size: clamp(31px, 5.4vw, 56px);
  line-height: 1.12;
  letter-spacing: -1.4px;
  font-weight: 800;
  text-wrap: balance;
}

/* La pregunta de arriba del titular. Va en em y no en px para que siga
   creciendo y encogiendo con el h1 en cualquier pantalla.
   Sin recuadro rojo a proposito: el recuadro llevaba white-space:nowrap, la
   frase no podia partirse y el signo de cierre acababa solo en una linea. */
.gancho h1 .pregunta {
  display: block;
  margin-bottom: .34em;
  font-size: .44em;
  line-height: 1.3;
  letter-spacing: -.4px;
  font-weight: 700;
  color: var(--suave);
}
.gancho h1 .pregunta b { color: #fff; font-weight: 800; }

.bajada {
  max-width: 700px;
  margin: 0 auto 20px;
  font-size: clamp(16px, 2.1vw, 19px);
  color: #cfd4dc;
}
.bajada b { color: #fff; }

.aguja {
  max-width: 640px;
  margin: 0 auto;
  padding: 14px 18px;
  font-size: 15px;
  color: #c3c9d2;
  border: 1px solid var(--linea);
  border-left: 3px solid var(--rojo);
  border-radius: 0 10px 10px 0;
  background: rgba(255, 47, 67, .045);
  text-align: left;
}

/* ─────────────────────────────────────────── 2. video */
.zona-video { padding: 8px 0 26px; }

.caja-video {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--linea2);
  box-shadow:
    0 0 0 1px rgba(255, 47, 67, .1),
    0 30px 90px rgba(0, 0, 0, .7),
    0 0 70px rgba(255, 47, 67, .1);
  aspect-ratio: 16 / 9;
}
.caja-video video,
.caja-video iframe,
.caja-video .marco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* marcador de sitio mientras no haya video cargado */
.video-vacio {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 24px;
  color: var(--suave);
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 47, 67, .12), transparent 60%),
    repeating-linear-gradient(45deg, #0c0d10 0 12px, #0a0b0e 12px 24px);
}
.video-vacio b { color: var(--texto); font-size: 16px; }
.video-vacio small { font-size: 12.5px; max-width: 420px; line-height: 1.6; }
.video-vacio .triangulo {
  width: 62px; height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--rojo);
  box-shadow: 0 0 34px rgba(255, 47, 67, .55);
}
.video-vacio .triangulo::after {
  content: "";
  width: 0; height: 0;
  margin-left: 4px;
  border: 12px solid transparent;
  border-left-color: #fff;
}

.pie-video {
  margin: 14px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--suave);
}

/* barra de avance de la puerta */
.puerta-barra { margin-top: 18px; }
.puerta-riel {
  height: 6px;
  border-radius: 99px;
  background: #1b1e25;
  overflow: hidden;
  border: 1px solid var(--linea);
}
.puerta-riel i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--rojo-hondo), var(--rojo));
  box-shadow: 0 0 14px rgba(255, 47, 67, .6);
  transition: width .4s linear;
}
.puerta-barra p {
  margin: 9px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--suave);
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────── candado */
.candado {
  max-width: 620px;
  margin: 12px auto 70px;
  padding: 34px 28px;
  text-align: center;
  border: 1px solid var(--linea2);
  border-radius: var(--radio);
  background: linear-gradient(180deg, var(--negro2), var(--negro));
}
.candado-ico {
  width: 54px; height: 54px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--rojo);
  background: rgba(255, 47, 67, .1);
  border: 1px solid rgba(255, 47, 67, .3);
}
.candado-ico svg { width: 27px; height: 27px; }
.candado h2 { margin: 0 0 12px; font-size: 24px; letter-spacing: -.5px; }
.candado p { margin: 0 auto; max-width: 480px; color: var(--suave); font-size: 15px; }
.candado-falta {
  margin-top: 16px !important;
  font-size: 15px !important;
  font-weight: 700;
  color: #fff !important;
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────── bloques */
.bloque { padding: 62px 0; border-top: 1px solid var(--linea); }
.bloque:first-of-type { border-top: 0; }

.titulo-bloque {
  margin: 0 0 20px;
  font-size: clamp(25px, 3.7vw, 38px);
  line-height: 1.2;
  letter-spacing: -1px;
  font-weight: 800;
  text-wrap: balance;
}

.parrafo {
  max-width: 660px;
  margin: 0 auto 32px;
  color: #c3c9d2;
}
.parrafo b { color: #fff; }

.remate {
  margin: 34px auto 0;
  max-width: 680px;
  padding: 18px 20px;
  text-align: center;
  font-size: 17px;
  color: #dfe3e9;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--negro2);
}

/* ─────────────────────────────────────────── maqueta del sistema */
.maqueta {
  margin-top: 8px;
  padding: 15px;
  border: 1px solid var(--linea2);
  border-radius: 18px;
  background: linear-gradient(150deg, #14171d, #0a0c0f);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .6);
}
.maq-tope {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--linea);
  font-size: 12.5px;
  color: var(--suave);
}
.maq-led {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rojo);
  box-shadow: 0 0 9px var(--rojo);
  flex: none;
}
.verde-led { background: var(--verde); box-shadow: 0 0 9px var(--verde); }
/* Etiqueta de estado de la maqueta. En verde porque ahora dice "Real": el rojo
   de antes leia como alerta justo al lado de una grafica que va ganando. */
.maq-pill {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 11px;
  color: #a9f0cd;
  background: rgba(47, 216, 138, .1);
  border: 1px solid rgba(47, 216, 138, .32);
}
.maq-rejilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin: 15px 0;
}
.maq-rejilla div {
  padding: 12px 13px;
  border-radius: 11px;
  background: #10131a;
  border: 1px solid var(--linea);
}
.maq-rejilla small { display: block; font-size: 10.5px; color: var(--tenue); }
.maq-rejilla strong {
  display: block;
  margin-top: 4px;
  font-size: 21px;
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
}
.maq-grafica {
  height: 132px;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  padding: 18px 16px 0;
  border-radius: 11px;
  background: #0d1015;
  border: 1px solid var(--linea);
}
/* Barras verdes y en subida, con alguna roja suelta y pequeña. La roja se deja
   a proposito: una curva perfecta sin un solo dia flojo no se cree, y esa barra
   suelta hace que el resto se lea como algo real.

   Arrancan a cero. Las alturas las pone ventas.js desde el atributo data-alto
   cuando la grafica entra en pantalla, y de ahi en adelante las va cambiando
   para que la sesion se vea en marcha. La transicion es la que hace el
   movimiento: en el JS solo se cambia el numero. */
.maq-grafica span {
  flex: 1;
  height: 0;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--verde), rgba(47, 216, 138, .07));
  transition: height .62s cubic-bezier(.22, .68, .32, 1),
              background .45s ease;
}
.maq-grafica span.baja {
  background: linear-gradient(180deg, var(--rojo), rgba(255, 47, 67, .07));
}
/* La ultima barra late un poco: es la operacion que acaba de entrar. */
.maq-grafica span:last-child { animation: barra-viva 2.1s ease-in-out infinite; }
@keyframes barra-viva {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.32); }
}

/* Si el JavaScript no llega a ejecutarse, las barras se quedarian planas y la
   grafica saldria vacia. Con esto se ven en su altura final sin animacion.
   La clase .anima la pone ventas.js en cuanto toma el control. */
.maq-grafica:not(.anima) span { height: var(--alto-fijo, 55%); }
.maq-grafica:not(.anima) span:nth-child(1) { --alto-fijo: 26%; }
.maq-grafica:not(.anima) span:nth-child(2) { --alto-fijo: 38%; }
.maq-grafica:not(.anima) span:nth-child(3) { --alto-fijo: 17%; }
.maq-grafica:not(.anima) span:nth-child(4) { --alto-fijo: 45%; }
.maq-grafica:not(.anima) span:nth-child(5) { --alto-fijo: 52%; }
.maq-grafica:not(.anima) span:nth-child(6) { --alto-fijo: 61%; }
.maq-grafica:not(.anima) span:nth-child(7) { --alto-fijo: 58%; }
.maq-grafica:not(.anima) span:nth-child(8) { --alto-fijo: 74%; }
.maq-grafica:not(.anima) span:nth-child(9) { --alto-fijo: 83%; }
.maq-grafica:not(.anima) span:nth-child(10) { --alto-fijo: 96%; }

/* Cifras que suben con un contador. La anchura tabular evita que el numero
   baile de lado mientras cambian los digitos. */
.maq-rejilla strong[data-contar] { font-variant-numeric: tabular-nums; }
.maq-log {
  margin-top: 10px;
  padding: 11px 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  background: #10131a;
  font-size: 12.5px;
  color: var(--suave);
}
/* ─────────────────────────────────────────── llamados a la accion repetidos */
/* La landing tiene un boton de compra despues de cada bloque. Todos apuntan al
   mismo sitio (#acceso), que esta arriba, justo debajo del video. */
.cta-suelto { margin-top: 38px; text-align: center; }
.cta-suelto .btn-grande { margin: 0 auto; }
.cta-nota {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--tenue);
}

/* Bloque sin la linea divisoria de arriba. Lo usa la seccion del pago, que va
   pegada al video y no necesita separador. */
.sin-linea { border-top: 0; padding-top: 34px; }

/* ─────────────────────────────────────────── selector de idioma */
.idioma { display: flex; align-items: center; }
#selector-idioma {
  /* color-scheme: dark es lo que hace que Chrome pinte la lista desplegable
     con fondo oscuro. Sin esto, el navegador dibuja el desplegable nativo en
     claro y con el texto claro que hereda del selector: blanco sobre blanco,
     el mismo problema que tenia el formulario de pago. */
  color-scheme: dark;
  padding: 6px 30px 6px 11px;
  font: inherit;
  font-size: 13px;
  color: var(--suave);
  background: #12151c;
  border: 1px solid var(--linea2);
  border-radius: 9px;
  cursor: pointer;
  appearance: none;
  /* Flecha dibujada en el propio fondo: asi no hace falta ninguna imagen y
     sigue cumpliendo la CSP, que solo permite recursos del propio dominio. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--tenue) 50%),
    linear-gradient(135deg, var(--tenue) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
#selector-idioma:hover { border-color: rgba(255, 255, 255, .22); }
#selector-idioma:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }

/* Texto que solo leen los lectores de pantalla. No se usa display:none porque
   eso lo esconderia tambien de ellos. */
.sr-solo {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ─────────────────────────────────────────── pasos */
.pasos { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 14px; }
.pasos li {
  display: flex;
  gap: 18px;
  padding: 22px 22px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--negro2);
}
.paso-num {
  flex: none;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  font-weight: 800;
  font-size: 17px;
  color: #fff;
  background: linear-gradient(180deg, var(--rojo), var(--rojo-hondo));
  box-shadow: 0 6px 22px rgba(255, 47, 67, .3);
}
.pasos h3 { margin: 5px 0 7px; font-size: 19px; letter-spacing: -.3px; }
.pasos p { margin: 0; font-size: 15.5px; color: var(--suave); }
.pasos p b { color: #fff; }

/* ─────────────────────────────────────────── que incluye */
.lista-incluye {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 34px;
}
.incluye {
  padding: 20px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--negro2);
  position: relative;
  padding-left: 46px;
}
.incluye::before {
  content: "";
  position: absolute;
  left: 20px; top: 24px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: rgba(255, 47, 67, .14);
  border: 1px solid rgba(255, 47, 67, .5);
  box-shadow: inset 0 0 0 3px var(--negro2);
}
.incluye h3 { margin: 0 0 7px; font-size: 17px; letter-spacing: -.3px; }
.incluye p { margin: 0; font-size: 14.8px; color: var(--suave); }
.incluye p b { color: #fff; }

/* ─────────────────────────────────────────── tabla */
.tabla-envoltura {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--negro2);
}
.tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabla caption {
  padding: 15px 18px;
  text-align: left;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--tenue);
  border-bottom: 1px solid var(--linea);
  background: #101318;
}
.tabla th, .tabla td { padding: 13px 18px; text-align: left; }
.tabla thead th {
  font-size: 11.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--tenue);
  font-weight: 700;
  border-bottom: 1px solid var(--linea);
}
.tabla tbody tr + tr td { border-top: 1px solid #1b1e25; }
.tabla tbody td:last-child {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.tabla tbody td:first-child { color: var(--suave); }

/* ─────────────────────────────────────────── precio */
/* Una sola columna a proposito, y no dos como antes. El formulario de Whop trae
   dentro campos que van en pareja (MM/YY con CVC) y la lista de medios locales;
   en media caja de 920px le quedaban ~394px y salia todo apretado. Apilado, la
   tarjeta del precio va arriba y el pago se lleva el ancho completo. */
.precio-caja {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 34px;
  border: 1px solid var(--linea2);
  border-radius: 18px;
  overflow: hidden;
  background: var(--negro2);
  box-shadow:
    0 0 0 1px rgba(255, 47, 67, .12),
    0 30px 90px rgba(0, 0, 0, .6);
}
.precio-cara { padding: 32px 30px; }
.precio-etiqueta {
  margin: 0 0 16px;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tenue);
}
.precio-fila { display: flex; align-items: center; gap: 12px; }
.precio-antes {
  font-size: 21px;
  color: var(--tenue);
  text-decoration: line-through;
  text-decoration-color: var(--rojo);
  text-decoration-thickness: 2px;
}
.precio-off {
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .4px;
  color: #fff;
  background: linear-gradient(180deg, var(--rojo), var(--rojo-hondo));
  box-shadow: 0 4px 18px rgba(255, 47, 67, .35);
}
.precio-hoy { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.precio-hoy b {
  font-size: clamp(46px, 7vw, 62px);
  line-height: 1.05;
  letter-spacing: -3px;
  font-weight: 800;
}
.precio-hoy small { font-size: 13px; color: var(--suave); }
.precio-ahorro {
  margin: 10px 0 22px;
  font-size: 14px;
  font-weight: 700;
  color: var(--verde);
}
.precio-lista { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 9px; }
.precio-lista li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  color: #cfd4dc;
}
.precio-lista li::before {
  content: "";
  position: absolute;
  left: 2px; top: 8px;
  width: 11px; height: 6px;
  border-left: 2.4px solid var(--rojo);
  border-bottom: 2.4px solid var(--rojo);
  transform: rotate(-45deg);
}
.precio-nota {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
  font-size: 14.5px;
  color: var(--suave);
}

.precio-pago {
  padding: 22px;
  background: #0a0c0f;
  border-top: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
}
.whop-hueco { min-height: 420px; position: relative; }
.whop-cargando {
  min-height: 420px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  color: var(--tenue);
  font-size: 13.5px;
  text-align: center;
}
/* Capa de carga por encima del contenedor. Tapa el iframe de Whop mientras se
   arma por dentro, para que no se vea a medio pintar. La quita ventas.js. */
.whop-velo {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 12px;
  background: #0a0c0f;
  transition: opacity .25s ease;
}
.whop-velo.se-va { opacity: 0; pointer-events: none; }

/* Con el tema claro el formulario de Whop es blanco. Si el velo se quedara
   oscuro se veria un parpadeo negro justo antes de que aparezca el formulario,
   asi que el velo se pone del mismo color que lo que va a tapar. */
.tema-claro .whop-velo { background: #fff; color: #6b7280; }
.tema-claro .whop-velo .giro { border-color: #e3e6ea; border-top-color: var(--rojo); }

/* Arreglo del desplegable de paises cuando se usa el tema OSCURO.
   Whop le pone al iframe un color-scheme:normal en linea, y con eso Chrome
   pinta la lista de paises con fondo claro mientras Whop deja la letra clara:
   blanco sobre blanco. El iframe esta en nuestro DOM, asi que si lo podemos
   corregir; hace falta !important porque el suyo es estilo en linea.
   Con el tema claro NO se toca: ahi la letra ya es oscura y forzar el esquema
   oscuro romperia el resto de los campos. */
.tema-oscuro iframe { color-scheme: dark !important; }
.giro {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2.5px solid #23262e;
  border-top-color: var(--rojo);
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Tarjeta de compra cuando el pago se completa en la pagina de Whop, en vez de
   ir incrustado aqui. Ocupa el mismo hueco que el formulario. */
.whop-directo {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 26px 22px;
  text-align: center;
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 47, 67, .05), transparent 55%), #0c0e12;
}
.directo-titulo {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tenue);
}
.directo-precio {
  margin: 4px 0 0;
  font-size: clamp(38px, 6vw, 52px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1.5px;
}
.directo-nota { margin: 8px 0 22px; font-size: 13.5px; color: var(--tenue); }
.btn-directo {
  display: block;
  padding: 16px 18px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--rojo), var(--rojo-hondo));
  box-shadow: 0 14px 40px rgba(255, 47, 67, .32);
  transition: transform .16s ease, box-shadow .16s ease;
}
.btn-directo:hover { transform: translateY(-2px); box-shadow: 0 18px 50px rgba(255, 47, 67, .45); }
.btn-directo:active { transform: translateY(0); }
.directo-pie { margin: 14px 0 0; font-size: 12.5px; color: var(--tenue); line-height: 1.6; }
/* aviso de configuracion incompleta: solo lo ve quien monta la pagina */
.whop-falta b { color: #ff8894; }

/* Lo que queda en el hueco del formulario cuando el pago ya paso. Verde y no
   rojo a proposito: es lo unico de la pagina que confirma algo. */
.whop-listo {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 26px 22px;
  text-align: center;
  border: 1px solid rgba(60, 200, 130, .28);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(60, 200, 130, .08), transparent 55%), #0c0e12;
}
.listo-titulo {
  margin: 0 0 6px;
  font-size: clamp(24px, 4vw, 30px);
  font-weight: 800;
  letter-spacing: -.6px;
  color: #4fd39a;
}
.listo-nota { margin: 0 0 22px; font-size: 14px; color: var(--tenue); line-height: 1.6; }
.whop-listo .btn-directo {
  background: linear-gradient(180deg, #34c98a, #1f9c68);
  box-shadow: 0 14px 40px rgba(52, 201, 138, .3);
}
.whop-listo .btn-directo:hover { box-shadow: 0 18px 50px rgba(52, 201, 138, .42); }

.btn-respaldo {
  display: block;
  margin-top: 12px;
  padding: 13px;
  text-align: center;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  border-radius: 11px;
  background: linear-gradient(180deg, var(--rojo), var(--rojo-hondo));
}
.pago-sello {
  margin: 14px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--tenue);
  line-height: 1.6;
}
.pago-sello b { color: var(--suave); }

/* garantia */
.garantia {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-top: 18px;
  padding: 22px 24px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--negro2);
}
.garantia-ico {
  flex: none;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--verde);
  background: rgba(47, 216, 138, .1);
  border: 1px solid rgba(47, 216, 138, .28);
}
.garantia-ico svg { width: 24px; height: 24px; }
.garantia h3 { margin: 2px 0 6px; font-size: 18px; letter-spacing: -.3px; }
.garantia p { margin: 0; font-size: 15px; color: var(--suave); }

/* ─────────────────────────────────────────── faq */
.faq { margin-top: 30px; display: grid; gap: 10px; }
.faq details {
  border: 1px solid var(--linea);
  border-radius: 11px;
  background: var(--negro2);
  overflow: hidden;
}
.faq details[open] { border-color: var(--linea2); }
.faq summary {
  padding: 17px 50px 17px 20px;
  cursor: pointer;
  list-style: none;
  font-size: 16.5px;
  font-weight: 650;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 22px; top: 50%;
  margin-top: -4px;
  width: 9px; height: 9px;
  border-right: 2.2px solid var(--rojo);
  border-bottom: 2.2px solid var(--rojo);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -7px; }
.faq summary:hover { color: #fff; }
.faq details p {
  margin: 0;
  padding: 0 20px 19px;
  font-size: 15.5px;
  color: var(--suave);
}

/* ─────────────────────────────────────────── cierre */
.cierre { text-align: center; padding-bottom: 70px; }
.cierre h2 {
  margin: 0 0 28px;
  font-size: clamp(25px, 3.7vw, 38px);
  letter-spacing: -1px;
  font-weight: 800;
}
.dos-caminos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 34px;
  text-align: left;
}
.camino {
  padding: 22px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--negro2);
}
.camino.fuerte {
  border-color: rgba(255, 47, 67, .45);
  background: linear-gradient(180deg, rgba(255, 47, 67, .08), var(--negro2));
  box-shadow: 0 0 46px rgba(255, 47, 67, .1);
}
.camino-eti {
  display: block;
  margin-bottom: 10px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tenue);
}
.camino p { margin: 0; font-size: 15.5px; color: var(--suave); }

.btn-grande {
  display: inline-block;
  width: 100%;
  max-width: 520px;
  padding: 19px 26px;
  border: 0;
  border-radius: 13px;
  font: inherit;
  font-size: clamp(16px, 2.2vw, 19px);
  font-weight: 800;
  letter-spacing: -.2px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(180deg, #ff4356, var(--rojo-hondo));
  box-shadow: 0 14px 44px rgba(255, 47, 67, .34);
  transition: transform .14s ease, box-shadow .14s ease;
}
/* Pulsacion de los botones de compra.
   El latido va sobre un envoltorio propio y no sobre transform, porque el
   transform lo usa el :hover para levantar el boton: si los dos pelean por la
   misma propiedad, al pasar el raton se ve un salto. Aqui late el resplandor
   (box-shadow) y una sombra que se expande, y el transform queda libre.

   Se pausa al pasar el raton y al pulsar: cuando la persona ya esta decidida,
   el movimiento estorba. */
.btn-grande {
  animation: latido-btn 2.4s ease-in-out infinite;
}
.btn-grande:hover,
.btn-grande:active,
.btn-grande:focus-visible {
  animation-play-state: paused;
}
@keyframes latido-btn {
  0%, 100% {
    box-shadow: 0 14px 44px rgba(255, 47, 67, .32),
                0 0 0 0 rgba(255, 47, 67, .34);
  }
  55% {
    box-shadow: 0 16px 50px rgba(255, 47, 67, .44),
                0 0 0 13px rgba(255, 47, 67, 0);
  }
}

.btn-grande:hover { transform: translateY(-2px); box-shadow: 0 18px 54px rgba(255, 47, 67, .45); }
.btn-grande:active { transform: translateY(0); }
.cierre-nota { margin: 14px 0 0; font-size: 13.5px; color: var(--tenue); }

/* ─────────────────────────────────────────── legal */
footer {
  max-width: var(--ancho);
  margin: auto;
  padding: 0 22px 50px;
}
.legal {
  padding: 26px 26px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: #0a0b0e;
}
.legal p {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.75;
  color: #71787f;
}
.legal p:last-child { margin-bottom: 0; }
.legal b { color: #98a0a8; }
.pie {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #4d545c;
}

/* ─────────────────────────────────────────── apertura de la puerta */
.abriendo {
  animation: aparecer .5s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes aparecer {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ─────────────────────────────────────────── responsive */
@media (max-width: 860px) {
  .lista-incluye { grid-template-columns: 1fr; }
  .dos-caminos { grid-template-columns: 1fr; }
  .maq-rejilla { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  main { padding: 0 15px; }
  footer { padding: 0 15px 40px; }
  .tope { padding: 15px 15px 4px; }
  .etiqueta-tope { display: none; }
  .gancho { padding: 26px 0 22px; }
  .gancho h1 { letter-spacing: -.9px; }
  .aguja { font-size: 14.5px; padding: 13px 15px; }
  .bloque { padding: 46px 0; }

  .precio-cara { padding: 24px 20px; }
  .precio-pago { padding: 15px; }
  .pasos li { flex-direction: column; gap: 13px; padding: 20px; }
  .maq-grafica { height: 100px; }
  .legal { padding: 20px 18px; }
  .pie { flex-direction: column; gap: 8px; }
  .candado { padding: 26px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}