/* =========================================================
   Proposta TonSupermercado — João Apolinário
   Página minimalista (preto) + simulações do site e do painel.
   ========================================================= */

/* ---------- Fontes ---------- */
@font-face { font-family: "Sequel Sans"; font-weight: 300; font-display: swap; src: url("../assets/fonts/SequelSans-LightDisp.woff2") format("woff2"), url("../assets/fonts/SequelSans-LightDisp.woff") format("woff"); }
@font-face { font-family: "Sequel Sans"; font-weight: 400; font-display: swap; src: url("../assets/fonts/SequelSans-BookDisp.woff2") format("woff2"), url("../assets/fonts/SequelSans-BookDisp.woff") format("woff"); }
@font-face { font-family: "Sequel Sans"; font-weight: 500; font-display: swap; src: url("../assets/fonts/SequelSans-MediumDisp.woff2") format("woff2"), url("../assets/fonts/SequelSans-MediumDisp.woff") format("woff"); }
@font-face { font-family: "Sequel Sans"; font-weight: 600 700; font-display: swap; src: url("../assets/fonts/SequelSans-SemiBoldDisp.woff2") format("woff2"), url("../assets/fonts/SequelSans-SemiBoldDisp.woff") format("woff"); }

/* ---------- Base ---------- */
:root {
  --preto: #000;
  --branco: #fff;
  --texto: #d9d9d9;
  --suave: #8c8c8c;
  --linha: rgba(255, 255, 255, 0.1);
  --wrap: 1200px;
  --lateral: 32px;
  --fonte: "Sequel Sans", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; overflow-x: clip; }

body {
  margin: 0;
  background: var(--preto);
  color: var(--branco);
  font-family: var(--fonte);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
::selection { background: #fff; color: #000; }
section[id] { scroll-margin-top: 80px; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--lateral) * 2);
  margin: 0 auto;
  padding: 0 var(--lateral);
}

.rotulo {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--suave);
}

.marca {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Entrada suave */
.js .surge {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--d, 0s);
}
.js .surge.is-in { opacity: 1; transform: none; }

/* ---------- Cabeçalho ---------- */
.topo {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s, border-color 0.4s;
}

.topo.is-rolado {
  background: rgba(0, 0, 0, 0.8);
  border-color: var(--linha);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.topo__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 68px;
}

.topo__nav {
  display: flex;
  gap: 32px;
  font-size: 14px;
  color: var(--suave);
}

.topo__nav a { transition: color 0.3s; }
.topo__nav a:hover { color: #fff; }

.topo__cta {
  font-size: 14px;
  padding-bottom: 2px;
  border-bottom: 1px solid #fff;
}

/* ---------- Abertura com vídeo de fundo suave ---------- */
.abertura-fundo {
  position: relative;
  overflow: hidden;
}

.fundo-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.fundo-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
  filter: grayscale(1) blur(1px);
}

/* Escurece as bordas e funde com o preto da página */
.fundo-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.65) 45%, rgba(0, 0, 0, 0.2) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, transparent 40%, #000 100%);
}

.abertura { position: relative; z-index: 1; }
.abertura {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 200px;
  padding-bottom: 120px;
}

.abertura__titulo {
  max-width: 980px;
  font-size: clamp(40px, 6.4vw, 88px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.abertura__titulo em { color: var(--suave); white-space: nowrap; }

.abertura__texto {
  max-width: 600px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--texto);
}

.ficha {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 40px;
  border-top: 1px solid var(--linha);
}

.ficha > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 20px 0 0;
}

.ficha dt { font-size: 13px; color: var(--suave); }
.ficha dd { font-size: 16px; }

/* ---------- Seções ---------- */
.secao { padding: 120px 0; border-top: 1px solid var(--linha); }

.secao__cabeca {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 720px;
  margin-bottom: 48px;
}

.secao__titulo {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.secao__texto {
  font-size: 17px;
  line-height: 1.6;
  color: var(--texto);
}

.controles {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
}

.controles__nota { font-size: 13px; color: var(--suave); }

/* Alternador computador / celular */
.alternar {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border: 1px solid var(--linha);
  border-radius: 100px;
}

.alternar::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 100px;
  background: #fff;
  transform: translateX(calc(var(--i, 0) * 100%));
  transition: transform 0.45s var(--ease);
}

.alternar button {
  position: relative;
  z-index: 1;
  padding: 8px 18px;
  border: 0;
  background: none;
  font-size: 13px;
  color: var(--suave);
  transition: color 0.3s;
}

.alternar button[aria-checked="true"] { color: #000; }

/* ---------- Moldura (navegador / celular) ---------- */
.moldura {
  --alt: 720px;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: var(--alt);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: #1a1a1a;
  box-shadow: 0 40px 120px -40px rgba(255, 255, 255, 0.12);
  transition: width 0.7s var(--ease), border-radius 0.7s, padding 0.7s;
}

.moldura[data-tela="celular"] {
  width: 380px;
  height: 760px;
  padding: 12px;
  border-radius: 48px;
  background: #111;
}

.moldura__barra {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  flex-shrink: 0;
  padding: 0 14px;
  transition: height 0.5s, opacity 0.4s;
}

.moldura[data-tela="celular"] .moldura__barra { height: 0; opacity: 0; }

.moldura__barra > span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #3a3a3a;
}

.moldura__url {
  margin: 0 auto;
  padding: 5px 60px;
  border-radius: 7px;
  background: #262626;
  font-size: 12px;
  color: #9a9a9a;
  white-space: nowrap;
}

.moldura__url i { font-style: normal; color: #e6e6e6; }

.moldura__tela {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  container-type: inline-size;
  transition: border-radius 0.7s;
}

.moldura[data-tela="celular"] .moldura__tela { border-radius: 36px; }

/* =========================================================
   SIMULAÇÃO DO SITE
   ========================================================= */
.sim {
  --ton: #e81018;
  --ton-escuro: #b50d13;
  --amarelo: #ffc20e;
  --fundo: #f6f4ef;
  --tinta: #151515;
  --cinza: #6e6a63;
  --borda: rgba(0, 0, 0, 0.08);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--fundo);
  color: var(--tinta);
  font-size: 14px;
  letter-spacing: -0.005em;
}

