/*
 * static/css/loja_secoes.css — o desenho das seções do site da loja.
 *
 * Uma classe por tipo de seção, tudo em cima dos tokens do tema
 * (static/css/loja_temas.css). Seção não traz cor própria: é isso que faz
 * "trocar de modelo" redesenhar a página inteira em vez de deixá-la
 * remendada.
 *
 * Arquivo próprio, e não <style> no template: o CLAUDE.md pede para não somar
 * CSS inline, e aqui cada seção nova entraria numa página que já serve a loja
 * toda.
 */

.sec {
  padding: var(--densidade, 80px) 0;
  position: relative;
}

.sec + .sec {
  border-top: 1px solid var(--sec-borda-suave, rgba(255, 255, 255, .06));
}

.sec-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.sec-titulo {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 12px;
  color: var(--text);
}

.sec-subtitulo {
  color: var(--text2);
  max-width: 620px;
  margin-bottom: 36px;
}

.sec-cabecalho-centro {
  text-align: center;
}

.sec-cabecalho-centro .sec-subtitulo {
  margin-left: auto;
  margin-right: auto;
}

/* ── Botões das seções ───────────────────────────────────────────────────── */

.sec-botoes {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.sec-cabecalho-centro .sec-botoes {
  justify-content: center;
}

/* ── hero ────────────────────────────────────────────────────────────────── */

.sec-hero {
  padding: calc(var(--densidade, 80px) * 1.3) 0;
  /* A foto de fundo pode estar animada (zoom lento, panorâmica): sem o
     recorte, a imagem ampliada vaza por cima da seção seguinte. */
  overflow: hidden;
}

.sec-hero-fundo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .28;
  pointer-events: none;
}

.sec-hero .sec-inner {
  position: relative;
}

.sec-hero h1 {
  font-size: clamp(1.9rem, 5vw, 3.2rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--text);
}

/* A etiqueta curta acima do título, e o trecho destacado dentro dele.
 *
 * As duas regras são de TODOS os heroes (os cinco desenhos), e não só do
 * padrão: o campo é um só no editor, e etiqueta que aparece em um desenho e
 * some no outro faz quem trocou de modelo procurar o texto que perdeu.
 *
 * O fallback das cores existe porque `--lp`/`--ls` são da LOJA: nas cinco
 * telas da plataforma quem as define é `site_plataforma.css`, e num gradiente
 * com variável vazia o texto fica INVISÍVEL (o fundo é o que pinta a letra).
 */
.sec-hero-selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg2);
  color: var(--text2);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sec-hero-selo i {
  color: var(--lp, #7c5cff);
  font-size: .95rem;
}

.sec h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--lp, #7c5cff), var(--ls, #a78bfa));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sec-hero p {
  color: var(--text2);
  font-size: 1.05rem;
  margin-top: 16px;
  max-width: 560px;
}

.sec-hero--centro {
  text-align: center;
}

.sec-hero--centro p {
  margin-left: auto;
  margin-right: auto;
}

.sec-hero--centro .sec-botoes {
  justify-content: center;
}

.sec-hero--dividido .sec-inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: center;
}

.sec-hero--dividido .sec-hero-fundo {
  display: none;
}

.sec-hero-imagem {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: block;
}

.sec-hero--faixa {
  padding: calc(var(--densidade, 80px) * .7) 0;
}

.sec-hero--faixa h1 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
}

/* ── texto ───────────────────────────────────────────────────────────────── */

.sec-texto-corpo {
  color: var(--text2);
  line-height: 1.8;
  max-width: 68ch;
}

.sec-texto-corpo h2,
.sec-texto-corpo h3,
.sec-texto-corpo h4 {
  color: var(--text);
  margin: 24px 0 8px;
  line-height: 1.3;
}

.sec-texto-corpo p {
  margin-bottom: 14px;
}

.sec-texto-corpo ul,
.sec-texto-corpo ol {
  margin: 0 0 14px 20px;
}

.sec-texto-corpo li {
  margin-bottom: 6px;
}

.sec-texto-corpo blockquote {
  border-left: 3px solid var(--lp);
  padding-left: 16px;
  margin: 18px 0;
  color: var(--text);
}

