/* ═══════════════════════════════════════════════════════════
   LAYER'D STUDIOS — DESIGN SYSTEM
   Paper Grid Brutalist — light grainy paper, thick black grid, bold type
   ═══════════════════════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  /* estúdio palette */
  --ink:#0E0C1C;--navy:#171430;--panel:#EDE9DD;
  --paper:#EAE6D9;--paper2:#E2DDCC;
  --or:#D94F1E;--gr:#8A9600;--gr2:#C5D400;--cr:#F4EFC8;--lv:#8B76B3;--bl:#3450B4;
  --or-d:#B33E15;
  --line:var(--ink);--line2:rgba(14,12,28,.16);
  --e1:cubic-bezier(.16,1,.3,1);--e2:cubic-bezier(.76,0,.24,1);
  --radius:0px;--radius-sm:0px;
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:#EAE6D9}
body{font-family:'DM Sans',sans-serif;background:var(--paper);color:var(--ink);
  cursor:none;overflow-x:hidden;position:relative}
::selection{background:var(--ink);color:var(--paper)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:none;background:none;border:none;color:inherit}
img{max-width:100%;display:block}
.only-mobile{display:none}

/* ══════ TEXTURE — heavy paper grain, newsprint feel ══════ */
.halftone{position:fixed;inset:0;z-index:56;pointer-events:none;
  background-image:radial-gradient(circle,rgba(14,12,28,.05) 1px,transparent 1px);
  background-size:5px 5px;mix-blend-mode:multiply;animation:htdrift 26s linear infinite}
@keyframes htdrift{0%{background-position:0 0}100%{background-position:120px 80px}}
.grain{position:fixed;inset:0;z-index:55;pointer-events:none;opacity:.16;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.scanlines{display:none}

.dots-fade{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,currentColor 1.6px,transparent 1.6px);
  background-size:9px 9px;mask-image:radial-gradient(circle at var(--dx,80%) var(--dy,20%),#000 0%,transparent 62%);
  -webkit-mask-image:radial-gradient(circle at var(--dx,80%) var(--dy,20%),#000 0%,transparent 62%);opacity:.6}

/* ══════ CURSOR ══════ */
#cur,#curt{position:fixed;border-radius:50%;pointer-events:none;z-index:99999;transform:translate(-50%,-50%)}
#cur{width:9px;height:9px;background:var(--ink);mix-blend-mode:difference;
  transition:width .15s var(--e1),height .15s var(--e1)}
#curt{width:38px;height:38px;border:2px solid var(--ink);z-index:99998;opacity:.55;mix-blend-mode:difference;
  transition:width .32s var(--e1),height .32s var(--e1),opacity .32s}
body.ch #cur{width:6px;height:6px}
body.ch #curt{width:60px;height:60px;opacity:.7}
body.cc #cur{width:15px;height:15px}

/* ══════ WHATSAPP FAB ══════ */
#wafab{position:fixed;bottom:1.3rem;right:1.4rem;z-index:9999;
  width:56px;height:56px;background:#25D366;color:#fff;border-radius:50%;
  border:3px solid var(--ink);cursor:none;display:flex;align-items:center;justify-content:center;
  box-shadow:4px 4px 0 var(--ink);transition:transform .25s var(--e1),box-shadow .25s}
#wafab:hover{transform:translate(-3px,-3px) rotate(-8deg);box-shadow:7px 7px 0 var(--ink)}
#wafab svg{width:27px;height:27px;fill:#fff}

/* ══════ TOP NAV ══════ */
#topnav{position:fixed;top:0;left:0;right:0;z-index:600;display:flex;align-items:center;
  justify-content:space-between;padding:1.1rem 1.8rem;border-bottom:3px solid var(--ink);
  background:var(--paper)}
.navlogo{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:1.3rem;letter-spacing:0;cursor:none;color:var(--ink)}
.navlogo em{font-style:normal;color:var(--or)}
.navback{display:inline-flex;align-items:center;gap:.5rem;font-family:'Space Grotesk',monospace;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);opacity:.8;
  cursor:none;transition:opacity .2s,gap .25s}
.navback:hover{opacity:1;gap:.8rem;color:var(--or-d)}
.navback svg{width:13px;height:13px;transform:rotate(180deg)}

