/* Parcha Lab — parchalab.com
   Design system from "Parcha Lab Website Design" mockups (Aug 2026).
   Cream / ink / orange neo-brutalist: 2px borders, hard offset shadows. */

:root{
  --cream:#F6EEDF;
  --cream2:#EFE5D2;
  --ink:#1E1024;
  --orange:#FF5C00;
  --peach:#FF9A5C;
  --yellow:#FFC42E;
  --green:#B8E986;
  --muted:#6E6559;
  --body:#4A4038;
  --field:#FFF9EC;
  --mono:'JetBrains Mono',monospace;
  --serif:'Instrument Serif',serif;
}

html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--cream);color:var(--ink);font-family:'Bricolage Grotesque',sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--orange)}
::selection{background:var(--orange);color:var(--cream)}
input,select,textarea,button{font-family:'Bricolage Grotesque',sans-serif}
select option{background:var(--cream);color:var(--ink)}

/* Language toggle — Spanish is the no-JS default */
.l-en{display:none}
[data-lang="en"] .l-es{display:none}
[data-lang="en"] .l-en{display:revert}

@keyframes wipeUp{to{transform:translateY(-101%)}}
@keyframes rise{from{transform:translateY(110%)}to{transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes wiggle{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(-2deg)}}
@keyframes popIn{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}

.page{background:var(--cream);color:var(--ink);overflow-x:hidden;position:relative}

/* Fixed overlays */
.grain{position:fixed;inset:0;pointer-events:none;z-index:250;opacity:.05;background-image:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22140%22 height=%22140%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22/%3E%3C/filter%3E%3Crect width=%22140%22 height=%22140%22 filter=%22url(%23n)%22/%3E%3C/svg%3E')}
.progress{position:fixed;top:0;left:0;height:4px;background:var(--orange);z-index:290;width:0%}
.wipe{position:fixed;inset:0;background:var(--orange);z-index:300;pointer-events:none;display:flex;align-items:center;justify-content:center;animation:wipeUp .8s cubic-bezier(.75,0,.2,1) .55s forwards}
.wipe span{color:var(--cream);font-weight:800;font-size:clamp(28px,4vw,54px);letter-spacing:-.03em}
.wipe span b{color:var(--ink);font-weight:800}

/* Header */
.topbar{position:sticky;top:0;z-index:100;background:var(--cream);border-bottom:2px solid var(--ink)}
.nav{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 20px;padding:14px 20px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;letter-spacing:-.03em}
.dot{width:16px;height:16px;border-radius:50%;background:var(--orange);border:2px solid var(--ink);display:inline-block;flex-shrink:0}
.nav-links{display:flex;align-items:center;gap:24px;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;flex-wrap:wrap}
.nav-links a.on{color:var(--orange);border-bottom:2px solid var(--orange);padding-bottom:2px}
.nav-right{display:flex;align-items:center;gap:12px}
.lang{display:flex;border:2px solid var(--ink);background:var(--cream)}
.lang button{border:none;cursor:pointer;padding:8px 13px;font-size:12px;font-weight:800;letter-spacing:.05em;transition:all .2s;font-family:var(--mono);background:transparent;color:var(--ink)}
.lang button.on{background:var(--ink);color:var(--cream)}

/* Buttons — hard offset shadow family */
.btn{display:inline-block;font-weight:800;border:2px solid var(--ink);transition:all .18s;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;text-align:center}
.btn-sm{font-size:13.5px;padding:10px 18px;box-shadow:4px 4px 0 var(--ink)}
.btn-sm:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn-lg{font-size:16px;padding:18px 32px;letter-spacing:.02em}
.btn-orange{background:var(--orange);color:var(--ink)}
.btn-orange:hover{color:var(--ink)}
.btn-ink{background:var(--ink);color:var(--cream)}
.btn-ink:hover{color:var(--cream)}
.btn-cream{background:var(--cream);color:var(--ink)}
.btn-ink.sh-orange{box-shadow:6px 6px 0 var(--orange)}
.btn-ink.sh-orange:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--orange)}
.btn-ink.sh-cream{box-shadow:6px 6px 0 var(--cream)}
.btn-ink.sh-cream:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--cream)}
.btn-cream.sh-ink{box-shadow:6px 6px 0 var(--ink)}
.btn-cream.sh-ink:hover{color:var(--orange);transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.btn-cream.sh-ink.keep:hover{color:var(--ink)}
.btn-lg2{font-size:16px;padding:19px 36px}

/* Layout helpers */
.wrap{max-width:1280px;margin:0 auto}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.secmark{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--orange)}
.sechead{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:44px}
.h-serif{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;color:var(--orange)}