/* "Ilha" do celular */
.moldura[data-tela="celular"] .sim::before {
  content: "";
  position: absolute;
  z-index: 20;
  top: 10px;
  left: 50%;
  width: 96px;
  height: 26px;
  translate: -50% 0;
  border-radius: 14px;
  background: #000;
}

.moldura[data-tela="celular"] .sim-faixa { padding-top: 44px; }

.sim button { border: 0; background: none; color: inherit; }

.sim-faixa {
  flex-shrink: 0;
  padding: 7px 16px;
  background: var(--tinta);
  color: #fff;
  font-size: 12px;
  text-align: center;
}

.sim-faixa b { font-weight: 500; color: var(--amarelo); }

/* Cabeçalho do site */
.sim-topo {
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 28px;
  background: #fff;
  border-bottom: 1px solid var(--borda);
}

.sim-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ton);
}

.sim-logo img {
  width: auto;
  height: 40px;
  mix-blend-mode: multiply; /* some o fundo claro da imagem do logo */
}

.sim-logo--rodape {
  padding: 8px 12px;
  border-radius: 10px;
  background: #fff;
}

.sim-logo--rodape img { height: 34px; }

.sim-logo small {
  margin-left: 3px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--tinta);
}

.sim-logo__icone {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--ton);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
}

.sim-menu { display: flex; gap: 2px; }

.sim-menu button {
  position: relative;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--cinza);
  transition: color 0.3s;
}

.sim-menu button::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -15px;
  height: 2px;
  background: var(--ton);
  transform: scaleX(0);
  transition: transform 0.35s var(--ease);
}

.sim-menu button:hover { color: var(--tinta); }
.sim-menu button.is-ativo { color: var(--tinta); font-weight: 500; }
.sim-menu button.is-ativo::after { transform: none; }

.sim-topo__acoes { display: flex; align-items: center; gap: 8px; }

.sim-icone {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.sim-icone:hover { background: var(--fundo); }

.sim svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sim-botao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 100px;
  background: var(--ton) !important;
  color: #fff !important;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: transform 0.3s, box-shadow 0.3s;
}

.sim-botao:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -10px var(--ton); }
.sim-botao--whats { background: #1fa855 !important; }
.sim-botao--whats svg { width: 16px; height: 16px; }

.sim-hamburguer {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 50%;
  background: var(--fundo) !important;
}

.sim-hamburguer span { height: 1.5px; background: var(--tinta); transition: transform 0.35s; }
.sim--menu .sim-hamburguer span:first-child { transform: translateY(3.25px) rotate(45deg); }
.sim--menu .sim-hamburguer span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* Área que rola */
.sim-rolagem {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #cfc9bf transparent;
}

.sim-pagina { display: none; padding: 24px 28px 8px; }
.sim-pagina.is-ativa { display: block; animation: simEntra 0.5s var(--ease); }

@keyframes simEntra { from { opacity: 0; transform: translateY(8px); } }

/* Banner */
.sim-banner {
  position: relative;
  height: 320px;
  overflow: hidden;
  border-radius: 20px;
  background: #222;
}

.sim-banner__slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 14px;
  padding: 34px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.25) 60%, transparent), var(--foto) center / cover;
  color: #fff;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.8s, transform 1.4s var(--ease);
}

.sim-banner__slide.is-ativo { opacity: 1; transform: none; z-index: 1; }

.sim-banner__slide h3 {
  max-width: 440px;
  font-size: clamp(24px, 4cqw, 40px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.sim-selo {
  padding: 5px 12px;
  border-radius: 100px;
  background: var(--amarelo);
  color: var(--tinta);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sim-banner__pontos {
  position: absolute;
  z-index: 2;
  right: 26px;
  bottom: 26px;
  display: flex;
  gap: 6px;
}

.sim-banner__pontos i {
  width: 7px;
  height: 7px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.5);
  transition: width 0.4s, background-color 0.4s;
}

.sim-banner__pontos i.is-ativo { width: 22px; background: #fff; }

/* Blocos da home */
.sim-bloco { margin-top: 30px; }

.sim-bloco__cabeca {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.sim-bloco h4 {
  margin-bottom: 14px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.sim-link {
  padding: 0 !important;
  font-size: 13px;
  font-weight: 500;
  color: var(--ton) !important;
}

.sim-carrossel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 176px;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.sim-carrossel .sim-card { scroll-snap-align: start; }

.sim-bloco--duplo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.sim-destaque {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px !important;
  border-radius: 18px;
  background: #fff !important;
  text-align: left;
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
}

.sim-destaque:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.35); }

.sim-destaque__capa {
  flex-shrink: 0;
  width: 108px;
  height: 136px;
  overflow: hidden;
  border-radius: 10px;
  background: #eee center / cover;
}

.sim-destaque__capa .encarte { transform: scale(0.36); transform-origin: 0 0; width: 300px; }
.sim-destaque__capa img { width: 100%; height: 100%; object-fit: cover; }

.sim-destaque > span:last-child { display: flex; flex-direction: column; gap: 5px; }
.sim-destaque small { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ton); }
.sim-destaque b { font-size: 17px; font-weight: 600; line-height: 1.2; }
.sim-destaque em { font-size: 12px; font-style: normal; color: var(--cinza); }
.sim-destaque u { margin-top: 6px; font-size: 13px; font-weight: 500; text-decoration: none; }

.sim-departamentos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.sim-departamentos button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 6px 12px !important;
  border-radius: 16px;
  background: #fff !important;
  font-size: 13px;
  font-weight: 500;
  transition: transform 0.3s var(--ease);
}

.sim-departamentos button:hover { transform: translateY(-3px); }

.sim-departamentos img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
}

/* Arte de promoção (formato das artes do WhatsApp) */
.sim-card {
  display: block;
  padding: 0 !important;
  border-radius: 14px;
  text-align: left;
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
  animation: simEntra 0.5s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 35ms);
}

.sim-card:hover { transform: translateY(-4px); box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.45); }

.arte {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  padding: 10% 9%;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.7) 100%), var(--foto) center / cover, #ddd;
  color: #fff;
  container-type: inline-size;
}

