/* =========================================================
   Makeup PRO — LPs de links (bio do Instagram)
   Mesma identidade do site-lojas / regras-cashback:
   vinho em degradê, rosa de destaque, Playfair + Inter.
   Mobile first: tudo é pensado para a tela do Instagram.
   ========================================================= */
:root {
  --wine: #491023;
  --wine-deep: #2e0a16;
  --wine-light: #6b1a38;
  --rose: #A18695;
  --rose-light: #e8749a;
  --nude: #d6b2a6;
  --nude-claro: #f0d3cd;
  --white: #ffffff;
  --off-white: #faf5f7;
  --whats: #1fa855;
  --whats-2: #17924a;
  --ok: #4ade80;
  --off: #f59e8b;
  --gold: #f6d58e;

  --glass: rgba(255,255,255,.07);
  --glass-2: rgba(255,255,255,.13);
  --line: rgba(255,255,255,.14);
  --line-2: rgba(255,255,255,.3);
  --txt-2: rgba(255,255,255,.72);
  --txt-3: rgba(255,255,255,.5);

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --r: 16px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: radial-gradient(circle at 20% 0%, var(--wine-light) 0%, var(--wine) 45%, var(--wine-deep) 100%) fixed;
  background-color: var(--wine);
  color: var(--white);
  min-height: 100vh;
  min-height: 100dvh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
body::before, body::after {
  content: ''; position: fixed; border-radius: 50%;
  filter: blur(80px); opacity: .35; z-index: 0; pointer-events: none;
}
body::before { width: 300px; height: 300px; background: var(--rose-light); top: -90px; right: -90px; }
body::after  { width: 260px; height: 260px; background: var(--rose); bottom: -110px; left: -70px; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 3px solid var(--nude); outline-offset: 3px; border-radius: 10px; }
svg { flex: none; }

.page {
  position: relative; z-index: 1;
  width: 100%; max-width: 480px;
  margin: 0 auto;
  padding: max(28px, env(safe-area-inset-top)) 16px max(32px, env(safe-area-inset-bottom));
}

/* ---------- Topo ---------- */
.topo { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 22px; position: relative; }
.topo__logo { width: 168px; margin-bottom: 18px; }
.topo__selo {
  width: 100%; max-width: 280px; padding: 18px 26px; margin-bottom: 16px;
  border-radius: 999px; background: rgba(46,10,22,.55); border: 1px solid var(--line);
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
.topo__selo img { width: 100%; }
.topo--compacto .topo__logo { width: 140px; margin-bottom: 14px; }

.voltar {
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass); border: 1px solid var(--line); text-decoration: none;
}

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; margin-bottom: 14px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08);
  font-size: .74rem; font-weight: 600; letter-spacing: .02em;
}
.chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--txt-3); }
.chip--aberta .chip__dot, .chip--marca .chip__dot { background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: pulso 2s ease-in-out infinite; }
.chip--fechada .chip__dot { background: var(--off); }
.chip--aviso, .chip--breve { background: rgba(246,213,142,.14); border-color: rgba(246,213,142,.4); color: var(--gold); text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; }
.chip--marca { text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; }
@keyframes pulso { 50% { opacity: .45; } }

.titulo {
  font-family: var(--font-serif);
  font-size: 1.85rem; font-weight: 700; line-height: 1.15;
  margin-bottom: 8px; text-wrap: balance;
}
.titulo span { color: var(--rose-light); display: block; }
.is-marca .titulo { font-size: 2rem; }
.local { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--txt-2); margin-bottom: 10px; }
.subtitulo { font-size: .92rem; color: var(--txt-2); max-width: 360px; text-wrap: pretty; }

/* ---------- Conteúdo ---------- */
.conteudo { display: flex; flex-direction: column; gap: 14px; }