.sec-texto-corpo img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.sec-texto--com-imagem .sec-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.sec-texto--imagem-esquerda .sec-texto-figura {
  order: -1;
}

.sec-texto-figura img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: block;
}

/* ── servicos ────────────────────────────────────────────────────────────── */

.sec-servicos-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.sec-servico {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: transform .2s, border-color .2s;
}

a.sec-servico:hover {
  transform: translateY(-3px);
  border-color: var(--lp);
}

.sec-servico i {
  font-size: 1.6rem;
  color: var(--lp);
  margin-bottom: 14px;
  display: block;
}

.sec-servico h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.sec-servico p {
  color: var(--text2);
  font-size: .92rem;
  line-height: 1.6;
}

.sec-servicos--lista .sec-servicos-grade {
  grid-template-columns: 1fr;
  gap: 0;
}

.sec-servicos--lista .sec-servico {
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  padding: 22px 0;
}

/*
 * As duas colunas (ícone | texto) ficam no CONTEÚDO, e não no card.
 *
 * Estavam no card, de quando ele tinha o `<i>` e o texto como filhos diretos.
 * As fotos de fundo embrulharam os dois num `<span
 * class="sec-servico-conteudo">`, e o card passou a ter UM filho: a grade
 * jogava o item inteiro na coluna de 40px do ícone e o texto saía uma palavra
 * por linha. Quem olhasse culparia o texto por ser comprido - a largura não
 * aparece em lugar nenhum do editor.
 */
.sec-servicos--lista .sec-servico-conteudo {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  align-items: start;
}

.sec-servicos--lista .sec-servico i {
  margin-bottom: 0;
}

/* ── galeria ─────────────────────────────────────────────────────────────── */

.sec-galeria-grade {
  display: grid;
  gap: 14px;
}

.sec-galeria-grade[data-colunas="2"] { grid-template-columns: repeat(2, 1fr); }
.sec-galeria-grade[data-colunas="3"] { grid-template-columns: repeat(3, 1fr); }
.sec-galeria-grade[data-colunas="4"] { grid-template-columns: repeat(4, 1fr); }

.sec-galeria-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg3);
  aspect-ratio: 4 / 3;
}

.sec-galeria--mosaico .sec-galeria-item:nth-child(4n + 1) {
  grid-row: span 2;
  aspect-ratio: 4 / 6;
}

.sec-galeria-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s;
}

.sec-galeria-item:hover img {
  transform: scale(1.05);
}

.sec-galeria-legenda {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 14px 12px;
  font-size: .82rem;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent);
}

/* ── cta ─────────────────────────────────────────────────────────────────── */

.sec-cta--faixa {
  background: linear-gradient(135deg, var(--lp), var(--ls));
}

.sec-cta--faixa .sec-titulo,
.sec-cta--faixa .sec-subtitulo {
  color: #fff;
}

.sec-cta--faixa .sec-subtitulo {
  opacity: .9;
}

.sec-cta--faixa .btn-outline {
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}

.sec-cta--caixa .sec-cta-caixa {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 44px 36px;
  text-align: center;
}

/* ── produtos ────────────────────────────────────────────────────────────── */

.sec-produtos-vazio {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 40px;
  text-align: center;
  color: var(--text3);
}

.sec-produtos--carrossel .produto-grid {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
}

.sec-produtos--carrossel .produto-grid > * {
  flex: 0 0 260px;
  scroll-snap-align: start;
}

/* ── responsivo ──────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .sec {
    padding: calc(var(--densidade, 80px) * .65) 0;
  }

  .sec-hero--dividido .sec-inner,
  .sec-texto--com-imagem .sec-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* No celular a imagem vem sempre depois do texto: a ordem invertida do
     desktop empurraria o título para baixo da dobra. */
  .sec-texto--imagem-esquerda .sec-texto-figura {
    order: 0;
  }

  .sec-galeria-grade[data-colunas="3"],
  .sec-galeria-grade[data-colunas="4"] {
    grid-template-columns: repeat(2, 1fr);
  }

  .sec-galeria--mosaico .sec-galeria-item:nth-child(4n + 1) {
    grid-row: span 1;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 520px) {
  .sec-inner {
    padding: 0 16px;
  }

  .sec-botoes {
    flex-direction: column;
    align-items: stretch;
  }

  .sec-botoes .btn {
    text-align: center;
  }
}