.arte--img { padding: 0; background: #ddd; }
.arte--img img { width: 100%; height: 100%; object-fit: cover; }

.arte__topo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6% 8%;
  background: var(--ton);
  font-size: 7.5cqw;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.arte__topo i {
  font-size: 12cqw;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-transform: none;
}

.arte__nome {
  font-size: 10cqw;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.arte__preco {
  align-self: flex-start;
  display: flex;
  align-items: flex-start;
  margin-top: 5%;
  padding: 3% 7% 3% 6%;
  border-radius: 8px;
  background: var(--amarelo);
  color: var(--tinta);
  font-size: 20cqw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  transform: rotate(-3deg);
}

.arte__preco small { margin: 5% 3% 0 0; font-size: 0.32em; letter-spacing: 0; }
.arte__preco sup { font-size: 0.45em; margin-top: 4%; }
.arte__preco em { align-self: flex-end; margin: 0 0 3% 3%; font-size: 0.28em; font-style: normal; font-weight: 500; letter-spacing: 0; }

.arte__validade {
  margin-top: 6%;
  font-size: 6.5cqw;
  opacity: 0.85;
}

/* Página de promoções */
.sim-titulo { margin-bottom: 18px; }
.sim-titulo h3 { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; }
.sim-titulo p { margin-top: 4px; font-size: 14px; color: var(--cinza); }

.sim-filtros {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.sim-busca {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid var(--borda);
  border-radius: 100px;
  background: #fff;
  color: var(--cinza);
}

.sim-busca input {
  width: 100%;
  padding: 12px 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--tinta);
}

.sim-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.sim-chips--tipos { margin: 12px 0 18px; }

.sim-chips button {
  flex-shrink: 0;
  padding: 9px 15px;
  border: 1px solid var(--borda) !important;
  border-radius: 100px;
  background: #fff !important;
  font-size: 13px;
  color: var(--cinza) !important;
  transition: all 0.25s;
}

.sim-chips button.is-ativo {
  border-color: var(--tinta) !important;
  background: var(--tinta) !important;
  color: #fff !important;
}

.sim-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}

.sim-vazio { padding: 40px 0; text-align: center; color: var(--cinza); }

/* Folhetos */
.sim-folhetos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.sim-folheto {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 18px;
  background: #fff !important;
  text-align: left;
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
}

.sim-folheto:hover { transform: translateY(-4px); box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.35); }

.sim-folheto__capa {
  height: 260px;
  overflow: hidden;
  background: #eee;
}

.sim-folheto__capa .encarte { width: 300px; margin: 0 auto; transform: scale(0.95); transform-origin: top center; }
.sim-folheto__capa img { width: 100%; height: 100%; object-fit: cover; }

