/* ===== Mobydick · sistema de diseño /agencia (compartido) ===== */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url('/fonts/space-grotesk.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/instrument-serif.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/instrument-serif-italic.woff2') format('woff2')}

:root{
  --void:#06070D; --ink:#0C0E1A; --slate:#161A2E;
  --electric:#4D5BFF; --cyan:#23E0D8; --violet:#9A6BFF;
  --chrome:#C7CEDE; --white:#F2F4FF; --dim:#9AA1BC; --dim2:#8B92AD;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Space Grotesk',sans-serif; background:var(--void); color:var(--white); overflow-x:hidden; line-height:1.55}
::selection{background:var(--electric);color:#fff}
a{color:inherit}

/* ---------- NAV (logo izq · "Sesión gratuita" + menú hamburguesa a su derecha, estilo medicalmarketing) ---------- */
nav{position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center;
  padding:18px clamp(20px,5vw,64px); transition:background .4s, backdrop-filter .4s, padding .4s; gap:14px}
nav.scrolled{background:rgba(6,7,13,.82); backdrop-filter:blur(14px); padding:12px clamp(20px,5vw,64px); border-bottom:1px solid rgba(199,206,222,.1)}
.logo{order:1; margin-right:auto; font-weight:700; font-size:23px; letter-spacing:-.03em; color:var(--white); text-decoration:none; flex:none}
.logo .dot{color:var(--electric)}
.nav-cta{order:2; font-size:13px; font-weight:500; letter-spacing:.02em; color:var(--white); text-decoration:none;
  border:1px solid rgba(199,206,222,.3); padding:9px 18px; border-radius:30px; transition:all .3s; white-space:nowrap; flex:none}
.nav-cta:hover{background:var(--white); color:var(--void); border-color:var(--white)}
.nav-toggle{order:3; display:block; background:none; border:0; cursor:pointer; width:30px; height:24px; position:relative; flex:none}
.nav-toggle span{position:absolute; left:0; width:100%; height:2px; background:var(--white); transition:.3s}
.nav-toggle span:nth-child(1){top:2px}.nav-toggle span:nth-child(2){top:11px}.nav-toggle span:nth-child(3){top:20px}
.nav-toggle.open span:nth-child(1){top:11px; transform:rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){top:11px; transform:rotate(-45deg)}
/* menú desplegable (todas las resoluciones), alineado a la derecha bajo el botón de menú */
.nav-links{position:fixed; inset:0 0 auto 0; top:0; display:flex; flex-direction:column; gap:0; align-items:flex-end;
  background:rgba(6,7,13,.97); backdrop-filter:blur(18px); padding:84px clamp(20px,5vw,64px) 28px; transform:translateY(-100%);
  transition:transform .4s cubic-bezier(.2,.7,.2,1); border-bottom:1px solid rgba(199,206,222,.12)}
.nav-links.open{transform:translateY(0)}
.nav-links a{font-size:clamp(16px,2.2vw,19px); padding:12px 0; color:var(--chrome); text-decoration:none; transition:color .25s; text-align:right}
.nav-links a:hover{color:var(--white)}
.nav-links .nav-cta-m{display:none}
@media(max-width:680px){
  .nav-cta{display:none}
  .nav-links{align-items:stretch}
  .nav-links a{text-align:left; border-bottom:1px solid rgba(199,206,222,.08); color:var(--white)}
  .nav-links .nav-cta-m{display:inline-block; margin-top:16px; border:1px solid rgba(199,206,222,.3); border-radius:30px; padding:12px 22px; text-align:center; align-self:flex-start}
}

/* ---------- HERO (interior) ---------- */
.phero{position:relative; padding:150px clamp(20px,5vw,64px) clamp(60px,9vw,110px); overflow:hidden}
/* halos originales en capa aparte, fundidos hacia el borde inferior (sin costura) */
.phero::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(90% 70% at 80% -10%, rgba(77,91,255,.16), transparent 55%),
    radial-gradient(70% 60% at 0% 110%, rgba(35,224,216,.08), transparent 55%);
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);
          mask-image:linear-gradient(180deg,#000 72%,transparent)}
.phero>.wrap{position:relative; z-index:1}
.phero .wrap{max-width:900px}
.phero h1{font-family:'Instrument Serif',serif; font-weight:400; font-size:clamp(40px,7vw,86px); line-height:1.06; letter-spacing:-.015em; margin-bottom:20px}
.phero h1 em{font-style:italic; background:linear-gradient(100deg,var(--cyan),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent}
.phero p{font-size:clamp(16px,2vw,21px); color:var(--chrome); font-weight:300; max-width:620px; margin-bottom:30px}
.phero p strong{color:var(--white); font-weight:500}

/* ---------- BOTÓN ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; font-family:'Space Grotesk'; font-weight:600; font-size:16px;
  text-decoration:none; cursor:pointer; border:none; padding:16px 30px; border-radius:40px; transition:transform .25s, box-shadow .25s;
  background:linear-gradient(100deg,var(--electric),var(--violet)); color:var(--white); box-shadow:0 8px 30px rgba(77,91,255,.35)}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 40px rgba(77,91,255,.5)}
.btn .arrow{transition:transform .25s}
.btn:hover .arrow{transform:translateX(4px)}
.cta-note{display:block; margin-top:12px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}

/* ---------- SECCIONES ---------- */
section{padding:clamp(64px,10vw,140px) clamp(20px,5vw,64px); position:relative}
.wrap{max-width:980px; margin:0 auto}
.narrow{max-width:760px; margin:0 auto}
.eyebrow{display:flex; align-items:center; gap:12px; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--cyan); font-weight:600; margin-bottom:22px}
.eyebrow .num{font-family:'Instrument Serif'; font-style:italic; font-size:17px; color:var(--cyan)}
h2{font-family:'Instrument Serif',serif; font-weight:400; font-size:clamp(30px,5.5vw,58px); line-height:1.04; letter-spacing:-.01em; margin-bottom:14px}
h2 em{font-style:italic; background:linear-gradient(100deg,var(--cyan),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent}
.tagline{font-family:'Instrument Serif'; font-style:italic; font-size:clamp(16px,2vw,21px); color:var(--dim); margin-bottom:24px}
p.body{font-size:clamp(15px,1.6vw,18px); color:var(--chrome); font-weight:300; margin-bottom:14px; max-width:640px}
p.body strong{color:var(--white); font-weight:600}
.accent{color:var(--cyan)}
.punch{font-family:'Instrument Serif'; font-style:italic; font-size:clamp(18px,2.4vw,26px); color:var(--white); margin-top:18px}
.punch .grad{background:linear-gradient(100deg,var(--cyan),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent}

/* métricas */
.metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:30px 0}
@media(max-width:680px){.metrics{grid-template-columns:1fr}}
.metric{border:1px solid rgba(199,206,222,.14); border-radius:18px; padding:26px; background:linear-gradient(160deg, rgba(22,26,46,.6), rgba(12,14,26,.3))}
.metric .n{font-weight:700; font-size:clamp(28px,4vw,42px); line-height:1; background:linear-gradient(100deg,var(--cyan),var(--electric)); -webkit-background-clip:text; background-clip:text; color:transparent}
.metric .l{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-top:8px}

/* features */
.features{margin:24px 0; display:grid; gap:22px}
.feature{border-left:2px solid; border-image:linear-gradient(var(--cyan),var(--electric)) 1; padding-left:20px}
.feature h3{font-weight:600; font-size:clamp(17px,2vw,20px); color:var(--white); margin-bottom:5px}
.feature p{font-size:clamp(14px,1.5vw,16.5px); color:var(--chrome); font-weight:300; max-width:600px}

/* grid servicios */
.svc-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:28px 0}
@media(max-width:680px){.svc-grid{grid-template-columns:1fr}}
.svc{border:1px solid rgba(199,206,222,.12); border-radius:18px; padding:26px; background:rgba(22,26,46,.35); transition:border-color .3s, transform .3s; text-decoration:none; display:block}
.svc:hover{border-color:rgba(35,224,216,.5); transform:translateY(-3px)}
.svc h3{font-weight:600; font-size:18px; margin-bottom:7px; color:var(--white)}
.svc p{font-size:15px; color:var(--chrome); font-weight:300}

/* checklist */
.check{list-style:none; margin:22px 0}
.check li{font-size:clamp(15px,1.6vw,17px); color:var(--chrome); font-weight:300; padding-left:34px; position:relative; margin-bottom:13px}
.check li:before{content:""; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:6px; background:linear-gradient(120deg,var(--cyan),var(--electric))}
.check li:after{content:"\2713"; position:absolute; left:4px; top:2px; font-size:12px; color:var(--void); font-weight:700}

/* quotes / testimonios */
.quotes{display:grid; gap:16px; margin-top:10px}
.quote{font-family:'Instrument Serif'; font-style:italic; font-size:clamp(18px,2.4vw,26px); color:var(--white); padding:18px 24px; border-left:2px solid var(--cyan); background:linear-gradient(100deg, rgba(35,224,216,.06), transparent)}
.quote .who{display:block; font-family:'Space Grotesk'; font-style:normal; font-size:13px; font-weight:500; color:var(--dim); margin-top:10px; letter-spacing:.02em}
.tgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:14px}
@media(max-width:680px){.tgrid{grid-template-columns:1fr}}
.tcard{border:1px solid rgba(199,206,222,.12); border-radius:18px; padding:24px; background:rgba(22,26,46,.35)}
.tcard p{font-family:'Instrument Serif'; font-style:italic; font-size:clamp(17px,2vw,21px); color:var(--white); margin-bottom:12px}
.tcard .who{font-size:13px; font-weight:500; color:var(--dim)}

/* CTA band */
.cta-band{text-align:center; position:relative}
.cta-band::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(80% 100% at 50% 0%, rgba(77,91,255,.18), transparent 60%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent)}
.cta-band>.wrap{position:relative; z-index:1}
.cta-band h2{margin-bottom:24px}
/* el parrafo (max-width 640) va centrado dentro de la franja, no pegado a la izq */
.cta-band .body{margin-left:auto; margin-right:auto}

