/* Viralizando Academy — shared shell: tokens, base, helpers, header, footer, 404 (agent A1) */

:root{
  --bg:#f5f4f0; --tile:#ffffff; --ink:#17142b; --muted:#5d5873; --line:#e3e0ea;
  --violet:#5f3bf1; --violet-deep:#4a26d9; --violet-soft:#ece7ff;
  --coral:#ff695c; --coral-ink:#b63326; --coral-soft:#ffe1dd;
  --night:#15122a; --night-tile:#221d3f;
  --on-night:#f5f4f0; --on-night-muted:#b9b4cf; --on-night-violet:#a995ff; --on-night-coral:#ff8a7f;
  --field-line:#8a84a1;
  --wrap:1360px; --gutter:clamp(16px,3vw,32px); --gap:clamp(12px,1.4vw,20px);
  --r-tile:18px; --r-btn:14px; --r-chip:999px;
  --shadow:0 14px 30px -18px rgba(23,20,43,.35);
  --f-head:"Outfit",system-ui,sans-serif; --f-body:"Onest",system-ui,sans-serif; --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --sc-accent:#5f3bf1; --sc-icon-stroke:2;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--f-body);overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{max-width:100%;height:auto}
img{display:block}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:700;letter-spacing:-.02em;line-height:1.08;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.2rem,1.3rem + 3.6vw,4.4rem);font-weight:800}
h2{font-size:clamp(1.7rem,1.15rem + 2vw,2.8rem)}
h3{font-size:clamp(1.18rem,1.05rem + .5vw,1.45rem);line-height:1.2}
h4{font-size:1.08rem;line-height:1.25}
p{margin:0 0 1em}
ul,ol{padding-left:1.2em}
a{color:var(--violet);text-decoration-thickness:1.5px;text-underline-offset:.18em}
a:hover{color:var(--violet-deep)}
strong,b{font-weight:600}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
[hidden]{display:none!important}
main{display:block;min-height:50vh}
::selection{background:var(--violet);color:#fff}

/* focus: one visible ring everywhere */
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:6px}
.tile--violet :focus-visible,.tile--night :focus-visible,.site-footer :focus-visible{outline-color:#fff}
.tile--coral :focus-visible{outline-color:var(--ink)}

/* ---------- helpers ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.bleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mono{font-family:var(--f-mono);font-weight:500;letter-spacing:.02em}
.eyebrow{display:block;font:500 .8rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--eyebrow,var(--muted));margin:0 0 .9em}
.tc{display:inline-flex;align-items:center;gap:.4em;font:500 .8rem/1 var(--f-mono);letter-spacing:.04em;padding:.42em .75em;border-radius:var(--r-chip);background:var(--ink);color:var(--on-night);white-space:nowrap;font-variant-numeric:tabular-nums}
.tc::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--coral);flex:none}
.tile--night .tc,.site-footer .tc{background:var(--on-night);color:var(--ink)}
.chip{display:inline-flex;align-items:center;gap:.45em;min-height:38px;padding:.38em .95em;border-radius:var(--r-chip);background:var(--tile);border:1px solid var(--line);color:var(--ink);font:500 .94rem/1.2 var(--f-body);text-decoration:none;transition:border-color .2s,background .2s}
a.chip:hover{border-color:var(--violet);color:var(--ink);background:var(--violet-soft)}
a.chip[aria-current],a.chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--on-night)}

/* tiles */
.tile{position:relative;background:var(--tile);border-radius:var(--r-tile);padding:clamp(20px,2.2vw,32px);color:var(--ink);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
a.tile{display:block;text-decoration:none}
a.tile:hover,.tile--lift:hover{transform:translateY(-4px);box-shadow:var(--shadow);color:var(--ink)}
.tile--violet{background:var(--violet);color:#fff;--eyebrow:#fff}
.tile--violet a:not(.btn):not(.chip){color:#fff}
.tile--coral{background:var(--coral);color:var(--ink);--eyebrow:var(--ink)}
.tile--coral a:not(.btn):not(.chip){color:var(--ink)}
.tile--night{background:var(--night);color:var(--on-night);--eyebrow:var(--on-night-muted);--muted:var(--on-night-muted)}
.tile--night a:not(.btn):not(.chip){color:var(--on-night-violet)}
a.tile--violet:hover{color:#fff}a.tile--night:hover{color:var(--on-night)}

/* grid: bento 6 columns desktop / 2 columns phone; pages set spans */
.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(2,minmax(0,1fr))}
.grid>*{min-width:0}
@media (min-width:900px){.grid{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.7em 1.35em;border-radius:var(--r-btn);border:2px solid var(--violet);background:var(--violet);color:#fff;font:600 1rem/1.15 var(--f-body);text-decoration:none;text-align:center;cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .2s var(--ease)}
.btn:hover{background:var(--violet-deep);border-color:var(--violet-deep);color:#fff}
.btn:active{transform:translateY(1px)}
.btn svg{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn--ghost{background:transparent;color:inherit;border-color:currentColor}
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--on-night)}
.tile--violet .btn--ghost:hover,.tile--night .btn--ghost:hover,.site-footer .btn--ghost:hover{background:#fff;border-color:#fff;color:var(--ink)}
.btn--light{background:#fff;border-color:#fff;color:var(--ink)}
.btn--light:hover{background:var(--violet-soft);border-color:var(--violet-soft);color:var(--ink)}
.btn--sm{min-height:40px;padding:.5em 1em;font-size:.94rem;border-radius:12px}
.btn.is-in{background:var(--violet-soft);border-color:var(--violet-soft);color:var(--violet-deep)}
.btn[disabled],.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.add-form{display:inline-flex;margin:0}

/* phone frame: 9:16, CSS-only fake UI, never numbers */
.phone{position:relative;aspect-ratio:9/16;width:100%;max-width:360px;border:8px solid var(--ink);border-radius:34px;overflow:hidden;background:var(--ink);box-shadow:0 30px 60px -36px rgba(23,20,43,.55)}
.phone::before{content:"";position:absolute;top:10px;left:50%;width:30%;height:18px;transform:translateX(-50%);border-radius:999px;background:var(--ink);z-index:2}
.phone img{width:100%;height:100%;object-fit:cover;display:block}
.phone-bar{position:absolute;left:14px;right:14px;bottom:16px;height:4px;border-radius:4px;background:rgba(255,255,255,.38);overflow:hidden;z-index:2}
.phone-bar::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left center;transform:scaleX(0);animation:va-progress 6s linear infinite}
@keyframes va-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ticker (home hook band) */
.ticker{overflow:hidden;display:flex}
.ticker-track{display:flex;flex:none;width:max-content;animation:va-ticker 48s linear infinite}
.ticker--rev .ticker-track{animation-direction:reverse}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
@keyframes va-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* tables */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--tile);border-radius:var(--r-tile);border:1px solid var(--line)}
.tbl{width:100%;border-collapse:collapse;font-size:.97rem;line-height:1.45}
.tbl caption{text-align:left;padding:16px 18px 0;font-weight:600}
.tbl th,.tbl td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.tbl thead th{font:500 .8rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.tbl tbody tr:last-child>*{border-bottom:0}
.tbl tbody th{font-weight:600}
.tbl .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}

/* payment strip */
.pay-strip{display:flex;flex-direction:column;gap:10px}
.pay-strip ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.pay-strip img{height:26px;width:auto;display:block}
.pay-strip p{margin:0;font-size:.88rem;line-height:1.45;color:var(--muted)}
.site-footer .pay-strip p{color:var(--on-night-muted)}

/* ---------- forms (zero specificity, scoped away from the chat widget) ---------- */
:where(main,.site-footer) :where(label){display:block;font-weight:600;font-size:.96rem;margin:0 0 6px}
:where(main,.site-footer) :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=file]),select,textarea){
  display:block;width:100%;min-height:48px;padding:11px 14px;border:1.5px solid var(--field-line);border-radius:12px;background:#fff;color:var(--ink);font:400 1rem/1.4 var(--f-body);transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
:where(main,.site-footer) :where(textarea){min-height:120px;resize:vertical}
:where(main,.site-footer) :where(select){padding-right:42px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317142b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/18px}
:where(main,.site-footer) :where(input,select,textarea):hover{border-color:var(--ink)}
:where(main,.site-footer) :where(input,select,textarea):focus-visible{outline:0;border-color:var(--violet);box-shadow:0 0 0 3px rgba(95,59,241,.28)}
:where(main,.site-footer) :where(input[type=checkbox],input[type=radio]){width:22px;height:22px;margin:0;flex:none;accent-color:var(--violet);cursor:pointer}
:where(main,.site-footer) :where([aria-invalid=true]){border-color:var(--coral-ink)}
::placeholder{color:#76718a;opacity:1}
.site-field{margin:0 0 18px}
.site-hint{display:block;font-size:.88rem;color:var(--muted);margin-top:6px}
.site-error{display:block;font-size:.92rem;font-weight:600;color:var(--coral-ink);margin-top:6px}
.site-alert{padding:14px 18px;border-radius:12px;background:var(--coral-soft);color:var(--ink);border-left:4px solid var(--coral-ink);margin:0 0 20px}
.site-check{display:flex;align-items:flex-start;gap:12px;font-weight:400;font-size:.97rem;line-height:1.5;cursor:pointer;min-height:44px;padding:4px 0}
.site-check input{margin-top:2px!important}
:where(main) :where(fieldset){border:0;padding:0;margin:0 0 28px;min-width:0}
:where(main) :where(legend){font:700 1.3rem/1.2 var(--f-head);letter-spacing:-.02em;padding:0;margin-bottom:14px}

/* ---------- reveal ---------- */
html.js .reveal{opacity:0;transform:translate(10px,22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
html.js .reveal[data-delay="1"]{transition-delay:.08s}
html.js .reveal[data-delay="2"]{transition-delay:.16s}
html.js .reveal[data-delay="3"]{transition-delay:.24s}

/* ---------- skip link ---------- */
.site-skip{position:absolute;left:12px;top:-60px;z-index:200;padding:12px 18px;border-radius:12px;background:var(--ink);color:#fff;font-weight:600;text-decoration:none}
.site-skip:focus{top:12px;color:#fff}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(245,244,240,.94);border-bottom:1px solid var(--line);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)}
.site-header-in{display:flex;align-items:center;gap:clamp(10px,1.6vw,24px);min-height:72px}
.site-logo{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;flex:none;min-height:44px}
.site-logo:hover{color:var(--ink)}
.site-logo img{width:39px;height:40px}
.site-word{display:flex;flex-direction:column;font:800 1.32rem/1 var(--f-head);letter-spacing:-.03em}
.site-word small{font:500 .8rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--violet);margin-top:4px}
.site-nav{margin-left:auto}
.site-nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.site-nav a,.site-menu-nav a{display:flex;align-items:center;min-height:44px;padding:0 13px;border-radius:999px;color:var(--ink);font:500 .98rem/1 var(--f-body);text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.site-nav a:hover{background:var(--violet-soft);color:var(--ink)}
.site-nav a[aria-current],.site-menu-nav a[aria-current]{background:var(--ink);color:var(--on-night)}
.site-search{position:relative;display:flex;align-items:center;flex:0 1 230px;margin:0}
.site-search input{width:100%;min-height:44px;padding:0 44px 0 16px;border:1.5px solid var(--field-line);border-radius:999px;background:#fff;color:var(--ink);font:400 .95rem/1 var(--f-body);-webkit-appearance:none;appearance:none}
.site-search input::-webkit-search-decoration{-webkit-appearance:none}
.site-search input:focus-visible{outline:0;border-color:var(--violet);box-shadow:0 0 0 3px rgba(95,59,241,.28)}
.site-search button{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
.site-search button:hover{background:var(--violet)}
.site-ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.site-search .site-ico{width:17px;height:17px}
.site-cart{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:0 14px;border-radius:999px;background:var(--tile);border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:.96rem;text-decoration:none;flex:none;transition:border-color .2s}
.site-cart:hover{border-color:var(--violet);color:var(--ink)}
.site-cart[aria-current]{border-color:var(--ink)}
.site-cart-n{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--violet);color:#fff;font:600 .8rem/1 var(--f-mono)}
.site-cart-n.is-zero{background:var(--line);color:var(--ink)}
.site-menu{display:none;position:static}
.site-menu>summary{list-style:none;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--ink);color:#fff;cursor:pointer}
.site-menu>summary::-webkit-details-marker{display:none}
.site-menu .site-ico-x{display:none}
.site-menu[open] .site-ico-x{display:block}
.site-menu[open] .site-ico-burger{display:none}
.site-menu-panel{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -28px rgba(23,20,43,.5);padding:16px var(--gutter) 22px;max-height:calc(100vh - 72px);overflow-y:auto}
.site-menu-nav ul{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:4px}
.site-menu-nav a{font-size:1.06rem;padding:0 16px;border-radius:12px;min-height:48px}
.site-menu-nav a:hover{background:var(--violet-soft)}
.site-menu .site-search{flex:none;width:100%}
@media (max-width:1180px){.site-search{flex-basis:180px}.site-nav a{padding:0 10px}}
@media (max-width:1060px){
  .site-nav,.site-header-in>.site-search{display:none}
  .site-menu{display:block}
  .site-cart{margin-left:auto}
  .site-header-in{min-height:64px}
  .site-menu-panel{max-height:calc(100vh - 64px)}
}
@media (max-width:420px){.site-cart-t{display:none}.site-word{font-size:1.18rem}.site-logo img{width:34px;height:35px}}

/* ---------- footer ---------- */
.site-footer{background:var(--night);color:var(--on-night);margin-top:clamp(56px,8vw,110px);padding:clamp(28px,4vw,48px) 0 96px;font-size:.97rem}
.site-footer a{color:var(--on-night)}
.site-footer a:hover{color:var(--on-night-violet)}
.site-foot-grid{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr)}
.site-foot-grid>*{min-width:0;border-radius:var(--r-tile);padding:clamp(20px,2.2vw,28px);background:var(--night-tile);margin:0}
.site-foot-grid .eyebrow{color:var(--on-night-muted)}
.site-foot-brand{background:#fff;color:var(--ink);grid-row:span 2;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.site-foot-brand a:not(.btn):not(.chip){color:var(--ink)}
.site-foot-brand img{width:170px;height:auto}
.site-foot-brand p{margin:0;color:var(--muted);max-width:40ch}
.site-foot-brand .btn{margin-top:auto}
.site-foot-grid nav ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.site-foot-grid li a{display:inline-flex;align-items:center;min-height:40px;text-decoration:none}
.site-foot-grid li a:hover{text-decoration:underline}
.site-foot-pay{grid-column:span 1}
.site-foot-copy{grid-column:2 / -1;background:transparent!important;border:1px solid rgba(185,180,207,.28);display:flex;align-items:center;font:500 .82rem/1.4 var(--f-mono);letter-spacing:.06em;color:var(--on-night-muted)}
@media (max-width:1000px){
  .site-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-foot-brand{grid-row:auto;grid-column:1 / -1}
  .site-foot-pay,.site-foot-copy{grid-column:1 / -1}
}
@media (max-width:520px){.site-foot-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- 404 ---------- */
.site-404{padding-block:clamp(32px,6vw,80px) 0}
.site-404-grid{grid-template-rows:auto}
.site-404-main{grid-column:1 / -1;display:flex;flex-direction:column;gap:14px;min-height:340px}
.site-404-main h1{margin:auto 0 0;max-width:14ch}
.site-404-main p{max-width:52ch;color:var(--muted);font-size:1.08rem;margin:0}
.site-404-time{display:flex;align-items:center;gap:12px}
.site-404-track{flex:1;height:6px;border-radius:6px;background:var(--line);position:relative;overflow:hidden}
.site-404-track::after{content:"";position:absolute;inset:0;width:100%;background:repeating-linear-gradient(90deg,var(--line) 0 10px,#cfcade 10px 20px)}
.site-404-search,.site-404-go{grid-column:span 1}
.site-404-search form{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.site-404-search label{font:500 .8rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.site-404-go ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.site-404-go li a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 4px;border-bottom:1px solid rgba(185,180,207,.3);font:600 1.12rem/1.2 var(--f-head);text-decoration:none}
.site-404-go li a:hover{color:#fff}
.site-404-go li span{font-family:var(--f-body);font-weight:400;font-size:.92rem;color:var(--on-night-muted)}
@media (min-width:900px){
  .site-404-main{grid-column:span 4;grid-row:span 2}
  .site-404-search,.site-404-go{grid-column:span 2}
}
@media (max-width:899px){.site-404-search,.site-404-go{grid-column:1 / -1}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  html.js .reveal{opacity:1;transform:none}
  .ticker-track{animation:none!important}
  .phone-bar::after{animation:none!important;transform:scaleX(.42)}
  a.tile:hover,.tile--lift:hover{transform:none}
}

@media print{.site-header,.site-footer,.site-skip{display:none}body{background:#fff}}