/* =========================================================
   Collie Suite — Home (index)
   Requiere base.css cargado antes de este archivo.
========================================================= */
:root{
  --clay-soft:#E7CBB8;
  --shadow:0 20px 60px -20px rgba(17,32,27,0.25);
}
html{scroll-behavior:smooth;}
img,svg{display:block;max-width:100%;}

.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--pine);
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:'';
  width:6px;height:6px;border-radius:50%;
  background:var(--clay);
  display:inline-block;
}
em.accent{
  font-family:'Instrument Serif',serif;
  font-style:italic;
  font-weight:400;
  color:var(--clay);
}
h1,h2,h3{font-family:'Onest',sans-serif;font-weight:600;letter-spacing:-0.01em;}

[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s);}
[data-reveal].in{opacity:1;transform:translateY(0);}
[data-reveal="scale"]{transform:translateY(20px) scale(.96);}
[data-reveal="scale"].in{transform:translateY(0) scale(1);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(244,245,241,0.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
.nav.scrolled{border-bottom-color:var(--line);}
.nav-inner{
  max-width:1180px;margin:0 auto;padding:18px 32px;
  display:flex;align-items:center;justify-content:space-between;
  position:relative; z-index:150;
}
.wordmark{
  font-family:'Onest',sans-serif;font-weight:700;font-size:20px;
  letter-spacing:-0.02em; display:flex; align-items:center; gap:8px;
}
.wordmark img{height:32px;width:auto;display:block;}
.nav-links{display:flex;gap:32px;font-size:14px;font-weight:500;color:var(--ink-soft);}
.nav-links a{position:relative;padding:4px 0;}
.nav-links a::after{
  content:'';position:absolute;bottom:0;left:0;width:0;height:1.5px;background:var(--pine);
  transition:width .3s var(--ease);
}
.nav-links a:hover::after{width:100%;}
.nav-cta{
  font-size:14px;font-weight:600;background:var(--ink);color:var(--paper);
  padding:10px 20px;border-radius:100px;transition:background .25s ease, transform .25s ease;
}
.nav-cta:hover{background:var(--pine-deep);transform:translateY(-1px);}
@media(max-width:860px){.nav-links{display:none;}}

.nav-burger{
  display:none; width:38px;height:38px;border-radius:10px;
  align-items:center;justify-content:center;color:var(--ink);
  flex-shrink:0;
}
.nav-burger svg{width:22px;height:22px;}
.nav-burger path{transition:transform .3s var(--ease), opacity .2s ease;transform-origin:center;}
.nav-burger.open .burger-top{transform:translateY(5px) rotate(45deg);}
.nav-burger.open .burger-mid{opacity:0;}
.nav-burger.open .burger-bot{transform:translateY(-5px) rotate(-45deg);}

.nav-mobile-panel{
  display:none; flex-direction:column;
  position:fixed; top:0; left:0; right:0; height:100vh; height:100dvh;
  padding-top:76px;
  background:var(--paper);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s var(--ease);
  overflow-y:auto; z-index:99;
}
.nav-mobile-panel a{
  padding:18px 32px; font-size:17px; font-weight:600; color:var(--ink);
  border-bottom:1px solid var(--line-soft);
}
.nav-mobile-panel .nav-mobile-cta{
  margin:20px 32px; padding:15px 20px; text-align:center;
  background:var(--ink); color:var(--paper); border-radius:100px;
  border-bottom:none; font-weight:600;
}
.nav-mobile-panel.open{opacity:1; visibility:visible; pointer-events:auto;}

@media(max-width:640px){
  .nav-cta{display:none;}
  .nav-burger{display:flex;}
  .nav-mobile-panel{display:flex;}
}

/* ===== PAGE HEADER (secondary pages: precios, producto, contacto) ===== */
.page-header{padding:168px 0 60px; text-align:center; position:relative; overflow:hidden;}
.page-header .wrap{position:relative; z-index:1;}
.page-header .eyebrow{justify-content:center; margin-bottom:18px;}
.page-header h1{font-size:clamp(34px,4.6vw,54px); line-height:1.1; margin-bottom:18px;}
.page-header p{color:var(--ink-soft); font-size:17px; max-width:560px; margin:0 auto;}
.page-header .yt-embed-wrap{margin:36px 0 0; text-align:left;}
@media(max-width:600px){.page-header{padding:120px 0 40px;}}

.hero{
  position:relative;
  padding:168px 0 90px;
  overflow:hidden;
}
.hero-thread{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  width:100%; height:100%;
}
.hero-thread svg{width:100%;height:100%;}
.thread-path{
  fill:none; stroke:var(--pine); stroke-width:1.4; opacity:.35;
  stroke-dasharray:6 8;
  animation:flow 30s linear infinite;
}
.thread-path.b{stroke:var(--clay); opacity:.22; stroke-width:1.2; animation-duration:42s; animation-direction:reverse;}
@keyframes flow{to{stroke-dashoffset:-600;}}
.thread-node{fill:var(--clay); opacity:.5;}
.thread-node.pulse{animation:nodepulse 3.2s ease-in-out infinite;}
@keyframes nodepulse{0%,100%{opacity:.35;r:3;}50%{opacity:.85;r:4.5;}}
.thread-path.on-dark{stroke:rgba(244,245,241,0.4);}
.thread-path.on-dark.b{stroke:var(--amber); opacity:.28;}
.thread-node.on-dark{fill:rgba(244,245,241,0.55);}
.thread-node.on-dark.amber{fill:var(--amber);}
.bg-thread-layer{position:absolute; inset:0; z-index:0; pointer-events:none; width:100%; height:100%;}
.bg-thread-layer svg{width:100%;height:100%;}

.hero-inner{position:relative;z-index:1;text-align:center;max-width:760px;margin:0 auto;}
.hero h1{
  font-size:clamp(40px,6.2vw,68px);
  line-height:1.04;
  letter-spacing:-0.025em;
  margin-bottom:24px;
}
.hero h1 .line2{display:block;color:var(--pine-deep);}
.hero p.sub{
  font-size:clamp(16px,1.6vw,19px);
  color:var(--ink-soft);
  max-width:540px;margin:0 auto 38px;
  font-weight:400;
}
.hero-actions{display:flex;flex-direction:column;align-items:center;gap:18px;margin-bottom:8px;}
.btn-primary{
  font-family:'Onest',sans-serif;
  font-size:16px;font-weight:600;
  background:var(--ink);color:var(--paper);
  padding:16px 30px;border-radius:100px;
  display:inline-flex;align-items:center;gap:10px;
  transition:transform .25s var(--ease), background .25s ease, box-shadow .25s ease;
  box-shadow:0 10px 30px -10px rgba(17,32,27,.4);
}
.btn-primary:hover{background:var(--pine-deep);transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(17,32,27,.5);}
.btn-primary svg{width:16px;height:16px;transition:transform .25s ease;}
.btn-primary:hover svg{transform:translateX(3px);}

/* ===== BENEFITS ===== */
.benefits-section{padding:30px 0 80px;}
.yt-embed-wrap{margin-bottom:56px;}
.yt-embed{
  position:relative; width:100%; aspect-ratio:16/9; border-radius:20px; overflow:hidden;
  background:var(--ink); box-shadow:var(--shadow);
}
.yt-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block;}
.benefits-stats{
  background:var(--white);border:1px solid var(--line-soft);border-radius:20px;
  padding:28px 20px;margin-bottom:56px;
}
.benefits-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;}
.benefit-stat{display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 8px;border-left:1px solid var(--line-soft);}
.benefit-stat:first-child{border-left:none;}
.benefit-stat-icon{
  width:38px;height:38px;border-radius:50%;background:var(--paper-dim);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.benefit-stat-icon svg{width:18px;height:18px;stroke:var(--pine);}
.benefit-stat-num{font-family:'Onest',sans-serif;font-weight:700;font-size:clamp(20px,2.6vw,26px);color:var(--ink);}
.benefit-stat-label{font-size:12.5px;color:var(--ink-soft);line-height:1.4;}
@media(max-width:760px){.benefits-stats-grid{grid-template-columns:1fr 1fr;gap:28px 16px;}.benefit-stat{border-left:none;}}

.benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.benefit-card{
  background:var(--white);border:1px solid var(--line-soft);border-radius:18px;
  padding:28px 24px;transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease;
}
.benefit-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent;}
.benefit-card h3{font-size:17px;line-height:1.3;margin-bottom:10px;}
.benefit-divider{width:26px;height:2.5px;border-radius:2px;background:var(--clay);margin-bottom:12px;}
.benefit-card p{font-size:14px;color:var(--ink-soft);line-height:1.55;}
.benefit-image{
  margin-top:20px;aspect-ratio:4/3;border-radius:12px;background:transparent;overflow:hidden;
}
.benefit-image img{width:100%;height:100%;display:block;object-fit:contain;}
@media(max-width:700px){.benefits-grid{grid-template-columns:1fr;}}

