/* Tuproceso — "La orden de trabajo". Mobile-first (390px). */
:root{
  --paper:#F4F1EA; --ink:#14201C; --brand:#085041; --action:#1D9E75; --mint:#E1F5EE; --safety:#E8B400;
  --line:rgba(20,32,28,.22); --soft:#34403b;
  --disp:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:3px; --gut:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:400 18px/1.5 var(--body);padding-bottom:58px}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gut)}
.mono{font-family:var(--mono);font-weight:500;letter-spacing:.02em}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* Header */
.top{border-bottom:1px solid var(--line);background:var(--paper);position:relative;z-index:5}
.top__in{display:flex;align-items:center;justify-content:space-between;height:52px;gap:12px}
.brand{font:700 26px/1 var(--disp);text-decoration:none;letter-spacing:.02em;color:var(--brand)}
.brand span{color:var(--ink)}
.top__by{font-size:11px;color:var(--soft);text-transform:uppercase;display:none}
.top .btn{display:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--action);color:#fff;
  font:700 22px/1 var(--disp);letter-spacing:.03em;text-transform:uppercase;text-decoration:none;
  padding:16px 22px;border:1px solid var(--brand);border-radius:var(--r);min-height:56px;
  transition:background .15s}
.btn:hover{background:#178a66}
.btn--alt{background:transparent;color:var(--brand);border:2px solid var(--brand);width:100%;font-size:22px}
.btn--alt:hover{background:var(--mint)}
.otro{display:grid;gap:18px}
.otro h2{margin:6px 0 12px;font-size:clamp(32px,9vw,44px)}
.otro p{max-width:38em}
.btn--sm{font-size:19px;min-height:40px;padding:8px 14px}
.btn--lg{width:100%;font-size:24px;min-height:62px}
.btn--xl{width:100%;font-size:26px;min-height:68px}
.wa{width:24px;height:24px;fill:currentColor;flex:none}

/* Hero */
.hero{border-bottom:1px solid var(--line);
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:28px 28px;background-position:-1px -1px;
  background-color:var(--paper);position:relative}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(var(--paper),rgba(244,241,234,.86) 55%,var(--paper));opacity:.9;pointer-events:none}
.hero__in{position:relative;padding-top:28px;padding-bottom:40px;display:grid;gap:32px}
.tag{font-size:13px;color:var(--brand);margin-bottom:14px}
h1{font:700 clamp(50px,15.5vw,96px)/.92 var(--disp);text-transform:uppercase;letter-spacing:.005em;margin-bottom:18px}
.mark{background:linear-gradient(transparent 82%,var(--safety) 82% 94%,transparent 94%);padding:0 2px}
.lead{font-size:19px;line-height:1.45;max-width:34em;margin-bottom:22px}
.hint{font-size:14px;color:var(--ink);margin-top:12px;text-align:center}

