/* ============================================================
   PIEZAS REAPROVECHADAS de la v1: el mockup del CRM, el móvil con
   la conversación de WhatsApp y el tooltip del gráfico.
   Funcionan y están probadas: se mantienen tal cual, solo se
   reapuntan las variables al sistema nuevo.
   ============================================================ */
:root {
  --l-brand: var(--blue); --l-brand-hi: var(--blue); --l-brand-deep: var(--blue-dk);
  /* Estas piezas viven sobre blanco: el texto va en tinta, no en hueso */
  --l-bone: var(--ink); --l-bone-2: var(--ink-2); --l-bone-3: var(--ink-3);
  --l-line: var(--line); --l-line-2: var(--line-2);
  --l-ink: var(--ink); --l-ink-2: var(--ink-2); --l-ink-3: var(--ink-3);
  --l-paper-3: var(--line); --l-panel: #fff;
  --font-mono: var(--f-mono); --font-display: var(--f-display); --font-body: var(--f-body);
  --l-shadow-2: var(--sh-lg);
  --t-h4: 1.3rem; --t-micro: .75rem; --t-xs: .875rem; --t-sm: 1rem;
  --tr-h4: -0.018em; --tr-micro: .14em; --lh-sm: 1.5;
  --ease: cubic-bezier(.22,1,.36,1); --ease-out: cubic-bezier(.16,1,.3,1);
  --radius: 12px;
}

