:root{
  /* Paleta suavizada (azuis claros + superfícies mais claras) */
  --mxm-bg:#0e1628;
  --mxm-surface:#14213a;
  --mxm-border:#223351;
  --mxm-text:#eef6ff;
  --mxm-muted:#b8c9e6;

  --mxm-blue-300:#7cc6ff;
  --mxm-blue-500:#5ab5ff;
  --mxm-cyan-400:#55e6ff;
  --mxm-sky-500:#38bdf8;
  --mxm-indigo-600:#6476ff;

  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.18);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:var(--mxm-text);
  /* Fundo uniforme para evitar mistura de cores entre seções */
  background: var(--mxm-bg);
  line-height:1.6;
  scroll-behavior:smooth;
}

.container{width:min(1120px,92vw); margin-inline:auto}
@media (max-width: 960px){
  .container{width:94vw}
}
img{max-width:100%; display:block}

.header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,15,29,.6);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header__inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--mxm-text); font-weight:800}
.logo img{width:36px; height:auto}

.nav__toggle{
  display:none; background:none; border:0; cursor:pointer; padding:8px;
}
.nav__toggle span{display:block; width:24px; height:2px; background:var(--mxm-text); margin:5px 0}
.nav__list{display:flex; gap:18px; list-style:none; padding:0; margin:0; align-items:center}
.nav__list a{color:var(--mxm-text); text-decoration:none; opacity:.9}
.nav__list a:hover{opacity:1}

/* Menu mobile (mostrar toggle e dropdown suave) */
@media (max-width: 960px){
  .nav__toggle{display:block}
  .nav__list{
    position:absolute; right:12px; top:58px;
    display:none; flex-direction:column; gap:8px; padding:12px;
    background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(20,33,58,.85));
    border:1px solid rgba(255,255,255,.18); border-radius:14px; width:max(220px, 46vw);
    box-shadow:var(--shadow)
  }
  .nav__list.open{display:flex}
}

.btn{
  --bg:linear-gradient(135deg, var(--mxm-sky-500), var(--mxm-indigo-600));
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:12px; text-decoration:none; color:white; font-weight:700; border:1px solid transparent;
  transition:.25s transform ease, .25s box-shadow ease, .25s opacity ease, .25s background ease;
  box-shadow: 0 8px 20px rgba(79,70,229,.25);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--bg)}
.btn--outline{background:transparent; border-color:#3a4b67; color:var(--mxm-text)}
.btn--ghost{background:transparent; border-color:transparent; color:var(--mxm-text); opacity:.8}
.btn--sm{padding:8px 14px; font-size:.9rem}

/* Foco visível acessível */
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(90,181,255,.45), 0 0 0 6px rgba(20,33,58,.35);
}

.badge{
  display:inline-block; padding:6px 12px; border-radius:999px;
  background:rgba(34,211,238,.12); color:#bef0ff; border:1px solid rgba(190,240,255,.2);
  font-weight:700; letter-spacing:.25px; margin-bottom:14px;
}

.grad-text{
  background: linear-gradient(90deg, #22d3ee, #60a5fa 50%, #4f46e5);
  -webkit-background-clip: text; background-clip:text; color:transparent;
}

.lead{color:var(--mxm-muted); font-size:1.075rem}

.hero{padding:72px 0 32px; background: radial-gradient(900px 420px at 60% 40%, rgba(56,189,248,.15), transparent 60%)}
.hero__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center}
.hero__copy .hero__bullets{margin:16px 0 18px; padding-left:18px}
.hero__copy .hero__bullets li{margin:8px 0}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap}
.hero__media{position:relative}
.trust{opacity:.9; margin-top:10px}

.section{padding:64px 0}
.section__title{font-size:clamp(1.6rem, 1.3rem + 1.5vw, 2.2rem); margin:0 0 8px}
.section__subtitle{color:var(--mxm-muted); margin:0 0 28px}

