/* =========================================================================
   KAPTOVA — sitio de venta. HTML + CSS + JS simple. Cero dependencias.
   Mobile first: todo se escribe para 360 px y después crece.
   ========================================================================= */
:root{
  --ink:#0B0E14; --ink-2:#141926; --ink-3:#1F2634;
  --paper:#FFFFFF; --paper-2:#F5F6F8; --paper-3:#ECEEF2;
  --line:#E2E6EC; --line-dark:#262E3D;
  --text:#121725; --muted:#5C6675; --muted-dark:#9AA4B4;
  --accent:#FF5A36; --accent-2:#E0431F; --accent-soft:#FFEDE8;
  --live:#15A34A;
  --r:14px; --r-lg:22px;
  --sp:clamp(1.15rem,4.5vw,1.6rem);
  --maxw:1140px;
  --shadow:0 1px 2px rgba(11,14,20,.05), 0 12px 32px rgba(11,14,20,.07);
  --shadow-lg:0 2px 4px rgba(11,14,20,.06), 0 28px 64px rgba(11,14,20,.14);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;font-family:var(--font);color:var(--text);background:var(--paper);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.12;letter-spacing:-.025em;font-weight:800}
h1{font-size:clamp(2.1rem,8.2vw,4.15rem)}
h2{font-size:clamp(1.65rem,5.6vw,2.7rem);letter-spacing:-.03em}
h3{font-size:clamp(1.08rem,3.4vw,1.3rem);letter-spacing:-.015em;font-weight:700}
p{margin:0}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--sp)}
.sec{padding:clamp(3.4rem,10vw,6.5rem) 0}
.sec-line{border-top:1px solid var(--line)}
.eyebrow{
  font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-2);margin-bottom:.85rem;
}
.lead{font-size:clamp(1.02rem,3.5vw,1.2rem);color:var(--muted);max-width:40rem}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:inherit;font-size:1rem;font-weight:700;letter-spacing:-.01em;
  padding:.95rem 1.5rem;border-radius:100px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;min-height:52px;
  transition:transform .15s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn-1{background:var(--accent);color:#fff;box-shadow:0 8px 22px rgba(255,90,54,.3)}
.btn-1:hover{background:var(--accent-2);box-shadow:0 10px 28px rgba(255,90,54,.38)}
.btn-2{background:transparent;color:var(--text);border-color:var(--line)}
.btn-2:hover{border-color:var(--text);background:var(--paper-2)}
.btn-ghost-dark{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.18)}
.btn-ghost-dark:hover{background:rgba(255,255,255,.13)}
.btn-sm{padding:.6rem 1.1rem;font-size:.9rem;min-height:42px}
.btns{display:flex;flex-direction:column;gap:.7rem;margin-top:1.9rem}
.btns .btn{width:100%}
@media(min-width:520px){
  .btns{flex-direction:row;flex-wrap:wrap}
  .btns .btn{width:auto}
}


/* ---------- barra superior ---------- */
.top{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s ease;
}
.top.scrolled{border-bottom-color:var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;height:62px}
.mark{display:flex;align-items:center;gap:.55rem;text-decoration:none;flex-shrink:0}
.mark-glyph{
  width:30px;height:30px;border-radius:9px;background:var(--ink);
  display:grid;place-items:center;flex-shrink:0;
}
.mark-glyph svg{width:17px;height:17px}
.mark-name{font-size:1.1rem;font-weight:800;letter-spacing:.015em}
.top-nav{display:none;gap:1.85rem}
.top-nav a{
  text-decoration:none;font-size:.93rem;font-weight:600;color:var(--muted);
  transition:color .15s ease;
}
.top-nav a:hover{color:var(--text)}
@media(min-width:900px){.top-nav{display:flex}}
.top-cta{display:none}
@media(min-width:620px){.top-cta{display:inline-flex}}

/* ---------- hero ---------- */
.hero{padding:clamp(2.6rem,9vw,5rem) 0 clamp(2.6rem,8vw,4.5rem)}
/* minmax(0,…) partout : sans ça, une bande qui défile (les onglets de la demo)
   impone su ancho mínimo a toda la columna y la página desborda en el móvil. */
