/* ============================================================
   HELPCES — Sistema de diseño
   Paleta extraída del isotipo: azul eléctrico → violeta → rojo señal
   Estilo: dark glass premium, inspirado en Stripe / Framer / Vercel
   ============================================================ */

:root{
  /* ---- Marca ---- */
  --blue:        #2401FE;
  --blue-2:      #4C6FFF;
  --violet:      #7A0FC4;
  --magenta:     #A2006C;
  --red:         #E0102D;

  --gradient-brand: linear-gradient(115deg, var(--blue) 0%, var(--violet) 52%, var(--red) 100%);
  --gradient-brand-soft: linear-gradient(115deg, rgba(36,1,254,.22) 0%, rgba(122,15,196,.22) 52%, rgba(224,16,45,.18) 100%);
  --gradient-text: linear-gradient(100deg, #6E8CFF 0%, #C084FC 45%, #FF6584 100%);

  /* ---- Superficie / fondo ---- */
  --bg-0:        #07040F;
  --bg-1:        #0B0618;
  --bg-2:        #120A24;
  --bg-mesh-a:   rgba(36,1,254,.35);
  --bg-mesh-b:   rgba(162,0,108,.30);
  --bg-mesh-c:   rgba(224,16,45,.18);

  --glass:       rgba(255,255,255,.055);
  --glass-strong:rgba(255,255,255,.09);
  --glass-border:rgba(255,255,255,.12);
  --glass-border-hi: rgba(255,255,255,.22);

  /* ---- Texto ---- */
  --text-0:      #F7F5FF;
  --text-1:      #CFC9E8;
  --text-2:      #948CB8;
  --text-3:      #6C6590;

  /* ---- Tipografía ---- */
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Display", Roboto, Helvetica, Arial, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "SF Mono", "Cascadia Code", Consolas, monospace;

  /* ---- Escala ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --container: 1240px;
  --header-h: 84px;

  --ease: cubic-bezier(.16,.8,.28,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

/* ============ RESET ============ */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{ margin:0; }
ul[class],ol[class]{ list-style:none; padding:0; }
html,body{ height:100%; }
body{
  font-family: var(--font-body);
  background: var(--bg-0);
  color: var(--text-1);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }
::selection{ background: var(--violet); color:#fff; }
:focus-visible{ outline: 2px solid var(--blue-2); outline-offset: 3px; border-radius:4px; }

/* ============ FONDO DE PÁGINA (mesh) ============ */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(60% 45% at 12% 8%, var(--bg-mesh-a), transparent 60%),
    radial-gradient(50% 40% at 92% 18%, var(--bg-mesh-c), transparent 65%),
    radial-gradient(55% 50% at 50% 100%, var(--bg-mesh-b), transparent 60%),
    var(--bg-0);
  pointer-events:none;
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity:.35;
  pointer-events:none;
}

/* ============ CONTENEDOR / LAYOUT ============ */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }
.section{ position:relative; padding:120px 0; }
.section-sm{ padding:72px 0; }
.section-head{ max-width:680px; margin-bottom:64px; }
.section-head.center{ margin-inline:auto; text-align:center; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color: var(--blue-2);
  padding:6px 14px 6px 10px;
  border-radius: var(--radius-pill);
  background: var(--glass);
  border:1px solid var(--glass-border);
  margin-bottom:20px;
}
.eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background: var(--gradient-brand);
  box-shadow: 0 0 12px var(--blue-2);
}

h1,h2,h3,h4{ font-family:var(--font-display); color:var(--text-0); font-weight:700; letter-spacing:-.02em; line-height:1.08; }
h1{ font-size: clamp(2.6rem, 5.6vw, 4.6rem); letter-spacing:-.03em; }
h2{ font-size: clamp(2rem, 3.6vw, 3rem); }
h3{ font-size: clamp(1.3rem, 2vw, 1.6rem); }
h4{ font-size: 1.05rem; }
p{ color:var(--text-1); }
.lead{ font-size: clamp(1.05rem, 1.6vw, 1.25rem); color:var(--text-1); }
.text-muted{ color:var(--text-2); }
.grad-text{
  background: var(--gradient-text);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ============ BOTONES ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius: var(--radius-pill);
  font-weight:600; font-size:.98rem; white-space:nowrap;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, border-color .3s;
  will-change: transform;
}
.btn:active{ transform: scale(.97); }
.btn-primary{
  background: var(--gradient-brand); color:#fff;
  box-shadow: 0 8px 30px -8px rgba(122,15,196,.65), 0 2px 8px -2px rgba(224,16,45,.4);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 40px -10px rgba(122,15,196,.8), 0 4px 14px -4px rgba(224,16,45,.5); }