/* ── A casca, quando a página é montada por seções ───────────────────────── */
/*
 * `.loja-main` limita a 1280px e dá respiro nas laterais - o certo para a
 * vitrine e a página de produto. Uma página de seções precisa do contrário:
 * o hero e a faixa de chamada vão de ponta a ponta, e quem limita a largura é
 * o `.sec-inner` de cada seção.
 *
 * A classe dobrada (`.loja-main.loja-main--largo`) não é enfeite: o
 * `.loja-main` original está no <style> de base.html, que o navegador lê
 * DEPOIS deste arquivo. Com a mesma especificidade quem ganha é o último - e
 * a faixa do hero ficava com margem branca dos dois lados. Um `!important`
 * resolveria e seria o começo do próximo; a especificidade resolve sozinha.
 */
.loja-main.loja-main--largo {
  max-width: none;
  padding: 0;
}

/* ── Menu de páginas na barra da loja ─────────────────────────────────────── */

.loja-nav-pagina {
  color: var(--text2);
  font-size: .88rem;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
}

.loja-nav-pagina:hover {
  color: var(--text);
  background: var(--bg3);
}

.loja-nav-pagina.ativa {
  color: var(--lp);
}

/* No celular a barra já disputa espaço com a busca e o login: as páginas
   viram uma linha própria, rolável, em vez de quebrarem o cabeçalho. */
@media (max-width: 860px) {
  .loja-nav-pagina {
    font-size: .8rem;
    padding: 4px 8px;
  }
}

/* ── Aviso de prévia ──────────────────────────────────────────────────────── */
/*
 * Quem abre a prévia está vendo o rascunho, não o que o comprador vê. Sem
 * este aviso, "mas eu publiquei" vira chamado de suporte.
 */
.loja-previa-aviso {
  background: #f59e0b;
  color: #1c1917;
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
  padding: 8px 16px;
}

/* ── numeros ─────────────────────────────────────────────────────────────── */

.sec-numeros-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  text-align: center;
}

.sec-numeros--cards .sec-numero {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 16px;
}

.sec-numero-valor {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, var(--lp), var(--ls));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sec-numero-rotulo {
  color: var(--text2);
  font-size: .85rem;
  margin-top: 6px;
}

/* ── equipe ──────────────────────────────────────────────────────────────── */

.sec-equipe-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 24px;
  text-align: center;
}

.sec-pessoa-foto {
  width: 120px;
  height: 120px;
  margin: 0 auto 14px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg3);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--lp);
}

.sec-pessoa-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sec-pessoa-nome {
  font-weight: 700;
  color: var(--text);
}

.sec-pessoa-cargo {
  font-size: .8rem;
  color: var(--lp);
  margin-top: 2px;
}

.sec-pessoa-texto {
  font-size: .85rem;
  color: var(--text2);
  margin-top: 8px;
  line-height: 1.6;
}

.sec-equipe--compacto .sec-equipe-grade {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.sec-equipe--compacto .sec-pessoa-foto {
  width: 76px;
  height: 76px;
  font-size: 1.5rem;
}

.sec-equipe--compacto .sec-pessoa-texto { display: none; }

/* ── depoimentos ─────────────────────────────────────────────────────────── */

.sec-depoimentos-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.sec-depoimento {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.sec-depoimento-estrelas {
  color: #f59e0b;
  font-size: .85rem;
  margin-bottom: 10px;
}

.sec-depoimento blockquote {
  color: var(--text);
  font-size: .95rem;
  line-height: 1.7;
  margin: 0 0 16px;
  flex: 1;
}

/* As aspas são decoração: o leitor de tela já anuncia a citação, e ler
   "aspas" duas vezes atrapalha quem usa um. */
.sec-depoimento blockquote::before {
  content: '“';
  font-size: 2.4rem;
  line-height: 0;
  color: var(--lp);
  vertical-align: -.4em;
  margin-right: 4px;
}

.sec-depoimento figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--sec-borda-suave, rgba(255, 255, 255, .06));
  padding-top: 12px;
}

.sec-depoimento figcaption img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.sec-depoimento figcaption strong {
  display: block;
  font-size: .85rem;
  color: var(--text);
}