.sim-folheto__info { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.sim-folheto__info b { font-size: 16px; font-weight: 600; }
.sim-folheto__info em { font-size: 12px; font-style: normal; color: var(--cinza); }

.sim-tag {
  align-self: flex-start;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  background: #fff3cd;
  color: #8a6200;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
}

.sim-tag--ok { background: #e3f6e9; color: #17773d; }

/* Encarte (página de folheto) */
.encarte {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  background: var(--ton);
}

.encarte__topo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 10px;
  color: #fff;
}

.encarte__topo i { font-size: 22px; font-style: normal; font-weight: 700; letter-spacing: -0.04em; }
.encarte__topo b { flex: 1; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.encarte__topo em { font-size: 11px; font-style: normal; opacity: 0.8; }

.encarte__grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.encarte__grade .arte { border-radius: 8px; }
.encarte__grade .arte__topo { display: none; }

.encarte-img { width: 100%; max-height: 100%; object-fit: contain; }

/* Unidades */
.sim-unidades {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.sim-unidade {
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
}

.sim-unidade__foto { display: block; height: 130px; background: center / cover; }
.sim-unidade > div { display: flex; flex-direction: column; gap: 4px; padding: 16px; }
.sim-unidade b { font-size: 17px; font-weight: 600; }
.sim-unidade p { font-size: 13px; color: var(--cinza); }
.sim-unidade__acoes { display: flex; gap: 18px; margin-top: 8px; }

/* Páginas travadas na prévia */
.sim-pagina--travada { position: relative; min-height: 100%; }

.sim-borrado {
  filter: blur(7px);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}

.sim-trava {
  position: absolute;
  top: 110px;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(360px, 86%);
  padding: 28px 24px;
  translate: -50% 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.35);
  text-align: center;
}

.sim-trava__icone {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fdecec;
  color: var(--ton);
}

.sim-trava b { font-size: 18px; font-weight: 600; }
.sim-trava p { font-size: 13px; line-height: 1.5; color: var(--cinza); }
.sim-trava .sim-botao { margin-top: 6px; }

/* Marca d'água da prévia */
.marca-dagua {
  position: absolute;
  inset: 0;
  z-index: 35;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='200'%3E%3Ctext x='20' y='120' transform='rotate(-24 170 100)' font-family='Helvetica,Arial,sans-serif' font-size='15' letter-spacing='3' fill='%23000' fill-opacity='0.07'%3EPR%C3%89VIA %C2%B7 JO%C3%83O APOLIN%C3%81RIO%3C/text%3E%3C/svg%3E");
}

/* Rodapé do site */
.sim-rodape {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-top: 36px;
  padding: 26px 28px;
  background: var(--tinta);
  color: #fff;
}

.sim-rodape p { max-width: 280px; margin-top: 10px; font-size: 12px; color: #9a9a9a; }
.sim-logo--rodape { color: #fff; }
.sim-logo--rodape small { color: #bbb; }
.sim-rodape__links { display: flex; gap: 18px; font-size: 13px; }
.sim-rodape__links button { color: #ccc; }

/* Visualizador */
.sim-visor {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 10, 10, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: simEntra 0.3s;
}

.sim-visor__caixa {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(420px, 100%);
  max-height: 100%;
}

.sim-visor__conteudo {
  min-height: 0;
  overflow: auto;
  border-radius: 14px;
}

.sim-visor__conteudo .arte { font-size: 0; }

.sim-visor__fechar {
  position: absolute;
  z-index: 2;
  top: -12px;
  right: -12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.sim-visor__rodape {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 13px;
}

.sim-visor__rodape span { flex: 1; }

.sim-visor__nav {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  font-size: 20px;
  line-height: 1;
}

/* WhatsApp automático */
.sim-chat {
  position: absolute;
  z-index: 25;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.sim-chat__bolha {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366 !important;
  color: #fff !important;
  box-shadow: 0 12px 26px -8px rgba(37, 211, 102, 0.7);
  transition: transform 0.3s;
}

.sim-chat__bolha::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25d366;
  animation: pulsoChat 2.4s ease-out infinite;
}

@keyframes pulsoChat { to { transform: scale(1.6); opacity: 0; } }

.sim-chat.is-aberto .sim-chat__bolha::after { display: none; }
.sim-chat__bolha:hover { transform: scale(1.06); }
.sim-chat__bolha svg { width: 28px; height: 28px; fill: #fff; stroke: none; }

.sim-chat__janela {
  display: flex;
  flex-direction: column;
  width: 300px;
  max-height: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #efeae2;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transform-origin: bottom right;
  transition: max-height 0.5s var(--ease), opacity 0.3s, transform 0.4s var(--ease);
}

.sim-chat.is-aberto .sim-chat__janela { max-height: 420px; opacity: 1; transform: none; }

.sim-chat__topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #075e54;
  color: #fff;
}

.sim-chat__topo > div { flex: 1; }
.sim-chat__avatar { display: grid; place-items: center; width: 34px; height: 34px; overflow: hidden; border-radius: 50%; background: #fff; }
.sim-chat__avatar img { width: 30px; }
.sim-chat__topo b { display: block; font-size: 14px; font-weight: 500; }
.sim-chat__topo span { font-size: 11px; opacity: 0.75; }
.sim-chat__topo button { color: #fff !important; font-size: 14px; }

.sim-chat__mensagens {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 100px;
  max-height: 210px;
  padding: 12px;
  overflow-y: auto;
}

.sim-chat__msg {
  position: relative;
  max-width: 85%;
  padding: 8px 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  animation: simEntra 0.3s both;
}

.sim-chat__msg small { position: absolute; right: 8px; bottom: 3px; font-size: 9px; color: #8a8a8a; }
.sim-chat__msg--bot { align-self: flex-start; background: #fff; border-top-left-radius: 2px; }
.sim-chat__msg--eu { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 2px; }

.sim-chat__digitando { display: flex; gap: 3px; padding-bottom: 10px; }
.sim-chat__digitando i { width: 6px; height: 6px; border-radius: 50%; background: #9a9a9a; animation: digitando 1s infinite; }
.sim-chat__digitando i:nth-child(2) { animation-delay: 0.15s; }
.sim-chat__digitando i:nth-child(3) { animation-delay: 0.3s; }

@keyframes digitando { 0%, 60%, 100% { opacity: 0.4; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

.sim-chat__opcoes { display: flex; flex-direction: column; gap: 6px; padding: 0 12px 12px; }

.sim-chat__opcoes button {
  padding: 9px 12px;
  border: 1px solid #25d366 !important;
  border-radius: 100px;
  background: #fff !important;
  font-size: 13px;
  color: #075e54 !important;
  transition: background-color 0.25s;
}

.sim-chat__opcoes button:hover { background: #f0fff4 !important; }

.sim-aviso {
  position: absolute;
  z-index: 40;
  left: 50%;
  bottom: 22px;
  max-width: 80%;
  padding: 10px 16px;
  border-radius: 100px;
  background: var(--tinta);
  color: #fff;
  font-size: 12px;
  text-align: center;
  translate: -50% 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s, translate 0.35s;
}

.sim-aviso.is-on { opacity: 1; translate: -50% 0; }

/* Modo manutenção (ligado pelo painel) */
.sim--manutencao .sim-rolagem::after {
  content: "Estamos em manutenção. Voltamos em instantes!";
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 30px;
  background: rgba(246, 244, 239, 0.96);
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}

/* Site em tela pequena (celular) */
@container (max-width: 640px) {
  .sim-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    padding: 8px 16px 16px;
    background: #fff;
    border-bottom: 1px solid var(--borda);
    box-shadow: 0 20px 30px -20px rgba(0, 0, 0, 0.3);
  }

  .sim--menu .sim-menu { display: flex; animation: simEntra 0.3s; }
  .sim-menu button { padding: 14px 4px; text-align: left; font-size: 17px; }
  .sim-menu button::after { display: none; }
  .sim-menu button.is-ativo { color: var(--ton); }
  .sim-hamburguer { display: flex; }
  .sim-botao--whats span { display: none; }
  .sim-topo .sim-botao--whats { padding: 10px; }
  .sim-topo { padding: 12px 16px; }
  .sim-logo small { display: none; }
  .sim-pagina { padding: 16px 16px 8px; }
  .sim-banner { height: 380px; }
  .sim-banner__slide { padding: 24px; background: linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, 0.78) 100%), var(--foto) center / cover; }
  .sim-banner__slide h3 { font-size: 30px; }
  .sim-banner__pontos { top: 22px; bottom: auto; }
  .sim-bloco--duplo { grid-template-columns: 1fr; }
  .sim-departamentos { grid-template-columns: repeat(3, 1fr); }
  .sim-grade { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sim-carrossel { grid-auto-columns: 62%; }
  .sim-rodape { flex-direction: column; padding: 22px 16px 90px; }
  .sim-chat__janela { width: min(290px, 86cqw); }
}

/* =========================================================
   PAINEL ADMINISTRATIVO
   ========================================================= */
.moldura--painel { --alt: 700px; }

.adm {
  --a-fundo: #fbfbfa;
  --a-card: #fff;
  --a-tinta: #16161a;
  --a-cinza: #71717a;
  --a-borda: #ececef;
  --a-destaque: #e3262f;
  position: relative;
  display: flex;
  height: 100%;
  background: var(--a-fundo);
  color: var(--a-tinta);
  font-size: 13px;
}

.adm button { border: 0; background: none; color: inherit; }
.adm svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Lateral */
.adm-lateral {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 220px;
  padding: 18px 12px;
  border-right: 1px solid var(--a-borda);
  background: #fff;
}

.adm-lateral__marca { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.adm-lateral__marca img { height: 30px; width: auto; mix-blend-mode: multiply; }
.adm-lateral__marca > span { padding-left: 10px; border-left: 1px solid var(--a-borda); font-size: 13px; font-weight: 500; color: var(--a-cinza); }
.adm-lateral__marca > span:last-child { display: flex; flex-direction: column; font-size: 14px; font-weight: 600; }
.adm-lateral__marca small { font-size: 11px; font-weight: 400; color: var(--a-cinza); }

.adm-lateral nav { display: flex; flex-direction: column; gap: 2px; }

.adm-lateral nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px !important;
  border-radius: 9px;
  color: var(--a-cinza) !important;
  text-align: left;
  transition: background-color 0.25s, color 0.25s;
}

.adm-lateral nav button span { flex: 1; }
.adm-lateral nav button:hover { background: #f4f4f5 !important; color: var(--a-tinta) !important; }
.adm-lateral nav button.is-ativo { background: #f1f1f3 !important; color: var(--a-tinta) !important; font-weight: 500; }

.adm-lateral nav i {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 100px;
  background: var(--a-destaque);
  color: #fff;
  font-size: 10px;
  font-style: normal;
  text-align: center;
}

.adm-lateral__usuario {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 10px 8px 0;
  border-top: 1px solid var(--a-borda);
}

.adm-lateral__usuario i,
.adm-usuario__nome i {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ececef;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}

.adm-lateral__usuario span { display: flex; flex-direction: column; font-size: 11px; color: var(--a-cinza); }
.adm-lateral__usuario b { font-size: 13px; font-weight: 500; color: var(--a-tinta); }

/* Principal */
.adm-principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.adm-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--a-borda);
  background: #fff;
}

.adm-barra h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.adm-barra__acoes { display: flex; gap: 8px; }

.adm-botao {
  padding: 9px 14px !important;
  border-radius: 9px;
  background: var(--a-tinta) !important;
  color: #fff !important;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: opacity 0.25s, transform 0.25s;
}

.adm-botao:hover { opacity: 0.88; }
.adm-botao--sec { background: #fff !important; color: var(--a-tinta) !important; box-shadow: inset 0 0 0 1px var(--a-borda); }

.adm-conteudo { position: relative; flex: 1; min-height: 0; }

.adm-view {
  position: absolute;
  inset: 0;
  display: none;
  padding: 22px 24px 30px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.adm-view.is-ativa { display: block; animation: simEntra 0.4s var(--ease); }

/* Visão geral */
.adm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

.adm-kpi,
.adm-cartao {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--a-borda);
  border-radius: 12px;
  background: var(--a-card);
}

.adm-kpi span { font-size: 12px; color: var(--a-cinza); }
.adm-kpi b { font-size: 30px; font-weight: 500; letter-spacing: -0.03em; }
.adm-kpi small { font-size: 11px; color: var(--a-cinza); }
.adm-sobe { color: #17773d !important; }

.adm-duas { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; margin-top: 12px; }
.adm-cartao__cabeca { display: flex; justify-content: space-between; font-size: 13px; }
.adm-cartao__cabeca b { font-weight: 500; }
.adm-cartao__cabeca span { font-size: 11px; color: var(--a-cinza); }

.adm .adm-grafico { width: 100%; height: 150px; margin-top: 8px; stroke: none; }
.adm-dias { display: flex; justify-content: space-between; font-size: 11px; color: var(--a-cinza); }

.adm-atividade { display: flex; flex-direction: column; }

.adm-atividade li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--a-borda);
  font-size: 13px;
  color: var(--a-cinza);
}

.adm-atividade li:last-child { border: 0; }
.adm-atividade b { font-weight: 500; color: var(--a-tinta); }
.adm-atividade em { flex-shrink: 0; font-size: 11px; font-style: normal; }

/* Ferramentas */
.adm-ferramentas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.adm-dica { max-width: 520px; font-size: 13px; color: var(--a-cinza); }

.adm-busca {
  flex: 1 1 200px;
  max-width: 300px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--a-borda);
  border-radius: 9px;
  background: #fff;
  color: var(--a-cinza);
}

.adm-busca input { width: 100%; padding: 9px 0; border: 0; outline: 0; background: none; color: var(--a-tinta); }

.adm-abas {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: #f1f1f3;
}

.adm-abas button {
  padding: 7px 12px !important;
  border-radius: 8px;
  color: var(--a-cinza) !important;
  transition: background-color 0.25s, color 0.25s;
}

.adm-abas button.is-ativo { background: #fff !important; color: var(--a-tinta) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.adm-abas--config { display: inline-flex; margin-bottom: 18px; }

/* Lista de promoções */
.adm-lista,
.adm-tabela {
  overflow: hidden;
  border: 1px solid var(--a-borda);
  border-radius: 12px;
  background: #fff;
}

.adm-lista__cab,
.adm-linha {
  display: grid;
  grid-template-columns: 52px 1.6fr 0.9fr 1fr 0.8fr 104px;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
}

.adm-lista__cab,
.adm-tabela__cab {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--a-cinza);
  background: #fafafa;
  border-bottom: 1px solid var(--a-borda);
}

.adm-linha { border-bottom: 1px solid var(--a-borda); transition: background-color 0.25s; }
.adm-linha:last-child { border: 0; }
.adm-linha:hover { background: #fafafa; }

.adm-linha__thumb { width: 44px; }
.adm-linha__thumb .arte { border-radius: 6px; }
.adm-linha__thumb .arte > * { visibility: hidden; }
.adm-linha__thumb .arte--img > img { visibility: visible; }

.adm-linha__nome { display: flex; flex-direction: column; min-width: 0; }
.adm-linha__nome b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-linha__nome em { font-size: 11px; font-style: normal; color: var(--a-cinza); }
.adm-linha > span:nth-child(3),
.adm-linha > span:nth-child(4) { color: var(--a-cinza); }

.adm-linha__acoes { display: flex; justify-content: flex-end; gap: 4px; }

.adm-linha__acoes button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--a-cinza) !important;
  transition: background-color 0.2s, color 0.2s;
}

.adm-linha__acoes button:hover { background: #f1f1f3 !important; color: var(--a-tinta) !important; }
.adm-linha__acoes svg { width: 15px; height: 15px; }
.is-confirmando [data-acao="remover"],
.is-confirmando [data-u-acao="remover"] { background: var(--a-destaque) !important; color: #fff !important; }

.adm-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  white-space: nowrap;
}

.adm-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.adm-status--noar { background: #e3f6e9; color: #17773d; }
.adm-status--agendada { background: #fff3cd; color: #8a6200; }
.adm-status--pausada { background: #f1f1f3; color: #71717a; }
.adm-status--expirada { background: #fdecec; color: #b3141c; }

.adm-vazio { padding: 30px; text-align: center; color: var(--a-cinza); }

.is-nova { animation: linhaNova 1.4s ease-out; }
@keyframes linhaNova { from { background: #fff3cd; } }

/* Folhetos no painel */
.adm-folhetos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }

.adm-folheto {
  display: flex;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--a-borda);
  border-radius: 12px;
  background: #fff;
}

.adm-folheto__capa { flex-shrink: 0; width: 84px; height: 110px; overflow: hidden; border-radius: 8px; background: #eee; }
.adm-folheto__capa .encarte { width: 300px; transform: scale(0.28); transform-origin: 0 0; }
.adm-folheto__capa img { width: 100%; height: 100%; object-fit: cover; }
.adm-folheto > div { display: flex; flex-direction: column; gap: 6px; }
.adm-folheto b { font-size: 14px; font-weight: 500; }
.adm-folheto p { font-size: 12px; color: var(--a-cinza); }
.adm-folheto .adm-status { align-self: flex-start; }

/* Semana */
.adm-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }

.adm-dia {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 300px;
  padding: 10px 8px;
  border: 1px solid var(--a-borda);
  border-radius: 10px;
  background: #fff;
}

.adm-dia.is-hoje { border-color: var(--a-tinta); }
.adm-dia > b { font-size: 12px; font-weight: 600; }
.adm-dia > b span { font-weight: 400; color: var(--a-cinza); }
.adm-dia > em { font-size: 12px; font-style: normal; color: #c4c4c8; }

.adm-evento {
  padding: 6px 7px;
  border-left: 3px solid;
  border-radius: 4px;
  font-size: 11px;
  font-style: normal;
  line-height: 1.3;
}

.adm-evento--entra { border-color: #17773d; background: #e3f6e9; }
.adm-evento--sai { border-color: #b3141c; background: #fdecec; }
.adm-evento--folheto { border-color: #8a6200; background: #fff3cd; }

/* Usuários */
.adm-tabela__cab,
.adm-usuario {
  display: grid;
  grid-template-columns: 1.4fr 1.6fr 0.8fr 70px;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
}

.adm-usuario { border-bottom: 1px solid var(--a-borda); }
.adm-usuario:last-child { border: 0; }
.adm-usuario__nome { display: flex; align-items: center; gap: 10px; min-width: 0; }
.adm-usuario__nome > span { display: flex; flex-direction: column; min-width: 0; }
.adm-usuario__nome b { font-weight: 500; }
.adm-usuario__nome em { overflow: hidden; font-size: 11px; font-style: normal; color: var(--a-cinza); text-overflow: ellipsis; white-space: nowrap; }
.adm-usuario__perm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.adm-usuario__perm strong { margin-right: 4px; font-weight: 500; }
.adm-usuario__perm small { padding: 2px 8px; border-radius: 100px; background: #f1f1f3; font-size: 11px; color: var(--a-cinza); }
.adm-usuario__ultimo { font-size: 12px; color: var(--a-cinza); }

/* Formulários */
.adm-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.adm-form label { display: flex; flex-direction: column; gap: 6px; }
.adm-form span { font-size: 12px; font-weight: 500; color: var(--a-cinza); }
.adm-form__largo { grid-column: 1 / -1; }

.adm-form input,
.adm-form select,
.adm-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--a-borda);
  border-radius: 9px;
  background: #fff;
  color: var(--a-tinta);
  font-size: 13px;
  outline: 0;
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.adm-form input:focus,
.adm-form select:focus,
.adm-form textarea:focus { border-color: var(--a-tinta); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06); }

.adm-rotulo { margin: 6px 0 8px; font-size: 12px; font-weight: 500; color: var(--a-cinza); }

.adm-chave,
.adm-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
  padding: 12px 14px;
  border: 1px solid var(--a-borda);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.adm-chave > span,
.adm-banner > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--a-cinza); }
.adm-chave b,
.adm-banner b { font-size: 13px; font-weight: 500; color: var(--a-tinta); }
.adm-chave input,
.adm-banner input { position: absolute; opacity: 0; pointer-events: none; }

.adm-chave > i,
.adm-banner > i {
  position: relative;
  flex-shrink: 0;
  width: 38px;
  height: 22px;
  border-radius: 11px;
  background: #d8d8dc;
  transition: background-color 0.25s;
}

.adm-chave > i::after,
.adm-banner > i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s var(--ease);
}

.adm-chave input:checked + i,
.adm-banner input:checked + i { background: #17a34a; }
.adm-chave input:checked + i::after,
.adm-banner input:checked + i::after { transform: translateX(16px); }
.adm-chave input:focus-visible + i,
.adm-banner input:focus-visible + i { outline: 2px solid var(--a-tinta); outline-offset: 2px; }

.adm-aba { display: none; max-width: 640px; }
.adm-aba.is-ativa { display: block; animation: simEntra 0.35s; }

.adm-banner__foto { width: 88px; height: 48px; flex-shrink: 0; border-radius: 6px; background: center / cover; }

/* Modal */
.adm-modal {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(20, 20, 24, 0.4);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: simEntra 0.25s;
}

.adm-modal__caixa {
  width: min(640px, 100%);
  max-height: 100%;
  overflow-y: auto;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.4);
}

.adm-modal__cabeca {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--a-borda);
}

.adm-modal__cabeca h4 { font-size: 16px; font-weight: 600; }
.adm-modal__corpo { padding: 20px; }
.adm-form--modal { margin-top: 16px; }

.adm-soltar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px;
  border: 1.5px dashed #d4d4d8;
  border-radius: 12px;
  background: #fafafa;
  cursor: pointer;
  transition: border-color 0.25s, background-color 0.25s;
}

.adm-soltar:hover,
.adm-soltar.is-sobre { border-color: var(--a-tinta); background: #f4f4f5; }
.adm-soltar.is-enviado { border-style: solid; border-color: #17a34a; }

.adm-soltar__previa { flex-shrink: 0; width: 110px; }
.adm-soltar__texto { display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.45; color: var(--a-cinza); }
.adm-soltar__texto b { font-size: 14px; font-weight: 600; color: var(--a-tinta); }
.adm-soltar__texto u { color: var(--a-tinta); }
.adm-soltar__texto em { font-size: 11px; font-style: normal; }

.adm-soltar__paginas { flex-shrink: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 110px; }
.adm-soltar__paginas i,
.adm-soltar__paginas img { aspect-ratio: 3 / 4; border-radius: 4px; background: var(--a-destaque); object-fit: cover; width: 100%; }
.adm-soltar__paginas i:nth-child(even) { background: #ffd23f; }

.adm-permissoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }

.adm-permissoes label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--a-borda);
  border-radius: 9px;
  cursor: pointer;
}

.adm-permissoes input { accent-color: var(--a-tinta); }

.adm-modal__acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--a-borda);
}

.adm-modal__dica { flex: 1; font-size: 12px; color: var(--a-cinza); }

.adm-toast {
  position: absolute;
  z-index: 40;
  left: 50%;
  bottom: 20px;
  max-width: 80%;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--a-tinta);
  color: #fff;
  font-size: 13px;
  text-align: center;
  translate: -50% 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s, translate 0.35s;
}

.adm-toast.is-on { opacity: 1; translate: -50% 0; }

/* Módulos travados na prévia */
.adm-conteudo.is-travado .adm-view {
  filter: blur(6px);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}

.adm-trava {
  position: absolute;
  z-index: 5;
  top: 90px;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(360px, 86%);
  padding: 28px 24px;
  translate: -50% 0;
  border: 1px solid var(--a-borda);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.adm-trava b { font-size: 17px; font-weight: 600; }
.adm-trava p { font-size: 13px; line-height: 1.5; color: var(--a-cinza); }
.adm-trava .sim-trava__icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fdecec; color: var(--a-destaque); }
.adm-trava svg { width: 18px; height: 18px; }

/* Cards da home não são clicáveis na prévia */
.sim-carrossel .sim-card:hover { transform: none; box-shadow: none; }

/* Painel em tela pequena */
@container (max-width: 760px) {
  .adm-lateral { width: 60px; padding: 14px 8px; }
  .adm-lateral nav button span,
  .adm-lateral nav i,
  .adm-lateral__marca > span,
  .adm-lateral__usuario span { display: none; }
  .adm-lateral nav button { justify-content: center; }
  .adm-lateral__marca,
  .adm-lateral__usuario { justify-content: center; padding: 0; }
  .adm-lateral__marca { display: none; }
  .adm-barra { padding: 12px 14px; }
  .adm-barra h3 { font-size: 16px; }
  .adm-barra .adm-botao--sec { display: none; }
  .adm-view { padding: 14px; }
  .adm-kpis { grid-template-columns: 1fr 1fr; }
  .adm-kpi b { font-size: 24px; }
  .adm-duas { grid-template-columns: 1fr; }
  .adm-lista__cab,
  .adm-tabela__cab { display: none; }
  .adm-linha { grid-template-columns: 44px 1fr auto; gap: 10px; padding: 10px 12px; }
  .adm-linha > span:nth-child(3),
  .adm-linha > span:nth-child(4) { display: none; }
  .adm-linha > span:nth-child(5) { grid-column: 2; grid-row: 2; margin-top: -4px; }
  .adm-linha__acoes { grid-column: 3; grid-row: 1 / 3; flex-direction: column; gap: 2px; }
  .adm-semana { grid-template-columns: 1fr 1fr; }
  .adm-dia { min-height: 0; }
  .adm-usuario { grid-template-columns: 1fr auto; }
  .adm-usuario__perm { grid-column: 1; }
  .adm-usuario__ultimo { display: none; }
  .adm-usuario .adm-linha__acoes { grid-column: 2; grid-row: 1 / 3; }
  .adm-form,
  .adm-permissoes { grid-template-columns: 1fr; }
  .adm-soltar { flex-direction: column; align-items: flex-start; }
  .adm-modal { padding: 10px; }
  .adm-modal__acoes { flex-wrap: wrap; }
  .adm-modal__dica { flex-basis: 100%; }
}

/* ---------- Ponto de partida ---------- */
.colunas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.coluna {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--linha);
}

.coluna__num { font-size: 13px; color: var(--suave); }
.coluna h3 { font-size: 22px; font-weight: 400; letter-spacing: -0.01em; }
.coluna p { font-size: 15px; line-height: 1.6; color: var(--texto); }

.numeros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 80px;
}

.numeros > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 20px;
  border-left: 1px solid var(--linha);
}

.numeros > div:first-child { padding-left: 0; border-left: 0; }

.numeros b {
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
}

.numeros span { font-size: 15px; color: var(--suave); }

/* ---------- Itens descritivos acima das simulações ---------- */
.guia {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 28px;
  border-top: 1px solid var(--linha);
}

.guia--4 { grid-template-columns: repeat(4, 1fr); }

.guia__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 18px 20px 18px 0;
  color: #fff;
}

.guia span { font-size: 12px; letter-spacing: 0.06em; }
.guia b { font-size: 15px; font-weight: 500; }
.guia em { font-size: 13px; font-style: normal; line-height: 1.5; color: var(--suave); }

/* Destaque do cabeçalho do site simulado */
.sim-topo.is-destaque { animation: destaqueTopo 1.8s ease-out; }

@keyframes destaqueTopo {
  0%, 100% { box-shadow: inset 0 0 0 0 transparent; }
  15%, 65% { box-shadow: inset 0 0 0 3px var(--ton); }
}

/* ---------- Escopo ---------- */
.escopo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.escopo__col h3 {
  padding-bottom: 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--linha);
  font-size: 15px;
  font-weight: 500;
}

.escopo__col li {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linha);
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
}

.escopo__col li { flex-direction: column; gap: 4px; }
.escopo__col li b { font-weight: 400; color: #fff; }
.escopo__col li span { font-size: 14px; color: var(--suave); }

/* ---------- Etapas ---------- */
.etapas {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  counter-reset: etapa;
}

.etapas li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--linha);
}

.etapas span { font-size: 13px; color: var(--suave); }
.etapas b { font-size: 18px; font-weight: 400; }
.etapas p { font-size: 14px; line-height: 1.6; color: var(--suave); }

/* ---------- Incluso no valor ---------- */
.incluso {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}

.incluso li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--texto);
}

.incluso li::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100%;
}

/* ---------- Dúvidas ---------- */
.duvidas {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  align-items: start;
}

.faq { border-top: 1px solid var(--linha); }
.faq details { border-bottom: 1px solid var(--linha); }

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  font-size: 17px;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary i {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.faq summary i::before,
.faq summary i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 1px;
  background: #fff;
  transition: transform 0.3s var(--ease);
}

.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: none; }