.brands__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media (max-width: 960px){
  .brands__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 560px){
  .brands__grid{grid-template-columns:1fr}
}
.brand-card{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius); padding:22px; display:grid; place-items:center;
  transition:.25s ease; filter:none; opacity:1;
}
.brand-card:hover{transform:translateY(-4px); filter:hue-rotate(8deg) saturate(1.15) brightness(1.05)}
.brand-card .brand-name{font-weight:800; margin-bottom:10px; text-transform:uppercase; letter-spacing:.5px; color:#eaf3ff}

.regions{background:none}
.regions .regions__tags{display:flex; flex-wrap:wrap; gap:10px}
.regions .regions__tags{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:12px; margin-top:12px; position:initial; overflow:visible;
  background:none; border:0; border-radius:0; padding:0; box-shadow:none;
}
.regions .regions__tags::before{content:none}
.tag{
  display:flex; align-items:center; gap:10px; justify-content:flex-start;
  padding:12px 14px; border-radius:12px; text-align:left;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  font-weight:700; font-size:1rem; color:#eaf3ff;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.tag::before{content:"📍"; font-size:18px; line-height:1; opacity:.95}
.tag:hover{background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.18); transform:translateY(-2px)}
.tag:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(90,181,255,.45), 0 0 0 6px rgba(20,33,58,.35)}
@media (max-width: 960px){
  .regions .regions__tags{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width: 560px){
  .regions .regions__tags{grid-template-columns:1fr}
}
.regions__gallery{margin-top:22px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.regions__gallery img{
  border-radius:14px; border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow)
}

/* ======== INSTAGRAM ======== */
.instagram__grid{margin-top:22px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
/* Offset para header fixo ao usar âncoras */
:target{scroll-margin-top:72px}
.instagram__grid img{border-radius:14px; border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow); transition:transform .25s ease, opacity .25s ease}
.instagram__grid img:hover{transform:scale(1.02)}
@media (max-width: 960px){
  .regions__gallery, .instagram__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 560px){
  .regions__gallery, .instagram__grid{grid-template-columns:1fr}
}

.faq__item{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius); padding:16px 18px; margin:14px 0;
}
.faq__item summary{cursor:pointer; font-weight:700}
.faq__item[open] summary{color:#bfe8ff}
.faq__content{color:var(--mxm-muted); padding-top:8px}
.faq__cta{margin-top:20px}

.contact__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start;
  background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(88,188,248,.10) 35%, rgba(100,118,255,.10));
  padding:24px; border-radius:var(--radius); border:1px solid rgba(255,255,255,.14);
}
.contact__cta .btn{min-height:44px}
@media (max-width: 960px){
  .contact__grid{grid-template-columns:1fr; padding:18px}
}
.contact__list{margin:10px 0 0 18px}
.contact__form{display:grid; gap:12px}
.contact__form label{display:grid; gap:6px; font-weight:600}
.contact__form input, .contact__form select{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.12);
  border-radius:12px; color:var(--mxm-text); padding:12px;
}
.contact__form .error-msg{color:#fca5a5; font-size:.9rem}
.contact__form .input-error{border-color:#ef4444; background:rgba(239,68,68,.08)}
.form__hint{color:var(--mxm-muted); font-size:.9rem; margin:6px 0 0}

.footer{padding:36px 0 16px; border-top:1px solid rgba(255,255,255,.12)}
.footer__grid{display:grid; grid-template-columns:1.1fr .6fr .6fr; gap:18px}
@media (max-width: 960px){
  .footer__grid{grid-template-columns:1fr}
}

/* ======== WhatsApp CTA Grid ======== */
.wa-cta-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:center}
.wa-cta-grid .wa-img img{border-radius:var(--radius); border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow); width:100%; height:auto; aspect-ratio:1/1; object-fit:cover}
@media (max-width: 960px){
  .wa-cta-grid{grid-template-columns:1fr}
}
.footer h3{margin:0 0 10px}
.footer ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.footer a{color:var(--mxm-text); text-decoration:none; opacity:.9}
.footer a:hover{opacity:1}
.copyright{text-align:center; opacity:.6; margin-top:18px}

