:root{
  --midnight:#0B1B2B; --indigo:#13294B; --teal:#1AC8A0; --teal-deep:#0E6B5E;
  --gold:#F2B441; --ice:#EAF2F8; --slate:#5B6B7B;
  --bg:#F4F8FB; --bg-alt:#FFFFFF; --line:#DCE6EE; --ink:#0B1B2B; --muted:#5B6B7B;
  --head:'Space Grotesk',sans-serif; --body:'Inter',sans-serif;
  --maxw:1120px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;width:100%}
.wrap.narrow{max-width:720px}

/* Nav */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;max-width:var(--maxw);margin:0 auto;width:100%;backdrop-filter:blur(8px)}
.nav::before{content:"";position:fixed;top:0;left:0;right:0;height:72px;background:rgba(244,248,251,.85);z-index:-1;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px}
.mark{width:36px;height:36px;flex-shrink:0}
.brand-lock{display:flex;flex-direction:column;line-height:1.05}
.brand-name{font-family:var(--head);font-weight:700;font-size:18px;letter-spacing:.3px;color:var(--ink)}
.brand-accent{color:var(--teal-deep)}
.brand-sub{font-size:9px;letter-spacing:3px;color:var(--muted);margin-top:3px}
.nav-links{display:flex;align-items:center;gap:24px;font-size:15px}
.nav-links a{color:var(--muted);transition:color .15s}
.nav-links a:hover{color:var(--ink)}

/* Buttons */
.btn{display:inline-block;background:var(--teal-deep);color:#fff;font-family:var(--head);font-weight:600;
  font-size:16px;padding:13px 26px;border-radius:10px;border:none;cursor:pointer;transition:transform .12s,box-shadow .15s;
  box-shadow:0 8px 22px rgba(14,107,94,.2)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(14,107,94,.28)}
