/* ══════════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════════ */
:root {
  --blue-50:#EFF6FF;--blue-100:#DBEAFE;--blue-200:#BFDBFE;--blue-400:#60A5FA;--blue-500:#3B82F6;--blue-600:#2563EB;--blue-700:#1D4ED8;--blue-900:#1E3A8A;
  --cyan-400:#A5C4FF;--cyan-500:#7AA8FF;--cyan-600:#3B6FDC;
  --violet-400:#A5C4FF;--violet-500:#1E40AF;--violet-600:#7AA8FF;
  --green-400:#34D399;--green-500:#10B981;
  --amber-400:#FBBF24;--amber-500:#F59E0B;
  --slate-50:#F8FAFC;--slate-100:#F1F5F9;--slate-200:#E2E8F0;--slate-300:#CBD5E1;--slate-400:#94A3B8;--slate-500:#64748B;--slate-600:#475569;--slate-700:#334155;--slate-800:#1E293B;--slate-900:#0F172A;--slate-950:#020617;
  --ink:#080E1D;
  /* Premium shadows */
  --shadow-sm:0 1px 3px rgba(8,14,29,.06),0 1px 2px rgba(8,14,29,.04);
  --shadow-md:0 4px 16px rgba(8,14,29,.08),0 2px 6px rgba(8,14,29,.04);
  --shadow-lg:0 12px 40px rgba(8,14,29,.1),0 4px 12px rgba(8,14,29,.05);
  --shadow-xl:0 24px 64px rgba(8,14,29,.12),0 8px 24px rgba(8,14,29,.06);
  --shadow-blue:0 8px 32px rgba(37,99,235,.28);
  /* Typography */
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'DM Sans',system-ui,sans-serif;
  --r-sm:8px;--r:12px;--r-lg:16px;--r-xl:24px;--r-2xl:32px;
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(0,.55,.45,1);
  --ease-bounce:cubic-bezier(.22,.68,0,1.2);
  --t:.22s;
  --header-h:68px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-body);background:#fff;color:var(--ink);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font:inherit}
.container{max-width:1200px;margin:0 auto;padding:0 32px}

/* ── TYPOGRAPHY ── */
.heading-display{font-family:var(--font-display);font-size:clamp(44px,5.5vw,80px);font-weight:900;line-height:1.02;letter-spacing:-3px;color:var(--ink)}
.heading-xl{font-family:var(--font-display);font-size:clamp(32px,3.5vw,54px);font-weight:800;line-height:1.08;letter-spacing:-2px}
.heading-lg{font-family:var(--font-display);font-size:clamp(26px,2.5vw,40px);font-weight:700;line-height:1.15;letter-spacing:-1.5px}
.heading-md{font-family:var(--font-display);font-size:clamp(20px,1.8vw,28px);font-weight:700;letter-spacing:-.8px}
.heading-sm{font-size:18px;font-weight:700;letter-spacing:-.3px}
.text-muted{color:var(--slate-500)}
.text-lg{font-size:18px;line-height:1.8}
.text-base{font-size:15px;line-height:1.75}
.gradient-text{background:linear-gradient(125deg,var(--blue-500) 0%,var(--cyan-400) 45%,var(--violet-400) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gradient-text-warm{background:linear-gradient(125deg,var(--blue-500) 0%,var(--violet-500) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes floatY2{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes pulseRing{0%{transform:scale(.9);opacity:.6}70%{transform:scale(1.4);opacity:0}100%{opacity:0}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes gradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes shimmer{0%{left:-100%}100%{left:200%}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes slideInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes countUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes dash{to{stroke-dashoffset:0}}
@keyframes scaleIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 20px rgba(37,99,235,.3)}50%{box-shadow:0 0 48px rgba(37,99,235,.6),0 0 80px rgba(122,168,255,.2)}}
@keyframes numberCount{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}

.anim-fade-up{animation:fadeUp .7s var(--ease-out) both}
.anim-fade-in{animation:fadeIn .6s var(--ease-out) both}
.anim-scale-in{animation:scaleIn .6s var(--ease-spring) both}
.anim-float{animation:floatY 5s ease-in-out infinite}
.anim-float2{animation:floatY2 7s ease-in-out infinite}
.d1{animation-delay:.06s}.d2{animation-delay:.14s}.d3{animation-delay:.22s}.d4{animation-delay:.3s}.d5{animation-delay:.38s}.d6{animation-delay:.46s}

/* ── PROMO BAR ── */
.promo-bar{
  background:linear-gradient(270deg,#0C1122,var(--blue-700),var(--cyan-600),var(--violet-600),#0C1122);
  background-size:300% 300%;animation:gradientShift 9s ease infinite;
  color:#fff;padding:11px 48px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-size:13px;font-weight:500;position:sticky;top:0;z-index:200;min-height:44px;
  overflow:hidden;
}
.promo-bar::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);animation:shimmer 5s ease-in-out infinite 1s;pointer-events:none}
.promo-bar__inner{display:flex;align-items:center;gap:16px;flex-wrap:nowrap;justify-content:center;position:relative;overflow:hidden;max-width:100%}
.promo-bar__cta{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;padding:5px 16px;border-radius:100px;font-size:12px;font-weight:700;transition:all var(--t);white-space:nowrap;letter-spacing:.3px}
.promo-bar__cta:hover{background:rgba(255,255,255,.26);transform:scale(1.03)}
.promo-dot{width:7px;height:7px;border-radius:50%;background:var(--green-400);display:inline-block;flex-shrink:0;animation:blink 2.2s ease-in-out infinite;box-shadow:0 0 6px var(--green-400)}

/* ── HEADER ── */
/* ── SITE HEADER ── */
.site-header{position:sticky;top:44px;left:0;right:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(28px) saturate(200%);border-bottom:1px solid rgba(226,232,240,.6);transition:box-shadow var(--t),background var(--t)}
.site-header.scrolled{box-shadow:0 4px 32px rgba(8,14,29,.08),0 1px 0 rgba(226,232,240,.8);background:rgba(255,255,255,.98)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);gap:8px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;text-decoration:none;transition:opacity var(--t)}
.logo:hover{opacity:.88}
.logo-mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--blue-600),var(--cyan-500));display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(37,99,235,.3)}
.logo-text{font-family:var(--font-display);font-size:19px;font-weight:800;letter-spacing:-1px;color:var(--ink)}
.logo-text span{color:var(--blue-600)}

/* ── MAIN NAV (desktop) ── */
.main-nav{display:flex;align-items:center;gap:2px;flex:1;justify-content:center}
.nav-link{padding:8px 13px;border-radius:8px;font-size:13.5px;font-weight:500;color:var(--slate-600);transition:color .18s,background .18s;display:flex;align-items:center;gap:5px;white-space:nowrap;text-decoration:none;font-family:var(--font-body)}
.nav-link:hover,.nav-link--btn:hover{color:var(--ink);background:var(--slate-50)}
.nav-link--btn{background:none;border:none;cursor:pointer;font-family:inherit;line-height:1}
.nav-chevron{transition:transform .2s;flex-shrink:0}
.nav-dropdown-wrap.open .nav-chevron{transform:rotate(180deg)}

/* ── DROPDOWN BASE ── */
.nav-dropdown-wrap{position:relative}
.nav-dropdown{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);
  background:#fff;border:1px solid var(--slate-200);border-radius:16px;
  box-shadow:0 24px 64px rgba(8,14,29,.12),0 6px 20px rgba(8,14,29,.06),0 1px 0 rgba(0,0,0,.03);
  padding:8px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s,transform .18s,visibility .18s;z-index:400
}
.nav-dropdown-wrap.open .nav-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
/* keep open while mouse is on dropdown */
.nav-dropdown-wrap:focus-within .nav-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}

/* Slim dropdown */
.nav-dropdown--slim{min-width:220px;left:0;transform:translateX(0) translateY(6px)}
.nav-dropdown-wrap.open .nav-dropdown--slim{transform:translateX(0) translateY(0)}
/* 2 columnas — con 4 grupos y 13 ítems, una sola columna quedaba
   demasiado larga para escanear de un vistazo. */
.nav-dropdown--slim.nav-dropdown--2col{
  display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;min-width:480px;
  align-items:start;
}
.nav-dropdown--slim.nav-dropdown--2col .nav-dropdown__col{display:flex;flex-direction:column}

/* Mega dropdown */
.nav-dropdown--mega{min-width:640px;left:50%;transform:translateX(-50%) translateY(6px)}
.nav-dropdown-wrap.open .nav-dropdown--mega{transform:translateX(-50%) translateY(0)}

/* Dropdown items */
.nav-dropdown__item{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;text-decoration:none;transition:background .14s,color .14s;color:var(--slate-700)}
.nav-dropdown__item:hover{background:var(--slate-50);color:var(--ink)}
.nav-item-icon{font-size:18px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--slate-50);border-radius:8px;flex-shrink:0;font-style:normal}
.nav-item-text{display:flex;flex-direction:column;gap:2px}
.nav-item-text strong{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.2}
.nav-item-text small{font-size:11.5px;color:var(--slate-400);font-weight:400;line-height:1.2}

/* Mega grid */
.nav-dropdown-grid{display:grid;grid-template-columns:1fr 1fr 220px;gap:8px;padding:4px}
.nav-dropdown__col{display:flex;flex-direction:column;gap:2px}
.nav-col-title{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--slate-400);padding:8px 12px 4px;margin-top:4px}

/* Promo card col */
.nav-dropdown__col--promo{padding:4px}
.nav-promo-card{background:linear-gradient(135deg,var(--blue-50,#eff6ff) 0%,rgba(30,64,175,.07) 100%);border:1px solid rgba(37,99,235,.12);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:10px;height:100%}
.nav-promo-badge{display:inline-flex;width:fit-content;background:rgba(37,99,235,.1);color:var(--blue-700,#1d4ed8);border-radius:100px;padding:3px 10px;font-size:11px;font-weight:700;letter-spacing:.3px}
.nav-promo-title{font-size:15px;font-weight:700;color:var(--ink);line-height:1.2}
.nav-promo-desc{font-size:12.5px;color:var(--slate-500);line-height:1.5;flex:1}

/* ── HEADER CTAs ── */
.header-ctas{display:flex;align-items:center;gap:8px;flex-shrink:0}

/* ── HAMBURGER ── */
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;border-radius:8px;transition:background .15s}
.nav-toggle:hover{background:var(--slate-50)}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--slate-700);border-radius:2px;transition:transform .25s,opacity .25s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── MOBILE MENU DRAWER ── */
.mobile-menu{position:fixed;inset:0 0 0 auto;width:min(380px,100vw);background:#fff;z-index:9999;transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.9,.3,1);box-shadow:-20px 0 80px rgba(8,14,29,.14);overflow-y:auto}
.mobile-menu.open{transform:translateX(0)}
.mobile-overlay{position:fixed;inset:0;background:rgba(10,15,50,.35);z-index:9998;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;backdrop-filter:blur(2px)}
.mobile-overlay.open{opacity:1;visibility:visible}
.mobile-menu__inner{padding:24px 20px 40px;display:flex;flex-direction:column;gap:2px}
.mobile-top-link{display:block;padding:13px 14px;font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;border-radius:10px;transition:background .14s}
.mobile-top-link:hover{background:var(--slate-50)}
.mobile-section__toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:13px 14px;background:none;border:none;cursor:pointer;font-family:inherit;font-size:15px;font-weight:600;color:var(--ink);border-radius:10px;transition:background .14s}
.mobile-section__toggle:hover{background:var(--slate-50)}
.mobile-chevron{transition:transform .22s;flex-shrink:0}
.mobile-section.open .mobile-chevron{transform:rotate(180deg)}
.mobile-section__body{display:none;padding:4px 0 8px 14px;flex-direction:column;gap:2px}
.mobile-section.open .mobile-section__body{display:flex}
.mobile-col-title{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--slate-400);padding:6px 14px 2px}
.mobile-link{display:block;padding:10px 14px;font-size:14px;font-weight:500;color:var(--slate-600);text-decoration:none;border-radius:8px;transition:background .14s,color .14s}
.mobile-link:hover{background:var(--slate-50);color:var(--ink)}
.mobile-menu__ctas{display:flex;gap:10px;margin-top:20px;padding-top:20px;border-top:1px solid var(--slate-100)}
.mobile-cta-btn{flex:1;justify-content:center;text-align:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-weight:600;font-size:14px;padding:10px 22px;border-radius:var(--r);transition:all var(--t) var(--ease-spring);border:1.5px solid transparent;letter-spacing:-.1px;white-space:nowrap;cursor:pointer}
.btn-sm{padding:8px 18px;font-size:13px;border-radius:var(--r-sm)}
.btn-lg{padding:14px 28px;font-size:16px;border-radius:14px}
.btn-xl{padding:17px 36px;font-size:17px;border-radius:16px}
.btn-primary{background:linear-gradient(135deg,var(--blue-600),#1a56db);color:#fff;border-color:transparent;box-shadow:0 1px 2px rgba(37,99,235,.2),0 4px 14px rgba(37,99,235,.3);position:relative;overflow:hidden}
.btn-primary::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transition:left .5s}
.btn-primary:hover{background:linear-gradient(135deg,#1a56db,var(--blue-700));transform:translateY(-2px);box-shadow:0 1px 2px rgba(37,99,235,.2),0 10px 28px rgba(37,99,235,.4)}
.btn-primary:hover::after{left:150%}
.btn-outline{background:transparent;color:var(--slate-700);border-color:var(--slate-200)}
.btn-outline:hover{border-color:var(--slate-300);background:var(--slate-50);transform:translateY(-1px)}
.btn-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-dark:hover{background:var(--slate-800);transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.btn-ghost-white{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.2);backdrop-filter:blur(8px)}
.btn-ghost-white:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4)}
.btn-white{background:#fff;color:var(--blue-700);border-color:rgba(255,255,255,.6)}
.btn-white:hover{background:rgba(255,255,255,.92);transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.15)}
.btn-full{width:100%}

/* ─────────────────────────────
   HERO
───────────────────────────── */
.hero{
  background:#060B18;
  min-height:calc(100svh - 44px - 68px);
  padding:88px 0 0;position:relative;overflow:hidden;
}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-bg::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 110% 75% at 50% -15%,rgba(37,99,235,.6) 0%,transparent 52%),
    radial-gradient(ellipse 60% 50% at 92% 38%,rgba(30,64,175,.4) 0%,transparent 48%),
    radial-gradient(ellipse 55% 65% at 4% 82%,rgba(122,168,255,.25) 0%,transparent 52%),
    radial-gradient(ellipse 35% 35% at 70% 90%,rgba(37,99,235,.18) 0%,transparent 50%)}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 18%,rgba(0,0,0,.5) 78%,transparent)}

.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding-bottom:72px}
.hero-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:100px;padding:7px 18px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.78);margin-bottom:28px;backdrop-filter:blur(12px);transition:all var(--t)}
.hero-badge:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.2)}
.hero-badge .badge-icon{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--blue-500),var(--cyan-500));display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:10px}
.hero-title{color:#fff;margin-bottom:22px;font-family:var(--font-display)}
.hero-sub{font-size:17.5px;color:rgba(255,255,255,.6);line-height:1.8;margin-bottom:36px;max-width:510px;font-family:var(--font-body)}
.hero-channels{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:36px}
.hero-ch{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:100px;padding:6px 14px;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.65);transition:all var(--t)}
.hero-ch:hover{background:rgba(255,255,255,.11);color:rgba(255,255,255,.9)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:24px}
.hero-trust{display:flex;flex-wrap:wrap;gap:20px}
.hero-trust span{font-size:13px;color:rgba(255,255,255,.38);display:flex;align-items:center;gap:6px}
.hero-trust span::before{content:'✓';color:var(--green-400);font-weight:700}

/* G2 social proof badge */
.hero-g2{display:flex;align-items:center;gap:10px;margin-top:28px}
.g2-badge-icon{flex-shrink:0;line-height:0}
.g2-stars{display:flex;align-items:center;gap:2px}
.g2-label{font-size:13px;color:rgba(255,255,255,.45);font-weight:500}

/* respond.io style hero title — larger, bolder */
.hero--respondio .hero-title{font-size:clamp(2.4rem,4.5vw,3.8rem);line-height:1.12;letter-spacing:-0.03em;margin-bottom:24px}
.hero--respondio .hero-sub{font-size:17px;color:rgba(255,255,255,.55);max-width:540px;margin-bottom:40px}
.hero--respondio .hero-ctas{gap:12px;margin-bottom:0}
.hero--respondio .btn-ghost-white{background:transparent;border:1.5px solid rgba(255,255,255,.3);color:#fff}
.hero--respondio .btn-ghost-white:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}

/* Dashboard mockup */
.hero-visual{position:relative;padding-right:12px}
/* Antes: nube de luz difuminada (blur 72px) — mismo cliché genérico.
   Ahora: brillo mucho más contenido y con borde definido, no una
   mancha de luz sin forma. */
.hero-visual::before{content:'';position:absolute;left:-40px;top:50%;transform:translateY(-50%);width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.14) 0%,transparent 65%);filter:blur(28px);pointer-events:none;animation:glowPulse 5s ease-in-out infinite}
.dashboard{position:relative;z-index:2;background:rgba(10,14,26,.97);border:1px solid rgba(255,255,255,.1);border-radius:22px;overflow:hidden;box-shadow:0 48px 120px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.1);animation:floatY 7s ease-in-out infinite}
.dashboard-chrome{display:flex;align-items:center;gap:6px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03)}
.chrome-dot{width:11px;height:11px;border-radius:50%}
.chrome-dot:nth-child(1){background:#FF5F57}
.chrome-dot:nth-child(2){background:#FFBD2E}
.chrome-dot:nth-child(3){background:#28C840}
.chrome-url{flex:1;height:22px;background:rgba(255,255,255,.05);border-radius:6px;margin-left:10px;display:flex;align-items:center;padding:0 12px}
.chrome-url span{font-size:11px;color:rgba(255,255,255,.25);font-family:monospace;letter-spacing:.3px}
.chrome-tabs{display:flex;gap:4px;margin-left:8px}
.chrome-tab{height:22px;padding:0 12px;background:rgba(255,255,255,.08);border-radius:5px;font-size:10.5px;color:rgba(255,255,255,.4);display:flex;align-items:center}
.chrome-tab.active{background:rgba(37,99,235,.25);color:rgba(255,255,255,.85)}

/* Dashboard body 3-column layout like Respond.io */
.dash-body{display:grid;grid-template-columns:56px 240px 1fr;height:380px}
.dash-sidebar{border-right:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:4px}
.dash-nav-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.3);transition:all var(--t);font-size:16px;cursor:pointer;position:relative}
.dash-nav-icon.active{background:rgba(37,99,235,.25);color:var(--blue-400)}
.dash-nav-icon .badge{position:absolute;top:4px;right:4px;width:16px;height:16px;border-radius:50%;background:var(--blue-600);color:#fff;font-size:8.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.dash-conv-list{border-right:1px solid rgba(255,255,255,.06);overflow:hidden;display:flex;flex-direction:column}
.dash-conv-header{padding:14px 14px 10px;display:flex;align-items:center;justify-content:space-between}
.dash-conv-title{font-size:12px;font-weight:700;color:rgba(255,255,255,.7);letter-spacing:.5px;text-transform:uppercase}
.conv-filter{display:flex;gap:4px}
.conv-filter-btn{padding:3px 8px;border-radius:5px;font-size:10px;font-weight:600;color:rgba(255,255,255,.4);background:rgba(255,255,255,.06);cursor:pointer;transition:all var(--t)}
.conv-filter-btn.active{background:rgba(37,99,235,.25);color:var(--blue-400)}
.dash-search{margin:0 12px 10px;height:28px;background:rgba(255,255,255,.05);border-radius:7px;display:flex;align-items:center;gap:7px;padding:0 10px}
.dash-search span{font-size:11px;color:rgba(255,255,255,.2)}
.conv-items{overflow-y:auto;flex:1;padding:0 6px}
.conv-item{display:flex;align-items:flex-start;gap:9px;padding:9px 8px;border-radius:10px;cursor:pointer;transition:background var(--t)}
.conv-item:hover,.conv-item.active{background:rgba(255,255,255,.05)}
.conv-item.active{background:rgba(37,99,235,.15);border:1px solid rgba(37,99,235,.2)}
.conv-avatar{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;position:relative}
.conv-avatar::after{content:'';position:absolute;bottom:1px;right:1px;width:8px;height:8px;border-radius:50%;background:var(--green-400);border:1.5px solid rgba(13,18,30,.95)}
.conv-info{flex:1;min-width:0}
.conv-name{font-size:12px;font-weight:600;color:rgba(255,255,255,.8);display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.conv-time{font-size:10px;color:rgba(255,255,255,.3)}
.conv-preview{font-size:11px;color:rgba(255,255,255,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px}
.conv-channel{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:4px;font-size:8px;flex-shrink:0}
.ch-wa{background:#25D366}.ch-ig{background:linear-gradient(135deg,#E1306C,#F77737)}.ch-fb{background:#1877F2}.ch-web{background:var(--blue-600)}.ch-email{background:var(--slate-600)}

/* Chat panel */
.dash-chat{display:flex;flex-direction:column}
.chat-header{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.02)}
.chat-header-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--violet-500),var(--blue-600));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;position:relative}
.online-ring{position:absolute;inset:-2px;border-radius:50%;border:1.5px solid var(--green-400)}
.chat-header-info{flex:1}
.chat-header-name{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.85)}
.chat-header-status{font-size:10.5px;color:var(--green-400);font-weight:500}
.chat-header-actions{display:flex;gap:6px}
.chat-action-btn{width:28px;height:28px;border-radius:7px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:12px;color:rgba(255,255,255,.4);cursor:pointer;transition:all var(--t)}
.chat-action-btn:hover{background:rgba(255,255,255,.12);color:rgba(255,255,255,.8)}
.chat-body{flex:1;overflow-y:auto;padding:14px 14px;display:flex;flex-direction:column;gap:8px}
.ai-banner{background:rgba(30,64,175,.1);border:1px solid rgba(30,64,175,.2);border-radius:8px;padding:7px 12px;display:flex;align-items:center;gap:8px;margin-bottom:4px}
.ai-banner span{font-size:10.5px;color:rgba(30,64,175,.9);font-weight:500}
.chat-date{text-align:center;font-size:10px;color:rgba(255,255,255,.2);padding:6px 0}
.msg{display:flex;align-items:flex-end;gap:7px;max-width:82%}
.msg-in{align-self:flex-start}
.msg-out{align-self:flex-end;flex-direction:row-reverse}
.msg-av{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--cyan-500),var(--blue-600));display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;font-weight:700;flex-shrink:0}
.msg-bubble{padding:8px 12px;border-radius:12px;font-size:11.5px;line-height:1.5;position:relative}
.msg-in .msg-bubble{background:rgba(255,255,255,.07);color:rgba(255,255,255,.8);border-bottom-left-radius:3px}
.msg-out .msg-bubble{background:var(--blue-600);color:#fff;border-bottom-right-radius:3px}
.msg-out.ai-msg .msg-bubble{background:rgba(30,64,175,.3);border:1px solid rgba(30,64,175,.3);color:rgba(255,255,255,.9)}
.msg-time{font-size:9px;color:rgba(255,255,255,.2);margin-bottom:3px;flex-shrink:0}
.msg-typing{display:flex;align-items:center;gap:4px;padding:10px 14px;background:rgba(255,255,255,.07);border-radius:12px;border-bottom-left-radius:3px;align-self:flex-start}
.typing-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35);animation:blink 1.4s ease-in-out infinite}
.typing-dot:nth-child(2){animation-delay:.2s}
.typing-dot:nth-child(3){animation-delay:.4s}
.chat-input-bar{padding:10px 12px;border-top:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:8px}
.chat-input{flex:1;height:32px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:0 12px;font-size:11.5px;color:rgba(255,255,255,.6);display:flex;align-items:center}
.chat-send{width:32px;height:32px;border-radius:8px;background:var(--blue-600);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;cursor:pointer}

