/* ══════════ DEVELOPMENT SOFT — estilos globales ══════════ */
html { scroll-behavior: smooth; }
/* Responsive a prueba de balas:
   - los hijos de grid/flex pueden encogerse (evita que un texto largo empuje el layout fuera de pantalla)
   - nada provoca scroll horizontal (clip no rompe position:sticky, a diferencia de hidden) */
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }
.grid > * { min-width: 0; }
img, svg, video, canvas { max-width: 100%; }
input, select, textarea { min-width: 0; }
body { background: linear-gradient(180deg, #f3f5ff 0%, #f6f7fc 40%, #eef1fb 100%); color:#181b29; font-family:'Inter',sans-serif; overflow-x:hidden; }
::selection { background:#0606e7; color:#fff; }
::-webkit-scrollbar { width:9px; }
::-webkit-scrollbar-track { background:#eef0f7; }
::-webkit-scrollbar-thumb { background:#c7cbe0; border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:#0606e7; }

.glass { background: rgba(255,255,255,0.88); border: 1px solid rgba(1,23,80,0.08); box-shadow: 0 8px 32px -12px rgba(1,23,80,0.12); }
.glass-dark { background: linear-gradient(160deg, #011750, #0606e7); color:#fff; box-shadow: 0 20px 50px -18px rgba(6,6,231,0.5); }
.text-gradient { background: linear-gradient(90deg,#0606e7,#22d3ee,#a855f7,#0606e7); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:300% auto; animation: gradShift 5s linear infinite; }
@keyframes gradShift { to { background-position: 300% center; } }
.eyebrow-hot { background: linear-gradient(90deg, rgba(6,6,231,.1), rgba(34,211,238,.15), rgba(168,85,247,.12)); border: 1px solid rgba(6,6,231,.2); }
.glow-brand { box-shadow: 0 0 0 1px rgba(6,6,231,.25), 0 8px 40px -8px rgba(6,6,231,.35); }

.grid-bg { background-image: linear-gradient(rgba(1,23,80,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(1,23,80,0.05) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 25%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 25%, transparent 100%); }
.orb { position:absolute; border-radius:50%; filter:blur(90px); opacity:.16; pointer-events:none; transform: translateZ(0); }

.reveal { opacity:0; transform: translateY(34px); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.reveal.visible { opacity:1; transform: translateY(0); }
.reveal-delay-1 { transition-delay:.12s; } .reveal-delay-2 { transition-delay:.24s; } .reveal-delay-3 { transition-delay:.36s; }

.nav-blur { background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(1,23,80,0.07); }
.nav-link.active { color:#0606e7; font-weight:600; }
.btn-shine { position:relative; overflow:hidden; }
.btn-shine::after { content:''; position:absolute; top:0; left:-80%; width:50%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent); transform:skewX(-20deg); transition:left .6s ease; }
.btn-shine:hover::after { left:130%; }

.module-chip, .bank-chip { cursor:pointer; user-select:none; transition: all .3s ease; }
.module-chip.active, .bank-chip.active { border-color:#0606e7; background:rgba(6,6,231,0.06); box-shadow:0 0 0 3px rgba(6,6,231,0.12); }
.bank-chip.special { border:2px solid transparent; background: linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,#0606e7,#011750) border-box; position:relative; }
.bank-chip.special.active { box-shadow:0 10px 30px -10px rgba(6,6,231,.45); background: linear-gradient(rgba(6,6,231,.07),rgba(6,6,231,.07)) padding-box, linear-gradient(135deg,#0606e7,#011750) border-box; }

/* visibility: un modal cerrado no recibe foco con Tab ni toques (antes solo era transparente) */
.modal-overlay { opacity:0; visibility:hidden; pointer-events:none; transition: opacity .35s ease, visibility 0s linear .35s; }
.modal-overlay.open { opacity:1; visibility:visible; pointer-events:auto; transition: opacity .35s ease, visibility 0s; }
.modal-overlay { overscroll-behavior: contain; }
/* 92vh en iOS incluye la barra del navegador y corta el final del modal: se usa la altura visible real */
@supports (height: 100dvh) { .modal-box.max-h-\[92vh\] { max-height: 92dvh; } }
.modal-box { transform: translateY(28px) scale(.97); opacity:0; transition: all .4s cubic-bezier(.22,1,.36,1); }
.modal-overlay.open .modal-box { transform: translateY(0) scale(1); opacity:1; }

#mobileMenu { transition: max-height .45s cubic-bezier(.22,1,.36,1), opacity .35s ease, visibility 0s linear .45s; max-height:0; opacity:0; overflow:hidden; visibility:hidden; }
/* en horizontal (teléfono girado) el menú no cabe: se limita a la pantalla y se desplaza */
#mobileMenu.open { max-height: calc(100vh - 4rem); opacity:1; overflow-y:auto; overscroll-behavior:contain; visibility:visible; transition: max-height .45s cubic-bezier(.22,1,.36,1), opacity .35s ease, visibility 0s; }
@supports (height: 100dvh) { #mobileMenu.open { max-height: calc(100dvh - 4rem); } }
#mobileMenu .mob-link { min-height:44px; display:flex; align-items:center; }
#mobileMenu .mob-link.text-center { justify-content:center; }

/* ─── Header: app de ventas ─── */
.fly-item { position:absolute; transition: transform .65s cubic-bezier(.5,-0.2,.6,1.2), opacity .65s ease; }
.cart-pop { animation: cartPop .5s ease; }
@keyframes cartPop { 30% { transform: scale(1.35); } }
.check-pop { animation: checkPop .6s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes checkPop { from { transform: scale(0); } to { transform: scale(1); } }

/* ─── Header: dimensión tecnológica ─── */
#techCanvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hero-scan { position:absolute; left:0; right:0; height:120px; top:-120px; pointer-events:none;
  background: linear-gradient(180deg, transparent, rgba(34,211,238,.10) 45%, rgba(6,6,231,.14) 50%, transparent);
  animation: heroScan 6.5s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes heroScan { 0% { top:-120px; opacity:0; } 10% { opacity:1; } 90% { opacity:1; } 100% { top:100%; opacity:0; } }
.hero-beam { position:absolute; width:2px; height:140px; border-radius:2px; pointer-events:none;
  background: linear-gradient(180deg, transparent, #22d3ee, transparent); opacity:.0; animation: beamFall 5s linear infinite; }
@keyframes beamFall { 0% { transform: translateY(-160px); opacity:0; } 15% { opacity:.7; } 100% { transform: translateY(900px); opacity:0; } }
.glitch { position:relative; display:inline-block; }
.glitch::before, .glitch::after { content: attr(data-text); position:absolute; inset:0; pointer-events:none; opacity:0; background:none; }
.glitch.is-glitching::before { opacity:.85; color:#22d3ee; -webkit-text-fill-color:#22d3ee; transform: translate(-2px, 1px); clip-path: inset(10% 0 55% 0); animation: glitchA .35s steps(2) 1; }
.glitch.is-glitching::after  { opacity:.85; color:#a855f7; -webkit-text-fill-color:#a855f7; transform: translate(2px, -1px); clip-path: inset(60% 0 8% 0);  animation: glitchB .35s steps(2) 1; }
@keyframes glitchA { 0% { clip-path: inset(10% 0 55% 0); } 50% { clip-path: inset(40% 0 20% 0); } 100% { clip-path: inset(70% 0 5% 0); } }
@keyframes glitchB { 0% { clip-path: inset(60% 0 8% 0); } 50% { clip-path: inset(5% 0 70% 0); } 100% { clip-path: inset(30% 0 40% 0); } }
.hud-chip { font-family:'JetBrains Mono',monospace; }
.cursor-blink { animation: cursorBlink 1s step-end infinite; }
@keyframes cursorBlink { 50% { opacity: 0; } }
.holo-border { position:relative; }
.holo-border::before { content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none;
  background: conic-gradient(from var(--ang,0deg), transparent 0 70%, #22d3ee 80%, #a855f7 88%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: holoSpin 4s linear infinite; }
@property --ang { syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes holoSpin { to { --ang: 360deg; } }

/* ─── Marquee tech ─── */
@keyframes marqueeX { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.marquee-track { animation: marqueeX 28s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
.tech-pill { transition: all .3s ease; }
.tech-pill:hover { transform: translateY(-3px) scale(1.05); border-color: rgba(6,6,231,.4); color: #0606e7; }

/* ─── Micro-SaaS expandible ─── */
.micro-card { transition: all .45s cubic-bezier(.22,1,.36,1); }
.micro-card.open { border-color: rgba(6,6,231,.35); box-shadow: 0 18px 45px -14px rgba(6,6,231,.28); }
.micro-body { transition: max-height .55s cubic-bezier(.22,1,.36,1); max-height:0; overflow:hidden; }
.micro-toggle .chev svg { transition: transform .45s cubic-bezier(.22,1,.36,1); }
.micro-card.open .chev { background: #0606e7; color: #fff; }
.micro-card.open .chev svg { transform: rotate(180deg); }
.pulse-dot-price { position: relative; }
.pulse-dot-price::after { content:''; position:absolute; inset:-4px; border-radius:9999px; border:1px solid rgba(6,6,231,.35); animation: ringPulse 2.2s ease-out infinite; }
@keyframes ringPulse { 0% { transform: scale(.8); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }

.shine-title { position: relative; display: inline-block; }
.shine-title::after { content:''; position:absolute; left:0; bottom:-6px; height:3px; width:64px; border-radius:99px; background: linear-gradient(90deg,#0606e7,#22d3ee,#a855f7); background-size:200% auto; animation: gradShift 4s linear infinite; }

/* ─── Mini hero de páginas internas ─── */
.mini-hero { position:relative; overflow:hidden; isolation:isolate; }
.mini-hero .mh-grid { position:absolute; inset:-34px 0 0 -34px; z-index:-1; opacity:.5;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 34px 34px; mask-image: linear-gradient(180deg, #000 20%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 100%);
  animation: mhGrid 18s linear infinite; }
@keyframes mhGrid { to { transform: translate(34px, 34px); } }
.mini-hero .mh-orb { position:absolute; border-radius:50%; filter: blur(60px); opacity:.55; z-index:-1; animation: floatY 8s ease-in-out infinite; }
.mini-hero .mh-icon { box-shadow: 0 0 0 8px rgba(255,255,255,.07), 0 0 0 16px rgba(255,255,255,.04), 0 20px 40px -10px rgba(0,0,0,.4); }

/* ─── Cotizador ─── */
.cx-dots i { display:inline-block; width:6px; height:6px; border-radius:99px; background:rgba(1,23,80,.15); margin-left:2px; }
.cx-dots i.on { background:#0606e7; }
.meter { height:10px; border-radius:99px; background:rgba(1,23,80,.08); overflow:hidden; }
.meter > span { display:block; height:100%; border-radius:99px; background: linear-gradient(90deg,#22d3ee,#0606e7,#a855f7); transition: width .7s cubic-bezier(.22,1,.36,1); }
.locked-price { filter: blur(7px); user-select:none; transition: filter .4s; }
.scramble { font-family:'JetBrains Mono',monospace; letter-spacing:.02em; }
.cta-pulse { animation: ctaPulse 2.4s ease-in-out infinite; }
@keyframes ctaPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,.45); } 50% { box-shadow: 0 0 0 12px rgba(16,185,129,0); } }

/* ─── Clientes ─── */
.client-card { transition: all .45s cubic-bezier(.22,1,.36,1); cursor:pointer; }
.client-card .client-name { filter: grayscale(1); opacity:.55; transition: all .45s ease; }
.client-card:hover .client-name, .client-card:focus-visible .client-name { filter:none; opacity:1; color:#0606e7; }
.client-card:hover, .client-card:focus-visible { transform: translateY(-4px); border-color: rgba(6,6,231,.35); outline:none; }
.client-card .client-hint { opacity:0; transform: translateY(4px); transition: all .3s ease; }
.client-card:hover .client-hint, .client-card:focus-visible .client-hint { opacity:1; transform:none; }
.client-flag { position:absolute; top:8px; right:8px; width:20px; height:14px; object-fit:cover; border-radius:3px;
  box-shadow: 0 0 0 1px rgba(1,23,80,.12), 0 2px 6px -1px rgba(1,23,80,.25); opacity:.9; transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s; }
.client-card:hover .client-flag, .client-card:focus-visible .client-flag { opacity:1; transform: scale(1.15); }
.client-flag-inline { width:18px; height:12px; object-fit:cover; border-radius:2px; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
@media (hover:none) { .client-card .client-name { filter:none; opacity:.9; } .client-card .client-hint { opacity:.8; transform:none; } }

/* ─── Chat bot ─── */
#chatPanel { transform: translateY(20px) scale(.96); opacity:0; visibility:hidden; pointer-events:none; transition: all .4s cubic-bezier(.22,1,.36,1), visibility 0s linear .4s; transform-origin: bottom right; max-height: calc(100vh - 8rem); }
#chatPanel.open { transform: translateY(0) scale(1); opacity:1; visibility:visible; pointer-events:auto; transition: all .4s cubic-bezier(.22,1,.36,1), visibility 0s; }
@supports (height: 100dvh) { #chatPanel { max-height: calc(100dvh - 8rem); } }
#chatPanel #botChat { flex: 1 1 auto; min-height: 7rem; }   /* en pantallas bajas el chat se encoge en vez de salirse */
#botActions { max-height: 40%; overflow-y: auto; }
/* iPhone con barra de inicio: el botón flotante no queda debajo de ella */
#botFab { bottom: max(1.25rem, env(safe-area-inset-bottom)); }
.msg-in { animation: msgIn .4s cubic-bezier(.22,1,.36,1); }
@keyframes msgIn { from { transform: translateY(12px); opacity:0; } to { transform: translateY(0); opacity:1; } }
.typing-dot { animation: typing 1.2s infinite; }
.typing-dot:nth-child(2) { animation-delay:.2s; } .typing-dot:nth-child(3) { animation-delay:.4s; }
@keyframes typing { 0%,60%,100% { transform: translateY(0); opacity:.4; } 30% { transform: translateY(-4px); opacity:1; } }
#botFab { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
/* Botón del chat: Pixel DS de pie, flotando */
.bot-fab-ds { background: none; border: 0; padding: 0; cursor: pointer; }
.bot-fab-img { filter: drop-shadow(0 10px 14px rgba(6,6,231,.35)); animation: botFloat 3.2s ease-in-out infinite; }
.bot-fab-shadow { position: absolute; bottom: -4px; left: 18%; right: 18%; height: 8px; border-radius: 50%; background: rgba(1,23,80,.28); filter: blur(3px); animation: botFloatShadow 3.2s ease-in-out infinite; }
@keyframes botFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes botFloatShadow { 0%,100% { transform: scaleX(1); opacity: .9; } 50% { transform: scaleX(.75); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .bot-fab-img, .bot-fab-shadow { animation: none; } }
#botFab:hover { transform: scale(1.1); }

/* ─── Footer interactivo ─── */
.ds-footer { background: radial-gradient(1200px 500px at 50% -10%, rgba(6,6,231,.35), transparent 60%), #030a24; color:#cbd5f5; position:relative; overflow:hidden; }
.ds-footer a { transition: color .2s; }
.ds-footer a:hover { color:#fff; }
.foot-spot { position:absolute; inset:0; pointer-events:none; opacity:0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(34,211,238,.14), transparent 60%); }
.ds-footer:hover .foot-spot { opacity:1; }
.mega-word { font-weight:900; letter-spacing:-.04em; line-height:.85; user-select:none; white-space:nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(148,163,255,.22);
  background: radial-gradient(260px circle at var(--wx,50%) var(--wy,50%), #22d3ee, #6366f1 40%, transparent 70%);
  -webkit-background-clip: text; background-clip: text; }
.mega-word span { display:inline-block; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.mega-word span:hover { transform: translateY(-10%) scale(1.06); }
.term { background:#010616; border:1px solid rgba(99,102,241,.35); box-shadow: 0 0 0 1px rgba(34,211,238,.05), 0 30px 60px -20px rgba(6,6,231,.6); }
.term-body { font-family:'JetBrains Mono',monospace; font-size:12.5px; line-height:1.65; }
.term-body .ok { color:#34d399; } .term-body .hl { color:#22d3ee; } .term-body .mut { color:#64748b; } .term-body .warn { color:#fbbf24; } .term-body .err { color:#f87171; }
.term-body a { color:#22d3ee; text-decoration: underline; text-underline-offset:3px; }
.term-input { background:transparent; border:0; outline:none; color:#e2e8f0; font-family:'JetBrains Mono',monospace; font-size:12.5px; width:100%; caret-color:#22d3ee; }
.term-chip { font-family:'JetBrains Mono',monospace; }
.game-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; }
.game-cell { aspect-ratio:1/1; border-radius:12px; background: rgba(99,102,241,.08); border:1px solid rgba(99,102,241,.2); display:flex; align-items:center; justify-content:center; font-size:26px; cursor:pointer; transition: transform .12s, background .2s; user-select:none; -webkit-tap-highlight-color: transparent; }
.game-cell:active { transform: scale(.92); }
.game-cell.bug { background: rgba(248,113,113,.15); border-color: rgba(248,113,113,.5); animation: bugIn .18s ease-out; }
.game-cell.hit { background: rgba(52,211,153,.2); border-color: rgba(52,211,153,.6); }
@keyframes bugIn { from { transform: scale(.6); } to { transform: scale(1); } }

/* Botón "Pixel" de la navegación */
.pixel-pill { position:relative; display:inline-flex; align-items:center; gap:.4rem; padding: .3rem .8rem .3rem .3rem; border-radius:99px; font-weight:800; font-size:.8rem; color:#fff;
  background: linear-gradient(135deg,#0606e7,#7c3aed 55%,#22d3ee); background-size:200% 200%; animation: pillShift 5s ease infinite; box-shadow: 0 8px 22px -8px rgba(124,58,237,.7); isolation:isolate; }
.pixel-pill::after { content:''; position:absolute; inset:-3px; border-radius:inherit; z-index:-1; background: inherit; filter: blur(8px); opacity:.55; animation: pillGlow 2.4s ease-in-out infinite; }
.pixel-pill img { width:24px; height:24px; border-radius:99px; background:#fff; }
.pixel-pill:hover { transform: translateY(-1px) scale(1.03); }
@keyframes pillShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes pillGlow { 0%,100% { opacity:.35; } 50% { opacity:.75; } }

/* ─── Pasarela: selector alquiler / propia ─── */
.gw-tab { border-color: transparent; cursor:pointer; }
.gw-tab:hover { transform: translateY(-3px); }
.gw-tab[data-gw-tab="rent"][aria-selected="true"] { border-color:#10b981; box-shadow: 0 20px 50px -18px rgba(16,185,129,.45); }
.gw-tab[data-gw-tab="own"][aria-selected="true"]  { border-color:#0606e7; box-shadow: 0 20px 50px -18px rgba(6,6,231,.4); }
.gw-tab[aria-selected="false"] { opacity:.8; }
.gw-tab[aria-selected="true"] .gw-cta::before { content:'● '; }
.gw-panel { animation: msgIn .45s cubic-bezier(.22,1,.36,1); }

/* ─── Pasarela Pago Móvil ─── */
.pm-step { display:none; } .pm-step.active { display:block; animation: msgIn .45s cubic-bezier(.22,1,.36,1); }
.ref-box { letter-spacing: .5em; font-family:'JetBrains Mono',monospace; }
.copy-row { cursor:pointer; transition: background .2s; }
.copy-row:hover { background: rgba(6,6,231,.05); }
.copy-row.copied { background: rgba(16,185,129,.1); }

/* ─── App Micro-SaaS ─── */
.field { width:100%; background:#fff; border:1px solid rgba(1,23,80,.12); border-radius:.75rem; padding:.7rem .9rem; font-size:.875rem; color:#011750; transition: border-color .2s, box-shadow .2s; }
.field:focus { outline:none; border-color:#0606e7; box-shadow: 0 0 0 3px rgba(6,6,231,.12); }
.label { display:block; font-size:.72rem; font-weight:600; color:#011750; margin-bottom:.35rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.7rem 1.1rem; border-radius:.75rem; font-weight:600; font-size:.875rem; transition: all .2s; cursor:pointer; }
.btn-primary { background:#0606e7; color:#fff; } .btn-primary:hover { background:#011750; }
.btn-ghost { background:#fff; color:#011750; border:1px solid rgba(1,23,80,.12); } .btn-ghost:hover { border-color:#0606e7; color:#0606e7; }
.btn-danger { background:#fff; color:#dc2626; border:1px solid rgba(220,38,38,.25); } .btn-danger:hover { background:#fef2f2; }
.badge { display:inline-block; padding:.15rem .55rem; border-radius:99px; font-size:.68rem; font-weight:700; }

/* ─── Documento imprimible ─── */
.doc-sheet { background:#fff; width:100%; max-width:820px; margin:0 auto; padding:40px; box-shadow: 0 20px 60px -20px rgba(1,23,80,.25); border-radius:14px; }
@media (max-width: 640px) { .doc-sheet:not(.pdf-mode) { padding:20px; border-radius:0; } }
/* Tabla de ítems: en móvil cada ítem es una ficha (descripción / cant × precio ··· total) */
@media (max-width: 639px) {
  .doc-sheet:not(.pdf-mode) .doc-table thead { display:none; }
  .doc-sheet:not(.pdf-mode) .doc-table tr { display:grid; grid-template-columns: auto auto 1fr; align-items:baseline; column-gap:.35rem; padding:.7rem 0; }
  .doc-sheet:not(.pdf-mode) .doc-table td { padding:0 !important; text-align:left; }
  .doc-sheet:not(.pdf-mode) .doc-table .dt-desc { grid-column: 1 / -1; font-weight:600; color:#011750; margin-bottom:.2rem; }
  .doc-sheet:not(.pdf-mode) .doc-table .dt-qty { color:#71717a; }
  .doc-sheet:not(.pdf-mode) .doc-table .dt-qty::after { content:' ×'; }
  .doc-sheet:not(.pdf-mode) .doc-table .dt-price { color:#71717a; }
  .doc-sheet:not(.pdf-mode) .doc-table .dt-total { text-align:right; }
}
/* Al generar el PDF desde un teléfono se fuerza el formato A4 de escritorio */
.doc-sheet.pdf-mode { width:794px; max-width:none; padding:40px; box-shadow:none; border-radius:0; }
@media print {
  @page { size: letter; margin: 0.5in; }
  body { background:#fff !important; }
  .no-print { display:none !important; }
  .doc-sheet { box-shadow:none; padding:0; max-width:none; border-radius:0; }
  .print-qr { break-inside: avoid; }
}

/* ═══════════ SaaS POR INDUSTRIA (zona "centro de mando") ═══════════ */
.saas-pattern { background-image: radial-gradient(rgba(255,255,255,.55) 1.2px, transparent 1.2px); background-size: 18px 18px; }
.saas-zone { position:relative; overflow:hidden; isolation:isolate; color:#e2e8f0;
  background: radial-gradient(900px 500px at 15% 0%, rgba(6,6,231,.35), transparent 60%), radial-gradient(800px 500px at 100% 100%, rgba(168,85,247,.22), transparent 60%), #030a24; }
/* piso de cuadrícula en perspectiva que avanza */
.saas-floor { position:absolute; left:-50%; right:-50%; bottom:-10%; height:65%; z-index:-1; pointer-events:none; opacity:.5;
  background-image: linear-gradient(rgba(99,102,241,.28) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,.28) 1px, transparent 1px);
  background-size: 56px 56px; transform: perspective(600px) rotateX(62deg); transform-origin: top center;
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 60%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 60%, transparent);
  animation: saasFloor 6s linear infinite; }
@keyframes saasFloor { from { transform: perspective(600px) rotateX(62deg) translateY(0); } to { transform: perspective(600px) rotateX(62deg) translateY(56px); } }
.saas-stars { position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.55;
  background-image: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #a5b4fc, transparent), radial-gradient(1.5px 1.5px at 40% 70%, #67e8f9, transparent), radial-gradient(1px 1px at 85% 60%, #fff, transparent), radial-gradient(1px 1px at 10% 85%, #c4b5fd, transparent);
  background-size: 420px 420px; animation: saasTwinkle 5s ease-in-out infinite alternate; }
@keyframes saasTwinkle { from { opacity:.25; } to { opacity:.65; } }
.saas-search { background: rgba(15,23,62,.7); border:1px solid rgba(129,140,248,.3); box-shadow: 0 0 0 1px rgba(34,211,238,.05), 0 20px 40px -20px rgba(6,6,231,.6); }
.saas-search:focus-within { border-color:#22d3ee; box-shadow: 0 0 0 4px rgba(34,211,238,.15), 0 20px 40px -20px rgba(34,211,238,.45); }
.saas-search input { background:transparent; border:0; outline:none; color:#fff; width:100%; font-family:'JetBrains Mono',monospace; }
.saas-search input::placeholder { color:#64748b; }
.saas-stat b { background: linear-gradient(90deg,#fff,#a5b4fc); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Tarjeta con foto real + inclinación 3D (variables --rx/--ry/--mx/--my las pone app.js) */
.saas-card { perspective: 1100px; list-style:none; }
.saas-card[hidden] { display:none; }
.saas-card-inner { --accent:#6366f1; position:relative; height:100%; min-height: 27rem; border-radius: 1.5rem; overflow:hidden; isolation:isolate;
  background:#0b1437; border:1px solid rgba(148,163,255,.14); transform-style: preserve-3d;
  transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition: transform .6s cubic-bezier(.22,1,.36,1), box-shadow .5s, border-color .5s;
  box-shadow: 0 25px 50px -25px rgba(0,0,0,.8); display:flex; flex-direction:column; justify-content:flex-end; }
.saas-card.is-tilting .saas-card-inner { transition: transform .12s linear, box-shadow .5s, border-color .5s; }
.saas-card-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-3; transform: scale(1.06); transition: transform 1.4s cubic-bezier(.22,1,.36,1), filter .6s; filter: saturate(1.08) brightness(.92); }
.saas-card-noimg { position:absolute; inset:0; z-index:-3; background: radial-gradient(circle at 30% 20%, var(--accent), transparent 60%), #0b1437; }
.saas-card-shade { position:absolute; inset:0; z-index:-2; pointer-events:none;
  background: linear-gradient(180deg, rgba(3,10,36,.25) 0%, rgba(3,10,36,.1) 30%, rgba(3,10,36,.78) 62%, rgba(3,10,36,.97) 100%); }
.saas-card-tint { position:absolute; inset:0; z-index:-2; pointer-events:none; opacity:.22;
  background: linear-gradient(200deg, var(--accent), transparent 55%); transition: opacity .5s; }
.saas-card-spot { position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition: opacity .4s;
  background: radial-gradient(340px circle at var(--mx,50%) var(--my,30%), rgba(255,255,255,.16), transparent 60%); }
.saas-card-inner::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:0; transition: opacity .5s;
  background: conic-gradient(from var(--ang,0deg), transparent 0 60%, var(--accent) 72%, #22d3ee 82%, #a855f7 90%, transparent 98%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.saas-card-scan { position:absolute; left:0; right:0; top:-30%; height:30%; pointer-events:none; z-index:-1; opacity:0;
  background: linear-gradient(180deg, transparent, rgba(34,211,238,.18) 50%, transparent); }
.saas-card-top { position:absolute; left:1rem; right:1rem; top:1rem; display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem; transform: translateZ(50px); }
.saas-logo { display:flex; align-items:center; gap:.45rem; padding:.4rem .75rem .4rem .45rem; border-radius:.9rem; background: rgba(255,255,255,.94); color:#011750;
  box-shadow: 0 10px 25px -10px rgba(0,0,0,.6); font-weight:900; letter-spacing:-.02em; max-width:75%; }
.saas-logo img { height:32px; width:auto; max-width:150px; object-fit:contain; }   /* logo subido desde el CMS (más visible) */
.saas-logo-ic { width:28px; height:28px; border-radius:.6rem; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0;
  background: linear-gradient(135deg, var(--accent), #011750); }
.saas-badge { font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.08em; padding:.3rem .55rem; border-radius:99px; color:#fff;
  background: rgba(3,10,36,.72); border:1px solid rgba(255,255,255,.25); }
.saas-card-body { position:relative; padding:1.35rem; transform: translateZ(40px); }
.saas-kicker { font-family:'JetBrains Mono',monospace; font-size:11px; color:#67e8f9; letter-spacing:.04em; }
.saas-kicker::before { content:'> '; color:var(--accent); filter:brightness(1.6); }
.saas-card h3 { color:#fff; font-size:1.45rem; line-height:1.15; font-weight:800; letter-spacing:-.02em; margin-top:.25rem; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.saas-tagline { color:rgba(226,232,240,.82); font-size:.85rem; margin-top:.35rem; }
/* Vista previa de funciones: aparece al pasar el mouse (escritorio) */
.saas-preview { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.75rem; max-height:0; opacity:0; overflow:hidden; transform: translateY(8px);
  transition: max-height .55s cubic-bezier(.22,1,.36,1), opacity .4s, transform .5s; }
.saas-chip { font-size:11px; font-weight:600; color:#e0e7ff; padding:.28rem .55rem; border-radius:99px; background: rgba(99,102,241,.22); border:1px solid rgba(165,180,252,.28); white-space:nowrap; }
.saas-actions { display:grid; grid-template-columns: 1fr 1fr; gap:.5rem; margin-top:1rem; }
.saas-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:44px; padding:.65rem .75rem; border-radius:.85rem;
  font-size:.8rem; font-weight:800; transition: transform .25s, box-shadow .3s, background .3s, border-color .3s; overflow:hidden; text-align:center; line-height:1.15; }
.saas-btn:active { transform: scale(.97); }
.saas-btn-demo { color:#fff; background: linear-gradient(135deg, var(--accent), #0606e7); box-shadow: 0 12px 28px -12px var(--accent); }
.saas-btn-demo:hover { box-shadow: 0 16px 34px -10px var(--accent); filter: brightness(1.12); }
.saas-btn-ghost { color:#fff; background: rgba(15,23,62,.55); border:1px solid rgba(255,255,255,.28); }
.saas-btn-ghost:hover { background: rgba(255,255,255,.18); border-color:#fff; }
.saas-btn:focus-visible { outline:none; box-shadow: 0 0 0 3px #22d3ee; }
@media (hover:hover) and (pointer:fine) {
  .saas-card:hover .saas-card-img { transform: scale(1.16); filter: saturate(1.2) brightness(1); }
  .saas-card:hover .saas-card-inner { border-color: transparent; box-shadow: 0 40px 70px -25px rgba(0,0,0,.85), 0 0 50px -12px var(--accent); }
  .saas-card:hover .saas-card-inner::before, .saas-card:hover .saas-card-spot { opacity:1; }
  .saas-card:hover .saas-card-inner::before { animation: holoSpin 4s linear infinite; }
  .saas-card:hover .saas-card-tint { opacity:.6; }
  .saas-card:hover .saas-card-scan { animation: saasScan 1.3s cubic-bezier(.45,0,.55,1) 1; }
  .saas-card:hover .saas-preview, .saas-card:focus-within .saas-preview { max-height:5rem; opacity:1; transform:none; }
}
@keyframes saasScan { 0% { top:-30%; opacity:0; } 15% { opacity:1; } 100% { top:110%; opacity:0; } }
/* Tarjeta "¿Tu industria no está?" */
.saas-ask { min-height: 27rem; border-radius:1.5rem; border:1px dashed rgba(129,140,248,.45); background: rgba(15,23,62,.5); transition: all .5s; }
.saas-ask:hover { border-color:#22d3ee; background: rgba(15,23,62,.8); box-shadow: 0 0 50px -15px rgba(34,211,238,.5); }
.saas-ask-ring { width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:28px;
  background: conic-gradient(from var(--ang,0deg), #22d3ee, #6366f1, #a855f7, #22d3ee); animation: holoSpin 5s linear infinite; padding:3px; }
.saas-ask-ring span { width:100%; height:100%; border-radius:50%; background:#0b1437; display:flex; align-items:center; justify-content:center; }

/* ─── Ficha del sistema (modal "Ver funciones") ─── */
.saas-modal-box { background: #070f2e; color:#e2e8f0; border:1px solid rgba(129,140,248,.25); box-shadow: 0 40px 100px -20px rgba(0,0,0,.8), 0 0 80px -30px var(--accent,#6366f1); }
.saas-modal-hero { position:relative; min-height: 13rem; background:#0b1437 center/cover no-repeat; }
.saas-modal-hero::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(7,15,46,.2), rgba(7,15,46,.96)); }
.saas-modal-hero > * { position:relative; z-index:1; }
.saas-term { font-family:'JetBrains Mono',monospace; font-size:12px; color:#94a3b8; }
.saas-term .c { color:#34d399; } .saas-term .k { color:#67e8f9; }
.saas-feat { display:flex; gap:.75rem; padding:.85rem; border-radius:1rem; background: rgba(255,255,255,.04); border:1px solid rgba(129,140,248,.16);
  opacity:0; transform: translateY(14px); transition: border-color .3s, background .3s; }
.saas-feat:hover { border-color: var(--accent,#6366f1); background: rgba(99,102,241,.1); }
.saas-modal.open .saas-feat { animation: saasFeatIn .55s cubic-bezier(.22,1,.36,1) forwards; animation-delay: calc(var(--i) * 70ms + 120ms); }
@keyframes saasFeatIn { to { opacity:1; transform:none; } }
.saas-feat-ic { width:42px; height:42px; flex-shrink:0; border-radius:.8rem; display:flex; align-items:center; justify-content:center; font-size:20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent,#6366f1) 45%, transparent), rgba(6,6,231,.25)); border:1px solid rgba(255,255,255,.12); }
.saas-nav-btn { width:40px; height:40px; border-radius:.8rem; display:flex; align-items:center; justify-content:center; color:#fff; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); transition: background .2s; }
.saas-nav-btn:hover { background: rgba(255,255,255,.18); }

/* ═══════════ TODOS NECESITAN ═══════════ */
.todos-zone { position:relative; overflow:hidden; isolation:isolate; color:#fff; background: linear-gradient(125deg, #ff6a00 0%, #ee0979 45%, #a21caf 75%, #4c1d95 100%); }
.todos-aurora { position:absolute; border-radius:50%; filter: blur(70px); opacity:.55; z-index:-1; pointer-events:none; animation: auroraMove 14s ease-in-out infinite alternate; }
@keyframes auroraMove { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(8%, -6%) scale(1.15); } 100% { transform: translate(-6%, 8%) scale(.95); } }
.todos-word { display:inline-block; background: linear-gradient(90deg,#fff,#fde68a,#fff); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation: gradShift 4s linear infinite; }
.todos-tab { position:relative; text-align:left; width:100%; border-radius:1.25rem; padding:1rem 1.1rem; display:flex; align-items:center; gap:.85rem; color:#fff;
  background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); transition: all .4s cubic-bezier(.22,1,.36,1); }
.todos-tab:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }
.todos-tab[aria-selected="true"] { background:#fff; color:#3b0764; border-color:#fff; box-shadow: 0 25px 50px -20px rgba(59,7,100,.6); transform: translateY(-3px); }
.todos-tab-ic { width:52px; height:52px; border-radius:1rem; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:24px; overflow:hidden;
  background: linear-gradient(135deg,#ff6a00,#ee0979 60%,#a21caf); box-shadow: 0 10px 20px -8px rgba(0,0,0,.4); }
.todos-tab-ic img { width:100%; height:100%; object-fit:cover; }
.todos-tab .todos-check { margin-left:auto; width:22px; height:22px; border-radius:50%; border:2px solid currentColor; opacity:.4; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; }
.todos-tab[aria-selected="true"] .todos-check { opacity:1; background:#22c55e; border-color:#22c55e; color:#fff; }
/* Ventana de app simulada */
.app-win { border-radius:1.25rem; overflow:hidden; background:#0b1020; color:#e2e8f0; border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 50px 100px -30px rgba(30,0,50,.85), 0 0 0 1px rgba(255,255,255,.06); transform: perspective(1400px) rotateY(var(--wy,-4deg)) rotateX(var(--wx,2deg)); transition: transform .6s cubic-bezier(.22,1,.36,1); }
.app-win-bar { display:flex; align-items:center; gap:.4rem; padding:.6rem .8rem; background:#141a2e; border-bottom:1px solid rgba(255,255,255,.06); }
.app-win-bar i { width:10px; height:10px; border-radius:50%; display:inline-block; }
.app-win-url { flex:1; margin-left:.5rem; font-family:'JetBrains Mono',monospace; font-size:11px; color:#94a3b8; background:#0b1020; border-radius:.5rem; padding:.3rem .6rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.app-side { background:#0f1528; border-right:1px solid rgba(255,255,255,.06); }
.app-mod { display:flex; align-items:center; gap:.5rem; width:100%; text-align:left; font-size:12px; padding:.55rem .65rem; border-radius:.6rem; color:#cbd5e1; transition: background .2s, color .2s; }
.app-mod:hover { background: rgba(255,255,255,.06); color:#fff; }
.app-mod.on { background: linear-gradient(90deg, rgba(238,9,121,.35), rgba(255,106,0,.15)); color:#fff; box-shadow: inset 2px 0 0 #ff6a00; }
.app-kpi { border-radius:.85rem; padding:.7rem .8rem; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); }
.app-kpi b { font-family:'JetBrains Mono',monospace; font-size:1.05rem; color:#fff; }
.app-bars { display:flex; align-items:flex-end; gap:5px; height:90px; }
.app-bars span { flex:1; border-radius:4px 4px 0 0; background: linear-gradient(180deg,#ff6a00,#ee0979); transition: height .9s cubic-bezier(.22,1,.36,1); min-height:6%; }
.app-feed li { display:flex; align-items:center; gap:.5rem; font-size:11.5px; padding:.4rem 0; border-bottom:1px dashed rgba(255,255,255,.07); animation: msgIn .45s cubic-bezier(.22,1,.36,1); }
.app-detail { border-radius:.85rem; padding:.85rem; background: linear-gradient(135deg, rgba(238,9,121,.18), rgba(255,106,0,.08)); border:1px solid rgba(255,106,0,.3); animation: msgIn .4s cubic-bezier(.22,1,.36,1); }
.app-caret::after { content:'▋'; margin-left:2px; color:#ff6a00; animation: cursorBlink 1s step-end infinite; }
@media (max-width: 767px) { .app-win { transform:none; } }
@media (prefers-reduced-motion: reduce) { .saas-floor, .saas-stars, .todos-aurora { animation:none; } .saas-card-inner { transform:none !important; } }

/* ─── Móvil y pantallas táctiles ─── */
@media (max-width: 640px) {
  /* iOS hace zoom automático al enfocar campos con letra < 16px y la página queda desplazada */
  /* !important: las clases text-sm / text-xs de Tailwind se inyectan después y ganarían */
  .field, .term-input, input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }
}
@media (pointer: coarse) {
  /* objetivos táctiles cómodos (≈ 44 px recomendados por Apple / WCAG 2.5.5) */
  .btn { min-height: 40px; }
  #hamburger { width: 44px; height: 44px; }
  .game-cell { touch-action: manipulation; }
  button, a, .btn, [role="button"] { touch-action: manipulation; }   /* sin retraso de doble toque */
}
/* Efectos hover que en táctil se quedan "pegados" tras tocar */
@media (hover: none) {
  .gw-tab:hover, .tech-pill:hover, .client-card:hover, .pixel-pill:hover, #botFab:hover { transform: none; }
  .mega-word span:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .hero-scan, .hero-beam { display:none; }
}

/* Botones de la tarjeta SaaS: lado a lado; si la tarjeta es angosta (4 columnas) se apilan para no partir el texto */
.saas-card-inner { container-type: inline-size; }
.saas-btn { white-space: nowrap; }
@container (max-width: 300px) { .saas-actions { grid-template-columns: 1fr; } }
/* Móvil: los módulos de la app simulada pasan a una fila deslizable de chips */
@media (max-width: 639px) {
  .app-side { border-right:0; border-bottom:1px solid rgba(255,255,255,.06); }
  .app-side [data-app="mods"] { display:flex; gap:.35rem; overflow-x:auto; scrollbar-width:none; padding-bottom:.15rem; }
  .app-side [data-app="mods"]::-webkit-scrollbar { display:none; }
  .app-mod { width:auto; flex-shrink:0; white-space:nowrap; border:1px solid rgba(255,255,255,.08); }
}

/* Check de las funciones SaaS (reemplaza los emojis, que algunas BD guardan como "?") */
.saas-check { width:1em; height:1em; flex-shrink:0; }
.saas-chip { display:inline-flex; align-items:center; gap:.3rem; }
.saas-chip .saas-check { color:#34d399; width:.95rem; height:.95rem; }
.saas-feat-ic { color:#fff; }
.saas-feat-ic .saas-check { width:22px; height:22px; color:#34d399; filter: drop-shadow(0 0 6px rgba(52,211,153,.55)); }
.saas-ck { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:6px; flex-shrink:0;
  background: rgba(52,211,153,.15); color:#34d399; }
.saas-ck .saas-check { width:13px; height:13px; }
.app-mod.on .saas-ck { background:#34d399; color:#0b1020; }
/* Logo de la aplicación en la ficha (modal "Ver funciones") */
.saas-mlogo { display:inline-flex; align-items:center; justify-content:center; padding:.6rem 1rem; border-radius:1rem; background: rgba(255,255,255,.96);
  box-shadow: 0 15px 35px -12px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.2); max-width: 100%; }
.saas-mlogo img { height:52px; width:auto; max-width:min(260px, 70vw); object-fit:contain; display:block; }
@media (min-width: 640px) { .saas-mlogo img { height:64px; } }

/* ═══════════ BOT DE WHATSAPP (paleta oficial: #25D366 #128C7E #075E54 #DCF8C6 #ECE5DD) ═══════════ */
.wa-zone { background: radial-gradient(700px 420px at 85% 15%, rgba(37,211,102,.35), transparent 60%), linear-gradient(135deg, #075E54 0%, #0a6e62 45%, #128C7E 100%); color:#fff; isolation:isolate; }
.wa-doodle { opacity:.08; background-image:
  radial-gradient(circle at 20px 20px, #fff 2px, transparent 2.5px), radial-gradient(circle at 60px 50px, #fff 1.5px, transparent 2px);
  background-size: 80px 80px; }
.wa-feature { background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); transition: background .3s, transform .3s; }
.wa-feature:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
.wa-cta:active { transform: scale(.98); }
/* Teléfono */
.wa-phone { position:relative; border-radius:2.2rem; padding:.55rem; background:#0b1714; box-shadow: 0 40px 80px -25px rgba(0,0,0,.6), 0 0 0 2px rgba(255,255,255,.08); }
.wa-phone-head { display:flex; align-items:center; gap:.6rem; padding:.85rem 1rem; border-radius:1.75rem 1.75rem 0 0; background:#075E54; color:#fff; }
.wa-avatar { width:36px; height:36px; border-radius:50%; background:#25D366; padding:7px; flex-shrink:0; color:#fff; }
.wa-chat { position:relative; height:21rem; overflow:hidden; padding:.9rem .75rem; display:flex; flex-direction:column; gap:.45rem;
  background-color:#ECE5DD; background-image: radial-gradient(rgba(7,94,84,.06) 1.2px, transparent 1.2px); background-size:16px 16px; }
.wa-day { align-self:center; font-size:10px; font-weight:700; color:#54656f; background:#fff; padding:.2rem .6rem; border-radius:.5rem; box-shadow:0 1px 1px rgba(0,0,0,.06); }
.wa-msg { position:relative; max-width:82%; font-size:12.5px; line-height:1.4; color:#111b21; padding:.45rem .6rem 1.05rem; border-radius:.6rem; box-shadow:0 1px 1px rgba(0,0,0,.08); }
.wa-msg i { position:absolute; right:.5rem; bottom:.2rem; font-style:normal; font-size:9.5px; color:#667781; }
.wa-in { align-self:flex-start; background:#fff; border-top-left-radius:.15rem; }
.wa-out { align-self:flex-end; background:#DCF8C6; border-top-right-radius:.15rem; }
.wa-out i { color:#53bdeb; }
.wa-typing { align-self:flex-end; display:flex; gap:3px; background:#DCF8C6; padding:.55rem .7rem; border-radius:.6rem; }
.wa-typing[hidden] { display:none; }
.wa-typing span { width:6px; height:6px; border-radius:50%; background:#128C7E; animation: typing 1.2s infinite; }
.wa-typing span:nth-child(2) { animation-delay:.2s; } .wa-typing span:nth-child(3) { animation-delay:.4s; }
.wa-input { display:flex; align-items:center; gap:.5rem; padding:.55rem .6rem; background:#f0f2f5; border-radius:0 0 1.75rem 1.75rem; font-size:12px; color:#8696a0; }
.wa-input span:first-child { flex:1; background:#fff; border-radius:99px; padding:.45rem .8rem; }
.wa-send { width:34px; height:34px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; }
/* Animación de la conversación (la activa app.js; sin JS todo queda visible) */
.wa-anim .wa-msg { opacity:0; transform: translateY(10px) scale(.97); transition: opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1); }
.wa-anim .wa-msg.show { opacity:1; transform:none; }
/* Panel web de leads flotante */
.wa-panel { position:absolute; right:-1.5rem; bottom:-3.25rem; width:13.5rem; background:#fff; color:#111b21; border-radius:1rem; padding:.8rem;
  box-shadow: 0 25px 50px -15px rgba(0,0,0,.45); border:1px solid rgba(7,94,84,.12); }
.wa-lead { display:flex; align-items:center; gap:.4rem; padding:.3rem .35rem; border-radius:.5rem; }
.wa-lead b { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; }
.wa-dot { width:7px; height:7px; border-radius:50%; background:#25D366; flex-shrink:0; }
.wa-tag { font-size:9.5px; font-weight:700; padding:.1rem .4rem; border-radius:99px; white-space:nowrap; }
.wa-anim .wa-lead-new { opacity:0; transform: translateX(14px); transition: opacity .4s, transform .5s cubic-bezier(.22,1,.36,1), background .6s; }
.wa-anim .wa-lead-new.show { opacity:1; transform:none; background:#DCF8C6; }
@media (max-width: 639px) { .wa-panel { position:relative; right:auto; bottom:auto; width:auto; margin:-1.5rem .75rem 0; } }

/* ═══════════ RENDIMIENTO (scroll fluido en Chrome) ═══════════ */
/* Secciones fuera de pantalla: sus animaciones infinitas se pausan (las marca app.js con .is-offscreen) */
.is-offscreen, .is-offscreen *, .is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; }
/* Capas animadas grandes: en su propia capa de composición */
.saas-floor, .mini-hero .mh-grid, .todos-aurora, .mini-hero .mh-orb, .marquee-track { will-change: transform; }
/* Equipos modestos (html.ds-lowend, lo pone app.js): se apagan los efectos decorativos más costosos */
.ds-lowend .text-gradient, .ds-lowend .todos-word { animation: none; }
.ds-lowend .saas-floor, .ds-lowend .saas-stars, .ds-lowend .todos-aurora, .ds-lowend .mini-hero .mh-grid, .ds-lowend .mini-hero .mh-orb,
.ds-lowend .hero-scan, .ds-lowend .hero-beam, .ds-lowend .pixel-pill::after { animation: none; }
.ds-lowend .orb { filter: blur(50px); }
.ds-lowend .nav-blur { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,.97); }