/* ==========================================================================
   MS GRIFES — link na bio
   Conceito: GRIFE DE RUA — a coroa dourada do brasao encontra o lettering
   de pincel da sacola e da parede da loja.
   Paleta amostrada da propria marca: preto + dourado da coroa + vermelho do cartaz.
   ========================================================================== */

:root{
  --bg:        #0A0A0B;
  --bg-soft:   #0F0F11;
  --surface:   #141416;
  --surface-2: #1A1A1D;
  --line:      #2A2823;
  --line-soft: #1D1C19;

  --ouro:      #C5A76D;
  --ouro-luz:  #F6DF91;
  --ouro-esc:  #8A6E3C;
  --vermelho:  #C2352F;

  --ink:       #F6F4F0;
  --ink-2:     #CBC6BC;
  --muted:     #8E897F;

  --radius:    14px;
  --radius-sm: 10px;
  --pad:       20px;
  --maxw:      440px;

  --f-head: "Anton", "Haettenschweiler", Impact, sans-serif;
  --f-body: "Manrope", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* halo dourado no topo, como a luz do brasao */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(115% 52% at 50% -8%, rgba(197,167,109,.20), transparent 62%),
    linear-gradient(180deg, #0C0B0A 0%, var(--bg) 40%, #060606 100%);
}

/* grao fino: textura de sacola / impressao */
.grain{
  position:fixed; inset:-50%; z-index:-1;
  opacity:.14; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.45'/></svg>");
}

.defs{ position:absolute; width:0; height:0; overflow:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{
  width:100%; max-width:var(--maxw);
  margin:0 auto;
  padding:34px var(--pad) 132px;
}

/* ------------------------------------------------------------------ HERO */

.hero{ text-align:center; }

.avatar{
  position:relative;
  width:150px; height:150px;
  margin:0 auto 18px;
  display:grid; place-items:center;
}
.avatar img{
  width:132px; height:132px;
  border-radius:50%;
  position:relative; z-index:2;
  background:#fff;
}
.avatar-ring{
  position:absolute; inset:0; z-index:1;
  border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(138,110,60,0) 0deg,
    rgba(197,167,109,.25) 60deg,
    var(--ouro-luz) 150deg,
    var(--ouro) 200deg,
    rgba(138,110,60,0) 300deg);
  -webkit-mask:radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 calc(100% - 3px));
          mask:radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 calc(100% - 3px));
  filter:drop-shadow(0 0 9px rgba(197,167,109,.55));
  animation:spin 3.4s linear infinite;
}
.avatar::before{
  content:"";
  position:absolute; inset:-12px; z-index:0;
  border-radius:50%;
  background:radial-gradient(circle, rgba(197,167,109,.26), transparent 68%);
  animation:pulse 3.6s ease-in-out infinite;
}
@keyframes spin{ to{ transform:rotate(1turn); } }
@keyframes pulse{ 0%,100%{ opacity:.5; transform:scale(1); } 50%{ opacity:.95; transform:scale(1.06); } }