/* Floating cards */
.hero-float{position:absolute;background:rgba(10,14,26,.9);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:13px 17px;backdrop-filter:blur(24px) saturate(160%);box-shadow:0 24px 64px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08);z-index:5}
.hero-float-1{top:-20px;left:-40px;animation:floatY 6s ease-in-out infinite}
.hero-float-2{bottom:30px;right:-44px;animation:floatY2 8s ease-in-out infinite}
.float-row{display:flex;align-items:center;gap:10px}
.float-icon{font-size:20px}
.float-text strong{display:block;font-size:11.5px;color:#fff;font-weight:700;margin-bottom:1px}
.float-text span{font-size:10.5px;color:rgba(255,255,255,.45)}
.float-stat{display:flex;align-items:baseline;gap:6px}
.float-num{font-size:22px;font-weight:800;color:#fff;line-height:1}
.float-label{font-size:10.5px;color:rgba(255,255,255,.45)}
.float-badge{display:inline-flex;align-items:center;gap:4px;background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.25);border-radius:100px;padding:3px 10px;font-size:10px;font-weight:700;color:var(--green-400);margin-top:4px}

/* Stats strip */
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.07);position:relative;z-index:2;background:rgba(0,0,0,.2)}
.hero-stat{padding:30px 24px;text-align:center;border-right:1px solid rgba(255,255,255,.07)}
.hero-stat:last-child{border-right:none}
.hero-stat-num{font-family:var(--font-display);font-size:clamp(30px,3vw,46px);font-weight:900;line-height:1;margin-bottom:6px;background:linear-gradient(130deg,#93C5FD 0%,#A5C4FF 60%,#a5b4fc 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-stat-label{font-size:12.5px;color:rgba(255,255,255,.38);font-weight:500}

/* ─────────────────────────────
   TRUSTED MARQUEE
───────────────────────────── */
.trusted--respondio{background:#000;padding:72px 0 80px;border-bottom:1px solid rgba(255,255,255,.07)}
.trusted--respondio .trusted-headline{text-align:center;font-size:20px;font-weight:600;color:#fff;margin-bottom:48px;letter-spacing:-0.01em}
.trusted-logos-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:40px 56px}
.trusted-logo-item img{height:28px;width:auto;filter:grayscale(1) brightness(10);opacity:.55;transition:opacity .3s}
.trusted-logo-item img:hover{opacity:.85}
.trusted-logo-text{font-size:17px;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.45);text-transform:uppercase;transition:color .3s}
.trusted-logo-text:hover{color:rgba(255,255,255,.8)}
.trusted-cta-link{text-align:center;margin-top:40px}
.trusted-cta-link a{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:rgba(255,255,255,.55);border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:2px;transition:all .25s}
.trusted-cta-link a:hover{color:#fff;border-color:rgba(255,255,255,.6)}

.trusted{padding:64px 0;background:#fff;border-bottom:1px solid var(--slate-100);border-top:1px solid var(--slate-50);overflow:hidden}
.trusted-label{text-align:center;font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--slate-400);margin-bottom:28px}
.marquee-track{display:flex;overflow:hidden;user-select:none;mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.marquee-inner{display:flex;gap:56px;align-items:center;animation:marquee 30s linear infinite;flex-shrink:0;padding-right:56px}
.marquee-track:hover .marquee-inner{animation-play-state:paused}
.brand-logo{font-family:var(--font-display);font-size:16px;font-weight:800;color:var(--slate-300);letter-spacing:-1px;white-space:nowrap;transition:color .3s}
.brand-logo:hover{color:var(--slate-500)}
.brand-divider{width:4px;height:4px;border-radius:50%;background:var(--slate-200);flex-shrink:0}

/* ─────────────────────────────
   PRODUCT SHOWCASE — Respond.io style tabbed feature section
───────────────────────────── */
.section{padding:104px 0}
.section-sm{padding:72px 0}
.section-dark{background:var(--slate-950)}
.section-alt{background:var(--slate-50)}
.section-label{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:2.2px;color:var(--blue-600);background:var(--blue-50);border:1px solid var(--blue-100);border-radius:100px;padding:6px 16px;margin-bottom:22px;font-family:var(--font-body)}
.section-label-dark{color:var(--blue-400);background:rgba(37,99,235,.12);border-color:rgba(37,99,235,.2)}
.section-header{text-align:center;max-width:680px;margin:0 auto 72px}
.section-header.left{text-align:left;margin:0 0 56px}
.section-subtitle{font-size:17px;color:var(--slate-500);line-height:1.8;margin-top:18px;max-width:640px}
.section-subtitle-dark{color:rgba(255,255,255,.55)}

/* Platform showcase — tab-driven like Kommo */
.platform-tabs{display:flex;gap:4px;background:var(--slate-100);border-radius:14px;padding:5px;margin-bottom:56px;overflow-x:auto;border:1px solid var(--slate-200)}
.platform-tab{padding:10px 22px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--slate-500);cursor:pointer;transition:all .2s var(--ease-spring);white-space:nowrap;display:flex;align-items:center;gap:8px;font-family:var(--font-body)}
.platform-tab.active{background:#fff;color:var(--ink);box-shadow:0 2px 12px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.06)}
.platform-content{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.platform-left{display:flex;flex-direction:column}
.feat-number{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--blue-600);margin-bottom:14px}
.feat-title{font-size:clamp(26px,2.5vw,36px);font-weight:800;letter-spacing:-1px;line-height:1.15;margin-bottom:20px}
.feat-desc{font-size:16px;color:var(--slate-500);line-height:1.8;margin-bottom:32px}
.feat-checks{display:flex;flex-direction:column;gap:14px;margin-bottom:36px}
.feat-check{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--slate-600)}
.check-icon{width:22px;height:22px;border-radius:6px;background:var(--blue-50);border:1px solid var(--blue-100);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.check-icon svg{color:var(--blue-600)}
.feat-link{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--blue-600);transition:gap var(--t)}
.feat-link:hover{gap:12px}
.platform-right{position:relative}

/* Feature product screenshots */
.product-screen{background:rgba(13,18,30,.97);border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:0 32px 80px rgba(0,0,0,.25)}
.screen-top{height:40px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;padding:0 16px;gap:6px}
.screen-dot{width:10px;height:10px;border-radius:50%}
.screen-dot:nth-child(1){background:#FF5F57}
.screen-dot:nth-child(2){background:#FFBD2E}
.screen-dot:nth-child(3){background:#28C840}
.screen-body{padding:20px}

/* Analytics screen */
.analytics-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.kpi-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:14px 16px}
.kpi-label{font-size:10px;color:rgba(255,255,255,.62);font-weight:600;letter-spacing:.5px;margin-bottom:6px}
.kpi-value{font-size:22px;font-weight:800;color:#fff;line-height:1;margin-bottom:3px}
.kpi-change{font-size:10px;font-weight:600;display:flex;align-items:center;gap:3px}
.kpi-up{color:var(--green-400)}
.kpi-down{color:#F87171}
.mini-chart{height:56px;display:flex;align-items:flex-end;gap:4px;margin-top:8px}
.mini-bar{flex:1;border-radius:4px 4px 0 0;opacity:.7;transition:opacity var(--t)}
.mini-bar:hover{opacity:1}
.chart-area{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:16px;margin-bottom:10px}
.chart-title{font-size:11px;font-weight:700;color:rgba(255,255,255,.5);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.chart-line{height:70px;position:relative;overflow:hidden}
.chart-line svg{width:100%;height:100%}
.agent-list{display:flex;flex-direction:column;gap:8px}
.agent-row{display:flex;align-items:center;gap:10px}
.agent-av{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--violet-500),var(--blue-600));font-size:10px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.agent-name{font-size:11px;color:rgba(255,255,255,.6);flex:1}
.agent-bar{height:6px;border-radius:3px;background:rgba(37,99,235,.6)}
.agent-pct{font-size:10px;color:rgba(255,255,255,.4);flex-shrink:0}

/* AI conversation screen */
.ai-conversation{display:flex;flex-direction:column;gap:8px}
.ai-msg-row{display:flex;align-items:flex-end;gap:8px}
.ai-msg-row.out{flex-direction:row-reverse}
.ai-av{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}
.ai-av.human{background:linear-gradient(135deg,#3B82F6,#7AA8FF)}
.ai-av.bot{background:linear-gradient(135deg,#1E40AF,#3B82F6)}
.ai-bubble{padding:9px 14px;border-radius:14px;font-size:12px;line-height:1.55;max-width:78%}
.ai-msg-row .ai-bubble{background:rgba(255,255,255,.07);color:rgba(255,255,255,.8);border-bottom-left-radius:3px}
.ai-msg-row.out .ai-bubble{background:var(--blue-600);color:#fff;border-bottom-right-radius:3px}
.ai-msg-row.ai .ai-bubble{background:rgba(30,64,175,.2);border:1px solid rgba(30,64,175,.25);color:rgba(255,255,255,.85);border-bottom-left-radius:3px}
.ai-tag{display:inline-flex;align-items:center;gap:4px;background:rgba(30,64,175,.15);border:1px solid rgba(30,64,175,.2);border-radius:100px;padding:3px 10px;font-size:10px;font-weight:600;color:rgba(30,64,175,.9);margin-bottom:8px;align-self:flex-start}
.sentiment-bar{display:flex;align-items:center;gap:8px;margin-top:14px;padding:10px 14px;background:rgba(255,255,255,.04);border-radius:10px;border:1px solid rgba(255,255,255,.06)}
.sentiment-label{font-size:10.5px;color:rgba(255,255,255,.62);flex-shrink:0}
.sentiment-track{flex:1;height:4px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.sentiment-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--green-500),var(--cyan-500));width:87%}
.sentiment-pct{font-size:10.5px;font-weight:700;color:var(--green-400);flex-shrink:0}

/* Automation screen */
.flow-nodes{display:flex;flex-direction:column;gap:0;padding:4px}
.flow-node{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:10px 14px;display:flex;align-items:center;gap:10px;transition:all var(--t)}
.flow-node:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.15)}
.flow-node-icon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.flow-node-text strong{display:block;font-size:11.5px;font-weight:700;color:rgba(255,255,255,.8);margin-bottom:1px}
.flow-node-text span{font-size:10px;color:rgba(255,255,255,.62)}
.flow-connector{width:2px;height:16px;background:rgba(255,255,255,.12);margin:0 auto;position:relative}
.flow-connector::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid rgba(255,255,255,.2)}
.flow-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:100px;font-size:9.5px;font-weight:700;margin-top:2px}
.badge-trigger{background:rgba(251,191,36,.15);color:var(--amber-400)}
.badge-condition{background:rgba(122,168,255,.15);color:var(--cyan-400)}
.badge-action{background:rgba(16,185,129,.15);color:var(--green-400)}
.badge-ai{background:rgba(30,64,175,.15);color:var(--violet-400)}

/* ─────────────────────────────
   OMNICHANNEL SECTION — Kommo style
───────────────────────────── */
/* ═══════════════════════════════════════════
   OMNICANAL — AI PRO redesign
   ═══════════════════════════════════════════ */

/* Section background override */
#canales {
  background: linear-gradient(160deg, #03071e 0%, #080C1A 40%, #07153d 70%, #080C1A 100%) !important;
  position: relative;
  overflow: hidden;
}
#canales::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 40%, rgba(37,99,235,.18) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 10% 70%, rgba(122,168,255,.12) 0%, transparent 60%);
  pointer-events: none;
}
/* Animated grid lines */
#canales::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(37,99,235,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.06) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}

/* Left column text overrides for dark bg */
#canales .section-label {
  background: linear-gradient(135deg, rgba(37,99,235,.25), rgba(122,168,255,.2));
  border: 1px solid rgba(122,168,255,.35);
  color: #A5C4FF;
  backdrop-filter: blur(8px);
}
#canales h2.heading-xl {
  color: #fff;
  background: linear-gradient(135deg, #fff 0%, #bae6fd 50%, #A5C4FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
#canales .text-muted {
  color: rgba(186,230,253,.7) !important;
}
#canales .feat-check .check-icon {
  background: linear-gradient(135deg, #1d4ed8, #3B6FDC);
  border-color: rgba(122,168,255,.4);
  box-shadow: 0 0 12px rgba(122,168,255,.3);
}
#canales .feat-check span {
  color: rgba(186,230,253,.9);
}
#canales .feat-check span strong {
  color: #fff;
}
#canales .btn-primary {
  background: linear-gradient(135deg, #1d4ed8 0%, #3B6FDC 100%);
  box-shadow: 0 0 24px rgba(37,99,235,.45), 0 4px 16px rgba(0,0,0,.4);
  border: 1px solid rgba(122,168,255,.3);
}
#canales .btn-primary:hover {
  box-shadow: 0 0 36px rgba(37,99,235,.65), 0 6px 24px rgba(0,0,0,.5);
  transform: translateY(-2px);
}

/* Layout */
.channels-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.channels-visual { position: relative; }
.channels-hub {
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hub-center {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-600), var(--cyan-500));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  position: relative;
  z-index: 5;
  box-shadow: 0 0 0 16px rgba(37,99,235,.08), 0 0 0 32px rgba(37,99,235,.04);
}
.hub-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(37,99,235,.12);
}
.hub-ring-1 { inset: calc(50% - 90px); }
.hub-ring-2 { inset: calc(50% - 145px); }
.hub-ring-3 { inset: calc(50% - 200px); }
.channel-node {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border: 2px solid rgba(255,255,255,.2);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  transition: transform var(--t) var(--ease-spring);
}
.channel-node:hover { transform: scale(1.15); }
.channel-line {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 1px;
  background: linear-gradient(90deg, var(--blue-600), transparent);
  transform-origin: left center;
  opacity: .3;
  pointer-events: none;
}