/* ══════ PAGE WIPE TRANSITION ══════ */
#pwipe{position:fixed;inset:0;z-index:99990;pointer-events:none;display:flex}
#pwipe i{flex:1;background:var(--ink);transform:translateY(0);will-change:transform}
#pwipe i:nth-child(1){background:var(--ink)}
#pwipe i:nth-child(2){background:var(--or)}
#pwipe i:nth-child(3){background:var(--paper);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
#pwipe i:nth-child(4){background:var(--ink)}
#pwipe.leaving i{animation:wipein .55s var(--e2) forwards}
#pwipe.entering i{animation:wipeout .6s .05s var(--e1) forwards}
#pwipe i:nth-child(2){animation-delay:.06s}
#pwipe i:nth-child(3){animation-delay:.12s}
#pwipe i:nth-child(4){animation-delay:.18s}
@keyframes wipein{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@keyframes wipeout{from{transform:translateY(0)}to{transform:translateY(100%)}}

/* ══════ LABELS / EYEBROW TAGS ══════ */
.tag{display:inline-flex;align-items:center;gap:7px;font-family:'Space Grotesk',monospace;
  font-size:.65rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  padding:6px 14px;border-radius:0;border:2px solid var(--ink);color:var(--ink);background:var(--paper)}
.tag.ora{background:var(--cr);color:var(--or-d);border-color:var(--or)}
.tag.grn{background:var(--cr);color:#5c6600;border-color:var(--gr)}
.tag.lav{background:var(--cr);color:#4a3d68;border-color:var(--lv)}
.tag.bl{background:var(--cr);color:#1f3080;border-color:var(--bl)}
.dp{width:5px;height:5px;border-radius:50%;background:currentColor;display:inline-block;
  animation:dp 2.2s ease-in-out infinite;flex-shrink:0}
@keyframes dp{0%,100%{opacity:1}50%{opacity:.15}}

/* ══════ DISPLAY TYPE — huge black condensed ══════ */
.disp{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(3rem,9vw,7.6rem);line-height:.84;letter-spacing:-.01em;color:var(--ink);position:relative}
.disp em{font-style:normal;color:var(--or)}
.disp .grn{color:#5c6600}
.disp .lav{color:var(--lv)}
.disp .bl{color:var(--bl)}
.wmark{font-family:'Unbounded',sans-serif;font-weight:900;letter-spacing:-.02em}
.lede{max-width:540px;font-size:clamp(.95rem,1.3vw,1.1rem);line-height:1.75;color:rgba(14,12,28,.72)}
.lede strong{color:var(--ink);font-weight:700}

.echo{display:inline-block;position:relative;z-index:2}
.echo::before{content:attr(data-text);position:absolute;top:0;left:0;width:100%;z-index:-1;
  color:transparent;-webkit-text-stroke:1.5px rgba(14,12,28,.16);
  transform:translate(10px,8px);pointer-events:none}

/* ══════ BUTTONS ══════ */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:'Unbounded',sans-serif;
  font-weight:700;font-size:.76rem;padding:15px 27px;letter-spacing:0;border-radius:99px;
  text-transform:uppercase;cursor:none;border:2.5px solid var(--ink);position:relative;
  transition:transform .2s var(--e1),box-shadow .2s var(--e1),background .15s,color .15s}
.bg{background:var(--ink);color:var(--paper);box-shadow:5px 5px 0 var(--or)}
.bg:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--or)}
.bo{background:transparent;color:var(--ink);box-shadow:4px 4px 0 rgba(14,12,28,.2)}
.bo:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--ink);background:var(--ink);color:var(--paper)}
.bor{background:var(--or-d);border-color:var(--or-d);color:var(--cr);box-shadow:5px 5px 0 var(--ink)}
.bor:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.btn:disabled,.btn.off{opacity:.4;cursor:not-allowed;box-shadow:none!important;transform:none!important}
.row{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center}

.dbtn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:60px;
  padding:0 1.7rem;border-radius:99px;border:2px dashed var(--ink);color:var(--ink);
  font-family:'Space Grotesk',monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;
  cursor:none;transition:border-color .3s,background .3s,color .3s,transform .3s var(--e1)}
.dbtn:hover{background:var(--ink);border-color:var(--ink);border-style:solid;color:var(--paper);transform:scale(1.045)}
.dbtn.circle{width:60px;height:60px;padding:0;border-radius:50%}

/* ══════ CHECKERED STRIP ══════ */
.checker{display:flex;width:100%;height:14px}
.checker i{flex:1;aspect-ratio:1}
.checker i:nth-child(odd){background:var(--ink)}
.checker i:nth-child(even){background:var(--or)}

/* ══════ BARCODE ══════ */
.barcode{display:flex;align-items:flex-end;gap:2px;height:34px}
.barcode i{display:block;width:2px;background:currentColor}
.barcode span{font-family:'Space Grotesk',monospace;font-size:.55rem;letter-spacing:.1em;
  margin-left:.6rem;opacity:.6;align-self:center}

.doodle{position:absolute;pointer-events:none;z-index:5}
.doodle svg{width:100%;height:100%;overflow:visible}