/* Hero title line-mask animation */
.hero-line{display:block;overflow:hidden;padding-bottom:.04em}
.hero-line>span{display:inline-block;animation:rise .8s cubic-bezier(.2,.8,.2,1) backwards}

/* Marquee */
.marquee{background:var(--orange);border-bottom:2px solid var(--ink);overflow:hidden;padding:13px 0}
.marquee-track{display:flex;gap:38px;width:max-content;animation:marquee 22s linear infinite;font-weight:800;font-size:19px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);white-space:nowrap}

/* Service index rows (dark section) */
.svc-row{border-top:2px solid rgba(246,238,223,.25);padding:36px 6px;display:flex;flex-wrap:wrap;gap:14px 40px;align-items:baseline;transition:all .25s;cursor:default}
.svc-row:last-child{border-bottom:2px solid rgba(246,238,223,.25)}
.svc-row:hover{background:var(--orange);color:var(--ink);padding-left:22px}
.svc-num{font-family:var(--mono);font-size:13px;width:40px;opacity:.6}
.svc-h{margin:0;font-size:clamp(30px,4.6vw,64px);letter-spacing:-.03em;font-weight:800;text-transform:uppercase;flex:1 1 300px}
.svc-p{margin:0;font-size:15.5px;line-height:1.55;flex:1 1 320px;max-width:440px;opacity:.85}

/* Process rows (light) */
.proc-row{border-top:2px solid var(--ink);padding:36px 6px;display:flex;flex-wrap:wrap;gap:14px 40px;align-items:baseline;transition:all .25s}
.proc-row:last-child{border-bottom:2px solid var(--ink)}
.proc-row:hover{background:var(--orange);padding-left:22px}
.proc-num{font-family:var(--mono);font-size:13px;width:44px;color:var(--orange)}
.proc-h{margin:0;font-size:clamp(28px,4vw,52px);letter-spacing:-.03em;font-weight:800;text-transform:uppercase;flex:1 1 240px}
.proc-p{margin:0;font-size:15.5px;line-height:1.6;flex:2 1 380px;max-width:560px}

/* Cards */
.card{border:2px solid var(--ink);background:var(--cream);box-shadow:8px 8px 0 var(--ink);transition:all .2s;color:var(--ink);display:block}
.card:hover{transform:translate(-3px,-3px);box-shadow:12px 12px 0 var(--ink);color:var(--ink)}
.card.tilt-l:hover{transform:translate(-3px,-3px) rotate(-.4deg);box-shadow:12px 12px 0 var(--orange)}
.card.tilt-r:hover{transform:translate(-3px,-3px) rotate(.4deg);box-shadow:12px 12px 0 var(--orange)}
.card-bar{display:flex;gap:6px;align-items:center;padding:11px 14px;border-bottom:2px solid var(--ink);background:var(--yellow)}
.card-dot{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink);flex-shrink:0}
.card-dot.fill{background:var(--orange)}
.card-url{margin-left:auto;font-family:var(--mono);font-size:10.5px;font-weight:700}
.card-shot{position:relative;height:250px;background:repeating-linear-gradient(45deg,transparent 0 12px,rgba(30,16,36,.05) 12px 13px);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;color:var(--muted)}
.card-foot{padding:18px 20px;border-top:2px solid var(--ink);display:flex;justify-content:space-between;align-items:center;gap:14px}
.card-t{font-weight:800;font-size:18px;text-transform:uppercase;letter-spacing:-.01em}
.card-sub{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:5px}
.tag-pro{background:var(--ink);color:var(--cream);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;padding:6px 12px;white-space:nowrap}
.tag-esencial{background:var(--orange);color:var(--ink);border:1.5px solid var(--ink);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;padding:6px 12px;white-space:nowrap}

