:root{
    --bg:#FBFCFC; --surface:#FFFFFF; --panel:#F2F6F7;
    --ink:#15222A; --strong:#0A141B; --muted:#57696F; --faint:#8A9AA0;
    --line:#E1E8EA; --line-2:#EDF2F3;
    --accent:#0E7A83; --accent-ink:#0A5A61; --accent-soft:#E4F1F2;
    --sun:#B07C1F; --sun-soft:#F6EEDC;
    --shadow:0 1px 2px rgba(10,20,27,.04), 0 10px 30px -18px rgba(10,20,27,.18);
    --maxw:1060px;
  }
  @media (prefers-color-scheme:dark){
    :root{
      --bg:#0C1418; --surface:#111C22; --panel:#15232A;
      --ink:#E4EDF0; --strong:#F5F9FA; --muted:#93A6AC; --faint:#68797F;
      --line:#213139; --line-2:#182830;
      --accent:#3BC0CB; --accent-ink:#83DAE1; --accent-soft:#11333A;
      --sun:#D8A94E; --sun-soft:#2C2312; --btn-ink:#062226;
      --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 34px -18px rgba(0,0,0,.65);
    }
  }
  :root[data-theme="light"]{
    --bg:#FBFCFC; --surface:#FFFFFF; --panel:#F2F6F7;
    --ink:#15222A; --strong:#0A141B; --muted:#57696F; --faint:#8A9AA0;
    --line:#E1E8EA; --line-2:#EDF2F3;
    --accent:#0E7A83; --accent-ink:#0A5A61; --accent-soft:#E4F1F2;
    --sun:#B07C1F; --sun-soft:#F6EEDC; --btn-ink:#fff;
    --shadow:0 1px 2px rgba(10,20,27,.04), 0 10px 30px -18px rgba(10,20,27,.18);
  }
  :root[data-theme="dark"]{
    --bg:#0C1418; --surface:#111C22; --panel:#15232A;
    --ink:#E4EDF0; --strong:#F5F9FA; --muted:#93A6AC; --faint:#68797F;
    --line:#213139; --line-2:#182830;
    --accent:#3BC0CB; --accent-ink:#83DAE1; --accent-soft:#11333A;
    --sun:#D8A94E; --sun-soft:#2C2312;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 34px -18px rgba(0,0,0,.65);
  }

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
  body{margin:0; background:var(--bg); color:var(--ink);
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;}
  h1,h2,h3{color:var(--strong); text-wrap:balance; line-height:1.14; letter-spacing:-.015em; font-weight:700;}
  a{color:var(--accent-ink); text-underline-offset:3px;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
  .sec-label{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink); font-weight:600;}
  .mono{font-family:ui-monospace,Menlo,monospace;}

  .btn{display:inline-block; background:var(--accent); color:var(--btn-ink,#fff); border-radius:9px; padding:12px 22px; font-size:15px; font-weight:600; text-decoration:none; letter-spacing:.01em;}
  .btn.small{padding:8px 16px; font-size:13.5px;}
  .btn.ghost{background:transparent; color:var(--accent-ink); border:1px solid var(--line); font-weight:600;}
  .link-arrow{color:var(--accent-ink); font-weight:600; font-size:15px; text-decoration:none;}
  .link-arrow:hover{text-decoration:underline;}

  /* nav */
  .topbar{position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
  .topbar .row{display:flex; align-items:center; justify-content:space-between; height:62px; gap:18px;}
  .logo{display:flex; align-items:center; gap:9px; font-weight:700; font-size:17px; color:var(--strong); text-decoration:none; letter-spacing:-.01em;}
  .logo .mark{width:26px; height:26px; border-radius:7px; background:linear-gradient(150deg,var(--accent),var(--accent-ink)); display:grid; place-items:center; color:#fff; font-size:14px; font-weight:700;}
  .navlinks{display:flex; gap:26px; font-size:14.5px;}
  .navlinks a{color:var(--muted); text-decoration:none; font-weight:500;}
  .navlinks a:hover{color:var(--strong);}
  @media (max-width:760px){ .navlinks{display:none;} }

  /* hero */
  .hero{padding:88px 0 56px; border-bottom:1px solid var(--line);}
  .hero h1{font-size:clamp(34px,5.6vw,58px); margin:0 0 20px; max-width:17ch;}
  .hero h1 .l2{color:var(--accent-ink);}
  .hero .sub{font-size:clamp(17px,2.1vw,20px); color:var(--muted); max-width:58ch; margin:0 0 14px;}
  .hero .sub b{color:var(--ink); font-weight:600;}
  .philosophy{font-size:15px; color:var(--faint); margin:0 0 30px;}
  .philosophy b{color:var(--accent-ink); font-weight:600;}
  .hero .ctas{display:flex; gap:18px; align-items:center; flex-wrap:wrap;}

  .stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin:46px 0 0; max-width:720px;}
  .stat{background:var(--surface); padding:20px 22px;}
  .stat .n{font-size:clamp(26px,3.2vw,34px); color:var(--strong); font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.05;}
  .stat .n em{font-style:normal; color:var(--accent); font-size:.55em; font-weight:600;}
  .stat .l{font-size:13px; color:var(--muted); margin-top:6px;}

  .clients{margin-top:30px; font-size:13px; color:var(--faint);}
  .clients b{color:var(--muted); font-weight:600;}

  /* sections */
  section{padding:72px 0; border-bottom:1px solid var(--line-2);}
  .shead{margin-bottom:34px;}
  .shead .sec-label{display:block; margin-bottom:10px;}
  .shead h2{font-size:clamp(25px,3.4vw,36px); margin:0; max-width:24ch;}
  .shead p{color:var(--muted); max-width:62ch; margin:12px 0 0; font-size:16.5px;}

  /* SEC.01 services */
  .svc{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  .svc .card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:24px 22px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px;}
  .svc .ic{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-size:17px; background:var(--accent-soft); color:var(--accent-ink); margin-bottom:4px;}
  .svc .card.sun .ic{background:var(--sun-soft); color:var(--sun);}
  .svc h3{font-size:18.5px; margin:0;}
  .svc p{font-size:14.5px; color:var(--muted); margin:0;}
  .svc ul{margin:4px 0 0; padding:0; list-style:none;}
  .svc li{font-size:13.5px; color:var(--ink); padding:5px 0 5px 20px; position:relative; border-top:1px solid var(--line-2);}
  .svc li:before{content:"·"; position:absolute; left:6px; color:var(--accent); font-weight:700;}
  .cred{margin-top:22px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 20px; font-size:14.5px; color:var(--muted); max-width:none;}
  .cred b{color:var(--strong);}

  /* SEC.02 cases */
  .case{background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:26px 26px 24px; margin-bottom:18px;}
  .case .chead{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:8px;}
  .case .cid{font-family:ui-monospace,Menlo,monospace; font-size:12px; letter-spacing:.12em; color:var(--accent-ink); font-weight:600;}
  .case .tags{display:flex; gap:6px; flex-wrap:wrap;}
  .case .tag{font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:6px; background:var(--accent-soft); color:var(--accent-ink); font-family:ui-monospace,Menlo,monospace;}
  .case .tag.sun{background:var(--sun-soft); color:var(--sun);}
  .case h3{font-size:21px; margin:2px 0 12px;}
  .case .grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 26px;}
  .case .k{font-family:ui-monospace,Menlo,monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:5px; font-weight:600;}
  .case p{font-size:14.5px; color:var(--muted); margin:0; max-width:none;}
  .case .result{margin-top:16px; border-top:1px solid var(--line-2); padding-top:14px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;}
  .case .result .metric{font-size:20px; font-weight:700; color:var(--accent-ink); letter-spacing:-.01em; white-space:nowrap;}
  .case .result .desc{font-size:13.5px; color:var(--muted);}

  /* SEC.03 process */
  .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; counter-reset:st;}
  .step{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px 20px; counter-increment:st; position:relative;}
  .step:before{content:"0" counter(st); font-family:ui-monospace,Menlo,monospace; font-size:13px; font-weight:600; color:var(--accent); display:block; margin-bottom:10px; letter-spacing:.1em;}
  .step h3{font-size:16.5px; margin:0 0 6px;}
  .step p{font-size:13.5px; color:var(--muted); margin:0;}
  .step .free{display:inline-block; margin-top:9px; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--sun); background:var(--sun-soft); border-radius:5px; padding:2px 8px; font-family:ui-monospace,Menlo,monospace;}

  /* SEC.04 preguntas frecuentes */
  .faq{display:grid; gap:12px;}
  .faq details{background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:0 22px; box-shadow:var(--shadow);}
  .faq summary{cursor:pointer; list-style:none; padding:18px 0; font-size:16.5px; font-weight:600; color:var(--strong); display:flex; align-items:center; justify-content:space-between; gap:16px;}
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary:after{content:"+"; font-family:ui-monospace,Menlo,monospace; font-size:20px; color:var(--accent); flex:none; line-height:1; transition:transform .25s ease;}
  .faq details[open] summary:after{content:"−"; transform:rotate(180deg);}
  .faq .ans{padding:0 0 20px; font-size:15px; color:var(--muted); max-width:70ch; border-top:1px solid var(--line-2); padding-top:14px;}
  .faq .ans b{color:var(--ink);}
  @media (prefers-reduced-motion:reduce){ .faq summary:after{transition:none;} }

  /* final CTA */
  .final{padding:80px 0; text-align:left; border-bottom:1px solid var(--line);}
  .final .box{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:44px 40px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;}
  .final h2{font-size:clamp(24px,3.2vw,34px); margin:0 0 8px; max-width:20ch;}
  .final p{color:var(--muted); margin:0; max-width:46ch; font-size:16px;}

  /* footer */
  footer{padding:48px 0 64px; font-size:14px; color:var(--muted);}
  .fgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px;}
  .fgrid h4{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); margin:0 0 10px; font-family:ui-monospace,Menlo,monospace; font-weight:600;}
  .fgrid ul{margin:0; padding:0; list-style:none;}
  .fgrid li{padding:3px 0;}
  .fgrid a{color:var(--muted); text-decoration:none;}
  .fgrid a:hover{color:var(--strong);}
  .fdesc{max-width:34ch; font-size:13.5px;}
  .copy{margin-top:34px; padding-top:18px; border-top:1px solid var(--line-2); font-size:12.5px; color:var(--faint); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;}

  @media (max-width:860px){
    .svc{grid-template-columns:1fr;}
    .steps{grid-template-columns:1fr 1fr;}
    .case .grid{grid-template-columns:1fr;}
    .fgrid{grid-template-columns:1fr 1fr;}
    .stats{grid-template-columns:1fr 1fr 1fr;}
  }
  @media (max-width:540px){ .steps{grid-template-columns:1fr;} .stats{grid-template-columns:1fr;} }
  @media (prefers-reduced-motion:no-preference){
    .reveal{opacity:0; transform:translateY(12px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards;}
    @keyframes rise{to{opacity:1; transform:none;}}
    /* aparición al hacer scroll: el estado oculto solo existe si hay JS (html.js) */
    html.js .fade{opacity:0; transform:translateY(22px); transition:opacity .65s cubic-bezier(.2,.7,.2,1), transform .65s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0s); will-change:opacity,transform;}
    html.js .fade.in{opacity:1; transform:none;}
  }
  :focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}