/* Botão principal — WhatsApp */
.btn-whats {
  display: flex; align-items: center; gap: 14px;
  min-height: 74px; padding: 14px 18px;
  border-radius: 20px; text-decoration: none;
  background: linear-gradient(135deg, #25c166, var(--whats));
  box-shadow: 0 14px 30px rgba(10,60,30,.35), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .18s var(--ease), box-shadow .18s ease, filter .18s;
}
.btn-whats:hover { filter: brightness(1.05); transform: translateY(-2px); }
.btn-whats:active { transform: scale(.98); }
.btn-whats__icone {
  width: 48px; height: 48px; border-radius: 14px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.18);
}
.btn-whats__texto { display: flex; flex-direction: column; text-align: left; line-height: 1.25; }
.btn-whats__texto strong { font-size: 1.08rem; font-weight: 700; }
.btn-whats__texto small { font-size: .78rem; color: rgba(255,255,255,.85); margin-top: 3px; }

/* Aviso de horário especial */
.aviso {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--r);
  background: rgba(246,213,142,.12); border: 1px solid rgba(246,213,142,.45);
}
.aviso__icone { color: var(--gold); margin-top: 1px; }
.aviso strong { display: block; color: var(--gold); font-size: .92rem; margin-bottom: 2px; }
.aviso p { font-size: .86rem; color: var(--txt-2); }

/* Cartões de informação (horário, endereço, mídia) */
.cartao {
  padding: 16px 18px; border-radius: var(--r);
  background: var(--glass); border: 1px solid var(--line);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.cartao__titulo {
  display: flex; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--nude); margin-bottom: 12px;
}

.horarios { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.horarios li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 12px; border-radius: 10px; font-size: .9rem;
}
.horarios li span { color: var(--txt-2); }
.horarios li strong { font-weight: 700; white-space: nowrap; }
.horarios li em {
  font-style: normal; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--rose-light); color: var(--wine-deep); padding: 2px 7px; border-radius: 999px; margin-left: 6px;
}
.horarios li.is-hoje { background: rgba(255,255,255,.08); }
.horarios li.is-hoje span { color: var(--white); }

.endereco { font-style: normal; font-size: .92rem; line-height: 1.5; }
.referencia {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: .86rem; color: var(--nude-claro);
}
.btn-rota {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; margin-top: 14px; border-radius: 12px;
  background: var(--white); color: var(--wine); text-decoration: none;
  font-weight: 700; font-size: .95rem;
  transition: background .18s, transform .18s var(--ease);
}
.btn-rota:hover { background: var(--nude-claro); }
.btn-rota:active { transform: scale(.98); }

/* ---------- Lista de botões ---------- */
.links { display: flex; flex-direction: column; gap: 12px; }
.link {
  display: flex; align-items: center; gap: 14px;
  min-height: 72px; padding: 12px 14px 12px 12px;
  border-radius: var(--r); text-decoration: none;
  background: var(--glass); border: 1px solid var(--line);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .25s ease, border-color .25s ease, transform .25s var(--ease), box-shadow .25s ease;
}
.link:hover { background: var(--glass-2); border-color: var(--line-2); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.link:active { transform: scale(.985); }
.link__icone {
  width: 48px; height: 48px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); color: var(--wine);
}
.link__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; }
.link__titulo { font-weight: 700; font-size: 1rem; line-height: 1.3; }
.link__desc { font-size: .78rem; color: rgba(255,255,255,.65); margin-top: 2px; }
.link__seta { color: var(--txt-3); transition: transform .25s ease, color .25s ease; }
.link:hover .link__seta { transform: translateX(4px); color: var(--rose-light); }

