/* =====================================================================
   Whost24 — Sistema de diseño
   Estudio de diseño web y automatización para negocios
   ===================================================================== */

/* ---------- Tokens ---------- */
:root{
  --ink:#101A2D;
  --ink-800:#182339;
  --ink-700:#22304a;
  --electric:#245DFF;
  --electric-600:#1b4be0;
  --electric-50:#eef3ff;
  --aqua:#13C9BA;
  --aqua-50:#e7fbf8;
  --soft:#F6F8FC;
  --white:#FFFFFF;
  --text:#475569;
  --heading:#101A2D;
  --border:#DCE3EE;
  --muted:#7A879C;

  --radius:18px;
  --radius-lg:26px;
  --radius-sm:11px;

  --shadow-1:0 1px 2px rgba(16,26,45,.06);
  --shadow-2:0 14px 34px -14px rgba(16,26,45,.22);
  --shadow-3:0 30px 70px -30px rgba(16,26,45,.45);
  --shadow-glow:0 18px 40px -16px rgba(36,93,255,.55);

  --maxw:1200px;
  --gap:24px;
  --header-h:76px;

  --font-head:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font-body);color:var(--text);background:var(--white);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--heading);line-height:1.1;margin:0;letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,5vw,4rem);font-weight:800}
h2{font-size:clamp(1.7rem,3.4vw,2.7rem);font-weight:800}
h3{font-size:clamp(1.15rem,1.8vw,1.45rem);font-weight:700}
p{margin:0 0 1rem}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--electric);color:#fff}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
.section{padding-block:clamp(3.5rem,8vw,6.5rem)}
.section--soft{background:var(--soft)}
.center{text-align:center}
.mx-auto{margin-inline:auto}
.lead{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--text);max-width:62ch}
.muted{color:var(--muted)}

/* ---------- Eyebrow + gradient text ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-head);
  font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--electric);background:var(--electric-50);border:1px solid #dbe5ff;
  padding:.45rem .9rem;border-radius:999px;
}
.eyebrow--aqua{color:#0c8b81;background:var(--aqua-50);border-color:#c8f2ed}
.eyebrow--dark{color:#cdd9ff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.grad{background:linear-gradient(100deg,var(--electric),var(--aqua));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-head);font-weight:700;font-size:.98rem;line-height:1;
  padding:.9rem 1.35rem;border-radius:var(--radius-sm);border:1px solid transparent;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
  cursor:pointer;white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--electric);color:#fff;box-shadow:var(--shadow-glow)}
.btn--primary:hover{background:var(--electric-600);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.btn--ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6)}
.btn--outline{background:#fff;color:var(--ink);border-color:var(--border)}
.btn--outline:hover{border-color:var(--electric);color:var(--electric);transform:translateY(-2px)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:var(--ink-700);transform:translateY(-2px)}
.btn--wa{background:#1FAF54;color:#fff}
.btn--wa:hover{background:#189a49;transform:translateY(-2px)}
.btn--lg{padding:1.05rem 1.7rem;font-size:1.05rem}
.btn--block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* ---------- Header / Nav ---------- */
.header{position:fixed;inset:0 0 auto 0;z-index:80;transition:background .3s ease,box-shadow .3s ease,border-color .3s ease,backdrop-filter .3s}
.header__bar{display:flex;align-items:center;gap:1rem;height:var(--header-h);max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
.header.is-solid{background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);box-shadow:0 10px 30px -22px rgba(16,26,45,.35)}
.brand{display:flex;align-items:center;gap:.65rem;font-family:var(--font-head);font-weight:800;font-size:1.25rem;color:#fff;letter-spacing:-.02em}
.brand__mark{width:40px;height:40px;flex:0 0 auto}
.brand__desc{display:block;font-family:var(--font-body);font-weight:500;font-size:.66rem;letter-spacing:.02em;color:rgba(255,255,255,.7);margin-top:-2px}
.header.is-solid .brand{color:var(--ink)}
.header.is-solid .brand__desc{color:var(--muted)}
.nav{display:flex;align-items:center;gap:.3rem;margin-left:auto}
.nav__link{
  position:relative;display:inline-flex;align-items:center;gap:.35rem;padding:.55rem .8rem;border-radius:10px;
  font-weight:600;font-size:.95rem;color:rgba(255,255,255,.9);background:transparent;border:0;transition:background .18s,color .18s;
}
.nav__link:hover{background:rgba(255,255,255,.12)}
.header.is-solid .nav__link{color:var(--ink)}
.header.is-solid .nav__link:hover{background:var(--soft);color:var(--electric)}
.nav__link i{font-size:.7rem;transition:transform .2s}
.header-cta{display:flex;align-items:center;gap:.6rem;margin-left:.5rem}

/* Dropdown servicios */
.has-menu{position:relative}
.dropdown{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(8px);
  width:min(560px,90vw);background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-3);padding:1.1rem;display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1rem;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:90;
}
.has-menu:hover .dropdown,.has-menu:focus-within .dropdown,.has-menu.open .dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.dropdown__col h4{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--electric);margin:0 .4rem .5rem}
.dropdown__item{display:flex;gap:.7rem;align-items:flex-start;padding:.55rem .6rem;border-radius:12px;transition:background .16s}
.dropdown__item:hover{background:var(--soft)}
.dropdown__item i{color:var(--aqua);margin-top:.15rem}
.dropdown__item strong{display:block;color:var(--ink);font-size:.92rem;font-family:var(--font-head)}
.dropdown__item span{display:block;font-size:.76rem;color:var(--muted)}