/* ---- paginas internas (soluciones y guias) ---- */
.phero{padding:56px 0 40px; border-bottom:1px solid var(--line);}
.phero h1{font-size:clamp(28px,4.6vw,44px); margin:12px 0 0; max-width:22ch;}
.phero .lead{color:var(--muted); font-size:18px; max-width:62ch;}
.phero .meta{font-size:13.5px; color:var(--faint); margin:12px 0 0;}
.phero .meta b{color:var(--muted);}
.crumbs{font-size:13px; color:var(--faint); margin-bottom:18px;}
.crumbs a{color:var(--muted); text-decoration:none;}
.crumbs a:hover{color:var(--strong);}
.crumbs span{margin:0 6px; opacity:.5;}
.tldr{margin-top:22px; background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); border-radius:14px; padding:20px 22px; max-width:74ch;}
.tldr .eyebrow{display:block; font-family:ui-monospace,Menlo,monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); font-weight:600; margin-bottom:8px;}
.tldr p{margin:0; font-size:17px; color:var(--ink); max-width:none;}
.feats{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.feat{background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:20px; box-shadow:var(--shadow);}
.feat h3{font-size:16.5px; margin:0 0 6px;}
.feat p{font-size:14.5px; color:var(--muted); margin:0;}
.gcards{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.gcard{display:block; text-decoration:none; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:24px; box-shadow:var(--shadow);}
.gcard h3{font-size:19px; margin:0 0 8px; color:var(--strong);}
.gcard p{font-size:14.5px; color:var(--muted); margin:0 0 12px;}
.gcard .more{font-size:14px; font-weight:600; color:var(--accent-ink);}
.gcard:hover{border-color:var(--accent);}
.solx{margin-top:14px; padding-top:12px; border-top:1px dashed var(--line);}
.solx a{font-size:13.5px; font-weight:600; color:var(--accent-ink); text-decoration:none;}
.solx a:hover{text-decoration:underline;}
@media (max-width:860px){ .feats,.gcards{grid-template-columns:1fr;} }


/* ==========================================================================
   Logo, selector de tema y de idioma
   ========================================================================== */
:root{ --icon-sun:none; --icon-moon:block; }
@media (prefers-color-scheme:dark){ :root{ --icon-sun:block; --icon-moon:none; } }
:root[data-theme="light"]{ --icon-sun:none; --icon-moon:block; }
:root[data-theme="dark"]{ --icon-sun:block; --icon-moon:none; }

.logo{gap:10px; align-items:center;}
.logo .mark{width:28px; height:28px; border-radius:8px; flex:none;
  background:url("/brand/isotipo.svg") center/contain no-repeat;}
.wordmark{display:flex; flex-direction:column; line-height:1.05;}
.wordmark .sub{font-family:ui-monospace,Menlo,monospace; font-size:8.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--faint); font-weight:600; margin-top:3px;}

.tools{display:flex; align-items:center; gap:8px; flex:none;}
.icon-btn{width:34px; height:34px; border-radius:9px; border:1px solid var(--line);
  background:var(--surface); color:var(--muted); display:grid; place-items:center;
  cursor:pointer; padding:0; transition:color .18s ease, border-color .18s ease;}
.icon-btn:hover{color:var(--accent-ink); border-color:var(--accent);}
.icon-btn .sun-core, .icon-btn .sun-rays{display:var(--icon-sun);}
.icon-btn .moon{display:var(--icon-moon);}

.lang-btn{display:grid; place-items:center; min-width:34px; height:34px; padding:0 9px;
  border-radius:9px; border:1px solid var(--line); background:var(--surface);
  color:var(--muted); text-decoration:none; font-family:ui-monospace,Menlo,monospace;
  font-size:11.5px; font-weight:700; letter-spacing:.06em;
  transition:color .18s ease, border-color .18s ease;}
.lang-btn:hover{color:var(--accent-ink); border-color:var(--accent);}

@media (max-width:600px){ .wordmark .sub{display:none;} }

/* ==========================================================================
   Pagina de marca
   ========================================================================== */
.logogrid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:6px 0 14px;}
.logobox{border:1px solid var(--line); border-radius:13px; padding:26px 20px; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:16px; min-height:140px;}
.logobox.light{background:#FBFCFC; color:#0A141B;}
.logobox.dark{background:#0C1418; color:#F5F9FA;}
.logobox img{max-width:100%; height:auto;}
.logobox .cap{font-family:ui-monospace,Menlo,monospace; font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; opacity:.55;}
.dl{font-size:14px;}
.dl a{font-weight:600;}

.swatches{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:8px;}
.swatch{display:flex; align-items:center; gap:14px; border:1px solid var(--line);
  border-radius:12px; padding:14px 16px; background:var(--surface);}
.swatch .chip{width:46px; height:46px; border-radius:10px; flex:none;
  border:1px solid rgba(128,128,128,.22);}
.sw-meta{display:flex; flex-direction:column; gap:2px; min-width:0;}
.sw-meta b{font-size:14.5px; color:var(--strong);}
.sw-meta code{font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--accent-ink);
  background:none; border:none; padding:0;}
.sw-meta span{font-size:12.5px; color:var(--muted);}

.typespec{display:grid; gap:12px; margin-top:8px;}
.ts{border:1px solid var(--line); border-radius:12px; padding:18px 20px; background:var(--surface);}
.ts .lbl{font-family:ui-monospace,Menlo,monospace; font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint); font-weight:600;}
.ts p{margin:8px 0 8px; max-width:none;}
.ts .d{font-size:clamp(24px,3.4vw,34px); font-weight:700; letter-spacing:-.015em; color:var(--strong); line-height:1.14;}
.ts .b{font-size:17px; color:var(--ink); line-height:1.65;}
.ts .m{font-family:ui-monospace,Menlo,monospace; font-size:15px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--accent-ink); font-weight:600;}
.ts code{font-family:ui-monospace,Menlo,monospace; font-size:11.5px; color:var(--faint);
  background:none; border:none; padding:0;}

