/* ════════════════════════════════════════════════════════════════
   HaceloIA — Landing. Paleta coral HaceloIA + slate. 100% autocontenido.
   Naranja brand #E04020 + slate. Tipografía Inter. 100% autocontenido.
   ════════════════════════════════════════════════════════════════ */
:root{
  --brand:#E0714E; --brand-2:#F2926E; --brand-dark:#C25438; --brand-deep:#9C3F27;
  --ink:#0f172a; --body:#475569; --muted:#64748b; --faint:#94a3b8;
  --bg:#ffffff; --bg-soft:#f8fafc; --bg-soft-2:#f1f5f9; --card:#ffffff;
  --border:#e2e8f0; --border-strong:#cbd5e1;
  --wa:#25d366; --wa-deep:#075e54; --wa-bubble:#dcf8c6;
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow:0 4px 16px rgba(15,23,42,.08);
  --shadow-lg:0 18px 48px rgba(15,23,42,.14);
  --shadow-brand:0 16px 40px rgba(224,113,78,.28);
  --radius:16px; --radius-sm:10px; --radius-lg:26px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font); color:var(--body); background:var(--bg);
  line-height:1.6; font-size:17px; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{color:var(--ink);line-height:1.12;letter-spacing:-.02em;font-weight:800}
/* FocusOnNavigate (Blazor) enfoca el H1 al navegar: ocultamos el outline visual, el foco para lectores de pantalla se mantiene */
.hero h1:focus,.hero h1:focus-visible{outline:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
section{position:relative}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--brand);
  background:rgba(224,113,78,.08);padding:7px 14px;border-radius:100px;margin-bottom:20px;
}
.eyebrow.light{color:#ffd9cd;background:rgba(255,255,255,.12)}
.grad-text{background:linear-gradient(120deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ─── Botones ─── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font);font-weight:700;font-size:16px;cursor:pointer;
  padding:15px 28px;border-radius:100px;border:2px solid transparent;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  white-space:nowrap;
}
.btn-primary{background:linear-gradient(120deg,var(--brand),var(--brand-2));color:#fff;box-shadow:var(--shadow-brand)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 48px rgba(224,113,78,.4)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--border-strong)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--brand);box-shadow:var(--shadow)}
.btn-white:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-lg{padding:18px 36px;font-size:18px}
.btn-block{width:100%}

/* ═══ NAV ═══ */
nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:all .3s ease;padding:16px 0}
nav.scrolled{background:rgba(255,255,255,.85);backdrop-filter:blur(14px);box-shadow:var(--shadow-sm);padding:10px 0}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:13px;font-weight:800}
.brand-mark{width:64px;height:64px;display:grid;place-items:center;flex-shrink:0}.brand-logo{height:65px;width:auto;display:block;flex-shrink:0}
.brand-mark svg{width:100%;height:100%;display:block}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-txt b{font-size:27px;color:var(--ink);letter-spacing:-.01em;font-weight:800;text-transform:none}
.brand-txt b span{color:var(--brand)}
.nav-links{display:flex;align-items:center;gap:22px}
/* nowrap: sin esto el flex comprimía cada link por debajo de su ancho natural y
   los partía en dos renglones adentro del propio menú (se vio con 7 items: los
   cuatro primeros medían 48px de alto contra 24px de los otros). Si algún día no
   entran, es preferible que se note en desarrollo y no con renglones dobles. */
.nav-links a.lnk{font-weight:600;font-size:15px;color:var(--body);transition:color .15s;white-space:nowrap}
.nav-links a.lnk:hover{color:var(--brand)}
.nav-cta{display:flex;align-items:center;gap:12px}.lnk-login-m{display:none}.nav-links.open .lnk-login-m{display:block;color:var(--brand);font-weight:700}

/* "Ingresar" con la MISMA caja que "Probar gratis": era un link suelto de 21px
   de alto al lado de un botón de 50px. El borde va en currentColor porque el
   nav cambia de fondo (blanco al scrollear en claro, oscuro en dark mode) y un
   color fijo se perdería en uno de los dos. */
.nav-cta .lnk{
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;white-space:nowrap;
  border-radius:100px;border:2px solid currentColor;
  border-color:color-mix(in srgb, currentColor 42%, transparent);
  transition:color .18s ease,border-color .18s ease;
}
.nav-cta .lnk:hover{color:var(--brand);border-color:var(--brand)}
/* La medida se define UNA vez para los dos, así no se pueden desincronizar.
   El line-height va explícito: el botón lo heredaba del body (~1.6) y el link
   no, y por eso quedaban 41px contra 33px de alto. */
.nav-cta .lnk,.nav-cta .btn-primary{padding:11px 22px;font-size:15px;line-height:1.6}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.burger span{width:26px;height:2.5px;background:var(--ink);border-radius:3px;transition:.3s}

/* ═══ HERO ═══ */
.hero{padding:150px 0 90px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-300px;right:-250px;width:760px;height:760px;border-radius:50%;background:radial-gradient(circle,rgba(224,113,78,.13),transparent 62%);z-index:-1}
.hero::after{content:"";position:absolute;bottom:-200px;left:-260px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.08),transparent 62%);z-index:-1}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(40px,5.4vw,62px);font-weight:900;letter-spacing:-.035em;margin-bottom:22px}
.hero h1 .grad-text{display:inline}
.hero .lead{font-size:clamp(18px,2.1vw,21px);color:var(--body);max-width:560px;margin-bottom:32px}
.hero .lead b{color:var(--ink);font-weight:700}
/* Gancho de HaceloApp en el hero. Va ENTRE el lead y los botones: si fuera
   abajo compite con el CTA, y arriba le roba la promesa principal al H1.
   El brillo que lo cruza es lo unico animado del hero ademas del telefono. */
