/* ===== Tokens (extraídos de Figma "Agencia X" › Aplicación) ===== */
:root{
  --grad: linear-gradient(97deg,#825BF8 0%,#5F44F6 44.8%,#5CAFF9 96.4%);
  --ink:#111111;
  --text-muted:#717171;
  --navy:#1D0077;
  --indigo:#321FC8;
  --violet:#7F6CFC;
  --gray-400:#98A2B3;
  --tertiary:#7F7798;
  --mono-600:#5D5D5D;
  --line:#EDEDED;
  --shadow-card: 0 24px 48px rgba(46,43,80,.08);
  --font-sans:"Plus Jakarta Sans",system-ui,sans-serif;
  --font-btn:"Poppins",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;overflow-x:clip}
body{font-family:var(--font-sans);color:var(--ink);background:#fff;overflow-x:clip;-webkit-font-smoothing:antialiased}
p{margin:0}
a{color:inherit;text-decoration:none}

/* ===== Botón con degradado ===== */
.btn-grad{display:inline-flex;white-space:nowrap;text-align:center;align-items:center;justify-content:center;background:var(--grad);color:#fff;
  font-family:var(--font-btn);font-weight:600;border-radius:999px;transition:filter .2s, transform .2s, box-shadow .2s}
.btn-grad:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 10px 24px rgba(95,68,246,.28)}

/* ===== HERO: escenario de 1440 × 940 (coordenadas 1:1 con Figma) ===== */
.hero{position:relative}
.hero__scaler{position:relative;width:100%;height:calc(940px * var(--s,1))}
.hero__stage{position:absolute;left:50%;top:0;width:1440px;height:940px;
  transform-origin:top center;transform:translateX(-50%) scale(var(--s,1))}
.hero__stage > *{position:absolute}

.glow{border-radius:50%;pointer-events:none}
.glow--tl{left:-63px;top:6px;width:366px;height:366px;background:#AB9AFF;opacity:.21;filter:blur(81px)}
.glow--br{left:1040px;top:640px;width:420px;height:420px;background:#AB9AFF;opacity:.16;filter:blur(90px)}

/* Nav */
.nav{left:120px;top:43px;width:1195px;height:39px;display:flex;align-items:center}
.nav__logo{display:block;line-height:0}
.nav__links{display:flex;gap:0;margin-left:auto}
.nav__links a{font-family:var(--font-btn);font-size:15px;color:var(--ink);position:absolute;top:10px}
.nav__links a:nth-child(1){left:709px}
.nav__links a:nth-child(2){left:822px}
.nav__links a:hover{color:#5F44F6}
.nav__cta{position:absolute;left:1036px;top:0;width:159px;height:39px;border-radius:19.5px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-btn);font-size:15px;color:#2B2B2B;isolation:isolate}
.nav__cta::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--grad);opacity:.2;z-index:-1;transition:opacity .2s}
.nav__cta:hover::before{opacity:.32}

/* Contenido central */
.hero__content{left:420px;top:326px;width:600px;text-align:center}
.hero__title{margin:0 auto;width:591px;font-size:60px;font-weight:500;line-height:113.5%;letter-spacing:-1px;color:var(--ink)}
.hero__text{margin:8px auto 0;width:590px;font-size:18px;font-weight:500;line-height:160%;color:var(--text-muted)}
.hero__btn{margin-top:18px;width:378px;height:60px;font-size:20px}

/* Cards base */
.card{background:#fff;box-shadow:var(--shadow-card)}
.card > *{position:absolute}

/* Create Schedule */
.card--schedule{left:61px;top:172px;width:316px;height:360px;border-radius:16px}
.sch__head{left:16px;top:16px;display:flex;gap:10px;align-items:center}
.sch__icon{width:44px;height:44px;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center}
.sch__title{font-size:15px;font-weight:500;color:var(--ink)}
.sch__sub{font-size:10.5px;color:#555;margin-top:4px}
.sch__rows{left:0;top:0;width:100%;height:100%;margin:0}
.sch__rows dt,.sch__rows dd{position:absolute;margin:0;transform:translateY(-50%)}
.sch__rows dt{left:16px;font-size:14px;color:#555}
.sch__rows dd{left:148px;transform:none}
.sch__rows dt{transform:translateY(-50%)}
.sch__rows dd[style*="top:92px"],.sch__rows dd[style*="top:212px"],.sch__rows dd[style*="top:248px"]{transform:translateY(-50%)}
.v-dark-sm{font-size:12px;color:var(--ink)}
.v-muted-sm{font-size:12px;color:#555;width:130px;line-height:1.45}
.v-dark{font-size:14px;color:var(--ink)}
.guests{display:flex}
.chip-add{display:inline-flex;align-items:center;height:23px;padding:0 10px;border:1px solid var(--line);border-radius:11.5px;font-size:11px;color:#555}
.sch__progress{left:16px;top:327px;display:flex;gap:4px}
.sch__progress i{display:block;height:6px;border-radius:3px;background:var(--indigo)}
.sch__progress i:first-child{width:56px}
.sch__progress i:not(:first-child){width:16px;opacity:.1}
.sch__btn{top:316px;width:70px;height:28px;border-radius:14px;display:grid;place-items:center;font-size:11px}
.sch__btn--cancel{left:152px;background:#F6F7FA;color:var(--ink)}
.sch__btn--save{left:230px;background:var(--indigo);color:#fff}

/* Avatares (placeholder hasta traer las fotos de Figma) */
.av{display:block;border-radius:50%;background:linear-gradient(135deg,#D9D3FF,#BFD9FF);border:2px solid #fff;flex:none}
.guests .av{width:20px;height:20px;margin-right:-4px}
.av--plus{display:grid;place-items:center;background:#fff;border:1px solid #D9DADB;font-style:normal;font-size:11px;color:#555;margin-left:4px}
.av--2,.av--4{background:linear-gradient(135deg,#F3D9C8,#D8B49C)}
.av--5{background:linear-gradient(135deg,#C9D6CE,#9FB3A8)}

/* Gráfico */
.card--chart{left:183px;top:562.5px;width:253px;height:115.8px;border-radius:32px;overflow:hidden}
.bar{width:23px;border-radius:8px;background:#EEF0F8}
.bar--red{background:#F7627B;box-shadow:0 8px 16px rgba(123,0,0,.2)}
.bar--violet{background:var(--violet);box-shadow:0 8px 16px rgba(127,108,252,.32)}
.day{top:92px;font-size:11.5px;color:#9A9FB0;transform:translateX(-50%)}

/* Dev Collaboration */
.card--dev{left:564px;top:148px;width:156px;height:169px;border-radius:12px}
.chip-mobile{left:12px;top:12px;height:24px;padding:0 9px;border-radius:12px;background:#F1F5FF;color:#4E7CF6;font-size:12px;font-weight:500;display:flex;align-items:center}
.dev__title{left:12px;top:44px;font-size:12.5px;font-weight:500;color:var(--ink)}
.dev__desc{left:12px;top:66px;width:132px;font-size:10px;line-height:1.4;color:#666}
.dev__time{left:12px;top:98px;font-size:10px;color:var(--ink);display:flex;align-items:center;gap:4px}
.dev__avatars{left:10px;top:131px;display:flex}
.dev__avatars .av{width:26px;height:26px;margin-right:-6px}
.dev__arrow{left:120px;top:133px;width:24px;height:24px;border-radius:50%;background:#EEEEEE;display:grid;place-items:center}

/* Post */
.card--post{left:1086px;top:166px;width:277px;height:333px;border-radius:20px}
.av--host{left:14px;top:10px;width:44px;height:44px;border:0;box-shadow:0 0 0 0 transparent;background:linear-gradient(135deg,#FFD66B,#E0A93A)}
.post__name{left:64px;top:12px;font-size:14px;font-weight:600;color:var(--ink)}
.post__role{left:64px;top:33px;font-size:12px;color:var(--text-muted)}
.post__dots{left:230px;top:22px;display:flex;gap:3px}
.post__dots i{width:3px;height:3px;border-radius:50%;background:var(--text-muted)}
.post__photo{left:12px;top:65px;width:253px;height:167px;border-radius:8px;background:#D9E3E0 url("../assets/img/post-santorini.jpg") center/cover no-repeat}
.post__caption{left:12px;top:246px;font-size:16px;font-weight:500;color:var(--ink)}
.post__caption span{color:#2F80ED}
.post__hr{left:12px;top:276px;width:253px;margin:0;border:0;border-top:1px solid var(--line)}
.post__stats{left:12px;top:293px;display:flex;gap:22px}
.post__stats span{display:flex;align-items:center;gap:6px;font-size:14px;color:#555}

/* Tracking */
.card--track{left:828px;top:701px;width:559px;height:191px;border-radius:16px}
.trk__label{left:23px;top:24px;font-size:12px;color:var(--text-muted)}
.trk__code{left:23px;top:46px;font-size:15px;font-weight:700;color:var(--navy);letter-spacing:.2px}
.trk__chip{left:427px;top:28.5px;width:108px;height:32px;border-radius:16px;background:#F2F0FF;color:#3A1FC8;font-size:12px;font-weight:600;display:grid;place-items:center}
.trk__steps{left:0;top:0;width:100%;height:100%;margin:0;padding:0;list-style:none}
.trk__steps li{position:absolute;top:90px;display:flex;flex-direction:column}
.trk__steps .ico{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#F2F2F2;color:#B5B5B5;margin-bottom:12px}
.trk__steps .ico svg{width:15px;height:15px}
.trk__steps li.done .ico{background:var(--navy);color:#fff}
.trk__steps li.active .ico{background:#F2F0FF;color:#5F44F6}
.trk__steps b{font-size:12.5px;font-weight:500;color:var(--navy)}
.trk__steps small{font-size:9.5px;color:var(--gray-400);margin-top:9px}

/* Decoración */
.cursor{pointer-events:none}
.rings{left:1238px;top:724px;pointer-events:none;z-index:0}
.card{z-index:1}

/* ===== Responsive ===== */
@media (max-width:1023px){
  .hero__scaler{height:auto}
  .hero__stage{position:relative;left:auto;width:100%;height:auto;transform:none;padding:24px 20px 72px}
  .hero__stage > *{position:relative}
  .card,.cursor,.rings,.glow--br{display:none}
  .glow--tl{position:absolute}
  .nav{left:auto;top:auto;width:100%;height:auto;justify-content:space-between}
  .nav__links{display:none}
  .nav__cta{position:relative;left:auto;width:auto;padding:0 20px}
  .hero__content{left:auto;top:auto;width:100%;max-width:600px;margin:72px auto 0}
  .hero__title{width:auto;font-size:clamp(38px,8vw,60px)}
  .hero__text{width:auto;font-size:16px}
  .hero__btn{width:100%;max-width:378px;height:56px;font-size:17px}
}

/* =====================================================================
   SECCIONES (medidas tomadas del frame de Figma a 1440px)
   ===================================================================== */
.container{width:min(1274px, 100% - 48px);margin-inline:auto}

/* ---- ¿Qué podemos mejorar? ---- */
.mejorar{padding-top:19px;scroll-margin-top:20px}
.mejorar__head{text-align:center}
.h-section{margin:0;font-size:56px;font-weight:500;line-height:67px;letter-spacing:-.5px;color:var(--ink)}
.mejorar__lead{max-width:880px;margin:20px auto 0;font-size:28px;font-weight:400;line-height:58px;letter-spacing:.6px;color:var(--ink)}

.feature{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,578px);column-gap:48px;
  padding:61px 37px 60px 50px;border:1px solid #8B7BF7;border-radius:32px;background:#fff}
.feature--1{margin-top:168px}
.feature--2{margin-top:135px}
.feature--3{margin-top:82px}
.feature__text{padding-top:6px;max-width:460px;display:flex;flex-direction:column;align-items:flex-start}
.chip{display:inline-flex;align-items:center;height:28px;padding:0 9px;border-radius:14px;border:1px solid;font-size:15px;line-height:1}
.chip--orange{color:#F2994A;border-color:#F2994A;background:#FFF6EE;box-shadow:0 0 0 4px rgba(242,153,74,.08)}
.chip--blue{color:#3B8FF0;border-color:#5CAFF9;background:#EEF7FF;box-shadow:0 0 0 4px rgba(92,175,249,.1)}
.chip--violet{color:#3A1FC8;border-color:#5F44F6;background:#EFEBFF;box-shadow:0 0 0 4px rgba(95,68,246,.08)}
.feature__title{margin:28px 0 0;font-size:44px;font-weight:500;line-height:63px;letter-spacing:-.4px;color:var(--ink)}
.feature__body{margin-top:20px;max-width:440px;font-size:16px;font-weight:500;line-height:28px;color:#222}
.feature__btn{margin-top:38px;height:60px;padding:0 29px;font-size:20px}
.feature__media{position:relative}
.video{position:relative;width:100%;aspect-ratio:578/477;border-radius:30px;background:#F2F2F2;display:grid;place-items:center;overflow:hidden}
.video__play{width:109px;height:109px;border-radius:50%;border:0;background:#D9D9D9;display:grid;place-items:center;cursor:pointer;transition:transform .2s,background .2s}
.video__play svg{margin-left:4px}
.video__play:hover{transform:scale(1.06);background:#CDCDCD}
.dots{position:absolute;left:50%;bottom:-27px;transform:translateX(-50%);display:flex;gap:20px;align-items:center}
.dots i{display:block;width:19px;height:6px;border-radius:3px;background:#B7A8FA}
.dots i:last-child{width:15px}
.dots i.is-active{width:40px;background:#5F44F6}

/* ---- Statement ---- */
.statement{margin-top:182px;text-align:center;padding-inline:24px}
.statement__text{font-size:60px;font-weight:300;line-height:97px;color:var(--ink)}

/* ---- Cómo funcionan ---- */
.como{margin-top:186px;position:relative}
.como__grid{display:grid;grid-template-columns:minmax(0,560px) 1fr;column-gap:40px;align-items:start}
.como__intro{position:relative;padding-top:0}
.como__intro > *:not(.como__rings){position:relative;z-index:1}
.como__rings{position:absolute;left:-251px;top:367px;pointer-events:none;z-index:0}
.eyebrow{font-size:24px;font-weight:700;line-height:30px;background:linear-gradient(90deg,#825BF8,#5F44F6 45%,#5CAFF9);-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content;max-width:100%}
.como__title{margin:18px 0 0;font-size:50px;font-weight:500;line-height:70px;letter-spacing:-.5px;color:var(--ink)}
.como__sub{margin-top:46px;font-size:22px;font-weight:500;line-height:30px;color:var(--ink);max-width:500px}
.como__note{margin-top:16px;font-size:17px;font-weight:500;line-height:27px;color:var(--text-muted);max-width:460px}
.como__btn{margin-top:39px;height:60px;width:185px;font-size:20px}

.steps{display:grid;grid-template-columns:repeat(2,283px);column-gap:40px;justify-content:end;margin-right:7px}
.steps__col{display:flex;flex-direction:column}
.steps__col--1{padding-top:54px}
.steps__col--1 .step:first-child{min-height:289px}
.steps__col--1 .step:last-child{min-height:338px;margin-top:47px}
.steps__col--2 .step:first-child{min-height:394px}
.steps__col--2 .step:last-child{min-height:344px;margin-top:18px}
.step{position:relative;padding:23px;border:1px solid #9D8CFA;border-radius:16px;background:#fff}
.step--tint{background:linear-gradient(135deg,#F1EEFF 0%,#EEF5FF 100%);border-color:#8FA6FB}
.step__icon{width:62px;height:62px;border-radius:50%;background:#E9E3FF;color:#1D0077;display:grid;place-items:center}
.step__icon svg{width:22px;height:22px}
.step__title{margin:27px 0 0;font-size:22px;font-weight:500;line-height:32px;color:var(--ink)}
.step__body{margin-top:12px;font-size:16px;font-weight:500;line-height:25px;color:#7A7F8C}

/* ---- Contacto ---- */
.contacto{margin-top:144px;padding:45px 0 43px;background:linear-gradient(90deg,#EEEAFF 0%,#EEF3FF 100%);border-radius:40px 40px 0 0;scroll-margin-top:20px}
.contacto__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,433px);column-gap:48px;padding-left:55px;padding-right:85px}
.contacto__intro{padding-top:41px}
.contacto__title{margin:0;font-size:56px;font-weight:500;line-height:65px;letter-spacing:-.5px;color:var(--ink);max-width:560px}
.contacto__text{margin-top:43px;max-width:474px;font-size:17px;font-weight:500;line-height:27px;color:#333}
.form{display:flex;flex-direction:column;gap:19px;width:100%}
.form__row{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
.form label{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:13px;font-weight:500;color:#333}
.form input,.form textarea{width:100%;min-width:0;font:inherit;font-size:15px;color:var(--ink);height:44px;padding:0 14px;border:1px solid #8B7BF7;border-radius:10px;background:rgba(255,255,255,.35);outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.form textarea{height:122px;padding:12px 14px;resize:vertical}
.form input:focus,.form textarea:focus{background:#fff;border-color:#5F44F6;box-shadow:0 0 0 4px rgba(95,68,246,.12)}
.form input.is-invalid{border-color:#F7627B}
.form__btn{margin-top:13px;height:52px;border:0;cursor:pointer;gap:10px;font-family:var(--font-sans);font-size:16px;font-weight:500}
.form__msg{min-height:20px;font-size:14px;color:#3A1FC8}

/* ---- Footer ---- */
.footer{padding:63px 0 146px}
.footer .container{width:min(1216px, 100% - 48px)}
.footer__logo{display:inline-block;line-height:0}
.footer__addr{margin-top:13px;font-style:normal;font-size:15px;line-height:24px;color:var(--ink)}
.footer__nav{margin-top:30px;display:flex;flex-wrap:wrap;gap:8px 23px}
.footer__nav a{font-size:18px;font-weight:400;color:var(--text-muted);transition:color .2s}
.footer__nav a:hover{color:#5F44F6}
.footer__hr{margin:63px 0 0;border:0;border-top:1px solid #555}
.footer__bottom{margin-top:33px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.footer__copy{font-size:15px;color:var(--gray-400)}
.social{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.social a{display:block;width:24px;height:24px;color:#6F7C8F;transition:color .2s}
.social a:hover{color:#5F44F6}
.social svg{width:24px;height:24px}

/* ---- Responsive secciones ---- */
@media (max-width:1180px){
  .como__grid{grid-template-columns:minmax(0,1fr);row-gap:64px}
  .steps{justify-content:start}
}
@media (max-width:1023px){
  .h-section{font-size:clamp(34px,6vw,56px);line-height:1.2}
  .mejorar{padding-top:48px}
  .mejorar__lead{font-size:clamp(18px,3vw,28px);line-height:1.7}
  .feature{grid-template-columns:1fr;row-gap:36px;padding:32px 24px 56px;border-radius:24px}
  .feature--1,.feature--2,.feature--3{margin-top:48px}
  .feature--1{margin-top:64px}
  .feature__text{max-width:none}
  .feature__title{font-size:clamp(28px,5vw,44px);line-height:1.35;margin-top:20px}
  .feature__btn{font-size:17px;height:54px}
  .statement{margin-top:96px}
  .statement__text{font-size:clamp(30px,6vw,60px);line-height:1.45}
  .como{margin-top:96px}
  .como__title{font-size:clamp(32px,6vw,54px);line-height:1.3}
  .como__rings{display:none}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
  .steps__col--1{padding-top:0}
  .steps .step{min-height:0 !important}
  .steps__col .step:last-child{margin-top:20px}
  .contacto{margin-top:96px;padding:56px 0}
  .contacto__grid{grid-template-columns:1fr;row-gap:40px;padding:0}
  .contacto__intro{padding-top:0}
  .contacto__title{font-size:clamp(34px,6vw,56px);line-height:1.2}
  .contacto__text{margin-top:24px}
  .footer{padding:56px 0 64px}
  .footer__hr{margin-top:40px}
}
@media (max-width:640px){
  .eyebrow{width:auto;font-size:20px}
  .feature__btn{font-size:16px;padding:0 22px;height:50px}
  .steps{grid-template-columns:minmax(0,1fr);margin-right:0}
  .steps__col--2{margin-top:20px}
  .form__row{grid-template-columns:1fr;row-gap:19px}
  .footer__bottom{flex-direction:column-reverse;align-items:flex-start}
}

/* ===== Animaciones del hero ===== */
.anim-pending .hero__title,.anim-pending .hero__text,.anim-pending .hero__btn,
.anim-pending .hero__stage .card,.anim-pending .hero__stage .cursor{opacity:0}
.hero__content{perspective:900px}

@keyframes oai-float{
  0%,100%{translate:0 0;rotate:0deg}
  50%{translate:0 var(--fy,-12px);rotate:var(--fr,0deg)}
}
.hero__stage .card,.hero__stage .cursor{will-change:transform}
.is-floating .card,.is-floating .cursor{animation:oai-float var(--fd,6s) ease-in-out var(--fdel,0s) infinite}
.card--schedule{--fy:-14px;--fr:-.6deg;--fd:7s}
.card--chart{--fy:-18px;--fr:.8deg;--fd:5.5s;--fdel:-1.2s}
.card--dev{--fy:-10px;--fr:.5deg;--fd:6.2s;--fdel:-2.4s}
.card--post{--fy:-16px;--fr:.7deg;--fd:7.4s;--fdel:-.8s}
.card--track{--fy:-12px;--fr:-.4deg;--fd:6.8s;--fdel:-3s}
.hero__stage .cursor{--fy:-8px;--fr:6deg;--fd:4.2s}
.hero__stage .cursor:nth-of-type(2){--fdel:-1.4s;--fd:4.8s}
.hero__stage .cursor:nth-of-type(3){--fdel:-2.6s;--fd:3.8s}
@keyframes oai-spin{to{rotate:360deg}}
.rings{animation:oai-spin 60s linear infinite}
.glow--tl,.glow--br{animation:oai-float 12s ease-in-out infinite;--fy:30px}

@media (prefers-reduced-motion: reduce){
  .is-floating .card,.is-floating .cursor,.rings,.glow--tl,.glow--br{animation:none}
}

/* ===== Glow que sigue al cursor ===== */
.glow-card{isolation:isolate}
/* borde iluminado: se enciende en todas las tarjetas cuando el mouse está en el grupo */
.glow-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2px;pointer-events:none;z-index:2;
  background:radial-gradient(420px circle at var(--mx,-999px) var(--my,-999px),#825BF8 0%,#5F44F6 25%,#5CAFF9 45%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:0;transition:opacity .45s ease}
.glow-group:hover .glow-card::before{opacity:1}
/* resplandor suave de fondo en la tarjeta bajo el mouse */
.glow-card > .feature__text,.glow-card > .feature__media{position:relative;z-index:1}
.glow-card{background:
  radial-gradient(650px circle at var(--mx,-999px) var(--my,-999px),rgba(130,91,248,.10),transparent 45%) , #fff}
.glow-card{background-blend-mode:normal}
.glow-card:not(:hover){background:#fff}


/* ===== Mask reveal (¿Qué podemos mejorar?) ===== */
.video--ventas{background:linear-gradient(160deg,#FFF3E8 0%,#F4F1F7 60%,#EDEDF2 100%)}
.video--bots{background:linear-gradient(160deg,#E7F3FF 0%,#EEF1FA 60%,#E9EBF3 100%)}
.video--tailor{background:linear-gradient(160deg,#EEE9FF 0%,#F1EEFB 60%,#EAE8F4 100%)}
.features-mobile{display:none}
.reveal{position:relative;margin-top:168px;height:calc(598px + 220vh)} /* JS ajusta el alto real */
.reveal__pin{position:sticky;top:max(24px, calc(50vh - 299px))}  /* JS centra según el alto real */
.reveal__frame{margin:0;align-items:center}
/* los 3 textos se superponen en la misma celda: el marco toma el alto del más largo */
.reveal__texts{display:grid;align-items:center}
.reveal__text{grid-area:1/1;position:relative;will-change:transform,opacity,clip-path}
.reveal__text:not(.is-active){pointer-events:none}
.reveal__media{position:relative;width:100%;aspect-ratio:578/477;border-radius:30px;overflow:hidden}
.reveal__video{position:absolute;inset:0;border-radius:30px;will-change:clip-path,transform}
.reveal__video + .reveal__video{clip-path:inset(100% 0 0 0)}
.reveal__dots i{transition:width .45s cubic-bezier(.2,.8,.2,1),background .45s}
.reveal__dots i:not(.is-active){width:19px !important;background:#B7A8FA}
.reveal__dots i.is-active{width:40px;background:#5F44F6}

@media (max-width:1023px){
  .reveal{margin-top:48px}
  .reveal__frame{row-gap:28px;padding:26px 20px 52px}
  .reveal__frame .feature__title{font-size:clamp(24px,6.4vw,36px);line-height:1.3;margin-top:16px}
  .reveal__frame .feature__body{font-size:15px;line-height:1.6;margin-top:12px}
  .reveal__frame .feature__btn{margin-top:22px}
  .reveal__media{aspect-ratio:16/10;border-radius:22px}
  .reveal__video{border-radius:22px}
  .reveal__frame .video__play{width:72px;height:72px}
}
/* sin movimiento: se muestran las 3 tarjetas una debajo de la otra */
@media (prefers-reduced-motion: reduce){
  .reveal{display:none}
  .features-mobile{display:block}
  .features-mobile .feature:first-child{margin-top:64px}
}

/* ===== Botón neón: borde degradado que gira + luz que sigue al cursor ===== */
@property --neon-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes neon-spin{to{--neon-a:360deg}}
.btn-neon{position:relative;isolation:isolate;background:none !important;overflow:visible;color:#5F44F6 !important}
.btn-neon:hover{transform:none;filter:none;box-shadow:none}
.btn-neon::before,.btn-neon::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from var(--neon-a),#FF7AD9,#825BF8 18%,#5CAFF9 36%,#E8FBFF 48%,#5F44F6 64%,#FF7AD9 82%,#FF7AD9);
  animation:neon-spin 4s linear infinite}
.btn-neon::before{z-index:-2;padding:2.5px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.btn-neon::after{z-index:-3;filter:blur(14px);opacity:.3;transition:opacity .35s}
.btn-neon:hover::after{opacity:.9}
.btn-neon:hover::before,.btn-neon:hover::after{animation-duration:2.2s}
.btn-neon__fill{position:absolute;inset:2.5px;border-radius:inherit;z-index:-1;overflow:hidden;background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:none}
.btn-neon__glow{position:absolute;left:0;top:0;width:140px;height:140px;margin:-70px 0 0 -70px;border-radius:50%;
  background:var(--gc,#C9B8FF);filter:blur(24px);opacity:0;transition:opacity .35s;
  transform:translate3d(var(--gx,50%),var(--gy,50%),0)}
.btn-neon:hover .btn-neon__glow{opacity:.55}
@media (prefers-reduced-motion: reduce){
  .btn-neon::before,.btn-neon::after{animation:none}
}
.glow-card.glow-group:hover::before{opacity:1}
.glow-card > .reveal__texts{position:relative;z-index:1}
/* Anchos intermedios (1024–1279): columnas iguales para que el texto no se meta debajo del video */
@media (min-width:1024px) and (max-width:1279px){
  .feature{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;padding-left:40px}
  .feature__title{font-size:clamp(30px,3.4vw,44px);line-height:1.4}
}

/* ===== Título con scramble ===== */
.hero__title{min-height:136px}

/* ===== Máquina de escribir (statement) ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.type{display:grid}
.type__ghost,.type__live{grid-area:1/1}
.type__ghost{visibility:hidden}
.type__cursor{display:inline-block;width:.5em;height:.95em;margin-left:.06em;vertical-align:-.1em;background:#5F44F6;border-radius:2px}
.type.is-waiting .type__cursor,.type.is-done .type__cursor{animation:type-blink 1s steps(1) infinite}
@keyframes type-blink{50%{opacity:0}}
@media (prefers-reduced-motion: reduce){ .type__cursor{display:none} }

/* ===== "Cómo funcionan": glow en el borde de los pasos ===== */
.glow-edge::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2px;pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,-999px) var(--my,-999px),#825BF8 0%,#5F44F6 30%,#5CAFF9 50%,transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .45s ease}
.glow-group:hover .glow-edge::before{opacity:1}

/* Anchos intermedios: los 4 pasos en una grilla 2×2 pareja, sin anillos encima */
@media (max-width:1180px){
  .como__rings{display:none}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto;gap:20px;justify-content:stretch;margin-right:0;width:100%}
  .steps__col{display:contents}
  .steps .step{min-height:0 !important;margin-top:0 !important}
  .steps__col--1 .step:first-child{grid-area:1/1}
  .steps__col--2 .step:first-child{grid-area:1/2}
  .steps__col--1 .step:last-child{grid-area:2/1}
  .steps__col--2 .step:last-child{grid-area:2/2}
}
@media (max-width:640px){
  .steps{grid-template-columns:minmax(0,1fr)}
  .steps__col--1 .step:first-child{grid-area:auto}
  .steps__col--2 .step:first-child{grid-area:auto}
  .steps__col--1 .step:last-child{grid-area:auto}
  .steps__col--2 .step:last-child{grid-area:auto}
  .steps__col--2{margin-top:0}
}
@media (max-width:640px){
  .steps__col--1 .step:first-child{order:1}
  .steps__col--2 .step:first-child{order:2}
  .steps__col--1 .step:last-child{order:3}
  .steps__col--2 .step:last-child{order:4}
}
@media (max-width:1023px){ .hero__title{min-height:0} }

/* Tamaños más chicos: título del hero y frase de la máquina de escribir */
.hero__title{font-size:50px;min-height:114px}
.statement__text{font-size:46px;line-height:1.5}
@media (max-width:1023px){
  .hero__title{font-size:clamp(32px,7vw,50px);min-height:0}
  .statement__text{font-size:clamp(26px,5vw,46px)}
}

/* Imágenes en Ventas / Bots / Tailor Made (reemplazan al botón de play) */
.video > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;border-radius:inherit}
.video{background:#F2F2F2}
.video--ventas{object-position:center}
/* Hover de los botones más suave */
.btn-neon::after{opacity:.22}
.btn-neon:hover::after{opacity:.45}
.btn-neon__glow{width:180px;height:180px;margin:-90px 0 0 -90px;filter:blur(34px);transition:opacity .6s ease}
.btn-neon:hover .btn-neon__glow{opacity:.28}
.btn-neon:hover::before,.btn-neon:hover::after{animation-duration:3.2s}
/* Título con clone: cada letra recorta su copia inferior */
.hero__title [data-char]{will-change:transform}
/* más interlineado para que el recorte (clip) no corte las descendentes de g / p */
.hero__title{line-height:1.28;min-height:128px}
@media (max-width:1023px){ .hero__title{min-height:0} }

/* Título del hero con máquina de escribir */
.hero__title.type{display:grid}
.hero__title .type__ghost,.hero__title .type__live{grid-area:1/1}
/* Botón "Contactarnos" con el mismo efecto neón */
.nav__cta.btn-neon{position:absolute;color:#5F44F6 !important}
.nav__cta.btn-neon::before,.nav__cta.btn-neon:hover::before{opacity:1}
.type{align-items:start;align-content:start}

/* ===== Menú principal (compartido entre páginas) ===== */
.nav__links{position:absolute;right:199px;top:0;height:39px;display:flex;align-items:center;gap:34px}
.nav__links a{position:static !important;font-family:var(--font-btn);font-size:15px;color:var(--ink);transition:color .2s}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:#5F44F6}
.nav__links a[aria-current="page"]{font-weight:500}
.nav__toggle{display:none;width:44px;height:44px;border:1px solid #DCD5FF;border-radius:12px;background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav__toggle span{display:block;width:18px;height:2px;border-radius:2px;background:#1D0077;transition:transform .3s,opacity .3s}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1023px){
  .nav{gap:10px}
  .nav__cta{margin-left:auto}
  .nav__toggle{display:inline-flex}
  .nav__links{display:none;position:absolute !important;right:0;left:auto;top:calc(100% + 10px);height:auto;flex-direction:column;align-items:stretch;gap:0;
    min-width:240px;padding:8px;background:#fff;border:1px solid #E6E1FF;border-radius:16px;box-shadow:0 20px 50px rgba(46,43,80,.14);z-index:50}
  .nav__links.is-open{display:flex}
  .nav__links a{padding:12px 14px;border-radius:10px;font-size:16px}
  .nav__links a:hover{background:#F4F1FF}
}
@media (max-width:1023px){ .nav__cta.btn-neon{position:relative} }

/* ===== Menú del home: Probar ▸ Certeza / Sales Caddy ===== */
.hero__stage .nav__links{right:127px;gap:36px}
.nav__try{position:absolute;left:1092px;top:0;height:39px}
.nav__try .nav__cta{position:relative !important;left:auto;top:auto;width:auto;height:39px;padding:0 16px 0 20px;gap:10px;border:0;cursor:pointer;font:400 15px var(--font-btn);color:#2B2B2B}
.nav__try .nav__cta svg{transition:transform .3s}
.nav__try.is-open .nav__cta svg{transform:rotate(90deg)}
.try-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:190px;padding:8px;background:#fff;border-radius:14px;box-shadow:0 14px 40px rgba(46,43,80,.14);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s,transform .25s,visibility .25s;z-index:60}
.nav__try.is-open .try-menu,.nav__try:focus-within .try-menu{opacity:1;visibility:visible;transform:none}
@media (hover:hover){ .nav__try:hover .try-menu{opacity:1;visibility:visible;transform:none} .nav__try:hover .nav__cta svg{transform:rotate(90deg)} }
.try-item{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;color:var(--ink);transition:background .2s}
.try-item:hover{background:#F4F1FF}
.try-item b{font-weight:600;font-size:14px}
.try-item em{font-style:normal;font-size:10px;font-weight:700;color:#5F44F6;background:#EFEBFF;border-radius:5px;padding:2px 5px}
.try-ico{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:#fff;flex:none}
.try-ico svg{width:15px;height:15px}
.try-ico--certeza{background:linear-gradient(135deg,#825BF8,#5F44F6)}
.try-ico--caddy{background:linear-gradient(135deg,#5F44F6,#5CAFF9)}
.try-mobile{display:none}
@media (max-width:1023px){
  .nav__try{display:none}
  .hero__stage .nav__toggle{margin-left:auto}
  .try-mobile{display:flex;flex-direction:column;gap:2px;margin-top:6px;padding-top:8px;border-top:1px solid #EEEAFB}
  .try-mobile__label{font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#8B7BF7;padding:4px 14px}
  .nav__links .try-item{padding:10px 14px}
}

/* =====================================================================
   HEADER UNIFICADO (home y páginas de producto): barra sticky de 72px
   ===================================================================== */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(233,230,243,.9)}
.nav--page{position:relative;left:auto;top:auto;width:min(1195px,100% - 40px);height:72px;margin-inline:auto;display:flex;align-items:center;gap:24px}
.nav--page .nav__logo{display:block;line-height:0}
.nav--page .nav__links{position:static;margin-left:auto;height:auto;gap:34px;right:auto}
.nav--page .nav__links a{font-family:var(--font-btn);font-size:15px;color:var(--ink)}
.nav--page .nav__links a:hover,.nav--page .nav__links a[aria-current="page"],.nav--page .nav__links a.is-current{color:#5F44F6}
.nav--page .nav__cta,.nav--page .nav__cta.btn-neon{position:relative !important;left:auto;top:auto;width:auto;height:39px;padding:0 22px}
.nav--page .nav__try{position:relative;left:auto;top:auto;height:39px}
.nav--page .nav__try .nav__cta{padding:0 16px 0 20px}
/* el home ya no lleva el menú dentro del escenario escalado: el hero sube bajo el header */
@media (min-width:1024px){ .site-header--home + .hero{margin-top:-72px} }
@media (max-width:1023px){
  .nav--page{height:64px}
  .nav--page .nav__links{position:absolute !important}
  .nav--page .nav__toggle{margin-left:auto}
  .site-header--home + .hero .hero__content{margin-top:36px}
}

/* cursor: titila mientras espera y al terminar; fijo mientras escribe */
.type.is-typing .type__cursor{animation:none;opacity:1}
.type.is-waiting .type__cursor,.type.is-done .type__cursor{animation:type-blink 1s steps(1) infinite}
/* bajada de "¿Qué podemos mejorar?" con el tamaño de párrafo estándar */
.mejorar__lead{max-width:640px;font-size:17px;font-weight:500;line-height:27px;letter-spacing:0;color:#717171}
/* botones principales con el ancho del botón del hero */
.feature__btn,.como__btn{width:378px;max-width:100%;padding:0 24px}
@media (max-width:640px){ .feature__btn,.como__btn{width:100%} }

/* ===== Botones unificados: todos con la medida de "Quiero automatizar mi negocio" (378 × 60, Poppins 20) ===== */
.btn-grad:not(.nav__cta):not(.c-btn--nav):not(.form__btn):not(.c-float),
.c-btn-outline{width:378px;max-width:100%;height:60px;padding:0 24px;font-family:var(--font-btn);font-weight:600;font-size:20px}
.btn-grad.c-btn--block:not(.nav__cta):not(.c-btn--nav):not(.form__btn):not(.c-float){width:100%}
@media (max-width:640px){
  .btn-grad.feature__btn:not(.nav__cta):not(.c-btn--nav):not(.form__btn):not(.c-float){width:100%}
}

/* "Probar" con el mismo estilo de sistema que "Contactarnos" (blanco translúcido + borde neón) */
.nav__cta--try.btn-neon{background:none !important;color:#5F44F6 !important;font-weight:400}
.nav__cta--try.btn-neon::before{opacity:1}
.nav__cta--try svg{color:#5F44F6}

/* El botón del hero no se achica con el escalado del escenario: mismo tamaño que el resto */
.hero__btn{scale:calc(1 / var(--s,1))}

/* Botones de formulario con la misma altura y tipografía */
.btn-grad.form__btn{height:60px;font-family:var(--font-btn);font-weight:600;font-size:20px}

/* "¿Qué podemos mejorar?": bajada +2px, más aire con el hero y más cerca de las cards */
.mejorar{padding-top:110px}
.mejorar__lead{font-size:19px;line-height:30px}
.reveal{margin-top:72px}
@media (max-width:1023px){ .mejorar{padding-top:72px} .reveal{margin-top:40px} }

/* Botones: 2px más chicos de tipografía y un poco más compactos (todos iguales) */
.btn-grad:not(.nav__cta):not(.c-btn--nav):not(.form__btn):not(.c-float),
.c-btn-outline{width:340px;height:54px;font-size:18px}
.btn-grad.form__btn{height:54px;font-size:18px}

/* Tipografía de botones: 2px menos (16px) y en negrita, como "Probar" */
.btn-grad:not(.nav__cta):not(.c-btn--nav):not(.form__btn):not(.c-float),
.c-btn-outline,.btn-grad.form__btn{font-size:16px;font-weight:600}
/* botones del menú (Probar, Contactarnos, Solicitar demo) en negrita */
.nav__cta,.nav__cta.btn-neon,.nav__cta--try.btn-neon,.c-btn--nav{font-weight:600 !important}

/* Logo BeLead */
.brand-logo{display:block;height:30px;width:auto}
@media (max-width:640px){ .brand-logo{height:26px} }