table.voice td.no{color:var(--muted); text-decoration:line-through; text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb, var(--muted) 45%, transparent);}
table.voice td.yes{color:var(--strong); font-weight:600;}

.dodont{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px;}
.dodont > div{border-radius:13px; padding:18px 20px;}
.dodont .do{background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);}
.dodont .dont{background:var(--sun-soft); border:1px solid color-mix(in srgb,var(--sun) 32%,transparent);}
.dodont h4{margin:0 0 10px; font-size:13px; letter-spacing:.09em; text-transform:uppercase;
  font-family:ui-monospace,Menlo,monospace;}
.dodont .do h4{color:var(--accent-ink);} .dodont .dont h4{color:var(--sun);}
.dodont ul{margin:0; padding-left:18px;}
.dodont li{font-size:14px; padding:4px 0; color:var(--ink);}

@media (max-width:860px){
  .logogrid{grid-template-columns:1fr;}
  .swatches, .dodont{grid-template-columns:1fr;}
}

/* ==========================================================================
   Conversion: CTA, WhatsApp flotante
   ========================================================================== */
.btn.big{padding:14px 26px; font-size:16px;}
.final .box{flex-wrap:wrap;}
.final .box > div{flex:1 1 320px;}
.cta-alt{margin:14px 0 0; font-size:13.5px; color:var(--muted); flex-basis:100%;}
.cta-alt a{font-weight:600;}