/* FAQ */
.faq-item{border-bottom:1px solid rgba(199,206,222,.12); padding:22px 0; cursor:pointer}
.faq-q{display:flex; justify-content:space-between; align-items:center; gap:16px; font-weight:600; font-size:clamp(16px,1.8vw,19px); color:var(--white)}
.faq-q .plus{color:var(--cyan); font-size:22px; transition:transform .3s; flex:none}
.faq-item.open .plus{transform:rotate(45deg)}
.faq-a{max-height:0; overflow:hidden; transition:max-height .45s ease, padding .45s}
.faq-item.open .faq-a{max-height:520px; padding-top:12px}
.faq-a p{font-size:clamp(14px,1.5vw,16px); color:var(--chrome); font-weight:300; max-width:720px; margin-bottom:10px}

/* casos */
.cases{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:28px 0}
@media(max-width:760px){.cases{grid-template-columns:1fr}}
.case{border:1px solid rgba(199,206,222,.14); border-radius:18px; padding:24px; background:linear-gradient(160deg, rgba(22,26,46,.6), rgba(12,14,26,.3))}
.case .sector{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); font-weight:600; margin-bottom:12px}
.case .big{font-family:'Instrument Serif'; font-style:italic; font-size:clamp(24px,3.2vw,34px); color:var(--white); line-height:1.1; margin-bottom:8px}
.case .big .grad{background:linear-gradient(100deg,var(--cyan),var(--electric)); -webkit-background-clip:text; background-clip:text; color:transparent}
.case p{font-size:14.5px; color:var(--chrome); font-weight:300}