/* ── Channel cards — AI glassmorphism ── */
.channels-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 28px;
}
.channel-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 18px 10px 14px;
  text-align: center;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all .28s cubic-bezier(.34,1.56,.64,1);
  position: relative;
  overflow: hidden;
}
.channel-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(37,99,235,.12) 0%, rgba(122,168,255,.06) 100%);
  opacity: 0;
  transition: opacity .28s;
  border-radius: inherit;
}
.channel-card:hover {
  border-color: rgba(122,168,255,.4);
  box-shadow: 0 0 20px rgba(122,168,255,.2), 0 8px 24px rgba(0,0,0,.4);
  transform: translateY(-5px) scale(1.03);
}
.channel-card:hover::before { opacity: 1; }
.channel-card-icon {
  font-size: 26px;
  margin-bottom: 8px;
  display: block;
  filter: drop-shadow(0 0 8px rgba(122,168,255,.5));
}
.channel-card-name {
  font-size: 11px;
  font-weight: 700;
  color: rgba(186,230,253,.9);
  margin-bottom: 5px;
  letter-spacing: .03em;
}
.channel-card-status {
  font-size: 9.5px;
  color: #34d399;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.channel-card-status::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 6px #34d399;
  animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse {
  0%,100% { opacity: 1; box-shadow: 0 0 6px #34d399; }
  50%      { opacity: .5; box-shadow: 0 0 12px #34d399; }
}
.channel-card--api {
  border-style: solid;
  border-color: rgba(37,99,235,.3);
  background: rgba(37,99,235,.08);
}
.channel-card--api .channel-card-status { color: #60a5fa; }
.channel-card--api .channel-card-status::before {
  background: #60a5fa;
  box-shadow: 0 0 6px #60a5fa;
  animation: none;
}

/* ─────────────────────────────
   ROI SECTION
───────────────────────────── */
.roi-hero{text-align:center;margin-bottom:72px}
.roi-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:64px}
.roi-card{background:#fff;border:1.5px solid var(--slate-100);border-radius:var(--r-xl);padding:36px 28px;text-align:center;position:relative;overflow:hidden;transition:all .3s var(--ease-spring);box-shadow:var(--shadow-sm)}
.roi-card:hover{transform:translateY(-8px);box-shadow:0 24px 64px rgba(37,99,235,.12);border-color:var(--blue-200)}
.roi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue-600),var(--cyan-500))}
.roi-card-num{font-family:var(--font-display);font-size:54px;font-weight:900;line-height:1;letter-spacing:-2.5px;margin-bottom:10px;background:linear-gradient(125deg,var(--blue-600),var(--cyan-500));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.roi-card-label{font-size:13.5px;color:var(--slate-500);font-weight:500}
.roi-compare{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.compare-card{border-radius:var(--r-xl);padding:36px}
.compare-before{background:var(--slate-50);border:1.5px solid var(--slate-200);box-shadow:var(--shadow-sm)}
.compare-after{background:linear-gradient(135deg,rgba(37,99,235,.06),rgba(122,168,255,.04));border:1.5px solid rgba(37,99,235,.2);box-shadow:0 4px 20px rgba(37,99,235,.07)}
.compare-title{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:24px;display:flex;align-items:center;gap:8px}
.compare-before .compare-title{color:var(--slate-400)}
.compare-after .compare-title{color:var(--blue-600)}
.compare-item{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--slate-100)}
.compare-item:last-child{border-bottom:none}
.compare-metric{font-size:13px;color:var(--slate-600);font-weight:500}
.compare-value{font-family:var(--font-display);font-size:16px;font-weight:800;color:var(--slate-800)}
.compare-after .compare-value{color:var(--blue-700)}
.compare-after .compare-item{border-color:rgba(37,99,235,.08)}

/* ─────────────────────────────

/* ═══════════════════════════════════════════════════════════
   FEATURES — Pro Bento Grid (Respond.io style)
═══════════════════════════════════════════════════════════ */

.features-section{background:#f8fafc;padding:96px 0}
.features-header{text-align:center;max-width:600px;margin:0 auto 56px}
.features-eyebrow{display:inline-flex;align-items:center;gap:7px;background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;border-radius:100px;padding:5px 16px;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;margin-bottom:18px}
.features-title{font-family:var(--font-display);font-size:clamp(30px,3.5vw,46px);font-weight:900;letter-spacing:-2px;color:#080E1D;line-height:1.08;margin-bottom:14px}
.features-subtitle{font-size:16px;color:#64748b;line-height:1.65}

.fbento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:auto;gap:14px}

/* Spanning rules */
.fbento__card:nth-child(1){grid-column:span 4}
.fbento__card:nth-child(2){grid-column:span 2}
.fbento__card:nth-child(3){grid-column:span 2}
.fbento__card:nth-child(4){grid-column:span 4}
.fbento__card:nth-child(5){grid-column:span 3}
.fbento__card:nth-child(6){grid-column:span 3}

/* Base card */
.fbento__card{
  position:relative;overflow:hidden;
  border-radius:20px;padding:28px 26px 24px;
  display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease;
}
.fbento__card:hover{transform:translateY(-4px)}

/* Top row */
.fbc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:20px}
.fbc-icon{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;border:1.5px solid}
.fbc-badge{font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;padding:4px 10px;border-radius:100px;white-space:nowrap;margin-top:4px}
.fbc-title{font-family:var(--font-display);font-size:20px;font-weight:800;letter-spacing:-1px;line-height:1.2;margin-bottom:9px}
.fbc-desc{font-size:13.5px;line-height:1.7;margin-bottom:22px;flex:1}
.fbc-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto}
.fbc-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;border-radius:100px;padding:5px 12px;border:1px solid;transition:all .15s}
.fbc-chk{width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fbc-chk svg{display:block}
.fbc-orb{position:absolute;width:300px;height:300px;border-radius:50%;right:-80px;bottom:-80px;pointer-events:none;filter:blur(80px);opacity:.35;transition:opacity .3s}
.fbento__card:hover .fbc-orb{opacity:.55}

/* ── BLUE */
.fbc--blue{background:linear-gradient(150deg,#ffffff,#eff6ff);border:1.5px solid #bfdbfe}
.fbc--blue:hover{box-shadow:0 20px 48px rgba(37,99,235,.11)}
.fbc--blue .fbc-icon{background:#eff6ff;border-color:#bfdbfe}
.fbc--blue .fbc-badge{background:#dbeafe;color:#1d4ed8;border:1px solid #bfdbfe}
.fbc--blue .fbc-title{color:#0C1122}
.fbc--blue .fbc-desc{color:#475569}
.fbc--blue .fbc-tag{background:#f1f5f9;border-color:#e2e8f0;color:#475569}
.fbc--blue .fbc-tag:hover{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8}
.fbc--blue .fbc-chk{background:#dbeafe}
.fbc--blue .fbc-chk svg path{stroke:#2563eb}
.fbc--blue .fbc-orb{background:radial-gradient(circle,#93c5fd,transparent)}

/* ── VIOLET */
.fbc--violet{background:linear-gradient(150deg,#ffffff,#f5f3ff);border:1.5px solid #ddd6fe}
.fbc--violet:hover{box-shadow:0 20px 48px rgba(30,64,175,.11)}
.fbc--violet .fbc-icon{background:#f5f3ff;border-color:#ddd6fe}
.fbc--violet .fbc-badge{background:#ede9fe;color:#7AA8FF;border:1px solid #ddd6fe}
.fbc--violet .fbc-title{color:#0C1122}
.fbc--violet .fbc-desc{color:#475569}
.fbc--violet .fbc-tag{background:#f1f5f9;border-color:#e2e8f0;color:#475569}
.fbc--violet .fbc-tag:hover{background:#f5f3ff;border-color:#c4b5fd;color:#7AA8FF}
.fbc--violet .fbc-chk{background:#ede9fe}
.fbc--violet .fbc-chk svg path{stroke:#7AA8FF}
.fbc--violet .fbc-orb{background:radial-gradient(circle,#c4b5fd,transparent)}

/* ── CYAN */
.fbc--cyan{background:linear-gradient(150deg,#ffffff,#C8DAF0);border:1.5px solid #C8DAF0}
.fbc--cyan:hover{box-shadow:0 20px 48px rgba(122,168,255,.11)}
.fbc--cyan .fbc-icon{background:#C8DAF0;border-color:#C8DAF0}
.fbc--cyan .fbc-badge{background:#C8DAF0;color:#254BBA;border:1px solid #C8DAF0}
.fbc--cyan .fbc-title{color:#0C1122}
.fbc--cyan .fbc-desc{color:#475569}
.fbc--cyan .fbc-tag{background:#f1f5f9;border-color:#e2e8f0;color:#475569}
.fbc--cyan .fbc-tag:hover{background:#C8DAF0;border-color:#A5C4FF;color:#254BBA}
.fbc--cyan .fbc-chk{background:#C8DAF0}
.fbc--cyan .fbc-chk svg path{stroke:#3B6FDC}
.fbc--cyan .fbc-orb{background:radial-gradient(circle,#C8DAF0,transparent)}

/* ── GREEN */
.fbc--green{background:linear-gradient(150deg,#ffffff,#f0fdf4);border:1.5px solid #bbf7d0}
.fbc--green:hover{box-shadow:0 20px 48px rgba(16,185,129,.11)}
.fbc--green .fbc-icon{background:#f0fdf4;border-color:#bbf7d0}
.fbc--green .fbc-badge{background:#dcfce7;color:#15803d;border:1px solid #bbf7d0}
.fbc--green .fbc-title{color:#0C1122}
.fbc--green .fbc-desc{color:#475569}
.fbc--green .fbc-tag{background:#f1f5f9;border-color:#e2e8f0;color:#475569}
.fbc--green .fbc-tag:hover{background:#f0fdf4;border-color:#86efac;color:#15803d}
.fbc--green .fbc-chk{background:#dcfce7}
.fbc--green .fbc-chk svg path{stroke:#16a34a}
.fbc--green .fbc-orb{background:radial-gradient(circle,#86efac,transparent)}

/* ── ORANGE */
.fbc--orange{background:linear-gradient(150deg,#ffffff,#fff7ed);border:1.5px solid #fed7aa}
.fbc--orange:hover{box-shadow:0 20px 48px rgba(249,115,22,.11)}
.fbc--orange .fbc-icon{background:#fff7ed;border-color:#fed7aa}
.fbc--orange .fbc-badge{background:#ffedd5;color:#c2410c;border:1px solid #fed7aa}
.fbc--orange .fbc-title{color:#0C1122}
.fbc--orange .fbc-desc{color:#475569}
.fbc--orange .fbc-tag{background:#f1f5f9;border-color:#e2e8f0;color:#475569}
.fbc--orange .fbc-tag:hover{background:#fff7ed;border-color:#fdba74;color:#c2410c}
.fbc--orange .fbc-chk{background:#ffedd5}
.fbc--orange .fbc-chk svg path{stroke:#ea580c}
.fbc--orange .fbc-orb{background:radial-gradient(circle,#fdba74,transparent)}

/* ── DARK */
.fbc--dark{background:linear-gradient(150deg,#0f172a,#1e293b);border:1.5px solid rgba(255,255,255,.1)}
.fbc--dark:hover{box-shadow:0 20px 48px rgba(0,0,0,.35);border-color:rgba(255,255,255,.2)}
.fbc--dark .fbc-icon{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}
.fbc--dark .fbc-badge{background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.14)}
.fbc--dark .fbc-title{color:#fff}
.fbc--dark .fbc-desc{color:rgba(255,255,255,.5)}
.fbc--dark .fbc-tag{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.6)}
.fbc--dark .fbc-tag:hover{background:rgba(255,255,255,.12);color:rgba(255,255,255,.9)}
.fbc--dark .fbc-chk{background:rgba(99,102,241,.3)}
.fbc--dark .fbc-chk svg path{stroke:#a5b4fc}
.fbc--dark .fbc-orb{background:radial-gradient(circle,rgba(99,102,241,.8),transparent);opacity:.4}

/* ── RESPONSIVE */
@media(max-width:1100px){
  .fbento{grid-template-columns:repeat(2,1fr)}
  .fbento__card:nth-child(n){grid-column:span 1}
  .fbento__card:nth-child(1),.fbento__card:nth-child(4){grid-column:span 2}
  /* Hamburger: ocultar nav desktop, mostrar toggle */
  .main-nav,.header-ctas{display:none!important}
  .nav-toggle{display:flex!important}
  /* Dropdowns nunca visibles en mobile/tablet */
  .nav-dropdown,.nav-dropdown--mega,.nav-dropdown--slim{display:none!important;pointer-events:none!important}
}
@media(max-width:640px){
  .fbento{grid-template-columns:1fr;gap:12px}
  .fbento__card:nth-child(n){grid-column:span 1}
  .fbc-title{font-size:18px}
  .features-section{padding:64px 0}
}

/* ═══════════════════════════════════════════════════════════
   INTEGRATIONS — Grid + featured
───────────────────────────── */
.integrations-outer{text-align:center}
.integrations-featured{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:32px}
.int-featured-card{background:#fff;border:1.5px solid var(--slate-200);border-radius:var(--r-xl);padding:28px;text-align:center;transition:all var(--t) var(--ease-spring)}
.int-featured-card:hover{transform:translateY(-6px);box-shadow:0 20px 52px rgba(37,99,235,.1);border-color:var(--blue-200)}
.int-icon-wrap{width:64px;height:64px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 16px;border:1px solid var(--slate-100)}
.int-name{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--ink);margin-bottom:6px}
.int-desc{font-size:13px;color:var(--slate-500);line-height:1.5}
.integrations-more{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:36px}
.int-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--slate-200);border-radius:100px;padding:9px 18px;font-size:13px;font-weight:600;color:var(--slate-600);transition:all .2s var(--ease-spring);box-shadow:var(--shadow-sm)}
.int-chip:hover{border-color:var(--blue-300);color:var(--blue-700);background:var(--blue-50);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.int-chip span{font-size:16px}
.int-api-box{background:linear-gradient(135deg,var(--slate-900),var(--slate-800));border-radius:var(--r-xl);padding:36px;display:flex;align-items:center;justify-content:space-between;gap:40px;text-align:left;max-width:760px;margin:0 auto}
.int-api-text h3{font-size:22px;font-weight:700;color:#fff;margin-bottom:10px}
.int-api-text p{font-size:14.5px;color:rgba(255,255,255,.55);line-height:1.65}
.int-api-code{font-family:'Courier New',monospace;font-size:11.5px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:14px 18px;color:var(--green-400);white-space:nowrap;flex-shrink:0}

/* ─────────────────────────────
   TESTIMONIALS
───────────────────────────── */
.testimonials-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.testi-card{background:#fff;border:1.5px solid var(--slate-200);border-radius:var(--r-xl);padding:28px;position:relative;transition:all var(--t) var(--ease-spring)}
.testi-card:hover{transform:translateY(-5px);box-shadow:0 24px 64px rgba(0,0,0,.09),0 8px 20px rgba(37,99,235,.06);border-color:var(--blue-200)}
.testi-card.featured{background:linear-gradient(145deg,#1a3a8f,#1e3a8a,#1e2f6e);border-color:rgba(96,165,250,.2);box-shadow:0 20px 60px rgba(37,99,235,.25)}
.testi-logo{font-size:11px;font-weight:800;letter-spacing:-0.5px;color:var(--slate-300);margin-bottom:20px;display:flex;align-items:center;gap:8px}
.testi-logo-dot{width:24px;height:24px;border-radius:7px;background:var(--slate-100);display:flex;align-items:center;justify-content:center;font-size:12px}
.testi-card.featured .testi-logo{color:rgba(255,255,255,.6)}
.testi-card.featured .testi-logo-dot{background:rgba(255,255,255,.1)}
.testi-stars{display:flex;gap:2px;margin-bottom:18px}
.testi-stars span{font-size:14px}
.testi-quote{font-size:15px;color:var(--slate-700);line-height:1.75;margin-bottom:24px;font-style:italic}
.testi-card.featured .testi-quote{color:rgba(255,255,255,.8)}
.testi-metric{background:var(--blue-50);border:1px solid var(--blue-100);border-radius:10px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.testi-card.featured .testi-metric{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}
.testi-metric-num{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--blue-700)}
.testi-card.featured .testi-metric-num{color:#93C5FD}
.testi-metric-label{font-size:12px;color:var(--slate-500);font-weight:500}
.testi-card.featured .testi-metric-label{color:rgba(255,255,255,.45)}
.testi-author{display:flex;align-items:center;gap:10px}
.testi-av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;flex-shrink:0}
.testi-author-info strong{font-size:13.5px;font-weight:700;color:var(--ink);display:block}
.testi-author-info span{font-size:12px;color:var(--slate-500)}
.testi-card.featured .testi-author-info strong{color:#fff}
.testi-card.featured .testi-author-info span{color:rgba(255,255,255,.45)}

/* ─────────────────────────────
   PRICING
───────────────────────────── */
.pricing-header{text-align:center;margin-bottom:56px}
.pricing-toggle{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:24px}
.toggle-switch{width:48px;height:26px;background:var(--blue-600);border-radius:13px;cursor:pointer;position:relative;transition:background var(--t)}
.toggle-knob{width:20px;height:20px;background:#fff;border-radius:50%;position:absolute;top:3px;left:3px;transition:left var(--t) var(--ease-spring);box-shadow:0 2px 6px rgba(0,0,0,.15)}
.toggle-switch.annual .toggle-knob{left:25px}
.toggle-text{font-size:14px;font-weight:600;color:var(--slate-500)}
.toggle-text.active{color:var(--ink)}
.pricing-save{background:var(--green-500);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:100px;margin-left:6px}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.plan-card{background:#fff;border:1.5px solid var(--slate-200);border-radius:var(--r-2xl);padding:36px;position:relative;overflow:hidden;transition:all var(--t) var(--ease-spring)}
.plan-card:hover{box-shadow:0 24px 64px rgba(0,0,0,.1);transform:translateY(-3px)}
.plan-card.popular{background:linear-gradient(145deg,#0f2878 0%,#1d4ed8 55%,#2563eb 100%);border-color:rgba(96,165,250,.25);color:#fff;box-shadow:0 24px 72px rgba(37,99,235,.5),0 0 0 1px rgba(96,165,250,.15);transform:scale(1.03)}
.plan-card.popular:hover{transform:scale(1.03) translateY(-4px);box-shadow:0 32px 80px rgba(37,99,235,.5)}
.plan-badge{display:inline-block;background:var(--amber-400);color:#fff;font-size:11.5px;font-weight:700;padding:5px 16px;border-radius:100px;margin-bottom:20px;letter-spacing:.3px}
.plan-card.popular .plan-badge{background:rgba(255,255,255,.2)}
.plan-name{font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:-1px;margin-bottom:6px}
.plan-card.popular .plan-name{color:#fff}
.plan-desc{font-size:13.5px;color:var(--slate-500);margin-bottom:24px;line-height:1.55}
.plan-card.popular .plan-desc{color:rgba(255,255,255,.6)}
.plan-price-wrap{margin-bottom:32px}
.plan-price{font-family:var(--font-display);font-size:54px;font-weight:900;line-height:1;letter-spacing:-3px;color:var(--ink)}
.plan-card.popular .plan-price{color:#fff}
.plan-period{font-size:15px;font-weight:500;color:var(--slate-400)}
.plan-card.popular .plan-period{color:rgba(255,255,255,.5)}
.plan-price-annual{display:none}
.plan-features{display:flex;flex-direction:column;gap:13px;margin-bottom:32px}
.plan-feat{display:flex;align-items:flex-start;gap:11px;font-size:14px;color:var(--slate-600);line-height:1.4}
.plan-card.popular .plan-feat{color:rgba(255,255,255,.8)}
.plan-feat-icon{width:18px;height:18px;border-radius:5px;background:rgba(16,185,129,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.plan-feat-icon svg{color:var(--green-500)}
.plan-card.popular .plan-feat-icon{background:rgba(255,255,255,.12)}
.plan-card.popular .plan-feat-icon svg{color:rgba(255,255,255,.7)}
.plan-divider{border:none;border-top:1px solid var(--slate-100);margin:24px 0}
.plan-card.popular .plan-divider{border-color:rgba(255,255,255,.1)}
.plan-extras{font-size:12px;color:var(--slate-400);margin-bottom:24px}
.plan-card.popular .plan-extras{color:rgba(255,255,255,.4)}
.guarantee-strip{background:linear-gradient(135deg,rgba(16,185,129,.06),rgba(122,168,255,.04));border:1.5px solid rgba(16,185,129,.18);border-radius:var(--r-xl);padding:30px 40px;display:flex;align-items:center;gap:24px;max-width:700px;margin:44px auto 0;box-shadow:0 4px 20px rgba(16,185,129,.06)}
.guarantee-icon{font-size:44px;flex-shrink:0}
.guarantee-text h4{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:5px}
.guarantee-text p{font-size:14px;color:var(--slate-500);line-height:1.6}

/* ─────────────────────────────
   PRODUCTO v2 — tabs mejorados
───────────────────────────── */
.prod-section{background:#fff}
.prod-tabs{background:var(--slate-100);border-radius:16px;padding:5px;display:flex;gap:4px;overflow-x:auto;border:1px solid var(--slate-200);margin-bottom:56px}
.prod-tab{flex:1;display:flex;align-items:center;gap:10px;padding:12px 18px;border:none;border-radius:12px;background:transparent;cursor:pointer;font-family:var(--font-body);transition:all .22s var(--ease-spring);white-space:nowrap;min-width:0}
.prod-tab:hover:not(.active){background:rgba(255,255,255,.6)}
.prod-tab.active{background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.1),0 1px 4px rgba(0,0,0,.07)}
.prod-tab-icon{font-size:20px;flex-shrink:0}
.prod-tab-body{display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-width:0}
.prod-tab-label{font-size:13.5px;font-weight:700;color:var(--slate-400);line-height:1.2;transition:color .22s}
.prod-tab-sub{font-size:11px;color:var(--slate-400);opacity:0;transition:opacity .22s;white-space:nowrap}
.prod-tab.active .prod-tab-label{color:var(--ink)}
.prod-tab.active .prod-tab-sub{opacity:1;color:var(--blue-600)}
.prod-panel{animation:fadeUp .38s var(--ease-out) both}
.prod-screen-glow{box-shadow:0 32px 80px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.06) inset,0 0 60px rgba(37,99,235,.12)!important}
.screen-title{font-size:11px;color:rgba(255,255,255,.62);margin-left:10px}
.screen-sublabel{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:14px}
.flow-node-badge{margin-left:auto}
.prod-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
.prod-agent-av{position:relative}
.prod-agent-dot{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid rgba(13,18,30,.97)}
.prod-agent-meta{flex:1}
.prod-agent-info{font-size:9.5px;color:rgba(255,255,255,.6)}
.prod-agent-status{font-size:9px;font-weight:700;flex-shrink:0}
/* ── Omni Hub — AI Pro ── */
.omni-hub {
  position: relative;
  width: 360px;
  height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0 auto;
}
.omni-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(122,168,255,.15);
}
.omni-ring-1 { inset: 0; animation: pulseRing 4s ease-out infinite; }
.omni-ring-2 { inset: 40px; animation: pulseRing 4s ease-out .7s infinite; }
.omni-ring-3 { inset: 80px; border-color: rgba(37,99,235,.2); }
.omni-center {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1d4ed8, #3B6FDC);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  z-index: 5;
  position: relative;
  box-shadow:
    0 0 0 14px rgba(37,99,235,.1),
    0 0 0 28px rgba(37,99,235,.05),
    0 0 60px rgba(122,168,255,.6),
    0 0 100px rgba(37,99,235,.3);
  animation: hubPulse 3s ease-in-out infinite;
}
@keyframes hubPulse {
  0%,100% { box-shadow: 0 0 0 14px rgba(37,99,235,.1), 0 0 0 28px rgba(37,99,235,.05), 0 0 60px rgba(122,168,255,.6), 0 0 100px rgba(37,99,235,.3); }
  50%      { box-shadow: 0 0 0 18px rgba(37,99,235,.15), 0 0 0 36px rgba(37,99,235,.07), 0 0 80px rgba(122,168,255,.8), 0 0 130px rgba(37,99,235,.4); }
}
.omni-orb {
  position: absolute;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 2px solid rgba(255,255,255,.15);
  box-shadow: 0 4px 20px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.15);
  animation: floatY 6s ease-in-out infinite;
  z-index: 4;
  transition: transform .3s var(--ease-spring), box-shadow .3s;
  backdrop-filter: blur(4px);
}
.omni-orb:hover {
  transform: scale(1.22) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 20px rgba(122,168,255,.4) !important;
  z-index: 10;
}

/* ─────────────────────────────
   USE CASES v2 — #casos-uso
───────────────────────────── */
.uc-section{background:linear-gradient(160deg,var(--slate-50) 0%,#f0f7ff 50%,var(--slate-50) 100%)}

/* Tabs */
.uc2-tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:56px}
.uc2-tab{display:flex;align-items:center;gap:8px;padding:12px 22px;border-radius:100px;font-size:14px;font-weight:600;color:var(--slate-500);background:#fff;border:1.5px solid var(--slate-200);cursor:pointer;transition:all .22s;font-family:var(--font-body);position:relative;overflow:hidden}
.uc2-tab::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--blue-600),#1a56db);opacity:0;transition:opacity .22s}
.uc2-tab.active{color:#fff;border-color:var(--blue-600);box-shadow:0 4px 20px rgba(37,99,235,.35)}
.uc2-tab.active::before{opacity:1}
.uc2-tab:hover:not(.active){color:var(--blue-600);border-color:var(--blue-200);background:var(--blue-50)}
.uc2-tab-icon,.uc2-tab-label{position:relative;z-index:1}
.uc2-tab-icon{font-size:16px}

/* Panel */
.uc2-panel{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.uc2-panel[hidden]{display:none}
@keyframes ucPanelIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* Left */
.uc2-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;background:#fff;border:1.5px solid var(--blue-100);border-radius:100px;box-shadow:0 2px 10px rgba(37,99,235,.08)}
.uc2-badge-icon{font-size:22px;line-height:1}
.uc2-badge-label{font-size:13px;font-weight:700;color:var(--blue-700)}

/* Checklist */
.uc2-checklist{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:32px}
.uc2-check-item{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500;color:var(--slate-700)}
.uc2-check-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px}
.uc2-check-icon svg circle{transition:fill .2s}
.uc2-check-item:hover .uc2-check-icon svg circle{fill:var(--blue-700)}

/* Actions */
.uc2-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* Right column */
.uc2-right{display:flex;flex-direction:column;gap:20px}

/* Metric card */
.uc2-metric-card{background:linear-gradient(135deg,var(--blue-600) 0%,var(--cyan-500) 100%);border-radius:var(--r-xl);padding:32px;color:#fff;text-align:center;box-shadow:0 12px 40px rgba(37,99,235,.3);position:relative;overflow:hidden}
.uc2-metric-card::before{content:'';position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.08)}
.uc2-metric-card::after{content:'';position:absolute;bottom:-30px;left:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.06)}
.uc2-metric-num{font-family:var(--font-display);font-size:56px;font-weight:900;line-height:1;letter-spacing:-2px;position:relative;z-index:1}
.uc2-metric-label{font-size:16px;font-weight:600;margin-top:8px;opacity:.9;position:relative;z-index:1}
.uc2-metric-sub{font-size:12px;margin-top:4px;color:#a8bdd0;font-weight:500;text-transform:uppercase;letter-spacing:1.5px;position:relative;z-index:1}

/* Feature cards grid */
.uc2-feats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.uc2-feat-card{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--slate-200);border-radius:var(--r);padding:14px 16px;transition:all .22s var(--ease-spring);animation:ucPanelIn .4s var(--ease-out) both}
.uc2-feat-card:hover{border-color:var(--blue-300);box-shadow:0 4px 18px rgba(37,99,235,.1);transform:translateY(-2px)}
.uc2-feat-check{flex-shrink:0;display:flex}
.uc2-feat-text{font-size:13px;font-weight:600;color:var(--slate-700);line-height:1.4}

/* ─────────────────────────────
   STEPS HOW IT WORKS
───────────────────────────── */
.steps-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.steps-timeline::before{content:'';position:absolute;top:42px;left:calc(12.5% + 28px);right:calc(12.5% + 28px);height:2px;background:linear-gradient(90deg,var(--blue-100),var(--blue-200),var(--blue-100));z-index:0}
.step-item{padding:0 20px 40px;text-align:center;position:relative;z-index:1}
.step-num{font-family:var(--font-display);width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,var(--blue-600),#1a56db);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;font-size:20px;font-weight:900;color:#fff;box-shadow:0 6px 24px rgba(37,99,235,.45),0 0 0 7px #fff,0 0 0 8px var(--blue-100)}
.step-emoji{font-size:28px;margin-bottom:14px}
.step-title{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--ink);margin-bottom:10px;letter-spacing:-.5px}
.step-desc{font-size:14px;color:var(--slate-500);line-height:1.65}

/* ─────────────────────────────
   FAQ
───────────────────────────── */
/* ═══════════════════════════════════════════
   FAQ — AI PRO dark theme
   ═══════════════════════════════════════════ */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:1100px;margin:0 auto}

/* Section dark background */
#faq {
  background: linear-gradient(160deg, #03071e 0%, #080C1A 45%, #07153d 75%, #080C1A 100%) !important;
  position: relative;
  overflow: hidden;
}
#faq::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 50% at 20% 30%, rgba(122,168,255,.10) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 85% 70%, rgba(37,99,235,.12) 0%, transparent 60%);
  pointer-events: none;
}
#faq::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(37,99,235,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.05) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}

/* Header overrides */
#faq .section-label {
  background: linear-gradient(135deg, rgba(37,99,235,.25), rgba(122,168,255,.2));
  border: 1px solid rgba(122,168,255,.35);
  color: #A5C4FF;
  backdrop-filter: blur(8px);
}
#faq h2.heading-xl {
  color: #fff;
  background: linear-gradient(135deg, #fff 0%, #bae6fd 50%, #A5C4FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
#faq .section-subtitle {
  color: rgba(186,230,253,.65) !important;
}

/* FAQ cards — glassmorphism dark */
#faq .faq-item {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
}
#faq .faq-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(37,99,235,.08) 0%, rgba(122,168,255,.04) 100%);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
#faq .faq-item:hover { border-color: rgba(122,168,255,.3); box-shadow: 0 0 20px rgba(122,168,255,.12), 0 6px 24px rgba(0,0,0,.3); }
#faq .faq-item:hover::before { opacity: 1; }
#faq .faq-item.open { border-color: rgba(122,168,255,.45); box-shadow: 0 0 28px rgba(122,168,255,.18), 0 8px 32px rgba(0,0,0,.4); }
#faq .faq-item.open::before { opacity: 1; }

#faq .faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(186,230,253,.9);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: color .2s;
  font-family: var(--font-body);
}
#faq .faq-q:hover { color: #fff; background: transparent; }
#faq .faq-item.open .faq-q { color: #A5C4FF; }

/* + icon — cyan circle */
#faq .faq-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(122,168,255,.15);
  border: 1.5px solid rgba(122,168,255,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #A5C4FF;
  transition: all .25s;
  box-shadow: 0 0 10px rgba(122,168,255,.2);
}
#faq .faq-item.open .faq-icon {
  background: linear-gradient(135deg, #1d4ed8, #3B6FDC);
  border-color: transparent;
  color: #fff;
  transform: rotate(45deg);
  box-shadow: 0 0 16px rgba(122,168,255,.5);
}

/* Answer panel.
   Antes usaba max-height: 300px, que cortaba las respuestas largas por la
   mitad. La técnica de grid-template-rows 0fr → 1fr anima igual de suave
   y se adapta a cualquier alto de contenido. */
#faq .faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s var(--ease-out);
  background: transparent;
  border: none;
}
#faq .faq-item.open .faq-a { grid-template-rows: 1fr; }
#faq .faq-a-inner { overflow: hidden; min-height: 0; }
#faq .faq-a p {
  padding: 0 22px 20px;
  font-size: 14.5px;
  color: rgba(186,230,253,.65);
  line-height: 1.75;
  margin: 0;
}

/* Una sola columna.
   En dos columnas, abrir una tarjeta estiraba a su vecina para igualar
   alturas — de ahí el hueco vacío al lado de las respuestas cortas — y
   empujaba la fila entera. En una columna el acordeón se comporta como
   se espera: solo crece lo que abriste. */
#faq .faq-grid {
  grid-template-columns: 1fr;
  max-width: 780px;
  gap: 10px;
}

/* Buscador */
#faq .faq-search {
  position: relative;
  max-width: 780px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
}
#faq .faq-search svg {
  position: absolute; left: 16px;
  color: rgba(186,230,253,.5);
  pointer-events: none;
}
#faq .faq-search input {
  width: 100%;
  padding: 13px 16px 13px 44px;
  border-radius: 12px;
  font-family: inherit; font-size: 14.5px;
  color: #dceeff;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  transition: border-color .2s, background .2s;
}
#faq .faq-search input::placeholder { color: rgba(186,230,253,.42); }
#faq .faq-search input:focus {
  outline: none;
  border-color: #7AA8FF;
  background: rgba(255,255,255,.06);
}
#faq .faq-item[hidden] { display: none; }

/* Enlace al centro de preguntas */
#faq .faq-more { text-align: center; margin: 26px 0 0; }
#faq .faq-more a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 100px;
  font-size: 14.5px; font-weight: 600; text-decoration: none;
  color: #dceeff; border: 1px solid rgba(37,99,235,.3);
  background: rgba(37,99,235,.06);
  transition: border-color .18s ease, transform .18s ease;
}
#faq .faq-more a:hover { border-color: #7AA8FF; transform: translateY(-1px); }
#faq .faq-empty {
  max-width: 780px; margin: 0 auto 16px;
  text-align: center; font-size: 14.5px;
  color: rgba(186,230,253,.6);
}
#faq .faq-empty[hidden] { display: none; }

/* Resaltado del término buscado */
#faq mark {
  background: rgba(122,168,255,.22);
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
}

/* ─────────────────────────────
   SECURITY SECTION
───────────────────────────── */
.security-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:48px}
.security-card{background:rgba(9,15,30,.9);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-xl);padding:32px;transition:all .25s var(--ease-spring)}
.security-card:hover{border-color:rgba(37,99,235,.4);background:rgba(37,99,235,.07);transform:translateY(-3px);box-shadow:0 16px 48px rgba(37,99,235,.12)}
.security-icon{font-size:36px;margin-bottom:16px}
.security-title{font-family:var(--font-display);font-size:17px;font-weight:700;color:#fff;margin-bottom:10px;letter-spacing:-.3px}
.security-desc{font-size:14px;color:rgba(255,255,255,.45);line-height:1.7}
.security-badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.security-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:100px;padding:9px 20px;font-size:13px;font-weight:700;color:rgba(255,255,255,.6)}

/* ─────────────────────────────
   CTA FINAL
───────────────────────────── */
.cta-final{background:#060c22;padding:120px 0;text-align:center;position:relative;overflow:hidden}
.cta-final::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 90% 110% at 50% 50%,rgba(37,99,235,.45) 0%,transparent 58%),radial-gradient(ellipse 55% 55% at 8% 92%,rgba(30,64,175,.25) 0%,transparent 48%),radial-gradient(ellipse 40% 50% at 92% 8%,rgba(122,168,255,.2) 0%,transparent 48%),radial-gradient(ellipse 30% 30% at 50% 100%,rgba(37,99,235,.2) 0%,transparent 50%)}
.cta-final-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:56px 56px}
.cta-final-inner{position:relative;z-index:2;max-width:680px;margin:0 auto}
.cta-final h2{font-family:var(--font-display);font-size:clamp(42px,5.5vw,68px);font-weight:900;color:#fff;letter-spacing:-3px;line-height:1.03;margin-bottom:24px}
.cta-final p{font-size:18px;color:rgba(255,255,255,.6);margin-bottom:44px;line-height:1.75}
.cta-final-btns{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-bottom:36px}
.cta-final-trust{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;font-size:13px;color:rgba(255,255,255,.4)}
.cta-final-trust span{display:flex;align-items:center;gap:7px}
.cta-final-trust span::before{content:'✓';color:var(--green-400);font-weight:800}

/* ─────────────────────────────
   FOOTER
───────────────────────────── */
.footer{background:#060a18;color:#fff;border-top:1px solid rgba(255,255,255,.07)}
.footer-inner{padding:88px 0 0}
.footer-grid{display:grid;grid-template-columns:2.5fr 1fr 1fr 1fr 1.5fr;gap:48px;margin-bottom:72px}
.footer-brand{display:flex;flex-direction:column}
.footer-logo-link{display:inline-block;margin-bottom:16px}
.footer-logo-link .tulogica-logo-img,.footer-logo-link .footer-logo-img{max-height:48px;width:auto;max-width:200px;display:block}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.footer-logo-mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--blue-600),var(--cyan-500));display:flex;align-items:center;justify-content:center}
.footer-logo-text{font-size:18px;font-weight:800;color:#fff;letter-spacing:-1px}
.footer-brand-desc{font-size:14px;color:rgba(255,255,255,.4);line-height:1.75;margin-bottom:24px}
.footer-social{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.social-btn{width:38px;height:38px;border-radius:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.45);font-size:14px;transition:all var(--t)}
.social-btn:hover{background:rgba(255,255,255,.14);color:#fff;transform:translateY(-2px)}
.footer-col__title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.8px;color:rgba(255,255,255,.3);margin-bottom:18px}
.footer-links{display:flex;flex-direction:column;gap:11px;list-style:none;margin:0;padding:0}
.footer-links a{font-size:13.5px;color:rgba(255,255,255,.5);transition:color var(--t)}
.footer-links a:hover{color:#fff}
.footer-contact li{display:flex;align-items:flex-start;gap:0}
.footer-contact a{display:flex;align-items:center;gap:9px;font-size:13.5px;color:rgba(255,255,255,.5)}
.footer-contact a:hover{color:#fff}
.footer-contact__address{display:flex;align-items:center;gap:9px;font-size:13.5px;color:rgba(255,255,255,.4);cursor:default}
.footer-contact__icon{flex-shrink:0;width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.45)}
.footer-contact__icon--wa{background:rgba(37,211,102,.15);border-color:rgba(37,211,102,.25);color:#25D366}
.footer-bottom{border-top:1px solid rgba(255,255,255,.07);padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.footer-bottom-text{font-size:13px;color:rgba(255,255,255,.3)}
.footer-bottom-brand{color:rgba(255,255,255,.5);transition:color var(--t)}
.footer-bottom-brand:hover{color:#fff}
.footer-legal{display:flex;gap:24px;flex-wrap:wrap}
.footer-legal a{font-size:13px;color:rgba(255,255,255,.3);transition:color var(--t)}
.footer-legal a:hover{color:rgba(255,255,255,.7)}

/* ─────────────────────────────
   FLOATING ELEMENTS
───────────────────────────── */
.wa-float{position:fixed;bottom:28px;right:28px;z-index:900;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 28px rgba(37,211,102,.5),0 2px 8px rgba(0,0,0,.2);transition:all .25s var(--ease-spring);font-size:26px}
.wa-float:hover{transform:scale(1.14) translateY(-3px);box-shadow:0 14px 44px rgba(37,211,102,.6),0 4px 12px rgba(0,0,0,.2)}
.wa-pulse{position:absolute;inset:-6px;border-radius:50%;background:rgba(37,211,102,.25);animation:pulseRing 2.2s ease-out infinite}
.back-top{position:fixed;bottom:28px;left:28px;z-index:900;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--slate-200);box-shadow:0 4px 20px rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center;color:var(--slate-500);font-size:16px;opacity:0;visibility:hidden;transition:all var(--t);cursor:pointer}
.back-top.visible{opacity:1;visibility:visible}
.back-top:hover{background:var(--blue-600);color:#fff;border-color:var(--blue-600);transform:translateY(-2px)}

/* ─────────────────────────────
   RESPONSIVE
───────────────────────────── */
@media(max-width:1024px){
  .hero-inner{grid-template-columns:1fr;text-align:center;padding-bottom:0}
  .hero-channels,.hero-ctas,.hero-trust{justify-content:center}
  .hero-sub{margin:0 auto 36px}
  .hero-visual{display:none}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .platform-content{grid-template-columns:1fr;gap:40px}
  .channels-showcase{grid-template-columns:1fr}
  .uc2-panel{grid-template-columns:1fr}
  .uc2-feats{grid-template-columns:repeat(4,1fr)}
  .roi-stats-row{grid-template-columns:repeat(2,1fr)}
  .roi-compare{grid-template-columns:1fr;max-width:500px;margin:0 auto}
  .testimonials-wall{grid-template-columns:repeat(2,1fr)}
  .pricing-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .plan-card.popular{transform:none}
  .steps-timeline::before{display:none}
  .steps-timeline{grid-template-columns:repeat(2,1fr)}
  .faq-grid{grid-template-columns:1fr}
  .security-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr 1fr}
  .footer-brand{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:24px}
  .footer-brand-desc{flex:1 1 300px}
  .footer-social{margin-top:0}
  .integrations-featured{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .container{padding:0 20px}
  .section{padding:72px 0}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .roi-stats-row{grid-template-columns:repeat(2,1fr)}
  .use-cases-tabs,.uc2-tabs{gap:6px}
  .uc2-feats{grid-template-columns:1fr 1fr}
  .testimonials-wall{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1;flex-direction:column}
  .cta-final-btns{flex-direction:column;align-items:center}
  .integrations-featured{grid-template-columns:1fr}
  .security-grid{grid-template-columns:1fr}
  .int-api-box{flex-direction:column;text-align:center}
}
@media(max-width:480px){
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px}
  .footer-legal{flex-wrap:wrap;gap:12px}
}

/* ═══════════════════════════════════════════════════════════
   PÁGINA: RECURSOS
═══════════════════════════════════════════════════════════ */

/* Hero Recursos */
/* ═══════════════════════════════════════
   PÁGINA DE RECURSOS — full redesign
═══════════════════════════════════════ */

/* HERO */
.res-hero {
  background: #080C1A;
  padding: 110px 0 80px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.res-hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 55% at 50% -5%, rgba(37,99,235,.55) 0%, transparent 55%),
    radial-gradient(ellipse 35% 35% at 90% 50%, rgba(30,64,175,.2) 0%, transparent 50%);
}
.res-hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.5) 25%, rgba(0,0,0,.5) 70%, transparent);
}
.res-hero-inner { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; }
.res-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: 100px; padding: 7px 20px; font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.7); margin-bottom: 28px; letter-spacing: .02em;
}
.res-hero-title {
  font-size: clamp(38px, 5.5vw, 66px); font-weight: 900; color: #fff;
  letter-spacing: -2.5px; line-height: 1.06; margin-bottom: 20px;
}
.res-hero-sub {
  font-size: 18px; color: rgba(255,255,255,.52); line-height: 1.75;
  max-width: 580px; margin: 0 auto 36px;
}

/* Search bar */
.res-hero-search {
  display: flex; align-items: center; gap: 0;
  max-width: 560px; margin: 0 auto 24px;
  background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.14);
  border-radius: 100px; padding: 6px 6px 6px 20px;
  backdrop-filter: blur(12px);
  transition: border-color .25s, background .25s;
}
.res-hero-search:focus-within {
  border-color: rgba(99,148,255,.6); background: rgba(255,255,255,.1);
}
.res-hero-search > svg { color: rgba(255,255,255,.35); flex-shrink: 0; }
.res-search-input {
  flex: 1; background: none; border: none; outline: none;
  font-size: 15px; color: #fff; padding: 0 14px;
}
.res-search-input::placeholder { color: rgba(255,255,255,.3); }
.res-search-btn {
  background: var(--blue-600); color: #fff; border: none; border-radius: 100px;
  padding: 10px 22px; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background .2s; flex-shrink: 0;
}
.res-search-btn:hover { background: var(--blue-700); }

/* Quick links */
.res-hero-quicklinks {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap;
}
.res-quicklinks-label { font-size: 13px; color: rgba(255,255,255,.6); font-weight: 500; }
.res-quicklink {
  font-size: 13px; color: rgba(255,255,255,.55); font-weight: 500;
  border: 1px solid rgba(255,255,255,.12); border-radius: 100px;
  padding: 4px 14px; transition: all .2s; text-decoration: none;
}
.res-quicklink:hover { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.05); }

/* ── CATEGORÍAS ── */
.res-cats-section { padding: 0; background: var(--res-section-bg, #fff); }
.res-cats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--res-grid-gap, var(--slate-100)); border-top: 1px solid var(--res-grid-gap, var(--slate-100));
}
.res-cat-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  background: var(--res-card-bg, #fff); padding: 28px 24px;
  transition: all .22s; text-decoration: none; color: var(--ink);
  position: relative; overflow: hidden;
}
.res-cat-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue-500), var(--cyan-500));
  transform: scaleX(0); transition: transform .25s;
}
.res-cat-card:hover::after { transform: scaleX(1); }
.res-cat-card:hover { background: var(--blue-50); }
.res-cat-icon { font-size: 26px; margin-bottom: 2px; }
.res-cat-title { font-size: 14px; font-weight: 800; color: var(--ink); }
.res-cat-desc { font-size: 12px; color: var(--slate-500); line-height: 1.6; flex: 1; }
.res-cat-arrow { font-size: 14px; color: var(--blue-500); margin-top: 4px; transition: transform .2s; }
.res-cat-card:hover .res-cat-arrow { transform: translateX(4px); }

/* ── BLOG ── */
.res-blog-section { background: var(--res-section-bg, #fff); }
.res-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; }
.res-blog-card {
  border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--slate-100); transition: all .25s; background: var(--res-card-bg, #fff);
}
.res-blog-card:hover { box-shadow: 0 20px 56px rgba(0,0,0,.1); transform: translateY(-5px); }
.res-blog-thumb { height: 200px; overflow: hidden; }
.res-blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.res-blog-card:hover .res-blog-thumb img { transform: scale(1.04); }
.res-blog-thumb-placeholder {
  background: linear-gradient(135deg, var(--blue-50), var(--slate-100));
  display: flex; align-items: center; justify-content: center; height: 100%;
}
.thumb-placeholder-inner { font-size: 48px; opacity: .35; }
.res-blog-body { padding: 24px; }
.res-blog-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.res-blog-date { font-size: 12px; color: var(--slate-400); }
.res-blog-cat {
  font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  background: var(--blue-50); color: var(--blue-600); padding: 3px 10px; border-radius: 100px;
}
.res-blog-title { font-size: 17px; font-weight: 700; line-height: 1.4; margin-bottom: 10px; color: var(--ink); }
.res-blog-excerpt { font-size: 14px; color: var(--slate-500); line-height: 1.7; margin-bottom: 16px; }
.res-blog-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 700; color: var(--blue-600); transition: gap .2s;
}
.res-blog-link:hover { gap: 10px; }
.res-section-cta { text-align: center; }

/* ── DOCUMENTACIÓN — refined cards ── */
.res-docs-section { background: var(--res-alt-bg, var(--slate-50)); }
.res-docs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.res-doc-card {
  background: var(--res-card-bg, #fff); border: 1.5px solid var(--slate-100); border-radius: 16px;
  padding: 28px; transition: all .25s; text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.03);
}
.res-doc-card:hover {
  border-color: var(--blue-300); box-shadow: 0 14px 42px rgba(37,99,235,.12);
  transform: translateY(-4px);
}
.res-doc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.res-doc-icon {
  font-size: 32px; width: 52px; height: 52px; border-radius: 14px;
  background: var(--blue-50); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.res-doc-time {
  font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  background: var(--slate-100); color: var(--slate-500);
  padding: 5px 12px; border-radius: 100px; white-space: nowrap;
}
.res-doc-time.badge-advanced {
  background: rgba(30,64,175,.1); color: #7AA8FF;
}
.res-doc-title { font-size: 16px; font-weight: 800; color: var(--ink); line-height: 1.35; }
.res-doc-desc { font-size: 14px; color: var(--slate-500); line-height: 1.7; flex: 1; }
.res-doc-arrow {
  font-size: 13.5px; font-weight: 700; color: var(--blue-600); margin-top: 4px;
  display: flex; align-items: center; gap: 4px; transition: gap .2s;
}
.res-doc-card:hover .res-doc-arrow { gap: 8px; }

/* ── WEBINARS ── */
.res-webinars-section { background: var(--res-section-bg, #fff); }
.res-webinars-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.res-webinar-card {
  background: var(--res-card-alt-bg, var(--slate-50)); border: 1.5px solid var(--slate-100); border-radius: 16px;
  padding: 28px; display: flex; gap: 18px; align-items: flex-start;
  transition: all .25s;
}
.res-webinar-card:hover { border-color: var(--blue-200); background: var(--blue-50); transform: translateY(-3px); box-shadow: 0 12px 36px rgba(37,99,235,.08); }
.res-webinar-icon {
  font-size: 28px; width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, var(--blue-100), var(--blue-50));
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.res-webinar-meta { display: flex; gap: 14px; font-size: 12px; color: var(--slate-400); margin-bottom: 10px; }
.res-webinar-title { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.4; }

/* ── CASOS DE ÉXITO ── */
.res-cases-section { background: var(--res-alt-bg, var(--slate-50)); }
.res-cases-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.res-case-card {
  background: var(--res-card-bg, #fff); border: 1.5px solid var(--slate-100); border-radius: 16px;
  padding: 28px; transition: all .25s; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.03);
}
.res-case-card:hover { border-color: var(--blue-200); box-shadow: 0 20px 56px rgba(37,99,235,.12); transform: translateY(-4px); }
.res-case-header { display: flex; align-items: center; gap: 14px; }
.res-case-icon {
  font-size: 26px; width: 52px; height: 52px; border-radius: 14px;
  background: var(--blue-50); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.res-case-company { font-size: 17px; font-weight: 800; color: var(--ink); }
.res-case-sector {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--slate-400); margin-top: 2px;
}
.res-case-desc { font-size: 14px; color: var(--slate-600); line-height: 1.75; flex: 1; }
.res-case-metric {
  background: linear-gradient(135deg, var(--blue-50), rgba(122,168,255,.06));
  color: var(--blue-700); font-size: 13.5px; font-weight: 800;
  padding: 10px 16px; border-radius: 10px; border: 1px solid var(--blue-100);
}
.res-case-link { font-size: 13px; font-weight: 700; color: var(--blue-600); display: flex; align-items: center; gap: 4px; }
.res-case-link:hover { text-decoration: underline; }

/* ── FAQ ── */
.res-faq-section { background: var(--res-section-bg, #fff); }

/* ── API SECTION ── */
.res-api-section { background: #060a18; padding: 100px 0; }
.res-api-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.res-api-feats { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.res-api-feat {
  display: flex; align-items: center; gap: 12px;
  font-size: 14.5px; color: rgba(255,255,255,.65);
}
.res-api-feat span { font-size: 16px; }
.res-api-code-wrap {
  background: rgba(10,14,24,.98); border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px; overflow: hidden; box-shadow: 0 32px 80px rgba(0,0,0,.6);
}
.res-api-code-chrome {
  display: flex; align-items: center; gap: 6px; padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.03);
  font-size: 11px; color: rgba(255,255,255,.28);
}
.res-api-code-chrome .chrome-dot { width: 10px; height: 10px; border-radius: 50%; }
.res-api-code-chrome .chrome-dot:nth-child(1) { background: #FF5F57; }
.res-api-code-chrome .chrome-dot:nth-child(2) { background: #FFBD2E; }
.res-api-code-chrome .chrome-dot:nth-child(3) { background: #28C840; }
.res-api-code {
  padding: 28px; font-family: 'Courier New', monospace; font-size: 13px;
  line-height: 1.9; color: rgba(255,255,255,.7); white-space: pre; overflow-x: auto;
}

/* Newsletter */
.res-newsletter-section {
  background: linear-gradient(135deg, var(--blue-600), var(--blue-800));
  padding: 60px 0;
}
.res-newsletter-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}
.res-newsletter-text h3 { font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.res-newsletter-text p { font-size: 15px; color: rgba(255,255,255,.7); }
.res-newsletter-form { display: flex; flex-direction: column; gap: 10px; min-width: 360px; }
.res-nl-form { display: flex; gap: 10px; }
.res-nl-input {
  flex: 1; padding: 12px 18px; border-radius: var(--r); border: 1.5px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12); color: #fff; font-size: 14px; font-family: inherit;
  outline: none;
}
.res-nl-input::placeholder { color: rgba(255,255,255,.5); }
.res-nl-input:focus { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.18); }
.res-nl-note { font-size: 12px; color: rgba(255,255,255,.5); }

/* ═══════════════════════════════════════════════════════════
   PÁGINA: CONTACTO
═══════════════════════════════════════════════════════════ */

/* Hero Contacto */
.ct-hero {
  background: var(--slate-950);
  padding: 80px 0 0;
  position: relative;
  overflow: hidden;
}
.ct-hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 30% 0%, rgba(37,99,235,.45) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 90% 50%, rgba(30,64,175,.2) 0%, transparent 50%);
}
.ct-hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
  align-items: flex-start; padding-bottom: 80px;
}
.ct-hero-text { padding-top: 20px; }
.ct-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: 100px; padding: 7px 16px; font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.7); margin-bottom: 24px;
}
.ct-hero-title {
  font-size: clamp(38px, 4.5vw, 60px); font-weight: 900; color: #fff;
  letter-spacing: -2px; line-height: 1.07; margin-bottom: 18px;
}
.ct-hero-sub {
  font-size: 17px; color: rgba(255,255,255,.55); line-height: 1.75; margin-bottom: 36px;
}
.ct-hero-stats { display: flex; gap: 32px; flex-wrap: wrap; }
.ct-stat { display: flex; flex-direction: column; gap: 4px; }
.ct-stat strong {
  font-size: 28px; font-weight: 900; color: #fff; letter-spacing: -1px;
  background: linear-gradient(135deg, var(--blue-400), var(--cyan-400));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ct-stat span { font-size: 12px; color: rgba(255,255,255,.4); font-weight: 500; }

/* Formulario */
.ct-form-wrap {
  background: #fff; border-radius: 24px; padding: 40px;
  box-shadow: 0 40px 100px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.1);
}
.ct-form-header { margin-bottom: 28px; }
.ct-form-header h2 { font-size: 22px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.ct-form-header p { font-size: 13.5px; color: var(--slate-500); }
.ct-form-row { display: flex; gap: 14px; }
.ct-form-row-2 > * { flex: 1; }
.ct-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.ct-field label { font-size: 13px; font-weight: 600; color: var(--slate-700); }
.ct-field input,
.ct-field select,
.ct-field textarea {
  padding: 11px 14px; border: 1.5px solid var(--slate-200); border-radius: var(--r);
  font-size: 14px; font-family: inherit; color: var(--ink); outline: none;
  transition: border-color var(--t), box-shadow var(--t);
  background: var(--slate-50);
}
.ct-field input:focus,
.ct-field select:focus,
.ct-field textarea:focus {
  border-color: var(--blue-400); box-shadow: 0 0 0 3px rgba(37,99,235,.1);
  background: #fff;
}
.ct-field select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.ct-field textarea { resize: vertical; min-height: 90px; }
.ct-radio-group { display: flex; gap: 8px; flex-wrap: wrap; }
.ct-radio { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ct-radio input { width: auto; padding: 0; }
.ct-radio span {
  padding: 7px 14px; border-radius: var(--r); border: 1.5px solid var(--slate-200);
  font-size: 13px; font-weight: 600; color: var(--slate-600);
  transition: all var(--t); cursor: pointer;
}
.ct-radio input:checked + span {
  background: var(--blue-600); color: #fff; border-color: var(--blue-600);
}
.ct-submit-btn { margin-top: 4px; font-size: 16px; padding: 14px; }
.ct-form-note { text-align: center; font-size: 12px; color: var(--slate-400); margin-top: 12px; }

/* Éxito formulario */
.ct-form-success {
  text-align: center; padding: 40px 20px;
}
.ct-success-icon { font-size: 56px; margin-bottom: 16px; }
.ct-form-success h3 { font-size: 22px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.ct-form-success p { font-size: 15px; color: var(--slate-500); }

/* Opciones de contacto */
.ct-options-section { background: #fff; }
.ct-options-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ct-option-card {
  border-radius: var(--r-xl); padding: 28px 24px; border: 1.5px solid var(--slate-100);
  text-decoration: none; color: var(--ink); transition: all var(--t);
  display: flex; flex-direction: column; gap: 10px;
}
.ct-option-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,.1); }
.ct-option-icon { font-size: 36px; }
.ct-option-title { font-size: 16px; font-weight: 800; color: var(--ink); }
.ct-option-desc { font-size: 13px; color: var(--slate-500); line-height: 1.65; flex: 1; }
.ct-option-cta { font-size: 13.5px; font-weight: 700; margin-top: 4px; }

/* Colores de opciones */
.ct-option-green { background: #F0FDF4; border-color: #BBF7D0; }
.ct-option-green:hover { border-color: #4ADE80; }
.ct-option-green .ct-option-cta { color: #16A34A; }
.ct-option-blue { background: var(--blue-50); border-color: var(--blue-100); }
.ct-option-blue:hover { border-color: var(--blue-300); }
.ct-option-blue .ct-option-cta { color: var(--blue-600); }
.ct-option-violet { background: #F5F3FF; border-color: #DDD6FE; }
.ct-option-violet:hover { border-color: #A5C4FF; }
.ct-option-violet .ct-option-cta { color: #7AA8FF; }
.ct-option-cyan { background: #C8DAF0; border-color: #C8DAF0; }
.ct-option-cyan:hover { border-color: #A5C4FF; }
.ct-option-cyan .ct-option-cta { color: #3B6FDC; }

/* Info + Horarios */
.ct-info-section { background: var(--slate-50); }
.ct-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.ct-info-col-full { grid-column: 1 / -1; }
.ct-contact-items { display: flex; flex-direction: column; gap: 20px; margin-top: 28px; }
.ct-contact-item { display: flex; align-items: flex-start; gap: 16px; }
.ct-contact-icon {
  width: 44px; height: 44px; border-radius: var(--r); background: #fff;
  border: 1px solid var(--slate-200); display: flex; align-items: center;
  justify-content: center; font-size: 20px; flex-shrink: 0;
}
.ct-contact-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--slate-400); margin-bottom: 4px; }
.ct-contact-value { font-size: 15px; font-weight: 600; color: var(--ink); }
a.ct-contact-value:hover { color: var(--blue-600); }

/* Horarios */
.ct-hours-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; margin-bottom: 16px; }
.ct-hours-card {
  background: #fff; border: 1.5px solid var(--slate-100); border-radius: var(--r-lg);
  padding: 16px 20px; display: flex; align-items: flex-start; gap: 14px;
}
.ct-hours-card--featured { border-color: var(--blue-200); background: var(--blue-50); }
.ct-hours-card--enterprise { border-color: #DDD6FE; background: #F5F3FF; }
.ct-hours-icon { font-size: 22px; flex-shrink: 0; }
.ct-hours-plan { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 2px; }
.ct-hours-time { font-size: 13px; color: var(--slate-600); margin-bottom: 2px; }
.ct-hours-channel { font-size: 12px; color: var(--slate-400); }
.ct-langs-badge {
  background: #fff; border: 1px solid var(--slate-200); border-radius: var(--r);
  padding: 10px 14px; font-size: 13px; color: var(--slate-600);
}

/* Quick FAQs */
.ct-quick-faqs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.ct-qfaq-item {
  background: #fff; border: 1px solid var(--slate-100); border-radius: var(--r-lg); padding: 20px;
}
.ct-qfaq-q { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 8px; line-height: 1.4; }
.ct-qfaq-a { font-size: 13px; color: var(--slate-500); line-height: 1.65; }

/* ── Responsivo páginas nuevas ── */
@media (max-width: 1280px) {
  .res-webinars-grid { grid-template-columns: repeat(2, 1fr); }
  .res-cases-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .res-cats-grid { grid-template-columns: repeat(3, 1fr); }
  .res-blog-grid { grid-template-columns: repeat(2, 1fr); }
  .res-docs-grid { grid-template-columns: repeat(2, 1fr); }
  .res-webinars-grid { grid-template-columns: repeat(2, 1fr); }
  .res-cases-grid { grid-template-columns: repeat(2, 1fr); }
  .res-api-inner { grid-template-columns: 1fr; }
  .ct-hero-inner { grid-template-columns: 1fr; }
  .ct-options-grid { grid-template-columns: repeat(2, 1fr); }
  .ct-info-grid { grid-template-columns: 1fr; }
  .ct-quick-faqs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .res-cats-grid { grid-template-columns: repeat(2, 1fr); }
  .res-blog-grid { grid-template-columns: 1fr; }
  .res-docs-grid { grid-template-columns: 1fr; }
  .res-webinars-grid { grid-template-columns: 1fr; }
  .res-cases-grid { grid-template-columns: 1fr; }
  .ct-form-row { flex-direction: column; }
  .ct-options-grid { grid-template-columns: 1fr 1fr; }
  .ct-quick-faqs { grid-template-columns: 1fr; }
  .res-newsletter-inner { flex-direction: column; }
  .res-newsletter-form { min-width: unset; width: 100%; }
  .res-nl-form { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════
   MEJORAS v5 ENHANCED — Adicionales
═══════════════════════════════════════════════════════════ */

/* ── Section headers: smooth reveal via JS observer ── */
.section-header h2,
.section-header .heading-xl,
.section-header .heading-display {
  font-family: var(--font-display);
}

/* ── Feat title in platform section ── */
.feat-title {
  font-family: var(--font-display);
}

/* ── Feat number label ── */
.feat-number {
  font-family: var(--font-body);
  letter-spacing: 2px;
}

/* ── Platform content tab transition ── */
.platform-content {
  animation-fill-mode: both;
}

/* ── Improved hero channel pills hover ── */
.hero-ch {
  transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease-spring);
}
.hero-ch:hover {
  transform: translateY(-2px);
}

/* ── Improved btn-xl on hover ── */
.btn-xl {
  font-size: 16.5px;
  padding: 16px 34px;
}

/* ── Hero trust checkmarks ── */
.hero-trust span {
  transition: color .2s;
}
.hero-trust span:hover {
  color: rgba(255,255,255,.65);
}

/* ── Sticky header top adjustment when promo closed ── */
.site-header.no-promo {
  top: 0;
}

/* ── Better focus styles for accessibility ── */
:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Section label dark: better ── */
.section-label-dark {
  color: var(--cyan-400);
  background: rgba(122,168,255,.1);
  border-color: rgba(122,168,255,.2);
}

/* ── Int API box: better code styling ── */
.int-api-code {
  font-family: 'Courier New', 'Fira Code', monospace;
  font-size: 11px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 16px 20px;
  color: var(--green-400);
  white-space: pre;
  line-height: 1.7;
  flex-shrink: 0;
}

/* ── Guarantee strip icon pulse ── */
.guarantee-icon {
  display: inline-block;
  animation: floatY2 5s ease-in-out infinite;
}

/* ── UX: Smooth page transitions for tab content ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── KPI cards in dashboard: better micro detail ── */
.kpi-value {
  font-family: var(--font-display);
}

/* ── Float badge in hero: cleaner ── */
.float-badge {
  font-family: var(--font-body);
  font-size: 10.5px;
}

/* ── Plan card overflow hidden for shimmer ── */
.plan-card {
  overflow: hidden;
}

/* ── Popular plan card shimmer ── */
.plan-card.popular::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -60%;
  width: 80%;
  height: 180%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,.06) 50%,
    transparent 60%
  );
  transform: rotate(15deg);
  animation: shimmer 4s ease-in-out infinite 2s;
  pointer-events: none;
}

/* ── ROI compare metric font ── */
.compare-metric {
  font-family: var(--font-body);
}

/* ── Back to top: smoother ── */
.back-top {
  transition: opacity .3s, visibility .3s, background .2s, color .2s, transform .2s var(--ease-spring);
}
.back-top:hover {
  transform: translateY(-3px) scale(1.05);
}

/* ── Improve hero stat strip ── */
.hero-stats {
  backdrop-filter: blur(8px);
}

/* ── Bento card: subtle border-top accent on hover ── */
.fbento__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 2px;
  border-radius: 0 0 3px 3px;
  background: transparent;
  transition: background .3s;
}
.fbc--blue:hover::before   { background: linear-gradient(90deg, var(--blue-400), var(--cyan-400)); }
.fbc--violet:hover::before { background: linear-gradient(90deg, var(--violet-400), var(--blue-400)); }
.fbc--cyan:hover::before   { background: linear-gradient(90deg, var(--cyan-400), var(--blue-400)); }
.fbc--green:hover::before  { background: linear-gradient(90deg, var(--green-400), var(--cyan-400)); }
.fbc--orange:hover::before { background: linear-gradient(90deg, var(--amber-400), #f97316); }
.fbc--dark:hover::before   { background: linear-gradient(90deg, var(--violet-400), var(--blue-400)); }

/* ── Testi card: subtle gradient overlay ── */
.testi-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255,255,255,.01) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Footer links: subtle left slide on hover ── */
.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .18s, transform .2s var(--ease-spring);
}
.footer-links a:hover {
  transform: translateX(4px);
}

/* ═══════════════════════════════════════════════════
   SECCIÓN SOLUCIONES — Rediseño Premium v2.7
   ═══════════════════════════════════════════════════ */

/* Fondo de la sección */
.sol-section {
  position: relative;
  overflow: hidden;
  background: #f8fafc;
  padding: 100px 0 120px;
}

/* Orbs de fondo animados */
.sol-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.sol-bg-orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(37,99,235,.07) 0%, transparent 70%);
  top: -100px; left: -200px;
  animation: orbFloat 14s ease-in-out infinite alternate;
}
.sol-bg-orb-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(30,64,175,.06) 0%, transparent 70%);
  bottom: -80px; right: -150px;
  animation: orbFloat 18s ease-in-out infinite alternate-reverse;
}
@keyframes orbFloat {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(30px,20px) scale(1.06); }
}

/* Header de la sección */
.sol-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 52px;
}

/* Eyebrow con dot animado */
.sol-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--blue-600);
  background: rgba(37,99,235,.08);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 20px;
}
.sol-eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--blue-500);
  animation: blink 2s ease-in-out infinite;
  box-shadow: 0 0 6px var(--blue-500);
}

/* Tabs pill mejorados */
.sol-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 56px;
}
.sol-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 100px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--slate-500);
  background: #fff;
  border: 1.5px solid var(--slate-200);
  cursor: pointer;
  transition: all .22s var(--ease-spring);
  font-family: var(--font-body);
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.sol-tab-icon { font-size: 16px; position: relative; z-index: 1; }
.sol-tab .uc2-tab-label { position: relative; z-index: 1; }
.sol-tab::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--sol-accent, var(--blue-600));
  opacity: 0;
  transition: opacity .22s;
}
.sol-tab.active {
  color: #fff;
  border-color: var(--sol-accent, var(--blue-600));
  box-shadow: 0 4px 20px color-mix(in srgb, var(--sol-accent, var(--blue-600)) 35%, transparent);
  transform: translateY(-1px);
}
.sol-tab.active::before { opacity: 1; }
.sol-tab:hover:not(.active) {
  color: var(--sol-accent, var(--blue-600));
  border-color: color-mix(in srgb, var(--sol-accent, var(--blue-600)) 30%, transparent);
  background: color-mix(in srgb, var(--sol-accent, var(--blue-600)) 5%, white);
  transform: translateY(-1px);
}

/* Panel grid */
.sol-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.sol-panel[hidden] { display: none; }

/* ─── Columna izquierda ─── */
.sol-left { display: flex; flex-direction: column; }

.sol-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 700;
  width: fit-content;
  margin-bottom: 18px;
  letter-spacing: .3px;
}

.sol-title {
  margin-bottom: 12px;
  color: var(--slate-900);
  font-size: clamp(26px, 2.5vw, 36px);
}

.sol-desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--slate-500);
  margin-bottom: 28px;
}

/* Stats rápidos horizontales */
.sol-quick-stats {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  padding: 18px 24px;
  margin-bottom: 28px;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.sol-qstat { text-align: center; flex: 1; }
.sol-qstat-num {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
}
.sol-qstat-label {
  font-size: 11px;
  color: var(--slate-400);
  font-weight: 500;
  margin-top: 3px;
  line-height: 1.3;
}
.sol-qstat-sep {
  width: 1px;
  height: 36px;
  background: var(--slate-200);
  flex-shrink: 0;
}

/* Checklist mejorado */
.sol-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}
.sol-check-item {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 15px;
  font-weight: 500;
  color: var(--slate-700);
  padding: 8px 12px;
  border-radius: 10px;
  transition: background .18s;
  cursor: default;
}
.sol-check-item:hover { background: rgba(0,0,0,.025); }
.sol-check-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform .2s var(--ease-spring);
}
.sol-check-item:hover .sol-check-circle { transform: scale(1.15); }
.sol-check-text { line-height: 1.4; }

/* CTAs */
.sol-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.sol-cta-btn {
  border-radius: 14px !important;
  font-size: 14.5px !important;
  padding: 13px 24px !important;
  transition: transform .2s var(--ease-spring), box-shadow .2s !important;
}
.sol-cta-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.18) !important;
}
.sol-ghost-btn {
  padding: 13px 22px;
  border-radius: 14px;
  border: 1.5px solid var(--slate-200);
  color: var(--slate-600);
  font-size: 14px;
  font-weight: 600;
  background: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
}
.sol-ghost-btn:hover {
  border-color: var(--slate-300);
  color: var(--ink);
  background: var(--slate-50);
  transform: translateY(-1px);
}

/* ─── Columna derecha: mockup ─── */
.sol-right {
  display: flex;
  align-items: stretch;
}
.sol-mockup {
  border-radius: var(--r-2xl);
  padding: 20px;
  border: 1px solid rgba(0,0,0,.07);
  box-shadow:
    0 4px 6px rgba(0,0,0,.04),
    0 20px 50px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.7);
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  transition: transform .3s var(--ease-spring);
  animation: ucPanelIn .48s var(--ease-out) both;
}
.sol-panel:not([hidden]) .sol-mockup {
  animation: ucPanelIn .48s var(--ease-out) both;
}

/* Chrome bar */
.sol-mockup-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.06);
}
.sol-chrome-dots {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}
.sol-chrome-dots span {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: block;
}
.sol-chrome-url {
  font-size: 11px;
  color: var(--slate-500);
  font-family: monospace;
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* AI Banner */
.sol-ai-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.sol-ai-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: blink 2s ease-in-out infinite;
}

/* Chat messages */
.sol-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}
.sol-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.sol-msg-out { flex-direction: row-reverse; }
.sol-msg-av {
  width: 34px; height: 34px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sol-av-ai {
  background: linear-gradient(135deg,var(--blue-600),var(--cyan-500));
  font-size: 10px;
  letter-spacing: -.5px;
}
.sol-msg-body { display: flex; flex-direction: column; gap: 3px; max-width: 80%; }
.sol-msg-body-out { align-items: flex-end; }
.sol-msg-name {
  font-size: 10.5px;
  color: var(--slate-400);
  font-weight: 500;
  padding: 0 4px;
}
.sol-msg-name-ai { color: var(--slate-500); }
.sol-bubble {
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}
.sol-bubble-in {
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.07);
  color: var(--slate-700);
  border-bottom-left-radius: 4px;
}
.sol-bubble-out {
  background: var(--blue-600);
  color: #fff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 3px 12px rgba(37,99,235,.25);
}

/* Result tag */
.sol-result-tag {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  align-self: flex-start;
  margin-left: 44px;
}

/* Métrica pill grande */
.sol-metric-pill {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-radius: var(--r-xl);
  color: #fff;
  box-shadow: 0 8px 28px rgba(0,0,0,.15);
}
.sol-metric-big {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1;
  flex-shrink: 0;
}
.sol-metric-info { display: flex; flex-direction: column; gap: 2px; }
.sol-metric-label { font-size: 14px; font-weight: 700; opacity: .95; }
.sol-metric-sub { font-size: 11px; color: #a8bdd0; font-weight: 500; }

/* Mini stats row */
.sol-mini-stats {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
}
.sol-mini-stat {
  flex: 1;
  text-align: center;
  padding: 12px 16px;
}
.sol-mini-num {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
}
.sol-mini-label {
  font-size: 11px;
  color: var(--slate-500);
  font-weight: 500;
  margin-top: 2px;
  line-height: 1.3;
}
.sol-mini-divider {
  width: 1px;
  height: 40px;
  background: var(--slate-200);
  flex-shrink: 0;
}

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .sol-panel { grid-template-columns: 1fr; gap: 40px; }
  .sol-right { max-width: 520px; margin: 0 auto; width: 100%; }
}
@media (max-width: 640px) {
  .sol-tabs { gap: 6px; }
  .sol-tab  { padding: 9px 14px; font-size: 12.5px; }
  .sol-quick-stats { flex-direction: column; gap: 12px; }
  .sol-qstat-sep { width: 60px; height: 1px; }
  .sol-metric-big { font-size: 32px; }
  .sol-actions { flex-direction: column; align-items: flex-start; }
  .sol-cta-btn, .sol-ghost-btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════
   MEJORAS GLOBALES HERO + SECCIONES v2.8
   ═══════════════════════════════════════════════════ */

/* ── Hero trust row ── */
.hero-trust-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.hero-trust-sep {
  color: rgba(255,255,255,.2);
  font-size: 13px;
  flex-shrink: 0;
}
.hero-trust-item {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255,255,255,.6);
  white-space: nowrap;
}
.hero-g2 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.g2-label {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255,255,255,.7);
}

/* ── Hero CTAs — shimmer on primary ── */
.hero-ctas .btn-primary {
  position: relative;
  overflow: hidden;
}
.hero-ctas .btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: skewX(-20deg);
  animation: heroShimmer 3s ease-in-out infinite 1.5s;
}
@keyframes heroShimmer {
  0%   { left: -75%; }
  60%  { left: 125%; }
  100% { left: 125%; }
}

/* ── Steps section — mejorado ── */
.steps-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  counter-reset: step-counter;
}
.steps-timeline::before {
  content: '';
  position: absolute;
  top: 44px;
  left: calc(12.5% + 20px);
  right: calc(12.5% + 20px);
  height: 2px;
  background: linear-gradient(90deg, var(--blue-200), var(--cyan-400), var(--violet-400), var(--blue-200));
  z-index: 0;
}
.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 20px;
  position: relative;
  z-index: 1;
  cursor: default;
  transition: transform .25s var(--ease-spring);
}
.step-item:hover { transform: translateY(-4px); }
.step-num {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-600), var(--cyan-500));
  color: #fff;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 4px 20px rgba(37,99,235,.35);
  border: 3px solid #fff;
  transition: all .25s var(--ease-spring);
}
.step-item:hover .step-num {
  transform: scale(1.15);
  box-shadow: 0 8px 28px rgba(37,99,235,.5);
}
.step-emoji {
  font-size: 32px;
  margin-bottom: 14px;
  display: block;
  transition: transform .25s var(--ease-spring);
}
.step-item:hover .step-emoji { transform: scale(1.15) rotate(-5deg); }
.step-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--slate-800);
  margin-bottom: 8px;
  letter-spacing: -.3px;
}
.step-desc {
  font-size: 14px;
  color: var(--slate-500);
  line-height: 1.6;
}

/* ── Plan features — mejorado ── */
.plan-feat {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--slate-700);
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,.04);
  transition: color .15s;
}
.plan-feat:last-child { border-bottom: none; }
.plan-feat:hover { color: var(--slate-900); }
.plan-feat-icon {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(37,99,235,.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--blue-600);
  flex-shrink: 0;
  transition: background .15s;
}
.plan-feat:hover .plan-feat-icon { background: rgba(37,99,235,.18); }
.popular .plan-feat-icon {
  background: rgba(255,255,255,.2);
  color: #fff;
}



/* ── CTA Final — mejorado ── */
.cta-final {
  background: linear-gradient(135deg, #0C1122 0%, var(--blue-700) 40%, var(--cyan-600) 75%, #0C1122 100%);
  position: relative;
  overflow: hidden;
  padding: 100px 0;
}
.cta-final-inner {
  text-align: center;
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
}
.cta-final-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -2px;
  line-height: 1.05;
  margin-bottom: 18px;
}
.cta-final-inner p {
  font-size: 17px;
  color: rgba(255,255,255,.7);
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.cta-final-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.cta-final-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cta-final-trust span {
  font-size: 12.5px;
  color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 100px;
  padding: 4px 12px;
  transition: all .2s;
}
.cta-final-trust span:hover {
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.12);
}

/* ── Trusted brands — logos hover ── */
.trusted-logo-item,
.trusted-logo-text {
  transition: opacity .2s, transform .2s var(--ease-spring);
}
.trusted-logo-item:hover,
.trusted-logo-text:hover {
  opacity: 1 !important;
  transform: translateY(-2px) scale(1.05);
}

/* ── Section labels — pill style ── */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--blue-600);
  background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.15);
  border-radius: 100px;
  padding: 5px 14px;
  margin-bottom: 16px;
}
.section-label::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue-500);
  display: inline-block;
}

/* ── Security cards — hover lift ── */
.security-card {
  transition: transform .2s var(--ease-spring), box-shadow .2s;
}
.security-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(37,99,235,.12);
}

/* ── Integration chips — hover ── */
.int-chip {
  transition: all .2s var(--ease-spring);
}
.int-chip:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 4px 14px rgba(37,99,235,.15);
}

/* ── Testimonial cards — hover ── */
.testi-card {
  transition: transform .25s var(--ease-spring), box-shadow .25s;
}
.testi-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(37,99,235,.1);
}

/* ── Responsive hero trust ── */
@media (max-width: 768px) {
  .hero-trust-row { gap: 8px; }
  .hero-trust-sep { display: none; }
  .hero-trust-item { font-size: 12px; }
  .steps-timeline { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .steps-timeline::before { display: none; }
}
@media (max-width: 480px) {
  .steps-timeline { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════
   FOOTER OVERRIDES — fix duplicates & polish v2.8
   ════════════════════════════════════════════════ */

/* Remove the old duplicate back-top that had no .visible logic */
.back-top {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity .25s, visibility .25s, background .2s, transform .2s !important;
}
.back-top.visible {
  opacity: 1 !important;
  visibility: visible !important;
}

/* wa-float — use gradient, not plain green */
.wa-float {
  background: linear-gradient(135deg, #25D366, #128C7E) !important;
  border-radius: 50% !important;
}

/* ft__links arrow indicator */
.ft__links li a::before {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .18s, margin-right .18s;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid rgba(96,165,250,.6);
}
.ft__links li a:hover::before { opacity: 1; margin-right: 2px; }

/* ft__links gap animation on hover */
.ft__links li a { gap: 0; transition: color .18s, gap .2s; }
.ft__links li a:hover { gap: 8px; }

/* ═══════════════════════════════════════════
   FOOTER — ft-* namespace
   ─────────────────────────────────────────── */
.ft {
  background: #030712;
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* Subtle ambient glow behind footer */
.ft::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, rgba(37,99,235,.1) 0%, transparent 60%),
    radial-gradient(ellipse 30% 30% at 10% 100%, rgba(122,168,255,.06) 0%, transparent 55%);
}

/* Top glowing separator */
.ft__topline {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(37,99,235,.35) 20%,
    rgba(165,196,255,.5) 50%,
    rgba(37,99,235,.35) 80%,
    transparent 100%);
  position: relative;
}
.ft__topline::after {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 120px; height: 3px;
  background: radial-gradient(ellipse, rgba(165,196,255,.6) 0%, transparent 70%);
  filter: blur(4px);
}

/* Body (above bottom bar) */
.ft__body { padding: 80px 0 64px; position: relative; z-index: 2; }

/* Main grid */
.ft__grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr 1.6fr;
  gap: 48px;
}

/* ── Brand ── */
.ft__brand { display: flex; flex-direction: column; gap: 0; }
.ft__logo-link {
  display: inline-block; margin-bottom: 18px;
}
.ft__logo-link img,
.ft__logo-link .tulogica-logo-img,
.ft__logo-link .footer-logo-img {
  max-height: 44px; width: auto; max-width: 180px; display: block;
}
.ft__desc {
  font-size: 13.5px; line-height: 1.75;
  color: rgba(148,163,184,.6);
  margin-bottom: 20px;
  max-width: 280px;
}

/* Status badge */
.ft__status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600;
  color: rgba(52,211,153,.75);
  background: rgba(16,185,129,.08);
  border: 1px solid rgba(16,185,129,.18);
  border-radius: 100px;
  padding: 5px 13px;
  margin-bottom: 24px;
  width: fit-content;
  letter-spacing: .3px;
}
.ft__status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 6px rgba(52,211,153,.8);
  animation: blink 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.35} }

/* Social */
.ft__social {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: auto;
}
.ft__social-btn {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.45);
  transition: all .22s;
  position: relative; overflow: hidden;
}
.ft__social-btn::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: var(--sc, #2563EB);
  opacity: 0;
  transition: opacity .22s;
}
.ft__social-btn svg { position: relative; z-index: 1; }
.ft__social-btn:hover {
  border-color: transparent;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.ft__social-btn:hover::before { opacity: 1; }

/* ── Nav Columns ── */
.ft__col { display: flex; flex-direction: column; }

.ft__col-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.8px;
  color: rgba(255,255,255,.45);
  margin-bottom: 20px;
}
.ft__col-title-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: linear-gradient(135deg, #60A5FA, #A5C4FF);
  flex-shrink: 0;
}

.ft__links {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.ft__links li a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px;
  color: rgba(148,163,184,.65);
  padding: 5px 0;
  transition: color .18s, gap .18s;
  text-decoration: none;
  position: relative;
}
.ft__links li a::before {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid rgba(96,165,250,.5);
  opacity: 0;
  transition: opacity .18s, width .18s;
  flex-shrink: 0;
}
.ft__links li a:hover {
  color: #e2edff;
  gap: 10px;
}
.ft__links li a:hover::before { opacity: 1; }

/* ── Contact Column ── */
.ft__contact-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.ft__contact-item { display: flex; }
.ft__contact-link {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  transition: all .22s;
  width: 100%;
}
.ft__contact-link:hover {
  background: rgba(37,99,235,.1);
  border-color: rgba(96,165,250,.25);
  transform: translateX(3px);
}
.ft__contact-link--static { cursor: default; }
.ft__contact-link--static:hover {
  transform: none;
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.06);
}

.ft__contact-icon {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .22s;
}
.ft__contact-link:hover .ft__contact-icon { transform: scale(1.1); }

.ft__contact-icon--blue   { background: rgba(37,99,235,.2);  color: #60A5FA;  border: 1px solid rgba(37,99,235,.3); }
.ft__contact-icon--green  { background: rgba(37,211,102,.15); color: #25D366;  border: 1px solid rgba(37,211,102,.25); }
.ft__contact-icon--cyan   { background: rgba(165,196,255,.12); color: #A5C4FF;  border: 1px solid rgba(165,196,255,.2); }
.ft__contact-icon--violet { background: rgba(30,64,175,.15); color: #A5C4FF;  border: 1px solid rgba(30,64,175,.25); }

.ft__contact-text {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.ft__contact-label {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: rgba(148,163,184,.45);
}
.ft__contact-value {
  font-size: 13px; font-weight: 500;
  color: rgba(186,210,255,.8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Bottom bar ── */
.ft__bottom {
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.3);
  position: relative; z-index: 2;
}
.ft__bottom-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 20px 0;
}
.ft__bottom-left {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.ft__copy {
  font-size: 13px; color: rgba(255,255,255,.28);
}
.ft__copy-brand {
  color: rgba(255,255,255,.45);
  text-decoration: none;
  transition: color .18s;
}
.ft__copy-brand:hover { color: #fff; }

.ft__madein {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700;
  color: rgba(239,68,68,.5);
  text-transform: uppercase; letter-spacing: .8px;
  background: rgba(239,68,68,.06);
  border: 1px solid rgba(239,68,68,.12);
  border-radius: 100px;
  padding: 3px 9px;
}

.ft__legal {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ft__legal a {
  font-size: 12.5px; color: rgba(255,255,255,.3);
  text-decoration: none;
  transition: color .18s;
}
.ft__legal a:hover { color: rgba(255,255,255,.7); }
.ft__legal-sep { color: rgba(255,255,255,.15); font-size: 12px; }

/* ── WhatsApp Float (improved) ── */
.wa-float {
  position: fixed; bottom: 28px; right: 28px; z-index: 900;
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 32px rgba(37,211,102,.55), 0 2px 8px rgba(0,0,0,.25);
  transition: all .28s cubic-bezier(.34,1.56,.64,1);
  text-decoration: none;
}
.wa-float:hover {
  transform: scale(1.12) translateY(-4px);
  box-shadow: 0 16px 48px rgba(37,211,102,.65), 0 4px 12px rgba(0,0,0,.3);
}
.wa-pulse {
  position: absolute; width: 100%; height: 100%; border-radius: 50%;
  background: rgba(37,211,102,.4);
  animation: waPulse 2.5s ease-out infinite;
  pointer-events: none;
}
@keyframes waPulse {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* ── Back to top (improved) ── */
.back-top {
  position: fixed; bottom: 28px; left: 28px; z-index: 900;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(15,23,42,.95);
  border: 1px solid rgba(37,99,235,.3);
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
  color: rgba(96,165,250,.7);
  opacity: 0; visibility: hidden;
  transition: all .25s;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.back-top.visible { opacity: 1; visibility: visible; }
.back-top:hover {
  background: #2563EB;
  border-color: #2563EB;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(37,99,235,.5);
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .ft__grid { grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 36px; }
  .ft__col--contact { grid-column: 1 / -1; }
  .ft__contact-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
}
@media (max-width: 768px) {
  .ft__body { padding: 56px 0 48px; }
  .ft__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .ft__brand { grid-column: 1 / -1; }
  .ft__desc { max-width: 100%; }
}
@media (max-width: 480px) {
  .ft__grid { grid-template-columns: 1fr; gap: 28px; }
  .ft__bottom-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ft__legal { gap: 6px; }
  .wa-float { bottom: 20px; right: 20px; width: 52px; height: 52px; }
  .back-top { bottom: 20px; left: 20px; }
}

/* ══════════════════════════════════════════════════════
   FOOTER ADDITIONS v2.8 — CTA strip + brand improvements
   ══════════════════════════════════════════════════════ */

/* ── CTA Strip ── */
.ft__cta-strip {
  background: linear-gradient(90deg,
    rgba(37,99,235,.18) 0%,
    rgba(122,168,255,.12) 50%,
    rgba(30,64,175,.12) 100%);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 18px 0;
}
.ft__cta-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.ft__cta-strip-text {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: rgba(255,255,255,.6);
  flex-wrap: wrap;
}
.ft__cta-strip-badge {
  background: rgba(37,99,235,.25);
  border: 1px solid rgba(96,165,250,.3);
  color: #93C5FD;
  border-radius: 100px;
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.ft__cta-strip-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 22px;
  background: linear-gradient(135deg, var(--blue-600), #1a56db);
  color: #fff;
  border-radius: 100px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all .22s var(--ease-spring);
  box-shadow: 0 4px 20px rgba(37,99,235,.4);
  flex-shrink: 0;
}
.ft__cta-strip-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 28px rgba(37,99,235,.55);
  color: #fff;
}

/* ── Brand CTA button ── */
.ft__brand-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border: 1.5px solid rgba(96,165,250,.3);
  border-radius: 100px;
  color: rgba(147,197,253,.85);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 22px;
  background: rgba(37,99,235,.1);
  transition: all .22s var(--ease-spring);
  width: fit-content;
}
.ft__brand-cta:hover {
  background: rgba(37,99,235,.22);
  border-color: rgba(96,165,250,.55);
  color: #BFDBFE;
  transform: translateX(3px);
}

/* ── Link icon in ft__links ── */
.ft__link-icon {
  font-size: 13px;
  margin-right: 4px;
  opacity: .65;
  transition: opacity .18s, transform .18s;
}
.ft__links li a:hover .ft__link-icon {
  opacity: 1;
  transform: scale(1.2);
}

/* ── Responsive footer strip ── */
@media (max-width: 768px) {
  .ft__cta-strip-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ft__cta-strip-btn   { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════
   HERO SECTION EXTRA POLISH v2.8
   ══════════════════════════════════════════════════════ */

/* Float cards — mejoradas */
.hero-float {
  transition: transform .3s var(--ease-spring), box-shadow .3s;
}
.hero-float:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.3) !important;
}

/* Hero stat strip — hover lift */
.hero-stat {
  cursor: default;
  transition: transform .22s var(--ease-spring);
}
.hero-stat:hover { transform: translateY(-3px); }
.hero-stat-num {
  transition: color .2s;
}
.hero-stat:hover .hero-stat-num { color: var(--cyan-400); }

/* Trusted logos row — softer on idle, bright on hover */
.trusted-logos-row {
  opacity: 1;
}
.trusted-logo-item img { filter: grayscale(1); opacity: .45; transition: filter .25s, opacity .25s; }
.trusted-logo-item:hover img { filter: grayscale(0); opacity: 1; }
.trusted-logo-text { opacity: .4; font-weight: 700; transition: opacity .25s, color .25s; color: var(--slate-600); }
.trusted-logo-text:hover { opacity: 1 !important; color: var(--blue-600); }

/* ── Omni/Channel hover — handled in main blocks above ── */

/* Int featured cards — lift */
.int-featured-card {
  transition: transform .22s var(--ease-spring), box-shadow .22s;
}
.int-featured-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(37,99,235,.12);
}

/* Plan cards — lift + ring */
.plan-card {
  transition: transform .25s var(--ease-spring), box-shadow .25s;
}
.plan-card:not(.popular):hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(37,99,235,.12);
}

/* Guarantee strip — subtle pulse */
.guarantee-strip {
  transition: box-shadow .3s;
}
.guarantee-strip:hover {
  box-shadow: 0 8px 32px rgba(37,99,235,.12);
}

/* Conv items in dashboard — hover highlight */
.conv-item {
  transition: background .15s, border-radius .15s;
  cursor: pointer;
  border-radius: 8px;
}
.conv-item:not(.active):hover { background: rgba(255,255,255,.05); }

/* Feature checks in platform tabs */
.feat-check {
  transition: transform .18s var(--ease-spring), background .18s;
  border-radius: 10px;
  padding: 4px 6px 4px 0;
}
.feat-check:hover {
  transform: translateX(4px);
  background: rgba(37,99,235,.05);
}


/* ════════════════════════════════════════════════════════════
   NEW FOOTER — nft namespace — v2.9 (limpio, sin conflictos)
   ════════════════════════════════════════════════════════════ */

.nft {
  background: #050c1a;
  color: #fff;
  position: relative;
  overflow: hidden;
  font-family: var(--font-body);
}

/* Ambient background orbs */
.nft::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 60% 45% at 15% 0%, rgba(37,99,235,.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 85% 100%, rgba(122,168,255,.08) 0%, transparent 55%),
    radial-gradient(ellipse 30% 30% at 50% 50%, rgba(122,168,255,.04) 0%, transparent 60%);
}

/* ── Glow top line ── */
.nft__glow-line {
  height: 1px;
  position: relative;
  background: linear-gradient(90deg,
    transparent 0%, rgba(37,99,235,.4) 20%,
    rgba(165,196,255,.6) 50%, rgba(37,99,235,.4) 80%, transparent 100%);
}
.nft__glow-line::after {
  content: '';
  position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
  width: 200px; height: 5px;
  background: radial-gradient(ellipse, rgba(165,196,255,.5) 0%, transparent 70%);
  filter: blur(4px);
}

/* ── CTA Banner ── */
.nft__banner {
  position: relative; z-index: 2;
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 20px 0;
  background: linear-gradient(90deg,
    rgba(37,99,235,.12) 0%, rgba(122,168,255,.08) 50%, rgba(30,64,175,.08) 100%);
}
.nft__banner-inner {
  display: flex; align-items: center;
  justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.nft__banner-left {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.nft__banner-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(37,99,235,.25); border: 1px solid rgba(96,165,250,.35);
  color: #93C5FD; border-radius: 100px;
  padding: 4px 14px; font-size: 12px; font-weight: 700;
  white-space: nowrap; letter-spacing: .3px;
}
.nft__banner-text {
  font-size: 13.5px; color: rgba(255,255,255,.55); margin: 0;
}
.nft__banner-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #2563EB, #1a56db);
  color: #fff; border-radius: 100px;
  padding: 11px 24px; font-size: 13.5px; font-weight: 700;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(37,99,235,.45);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s;
}
.nft__banner-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 30px rgba(37,99,235,.6);
  color: #fff;
}

/* ── Body ── */
.nft__body {
  position: relative; z-index: 2;
  padding: 72px 0 60px;
}

/* ── Main grid: 5 columns ── */
.nft__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
  gap: 52px;
  align-items: start;
}

/* ── Brand column ── */
.nft__brand { display: flex; flex-direction: column; gap: 0; }

.nft__logo {
  display: inline-block; margin-bottom: 20px; text-decoration: none;
}
.nft__logo img,
.nft__logo svg {
  max-height: 46px; width: auto; max-width: 160px; display: block;
}

.nft__desc {
  font-size: 13.5px; line-height: 1.8;
  color: rgba(148,163,184,.6);
  margin-bottom: 20px; max-width: 270px;
}

/* Status badge */
.nft__status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .3px;
  color: rgba(52,211,153,.8);
  background: rgba(16,185,129,.08);
  border: 1px solid rgba(16,185,129,.2);
  border-radius: 100px; padding: 5px 14px;
  margin-bottom: 18px; width: fit-content;
}
.nft__status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 8px rgba(52,211,153,.9);
  animation: nftBlink 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes nftBlink { 0%,100%{opacity:1} 50%{opacity:.2} }

/* Mini CTA */
.nft__mini-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: rgba(147,197,253,.85);
  background: rgba(37,99,235,.1);
  border: 1.5px solid rgba(96,165,250,.25);
  border-radius: 100px; padding: 9px 18px;
  margin-bottom: 24px; width: fit-content;
  transition: all .22s cubic-bezier(.34,1.56,.64,1);
}
.nft__mini-cta:hover {
  background: rgba(37,99,235,.2);
  border-color: rgba(96,165,250,.5);
  color: #BFDBFE;
  transform: translateX(4px);
}

/* Social buttons */
.nft__social {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px;
}
.nft__social-btn {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.4);
  text-decoration: none;
  transition: all .22s cubic-bezier(.34,1.56,.64,1);
  position: relative; overflow: hidden;
}
.nft__social-btn::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--sc, #2563EB); opacity: 0; transition: opacity .22s;
}
.nft__social-btn svg { position: relative; z-index: 1; }
.nft__social-btn:hover {
  color: #fff; border-color: transparent;
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
.nft__social-btn:hover::before { opacity: 1; }

/* ── Nav columns ── */
.nft__col { display: flex; flex-direction: column; }

.nft__col-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 2px;
  color: rgba(255,255,255,.4);
  margin: 0 0 22px;
}
.nft__col-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #60A5FA, #A5C4FF);
  box-shadow: 0 0 6px rgba(96,165,250,.5);
}

/* Nav links */
.nft__links {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.nft__links li a {
  display: flex; align-items: center; gap: 0;
  font-size: 13.5px; color: rgba(148,163,184,.6);
  text-decoration: none; padding: 7px 10px 7px 0;
  border-radius: 8px;
  transition: color .18s, gap .2s, background .18s, padding-left .2s;
  position: relative;
}
.nft__links li a:hover {
  color: #e2edff;
  gap: 6px;
  padding-left: 8px;
  background: rgba(255,255,255,.04);
}
.nft__link-arrow {
  font-size: 16px; line-height: 1;
  color: rgba(96,165,250,.0);
  transition: color .18s, margin-right .18s;
  flex-shrink: 0;
  display: inline-block;
  margin-right: -4px;
}
.nft__links li a:hover .nft__link-arrow {
  color: rgba(96,165,250,.7);
  margin-right: 2px;
}

/* ── Contact column ── */
.nft__contact-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.nft__contact-card {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  text-decoration: none;
  transition: all .22s;
}
.nft__contact-card:hover {
  background: rgba(37,99,235,.1);
  border-color: rgba(96,165,250,.25);
  transform: translateX(4px);
}
.nft__contact-card--static { cursor: default; }
.nft__contact-card--static:hover {
  transform: none;
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.07);
}
.nft__contact-ico {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.nft__contact-card:hover .nft__contact-ico { transform: scale(1.12); }
.nft__contact-ico--blue   { background: rgba(37,99,235,.18);  color: #60A5FA; border: 1px solid rgba(37,99,235,.3); }
.nft__contact-ico--green  { background: rgba(37,211,102,.14); color: #25D366; border: 1px solid rgba(37,211,102,.25); }
.nft__contact-ico--cyan   { background: rgba(165,196,255,.1);  color: #A5C4FF; border: 1px solid rgba(165,196,255,.2); }
.nft__contact-ico--violet { background: rgba(30,64,175,.14); color: #A5C4FF; border: 1px solid rgba(30,64,175,.25); }
.nft__contact-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nft__contact-lbl {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: rgba(148,163,184,.4);
}
.nft__contact-val {
  font-size: 13px; font-weight: 500;
  color: rgba(186,210,255,.8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Bottom bar ── */
.nft__bottom {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.25);
}
.nft__bottom-inner {
  display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 18px 0;
}
.nft__bottom-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.nft__copy { font-size: 12.5px; color: rgba(255,255,255,.25); }
.nft__copy-brand {
  color: rgba(255,255,255,.4); text-decoration: none;
  transition: color .18s;
}
.nft__copy-brand:hover { color: #fff; }
.nft__made {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: rgba(239,68,68,.5);
  background: rgba(239,68,68,.06); border: 1px solid rgba(239,68,68,.12);
  border-radius: 100px; padding: 3px 10px;
}
.nft__legal {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.nft__legal a {
  font-size: 12.5px; color: rgba(255,255,255,.28);
  text-decoration: none; transition: color .18s;
}
.nft__legal a:hover { color: rgba(255,255,255,.7); }
.nft__legal span { color: rgba(255,255,255,.12); }

/* ── Responsive ── */
@media (max-width: 1200px) {
  .nft__grid { grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 36px; }
  .nft__col--contact { grid-column: 1 / -1; }
  .nft__contact-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
}
@media (max-width: 900px) {
  .nft__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .nft__brand { grid-column: 1 / -1; }
  .nft__desc { max-width: 100%; }
  .nft__body { padding: 52px 0 44px; }
}
@media (max-width: 560px) {
  .nft__grid { grid-template-columns: 1fr; gap: 28px; }
  .nft__banner-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .nft__banner-btn { width: 100%; justify-content: center; }
  .nft__bottom-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .wa-float { bottom: 20px; right: 20px; width: 52px; height: 52px; }
  .back-top { bottom: 20px; left: 20px; }
}

/* ══════════════════════════════════════════
   HERO PRO — Premium Enterprise Redesign
   v7.0 — Tulogica Pro
══════════════════════════════════════════ */

/* ─── Background system ─── */
.hero--pro {
  background: #03060f;
  min-height: calc(100svh - 44px - 68px);
  padding: 96px 0 0;
  position: relative;
  overflow: hidden;
}

.hero-bg-layer { position: absolute; inset: 0; pointer-events: none; }

/* Mesh gradient - deep cosmic */
.hero-bg-mesh::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 80% at 55% -20%, rgba(37,99,235,.55) 0%, transparent 50%),
    radial-gradient(ellipse 70% 55% at 95% 35%, rgba(122,168,255,.42) 0%, transparent 46%),
    radial-gradient(ellipse 55% 65% at -5% 80%, rgba(122,168,255,.28) 0%, transparent 50%),
    radial-gradient(ellipse 45% 45% at 20% 110%, rgba(37,99,235,.2) 0%, transparent 52%),
    radial-gradient(ellipse 40% 30% at 80% 95%, rgba(122,168,255,.15) 0%, transparent 50%);
}

/* Cuadrícula de líneas — mismo estilo "papel cuadriculado" que ya
   usaba la página de Precios (antes eran puntitos, esto se ve más
   técnico/premium). */
.hero-bg-grid {
  background-image:
    linear-gradient(rgba(37,99,235,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.09) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 100%);
}

/* Los orbes de luz difuminados se quitaron a propósito — es el
   efecto visual más repetido en cualquier página de IA de los
   últimos años (cientos de SaaS usan exactamente lo mismo). Se
   prioriza el hub de conexión con las redes sociales como elemento
   visual central, que sí es propio de este sitio. */
.hero-bg-orbs::before,
.hero-bg-orbs::after {
  display: none;
}

/* Noise texture overlay */
.hero-bg-noise {
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

@keyframes heroOrbFloat {
  0%, 100% { transform: translateY(0) translateX(0); }
  33% { transform: translateY(-30px) translateX(15px); }
  66% { transform: translateY(20px) translateX(-10px); }
}

/* ─── Layout ─── */
/* Contenedor más ancho solo para el hero — el resto del sitio se queda
   en 1200px. Le da más aire al dashboard/celular/monitor sin afectar
   ninguna otra sección. */
.hero--pro .container {
  max-width: 1320px;
}
.hero-inner--pro {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  text-align: center;
  gap: 8px;
  align-items: center;
  padding-bottom: 80px;
}

/* ─── Announcement badge ─── */
.hero-announce {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 100px;
  padding: 7px 14px 7px 8px;
  margin-bottom: 32px;
  font-size: 13px;
  color: rgba(255,255,255,.7);
  font-weight: 500;
  backdrop-filter: blur(16px);
  transition: all .22s;
  text-decoration: none;
  width: fit-content;
}
.hero-announce:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.2);
  color: rgba(255,255,255,.95);
  transform: translateY(-1px);
}
.announce-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #A5C4FF;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(165,196,255,.7);
  animation: announceBlink 2.5s ease-in-out infinite;
}
@keyframes announceBlink {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(165,196,255,.7); }
  50% { opacity: .6; box-shadow: 0 0 3px rgba(165,196,255,.3); }
}
.announce-pill {
  background: linear-gradient(135deg, #2563EB, #7AA8FF);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 100px;
  letter-spacing: .3px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.announce-text { font-size: 12.5px; }
.hero-announce svg { opacity: .5; flex-shrink: 0; }

/* ─── Headline ─── */
.hero-title--pro {
  color: #fff;
  font-size: clamp(2.5rem, 4.2vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin-bottom: 22px;
}
.hero-gradient-word {
  background: linear-gradient(125deg, #60A5FA 0%, #A5C4FF 38%, #1E40AF 70%, #60A5FA 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientSlide 6s ease infinite;
}
@keyframes gradientSlide {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ─── Subtitle ─── */
.hero-sub--pro {
  font-size: 17px;
  color: rgba(226,232,240,.85);
  line-height: 1.82;
  margin: 0 auto 40px;
  max-width: 500px;
}

/* ─── CTA buttons ─── */
.hero-ctas--pro {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 44px;
}

.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 16px 34px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #2563EB 0%, #1e40af 40%, #7AA8FF 100%);
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .22s var(--ease-spring), box-shadow .22s;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 8px 32px rgba(37,99,235,.45), 0 2px 0 rgba(0,0,0,.3);
  text-decoration: none;
  letter-spacing: -.2px;
}
.btn-hero-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 16px 48px rgba(37,99,235,.55), 0 4px 0 rgba(0,0,0,.4);
}
.btn-hero-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 50%);
  pointer-events: none;
}
.btn-hero-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: skewX(-15deg);
  transition: left .6s ease;
}
.btn-hero-primary:hover::after { left: 130%; }

.btn-hero-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.055);
  border: 1.5px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: all .22s var(--ease-spring);
  text-decoration: none;
  letter-spacing: -.2px;
}
.btn-hero-ghost:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.25);
  color: #fff;
  transform: translateY(-2px);
}
.btn-play-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 10px;
  transition: background .22s, border-color .22s;
}
.btn-hero-ghost:hover .btn-play-icon {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.3);
}

/* ─── Social Proof ─── */
.hero-social-proof {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}
.proof-avatars {
  display: flex;
  align-items: center;
}
.proof-av {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2.5px solid #03060f;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff;
  margin-right: -8px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.proof-av:last-child { margin-right: 0; }
.proof-text { display: flex; flex-direction: column; gap: 2px; }
.proof-stars { display: flex; align-items: center; gap: 2px; }
.proof-score {
  font-size: 12px; font-weight: 800; color: #FBBF24;
  margin-left: 4px;
}
.proof-label { font-size: 11px; color: rgba(255,255,255,.38); font-weight: 500; }
.proof-divider {
  width: 1px; height: 32px;
  background: rgba(255,255,255,.1);
  flex-shrink: 0;
}
.proof-badges { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.proof-badge {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: rgba(255,255,255,.5);
  font-weight: 500;
}

/* ─── AI Live Ticker — antes no tenía NINGÚN CSS definido, por eso se
   veía sin efecto: sin fondo, sin animación, sin el punto pulsante. ─── */
.ai-live-ticker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
.ai-ticker-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 100px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(6px);
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  opacity: 0;
  animation: aiTickerIn .6s ease forwards;
  animation-delay: var(--delay, 0s);
}
.ai-ticker-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #A5C4FF;
  box-shadow: 0 0 8px rgba(165,196,255,.8);
  animation: aiTickerPulse 2s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  flex-shrink: 0;
}
@keyframes aiTickerIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes aiTickerPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.75); }
}
@media (max-width: 600px) {
  .ai-live-ticker { display: none; }
}

/* ─── Visual side ─── */
.hero-text--pro {
  max-width: 800px;
  margin: 0 auto;
}
.hero-visual--pro {
  position: relative;
  max-width: 1180px;
  width: 100%;
  margin: 48px auto 0;
}
.visual-glow {
  position: absolute;
  left: -60px; top: 50%;
  transform: translateY(-50%);
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.12) 0%, transparent 65%);
  filter: blur(24px);
  pointer-events: none;
  animation: glowPulse 6s ease-in-out infinite;
}