.wa-float{position:fixed; right:18px; bottom:18px; z-index:60; display:flex; align-items:center;
  gap:10px; background:#25D366; color:#062b12; text-decoration:none; border-radius:999px;
  padding:13px 20px 13px 16px; font-weight:700; font-size:15px;
  box-shadow:0 6px 24px -6px rgba(0,0,0,.35); transition:transform .18s ease;}
.wa-float:hover{transform:translateY(-2px);}
@media (max-width:520px){ .wa-float span{display:none;} .wa-float{padding:15px; border-radius:50%;} }
@media (prefers-reduced-motion:reduce){ .wa-float{transition:none;} }

/* ==========================================================================
   Diagnostico interactivo
   ========================================================================== */
.diag-hero{border-bottom:none; padding-bottom:12px;}
.diag{padding-top:16px;}
.d-step{display:grid; grid-template-columns:auto 1fr; gap:20px; padding:26px 0;
  border-top:1px solid var(--line-2);}
.d-step:first-child{border-top:none;}
.d-num{width:34px; height:34px; border-radius:10px; background:var(--accent-soft);
  color:var(--accent-ink); display:grid; place-items:center; font-family:ui-monospace,Menlo,monospace;
  font-weight:700; font-size:15px; flex:none;}
.d-body h2{font-size:19px; margin:4px 0 14px;}
.d-hint{font-size:14px; color:var(--muted); margin:-8px 0 14px; max-width:60ch;}