.link--destaque { background: var(--white); border-color: var(--white); color: var(--wine); box-shadow: 0 14px 34px rgba(0,0,0,.3); }
.link--destaque:hover { background: var(--off-white); border-color: var(--off-white); }
.link--destaque .link__icone { background: var(--wine); color: var(--white) !important; }
.link--destaque .link__desc { color: #7a5a66; }
.link--destaque .link__seta { color: var(--wine); }

.insta-unidade {
  align-self: center; display: inline-flex; align-items: center; gap: 7px;
  margin-top: 4px; padding: 8px 14px; border-radius: 999px;
  font-size: .84rem; color: var(--txt-2); text-decoration: none;
}
.insta-unidade:hover { color: var(--white); background: var(--glass); }

/* ---------- Encontre sua loja ---------- */
.estado + .estado { margin-top: 10px; }
.estado__titulo {
  font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700;
  padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
}
.cidade__titulo {
  display: flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--nude); margin: 14px 0 8px;
}
.unidades { display: flex; flex-direction: column; gap: 10px; }
.unidade-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px 14px 16px; border-radius: var(--r); text-decoration: none;
  background: var(--glass); border: 1px solid var(--line);
  transition: background .25s, border-color .25s, transform .25s var(--ease);
}
.unidade-card:hover { background: var(--glass-2); border-color: var(--line-2); transform: translateY(-2px); }
.unidade-card--breve { border-style: dashed; background: rgba(255,255,255,.03); }
.unidade-card__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.unidade-card__nome { font-weight: 700; font-size: 1rem; }
.unidade-card__shopping { font-size: .8rem; color: var(--txt-2); }
.unidade-card__cta {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  padding: 8px 12px; border-radius: 999px;
  background: var(--white); color: var(--wine);
  font-size: .78rem; font-weight: 700;
}
.unidade-card--breve .unidade-card__cta { background: transparent; color: var(--white); border: 1px solid var(--line-2); }
.mini-chip {
  display: inline-block; margin-top: 6px; padding: 2px 9px; border-radius: 999px;
  font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255,255,255,.1); color: var(--txt-2);
}
.mini-chip--aberta { background: rgba(74,222,128,.15); color: var(--ok); }
.mini-chip--breve { background: rgba(246,213,142,.15); color: var(--gold); }
.vazio { text-align: center; color: var(--txt-2); padding: 30px 0; }

/* ---------- Mídia ---------- */
.midia__lista { list-style: none; display: flex; flex-direction: column; }
.midia__lista li { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); }
.midia__lista li:first-child { border-top: 0; }
.midia__lista a { flex: 1; display: flex; flex-direction: column; padding: 11px 0; text-decoration: none; }
.midia__meta { font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--nude); }
.midia__titulo { font-size: .9rem; line-height: 1.4; margin-top: 2px; }
.midia__icone { color: var(--txt-3); }

/* ---------- Rodapé ---------- */
.rodape { margin-top: 30px; text-align: center; }
.rodape__links { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.rodape__btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; border-radius: 12px; text-decoration: none;
  font-size: .88rem; font-weight: 600;
  border: 1px solid var(--line); color: var(--txt-2);
  transition: background .2s, color .2s;
}
.rodape__btn:hover { background: var(--glass); color: var(--white); }
.rodape__marca { font-family: var(--font-serif); font-weight: 700; color: rgba(255,255,255,.8); }
.rodape__marca span { color: var(--rose-light); }
.rodape__copy { font-size: .72rem; color: var(--txt-3); margin-top: 4px; }

/* ---------- Entrada suave ---------- */
.topo, .conteudo > *, .rodape { animation: sobe .5s var(--ease) both; }
.conteudo > *:nth-child(1) { animation-delay: .05s; }
.conteudo > *:nth-child(2) { animation-delay: .1s; }
.conteudo > *:nth-child(3) { animation-delay: .15s; }
.conteudo > *:nth-child(4) { animation-delay: .2s; }
.conteudo > *:nth-child(n+5) { animation-delay: .25s; }
.rodape { animation-delay: .3s; }
@keyframes sobe { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Telas maiores ---------- */
@media (min-width: 480px) {
  .page { padding-top: 44px; }
  .titulo { font-size: 2.1rem; }
  .is-marca .titulo { font-size: 2.3rem; }
  .rodape__links { flex-direction: row; }
  .rodape__btn { flex: 1; }
}