.regmk{position:absolute;top:.9rem;right:1rem;font-family:'Space Grotesk',monospace;
  font-size:.55rem;letter-spacing:.1em;opacity:.5;z-index:2;color:var(--ink)}

/* ══════ HALFTONE-SPLIT HERO ICON ══════ */
.hticon-wrap{position:relative;width:100%;aspect-ratio:1/1;max-width:320px;margin:0 auto}
.hticon{width:100%;height:100%;display:block}

.pframe{position:relative;border:3px solid var(--ink);border-radius:0;
  padding:2.4rem 2rem;display:flex;align-items:center;justify-content:center;
  background:var(--cr);overflow:hidden}
.pframe.circle{border-radius:50%;aspect-ratio:1/1;max-width:360px;margin:0 auto;padding:1.8rem}
.pframe.tight{padding:1.6rem}

/* ══════ MARQUEE ══════ */
.mq{position:relative;width:100%;overflow:hidden;border-top:3px solid var(--ink);
  border-bottom:3px solid var(--ink);padding:.85rem 0;white-space:nowrap}
.mq .mqtrack{display:inline-flex;gap:0;animation:mqL 26s linear infinite}
.mq.rev .mqtrack{animation:mqR 30s linear infinite}
.mq span{display:inline-flex;align-items:center;padding:0 2rem;font-family:'Anton',sans-serif;
  font-weight:400;font-size:1.15rem;text-transform:uppercase;letter-spacing:0}
.mq span i{font-style:normal;padding-left:2rem;opacity:.55}
@keyframes mqL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mqR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.mq.or{background:var(--or);color:var(--cr)}
.mq.gr{background:var(--gr2);color:var(--ink)}
.mq.ink{background:var(--ink);color:var(--cr);border-color:var(--ink)}
.mq.lv{background:var(--lv);color:var(--cr)}

/* ══════ GRID SYSTEM — thick black dividers, sharp corners ══════ */
.bwrap{max-width:1180px;margin:0 auto;padding:0 1.6rem}
.bento{display:grid;gap:0;width:100%;background:var(--ink);border:3px solid var(--ink)}
.bento.gap{gap:12px;background:none;border:none}
.bento.c2{grid-template-columns:repeat(2,1fr)}
.bento.c3{grid-template-columns:repeat(3,1fr)}
.bento.c4{grid-template-columns:repeat(4,1fr)}
.bento.c6{grid-template-columns:repeat(6,1fr)}
.span2{grid-column:span 2}.span3{grid-column:span 3}.span4{grid-column:span 4}
.rspan2{grid-row:span 2}

.cell{position:relative;overflow:hidden;border-radius:0;
  padding:2rem;display:flex;flex-direction:column;justify-content:flex-end;gap:.5rem;
  min-height:150px;text-align:left;background:var(--paper);color:var(--ink);
  transition:background .3s var(--e1),color .3s var(--e1)}
.bento.gap .cell{border-radius:0;border:3px solid var(--ink)}
.cell:hover{background:var(--cr)}
.cell.ink{background:var(--ink);color:var(--cr)}
.cell.ink:hover{background:#26223e}
.cell.or{background:var(--or);color:var(--ink)}
.cell.gr{background:var(--gr2);color:var(--ink)}
.cell.lv{background:var(--lv);color:var(--ink)}
.cell.bl{background:var(--bl);color:var(--cr)}
.cell.outline{background:var(--paper);border:2px dashed var(--ink)}
.cell .dots-fade{color:var(--ink)}
.cell.ink .dots-fade,.cell.bl .dots-fade{color:var(--cr)}
.cell.top{justify-content:flex-start}
.cell .cn{font-family:'Space Grotesk',monospace;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;opacity:.65;margin-bottom:.2rem}
.cell h3,.cell h4{font-family:'Unbounded',sans-serif;font-weight:700;line-height:1.2;position:relative;z-index:2}
.cell h3{font-size:1.3rem}
.cell h4{font-size:.98rem}
.cell p{font-size:.83rem;line-height:1.62;position:relative;z-index:2}
.cell.ink p,.cell.bl p{color:rgba(244,239,200,.78)}
.cell.or p,.cell.gr p,.cell.lv p{color:rgba(14,12,28,.74)}
.cell .cico{font-size:1.9rem;margin-bottom:.4rem;position:relative;z-index:2}
.cell .cbig{font-family:'Anton',sans-serif;font-weight:400;font-size:3.2rem;line-height:1;position:relative;z-index:2}

.cell.numcell .cn{font-size:2.2rem;font-family:'Anton',sans-serif;font-weight:400;opacity:.25;letter-spacing:0}
.cell.ink.numcell .cn,.cell.or.numcell .cn,.cell.lv.numcell .cn,.cell.bl.numcell .cn{color:var(--cr)}

.sec{position:relative;padding:5.5rem 0;z-index:2}
.sec.tight{padding:3rem 0}
.sechead{max-width:640px;margin-bottom:2.6rem;position:relative}
.sechead .tag{margin-bottom:1.1rem}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--e1),transform .8s var(--e1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.4s}.reveal.d6{transition-delay:.48s}