/* Sticker badges */
.sticker{background:var(--yellow);border:2px solid var(--ink);font-family:var(--mono);font-weight:700;letter-spacing:.08em;animation:wiggle 3.2s ease-in-out infinite;display:inline-block}

/* Pricing cards */
.plan{flex:1 1 400px;border:2px solid var(--ink);box-shadow:10px 10px 0 var(--ink);padding:clamp(30px,4vw,46px);display:flex;flex-direction:column;transition:all .2s;position:relative}
.plan:hover{transform:translate(-3px,-3px);box-shadow:14px 14px 0 var(--ink)}
.plan-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:13px;letter-spacing:.14em}
.plan-price{font-size:clamp(70px,8vw,120px);font-weight:800;letter-spacing:-.05em;line-height:1;margin:24px 0 10px}
.plan-monthly{font-size:clamp(22px,2.4vw,34px);font-weight:800;letter-spacing:-.02em}
.plan-feats{display:flex;flex-direction:column;font-size:15px;flex:1}
.plan-feat{display:flex;gap:12px;align-items:flex-start;border-top:1.5px solid var(--ink);padding:13px 4px}
.plan-feat:last-child{border-bottom:1.5px solid var(--ink)}
.plan-feat b.check{font-weight:800;color:var(--orange)}
.plan.pro .plan-feat b.check{color:var(--ink)}
.plan-cta{margin-top:32px;display:block;text-align:center;font-weight:800;font-size:15.5px;padding:17px;border:2px solid var(--ink);transition:all .18s;text-transform:uppercase;letter-spacing:.03em}

/* Mini pricing cards (home) */
.mini-plan{flex:1 1 380px;border:2px solid var(--ink);padding:38px;box-shadow:8px 8px 0 var(--ink);transition:all .2s;color:var(--ink);display:block;position:relative}
.mini-plan:hover{transform:translate(-3px,-3px);box-shadow:12px 12px 0 var(--ink);color:var(--ink)}
.mini-price{font-size:clamp(64px,7vw,104px);font-weight:800;letter-spacing:-.05em;line-height:1;margin:22px 0 14px}
.mini-monthly{font-size:clamp(20px,2.2vw,30px);font-weight:800;letter-spacing:-.02em}

/* Stats strip */
.stat{flex:1 1 240px;padding:44px 28px;border-right:2px solid var(--ink)}
.stat:last-child{border-right:none}
.stat-n{font-size:clamp(52px,6vw,84px);font-weight:800;letter-spacing:-.04em;line-height:1}
.stat-l{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-top:10px;color:var(--muted)}

/* FAQ */
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
details.faq{border:2px solid var(--ink);background:var(--cream);padding:0 22px;box-shadow:5px 5px 0 var(--ink);transition:background .25s}
details.faq[open]{background:var(--yellow)}
details.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-weight:800;font-size:17px;text-transform:uppercase;letter-spacing:.01em}
details.faq .faq-x{font-size:24px;font-weight:400;transition:transform .3s;flex-shrink:0}
details.faq[open] .faq-x{transform:rotate(45deg)}
details.faq p{margin:0;padding:0 0 22px;font-size:15px;line-height:1.6}