.whats-float{
  position:fixed; right:18px; bottom:18px; width:80px; height:80px; display:grid; place-items:center;
  background:linear-gradient(135deg, #25D366, #128C7E);
  border-radius:999px; box-shadow:0 12px 28px rgba(18,140,126,.38);
  border:1px solid rgba(255,255,255,.22);
  z-index:9999;
  animation: wa-pulse 2.2s ease-in-out infinite;
}
.whats-float::before{display:none}
.whats-float::after{
  content:""; position:absolute; inset:-6px; border-radius:inherit;
  border:2px solid rgba(37,211,102,.55); opacity:.0; transform:scale(.85);
  animation: wa-ring 2.2s ease-out infinite;
}
.whats-float:hover{transform:translateY(-2px)}
.whats-float svg{width:32px; height:32px; fill:white}
@media (max-width: 560px){
  .whats-float{width:74px; height:74px; right:14px; bottom:14px}
}

@keyframes wa-pulse{
  0%, 100%{ box-shadow:0 12px 28px rgba(18,140,126,.38) }
  50%{ box-shadow:0 16px 36px rgba(18,140,126,.46) }
}
@keyframes wa-ring{
  0%{ opacity:.0; transform:scale(.85) }
  40%{ opacity:.55; transform:scale(1) }
  100%{ opacity:0; transform:scale(1.25) }
}

.reveal{opacity:0; transform: translateY(14px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
[data-delay="50"]{transition-delay:.05s}
[data-delay="100"]{transition-delay:.1s}
[data-delay="150"]{transition-delay:.15s}

/* Fade-in suave das imagens reais do cliente */
.img-fade{opacity:0; transition:opacity .6s ease}
.img-fade.loaded{opacity:1}

/* ======== HERO SLIDER ======== */
.hero__slider{position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow)}
.hero__slider .slider__viewport{overflow:hidden}
.hero__slider .slider__track{display:flex; transition: transform .55s ease}
.hero__slider .slide{min-width:100%}
.hero__slider .slide img{width:100%; height:auto; display:block}
.hero__slider .slider__btn{position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:999px; border:1px solid rgba(255,255,255,.35); background:rgba(15,23,42,.55); color:#fff; font-size:24px; line-height:42px; text-align:center; cursor:pointer; backdrop-filter: blur(6px)}
.hero__slider .slider__btn:hover{background:rgba(15,23,42,.8)}
.hero__slider .slider__btn.prev{left:12px}
.hero__slider .slider__btn.next{right:12px}
.hero__slider .slider__dots{position:absolute; left:0; right:0; bottom:10px; display:flex; gap:8px; justify-content:center}
.hero__slider .slider__dots button{width:10px; height:10px; border-radius:999px; border:0; background:rgba(255,255,255,.45); cursor:pointer}
.hero__slider .slider__dots button.active{background:#fff}
.offer-week{
  position:absolute; left:12px; top:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(10,15,29,.55)); border:1px solid rgba(255,255,255,.20);
  padding:10px 12px; border-radius:14px; backdrop-filter: blur(6px);
  color:#e8f3ff
}
.offer-week .badge-sm{
  display:inline-block; padding:2px 8px; border-radius:999px;
  background:rgba(34,211,238,.2); border:1px solid rgba(34,211,238,.35); font-weight:700; font-size:.8rem; margin-bottom:6px; color:#c8f8ff
}
.offer-week strong{display:block; font-size:1rem}
.offer-week small{opacity:.85}
@media (max-width: 960px){
  .hero__grid{grid-template-columns:1fr}
}

/* ======== OFERTAS / SLIDER ======== */
.offers{background:none}
.offers__slider{position:relative; width:min(1200px, 96vw); margin:0 auto 18px; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.06); box-shadow: var(--shadow); background:rgba(0,0,0,.15)}
.slider__viewport{overflow:hidden}
.slider__track{display:flex; transition: transform .55s ease}
.slide{min-width:100%; user-select:none}
.slide img{width:100%; height:auto; display:block}
.slider__btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:999px; border:1px solid rgba(255,255,255,.4);
  background:rgba(15,23,42,.6); color:#fff; font-size:24px; line-height:42px; text-align:center;
  cursor:pointer; backdrop-filter: blur(6px);
}
.slider__btn:hover{background:rgba(15,23,42,.8)}
.slider__btn.prev{left:12px}
.slider__btn.next{right:12px}
.slider__dots{display:flex; gap:8px; justify-content:center; padding:12px 0}
.slider__dots button{
  width:10px; height:10px; border-radius:999px; border:0; background:rgba(255,255,255,.35); cursor:pointer
}
.slider__dots button.active{background:#fff}
.offers__cta{display:flex; justify-content:center; margin-top:8px}
@media (max-width: 960px){
  .slider__btn{display:none}
}

/* Respeito a preferências de redução de movimento */
@media (prefers-reduced-motion: reduce){
  .reveal, .img-fade, .slider__track{transition:none !important}
  .whats-float, .whats-float::after{animation:none !important}
}

/* Label lateral no desktop */
@media (min-width: 768px){
  .whats-float::before{
    display:block; content: attr(aria-label);
    position:absolute; right:100%; margin-right:10px; padding:10px 12px;
    background:linear-gradient(135deg, #22d3ee, #4f46e5);
    color:#fff; font-weight:800; border-radius:999px; box-shadow:0 8px 20px rgba(79,70,229,.25);
    white-space:nowrap; pointer-events:none; transform:translateX(8px); opacity:.0;
    animation: wa-label 3s ease-in-out infinite;
  }
  @keyframes wa-label{
    0%, 60%{ opacity:.0; transform:translateX(8px)}
    70%, 90%{ opacity:1; transform:translateX(0)}
    100%{ opacity:.0; transform:translateX(8px)}
  }
}