.d-rubros{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px;}
.d-rubro{display:flex; align-items:center; gap:10px; border:1px solid var(--line); background:var(--surface);
  border-radius:11px; padding:13px 15px; font-size:14.5px; color:var(--ink); cursor:pointer;
  font-family:inherit; text-align:left; transition:border-color .15s ease, background .15s ease;}
.d-rubro .ic{font-size:17px; line-height:1;}
.d-rubro:hover{border-color:var(--accent);}
.d-rubro.on{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink); font-weight:600;}

.d-slider{display:flex; align-items:center; gap:18px; max-width:520px;}
.d-slider input[type=range]{flex:1; accent-color:var(--accent); height:6px;}
.d-slider output{font-family:ui-monospace,Menlo,monospace; font-size:22px; font-weight:700;
  color:var(--accent-ink); min-width:60px; text-align:right; font-variant-numeric:tabular-nums;}

.d-tasks{display:flex; flex-wrap:wrap; gap:9px;}
.d-task{border:1px solid var(--line); background:var(--surface); border-radius:999px;
  padding:10px 17px; font-size:14px; color:var(--ink); cursor:pointer; font-family:inherit;
  transition:border-color .15s ease, background .15s ease;}
.d-task:hover{border-color:var(--accent);}
.d-task.on{border-color:var(--accent); background:var(--accent); color:var(--btn-ink,#fff); font-weight:600;}

.d-empty{margin:22px 0 0; padding:20px; border:1px dashed var(--line); border-radius:12px;
  color:var(--muted); font-size:15px; text-align:center;}

.d-result{margin-top:26px; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow);}
.d-headline{background:var(--accent-soft); padding:28px 30px 24px;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 26%,transparent);}
.d-headline .eyebrow{display:block; font-family:ui-monospace,Menlo,monospace; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); font-weight:600; margin-bottom:10px;}
.d-big{margin:0; font-size:clamp(26px,4.4vw,42px); font-weight:700; color:var(--strong);
  letter-spacing:-.02em; line-height:1.1;}