.btn-ghost{
  background: var(--glass); color:var(--text-0);
  border:1px solid var(--glass-border);
  backdrop-filter: blur(14px);
}
.btn-ghost:hover{ border-color:var(--glass-border-hi); background:var(--glass-strong); transform: translateY(-2px); }
.btn-sm{ padding:10px 18px; font-size:.86rem; }
.btn-block{ width:100%; }
.btn-whatsapp{
  background: linear-gradient(120deg,#1FBE5B,#12A34A); color:#fff;
  box-shadow: 0 8px 26px -8px rgba(18,163,74,.6);
}
.btn-whatsapp:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -8px rgba(18,163,74,.75); }

/* ============ GLASS CARD ============ */
.glass{
  background: var(--glass);
  border:1px solid var(--glass-border);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-radius: var(--radius-lg);
}
.card{
  position:relative;
  padding:32px;
  transition: transform .45s var(--ease), border-color .35s, background .35s, box-shadow .45s var(--ease);
}
.card:hover{
  transform: translateY(-6px);
  border-color: var(--glass-border-hi);
  background: var(--glass-strong);
  box-shadow: 0 24px 60px -20px rgba(36,1,254,.35);
}
.card-icon{
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: var(--gradient-brand-soft);
  border:1px solid var(--glass-border);
  margin-bottom:22px;
}
.card-icon svg{ width:24px; height:24px; stroke:var(--text-0); }

/* ============ HEADER ============ */
#site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:var(--header-h);
  display:flex; align-items:center;
  transition: background .4s var(--ease-soft), border-color .4s, backdrop-filter .4s, height .3s;
  border-bottom:1px solid transparent;
}
#site-header.scrolled{
  background: rgba(7,4,15,.72);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: var(--glass-border);
  height:70px;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%; }
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand img{ height:34px; width:auto; }
.brand span{ display:none; }

.main-nav{ display:none; }
.main-nav ul{ display:flex; align-items:center; gap:4px; }
.main-nav a{
  padding:10px 16px; border-radius:var(--radius-pill);
  font-size:.92rem; font-weight:500; color:var(--text-1);
  transition: color .25s, background .25s;
  position:relative;
}
.main-nav a:hover{ color:var(--text-0); background:var(--glass); }
.main-nav .has-mega{ position:relative; }
.header-cta{ display:flex; align-items:center; gap:12px; }
.header-cta .btn-ghost{ display:none; }

/* Mega menú */
.mega{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(8px);
  width:min(760px, 90vw);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  padding:28px; z-index:50;
}
.has-mega:hover .mega, .has-mega:focus-within .mega{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.mega-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.mega-item{ display:flex; gap:14px; padding:14px; border-radius:14px; transition:background .25s; }
.mega-item:hover{ background:var(--glass-strong); }
.mega-item .mi-icon{
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  background:var(--gradient-brand-soft); border:1px solid var(--glass-border);
  display:flex; align-items:center; justify-content:center;
}
.mega-item .mi-icon svg{ width:18px; height:18px; stroke:var(--text-0); }
.mega-item strong{ display:block; font-size:.92rem; color:var(--text-0); margin-bottom:2px; }
.mega-item small{ color:var(--text-2); font-size:.8rem; }

/* Mobile nav toggle */
.nav-toggle{
  display:flex; flex-direction:column; gap:5px; padding:10px; z-index:210;
}
.nav-toggle span{ width:22px; height:2px; background:var(--text-0); border-radius:2px; transition:transform .3s var(--ease), opacity .3s; }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0; z-index:190;
  background: rgba(7,4,15,.98);
  backdrop-filter: blur(20px);
  padding:calc(var(--header-h) + 20px) 24px 40px;
  transform:translateX(100%); transition:transform .45s var(--ease);
  overflow-y:auto;
}
.mobile-nav.open{ transform:translateX(0); }
.mobile-nav a{ display:block; padding:16px 4px; font-size:1.3rem; font-weight:600; color:var(--text-0); border-bottom:1px solid var(--glass-border); }
.mobile-nav .mobile-cta{ margin-top:28px; display:flex; flex-direction:column; gap:12px; }

