/* heaptech landing v2 — Liquid Tech Partner
   Sistema: papel cálido + tinta profunda + acento petróleo ("liquid").
   Display: Space Grotesk · Texto: DM Sans. Composición editorial:
   servicio flagship + módulos (sin grids de tarjetas iguales). */
:root{
  --ink:#0e1418; --ink-2:#141d23; --ink-line:#24313a;
  --paper:#f6f5f1; --paper-2:#edebe4; --card:#fffdf9;
  --line:#e2ded3; --txt:#20262c; --txt-inv:#eef2f4;
  --muted:#5d666e; --muted-inv:#9db0b8;
  --acc:#0e9384; --acc-deep:#0b7c70; --acc-bright:#2dd4bf;
  --radius:16px; --maxw:1080px;
  --f-display:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --f-text:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--f-text);color:var(--txt);background:var(--paper);
  line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.narrow{max-width:800px}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.15;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(2.3rem,5.6vw,3.6rem);font-weight:700;margin:.45em 0 .35em;text-wrap:balance}
h2{font-size:clamp(1.7rem,3.8vw,2.4rem);font-weight:700;margin:.25em 0 .45em;text-wrap:balance}
h3{font-size:1.3rem;font-weight:700;margin:0 0 .4em}
h4{font-size:1.05rem;font-weight:700;margin:0 0 .3em}
p{margin:.35em 0}
a{color:var(--acc-deep)}
.eyebrow{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--acc-deep);font-weight:700;margin:0}
.lead{font-size:1.08rem;color:var(--muted);max-width:60ch}
.opt{color:var(--muted);font-weight:400;font-size:.85em}
.fine{font-size:.85rem;color:var(--muted)}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:var(--ink);border-bottom:1px solid var(--ink-line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-family:var(--f-display);font-weight:700;font-size:1.3rem;color:#fff;text-decoration:none;letter-spacing:-.02em}
.brand-dot{color:var(--acc-bright)}
.nav{display:flex;gap:26px;align-items:center}
.nav a{color:var(--muted-inv);text-decoration:none;font-size:.95rem;font-weight:500}
.nav a:hover{color:#fff}
.nav-cta{border:1px solid var(--acc);border-radius:999px;padding:.4em 1.1em;color:var(--acc-bright)!important}
@media(max-width:760px){.nav a:not(.nav-cta){display:none}}

/* hero */
.hero{background:
  radial-gradient(1100px 480px at 85% -20%,rgba(45,212,191,.13),transparent 60%),var(--ink);
  color:var(--txt-inv);padding:96px 0 72px;position:relative}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--acc) 35%,transparent 80%)}
.hero .eyebrow{color:var(--acc-bright)}
.hero h1{color:#f4f7f8;max-width:17ch}
.hero h1 em{font-style:normal;color:var(--acc-bright)}
.hero .sub{max-width:56ch;color:var(--muted-inv);font-size:1.12rem}
.hero .sub.strong{color:#fff;font-size:1.05rem}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.strip{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:44px 0 0;color:var(--muted-inv);
  font-size:.9rem;font-weight:500}
.strip li{padding:0 1.3em;border-left:1px solid var(--ink-line)}
.strip li:first-child{border-left:0;padding-left:0}
@media(max-width:640px){.strip li{border-left:0;padding:.1em 0;width:50%}}

/* secciones */
.sec{padding:84px 0}
.sec-dark{background:var(--ink);color:var(--txt-inv)}
.sec-dark .lead{color:var(--muted-inv)}
.sec-soft{background:var(--paper-2)}
.sec-dark .eyebrow{color:var(--acc-bright)}

/* servicios: flagship + módulos (jerarquía, no grid de iguales) */
.flagship{display:grid;grid-template-columns:1.25fr 1fr;margin:44px 0 0;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
@media(max-width:820px){.flagship{grid-template-columns:1fr}}
.flag-body{padding:38px 40px}
@media(max-width:820px){.flag-body{padding:30px 26px}}
.flag-kicker{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--acc-deep);font-weight:700;margin:0}
.flag-body h3{font-size:clamp(1.5rem,2.6vw,1.9rem);margin:.25em 0 .35em}
.flag-body p{color:var(--muted);font-size:1.02rem;max-width:52ch}
.flag-price{font-family:var(--f-display);font-weight:700;font-size:1.25rem;color:var(--txt);margin-top:1.1em}
.flag-aside{background:var(--ink);padding:38px 34px;display:flex;flex-direction:column;justify-content:center}
.flag-aside h4{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--acc-bright);margin-bottom:14px}
.flag-aside ul{list-style:none;margin:0;padding:0}
.flag-aside li{padding:.55em 0;border-bottom:1px solid var(--ink-line);color:var(--muted-inv);font-size:.95rem}
.flag-aside li:last-child{border-bottom:0}
.flag-aside li strong{color:var(--txt-inv);font-weight:600}
.flag-body .btn{margin-top:1.2em}

