/* WhatsPedidos Landing — Sistema visual SaaS premium
   Paleta: --wpt-primary #16A34A, --wpt-text #0F172A, --wpt-muted #64748B
   Solo landing, sin dependencias externas, SVG inline, sin emojis como iconos
*/
.wpt-landing-wp{
  overflow-x:clip;
  /* Altura de la cabecera de la landing. Se usa para reservar su sitio con el
     padding-top del hero. Si cambia el alto de la barra, cambia AQUI. */
  --wpt-lp-head:61px;
  --wpt-primary:#16A34A;
  --wpt-primary-dark:#15803D;
  --wpt-primary-soft:#F0FDF4;
  --wpt-primary-border:#BBF7D0;
  --wpt-text:#0F172A;
  --wpt-muted:#64748B;
  --wpt-border:#E2E8F0;
  --wpt-bg:#FFFFFF;
  --wpt-soft:#F8FAFC;
  --wpt-radius:16px;
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  color:var(--wpt-text);
  background:var(--wpt-bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wpt-landing-wp *{box-sizing:border-box}
.wpt-landing-wp a{color:inherit;text-decoration:none}
.wpt-landing-wp img{max-width:100%}

/* Header */
/*
 * 22.9.202 — CABECERA "PÍLDORA FLOTANTE".
 *
 * ANTES: barra a ancho completo pegada al borde superior + `border-bottom`.
 * Problema reportado: quedaba un ESPACIO BLANCO arriba (la barra no tocaba
 * el contenido y el borde inferior marcaba un corte visible).
 *
 * AHORA: el wrapper es transparente y sticky; dentro va una píldora blanca
 * centrada (`__shell` → `__inner`) con los tres grupos: marca · nav · CTA.
 * El hueco de arriba pertenece a la píldora, así que NO hay franja blanca:
 * el hero asoma por detrás.
 *
 * El estado `is-past-hero` (lo pone el JS) es el que da fondo sólido y sombra
 * cuando el hero ya salió: antes de eso la píldora vive sobre el hero.
 */
/*
 * 22.9.222 — FUERA LA FRANJA DE ARRIBA.
 *
 * ANTES: el wrapper era `sticky` y llevaba 12px de relleno superior, y el hero
 * se subía -74px para «asomar por detrás». Pero el fondo del hero arriba es
 * #F4FBF6 (casi blanco), así que esos 12px se veían como una BANDA VACÍA por
 * encima de la píldora. Y el -74px era frágil: daba por hecho que la cabecera
 * medía exactamente 74px (en móvil mide 70 y descuadraba).
 *
 * AHORA: el wrapper NO ocupa espacio (`fixed`) y el hero arranca en y=0, así
 * que NO PUEDE quedar ninguna franja por encima, mida lo que mida la cabecera.
 * Su altura se reserva con `padding-top` del hero, leída de una variable.
 *
 * En reposo la cabecera es una barra a lo ancho pegada al borde superior; al
 * bajar (`is-scrolled` / `is-past-hero`) se separa y se convierte en la
 * píldora flotante de siempre.
 */
.wpt-lp-top{position:fixed;top:0;left:0;right:0;z-index:40;background:transparent;padding:0}
.wpt-lp-top__shell{
  max-width:none;
  margin:0;
  border-radius:0;
  background:rgba(255,255,255,.86);
  border:0;
  border-bottom:1px solid rgba(226,232,240,.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:none;
  transition:background .25s,box-shadow .25s,border-color .25s,transform .25s,border-radius .25s;
}
.wpt-lp-top.is-scrolled,
.wpt-lp-top.is-past-hero{padding:12px 16px 0}
.wpt-lp-top.is-scrolled .wpt-lp-top__shell,
.wpt-lp-top.is-past-hero .wpt-lp-top__shell{
  max-width:1320px;
  margin:0 auto;
  border-radius:999px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(226,232,240,1);
  box-shadow:0 10px 30px rgba(15,23,42,.10),0 2px 6px rgba(15,23,42,.04);
}
.wpt-lp-top__inner{max-width:1320px;margin:0 auto;padding:9px 12px 9px 16px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.wpt-lp-brand{display:flex;gap:10px;align-items:center;font-weight:900;font-size:18px;letter-spacing:-.02em;color:var(--wpt-text)}
/* 22.9.202 — la marca es verde (logo) + tinta, como el diseño de referencia. */
.wpt-lp-brand__mark{width:34px;height:34px;border-radius:50%;background:var(--wpt-primary);display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 34px;box-shadow:0 4px 12px rgba(22,163,74,.28)}
.wpt-lp-brand__mark svg{width:18px;height:18px;stroke-width:1.9}
.wpt-lp-brand__accent{color:var(--wpt-primary-dark)}
.wpt-lp-nav{display:flex;gap:2px;align-items:center;background:transparent;border:0;padding:0;border-radius:999px}
.wpt-lp-nav a{padding:8px 16px;border-radius:999px;font-size:14px;font-weight:600;color:#475569;transition:color .16s,background .16s}
.wpt-lp-nav a:hover{background:var(--wpt-soft);color:var(--wpt-text);box-shadow:none}
.wpt-lp-cta{display:flex;gap:8px;align-items:center}
.wpt-btn{min-height:42px;padding:10px 18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:700;font-size:13px;line-height:1.2;text-decoration:none;white-space:nowrap;box-sizing:border-box;border:1px solid transparent;cursor:pointer;transition:all .15s;vertical-align:middle;position:relative;color:var(--wpt-text)}
.wpt-btn:hover{transform:translateY(-1px)}
.wpt-btn svg{width:16px;height:16px;flex:0 0 16px;display:block;stroke:currentColor;fill:none}
.wpt-btn:focus-visible{outline:3px solid var(--wpt-primary);outline-offset:2px}
.wpt-btn--ghost{background:var(--wpt-bg);border-color:var(--wpt-border);color:var(--wpt-text)!important}
.wpt-btn--ghost:hover{border-color:#cbd5e1;background:var(--wpt-soft);color:var(--wpt-text)!important}
.wpt-btn--dark{background:var(--wpt-text);color:#fff!important;border-color:var(--wpt-text)}
.wpt-btn--dark:hover{background:#1e293b;color:#fff!important}
.wpt-btn--primary{background:var(--wpt-primary);color:#fff!important;border-color:var(--wpt-primary);box-shadow:0 4px 14px rgba(22,163,74,.22)}
.wpt-btn--primary:hover{background:var(--wpt-primary-dark);border-color:var(--wpt-primary-dark);color:#fff!important}
/* 22.9.202 — botones de la cabecera del diseño de referencia. */
.wpt-btn--pine{background:#065F46;border-color:#065F46;color:#fff!important;box-shadow:0 4px 14px rgba(6,95,70,.20)}
.wpt-btn--pine:hover{background:#054F3B;border-color:#054F3B;color:#fff!important}
.wpt-btn--ink{background:#0B1220;border-color:#0B1220;color:#fff!important;box-shadow:0 6px 18px rgba(11,18,32,.24);padding-right:12px}
.wpt-btn--ink:hover{background:#1e293b;border-color:#1e293b;color:#fff!important}
.wpt-lp-cta__main-sep{width:1px;height:16px;background:rgba(255,255,255,.22);display:none}
.wpt-lp-cta__main svg{transition:transform .18s}
.wpt-lp-cta__main:hover svg{transform:translateX(2px)}
.wpt-lp-burger{display:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--wpt-border);background:var(--wpt-bg);align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
@media(max-width:1199px){
  .wpt-lp-nav{display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column;background:var(--wpt-bg);border:1px solid var(--wpt-border);border-radius:20px;padding:10px;box-shadow:0 20px 44px rgba(15,23,42,.14);z-index:50;gap:6px}
  .wpt-lp-nav.is-open{display:flex}
  .wpt-lp-nav a{padding:12px 14px;background:var(--wpt-soft);border:1px solid var(--wpt-border);width:100%}
  .wpt-lp-burger{display:flex}
}

/* Hero — 22.9.202: pantalla completa, centrado, como el diseño de referencia */
.wpt-lp-hero{
  position:relative;
  width:100%;
  margin:0 auto;
  /* 22.9.222 — el hero arranca en y=0 (la cabecera es `fixed` y no ocupa
     espacio) y reserva su altura con padding-top, leída de la variable. Así
     no queda franja por encima aunque la cabecera cambie de alto. */
  margin-top:0;
  padding:calc(var(--wpt-lp-head) + clamp(28px,5vh,60px)) clamp(16px,3vw,32px) clamp(40px,7vh,72px);
  box-sizing:border-box;
  /* 22.9.203 — PANTALLA COMPLETA de verdad en PC, tablet y móvil.
     `100vh` es el respaldo para navegadores antiguos; `100svh` (small viewport)
     es el mínimo seguro cuando la barra del navegador móvil está desplegada, así
     el contenido nunca queda cortado; `100dvh` (dynamic viewport) ajusta la
     altura cuando esa barra se oculta, de modo que el hero SIEMPRE llena la
     pantalla visible. Se declaran en este orden a propósito: el navegador usa
     la última que entienda. */
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(28px,4vh,52px);
  text-align:center;
  background:
    radial-gradient(900px 460px at 50% -6%, rgba(22,163,74,.12) 0%, transparent 62%),
    radial-gradient(700px 400px at 12% 8%, rgba(22,163,74,.07) 0%, transparent 60%),
    linear-gradient(180deg,#F4FBF6 0%, #FFFFFF 58%);
  overflow:hidden;
}
/* 22.9.203 — el hero ya no comparte fila con la maqueta "Mi tienda demo", así
   que `__inner` es sólo un contenedor centrado de una columna. `__copy` es el
   bloque real de contenido (insignia → titular → subtítulo → píldora → botones
   → prueba social) y ahora puede aprovechar más ancho. */
.wpt-lp-hero__inner{
  width:100%;
  max-width:1000px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
}
.wpt-lp-hero__copy{
  width:100%;
  max-width:860px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  animation: wptHeroIn 0.7s ease-out both;
}
.wpt-lp-hero h1{
  font-size: clamp(2.1rem, 5.6vw, 4.15rem);
  line-height:1.02;
  letter-spacing:-0.045em;
  font-weight:900;
  margin:18px 0 0;
  color:var(--wpt-text);
  max-width:900px;
  text-wrap:balance;
}
/* El acento "WhatsApp" va verde y sin subrayado (diseño de referencia). */
.wpt-lp-hero h1 span{
  color:var(--wpt-primary);
  text-decoration:none;
  background:none;
  position:relative;
}
.wpt-lp-hero .lead{
  color:#475569;
  margin:20px 0 0;
  font-size: clamp(15px, 1.6vw, 17.5px);
  max-width:620px;
  line-height:1.62;
  font-weight:400;
}
.wpt-lp-hero .lead strong{color:var(--wpt-primary); font-weight:800;}
.wpt-lp-badge{display:inline-flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--wpt-primary-border);padding:8px 16px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.09em;color:var(--wpt-primary-dark);text-transform:uppercase;box-shadow:0 4px 14px rgba(22,163,74,.10)}
.wpt-lp-badge__ic{width:15px;height:15px;display:inline-flex;align-items:center;justify-content:center;color:var(--wpt-primary);flex:0 0 15px}
.wpt-lp-badge__ic svg{width:15px;height:15px;stroke-width:2}
.wpt-lp-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;align-items:center;justify-content:center}
.wpt-lp-hero-actions .wpt-btn{min-height:52px;padding:14px 26px;font-size:15px;font-weight:800;border-radius:999px;transition:transform .15s, box-shadow .15s, background .15s}
.wpt-lp-btn,
.wpt-lp-hero-actions .wpt-btn--primary{background:var(--wpt-primary);color:#fff!important;border-color:var(--wpt-primary);box-shadow:0 10px 26px rgba(22,163,74,.28)}
.wpt-lp-hero-actions .wpt-btn--primary:hover{background:#15803D;transform:translateY(-2px);box-shadow:0 14px 32px rgba(22,163,74,.34)}
.wpt-lp-hero-actions .wpt-btn--ghost{background:#fff;border:1px solid var(--wpt-border);color:var(--wpt-text)!important;box-shadow:0 4px 14px rgba(15,23,42,.06)}
.wpt-lp-hero-actions .wpt-btn--ghost:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,23,42,.10);border-color:#cbd5e1}
.wpt-lp-btn--xl svg{width:17px;height:17px;flex:0 0 17px}
/* Fila social bajo los botones ("+600 negocios venden más") */
.wpt-lp-hero-trust{display:inline-flex;align-items:center;gap:10px;margin-top:22px;color:#64748B;font-size:13px;font-weight:600}
.wpt-lp-hero-trust strong{color:var(--wpt-text);font-weight:900}
.wpt-lp-hero-trust .wpt-lp-trust__avatars{display:inline-flex;align-items:center}
.wpt-lp-hero-trust .wpt-lp-ava{width:28px;height:28px;flex:0 0 28px;font-size:10px;margin-left:-9px;border:2.5px solid #fff;box-shadow:0 2px 6px rgba(15,23,42,.14)}
.wpt-lp-hero-trust .wpt-lp-ava:first-child{margin-left:0}
.wpt-lp-hero-mic{font-size:12px;color:var(--wpt-muted);margin-top:14px;display:flex;gap:8px 10px;flex-wrap:wrap;align-items:center;justify-content:center;font-weight:500}
.wpt-lp-hero-mic svg{width:14px;height:14px;flex:0 0 14px;color:var(--wpt-primary);stroke-width:2;}
.wpt-lp-hero-mic b{color:var(--wpt-text); font-weight:700}
.wpt-lp-ideal{display:inline-flex;align-items:center;gap:10px;margin-top:26px;flex-wrap:wrap;justify-content:center;background:transparent;border:0;border-radius:14px;padding:0;max-width:100%;box-shadow:none}
.wpt-lp-ideal-label{font-size:11px;font-weight:800;letter-spacing:.1em;color:#64748B;text-transform:uppercase;display:inline-flex;align-items:center;gap:7px}
.wpt-lp-ideal-pill{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:var(--wpt-text);border:1px solid var(--wpt-border);padding:9px 18px;border-radius:999px;font-weight:800;font-size:13.5px;min-width:128px;transition:all .3s ease;box-shadow:0 3px 10px rgba(15,23,42,.06)}
.wpt-lp-ideal-pill__sticker{display:inline-flex;align-items:center;justify-content:center;font-size:17px;line-height:1;flex:0 0 auto;transition:transform .2s}
.wpt-lp-ideal-pill.is-out .wpt-lp-ideal-pill__sticker{transform:scale(.9)}
.wpt-lp-ideal-pill.is-out{transform:translateY(6px);opacity:0}
@keyframes wptHeroIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes wptPulse{0%,100%{opacity:1}50%{opacity:.6}}

@media (prefers-reduced-motion: reduce){
  .wpt-lp-hero > div:first-child,
  .wpt-lp-badge i{animation:none}
  .wpt-lp-hero-actions .wpt-btn:hover{transform:none}
}

/* ==========================================================================
   22.9.294 — BARRA DE BENEFICIOS: PREMIUM, CON AIRE Y SEPARADA.
   --------------------------------------------------------------------------
   ANTES: una línea fina de texto gris en versalitas con puntos de 4 px como
   separadores —sin jerarquía ni color—, PEGADA a la sección siguiente, y con
   un defecto latente: `.wpt-lp-marquee span` animaba TODOS los `<span>` de
   dentro (iconos y etiquetas incluidos) con el mismo `scroll`, así que el
   texto se desplazaba respecto a sus separadores.

   AHORA: cada beneficio es una PASTILLA con su icono en cuadrado tintado de
   marca; los extremos se DIFUMINAN (la barra no «corta» los textos); el
   separador es una barra fina; y la animación vive SÓLO en el carril interior
   (`__inner`), que lleva las dos copias iguales y se desplaza -50%.
   ========================================================================== */
.wpt-lp-marquee{
  position:relative;overflow:hidden;
  border-top:1px solid var(--wpt-border);border-bottom:1px solid var(--wpt-border);
  background:linear-gradient(180deg,#fff,var(--wpt-soft));
  padding:15px 0;
  /* Difumina los dos extremos: los beneficios entran y salen suavemente. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
/* El carril lleva las DOS copias iguales: animarlo -50% las hace coincidir. */
.wpt-lp-marquee__inner{display:inline-flex;align-items:center;white-space:nowrap;animation:wpt-lp-scroll 52s linear infinite;will-change:transform}
.wpt-lp-marquee__track{display:inline-flex;align-items:center;flex:0 0 auto}
.wpt-lp-marquee__item{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--wpt-text);white-space:nowrap;
  transition:color .2s ease;
}
.wpt-lp-marquee:hover .wpt-lp-marquee__item{color:var(--wpt-primary-dark)}
/* El icono va en cuadrado tintado: deja de ser un trazo suelto. */
.wpt-lp-marquee__icon{
  width:26px;height:26px;border-radius:8px;flex:0 0 26px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--wpt-primary-soft);border:1px solid var(--wpt-primary-border);
  color:var(--wpt-primary-dark);
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.wpt-lp-marquee__icon svg{width:15px;height:15px}
.wpt-lp-marquee:hover .wpt-lp-marquee__icon{background:var(--wpt-primary);border-color:var(--wpt-primary);color:#fff;transform:translateY(-1px)}
/* Separador: barra fina en vez del punto de 4 px. */
.wpt-lp-marquee__sep{width:1px;height:15px;border-radius:1px;background:var(--wpt-primary-border);display:inline-block;margin:0 18px;flex:0 0 1px}
@keyframes wpt-lp-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.wpt-lp-ideal-label__icon{width:14px;height:14px;color:var(--wpt-primary);display:inline-flex;align-items:center;justify-content:center;flex:0 0 14px}
.wpt-lp-ideal-label__icon svg{width:14px;height:14px}


/* ==========================================================================
   22.9.293 — FRANJA DE PRUEBA SOCIAL: MÁS PROFESIONAL Y MÁS SEPARADA.
   --------------------------------------------------------------------------
   ANTES: el panel era BLANCO (`--wpt-bg`) y las piezas de dentro eran
   `--wpt-soft`, un gris casi blanco. Con ese contraste nulo el conjunto se
   leía PLANO y amontonado, y las cuatro cifras competían en el mismo tono
   (justo lo que se veía en la captura del usuario).

   AHORA se INVIERTE el lienzo:
     · panel tenue (`--wpt-soft`) => hace de «mesa»;
     · piezas BLANCAS con borde y sombra suave => flotan de verdad.
   Y se gana AIRE (gap 14 -> 18, paddings más generosos) y JERARQUÍA: número
   grande tabular, etiqueta en VERSALITAS con tracking, nota en gris. La
   valoración ★ pasa a píldora verde. El filete superior de marca al pasar el
   ratón es el mismo gesto que en «Tiendas destacadas» (291).

   No cambia el marcado ni las reglas responsivas (tablet 2 col, móvil 1 col).
   ========================================================================== */
.wpt-lp-stats{max-width:1280px;margin:52px auto 0;padding:0 20px}
.wpt-lp-stats__card{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;background:var(--wpt-soft);border:1px solid var(--wpt-border);border-radius:24px;padding:16px;box-shadow:0 10px 34px rgba(15,23,42,.07)}

/* La pieza de confianza también es tarjeta blanca, no una celda gris. */
.wpt-lp-trust{display:flex;gap:16px;align-items:center;padding:22px 24px;border-radius:18px;background:#fff;border:1px solid var(--wpt-border);box-shadow:0 2px 10px rgba(15,23,42,.05);min-width:0}
.wpt-lp-trust__avatars{display:flex;align-items:center;flex:0 0 auto}
.wpt-lp-trust__avatars img{width:38px;height:38px;border-radius:50%;border:3px solid #fff;margin-left:-10px;box-shadow:0 1px 4px rgba(15,23,42,.12);flex:0 0 38px}
.wpt-lp-trust__avatars img:first-child{margin-left:0}
.wpt-lp-trust__more{width:38px;height:38px;border-radius:50%;background:var(--wpt-text);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;letter-spacing:-.02em;margin-left:-10px;border:3px solid #fff;flex:0 0 38px;box-shadow:0 1px 4px rgba(15,23,42,.12)}
.wpt-lp-trust__text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
/* El texto de confianza envuelve: recortar con «…» se leía roto. */
.wpt-lp-trust__text strong{font-size:15px;font-weight:900;letter-spacing:-.02em;color:var(--wpt-text);line-height:1.25;min-width:0}
.wpt-lp-trust__text small{font-size:12px;font-weight:600;color:var(--wpt-muted);line-height:1.3;display:flex;align-items:center;flex-wrap:wrap;gap:5px}
.wpt-lp-trust__dot{color:#cbd5e1}
/* La valoración, en píldora verde: deja de ser texto suelto y se lee como dato. */
.wpt-lp-trust__rating{color:var(--wpt-primary-dark);font-weight:800;display:inline-flex;align-items:center;gap:3px;background:var(--wpt-primary-soft);border:1px solid var(--wpt-primary-border);padding:1px 8px;border-radius:999px}

/* Cada cifra es su propia tarjeta blanca sobre el lienzo tenue. */
.wpt-lp-kpi{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:22px 16px;border-radius:18px;background:#fff;border:1px solid var(--wpt-border);box-shadow:0 2px 10px rgba(15,23,42,.05);text-align:center;min-width:0;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
/* Filete superior de marca: sólo aparece al pasar el ratón. */
.wpt-lp-kpi::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--wpt-primary),var(--wpt-primary-dark));opacity:0;transition:opacity .22s ease}
.wpt-lp-kpi:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(15,23,42,.10);border-color:var(--wpt-primary-border)}
.wpt-lp-kpi:hover::before{opacity:1}
.wpt-lp-kpi--dark{background:linear-gradient(160deg,#1F2A3A 0%,#0F172A 100%);color:#fff;border-color:#0F172A;box-shadow:0 10px 26px rgba(15,23,42,.22)}
.wpt-lp-kpi--dark:hover{border-color:#1F2A3A;box-shadow:0 16px 32px rgba(15,23,42,.28)}
.wpt-lp-kpi strong{font-size:26px;font-weight:900;letter-spacing:-.03em;line-height:1;color:var(--wpt-text);font-variant-numeric:tabular-nums}
.wpt-lp-kpi--dark strong{color:#fff}
/* Etiqueta en versalitas con tracking: separa el número del texto. */
.wpt-lp-kpi span{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--wpt-muted);line-height:1.2}
.wpt-lp-kpi--dark span{color:#E2E8F0}
.wpt-lp-kpi small{font-size:11px;font-weight:500;color:#94A3B8;line-height:1.25}
.wpt-lp-kpi--dark small{color:#94A3B8}
@media(max-width:640px){
  .wpt-lp-stats{margin-top:34px;padding:0 14px}
  .wpt-lp-stats__card{border-radius:18px;padding:10px;gap:12px}
  .wpt-lp-trust{padding:16px 18px;gap:14px}
  .wpt-lp-trust__avatars img{width:32px;height:32px;flex:0 0 32px;margin-left:-8px}
  .wpt-lp-trust__more{width:32px;height:32px;flex:0 0 32px;font-size:10px;margin-left:-8px}
  .wpt-lp-trust__text strong{font-size:13.5px;white-space:normal;line-height:1.3}
  .wpt-lp-trust__text small{font-size:11px}
  .wpt-lp-kpi{padding:18px 14px}
  .wpt-lp-kpi strong{font-size:21px}
}

/* Sections */
.wpt-lp-section{max-width:1280px;margin:0 auto;padding:56px 20px}
.wpt-lp-section--soft{background:var(--wpt-soft);border-top:1px solid var(--wpt-border);border-bottom:1px solid var(--wpt-border)}
.wpt-lp-h{font-size:clamp(22px,3.2vw,30px);font-weight:900;letter-spacing:-.02em;margin:0 0 6px;color:var(--wpt-text);text-align:center}
.wpt-lp-sub{color:var(--wpt-muted);margin:0 0 20px;text-align:center;max-width:640px;margin-left:auto;margin-right:auto;font-size:14px}
.wpt-lp-eyebrow{display:inline-flex;align-items:center;gap:6px;background:var(--wpt-text);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;padding:6px 12px;border-radius:999px;text-transform:uppercase;margin:0 auto 12px;display:flex;width:fit-content}
.wpt-lp-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--wpt-primary);display:inline-block}

/* Cards */
.wpt-lp-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.wpt-lp-card{background:var(--wpt-bg);border:1px solid var(--wpt-border);border-radius:16px;padding:18px;transition:transform .18s,box-shadow .18s,border-color .18s}
.wpt-lp-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,23,42,.06);border-color:#cbd5e1}
.wpt-lp-card h3{margin:10px 0 6px;font-size:14px;font-weight:800;color:var(--wpt-text)}
.wpt-lp-card p{margin:0;color:var(--wpt-muted);font-size:13px;line-height:1.5}
.wpt-lp-icon{width:36px;height:36px;border-radius:10px;background:var(--wpt-primary-soft);border:1px solid var(--wpt-primary-border);display:flex;align-items:center;justify-content:center;color:var(--wpt-primary)}
.wpt-lp-card__link{display:inline-flex;gap:4px;align-items:center;margin-top:10px;font-size:12px;font-weight:700;color:var(--wpt-primary)}
.wpt-lp-icon svg{width:18px;height:18px}

/* Elite */
.wpt-lp-elite{display:grid;grid-template-columns:1.05fr .95fr;gap:0;align-items:stretch;background:var(--wpt-bg);border:1px solid var(--wpt-border);border-radius:20px;overflow:hidden;box-shadow:0 8px 24px rgba(15,23,42,.06)}
.wpt-lp-elite__left{padding:28px 24px;display:flex;flex-direction:column;justify-content:center}
.wpt-lp-elite__icon{width:44px;height:44px;border-radius:12px;background:var(--wpt-text);display:flex;align-items:center;justify-content:center;color:#fff}
.wpt-lp-elite__right{background:var(--wpt-soft);padding:14px;display:flex;align-items:center;justify-content:center;position:relative}
.wpt-lp-elite__mock{position:relative;background:var(--wpt-bg);border-radius:16px;overflow:hidden;box-shadow:0 16px 40px rgba(15,23,42,.12);max-width:320px;width:100%;border:1px solid var(--wpt-border)}

/* Steps - Simplicidad Operativa (premium) */
.wpt-lp-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;position:relative}
.wpt-lp-step{border:1px solid var(--wpt-border);border-radius:18px;padding:22px 16px 16px;background:var(--wpt-bg);text-align:center;position:relative;box-shadow:0 1px 2px rgba(15,23,42,.03);transition:transform .18s,box-shadow .18s,border-color .18s}
.wpt-lp-step:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(15,23,42,.08);border-color:#cbd5e1}
.wpt-lp-step--dark{background:var(--wpt-text);color:#fff;border-color:var(--wpt-text)}
.wpt-lp-step__num{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--wpt-text);color:#fff;font-size:11px;font-weight:800;padding:4px 11px;border-radius:999px;letter-spacing:.07em;box-shadow:0 2px 8px rgba(15,23,42,.16);white-space:nowrap}
.wpt-lp-step--dark .wpt-lp-step__num{background:var(--wpt-primary);color:#fff}
.wpt-lp-step__ic{width:50px;height:50px;border-radius:14px;background:var(--wpt-primary-soft);border:1px solid var(--wpt-primary-border);display:flex;align-items:center;justify-content:center;color:var(--wpt-primary);margin:14px auto 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.6);transition:transform .18s}
.wpt-lp-step:hover .wpt-lp-step__ic{transform:scale(1.06)}
.wpt-lp-step--dark .wpt-lp-step__ic{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#fff;box-shadow:none}
.wpt-lp-step__badge{display:inline-block;margin-top:10px;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--wpt-soft);border:1px solid var(--wpt-border);color:var(--wpt-muted)}
.wpt-lp-step--dark .wpt-lp-step__badge{background:var(--wpt-primary);border-color:var(--wpt-primary);color:#fff}
@media(max-width:1023px){.wpt-lp-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media(max-width:767px){.wpt-lp-steps{grid-template-columns:minmax(0,1fr);gap:13px}.wpt-lp-step{display:flex;flex-direction:row;text-align:left;align-items:center;gap:14px;padding:16px 14px}.wpt-lp-step__num{position:static;transform:none;flex:0 0 auto;background:var(--wpt-primary-soft);color:var(--wpt-primary);box-shadow:none}.wpt-lp-step--dark .wpt-lp-step__num{background:rgba(255,255,255,.12);color:#fff}.wpt-lp-step__ic{margin:0;flex:0 0 46px;width:46px;height:46px}.wpt-lp-step__badge{margin:0 0 0 auto}}
/* Pricing */
.wpt-lp-pricing{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px;align-items:start;max-width:1000px;margin:0 auto}
.wpt-lp-price{border:1px solid var(--wpt-border);border-radius:16px;padding:22px;background:var(--wpt-bg)}
.wpt-lp-price--dark{background:var(--wpt-text);color:#fff;border-color:var(--wpt-text)}
.wpt-lp-price--featured{border:2px solid var(--wpt-text);box-shadow:0 12px 32px rgba(15,23,42,.12)}
.wpt-lp-price ul{list-style:none;padding:0;margin:10px 0;display:grid;gap:6px;font-size:13px}
.wpt-lp-price li{display:flex;gap:8px;align-items:center}
.wpt-lp-price li i{width:18px;height:18px;border-radius:50%;background:var(--wpt-primary-soft);border:1px solid var(--wpt-primary-border);display:flex;align-items:center;justify-content:center;color:var(--wpt-primary);flex:0 0 18px}
.wpt-lp-price--dark li i{background:rgba(34,197,94,.15);border-color:rgba(34,197,94,.2);color:#86efac}

/* Testi, FAQ, Footer */
/* Los testimonios son un carrusel; su maquetación está en el bloque de abajo. */
.wpt-lp-testi .card{background:var(--wpt-bg);border:1px solid var(--wpt-border);border-radius:16px;padding:16px;font-size:13px;transition:transform .15s}
.wpt-lp-testi .card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,23,42,.06)}
.wpt-lp-faq{max-width:720px;margin:14px auto 0}
.wpt-lp-faq details{border:1px solid var(--wpt-border);border-radius:12px;padding:14px;background:var(--wpt-bg);margin-bottom:8px}
.wpt-lp-faq summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.wpt-lp-faq summary::-webkit-details-marker{display:none}
.wpt-lp-faq summary:after{content:"+";width:20px;height:20px;border-radius:50%;border:1px solid var(--wpt-border);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--wpt-muted);flex:0 0 20px}
.wpt-lp-faq details[open] summary:after{content:"−"}
.wpt-lp-header-cta{display:flex;align-items:center;gap:8px}
.wpt-lp-final-cta{background:var(--wpt-text);color:#fff;border-radius:16px;padding:24px;text-align:center}
.wpt-lp-final-cta h3{color:#fff;margin:0 0 8px}
.wpt-lp-final-cta p{color:#cbd5e1;margin:0 0 12px}
/* Compat: páginas en caché con la clase antigua .wpt-lp-cta (ahora separada) */
.wpt-lp-cta{background:var(--wpt-text);color:#fff;border-radius:16px;padding:24px;text-align:center}
.wpt-lp-footer{max-width:1280px;margin:0 auto;padding:32px 20px;border-top:1px solid var(--wpt-border);display:grid;grid-template-columns:1.3fr .7fr .7fr;gap:24px;font-size:13px;color:var(--wpt-muted)}
.wpt-lp-footer strong{color:var(--wpt-text)}
.wpt-lp-footer--dark{background:var(--wpt-text);color:#cbd5e1;border-top:none;max-width:none;margin:0;padding:32px 20px}
.wpt-lp-footer--dark strong{color:#fff}
.wpt-lp-footer--dark a{color:#cbd5e1}
.wpt-lp-footer--dark a:hover{color:#22c55e}

/* Por qué elegirnos — 3 ventajas */
.wpt-lp-why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}
.wpt-lp-why__card{background:var(--wpt-bg);border:1px solid var(--wpt-border);border-radius:16px;padding:20px;transition:transform .18s,box-shadow .18s}
.wpt-lp-why__card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,23,42,.06);border-color:#cbd5e1}
.wpt-lp-why__num{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--wpt-primary);background:var(--wpt-primary-soft);border:1px solid var(--wpt-primary-border);padding:3px 8px;border-radius:999px;display:inline-block;margin-bottom:10px}
.wpt-lp-why__card h3{margin:0 0 6px;font-size:16px;font-weight:800}
.wpt-lp-why__card p{margin:0;color:var(--wpt-muted);font-size:13px;line-height:1.5}

/* Categorías de funcionalidades */
.wpt-lp-cat-title{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--wpt-text);margin:28px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--wpt-border);display:flex;align-items:center;gap:8px}
.wpt-lp-cat-title i{width:18px;height:18px;border-radius:6px;background:var(--wpt-primary-soft);border:1px solid var(--wpt-primary-border);display:flex;align-items:center;justify-content:center;color:var(--wpt-primary);flex:0 0 18px}
.wpt-lp-cat-title i svg{width:12px;height:12px}

/* Fidelización destacada */
.wpt-lp-featured{display:grid;grid-template-columns:1.2fr .8fr;gap:0;background:var(--wpt-bg);border:1px solid var(--wpt-border);border-radius:20px;overflow:hidden;box-shadow:0 8px 24px rgba(15,23,42,.06);margin:18px 0}
.wpt-lp-featured__left{padding:24px;display:flex;flex-direction:column;justify-content:center}
.wpt-lp-featured__badge{display:inline-flex;gap:6px;align-items:center;background:var(--wpt-primary-soft);border:1px solid var(--wpt-primary-border);color:#065f46;font-size:11px;font-weight:800;letter-spacing:.06em;padding:5px 10px;border-radius:999px;text-transform:uppercase;width:fit-content}
.wpt-lp-featured__left h3{margin:12px 0 6px;font-size:20px;font-weight:900;letter-spacing:-.02em}
.wpt-lp-featured__left p{margin:0;color:var(--wpt-muted);font-size:13px;line-height:1.5}
.wpt-lp-featured__list{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:6px;font-size:13px}
.wpt-lp-featured__list li{display:flex;gap:8px;align-items:center}
.wpt-lp-featured__list li i{width:16px;height:16px;border-radius:50%;background:var(--wpt-primary-soft);border:1px solid var(--wpt-primary-border);display:flex;align-items:center;justify-content:center;color:var(--wpt-primary);flex:0 0 16px}
.wpt-lp-featured__list li i svg{width:10px;height:10px}
.wpt-lp-featured__demo{margin-top:14px;background:var(--wpt-soft);border:1px solid var(--wpt-border);border-radius:12px;padding:12px;display:grid;gap:6px;font-size:12px}
.wpt-lp-featured__demo-row{display:flex;align-items:center;justify-content:space-between;font-weight:700}
.wpt-lp-featured__demo-bar{height:8px;background:#e2e8f0;border-radius:999px;overflow:hidden}
.wpt-lp-featured__demo-bar i{display:block;height:8px;background:var(--wpt-primary);border-radius:999px;width:85%}
.wpt-lp-featured__right{background:var(--wpt-soft);padding:16px;display:flex;align-items:center;justify-content:center}

/* Mockup puntos */
.wpt-lp-puntos{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center;max-width:1000px;margin:0 auto}
.wpt-lp-puntos__mock{background:var(--wpt-bg);border:1px solid var(--wpt-border);border-radius:16px;padding:16px;box-shadow:0 8px 24px rgba(15,23,42,.06);max-width:340px;width:100%;margin:0 auto}
.wpt-lp-puntos__mock-head{font-weight:800;display:flex;gap:6px;align-items:center;font-size:14px}
.wpt-lp-puntos__mock-head i{width:20px;height:20px;border-radius:50%;background:var(--wpt-primary-soft);border:1px solid var(--wpt-primary-border);display:flex;align-items:center;justify-content:center;color:var(--wpt-primary)}
.wpt-lp-puntos__mock-points{font-size:28px;font-weight:900;letter-spacing:-.02em;margin:8px 0 4px}
.wpt-lp-puntos__bar{height:8px;background:#e2e8f0;border-radius:999px;overflow:hidden;margin:8px 0}
.wpt-lp-puntos__bar i{display:block;height:8px;background:var(--wpt-primary);width:85%;border-radius:999px}
.wpt-lp-puntos__mock ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:6px;font-size:12px}
.wpt-lp-puntos__mock ul li{display:flex;gap:6px;align-items:center}
.wpt-lp-puntos__mock ul li i{width:14px;height:14px;border-radius:50%;background:var(--wpt-primary-soft);border:1px solid var(--wpt-primary-border);display:flex;align-items:center;justify-content:center;color:var(--wpt-primary)}

/* Matriz funcionalidades — Todo incluido premium */
.wpt-lp-matrix{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:20px}
.wpt-lp-matrix__col{background:var(--wpt-bg);border:1px solid var(--wpt-border);border-radius:16px;padding:20px;box-shadow:0 1px 2px rgba(15,23,42,.04);transition:transform .18s,box-shadow .18s,border-color .18s}
.wpt-lp-matrix__col:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,23,42,.06);border-color:#cbd5e1}
.wpt-lp-matrix__col h4{margin:0 0 14px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--wpt-text);display:flex;gap:8px;align-items:center}
.wpt-lp-matrix__col h4 i{width:22px;height:22px;border-radius:7px;background:var(--wpt-primary-soft);border:1px solid var(--wpt-primary-border);display:flex;align-items:center;justify-content:center;color:var(--wpt-primary);flex:0 0 22px}
.wpt-lp-matrix__col h4 i svg{width:12px;height:12px}
.wpt-lp-matrix__col ul{margin:0;padding:0;list-style:none;display:grid;gap:9px;font-size:13px;color:#475569}
.wpt-lp-matrix__col li{display:flex;gap:8px;align-items:center;line-height:1.4}
.wpt-lp-matrix__col li i{width:18px;height:18px;border-radius:50%;background:var(--wpt-primary-soft);border:1px solid var(--wpt-primary-border);display:flex;align-items:center;justify-content:center;color:var(--wpt-primary);flex:0 0 18px}
.wpt-lp-matrix__col li i svg{width:10px;height:10px}
@media(max-width:1024px){.wpt-lp-matrix{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.wpt-lp-matrix{grid-template-columns:minmax(0,1fr)}}
.wpt-lp-matrix__col,.wpt-lp-matrix__col h4,.wpt-lp-matrix__col li{min-width:0}

/* Responsive — 22.9.202: el hero ya es una columna centrada (no un grid de 2
   columnas), así que aquí sólo quedan los reajustes de los bloques de abajo.
   Las reglas que re-maquetaban el hero a 2 columnas se retiraron. */
@media(max-width:1199px){
  .wpt-lp-grid3{grid-template-columns:repeat(2,1fr)}
  .wpt-lp-steps{grid-template-columns:repeat(2,1fr)}
  .wpt-lp-elite{grid-template-columns:1fr}
  .wpt-lp-pricing{grid-template-columns:1fr}
  .wpt-lp-stats__card{grid-template-columns:1fr}
  .wpt-lp-testi .wpt-lp-slider__slide{flex:0 0 calc(50% - 7px)}
}
@media(max-width:768px){
  .wpt-lp-hero h1{font-size:clamp(2rem, 8vw, 2.75rem)}
  .wpt-lp-hero .lead{font-size:15px}
  .wpt-lp-hero-actions{flex-direction:column;align-items:stretch;width:100%;max-width:420px;margin-left:auto;margin-right:auto}
  .wpt-lp-hero-actions .wpt-btn{width:100%;justify-content:center}
  .wpt-lp-ideal{flex-direction:column;gap:8px}
  .wpt-lp-grid3,.wpt-lp-steps{grid-template-columns:1fr!important}
  .wpt-lp-footer{grid-template-columns:1fr!important;text-align:center}
}
/* ——— 22.9.68 — jerarquía SaaS: bloques grandes, mucho espacio ——— */
.wpt-lp-section{padding:72px 20px}
.wpt-lp-section--hero{padding:56px 20px 40px}
.wpt-lp-card{padding:24px;border-radius:18px}
.wpt-lp-card h3{font-size:16px}
.wpt-lp-card p{font-size:14px}
.wpt-lp-icon{width:40px;height:40px;border-radius:10px}
.wpt-lp-why{grid-template-columns:repeat(3,1fr);gap:16px}
.wpt-lp-why__card{padding:24px;border-radius:18px}
.wpt-lp-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.wpt-lp-card--large{grid-column:span 1}
.wpt-lp-card--featured{border:2px solid var(--wpt-primary);box-shadow:0 12px 28px rgba(22,163,74,.10)}
.wpt-lp-featured{grid-template-columns:1.2fr .8fr}
.wpt-lp-puntos{grid-template-columns:1.1fr .9fr;gap:24px}
/* (22.9.169: la declaración duplicada de .wpt-lp-matrix vivía aquí y pisaba
   los media queries — se movió al bloque final responsive) */
/* Slider premium - ancho completo real, infinito continuo, 6/5/4/3/2/1+peek */
#funciones{
  max-width:none;
  width:100%;
  padding:56px clamp(16px, 2.2vw, 32px);
  box-sizing:border-box;
}
#funciones .wpt-lp-sub{margin-bottom:18px}
#funciones .wpt-lp-featured{
  max-width:1280px;
  margin:18px auto 0;
}
.wpt-lp-slider{position:relative;margin-top:8px;max-width:1720px;margin-left:auto;margin-right:auto;}
.wpt-lp-slider__viewport{overflow:hidden;touch-action:pan-y;position:relative;}
.wpt-lp-slider__track{display:flex;gap:14px;will-change:transform;transform:translate3d(0,0,0);}
.wpt-lp-slider__slide{flex:0 0 calc(16.666% - 11.66px);min-width:0;scroll-snap-align:start;}
.wpt-lp-slider__slide .wpt-lp-card{
  height:100%;
  min-height:182px;
  padding:20px 16px;
  border-radius:16px;
  background:#fff;
  border:1px solid #E2E8F0;
  box-shadow:0 1px 6px rgba(15,23,42,.04);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.wpt-lp-slider__slide .wpt-lp-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(15,23,42,.08);
  border-color:var(--wpt-primary-border);
}
.wpt-lp-slider__slide .wpt-lp-icon{
  width:48px;
  height:48px;
  border-radius:14px;
  background:var(--wpt-primary-soft);
  border:1px solid var(--wpt-primary-border);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--wpt-primary);
  flex:0 0 48px;
}
.wpt-lp-slider__slide .wpt-lp-icon svg{width:22px;height:22px;stroke-width:1.8;}
.wpt-lp-slider__slide .wpt-lp-card h3{
  font-size:15px;
  font-weight:800;
  color:#0F172A;
  margin:2px 0 0;
  line-height:1.25;
  letter-spacing:-.01em;
}
.wpt-lp-slider__slide .wpt-lp-card p{
  font-size:13px;
  line-height:1.5;
  color:#64748B;
  margin:0;
  flex:1;
}
.wpt-lp-slider__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--wpt-border);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(15,23,42,.08);
  transition:all .15s;
  z-index:2;
  color:var(--wpt-text);
}
.wpt-lp-slider__nav:hover{background:var(--wpt-soft);border-color:var(--wpt-primary);color:var(--wpt-primary);transform:translateY(-50%) scale(1.05);}
.wpt-lp-slider__nav:active{transform:translateY(-50%) scale(.95);}
.wpt-lp-slider__nav--prev{left:-10px}
.wpt-lp-slider__nav--next{right:-10px}
.wpt-lp-slider__nav svg{width:16px;height:16px}
@media(max-width:1600px){
  .wpt-lp-slider__slide{flex:0 0 calc(20% - 11.2px)}
}
@media(max-width:1440px){
  .wpt-lp-slider__slide{flex:0 0 calc(25% - 10.5px)}
}
@media(max-width:1199px){
  .wpt-lp-slider__slide{flex:0 0 calc(33.333% - 9.33px)}
}
@media(max-width:900px){
  .wpt-lp-slider__slide{flex:0 0 calc(50% - 7px)}
}
@media(max-width:768px){
  .wpt-lp-slider__slide{flex:0 0 calc(88% - 7px)}
  .wpt-lp-slider__slide .wpt-lp-card{min-height:172px;padding:18px 14px}
  .wpt-lp-slider__slide .wpt-lp-icon{width:42px;height:42px;border-radius:12px;flex:0 0 42px}
  .wpt-lp-slider__slide .wpt-lp-icon svg{width:20px;height:20px}
  .wpt-lp-slider__nav{width:36px;height:36px}
  .wpt-lp-slider__nav--prev{left:2px}
  .wpt-lp-slider__nav--next{right:2px}
  #funciones{padding:40px 16px}
}
@media(max-width:480px){
  .wpt-lp-slider__viewport{margin:0 -4px;padding:0 4px}
  .wpt-lp-slider__slide{flex:0 0 calc(88% - 7px)}
  .wpt-lp-slider__slide .wpt-lp-icon{width:40px;height:40px;border-radius:12px;flex:0 0 40px}
  .wpt-lp-slider__slide .wpt-lp-icon svg{width:18px;height:18px}
}

/*
 * 22.9.202 — EL "ESPACIO DE ARRIBA" DEL HEADER.
 *
 * La landing se sirve con `landing-blank.php`, que NO carga la cabecera del
 * tema… pero muchos temas (y WordPress mismo) dejan en el `<body>` o en el
 * primer contenedor un `margin-top` / `padding-top` heredado, y el `#page`
 * del tema puede añadir más. Resultado: una franja blanca por encima de la
 * píldora del header. Se limpia todo lo que está por encima de la landing.
 *
 * 22.9.204 — SE MIDIÓ CAUSA POR CAUSA EN CHROME Y FALTABAN TRES.
 *
 * Los contenedores del tema ya estaban cubiertos desde 22.9.202 (probado:
 * `#page`, `.site`, `main` y hasta un `<div>` genérico con `padding-top` no
 * movían ni un píxel). Lo que SÍ empujaba la píldora hacia abajo era:
 *
 *   1. `html` con `padding-top` — el padding del elemento raíz se suma a toda
 *      la página. El `margin-top` no (medido: 0px), el `padding-top` sí
 *      (medido: +48px y la píldora bajaba a y=60).
 *   2. Nodos sueltos ANTES del bloque: el `<p></p>` que `wpautop` inserta por
 *      la línea en blanco que deja `do_shortcode` + el `<br>` del editor.
 *      Medido: +50px y +36px. Con `margin-top:0` NO desaparecen, porque un
 *      nodo con contenido no colapsa; hay que poner su altura a cero.
 *   3. El `<header>`/`<nav>` del tema, si el tema los pinta igualmente.
 *      Medido: +91px y +56px.
 *
 * Todas las reglas usan `padding` (no `margin`) por el motivo del punto 1, y
 * `height:0` en lugar de sólo `min-height:0`: medido, un `<header>` del tema
 * con `height:70px` seguía ocupando sus 70px con `min-height:0`, porque
 * `min-height` no cancela un `height` declarado.
 *
 * ⚠️ 22.9.204 (corrección) — SÓLO SE APLAGA LO QUE ESTÁ *ANTES*.
 *
 * La primera versión de esta regla era `body > *:not(.wpt-landing-wp){height:0}`
 * y eso aplanaba TAMBIÉN lo que va DESPUÉS del bloque, dejando la página sin
 * scroll (medido: `scrollHeight` pasó de 2300 a 900 px y el header nunca
 * recibía `is-scrolled`).
 *
 * CSS NO tiene selector de "hermano anterior", así que no se puede expresar
 * "todo lo que precede a la landing" de forma fiable: `:has()` tampoco vale,
 * porque sigue alcanzando a los hermanos POSTERIORES. La solución es de
 * ESTRUCTURA: `landing-blank.php` pinta la landing como primer hijo del
 * `<body>` y mete `wp_footer()` (y lo que inyecten otros plugins) dentro de
 * `#wpt-landing-tail`, que va DESPUÉS y queda excluido del reset.
 */
.wpt-landing-page #wpadminbar{display:none}
html.wpt-landing-html,
body.wpt-landing-page{margin:0!important;padding:0!important;background:#fff}
/* Los nodos previos a la landing no deben ocupar altura. `#wpt-landing-tail`
   queda fuera a propósito: ahí vive el contenido posterior y aplanarlo
   dejaría la página sin scroll.
   ⚠️ El selector va en UNA sola línea: un salto de línea entre dos `:not()`
   compuestos se interpreta como combinador descendiente y deja de alcanzar a
   los hijos directos del body (medido: los casos con <header>/<nav>/<div>
   volvían a fallar). */
body.wpt-landing-page > *:not(.wpt-landing-wp):not(#wpt-landing-tail):not(script):not(style):not(link){
  margin:0!important;padding:0!important;border:0!important;
  min-height:0!important;height:0!important;overflow:hidden!important;
}
/* Los `<br>` van como HIJO DIRECTO del body (WordPress convierte los saltos de
   línea que deja `do_shortcode` en ellos). Tres trampas medidas:
     - son `inline`, así que `height:0` no los apaga;
     - con `display:block` siguen midiendo 17px cada uno (toman el line-height
       normal del bloque), no cero;
     - con `display:none` SÍ miden 0 y desaparecen del flujo.
   Medido: dos `<br>` empujaban la píldora de y=12 a y=48. */
body.wpt-landing-page > br,
body.wpt-landing-page > p{display:none!important}
/* Un `<svg>` suelto antes del bloque (WordPress o el tema a veces lo inyectan)
   NO se apaga con `height:0`: es un elemento con `display:inline` por defecto y
   toma su altura del atributo `height` (medido: 40px). El SVG `inline` ocupa
   la línea base, así que hay que sacarlo del flujo. */
body.wpt-landing-page > svg,
body.wpt-landing-page > img{display:none!important}
body.wpt-landing-page #page,
body.wpt-landing-page #content,
body.wpt-landing-page .site,
body.wpt-landing-page .site-content,
body.wpt-landing-page .entry-content,
body.wpt-landing-page main{margin-top:0!important;padding-top:0!important}
body.wpt-landing-page .wpt-landing-wp{margin-top:0!important;padding-top:0!important}
/* El bloque de la landing empieza pegado a la píldora, sin huecos intermedios. */
.wpt-landing-wp > .wpt-lp-top{margin-bottom:0}

/* ——— 22.9.169 — responsive hardening PC/tablet/móvil (auditoría shortcode) ———
 * Va al final para ganar por cascada. Reglas: todo grid fijo pasa a
 * minmax(0,1fr) (el mínimo auto de grid estiraba las columnas con
 * contenido largo), la URL de tienda puede partirse en cualquier punto,
 * y el header móvil prioriza un solo CTA. */
/*
 * Tiendas destacadas — el ASPECTO vive ahora en su propio bloque, más abajo
 * («22.9.291 — VITRINA DE TIENDAS»): la rejilla dejó de ser `grid` para pasar a
 * `flex` centrado. Aquí sólo quedan las reglas de seguridad de contenido.
 */
.wpt-lp-stores > *{min-width:0}
.wpt-lp-stores small{overflow-wrap:anywhere;word-break:break-word}
/* Por qué elegirnos: 3→1 en móvil (el texto no cabe en 110px) */
@media(max-width:640px){.wpt-lp-why{grid-template-columns:minmax(0,1fr)}}
/*
 * 22.9.189 — CABECERA EN MÓVIL: AQUÍ SÓLO QUEDA EL ENLACE DE ACCESO.
 *
 * Antes había DOS bloques de cabecera para <=640px pisándose (uno de 22.9.172
 * y otro posterior) y dos para <=400px donde el primero ponía `font-size:0` a
 * la marca —es decir, la OCULTABA— y el segundo lo deshacía. Funcionaba por
 * casualidad del orden: reordenar la hoja rompía la cabecera.
 *
 * Todo lo demás (tamaños, rellenos, burger, menú desplegable) vive en el
 * bloque de móvil del final de la hoja, que es el único que manda.
 *
 * 22.9.202: el `display:none` del acceso en móvil se consolidó en el bloque
 * de cabecera móvil (abajo). Aquí ya no se repite.
 */
/* Seguridad global anti-deformación: nada sale de su columna */
.wpt-lp-matrix__col,.wpt-lp-step,.wpt-lp-price,.wpt-lp-testi .card,.wpt-lp-why__card,.wpt-lp-footer > *{min-width:0}
.wpt-lp-price ul,.wpt-lp-price li span{overflow-wrap:anywhere}

/* ==========================================================================
   22.9.171 — PULIDO PROFESIONAL (append: gana por cascada)
   Objetivo: acabado SaaS consistente (tokens, ritmo, cards, FAQ, CTA,
   footer, testimonios locales) y responsive PC/tablet/móvil sin tocar
   estructura, ids ni lógica.
   ========================================================================== */

.wpt-landing-wp{
  --wpt-shadow-xs:0 1px 2px rgba(15,23,42,.05);
  --wpt-shadow-sm:0 2px 10px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --wpt-shadow-md:0 14px 30px rgba(15,23,42,.09),0 2px 6px rgba(15,23,42,.04);
  --wpt-shadow-lg:0 26px 60px rgba(15,23,42,.13),0 6px 16px rgba(15,23,42,.05);
  --wpt-radius-lg:22px;
  --wpt-radius-xl:26px;
}
.wpt-landing-wp a:focus-visible{outline:3px solid var(--wpt-primary);outline-offset:2px;border-radius:8px}

/* --- Ritmo de secciones --- */
.wpt-lp-section{padding:84px 24px}
@media(max-width:1024px){.wpt-lp-section{padding:64px 20px}}
@media(max-width:768px){.wpt-lp-section{padding:52px 16px}}

/* --- Cabeceras de sección --- */
.wpt-lp-h{font-size:clamp(24px,3.5vw,36px);line-height:1.14;letter-spacing:-.03em;margin:0 0 10px}
.wpt-lp-sub{font-size:15px;line-height:1.7;color:#5b6678;max-width:620px;margin:0 auto 26px}
.wpt-lp-eyebrow{background:#fff;color:var(--wpt-primary-dark);border:1px solid var(--wpt-primary-border);box-shadow:var(--wpt-shadow-xs);gap:7px}
.wpt-lp-eyebrow i{box-shadow:0 0 0 3px rgba(22,163,74,.16)}

/* --- Fondos suaves con textura --- */
.wpt-lp-section--soft{
  background:
    radial-gradient(900px 320px at 12% 0%, rgba(22,163,74,.06), transparent 60%),
    linear-gradient(180deg,#fbfdfe 0%, var(--wpt-soft) 100%);
}

/* --- Botones --- */
.wpt-btn{box-shadow:var(--wpt-shadow-xs)}
.wpt-btn--primary{box-shadow:0 6px 18px rgba(22,163,74,.24)}
.wpt-btn--primary:hover{box-shadow:0 10px 24px rgba(22,163,74,.30)}
.wpt-btn--dark{box-shadow:0 6px 18px rgba(15,23,42,.18)}
.wpt-btn--ghost:hover{background:#fff;box-shadow:var(--wpt-shadow-sm)}
/* 22.9.295 — `.wpt-btn--xl` se usaba en 4 sitios (hero, cierre de beneficios,
   CTA final) SIN estar definido en ninguna hoja: el botón «grande» medía 42 px,
   igual que los secundarios. Ahora sí es grande de verdad. */
.wpt-btn--xl{min-height:52px;padding:15px 28px;font-size:15px;gap:9px}
.wpt-btn--xl svg{width:18px;height:18px;flex:0 0 18px}

/* --- Cards unificadas --- */
.wpt-lp-card,.wpt-lp-why__card,.wpt-lp-matrix__col,.wpt-lp-step,.wpt-lp-price{box-shadow:var(--wpt-shadow-xs)}
.wpt-lp-card:hover,.wpt-lp-why__card:hover,.wpt-lp-matrix__col:hover{box-shadow:var(--wpt-shadow-md)}

/* --- Marquee: adaptable (22.9.294) ---------------------------------------- */
@media (max-width: 900px){
  .wpt-lp-marquee{padding:13px 0}
  .wpt-lp-marquee__icon{width:24px;height:24px;flex:0 0 24px;border-radius:7px}
  .wpt-lp-marquee__icon svg{width:14px;height:14px}
  .wpt-lp-marquee__item{font-size:11px;gap:8px}
  .wpt-lp-marquee__sep{margin:0 14px;height:14px}
}
/* En móvil el bucle se DETIENE y la barra se desplaza con el dedo: más cómodo
   y no gasta batería. Se oculta la copia clon, que sólo servía para el bucle. */
@media (max-width: 640px){
  .wpt-lp-marquee{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding:12px 0}
  .wpt-lp-marquee__inner{animation:none;display:flex}
  .wpt-lp-marquee__clone{display:none}
  .wpt-lp-marquee__item{scroll-snap-align:center;font-size:10.5px}
  .wpt-lp-marquee__icon{width:22px;height:22px;flex:0 0 22px;border-radius:7px}
  .wpt-lp-marquee__icon svg{width:13px;height:13px}
  .wpt-lp-marquee__sep{margin:0 12px;height:13px}
}
/* Quien pide menos movimiento no ve el bucle. */
@media (prefers-reduced-motion: reduce){
  .wpt-lp-marquee__inner{animation:none}
}

/* --- Header --- */
/* 22.9.202: altura de la píldora. El wrapper ya no pinta nada (transparente). */
.wpt-lp-top__inner{min-height:60px}
.wpt-lp-nav a{transition:color .18s,background .18s}

/* --- Por qué elegirnos --- */
.wpt-lp-why__card{border-radius:20px;padding:26px 22px}
.wpt-lp-why__num{background:#fff;border-color:var(--wpt-border);color:var(--wpt-muted)}
.wpt-lp-why__card h3{font-size:17px;letter-spacing:-.01em}

/* --- Tiendas destacadas: la vitrina -------------------------------------- */
/* ==========================================================================
   22.9.291 — VITRINA DE TIENDAS (rediseño).
   --------------------------------------------------------------------------
   La tarjeta anterior era una FILA fina (avatar + nombre + URL + estado)
   dentro de una rejilla de 3 columnas: parecía una lista y, con 4 tiendas, la
   cuarta quedaba huérfana a la izquierda (lo que salía en la captura).
   (22.9.205 había arreglado el CONTENIDO —la URL partida, el peso del
   `<strong>`—, pero la tarjeta seguía sin jerarquía.)

   Ahora es una TARJETA vertical de escaparate:
     · arriba, el LOGO real de la tienda (o su inicial) y la píldora «Activa»;
     · en el centro, el nombre y el dominio (sin `https://`, en una línea);
     · abajo, un pie con la llamada «Ver tienda» y la flecha que avanza.

   LA REJILLA VA A 6 COLUMNAS, no a 3: cada tarjeta ocupa 2, así que salen 3
   por fila, pero con columnas de sobra para CENTRAR la fila incompleta
   (4 tiendas -> 3 + 1 centrada; 5 -> 3 + 2 centradas). Un `flex` con
   `max-width` de un tercio NO sirve: el salto de línea de flex mide con el
   `flex-basis`, no con el `max-width`, y partía en 4 por fila.

   Todo con clases: ni un estilo en línea. El movimiento lo gobierna el
   revelado general de la landing, que ya respeta `prefers-reduced-motion`.
   ========================================================================== */
.wpt-lp-stores{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:30px}

/* Fila incompleta -> CENTRADA (antes se quedaba pegada a la izquierda). */
.wpt-lp-stores > :only-child{grid-column:3 / span 2}
.wpt-lp-stores > :first-child:nth-last-child(2){grid-column:2 / span 2}
.wpt-lp-stores > :nth-child(2):last-child{grid-column:4 / span 2}
.wpt-lp-stores > :last-child:nth-child(3n+1){grid-column:3 / span 2}
.wpt-lp-stores > :nth-child(3n+1):nth-last-child(2){grid-column:2 / span 2}
.wpt-lp-stores > :nth-child(3n+2):last-child{grid-column:4 / span 2}

.wpt-lp-store{
  position:relative;
  display:flex;flex-direction:column;gap:12px;
  grid-column:span 2;
  padding:20px;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--wpt-border);
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  overflow:hidden;
  text-decoration:none;
  transition:transform .2s,box-shadow .2s,border-color .2s;
  min-width:0;
}
/* Filo superior de marca que aparece al pasar el ratón. */
.wpt-lp-store::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--wpt-primary),var(--wpt-primary-dark));
  opacity:0;transition:opacity .2s;
}
.wpt-lp-store:hover{
  transform:translateY(-4px);
  border-color:var(--wpt-primary-border);
  box-shadow:0 18px 36px rgba(15,23,42,.10);
}
.wpt-lp-store:hover::before{opacity:1}

/* Cabecera de la tarjeta: logo (o inicial) a la izquierda, estado a la derecha. */
.wpt-lp-store__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}

/* La inicial, en degradado de marca (lo que se ve si la tienda no tiene logo). */
.wpt-lp-store__mark{
  flex:0 0 52px;width:52px;height:52px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,var(--wpt-primary) 0%,var(--wpt-primary-dark) 100%);
  color:#fff;font-size:21px;font-weight:900;letter-spacing:-.02em;
  box-shadow:0 8px 18px rgba(22,163,74,.26);
}
/* El LOGO REAL de la tienda, recortado en la MISMA caja que la inicial. */
.wpt-lp-store__logo{
  flex:0 0 52px;width:52px;height:52px;border-radius:16px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--wpt-soft);border:1px solid var(--wpt-border);
}
.wpt-lp-store__logo img{width:100%;height:100%;object-fit:cover;display:block}

/* Estado: píldora con punto verde (antes era una línea de texto suelta). */
.wpt-lp-store__live{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px;border-radius:999px;
  background:var(--wpt-primary-soft);
  border:1px solid var(--wpt-primary-border);
  color:var(--wpt-primary-dark);
  font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap;
}
.wpt-lp-store__live i{
  width:6px;height:6px;border-radius:50%;background:var(--wpt-primary);
  box-shadow:0 0 0 3px rgba(22,163,74,.16);flex:0 0 6px;
}

.wpt-lp-store__body{display:flex;flex-direction:column;gap:5px;min-width:0}

.wpt-lp-store__name{
  font-size:15.5px;font-weight:800;letter-spacing:-.01em;color:var(--wpt-text);
  line-height:1.25;
  /* El nombre puede ser largo: se recorta con puntos en vez de romper la fila. */
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* La URL se muestra SIN el esquema (https://) y en una sola línea. */
.wpt-lp-store__url{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--wpt-muted);min-width:0}
.wpt-lp-store__ico{display:inline-flex;flex:0 0 auto;color:#94a3b8}
.wpt-lp-store__ico svg{width:14px;height:14px;stroke-width:1.9}
.wpt-lp-store__url-txt{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  /* `direction:rtl` + `text-align:left` recorta por el PRINCIPIO si no cabe,
     que es lo correcto en una URL (importa más el final: el dominio). */
  direction:rtl;text-align:left;
}

/* Pie: la llamada «Ver tienda» con la flecha que avanza al pasar el ratón. */
.wpt-lp-store__cta{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:auto;padding-top:13px;
  border-top:1px solid var(--wpt-border);
  font-size:12.5px;font-weight:800;color:var(--wpt-primary-dark);
}
.wpt-lp-store__arrow{color:var(--wpt-primary);transition:transform .2s}
.wpt-lp-store:hover .wpt-lp-store__arrow{transform:translateX(4px)}

/* Tablet: 2 por fila (4 columnas). Se ANULAN las reglas de 3 y se centra la
   tarjeta que queda sola en la última fila. */
@media(max-width:900px){
  .wpt-lp-stores{grid-template-columns:repeat(4,minmax(0,1fr))}
  .wpt-lp-stores > :only-child,
  .wpt-lp-stores > :first-child:nth-last-child(2),
  .wpt-lp-stores > :nth-child(2):last-child,
  .wpt-lp-stores > :last-child:nth-child(3n+1),
  .wpt-lp-stores > :nth-child(3n+1):nth-last-child(2),
  .wpt-lp-stores > :nth-child(3n+2):last-child{grid-column:auto / span 2}
  .wpt-lp-stores > :last-child:nth-child(2n+1){grid-column:2 / span 2}
}

/* Móvil: 1 por fila. NINGUNA tarjeta puede llevar un `grid-column` de la
   rejilla ancha: crearía columnas IMPLÍCITAS y la página desbordaría a lo
   ancho (por eso se vuelven a anular TODAS las reglas de centrado). */
@media(max-width:640px){
  .wpt-lp-stores{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:24px}
  .wpt-lp-stores > :only-child,
  .wpt-lp-stores > :first-child:nth-last-child(2),
  .wpt-lp-stores > :nth-child(2):last-child,
  .wpt-lp-stores > :last-child:nth-child(3n+1),
  .wpt-lp-stores > :nth-child(3n+1):nth-last-child(2),
  .wpt-lp-stores > :nth-child(3n+2):last-child,
  .wpt-lp-stores > :last-child:nth-child(2n+1),
  .wpt-lp-store{grid-column:auto}
  .wpt-lp-store{padding:16px;border-radius:18px}
  .wpt-lp-store__mark,.wpt-lp-store__logo{flex:0 0 46px;width:46px;height:46px;border-radius:14px}
  .wpt-lp-store__mark{font-size:19px}
  .wpt-lp-store__name{font-size:15px}
}

/* --- Testimonios (avatar local con iniciales, sin imágenes remotas) --- */
/* ==========================================================================
   22.9.296 — TESTIMONIOS: CARRUSEL DE 15.
   --------------------------------------------------------------------------
   ANTES: una rejilla fija de 3 columnas con sólo 3 tarjetas —el cuarto no
   cabía y no había forma de ver el resto—, y cada testimonio escrito a mano.

   AHORA: 15 testimonios en un carrusel que REUTILIZA la maquinaria
   `.wpt-lp-slider` de la landing (mismo viewport, mismo track, mismas flechas)
   con puntos de página, avance automático que se detiene al pasar el ratón o
   tocarlo, arrastre con el dedo, teclado y bucle infinito sin salto.

   MEJORA PROGRESIVA: sin JavaScript la tira se desplaza de forma nativa
   (`overflow-x` + `scroll-snap`). El carrusel sólo MEJORA, nunca es requisito.
   ========================================================================== */
.wpt-lp-testi{margin-top:22px}
.wpt-lp-testi.wpt-lp-slider{max-width:none}
/* Sin JS: la tira se desplaza con el dedo y las teclas, de forma nativa. */
.wpt-lp-testi .wpt-lp-slider__viewport{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.wpt-lp-testi .wpt-lp-slider__slide{scroll-snap-align:start}
/* Con JS: el carrusel manda y es él quien mueve el track. */
.wpt-lp-testi.is-ready .wpt-lp-slider__viewport{overflow:hidden;touch-action:pan-y;scrollbar-width:none}
.wpt-lp-testi.is-ready .wpt-lp-slider__viewport::-webkit-scrollbar{display:none}
/* 3 tarjetas en PC, 2 en tablet, 1 en móvil. */
.wpt-lp-testi .wpt-lp-slider__slide{flex:0 0 calc(33.333% - 9.33px)}
@media(max-width:1199px){.wpt-lp-testi .wpt-lp-slider__slide{flex:0 0 calc(50% - 7px)}}
@media(max-width:640px){.wpt-lp-testi .wpt-lp-slider__slide{flex:0 0 100%}}
/* Puntos de página: el activo se estira, no sólo cambia de color. */
.wpt-lp-testi__dots{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:20px}
.wpt-lp-testi__dot{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:var(--wpt-border);cursor:pointer;transition:width .22s ease,background .22s ease}
.wpt-lp-testi__dot:hover{background:#cbd5e1}
.wpt-lp-testi__dot.is-on{width:26px;background:var(--wpt-primary)}
/* En móvil las flechas estorban: ahí manda el dedo. */
@media(max-width:640px){.wpt-lp-testi .wpt-lp-slider__nav{display:none}}
.wpt-lp-testi .card{padding:24px 22px 20px;border-radius:20px;box-shadow:var(--wpt-shadow-xs);display:flex;flex-direction:column;gap:14px}
.wpt-lp-testi .card::before{content:"\201C";position:absolute;top:2px;left:16px;font-family:Georgia,"Times New Roman",serif;font-size:58px;line-height:1;color:var(--wpt-primary-border);opacity:.6;pointer-events:none}
.wpt-lp-testi .card{position:relative;overflow:hidden}
.wpt-lp-testi .card p{margin:14px 0 0;font-size:14px;line-height:1.65;color:#334155;position:relative}
.wpt-lp-testi__meta{display:flex;align-items:center;gap:10px;margin-top:auto}
.wpt-lp-testi__who{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.wpt-lp-testi__who strong{font-size:13.5px;font-weight:800}
.wpt-lp-testi__who small{font-size:12px;color:var(--wpt-muted)}
.wpt-lp-testi__stars{color:#f59e0b;font-size:13px;letter-spacing:.16em}
.wpt-lp-ava{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;color:#fff;letter-spacing:.02em;flex:0 0 40px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.32)}
.wpt-lp-ava--1{background:linear-gradient(135deg,#16a34a,#0d9488)}
.wpt-lp-ava--2{background:linear-gradient(135deg,#2563eb,#7c3aed)}
.wpt-lp-ava--3{background:linear-gradient(135deg,#ea580c,#db2777)}
.wpt-lp-ava--4{background:linear-gradient(135deg,#0ea5e9,#6366f1)}
.wpt-lp-ava--5{background:linear-gradient(135deg,#f59e0b,#ef4444)}
.wpt-lp-ava--6{background:linear-gradient(135deg,#14b8a6,#22c55e)}
.wpt-lp-trust__ava{width:36px;height:36px;flex:0 0 36px;font-size:11.5px;margin-left:-10px;border:3px solid #fff;box-shadow:0 1px 4px rgba(15,23,42,.12)}
.wpt-lp-trust__avatars .wpt-lp-ava:first-child{margin-left:0}
@media(max-width:640px){.wpt-lp-testi .wpt-lp-slider__slide{flex:0 0 100%}}

/* --- FAQ --- */
.wpt-lp-faq{max-width:760px;margin:22px auto 0}
.wpt-lp-faq details{border-radius:16px;padding:0;overflow:hidden;box-shadow:var(--wpt-shadow-xs);transition:border-color .16s,box-shadow .16s}
.wpt-lp-faq details[open]{border-color:var(--wpt-primary-border);box-shadow:var(--wpt-shadow-sm)}
.wpt-lp-faq summary{padding:18px 20px;font-size:14.5px;gap:14px}
.wpt-lp-faq summary:after{width:26px;height:26px;font-size:15px;background:var(--wpt-soft);transition:background .16s,color .16s,border-color .16s}
.wpt-lp-faq details[open] summary:after{background:var(--wpt-text);color:#fff;border-color:var(--wpt-text)}
.wpt-lp-faq__a{color:var(--wpt-muted);font-size:13.5px;line-height:1.7;margin:0;padding:0 20px 18px}
@media(max-width:640px){
  .wpt-lp-faq summary{padding:15px 16px;font-size:13.5px}
  .wpt-lp-faq__a{padding:0 16px 15px}
}

/* ==========================================================================
   22.9.295 — CTA FINAL: JERARQUÍA, BOTÓN DE VERDAD Y GARANTÍAS EN PASTILLAS.
   --------------------------------------------------------------------------
   La tarjeta oscura ya estaba bien resuelta; lo que faltaba era JERARQUÍA
   dentro (título, párraco, botón normal y tres garantías en texto gris suelto
   = un bloque de texto, no una llamada a la acción) y que `.wpt-btn--xl`, que
   se pedía en 4 sitios, no existía en la hoja.

   Ahora: KICKER verde sobre el título, botón grande de verdad con halo, hilo de
   luz superior, y las garantías como pastillas con su check verde —el mismo
   lenguaje visual que la barra de beneficios de la 294.
   ========================================================================== */
.wpt-lp-final-cta{
  position:relative;overflow:hidden;
  margin-top:26px;border-radius:var(--wpt-radius-xl);padding:56px 28px;
  background:
    radial-gradient(760px 300px at 50% -30%, rgba(22,163,74,.42), transparent 64%),
    linear-gradient(160deg,#0f172a 0%,#1e293b 100%);
  box-shadow:var(--wpt-shadow-lg);
}
/* Hilo de luz superior: el borde «premium» sin ensuciar el conjunto. */
.wpt-lp-final-cta::before{
  content:"";position:absolute;top:0;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(74,222,128,.55),transparent);
}
/* Kicker: el escalón que faltaba por encima del título. */
.wpt-lp-final-cta__kicker{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px;border-radius:999px;margin:0 auto 20px;
  background:rgba(22,163,74,.16);border:1px solid rgba(74,222,128,.34);
  color:#86efac;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.wpt-lp-final-cta__kicker svg{width:14px;height:14px;flex:0 0 14px}
.wpt-lp-final-cta h3{font-size:clamp(24px,3.4vw,34px);letter-spacing:-.025em;line-height:1.15;margin:0 0 12px;font-weight:900}
.wpt-lp-final-cta p{font-size:15.5px;color:#cbd5e1;max-width:520px;margin:0 auto 26px;line-height:1.65}
/* El botón principal lleva halo: es lo único que hay que hacer aquí. */
.wpt-lp-final-cta__btn{box-shadow:0 10px 30px rgba(22,163,74,.42)!important}
.wpt-lp-final-cta__btn:hover{box-shadow:0 14px 38px rgba(22,163,74,.52)!important}
.wpt-lp-final-cta__btn svg{transition:transform .18s}
.wpt-lp-final-cta__btn:hover svg{transform:translateX(3px)}
@media(max-width:640px){
  .wpt-lp-final-cta{padding:38px 18px;border-radius:20px}
  .wpt-lp-final-cta__kicker{margin-bottom:16px;font-size:10.5px;padding:5px 12px}
  .wpt-lp-final-cta h3{font-size:clamp(22px,7vw,28px)}
  .wpt-lp-final-cta p{font-size:14.5px;margin-bottom:22px}
  .wpt-btn--xl{min-height:50px;padding:14px 22px;font-size:14.5px}
}

/* --- Footer --- */
.wpt-lp-footer--dark{padding:56px 24px 38px;gap:34px;grid-template-columns:1.4fr .8fr .8fr}
.wpt-lp-footer--dark strong{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8}
.wpt-lp-footer--dark a{transition:color .15s,transform .15s;display:inline-block}
.wpt-lp-footer--dark a:hover{color:#4ade80;transform:translateX(2px)}
.wpt-lp-footer--dark p{line-height:1.7;max-width:430px}
.wpt-lp-footer--dark .wpt-lp-brand{color:#fff}
@media(max-width:768px){.wpt-lp-footer--dark{padding:42px 20px 30px;gap:28px}}

/* ==========================================================================
   22.9.172 — FIXES MÓVILES (header, Cómo funciona, Fideliza/puntos, footer)
   + logo de la landing subible desde el panel.
   ========================================================================== */

/* --- Logo subible (cabecera y pie) --- */
.wpt-lp-brand__mark--img{background:transparent!important;box-shadow:none}
.wpt-lp-brand__mark--img img{width:100%;height:100%;object-fit:contain;display:block;border-radius:8px}
.wpt-lp-brand__mark--img svg{display:none}

/* --- Header móvil: píldora compacta, marca visible, CTA prioritario --- */
@media(max-width:640px){
  .wpt-landing-wp{--wpt-lp-head:57px}
  .wpt-lp-top{padding:0}
  .wpt-lp-top.is-scrolled,
  .wpt-lp-top.is-past-hero{padding:10px 12px 0}
  .wpt-lp-top.is-scrolled .wpt-lp-top__shell,
  .wpt-lp-top.is-past-hero .wpt-lp-top__shell{border-radius:22px}
  .wpt-lp-top__inner{padding:8px 8px 8px 12px;gap:10px;min-height:54px}
  .wpt-lp-brand{font-size:16px;gap:8px;min-width:0}
  .wpt-lp-brand__mark{width:30px;height:30px;flex:0 0 30px}
  .wpt-lp-header-cta{gap:8px}
  .wpt-lp-burger{width:44px;height:44px;flex:0 0 44px}
  .wpt-lp-nav{left:0;right:0;padding:8px;border-radius:18px}
  .wpt-lp-nav a{padding:12px 14px}
}
/* 22.9.202 — en móvil el CTA principal va limpio: sin rótulo "Iniciar sesión"
   (queda en el menú) y la píldora oscura se estrecha para caber con la marca. */
@media(max-width:640px){
  .wpt-lp-cta__ghost{display:none}
  .wpt-lp-cta__main{padding:10px 16px;min-height:44px;font-size:13px}
}
.hidden-cta-inline{display:none}
/* Anula el ocultado de marca de versiones previas: en 360-400 ahora entra */
@media(max-width:400px){
  .wpt-lp-top__inner{padding:7px 7px 7px 10px}
  .wpt-lp-brand{font-size:15px;gap:7px}
  .wpt-lp-brand__mark{width:28px;height:28px;flex:0 0 28px}
  .wpt-lp-cta__main{padding:9px 14px;font-size:12.5px}
}
@media(max-width:348px){
  .wpt-lp-brand__text{display:none}
}

/* --- "Cómo funciona": móvil en tres filas ordenadas (píldoras | icono+título | texto) --- */
@media(max-width:767px){
  .wpt-lp-steps{gap:12px}
  .wpt-lp-step{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;text-align:left;padding:16px}
  .wpt-lp-step__num{position:static;transform:none;order:1;flex:0 0 auto;background:var(--wpt-primary-soft);color:var(--wpt-primary-dark);border:1px solid var(--wpt-primary-border);box-shadow:none}
  .wpt-lp-step--dark .wpt-lp-step__num{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18);color:#fff}
  .wpt-lp-step__badge{order:2;margin:0 0 0 auto}
  .wpt-lp-step__ic{order:3;margin:0;flex:0 0 46px;width:46px;height:46px;border-radius:13px}
  .wpt-lp-step h3{order:4;margin:0;flex:1 1 auto;min-width:0;font-size:14.5px}
  .wpt-lp-step p{order:5;flex:1 1 100%;margin:0;max-width:100%;font-size:12.5px}
}

/* --- Fideliza y haz que vuelvan: una columna en tablet y móvil --- */
@media(max-width:1024px){
  .wpt-lp-featured{grid-template-columns:minmax(0,1fr)}
  .wpt-lp-featured__left{padding:24px 20px}
  .wpt-lp-featured__right{padding:18px 16px}
  .wpt-lp-puntos__mock{max-width:340px}
}
@media(max-width:640px){
  .wpt-lp-featured__left{padding:20px 16px}
  .wpt-lp-featured__left h3{font-size:18px}
  .wpt-lp-featured__list{font-size:12.5px}
  .wpt-lp-puntos__mock{padding:14px}
  .wpt-lp-puntos__mock-points{font-size:24px}
}

/* --- Footer móvil: alineado a la izquierda, marca arriba y enlaces en 2 columnas --- */
@media(max-width:768px){
  .wpt-lp-footer--dark{grid-template-columns:repeat(2,minmax(0,1fr))!important;text-align:left;gap:26px 18px;padding:40px 20px 28px}
  .wpt-lp-footer--dark > :first-child{grid-column:1 / -1}
  .wpt-lp-footer--dark .wpt-lp-brand{justify-content:flex-start}
  .wpt-lp-footer--dark .wpt-lp-brand__mark{background:var(--wpt-primary)}
  .wpt-lp-footer--dark p{max-width:100%}
  .wpt-lp-footer--dark a{padding:2px 0}
}
@media(max-width:420px){
  .wpt-lp-footer--dark{gap:22px 14px}
}


/* ==========================================================================
   22.9.189 — LANDING: anclajes bajo el header fijo, barra de administración
   y cabecera consolidada
   ========================================================================== */

/*
 * FIX 1 — EL TÍTULO DE LA SECCIÓN QUEDABA TAPADO POR EL HEADER.
 *
 * Los cuatro enlaces del menú (#beneficios, #funciones, #planes, #faq)
 * apuntan a secciones, pero no había ningún `scroll-margin-top`. Como el
 * header es `position: sticky`, al pulsar un enlace el navegador lleva la
 * sección a y=0… y el header (61-70 px según el ancho) la tapa entera.
 * MEDIDO con Chrome a 320/390/768/1024 px: 0 px visibles, 61-67 px tapados.
 *
 * Se deja aire para el header más un margen. Funciona en móvil, tablet y PC.
 */
/*
 * 22.9.202 — LA CABECERA ES UNA PÍLDORA FLOTANTE SIN BORDE INFERIOR, PERO
 * SIGUE SIENDO `sticky`. El hueco que reservan los anclajes incluye ahora el
 * relleno superior de la píldora (12 px) más su alto. Se mantiene el valor
 * holgado de 22.9.189 para que ningún título quede tapado.
 */
.wpt-landing-wp [id] { scroll-margin-top: 96px; }

/* Con la barra de administración de WordPress delante, el header baja 32 px
   (46 px en móvil): el hueco tiene que crecer igual. */
body.admin-bar:has(#wpadminbar) .wpt-landing-wp [id] { scroll-margin-top: 130px; }
@media (max-width: 782px) {
  body.admin-bar:has(#wpadminbar) .wpt-landing-wp [id] { scroll-margin-top: 144px; }
}

/*
 * FIX 2 — EL HEADER SE METÍA DEBAJO DE LA BARRA DE ADMINISTRACIÓN.
 *
 * No existía ninguna regla `body.admin-bar` en toda la hoja. Cuando la barra
 * de WordPress está presente (32 px arriba, fija, con z-index altísimo), el
 * header sticky se pegaba a `top: 0` y su botón quedaba TAPADO por arriba:
 * se veía recortado. Aquí se le hace sitio.
 *
 * 22.9.192 — LA CONDICIÓN ES `:has(#wpadminbar)`, NO SÓLO LA CLASE.
 *
 * La primera versión usaba `body.admin-bar`, y eso abrió un problema nuevo: la
 * landing OCULTA la barra (`add_filter('show_admin_bar','__return_false')`),
 * pero si la clase `admin-bar` acaba en el `<body>` igualmente, el header
 * sticky se desplazaba 32 px (46 en móvil) y quedaba un HUECO BLANCO arriba
 * del todo. MEDIDO con Chrome: con la clase pero sin barra, el header se
 * colocaba en `top=32px` (móvil: 46px) en vez de en 0.
 *
 * Ahora el desplazamiento sólo se aplica si la barra existe de verdad. Si el
 * navegador no soporta `:has()`, la regla se ignora y el header se queda
 * arriba: se degrada al comportamiento sin barra, que es el correcto aquí.
 */
body.admin-bar:has(#wpadminbar) .wpt-lp-top { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar:has(#wpadminbar) .wpt-lp-top { top: 46px; }
}

/*
 * FIX 3 — LA MARCA NO PODÍA ENCOGERSE.
 *
 * `.wpt-lp-brand` no tenía `min-width: 0`, así que con un nombre largo (o un
 * logo ancho subido desde el panel) empujaba al botón y al burger. Ahora la
 * marca cede espacio y el texto se recorta con puntos suspensivos en vez de
 * descolocar la cabecera.
 */
.wpt-lp-top__inner > * { min-width: 0; }
.wpt-lp-brand { min-width: 0; }
.wpt-lp-brand__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* El botón y el burger nunca se encogen: son la acción principal. */
.wpt-lp-header-cta { flex: 0 0 auto; }
.wpt-lp-burger { flex: 0 0 auto; }


/* ==========================================================================
   22.9.190 — ETIQUETA "GRATIS 1ER MES": se escapaba al inicio de la página
   --------------------------------------------------------------------------
   La etiqueta es `position: absolute`, pero la tarjeta que la contiene
   (`.wpt-lp-price`) no tenía `position`, así que NO había contenedor de
   referencia: se posicionaba contra el inicio del documento y aparecía arriba
   del todo, cortada por el borde superior y encima de la cabecera.

   MEDIDO con Chrome: la etiqueta salía en y = -10..16 mientras su tarjeta
   estaba en y = 1785. Se escapaba ~1800 px. Afectaba a móvil, tablet y PC
   por igual, porque es un fallo de posicionamiento, no de responsive.
   ========================================================================== */

/* La tarjeta pasa a ser el contenedor de referencia de su etiqueta. */
.wpt-lp-price { position: relative; }

/* El estilo en línea pasa a clase, como el resto de la hoja. */
.wpt-lp-price__promo {
  position: absolute;
  top: -10px;
  right: 16px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--wpt-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
}

/* En móvil las tarjetas se apilan: la etiqueta sobresale 10 px por arriba, así
   que se le deja aire para que no toque la tarjeta anterior. */
@media (max-width: 1023px) {
  .wpt-lp-price--featured { margin-top: 14px; }
}

/* ==========================================================================
   22.9.205 — BOTÓN FLOTANTE DE WHATSAPP.
   --------------------------------------------------------------------------
   Vuelve el botón flotante que la landing tenía antes y se perdió en un
   rediseño. Icono OFICIAL (Helpers::whatsapp_path(), el mismo trazado que usa
   todo el plugin) y PARPADEANTE.
   ========================================================================== */

.wpt-lp-wa{
  position:fixed;
  /* Respeta el notch y la barra inferior del móvil. */
  right:calc(22px + env(safe-area-inset-right, 0px));
  bottom:calc(22px + env(safe-area-inset-bottom, 0px));
  z-index:60;
  width:60px;height:60px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:#25D366;                 /* verde OFICIAL de WhatsApp */
  box-shadow:0 10px 26px rgba(37,211,102,.42),0 3px 8px rgba(15,23,42,.18);
  transition:transform .18s,box-shadow .18s;
  /* El botón se anima (latido). El halo va aparte, en ::after. */
  animation:wptWaBeat 2.4s ease-in-out infinite;
}
/* ⚠️ `.wpt-landing-wp a{color:inherit}` (línea 24) gana por especificidad
   (0,1,1) a `.wpt-lp-wa` (0,1,0) y anulaba el `color:#fff`. Se sube la
   especificidad repitiendo la clase para que el blanco gane siempre. */
.wpt-lp-wa.wpt-lp-wa{color:#fff}

/* Icono: el SVG oficial. `currentColor` + `fill` lo pintan en blanco. */
.wpt-lp-wa__ic{position:relative;z-index:2;display:flex;align-items:center;justify-content:center}
.wpt-lp-wa__ic svg{width:30px;height:30px;display:block;fill:#fff}

.wpt-lp-wa:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 14px 32px rgba(37,211,102,.52),0 4px 10px rgba(15,23,42,.22)}

/* --- EL PARPADEO ---------------------------------------------------------
   Dos capas, ninguna toca el icono:
     · `::before` = halo estático translúcido pegado al botón.
     · `__halo`   = onda que se expande y se desvanece en bucle (el "latido").
   Ambas van con `pointer-events:none` para no robar el clic al enlace. */
.wpt-lp-wa::before{
  content:"";
  position:absolute;inset:0;border-radius:50%;
  background:rgba(37,211,102,.32);
  z-index:0;
  pointer-events:none;
}
.wpt-lp-wa__halo{
  position:absolute;inset:0;border-radius:50%;
  background:rgba(37,211,102,.55);
  z-index:1;
  pointer-events:none;
  animation:wptWaHalo 2s ease-out infinite;
}

@keyframes wptWaHalo{
  0%   { transform:scale(1);   opacity:.65; }
  70%  { transform:scale(1.9); opacity:0;   }
  100% { transform:scale(1.9); opacity:0;   }
}
@keyframes wptWaBeat{
  0%,72%,100% { transform:scale(1);    }
  80%         { transform:scale(1.08); }
  88%         { transform:scale(1);    }
  94%         { transform:scale(1.05); }
}

/* Etiqueta que asoma al pasar el ratón (sólo donde hay ratón de verdad). */
.wpt-lp-wa__tip{
  position:absolute;
  right:calc(100% + 12px);
  top:50%;transform:translateY(-50%) translateX(6px);
  background:var(--wpt-text);color:#fff;
  font-size:12.5px;font-weight:800;white-space:nowrap;
  padding:8px 12px;border-radius:12px;
  box-shadow:0 8px 20px rgba(15,23,42,.2);
  opacity:0;pointer-events:none;
  transition:opacity .18s,transform .18s;
}
.wpt-lp-wa:hover .wpt-lp-wa__tip{opacity:1;transform:translateY(-50%) translateX(0)}
.wpt-lp-wa:focus-visible{outline:3px solid var(--wpt-primary-dark);outline-offset:3px}

@media(max-width:640px){
  .wpt-lp-wa{width:54px;height:54px;right:calc(16px + env(safe-area-inset-right, 0px));bottom:calc(16px + env(safe-area-inset-bottom, 0px))}
  .wpt-lp-wa__ic svg{width:27px;height:27px}
  /* En táctil no hay hover: la etiqueta sobra y solo taparía la pantalla. */
  .wpt-lp-wa__tip{display:none}
}

/* Accesibilidad: con movimiento reducido el parpadeo se apaga por completo. */
@media (prefers-reduced-motion: reduce){
  .wpt-lp-wa{animation:none}
  .wpt-lp-wa__halo{animation:none;opacity:.35;transform:scale(1)}
}


/* ==========================================================================
   22.9.277 — La tabla de precios se construye con los PLANES configurados en
   el panel, así que el número de tarjetas no se sabe de antemano: rejilla que
   se adapta y tarjetas de la misma altura.
   ========================================================================== */
.wpt-lp-pricing--plans{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:stretch}
.wpt-lp-pricing--plans .wpt-lp-price{display:flex;flex-direction:column}
.wpt-lp-pricing--plans .wpt-lp-price ul{flex:1 1 auto}
.wpt-lp-pricing--plans .wpt-lp-price--featured{background:var(--wpt-soft)}

/* ==========================================================================
   22.9.278 — TARJETAS DE PLAN PROFESIONALES + MÓDULOS CON ICONOS + PRECIO LOCAL
   ========================================================================== */
.wpt-lp-pricing-head{text-align:center;max-width:720px;margin:0 auto 26px}

.wpt-lp-pricing--plans{
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  align-items:stretch;
  gap:18px;
  max-width:1080px;
}

.wpt-lp-plan{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:26px 22px 24px;
  border:1px solid var(--wpt-border);
  border-radius:20px;
  background:var(--wpt-bg);
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.wpt-lp-plan:hover{box-shadow:0 16px 40px rgba(15,23,42,.10);transform:translateY(-2px)}
/* ==========================================================================
   22.9.298 — LA TARJETA RECOMENDADA PASA A OSCURA.
   --------------------------------------------------------------------------
   Antes era gris claro con un borde oscuro de 2 px: se distinguía, pero seguía
   leyéndose como «otra tarjeta». Ahora usa el MISMO lenguaje que el CTA final
   (22.9.295): degradado oscuro, resplandor verde arriba y un hilo de luz de
   1 px. El foco de la sección pasa a ser el plan que se quiere vender, que es
   justo lo que tiene que hacer una portada de precios.
   ========================================================================== */
.wpt-lp-plan.is-featured{
  border:1px solid rgba(74,222,128,.30);
  background:
    radial-gradient(420px 210px at 50% -22%, rgba(22,163,74,.40), transparent 62%),
    linear-gradient(160deg,#0f172a 0%,#1e293b 100%);
  box-shadow:0 24px 60px rgba(15,23,42,.26);
}
.wpt-lp-plan.is-featured::before{
  content:"";position:absolute;top:0;left:14%;right:14%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(74,222,128,.6),transparent);
}
.wpt-lp-plan__ribbon{
  position:absolute;
  top:-11px;
  right:18px;
  padding:4px 12px;
  border-radius:999px;
  background:var(--wpt-primary);
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
}

.wpt-lp-plan__titlerow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wpt-lp-plan__name{margin:0;font-size:16px;font-weight:800;letter-spacing:-.01em}
.wpt-lp-plan__pill{
  padding:3px 9px;
  border-radius:999px;
  background:var(--wpt-primary-soft);
  border:1px solid var(--wpt-primary-border);
  color:#065f46;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}
.wpt-lp-plan__desc{margin:6px 0 0;font-size:12.5px;color:var(--wpt-muted);min-height:18px}

/* Zona del precio: importe, periodo y pastilla local, con un filete que la
   separa de las características. Cada zona se lee de un vistazo. */
.wpt-lp-plan__price{
  margin:18px 0 0;padding-bottom:16px;
  display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;
  border-bottom:1px solid var(--wpt-border);
}
.wpt-lp-plan__amount{font-size:36px;font-weight:900;letter-spacing:-.035em;line-height:1}
.wpt-lp-plan__period{font-size:14px;font-weight:600;color:var(--wpt-muted)}
/* ==========================================================================
   22.9.297 — PRECIO LOCAL EN PASTILLA.
   --------------------------------------------------------------------------
   ANTES: una línea de texto gris suelto («≈ $95.210 COP») que se leía como una
   nota al pie y no transmitía que el número fuera de HOY.

   AHORA: pastilla con el mismo lenguaje visual que el resto de la landing
   (barra de beneficios 294, CTA 295): icono en cuadrado tintado, importe en
   negrita, código de moneda como etiqueta y la FRESHURA de la tasa
   («tasa de hoy» / «tasa del 16 oct») para que se vea que está al día.
   ========================================================================== */
.wpt-lp-plan__local{
  flex:1 1 100%;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:11px;
  padding:8px 12px;
  border-radius:12px;
  background:var(--wpt-primary-soft);
  border:1px solid var(--wpt-primary-border);
}
/* El icono va en cuadrado tintado, como en el resto de la landing. */
.wpt-lp-plan__local-ico{
  width:26px;height:26px;border-radius:8px;flex:0 0 26px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--wpt-primary-border);
  color:var(--wpt-primary-dark);
}
.wpt-lp-plan__local-ico svg{width:14px;height:14px}
.wpt-lp-plan__body{display:inline-flex;align-items:baseline;gap:6px;min-width:0}
.wpt-lp-plan__local-amt{font-size:13px;font-weight:900;letter-spacing:-.02em;color:var(--wpt-text);font-variant-numeric:tabular-nums;white-space:nowrap}
.wpt-lp-plan__local-code{
  font-size:10px;font-weight:800;letter-spacing:.07em;
  color:var(--wpt-primary-dark);text-transform:uppercase;white-space:nowrap;
}
/* Frescura de la tasa: la prueba visible de que el precio se actualiza. */
.wpt-lp-plan__local-when{
  margin-left:auto;
  font-size:10.5px;font-weight:700;color:var(--wpt-primary-dark);
  white-space:nowrap;
}

.wpt-lp-plan__feats{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px;font-size:13px}
.wpt-lp-plan__feats li{display:flex;gap:9px;align-items:flex-start}
.wpt-lp-plan__feats li i{
  width:18px;height:18px;
  border-radius:50%;
  background:var(--wpt-primary-soft);
  border:1px solid var(--wpt-primary-border);
  display:flex;align-items:center;justify-content:center;
  color:var(--wpt-primary);
  flex:0 0 18px;
  margin-top:1px;
}

.wpt-lp-plan__mods{margin:16px 0 20px;padding-top:14px;border-top:1px dashed var(--wpt-border)}
.wpt-lp-plan__mods-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--wpt-muted);
}
.wpt-lp-plan__mods-head b{color:var(--wpt-text)}
.wpt-lp-plan__mods-list{display:flex;flex-wrap:wrap;gap:6px}
.wpt-lp-mod{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid var(--wpt-border);
  background:var(--wpt-bg);
  font-size:11.5px;font-weight:600;color:var(--wpt-text);
}
.wpt-lp-plan.is-featured .wpt-lp-mod{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15);color:#e2e8f0}
.wpt-lp-mod__ico{display:inline-flex;color:var(--wpt-primary)}
.wpt-lp-mod__ico svg{width:13px;height:13px}
.wpt-lp-plan__mods-empty{margin:0;font-size:12px;color:var(--wpt-muted)}

/* `margin-top:auto` empuja el botón al fondo: las tarjetas quedan parejas. */
.wpt-lp-plan__cta{margin-top:auto;width:100%;justify-content:center}

/* ==========================================================================
   22.9.298 — LA BANDERA DEL PAÍS EN LA PASTILLA DEL PRECIO LOCAL.
   --------------------------------------------------------------------------
   `Countries::flag_svg()` dibuja la bandera con SVG EN LÍNEA. NO se usa el
   emoji de bandera: en Windows los indicadores regionales no tienen glifo y
   Chrome pinta las DOS LETRAS («co»), que parece un error — ya pasó con el
   desplegable telefónico (22.9.283).
   ========================================================================== */
.wpt-flag{display:block;width:18px;height:13.5px;border-radius:2.5px}
/* Dentro del cuadrado tintado manda la bandera, no el tamaño genérico del SVG. */
.wpt-lp-plan__local-ico .wpt-flag{width:18px;height:13.5px;box-shadow:0 0 0 1px rgba(15,23,42,.12)}

/* --------------------------------------------------------------------------
   La tarjeta recomendada, en oscuro: todo lo de dentro tiene que cambiar.
   -------------------------------------------------------------------------- */
.wpt-lp-plan.is-featured .wpt-lp-plan__name,
.wpt-lp-plan.is-featured .wpt-lp-plan__amount{color:#fff}
.wpt-lp-plan.is-featured .wpt-lp-plan__desc,
.wpt-lp-plan.is-featured .wpt-lp-plan__period{color:#94a3b8}
.wpt-lp-plan.is-featured .wpt-lp-plan__price{border-bottom-color:rgba(148,163,184,.22)}
.wpt-lp-plan.is-featured .wpt-lp-plan__pill{background:rgba(34,197,94,.18);border-color:rgba(74,222,128,.34);color:#86efac}
.wpt-lp-plan.is-featured .wpt-lp-plan__feats{color:#e2e8f0}
.wpt-lp-plan.is-featured .wpt-lp-plan__feats li i{background:rgba(34,197,94,.16);border-color:rgba(74,222,128,.32);color:#4ade80}
.wpt-lp-plan.is-featured .wpt-lp-plan__mods{border-top-color:rgba(148,163,184,.26)}
.wpt-lp-plan.is-featured .wpt-lp-plan__mods-head{color:#94a3b8}
.wpt-lp-plan.is-featured .wpt-lp-plan__mods-head b{color:#fff}
.wpt-lp-plan.is-featured .wpt-lp-mod__ico{color:#4ade80}
.wpt-lp-plan.is-featured .wpt-lp-plan__local{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15)}
.wpt-lp-plan.is-featured .wpt-lp-plan__local-ico{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18);color:#4ade80}
.wpt-lp-plan.is-featured .wpt-lp-plan__local-amt{color:#fff}
.wpt-lp-plan.is-featured .wpt-lp-plan__local-code,
.wpt-lp-plan.is-featured .wpt-lp-plan__local-when{color:#86efac}
.wpt-lp-plan.is-featured .wpt-lp-plan__local-ico .wpt-flag{box-shadow:0 0 0 1px rgba(255,255,255,.22)}

/* El botón del plan recomendado: sobre fondo oscuro el botón oscuro
   desaparecía. Pasa al verde de la marca, con halo. */
.wpt-lp-plan.is-featured .wpt-lp-plan__cta{
  background:linear-gradient(180deg,#22c55e,#16a34a);
  border-color:transparent;color:#fff!important;
  box-shadow:0 10px 26px rgba(22,163,74,.36);
}
.wpt-lp-plan.is-featured .wpt-lp-plan__cta:hover{background:linear-gradient(180deg,#16a34a,#15803d)}

/* Y los planes que NO son el recomendado bajan de peso: contorno en vez de
   relleno. Es lo que hace que la mirada vaya al plan destacado. */
.wpt-lp-plan:not(.is-featured) .wpt-lp-plan__cta{
  background:var(--wpt-bg);border-color:var(--wpt-border);color:var(--wpt-text)!important;
}
.wpt-lp-plan:not(.is-featured) .wpt-lp-plan__cta:hover{background:var(--wpt-soft);border-color:#cbd5e1}

/* A 560 px, dos tarjetas se quedan en ~250 px cada una: mejor apilar antes. */
@media (max-width:640px){
  .wpt-lp-pricing--plans{grid-template-columns:minmax(0,1fr)}
}

.wpt-lp-pricing-note{
  display:flex;align-items:center;justify-content:center;gap:8px;
  max-width:680px;margin:22px auto 0;padding:12px 18px;
  border-radius:14px;
  background:var(--wpt-soft);border:1px solid var(--wpt-border);
  font-size:12px;color:var(--wpt-muted);text-align:center;line-height:1.55;
}

@media (max-width:520px){
  .wpt-lp-plan__amount{font-size:32px}
  .wpt-lp-plan{padding:20px 18px}
  /* En móvil la pastilla se apila y la frescura pasa a su propia línea. */
  .wpt-lp-plan__local{gap:6px;padding:9px 11px}
  .wpt-lp-plan__local-when{margin-left:0;flex:1 1 100%}
}

/* ==========================================================================
   22.9.285 — SECCIONES POST-HERO: acabado profesional, movimiento e interacción.
   --------------------------------------------------------------------------
   NO toca la cabecera ni el hero (intactos). Todo lo demás gana jerarquía,
   animación sutil y un diseño menos "plantilla genérica":

     · cabecera de sección unificada (.wpt-lp-secthead)
     · revelado al hacer scroll (.wpt-lp-reveal → .is-visible)
     · contadores animados (.wpt-lp-count)
     · estadísticas en 4 KPI + confianza
     · sección NUEVA "comparativa" (antes vs. después)
     · sección NUEVA "sin riesgo" (garantías)
     · testimonios con su resultado
     · CTA final con recordatorio de confianza

   El estado oculto del revelado SÓLO se activa con `.wpt-lp-js` en el <html>
   (lo pone un script al inicio del bloque): sin JavaScript nada queda oculto.
   ========================================================================== */

/* --- Cabecera de sección unificada --- */
.wpt-lp-secthead{text-align:center;max-width:720px;margin:0 auto 30px}
.wpt-lp-secthead .wpt-lp-h{margin-bottom:10px}
.wpt-lp-secthead .wpt-lp-sub{margin-bottom:0}

/* --- Revelado al hacer scroll (sólo si hay JS) --- */
.wpt-lp-js .wpt-lp-reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .62s cubic-bezier(.22,1,.36,1),transform .62s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
.wpt-lp-js .wpt-lp-reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .wpt-lp-js .wpt-lp-reveal{opacity:1!important;transform:none!important;transition:none!important}
}
/* Los contadores usan cifras tabulares para que no "bailen" al contar. */
.wpt-lp-count{font-variant-numeric:tabular-nums;display:inline-block}

/* --- Estadísticas: reparto 1 confianza + 4 KPI (22.9.293) --------------- */
/* El hover y la transición viven ya en el bloque base; aquí sólo el REPARTO
   de columnas, que es lo que cambia con el ancho. La confianza lleva un poco
   más de sitio (1.7 -> 1.9) para que su texto no se recorte. */
.wpt-lp-stats__card{grid-template-columns:1.9fr repeat(4,minmax(0,1fr))}
@media(max-width:1024px){
  .wpt-lp-stats__card{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wpt-lp-stats__card .wpt-lp-trust{grid-column:1 / -1}
}
@media(max-width:560px){
  .wpt-lp-stats__card{grid-template-columns:minmax(0,1fr)}
}

/* --- Beneficios: resultado medible bajo cada ventaja --- */
.wpt-lp-why__metric{
  display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  font-size:12px;font-weight:700;color:var(--wpt-muted);
  background:var(--wpt-primary-soft);border:1px solid var(--wpt-primary-border);
  padding:5px 11px;border-radius:999px;
}
.wpt-lp-why__metric b{color:var(--wpt-primary-dark);font-weight:900;font-size:13.5px}

/* ==========================================================================
   SECCIÓN NUEVA — "Comparativa": el antes y el después, lado a lado.
   Es el bloque más persuasivo de la landing: muestra el dolor concreto de
   vender sólo por chat y lo contrasta con la tienda digital.
   ========================================================================== */
.wpt-lp-compare-wrap{position:relative}
.wpt-lp-compare{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:0;align-items:stretch;max-width:1020px;margin:0 auto;
}
.wpt-lp-compare__col{
  padding:28px 26px;border-radius:22px;border:1px solid var(--wpt-border);
  background:#fff;
}
.wpt-lp-compare__col--bad{
  background:linear-gradient(180deg,#fff6f6 0%,#fff 62%);
  border-color:#fecaca;
}
.wpt-lp-compare__col--good{
  background:linear-gradient(180deg,#f2fdf6 0%,#fff 62%);
  border-color:var(--wpt-primary-border);
  box-shadow:0 22px 46px rgba(22,163,74,.10);
}
.wpt-lp-compare__head{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.wpt-lp-compare__head h3{margin:0;font-size:17px;font-weight:900;letter-spacing:-.015em}
.wpt-lp-compare__ic{
  width:40px;height:40px;border-radius:12px;flex:0 0 40px;
  display:flex;align-items:center;justify-content:center;
}
.wpt-lp-compare__ic svg{width:20px;height:20px}
.wpt-lp-compare__col--bad .wpt-lp-compare__ic{background:#fee2e2;color:#dc2626}
.wpt-lp-compare__col--good .wpt-lp-compare__ic{
  background:var(--wpt-primary-soft);border:1px solid var(--wpt-primary-border);color:var(--wpt-primary);
}
.wpt-lp-compare__col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:13.5px;line-height:1.45}
.wpt-lp-compare__col li{display:flex;gap:10px;align-items:flex-start;color:#475569}
.wpt-lp-compare__col--good li{color:var(--wpt-text);font-weight:500}
.wpt-lp-compare__col li i{
  width:20px;height:20px;border-radius:50%;flex:0 0 20px;margin-top:1px;
  display:flex;align-items:center;justify-content:center;
}
.wpt-lp-compare__col li i svg{width:11px;height:11px;stroke-width:2.6}
.wpt-lp-compare__col--bad li i{background:#fee2e2;color:#dc2626}
.wpt-lp-compare__col--good li i{background:var(--wpt-primary-soft);border:1px solid var(--wpt-primary-border);color:var(--wpt-primary)}
.wpt-lp-compare__vs{display:flex;align-items:center;justify-content:center;padding:0 16px}
.wpt-lp-compare__vs span{
  width:46px;height:46px;border-radius:50%;background:var(--wpt-text);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:900;letter-spacing:.05em;
  box-shadow:0 10px 22px rgba(15,23,42,.24);
}
.wpt-lp-compare__cta{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:28px;text-align:center}
.wpt-lp-compare__cta-note{font-size:12px;color:var(--wpt-muted);font-weight:600}
@media(max-width:860px){
  .wpt-lp-compare{grid-template-columns:minmax(0,1fr);gap:0}
  .wpt-lp-compare__vs{padding:14px 0}
  .wpt-lp-compare__col{padding:22px 20px}
  .wpt-lp-compare__head h3{font-size:16px}
}

/* ==========================================================================
   SECCIÓN NUEVA — "Sin riesgo": garantías que quitan la fricción final.
   ========================================================================== */
.wpt-lp-trust-badges{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
  max-width:1000px;margin:0 auto;
}
.wpt-lp-trust-badge{
  background:#fff;border:1px solid var(--wpt-border);border-radius:18px;
  padding:24px 20px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  box-shadow:var(--wpt-shadow-xs);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.wpt-lp-trust-badge:hover{
  transform:translateY(-4px);
  box-shadow:var(--wpt-shadow-md);
  border-color:var(--wpt-primary-border);
}
.wpt-lp-trust-badge__ic{
  width:48px;height:48px;border-radius:14px;margin-bottom:2px;
  background:var(--wpt-primary-soft);border:1px solid var(--wpt-primary-border);
  color:var(--wpt-primary);display:flex;align-items:center;justify-content:center;
  transition:transform .18s ease;
}
.wpt-lp-trust-badge:hover .wpt-lp-trust-badge__ic{transform:scale(1.08) rotate(-3deg)}
.wpt-lp-trust-badge__ic svg{width:22px;height:22px}
.wpt-lp-trust-badge strong{font-size:15px;font-weight:800;letter-spacing:-.01em}
.wpt-lp-trust-badge small{font-size:12.5px;color:var(--wpt-muted);line-height:1.5;max-width:230px}
@media(max-width:900px){.wpt-lp-trust-badges{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.wpt-lp-trust-badges{grid-template-columns:minmax(0,1fr);gap:12px}}

/* --- Testimonios: resultado medible en cada tarjeta --- */
.wpt-lp-testi__metric{
  position:relative;z-index:1;align-self:flex-start;
  display:inline-flex;align-items:center;
  background:var(--wpt-primary);color:#fff;
  font-size:11.5px;font-weight:800;letter-spacing:.03em;
  padding:4px 11px;border-radius:999px;
  box-shadow:0 4px 12px rgba(22,163,74,.26);
}

/* --- CTA final: garantías en PASTILLAS (22.9.295) ------------------------ */
/* Antes eran texto gris suelto y se leían como una nota al pie. Ahora son
   pastillas con su check verde, el mismo lenguaje que la barra de beneficios. */
.wpt-lp-final-cta__trust{
  display:flex;flex-wrap:wrap;gap:10px 12px;justify-content:center;margin-top:26px;
}
.wpt-lp-final-cta__trust span{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);
  font-size:12.5px;font-weight:700;color:#E2E8F0;
  transition:background .18s ease,border-color .18s ease;
}
.wpt-lp-final-cta__trust span:hover{background:rgba(255,255,255,.12);border-color:rgba(74,222,128,.42)}
.wpt-lp-final-cta__trust svg{width:15px;height:15px;color:#4ade80;flex:0 0 15px}
@media(max-width:640px){
  .wpt-lp-final-cta__trust{gap:8px;margin-top:22px}
  .wpt-lp-final-cta__trust span{font-size:11.5px;padding:6px 12px}
}

/* --- "Cómo funciona": texto y CTA con clase propia.
   Antes iban con `style="font-size:12px;color:...;margin-top:4px"` en línea, que
   es justo lo que hace que una sección parezca plantilla genérica. Ahora el
   aspecto vive en la hoja y el HTML queda limpio. --- */
.wpt-lp-step__text{font-size:12px;color:var(--wpt-muted);margin-top:4px;line-height:1.5}
.wpt-lp-step--dark .wpt-lp-step__text{color:#cbd5e1}
.wpt-lp-steps__cta{text-align:center;margin-top:20px}

/* --- "Fidelización": maqueta de puntos y demostración, con clase propia --- */
.wpt-lp-featured__badge i{width:14px;height:14px;display:flex}
.wpt-lp-featured__demo-plus{color:var(--wpt-primary);font-weight:800}
.wpt-lp-featured__demo-foot{display:flex;justify-content:space-between;font-size:11px;color:var(--wpt-muted)}
.wpt-lp-featured__demo-foot b{color:var(--wpt-primary);font-weight:700}
.wpt-lp-featured__cta{margin-top:14px;width:fit-content}
.wpt-lp-puntos__mock--narrow{max-width:300px}
.wpt-lp-puntos__hint{font-size:11px;color:var(--wpt-muted)}
.wpt-lp-puntos__reward{
  background:var(--wpt-primary-soft);border:1px solid var(--wpt-primary-border);
  border-radius:10px;padding:8px;text-align:center;margin-top:6px;font-weight:800;font-size:13px;
}
.wpt-lp-puntos__claim{
  margin-top:8px;background:var(--wpt-primary);color:#fff;text-align:center;
  padding:8px;border-radius:999px;font-size:12px;font-weight:800;
}

/* --- Pie: enlaces y textos con clase propia --- */
.wpt-lp-footer__brand{color:#fff}
.wpt-lp-footer__lead{margin:8px 0 0;color:#cbd5e1}
.wpt-lp-footer__legal{font-size:11px;color:#94a3b8;margin-top:8px}
.wpt-lp-footer__links{display:grid;gap:6px;margin-top:8px}

/* ==========================================================================
   22.9.286 — ACABADO PREMIUM EN TRES SECCIONES.
   --------------------------------------------------------------------------
   Petición del usuario: la comparativa con «fondo verde y cuadros
   translúcidos» (sin perder la letra), «Cómo funciona» menos genérica, y
   «Sin riesgo» más premium con un fondo propio.

     A. COMPARATIVA  → banda verde profunda + tarjetas de CRISTAL translúcido.
        El texto va en CLARO: sobre el verde oscuro el contraste es alto y la
        letra NO se pierde (blanco sobre ~#06301f ≈ 13:1).
     B. CÓMO FUNCIONA → línea de flujo, número fantasma, acento degradado,
        icono degradado y foco del titular. Los TAMAÑOS se fijan aquí para no
        depender del tema de WordPress (antes el <h3> salía con el default).
     C. SIN RIESGO   → banda en degradado menta + tarjetas con BORDE DEGRADADO.

   Todo responsivo (PC/tablet/móvil). No se toca la cabecera ni el hero.
   ========================================================================== */

/* ==========================================================================
   A. COMPARATIVA — «fondo verde y cuadros translúcidos».
   ========================================================================== */
.wpt-lp-compare-wrap{
  border-radius:32px;
  background:
    radial-gradient(760px 420px at 10% -6%, rgba(34,197,94,.38), transparent 62%),
    radial-gradient(660px 420px at 96% 104%, rgba(16,185,129,.30), transparent 60%),
    linear-gradient(158deg,#03120a 0%,#06301f 46%,#065f46 100%);
  box-shadow:0 34px 74px rgba(4,20,12,.34);
  overflow:hidden;
}
/* La cabecera de sección va POR ENCIMA del halo decorativo. */
.wpt-lp-compare-wrap .wpt-lp-secthead{position:relative;z-index:1}
.wpt-lp-compare-wrap .wpt-lp-h{color:#fff}
.wpt-lp-compare-wrap .wpt-lp-sub{color:#a7e0c0}
.wpt-lp-compare-wrap .wpt-lp-eyebrow{
  background:rgba(255,255,255,.10);color:#d9ffe9;
  border-color:rgba(255,255,255,.24);box-shadow:none;
}
.wpt-lp-compare-wrap .wpt-lp-eyebrow i{background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.22)}
.wpt-lp-compare{position:relative;z-index:1}

/* Las tarjetas: cristal translúcido (blur) con borde luminoso. */
.wpt-lp-compare__col{
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 20px 44px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.14);
}
.wpt-lp-compare__col--bad{
  background:rgba(255,118,118,.10);
  border-color:rgba(255,158,158,.26);
}
.wpt-lp-compare__col--good{
  background:rgba(74,222,128,.15);
  border-color:rgba(134,239,172,.38);
  box-shadow:0 26px 56px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.20), 0 0 0 1px rgba(74,222,128,.16);
}
/* Texto CLARO sobre el cristal: legible, no se pierde con el verde. */
.wpt-lp-compare__head h3{color:#fff}
.wpt-lp-compare__col ul{font-size:14px}
.wpt-lp-compare__col li{color:#e7f8ee}
.wpt-lp-compare__col--bad li{color:#ffdcdc}
.wpt-lp-compare__col--good li{color:#fff;font-weight:500}
.wpt-lp-compare__col--bad .wpt-lp-compare__ic{
  background:rgba(255,118,118,.20);border:1px solid rgba(255,158,158,.30);color:#ffb1b1;
}
.wpt-lp-compare__col--good .wpt-lp-compare__ic{
  background:rgba(74,222,128,.22);border:1px solid rgba(134,239,172,.40);color:#86efac;
}
.wpt-lp-compare__col--bad li i{background:rgba(255,118,118,.20);border:1px solid rgba(255,158,158,.30);color:#ffb1b1}
.wpt-lp-compare__col--good li i{background:rgba(74,222,128,.22);border:1px solid rgba(134,239,172,.40);color:#86efac}
.wpt-lp-compare__vs span{background:#fff;color:#065f46;box-shadow:0 14px 30px rgba(0,0,0,.34)}
.wpt-lp-compare__cta-note{color:#a7e0c0}
@media(max-width:860px){
  .wpt-lp-compare-wrap{border-radius:22px}
  .wpt-lp-compare__col ul{font-size:13.5px}
}
@media(max-width:520px){
  .wpt-lp-compare-wrap{border-radius:18px}
  .wpt-lp-compare__col{padding:20px 18px}
}

/* ==========================================================================
   B. «CÓMO FUNCIONA» — de genérica a banda verde con cuadros translúcidos.
   --------------------------------------------------------------------------
   El usuario pidió «fondo verde y los cuadros translúcidos» para la sección
   de los iconos: aquí la sección es una BANDA verde y cada paso es un
   CUADRO de cristal translúcido. El texto va en CLARO para que no se pierda
   sobre el verde (blanco sobre ~#0b6b4a ≈ 9:1).
   ========================================================================== */
.wpt-lp-steps-wrap{
  border-radius:32px;
  background:
    radial-gradient(720px 400px at 8% -8%, rgba(52,211,153,.34), transparent 60%),
    radial-gradient(620px 380px at 100% 106%, rgba(16,185,129,.30), transparent 58%),
    linear-gradient(160deg,#04231a 0%,#08472f 48%,#0b6b4a 100%);
  box-shadow:0 34px 74px rgba(4,24,14,.32);
  overflow:hidden;
}
.wpt-lp-steps-wrap .wpt-lp-secthead{position:relative;z-index:1}
.wpt-lp-steps-wrap .wpt-lp-h{color:#fff}
.wpt-lp-steps-wrap .wpt-lp-sub{color:#a7e0c0}
.wpt-lp-steps-wrap .wpt-lp-eyebrow{
  background:rgba(255,255,255,.10);color:#d9ffe9;
  border-color:rgba(255,255,255,.24);box-shadow:none;
}
.wpt-lp-steps-wrap .wpt-lp-eyebrow i{background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.22)}
.wpt-lp-steps{position:relative;z-index:1}
.wpt-lp-steps{gap:18px}
/* Línea de flujo punteada que pasa por detrás de las píldoras «Paso 0X». */
.wpt-lp-steps::before{
  content:"";position:absolute;left:5%;right:5%;top:2px;height:2px;z-index:0;
  background:repeating-linear-gradient(90deg,rgba(22,163,74,.42) 0 9px,transparent 9px 18px);
}
.wpt-lp-step{
  border-radius:20px;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdfc 100%);
  border-color:#e8edf3;
  box-shadow:0 6px 20px rgba(15,23,42,.05);
}
/* Acento degradado en el borde superior (respeta el radio de la tarjeta). */
.wpt-lp-step::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,#22c55e,#16a34a 55%,#4ade80);
  border-radius:20px 20px 0 0;
}
.wpt-lp-step--dark::after{background:linear-gradient(90deg,#4ade80,#22c55e 60%,#16a34a)}
/* Número fantasma (marca de agua) tras el icono. */
.wpt-lp-step__ghost{
  position:absolute;top:10px;right:14px;z-index:0;
  font-size:40px;font-weight:900;line-height:1;letter-spacing:-.06em;
  color:rgba(22,163,74,.10);pointer-events:none;user-select:none;
}
.wpt-lp-step--dark .wpt-lp-step__ghost{color:rgba(255,255,255,.08)}
.wpt-lp-step__ic{
  background:linear-gradient(150deg,#dcfce7,#f0fdf4);
  border-color:var(--wpt-primary-border);color:var(--wpt-primary-dark);
  box-shadow:0 10px 22px rgba(22,163,74,.16), inset 0 1px 0 #fff;
}
.wpt-lp-step__ic svg{width:24px;height:24px}
.wpt-lp-step__badge{
  margin-top:14px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:var(--wpt-primary-soft);border-color:var(--wpt-primary-border);color:var(--wpt-primary-dark);
}
.wpt-lp-step:hover{
  transform:translateY(-5px);border-color:var(--wpt-primary-border);
  box-shadow:0 18px 40px rgba(15,23,42,.10), 0 0 0 4px rgba(22,163,74,.06);
}
/* Paso 04 (oscuro): degradado rico + halo verde. */
.wpt-lp-step--dark{
  background:linear-gradient(160deg,#0b1220 0%,#132033 58%,#0f2a1d 100%);
  border-color:#12283a;box-shadow:0 16px 38px rgba(11,18,32,.30);
}
.wpt-lp-step--dark .wpt-lp-step__ic{
  background:linear-gradient(150deg,rgba(74,222,128,.22),rgba(255,255,255,.06));
  border-color:rgba(134,239,172,.30);color:#86efac;box-shadow:none;
}
/* Los TAMAÑOS sólo en escritorio: no deben pisar el layout móvil (flex+order). */
@media(min-width:768px){
  .wpt-lp-step{padding:26px 18px 18px}
  .wpt-lp-step__ic{width:56px;height:56px;border-radius:16px;margin-top:12px}
  .wpt-lp-step h3{font-size:17px;font-weight:900;letter-spacing:-.015em;line-height:1.25;margin:14px 0 6px}
  .wpt-lp-step p.wpt-lp-step__text{font-size:13px;line-height:1.55;color:#5b6678}
}
@media(max-width:1023px){.wpt-lp-steps::before{display:none}}
@media(max-width:767px){
  .wpt-lp-step__ghost{font-size:30px;top:6px;right:10px}
  .wpt-lp-step__ic svg{width:22px;height:22px}
  .wpt-lp-step h3{font-size:15px}
  .wpt-lp-step p.wpt-lp-step__text{font-size:12.5px}
}

/* Los CUADROS dentro de la banda verde: cristal translúcido + letra clara. */
.wpt-lp-steps-wrap .wpt-lp-step{
  background:rgba(255,255,255,.085);
  border-color:rgba(255,255,255,.17);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 20px 44px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.14);
}
.wpt-lp-steps-wrap .wpt-lp-step h3{color:#fff}
.wpt-lp-steps-wrap .wpt-lp-step p.wpt-lp-step__text{color:#d6f5e6}
.wpt-lp-steps-wrap .wpt-lp-step__ic{
  background:rgba(74,222,128,.20);border-color:rgba(134,239,172,.36);
  color:#bbf7d0;box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.wpt-lp-steps-wrap .wpt-lp-step__badge{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24);color:#eafff3;
}
.wpt-lp-steps-wrap .wpt-lp-step__num{
  background:#fff;color:#065f46;box-shadow:0 6px 16px rgba(0,0,0,.30);
  z-index:3; /* por encima del acento ::after, que si no corta la píldora */
}
.wpt-lp-steps-wrap .wpt-lp-step__ghost{color:rgba(255,255,255,.12)}
.wpt-lp-steps-wrap .wpt-lp-step:hover{
  border-color:rgba(134,239,172,.42);
  box-shadow:0 26px 54px rgba(0,0,0,.30), 0 0 0 4px rgba(74,222,128,.10);
}
/* Paso 04: tarjeta de acento en verde sólido (destaca como meta a alcanzar). */
.wpt-lp-steps-wrap .wpt-lp-step--dark{
  background:linear-gradient(160deg,#22c55e 0%,#16a34a 52%,#047857 100%);
  border-color:rgba(190,255,214,.48);
  box-shadow:0 22px 50px rgba(6,95,70,.42), inset 0 1px 0 rgba(255,255,255,.30);
}
.wpt-lp-steps-wrap .wpt-lp-step--dark .wpt-lp-step__ic{
  background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.34);color:#fff;
}
.wpt-lp-steps-wrap .wpt-lp-step--dark .wpt-lp-step__badge{
  background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.36);color:#fff;
}
.wpt-lp-steps-wrap .wpt-lp-step--dark .wpt-lp-step__ghost{color:rgba(255,255,255,.18)}
.wpt-lp-steps-wrap .wpt-lp-step--dark .wpt-lp-step__num{background:#04331f;color:#d9ffe9}
.wpt-lp-steps-wrap .wpt-lp-step--dark::after{
  background:linear-gradient(90deg,rgba(255,255,255,.85),rgba(255,255,255,.35) 60%,rgba(255,255,255,.85));
}
/* Línea de flujo y CTA adaptados al verde. */
.wpt-lp-steps-wrap .wpt-lp-steps::before{
  background:repeating-linear-gradient(90deg,rgba(190,255,214,.55) 0 9px,transparent 9px 18px);
}
.wpt-lp-steps-wrap .wpt-lp-steps__cta .wpt-btn--dark{
  background:#fff;color:#065f46!important;border-color:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.26);
}
.wpt-lp-steps-wrap .wpt-lp-steps__cta .wpt-btn--dark:hover{
  background:#ecfdf5;color:#065f46!important;transform:translateY(-2px);
}
/* Tablet (768–1199): DOS columnas. La regla base deja 768 px en una sola
   columna a todo lo ancho y las tarjetas quedan demasiado vacías. */
@media(min-width:768px) and (max-width:1199px){
  .wpt-lp-steps-wrap .wpt-lp-steps{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* ==========================================================================
   C. «SIN RIESGO» — banda menta + tarjetas con borde degradado.
   ========================================================================== */
.wpt-lp-risk-wrap{
  border-radius:32px;
  background:
    radial-gradient(820px 400px at 50% -12%, rgba(22,163,74,.13), transparent 62%),
    linear-gradient(180deg,#f0fdf4 0%,#ffffff 76%);
  border:1px solid var(--wpt-primary-border);
  box-shadow:0 24px 60px rgba(15,23,42,.06);
}
.wpt-lp-trust-badge{
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(158deg,var(--wpt-primary-border) 0%,#ffffff 58%,#ffffff 100%) border-box;
  border:1px solid transparent;
  border-radius:20px;
  box-shadow:0 12px 30px rgba(15,23,42,.06);
}
.wpt-lp-trust-badge:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 46px rgba(22,163,74,.16);
}
.wpt-lp-trust-badge__ic{
  background:linear-gradient(150deg,#dcfce7,#f0fdf4);
  border:1px solid var(--wpt-primary-border);
  color:var(--wpt-primary-dark);
  box-shadow:0 10px 22px rgba(22,163,74,.16);
}
.wpt-lp-trust-badge strong{font-size:15.5px;font-weight:900;letter-spacing:-.01em;color:var(--wpt-text)}
.wpt-lp-trust-badge small{font-size:12.5px;color:#5b6678;line-height:1.55}
@media(max-width:520px){
  .wpt-lp-risk-wrap{border-radius:20px}
}