/* ============================================================
   OUZZE MODAS — Bio Prime
   Direção de arte: "A VITRINE"
   Preto absoluto da logo (a vitrine iluminada à noite)  →
   plano claro de linho (a loja por dentro, luz do litoral).
   Forma-assinatura: o ARCO (vitrine / provador / nicho).
   Luz: sempre de cima. Ouro dos maxi acessórios em filete fino.
   ============================================================ */

:root{
  /* planos */
  --ink:#0B0B0C;
  --ink-2:#141416;
  --paper:#F6F3EE;
  --linen:#FFFDFA;
  --sand:#E9E2D7;
  --line:#DFD7C9;

  /* texto */
  --text:#232019;
  --muted:#6E675E;
  --on-ink:#F2EFE9;
  --on-ink-muted:#9C968C;

  /* acentos reais da marca */
  --gold:#C8A265;        /* maxi acessórios — filetes sobre o preto */
  --gold-ink:#7A5C28;    /* mesma família, legível sobre o claro */
  --wa:#25D366;

  /* escala */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* raio: curvas suaves, femininas e delicadas */
  --r-sm:14px; --r-md:22px; --r-lg:28px; --r-pill:999px;

  /* elevação — luz superior e profundidade 3D multicamadas */
  --e1:0 2px 6px rgba(11,11,12,.03), 0 8px 18px -3px rgba(11,11,12,.07);
  --e2:0 4px 10px rgba(0,0,0,.15), 0 14px 30px -4px rgba(0,0,0,.25);
  --e3:0 6px 16px rgba(0,0,0,.2), 0 20px 42px -6px rgba(0,0,0,.35);

  --shadow-3d: 0 2px 5px rgba(11,11,12,.03), 0 10px 22px -3px rgba(11,11,12,.08), 0 18px 36px -6px rgba(200,162,101,.14), inset 0 1px 1px #FFFFFF, inset 0 -2px 4px rgba(11,11,12,.03);
  --shadow-3d-hover: 0 4px 10px rgba(11,11,12,.04), 0 16px 32px -4px rgba(11,11,12,.11), 0 28px 52px -6px rgba(200,162,101,.28), inset 0 1px 2px #FFFFFF;
  --shadow-3d-active: 0 2px 6px rgba(11,11,12,.12), 0 4px 12px rgba(200,162,101,.12), inset 0 2px 5px rgba(11,11,12,.08);

  --shadow-3d-dark: 0 3px 8px rgba(0,0,0,.35), 0 12px 28px -4px rgba(0,0,0,.5), 0 20px 40px -6px rgba(200,162,101,.18), inset 0 1px 1px rgba(200,162,101,.45), inset 0 -1px 2px rgba(0,0,0,.7);
  --shadow-3d-dark-hover: 0 4px 12px rgba(0,0,0,.4), 0 18px 38px -4px rgba(0,0,0,.6), 0 28px 52px -6px rgba(200,162,101,.32), inset 0 1px 2px rgba(255,255,255,.25);
  --shadow-3d-dark-active: 0 2px 6px rgba(0,0,0,.6), inset 0 2px 6px rgba(0,0,0,.8);

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

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font:400 15px/1.6 "Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:92px;            /* espaço do dock fixo */
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}

h1,h2,h3{
  font-family:"Bodoni Moda",Didot,"Bodoni MT",Georgia,serif;
  font-weight:400;
  letter-spacing:-.012em;
  margin:0;
}
h1{font-size:clamp(34px,10.2vw,44px);line-height:1.08}
h2{font-size:clamp(28px,8.4vw,36px);line-height:1.12}
h3{font-size:21px;line-height:1.2}
em{font-style:italic}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--paper);color:var(--ink);padding:12px 18px;font-size:13px;
}
.skip:focus{left:12px;top:12px}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- rótulos ---------- */
.eyebrow{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:0 0 14px;
  font-size:10px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-ink);
}
.eyebrow::before,.eyebrow::after{
  content:"";height:1px;width:22px;background:currentColor;opacity:.5;
}
.eyebrow--light{color:var(--gold)}