/* proceso */
.steps{display:grid; gap:18px; margin:28px 0; counter-reset:step}
.step{position:relative; padding-left:64px; min-height:44px}
.step:before{counter-increment:step; content:counter(step,decimal-leading-zero); position:absolute; left:0; top:-4px; font-family:'Instrument Serif'; font-style:italic; font-size:32px; background:linear-gradient(100deg,var(--cyan),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent}
.step h3{font-weight:600; font-size:clamp(16px,1.9vw,19px); color:var(--white); margin-bottom:4px}
.step p{font-size:clamp(14px,1.5vw,16px); color:var(--chrome); font-weight:300; max-width:620px}

/* comparativa */
.vs{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:28px 0}
@media(max-width:680px){.vs{grid-template-columns:1fr}}
.vs-col{border:1px solid rgba(199,206,222,.12); border-radius:18px; padding:24px}
.vs-col.old{background:rgba(22,26,46,.25)}
.vs-col.us{background:linear-gradient(160deg, rgba(77,91,255,.12), rgba(35,224,216,.06)); border-color:rgba(35,224,216,.35)}
.vs-col h3{font-weight:600; font-size:16px; margin-bottom:16px; letter-spacing:.02em}
.vs-col.old h3{color:var(--dim)}.vs-col.us h3{color:var(--white)}
.vs-col ul{list-style:none; display:grid; gap:11px}
.vs-col li{font-size:14.5px; font-weight:300; padding-left:24px; position:relative; line-height:1.45}
.vs-col.old li{color:var(--dim)}.vs-col.old li:before{content:"\2014"; position:absolute; left:0; color:var(--dim2)}
.vs-col.us li{color:var(--chrome)}.vs-col.us li:before{content:"\203A"; position:absolute; left:2px; color:var(--cyan); font-weight:700}

/* chips sectores */
.chips{display:flex; flex-wrap:wrap; gap:10px; margin:24px 0}
.chip{border:1px solid rgba(199,206,222,.18); border-radius:30px; padding:9px 18px; font-size:14px; color:var(--chrome); font-weight:300; background:rgba(22,26,46,.3); transition:border-color .3s, color .3s}
.chip:hover{border-color:rgba(35,224,216,.5); color:var(--white)}

/* nota de imagen (placeholder de asset real) */
.imgnote{font-size:13px; color:var(--dim2); font-style:italic; border:1px dashed rgba(199,206,222,.22); border-radius:12px; padding:14px 18px; margin:18px 0; background:rgba(22,26,46,.3)}

/* footer */
footer{padding:60px clamp(20px,5vw,64px) 40px; border-top:1px solid rgba(199,206,222,.12)}
.foot-grid{max-width:980px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px}
@media(max-width:680px){.foot-grid{grid-template-columns:1fr; gap:24px}}
footer .logo{font-size:28px; display:inline-block; margin-bottom:12px}
footer .ftag{font-family:'Instrument Serif'; font-style:italic; font-size:clamp(15px,2vw,19px); color:var(--dim); max-width:320px}
footer h4{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim2); margin-bottom:14px}
footer .fcol a{display:block; color:var(--chrome); text-decoration:none; font-size:14px; font-weight:300; margin-bottom:10px; transition:color .25s}
footer .fcol a:hover{color:var(--cyan)}
footer .meta{max-width:980px; margin:34px auto 0; padding-top:22px; border-top:1px solid rgba(199,206,222,.1); font-size:12.5px; color:var(--dim2); letter-spacing:.03em}