.burger{display:none;width:46px;height:46px;border-radius:12px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;align-items:center;justify-content:center;font-size:1.15rem}
.header.is-solid .burger{color:var(--ink);border-color:var(--border);background:#fff}

/* Menú móvil */
.mobile-menu{
  position:fixed;inset:var(--header-h) 0 0 0;z-index:75;background:#fff;padding:1.2rem;
  transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,transform .25s,visibility .25s;overflow-y:auto;
}
.mobile-menu.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.mobile-menu a{display:block;padding:.9rem .8rem;border-radius:12px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--soft)}
.mobile-menu a:hover{background:var(--soft)}
.mobile-menu .btn{margin-top:1rem}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;padding-top:calc(var(--header-h) + clamp(2.5rem,6vw,5rem));padding-bottom:clamp(3.5rem,8vw,7rem)}
.hero__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:52px 52px;mask-image:radial-gradient(120% 90% at 80% 10%,#000 30%,transparent 75%)}
.hero__glow{position:absolute;border-radius:999px;filter:blur(70px);opacity:.5}
.hero__glow--a{width:520px;height:520px;background:rgba(36,93,255,.5);top:-160px;right:-120px}
.hero__glow--b{width:420px;height:420px;background:rgba(19,201,186,.35);bottom:-180px;left:-120px}
.hero__inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero h1{color:#fff;margin:1rem 0 1.1rem}
.hero .lead{color:#c7d2e8}
.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.hero__note{color:#93a2c0;font-size:.9rem;margin-top:1rem}

/* Composición gráfica */
.mock{position:relative;min-height:420px}
.mock__window{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-3);overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.mock__bar{display:flex;gap:.4rem;padding:.7rem .9rem;background:#f2f5fb;border-bottom:1px solid var(--border)}
.mock__dot{width:10px;height:10px;border-radius:999px;background:#d7deec}
.mock__dot:nth-child(1){background:#ff5f57}.mock__dot:nth-child(2){background:#febc2e}.mock__dot:nth-child(3){background:#28c840}
.mock__body{padding:1rem;display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.mock__tile{height:64px;border-radius:12px;background:linear-gradient(135deg,#eef2fb,#e2e9f8)}
.mock__line{height:9px;border-radius:6px;background:#e8edf7;margin-top:.5rem}
.mock__line.w70{width:70%}.mock__line.w50{width:50%}
.mock__card{position:absolute;background:#fff;border-radius:16px;box-shadow:var(--shadow-2);border:1px solid var(--border);padding:.8rem .9rem;font-size:.82rem;color:var(--ink)}
.mock__card--quote{top:-18px;right:-8px;width:210px}
.mock__card--chat{bottom:24px;left:-20px;width:250px}
.mock__card--mail{bottom:-18px;right:24px;width:220px}
.mock__card h5{font-family:var(--font-head);font-size:.82rem;margin:0 0 .4rem;color:var(--ink)}
.mock__row{display:flex;align-items:center;gap:.5rem;margin:.32rem 0}
.mock__avatar{width:26px;height:26px;border-radius:999px;background:var(--electric-50);display:grid;place-items:center;color:var(--electric);font-size:.7rem}
.mock__pill{background:var(--aqua-50);color:#0c8b81;font-size:.68rem;font-weight:700;padding:.15rem .5rem;border-radius:999px}
.demo-tag{position:absolute;bottom:-38px;left:0;font-size:.72rem;color:#8ea0c2}

/* ---------- Grid + cards ---------- */
.grid{display:grid;gap:var(--gap)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);border-color:#c7d3ea}
.card__icon{width:52px;height:52px;border-radius:14px;background:var(--electric-50);color:var(--electric);display:grid;place-items:center;font-size:1.25rem;margin-bottom:1rem}
.card__icon--aqua{background:var(--aqua-50);color:#0c8b81}
.card h3{margin-bottom:.4rem}
.card p{font-size:.95rem;margin-bottom:1rem}
.card__link{font-family:var(--font-head);font-weight:700;font-size:.92rem;color:var(--electric);display:inline-flex;gap:.4rem;align-items:center}
.card__link:hover{gap:.65rem}
.tag{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:700;font-family:var(--font-head);padding:.3rem .7rem;border-radius:999px;background:var(--soft);border:1px solid var(--border);color:var(--ink)}
.tag--demo{background:#fff7e6;border-color:#f4e1ad;color:#9a6b00}

.section-head{max-width:720px;margin-bottom:clamp(2rem,4vw,3rem)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2{margin:.9rem 0 .8rem}

/* ---------- Selector de necesidad ---------- */
.selector{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.selector__opt{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.2rem;text-align:left;font-family:var(--font-head);font-weight:700;color:var(--ink);display:flex;align-items:center;gap:.7rem;transition:all .18s}
.selector__opt i{color:var(--electric)}
.selector__opt:hover{border-color:var(--electric);transform:translateY(-3px)}
.selector__opt.active{border-color:var(--electric);background:var(--electric-50);box-shadow:var(--shadow-2)}
.selector__result{margin-top:1.5rem;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.6rem;display:none}
.selector__result.show{display:block;animation:fadeUp .35s ease}
.selector__result h3{margin-bottom:.5rem}

/* ---------- Demos ---------- */
.demo-shell{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);overflow:hidden}
.demo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.2rem;background:var(--soft);border-bottom:1px solid var(--border)}
.demo-toolbar h3{font-size:1.05rem;margin:0}
.demo-pane{padding:1.4rem}
.demo-catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.9rem}
.demo-item{border:1px solid var(--border);border-radius:14px;padding:.9rem}
.demo-item strong{color:var(--ink);font-family:var(--font-head);font-size:.92rem}
.demo-item .price{color:var(--electric);font-weight:700}
.demo-item .btn{margin-top:.6rem;padding:.5rem .8rem;font-size:.85rem}
.demo-cart{border-top:1px dashed var(--border);margin-top:1.2rem;padding-top:1.2rem}
.demo-cart__row{display:flex;justify-content:space-between;font-size:.9rem;padding:.3rem 0}
.demo-total{font-family:var(--font-head);font-weight:800;color:var(--ink);font-size:1.15rem}
.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.8rem}
.field label{font-family:var(--font-head);font-weight:600;font-size:.85rem;color:var(--ink)}
.field input,.field select,.field textarea{padding:.75rem .85rem;border:1px solid var(--border);border-radius:var(--radius-sm);font:inherit;font-size:.95rem;color:var(--ink);background:#fff;transition:border-color .16s,box-shadow .16s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--electric);box-shadow:0 0 0 3px rgba(36,93,255,.14)}
.chat{display:flex;flex-direction:column;gap:.7rem;max-height:360px;overflow:auto;padding:.4rem}
.chat__msg{max-width:82%;padding:.7rem .9rem;border-radius:14px;font-size:.9rem;line-height:1.45}
.chat__msg--bot{background:var(--soft);border:1px solid var(--border);color:var(--ink);border-top-left-radius:4px;align-self:flex-start}
.chat__msg--user{background:var(--electric);color:#fff;border-top-right-radius:4px;align-self:flex-end}
.chat__quick{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem}
.chat__quick button{font-size:.78rem;padding:.4rem .7rem;border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--ink)}
.chat__quick button:hover{border-color:var(--electric);color:var(--electric)}

/* ---------- Proyectos ---------- */
.case{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}
.case__cover{aspect-ratio:16/10;background:linear-gradient(135deg,#eef2fb,#dfe7f7);display:grid;place-items:center;color:#9fb0d0;font-size:2rem}
.case__body{padding:1.4rem}
.case__meta{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.7rem}
.case h3{margin-bottom:.4rem}
.case__list{margin-top:.8rem;font-size:.9rem}
.case__list li{display:flex;gap:.5rem;padding:.22rem 0}
.case__list i{color:var(--aqua);margin-top:.2rem}

/* ---------- Pasos ---------- */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.step{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.4rem;position:relative}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:1.2rem;right:1.2rem;font-family:var(--font-head);font-weight:800;font-size:2.4rem;color:#eef2fb}
.step h3{margin-bottom:.3rem;font-size:1.05rem}
.step p{font-size:.9rem;margin:0}

/* ---------- Precios / contratación ---------- */
.plan{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:1.7rem;display:flex;flex-direction:column}
.plan--featured{border-color:var(--electric);box-shadow:var(--shadow-3);position:relative}
.plan--featured::after{content:"Más solicitado";position:absolute;top:-12px;left:1.7rem;background:var(--electric);color:#fff;font-size:.72rem;font-weight:700;font-family:var(--font-head);padding:.25rem .7rem;border-radius:999px}
.plan h3{margin-bottom:.3rem}
.plan .price{font-family:var(--font-head);font-weight:800;font-size:1.5rem;color:var(--ink);margin:.6rem 0}
.plan ul{margin:1rem 0 1.4rem;display:flex;flex-direction:column;gap:.5rem;font-size:.92rem}
.plan li{display:flex;gap:.55rem}
.plan li i{color:var(--aqua);margin-top:.22rem}
.plan .btn{margin-top:auto}

/* ---------- FAQ ---------- */
.faq{max-width:840px;margin-inline:auto}
.faq__item{background:#fff;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:.8rem;overflow:hidden}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.3rem;background:none;border:0;text-align:left;font-family:var(--font-head);font-weight:700;font-size:1.02rem;color:var(--ink)}
.faq__q i{transition:transform .25s;color:var(--electric)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .35s ease;padding:0 1.3rem}
.faq__a p{padding-bottom:1.1rem;margin:0}
.faq__item.open .faq__a{max-height:420px}
.faq__item.open .faq__q i{transform:rotate(45deg)}

/* ---------- Formularios (cotizar) ---------- */
.form-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);padding:clamp(1.4rem,3vw,2.4rem)}
.steps-indicator{display:flex;align-items:center;gap:.6rem;margin-bottom:1.6rem}
.dot{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;font-family:var(--font-head);font-weight:800;background:var(--soft);color:var(--muted);border:1px solid var(--border)}
.dot.active{background:var(--electric);color:#fff;border-color:var(--electric)}
.dot.done{background:var(--aqua);color:#fff;border-color:var(--aqua)}
.line{flex:1;height:2px;background:var(--border);border-radius:2px}
.line.done{background:var(--aqua)}
.fstep{display:none}
.fstep.active{display:block;animation:fadeUp .35s ease}
.checkbox-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.checkbox{display:flex;align-items:center;gap:.55rem;padding:.7rem .85rem;border:1.5px solid var(--border);border-radius:12px;font-size:.92rem;color:var(--ink);cursor:pointer;transition:all .15s}
.checkbox:hover{border-color:var(--electric)}
.checkbox:has(input:checked){border-color:var(--electric);background:var(--electric-50)}

/* ---------- Contacto / footer ---------- */
.footer{background:var(--ink);color:#c7d2e8;padding-top:clamp(3rem,6vw,5rem)}
.footer h4{color:#fff;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1rem;font-family:var(--font-head)}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.1)}
.footer a{color:#aebbd6;font-size:.92rem;display:block;padding:.22rem 0}
.footer a:hover{color:#fff}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding:1.6rem 0;font-size:.85rem;color:#8595b5}
.footer .brand{color:#fff;margin-bottom:1rem}
.footer .brand__desc{color:#8595b5}
.socials{display:flex;gap:.6rem;margin-top:1rem}
.socials a{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.06);display:grid;place-items:center;color:#c7d2e8}
.socials a:hover{background:var(--electric);color:#fff}

/* ---------- WhatsApp flotante ---------- */
.wa-fab{position:fixed;right:20px;bottom:20px;z-index:70;width:58px;height:58px;border-radius:999px;background:#1FAF54;color:#fff;display:grid;place-items:center;font-size:1.5rem;box-shadow:var(--shadow-3)}
.wa-fab:hover{transform:scale(1.06)}

/* ---------- Página interior ---------- */
.page-hero{background:var(--ink);color:#fff;padding:calc(var(--header-h) + clamp(2.5rem,6vw,4.5rem)) 0 clamp(2.5rem,6vw,4rem);position:relative;overflow:hidden}
.page-hero h1{color:#fff;margin:.9rem 0 .9rem}
.page-hero .lead{color:#c7d2e8}
.crumbs{display:flex;gap:.5rem;align-items:center;font-size:.84rem;color:#93a2c0;flex-wrap:wrap}
.crumbs a:hover{color:#fff}
.crumbs i{font-size:.6rem}
.prose h2{margin:2rem 0 .8rem}
.prose h3{margin:1.5rem 0 .5rem}
.prose p,.prose li{color:var(--text)}
.prose ul{list-style:disc;padding-left:1.3rem;margin:0 0 1rem;display:flex;flex-direction:column;gap:.35rem}

/* ---------- Utilidades ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.skip{position:fixed;top:-90px;left:16px;z-index:200;background:var(--ink);color:#fff;padding:.7rem 1rem;border-radius:10px}
.skip:focus{top:16px}
:focus-visible{outline:3px solid var(--aqua);outline-offset:3px;border-radius:6px}
.notice{background:var(--aqua-50);border:1px solid #c8f2ed;color:#0c6b63;border-radius:14px;padding:.9rem 1.1rem;font-size:.9rem}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .hero__inner{grid-template-columns:1fr;gap:3rem}
  .mock{max-width:560px}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:flex}
  .header-cta .btn--hide-sm{display:none}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .selector{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  body{font-size:16px}
  .section{padding-block:clamp(2.8rem,9vw,3.6rem)}
  .wrap{padding-inline:18px}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .selector,.steps{grid-template-columns:1fr}
  .checkbox-grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;gap:1.6rem}
  .hero__actions .btn{width:100%}
  .mock{min-height:auto}
  .mock__card--quote{position:static;width:auto;margin-top:.8rem}
  .mock__card--chat,.mock__card--mail{position:static;width:auto;margin-top:.8rem}
  .mock__body{grid-template-columns:1fr}
  .demo-catalog{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* utilidades */
.hidden{display:none!important}

/* ---------- Nav activo (#14) ---------- */
.nav__link.active{color:#fff}
.header.is-solid .nav__link.active{color:var(--electric)}
.nav__link.active::after{content:'';position:absolute;left:.8rem;right:.8rem;bottom:.3rem;height:2px;background:var(--aqua);border-radius:2px}

/* ---------- Asistente virtual (chat) ---------- */
#whchat{position:fixed;left:20px;bottom:20px;z-index:76}
.whchat__fab{width:60px;height:60px;border-radius:999px;background:var(--electric);color:#fff;border:0;font-size:1.5rem;box-shadow:var(--shadow-3);cursor:pointer;transition:transform .18s}
.whchat__fab:hover{transform:scale(1.06)}
.whchat__panel{position:fixed;left:20px;bottom:92px;width:366px;max-width:calc(100vw - 32px);height:520px;max-height:calc(100vh - 120px);background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-3);display:flex;flex-direction:column;overflow:hidden}
.whchat__panel[hidden]{display:none}
.whchat__head{background:linear-gradient(135deg,var(--ink),var(--electric));color:#fff;padding:12px 14px;display:flex;align-items:center;gap:10px}
.whchat__ava{width:34px;height:34px;border-radius:999px;background:rgba(255,255,255,.18);display:grid;place-items:center}
.whchat__sub{font-size:12px;opacity:.9;display:flex;align-items:center;gap:6px}
.whchat__dot{width:8px;height:8px;border-radius:999px;background:#3ff08a;animation:whping 2s infinite}
@keyframes whping{0%{box-shadow:0 0 0 0 rgba(63,240,138,.7)}70%{box-shadow:0 0 0 8px rgba(63,240,138,0)}100%{box-shadow:0 0 0 0 rgba(63,240,138,0)}}
.whchat__close{background:transparent;border:0;color:#fff;font-size:16px;cursor:pointer}
.whchat__msgs{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--soft)}
.whchat__msg{max-width:88%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.whchat__msg--bot{background:#fff;border:1px solid var(--border);align-self:flex-start;border-top-left-radius:4px;color:var(--ink)}
.whchat__msg--user{background:var(--electric);color:#fff;align-self:flex-end;border-top-right-radius:4px}
.whchat__msg--typing{background:transparent;color:var(--muted);font-size:13px;align-self:flex-start}
.whchat__code{align-self:flex-start;background:var(--aqua-50);border:1px solid #c8f2ed;color:#0c6b63;border-radius:10px;padding:6px 10px;font-size:12px;font-weight:700}
.whchat__foot{border-top:1px solid var(--border);padding:10px;display:flex;gap:8px;background:#fff}
.whchat__foot input{flex:1;border:1px solid var(--border);border-radius:999px;padding:10px 14px;font:inherit;font-size:14px;outline:none}
.whchat__foot input:focus{border-color:var(--electric)}
.whchat__foot button{width:42px;height:42px;border-radius:999px;background:var(--electric);color:#fff;border:0;cursor:pointer}
.whchat__note{font-size:11px;color:var(--muted);text-align:center;padding:0 12px 10px}
@media (max-width:680px){ .whchat__panel{left:12px;right:12px;width:auto;bottom:88px} #whchat{left:14px;bottom:14px} .whchat__fab{width:54px;height:54px} }

/* ---------- Portadas de proyectos (capturas) ---------- */
.case__cover{overflow:hidden}
.case__cover img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.proj-thumb{border-radius:12px;overflow:hidden;border:1px solid var(--border);aspect-ratio:16/10;margin-bottom:.9rem;background:var(--soft)}
.proj-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}

/* =====================================================================
   Mejoras — Experiencia, conversión, accesibilidad y visual
   ===================================================================== */

/* I.1 / IV — Contraste y jerarquía tipográfica */
:root{ --muted:#55647e; --heading:#0B1526; }
.muted{ color:var(--muted) }
.lead{ color:#3C4A61 }
h1{ font-weight:800; letter-spacing:-.025em }
h2{ font-weight:800; letter-spacing:-.02em }
h3{ font-weight:700 }
p{ color:var(--text) }

/* I.5 — Áreas táctiles de al menos 48px en móvil/tablet */
@media (max-width:1024px){
  .btn, .nav__link, .faq__q, .footer a, .mobile-menu a, .selector__opt, .checkbox{ min-height:48px }
  .btn{ padding-block:.95rem }
  .footer a{ display:flex; align-items:center }
}

/* I.8 — Elevación más marcada en tarjetas de servicio */
.card{ transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease }
.card:hover{ transform:translateY(-9px); box-shadow:0 30px 60px -28px rgba(16,26,45,.45); border-color:#c2cfe8 }
.card:hover .card__icon{ transform:scale(1.08) rotate(-2deg) }
.card__icon{ transition:transform .25s ease }

/* I.2 — Indicador de desplazamiento en el Hero */
.scroll-hint{ position:absolute; left:50%; bottom:20px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.35rem; color:#8ea3c8; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; z-index:3; text-decoration:none }
.scroll-hint i{ font-size:1rem; animation:whbounce 1.6s ease-in-out infinite }
@keyframes whbounce{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)} }

/* I.7 — Botón "Subir arriba" */
#whtop{ position:fixed; right:20px; bottom:90px; z-index:70; width:46px; height:46px; border-radius:999px; background:var(--ink); color:#fff; border:0; box-shadow:var(--shadow-2); cursor:pointer; opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .25s ease, transform .25s ease, background .2s }
#whtop.show{ opacity:1; transform:none; pointer-events:auto }
#whtop:hover{ background:var(--electric) }

/* II.15 — Burbuja del botón de WhatsApp */
.wa-fab::after{ content:"¿Hablamos por WhatsApp?"; position:absolute; right:70px; top:50%; transform:translateY(-50%) translateX(6px); background:var(--ink); color:#fff; font-size:.8rem; font-weight:600; padding:.45rem .75rem; border-radius:10px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; box-shadow:var(--shadow-2) }
.wa-fab:hover::after,.wa-fab:focus::after{ opacity:1; transform:translateY(-50%) translateX(0) }
@media (max-width:680px){ .wa-fab::after{ display:none } }

/* II.19 — Tecnologías compatibles */
.tech{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; align-items:center }
.tech span{ display:inline-flex; align-items:center; gap:.45rem; border:1px solid var(--border); background:#fff; border-radius:999px; padding:.55rem 1rem; font-family:var(--font-head); font-size:.85rem; font-weight:700; color:var(--ink) }
.tech i{ color:var(--electric) }

/* II.18 — Calculadora de inversión */
.calc{ display:grid; grid-template-columns:1.1fr .9fr; gap:1.4rem }
.calc__opt{ display:flex; align-items:center; gap:.6rem; padding:.7rem .8rem; border:1.5px solid var(--border); border-radius:12px; cursor:pointer; transition:all .15s; background:#fff }
.calc__opt:hover{ border-color:var(--electric) }
.calc__opt:has(input:checked){ border-color:var(--electric); background:var(--electric-50) }
.calc__total{ font-family:var(--font-head); font-weight:800; color:var(--ink); font-size:1.6rem }
@media (max-width:680px){ .calc{ grid-template-columns:1fr } }

/* IV.34 — Testimonios */
.quote{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; display:flex; flex-direction:column; gap:1rem }
.quote p{ font-size:1rem; color:var(--ink); font-style:italic; margin:0 }
.quote .who{ display:flex; align-items:center; gap:.7rem; margin-top:auto }
.quote .av{ width:42px; height:42px; border-radius:999px; background:var(--electric-50); color:var(--electric); display:grid; place-items:center; font-family:var(--font-head); font-weight:800 }
.quote .who b{ color:var(--ink); font-family:var(--font-head); display:block; font-size:.9rem }
.quote .who span{ font-size:.78rem; color:var(--muted) }

/* IV.39 — Glosario */
.gloss{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem 1.3rem; margin-bottom:.7rem }
.gloss dt{ font-family:var(--font-head); font-weight:700; color:var(--ink) }
.gloss dd{ margin:.3rem 0 0; color:var(--muted); font-size:.92rem }

/* V.42 — Confirmación visual */
.ok-anim{ animation:whpop .5s cubic-bezier(.16,1,.3,1) both }
@keyframes whpop{ from{opacity:0; transform:scale(.94) translateY(6px)} to{opacity:1; transform:none} }

/* V.45 — Tooltips de KPIs */
.kpi-tip{ position:relative }
.kpi-tip[data-tip]:hover::after{ content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:0; background:var(--ink); color:#fff; font-size:.75rem; padding:.35rem .6rem; border-radius:8px; white-space:nowrap; z-index:5; box-shadow:var(--shadow-2) }

/* Barra superior de anuncios (II.14) */
#whtopbar{ position:fixed; top:0; left:0; right:0; z-index:95; background:linear-gradient(90deg,var(--ink),var(--electric)); color:#fff; font-size:.85rem }
#whtopbar .in{ max-width:1200px; margin:0 auto; padding:.5rem 2.4rem .5rem 1rem; display:flex; align-items:center; justify-content:center; gap:.8rem; text-align:center }
#whtopbar strong{ color:#8ff0e4 }
#whtopbar a{ text-decoration:underline; color:#fff }
#whtopbar button{ position:absolute; right:.6rem; top:50%; transform:translateY(-50%); background:transparent; border:0; color:#fff; opacity:.85; cursor:pointer; width:34px; height:34px }
#whtopbar button:hover{ opacity:1 }
.header{ top:var(--topbar-h,0px) !important }
.hero{ padding-top:calc(var(--header-h) + var(--topbar-h,0px) + clamp(2.5rem,6vw,5rem)) }
.page-hero{ padding-top:calc(var(--header-h) + var(--topbar-h,0px) + clamp(2.5rem,6vw,4.5rem)) }
html{ scroll-padding-top:calc(112px + var(--topbar-h,0px)) }

/* =====================================================================
   Garantía "7 días · pagas al finalizar" — posicionamiento y conversión
   ===================================================================== */
.seal{display:inline-flex;align-items:center;gap:.55rem;background:linear-gradient(135deg,#0e9f6e,#13C9BA);color:#fff;border-radius:999px;padding:.5rem 1rem;font-family:var(--font-head);font-weight:800;font-size:.85rem;box-shadow:0 14px 32px -16px rgba(19,201,186,.85)}
.trust-chip{display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#dbe4f5;border-radius:999px;padding:.4rem .8rem;font-size:.8rem;font-weight:600}
.hero__trust{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.micro{display:block;color:var(--muted);font-size:.82rem;margin-top:.6rem}
.micro i{color:var(--aqua)}
.guarantee-tag{display:inline-flex;align-items:center;gap:.4rem;background:var(--aqua-50);border:1px solid #c8f2ed;color:#0c6b63;font-size:.78rem;font-weight:800;font-family:var(--font-head);border-radius:999px;padding:.35rem .7rem;margin:0 0 .7rem}
.ribbon7{position:absolute;top:-13px;left:1.6rem;background:linear-gradient(135deg,#0e9f6e,#13C9BA);color:#fff;font-size:.72rem;font-weight:800;font-family:var(--font-head);padding:.28rem .8rem;border-radius:999px;box-shadow:var(--shadow-2)}
.seven{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media (max-width:680px){ .seven{grid-template-columns:1fr} }
.tl7{display:grid;grid-template-columns:64px 1fr;gap:1rem;align-items:start}
.tl7 .day{width:64px;height:64px;border-radius:16px;background:var(--electric-50);color:var(--electric);display:grid;place-items:center;font-family:var(--font-head);font-weight:800;font-size:.78rem;text-align:center;line-height:1.1}
.tl7 h4{margin:0 0 .15rem;color:var(--ink);font-family:var(--font-head)}
.tl7 p{margin:0;color:var(--muted);font-size:.92rem}
.rules{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem 1.4rem}
.rules li{display:flex;gap:.6rem;padding:.4rem 0;color:var(--text);font-size:.95rem}
.rules i{color:var(--aqua);margin-top:.25rem}
.proof{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.3rem;display:flex;gap:.8rem;align-items:flex-start}
.proof i{color:var(--electric);font-size:1.2rem;margin-top:.15rem}
/* Barra flotante móvil (#14) */
#whbar{position:fixed;left:0;right:0;bottom:0;z-index:78;background:var(--ink);color:#fff;display:none;padding:.6rem .8rem;box-shadow:0 -10px 30px -14px rgba(0,0,0,.5)}
#whbar .in{max-width:640px;margin:0 auto;display:flex;align-items:center;gap:.6rem}
#whbar small{display:block;color:#9fb0d0;font-size:.7rem}
@media (max-width:680px){ #whbar{display:block} body{padding-bottom:78px} .wa-fab{bottom:86px} #whtop{bottom:150px} #whchat{bottom:76px} }
/* Banner de cierre (footer CTA, #25) */
.footer-cta{background:linear-gradient(135deg,var(--ink),var(--electric));color:#fff;border-radius:var(--radius-lg);padding:clamp(1.6rem,4vw,3rem);text-align:center;margin-bottom:3rem}
.footer-cta h2{color:#fff;margin-bottom:.6rem}
.footer-cta p{color:#c7d2e8}

/* Modal de reglas de la garantía */
.wh-rules-modal{position:fixed;inset:0;z-index:120;display:none}
.wh-rules-modal.open{display:block}
.wh-rules-bg{position:absolute;inset:0;background:rgba(11,21,38,.72);backdrop-filter:blur(3px)}
.wh-rules-box{position:relative;max-width:640px;margin:8vh auto 0;background:#fff;border-radius:20px;padding:2rem 1.8rem;box-shadow:var(--shadow-3);max-height:82vh;overflow:auto}
.wh-rules-x{position:absolute;top:.8rem;right:.9rem;background:transparent;border:0;font-size:1.1rem;color:var(--muted);cursor:pointer}
.wh-rules-box h3{margin-bottom:1rem}
.wh-rules-box .btn{margin-top:1.2rem}
@media (max-width:680px){ .wh-rules-box{margin:4vh 1rem 0;padding:1.5rem 1.2rem} }

/* =====================================================================
   Consistencia visual: modo oscuro, progreso, breadcrumbs, microinteracciones
   ===================================================================== */
/* Barra de progreso de lectura */
#whprogress{position:fixed;top:0;left:0;height:3px;width:0;z-index:99;background:linear-gradient(90deg,var(--aqua),var(--electric));transition:width .1s linear;box-shadow:0 0 8px rgba(19,201,186,.6)}

/* Botón de tema */
.theme-toggle{width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;cursor:pointer;transition:.18s}
.theme-toggle:hover{background:rgba(255,255,255,.18)}
.header.is-solid .theme-toggle{color:var(--ink);border-color:var(--border);background:#fff}
.header.is-solid .theme-toggle:hover{background:var(--soft)}
@media (max-width:480px){ .theme-toggle{width:40px;height:40px} }

/* Breadcrumbs reutilizables */
.page-hero .crumbs{margin-bottom:.7rem}

/* Modo oscuro */
html.dark{--white:#0F1A2B;--soft:#0C1524;--blueL:#16223A;--text:#C7D2E8;--heading:#EEF3FB;--border:#25324A;--muted:#93A3BF;color-scheme:dark}
html.dark body{background:#0B1420;color:#C7D2E8}
html.dark h1,html.dark h2,html.dark h3,html.dark h4{color:#EEF3FB}
html.dark .wrap,html.dark .section,html.dark .hero,html.dark .page-hero{background-color:transparent}
html.dark .section--soft{background:#0C1524}
html.dark .card,html.dark .form-card,html.dark .plan,html.dark .quote,html.dark .gloss,html.dark .rules,html.dark .proof,html.dark .selector__opt,html.dark .selector__result,html.dark .demo-shell,html.dark .demo-toolbar,html.dark .demo-item,html.dark .step,html.dark .tech span,html.dark .src span,html.dark .faq__item,html.dark .calc__opt,html.dark .mobile-menu,html.dark .dropdown,html.dark .whchat__panel,html.dark .whchat__msgs,html.dark .whchat__foot,html.dark .whchat__msg--bot,html.dark .wh-rules-box,html.dark .proj-thumb,html.dark .footer-cta,html.dark .mock__card{background:#13203A !important;border-color:#25324A !important;color:#C7D2E8 !important}
html.dark .muted,html.dark .card p,html.dark .plan p,html.dark .gloss dd,html.dark .demo-item p{color:#93A3BF !important}
html.dark .card h3,html.dark .plan h3,html.dark .rules h4,html.dark .quote .who b,html.dark .tech span,html.dark .gloss dt,html.dark .demo-item strong,html.dark .dropdown__item strong{color:#EEF3FB !important}
html.dark .header.is-solid{background:rgba(15,26,43,.95) !important;border-color:#25324A}
html.dark .header.is-solid .nav__link{color:#C7D2E8}
html.dark .header.is-solid .brand{color:#fff}
html.dark .header.is-solid .brand__desc{color:#93A3BF}
html.dark .field input,html.dark .field select,html.dark .field textarea{background:#0F1A2B;color:#E7EEFB;border-color:#25324A}
html.dark .faq__a p,html.dark .prose p,html.dark .prose li,html.dark .step p{color:#B9C6DE}
html.dark .selector__opt.active,html.dark .calc__opt:has(input:checked){background:#16223A !important}
html.dark .mock__window,html.dark .demo-pane{background:#13203A}
html.dark .btn--outline{background:#13203A;color:#C7D2E8;border-color:#25324A}
html.dark .btn--outline:hover{border-color:var(--aqua);color:#fff}
html.dark .toggle-off{color:#93A3BF}

/* =====================================================================
   Rebalance de color — menos azul, más verde agua + calidez + aire
   ===================================================================== */
:root{--electric:#2A63F5;--aqua:#12B7A8;--aqua-50:#E6F7F4;--amber:#E6A23C;--mint:#EAF8F5;--heading:#0E2438;--soft:#F5F8F9}
.section{padding-block:clamp(3.9rem,8.5vw,7rem)}
.section--mint{background:var(--mint)}
.hero__glow--b{background:rgba(230,162,60,.30)}
.hero__glow--a{background:rgba(42,99,245,.42)}
/* Píldoras/etiquetas: de azul a verde agua */
.eyebrow{color:#0c8b81;background:var(--aqua-50);border-color:#c6efe9}
.eyebrow--aqua{color:#0c8b81;background:var(--aqua-50);border-color:#c6efe9}
.tag{background:var(--aqua-50);border-color:#c6efe9;color:#0c8b81}
/* Iconos y enlaces de tarjeta a teal */
.card__icon,.card__icon--aqua{background:var(--aqua-50);color:#0c8b81}
.card__link{color:#0c8b81}
.tech i{color:#0c8b81}
.quote .av{background:var(--aqua-50);color:#0c8b81}
.faq__q i{color:#0c8b81}
.selector__opt i{color:#0c8b81}
/* CTA principal: degradado teal (contrasta con el azul de marca) */
.btn--primary{background:linear-gradient(135deg,#0FA79A,#12B7A8);box-shadow:0 16px 34px -16px rgba(18,183,168,.7)}
.btn--primary:hover{background:linear-gradient(135deg,#0d9488,#0fa79a)}
.btn--outline:hover{border-color:#12B7A8;color:#0c8b81}
/* Estados activos */
.selector__opt.active{border-color:#12B7A8;background:var(--aqua-50);box-shadow:var(--shadow-2)}
.calc__opt:has(input:checked){border-color:#12B7A8;background:var(--aqua-50)}
/* Planes y footer CTA con acento teal */
.plan--featured{border-color:#12B7A8}
.plan--featured::after{background:linear-gradient(135deg,#0FA79A,#12B7A8)}
.footer-cta{background:linear-gradient(135deg,#0B1F3A,#0FA79A)}
/* Detalles con calidez (ámbar) */
.seal{background:linear-gradient(135deg,#0FA79A,#E6A23C)}
.hero .eyebrow--dark i,.eyebrow--dark{color:#cfe6ff}

/* Footer: accesos a microapps (visibles en todo el sitio) */
.footer-apps{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;padding:1.1rem 0;border-top:1px solid rgba(255,255,255,.1)}
.footer-apps>span{font-size:.82rem;margin-right:.3rem}
.footer-apps a{display:inline-block !important;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:.32rem .75rem;font-size:.8rem;color:#c7d2e8}
.footer-apps a:hover{background:var(--teal);color:#04201c;border-color:var(--teal)}

/* Modal explicativo de microapps */
.mic-modal{position:fixed;inset:0;z-index:150;display:none}
.mic-modal.open{display:block}
.mic-bg{position:absolute;inset:0;background:rgba(11,21,38,.62);backdrop-filter:blur(3px)}
.mic-box{position:relative;max-width:520px;margin:7vh auto 0;background:#fff;border-radius:20px;padding:1.8rem;box-shadow:var(--shadow-3);max-height:86vh;overflow:auto;animation:micIn .3s cubic-bezier(.16,1,.3,1)}
@keyframes micIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.mic-x{position:absolute;top:.8rem;right:.9rem;background:transparent;border:0;font-size:1.1rem;color:var(--muted);cursor:pointer}
.mic-ico{width:56px;height:56px;border-radius:16px;background:var(--aqua-50);color:#0c8b81;display:grid;place-items:center;font-size:1.6rem;margin-bottom:.7rem}
.mic-tag{display:inline-block;background:var(--aqua-50);color:#0c8b81;border-radius:999px;padding:.2rem .7rem;font-size:.72rem;font-weight:700;margin-bottom:.4rem}
.mic-box h3{font-size:1.3rem;margin:.2rem 0 .4rem}
.mic-d{color:var(--muted);font-size:.95rem;margin-bottom:.9rem}
.mic-usost{font-weight:700;color:var(--heading);font-size:.85rem;margin-bottom:.4rem}
.mic-usos{list-style:none;margin-bottom:1.1rem}
.mic-usos li{display:flex;gap:.5rem;font-size:.9rem;color:var(--text);padding:.22rem 0}
.mic-usos i{color:var(--aqua);margin-top:.25rem}
.mic-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.mic-note{font-size:.78rem;color:var(--muted);margin-top:.9rem}
.mic-note i{color:var(--aqua)}
@media (max-width:680px){.mic-box{margin:4vh 1rem 0;padding:1.4rem}}

/* Fix: overlays decorativos no deben bloquear clics; contenido del hero por encima */
.hero__grid,.hero__glow,.page-hero__blob,#hero-canvas,#home-hero-canvas{pointer-events:none !important}
.page-hero .wrap{position:relative;z-index:2}