/* Dashboard PRO */
/* Envoltorio SIN overflow:hidden — permite que los data-token y el
   badge "EN VIVO" floten por fuera del borde del dashboard sin que
   el propio dashboard (que sí necesita overflow:hidden por sus
   esquinas redondeadas) los recorte. */
.hero-dashboard-wrap {
  position: relative;
}
.dashboard--pro {
  position: relative;
  z-index: 2;
  background: rgba(8,12,22,.97);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 60px 140px rgba(0,0,0,.75),
    0 0 0 1px rgba(255,255,255,.05),
    inset 0 1px 0 rgba(255,255,255,.1);
  animation: floatY 8s ease-in-out infinite;
}

/* ─── Floating cards PRO ─── */
.hero-float--pro {
  position: absolute;
  background: rgba(8,14,26,.88);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 14px 18px;
  backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1);
  z-index: 5;
  min-width: 190px;
}
.hero-float-1 {
  top: -22px; left: -48px;
  animation: floatY 6.5s ease-in-out infinite;
}
.hero-float-2 {
  bottom: 50px; right: -50px;
  animation: floatY2 8.5s ease-in-out infinite;
  min-width: 170px;
}
.hero-float-3 {
  top: 35%; right: -46px;
  animation: floatY 10s ease-in-out infinite;
  animation-delay: -3s;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.hf-inner { display: flex; align-items: center; gap: 11px; }
.hf-icon--ai {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(30,64,175,.3), rgba(37,99,235,.2));
  border: 1px solid rgba(30,64,175,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.hf-data strong {
  display: block;
  font-size: 12px; font-weight: 700; color: #fff;
  margin-bottom: 2px;
  white-space: nowrap;
}
.hf-data span { font-size: 11px; color: rgba(255,255,255,.38); }
.hf-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 100px;
  padding: 3px 10px;
  font-size: 10.5px;
  font-weight: 700;
  margin-top: 8px;
}
.hf-badge--up {
  background: rgba(16,185,129,.15);
  border: 1px solid rgba(16,185,129,.25);
  color: #34D399;
}
.hf-badge--down {
  background: rgba(165,196,255,.12);
  border: 1px solid rgba(165,196,255,.2);
  color: #A5C4FF;
  margin-top: 3px;
}
.hf-sparkline { margin-bottom: 6px; }
.hf-stat-row { display: flex; align-items: center; gap: 10px; }
.hf-big-num {
  font-size: 26px; font-weight: 900; color: #fff; line-height: 1;
}
.hf-big-num span { font-size: 14px; opacity: .45; }
.hf-stat-info { display: flex; flex-direction: column; }
.hf-stat-info > div:first-child { font-size: 10.5px; color: rgba(255,255,255,.4); }

.hf-csat-ring { flex-shrink: 0; }

/* ─── Stats strip PRO ─── */
.hero-stats--pro {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.025);
  backdrop-filter: blur(12px);
}
.hero-stat--pro {
  padding: 32px 28px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.06);
  position: relative;
  transition: background .22s;
}
.hero-stat--pro:hover {
  background: rgba(255,255,255,.03);
}
.hero-stat--pro:last-child { border-right: none; }
.hero-stat--pro .hero-stat-num {
  font-family: var(--font-display);
  font-size: clamp(28px,2.8vw,44px);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 7px;
  background: linear-gradient(130deg, #93C5FD 0%, #A5C4FF 55%, #c4b5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-stat--pro .hero-stat-label {
  font-size: 12px;
  color: rgba(255,255,255,.35);
  font-weight: 500;
  line-height: 1.4;
}

/* ─── Responsive ─── */
/* El hero ahora es apilado (texto arriba, plataforma abajo) siempre,
   por decisión de diseño — ya no cambia de 2 columnas a 1 según el
   ancho. Estas reglas solo ajustan detalles menores en pantallas
   intermedias/chicas. */
@media (max-width: 1180px) and (min-width: 881px) {
  .hero-float-2, .hero-float-3 { display: none; } /* sus offsets están calibrados para el ancho completo; se ocultan aquí para no recortarse */
}
@media (max-width: 880px) {
  .hero-visual--pro { display: flex; justify-content: center; }
  .hero-float-1 { left: -20px; top: -16px; }
  .hero-float-2 { right: -24px; bottom: 30px; }
  .hero-float-3 { right: -20px; }
  .hero-title--pro { font-size: clamp(2.2rem, 6vw, 3.2rem); }
  .hero-social-proof { gap: 12px; }
}
@media (max-width: 768px) {
  .hero--pro { padding-top: 64px; }
  .hero-stats--pro { grid-template-columns: repeat(2,1fr); }
  .hero-float-2, .hero-float-3 { display: none; }
  .hero-ctas--pro { flex-direction: column; align-items: flex-start; }
  .btn-hero-primary, .btn-hero-ghost { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════
   FOOTER PRO — pft (Pro Footer Tulogica)
   v7.0 — Matched to reference screenshots
══════════════════════════════════════════ */

.pft {
  background: #050c1a;
  color: #fff;
  position: relative;
  overflow: hidden;
  font-family: var(--font-body);
}

/* ─── Background layers ─── */
.pft__bg-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(100px);
}
.pft__bg-orb-1 {
  width: 600px; height: 400px;
  top: -80px; left: -100px;
  background: radial-gradient(circle, rgba(37,99,235,.13) 0%, transparent 70%);
}
.pft__bg-orb-2 {
  width: 500px; height: 400px;
  bottom: 0; right: -80px;
  background: radial-gradient(circle, rgba(122,168,255,.1) 0%, transparent 70%);
}
.pft__bg-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 15%, rgba(0,0,0,.5) 85%, transparent 100%);
}