/* ============================================================
   HERO — a vitrine
   ============================================================ */
.hero{
  position:relative;
  background:var(--paper);
  color:var(--text);
  text-align:center;
  padding:calc(env(safe-area-inset-top) + 20px) 0 24px;
}

/* A FAIXA — a logo atravessa a página de ponta a ponta e corta o branco em dois.
   É a própria identidade da marca: wordmark claro sobre preto absoluto. */
.masthead{
  display:grid;place-items:center;
  padding:26px 20px;
  color:var(--on-ink);
  background:radial-gradient(130% 190% at 50% -30%,#1b1b1f,#0B0B0C 72%);
  border-top:1px solid rgba(200,162,101,.5);
  border-bottom:1px solid rgba(200,162,101,.5);
  box-shadow:0 20px 44px rgba(11,11,12,.18);
}
.masthead__logo{
  position:relative;
  display:grid;place-items:center;
  width:min(272px,76vw);
  aspect-ratio:400/87;
}
.masthead__mark{
  display:block;width:100%;height:100%;aspect-ratio:400/87;
  color:var(--on-ink);
  filter:drop-shadow(0 4px 18px rgba(255,247,230,.14));
}

/* Luz neon dourada percorrendo pelo nome OUZZE quando a página abre */
.masthead__neon{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  pointer-events:none;
  color:#FFF2CD;
  filter:
    drop-shadow(0 0 2px #FFFFFF)
    drop-shadow(0 0 8px #FFD700)
    drop-shadow(0 0 18px #E5B35C)
    drop-shadow(0 0 30px #C8A265)
    drop-shadow(0 0 48px rgba(200,162,101,.9));
  -webkit-mask-image:linear-gradient(
    105deg,
    transparent 0%,
    transparent 36%,
    rgba(0,0,0,.35) 43%,
    #000000 50%,
    rgba(0,0,0,.35) 57%,
    transparent 64%,
    transparent 100%
  );
  mask-image:linear-gradient(
    105deg,
    transparent 0%,
    transparent 36%,
    rgba(0,0,0,.35) 43%,
    #000000 50%,
    rgba(0,0,0,.35) 57%,
    transparent 64%,
    transparent 100%
  );
  -webkit-mask-size:250% 100%;
  mask-size:250% 100%;
  -webkit-mask-position:130% 0;
  mask-position:130% 0;
  opacity:0;
  animation:neonEntrance 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s 1 forwards;
}

@keyframes neonEntrance{
  0%{
    -webkit-mask-position:130% 0;
    mask-position:130% 0;
    opacity:0;
  }
  12%{
    opacity:1;
  }
  85%{
    opacity:1;
  }
  100%{
    -webkit-mask-position:-30% 0;
    mask-position:-30% 0;
    opacity:0;
  }
}

.hero .eyebrow{margin:0 20px 18px;font-size:9.5px;letter-spacing:.2em}

.hero__inner{position:relative;max-width:440px;margin:0 auto;padding:24px 20px 0}
.hero h1{margin:0 0 12px}
.hero h1 em{color:var(--gold-ink);font-style:italic}

.hero__lead{
  margin:0 auto 16px;max-width:38ch;text-wrap:balance;
  color:var(--muted);font-size:14.5px;line-height:1.6;
}

.hero__stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  max-width:340px;margin:16px auto 0;padding:0;list-style:none;
}
.hero__stats li{
  padding:0 6px;text-align:center;
  font-size:9px;line-height:1.55;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);
  display:flex;flex-direction:column;justify-content:center;
}
.hero__stats li+li{border-left:1px solid var(--line)}
.hero__stats a{
  color:inherit;
  display:block;
  transition:color .2s var(--ease);
}
.hero__stats a:hover{
  color:var(--gold-ink);
}

/* ============================================================
   BOTÕES — o CTA principal é sempre a inversão do seu plano
   ============================================================ */
.btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:0 26px;border-radius:var(--r-pill);
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  transition:transform .28s var(--ease),box-shadow .32s var(--ease),
             background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
  position:relative;overflow:hidden;
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.btn:hover{transform:translateY(-3px) scale(1.015)}
.btn:active{transform:translateY(3px) scale(0.975);transition-duration:.1s}

.btn--light{
  background:linear-gradient(180deg,#FFFFFF 0%,var(--paper) 100%);color:var(--ink);
  box-shadow:0 4px 12px rgba(0,0,0,.18),0 12px 28px -4px rgba(0,0,0,.3),0 18px 36px -6px rgba(200,162,101,.25),inset 0 1px 2px #FFFFFF;
  border:1px solid rgba(200,162,101,.5);
}
.btn--light:hover{
  box-shadow:0 6px 16px rgba(0,0,0,.22),0 18px 36px -4px rgba(0,0,0,.38),0 26px 48px -6px rgba(200,162,101,.42),inset 0 1px 2px #FFFFFF;
  border-color:var(--gold);
}
.btn--light:active{
  box-shadow:0 2px 6px rgba(0,0,0,.3),inset 0 2px 5px rgba(0,0,0,.15);
}

.btn--dark{
  background:linear-gradient(180deg,#222226 0%,#0B0B0C 100%);color:var(--paper);
  box-shadow:0 4px 10px rgba(0,0,0,.22),0 10px 24px -3px rgba(0,0,0,.35),0 16px 32px -6px rgba(200,162,101,.2),inset 0 1px 1px rgba(255,255,255,.2);
  border:1px solid rgba(200,162,101,.35);
}
.btn--dark:hover{
  border-color:var(--gold);
  box-shadow:0 6px 14px rgba(0,0,0,.28),0 14px 32px -4px rgba(0,0,0,.45),0 22px 42px -6px rgba(200,162,101,.32),inset 0 1px 2px rgba(255,255,255,.3);
}
.btn--dark:active{
  box-shadow:0 2px 6px rgba(0,0,0,.55),inset 0 2px 5px rgba(0,0,0,.6);
}

.btn--ghost{
  border:1px solid rgba(200,162,101,.45);color:var(--on-ink);
  background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.02) 100%);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 4px 12px rgba(0,0,0,.22),0 10px 26px -3px rgba(0,0,0,.35),0 16px 32px -6px rgba(200,162,101,.18),inset 0 1px 1px rgba(200,162,101,.4);
}
.btn--ghost:hover{
  border-color:var(--gold);color:#fff;
  background:linear-gradient(180deg,rgba(200,162,101,.22) 0%,rgba(200,162,101,.08) 100%);
  box-shadow:0 6px 16px rgba(0,0,0,.28),0 16px 36px -4px rgba(0,0,0,.45),0 24px 44px -6px rgba(200,162,101,.35),inset 0 1px 2px rgba(255,255,255,.3);
}
.btn--ghost:active{
  box-shadow:0 2px 6px rgba(0,0,0,.55),inset 0 2px 5px rgba(0,0,0,.6);
}

.btn--line{
  border:1px solid rgba(200,162,101,.35);color:var(--text);
  background:linear-gradient(180deg,#FFFFFF 0%,var(--linen) 100%);
  box-shadow:0 2px 8px rgba(11,11,12,.05),inset 0 1px 1px #fff;
}
.btn--line:hover{
  border-color:var(--gold-ink);background:#fff;
  box-shadow:0 4px 14px rgba(200,162,101,.2),inset 0 1px 1px #fff;
}
.btn--line:active{
  box-shadow:0 1px 4px rgba(11,11,12,.1),inset 0 2px 4px rgba(11,11,12,.06);
}

.i-wa{width:19px;height:19px;flex:0 0 auto;fill:var(--wa)}
.btn--dark .i-wa,.btn--light .i-wa{fill:var(--wa)}
.i{
  width:19px;height:19px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;
}

/* varredura de luz — uma vez na entrada, e ao toque */
.shimmer::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.65) 50%,transparent 62%);
  transform:translateX(-120%);
}
.shimmer.is-lit::after{animation:sweep 1.15s var(--ease) .55s 1}
.shimmer:hover::after{animation:sweep 1s var(--ease) 1}
@keyframes sweep{to{transform:translateX(120%)}}

/* ============================================================
   PALCO CLARO — entrar na loja (o arco vira porta)
   ============================================================ */
.stage{
  position:relative;z-index:2;
  background:var(--paper);
  padding:0;
}

.section{padding:36px 20px 10px;max-width:520px;margin:0 auto;text-align:center}
.stage>.section:first-child{padding-top:20px}
.section h2 em{color:var(--gold-ink)}
.lead{
  margin:10px auto 22px;max-width:36ch;
  color:var(--muted);font-size:14px;line-height:1.65;
}

/* ---------- consultoras: nichos em arco ---------- */
.consultoras{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
  margin-bottom:14px;
  perspective:1200px;
}
.card-arch{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  padding:24px 12px 18px;
  background:linear-gradient(175deg,#FFFFFF 0%,#FAF7F2 45%,#F4ECE1 100%);
  border:1px solid rgba(200,162,101,.32);
  border-radius:88px 88px 24px 24px;   /* o nicho com topo em arco e base arredondada delicada */
  box-shadow:var(--shadow-3d);
  overflow:hidden;
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s var(--ease);
}
.card-arch:hover{
  transform:translateY(-6px) translateZ(0) scale(1.015);
  box-shadow:var(--shadow-3d-hover);
  border-color:rgba(200,162,101,.7);
}
.card-arch:active{
  transform:translateY(3px) scale(0.97);
  box-shadow:var(--shadow-3d-active);
  transition-duration:.1s;
}
.card-arch__mono{
  font-family:"Bodoni Moda",Georgia,serif;font-size:38px;line-height:1;
  color:var(--ink);margin-bottom:8px;
  text-shadow:0 1px 2px rgba(200,162,101,.25);
}
.card-arch__mono::after{
  content:"";display:block;width:20px;height:1px;margin:9px auto 0;background:var(--gold);
}
.card-arch__role{
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink);
}
.card-arch__name{
  font-family:"Bodoni Moda",Georgia,serif;font-size:17px;line-height:1.25;
  margin:2px 0 12px;min-height:2.5em;display:flex;align-items:center;text-align:center;
}
.card-arch__go{
  display:flex;align-items:center;justify-content:center;gap:7px;
  width:auto;padding:9px 20px;margin-top:auto;
  border-top:none;
  background:linear-gradient(180deg,rgba(200,162,101,.12) 0%,rgba(200,162,101,.06) 100%);
  border:1px solid rgba(200,162,101,.32);
  border-radius:var(--r-pill);
  box-shadow:0 2px 6px rgba(200,162,101,.12),inset 0 1px 0 rgba(255,255,255,.7);
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-ink);
  transition:all .28s var(--ease);
}
.card-arch__go .i-wa{width:14px;height:14px}
.card-arch:hover .card-arch__go{
  background:linear-gradient(180deg,var(--gold) 0%,var(--gold-ink) 100%);
  color:#fff;border-color:var(--gold-ink);
  box-shadow:0 4px 12px rgba(122,92,40,.35),inset 0 1px 1px rgba(255,255,255,.4);
  transform:translateY(-1px);
}
.card-arch:hover .card-arch__go .i-wa{fill:#fff}

/* ---------- grupo VIP ---------- */
.vip{
  display:flex;align-items:center;gap:14px;
  padding:18px 22px;margin-top:8px;
  background:linear-gradient(165deg,#1C1C1F 0%,#131316 55%,#0B0B0C 100%);
  color:var(--on-ink);
  border-radius:22px;
  border:1px solid rgba(200,162,101,.4);
  box-shadow:var(--shadow-3d-dark);
  text-align:left;
  position:relative;
  overflow:hidden;
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.vip:hover{
  transform:translateY(-4px) translateZ(0) scale(1.012);
  border-color:var(--gold);
  box-shadow:var(--shadow-3d-dark-hover);
}
.vip:active{
  transform:translateY(3px) scale(0.98);
  box-shadow:var(--shadow-3d-dark-active);
  transition-duration:.1s;
}
.vip__mark{
  flex:0 0 auto;display:grid;place-items:center;
  width:48px;height:48px;
  border:1px solid rgba(200,162,101,.7);
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(200,162,101,.25) 0%,rgba(200,162,101,.05) 75%);
  box-shadow:0 3px 10px rgba(0,0,0,.4),inset 0 1px 2px rgba(200,162,101,.5);
  font-family:"Bodoni Moda",Georgia,serif;font-size:13px;letter-spacing:.06em;
  color:var(--gold);
}
.vip__txt{display:flex;flex-direction:column;gap:2px;flex:1 1 auto}
.vip__txt strong{font-size:13px;font-weight:600;letter-spacing:.06em}
.vip__txt em{font-style:normal;font-size:11.5px;color:var(--on-ink-muted)}
.vip__arrow{color:var(--gold);width:20px;height:20px;transition:transform .3s var(--ease)}
.vip:hover .vip__arrow{transform:translateX(4px)}

/* ============================================================
   LOOKBOOK — a vitrine volta, agora com as peças
   ============================================================ */
.band{
  background:var(--ink);color:var(--on-ink);
  padding:50px 0 34px;margin:32px 0 0;text-align:center;
  position:relative;
  border-top:1px solid rgba(200,162,101,.4);
  border-radius:50% 50% 0 0/48px 48px 0 0;   /* o arco outra vez: a vitrine */
}
.band::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:1px;height:26px;
  background:linear-gradient(180deg,var(--gold),rgba(200,162,101,0));
}
.band__head{padding:0 20px;margin-bottom:18px}
.h2--light{color:var(--on-ink)}

/* vitrine em movimento: a arara que gira sozinha, sem fim */
.rail{
  overflow:hidden;padding:4px 0 14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.rail__track{
  display:flex;gap:10px;width:max-content;
  will-change:transform;
}
.rail__track.is-ready{
  -webkit-animation:railLoop 36s linear infinite;
          animation:railLoop 36s linear infinite;
}
@media (hover: hover) and (pointer: fine){
  .rail:hover .rail__track.is-ready{animation-play-state:paused}
}
@-webkit-keyframes railLoop{
  0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
  100%{-webkit-transform:translate3d(calc(-50% - 5px),0,0);transform:translate3d(calc(-50% - 5px),0,0)}
}
@keyframes railLoop{
  0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
  100%{-webkit-transform:translate3d(calc(-50% - 5px),0,0);transform:translate3d(calc(-50% - 5px),0,0)}
}
.rail__item{
  flex:0 0 148px;margin:0;
  border-radius:74px 74px var(--r-md) var(--r-md);   /* mesma família do nicho */
  overflow:hidden;background:var(--ink-2);
  border:1px solid rgba(200,162,101,.25);
  box-shadow:0 6px 18px -2px rgba(0,0,0,.45),0 12px 28px -6px rgba(200,162,101,.2),inset 0 1px 1px rgba(255,255,255,.15);
  transform:translateZ(0);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s var(--ease);
}
.rail__item:hover{
  transform:translateY(-4px) scale(1.02);
  border-color:var(--gold);
  box-shadow:0 10px 24px -2px rgba(0,0,0,.55),0 18px 36px -4px rgba(200,162,101,.32);
}
.rail__item img{width:100%;height:202px;object-fit:cover;object-position:center 22%}

.tags{
  margin:0 20px 16px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}
.band__cta{padding:0 20px;max-width:340px;margin:0 auto}

/* ============================================================
   PAINÉIS — loja física e envios
   ============================================================ */
.panel{
  background:linear-gradient(178deg,#FFFFFF 0%,#FBF9F5 50%,#F5EFE6 100%);
  border:1px solid rgba(200,162,101,.28);
  border-radius:26px;
  box-shadow:var(--shadow-3d);
  padding:22px 18px 20px;margin-top:14px;text-align:center;
  position:relative;
  overflow:hidden;
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s var(--ease);
}
.panel:hover{
  box-shadow:var(--shadow-3d-hover);
  border-color:rgba(200,162,101,.55);
}
.panel::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.panel__i{width:24px;height:24px;margin:0 auto 10px;color:var(--gold-ink);filter:drop-shadow(0 2px 4px rgba(200,162,101,.25))}
.panel h3{margin-bottom:8px}
.panel address{font-style:normal;color:var(--muted);font-size:13.5px;line-height:1.6}

/* ---------- mapa: a vitrine vira janela para a rua ---------- */
.map{
  position:relative;height:220px;margin:14px 0 0;
  border:1px solid rgba(200,162,101,.28);
  border-radius:36px 36px 20px 20px;
  overflow:hidden;background:var(--sand);
  box-shadow:0 6px 18px -3px rgba(11,11,12,.12),inset 0 1px 3px rgba(0,0,0,.08);
}
.map__frame{
  display:block;width:100%;height:100%;border:0;
  pointer-events:none;                       /* só destrava com dois dedos */
  filter:grayscale(1) contrast(1.04) brightness(1.03);
  transition:filter .7s var(--ease);
}
.map.is-live .map__frame{pointer-events:auto;filter:none}

.map__hint{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:8px 0 0;white-space:nowrap;
  font-size:11px;letter-spacing:.01em;color:var(--muted);
  transition:opacity .45s var(--ease);
}
.map__hint::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--gold-ink);
  animation:mapPulse 2.6s var(--ease) infinite;
}
.map.is-live + .map__hint{opacity:.3}
.map.is-live + .map__hint::before{animation:none}
@keyframes mapPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.panel p{margin:0;color:var(--muted);font-size:14px;line-height:1.65;max-width:34ch;margin-inline:auto}
.panel__acts{display:grid;gap:9px;margin-top:14px}

/* ============================================================
   FECHAMENTO + RODAPÉ
   ============================================================ */
.close{
  background:var(--ink);color:var(--on-ink);text-align:center;
  margin-top:34px;padding:48px 20px 36px;position:relative;
  border-top:1px solid rgba(200,162,101,.4);
  border-radius:50% 50% 0 0/48px 48px 0 0;
}
.close__rule{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:1px;height:28px;background:linear-gradient(180deg,var(--gold),transparent);
}
.close h2{margin-bottom:10px}
.close p{margin:0 auto 18px;max-width:30ch;color:var(--on-ink-muted);font-size:14px}
.close .btn{max-width:340px;margin:0 auto}

.foot{
  background:var(--ink);color:var(--on-ink-muted);
  text-align:center;padding:6px 20px 30px;
  box-shadow:0 240px 0 var(--ink);   /* o preto segue no overscroll do rodapé */
}
.foot__mark{
  display:block;width:94px;height:auto;aspect-ratio:400/87;
  margin:0 auto 12px;color:var(--on-ink);opacity:.9;
}
.foot__line{margin:0 0 8px;font-size:11px;letter-spacing:.1em}
.foot__links{margin:0 0 10px;font-size:11.5px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.foot__links a{color:var(--on-ink);border-bottom:1px solid rgba(200,162,101,.5);padding-bottom:1px}
.foot__rights{margin:0;font-size:10px;letter-spacing:.08em;opacity:.6}

/* assinatura de quem fez — tipografia de subtítulo, peso abaixo da marca */
.foot__credit{
  position:relative;
  margin:14px 0 0;padding-top:12px;
  font-family:"Bodoni Moda",Didot,"Bodoni MT",Georgia,serif;
  font-size:13px;letter-spacing:.01em;
  color:var(--on-ink-muted);
}
.foot__credit::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:36px;height:1px;background:rgba(200,162,101,.35);
}
.foot__credit a{
  color:var(--on-ink);
  border-bottom:1px solid rgba(200,162,101,.5);padding-bottom:1px;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.foot__credit a:hover{color:#fff;border-bottom-color:var(--gold)}

/* ============================================================
   DOCK — CTA permanente
   ============================================================ */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(246,243,238,.92);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-top:1px solid rgba(200,162,101,.3);
  transform:translateY(130%);
  transition:transform .55s var(--ease);
}
.dock.is-visible{transform:none}
.dock .btn{
  min-height:52px;
  box-shadow:0 6px 16px rgba(0,0,0,.25),0 14px 32px -4px rgba(0,0,0,.4),0 20px 40px -6px rgba(200,162,101,.25),inset 0 1px 1px rgba(255,255,255,.2);
}

/* ============================================================
   ANIMAÇÃO DE CLIQUE — onda dourada (ripple) e rebote 3D
   ============================================================ */
.click-ripple{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,rgba(200,162,101,0.55) 0%,rgba(200,162,101,0.18) 45%,rgba(200,162,101,0) 72%);
  transform:scale(0);
  animation:rippleExpand .65s cubic-bezier(0.15,0.85,0.35,1) forwards;
  z-index:9;
}
@keyframes rippleExpand{
  0%{transform:scale(0);opacity:.9}
  100%{transform:scale(2);opacity:0}
}

.card-arch.is-clicked,
.btn.is-clicked{
  animation:cardClickPop .48s cubic-bezier(0.25,1.4,0.45,1);
}
.vip.is-clicked{
  animation:vipClickPop .48s cubic-bezier(0.25,1.4,0.45,1);
}

@keyframes cardClickPop{
  0%{transform:translateY(0) scale(1)}
  28%{transform:translateY(4px) scale(0.965);box-shadow:0 2px 6px rgba(11,11,12,.15),0 0 0 2px rgba(200,162,101,.4)}
  65%{transform:translateY(-4px) scale(1.025);box-shadow:0 20px 42px -4px rgba(200,162,101,.38),0 0 0 8px rgba(200,162,101,.1)}
  100%{transform:translateY(0) scale(1)}
}

@keyframes vipClickPop{
  0%{transform:translateY(0) scale(1)}
  28%{transform:translateY(3px) scale(0.97);box-shadow:0 2px 8px rgba(0,0,0,.6),0 0 0 2px rgba(200,162,101,.5)}
  65%{transform:translateY(-3px) scale(1.018);box-shadow:0 22px 46px -4px rgba(0,0,0,.65),0 0 0 8px rgba(200,162,101,.18)}
  100%{transform:translateY(0) scale(1)}
}

/* ============================================================
   MOTION — elegante: lento, curto, sem salto
   ============================================================ */
.reveal{opacity:0;transform:translateY(14px)}
.reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:var(--d,0ms);
}
.hero .reveal.is-in{transition-duration:.9s}