.sec-depoimento figcaption small {
  display: block;
  font-size: .75rem;
  color: var(--text3);
}

.sec-depoimentos--destaque .sec-depoimentos-grade {
  grid-template-columns: 1fr;
  max-width: 760px;
  margin: 0 auto;
}

.sec-depoimentos--destaque .sec-depoimento blockquote {
  font-size: 1.15rem;
  text-align: center;
}

.sec-depoimentos--destaque .sec-depoimento figcaption {
  justify-content: center;
  text-align: center;
}

/* ── faq ─────────────────────────────────────────────────────────────────── */

.sec-faq-lista {
  max-width: 760px;
  margin: 0 auto;
}

.sec-faq-item {
  border-bottom: 1px solid var(--border);
}

.sec-faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  list-style: none;
}

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

.sec-faq-item summary i {
  color: var(--lp);
  transition: transform .2s;
  flex: 0 0 auto;
}

.sec-faq-item[open] summary i { transform: rotate(180deg); }

.sec-faq-resposta {
  color: var(--text2);
  line-height: 1.7;
  padding: 0 0 16px;
  font-size: .92rem;
}

.sec-faq-resposta p { margin-bottom: 10px; }
.sec-faq-resposta ul, .sec-faq-resposta ol { margin: 0 0 10px 20px; }

/* ── parceiros ───────────────────────────────────────────────────────────── */

.sec-parceiros-faixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.sec-parceiro img {
  max-height: 46px;
  width: auto;
  display: block;
}

/* Logo de marca vem em mil cores e destrói a paleta da página. Em cinza, a
   faixa vira uma linha só - e ganha cor no hover, para quem quiser olhar. */
.sec-parceiros--cinza .sec-parceiro img {
  filter: grayscale(1);
  opacity: .65;
  transition: filter .2s, opacity .2s;
}

.sec-parceiros--cinza .sec-parceiro:hover img {
  filter: none;
  opacity: 1;
}

/* ── contato ─────────────────────────────────────────────────────────────── */

.sec-contato-corpo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.sec-contato:not(:has(.sec-contato-form)) .sec-contato-corpo,
.sec-contato--cards .sec-contato-corpo {
  grid-template-columns: 1fr;
}

.sec-contato-canais {
  display: grid;
  gap: 12px;
}

.sec-contato--cards .sec-contato-canais {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.sec-canal {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  color: var(--text);
}

a.sec-canal:hover {
  border-color: var(--lp);
  color: var(--text);
}

.sec-canal i {
  font-size: 1.3rem;
  color: var(--lp);
  flex: 0 0 auto;
}

.sec-canal strong {
  display: block;
  font-size: .82rem;
}

.sec-canal small {
  display: block;
  font-size: .8rem;
  color: var(--text2);
}

.sec-contato-form .form-control {
  margin-bottom: 12px;
}

.sec-contato-linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* A armadilha precisa ficar invisível para gente e preenchível para robô:
   `display:none` é o primeiro campo que um robô decente ignora. */
.sec-contato-armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.sec-contato-ok {
  background: var(--bg2);
  border: 1px solid var(--success);
  border-radius: var(--radius);
  padding: 24px;
  color: var(--text2);
}

.sec-contato-ok i {
  color: var(--success);
  font-size: 1.4rem;
  display: block;
  margin-bottom: 8px;
}

.sec-contato-ok strong {
  color: var(--text);
  display: block;
}

/* ── mapa ────────────────────────────────────────────────────────────────── */

.sec-mapa-moldura {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  line-height: 0;
}

.sec-mapa-moldura iframe {
  width: 100%;
  height: 380px;
  border: 0;
}

.sec-mapa--caixa .sec-mapa-moldura iframe { height: 260px; }

.sec-mapa-endereco {
  text-align: center;
  color: var(--text2);
  font-size: .88rem;
  margin-top: 14px;
}

.sec-mapa-endereco i { color: var(--lp); }

@media (max-width: 860px) {
  .sec-contato-corpo,
  .sec-contato-linha {
    grid-template-columns: 1fr;
  }

  .sec-mapa-moldura iframe { height: 280px; }
}

/* ── Card de serviço com fotos no fundo ──────────────────────────────────── */
/*
 * O card ganha uma pilha de fotos atrás do texto, trocadas por
 * static/js/loja_carrossel.js. Duas coisas não são enfeite:
 *
 * - o véu escuro (`::after`). Foto é imprevisível: a mesma que fica ótima
 *   atrás de um título pode ter um céu branco exatamente onde o texto passa.
 *   Com o véu, o contraste não depende da foto que o cliente escolheu.
 * - o texto vira branco fixo neste modo, em vez de seguir o tema: o fundo
 *   agora é a foto, não o fundo do tema, e `var(--text)` de um modelo claro
 *   sumiria dentro do véu.
 */

.sec-servico--com-fundo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 230px;
  display: flex;
  align-items: flex-end;
  border-color: transparent;
}