/* ─── Top glow line ─── */
.pft__topline {
  height: 1px;
  position: relative;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(37,99,235,.35) 20%,
    rgba(165,196,255,.65) 50%,
    rgba(122,168,255,.35) 80%,
    transparent 100%);
  z-index: 2;
}
.pft__topline-glow {
  position: absolute;
  top: -3px; left: 50%; transform: translateX(-50%);
  width: 220px; height: 6px;
  background: radial-gradient(ellipse, rgba(165,196,255,.55) 0%, transparent 70%);
  filter: blur(5px);
  display: block;
}

/* ─── Body ─── */
.pft__body {
  position: relative; z-index: 2;
  padding: 68px 0 56px;
}

/* ─── Main grid: brand + 4 cols ─── */
.pft__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.6fr;
  gap: 48px;
  align-items: start;
}

/* ─── Brand column ─── */
.pft__brand {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pft__logo {
  display: inline-block;
  margin-bottom: 18px;
  text-decoration: none;
}
.pft__logo img,
.pft__logo svg {
  max-height: 80px !important; width: auto !important; height: auto !important; max-width: 260px !important; display: block;
  transition: filter .3s ease, transform .3s ease;
  filter: drop-shadow(0 0 0 rgba(122,168,255,0));
}
.pft__logo:hover img,
.pft__logo:hover svg {
  filter: drop-shadow(0 0 14px rgba(122,168,255,.45));
  transform: scale(1.03);
}
.pft__desc {
  font-size: 13.5px;
  line-height: 1.78;
  color: rgba(148,163,184,.55);
  margin-bottom: 18px;
  max-width: 260px;
}

/* Status badge */
.pft__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(52,211,153,.8);
  background: rgba(16,185,129,.07);
  border: 1px solid rgba(16,185,129,.18);
  border-radius: 100px;
  padding: 5px 14px;
  margin-bottom: 22px;
  width: fit-content;
}
.pft__status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 8px rgba(52,211,153,.9);
  flex-shrink: 0;
  animation: pftBlink 2.4s ease-in-out infinite;
}
@keyframes pftBlink { 0%,100%{opacity:1;box-shadow:0 0 8px rgba(52,211,153,.9)} 50%{opacity:.3;box-shadow:none} }