/* ══════ PLAN CARDS ══════ */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:var(--ink);border:3px solid var(--ink)}
.plans.n4{grid-template-columns:repeat(4,1fr)}
.pcard{position:relative;overflow:hidden;background:var(--paper);
  padding:2.1rem 1.8rem 1.8rem;text-align:left;transition:background .3s var(--e1)}
.pcard:hover{background:var(--cr)}
.pcard.custom{background:repeating-linear-gradient(135deg,var(--paper),var(--paper) 10px,var(--paper2) 10px,var(--paper2) 11px)}
.pribbon{position:absolute;top:16px;right:-36px;transform:rotate(40deg);
  background:var(--ink);color:var(--paper);font-family:'Unbounded',sans-serif;font-weight:700;
  font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;padding:5px 42px;z-index:3;overflow:hidden}
.pcard.custom .pribbon{background:var(--gr2);color:var(--ink)}
.pname{font-family:'Space Grotesk',monospace;font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--or-d);margin-bottom:.5rem}
.pcard.custom .pname{color:var(--ink)}
.ptitle{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:1.55rem;margin-bottom:.6rem;color:var(--ink)}
.pprice{font-family:'Anton',sans-serif;font-weight:400;font-size:1.7rem;margin-bottom:1.1rem;color:var(--ink);
  filter:blur(6px);user-select:none;transition:filter .3s;text-transform:uppercase}
.pcard:hover .pprice{filter:blur(4px)}
.pprice.open{filter:none}
.pprice span{font-size:.6rem;font-family:'Space Grotesk',monospace;letter-spacing:.1em;
  text-transform:uppercase;opacity:.55;display:block;margin-top:.2rem;filter:none}
.pcard ul{list-style:none;margin-bottom:1.3rem}
.pcard li{font-size:.8rem;color:rgba(14,12,28,.68);padding:.4rem 0;
  border-bottom:1px solid var(--line2);display:flex;gap:.5rem;align-items:flex-start}
.pcard li::before{content:'✺';color:var(--or-d);font-size:.7rem;line-height:1.4;flex-shrink:0}
.pbtn{width:100%;text-align:center;justify-content:center}

.notify{display:flex;gap:.6rem;max-width:440px;flex-wrap:wrap}
.notify input{flex:1;min-width:200px;background:var(--cr);border:2.5px solid var(--ink);
  border-radius:99px;color:var(--ink);font-family:'DM Sans',sans-serif;font-size:.9rem;
  padding:12px 18px;outline:none;cursor:none;transition:border-color .2s}
.notify input:focus{border-color:var(--or)}
.notifymsg{font-family:'Space Grotesk',monospace;font-size:.72rem;color:var(--or-d);margin-top:.7rem;min-height:.9rem;font-weight:700}

.ccrow{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:var(--ink);border:3px solid var(--ink)}

footer.sitef{padding:3rem 0 6.5rem;text-align:center;position:relative;z-index:2;border-top:3px solid var(--ink)}
footer.sitef .fmark{font-family:'Space Grotesk',monospace;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;opacity:.5}

.floaters{display:none}

@media(max-width:900px){
  .bento.c4{grid-template-columns:repeat(2,1fr)}
  .bento.c3{grid-template-columns:repeat(2,1fr)}
  .bento.c6{grid-template-columns:repeat(2,1fr)}
  .plans,.plans.n4{grid-template-columns:1fr 1fr}
  .ccrow{grid-template-columns:1fr 1fr}
  .span3{grid-column:span 2}
}
@media(max-width:640px){
  body{cursor:auto}
  #cur,#curt{display:none!important}
  .btn,.dbtn,.pbtn,#wafab,.navback,.cell,.mq,.pcard,input,.navlogo{cursor:pointer!important}
  .notify input{cursor:text!important}
  #wafab{width:50px;height:50px;bottom:1rem;right:1rem}
  .bento.c2,.bento.c3,.bento.c4,.bento.c6{grid-template-columns:1fr}
  .plans,.plans.n4{grid-template-columns:1fr}
  .ccrow{grid-template-columns:1fr}
  .span2,.span3,.span4{grid-column:span 1}
  #topnav{padding:1rem 1.2rem}
  .sec{padding:3.4rem 0}
  .only-mobile{display:block}
  .hticon-wrap{max-width:210px}
  .echo::before{transform:translate(6px,5px)}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}