.modules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  border-top:0}
@media(max-width:700px){.modules{grid-template-columns:1fr}}
.modules li{padding:26px 30px;border-bottom:1px solid var(--line)}
.modules li:nth-child(odd){border-right:1px solid var(--line)}
@media(max-width:700px){.modules li{border-right:0}}
.modules{border-left:1px solid var(--line);border-right:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius)}
.modules h4{font-size:1.12rem}
.modules p{color:var(--muted);font-size:.96rem;max-width:52ch}
.modules .mod-tag{display:inline-block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acc-deep);font-weight:700;margin-bottom:.35em}

/* planes */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:40px 0 18px}
@media(max-width:820px){.plans{grid-template-columns:1fr}}
.plan{background:var(--ink-2);border:1px solid var(--ink-line);border-radius:var(--radius);padding:28px 26px;position:relative}
.plan-featured{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.plan-tag{position:absolute;top:-11px;left:24px;background:var(--acc);color:#04211d;font-size:.7rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.2em .85em;border-radius:999px}
.plan h3{color:#fff}
.plan-price{font-family:var(--f-display);font-size:1.7rem;font-weight:700;color:var(--acc-bright);margin:0 0 .5em}
.plan ul{margin:0;padding:0;list-style:none}
.plan li{color:var(--muted-inv);padding:.34em 0 .34em 1.4em;position:relative;font-size:.95rem}
.plan li::before{content:"—";position:absolute;left:0;color:var(--acc)}
.sec-dark .fine{color:var(--muted-inv)}

/* pasos */
.steps{list-style:none;padding:0;margin:40px 0 10px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.steps li{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 26px 22px}
.steps span{font-family:var(--f-display);display:block;font-size:.8rem;letter-spacing:.14em;color:var(--acc-deep);font-weight:700;margin-bottom:10px}
.steps p{color:var(--muted);font-size:.95rem}

/* editorial "por qué" */
.sec-soft .narrow p.lead{font-size:1.12rem}
.sec-soft .narrow p.lead strong{color:var(--txt)}

/* ejemplos */
.samples{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:36px}
@media(max-width:760px){.samples{grid-template-columns:1fr}}
.sample{display:flex;flex-direction:column;gap:.25em;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px 26px;text-decoration:none;color:var(--txt);transition:border-color .15s}
.sample:hover{border-color:var(--acc)}
.s-sector{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--acc-deep);font-weight:700}
.s-name{font-family:var(--f-display);font-size:1.3rem;font-weight:700}
.s-desc{color:var(--muted);font-size:.95rem;max-width:46ch}
.s-cta{margin-top:.6em;color:var(--acc-deep);font-weight:700;font-size:.92rem}
.sample .s-cta::after{content:" →"}

/* sistema (dentro de por-qué) */
.sys{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.sys{grid-template-columns:1fr}}
.sys li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px}
.sys h4{font-size:1rem}
.sys p{color:var(--muted);font-size:.92rem}

/* faq */
details{border:1px solid var(--line);border-radius:12px;background:var(--card);margin:10px 0;padding:0 22px}
details[open]{border-color:var(--acc)}
summary{cursor:pointer;font-weight:600;font-family:var(--f-display);padding:1.05em 0;list-style:none;position:relative;font-size:1.02rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0;color:var(--acc-deep);font-weight:700}
details[open] summary::after{content:"–"}
details p{color:var(--muted);margin:.15em 0 1.1em;max-width:60ch}

/* form */
form{margin-top:28px;display:flex;flex-direction:column;gap:16px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:620px){.f-row{grid-template-columns:1fr}}
.f-field{display:flex;flex-direction:column;gap:.4em}
label{font-size:.88rem;color:var(--muted-inv);font-weight:600}
input[type=text],input[type=tel],textarea{background:var(--ink-2);border:1px solid var(--ink-line);border-radius:10px;
  padding:.85em 1em;color:#fff;font:inherit;width:100%}
input:focus,textarea:focus{outline:2px solid var(--acc-bright);outline-offset:0;border-color:var(--acc-bright)}
.hp{position:absolute;left:-9999px;height:0;width:0;opacity:0}
.f-check{flex-direction:row;align-items:flex-start;gap:.7em}
.f-check label{font-weight:400;color:var(--muted-inv);font-size:.88rem}
.f-check input{width:18px;height:18px;margin-top:2px;accent-color:var(--acc)}
.f-msg{min-height:1.2em;font-size:.95rem}
.f-msg.ok{color:var(--acc-bright)}.f-msg.err{color:#ff9c9c}

/* botones */
.btn{display:inline-block;border-radius:999px;padding:.9em 1.8em;font-weight:700;text-decoration:none;
  font-size:1rem;border:0;cursor:pointer;font-family:var(--f-text)}
.btn-primary{background:var(--acc);color:#fff}
.btn-primary:hover{background:var(--acc-deep)}
.btn-ghost{border:1px solid var(--ink-line);color:var(--txt-inv);background:transparent}
.btn-ghost:hover{border-color:var(--acc-bright);color:var(--acc-bright)}
.btn-big{font-size:1.05rem;padding:.95em 2.2em;align-self:flex-start}

/* footer */
.ftr{background:var(--ink);color:var(--muted-inv);padding:44px 0;font-size:.9rem;border-top:1px solid var(--ink-line)}
.ftr .brand{font-size:1.15rem}
.ftr a{color:var(--muted-inv)}
.ftr-links a{margin-right:.5em}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}