/* Social icons */
.pft__social {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}
.pft__social-btn {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.38);
  text-decoration: none;
  transition: all .22s cubic-bezier(.34,1.56,.64,1);
  position: relative; overflow: hidden;
}
.pft__social-btn::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: var(--sc, #2563EB);
  opacity: 0; transition: opacity .22s;
}
.pft__social-btn svg { position: relative; z-index: 1; }
.pft__social-btn:hover {
  color: #fff;
  border-color: transparent;
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
}
.pft__social-btn:hover::before { opacity: 1; }

/* ─── Nav columns ─── */
.pft__col { display: flex; flex-direction: column; }

.pft__col-title {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2.2px;
  color: rgba(255,255,255,.38);
  margin: 0 0 20px;
  position: relative;
  padding-left: 0;
}

.pft__links {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.pft__links li a {
  display: block;
  font-size: 13.5px;
  color: rgba(148,163,184,.58);
  text-decoration: none;
  padding: 7px 0;
  transition: color .18s, transform .18s;
  position: relative;
}
.pft__links li a::before {
  content: '';
  position: absolute;
  left: 0; bottom: 6px;
  width: 0; height: 1px;
  background: linear-gradient(90deg, #60A5FA, #A5C4FF);
  transition: width .22s;
}
.pft__links li a:hover {
  color: rgba(224,231,255,.85);
  transform: translateX(4px);
}
.pft__links li a:hover::before { width: 20px; }

/* ─── Contact column ─── */
.pft__contact-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.pft__contact-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.025);
  text-decoration: none;
  transition: all .22s;
}
.pft__contact-item:not(.pft__contact-item--static):hover {
  background: rgba(37,99,235,.09);
  border-color: rgba(96,165,250,.2);
  transform: translateX(4px);
}
.pft__contact-item--static { cursor: default; }