/* Phone mockup */
.phone-wrap{position:relative;justify-self:center;width:100%;max-width:300px}
.phone{position:relative;background:#fff;border:2px solid var(--ink);border-radius:8px;overflow:visible}
.phone__bar{display:flex;justify-content:space-between;align-items:center;background:var(--brand);color:#fff;padding:10px 14px;font-size:13px;border-radius:5px 5px 0 0}
.state{background:var(--mint);color:var(--brand);padding:2px 8px;border-radius:2px;font-size:12px}
.phone__body{padding:12px 14px 16px}
.row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px}
.lbl{font-size:13px;color:var(--soft);text-transform:uppercase;align-self:center}
.val{text-align:right}
.sep{margin:12px 0 4px}
.tasks{list-style:none;font-size:15px}
.tasks li{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
.tasks i{width:16px;height:16px;border:1.5px solid var(--ink);border-radius:2px;flex:none;position:relative}
.tasks .done i::after,.tasks .last.on i::after{content:"";position:absolute;left:4px;top:0;width:5px;height:10px;border:solid var(--brand);border-width:0 2.5px 2.5px 0;transform:rotate(40deg)}
.tasks .last:not(.on){color:var(--soft)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.photos{display:flex;gap:6px;margin-top:5px}
.photos b{flex:1;height:44px;border:1px solid var(--line);border-radius:2px;
  background:repeating-linear-gradient(135deg,var(--mint) 0 6px,#cfe9df 6px 12px)}
.sign{height:44px;margin-top:5px;border-bottom:1.5px solid var(--ink)}
.sign svg,.sig svg{width:100%;height:100%;fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.stamp{position:absolute;right:-12px;bottom:118px;transform:rotate(-9deg);background:var(--safety);color:var(--ink);
  border:3px solid var(--ink);border-radius:3px;padding:6px 12px;font-size:22px;letter-spacing:.14em;pointer-events:none}
.ejemplo{font-size:13px;text-align:center;color:var(--ink);margin-top:12px}

/* initial (incomplete) state only when JS runs and motion allowed */
.js .phone:not(.closed) .stamp{opacity:0}
.js .phone:not(.closed) .sign path{stroke-dasharray:260;stroke-dashoffset:260}
.js .phone.closed .sign path{stroke-dasharray:260;stroke-dashoffset:0;transition:stroke-dashoffset .9s ease}
.js .phone.closed .stamp{animation:stamp .32s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes stamp{from{opacity:0;transform:rotate(-9deg) scale(1.7)}to{opacity:1;transform:rotate(-9deg) scale(1)}}

/* Sections */
.sec{padding:52px 0;border-bottom:1px solid var(--line)}
.sec--alt{background:var(--mint)}
.sec--dark{background:var(--ink);color:var(--paper);border-bottom:0}
.sec--dark .field{color:var(--paper);border-color:var(--paper)}
.sec--dark .field b{background:var(--paper);color:var(--ink)}
.sec--dark .ot{color:var(--ink)}
.field{font-size:14px;color:var(--brand);text-transform:uppercase;margin-bottom:10px;
  border-bottom:1px solid var(--ink);padding-bottom:8px}
.field b{font-weight:500;background:var(--ink);color:var(--paper);padding:2px 6px;border-radius:2px;margin-right:2px}
h2{font:700 clamp(36px,10vw,56px)/1 var(--disp);text-transform:uppercase;margin:18px 0 26px;letter-spacing:.005em}
h3{font:700 27px/1.05 var(--disp);text-transform:uppercase;margin-bottom:8px;letter-spacing:.005em}

/* Pains */
.pains{list-style:none;border-top:1px solid var(--ink)}
.pains li{padding-right:8px;display:grid;grid-template-columns:28px 1fr;column-gap:10px;padding:22px 0;border-bottom:1px solid var(--line)}
.n{font-size:13.5px;color:var(--brand);padding-top:6px}
.bx{display:inline-block;width:16px;height:16px;border:1.5px solid var(--ink);border-radius:2px;vertical-align:-3px;margin-right:8px}
.pains .bx{margin:0}
.scene{font:700 clamp(25px,7vw,40px)/1.05 var(--disp);grid-column:2}
.note{grid-column:2;color:var(--soft);margin-top:8px;font-size:18px}

/* OT cards */
.cards{display:grid;gap:26px}
.ot{background:var(--paper);border:1px solid var(--ink);border-radius:var(--r);padding:0 0 4px}
.sec--dark .ot__h{background:var(--brand)}
.ot__h{display:flex;justify-content:space-between;font-size:14px;background:var(--ink);color:var(--paper);padding:8px 16px;border-radius:2px 2px 0 0}
.ot h3,.ot p{padding:0 16px}
.ot h3{margin-top:18px;font-size:30px}
.ot p{font-size:17px}
.price{margin:18px 16px 12px;border-top:1px dashed var(--ink)}
.price div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line)}
.price div:last-child{border-bottom:0}
dt{font-size:14px;color:var(--ink);text-transform:uppercase}
dd{font:700 22px/1 var(--disp);white-space:nowrap}

/* Steps */
.steps{list-style:none;border-top:1px solid var(--ink)}
.steps li{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:20px 0;border-bottom:1px solid var(--line)}
.steps .n{padding-top:8px}
.steps p{color:var(--soft)}

/* FAQ */
.faq{border-top:1px solid var(--ink)}
details{border-bottom:1px solid var(--line)}
summary{font:700 25px/1.1 var(--disp);text-transform:uppercase;padding:18px 34px 18px 0;cursor:pointer;list-style:none;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:500 24px var(--mono);position:absolute;right:2px;top:15px;color:var(--brand)}
details[open] summary::after{content:"\2212"}
details p{padding:0 0 18px;color:var(--soft)}

/* Close */
.sec--close{background:var(--mint);border-bottom:0}
.sheet{background:var(--paper);border:1px solid var(--ink);border-radius:var(--r);padding:16px 18px 18px;margin-top:18px}
.sheet__h{font-size:13.5px;border-bottom:1px solid var(--ink);padding-bottom:10px;color:var(--ink)}
.sheet__h b{background:var(--ink);color:var(--paper);padding:1px 6px;border-radius:2px;font-weight:500}
.sheet .lead{margin-bottom:22px}
.sheet__f{font-size:13px;margin-top:18px;color:var(--soft);border-top:1px dashed var(--ink);padding-top:10px}

.foot{padding:22px 0;font-size:13px;color:var(--soft);border-top:1px solid var(--ink)}

/* Floating WhatsApp (móvil) */
.fab{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--action);color:#fff;font:700 23px/1 var(--disp);letter-spacing:.03em;text-transform:uppercase;text-decoration:none;min-height:58px;border-top:1px solid var(--brand)}
  font:700 21px/1 var(--disp);letter-spacing:.03em;text-transform:uppercase;text-decoration:none;
  padding:0 18px;min-height:52px;border:1px solid var(--brand);border-radius:var(--r);box-shadow:0 2px 0 var(--brand)}

/* Scroll reveal (suave) */
.js .rv{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.js .rv.in{opacity:1;transform:none}

/* Desktop */
@media (min-width:860px){
  :root{--gut:32px}
  body{font-size:19px;padding-bottom:0}
  .fab{display:none}
  .top__in{height:60px}
  .top__in .brand{margin-right:auto}
  .top .btn{display:inline-flex}
  .hero__in{grid-template-columns:1.25fr .75fr;align-items:center;gap:56px;padding-top:64px;padding-bottom:72px}
  .btn--lg{width:auto;min-width:340px}
  .hint{text-align:left}
  .sec{padding:68px 0}
  .ot p,.steps p,details p{font-size:19px}
  .pains li{grid-template-columns:48px 1.1fr .9fr;align-items:baseline;column-gap:24px;padding:30px 0}
  .scene{grid-column:2}.note{grid-column:3;margin-top:0;font-size:19px;color:var(--ink)}
  .cards{grid-template-columns:repeat(3,1fr);gap:28px;align-items:stretch}
  .ot{display:flex;flex-direction:column}
  .price{margin-top:auto}

  .steps li{padding:26px 0}
  .btn--xl{width:auto;min-width:440px}
  .otro{grid-template-columns:1fr auto;align-items:center;gap:48px}
  .btn--alt{width:auto;min-width:260px}
  .foot{padding:28px 0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .js .phone .stamp{opacity:1;animation:none}
  .js .phone .sign path{stroke-dashoffset:0;transition:none}
  .btn{transition:none}
}

/* Niveles */
.plans__note{margin:-8px 0 26px;max-width:40em;color:var(--paper);font-size:17px}
.para{font-weight:400;margin-bottom:12px}
.inc{list-style:none;padding:0 16px;font-size:17px}
.inc li{padding:6px 0;display:flex;gap:10px;align-items:flex-start}
.inc .bx{margin:5px 0 0;flex:none}
.rec{background:var(--ink);color:var(--paper);padding:1px 8px;border-radius:2px;font-size:12px}
.sec--dark .ot--rec{outline:3px solid var(--paper);outline-offset:3px}
.sec--dark .ot--rec .ot__h{background:var(--action)}
.inc .plus{padding-left:0;color:var(--soft);border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:2px}