/* ===== DEMO LEAD FORM (below the benefits cards) ===== */
.demo-form-card{
  margin-top:24px; background:var(--white); border:1px solid var(--line-soft); border-radius:22px;
  overflow:hidden; display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  box-shadow:0 20px 50px -30px rgba(17,32,27,.25);
}
.demo-form-media{
  background:var(--paper-dim); border-right:1px solid var(--line-soft);
  min-height:280px; overflow:hidden; position:relative;
}
.demo-form-media img{width:100%; height:100%; object-fit:cover; object-position:center bottom; display:block;}
.demo-form{padding:36px 40px; display:flex; flex-direction:column;}
.demo-form h3{font-size:22px; margin-bottom:8px;}
.demo-form-sub{font-size:14px; color:var(--ink-soft); margin-bottom:22px; line-height:1.5;}
.demo-form-fields{display:flex; flex-direction:column; gap:12px; margin-bottom:20px;}
.demo-input{
  width:100%; border:1.5px solid var(--line); border-radius:12px; padding:13px 16px;
  font-family:'Inter'; font-size:15px; color:var(--ink); background:var(--paper-dim);
  transition:border-color .2s ease, background .2s ease;
}
.demo-input::placeholder{color:var(--ink-soft); opacity:.7;}
.demo-input:focus{outline:none; border-color:var(--pine); background:var(--white);}
.demo-form-submit{align-self:flex-start;}
.demo-form-submit:hover{background:var(--pine-deep);}
.demo-form-submit:disabled{opacity:.55; pointer-events:none;}
.demo-form-status{font-size:13px; margin-top:14px; min-height:16px;}
.demo-form-status.success{color:var(--pine);}
.demo-form-status.error{color:var(--clay);}
@media(max-width:860px){
  .demo-form-card{grid-template-columns:1fr;}
  .demo-form-media{border-right:none; border-bottom:1px solid var(--line-soft); min-height:220px;}
  .demo-form{padding:28px 24px;}
}

.chat-section{padding:30px 0 120px;}
.chat-frame{
  max-width:480px;margin:0 auto;
  background:var(--white);
  border-radius:24px;
  box-shadow:var(--shadow);
  border:1px solid var(--line-soft);
  overflow:hidden;
  height:552px;
  position:relative;
  z-index:1;
  transition:max-width .75s var(--ease), width .75s var(--ease), height .5s var(--ease);
}
.chat-frame.expanded{max-width:960px;}
.demo-stage-wrap{position:relative;}