.pft__contact-ico {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.pft__contact-item:not(.pft__contact-item--static):hover .pft__contact-ico {
  transform: scale(1.12);
}
.pft__contact-ico--blue   { background: rgba(37,99,235,.18);  color: #60A5FA; border: 1px solid rgba(37,99,235,.28); }
.pft__contact-ico--green  { background: rgba(37,211,102,.13); color: #25D366; border: 1px solid rgba(37,211,102,.22); }
.pft__contact-ico--cyan   { background: rgba(165,196,255,.1);  color: #A5C4FF; border: 1px solid rgba(165,196,255,.18); }
.pft__contact-ico--violet { background: rgba(30,64,175,.13); color: #A5C4FF; border: 1px solid rgba(30,64,175,.22); }

.pft__contact-val {
  font-size: 13px;
  font-weight: 500;
  color: rgba(186,210,255,.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Divider ─── */
.pft__divider {
  position: relative; z-index: 2;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.07) 20%,
    rgba(255,255,255,.1) 50%,
    rgba(255,255,255,.07) 80%,
    transparent 100%);
  margin: 0 32px;
}

/* ─── Bottom bar ─── */
.pft__bottom {
  position: relative; z-index: 2;
  background: rgba(0,0,0,.2);
}
.pft__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  flex-wrap: wrap;
}
.pft__copy {
  font-size: 12.5px;
  color: rgba(255,255,255,.22);
}
.pft__copy-brand {
  color: rgba(255,255,255,.38);
  text-decoration: none;
  font-weight: 600;
  transition: color .18s;
}
.pft__copy-brand:hover { color: rgba(255,255,255,.7); }

.pft__legal {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pft__legal a {
  font-size: 12.5px;
  color: rgba(255,255,255,.25);
  text-decoration: none;
  transition: color .18s;
}
.pft__legal a:hover { color: rgba(255,255,255,.65); }
.pft__legal-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  display: inline-block;
  flex-shrink: 0;
}

/* ─── Responsive ─── */
@media (max-width: 1200px) {
  .pft__grid { grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 36px; }
  .pft__col--contact { grid-column: 1 / -1; }
  .pft__contact-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 8px; }
}
@media (max-width: 900px) {
  .pft__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .pft__brand { grid-column: 1 / -1; }
  .pft__desc { max-width: 100%; }
  .pft__body { padding: 52px 0 44px; }
}
@media (max-width: 580px) {
  .pft__grid { grid-template-columns: 1fr; gap: 28px; }
  .pft__bottom-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .pft__divider { margin: 0 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   TULOGICA V7 PRO — FOOTER & MENU UPGRADE (AI Edition)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Extra orb ─── */
.pft__bg-orb-3 {
  width: 300px; height: 300px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(165,196,255,.05) 0%, transparent 70%);
}

/* ─── Animated topline particles ─── */
.pft__topline-particle {
  position: absolute; top: -2px;
  width: 4px; height: 4px; border-radius: 50%;
  background: #A5C4FF;
  animation: pftParticleTravel 6s linear infinite;
}
.pft__topline-particle--1 { animation-delay: 0s; }
.pft__topline-particle--2 { animation-delay: 3s; background: #A5C4FF; }
@keyframes pftParticleTravel { 0%{left:-1%;opacity:0} 5%{opacity:1} 95%{opacity:1} 100%{left:101%;opacity:0} }

/* ─── PRE-FOOTER CTA BANNER ─── */
.pft__cta-banner {
  position: relative; z-index: 2;
  padding: 72px 0 60px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.pft__cta-inner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 20px;
}
.pft__cta-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(122,168,255,.15);
  border: 1px solid rgba(122,168,255,.3);
  color: #C4B5FD;
  padding: 6px 18px; border-radius: 100px;
  font-size: 12px; font-weight: 700; letter-spacing: .4px;
  animation: pftBadgePop .6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes pftBadgePop { from{transform:scale(.85);opacity:0} to{transform:scale(1);opacity:1} }
.pft__cta-title {
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 800; color: #fff;
  letter-spacing: -1px; line-height: 1.2;
  margin: 0; max-width: 680px;
}
.pft__cta-sub {
  font-size: 15px; color: rgba(148,163,184,.65); margin: 0;
}
.pft__cta-actions {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  margin-top: 8px;
}
.pft__cta-btn-main {
  background: linear-gradient(135deg, #2563EB, #7AA8FF) !important;
  box-shadow: 0 0 30px rgba(122,168,255,.4), 0 4px 14px rgba(37,99,235,.4) !important;
  border-color: transparent !important;
  animation: pftGlowPulse 3s ease-in-out infinite;
}
@keyframes pftGlowPulse { 0%,100%{box-shadow:0 0 30px rgba(122,168,255,.4),0 4px 14px rgba(37,99,235,.4)} 50%{box-shadow:0 0 50px rgba(122,168,255,.6),0 8px 28px rgba(37,99,235,.5)} }
.pft__cta-trust {
  display: flex; gap: 24px; flex-wrap: wrap; justify-content: center;
  font-size: 12.5px; color: rgba(148,163,184,.55); margin-top: 4px;
}

/* ─── STATS STRIP ─── */
.pft__stats-strip {
  position: relative; z-index: 2;
  padding: 28px 0;
  background: rgba(255,255,255,.023);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.pft__stats-row {
  display: flex; align-items: center; justify-content: center;
  gap: 0; flex-wrap: wrap;
}
.pft__stat {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 0 48px;
}
.pft__stat-num {
  font-size: 28px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #60A5FA, #A5C4FF);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; letter-spacing: -1px; line-height: 1;
}
.pft__stat-lbl {
  font-size: 11px; color: rgba(148,163,184,.5);
  font-weight: 500; text-align: center;
}
.pft__stat-sep {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.1), transparent);
  flex-shrink: 0;
}

/* ─── AI BADGE (brand column) ─── */
.pft__ai-badge {
  display: flex; align-items: center; gap: 11px;
  background: linear-gradient(135deg, rgba(37,99,235,.1), rgba(122,168,255,.1));
  border: 1px solid rgba(122,168,255,.2);
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 16px;
  position: relative; overflow: hidden;
}
.pft__ai-badge::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(122,168,255,.07), transparent);
  animation: shimmer 4s ease-in-out infinite;
}
.pft__ai-badge-icon { font-size: 22px; flex-shrink: 0; }
.pft__ai-badge-text { display: flex; flex-direction: column; gap: 2px; }
.pft__ai-badge-text strong { font-size: 12px; font-weight: 700; color: rgba(196,181,253,.9); }
.pft__ai-badge-text small { font-size: 10.5px; color: rgba(148,163,184,.55); }
.pft__ai-pulse {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: #A5C4FF;
  box-shadow: 0 0 8px #A5C4FF;
  animation: pftBlink 2.4s ease-in-out infinite;
}

/* ─── Links with icon ─── */
.pft__link-icon {
  margin-right: 6px; font-size: 13px;
  display: inline-block; width: 18px; text-align: center;
}
.pft__link--ai a, a.pft__link--ai {
  position: relative;
}
.pft__link-badge {
  display: inline-block;
  background: linear-gradient(135deg, #7AA8FF, #2563EB);
  color: #fff; font-size: 9px; font-weight: 700;
  padding: 1px 6px; border-radius: 100px;
  margin-left: 6px; letter-spacing: .3px;
  vertical-align: middle; text-transform: uppercase;
}

/* ─── Newsletter widget ─── */
.pft__newsletter {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.pft__newsletter-title {
  font-size: 12px; font-weight: 700;
  color: rgba(255,255,255,.45); margin: 0 0 10px;
}
.pft__newsletter-form {
  display: flex; gap: 0;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; overflow: hidden;
  transition: border-color .2s;
}
.pft__newsletter-form:focus-within {
  border-color: rgba(96,165,250,.4);
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.pft__newsletter-input {
  flex: 1; background: none; border: none; outline: none;
  padding: 9px 13px; font-size: 12.5px;
  color: rgba(255,255,255,.8);
  font-family: inherit;
}
.pft__newsletter-input::placeholder { color: rgba(148,163,184,.4); }
.pft__newsletter-btn {
  background: linear-gradient(135deg, #2563EB, #7AA8FF);
  border: none; color: #fff; cursor: pointer;
  padding: 0 16px; font-size: 16px; font-weight: 700;
  transition: opacity .2s;
}
.pft__newsletter-btn:hover { opacity: .85; }

/* ─── Contact arrow ─── */
.pft__contact-arrow {
  margin-left: auto; font-size: 14px;
  color: rgba(255,255,255,.2);
  transition: color .2s, transform .2s;
}
.pft__contact-item:not(.pft__contact-item--static):hover .pft__contact-arrow {
  color: #60A5FA; transform: translateX(3px);
}
.pft__contact-item--wa:hover {
  background: rgba(37,211,102,.09) !important;
  border-color: rgba(37,211,102,.2) !important;
}

/* ─── Trust badges ─── */
.pft__trust {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px;
}
.pft__trust-badge {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: rgba(148,163,184,.5);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px; padding: 4px 10px;
}
.pft__trust-badge span { color: rgba(148,163,184,.6); }

/* ─── Divider glow ─── */
.pft__divider { position: relative; }
.pft__divider-glow {
  position: absolute; left: 50%; top: -3px;
  transform: translateX(-50%);
  width: 140px; height: 6px;
  background: radial-gradient(ellipse, rgba(96,165,250,.45) 0%, transparent 70%);
  filter: blur(4px);
  display: block;
}

/* ─── Bottom bar extras ─── */
.pft__copy-ai {
  color: rgba(165,196,255,.55);
  font-size: 11px;
}
.pft__made-with {
  font-size: 12px;
  color: rgba(255,255,255,.22);
}

/* ─── Header CTA tooltip — refuerza los términos del trial justo donde
   la gente realmente hace clic para empezar (antes solo vivía en un FAQ
   colapsado más abajo en la página). ─── */
.header-btn-cta--tooltip { position: relative; }
/* Badge de idioma (PT) — persistente en el header, toda página. */
.header-lang-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.75);
  font-size: 12.5px;
  font-weight: 700;
  transition: all .2s ease;
}
.header-lang-badge:hover {
  border-color: rgba(37,99,235,.4);
  background: rgba(37,99,235,.12);
  color: #fff;
}
@media (max-width: 1080px) {
  .header-lang-badge span { display: none; } /* solo la bandera en pantallas más chicas */
  .header-lang-badge { padding: 6px; }
}
.header-cta-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: #1a1a2e; color: #fff;
  font-size: 11.5px; font-weight: 600;
  padding: 7px 12px; border-radius: 8px;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateY(-6px);
  transition: all .2s ease;
  border: 1px solid rgba(255,255,255,.1);
  z-index: 200;
}
.header-cta-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%; right: 14px;
  border: 5px solid transparent;
  border-bottom-color: #1a1a2e;
}
.header-btn-cta--tooltip:hover .header-cta-tooltip,
.header-btn-cta--tooltip:focus-visible .header-cta-tooltip {
  opacity: 1; transform: translateY(0);
}
@media (max-width: 900px) {
  .header-cta-tooltip { display: none; } /* sin hover en móvil; ya está en el FAQ y el CTA principal */
}

.nav-promo-trial {
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,.5);
  margin: 8px 0 0;
}

.mobile-cta-note {
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,.5);
  margin: 8px 0 0;
}

/* ─── WA Float upgrade (tooltip) ─── */
.wa-tooltip {
  position: absolute;
  right: calc(100% + 10px); top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: #1a1a2e; color: #fff;
  font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 8px;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: all .25s;
  border: 1px solid rgba(255,255,255,.1);
}
.wa-float:hover .wa-tooltip {
  opacity: 1; transform: translateY(-50%) translateX(0);
}

/* ─── Back-top ripple ─── */
.back-top__ripple {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(37,99,235,.4);
  animation: rippleOut 2s ease-out infinite;
  pointer-events: none;
}
@keyframes rippleOut { 0%{transform:scale(1);opacity:.5} 100%{transform:scale(1.8);opacity:0} }
.back-top.visible .back-top__ripple { animation: rippleOut 2s ease-out infinite; }

/* ─── NAV: AI tag on menu items ─── */
.nav-ai-tag {
  display: inline-flex; align-items: center;
  background: linear-gradient(135deg, rgba(122,168,255,.15), rgba(37,99,235,.15));
  border: 1px solid rgba(122,168,255,.25);
  color: #C4B5FD; font-size: 9.5px; font-weight: 700;
  padding: 1px 7px; border-radius: 100px;
  margin-left: 6px; letter-spacing: .3px;
  vertical-align: middle;
}
.nav-promo-badge--ai {
  background: linear-gradient(135deg, rgba(122,168,255,.15), rgba(37,99,235,.15)) !important;
  border: 1px solid rgba(122,168,255,.3) !important;
  color: #C4B5FD !important;
}

/* ─── Mobile AI tag ─── */
.mobile-link--ai {
  background: linear-gradient(90deg, rgba(122,168,255,.06), transparent);
  border-left: 2px solid rgba(122,168,255,.3);
}
.mobile-ai-tag {
  display: inline-block; background: #7AA8FF;
  color: #fff; font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 4px;
  margin-left: 6px; letter-spacing: .3px;
  vertical-align: middle;
}

/* ─── Nav promo card: stronger AI gradient ─── */
.nav-promo-card {
  background: linear-gradient(135deg, rgba(37,99,235,.07) 0%, rgba(122,168,255,.12) 100%) !important;
  border: 1px solid rgba(122,168,255,.18) !important;
}

/* ─── RESPONSIVE UPGRADES ─── */
@media (max-width: 900px) {
  .pft__cta-banner { padding: 52px 0 44px; }
  .pft__cta-title { font-size: 24px; }
  .pft__stats-row { gap: 0; }
  .pft__stat { padding: 12px 24px; }
  .pft__stat-num { font-size: 22px; }
  .pft__stat-sep { height: 36px; }
  .pft__cta-trust { gap: 14px; font-size: 11.5px; }
}
@media (max-width: 600px) {
  .pft__cta-banner { padding: 40px 0 36px; }
  .pft__cta-actions { flex-direction: column; align-items: stretch; }
  .pft__cta-actions .btn { text-align: center; justify-content: center; }
  .pft__stats-strip { display: none; }
  .pft__trust { justify-content: flex-start; }
  .pft__bottom-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pft__made-with { display: none; }
  .wa-tooltip { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — v6.3 consolidado
   Garantiza hamburger, menu drawer y tabs en todos los móviles
═══════════════════════════════════════════════════════════ */

/* ── Promo bar: siempre 1 línea en móvil ── */
@media(max-width:1100px){
  .promo-bar{padding:8px 40px 8px 16px;font-size:12px;min-height:40px}
  .promo-bar__inner{flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
  .promo-bar__inner > span:not(.promo-dot){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .promo-bar__cta{flex-shrink:0;font-size:11px;padding:4px 12px}
  /* Header sticky sube al nuevo alto de la promo bar */
  .site-header{top:40px!important}
}
@media(max-width:480px){
  .promo-bar{padding:7px 36px 7px 12px;min-height:36px;font-size:11.5px}
  .promo-bar__cta{display:none}
  .site-header{top:36px!important}
}

/* ── Platform Tabs: scroll horizontal sin solapamiento ── */
@media(max-width:1100px){
  .platform-tabs,.prod-tabs{
    overflow-x:auto!important;overflow-y:visible!important;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    flex-wrap:nowrap!important;padding-bottom:4px;gap:4px
  }
  .platform-tabs::-webkit-scrollbar,.prod-tabs::-webkit-scrollbar{display:none}
  .platform-tab,.prod-tab{
    white-space:nowrap!important;flex-shrink:0!important;
    font-size:12.5px;padding:9px 14px
  }
  .uc2-tabs{
    overflow-x:auto!important;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;flex-wrap:nowrap!important;
    gap:8px;justify-content:flex-start!important;padding-bottom:4px
  }
  .uc2-tabs::-webkit-scrollbar{display:none}
  .uc2-tab{flex-shrink:0!important;white-space:nowrap!important;font-size:13px;padding:10px 18px}
}

/* ── Mobile Menu Drawer ancho ── */
@media(max-width:1100px){
  .mobile-menu{width:min(380px,100vw)}
}
@media(max-width:400px){
  .mobile-menu{width:100vw}
}

/* ── Hero en tablet/móvil ── */
@media(max-width:1024px){
  .hero{padding-top:60px;min-height:auto}
  .hero-inner{grid-template-columns:1fr;gap:40px;text-align:center;padding-bottom:48px}
  .hero-channels,.hero-ctas,.hero-trust{justify-content:center}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-visual{display:none}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .platform-content{grid-template-columns:1fr;gap:40px}
  .uc2-panel{grid-template-columns:1fr;gap:32px}
  .uc2-feats{grid-template-columns:repeat(2,1fr)}
  .roi-stats-row{grid-template-columns:repeat(2,1fr)}
  .roi-compare{grid-template-columns:1fr;max-width:500px;margin:0 auto}
  .testimonials-wall{grid-template-columns:repeat(2,1fr)}
  .pricing-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto}
  .plan-card.popular{transform:none}
  .steps-timeline::before{display:none}
  .steps-timeline{grid-template-columns:repeat(2,1fr)}
  .faq-grid{grid-template-columns:1fr}
  .security-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:repeat(3,1fr)}
  .footer-brand{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:24px}
  .footer-brand-desc{flex:1 1 300px}
  .footer-social{margin-top:0}
  .integrations-featured{grid-template-columns:1fr 1fr}
}

/* ── Móvil ≤ 768px ── */
@media(max-width:768px){
  .container{padding:0 16px}
  .section{padding:60px 0}
  h1,.hero-title{font-size:clamp(1.9rem,7.5vw,2.8rem)!important;letter-spacing:-0.04em!important}
  h2{font-size:clamp(1.4rem,5.5vw,2.1rem)!important}
  .roi-card-num{font-size:clamp(34px,9vw,46px)!important}
  .uc2-metric-num{font-size:clamp(34px,9vw,46px)!important}
  .plan-price{font-size:clamp(36px,10vw,48px)!important}
  .hero{padding-top:48px}
  .hero-ctas{flex-direction:column;align-items:center}
  .hero-ctas .btn{width:100%;max-width:340px;justify-content:center}
  .hero-stat{padding:18px 14px}
  .fbento{grid-template-columns:1fr!important;gap:12px}
  .fbento__card:nth-child(n){grid-column:span 1!important}
  .testimonials-wall{grid-template-columns:1fr}
  .steps-timeline{grid-template-columns:1fr;gap:24px}
  .integrations-featured{grid-template-columns:1fr}
  .int-api-box{flex-direction:column;text-align:center;gap:20px}
  .cta-final-btns{flex-direction:column;align-items:center}
  .cta-final-btns .btn{width:100%;max-width:340px;justify-content:center}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1;flex-direction:column}
  .prc-grid--3col,.prc-grid--4col{grid-template-columns:1fr!important;max-width:420px;margin:0 auto}
  .prc-card--featured{transform:none!important}
  .pft__bottom-inner{flex-direction:column;align-items:flex-start;gap:10px}
  .hero--pro{padding-top:52px}
  .hero-stats--pro{grid-template-columns:repeat(2,1fr)}
  .hero-float-2,.hero-float-3{display:none}
  .hero-ctas--pro{flex-direction:column;align-items:stretch}
  .btn-hero-primary,.btn-hero-ghost{width:100%;justify-content:center}
}

/* ── Móvil pequeño ≤ 480px ── */
@media(max-width:480px){
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:1px}
  .hero-stat{padding:14px 10px}
  .roi-stats-row{grid-template-columns:1fr 1fr;gap:10px}
  .uc2-feats{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:10px}
  .prc-ai-strip{height:36px}
  .prc-table-planbar{grid-template-columns:100px repeat(3,minmax(80px,1fr));font-size:11px}
  .prc-planbar__price{display:none}
  .pft__cta-actions{flex-direction:column;align-items:stretch}
  .pft__stats-strip{display:none}
  .pft__made-with{display:none}
  .wa-tooltip{display:none}
}

/* ── Overflow horizontal ── */
@media(max-width:768px){
  .hero,.section,.footer,.promo-bar{overflow-x:hidden}
  /* BUGFIX v19: .site-header eliminado de overflow-x:hidden — causaba clipping del mobile-menu drawer (position:fixed) en Safari/Chrome móvil */
  img{max-width:100%;height:auto}
}



/* ═══════════════════════════════════════════════════════════
   MEJORAS VITALES v20
   ═══════════════════════════════════════════════════════════ */

/* ── 1. FOCUS-VISIBLE — Accesibilidad teclado (WCAG 2.1 AA) ── */
:focus-visible{outline:3px solid #2563EB;outline-offset:3px;border-radius:4px}
:focus:not(:focus-visible){outline:none}
.btn:focus-visible,.nav-link:focus-visible,.mobile-link:focus-visible{outline:3px solid #7AA8FF;outline-offset:2px}

/* ── 2. TAP TARGETS — Mínimo 44×44px en móvil (WCAG) ── */
@media(max-width:768px){
  .nav-toggle{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
  .mobile-link{min-height:44px;display:flex;align-items:center}
  .mobile-section__toggle{min-height:44px}
  .mobile-top-link{min-height:44px;display:flex;align-items:center}
  .faq-q{min-height:48px}
  .wa-float{width:56px!important;height:56px!important;min-width:56px!important;min-height:56px!important}
  .back-top{width:44px!important;height:44px!important}
  .btn{min-height:44px}
}

/* ── 3. FONT-DISPLAY SWAP — evita FOIT (Flash of Invisible Text) ── */
@font-face{font-display:swap}

/* ── 4. SELECTION STYLE — branding en selección de texto ── */
::selection{background:rgba(37,99,235,.25);color:inherit}
::-moz-selection{background:rgba(37,99,235,.25);color:inherit}

/* ── 5. SCROLLBAR STYLING — para el mobile menu drawer ── */
.mobile-menu::-webkit-scrollbar{width:4px}
.mobile-menu::-webkit-scrollbar-track{background:transparent}
.mobile-menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:4px}
.mobile-menu::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.25)}

/* ── 6. PRINT STYLES ── */
@media print{
  .promo-bar,.site-header,.mobile-menu,.mobile-overlay,.wa-float,.back-top,
  .hero-particles,.hero-float,.nav-toggle,footer{display:none!important}
  body{background:#fff!important;color:#000!important}
  a{color:#000!important;text-decoration:underline}
  .hero{min-height:auto!important;padding:40px 0!important}
  .hero-title{font-size:28px!important;color:#000!important}
}

/* ── 7. SMOOTH IMAGE LOADING — evita layout shift ── */
img{max-width:100%;height:auto;vertical-align:middle}
img[loading="lazy"]{opacity:0;transition:opacity .3s ease}
img[loading="lazy"].loaded,img:not([loading]){opacity:1}

/* ── 8. BETTER BUTTON STATES ── */
.btn:active{transform:scale(.97)!important}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}

/* ── 9. MOBILE MENU SCROLL INDICATOR ── */
@media(max-width:1100px){
  .mobile-menu__inner{padding-bottom:env(safe-area-inset-bottom,40px)}
}

/* ── 10. SAFE AREA para notch de iPhone ── */
.site-header{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.promo-bar{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.mobile-menu{padding-bottom:env(safe-area-inset-bottom)}
.wa-float{bottom:calc(24px + env(safe-area-inset-bottom,0px))!important}


/* ═══════════════════════════════════════════════════════════
   MEJORAS PREMIUM v21
   Scroll progress · Card hovers · Micro-animaciones · UX polish
   ═══════════════════════════════════════════════════════════ */

/* ── 1. SCROLL PROGRESS BAR — indicador top de página ── */
#tl-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #2563EB, #7AA8FF, #1E40AF);
  z-index: 9999;
  transition: width .1s linear;
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 8px rgba(37,99,235,.5);
  pointer-events: none;
}

/* ── 2. CARD HOVER EFFECTS — lift premium ── */
.feature-card,
.channel-card,
.int-card,
.testimonial-card,
.fbento__card {
  transition: transform .25s var(--ease-spring), box-shadow .25s ease !important;
  will-change: transform;
}
.feature-card:hover,
.channel-card:hover,
.int-card:hover {
  transform: translateY(-6px) scale(1.015) !important;
  box-shadow: 0 20px 50px rgba(37,99,235,.15), 0 6px 16px rgba(0,0,0,.08) !important;
}
.testimonial-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(37,99,235,.12), 0 4px 12px rgba(0,0,0,.06) !important;
}

/* ── 3. NÚMERO ANIMADO — counter effect ── */
@keyframes tlCountUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stat-number.tl-counted {
  animation: tlCountUp .6s var(--ease-out) both;
}

/* ── 4. SKELETON LOADER — mientras cargan imágenes ── */
.tl-skeleton {
  background: linear-gradient(90deg, var(--slate-100) 25%, var(--slate-50) 50%, var(--slate-100) 75%);
  background-size: 200% 100%;
  animation: tlSkeleton 1.6s ease-in-out infinite;
  border-radius: var(--r);
}
@keyframes tlSkeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── 5. TOOLTIP MEJORADO — para badges y etiquetas ── */
[data-tl-tip] {
  position: relative;
  cursor: help;
}
[data-tl-tip]::after {
  content: attr(data-tl-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, transform .2s, visibility .2s;
  pointer-events: none;
  z-index: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,.16);
  font-family: var(--font-body);
}
[data-tl-tip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ── 6. ACTIVE NAV LINK highlight ── */
.nav-link.active,
.nav-link[aria-current="page"] {
  color: var(--blue-600) !important;
  background: rgba(37,99,235,.07) !important;
}

/* ── 7. SECTION DIVIDERS — separadores sutiles ── */
.section + .section {
  border-top: 1px solid var(--slate-100);
}

/* ── 8. INPUT FOCUS RING mejorado ── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select {
  transition: border-color .2s, box-shadow .2s, background .2s;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--blue-500) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.15) !important;
}

/* ── 9. BADGE PULSE — para elementos "Nuevo" ── */
.badge-new,
.hero-badge {
  position: relative;
}
.badge-new::before,
.hero-badge::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: inherit;
  opacity: 0;
  animation: badgePulse 2.5s ease-out infinite;
}
@keyframes badgePulse {
  0%   { transform: scale(1);   opacity: .4; }
  100% { transform: scale(1.6); opacity: 0;  }
}

/* ── 10. SMOOTH SECTION TRANSITIONS — reveal mejorado ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal.revealed.delay-1 { transition-delay: .1s; }
.reveal.revealed.delay-2 { transition-delay: .2s; }
.reveal.revealed.delay-3 { transition-delay: .3s; }
.reveal.revealed.delay-4 { transition-delay: .4s; }

/* ── 11. PLAN CARD popular badge glow ── */
.plan-card.popular .plan-badge,
.prc-card--featured .prc-badge {
  animation: glowPulse 3s ease-in-out infinite;
}

/* ── 12. MEJOR LEGIBILIDAD — line-height y paragraph spacing ── */
.section p,
.feature-desc,
.channel-card p,
.testimonial-body {
  line-height: 1.8;
}
.section-header p {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ── 13. CTA BUTTON RIPPLE effect ── */
.btn-primary {
  overflow: hidden;
}
.btn-primary .btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  transform: scale(0);
  animation: btnRipple .6s linear;
  pointer-events: none;
}
@keyframes btnRipple {
  to { transform: scale(4); opacity: 0; }
}

/* ── 14. FOOTER LINK hovers ── */
.footer a {
  transition: color .18s, opacity .18s;
}
.footer a:hover {
  opacity: .85;
}

/* ── 15. IMAGEN carga suave mejorada ── */
img.tl-img-loaded {
  animation: tlImgFade .4s ease both;
}
@keyframes tlImgFade {
  from { opacity: 0; filter: blur(4px); }
  to   { opacity: 1; filter: blur(0); }
}

/* ── 16. MODAL / POPUP transition ── */
.tl-popup-wrap {
  transition: opacity .25s ease, visibility .25s;
}
.tl-popup-wrap.open {
  opacity: 1;
  visibility: visible;
}

/* ── 17. STICKY HEADER shadow al hacer scroll ── */
.site-header.scrolled {
  box-shadow: 0 4px 32px rgba(8,14,29,.08), 0 1px 0 rgba(226,232,240,.8) !important;
}

/* ── 18. INTEGRATIONS GRID hover glow ── */
.int-card:hover .int-logo {
  filter: drop-shadow(0 0 8px rgba(37,99,235,.4));
  transform: scale(1.1);
  transition: filter .2s, transform .2s;
}

/* ── 19. TAB ACTIVE INDICATOR — línea inferior animada ── */
.platform-tab,
.prod-tab,
.uc2-tab {
  position: relative;
}
.platform-tab.active::after,
.prod-tab.active::after,
.uc2-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, var(--blue-600), var(--cyan-500));
  border-radius: 2px;
  transform: translateX(-50%);
  animation: tabIndicator .3s var(--ease-spring) both;
}
@keyframes tabIndicator {
  from { width: 0; opacity: 0; }
  to   { width: 60%; opacity: 1; }
}

/* ── 20. REDUCED MOTION — respeta preferencias de accesibilidad ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  #tl-scroll-progress {
    display: none;
  }
}

/* Badge "Meta Tech Provider" junto al logo del header */
.header-meta-badge {
  height: 26px;
  width: auto;
  display: block;
}
@media (max-width: 900px) {
  .header-meta-badge { height: 20px; }
}
@media (max-width: 480px) {
  /* En celulares angostos, logo + badge + botón de menú se apretaban
     demasiado — se prioriza el logo y el menú, el badge se oculta. */
  .header-meta-badge-wrap { display: none; }
}

/* Badge "Meta Business Partners" en la sección de marcas de confianza */
.trusted-meta-partner {
  display: flex;
  justify-content: center;
  margin: 20px 0 8px;
}
.trusted-meta-partner img {
  height: 30px;
  width: auto;
  background: rgba(255,255,255,.9);
  border-radius: 100px;
  padding: 5px 14px;
  backdrop-filter: blur(6px);
}
html[data-theme="light"] .trusted-meta-partner img {
  background: transparent;
  padding: 0;
  opacity: .9;
}

/* Enlace "Ver los 12 canales" — se distingue un poco de los ítems
   normales del menú, ya que enlaza a la vitrina completa. */
.nav-dropdown__item--seeall {
  border-top: 1px solid rgba(37,99,235,.12);
  margin-top: 4px;
  padding-top: 12px;
}
.nav-dropdown__item--seeall strong { color: var(--primary, #2563EB); }

/* ── Fondo propio para páginas de canal (WhatsApp, Chat Web, Facebook,
   Instagram, TikTok, etc.) — en vez del mesh de manchas difuminadas
   genérico (el mismo patrón que usan cientos de páginas de IA), una
   franja diagonal con el degradado real de marca, con líneas de
   circuito conectando puntos, más geométrico y con más carácter. ── */
.cwa-hero-bg {
  background:
    linear-gradient(125deg, rgba(37,99,235,.32) 0%, rgba(122,168,255,.16) 32%, transparent 55%),
    linear-gradient(305deg, rgba(122,168,255,.22) 0%, transparent 40%);
}
.cwa-hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, transparent 49.5%, rgba(37,99,235,.5) 49.5%, rgba(37,99,235,.5) 50.5%, transparent 50.5%),
    linear-gradient(0deg, transparent 49.5%, rgba(122,168,255,.35) 49.5%, rgba(122,168,255,.35) 50.5%, transparent 50.5%);
  background-size: 340px 340px, 340px 340px;
  background-position: 15% 0, 0 40%;
  opacity: .25;
  mask-image: radial-gradient(ellipse 70% 60% at 30% 20%, black 0%, transparent 75%);
}
html[data-theme="light"] .cwa-hero-bg {
  background:
    linear-gradient(125deg, rgba(37,99,235,.1) 0%, rgba(122,168,255,.06) 32%, transparent 55%),
    linear-gradient(305deg, rgba(122,168,255,.08) 0%, transparent 40%) !important;
}
html[data-theme="light"] .cwa-hero-bg::before { opacity: .12 !important; }