.brand{
  font-family:var(--f-head);
  font-weight:400;
  line-height:.84;
  text-transform:uppercase;
  margin:0 0 12px;
}
.brand-ms{
  display:block;
  font-size:26px;
  letter-spacing:.34em;
  text-indent:.34em;
  color:var(--ink-2);
}
.brand-grifes{
  position:relative;
  display:inline-block;
  margin-top:6px;
  font-size:clamp(58px,22vw,86px);
  letter-spacing:.015em;
  background:linear-gradient(174deg, var(--ouro-luz) 4%, var(--ouro) 46%, var(--ouro-esc) 96%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  padding-bottom:8px;
}
/* traco de pincel: mesma mao do lettering da sacola */
.brush{
  position:absolute; left:-3%; bottom:0;
  width:106%; height:20px;
  fill:none; stroke:var(--ouro); stroke-width:7;
  stroke-linecap:round;
  opacity:.9;
  stroke-dasharray:330; stroke-dashoffset:330;
  animation:brush .95s var(--ease) .5s forwards;
}
@keyframes brush{ to{ stroke-dashoffset:0; } }

.handle{
  margin:0 0 14px;
  font-size:12.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

.tagline{
  margin:0 auto 22px;
  max-width:330px;
  font-size:15.5px;
  line-height:1.55;
  color:var(--ink-2);
}
.tagline strong{ color:var(--ouro); font-weight:700; }

.marquee{
  position:relative;
  overflow:hidden;
  padding:9px 0;
  margin:0 calc(var(--pad) * -1) 28px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:rgba(197,167,109,.045);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track{
  display:flex; align-items:center; gap:14px;
  width:max-content;
  animation:slide 24s linear infinite;
}
.marquee-track span{
  font-family:var(--f-head);
  font-size:12px;
  letter-spacing:.26em;
  color:var(--ouro);
  opacity:.75;
  white-space:nowrap;
}
.mk{ width:16px; height:10px; fill:var(--ouro); opacity:.5; flex:none; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------------------------------------------------------------- BOTOES */

.btn, .row{
  display:flex; align-items:center; gap:13px;
  width:100%;
  min-height:62px;
  padding:14px 16px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--surface);
  font-family:var(--f-head);
  transition:transform .16s var(--ease), background .2s ease, border-color .2s ease;
}
.btn:active, .row:active{ transform:scale(.985); }

.ico{ width:22px; height:22px; flex:0 0 22px; fill:currentColor; }
.arrow{
  width:15px; height:15px; margin-left:auto; flex:0 0 15px;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:.5;
  transition:transform .18s var(--ease), opacity .18s ease;
}

.btn-label{ display:flex; flex-direction:column; text-align:left; gap:2px; min-width:0; }
.btn-label strong{
  font-weight:400;
  font-size:15px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.btn-label small{
  font-family:var(--f-body);
  font-size:12px; font-weight:500;
  color:var(--muted);
  text-transform:none;
  letter-spacing:0;
}

/* CTA principal: a coroa vira botao — dourado solido sobre preto */
.btn-primary{
  min-height:72px;
  color:#120E06;
  border-color:var(--ouro-luz);
  background:linear-gradient(158deg, var(--ouro-luz) 2%, var(--ouro) 46%, var(--ouro-esc) 104%);
  box-shadow:0 16px 38px -16px rgba(197,167,109,.9), inset 0 1px 0 rgba(255,255,255,.42);
  position:relative; overflow:hidden;
}
.btn-primary .ico{ fill:#0B6B33; }
.btn-primary .btn-label small{ color:rgba(18,14,6,.62); }
.btn-primary .arrow{ opacity:.7; }
.btn-primary::after{
  content:"";
  position:absolute; top:0; left:-60%;
  width:36%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg);
  animation:sheen 5.2s ease-in-out 1.8s infinite;
}
@keyframes sheen{ 0%{ left:-60%; } 20%{ left:132%; } 100%{ left:132%; } }

.cta-block{ margin-bottom:36px; }
.cta-note{
  margin:11px 0 0;
  text-align:center;
  font-size:12px;
  letter-spacing:.04em;
  color:var(--muted);
}

.row{ color:var(--ink); }
.row .ico{ fill:var(--ouro); }

.btn-outline{
  justify-content:center;
  gap:9px;
  min-height:54px;
  padding:0 12px;
  background:transparent;
  border-color:var(--line);
  color:var(--ink-2);
  font-size:12.5px;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.btn-outline .ico{ width:17px; height:17px; flex:0 0 17px; fill:var(--ouro); }

/* ---------------------------------------------------------------- SECOES */

.section{ margin-bottom:36px; }

.section-title{
  display:flex; align-items:center; gap:10px;
  margin:0 0 4px;
  font-family:var(--f-head);
  font-size:13px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.tt-crown{ width:17px; height:11px; fill:var(--ouro); flex:none; }
.section-title::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, var(--line), transparent);
}
.section-sub{
  margin:0 0 16px;
  font-size:13px;
  color:var(--muted);
}

/* --------------------------------------------------------------- VITRINE */

.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:10px;
}

.card{
  position:relative;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:116px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:
    linear-gradient(160deg, rgba(197,167,109,.10), rgba(197,167,109,0) 58%),
    var(--surface);
  overflow:hidden;
  transition:transform .16s var(--ease), border-color .2s ease;
}
.card::before{
  content:"";
  position:absolute; left:0; top:0;
  width:100%; height:2px;
  background:linear-gradient(90deg, var(--ouro), transparent 78%);
  opacity:.65;
}
.card-crown{
  position:absolute; right:-8px; top:6px;
  width:56px; height:36px;
  fill:var(--ouro);
  opacity:.10;
}
.card-idx{
  font-family:var(--f-head);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--ouro);
  opacity:.7;
  margin-bottom:auto;
}
.card-name{
  font-family:var(--f-head);
  font-size:19px;
  letter-spacing:.04em;
  line-height:1.05;
}
.card-desc{
  margin-top:4px;
  font-size:11.5px;
  line-height:1.35;
  color:var(--muted);
}
.card:active{ transform:scale(.985); }

/* -------------------------------------------------------------- DESTAQUE */

.feature{
  position:relative;
  display:block;
  padding:24px 20px 20px;
  border:1px solid rgba(197,167,109,.34);
  border-radius:var(--radius);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(197,167,109,.16), transparent 68%),
    var(--surface);
  overflow:hidden;
  transition:transform .16s var(--ease), border-color .2s ease;
}
.feature::before{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(135deg, rgba(197,167,109,.05) 0 2px, transparent 2px 9px);
  pointer-events:none;
}
.feature:active{ transform:scale(.99); }
.feature-crown{
  position:absolute; right:14px; top:16px;
  width:74px; height:48px;
  fill:var(--ouro);
  opacity:.16;
}
.tag{
  display:inline-block;
  margin-bottom:13px;
  padding:5px 9px;
  border-radius:4px;
  background:var(--ouro);
  color:#120E06;
  font-family:var(--f-head);
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.feature h3{
  position:relative;
  margin:0 0 9px;
  font-family:var(--f-head);
  font-weight:400;
  font-size:31px;
  line-height:1.02;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--ink);
}
.feature p{
  position:relative;
  margin:0 0 16px;
  max-width:290px;
  font-size:13.5px;
  line-height:1.5;
  color:var(--ink-2);
}
.feature-link{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  padding-bottom:4px;
  border-bottom:1px solid rgba(197,167,109,.5);
  font-family:var(--f-head);
  font-size:12.5px;
  letter-spacing:.13em;
  color:var(--ouro-luz);
}
.feature-link .arrow{ width:13px; height:13px; margin:0; opacity:.85; }

/* ------------------------------------------------------------- MANIFESTO */

.manifesto{
  position:relative;
  margin:0 calc(var(--pad) * -1) 36px;
  padding:26px var(--pad) 24px;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg, #0D0C0C, #0A0A0B);
}
.manifesto-shot{
  margin:0 0 18px;
  border-radius:var(--radius-sm);
  overflow:hidden;
  border:1px solid var(--line);
  position:relative;
}
.manifesto-shot img{
  width:100%; height:172px;
  object-fit:cover; object-position:center 42%;
  filter:contrast(1.06) saturate(.9) brightness(.92);
}
.manifesto-shot::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,11,.15), rgba(10,10,11,.72));
}
.manifesto blockquote{
  margin:0;
  font-family:var(--f-head);
  font-weight:400;
  font-size:clamp(20px,5.9vw,25px);
  line-height:1.22;
  text-transform:uppercase;
  color:var(--ink);
}
.manifesto em{
  font-style:normal;
  color:var(--ouro-luz);
  padding:0 3px;
  background-image:linear-gradient(transparent 66%, rgba(194,53,47,.62) 66%);
  background-repeat:no-repeat;
  background-size:0% 100%;
}
.manifesto.is-in em,
.manifesto:not(.reveal) em{
  animation:risco .8s var(--ease) .25s forwards;
}
@keyframes risco{ to{ background-size:100% 100%; } }
.manifesto-src{
  display:block;
  margin-top:14px;
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------------------------------------------------------------- FATOS */

.facts{
  list-style:none;
  margin:0 0 10px;
  padding:0;
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  background:var(--bg-soft);
}
.facts li{
  display:flex; align-items:center; gap:13px;
  padding:13px 15px;
  border-bottom:1px solid var(--line-soft);
}
.facts li:last-child{ border-bottom:0; }
.fact-ico{
  flex:0 0 34px;
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:9px;
  background:rgba(197,167,109,.10);
  border:1px solid rgba(197,167,109,.16);
}
.fact-ico svg{ width:18px; height:18px; fill:var(--ouro); }
.facts div{ display:flex; flex-direction:column; min-width:0; }
.facts strong{
  font-family:var(--f-head);
  font-weight:400;
  font-size:14.5px;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.facts span{ font-size:12px; color:var(--muted); }

/* ----------------------------------------------------------- LOCALIZACAO */

.place{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  overflow:hidden;
}
.place-shot{ position:relative; }
.place-shot img{
  width:100%; height:150px;
  object-fit:cover; object-position:center 58%;
  filter:contrast(1.04) saturate(.92) brightness(.86);
}
.place-shot::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,11,.25) 0%, rgba(20,20,22,.35) 55%, var(--surface) 100%);
}
.place address{
  font-style:normal;
  display:flex; flex-direction:column; gap:3px;
  margin:-14px 0 15px;
  position:relative; z-index:1;
  text-align:center;
  font-size:13.5px;
  color:var(--muted);
}
.place address strong{
  font-family:var(--f-head);
  font-weight:400;
  font-size:22px;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--ink);
}
.place-btns{
  display:grid; grid-template-columns:1fr 1fr; gap:9px;
  padding:0 15px 15px;
}