.peek-card{
  position:absolute; top:0; width:min(480px, calc(100vw - 64px)); height:552px; z-index:2; pointer-events:none;
  background:var(--white); border-radius:24px; border:1px solid var(--line-soft);
  box-shadow:0 24px 55px -18px rgba(17,32,27,.45);
  overflow:hidden; opacity:0; display:flex; flex-direction:column;
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.peek-card.left{ left:50%; transform:translateX(-50%) translateX(-34px) rotate(-7deg); backface-visibility:hidden; transform-style:preserve-3d; }
.peek-card.left.show{ opacity:1; transform:translateX(-50%) translateX(-34px) rotate(-5deg); backface-visibility:hidden; transform-style:preserve-3d; }
.peek-card.right{ left:50%; transform:translateX(-50%) translateX(34px) rotate(7deg); backface-visibility:hidden; transform-style:preserve-3d; }
.peek-card.right.show{ opacity:1; transform:translateX(-50%) translateX(34px) rotate(5deg); backface-visibility:hidden; transform-style:preserve-3d; }
.peek-head{padding:16px 20px; display:flex; align-items:center; gap:12px; color:#fff; flex-shrink:0;}
.peek-head .ic{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.peek-head .ic svg{width:17px;height:17px;stroke:#fff;}
.peek-head .info{min-width:0;}
.peek-head .name{font-size:14px;font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.peek-head .sub{font-size:12px; opacity:.85; font-family:'IBM Plex Mono',monospace;}
.peek-body{flex:1; min-height:0; padding:20px; display:flex; flex-direction:column; gap:10px; justify-content:flex-end; overflow:hidden;
  background:radial-gradient(circle at 20% 10%, rgba(31,110,82,0.04), transparent 50%), var(--paper-dim);}
.peek-msg{font-size:14px; line-height:1.45; padding:10px 14px; border-radius:14px; max-width:78%;}
.peek-msg.user{background:#fff; align-self:flex-start; border-bottom-left-radius:4px; box-shadow:0 2px 8px rgba(17,32,27,.06); color:var(--ink);}
.peek-msg.bot{align-self:flex-end; border-bottom-right-radius:4px; color:#fff;}
.peek-foot{padding:14px 16px; border-top:1px solid var(--line-soft); background:#fff; flex-shrink:0;}
.peek-foot .field{background:var(--paper-dim); border-radius:100px; padding:10px 16px; font-size:13px; color:var(--ink-soft);}
.peek-card.instagram .peek-head{background:linear-gradient(135deg,#F58529,#DD2A7B,#8134AF);}
.peek-card.instagram .peek-msg.bot{background:linear-gradient(135deg,#F58529,#DD2A7B,#8134AF);}
.peek-card.messenger .peek-head{background:#0084FF;}
.peek-card.messenger .peek-msg.bot{background:#0084FF;}
@media(max-width:600px){
  .peek-card{width:min(480px, calc(100vw - 76px)); height:520px;}
  .peek-card.left{transform:translateX(-50%) translateX(-18px) rotate(-6deg);}
  .peek-card.left.show{transform:translateX(-50%) translateX(-18px) rotate(-4deg);}
  .peek-card.right{transform:translateX(-50%) translateX(18px) rotate(6deg);}
  .peek-card.right.show{transform:translateX(-50%) translateX(18px) rotate(4deg);}
  .peek-head{padding:13px 16px;}
  .peek-body{padding:16px;}
}
.demo-phase-inner{height:100%; opacity:0; transform:scale(.97); transition:opacity .4s var(--ease), transform .4s var(--ease);}
.demo-phase-inner.active{opacity:1; transform:scale(1);}
.demo-phase-inner.leaving{opacity:0; transform:scale(1.02);}

.phone-chat{height:100%; display:flex; flex-direction:column;}
.chat-head{
  background:var(--pine-deep);
  color:var(--paper);
  padding:16px 20px;
  display:flex;align-items:center;gap:12px;
  flex-shrink:0;
}
.chat-avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--pine-light),var(--pine));
  display:flex;align-items:center;justify-content:center;
  font-family:'Onest';font-weight:700;font-size:14px;color:white;
  flex-shrink:0;
}
.chat-head-info{flex:1;}
.chat-head-info .name{font-weight:600;font-size:14px;}
.chat-head-info .status{
  font-size:12px;color:var(--amber);display:flex;align-items:center;gap:5px;
  font-family:'IBM Plex Mono',monospace;
}
.chat-head-info .status::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 0 0 rgba(226,179,60,.6);
  animation:pulsedot 2s infinite;
}
@keyframes pulsedot{0%{box-shadow:0 0 0 0 rgba(226,179,60,.5);}70%{box-shadow:0 0 0 6px rgba(226,179,60,0);}100%{box-shadow:0 0 0 0 rgba(226,179,60,0);}}
.chat-body{
  flex:1; min-height:0;
  background:
    radial-gradient(circle at 20% 10%, rgba(31,110,82,0.04), transparent 50%),
    var(--paper-dim);
  padding:20px;
  display:flex;flex-direction:column;gap:10px;
  overflow:hidden;
  position:relative;
}
.msg{
  max-width:78%;
  padding:10px 14px;
  border-radius:14px;
  font-size:14px;
  line-height:1.45;
  opacity:0;
  transform:translateY(10px);
  animation:msgIn .4s var(--ease) forwards;
}
.msg.bot{
  background:var(--white);
  align-self:flex-start;
  border-bottom-left-radius:4px;
  box-shadow:0 2px 8px rgba(17,32,27,0.06);
}
.msg.user{
  background:var(--pine);
  color:white;
  align-self:flex-end;
  border-bottom-right-radius:4px;
}
@keyframes msgIn{to{opacity:1;transform:translateY(0);}}
.typing{
  align-self:flex-start;
  background:var(--white);
  padding:12px 16px;border-radius:14px;border-bottom-left-radius:4px;
  display:flex;gap:4px;
  box-shadow:0 2px 8px rgba(17,32,27,0.06);
  opacity:0; transform:translateY(10px); animation:msgIn .3s var(--ease) forwards;
}
.typing span{width:6px;height:6px;border-radius:50%;background:var(--ink-soft);opacity:.5;
  animation:typingdot 1.1s ease-in-out infinite;}
.typing span:nth-child(2){animation-delay:.15s;}
.typing span:nth-child(3){animation-delay:.3s;}
@keyframes typingdot{0%,60%,100%{transform:translateY(0);opacity:.4;}30%{transform:translateY(-4px);opacity:1;}}
.chat-input{
  padding:14px 16px; border-top:1px solid var(--line-soft);
  display:flex;align-items:center;gap:10px;background:var(--white);
  flex-shrink:0;
}
.chat-input .field{
  flex:1; background:var(--paper-dim); border-radius:100px; padding:10px 16px;
  font-size:13px;color:var(--ink-soft); font-family:'Inter';
}
.chat-input .send{
  width:34px;height:34px;border-radius:50%;background:var(--pine);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.chat-input .send svg{width:15px;height:15px;fill:white;}
.chat-caption{
  text-align:center;margin-top:28px;font-size:clamp(19px,2.4vw,26px);color:var(--ink);
  font-family:'Onest',sans-serif;font-weight:700;letter-spacing:-0.01em;line-height:1.35;
  max-width:560px;margin-left:auto;margin-right:auto;
  transition:opacity .3s ease;
}

.kivo-app{height:100%; display:flex; background:var(--white); font-family:'Inter';}
.kivo-sidebar{
  width:152px; flex-shrink:0; background:var(--white); border-right:1px solid var(--line-soft);
  padding:16px 12px; display:flex; flex-direction:column;
}
.kivo-logo-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
.kivo-logo{font-family:'Onest'; font-weight:800; font-size:15px; letter-spacing:-0.02em; color:var(--pine-deep); display:flex; align-items:baseline; gap:2px;}
.kivo-logo .suite{font-family:'Instrument Serif'; font-style:italic; font-weight:500; color:var(--clay); font-size:11px;}
.kivo-collapse{width:14px;height:14px; stroke:var(--ink-soft); opacity:.55; flex-shrink:0;}
.kivo-newlead-btn{
  display:flex; align-items:center; justify-content:center; gap:5px;
  background:var(--pine); color:#fff; font-family:'Onest'; font-weight:700; font-size:10.5px;
  padding:9px 8px; border-radius:100px; margin-bottom:14px; flex-shrink:0;
}
.kivo-newlead-btn svg{width:11px;height:11px; stroke:#fff; stroke-width:2.6; flex-shrink:0;}
.kivo-nav{display:flex; flex-direction:column; gap:1px; flex:1; min-height:0; overflow:hidden;}
.kivo-nav-item{display:flex; align-items:center; gap:7px; padding:5.5px 7px; border-radius:8px; font-size:10.2px; color:var(--ink-soft); font-weight:500;}
.kivo-nav-item svg{width:12.5px;height:12.5px; stroke:currentColor; flex-shrink:0;}
.kivo-nav-item.active{background:#E3F1EB; color:var(--pine-deep); font-weight:700;}
.kivo-nav-item .badge{margin-left:auto; background:var(--amber); color:#fff; font-size:8.5px; font-weight:700; padding:1px 5.5px; border-radius:8px;}
.kivo-user{display:flex; align-items:center; gap:7px; padding-top:10px; border-top:1px solid var(--line-soft); margin-top:6px; flex-shrink:0;}
.kivo-avatar{width:22px;height:22px;border-radius:50%;background:var(--pine); color:#fff; display:flex;align-items:center;justify-content:center; font-size:9px; font-weight:700; font-family:'Onest'; flex-shrink:0;}
.kivo-user-name{font-size:9.5px; font-weight:600; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:64px;}
.kivo-user-role{font-size:8.5px; color:var(--ink-soft);}
.kivo-user-icons{display:flex; gap:6px; margin-left:auto; flex-shrink:0;}
.kivo-user-icons svg{width:12px;height:12px; stroke:var(--ink-soft); opacity:.7;}
.kivo-footer-links{font-size:8px; color:var(--ink-soft); opacity:.6; text-align:center; margin-top:8px; flex-shrink:0;}

.kivo-main{flex:1; min-width:0; display:flex; flex-direction:column; background:var(--paper-dim);}
.kivo-topbar{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 18px; background:#fff; border-bottom:1px solid var(--line-soft); flex-shrink:0;}
.kivo-title{font-family:'Onest'; font-weight:700; font-size:15px;}
.kivo-actions{display:flex; gap:6px; flex-shrink:0;}
.kivo-btn{font-size:10.5px; font-weight:600; padding:6px 11px; border-radius:8px; background:var(--paper-dim); color:var(--ink-soft); display:flex; align-items:center; gap:4px; white-space:nowrap;}
.kivo-btn.primary{background:var(--pine); color:#fff;}
.kivo-btn svg{width:11px;height:11px;}

.kivo-kanban{flex:1; min-height:0; overflow:auto; padding:14px 18px; display:flex; gap:14px;}
.kivo-col{width:148px; flex-shrink:0;}
.kivo-col-head{display:flex; align-items:baseline; gap:6px; margin-bottom:2px; font-size:11.5px; font-weight:700;}
.kivo-col-count{color:var(--ink-soft); font-weight:600; font-size:10px; transition:transform .3s var(--ease);}
.kivo-col-count.bump{animation:countBump .5s var(--ease);}
@keyframes countBump{0%{transform:scale(1);}40%{transform:scale(1.4); color:var(--pine);}100%{transform:scale(1);}}
.kivo-col-total{font-size:9.5px; color:var(--ink-soft); margin-bottom:8px; font-family:'IBM Plex Mono',monospace;}
.kivo-card{background:#fff; border:1px solid var(--line-soft); border-radius:10px; padding:10px 11px; margin-bottom:8px; box-shadow:0 1px 3px rgba(17,32,27,.04);}
.kivo-card-name{font-size:11.5px; font-weight:700; margin-bottom:1px; line-height:1.3;}
.kivo-card-sub{font-size:9.5px; color:var(--ink-soft); margin-bottom:7px;}
.kivo-card-foot{display:flex; align-items:center; justify-content:space-between; font-size:10.5px; font-weight:700; font-family:'IBM Plex Mono',monospace;}
.kivo-card-time{font-size:9px; color:var(--ink-soft); font-weight:500; display:flex; align-items:center; gap:2px; font-family:'Inter';}
.kivo-card.new-lead{animation:newLeadIn .55s var(--ease) forwards, newLeadGlow 1.6s ease-out .55s;}
@keyframes newLeadIn{from{opacity:0; transform:translateY(-16px) scale(.92);} to{opacity:1; transform:translateY(0) scale(1);}}
@keyframes newLeadGlow{0%{box-shadow:0 0 0 0 rgba(31,110,82,.4);} 60%{box-shadow:0 0 0 7px rgba(31,110,82,0);} 100%{box-shadow:0 0 0 0 rgba(31,110,82,0);}}
.kivo-toast{
  position:absolute; top:10px; right:14px; background:var(--ink); color:#fff;
  font-size:10.5px; font-weight:600; padding:8px 13px; border-radius:10px;
  display:flex; align-items:center; gap:7px; opacity:0; transform:translateY(-8px);
  transition:opacity .35s var(--ease), transform .35s var(--ease); z-index:2;
  box-shadow:0 8px 20px -6px rgba(17,32,27,.4);
}
.kivo-toast.show{opacity:1; transform:translateY(0);}
.kivo-toast .dot{width:6px;height:6px;border-radius:50%;background:var(--pine-light); flex-shrink:0;
  box-shadow:0 0 0 0 rgba(58,143,111,.6); animation:pulsedot 1.6s infinite;}

.kivo-chat{flex:1; min-height:0; overflow:hidden; padding:16px 18px; display:flex; flex-direction:column; gap:10px;}
.kivo-msg-ghost{font-size:11px; color:var(--ink-soft); opacity:.35; line-height:1.5; padding:0 4px 4px; border-bottom:1px dashed var(--line); margin-bottom:2px;}
.kivo-msg{max-width:80%; font-size:11.5px; line-height:1.5; padding:9px 12px; border-radius:12px;
  opacity:0; transform:translateY(8px); animation:msgIn .4s var(--ease) forwards;}
.kivo-msg.assistant{background:#fff; border:1px solid var(--line-soft); align-self:flex-start; border-bottom-left-radius:4px;}
.kivo-msg.user{background:#EBE8FA; color:#3B2E82; align-self:flex-end; border-bottom-right-radius:4px;}
.kivo-msg b{font-weight:700;}
.kivo-typing{align-self:flex-start; background:#fff; border:1px solid var(--line-soft); padding:10px 14px; border-radius:12px; border-bottom-left-radius:4px;
  display:flex; gap:4px; opacity:0; transform:translateY(8px); animation:msgIn .3s var(--ease) forwards;}
.kivo-typing span{width:5px;height:5px;border-radius:50%;background:var(--ink-soft);opacity:.5; animation:typingdot 1.1s ease-in-out infinite;}
.kivo-typing span:nth-child(2){animation-delay:.15s;}
.kivo-typing span:nth-child(3){animation-delay:.3s;}
.kivo-task-banner{
  background:rgba(31,110,82,.08); color:var(--pine-deep); font-size:11px; font-weight:600; padding:8px 12px; border-radius:8px;
  display:flex; align-items:center; gap:6px; opacity:0; transform:translateY(8px); animation:msgIn .4s var(--ease) forwards;
}
.kivo-task-banner svg{width:14px;height:14px; stroke:var(--pine); flex-shrink:0;}
.kivo-task-card{
  background:#fff; border:1px solid var(--line-soft); border-radius:12px; padding:12px; display:flex; gap:10px; align-items:flex-start;
  opacity:0; transform:translateY(8px); animation:msgIn .4s var(--ease) forwards;
}
.kivo-task-icon{width:28px;height:28px;border-radius:8px;background:#FBE7D3; display:flex;align-items:center;justify-content:center; flex-shrink:0;}
.kivo-task-icon svg{width:14px;height:14px; stroke:var(--clay);}
.kivo-task-icon.cal{background:#DCEBFA;}
.kivo-task-icon.cal svg{stroke:#2C6FAE;}
.kivo-task-title{font-size:11.5px; font-weight:700; margin-bottom:2px;}
.kivo-task-meta{font-size:9.5px; color:var(--ink-soft);}

.kivo-tasks{flex:1; min-height:0; overflow:auto; padding:14px 18px;}
.kivo-task-section-label{font-size:10px; font-weight:700; letter-spacing:.06em; color:var(--ink-soft); text-transform:uppercase; margin:0 0 8px;}
.kivo-task-section-label + .kivo-task-section-label{margin-top:14px;}
.kivo-task-row{
  display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line-soft); border-radius:10px; padding:10px 12px; margin-bottom:6px;
  transition:opacity .3s ease;
}
.kivo-task-row.done{opacity:.5;}
.kivo-task-row.done .kivo-task-title-sm{text-decoration:line-through;}
.kivo-task-row.entering{opacity:0; transform:translateY(-10px); animation:taskRowIn .5s var(--ease) forwards;}
@keyframes taskRowIn{to{opacity:1; transform:translateY(0);}}
.kivo-check{width:16px;height:16px;border-radius:5px; border:1.5px solid var(--line); flex-shrink:0;}
.kivo-check.done{background:var(--pine); border-color:var(--pine); display:flex;align-items:center;justify-content:center;}
.kivo-check.done svg{width:10px;height:10px; stroke:#fff; stroke-width:3;}
.kivo-task-row .kivo-task-icon{width:24px;height:24px; border-radius:7px;}
.kivo-task-row .kivo-task-icon svg{width:12px;height:12px;}
.kivo-task-title-sm{font-size:11.5px; font-weight:700; margin-bottom:1px;}
.kivo-task-meta-sm{font-size:9.5px; color:var(--ink-soft);}
.kivo-task-time{margin-left:auto; font-size:10px; color:var(--ink-soft); text-align:right; flex-shrink:0; font-family:'IBM Plex Mono',monospace;}

.kivo-channels{flex:1; min-height:0; overflow:auto; padding:16px 18px;}
.kivo-ch-head{display:flex; gap:10px; align-items:flex-start; margin-bottom:14px;}
.kivo-ch-icon{width:30px;height:30px;border-radius:9px;background:rgba(31,110,82,.1); display:flex;align-items:center;justify-content:center; flex-shrink:0;}
.kivo-ch-icon svg{width:15px;height:15px; stroke:var(--pine);}
.kivo-ch-title{font-family:'Onest'; font-weight:700; font-size:13.5px;}
.kivo-ch-sub{font-size:10px; color:var(--ink-soft); line-height:1.4;}
.kivo-ch-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px;}
.kivo-ch-card{background:#fff; border:1px solid var(--line-soft); border-radius:12px; padding:11px;}
.kivo-ch-card-top{display:flex; align-items:center; gap:7px; margin-bottom:9px;}
.kivo-ch-card-top .ic{width:22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center; flex-shrink:0;}
.kivo-ch-card-top .ic svg{width:11px;height:11px;stroke:#fff;}
.kivo-ch-card-top .dot{width:6px;height:6px;border-radius:50%; background:#2CB67D; margin-left:auto; flex-shrink:0;}
.kivo-ch-name{font-size:10.5px; font-weight:700; line-height:1.2;}
.kivo-ch-status{font-size:8.5px; color:var(--pine);}
.kivo-ch-account{display:flex; align-items:center; justify-content:space-between; background:var(--paper-dim); border-radius:8px; padding:6px 8px; font-size:9.5px; font-weight:600;}
.kivo-active-row{display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line-soft); border-radius:10px; padding:9px 12px; margin-bottom:6px; font-size:10.5px;}
.kivo-active-row .dot{width:7px;height:7px;border-radius:50%; flex-shrink:0;}
.kivo-active-row .txt{font-weight:700; font-size:10.5px;}
.kivo-active-row .sub{font-size:9px; color:var(--ink-soft); font-weight:500;}
.kivo-active-row .pill{margin-left:auto; background:rgba(31,110,82,.1); color:var(--pine-deep); font-size:9px; font-weight:700; padding:2px 9px; border-radius:100px; flex-shrink:0;}

.demo-tagline-overlay{
  position:absolute; inset:0; background:rgba(17,32,27,.86); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:34px;
  opacity:0; transition:opacity .7s var(--ease); pointer-events:none; z-index:5;
}
.demo-tagline-overlay.show{opacity:1;}
.demo-tagline-overlay .tagline-inner{transform:translateY(10px); opacity:0; transition:opacity .6s var(--ease) .15s, transform .6s var(--ease) .15s;}
.demo-tagline-overlay.show .tagline-inner{transform:translateY(0); opacity:1;}
.demo-tagline-overlay h4{font-family:'Onest'; color:#fff; font-size:22px; line-height:1.32; font-weight:700;}
.demo-tagline-overlay h4 em{font-family:'Instrument Serif'; font-style:italic; color:var(--amber); font-weight:400; display:block; margin-top:4px; font-size:24px;}
.demo-tagline-overlay .tagline-icons{display:flex; gap:10px; justify-content:center; margin-top:18px;}
.demo-tagline-overlay .tagline-icons .ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;}
.demo-tagline-overlay .tagline-icons .ic svg{width:15px;height:15px;stroke:#fff;}

@media(max-width:600px){
  .kivo-sidebar{width:44px; padding:14px 6px;}
  .kivo-sidebar .txt-label{display:none;}
  .kivo-sidebar .suite, .kivo-collapse, .kivo-newlead-btn span, .kivo-footer-links{display:none;}
  .kivo-newlead-btn{padding:9px;}
  .kivo-nav-item{justify-content:center;}
  .kivo-nav-item .badge{display:none;}
  .kivo-user{justify-content:center;}
  .kivo-user-icons{display:none;}
  .kivo-topbar{padding:11px 12px;}
  .kivo-title{font-size:13px;}
  .kivo-btn span{display:none;}
  .kivo-kanban, .kivo-chat, .kivo-tasks, .kivo-channels{padding:12px;}
  .kivo-ch-grid{grid-template-columns:1fr 1fr 1fr; gap:6px;}
  .kivo-ch-card{padding:8px;}
  .demo-tagline-overlay h4{font-size:18px;}
  .demo-tagline-overlay h4 em{font-size:19px;}
}

.paradox{padding:70px 0 100px; position:relative; overflow:hidden;}
.paradox .wrap{position:relative; z-index:1;}
.churn-field{position:absolute; inset:0; z-index:0; pointer-events:none;}
.churn-dot{
  position:absolute; width:var(--s,6px); height:var(--s,6px); border-radius:50%;
  left:var(--x); top:var(--y); background:var(--pine-light); opacity:.45;
  animation:churnFade var(--dur,5s) ease-in-out infinite; animation-delay:var(--delay,0s);
}
.churn-dot.clay{background:var(--clay);}
@keyframes churnFade{
  0%,42%{opacity:.5; transform:scale(1);}
  55%,78%{opacity:.06; transform:scale(.45);}
  92%,100%{opacity:.5; transform:scale(1);}
}
.paradox-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:start;position:relative;z-index:1;}
.paradox h2{font-size:clamp(28px,3.6vw,42px);line-height:1.15;margin:18px 0 20px;}
.paradox p.lead{color:var(--ink-soft);font-size:16px;max-width:440px;margin-bottom:18px;}
.callout{
  border-left:2px solid var(--clay);
  padding-left:18px;font-size:15px;color:var(--ink-soft);font-style:normal;
}
.paradox-title-wrap{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;height:100%;min-height:280px;}
.paradox-cta{margin-bottom:24px;}
.paradox-title-wrap h2{font-size:clamp(30px,4vw,46px);margin:0 0 20px;}
.paradox-title-wrap p.lead{color:var(--ink-soft);font-size:16px;max-width:440px;margin-bottom:18px;}
.paradox-title-wrap p.callout{border-left:2px solid var(--clay);padding-left:18px;font-size:15px;color:var(--ink-soft);font-style:normal;}
.paradox-image{
  width:100%;max-width:420px;margin:0 auto;display:block;
  -webkit-mask-image:
    linear-gradient(to right, transparent, black 14%, black 86%, transparent),
    linear-gradient(to bottom, transparent, black 14%, black 86%, transparent);
  -webkit-mask-composite: source-in, source-over;
  mask-image:
    linear-gradient(to right, transparent, black 14%, black 86%, transparent),
    linear-gradient(to bottom, transparent, black 14%, black 86%, transparent);
  mask-composite: intersect;
}
@media(max-width:860px){.paradox-title-wrap{min-height:0;}}
@media(max-width:860px){.paradox-grid{grid-template-columns:1fr;gap:32px;}}

.section-head{text-align:center;max-width:600px;margin:0 auto 56px;}
.section-head h2{font-size:clamp(28px,3.6vw,40px);margin:16px 0 14px;line-height:1.15;}
.section-head p{color:var(--ink-soft);font-size:16px;}

.results{background:var(--ink);color:var(--paper);padding:80px 0;position:relative;overflow:hidden;}
.results .wrap{position:relative;z-index:1;}
.results-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;}
.results-item{padding:0 12px;border-left:1px solid rgba(244,245,241,0.12);}
.results-item:first-child{border-left:none;}
.results-num{
  font-family:'IBM Plex Mono',monospace;font-weight:600;
  font-size:clamp(30px,4.4vw,46px);color:var(--paper);
  display:block;margin-bottom:10px;
}
.results-num .tick{color:var(--clay);}
.results-label{font-size:13px;color:rgba(244,245,241,0.65);line-height:1.4;max-width:160px;margin:0 auto;}
@media(max-width:760px){.results-grid{grid-template-columns:1fr 1fr;gap:34px;}.results-item{border-left:none;}}

.process{padding:110px 0;}
.process-rail{position:relative;}
.process-line-svg{position:absolute;top:24px;left:0;width:100%;height:6px;z-index:0;}
.process-line-svg line{stroke:var(--mist);stroke-width:2;}
.process-line-svg line.draw{stroke:var(--pine);stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 1.8s var(--ease);}
.process-line-svg line.draw.in{stroke-dashoffset:0;}
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative;z-index:1;}
.proc-step{cursor:pointer;}
.proc-dot{
  width:50px;height:50px;border-radius:50%;background:var(--white);border:2px solid var(--mist);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:15px;color:var(--ink-soft);
  transition:all .3s var(--ease);
}
.proc-step:hover .proc-dot, .proc-step.touched .proc-dot{
  background:var(--pine);border-color:var(--pine);color:white;transform:scale(1.1);
}
.proc-step h3{font-size:16px;margin-bottom:8px;transition:color .3s ease;}
.proc-step:hover h3, .proc-step.touched h3{color:var(--pine-deep);}
.proc-detail{
  font-size:13.5px;color:var(--ink-soft);line-height:1.5;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .4s var(--ease), opacity .3s ease, margin-top .4s ease;
}
.proc-step:hover .proc-detail, .proc-step.touched .proc-detail{
  max-height:120px;opacity:1;margin-top:6px;
}
.proc-summary{font-size:13.5px;color:var(--ink-soft);}
/* La imagen aparece igual que .proc-detail: oculta hasta el hover (o touch),
   justo debajo de la descripción -- pedido explícito para escritorio. */
.proc-image{
  display:block; width:52px; height:auto;
  max-height:0; opacity:0; overflow:hidden; margin-top:0;
  transition:max-height .4s var(--ease), opacity .3s ease, margin-top .4s ease;
}
.proc-step:hover .proc-image, .proc-step.touched .proc-image{
  max-height:100px; opacity:1; margin-top:10px;
}
@media(max-width:860px){.process-steps{grid-template-columns:1fr 1fr;gap:32px;}.process-line-svg{display:none;}}
@media(max-width:600px){.process-steps{grid-template-columns:1fr;gap:28px;}}
/* Touch devices have no hover -- the detail line must not depend on it, or it
   simply never appears (and the "pasa el cursor" hint above would be actively
   wrong). Show it open by default instead of gating it behind discovery. */
@media (hover: none){
  .proc-detail{max-height:none;opacity:1;overflow:visible;margin-top:6px;}
  .proc-image{max-height:none;opacity:1;overflow:visible;margin-top:10px;}
  #processHint{display:none;}
}

.testimonials{padding:30px 0 110px;}
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.test-card{
  background:var(--white);border:1px solid var(--line-soft);border-radius:18px;padding:28px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.test-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.test-quote{font-family:'Instrument Serif';font-style:italic;font-size:16px;line-height:1.5;color:var(--ink);margin-bottom:22px;}
.test-person{display:flex;align-items:center;gap:12px;}
.test-avatar{
  width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Onest';font-weight:700;font-size:14px;color:white;flex-shrink:0;
}
.test-name{font-size:13.5px;font-weight:600;}
.test-biz{font-size:12px;color:var(--ink-soft);}
@media(max-width:860px){.test-grid{grid-template-columns:1fr;}}

/* ===== REEL CAROUSEL (video testimonials, hubb.mx style) ===== */
.reels-section{padding:30px 0 110px;}
.reels-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:22px;}
.reels-eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600;display:flex;align-items:center;gap:6px;
}
.reels-eyebrow svg{width:13px;height:13px;stroke:var(--ink-soft);}
.reels-cue{
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--ink-soft);
  display:flex;align-items:center;gap:6px;flex-shrink:0;
}
.reels-cue svg{width:13px;height:13px;stroke:var(--ink-soft);transition:transform .3s ease;}
.reels-track{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  /* Centered via calculated side padding rather than justify-content:center --
     centering a scrollable flex row with justify-content leaves the first
     card unreachable once it overflows (scrollLeft can't go negative). This
     padding shrinks to ~0 once the row no longer fits, so scrolling always
     starts cleanly at the first card. 1400px = 6 cards (220px) + 5 gaps (16px). */
  padding:4px max(4px, calc((100% - 1400px) / 2)) 14px;
}
.reels-track::-webkit-scrollbar{height:5px;}
.reels-track::-webkit-scrollbar-thumb{background:var(--mist);border-radius:10px;}
.reel-card{
  position:relative;flex:0 0 auto;width:220px;aspect-ratio:9/16;border-radius:18px;overflow:hidden;
  background:var(--ink);scroll-snap-align:start;cursor:pointer;
  box-shadow:0 14px 34px -16px rgba(17,32,27,.35);
  transition:transform .3s var(--ease);
}
.reel-card:hover{transform:translateY(-4px);}
.reel-card video{width:100%;height:100%;object-fit:cover;display:block;}
.reel-card .reel-fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--pine-deep),var(--ink));
  transition:opacity .25s ease;
}
.reel-card .reel-fallback svg{width:34px;height:34px;stroke:rgba(244,245,241,.5);}
/* Bug real: al ser position:absolute, el fallback pinta SIEMPRE encima del
   <video> (static) sin importar el orden en el DOM -- sin esto, el video
   nunca se llega a ver de verdad aunque sí esté reproduciéndose. */
.reel-card.playing .reel-fallback{opacity:0;pointer-events:none;}
.reel-scrim{
  position:absolute;left:0;right:0;bottom:0;height:56%;
  background:linear-gradient(to top, rgba(17,32,27,0.88), rgba(17,32,27,0) 100%);
  pointer-events:none;
}
.reel-caption{
  position:absolute;left:12px;right:12px;bottom:44px;color:#fff;font-size:12.5px;font-weight:700;
  text-shadow:0 1px 6px rgba(0,0,0,.5);line-height:1.3;
}
.reel-person{
  position:absolute;left:12px;bottom:12px;right:12px;display:flex;align-items:center;gap:8px;
}
.reel-avatar{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Onest';font-weight:700;font-size:10px;color:#fff;
  border:1.5px solid rgba(244,245,241,.5);
  overflow:hidden;background:#fff;
}
.reel-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.reel-handle{font-size:12px;font-weight:600;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.4);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.reel-mute{
  position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;
  background:rgba(17,32,27,0.45);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:2;
}
.reel-mute svg{width:12px;height:12px;stroke:#fff;}
.reel-playhint{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1;
  opacity:1;transition:opacity .25s ease;pointer-events:none;
}
.reel-playhint svg{width:38px;height:38px;fill:rgba(244,245,241,.85);filter:drop-shadow(0 2px 8px rgba(0,0,0,.4));}
.reel-card.playing .reel-playhint{opacity:0;}
@media(max-width:600px){
  .reel-card{width:168px;}
  /* 1088px = 6 cards (168px) + 5 gaps (16px) */
  .reels-track{padding:4px max(4px, calc((100% - 1088px) / 2)) 14px;}
}

/* ===== PRICING ===== */
.pricing{padding:30px 0 110px;}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;}
.price-card{
  background:var(--white);border:1.5px solid var(--line-soft);border-radius:20px;
  padding:32px 28px;display:flex;flex-direction:column;position:relative;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease;
}
.price-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.price-card.featured{border-color:var(--pine);background:linear-gradient(180deg,rgba(31,110,82,0.04),transparent 40%);}
.price-badge{
  position:absolute;top:-13px;left:28px;background:var(--clay);color:#fff;
  font-size:11.5px;font-weight:600;padding:5px 14px;border-radius:100px;font-family:'Onest';
}
.price-name{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--pine);font-weight:600;margin-bottom:14px;}
.price-old{font-family:'Inter';font-weight:500;font-size:15px;color:var(--ink-soft);text-decoration:line-through;text-decoration-color:var(--clay);opacity:.75;margin-bottom:2px;}
.price-amount{font-family:'Onest';font-weight:700;font-size:34px;color:var(--ink);margin-bottom:2px;}
.price-amount span{font-family:'Inter';font-weight:500;font-size:14px;color:var(--ink-soft);}
.price-desc{font-size:13.5px;color:var(--ink-soft);margin-bottom:22px;}
.price-list{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:26px;flex:1;}
.price-list li{font-size:14px;display:flex;align-items:flex-start;gap:9px;color:var(--ink-soft);}
.price-list li svg{width:15px;height:15px;stroke:var(--pine);flex-shrink:0;margin-top:2px;}
.price-cta{
  font-family:'Onest';font-weight:600;font-size:14.5px;text-align:center;
  padding:13px 20px;border-radius:100px;background:var(--paper-dim);color:var(--ink);
  transition:background .25s ease, color .25s ease, transform .2s ease;
}
.price-card.featured .price-cta{background:var(--pine);color:#fff;}
.price-cta:hover{transform:translateY(-1px);background:var(--ink);color:#fff;}
.price-cta.is-loading{opacity:.65;pointer-events:none;}
.pricing-note{text-align:center;margin-top:30px;font-size:13.5px;color:var(--ink-soft);}
@media(max-width:860px){.pricing-grid{grid-template-columns:1fr;}.price-card.featured{order:-1;}}

.stripe-return-banner{
  max-width:640px;margin:-40px auto 40px;padding:16px 22px;border-radius:14px;
  font-size:14.5px;text-align:center;font-weight:500;
}
.stripe-return-banner.success{background:rgba(31,110,82,.1);color:var(--pine-deep);border:1px solid rgba(31,110,82,.25);}
.stripe-return-banner.cancel{background:rgba(196,98,46,.1);color:var(--clay);border:1px solid rgba(196,98,46,.25);}

/* popup de cuenta creada (reemplaza el alert() nativo del navegador) */
.account-modal-overlay{
  position:fixed;inset:0;background:rgba(17,32,27,.55);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:20px;z-index:10000;
  opacity:0;transition:opacity .25s var(--ease);
}
.account-modal-overlay.show{opacity:1;}
.account-modal{
  background:var(--white);border-radius:22px;box-shadow:var(--shadow);
  max-width:420px;width:100%;padding:38px 34px;text-align:center;
  transform:scale(.94) translateY(8px);transition:transform .3s var(--ease);
}
.account-modal-overlay.show .account-modal{transform:scale(1) translateY(0);}
.account-modal-icon{
  width:56px;height:56px;border-radius:50%;background:var(--pine);color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
}
.account-modal-icon svg{width:26px;height:26px;}
.account-modal h3{font-size:21px;margin-bottom:10px;}
.account-modal p{font-size:14.5px;color:var(--ink-soft);line-height:1.5;margin-bottom:6px;}
.account-modal p strong{color:var(--ink);}
.account-modal-sub{margin-bottom:22px !important;}
.account-modal .btn-primary{justify-content:center;width:100%;}

.cta-final{
  background:var(--pine-deep);color:var(--paper);
  padding:90px 0;text-align:center;position:relative;overflow:hidden;
}
.cta-final .wrap{position:relative;z-index:1;}
.cta-final h2{font-size:clamp(28px,4vw,44px);margin-bottom:16px;line-height:1.15;}
.cta-final p{color:rgba(244,245,241,0.75);max-width:440px;margin:0 auto 32px;font-size:16px;}
.btn-wa{
  background:var(--paper);color:var(--ink);
  font-family:'Onest';font-weight:600;font-size:16px;
  padding:16px 30px;border-radius:100px;display:inline-flex;align-items:center;gap:10px;
  transition:transform .25s var(--ease), background .25s ease;
}
.btn-wa:hover{transform:translateY(-2px);background:white;}
.btn-wa svg{width:18px;height:18px;fill:var(--pine);}
.cta-note{margin-top:16px;font-size:13px;color:rgba(244,245,241,0.5);font-family:'IBM Plex Mono',monospace;}

footer{background:var(--ink);color:var(--paper);padding:60px 0 30px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:50px;}
.foot-word{font-family:'Onest';font-weight:700;font-size:22px;display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.foot-word img{height:36px;width:auto;display:block;}
.foot-tag{font-size:14px;color:rgba(244,245,241,0.6);max-width:280px;}
.foot-col-title{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(244,245,241,0.45);margin-bottom:14px;}
.foot-col a{display:block;font-size:14px;color:rgba(244,245,241,0.8);margin-bottom:10px;transition:color .2s ease;}
.foot-col a:hover{color:var(--clay-soft);}
.foot-bottom{
  border-top:1px solid rgba(244,245,241,0.12);padding-top:24px;
  display:flex;justify-content:space-between;font-size:12.5px;color:rgba(244,245,241,0.4);
  font-family:'IBM Plex Mono',monospace;
}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:30px;}.foot-bottom{flex-direction:column;gap:8px;}}

/* ============================================================
   MOBILE OPTIMIZATION PASS — appended last so it wins the cascade
   on any viewport ≤640px, without touching desktop rules above.
   ============================================================ */
@media(max-width:640px){

  /* --- Hero: the H1 was hitting its 40px floor and wrapping to
     6-7 lines, pushing the CTA and everything else off the first
     screen. A responsive floor keeps it legible without eating
     the whole viewport. --- */
  .hero{padding:104px 0 48px;}
  .hero h1{font-size:clamp(30px,8.2vw,40px); line-height:1.12; margin-bottom:18px;}
  .hero p.sub{font-size:16px; margin-bottom:28px;}
  .hero-actions{gap:14px;}
  .btn-primary{padding:15px 24px; font-size:15px; text-align:center;}

  /* --- Demo animation: at full container width (311px) it read as
     an oversized, boxy card that swallowed almost the entire first
     viewport. Shrinking the non-expanded (phone-chat) phase to a
     narrower, taller silhouette makes it read like an actual phone
     screen instead of a stretched card. The expanded CRM phases
     keep the wider container width since that content (sidebar +
     kanban) needs the room. --- */
  .chat-frame:not(.expanded){width:240px; height:462px; max-width:240px;}
  .demo-stage-wrap{display:flex; justify-content:center;}
  .peek-card{width:220px; height:462px;}
  .peek-card.left{transform:translateX(-50%) translateX(-14px) rotate(-6deg);}
  .peek-card.left.show{transform:translateX(-50%) translateX(-14px) rotate(-4deg);}
  .peek-card.right{transform:translateX(-50%) translateX(14px) rotate(6deg);}
  .peek-card.right.show{transform:translateX(-50%) translateX(14px) rotate(4deg);}

  /* --- Section rhythm: desktop paddings (90-120px) were tuned for
     large viewports; on mobile they just create dead scroll space
     between sections. Tightened consistently site-wide. --- */
  .reels-section{padding:28px 0 56px;}
  .benefits-section{padding:8px 0 52px;}
  .benefits-stats{padding:22px 16px;margin-bottom:36px;}
  .chat-section{display:none;}
  .paradox{padding:44px 0 56px;}
  .testimonials{padding:28px 0 56px;}
  .pricing{padding:12px 0 56px;}
  .process{padding:56px 0;}
  .results{padding:48px 0;}
  .cta-final{padding:56px 0;}
  footer{padding:44px 0 26px;}
  .section-head{margin-bottom:34px;}

  /* --- Chat caption: keep it big and legible per the earlier
     request, but rebalance the top margin now that section
     padding is tighter. --- */
  .chat-caption{margin-top:20px;}

  /* --- Reel mute button: 26px is under Apple/Google's 44px
     minimum touch target. Sized up without changing the card. --- */
  .reel-mute{width:34px; height:34px;}
  .reel-mute svg{width:15px;height:15px;}

  /* --- Pricing cards: give the featured card a touch more room
     to breathe now that it's first in stack order. --- */
  .price-card{padding:28px 22px;}
}