/* scroll reveal */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none} html{scroll-behavior:auto}}

/* notas internas de insertar imagen: ocultas al publico hasta tener assets reales */
.imgnote{display:none}

/* ---------- FOOTER potente (marca gigante + CTA + meta) ---------- */
footer{position:relative; overflow:hidden}
footer::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 90% at 50% 115%, rgba(77,91,255,.13), transparent 60%)}
.foot-grid{position:relative; z-index:1}
.fcta{display:inline-block; font-size:14px; font-weight:600; color:var(--white); text-decoration:none;
  border:1px solid rgba(35,224,216,.4); padding:11px 22px; border-radius:30px; margin-top:16px; transition:all .3s}
.fcta:hover{background:rgba(35,224,216,.1); border-color:var(--cyan); transform:translateY(-2px); color:var(--white)}
footer .fcol a.fcta{display:inline-block; color:var(--white)}
.fword{position:relative; z-index:1; font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-.05em;
  font-size:clamp(64px,16.5vw,225px); line-height:.85; text-align:center; user-select:none; pointer-events:none;
  margin:clamp(44px,7vw,84px) auto -0.12em; white-space:nowrap;
  background:linear-gradient(100deg, rgba(35,224,216,.3), rgba(77,91,255,.3) 55%, rgba(154,107,255,.3));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.fmeta{position:relative; z-index:1; max-width:980px; margin:30px auto 0; padding-top:22px;
  border-top:1px solid rgba(199,206,222,.1); display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:10px; font-size:12.5px; color:var(--dim2); letter-spacing:.03em}
.fmeta{padding-right:230px} /* hueco para el botón flotante del chat */
@media(max-width:860px){.fmeta{padding-right:0; padding-bottom:56px}}