/* ============================================================
   TELAS MAIORES — mais ar, nunca esticar
   ============================================================ */
@media (min-width:600px){
  .hero{padding-top:calc(env(safe-area-inset-top) + 24px);padding-bottom:28px}
  .masthead{padding:30px 22px}
  .masthead__logo{width:320px}
  .hero__inner{padding-top:24px}
  .consultoras{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .section{padding-inline:22px}
  .map{height:260px}
  .rail__item{flex-basis:168px}
  .rail__item img{height:228px}
  .dock .btn{max-width:360px;margin:0 auto}
}
@media (min-width:920px){
  h1{font-size:46px}
  h2{font-size:36px}
  .hero__lead{font-size:15.5px}
  .section{max-width:880px;padding-block:40px 14px}
  .stage>.section:first-child{padding-top:24px}
  .consultoras{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
  .card-arch{border-radius:80px 80px 22px 22px;padding-inline:8px}
  .card-arch__mono{font-size:30px}
  .card-arch__name{font-size:15px}
  .panel{max-width:640px;margin-inline:auto}
  .rail{max-width:1040px;margin-inline:auto}
}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  .shimmer::after{display:none}
  .masthead__neon{animation:none!important}
  *:not(.rail__track){animation-duration:.001ms!important;transition-duration:.001ms!important}
}