.faq details p {
  max-width: 560px;
  padding-bottom: 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--texto);
}

/* ---------- Chamada final ---------- */
.final { padding: 140px 0; border-top: 1px solid var(--linha); }

.final__caixa {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.final__titulo {
  max-width: 900px;
  font-size: clamp(36px, 5.4vw, 72px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.final__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

/* ---------- Investimento ---------- */
.preco {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px 80px;
  align-items: start;
}

.preco__oferta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 14px;
  color: var(--texto);
}

.preco__oferta b { font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }

.preco__selo {
  padding: 4px 10px;
  border-radius: 100px;
  background: #fff;
  color: #000;
  font-size: 12px;
  font-weight: 600;
}

.preco__cheio {
  margin-top: 36px;
  font-size: 18px;
  color: var(--suave);
}

.preco__valor {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 6px;
  font-size: clamp(76px, 12vw, 168px);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

.preco__valor small {
  margin-top: 0.14em;
  font-size: 0.24em;
  letter-spacing: 0;
}

/* Preço de tabela ganha um risco quando o valor começa a descer */
.preco__cheio { position: relative; display: inline-block; }

.preco__cheio::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 55%;
  height: 1px;
  background: var(--suave);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--ease);
}

.is-caindo .preco__cheio::after { transform: scaleX(0.72); }
.oferta-encerrada .preco__cheio::after { display: none; }

.is-caindo .preco__valor span { color: #fff; }
.is-final .preco__valor span { animation: pousou 0.6s var(--ease); }

@keyframes pousou {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(6px); }
  100% { transform: none; }
}

.preco__valor span { display: inline-block; }

.preco__legenda {
  max-width: 420px;
  margin-top: 22px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--texto);
}