.sec-servico-fundo {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.sec-servico-fundo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* A troca é lenta de propósito: corte seco no fundo de um card puxa o olho
     para fora do texto, que é o que o card tem a dizer. */
  transition: opacity 1.2s ease-in-out;
}

.sec-servico-fundo img.ativa {
  opacity: 1;
}

.sec-servico--com-fundo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
              rgba(0, 0, 0, .82) 0%,
              rgba(0, 0, 0, .55) 45%,
              rgba(0, 0, 0, .25) 100%);
}

.sec-servico--com-fundo .sec-servico-conteudo {
  position: relative;
}

.sec-servico--com-fundo h3,
.sec-servico--com-fundo p,
.sec-servico--com-fundo i {
  color: #fff;
}

.sec-servico--com-fundo p {
  opacity: .92;
}

.sec-servico--com-fundo:hover {
  border-color: var(--lp);
}

/* No modo lista o card é uma linha; a foto de fundo ali vira uma tarja
   ilegível atrás de duas linhas de texto. */
.sec-servicos--lista .sec-servico--com-fundo {
  min-height: 0;
  display: grid;
}

.sec-servicos--lista .sec-servico-fundo,
.sec-servicos--lista .sec-servico--com-fundo::after {
  display: none;
}

.sec-servicos--lista .sec-servico--com-fundo h3,
.sec-servicos--lista .sec-servico--com-fundo p {
  color: inherit;
}

/* ── html / incorporação ─────────────────────────────────────────────────── */

.sec-html-caixa {
  border-radius: var(--radius);
  overflow: hidden;
}

.sec-html-caixa iframe {
  width: 100%;
  min-height: 420px;
  border: 0;
  display: block;
  border-radius: var(--radius);
}

.sec-html--caixa .sec-html-caixa {
  max-width: 760px;
  margin: 0 auto;
  border: 1px solid var(--border);
}

.sec-html--caixa .sec-html-caixa iframe {
  min-height: 320px;
}

@media (max-width: 860px) {
  .sec-html-caixa iframe { min-height: 260px; }
}

/* ── vídeo enviado ────────────────────────────────────────────────────────── */

.sec-video-caixa video,
.sec-video-capa img,
.sec-video-capa video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  background: #000;
}

/* No player a proporção é a do arquivo: cortar um vídeo vertical para 16:9
   esconderia metade do que a pessoa gravou. */
.sec-video--player .sec-video-caixa video {
  aspect-ratio: auto;
  object-fit: contain;
  max-height: 80vh;
}

.sec-video--caixa .sec-video-caixa,
.sec-video--caixa .sec-video-chamada {
  max-width: 760px;
  margin: 0 auto;
}

.sec-video-chamada {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.sec-video-capa {
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--radius);
}

.sec-video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lp);
  color: #fff;
  font-size: 2.4rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
  transition: transform .2s ease;
}

.sec-video-capa:hover .sec-video-play,
.sec-video-capa:focus-visible .sec-video-play {
  transform: scale(1.08);
}

.sec-video-janela {
  width: min(960px, 92vw);
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.sec-video-janela::backdrop {
  background: rgba(0, 0, 0, .8);
}

.sec-video-janela video {
  display: block;
  width: 100%;
  max-height: 84vh;
  border-radius: var(--radius);
  background: #000;
}

.sec-video-fechar {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  cursor: pointer;
}

/* ── Conta do cliente da loja ─────────────────────────────────────────────── */

.conta-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 880px;
  margin: 0 auto;
}