@media(min-width:960px){
  .brand span{ display:block; font-family:var(--font-display); font-weight:800; font-size:1.15rem; color:var(--text-0); letter-spacing:-.01em; }
  .main-nav{ display:block; }
  .header-cta .btn-ghost{ display:inline-flex; }
  .nav-toggle, .mobile-nav{ display:none; }
}

/* ============ HERO ============ */
.hero{
  min-height:100svh; display:flex; align-items:center;
  padding-top:calc(var(--header-h) + 40px);
  position:relative; overflow:hidden;
}
.hero-grid{ position:relative; z-index:2; text-align:center; max-width:780px; margin-inline:auto; }
.hero-content{ position:relative; z-index:3; }
.hero h1{ margin-bottom:26px; }
.hero .lead{ max-width:600px; margin-inline:auto; margin-bottom:40px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:56px; justify-content:center; }
.hero-trust{ display:flex; flex-wrap:wrap; gap:28px; justify-content:center; }
.hero-trust div{ display:flex; flex-direction:column; align-items:center; }
.hero-trust strong{ font-family:var(--font-display); font-size:1.6rem; color:var(--text-0); }
.hero-trust span{ font-size:.8rem; color:var(--text-2); }

.hero-visual{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.node-canvas{ position:absolute; top:50%; left:50%; width:min(1100px, 130vw); height:auto; transform:translate(-50%,-50%); z-index:1; opacity:.5; }
@media(min-width:960px){ .node-canvas{ opacity:.65; } }

/* ============ MARQUEE / LOGOS ============ */
.marquee-wrap{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.marquee{ display:flex; gap:64px; width:max-content; animation: marquee 28s linear infinite; align-items:center; }
.marquee span{ font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--text-3); letter-spacing:.02em; white-space:nowrap; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============ GRIDS ============ */
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.grid-4{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }

/* ============ SERVICE CARD ============ */
.service-card{ display:flex; flex-direction:column; height:100%; }
.service-card p{ flex:1; margin-bottom:22px; font-size:.94rem; }
.service-card .price-tag{ font-size:.78rem; color:var(--text-2); margin-bottom:14px; }

/* ============ STATS ============ */
.stats-bar{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--glass-border); border:1px solid var(--glass-border); border-radius:var(--radius-lg); overflow:hidden;
}
.stat{ background:var(--bg-1); padding:36px 24px; text-align:center; }
.stat strong{ font-family:var(--font-display); font-size:clamp(2rem,4vw,2.8rem); display:block; background:var(--gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat span{ font-size:.82rem; color:var(--text-2); }
@media(min-width:720px){ .stats-bar{ grid-template-columns:repeat(4,1fr); } }

/* ============ TIMELINE (Cómo contratar) ============ */
.timeline{ position:relative; }
.timeline::before{
  content:""; position:absolute; left:27px; top:0; bottom:0; width:2px;
  background:linear-gradient(var(--blue),var(--violet),var(--red)); opacity:.4;
}
.t-step{ display:flex; gap:22px; padding-bottom:44px; position:relative; }
.t-step:last-child{ padding-bottom:0; }
.t-node{
  flex-shrink:0; width:56px; height:56px; border-radius:50%;
  background:var(--bg-1); border:2px solid var(--glass-border-hi);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; color:var(--text-0);
  position:relative; z-index:2;
}
.t-step.active .t-node{ background:var(--gradient-brand); border-color:transparent; box-shadow:0 0 0 6px rgba(122,15,196,.15); }
.t-body strong{ display:block; color:var(--text-0); font-size:1.05rem; margin-bottom:4px; }
.t-body p{ font-size:.92rem; }

/* ============ TESTIMONIALS ============ */
.testi-card{ display:flex; flex-direction:column; gap:16px; }
.testi-stars{ display:flex; gap:3px; }
.testi-stars svg{ width:16px; height:16px; fill:#FFB020; }
.testi-source{ display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:16px; border-top:1px solid var(--glass-border); }
.testi-avatar{ width:38px; height:38px; border-radius:50%; background:var(--gradient-brand); display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; font-size:.85rem; flex-shrink:0; }
.testi-source strong{ display:block; font-size:.86rem; color:var(--text-0); }
.testi-source small{ color:var(--text-2); font-size:.75rem; }

/* ============ PORTFOLIO ============ */
.filter-bar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:44px; }
.filter-btn{
  padding:9px 18px; border-radius:var(--radius-pill); font-size:.85rem; font-weight:600;
  border:1px solid var(--glass-border); background:var(--glass); color:var(--text-1);
  transition:.3s;
}
.filter-btn.active, .filter-btn:hover{ background:var(--gradient-brand); color:#fff; border-color:transparent; }

.mock-device{
  border-radius:16px; overflow:hidden; border:1px solid var(--glass-border-hi);
  aspect-ratio:16/10; position:relative; background:var(--bg-2);
}
.mock-device .mock-bar{ height:30px; background:rgba(255,255,255,.05); display:flex; align-items:center; gap:6px; padding:0 12px; }
.mock-device .mock-bar i{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.25); }
.mock-device .mock-body{ position:absolute; inset:30px 0 0 0; }

.portfolio-card{ overflow:hidden; }
.portfolio-tags{ display:flex; gap:8px; margin:16px 0 10px; flex-wrap:wrap; }
.tag{ font-size:.72rem; padding:4px 10px; border-radius:var(--radius-pill); background:var(--glass); border:1px solid var(--glass-border); color:var(--text-2); }

/* ============ FAQ ============ */
.faq-item{ border-bottom:1px solid var(--glass-border); }
.faq-q{ display:flex; align-items:center; justify-content:space-between; padding:22px 4px; cursor:pointer; gap:20px; }
.faq-q h4{ font-size:1rem; font-weight:600; }
.faq-q .plus{ width:22px; height:22px; flex-shrink:0; position:relative; }
.faq-q .plus::before, .faq-q .plus::after{ content:""; position:absolute; background:var(--text-0); border-radius:2px; transition:transform .35s var(--ease); }
.faq-q .plus::before{ width:100%; height:2px; top:50%; left:0; transform:translateY(-50%); }
.faq-q .plus::after{ width:2px; height:100%; left:50%; top:0; transform:translateX(-50%); }
.faq-item.open .plus::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-item.open .faq-a{ max-height:400px; }
.faq-a p{ padding:0 4px 22px; font-size:.94rem; }

/* ============ COMPARACIÓN ============ */
.compare-table{ width:100%; border-collapse:collapse; overflow:hidden; border-radius:var(--radius-lg); }
.compare-table th, .compare-table td{ padding:18px 20px; text-align:left; border-bottom:1px solid var(--glass-border); font-size:.9rem; }
.compare-table th{ font-family:var(--font-display); color:var(--text-0); font-size:.85rem; }
.compare-table td.yes{ color:#3DDC84; }
.compare-table td.no{ color:var(--text-3); }
.compare-table tr.hl td, .compare-table tr.hl th{ background:rgba(122,15,196,.12); }

/* ============ CTA banner ============ */
.cta-banner{
  position:relative; overflow:hidden; text-align:center; padding:72px 32px; border-radius:var(--radius-xl);
  background: var(--gradient-brand-soft);
}
.cta-banner::before{
  content:""; position:absolute; inset:0; background:var(--gradient-brand); opacity:.14; filter:blur(60px);
}
.cta-banner > *{ position:relative; z-index:1; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:30px; }

/* ============ FOOTER ============ */
footer{ position:relative; border-top:1px solid var(--glass-border); padding:80px 0 28px; margin-top:60px; }
.footer-grid{ display:grid; gap:44px; grid-template-columns:1.4fr repeat(3,1fr); margin-bottom:60px; }
.footer-brand p{ max-width:280px; font-size:.9rem; margin:18px 0 22px; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--glass-border); display:flex; align-items:center; justify-content:center; transition:.3s; }
.footer-social a:hover{ background:var(--gradient-brand); border-color:transparent; }
.footer-social svg{ width:16px; height:16px; stroke:var(--text-0); }
.footer-col h4{ font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-2); margin-bottom:18px; }
.footer-col ul li{ margin-bottom:12px; }
.footer-col a{ font-size:.9rem; color:var(--text-1); transition:color .25s; }
.footer-col a:hover{ color:var(--text-0); }
.footer-bottom{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; padding-top:28px; border-top:1px solid var(--glass-border); font-size:.8rem; color:var(--text-3); }
.footer-bottom .legal-links{ display:flex; gap:18px; flex-wrap:wrap; }

@media(max-width:860px){ .footer-grid{ grid-template-columns:repeat(2,1fr); } }

/* ============ WHATSAPP FLOTANTE ============ */
.wa-float{
  position:fixed; right:22px; bottom:96px; z-index:150;
  width:60px; height:60px; border-radius:50%;
  background:linear-gradient(135deg,#25D366,#128C4C);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px -6px rgba(18,140,76,.6);
  animation: floatPulse 3s ease-in-out infinite;
}
.wa-float svg{ width:28px; height:28px; fill:#fff; }
@keyframes floatPulse{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }

/* ============ MOBILE APP BAR ============ */
.app-tabbar{
  display:flex; position:fixed; left:0; right:0; bottom:0; z-index:150;
  background:rgba(11,6,24,.9); backdrop-filter:blur(18px);
  border-top:1px solid var(--glass-border);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}
.app-tabbar a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:6px 2px; font-size:.62rem; color:var(--text-2); font-weight:600;
}
.app-tabbar a svg{ width:21px; height:21px; stroke:var(--text-2); transition:.25s; }
.app-tabbar a.active{ color:var(--text-0); }
.app-tabbar a.active svg{ stroke:url(#tabGrad); stroke:var(--blue-2); }
.app-tabbar .tab-fab{
  position:relative; margin-top:-26px;
}
.app-tabbar .tab-fab .fab-circle{
  width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,#25D366,#128C4C);
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px -4px rgba(18,140,76,.7);
}
.app-tabbar .tab-fab svg{ width:24px; height:24px; fill:#fff; stroke:none; }
@media(min-width:960px){ .app-tabbar{ display:none; } .wa-float{ bottom:32px; } }

/* ============ SCROLL REVEAL ============ */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in{ opacity:1; transform:translateY(0); }
[data-reveal="scale"]{ transform:translateY(0) scale(.94); }
[data-reveal="scale"].in{ transform:scale(1); }
[data-reveal-stagger] > *{ transition-delay: calc(var(--i,0) * 90ms); }

/* ============ PAGE HERO (páginas internas) ============ */
.page-hero{ padding:calc(var(--header-h) + 90px) 0 80px; text-align:center; }
.page-hero .eyebrow{ margin-inline:auto; }
.page-hero .lead{ margin-inline:auto; }
.breadcrumbs{ display:flex; gap:8px; justify-content:center; font-size:.8rem; color:var(--text-3); margin-bottom:20px; }
.breadcrumbs a:hover{ color:var(--text-0); }

/* ============ FORM ============ */
.form-field{ margin-bottom:20px; }
.form-field label{ display:block; font-size:.82rem; font-weight:600; color:var(--text-1); margin-bottom:8px; }
.form-field input, .form-field textarea, .form-field select{
  width:100%; padding:14px 16px; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid var(--glass-border); color:var(--text-0);
  transition:border-color .25s, background .25s;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{ border-color:var(--blue-2); background:rgba(255,255,255,.07); }
.form-field textarea{ resize:vertical; min-height:120px; }
.form-field.error input, .form-field.error textarea{ border-color:var(--red); }
.form-error-msg{ display:none; color:#FF6B7A; font-size:.78rem; margin-top:6px; }
.form-field.error .form-error-msg{ display:block; }
.form-success{ display:none; padding:16px 20px; border-radius:12px; background:rgba(61,220,132,.12); border:1px solid rgba(61,220,132,.35); color:#3DDC84; font-size:.9rem; margin-top:16px; }
.form-success.show{ display:block; }

/* ============ CHAT IA ============ */
.chat-launcher{
  position:fixed; right:22px; bottom:166px; z-index:150;
  width:60px; height:60px; border-radius:50%;
  background:var(--gradient-brand); display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px -6px rgba(122,15,196,.6);
}
@media(min-width:960px){ .chat-launcher{ bottom:100px; } }
.chat-launcher svg{ width:26px; height:26px; stroke:#fff; }
.chat-window{
  position:fixed; right:22px; bottom:166px; z-index:220;
  width:min(370px, 90vw); height:min(560px, 70vh);
  border-radius:22px; overflow:hidden; display:flex; flex-direction:column;
  background:var(--bg-1); border:1px solid var(--glass-border-hi);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  transform:translateY(20px) scale(.96); opacity:0; visibility:hidden; pointer-events:none;
  transition:.35s var(--ease);
}
.chat-window.open{ transform:translateY(0) scale(1); opacity:1; visibility:visible; pointer-events:auto; }
.chat-head{ padding:18px 20px; background:var(--gradient-brand); display:flex; align-items:center; gap:12px; }
.chat-head .dot{ width:9px; height:9px; border-radius:50%; background:#3DDC84; box-shadow:0 0 0 3px rgba(61,220,132,.25); }
.chat-head strong{ color:#fff; font-size:.95rem; }
.chat-head small{ color:rgba(255,255,255,.8); font-size:.72rem; }
.chat-head button{ margin-left:auto; color:#fff; opacity:.8; padding:4px; }
.chat-body{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:12px; }
.msg{ max-width:82%; padding:11px 15px; border-radius:16px; font-size:.86rem; line-height:1.5; }
.msg.bot{ align-self:flex-start; background:var(--glass-strong); border:1px solid var(--glass-border); color:var(--text-0); border-bottom-left-radius:4px; }
.msg.user{ align-self:flex-end; background:var(--gradient-brand); color:#fff; border-bottom-right-radius:4px; }
.chat-quick{ display:flex; flex-wrap:wrap; gap:8px; padding:0 18px 14px; }
.chat-quick button{ font-size:.76rem; padding:8px 12px; border-radius:var(--radius-pill); background:var(--glass); border:1px solid var(--glass-border); color:var(--text-1); }
.chat-quick button:hover{ background:var(--glass-strong); }
.chat-input{ display:flex; gap:8px; padding:14px; border-top:1px solid var(--glass-border); }
.chat-input input{ flex:1; padding:12px 14px; border-radius:var(--radius-pill); background:rgba(255,255,255,.05); border:1px solid var(--glass-border); color:var(--text-0); font-size:.86rem; }
.chat-input button{ width:42px; height:42px; border-radius:50%; background:var(--gradient-brand); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.chat-input button svg{ width:18px; height:18px; stroke:#fff; }
.chat-typing{ display:flex; gap:4px; padding:11px 15px; background:var(--glass-strong); border-radius:16px; align-self:flex-start; border:1px solid var(--glass-border); }
.chat-typing span{ width:6px; height:6px; border-radius:50%; background:var(--text-2); animation:typingDot 1.2s infinite; }
.chat-typing span:nth-child(2){ animation-delay:.15s; } .chat-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes typingDot{ 0%,60%,100%{ transform:translateY(0); opacity:.4;} 30%{ transform:translateY(-4px); opacity:1;} }

/* ============ TOC (blog) ============ */
.toc{ position:sticky; top:calc(var(--header-h) + 24px); }
.toc a{ display:block; padding:8px 0; font-size:.84rem; color:var(--text-2); border-left:2px solid var(--glass-border); padding-left:14px; transition:.25s; }
.toc a:hover, .toc a.active{ color:var(--text-0); border-left-color:var(--blue-2); }

/* ============ ARTICLE ============ */
.article-body h2{ margin-top:52px; margin-bottom:18px; font-size:1.7rem; }
.article-body h3{ margin-top:34px; margin-bottom:14px; }
.article-body p{ margin-bottom:20px; font-size:1.02rem; }
.article-body ul{ margin-bottom:20px; }
.article-body li{ position:relative; padding-left:26px; margin-bottom:10px; font-size:.98rem; color:var(--text-1); }
.article-body li::before{ content:""; position:absolute; left:0; top:9px; width:8px; height:8px; border-radius:2px; background:var(--gradient-brand); }
.article-body blockquote{ border-left:3px solid var(--blue-2); padding:6px 0 6px 24px; font-style:italic; color:var(--text-0); margin:30px 0; font-size:1.1rem; }

/* ============ LOADER ============ */
#loader{
  position:fixed; inset:0; z-index:9999; background:var(--bg-0);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  transition:opacity .6s var(--ease), visibility .6s;
}
#loader.hide{ opacity:0; visibility:hidden; }
#loader img{ width:64px; height:64px; animation:loaderPulse 1.6s ease-in-out infinite; }
@keyframes loaderPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.1); opacity:.7; } }
.loader-bar{ width:180px; height:3px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; }
.loader-bar span{ display:block; height:100%; width:0%; background:var(--gradient-brand); animation:loaderFill 1.4s var(--ease) forwards; }
@keyframes loaderFill{ to{ width:100%; } }

/* ============ UTILIDADES ============ */
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.flex{ display:flex; } .items-center{ align-items:center; } .justify-between{ justify-content:space-between; } .gap-8{ gap:8px; } .gap-16{ gap:16px; }
.text-center{ text-align:center; }
.hide-mobile{ display:none; } @media(min-width:760px){ .hide-mobile{ display:block; } }
.only-mobile{ display:block; } @media(min-width:760px){ .only-mobile{ display:none; } }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--blue); color:#fff; padding:12px 20px; z-index:9999; border-radius:0 0 10px 0; }
.skip-link:focus{ left:0; }

@media(max-width:640px){
  .section{ padding:80px 0; }
  h1{ font-size: clamp(2.1rem, 9vw, 2.8rem); }
}