.hero-grid{display:grid;gap:clamp(2.4rem,7vw,3.5rem);grid-template-columns:minmax(0,1fr)}
.hero-grid>*{min-width:0}
@media(min-width:1000px){
  .hero-grid{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);align-items:center;gap:4rem}
}
.hero h1 .hl{color:var(--accent)}
.hero .lead{margin-top:1.25rem}
/* La phrase officielle du prix (Nadim, 04/10/2026). Aucun montant, aucune
   durée. Même règle que sur la branche du Développeur (AIV-152). */
.hero-fine{font-size:.84rem;color:var(--muted);margin-top:1.1rem;max-width:30rem}
.dark .hero-fine{color:var(--muted-dark)}
.chips{
  display:flex;flex-wrap:wrap;gap:.45rem .5rem;margin-top:1.7rem;
  font-size:.82rem;font-weight:600;color:var(--muted);
}
.chip{
  display:inline-flex;align-items:center;gap:.38rem;
  background:var(--paper-2);border:1px solid var(--line);
  padding:.36rem .72rem;border-radius:100px;
}
.chip::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--live);flex-shrink:0;
}

/* ---------- demo (teléfono) ---------- */
.demo-stage{position:relative;min-width:0}
.demo-tabs{
  min-width:0;max-width:100%;display:flex;gap:.3rem;padding:.3rem;background:var(--paper-2);
  border:1px solid var(--line);border-radius:100px;margin-bottom:1.1rem;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.demo-tabs::-webkit-scrollbar{display:none}
.demo-tab{
  flex:1 0 auto;font-family:inherit;font-size:.82rem;font-weight:700;
  padding:.6rem .9rem;border:0;border-radius:100px;background:transparent;
  color:var(--muted);cursor:pointer;white-space:nowrap;transition:all .18s ease;
}
.demo-tab[aria-selected="true"]{background:var(--paper);color:var(--text);box-shadow:0 1px 3px rgba(11,14,20,.12)}
.phone{
  width:100%;min-width:0;background:var(--ink);border-radius:clamp(26px,7vw,34px);padding:9px;
  box-shadow:var(--shadow-lg);max-width:396px;margin:0 auto;
}
.phone-screen{
  background:var(--paper);border-radius:clamp(19px,5.4vw,26px);overflow:hidden;
  display:flex;flex-direction:column;height:clamp(468px,76vh,560px);
}
.ph-site{
  flex-shrink:0;padding:.85rem .95rem;border-bottom:1px solid var(--line);
  background:var(--paper-2);
}
.ph-site-bar{
  display:flex;align-items:center;gap:.45rem;font-size:.72rem;color:var(--muted);
  background:var(--paper);border:1px solid var(--line);border-radius:100px;
  padding:.34rem .7rem;font-weight:600;
}
.ph-site-bar svg{width:11px;height:11px;flex-shrink:0;opacity:.6}
.ph-site-name{margin-top:.6rem;font-size:.95rem;font-weight:800;letter-spacing:-.01em}
.ph-site-sub{font-size:.74rem;color:var(--muted);font-weight:600}
.ph-chat{min-width:0;flex:1;overflow:hidden;display:flex;flex-direction:column;background:var(--paper)}
.ph-chat-head{
  min-width:0;flex-shrink:0;display:flex;align-items:center;gap:.6rem;
  padding:.7rem .95rem;background:var(--ink);color:#fff;
}
.ph-av{
  width:30px;height:30px;border-radius:9px;background:var(--accent);
  display:grid;place-items:center;flex-shrink:0;
}
.ph-av svg{width:15px;height:15px}
.ph-chat-head>div{min-width:0}
.ph-chat-title{font-size:.86rem;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-chat-status{font-size:.66rem;color:#8FE3AE;font-weight:700;display:flex;align-items:center;gap:.28rem}
.ph-chat-status::before{
  content:"";width:5px;height:5px;border-radius:50%;background:#3ED37B;
  animation:blink 1.9s infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.ph-body{
  min-width:0;flex:1;overflow-y:auto;padding:.95rem;display:flex;flex-direction:column;
  gap:.5rem;background:var(--paper-2);scroll-behavior:smooth;
}
.msg{max-width:84%;font-size:.86rem;line-height:1.48;animation:pop .32s ease both}
@keyframes pop{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.msg-bot{align-self:flex-start}
.msg-bot .bub{background:var(--paper);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:.6rem .8rem}
.msg-user{align-self:flex-end}
.msg-user .bub{background:var(--ink);color:#fff;border-radius:14px 14px 4px 14px;padding:.6rem .8rem}
.bub strong{font-weight:800}
.bub{overflow-wrap:anywhere}
.msg-opts{display:flex;flex-wrap:wrap;gap:.32rem;margin-top:.45rem}
.opt{
  font-size:.74rem;font-weight:700;color:var(--accent-2);background:var(--accent-soft);
  border:1px solid rgba(255,90,54,.26);padding:.3rem .62rem;border-radius:100px;
}
.opt.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.typing{align-self:flex-start;display:flex;gap:3px;background:var(--paper);border:1px solid var(--line);
  border-radius:14px 14px 14px 4px;padding:.72rem .8rem;animation:pop .25s ease both}
.typing i{width:5px;height:5px;border-radius:50%;background:#B6BEC9;animation:tb 1.25s infinite}
.typing i:nth-child(2){animation-delay:.14s}
.typing i:nth-child(3){animation-delay:.28s}
@keyframes tb{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
.saved{
  align-self:stretch;display:flex;align-items:flex-start;gap:.5rem;
  background:#F0FAF3;border:1px solid #BFE9CE;border-radius:12px;
  padding:.6rem .7rem;font-size:.76rem;font-weight:600;color:#176B34;
  animation:pop .35s ease both;
}
.saved svg{width:14px;height:14px;flex-shrink:0;margin-top:2px}
.ph-foot{
  flex-shrink:0;padding:.6rem .95rem .75rem;background:var(--paper);border-top:1px solid var(--line);
}
.ph-input{
  display:flex;align-items:center;gap:.5rem;background:var(--paper-2);
  border:1px solid var(--line);border-radius:100px;padding:.45rem .5rem .45rem .85rem;
  font-size:.82rem;color:#A8B0BC;font-weight:600;
}
.ph-send{
  margin-left:auto;width:28px;height:28px;border-radius:50%;background:var(--accent);
  display:grid;place-items:center;flex-shrink:0;
}
.ph-send svg{width:13px;height:13px}
.ph-pw{text-align:center;font-size:.6rem;color:#AEB6C2;font-weight:700;margin-top:.45rem;letter-spacing:.02em}
.demo-note{
  font-size:.78rem;color:var(--muted);text-align:center;margin-top:.9rem;max-width:30rem;
  margin-left:auto;margin-right:auto;
}
.demo-replay{
  display:inline-flex;align-items:center;gap:.35rem;background:none;border:0;
  font-family:inherit;font-size:.78rem;font-weight:700;color:var(--accent-2);
  cursor:pointer;padding:.2rem .1rem;text-decoration:underline;
}

/* ---------- tarjetas ---------- */
.cards{display:grid;gap:1rem;margin-top:2.4rem;grid-template-columns:minmax(0,1fr)}
.cards>*{min-width:0}
@media(min-width:680px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.3rem,4.4vw,1.75rem);transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.card:hover{border-color:#C9D0DA;transform:translateY(-2px);box-shadow:var(--shadow)}
.card-ico{
  width:40px;height:40px;border-radius:11px;background:var(--accent-soft);
  display:grid;place-items:center;margin-bottom:1rem;
}
.card-ico svg{width:20px;height:20px;stroke:var(--accent-2)}
.card h3{margin-bottom:.5rem}
.card p{font-size:.93rem;color:var(--muted)}
.card-tag{
  display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;padding:.2rem .55rem;border-radius:100px;margin-bottom:.8rem;
}
.tag-soon{background:var(--paper-3);color:var(--muted)}
.card-soon{background:var(--paper-2);border-style:dashed}
.card-soon .card-ico{background:var(--paper-3)}
.card-soon .card-ico svg{stroke:var(--muted)}

/* ---------- pasos ---------- */
.steps{display:grid;gap:1.4rem;margin-top:2.6rem;counter-reset:s}
@media(min-width:860px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}}
.step{position:relative;padding-top:2.9rem}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;top:0;left:0;width:36px;height:36px;border-radius:11px;
  background:var(--ink);color:#fff;display:grid;place-items:center;
  font-size:1rem;font-weight:800;
}
.step h3{margin-bottom:.45rem}
.step p{font-size:.93rem;color:var(--muted)}
.step-time{
  display:inline-block;margin-top:.7rem;font-size:.74rem;font-weight:700;
  color:var(--accent-2);background:var(--accent-soft);padding:.22rem .6rem;border-radius:100px;
}

/* ---------- bloque oscuro ---------- */
.dark{background:var(--ink);color:#fff}
.dark h2{color:#fff}
.dark .lead{color:var(--muted-dark)}
.dark .eyebrow{color:#FF8B6E}
.code{
  min-width:0;background:var(--ink-2);border:1px solid var(--line-dark);border-radius:var(--r);
  margin-top:1.8rem;overflow:hidden;
}
.code-top{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.6rem .85rem;border-bottom:1px solid var(--line-dark);
  font-size:.72rem;font-weight:700;color:var(--muted-dark);letter-spacing:.04em;
}
.code-copy{
  font-family:inherit;font-size:.74rem;font-weight:700;color:#fff;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  padding:.3rem .7rem;border-radius:100px;cursor:pointer;transition:background .15s ease;
}
.code-copy:hover{background:rgba(255,255,255,.18)}
.code pre{
  margin:0;padding:1rem .85rem;overflow-x:auto;font-size:.8rem;line-height:1.7;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#D8DEE9;
  -webkit-overflow-scrolling:touch;
}
.code .t{color:#7FD1B9}.code .a{color:#FF9E85}.code .v{color:#F0D48A}
.dark-list{display:grid;gap:.85rem;margin-top:1.9rem}
.dark-list div{display:flex;gap:.65rem;align-items:flex-start;font-size:.95rem;color:#D4DAE4}
.dark-list svg{width:17px;height:17px;flex-shrink:0;margin-top:3px;stroke:#3ED37B}

/* ---------- panel ---------- */
.panel-grid{display:grid;gap:2.4rem;margin-top:2.6rem}
@media(min-width:960px){.panel-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:3.4rem}}
.panel-list{display:grid;gap:1.25rem}
.panel-item{display:flex;gap:.9rem;align-items:flex-start}
.panel-item>div{min-width:0}
.panel-item-ico{
  width:34px;height:34px;border-radius:10px;background:var(--ink);
  display:grid;place-items:center;flex-shrink:0;
}
.panel-item-ico svg{width:16px;height:16px;stroke:#fff}
.panel-item h3{font-size:1rem;margin-bottom:.2rem}
.panel-item p{font-size:.9rem;color:var(--muted)}
.shot{
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow);background:var(--paper);
}
.shot-top{
  display:flex;align-items:center;gap:.5rem;padding:.65rem .85rem;
  background:var(--paper-2);border-bottom:1px solid var(--line);
}
.shot-dot{width:9px;height:9px;border-radius:50%;background:var(--line)}
.shot-ttl{margin-left:.35rem;font-size:.74rem;font-weight:700;color:var(--muted)}
.shot-body{padding:.9rem;display:grid;gap:.6rem}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.kpi{background:var(--paper-2);border:1px solid var(--line);border-radius:11px;padding:.6rem .55rem}
.kpi-n{font-size:1.3rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.kpi-l{font-size:.64rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:.25rem}
.row{
  display:flex;align-items:center;gap:.6rem;background:var(--paper);
  border:1px solid var(--line);border-radius:11px;padding:.6rem .7rem;
}
.row>div{min-width:0}
.row-t,.row-s{overflow-wrap:anywhere}
.row-av{
  width:26px;height:26px;border-radius:8px;background:var(--paper-3);flex-shrink:0;
  display:grid;place-items:center;font-size:.66rem;font-weight:800;color:var(--muted);
}
.row-t{font-size:.8rem;font-weight:700;line-height:1.25}
.row-s{font-size:.7rem;color:var(--muted);font-weight:600}
.row-badge{
  margin-left:auto;font-size:.62rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;padding:.2rem .45rem;border-radius:100px;flex-shrink:0;
  background:#F0FAF3;color:#176B34;
}
.row-badge.q{background:var(--accent-soft);color:var(--accent-2)}

/* ---------- honestidad ---------- */
.honest{display:grid;gap:.9rem;margin-top:2.4rem}
@media(min-width:760px){.honest{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hitem{
  display:flex;gap:.8rem;align-items:flex-start;background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--r);padding:1.05rem 1.15rem;
}
.hitem>div{min-width:0}
.hitem svg{width:18px;height:18px;flex-shrink:0;margin-top:2px;stroke:var(--accent-2)}
.hitem h3{font-size:.97rem;margin-bottom:.22rem}
.hitem p{font-size:.88rem;color:var(--muted)}

/* ---------- cierre ---------- */
.close-box{
  background:var(--ink);color:#fff;border-radius:var(--r-lg);
  padding:clamp(2rem,7vw,3.4rem);text-align:center;
}
.close-box h2{color:#fff}
.close-box .lead{color:var(--muted-dark);margin:1.1rem auto 0}
.close-box .btns{justify-content:center}
.close-fine{font-size:.8rem;color:var(--muted-dark);margin-top:1.3rem}
.price-slot{
  margin-top:1.6rem;border:1px dashed rgba(255,255,255,.26);border-radius:var(--r);
  padding:.95rem 1.1rem;font-size:.86rem;color:#D4DAE4;
}
.price-slot b{color:#fff}

/* ---------- faq ---------- */
.faq{margin-top:2.4rem;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.15rem 2.3rem 1.15rem 0;position:relative;
  font-size:1rem;font-weight:700;letter-spacing:-.012em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.35rem;top:1.45rem;width:9px;height:9px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq-a{padding:0 0 1.2rem;font-size:.94rem;color:var(--muted);max-width:48rem}

/* ---------- pie ---------- */
/* La bulle flottante de jp.js occupe les 80 px du coin bas droit (60 px + 20 px
   de marge). On réserve la place sous le pied : au bas de la page, plus rien
   ne passe sous elle — ni la ligne de copyright, ni un lien. (AIV-134) */
.foot{background:var(--ink);color:var(--muted-dark);font-size:.88rem;
  padding:3rem 0 calc(2.2rem + 72px)}
.foot-in{display:grid;gap:1.8rem}
@media(min-width:760px){.foot-in{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:2.4rem}}
/* La marque du pied est un lien en display:flex : sans cette ligne il occupe
   toute la largeur du bloc, donc une grande zone vide reste cliquable — et
   passe sous la bulle flottante. On le ramène à la taille de son contenu. */
.foot .mark{width:max-content;max-width:100%}
.foot .mark-name{color:#fff}
.foot-blurb{margin-top:.85rem;max-width:22rem;font-size:.86rem}
.foot h4{color:#fff;font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.9rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.foot a{text-decoration:none;transition:color .15s ease}
.foot a:hover{color:#fff}
.foot-bottom{
  margin-top:2.6rem;padding-top:1.5rem;border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;font-size:.78rem;
  /* La bulle flottante occupe une bande de 80 px le long du bord droit. La
     place sous le pied (voir .foot) suffit quand on est tout en bas, mais pas
     aux 38 px de défilement juste avant : on écarte donc aussi cette dernière
     ligne de la bande, et plus rien ne passe sous la bulle, à aucune hauteur. */
  padding-right:80px;
}
.foot-legal{margin-left:auto}

/* ---------- aparición al scroll ---------- */
.rise{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}

/* ---------- banda de preview (se quita al publicar) ---------- */
.pv{
  background:#2A1C00;color:#FFD88A;font-size:.76rem;font-weight:700;
  padding:.5rem var(--sp);text-align:center;letter-spacing:.01em;
}

/* =========================================================================
   Páginas internas (precios, empezar, legales). Reutilizan todo lo de arriba.
   ========================================================================= */
.page-head{padding:clamp(2.4rem,8vw,4.2rem) 0 clamp(1.6rem,5vw,2.4rem)}
.page-head .lead{margin-top:1.1rem}
.prose{max-width:46rem}
.prose h2{margin-top:clamp(2.2rem,6vw,3rem)}
.prose h3{margin-top:1.9rem}
.prose p,.prose li{font-size:.97rem;color:var(--muted);margin-top:.85rem}
.prose ul{padding-left:1.15rem;margin:0}
.prose li{margin-top:.5rem}
.prose strong{color:var(--text)}
.prose .pend{
  display:block;border:1px dashed #C9D0DA;background:var(--paper-2);
  border-radius:var(--r);padding:.85rem 1rem;margin-top:1rem;
  font-size:.88rem;color:var(--muted);
}
.prose .pend b{color:var(--text)}

/* ---------- formulaire ---------- */
.form{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,5vw,2rem);max-width:34rem;
}
.field{margin-top:1.15rem}
.field:first-child{margin-top:0}
.field label{display:block;font-size:.84rem;font-weight:700;margin-bottom:.4rem}
.field .hint{font-size:.78rem;color:var(--muted);font-weight:500;margin-left:.3rem}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:1rem;color:var(--text);
  background:var(--paper-2);border:1.5px solid var(--line);border-radius:12px;
  padding:.8rem .95rem;outline:none;transition:border-color .15s ease,background .15s ease;
  min-height:50px;
}
.field textarea{min-height:92px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);background:var(--paper)}
.form .btn{width:100%;margin-top:1.6rem}
.form-fine{font-size:.78rem;color:var(--muted);margin-top:1rem;text-align:center}
.form-ok{
  display:none;background:#F0FAF3;border:1px solid #BFE9CE;border-radius:var(--r);
  padding:1.1rem 1.2rem;font-size:.92rem;color:#176B34;font-weight:600;margin-top:1.2rem;
}

/* ---------- parcours ---------- */
.track{display:grid;gap:.7rem;margin-top:2.2rem;max-width:40rem}
.track-step{
  display:flex;gap:.9rem;align-items:flex-start;background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.15rem;
}
.track-step>div{min-width:0}
.track-n{
  width:28px;height:28px;border-radius:9px;background:var(--ink);color:#fff;flex-shrink:0;
  display:grid;place-items:center;font-size:.85rem;font-weight:800;
}
.track-step.done .track-n{background:var(--live)}
.track-step h3{font-size:.97rem;margin-bottom:.18rem}
.track-step p{font-size:.87rem;color:var(--muted)}

/* =========================================================================
   L'ASSISTANT DANS LA PAGE — c'est Kaptova qui répond, pas un email.
   Décision de Nadim du 03/10 : le site EST la démonstration.
   ========================================================================= */
.asst{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column;
  min-width:0;max-width:520px;margin:0 auto;width:100%;
}
.asst-head{
  display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;
  background:var(--ink);color:#fff;flex-shrink:0;min-width:0;
}
.asst-av{
  width:34px;height:34px;border-radius:10px;background:var(--accent);flex-shrink:0;
  display:grid;place-items:center;font-size:.9rem;font-weight:800;color:#fff;
}
.asst-head>div{min-width:0}
.asst-name{font-size:.95rem;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.asst-state{font-size:.7rem;font-weight:700;color:#8FE3AE;display:flex;align-items:center;gap:.3rem;margin-top:1px}
.asst-state::before{content:"";width:5px;height:5px;border-radius:50%;background:#3ED37B;animation:blink 1.9s infinite}
.asst-body{
  flex:1;min-width:0;overflow-y:auto;padding:1rem;background:var(--paper-2);
  display:flex;flex-direction:column;gap:.55rem;
  height:clamp(290px,44vh,370px);scroll-behavior:smooth;
}
.asst-msg{max-width:88%;font-size:.9rem;line-height:1.5;animation:pop .3s ease both}
.asst-msg.bot{align-self:flex-start}
.asst-msg.bot .b{background:var(--paper);border:1px solid var(--line);border-radius:15px 15px 15px 5px;padding:.65rem .85rem;overflow-wrap:anywhere}
.asst-msg.me{align-self:flex-end}
.asst-msg.me .b{background:var(--ink);color:#fff;border-radius:15px 15px 5px 15px;padding:.65rem .85rem;overflow-wrap:anywhere}
.asst-msg .b strong{font-weight:800}
.asst-sug{display:flex;gap:.4rem;padding:.75rem 1rem .1rem;background:var(--paper);min-width:0;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.asst-sug::-webkit-scrollbar{display:none}
.sug{flex:0 0 auto;white-space:nowrap}
.sug{
  font-family:inherit;font-size:.8rem;font-weight:700;color:var(--accent-2);
  background:var(--accent-soft);border:1px solid rgba(255,90,54,.28);
  padding:.45rem .8rem;border-radius:100px;cursor:pointer;
  transition:background .15s ease,color .15s ease;min-height:36px;
}
.sug:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.asst-foot{padding:.75rem 1rem 1rem;background:var(--paper);flex-shrink:0;min-width:0}
.asst-form{
  display:flex;align-items:center;gap:.5rem;background:var(--paper-2);
  border:1.5px solid var(--line);border-radius:100px;padding:.3rem .3rem .3rem .95rem;
  transition:border-color .15s ease;min-width:0;
}
.asst-form:focus-within{border-color:var(--accent);background:var(--paper)}
.asst-form input{
  flex:1;min-width:0;background:none;border:0;outline:none;font-family:inherit;
  font-size:.92rem;color:var(--text);padding:.6rem 0;
}
.asst-form button{
  width:38px;height:38px;border-radius:50%;background:var(--accent);border:0;
  display:grid;place-items:center;cursor:pointer;flex-shrink:0;
  transition:background .15s ease;
}
.asst-form button:hover{background:var(--accent-2)}
.asst-form button svg{width:16px;height:16px}
.asst-note{font-size:.72rem;color:var(--muted);text-align:center;margin-top:.6rem;font-weight:600}
.asst-typing{align-self:flex-start;display:flex;gap:3px;background:var(--paper);border:1px solid var(--line);
  border-radius:15px 15px 15px 5px;padding:.75rem .85rem;animation:pop .25s ease both}
.asst-typing i{width:5px;height:5px;border-radius:50%;background:#B6BEC9;animation:tb 1.25s infinite}
.asst-typing i:nth-child(2){animation-delay:.14s}
.asst-typing i:nth-child(3){animation-delay:.28s}

/* =========================================================================
   AIV-134 — LA CARTE QUI OUVRE LA BULLE
   Il n'y a plus de panneau de conversation dans la page : la conversation,
   c'est la bulle flottante de jp.js, qui suit le visiteur partout. Cette
   carte garde l'en-tête de l'assistant (c'est elle qui vend), montre la
   bulle du doigt et l'ouvre. Un seul assistant, un seul fil.
   ========================================================================= */
.abrir{padding:1.15rem 1.15rem 1.3rem;background:var(--paper)}
.abrir-t{font-size:1.06rem;font-weight:800;letter-spacing:-.018em;line-height:1.25}
.abrir-p{margin-top:.6rem;font-size:.92rem;color:var(--muted);line-height:1.55}
.abrir-l{
  margin-top:1.15rem;font-size:.72rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);
}
/* Dans la carte, les suggestions passent à la ligne. La bande qui défile de
   côté a du sens dans une conversation, pas ici : elle coupait la troisième
   pastille au bord de la carte, et on croyait à un défaut d'affichage. */
.asst-abrir .asst-sug{
  padding:.6rem 0 .25rem;background:transparent;flex-wrap:wrap;overflow-x:visible;
}
.asst-abrir .sug{white-space:normal}
.abrir-btn{width:100%;margin-top:1rem}
.asst-abrir .asst-note{margin-top:.9rem;text-align:left;font-weight:500;line-height:1.5}

/* ---------- la marque écrite ---------- */
.mark-word{
  font-size:1.12rem;font-weight:800;letter-spacing:.055em;text-transform:uppercase;
  line-height:1;
}
.mark-word span{color:var(--accent)}

/* ---------- formulaire court, 3 champs ---------- */
.alta{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,5vw,2rem);max-width:30rem;margin:2.2rem auto 0;
  box-shadow:var(--shadow);
}
.dark .alta{background:var(--ink-2);border-color:var(--line-dark)}
.dark .alta .field label{color:#fff}
.dark .alta .field input{background:var(--ink);border-color:var(--line-dark);color:#fff}
.dark .alta .field input::placeholder{color:#6B7585}
.dark .alta .field input:focus{border-color:var(--accent);background:#0A0D13}
.alta-fine{font-size:.78rem;color:var(--muted);margin-top:.95rem;text-align:center}
.close-box .alta .field label{color:var(--text)}   /* el formulario es una tarjeta blanca dentro de la caja oscura */
.dark .alta-fine{color:var(--muted-dark)}

/* ---------- « qué pasa después » : la dernière objection, levée avant le formulaire ---------- */
.despues{
  max-width:30rem;margin:1.6rem auto 0;text-align:left;
  border:1px solid var(--line-dark);border-radius:var(--r);padding:1.15rem 1.3rem;
  background:rgba(255,255,255,.03);
}
.despues h3{font-size:.95rem;color:#fff;margin-bottom:.75rem}
.despues ol{margin:0;padding-left:1.15rem;display:grid;gap:.5rem}
.despues li{font-size:.88rem;color:#D4DAE4;line-height:1.5}