/* =========================================================================
   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 de l'essai (Nadim, 13/10/2026) : 30 jours gratuits,
   sans carte. Les montants vivent dans la section Precios, nulle part ailleurs. */
.hero-fine{font-size:.84rem;color:var(--muted);margin-top:1.1rem;max-width:30rem}
.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 claro (antes oscuro) ----------
   Décision de Nadim du 16/10/2026 : « Visuels Kaptova : fonds clairs, jamais sombres ».
   Fond gris très clair, orange #FF5A36 en accent. */
.sec-claro{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.code{
  min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  margin-top:1.8rem;overflow:hidden;box-shadow:var(--shadow);
}
.code-top{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.6rem .85rem;border-bottom:1px solid var(--line);background:var(--paper-2);
  font-size:.72rem;font-weight:700;color:var(--muted);letter-spacing:.04em;
}
.code-copy{
  font-family:inherit;font-size:.78rem;font-weight:700;color:#fff;
  background:var(--accent);border:1px solid var(--accent);min-height:44px;
  padding:.3rem .9rem;border-radius:100px;cursor:pointer;transition:background .15s ease;
}
.code-copy:hover{background:var(--accent-2);border-color:var(--accent-2)}
.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:var(--text);
  -webkit-overflow-scrolling:touch;white-space:pre-wrap;overflow-wrap:anywhere;
}
.code .t{color:#0F7B63}.code .a{color:var(--accent-2)}.code .v{color:#8A5A00}
.check-list{display:grid;gap:.85rem;margin-top:1.9rem}
.check-list div{display:flex;gap:.65rem;align-items:flex-start;font-size:.95rem;color:var(--text)}
.check-list svg{width:17px;height:17px;flex-shrink:0;margin-top:3px;stroke:var(--live)}

/* ---------- 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(--accent-soft);color:var(--text);border-radius:var(--r-lg);
  border:1px solid rgba(255,90,54,.22);
  padding:clamp(2rem,7vw,3.4rem) clamp(1rem,5vw,3.4rem);text-align:center;
}
.close-box .lead{color:var(--muted);margin:1.1rem auto 0}
.close-box .btns{justify-content:center}
.close-fine{font-size:.8rem;color:var(--muted);margin-top:1.3rem}

/* ---------- selector de moneda (Bs / USD) ---------- */
.moneda{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem}
.moneda-l{font-size:.86rem;color:var(--muted);font-weight:600}
.moneda-sel{display:inline-flex;gap:.25rem;padding:.25rem;background:var(--paper-2);border:1px solid var(--line);border-radius:100px}
.moneda-sel button{
  font-family:inherit;font-size:.9rem;font-weight:700;color:var(--muted);
  min-width:64px;min-height:44px;padding:.4rem 1rem;border:0;border-radius:100px;
  background:transparent;cursor:pointer;
}
.moneda-sel button[aria-pressed="true"]{background:var(--paper);color:var(--text);box-shadow:0 1px 3px rgba(11,14,20,.12)}
.precios-error{margin-top:1rem;font-size:.9rem;font-weight:600;color:#B33617;background:#FFF4F1;border:1px solid #FFC9BA;border-radius:var(--r);padding:.8rem 1rem}
.precios-error[hidden],.precios-anual[hidden],.moneda[hidden]{display:none}

/* ---------- precios ----------
   Grille de Nadim du 16/10/2026 : Asistente / Negocio / Completo, plus une
   « puesta en marcha » payée une fois ; essai de 30 jours du plan Negocio sans
   carte. Completo affiché « Próximamente ». Tout imite les tarjetas (.card). */
.precios-banda{
  display:flex;flex-direction:column;gap:.3rem;align-items:center;text-align:center;
  background:var(--accent-soft);border:1px solid rgba(255,90,54,.26);
  border-radius:var(--r);padding:1.05rem 1.15rem;margin-top:2.2rem;
}
.precios-banda strong{font-size:1.02rem;font-weight:800;letter-spacing:-.015em;color:var(--text)}
.precios-banda span{font-size:.88rem;color:var(--muted)}
.planes{display:grid;gap:1rem;margin-top:1.4rem;grid-template-columns:minmax(0,1fr)}
.planes>*{min-width:0}
@media(min-width:980px){.planes{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}}
/* Sur 3 colonnes, une carte sans étiquette réserve la hauteur de l'étiquette (.card-tag :
   ligne + padding + marge) pour que titres et prix restent alignés. */
@media(min-width:980px){.plan>h3:first-child{margin-top:calc(.68rem*1.6 + .4rem + .8rem)}}
.plan{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.3rem,4.4vw,1.75rem);display:flex;flex-direction:column;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.plan:hover{border-color:#C9D0DA;transform:translateY(-2px);box-shadow:var(--shadow)}
.plan-destacado{border-color:var(--accent);box-shadow:var(--shadow)}
.plan-destacado:hover{border-color:var(--accent-2)}
.tag-top{background:var(--accent-soft);color:var(--accent-2)}
.plan h3{font-size:1.2rem}
.plan-frase{font-size:.9rem;color:var(--muted);font-weight:600;margin-top:.3rem}
.plan-precio{margin-top:1rem;font-size:2.1rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.plan-precio small{font-size:.9rem;font-weight:700;color:var(--muted);letter-spacing:0}
.plan ul{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.6rem}
.plan li{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--muted);min-width:0}
.plan li>span{min-width:0;overflow-wrap:anywhere}
.plan li svg{width:16px;height:16px;flex-shrink:0;margin-top:4px;stroke:var(--live)}
.plan li strong{color:var(--text);font-weight:700}
.plan-camino{
  display:inline-block;font-size:.72rem;font-weight:700;color:var(--muted);
  background:var(--paper-3);border-radius:100px;padding:.18rem .55rem;margin-top:.25rem;
}
.plan .card-tag{align-self:flex-start}
.plan-puesta{margin-top:.55rem;font-size:.85rem;color:var(--muted)}
.plan-puesta strong{color:var(--text);font-weight:700}
.plan-pronto{background:var(--paper-2);border-style:dashed}
.plan-pronto:hover{transform:none;box-shadow:none}
.plan-nota{margin-top:1.1rem;font-size:.82rem;color:var(--muted);line-height:1.45}
.plan-accion{margin-top:auto;padding-top:1.5rem}
.plan-accion .btn{width:100%}
.precios-anual{
  margin-top:1.4rem;text-align:center;font-size:.88rem;color:var(--muted);
}
.precios-anual strong{color:var(--text)}

/* ---------- 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(--paper-2);color:var(--muted);font-size:.88rem;border-top:1px solid var(--line);
  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,.foot .mark-word{color:var(--text)}
.foot-blurb{margin-top:.85rem;max-width:22rem;font-size:.86rem}
.foot h4{color:var(--text);font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.35rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.foot ul a{display:inline-flex;align-items:center;min-height:44px}
.foot a{text-decoration:none;transition:color .15s ease}
.foot a:hover{color:var(--accent-2)}
.foot-bottom{
  margin-top:2.6rem;padding-top:1.5rem;border-top:1px solid var(--line);
  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(--paper);color:var(--text);border-bottom:1px solid var(--line);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:var(--live);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);
}
.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 clara */

/* ---------- « 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);border-radius:var(--r);padding:1.15rem 1.3rem;
  background:var(--paper);
}
.despues h3{font-size:.95rem;color:var(--text);margin-bottom:.75rem}
.despues ol{margin:0;padding-left:1.15rem;display:grid;gap:.5rem}
.despues li{font-size:.88rem;color:var(--muted);line-height:1.5}

/* =========================================================================
   Sitio sin precios, propuesta a medida (21/10/2026)
   ========================================================================= */

/* ---------- hero con foto + chat flotante ----------
   Móvil: la tarjeta de chat va DEBAJO de la foto (posición normal, con un
   pequeño solape), nunca encima del botón. Desde 560 px: flotante dentro del
   marco de la foto (.hero-marco), que es su referencia, no .hero-visual. */
.hero-visual{min-width:0}
.hero-marco{position:relative;min-width:0}
.hero-foto{
  display:block;width:100%;height:clamp(16rem,52vw,34rem);object-fit:cover;object-position:center 30%;
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
}
.hero-chat{
  position:relative;margin:-2.2rem .7rem 0;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:.85rem .9rem;display:grid;gap:.45rem;
}
@media(min-width:560px){
  .hero-foto{height:clamp(24rem,52vw,34rem)}
  .hero-chat{position:absolute;margin:0;left:auto;right:1.2rem;bottom:1.2rem;width:min(21rem,80%)}
}
.hero-chat-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.3rem}
.hero-chat-head .asst-av{width:34px;height:34px;border-radius:10px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.95rem}
.hero-chat-head .asst-name{font-weight:800;font-size:.9rem;letter-spacing:-.01em}
.hero-chat-head .asst-state{font-size:.74rem;color:var(--live);font-weight:600}
.hero-msg{font-size:.82rem;line-height:1.4;padding:.5rem .7rem;border-radius:14px;max-width:90%}
.hero-msg-user{background:var(--paper-2);color:var(--text);justify-self:end;border-bottom-right-radius:4px}
.hero-msg-bot{background:var(--ink);color:#fff;justify-self:start;border-bottom-left-radius:4px}
.hero-probar{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .9rem;margin-top:1rem;
  font-size:.82rem;color:var(--muted);
}
.hero-probar span{flex:1 1 14rem;min-width:0}

/* ---------- clientes ---------- */
.sec-logos{padding:1.6rem 0 .4rem}
.logos-l{text-align:center;font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.logos{
  list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;
  gap:.5rem .6rem;
}
.logos li{
  font-size:.86rem;font-weight:700;color:var(--muted);background:var(--paper-2);
  border:1px solid var(--line);border-radius:100px;padding:.45rem .9rem;
}

/* ---------- sectores (fotos) ---------- */
.sectores{display:grid;gap:1rem;margin-top:2.4rem;grid-template-columns:minmax(0,1fr)}
.sectores>*{min-width:0}
@media(min-width:640px){.sectores{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.sectores{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sector{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.sector:hover{border-color:#C9D0DA;transform:translateY(-2px);box-shadow:var(--shadow)}
.sector img{display:block;width:100%;height:clamp(11rem,34vw,14rem);object-fit:cover;background:var(--paper-3)}
.sector-txt{padding:1.1rem 1.2rem 1.3rem}
.sector h3{font-size:1.05rem;margin-bottom:.4rem}
.sector p{font-size:.9rem;color:var(--muted)}
.sectores-fine{margin-top:1.6rem;font-size:.92rem;color:var(--muted);max-width:40rem}

/* ---------- pasos ---------- */
.pasos{display:grid;gap:1.2rem;margin-top:2.4rem;grid-template-columns:minmax(0,1fr)}
.pasos>*{min-width:0}
@media(min-width:640px){.pasos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.pasos{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem}}
.paso{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.3rem 1.3rem 1.4rem}
.paso-n{
  display:grid;place-items:center;width:36px;height:36px;border-radius:11px;
  background:var(--accent);color:#fff;font-weight:800;font-size:.95rem;margin-bottom:.9rem;
}
.paso h3{font-size:1.02rem;margin-bottom:.45rem}
.paso p{font-size:.9rem;color:var(--muted)}

/* ---------- a medida ---------- */
.medida{display:grid;gap:2rem;grid-template-columns:minmax(0,1fr)}
.medida>*{min-width:0}
@media(min-width:940px){.medida{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:3.5rem;align-items:start}}
.medida-lista{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.medida-lista li{
  display:grid;gap:.25rem;background:var(--paper);border:1px solid var(--line);
  border-left:4px solid var(--accent);border-radius:var(--r);padding:1rem 1.1rem;
}
.medida-lista strong{font-size:1rem;letter-spacing:-.01em}
.medida-lista span{font-size:.9rem;color:var(--muted)}

/* ---------- formulario: etiqueta opcional ---------- */
.field label small{font-weight:500;color:var(--muted)}

/* =========================================================================
   WhatsApp en el centro (consigna del 22/10/2026). Fondo claro, burbujas
   verdes como en WhatsApp. Todo lo de abajo es mobile first.
   ========================================================================= */
:root{ --wa:#12804A; --wa-2:#0E6B3D; --wa-bg:#F3EFE8; --wa-out:#DCF8C6; }
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 8px 22px rgba(18,128,74,.28)}
.btn-wa:hover{background:var(--wa-2)}
.btn-wa .wa-ico{width:20px;height:20px;flex-shrink:0}
.top-cta.btn-wa{min-height:44px}
.hero-numero{margin-top:1rem;font-size:.95rem;color:var(--muted)}
.hero-numero a{color:var(--text);text-decoration:none;white-space:nowrap;display:inline-block;padding:.6rem 0;min-height:44px}
.hero-numero a:hover strong{color:var(--wa)}

/* tarjeta de conversación WhatsApp (héroe y ejemplos) */
.wa-card{background:var(--wa-bg);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;min-width:0}
.wa-head{display:flex;align-items:center;gap:.6rem;background:var(--paper);border-bottom:1px solid var(--line);padding:.65rem .85rem}
.wa-av{width:34px;height:34px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.9rem;flex-shrink:0}
.wa-head-txt{flex:1 1 auto;min-width:0}
.wa-name{font-weight:800;font-size:.9rem;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-state{font-size:.74rem;color:var(--wa);font-weight:600}
.wa-tag{font-size:.66rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;background:var(--paper-3);color:var(--muted);padding:.2rem .55rem;border-radius:100px;flex-shrink:0}
.wa-body{display:grid;gap:.4rem;padding:.8rem .75rem .9rem}
.wa-msg{position:relative;font-size:.86rem;line-height:1.42;padding:.45rem .65rem 1.05rem;border-radius:10px;max-width:86%;color:var(--text);box-shadow:0 1px 1px rgba(11,14,20,.06);overflow-wrap:anywhere}
.wa-in{background:var(--paper);justify-self:start;border-top-left-radius:3px}
.wa-out{background:var(--wa-out);justify-self:end;border-top-right-radius:3px}
.wa-h{position:absolute;right:.55rem;bottom:.22rem;font-size:.66rem;color:var(--muted)}

/* héroe : misma colocación que la antigua tarjeta de chat */
.hero-wa{position:relative;margin:-2.2rem .7rem 0}
.hero-wa .wa-msg{font-size:.82rem}
@media(min-width:560px){
  .hero-wa{position:absolute;margin:0;right:1.2rem;bottom:1.2rem;width:min(22rem,82%)}
}

/* probalo vos */
.sec-probar{padding:0 0 clamp(3rem,9vw,5rem)}
.probar-box{display:grid;gap:1.8rem;grid-template-columns:minmax(0,1fr);background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--wa);border-radius:var(--r-lg);padding:clamp(1.4rem,5vw,2.4rem);box-shadow:var(--shadow)}
.probar-box>*{min-width:0}
.probar-pasos{margin:1.2rem 0 0;padding-left:1.25rem;display:grid;gap:.55rem;color:var(--muted)}
.probar-pasos strong{color:var(--text)}
.probar-qr{display:none}
@media(min-width:860px){
  .probar-box{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3rem}
  .probar-qr{display:block;text-align:center}
  .wa-qr{width:190px;height:190px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
  .wa-qr svg{width:100%;height:100%}
  .probar-qr p{font-size:.8rem;color:var(--muted);margin-top:.6rem;max-width:190px}
}

/* ejemplos con pestañas : los botones se reparten en filas, nunca desbordan */
.ej-tabs{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.8rem}
.ej-tab{font-family:inherit;font-size:.9rem;font-weight:700;color:var(--muted);background:var(--paper);border:1.5px solid var(--line);border-radius:100px;padding:.55rem 1rem;min-height:44px;cursor:pointer}
.ej-tab:hover{border-color:var(--text);color:var(--text)}
.ej-tab[aria-selected="true"]{background:var(--wa);border-color:var(--wa);color:#fff}
.ej-tab:focus-visible{outline:3px solid rgba(18,128,74,.35);outline-offset:2px}
.ej-grid{display:grid;gap:1.6rem;margin-top:1.3rem;grid-template-columns:minmax(0,1fr)}
.ej-grid>*{min-width:0}
@media(min-width:940px){.ej-grid{grid-template-columns:minmax(0,26rem) minmax(0,1fr);gap:3rem;align-items:start}}
.ej-panel[hidden]{display:none}
.ej-notas{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.ej-notas li{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem;font-size:.92rem;color:var(--muted)}
.ej-notas strong{display:block;color:var(--text);font-size:1rem;margin-bottom:.2rem}

/* lo que ya hace / lo que viene */
.wa-cap{display:grid;gap:1.2rem;margin-top:2.2rem;grid-template-columns:minmax(0,1fr)}
.wa-cap>*{min-width:0}
@media(min-width:820px){.wa-cap{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem}}
.wa-cap-col{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.3rem 1.3rem 1.4rem}
.wa-cap-soon{background:var(--paper-2);border-style:dashed}
.wa-cap-ttl{margin-bottom:.9rem}
.tag-ok,.wa-cap-ttl .tag-soon{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:.25rem .65rem;border-radius:100px}
.tag-ok{background:#E3F4EA;color:var(--wa-2)}
.wa-cap-list{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.wa-cap-list li{display:grid;gap:.15rem}
.wa-cap-list strong{font-size:1rem;letter-spacing:-.01em}
.wa-cap-list span{font-size:.9rem;color:var(--muted)}
.wa-cap-fine{margin-top:1.1rem;font-size:.86rem;color:var(--muted);border-top:1px solid var(--line);padding-top:.9rem}

/* cierre */
.cierre-btns{margin-top:1.6rem}
.cierre-o{margin-top:1.2rem;font-size:.9rem;color:var(--muted)}
.foot a[data-wa]{white-space:nowrap}
/* la barra fija no tapa el título de la sección al llegar por un enlace */
main section[id]{scroll-margin-top:72px}
/* el botón WhatsApp de la barra se ve también en el teléfono */
.top-cta.btn-wa{display:inline-flex}
.alta button[type="submit"]{margin-top:.6rem}
.mark{min-height:44px}