.preco__rotulo { font-size: 13px; color: var(--suave); }

.prazo {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 4px 16px;
  margin-bottom: 36px;
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
}

.prazo__rotulo { grid-column: 1 / -1; font-size: 13px; color: var(--suave); }
.prazo b { font-size: 30px; font-weight: 300; letter-spacing: -0.02em; }
.prazo em { font-size: 14px; font-style: normal; color: var(--suave); }

.parcelas { margin-top: 12px; border-top: 1px solid var(--linha); }

.parcelas li {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 4px 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--linha);
}

.parcelas span { grid-row: 1 / 3; font-size: 14px; color: var(--suave); }
.parcelas b { font-size: 22px; font-weight: 400; font-variant-numeric: tabular-nums; }
.parcelas em { font-size: 14px; font-style: normal; color: var(--suave); }

.preco__nota {
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--texto);
}

.preco__acoes {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 30px;
  border-radius: 100px;
  background: #fff;
  color: #000;
  font-size: 15px;
  font-weight: 500;
  transition: transform 0.3s var(--ease), background-color 0.3s, color 0.3s;
}

.botao:hover { transform: translateY(-2px); }
.botao--linha { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.botao--linha:hover { background: #fff; color: #000; }

/* ---------- Rodapé ---------- */
.rodape { padding: 56px 0 64px; border-top: 1px solid var(--linha); }

.rodape__grade {
  display: flex;
  justify-content: space-between;
  gap: 32px;
}

.rodape__texto { margin-top: 8px; font-size: 14px; color: var(--suave); }

.rodape__infos {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font-size: 14px;
  color: var(--suave);
}

.rodape__infos a { color: #fff; }

/* =========================================================
   Responsivo
   ========================================================= */
@media (max-width: 960px) {
  .topo__nav { display: none; }
  .ficha { grid-template-columns: 1fr 1fr; }
  .escopo { grid-template-columns: 1fr; gap: 32px; }
  .colunas { grid-template-columns: 1fr; gap: 28px; }
  .guia,
  .guia--4 { grid-template-columns: 1fr 1fr; }
  .etapas { grid-template-columns: 1fr 1fr; }
  .duvidas { grid-template-columns: 1fr; gap: 0; }
  .preco { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 700px) {
  :root { --lateral: 20px; }
  .abertura { padding-top: 140px; padding-bottom: 80px; }
  .abertura__titulo em { white-space: normal; }
  .fundo-video video { opacity: 0.3; }
  .abertura__texto { font-size: 17px; }
  .ficha { grid-template-columns: 1fr; margin-top: 16px; }
  .ficha > div { flex-direction: row; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--linha); }
  .secao { padding: 80px 0; }
  .controles { flex-direction: column; align-items: flex-start; }
  .alternar { display: none; }

  /* No celular a simulação já é a versão de celular, ocupando a largura */
  .moldura,
  .moldura[data-tela] { width: 100%; height: 680px; padding: 8px; border-radius: 34px; background: #111; }
  .moldura .moldura__barra { height: 0; opacity: 0; }
  .moldura .moldura__tela { border-radius: 26px; }
  .moldura--painel,
  .moldura--painel[data-tela] { height: 640px; border-radius: 18px; padding: 6px; }
  .moldura--painel .moldura__tela { border-radius: 12px; }

  .preco__acoes,
  .final__acoes { flex-direction: column; width: 100%; }
  .numeros { grid-template-columns: 1fr 1fr; row-gap: 32px; margin-top: 56px; }
  .numeros > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .guia,
  .guia--4 { grid-template-columns: 1fr; }
  .guia__item { padding: 14px 0; }
  .etapas { grid-template-columns: 1fr; gap: 0; }
  .etapas li { padding: 18px 0; }
  .final { padding: 90px 0; }
  .botao { width: 100%; }
  .rodape__grade { flex-direction: column; }
  .rodape__infos { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fundo-video video { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}