/* Marka Distribuidora | Estilos da página provisória */

/* ---------- Fontes (Assistant, SIL Open Font License) ---------- */
@font-face{font-family:"Assistant";font-style:normal;font-weight:300;font-display:swap;
  src:url("../fonts/assistant-latin-300-normal.woff2") format("woff2");}
@font-face{font-family:"Assistant";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/assistant-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Assistant";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/assistant-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:"Assistant";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/assistant-latin-700-normal.woff2") format("woff2");}
@font-face{font-family:"Assistant";font-style:normal;font-weight:800;font-display:swap;
  src:url("../fonts/assistant-latin-800-normal.woff2") format("woff2");}

/* ---------- Tokens ---------- */
:root{
  --navy:#0A222E; --deep:#14435C; --blue-dark:#1D5D7F; --blue:#50B6D2;
  --blue-light:#B7E2E9; --gold:#C8B992; --white:#F7F9FA; --muted:rgba(234,246,249,.62);
  --line:rgba(183,226,233,.14);
}

/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"Assistant",system-ui,sans-serif;color:var(--white);
  background:radial-gradient(120% 90% at 85% 10%,#1D5D7F 0%,#14435C 38%,#0A222E 78%) fixed;
  background-color:var(--navy);
  min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before{ /* grade técnica */
  content:"";position:fixed;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(183,226,233,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(183,226,233,.05) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 70% 40%,#000 0%,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 0%,transparent 70%);
}
/* Órbita: anéis decorativos + selo da Marka centralizado no anel menor */
.orbit{position:fixed;right:-18vmax;top:50%;transform:translateY(-50%);width:80vmax;height:80vmax;pointer-events:none}
.rings{display:block;width:100%;height:100%;opacity:.16}
.orbit-logo{position:absolute;left:50%;top:50%;width:30%;height:auto;transform:translate(-50%,-50%);
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.35));opacity:0;animation:logo-in 1.2s .8s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes logo-in{from{opacity:0;transform:translate(-50%,-50%) scale(.92)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.rings circle{fill:none;stroke:var(--blue-light);stroke-width:.2}
.rings .g{stroke:var(--gold);stroke-width:.5;stroke-dasharray:2 5;transform-origin:50% 50%;animation:spin 90s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.wrap{position:relative;z-index:1;width:100%;max-width:1180px;margin:0 auto;padding-left:clamp(20px,5vw,56px);padding-right:clamp(20px,5vw,56px)}

/* ---------- Cabeçalho ---------- */
.site-header{display:flex;align-items:center;justify-content:space-between;padding-top:32px}
/* Troque .brand pelo logotipo oficial: <img src="assets/logo-marka.svg" alt="Marka Distribuidora" height="44"> */
.brand{display:flex;flex-direction:column;line-height:1;text-decoration:none;color:inherit}
.brand b{font-weight:800;letter-spacing:.32em;font-size:22px}
.brand span{font-weight:400;letter-spacing:.42em;font-size:9.5px;color:var(--gold);margin-top:6px}
.since{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}

/* ---------- Hero ---------- */
.hero{flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:8vh;padding-bottom:6vh}
.pill{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;background:var(--gold);color:var(--navy);
  font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding:8px 16px;border-radius:999px}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--navy);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
h1{font-weight:800;font-size:clamp(40px,7.2vw,92px);line-height:.98;letter-spacing:-.02em;margin-top:28px;max-width:13ch}
h1 em{font-style:normal;color:var(--blue-light)}
.rule{width:88px;height:1px;background:var(--gold);margin:34px 0 26px}
.lead{font-size:clamp(17px,1.7vw,21px);font-weight:300;line-height:1.55;color:var(--muted);max-width:56ch}
.lead strong{color:var(--white);font-weight:600}

.btn{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-weight:700;font-size:16px;
  padding:17px 28px;border-radius:999px;transition:transform .2s,box-shadow .2s}
.btn-primary{margin-top:40px;align-self:flex-start;background:var(--white);color:var(--navy);box-shadow:0 10px 40px -10px rgba(80,182,210,.55)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 48px -10px rgba(80,182,210,.75)}
.btn svg{width:20px;height:20px;flex:none}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
.actions .btn-primary{margin-top:0}
.btn-ghost{color:var(--white);border:1px solid rgba(234,246,249,.28)}
.btn-ghost:hover{background:rgba(234,246,249,.08)}
.hours{margin-top:14px;font-size:14px;color:var(--muted)}

/* ---------- Canais oficiais ---------- */
.channels{padding-bottom:56px}
.channels-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-bottom:18px}
.channels-head h2{font-size:13px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:10px}
.channels-head h2 svg{width:16px;height:16px}
.channels-head p{font-size:14px;color:var(--muted);max-width:60ch}
.channel-grid{list-style:none;display:grid;grid-template-columns:.95fr 1.3fr 1fr 1.3fr 1.45fr;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.channel-grid a{display:flex;flex-direction:column;gap:12px;height:100%;padding:20px 18px 22px;text-decoration:none;color:var(--white);
  background:rgba(10,34,46,.55);backdrop-filter:blur(6px);transition:background .2s}
.channel-grid a:hover{background:rgba(29,93,127,.55)}
.channel-grid svg{width:22px;height:22px;color:var(--blue-light)}
.channel-grid small{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:3px}
.channel-grid span{font-size:14px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}

/* ---------- Rodapé ---------- */
.site-footer{padding-top:26px;padding-bottom:30px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 32px;
  justify-content:space-between;font-size:13px;color:var(--muted);line-height:1.6}
.site-footer strong{color:var(--white);font-weight:600}
.site-footer a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(200,185,146,.4)}
.site-footer a:hover{color:var(--white)}
.site-footer .credit{align-self:flex-end}

/* ---------- Animação ---------- */
.reveal{opacity:0;transform:translateY(14px);animation:in .9s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.1s}.d2{animation-delay:.25s}.d3{animation-delay:.4s}.d4{animation-delay:.55s}.d5{animation-delay:.7s}
@keyframes in{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}.reveal,.orbit-logo{opacity:1}.reveal{transform:none}}

/* ---------- Responsivo ---------- */
/* Em telas menores o selo cobriria o texto: fica só nos anéis */
@media (max-width:1199px){ .orbit-logo{display:none} }
@media (max-width:1000px){ .channel-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .channel-grid li:last-child{grid-column:1/-1} }
@media (max-width:640px){
  .since{display:none}
  .btn-primary{align-self:stretch;justify-content:center}
  .actions .btn{width:100%;justify-content:center}
  .channel-grid{grid-template-columns:1fr}
  .channel-grid a{flex-direction:row;align-items:center;gap:16px}
  .orbit{right:-50vmax}
  .rings{opacity:.12}
  .site-footer{flex-direction:column}
  .site-footer .credit{align-self:flex-start}
}