/* SOVRAS /product — blend: ElevenLabs (shells/tabs/aire) + Handle (consola/manual-vs-agente) + Lio (carcasa) + Wonderful (sobrio) */

/* header fijo: barra de anuncio + nav como una sola pieza que se desliza (igual que home/newsroom) */
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;will-change:transform}
.annc{position:relative}
/* override del nav viejo de base.css (estaba fixed top:2.4rem -> dejaba hueco) */
.nav{position:relative;top:auto;left:auto;right:auto}
/* nav OPACA: la .9 dejaba transparentar el dashboard, la seccion oscura y la foto del CTA */
.nav--solid{background:#fff;border-bottom:1px solid var(--line)}
.nav--solid .nav__logo{color:var(--ink)}
.nav--solid .nav__mark{filter:brightness(0) saturate(100%) invert(13%) sepia(18%) saturate(1400%) hue-rotate(176deg)}
.nav--solid .nav__links{color:var(--ink-soft)}
.nav--solid .nav__cta{border-color:var(--line);color:var(--ink)}
.nav--solid .nav__cta:hover{background:var(--bg-soft)}

/* HERO chico */
.phero{padding:calc(var(--nav-h) + 2.4rem + 5.5rem) 0 3rem}
.phero__title{font-family:var(--font-display);font-weight:400;font-size:3.4rem;line-height:1.04;letter-spacing:-.03em;color:var(--ink);max-width:18ch}
.phero__title .word{display:inline-block;overflow:hidden}.phero__title .word>span{display:inline-block;will-change:transform}
.phero__lead{margin-top:1.5rem;font-size:1.15rem;line-height:1.6;color:var(--ink-soft);max-width:44rem}

/* ===== Dashboard real en carcasa Mac ===== */
.shellwrap{padding:2rem 0 7rem}
.dashhead{text-align:center;display:flex;flex-direction:column;align-items:center;margin-bottom:2.6rem}
.dashlead{margin-top:1.2rem;font-size:1.05rem;line-height:1.62;color:var(--ink-soft);max-width:46rem}
.macwin{width:min(80rem,96vw);margin:0 auto;border-radius:12px;overflow:hidden;background:#fff;
  border:1px solid var(--line);box-shadow:0 1px 1px rgba(20,32,46,.04),0 44px 90px -46px rgba(20,32,46,.34)}
.macwin__bar{display:flex;align-items:center;gap:.5rem;padding:.72rem 1rem;background:#f1eee9;border-bottom:1px solid var(--line)}
.macwin__bar .dot{width:.72rem;height:.72rem;border-radius:50%}
.dot--r{background:#ff5f57}.dot--y{background:#febc2e}.dot--g{background:#28c840}
.macwin__url{margin:0 auto;font-family:var(--font-mono);font-size:.78rem;color:var(--ink-mute);
  background:#fff;border:1px solid var(--line);border-radius:6px;padding:.2rem 1.6rem}
.macwin__screen{line-height:0;background:#f4f1ec;aspect-ratio:1440/810}
.macwin__screen img{width:100%;display:block}
.macwin__screen iframe{width:100%;height:100%;border:0;display:block}
.maccap{text-align:center;margin-top:1.1rem;font-family:var(--font-mono);font-size:.78rem;color:var(--ink-mute)}
/* 3 procesos reales (consolas vivas, una bajo la otra) */
.opshow{padding:5.5rem 0 6rem;border-top:1px solid var(--line)}
.opshow--soft{background:var(--bg-soft)}
/* MÓVIL: consola COMPLETA (no cortada) como preview tappable -> abre fullscreen legible (patrón Duvo/Sierra) */
.macwin{position:relative}
.macwin__tap{display:none;position:absolute;inset:0;z-index:6;border:0;cursor:pointer;align-items:flex-end;justify-content:center;
  padding-bottom:.7rem;background:linear-gradient(to bottom,transparent 56%,rgba(20,32,46,.22))}
.macwin__tap span{font-family:var(--font-mono);font-size:.72rem;font-weight:600;color:#fff;background:rgba(20,24,30,.9);
  border-radius:20px;padding:.46rem .95rem;box-shadow:0 8px 18px -6px rgba(0,0,0,.45)}
.demov{position:fixed;inset:0;z-index:9999;background:rgba(11,15,21,.94);display:flex;flex-direction:column}
.demov__x{position:absolute;top:.8rem;right:.9rem;z-index:2;width:2.5rem;height:2.5rem;border-radius:50%;border:0;
  background:#fff;color:#14202e;font-size:1.05rem;cursor:pointer;box-shadow:0 8px 20px -6px rgba(0,0,0,.5)}
.demov__scroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;display:flex}
.demov__scroll iframe{width:1040px;height:600px;border:0;flex:none;margin:auto;background:#f4f1ec;border-radius:12px}
.demov__hint{text-align:center;color:rgba(255,255,255,.7);font-family:var(--font-mono);font-size:.7rem;padding:.7rem}
@media (max-width:760px){ .macwin__tap{display:flex} }
.macshell-old{padding:2rem 0 7rem}
.shell{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 1px 1px rgba(20,32,46,.03),0 18px 44px -34px rgba(20,32,46,.14)}
.shell__bar{display:flex;justify-content:space-between;align-items:center;padding:.85rem 1.2rem;border-bottom:1px solid var(--line);background:var(--bg-soft)}
.shell__brand{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.92rem;color:var(--ink)}
.shell__brand img{width:1.1rem;height:1.1rem;filter:brightness(0) saturate(100%) invert(13%) sepia(18%) saturate(1400%) hue-rotate(176deg)}
.shell__meta{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-mute)}
.shell__tabs{display:flex;gap:.3rem;padding:.7rem 1.2rem 0;border-bottom:1px solid var(--line);overflow-x:auto}
.stab{font-size:.88rem;color:var(--ink-mute);background:none;border:none;padding:.55rem .85rem;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s}
.stab:hover{color:var(--ink-soft)}
.stab.is-active{color:var(--ink);border-bottom-color:var(--accent);font-weight:500}
.shell__body{display:grid;grid-template-columns:17rem 1fr;min-height:23rem}
.shell__list{border-right:1px solid var(--line);padding:.6rem}
.case{display:block;padding:.75rem .8rem;border-radius:var(--r-sm);cursor:pointer;transition:background .2s}
.case:hover{background:var(--bg-soft)}
.case.is-active{background:var(--bg-soft);box-shadow:inset 2px 0 0 var(--accent)}
.case__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.25rem}
.case__id{font-family:var(--font-mono);font-size:.8rem;color:var(--ink)}
.case__t{font-size:.85rem;color:var(--ink-soft)}
.chip{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-mono);font-size:.68rem;
  padding:.18rem .55rem;border-radius:999px;white-space:nowrap;background:var(--bg-soft);color:var(--ink-soft);border:1px solid var(--line)}
.chip::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--ink-mute)}
.chip--run::before{background:#C9745E}
.chip--ok::before{background:#5F8AA1}
.chip--wait::before{background:#B9B2A8}
.shell__detail{padding:1.4rem 1.6rem}
.detail__head{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:1.2rem;border-bottom:1px solid var(--line)}
.detail__id{display:block;font-family:var(--font-mono);font-size:1rem;color:var(--ink)}
.detail__sub{font-size:.86rem;color:var(--ink-mute)}
.tl{padding:1.3rem 0;display:flex;flex-direction:column;gap:0}
.tl__row{display:flex;gap:.9rem;padding-bottom:1.15rem;position:relative}
.tl__row:not(:last-child)::before{content:"";position:absolute;left:.34rem;top:1rem;bottom:-.15rem;width:1px;background:var(--line)}
.tl__dot{flex:none;width:.72rem;height:.72rem;border-radius:50%;border:2px solid var(--line);background:#fff;margin-top:.15rem;z-index:1}
.tl__row.is-done .tl__dot{background:var(--teal);border-color:var(--teal)}
.tl__row.is-run .tl__dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px rgba(217,109,85,.18)}
.tl__row b{display:block;font-size:.92rem;font-weight:500;color:var(--ink)}
.tl__row span{font-size:.84rem;color:var(--ink-soft)}
.detail__foot{display:flex;flex-wrap:wrap;gap:.4rem 2rem;padding-top:1.1rem;border-top:1px solid var(--line);font-size:.82rem;color:var(--ink-soft)}
.detail__foot i{font-style:normal;font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;color:var(--ink-mute);margin-right:.4rem}

/* MODULOS */
.modules{padding:8rem 0;border-top:1px solid var(--line)}
.modules__head{margin-bottom:4rem}
.module{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;padding:3rem 0;border-top:1px solid var(--line)}
.module--rev .agentlist{order:-1}
.module__txt p{color:var(--ink-soft);line-height:1.6;max-width:32rem}
.agentlist{list-style:none;align-self:center}
.agentlist li{padding:.85rem 0;border-bottom:1px solid var(--line);font-size:.98rem;color:var(--ink);position:relative;padding-left:1.4rem}
.agentlist li::before{content:"";position:absolute;left:0;top:1.15rem;width:.4rem;height:.4rem;border-radius:50%;background:var(--accent)}
.agentlist li:first-child{border-top:1px solid var(--line)}

/* STEPS (limpio) */
.steps{padding:8rem 0;background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.steps .h2{margin-bottom:3.4rem}
.steps__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6rem 3rem}
.step{border-top:1px solid var(--line);padding-top:1.2rem}
.step__n{font-family:var(--font-mono);font-size:.8rem;color:var(--ink-mute)}
.step b{display:block;font-weight:500;font-size:1.05rem;color:var(--ink);margin:.5rem 0 .35rem}
.step span{font-size:.93rem;color:var(--ink-soft);line-height:1.5}

/* ARQUITECTURA (seccion oscura — alternancia blanco/negro) */
.arch{padding:8.5rem 0;background:var(--bg-ink);color:#fff}
.arch__title{color:#fff;margin-bottom:3.4rem}
.arch__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6rem 3rem}
.arch__item{border-top:1px solid rgba(255,255,255,.16);padding-top:1.2rem}
.arch__item b{display:block;font-weight:500;font-size:1.08rem;margin-bottom:.5rem;color:#fff}
.arch__item span{color:rgba(255,255,255,.66);font-size:.95rem;line-height:1.5}

/* FAQ (answer-first para GEO/AEO) */
.faq{padding:6rem 0 6.5rem;border-top:1px solid var(--line)}
.faq .h2{margin-bottom:2.4rem}
.faq__list{max-width:46rem}
.faq__item{padding:1.5rem 0;border-top:1px solid var(--line)}
.faq__item:first-child{border-top:0;padding-top:.4rem}
.faq__q{font-family:var(--font-display);font-weight:500;font-size:1.18rem;color:var(--ink);margin-bottom:.55rem;letter-spacing:-.01em}
.faq__a{font-size:1rem;line-height:1.62;color:var(--ink-soft);max-width:42rem}

@media(max-width:860px){
  .phero__title{font-size:2.4rem}
  .shell__body{grid-template-columns:1fr}
  .shell__list{border-right:none;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
  .module,.module--rev .agentlist{grid-template-columns:1fr;order:0}
  .steps__grid,.arch__grid{grid-template-columns:1fr 1fr}
  .h2{font-size:2.1rem}
}
@media(max-width:560px){.steps__grid,.arch__grid,.shell__list{grid-template-columns:1fr}}