/* Contact channel rows */
.chan{display:flex;align-items:center;gap:16px;border:2px solid var(--ink);background:var(--cream);box-shadow:5px 5px 0 var(--ink);padding:18px 20px;transition:all .18s;color:var(--ink)}
a.chan:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink);color:var(--ink)}
.chan-ico{width:40px;height:40px;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;flex-shrink:0}
.chan-t{display:block;font-weight:800;font-size:15.5px;text-transform:uppercase}
.chan-s{display:block;font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:3px}

/* Form */
.form-card{border:2px solid var(--ink);background:var(--cream);box-shadow:10px 10px 0 var(--orange);padding:clamp(26px,3.5vw,42px);display:flex;flex-direction:column;gap:20px;position:relative}
.form-tag{position:absolute;top:-16px;left:26px;background:var(--ink);color:var(--cream);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;padding:6px 14px}
.f-row{display:flex;flex-wrap:wrap;gap:20px}
.f-label{flex:1 1 180px;display:flex;flex-direction:column;gap:8px;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.1em}
.f-label.full{flex:1 1 100%}
.f-in{background:var(--field);border:2px solid var(--ink);padding:14px 16px;color:var(--ink);font-size:15px;outline:none;transition:box-shadow .2s;width:100%;box-sizing:border-box}
.f-in:focus{box-shadow:4px 4px 0 var(--orange)}
select.f-in{appearance:none;cursor:pointer}
textarea.f-in{resize:vertical;font-family:'Bricolage Grotesque',sans-serif}
.f-submit{background:var(--orange);color:var(--ink);font-weight:800;font-size:16px;padding:18px;border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);cursor:pointer;transition:all .18s;text-transform:uppercase;letter-spacing:.03em}
.f-submit:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.sent-card{border:2px solid var(--ink);background:var(--yellow);box-shadow:10px 10px 0 var(--ink);padding:clamp(40px,5vw,64px);text-align:center;animation:popIn .5s cubic-bezier(.2,.8,.2,1)}
.sent-check{width:80px;height:80px;border:2px solid var(--ink);background:var(--orange);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;font-size:36px;font-weight:800;box-shadow:5px 5px 0 var(--ink)}
.sent-again{margin-top:28px;background:var(--cream);border:2px solid var(--ink);color:var(--ink);font-weight:800;font-size:13.5px;padding:13px 26px;box-shadow:4px 4px 0 var(--ink);cursor:pointer;transition:all .18s;text-transform:uppercase;letter-spacing:.04em}
.sent-again:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}

/* Footer */
footer.site{background:var(--ink);color:var(--cream);padding:70px 20px 26px;overflow:hidden}
.foot-grid{max-width:1280px;margin:0 auto;display:flex;flex-wrap:wrap;gap:44px;justify-content:space-between}
.foot-brand p{color:rgba(246,238,223,.65);font-size:14.5px;line-height:1.6;max-width:300px;margin:14px 0 0}
.foot-col{display:flex;flex-direction:column;gap:11px;font-family:var(--mono);font-size:13px;letter-spacing:.05em}
.foot-col a{color:var(--cream)}
.foot-col a:hover{color:var(--orange)}
.foot-h{font-size:11px;letter-spacing:.16em;color:var(--peach);margin-bottom:4px}
.foot-word{max-width:1280px;margin:56px auto 0;font-size:clamp(54px,12.8vw,196px);font-weight:800;letter-spacing:-.04em;line-height:.8;text-align:center;color:transparent;-webkit-text-stroke:1.5px rgba(255,92,0,.85);user-select:none;white-space:nowrap}
.foot-legal{max-width:1280px;margin:40px auto 0;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;border-top:1px solid rgba(246,238,223,.2);padding-top:20px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:rgba(246,238,223,.55)}

@media (prefers-reduced-motion:reduce){
  .wipe{animation-duration:.01s;animation-delay:0s}
  .hero-line>span,[data-reveal]{animation:none !important;transition:none !important}
  .marquee-track{animation-duration:120s}
}