.btn-sm{padding:9px 18px;font-size:14px}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:none;border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--teal-deep);box-shadow:none}
.btn-wide{width:100%;padding:15px;font-size:17px;margin-top:8px}
.btn-plan{margin-top:auto;background:transparent;border:1px solid var(--teal-deep);color:var(--teal-deep);box-shadow:none}
.btn-plan:hover{background:var(--teal-deep);color:#fff;box-shadow:0 8px 20px rgba(14,107,94,.24)}
.btn-plan.primary{background:var(--teal-deep);color:#fff}

/* Headings */
h1{font-family:var(--head);font-weight:700;font-size:clamp(32px,5vw,54px);line-height:1.06;letter-spacing:-1px}
h2{font-family:var(--head);font-weight:600;font-size:clamp(25px,3.4vw,38px);line-height:1.15;letter-spacing:-.5px}
h3{font-family:var(--head);font-weight:600;font-size:19px;margin-bottom:8px;color:var(--ink)}
.kicker{font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--teal-deep);margin-bottom:14px}
.teal{color:var(--teal-deep)}
.lead{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:62ch;margin-top:20px;line-height:1.55}
.sub{font-size:18px;color:var(--muted);max-width:64ch;margin-top:12px}

/* Hero */
.hero{padding:104px 0 84px;background:
  radial-gradient(900px 420px at 82% -10%,rgba(26,200,160,.16),transparent 60%),
  radial-gradient(700px 360px at 8% 12%,rgba(242,180,65,.12),transparent 55%),
  var(--bg)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.launch-pill{display:inline-block;font-family:var(--body);font-weight:600;font-size:12.5px;letter-spacing:.5px;
  color:#8a5a00;background:rgba(242,180,65,.18);border:1px solid rgba(242,180,65,.5);
  border-radius:20px;padding:6px 16px;margin-bottom:20px}

/* Bands */
.band{padding:72px 0;border-top:1px solid var(--line)}
.band.alt{background:var(--bg-alt)}

/* Value row */
.value-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.value h3{color:var(--ink)}
.value p{color:var(--muted);font-size:15.5px}

/* Plans */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.plan{position:relative;display:flex;flex-direction:column;gap:10px;background:#fff;
  border:1px solid var(--line);border-radius:16px;padding:26px 22px;box-shadow:0 6px 20px rgba(11,27,43,.05);
  transition:transform .2s ease,box-shadow .2s ease}
.plan:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(11,27,43,.1)}
.plan.featured{border:2px solid var(--teal);box-shadow:0 18px 44px rgba(11,27,43,.12)}
.badge{position:absolute;top:-12px;left:22px;background:var(--gold);color:#5a3c00;font-family:var(--head);
  font-weight:700;font-size:11.5px;letter-spacing:.3px;padding:4px 12px;border-radius:20px}
.plan-pricing{margin:2px 0 4px}
.price-top{display:flex;align-items:center;gap:10px;min-height:24px;margin-bottom:2px}
.price-top s{color:var(--muted);font-size:14.5px}
.price-off{font-family:var(--head);font-weight:700;font-size:11.5px;letter-spacing:.5px;color:#8a5a00;
  background:rgba(242,180,65,.18);border:1px solid rgba(242,180,65,.5);border-radius:14px;padding:2px 10px;white-space:nowrap}
.price-now{font-family:var(--head);font-weight:700;font-size:28px;color:var(--ink);line-height:1.1}
.price-now small{font-size:14px;font-weight:500;color:var(--muted)}
.plan-desc{color:var(--muted);font-size:14.5px;min-height:44px}
.ticks{list-style:none;display:flex;flex-direction:column;gap:8px;margin:4px 0 10px}
.ticks li{position:relative;padding-left:22px;font-size:14.5px;color:#3d4c59}
.ticks li::before{content:"✓";position:absolute;left:0;color:var(--teal-deep);font-weight:700}
.plan-note{margin-top:24px;font-size:15px;color:var(--muted);max-width:70ch}

/* Care panel — soporte incluido + care plan opcional */
.care-panel{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;
  background:linear-gradient(135deg,rgba(26,200,160,.06),rgba(244,248,251,.5));
  border:1px solid var(--line);border-radius:16px;overflow:hidden}
.care-col{padding:26px 30px}
.care-col+.care-col{border-left:1px solid var(--line)}
.care-plan{background:rgba(242,180,65,.05)}
.care-copy{color:var(--muted);font-size:14.5px;line-height:1.55;margin:10px 0 14px}
.care-price{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:8px;margin-top:8px}
.care-price-num{font-family:var(--head);font-weight:700;font-size:19px;color:var(--ink)}
.care-price-unit{font-size:13px;color:var(--muted)}
.care-price-note{font-size:12.5px;color:var(--muted);margin-left:auto}

/* Guarantee */
.guarantee{background:linear-gradient(135deg,rgba(26,200,160,.1),rgba(244,248,251,.6));
  border:1.5px solid var(--teal);border-radius:16px;padding:30px 32px;box-shadow:0 12px 34px rgba(11,27,43,.08)}
.guarantee-label{display:inline-block;font-family:var(--body);font-weight:600;font-size:12px;
  letter-spacing:2px;text-transform:uppercase;color:#8a5a00;margin-bottom:12px}
.guarantee-h{font-family:var(--head);font-weight:600;font-size:clamp(20px,2.6vw,26px);line-height:1.25;color:var(--ink)}
.guarantee-s{margin-top:12px;font-size:16px;color:var(--muted);max-width:66ch;line-height:1.5}

/* Form */
form{margin-top:28px;display:flex;flex-direction:column;gap:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:flex;flex-direction:column;gap:7px;font-size:14px;color:var(--muted);font-weight:500}
input,select,textarea{font-family:var(--body);font-size:15.5px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;transition:border-color .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal-deep)}
textarea{resize:vertical}
.form-note{font-size:14px;padding:12px 16px;border-radius:10px;margin-top:4px}
.form-note.warn{background:rgba(242,180,65,.14);border:1px solid rgba(242,180,65,.5);color:#7a4f00}
.form-note.ok{background:rgba(26,200,160,.14);border:1px solid rgba(26,200,160,.5);color:#0d5c48}

/* Footer */
.footer{padding:44px 0 30px;border-top:1px solid var(--line);background:var(--bg)}
.foot-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot-geo{color:var(--muted);font-size:13.5px}
.foot-links{display:flex;gap:22px;font-size:15px;color:var(--muted)}
.foot-links a:hover{color:var(--teal-deep)}
.foot-copy{text-align:center;color:var(--muted);font-size:13px;margin-top:24px}

/* Scroll reveal (solo si hay JS: html.js lo activa main.js) */
.js .reveal{opacity:0}
.js .reveal.in{animation:rise .55s ease both}
.js .plans .reveal.in:nth-child(2),.js .value-row .reveal.in:nth-child(2){animation-delay:.08s}
.js .plans .reveal.in:nth-child(3),.js .value-row .reveal.in:nth-child(3){animation-delay:.16s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1}.js .reveal.in{animation:none}}

/* Responsive */
@media (max-width:920px){
  .value-row{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr 1fr}
  .nav-links a:not(.btn){display:none}
}
@media (max-width:620px){
  .plans,.grid-2{grid-template-columns:1fr}
  .care-panel{grid-template-columns:1fr}
  .care-col+.care-col{border-left:none;border-top:1px solid var(--line)}
  .care-price-note{margin-left:0;flex-basis:100%}
  .hero{padding:80px 0 60px}
  .band{padding:56px 0}
}
@media (max-width:400px){
  .brand-sub{display:none}
}