/* ---------- El móvil del cliente: WhatsApp de verdad ---------- */
.phone { margin: 0; position: sticky; top: 92px; display: grid; gap: 1.1rem; justify-items: center; }
@media (max-width: 1080px) { .phone { position: static; } }
.phone__frame {
  width: min(100%, 330px);
  background: #1b1f27;
  border: 1px solid #2a2f3a;
  border-radius: 42px;
  padding: 10px;
  box-shadow: 0 50px 90px -46px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.05);
  position: relative;
}
.phone__island {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 22px; background: #05070b; border-radius: 100px; z-index: 3;
}
.phone__screen {
  border-radius: 33px; overflow: hidden; background: #0b141a;
  display: grid; grid-template-rows: auto 1fr auto; height: 560px;
}
.wa__top {
  display: flex; align-items: center; gap: .5rem;
  background: #1f2c33; padding: 2.6rem .7rem .6rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.wa__back { width: 17px; height: 17px; color: #a4b0b6; flex: none; }
.wa__ava {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: #3b4a54; color: #cdd5d9; display: grid; place-items: center;
}
.wa__ava svg { width: 19px; height: 19px; }
.wa__who { min-width: 0; }
.wa__who strong { display: block; font-size: .88rem; color: #e9edef; font-weight: 500; letter-spacing: -0.01em; }
.wa__who span { font-size: .68rem; color: #8696a0; }
.wa__icons { margin-left: auto; display: flex; gap: .7rem; color: #a4b0b6; }
.wa__icons svg { width: 17px; height: 17px; }

.wa__chat {
  background-color: #0b141a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.035' stroke-width='1.6'%3E%3Cpath d='M18 22c4-6 12-6 16 0M96 12c5 3 6 10 2 14'/%3E%3Ccircle cx='120' cy='40' r='7'/%3E%3Cpath d='M30 62h14M34 58v8M74 54l8 8-8 8-8-8z'/%3E%3Cpath d='M104 86c6 0 10 4 10 9s-4 9-10 9h-9l-5 4v-4c-4-1-7-5-7-9 0-5 4-9 10-9z'/%3E%3Cpath d='M22 108c6-4 14-2 16 4M58 118h18M62 112h10'/%3E%3Ccircle cx='46' cy='26' r='3'/%3E%3C/g%3E%3C/svg%3E");
  padding: .7rem .55rem 1rem;
  overflow: hidden;
  display: flex; flex-direction: column; gap: .3rem;
}
/* Los mensajes se apilan desde abajo, como en WhatsApp */
.wa__chat > :first-child { margin-top: auto; }
.wa__day, .wa__enc {
  align-self: center; background: #182229; color: #8696a0;
  font-size: .6rem; padding: .22rem .6rem; border-radius: 6px; margin-bottom: .2rem;
}
.wa__enc { color: #a08b5c; background: #182229; text-align: center; max-width: 88%; line-height: 1.4; }
.wa__msg {
  max-width: 82%; padding: .35rem .5rem .3rem; border-radius: 8px;
  font-size: .78rem; line-height: 1.42; color: #e9edef;
  position: relative; box-shadow: 0 1px 1px rgba(0,0,0,.28);
  opacity: 0; transform: translateY(8px) scale(.98);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.wa__msg.is-in { opacity: 1; transform: none; }
.wa__msg p { margin: 0; padding-right: 2.6rem; }
.wa__msg b { font-weight: 600; }
.wa__msg time {
  position: absolute; right: .5rem; bottom: .3rem;
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: .56rem; color: rgba(233,237,239,.5);
}
.wa__msg--in  { align-self: flex-start; background: #202c33; border-top-left-radius: 2px; }
.wa__msg--out { align-self: flex-end; background: #005c4b; border-top-right-radius: 2px; }
.wa__msg--in::before, .wa__msg--out::before {
  content: ""; position: absolute; top: 0; width: 8px; height: 12px;
}
.wa__msg--in::before  { left: -7px; background: #202c33; clip-path: polygon(100% 0, 100% 100%, 0 0); }
.wa__msg--out::before { right: -7px; background: #005c4b; clip-path: polygon(0 0, 100% 0, 0 100%); }
.wa__check {
  width: 14px; height: 8px; flex: none;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cg fill='none' stroke='%2353bdeb' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5.5 4 8.5 10 1.5'/%3E%3Cpath d='M7.5 8.5 13.5 1.5'/%3E%3C/g%3E%3C/svg%3E");
}
.wa__typing {
  align-self: flex-end; background: #005c4b; border-radius: 8px; border-top-right-radius: 2px;
  padding: .5rem .6rem; display: none; gap: .22rem;
}
.wa__typing.is-on { display: flex; }
.wa__typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(233,237,239,.55); animation: dot 1.2s infinite; }
.wa__typing i:nth-child(2) { animation-delay: .18s; }
.wa__typing i:nth-child(3) { animation-delay: .36s; }
@keyframes dot { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.wa__bar { display: flex; align-items: center; gap: .45rem; padding: .5rem .55rem .9rem; background: #0b141a; }
.wa__field {
  flex: 1; background: #202c33; color: #8696a0; border-radius: 100px;
  padding: .5rem .8rem; font-size: .75rem;
}
.wa__send { width: 34px; height: 34px; border-radius: 50%; background: #00a884; color: #0b141a; display: grid; place-items: center; flex: none; }
.wa__send svg { width: 17px; height: 17px; }

.phone figcaption { display: grid; gap: .8rem; max-width: 330px; }
.phone__sys { display: grid; gap: .35rem; border-left: 2px solid var(--l-brand); padding-left: .8rem; }
.sys__row { display: flex; align-items: center; gap: .5rem; font-size: var(--t-xs); color: var(--l-bone-2); }
.sys__row i { width: 6px; height: 6px; border-radius: 50%; background: var(--l-brand-hi); flex: none; }
.phone figcaption p { font-size: var(--t-xs); line-height: 1.55; color: var(--l-bone-3); }



/* Tooltip del gráfico (aparece al pasar el ratón o el dedo) */
.chart-tip {
  position: absolute; top: 4px; transform: translateX(-50%);
  background: rgba(2, 4, 10, .96); border: 1px solid var(--l-line-2);
  border-radius: 8px; padding: .55rem .7rem; pointer-events: none;
  opacity: 0; transition: opacity .18s var(--ease);
  font-size: var(--t-xs); line-height: 1.5; white-space: nowrap; z-index: 2;
  box-shadow: 0 12px 30px -16px rgba(0,0,0,.9);
}
.chart-tip b { display: block; font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--l-bone-3); margin-bottom: .25rem; }
.chart-tip span { display: flex; align-items: center; gap: .45rem; color: var(--l-bone-2); }
.chart-tip i { width: 9px; height: 3px; border-radius: 2px; flex: none; }
.chart-tip em { font-style: normal; font-family: var(--font-mono); font-weight: 600; color: var(--l-bone); margin-left: .35rem; }


/* ============================================================
   PIEZAS DE VENTA (pasada de copy 2026-07-28)
   Cuatro cosas que faltaban y se notaban: prueba a la vista en el
   hero, el coste de cada fuga escrito, garantías donde antes había
   testimonios de mentira, y el precio con un número de verdad.
   ============================================================ */

/* ---------- Hero: la letra pequeña que quita miedo, a la vista ---------- */
.trust {
  display: flex; flex-wrap: wrap; gap: .5rem .55rem;
  margin-top: 1.6rem; padding: 0;
}
.trust li {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .02em;
  color: var(--ink-2); background: rgba(255,255,255,.72);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: .42rem .8rem .42rem .68rem;
  backdrop-filter: blur(6px);
}
.trust li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--win); box-shadow: 0 0 0 3px rgba(14,159,110,.16);
}

/* ---------- Fugas: cada tarjeta acaba diciendo lo que cuesta ----------
   Flex en columna para que la línea del coste quede pegada abajo y las
   tres queden a la misma altura aunque el texto sea más largo. */
.leak { display: flex; flex-direction: column; }
.leak p { margin-bottom: 1.2rem; }
.leak__cost {
  margin-top: auto; padding-top: .85rem; border-top: 1px dashed var(--line-2);
  font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .02em;
  color: var(--bad);
}
.leaks__sum {
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
  font-size: var(--t-lead); line-height: 1.45; color: var(--ink-2);
  max-width: 52ch;
}
.leaks__sum b { color: var(--ink); font-weight: 650; }

/* ---------- Diferencia del gráfico: el número que se recuerda ---------- */
.chart-card__delta {
  margin-left: auto; display: inline-flex; align-items: baseline; gap: .5rem;
  font-size: var(--t-xs); color: var(--ink-3);
}
.chart-card__delta b {
  font-family: var(--f-mono); font-size: var(--t-sm); font-weight: 700;
  color: var(--blue-dk); font-variant-numeric: tabular-nums;
}
@media (max-width: 700px) { .chart-card__delta { margin-left: 0; width: 100%; } }

/* ---------- Garantías: lo que antes eran testimonios sin firmar ---------- */
.gtee { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.9rem, 1.6vw, 1.3rem); }
@media (max-width: 900px) { .gtee { grid-template-columns: 1fr; } }
.gt {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  padding: clamp(1.6rem, 2.6vw, 2.1rem); box-shadow: var(--sh-sm);
  display: grid; align-content: start; gap: .5rem;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.gt:hover { transform: translateY(-6px); border-color: var(--line-2); box-shadow: var(--sh); }
.gt__ico {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
  background: rgba(14,159,110,.10); color: var(--win); margin-bottom: .6rem;
}
.gt__ico svg { width: 23px; height: 23px; }
.gt p { color: var(--ink-2); font-size: var(--t-sm); margin: 0; }
.gtee__note {
  margin: clamp(1.4rem, 2.6vw, 2rem) 0 0;
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--blue);
  border-radius: var(--r-card); padding: clamp(1.2rem, 2.2vw, 1.7rem);
  font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); max-width: 68ch;
}
.gtee__note b { display: block; color: var(--ink); font-size: var(--t-body); margin-bottom: .35rem; }

/* ---------- Precio: escalera de anclas y el número de verdad ---------- */
.price { display: grid; gap: clamp(1.2rem, 2.2vw, 1.8rem); }
.anchs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.9rem, 1.6vw, 1.2rem); align-items: stretch; }
@media (max-width: 900px) { .anchs { grid-template-columns: 1fr; } }
.anch {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-card); padding: clamp(1.5rem, 2.6vw, 2.1rem);
  box-shadow: var(--sh-sm); display: grid; align-content: start; gap: .5rem;
}
.anch__ico {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
  background: var(--blue-lt); color: var(--blue); margin-bottom: .6rem;
}
.anch__ico svg { width: 23px; height: 23px; }
.anch__lb {
  font-family: var(--f-display); font-weight: 700; letter-spacing: -.022em;
  font-size: var(--t-h4); color: var(--ink);
}
.anch__d { font-size: var(--t-sm); color: var(--ink-2); }
.anch__d b { color: var(--ink); }

/* La tercera es la que importa: contraste, no adornos */
.anch--win {
  background: linear-gradient(180deg, #fff, #f4f8ff);
  border-color: rgba(22,87,255,.34); box-shadow: var(--sh);
}
.anch--win .anch__ico { background: var(--blue); color: #fff; }
.anch--win .anch__d { color: var(--ink-2); }
@media (min-width: 901px) { .anch--win { transform: translateY(-10px); } }

/* Los testimonios: la firma pegada abajo para que las tres midan igual */
.say { grid-template-rows: auto 1fr auto; align-content: stretch; }
.anch__pin {
  position: absolute; top: -.72rem; left: clamp(1.5rem, 2.6vw, 2.1rem);
  background: var(--blue); color: #fff;
  font-family: var(--f-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .32rem .7rem; border-radius: var(--r-pill); box-shadow: var(--sh-cta);
}
.price__foot { max-width: 62ch; }
.price__foot p { font-size: var(--t-sm); color: var(--ink-2); }
.price__foot p b { color: var(--ink); }

.plan { margin-top: clamp(1.6rem, 3vw, 2.4rem); }

/* ---------- Escasez real + cierre: aquí es donde más ganas hay ----------
   Al que acaba de leer el precio hay que darle el botón en la misma
   pantalla, no hacerle bajar dos secciones a buscarlo. */
.close2 {
  margin: clamp(1.4rem, 2.6vw, 2rem) 0 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1rem, 2.4vw, 2rem); align-items: center;
  background: var(--blue-lt); border: 1px solid rgba(22,87,255,.2);
  border-radius: var(--r-card); padding: clamp(1.2rem, 2.2vw, 1.7rem);
}
@media (max-width: 820px) { .close2 { grid-template-columns: 1fr; } }
.scarce {
  margin: 0; display: flex; gap: .85rem; align-items: flex-start;
  font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); max-width: 62ch;
}
.scarce b { color: var(--ink); }
.scarce__ico { color: var(--blue); flex: none; }
.scarce__ico svg { width: 22px; height: 22px; }
.close2__go { display: grid; gap: .55rem; justify-items: center; }
.close2__go .btn { white-space: nowrap; }
/* Sobre la banda azul clara el gris de apoyo no llega a 4,5:1 */
.close2__go span { font-size: var(--t-micro); color: var(--ink-2); text-align: center; }
@media (max-width: 820px) {
  .close2__go { justify-items: stretch; }
  .close2__go .btn { width: 100%; }
}

/* ---------- FAQ: salida por WhatsApp para el que sigue con dudas ---------- */
.faq__more {
  margin: clamp(1.4rem, 2.4vw, 1.8rem) 0 0;
  font-size: var(--t-sm); color: var(--ink-2);
}
.faq__more a { color: var(--blue); font-weight: 600; border-bottom: 1px solid rgba(22,87,255,.35); }
.faq__more a:hover { color: var(--blue-dk); border-bottom-color: currentColor; }


/* ============================================================
   CARRUSEL DE COMENTARIOS
   Mismo motor que la cinta de webs, pero con tarjetas de texto:
   giran solas, se paran al pasar por encima y se leen del tirón.
   ============================================================ */
.reel--revs .reel__stage { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
                           mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.reel--revs .reel__track { align-items: stretch; }
.rev {
  flex: 0 0 auto; width: clamp(255px, 27vw, 340px); margin: 0;
  display: grid; grid-template-rows: 1fr auto; gap: .9rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem 1.3rem; box-shadow: 0 1px 2px rgba(11,18,32,.05);
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.rev:hover { border-color: var(--line-2, #d8e0ee); box-shadow: var(--sh-lg); }
.rev blockquote {
  margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--ink);
  font-weight: 500; letter-spacing: -.006em;
}
.rev blockquote::before { content: "«"; color: var(--blue); font-weight: 700; }
.rev blockquote::after  { content: "»"; color: var(--blue); font-weight: 700; }
.rev figcaption { display: flex; align-items: center; gap: .55rem; font-size: .84rem; color: var(--ink-2); }
.rev__av { width: 26px; height: 26px; border-radius: 999px; flex: none; }
.rev__av--a { background: linear-gradient(140deg, #1657ff, #4b83ff); }
.rev__av--b { background: linear-gradient(140deg, #0e9f6e, #34c98d); }
.rev__av--c { background: linear-gradient(140deg, #d97706, #f0a83c); }
.rev__av--d { background: linear-gradient(140deg, #7c3aed, #a274f5); }
.rev__av--e { background: linear-gradient(140deg, #0f766e, #2aa39a); }
@media (max-width: 620px) { .rev { width: 78vw; padding: 1.1rem 1.15rem; } .rev blockquote { font-size: .96rem; } }