.conta-cartao {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
}

.conta-cartao .sec-titulo {
  font-size: 1.3rem;
}

.conta-cartao .form-control {
  margin-bottom: 12px;
}

.conta-cartao .btn {
  width: 100%;
  justify-content: center;
}

/* No celular as duas colunas viram uma, e "Entrar" fica em cima: quem já tem
   conta é quem mais volta. */
@media (max-width: 760px) {
  .conta-grade { grid-template-columns: 1fr; }
}

/* ── "Criar conta" ao lado de "Minha Conta" ──────────────────────────────── */
/*
 * Ele mora FORA do `.mc-wrap` de proposito: aquele div e `position: relative`
 * so para ancorar o dropdown, e um link dentro dele virava outra linha. Como
 * irmao, ele entra no flex da barra e fica ao lado.
 */
.loja-nav-links .btn-portal {
  white-space: nowrap;
}

@media (max-width: 620px) {
  /* A barra ja disputa espaco com a busca e o login: aqui sobra o icone, em
     vez de o cabecalho quebrar em duas linhas. */
  .loja-nav-links .btn-portal-texto {
    display: none;
  }
}

/* O espaço que a busca ocupava, quando ela está desligada: sem ele, o menu
   colaria no logo em vez de ficar à direita. */
.loja-espaco-livre {
  flex: 1;
}

/* Duas colunas dentro do cartão da conta (CEP/número, cidade/UF...).
   O checkout tinha a sua própria `.row-2` dentro de um <style> do template;
   aqui a regra fica no CSS da loja para a tela de dados usar a mesma. */
.conta-dupla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 480px) {
  .conta-dupla { grid-template-columns: 1fr; }
}

/* O endereço opcional do cadastro. Fechado por padrão: o formulário existe
   para a pessoa entrar na loja, não para ela preencher uma ficha. */
.conta-endereco {
  margin: 4px 0 14px;
}

.conta-endereco > summary {
  cursor: pointer;
  font-size: .82rem;
  color: var(--text2);
  margin-bottom: 10px;
}

.conta-endereco > summary:hover {
  color: var(--text);
}

/* ── Carrinho ─────────────────────────────────────────────────────────────── */

.carrinho-grade {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items: start;
}

.carrinho-item {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 16px;
  align-items: center;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
}

.carrinho-foto {
  width: 90px;
  height: 90px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text3);
}

.carrinho-foto img {
  width: 100%;
  height: 100%;
  /* `contain`, e não `cover`: produto cortado no carrinho faz a pessoa
     duvidar se é o mesmo que ela escolheu. */
  object-fit: contain;
}

.carrinho-titulo {
  font-weight: 600;
  color: var(--text);
  display: block;
}

.carrinho-unitario {
  font-size: .8rem;
  color: var(--text3);
  margin-bottom: 8px;
}

.carrinho-acoes {
  display: flex;
  gap: 6px;
  align-items: center;
}

.carrinho-quantidade {
  width: 72px;
  padding: 6px 8px;
}

.carrinho-total {
  font-size: 1.1rem;
  font-weight: 800;
  white-space: nowrap;
}

.carrinho-resumo {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  position: sticky;
  top: 84px;
}

.carrinho-resumo-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1.05rem;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.carrinho-resumo-linha strong {
  font-size: 1.35rem;
  background: linear-gradient(135deg, var(--lp), var(--ls));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.carrinho-resumo .btn {
  width: 100%;
  justify-content: center;
  margin-bottom: 8px;
}

.carrinho-aviso {
  font-size: .78rem;
  color: var(--text3);
  margin: 10px 0 0;
}

/* ── O balãozinho do topo ─────────────────────────────────────────────────── */

.loja-carrinho-botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.loja-carrinho-contador {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--lp);
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 860px) {
  .carrinho-grade { grid-template-columns: 1fr; }

  .carrinho-resumo { position: static; }

  .carrinho-item {
    grid-template-columns: 70px 1fr;
  }

  /* No celular o total vai para baixo dos dados, em vez de espremer a
     coluna do meio a ponto de o título virar uma palavra por linha. */
  .carrinho-total {
    grid-column: 2;
    text-align: right;
  }
}