/* REDZONE STUDIO — claro, borderless, com hierarquia
   bg #ffffff | ink #141416 | accent #e8262f | logo PNG transparente
   display Anton (marquee) + Inter | hero vídeo + logo sobreposta
   superfícies em cinza suave + sombras leves, nenhuma borda */

:root{
  --bg:#ffffff;
  --soft:#f4f4f5;
  --ink:#141416;
  --muted:#5b5b60;
  --faint:#9a9aa0;
  --red:#e8262f;
  --red-deep:#a8121a;
  --red-soft:#fdecec;
  --radius:18px;
  --max:520px;
  --shadow:0 12px 32px rgba(20,20,22,.09);
  --shadow-red:0 14px 34px rgba(232,38,47,.32);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;
  -webkit-font-smoothing:antialiased;
}

/* ---------- HERO ---------- */
.hero-media{
  position:relative;width:100%;height:46vh;min-height:300px;max-height:520px;
  overflow:hidden;background:#111;
}
.hero-media video{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero-tint{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(255,255,255,0) 45%,rgba(255,255,255,.7) 100%);
}
.hero-media .fade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0) 55%,var(--bg) 100%);
}

/* ---------- WRAP ---------- */
.wrap{
  width:100%;max-width:var(--max);z-index:2;
  margin-top:-64px;padding:0 20px 42px;
  display:flex;flex-direction:column;gap:18px;
}

/* ---------- INTRO ---------- */
.intro{text-align:center;display:flex;flex-direction:column;align-items:center}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.avatar-ring{
  width:min(300px,80vw);margin:0;padding:0;
  background:transparent;
}
.avatar{
  width:100%;height:auto;object-fit:contain;display:block;
  background:transparent;
  filter:drop-shadow(0 12px 24px rgba(20,20,22,.20));
}
.handle{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  background:var(--red);color:#fff;font-size:14.5px;font-weight:600;letter-spacing:.02em;
  padding:9px 20px;border-radius:999px;text-decoration:none;
  box-shadow:var(--shadow-red);
}
.handle::before{content:"";display:none}
.rule{display:flex;align-items:center;gap:10px;margin:16px auto;width:110px}
.rule span{flex:1;height:2px;background:var(--red);border-radius:2px}
.rule i{font-style:normal;font-size:8px;color:var(--red)}
.lead{font-size:15.5px;font-weight:500;color:var(--ink)}
.hours{font-size:13px;font-weight:400;color:var(--muted);margin-top:7px}
.hours i{color:var(--red);margin-right:6px}