/* ---------------------------------------------------------------- RODAPE */

.foot{
  text-align:center;
  padding-top:28px;
  border-top:1px solid var(--line-soft);
}
.foot img{
  width:46px; height:46px;
  border-radius:50%;
  margin:0 auto 12px;
  opacity:.9;
}
.foot-brand{
  margin:0 0 6px;
  font-family:var(--f-head);
  font-size:12px;
  letter-spacing:.24em;
  color:var(--ouro);
}
.foot-line{ margin:0 0 14px; font-size:12px; color:var(--muted); }
.foot-sign{ margin:0; font-size:11px; letter-spacing:.05em; color:#5F5B54; }
.foot-sign a{ color:var(--muted); border-bottom:1px solid #33312C; }

/* ------------------------------------------------------------ STICKY CTA */

.sticky-cta{
  position:fixed;
  left:50%; bottom:calc(16px + env(safe-area-inset-bottom));
  transform:translate(-50%, 145%);
  z-index:20;
  width:calc(100% - 40px);
  max-width:calc(var(--maxw) - 40px);
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px;
  padding:0 18px;
  border-radius:999px;
  background:linear-gradient(158deg, var(--ouro-luz), var(--ouro) 48%, var(--ouro-esc));
  color:#120E06;
  font-family:var(--f-head);
  font-size:14px;
  letter-spacing:.1em;
  box-shadow:0 14px 36px rgba(0,0,0,.72), 0 0 0 1px rgba(246,223,145,.3);
  transition:transform .34s var(--ease);
}
.sticky-cta .ico{ width:20px; height:20px; fill:#0B6B33; }
.sticky-cta.is-visible{ transform:translate(-50%, 0); }
.sticky-cta:active{ transform:translate(-50%, 0) scale(.98); }

/* -------------------------------------------------------------- REVEAL */
/* a classe .reveal so e aplicada pelo JS: sem JS, nada fica escondido */
.has-js .reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.has-js .reveal.is-in{ opacity:1; transform:none; }

/* ----------------------------------------------------------------- FOCO */

a:focus-visible{
  outline:2px solid var(--ouro-luz);
  outline-offset:3px;
  border-radius:8px;
}

/* ---------------------------------------------------------- RESPONSIVO */

@media (hover:hover){
  .btn:hover, .row:hover{ transform:translateY(-2px); }
  .row:hover, .btn-outline:hover{ background:var(--surface-2); border-color:#3A362E; }
  .btn:hover .arrow, .row:hover .arrow{ transform:translateX(3px); opacity:.95; }
  .card:hover{ transform:translateY(-3px); border-color:rgba(197,167,109,.42); }
  .feature:hover{ border-color:var(--ouro); }
  .foot-sign a:hover{ color:var(--ink); }
}

@media (max-width:359px){
  .brand-grifes{ font-size:54px; }
  .card{ min-height:108px; }
  .card-name{ font-size:17px; }
  .btn-label strong{ font-size:14px; }
  .place-btns{ grid-template-columns:1fr; }
  .feature h3{ font-size:27px; }
}

@media (min-width:520px){
  .wrap{ padding-top:52px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .avatar-ring{
    background:none;
    border:3px solid var(--ouro);
    -webkit-mask:none; mask:none;
    filter:none;
  }
  .brush{ stroke-dashoffset:0; }
  .manifesto em{ background-size:100% 100%; }
  .sticky-cta{ transition:none; }
}