.hero-ha{
  display:inline-flex;align-items:center;gap:11px;margin:-14px 0 26px;
  padding:11px 16px 11px 12px;border-radius:100px;max-width:560px;
  background:linear-gradient(135deg,rgba(23,129,124,.09),rgba(52,211,153,.09));
  border:1px solid rgba(23,129,124,.28);
  position:relative;overflow:hidden;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.hero-ha:hover{border-color:rgba(23,129,124,.55);transform:translateY(-2px);box-shadow:0 10px 26px rgba(23,129,124,.16)}
.hero-ha::after{
  content:'';position:absolute;top:0;bottom:0;width:38%;left:-45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
  animation:haShine 4.2s ease-in-out 1.4s infinite;
}
@keyframes haShine{0%{left:-45%}35%,100%{left:120%}}
.hero-ha-tag{
  flex-shrink:0;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:linear-gradient(135deg,#0f766e,#34d399);padding:4px 10px;border-radius:100px;
}
.hero-ha-txt{font-size:14.5px;line-height:1.4;color:var(--body)}
.hero-ha-txt b{color:#0f766e}
.hero-ha > .bi{flex-shrink:0;color:#0f766e;font-size:15px;transition:transform .25s ease}
.hero-ha:hover > .bi{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.hero-ha::after{animation:none;display:none}}

.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.hero-trust{display:flex;flex-wrap:wrap;gap:18px 26px;color:var(--muted);font-size:14.5px;font-weight:600}
.hero-trust span{display:inline-flex;align-items:center;gap:8px}
.hero-trust svg{color:var(--wa);flex-shrink:0}

/* ═══ Teléfono / chat animado ═══ */
.phone-wrap{position:relative;display:flex;justify-content:center}
.phone-glow{position:absolute;inset:-40px;background:radial-gradient(circle at 50% 35%,rgba(224,113,78,.22),transparent 60%);z-index:-1;filter:blur(20px)}
.phone{
  width:330px;max-width:100%;background:#0b141a;border-radius:42px;padding:13px;
  box-shadow:var(--shadow-lg),0 0 0 2px rgba(15,23,42,.06);position:relative;
}
.phone-notch{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:130px;height:26px;background:#0b141a;border-radius:0 0 18px 18px;z-index:5}
.screen{background:#e5ddd5;background-image:linear-gradient(rgba(229,221,213,.92),rgba(229,221,213,.92)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23d9cfc4' stroke-width='.5'/%3E%3C/svg%3E");border-radius:30px;overflow:hidden;height:560px;display:flex;flex-direction:column}
.wa-head{background:var(--wa-deep);color:#fff;padding:34px 14px 12px;display:flex;align-items:center;gap:11px;flex-shrink:0}
.wa-ava{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-dark));display:grid;place-items:center;font-weight:800;font-size:15px;flex-shrink:0}
.wa-head .nm{font-weight:700;font-size:15px;line-height:1.2}
.wa-head .st{font-size:11.5px;opacity:.85;display:flex;align-items:center;gap:5px}
.wa-head .st::before{content:"";width:7px;height:7px;border-radius:50%;background:#7ee787;display:inline-block}
.wa-chip{margin-left:auto;font-size:10px;font-weight:700;background:rgba(255,255,255,.16);padding:4px 9px;border-radius:100px;display:flex;align-items:center;gap:5px}
.wa-body{flex:1;padding:14px 12px;display:flex;flex-direction:column;gap:8px;overflow:hidden;justify-content:flex-end}
.bub{max-width:80%;padding:8px 12px;border-radius:12px;font-size:13.5px;line-height:1.42;color:#0b141a;box-shadow:0 1px .5px rgba(0,0,0,.13);position:relative;animation:pop .3s ease;white-space:pre-line}
.bub .t{font-size:9.5px;color:#667781;float:right;margin:6px 0 -2px 8px}
.bub.in{background:#fff;align-self:flex-start;border-top-left-radius:3px}
.bub.out{background:var(--wa-bubble);align-self:flex-end;border-top-right-radius:3px}
.bub.out .t::after{content:" ✓✓";color:#34b7f1}
.typing{align-self:flex-start;background:#fff;padding:11px 14px;border-radius:12px;border-top-left-radius:3px;display:flex;gap:4px;box-shadow:0 1px .5px rgba(0,0,0,.13)}
.typing i{width:7px;height:7px;border-radius:50%;background:#9aa5ab;animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.wa-foot{background:#f0f0f0;padding:9px 12px;display:flex;align-items:center;gap:9px;flex-shrink:0}
.wa-foot .inp{flex:1;background:#fff;border-radius:100px;padding:8px 14px;font-size:12.5px;color:#9aa5ab}
.wa-foot .snd{width:34px;height:34px;border-radius:50%;background:var(--wa-deep);display:grid;place-items:center;flex-shrink:0}
.scenario-tabs{display:flex;gap:7px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.scenario-tabs button{font-size:12px;font-weight:600;color:var(--muted);background:var(--bg-soft-2);border:1px solid var(--border);padding:6px 13px;border-radius:100px;cursor:pointer;transition:.15s}
.scenario-tabs button.on{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ═══ Logos / franja confianza ═══ */
.trust-strip{background:var(--ink);color:#fff;padding:22px 0}
.trust-strip .wrap{display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center;justify-content:center;text-align:center}
.trust-strip .item{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:#e2e8f0}
.trust-strip .item b{color:#fff}
.trust-strip svg{color:var(--brand-2)}
.trust-strip .sep{width:1px;height:20px;background:rgba(255,255,255,.18)}

/* ═══ Secciones genéricas ═══ */
.sec{padding:96px 0}
.sec-soft{background:var(--bg-soft)}
.sec-head{max-width:720px;margin:0 auto 56px;text-align:center}
.sec-head h2{font-size:clamp(30px,3.8vw,44px);font-weight:900;letter-spacing:-.03em;margin-bottom:16px}
.sec-head p{font-size:19px;color:var(--body)}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}.reveal[data-d="4"]{transition-delay:.32s}

/* ═══ Dolor (problema) ═══ */
.pain{background:linear-gradient(180deg,#fff, #fff7f4)}
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:14px}
.pain-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm)}
.pain-card .ic{width:48px;height:48px;border-radius:12px;background:#fee2e2;color:#dc2626;display:grid;place-items:center;margin-bottom:16px;font-size:22px}
.pain-card h4{font-size:18px;margin-bottom:8px}
.pain-card p{font-size:15px;color:var(--body)}
.pain-punch{text-align:center;margin-top:48px;font-size:clamp(22px,3vw,30px);font-weight:800;color:var(--ink);line-height:1.3}
.pain-punch b{color:var(--brand)}

/* ═══ Cómo funciona ═══ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:s}
.step{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:38px 28px 30px;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.step .num{counter-increment:s;position:absolute;top:-22px;left:28px;width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;display:grid;place-items:center;font-weight:900;font-size:20px;box-shadow:var(--shadow-brand)}
.step .num::before{content:counter(s)}
.step h3{font-size:21px;margin:14px 0 10px}
.step p{font-size:15.5px;color:var(--body)}
.step .tag{display:inline-block;margin-top:14px;font-size:12.5px;font-weight:700;color:var(--brand);background:rgba(224,113,78,.08);padding:5px 12px;border-radius:100px}

/* ═══ Capacidades ═══ */
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cap{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:transform .22s,box-shadow .22s,border-color .22s}
.cap:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(224,113,78,.4)}
.cap .ic{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;font-size:24px;margin-bottom:15px;background:linear-gradient(135deg,rgba(224,113,78,.12),rgba(224,113,78,.04));color:var(--brand)}
.cap h4{font-size:17.5px;margin-bottom:7px}
.cap p{font-size:14.5px;color:var(--body)}

/* ═══ Antes / Después ═══ */
.vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.vs-col{border-radius:var(--radius-lg);padding:34px 30px}
.vs-before{background:#fff;border:1px solid var(--border)}
.vs-after{background:linear-gradient(150deg,#1a0f0c,#2c1410);color:#fff;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.vs-after::after{content:"";position:absolute;top:-80px;right:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(224,113,78,.32),transparent 65%)}
.vs-col h3{font-size:22px;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.vs-after h3{color:#fff}
.vs-col .sub{font-size:14px;font-weight:600;margin-bottom:22px}
.vs-before .sub{color:var(--muted)}.vs-after .sub{color:#ffb59f}
.vs-list{list-style:none;display:flex;flex-direction:column;gap:14px}
.vs-list li{display:flex;gap:12px;font-size:15.5px;line-height:1.45}
.vs-before li{color:var(--body)}.vs-after li{color:#e9d8d2}
.vs-list .mk{flex-shrink:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;margin-top:1px}
.vs-before .mk{background:#fee2e2;color:#dc2626}
.vs-after .mk{background:rgba(126,231,135,.18);color:#7ee787}

/* ═══ Rubros (tabs) ═══ */
.rubro-tabs{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:34px}
.rubro-tabs button{font-size:14.5px;font-weight:600;color:var(--body);background:#fff;border:1.5px solid var(--border);padding:10px 18px;border-radius:100px;cursor:pointer;transition:.18s;display:inline-flex;gap:8px;align-items:center}
.rubro-tabs button:hover{border-color:var(--brand-2)}
.rubro-tabs button.on{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:var(--shadow-brand)}
.rubro-panel{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:42px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;min-height:240px}
.rubro-story h3{font-size:25px;margin-bottom:14px;display:flex;align-items:center;gap:12px}
.rubro-story .emoji{font-size:34px}
.rubro-story p{font-size:17px;color:var(--body);margin-bottom:20px}
.rubro-story .ops{display:flex;flex-wrap:wrap;gap:9px}
.rubro-story .ops span{font-size:13px;font-weight:600;color:var(--brand-dark);background:rgba(224,113,78,.08);padding:6px 13px;border-radius:100px}
.rubro-quote{background:linear-gradient(150deg,#fff7f4,#fef0eb);border-left:4px solid var(--brand);border-radius:14px;padding:26px;font-size:16.5px;font-style:italic;color:var(--ink);line-height:1.55;position:relative}
.rubro-quote::before{content:"";position:absolute;top:8px;left:14px;font-size:60px;color:rgba(224,113,78,.18);font-weight:900;line-height:1}
.rubro-fade{animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1}}

/* ═══ Canales ═══ */
.channels{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.channel{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px 22px;text-align:center;transition:transform .22s}
.channel:hover{transform:translateY(-5px)}
.channel .ic{width:58px;height:58px;border-radius:16px;margin:0 auto 14px;display:grid;place-items:center}
.channel h4{font-size:17px;margin-bottom:6px}
.channel p{font-size:14px;color:var(--muted)}

/* ═══ ROI calc ═══ */
.roi{background:linear-gradient(150deg,#0b1120,#15213a);color:#fff;border-radius:var(--radius-lg);padding:48px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.roi::before{content:"";position:absolute;top:-120px;right:-100px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(224,113,78,.28),transparent 62%)}
.roi h3{color:#fff;font-size:27px;margin-bottom:10px}
.roi p.s{color:#94a3b8;margin-bottom:28px;font-size:16px}
.roi .field{margin-bottom:24px;position:relative;z-index:2}
.roi label{display:flex;justify-content:space-between;font-weight:600;font-size:14.5px;color:#cbd5e1;margin-bottom:10px}
.roi label b{color:var(--brand-2);font-size:17px}
.roi input[type=range]{width:100%;-webkit-appearance:none;height:6px;border-radius:100px;background:#334155;outline:none}
.roi input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--brand);cursor:pointer;box-shadow:0 0 0 4px rgba(224,113,78,.25)}
.roi input[type=range]::-moz-range-thumb{width:22px;height:22px;border:none;border-radius:50%;background:var(--brand);cursor:pointer}
.roi .ticket{display:flex;gap:8px}
.roi .ticket button{flex:1;background:#1e293b;border:1.5px solid #334155;color:#cbd5e1;border-radius:10px;padding:10px;font-weight:600;font-size:14px;cursor:pointer;transition:.15s;font-family:var(--font)}
.roi .ticket button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.roi-out{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:32px;text-align:center;position:relative;z-index:2;backdrop-filter:blur(6px)}
.roi-out .lbl{font-size:14px;color:#94a3b8;font-weight:600}
.roi-out .big{font-size:clamp(36px,5vw,52px);font-weight:900;color:#fff;letter-spacing:-.03em;margin:6px 0;line-height:1}
.roi-out .big span{color:var(--brand-2)}
.roi-out .sub{font-size:14px;color:#cbd5e1}
.roi-out .disc{font-size:11.5px;color:#64748b;margin-top:18px;line-height:1.4}

/* ═══ Objeciones ═══ */
.obj-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.obj{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:28px;display:flex;gap:18px;align-items:flex-start}
.obj .q{flex-shrink:0;width:42px;height:42px;border-radius:12px;background:var(--bg-soft-2);display:grid;place-items:center;font-size:20px}
.obj h4{font-size:17.5px;margin-bottom:7px;color:var(--ink)}
.obj h4 .qm{color:var(--faint);font-style:italic;font-weight:600}
.obj p{font-size:14.5px;color:var(--body)}
.obj p b{color:var(--brand-dark)}

/* ═══ Pricing ═══ */
/* El margen deja lugar al badge del plan destacado, que sobresale 13px por arriba
   de la card y quedaba pegado al switch Mensual/Anual (ambos van centrados). */
.price-toggle{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:34px;font-weight:600;color:var(--muted)}
.price-toggle .save{font-size:12px;font-weight:700;color:var(--wa-deep);background:#dcfce7;padding:3px 10px;border-radius:100px}
.switch{position:relative;width:56px;height:30px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:var(--brand);border-radius:100px;cursor:pointer;transition:.3s}
.slider::before{content:"";position:absolute;height:22px;width:22px;left:4px;top:4px;background:#fff;border-radius:50%;transition:.3s}
.switch input:checked+.slider::before{transform:translateX(26px)}
.toggle-active{color:var(--ink)}
.seg-wrap{display:flex;justify-content:center;margin-bottom:18px}
/* [hidden] necesita ganarle al display:flex de arriba (una sola familia de
   planes = el selector no aporta y se oculta desde el JS). */
.seg-wrap[hidden]{display:none}
/* Bajada de la familia elegida: explica de qué va el grupo antes de los precios. */
.seg-blurb{text-align:center;max-width:620px;margin:0 auto 20px;color:var(--muted);font-size:15px;line-height:1.5}
.seg-switch{display:inline-flex;background:var(--bg-soft-2);border:1px solid var(--border);border-radius:100px;padding:5px;gap:4px}
.seg-switch button{border:none;background:transparent;font-family:var(--font);font-weight:700;font-size:15px;color:var(--muted);padding:10px 24px;border-radius:100px;cursor:pointer;transition:.2s;white-space:nowrap}
.seg-switch button.on{background:linear-gradient(120deg,var(--brand),var(--brand-2));color:#fff;box-shadow:var(--shadow-brand)}
/* Row gap mayor que el column gap: apiladas (mobile), el badge tiene que despegarse
   de la card de arriba. */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,300px));gap:30px 16px;align-items:stretch;justify-content:center}
.plan{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius);padding:26px 20px;display:flex;flex-direction:column;transition:transform .22s,box-shadow .22s}
.plan:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.plan.feat{border-color:var(--brand);box-shadow:var(--shadow-brand);position:relative;transform:scale(1.03)}
.plan.feat:hover{transform:scale(1.03) translateY(-6px)}
.plan .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(120deg,var(--brand),var(--brand-2));color:#fff;font-size:11.5px;font-weight:800;padding:5px 14px;border-radius:100px;white-space:nowrap;box-shadow:var(--shadow-brand);letter-spacing:.02em}
.plan .pname{font-size:16px;font-weight:800;color:var(--ink)}
.plan .pdesc{font-size:12.5px;color:var(--muted);min-height:34px;margin:4px 0 14px}
.plan .pprice{font-size:30px;font-weight:900;color:var(--ink);letter-spacing:-.03em;line-height:1}
.plan .pprice small{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:0}
.plan .pper{font-size:12px;color:var(--faint);margin-bottom:18px;min-height:16px}
.plan .pmsgs{font-size:13.5px;font-weight:700;color:var(--brand-dark);background:rgba(224,113,78,.07);border-radius:10px;padding:9px 9px 6px;text-align:center;margin-bottom:0}
/* Letra chica del cupo: los mensajes exactos siguen estando, pero el titular
   es la conversacion, que es la unidad que el negocio entiende. */
.plan .pmsgs-sub{font-size:11.5px;color:var(--muted);background:rgba(224,113,78,.07);border-radius:0 0 10px 10px;margin-top:-1px;padding:0 9px 9px;text-align:center;margin-bottom:16px}
/* El empujon a la app: se lee como una nota util, no como un banner. */
.plan .palt{font-size:12.5px;line-height:1.45;color:#0f766e;background:rgba(23,129,124,.08);border:1px solid rgba(23,129,124,.18);border-radius:10px;padding:8px 10px;text-align:center;margin-bottom:16px}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:20px;flex:1}
.plan li{font-size:13px;color:var(--body);display:flex;gap:8px;align-items:flex-start}
.plan li svg{flex-shrink:0;color:var(--wa);margin-top:2px}
.plan .btn{padding:11px;font-size:14px}
.price-note{text-align:center;margin-top:28px;color:var(--muted);font-size:14.5px}
.price-note b{color:var(--ink)}

/* ═══ FAQ ═══ */
.faq-list{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:box-shadow .2s}
.faq-item[open]{box-shadow:var(--shadow)}
.faq-item summary{padding:20px 24px;font-weight:700;font-size:16.5px;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .pl{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:rgba(224,113,78,.1);color:var(--brand);display:grid;place-items:center;font-size:18px;transition:transform .25s}
.faq-item[open] summary .pl{transform:rotate(45deg)}
.faq-item .ans{padding:0 24px 22px;font-size:15.5px;color:var(--body)}
.faq-item .ans b{color:var(--ink)}

/* ═══ CTA final ═══ */
.final{background:linear-gradient(140deg,var(--brand-deep),var(--brand) 55%,var(--brand-2));color:#fff;text-align:center;padding:90px 0;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;top:-160px;left:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 60%)}
.final::after{content:"";position:absolute;bottom:-180px;right:-120px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(0,0,0,.18),transparent 60%)}
.final h2{color:#fff;font-size:clamp(32px,4.6vw,52px);font-weight:900;letter-spacing:-.03em;margin-bottom:18px;position:relative;z-index:2}
.final p{font-size:20px;color:#ffe2d9;max-width:600px;margin:0 auto 34px;position:relative;z-index:2}
.final .hero-cta{justify-content:center;position:relative;z-index:2}
.final .mini{margin-top:22px;font-size:14px;color:#ffd2c5;position:relative;z-index:2}

/* ═══ Footer ═══ */
footer{background:var(--ink);color:#94a3b8;padding:56px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
.foot-brand p{font-size:14.5px;color:#94a3b8;margin:16px 0;max-width:300px}
.foot-brand .powered-by{font-size:12.5px;color:#64748b;margin:-6px 0 0}
.foot-brand .powered-by a{color:#cbd5e1;font-weight:700;text-decoration:none;border-bottom:1px solid rgba(203,213,225,.35)}
.foot-brand .powered-by a:hover{color:#fff;border-bottom-color:#fff}
footer h5{color:#fff;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
footer ul a{font-size:14.5px;color:#94a3b8;transition:color .15s}
footer ul a:hover{color:var(--brand-2)}
.foot-bot{border-top:1px solid rgba(148,163,184,.16);padding-top:24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13.5px}
.foot-brand .brand-txt b{color:#fff}
.foot-brand .brand-txt small{color:#64748b}

/* ═══ Responsive ═══ */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:40px;text-align:center}
  .hero .lead{margin-left:auto;margin-right:auto}
  .hero-cta,.hero-trust{justify-content:center}
  .nav-links{display:none}
  /* "Ingresar" queda VISIBLE en la barra tambien en celu y tablet. Antes se
     ocultaba aca y el unico acceso era abrir el menu hamburguesa, donde vive
     .lnk-login-m — quien ya tiene cuenta no tenia por que buscarlo ahi. */
  .nav-cta .lnk{display:inline-flex}
  /* y se apaga el duplicado del menu desplegable */
  .nav-links.open .lnk-login-m{display:none}
  .nav-cta .lnk,.nav-cta .btn-primary{padding:9px 16px;font-size:14px}
  .burger{display:flex}
  .nav-links.open{display:flex;position:absolute;top:72px;left:16px;right:16px;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:20px;gap:16px;box-shadow:var(--shadow-lg)}
  .pain-grid,.steps,.cap-grid,.channels{grid-template-columns:1fr 1fr}
  .vs-grid,.rubro-panel,.roi,.obj-grid{grid-template-columns:1fr}
  .plan.feat{transform:none}.plan.feat:hover{transform:translateY(-6px)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  body{font-size:16px}
  .sec{padding:64px 0}
  .hero{padding:120px 0 60px}
  .pain-grid,.steps,.cap-grid,.channels,.foot-grid{grid-template-columns:1fr}
  .roi,.rubro-panel{padding:28px}
  .wrap{padding:0 18px}
  .vs-col,.obj{padding:24px}
  .hero-cta .btn{width:100%}
  .brand-mark{width:40px;height:40px}.brand-logo{height:46px}.brand-txt b{font-size:18px}
  /* En pantallas chicas conviven tres elementos (Ingresar + Probar gratis +
     burger): se achican los dos botones por igual para que entren sin desbordar. */
  .nav-cta{gap:6px}
  .nav-cta .lnk,.nav-cta .btn-primary{padding:8px 14px;font-size:13px}
}

/* ════════════════════════════════════════════════════════════════
   VARIANTE 2 · MODO OSCURO — fondo slate profundo, cards un escalón
   arriba, texto claro y el coral HaceloIA intacto. El chat de
   WhatsApp conserva su look real.
   ════════════════════════════════════════════════════════════════ */
:root{
  --ink:#f8fafc; --body:#cbd5e1; --muted:#94a3b8; --faint:#64748b;
  --bg:#0b1120; --bg-soft:#0e1728; --bg-soft-2:#131c31; --card:#131c31;
  --border:#233048; --border-strong:#324056;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 6px 18px rgba(0,0,0,.5);
  --shadow-lg:0 18px 48px rgba(0,0,0,.62);
}
nav.scrolled{background:rgba(11,17,32,.82);box-shadow:0 1px 0 rgba(255,255,255,.05)}
.nav-links.open{background:var(--card);border-color:var(--border)}
.pain{background:linear-gradient(180deg,#0b1120,#160f0c)}
.pain-card,.step,.cap,.vs-before,.rubro-panel,.channel,.obj,.plan,.faq-item,.rubro-tabs button{background:var(--card)}
.btn-ghost{background:var(--card)}
.pain-card .ic{background:rgba(239,68,68,.16);color:#f87171}
.vs-before .mk{background:rgba(239,68,68,.18);color:#f87171}
.cap .ic{background:linear-gradient(135deg,rgba(224,113,78,.22),rgba(224,113,78,.06));color:var(--brand-2)}
.rubro-quote{background:linear-gradient(150deg,rgba(224,113,78,.16),rgba(224,113,78,.05));border-left-color:var(--brand);color:#f3dcd4}
.rubro-quote::before{color:rgba(224,113,78,.32)}
.obj .q{background:rgba(255,255,255,.06)}
.obj p b,.plan .pmsgs,.rubro-story .ops span{color:var(--brand-2)}
.seg-switch{background:var(--bg-soft-2);border-color:var(--border)}
.price-toggle .save{background:rgba(16,185,129,.18);color:#34d399}
.vs-after{border:1px solid rgba(224,113,78,.25)}
.trust-strip{background:#0c1424}
footer{background:#080f1c}



/* Integracion con PublicLayout (home dentro de la app) */
body .pub-page-root{background:var(--bg);color:var(--body);font-family:var(--font)}

/* ════════════════════════════════════════════════════════════════
   CONTACTO — vías directas (WhatsApp / Instagram / correo) + formulario
   que reenvía un correo (POST /api/public/contact). Usa los tokens de la
   paleta (la landing corre en modo oscuro), + el botón flotante WhatsApp.
   ════════════════════════════════════════════════════════════════ */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:32px;align-items:start}

/* ─ Vías directas ─ */
.contact-methods{display:flex;flex-direction:column;gap:14px}
.cmethod{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;transition:transform .2s,box-shadow .2s,border-color .2s}
.cmethod:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(224,113,78,.4)}
.cmethod .cm-ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;flex-shrink:0}
.cm-wa .cm-ic{background:linear-gradient(135deg,#42d860,#1faa52);box-shadow:0 8px 18px rgba(31,170,82,.34)}
.cm-ig .cm-ic{background:linear-gradient(45deg,#feda75,#fa7e1e 22%,#d62976 52%,#962fbf 78%,#4f5bd5);box-shadow:0 8px 18px rgba(150,47,191,.34)}
.cm-mail .cm-ic{background:linear-gradient(135deg,var(--brand),var(--brand-dark));box-shadow:var(--shadow-brand)}
.cmethod .cm-tx{display:flex;flex-direction:column;line-height:1.25;flex:1;min-width:0}
.cmethod .cm-tx b{color:var(--ink);font-size:16px;font-weight:700}
.cmethod .cm-tx small{color:var(--muted);font-size:13.5px}
.cmethod .cm-go{color:var(--faint);flex-shrink:0;display:grid;place-items:center;transition:transform .2s,color .2s}
.cmethod:hover .cm-go{color:var(--brand);transform:translateX(3px)}
.cm-note{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:13.5px;margin-top:6px;padding:0 4px;line-height:1.45}
.cm-note svg{color:var(--brand-2);flex-shrink:0}

/* ─ Formulario ─ */
.contact-form{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px;box-shadow:var(--shadow-sm)}
.cform-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cfield{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.cfield span{font-size:13.5px;font-weight:700;color:var(--ink)}
.cfield span i{font-weight:500;color:var(--muted);font-style:normal}
.cfield input,.cfield textarea{font-family:var(--font);font-size:15px;color:var(--ink);background:var(--bg-soft-2);border:1.5px solid var(--border-strong);border-radius:12px;padding:13px 15px;transition:border-color .18s,box-shadow .18s;width:100%}
.cfield textarea{resize:vertical;min-height:112px}
.cfield input::placeholder,.cfield textarea::placeholder{color:var(--faint)}
.cfield input:focus,.cfield textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(224,113,78,.16)}
.cfield input:disabled,.cfield textarea:disabled{opacity:.6}
.contact-form .btn:disabled{opacity:.65;cursor:default;transform:none;box-shadow:var(--shadow-brand)}
.cform-status{margin-top:14px;font-size:14.5px;font-weight:600;text-align:center;min-height:20px}
.cform-status.ok{color:#34d399}
.cform-status.err{color:#f87171}
.cform-fine{margin-top:12px;font-size:12px;color:var(--faint);text-align:center;line-height:1.45}

/* Honeypot: fuera de la vista y de los lectores, pero visible para bots */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ─ Redes en el footer ─ */
.foot-social{display:flex;gap:12px;margin:16px 0}
.foot-social a{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#cbd5e1;background:rgba(255,255,255,.06);border:1px solid rgba(148,163,184,.16);transition:transform .18s,background .18s,color .18s}
.foot-social a:hover{transform:translateY(-3px);color:#fff;background:var(--brand);border-color:var(--brand)}

/* ─ Botón flotante WhatsApp ─ */
.wa-fab{position:fixed;right:22px;bottom:22px;z-index:90;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#42d860,#1faa52);display:grid;place-items:center;box-shadow:0 12px 28px rgba(31,170,82,.5);transition:transform .2s,box-shadow .2s;animation:waFab 2.8s ease-in-out infinite}
.wa-fab:hover{transform:scale(1.08);box-shadow:0 16px 34px rgba(31,170,82,.6)}
.wa-fab-tip{position:absolute;right:calc(100% + 14px);top:50%;transform:translateY(-50%) translateX(6px);white-space:nowrap;background:#1e293b;color:#fff;font-size:13.5px;font-weight:700;padding:8px 14px;border-radius:100px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.wa-fab-tip::before{content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);border:6px solid transparent;border-left-color:#1e293b}
.wa-fab:hover .wa-fab-tip{opacity:1;transform:translateY(-50%) translateX(0)}
@keyframes waFab{0%,100%{box-shadow:0 12px 28px rgba(31,170,82,.5),0 0 0 0 rgba(66,216,96,.5)}50%{box-shadow:0 12px 28px rgba(31,170,82,.5),0 0 0 12px rgba(66,216,96,0)}}
@media(prefers-reduced-motion:reduce){.wa-fab{animation:none}}

/* ════ Tu propio WhatsApp (seccion previa a precios) ════
   Dos columnas enfrentadas: la de la izquierda es el statu quo y la de la
   derecha la que queremos que elija, marcada con el verde de la app —el mismo
   teal que usa el empujon de las tarjetas— para que se lean como lo mismo. */
.sec-app{background:var(--bg-soft)}
.app-cmp{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:34px}
.app-col{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px 22px 18px;display:flex;flex-direction:column}
.app-col-win{border-color:rgba(23,129,124,.35);box-shadow:0 10px 30px rgba(23,129,124,.10)}
.app-col-h{display:flex;align-items:center;gap:9px;font-weight:800;font-size:16px;color:var(--ink);margin-bottom:14px}
.app-col-h i{font-size:19px;color:var(--faint)}
.app-col-win .app-col-h i{color:#0f766e}
.app-steps{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:11px;flex:1}
.app-steps li{counter-increment:s;position:relative;padding-left:31px;font-size:14.5px;line-height:1.5;color:var(--body)}
.app-steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%;background:var(--bg-soft-2);color:var(--muted);font-size:11.5px;font-weight:800;display:grid;place-items:center}
.app-col-win .app-steps li::before{background:rgba(23,129,124,.12);color:#0f766e}
.app-foot{margin-top:16px;padding-top:13px;border-top:1px solid var(--border);font-size:13.5px;font-weight:700;color:var(--muted)}
.app-foot-win{color:#0f766e;border-top-color:rgba(23,129,124,.2)}

.app-note{margin-top:28px;text-align:center;font-size:14px;color:var(--muted);max-width:70ch;margin-left:auto;margin-right:auto}

/* ─ El peaje de Meta ─
   Bloque "por que existe HaceloApp". Es lo mas cargado de la pagina a
   proposito: es el unico argumento que convierte por si solo, y necesita
   leerse como un dato duro y no como una queja. Rojo SOLO aca (el costo) para
   que el ojo lo separe del resto de la landing, que es coral y teal. */
.toll{
  --bad:#dc2626; --bad-soft:rgba(220,38,38,.08); --win:#0f766e;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:32px 30px 28px;margin-bottom:34px;box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
/* Barrido diagonal muy tenue: da sensacion de "alerta viva" sin distraer. */
.toll::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(220,38,38,.05) 50%,transparent 60%);
  background-size:250% 100%;background-position:200% 0;
}
.reveal.in.toll::before{transition:background-position 1.6s ease .5s;background-position:-50% 0}
.toll-head{text-align:center;max-width:62ch;margin:0 auto 26px}
.toll-badge{
  display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--bad);
  background:var(--bad-soft);padding:6px 13px;border-radius:100px;margin-bottom:14px;
}
.toll-head h3{font-size:clamp(21px,2.6vw,29px);margin-bottom:9px}
.toll-hl{color:var(--bad);white-space:nowrap}
.toll-head p{font-size:15px;color:var(--muted)}

.toll-bars{max-width:640px;margin:0 auto 30px}
.toll-bar-row{display:grid;grid-template-columns:150px 1fr 74px;align-items:center;gap:12px;margin-bottom:11px}
.toll-bar-lbl{font-size:14px;font-weight:700;color:var(--body)}
.toll-bar-track{height:26px;background:var(--bg-soft-2);border-radius:100px;overflow:hidden}
.toll-bar-fill{
  height:100%;width:0;border-radius:100px;
  background:linear-gradient(90deg,#94a3b8,#cbd5e1);
  transition:width 1.1s cubic-bezier(.22,1,.36,1) .25s;
}
.toll-bar-row-bad .toll-bar-fill{background:linear-gradient(90deg,#dc2626,#f87171);transition-delay:.55s}
.reveal.in .toll-bar-fill{width:var(--w)}
.toll-bar-val{font-size:16px;font-weight:800;color:var(--muted);text-align:right}
.toll-bar-row-bad .toll-bar-val{color:var(--bad);font-size:19px}
.toll-bars-foot{margin-top:14px;font-size:13.5px;color:var(--muted);text-align:center}

.toll-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px}
.toll-card{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius);padding:20px 19px}
.toll-card-win{background:rgba(23,129,124,.055);border-color:rgba(23,129,124,.3)}
.toll-ico{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  font-size:17px;margin-bottom:12px;
}
.toll-ico-bad{background:var(--bad-soft);color:var(--bad)}
.toll-ico-win{background:rgba(23,129,124,.13);color:var(--win)}
.toll-k{font-size:15.5px;font-weight:800;color:var(--ink);margin-bottom:7px;line-height:1.3}
.toll-k em{font-style:normal;color:var(--bad)}
.toll-card-win .toll-k em{color:var(--win)}
.toll-p{font-size:13.5px;line-height:1.6;color:var(--body)}

/* El remate: 135 vs 700. Los numeros los cuenta landing-home.js. */
/* Colores explícitos y NO var(--ink): este panel es oscuro por diseño en las dos
   paletas, y con el token se daba vuelta solo (en oscuro --ink es casi blanco). */
.toll-punch{
  display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap;
  background:linear-gradient(135deg,#0f172a,#1e293b);color:#e2e8f0;
  border-radius:var(--radius);padding:24px 28px;
}
/* Arranca hidden hasta que llegue el catálogo: [hidden] tiene que ganarle al
   display:flex de acá arriba, igual que en .seg-wrap. */
.toll-punch[hidden]{display:none}
.toll-punch-l{font-size:15px;line-height:1.45;color:#cbd5e1}
.toll-punch-l b{color:#fff}
.toll-punch-r{display:flex;align-items:center;gap:22px}
.toll-vs{text-align:center;min-width:132px}
.toll-vs-n{font-size:clamp(34px,5vw,50px);font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.toll-vs-bad .toll-vs-n{color:#f87171}
.toll-vs-good .toll-vs-n{color:#34d399}
.toll-vs-t{font-size:12.5px;line-height:1.4;color:#94a3b8;margin-top:8px}
.toll-vs-good .toll-vs-t b{color:#34d399}
.toll-vs-sep{font-size:13px;font-weight:800;color:#64748b;text-transform:uppercase;letter-spacing:.1em}
.toll-fine{margin-top:16px;text-align:center;font-size:13.5px;color:var(--muted);max-width:74ch;margin-left:auto;margin-right:auto}

/* ─ Ventajas de HaceloApp ─
   Ocho tarjetas. Las cuatro "hot" (las que nadie mas puede ofrecer: sin
   plantillas, avisos gratis, tu marca, numero a salvo) llevan el acento teal;
   el resto quedan neutras para que el ojo aterrice en esas primero. */
.ha-adv-h{font-size:clamp(20px,2.4vw,26px);text-align:center;margin:38px 0 22px}
.ha-adv{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ha-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px 20px;position:relative;overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ha-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)}
.ha-card-hot{border-color:rgba(23,129,124,.28)}
.ha-card-hot:hover{border-color:rgba(23,129,124,.55)}
/* Filete superior que se dibuja al entrar en pantalla, escalonado por tarjeta. */
.ha-card-hot::after{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,#0f766e,#34d399);
}
.reveal.in .ha-card-hot::after{transform:scaleX(1);transition:transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.in .ha-card-hot:nth-child(4)::after{transition-delay:.1s}
.reveal.in .ha-card-hot:nth-child(5)::after{transition-delay:.2s}
.reveal.in .ha-card-hot:nth-child(6)::after{transition-delay:.3s}
.ha-ico{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:19px;
  background:var(--bg-soft-2);color:var(--muted);margin-bottom:13px;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.ha-card-hot .ha-ico{background:rgba(23,129,124,.12);color:#0f766e}
.ha-card:hover .ha-ico{transform:scale(1.08) rotate(-4deg)}
.ha-card-hot:hover .ha-ico{background:linear-gradient(135deg,#0f766e,#34d399);color:#fff}
.ha-card h4{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:7px;line-height:1.35}
.ha-card h4 em{font-style:italic;color:#0f766e}
.ha-card p{font-size:13.5px;line-height:1.6;color:var(--body)}

@media(max-width:980px){
  .app-cmp{grid-template-columns:1fr}
  .toll-grid{grid-template-columns:1fr}
  .ha-adv{grid-template-columns:1fr 1fr}
  .toll-punch{flex-direction:column;gap:20px;text-align:center}
}
@media(max-width:600px){
  .ha-adv{grid-template-columns:1fr}
  .toll{padding:24px 18px 22px}
  .toll-bar-row{grid-template-columns:112px 1fr 62px;gap:9px}
  .toll-bar-lbl{font-size:12.5px}
  .toll-punch-r{gap:14px}
  .toll-vs{min-width:0}
}
/* Sin animaciones: los estados finales tienen que quedar igual de legibles. */
@media(prefers-reduced-motion:reduce){
  .toll-bar-fill,.ha-card,.ha-ico,.ha-card-hot::after{transition:none}
  .reveal.in.toll::before{transition:none}
}

/* ─ HaceloApp en oscuro ─
   El teal #0f766e y el rojo #dc2626 están calibrados para fondo blanco: sobre
   el slate de la landing quedan ilegibles. Se suben al par claro que ya usa el
   resto del modo oscuro (#34d399 / #f87171). Los sutiles sobre blanco (alphas
   de .05-.08) también se suben: sobre oscuro directamente no se ven. */
.toll{--bad:#f87171;--bad-soft:rgba(239,68,68,.16);--win:#34d399}
.toll::before{background:linear-gradient(115deg,transparent 40%,rgba(248,113,113,.07) 50%,transparent 60%)}
.toll-bar-track{background:rgba(255,255,255,.07)}
.toll-bar-row-bad .toll-bar-fill{background:linear-gradient(90deg,#dc2626,#fca5a5)}
.toll-card{background:rgba(255,255,255,.035)}
.toll-card-win{background:rgba(52,211,153,.09);border-color:rgba(52,211,153,.3)}
.toll-ico-win{background:rgba(52,211,153,.15);color:#34d399}
/* El panel del remate tiene que HUNDIRSE contra la card, no confundirse con ella. */
.toll-punch{
  background:linear-gradient(135deg,#060b16,#101a2e);
  border:1px solid rgba(52,211,153,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.ha-card-hot{border-color:rgba(52,211,153,.26)}
.ha-card-hot:hover{border-color:rgba(52,211,153,.5)}
.ha-card-hot .ha-ico{background:rgba(52,211,153,.14);color:#34d399}
.ha-card-hot:hover .ha-ico{background:linear-gradient(135deg,#0f766e,#34d399);color:#04140f}
.ha-card h4 em{color:#34d399}

.hero-ha{background:linear-gradient(135deg,rgba(52,211,153,.11),rgba(15,118,110,.07));border-color:rgba(52,211,153,.3)}
.hero-ha:hover{border-color:rgba(52,211,153,.6);box-shadow:0 10px 26px rgba(52,211,153,.14)}
/* El brillo blanco al 75% sobre slate es un flash: acá alcanza con un roce. */
.hero-ha::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent)}
.hero-ha-txt b,.hero-ha > .bi{color:#34d399}
.hero-ha-tag{color:#04140f}

/* Las columnas enfrentadas (app-cmp) son de la sección vieja: el mismo teal
   oscuro venía ilegible desde antes sobre el fondo slate. */
.app-col-win{border-color:rgba(52,211,153,.3);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.app-col-win .app-col-h i,.app-foot-win{color:#34d399}
.app-col-win .app-steps li::before{background:rgba(52,211,153,.16);color:#34d399}
.app-foot-win{border-top-color:rgba(52,211,153,.22)}

/* ─ Responsive contacto/FAB ─ */
@media(max-width:980px){
  .contact-grid{grid-template-columns:1fr;gap:22px}
}
@media(max-width:600px){
  .cform-row{grid-template-columns:1fr}
  .contact-form{padding:22px}
  .wa-fab{width:54px;height:54px;right:16px;bottom:16px}
  .wa-fab-tip{display:none}
}