.d-big b{color:var(--accent-ink); font-variant-numeric:tabular-nums;}
.d-sub{margin:10px 0 0; font-size:15px; color:var(--muted); max-width:56ch;}
.d-after{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);
  border-bottom:1px solid var(--line);}
.d-after > div{background:var(--surface); padding:18px 22px;}
.d-after .k{display:block; font-size:12.5px; color:var(--muted); margin-bottom:5px;}
.d-after b{font-size:20px; color:var(--strong); font-variant-numeric:tabular-nums;}
.d-sols-t{font-size:17px; margin:24px 30px 14px;}
.d-sols{display:grid; gap:10px; padding:0 30px;}
.d-sol{display:block; text-decoration:none; border:1px solid var(--line); border-radius:12px;
  padding:16px 18px; position:relative; transition:border-color .15s ease;}
.d-sol:hover{border-color:var(--accent);}
.d-sol.first{border-color:var(--accent); background:var(--accent-soft);}
.d-badge{position:absolute; top:-9px; left:16px; background:var(--accent); color:var(--btn-ink,#fff);
  font-family:ui-monospace,Menlo,monospace; font-size:10px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; padding:3px 9px; border-radius:5px;}
.d-sol h4{margin:0 0 5px; font-size:16px; color:var(--strong);}
.d-sol p{margin:0 0 8px; font-size:14px; color:var(--muted);}
.d-hrs{font-family:ui-monospace,Menlo,monospace; font-size:12.5px; color:var(--accent-ink); font-weight:600;}
.d-cta{margin:26px 30px 0; padding:24px; background:var(--panel); border-radius:14px;
  display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;}
.d-cta h3{margin:0 0 6px; font-size:20px;}
.d-cta p{margin:0; font-size:14.5px; color:var(--muted); max-width:44ch;}
.d-note{margin:18px 30px 26px; font-size:12.5px; color:var(--faint); max-width:70ch;}

@media (max-width:700px){
  .d-step{grid-template-columns:1fr; gap:12px;}
  .d-after{grid-template-columns:1fr;}
  .d-sols, .d-sols-t, .d-cta, .d-note{margin-left:18px; margin-right:18px; padding-left:0; padding-right:0;}
  .d-cta{padding:20px;}
  .d-headline{padding:22px 20px;}
}