/* ---------- MARQUEE (faixa de anúncios animada) ---------- */
.marquee{
  overflow:hidden;margin:2px -20px 0;padding:11px 0;
  background:var(--red);
}
.marquee-track{
  display:flex;width:max-content;will-change:transform;
  -webkit-animation:marquee-scroll 16s linear infinite;
  animation:marquee-scroll 16s linear infinite;
}
.marquee-track span{
  flex:0 0 auto;
  font-family:'Anton',sans-serif;font-size:14px;letter-spacing:.28em;color:#fff;
  white-space:nowrap;padding-right:8px;
}
@-webkit-keyframes marquee-scroll{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(-50%)}}
@keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- STATS ---------- */
.stats{
  display:flex;align-items:stretch;justify-content:center;gap:8px;
  padding:18px 10px;background:var(--soft);
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.stat{flex:1;text-align:center;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.stat strong{font-family:'Anton',sans-serif;font-size:25px;font-weight:400;color:#111;line-height:1;letter-spacing:.03em}
.stat strong i{font-size:21px;color:var(--red)}
.stat small{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);line-height:1.6}
.stat-divider{width:1px;background:rgba(20,20,22,.10)}

/* ---------- PROCESSO ---------- */
.process{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:18px 12px;background:var(--soft);
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.step{flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.step > i{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:17px;
  color:#fff;background:linear-gradient(180deg,var(--red),var(--red-deep));
  box-shadow:var(--shadow-red);
}
.step p{display:flex;flex-direction:column;gap:3px}
.step strong{font-size:11px;letter-spacing:.12em;font-weight:700;color:#111}
.step small{font-size:11.5px;color:var(--muted);font-weight:400}
.step-arrow{color:var(--red);font-size:11px;opacity:.75}

/* ---------- BOTÕES ---------- */
.links{display:flex;flex-direction:column;gap:12px}
.btn{
  display:flex;align-items:center;gap:14px;
  border-radius:16px;padding:16px 18px;
  text-decoration:none;color:var(--ink);
  transition:transform .2s ease,filter .2s ease;
}
.btn:active{transform:scale(.985)}
.btn > i:first-child{
  width:42px;height:42px;flex:0 0 42px;border-radius:13px;
  display:grid;place-items:center;font-size:19px;
}
.btn span{flex:1;display:flex;flex-direction:column;gap:3px;text-align:left}
.btn strong{font-size:13.5px;font-weight:700;letter-spacing:.12em}
.btn small{font-size:12.5px;font-weight:400;color:var(--muted)}
.btn .arrow{font-size:15px}

.btn-primary{background:linear-gradient(180deg,#f2333d,var(--red-deep));color:#fff;box-shadow:var(--shadow-red)}
.btn-primary small{color:rgba(255,255,255,.88)}
.btn-primary > i:first-child{background:rgba(0,0,0,.20);color:#fff}
.btn-primary .arrow{color:#fff}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.05)}

.btn-ghost{background:var(--soft);color:var(--ink);box-shadow:var(--shadow)}
.btn-ghost > i:first-child{background:#fff;color:var(--red);box-shadow:0 4px 12px rgba(20,20,22,.08)}
.btn-ghost:hover{transform:translateY(-2px)}
.btn-small{justify-content:center;padding:14px 16px}
.btn-small span{flex:0}

/* ---------- SHOWCASE / PORTFÓLIO ---------- */
.showcase{text-align:center}
.showcase-frame{
  background:var(--soft);border-radius:var(--radius);
  padding:18px 14px;box-shadow:var(--shadow);
}
.block-label{font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--faint);font-weight:700;margin-bottom:12px;padding-left:.32em}
.portfolio-btn{width:100%;margin-bottom:12px;background:#fff}
.insta-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.insta-cell{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:18px 8px;border-radius:14px;color:var(--ink);cursor:default;
  background:#fff;box-shadow:0 6px 18px rgba(20,20,22,.07);
}
.insta-cell i{font-size:20px;color:var(--red)}
.insta-cell small{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.btn-vermais{margin-top:12px;width:100%;background:#fff}
.btn-vermais i{color:var(--red);font-size:16px}

/* ---------- ENDEREÇO ---------- */
.card{background:var(--soft);border-radius:var(--radius);padding:18px 14px;box-shadow:var(--shadow)}
.addr{text-align:center;font-size:13px;color:var(--muted);font-weight:400;margin-bottom:12px}
.addr .pin{color:var(--red);margin-right:6px}
.map{border-radius:14px;overflow:hidden;box-shadow:0 6px 18px rgba(20,20,22,.08)}
.map iframe{width:100%;height:200px;border:0;display:block}
.card .btn{margin-top:12px;background:#fff}

/* ---------- FOOTER ---------- */
.footer{text-align:center;padding:2px 0 0}
.footer p{font-size:11px;letter-spacing:.12em;color:var(--faint);font-weight:400}

/* ---------- ENTRADA ---------- */
.reveal{opacity:0;transform:translateY(18px);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
.stats.reveal{animation-delay:.08s}
.process.reveal{animation-delay:.14s}
.showcase.reveal{animation-delay:.2s}
.address.reveal{animation-delay:.26s}
@keyframes rise{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .reveal{animation:none;opacity:1;transform:none}
  /* marquee é decorativa e pedida pelo cliente: continua animando */
}
@media (max-width:380px){
  .hero-media{min-height:270px}
  .wrap{margin-top:-52px;padding:0 16px 34px}
  .marquee{margin-left:-16px;margin-right:-16px}
  .btn strong{letter-spacing:.07em}
}