/* Franco Confecções | Landing atacado de camiseta lisa */

:root {
  --preto: #000000;
  --branco: #FFFFFF;
  --grafite: #5C5C5C;
  --coroa: #F5C534;
  --fundo-card: #0A0A0A;

  --fonte: "Manrope", system-ui, sans-serif;
  --fonte-titulo: "Archivo Black", system-ui, sans-serif;

  --moldura: 20px;
  --raio: 15px;
  --largura: 1920px;
  --conteudo: 1200px;
}

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

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

body {
  margin: 0;
  background: var(--branco);
  color: var(--preto);
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

[hidden] { display: none !important; }

a { color: inherit; }

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

/* ---------- botão ---------- */

.botao {
  gap: 12px;
  white-space: nowrap;
  border: 2px solid var(--preto);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 320px;
  min-height: 56px;
  padding: 0 32px;
  border-radius: 8px;
  background: var(--coroa);
  color: var(--preto);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .06em;
  box-shadow: 4px 4px 0 var(--preto);
  text-decoration: none;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.botao:hover { background: #FFD34D; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--preto); }
.botao:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--preto); }


.botao__icone {
  display: grid;
  flex: none;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  margin-right: -14px;
  border-radius: 50%;
  background: var(--preto);
  color: var(--coroa);
}
.botao__icone svg { width: 16px; height: 16px; }
.botao:hover .botao__icone svg { animation: seta .6s ease; }
@keyframes seta { 50% { transform: translateX(3px); } }

/* em fundo escuro a sombra dura vira amarela translúcida */
.hero__card .botao,
.resumo .botao { border-color: var(--coroa); box-shadow: 4px 4px 0 rgba(245, 197, 52, .35); }
.hero__card .botao:hover,
.resumo .botao:hover { box-shadow: 6px 6px 0 rgba(245, 197, 52, .45); }

/* feixe de luz que atravessa os botões de tempos em tempos */
.botao,
.botao-ajuda {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.botao::after,
.botao-ajuda::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -60%;
  width: 40%;
  z-index: -1;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .75) 50%, transparent 100%);
  transform: skewX(-20deg);
  animation: brilho 3.2s ease-in-out infinite;
  pointer-events: none;
}
.botao-ajuda::after { z-index: 0; background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .35) 50%, transparent 100%); }
.botao:disabled::after { animation: none; display: none; }


@keyframes brilho {
  0%, 55% { left: -60%; }
  85%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .botao::after, .botao-ajuda::after { animation: none; }
}

/* ---------- topo ---------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--branco);
}

.topo__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 16px 40px;
}

.topo__logo img { width: 112px; height: auto; }

.topo__nav {
  display: flex;
  gap: 32px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.topo__nav a { text-decoration: none; }
.topo__nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.topo__nav--direita { justify-content: flex-end; }

/* ---------- hero ---------- */

.hero {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--moldura);
}

.hero__card {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(780px, calc(100vh - 100px));
  border-radius: var(--raio);
  background: var(--fundo-card);
  color: var(--branco);
  overflow: hidden;
  isolation: isolate;
}

/* Preserva a composição e a área escura reservada ao texto em telas intermediárias. */
.hero__imagem {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: -1;
  width: 100%;
  aspect-ratio: 48 / 25;
  max-height: 100%;
  transform: translateY(-50%);
  background: var(--fundo-card) url("assets/hero-desktop.jpg") right center / contain no-repeat;
  mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
}

.hero__texto {
  width: 100%;
  max-width: min(760px, 52%);
  padding: 64px 0 56px 50px;
}

.hero__titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: clamp(30px, 3vw, 54px);
  line-height: .95;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.hero__preco {
  color: var(--coroa);
  font-weight: 800;
  white-space: nowrap;
}

.hero__sub {
  max-width: 29em;
  margin: 24px 0 28px;
  font-size: clamp(15px, 1.12vw, 19px);
  line-height: 1.4;
  font-weight: 400;
  text-wrap: pretty;
}

/* benefícios em linha, logo abaixo do botão */
.beneficios {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  margin: 76px 0 0;
  padding: 0;
  list-style: none;
}
.beneficios li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  line-height: 1.35;
}
.beneficios svg {
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--branco);
}


/* ---------- prova (números) logo abaixo do hero ---------- */

.prova {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 24px var(--moldura) 0;
}

.prova__caixa {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: var(--conteudo);
  margin: 0 auto;
  padding: 28px 0;
  list-style: none;
  border: 1px solid #E3E3E3;
  border-radius: var(--raio);
}

.prova__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 24px;
  text-align: center;
}
.prova__item + .prova__item { border-left: 1px solid #E3E3E3; }

.prova__item strong {
  font-family: var(--fonte-titulo);
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.prova__item span {
  font-size: 14px;
  color: var(--grafite);
}

/* ---------- títulos de seção ---------- */

.secao-titulo {
  max-width: 22em;
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: clamp(26px, 2.4vw, 38px);
  line-height: 1;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.secao-sub {
  max-width: 52em;
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: #2B2B2B;
  text-wrap: pretty;
}

.botao--centro { display: flex; width: fit-content; margin: 32px auto 0; min-width: 350px; }

/* ---------- comparativo ---------- */

.comparativo {
  padding: 120px var(--moldura) 0;
}

.comparativo__inner {
  max-width: var(--conteudo);
  margin: 0 auto;
}

.tabela-rolagem { margin-top: 32px; }

.tabela {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 14px;
}

.tabela thead th {
  padding: 22px 16px;
  background: var(--preto);
  color: var(--branco);
  font-weight: 500;
  text-align: center;
}
.tabela thead th:first-child { border-top-left-radius: var(--raio); }
.tabela thead th:last-child { border-top-right-radius: var(--raio); }
.tabela thead .tabela__franco { color: var(--coroa); }

.tabela tbody th,
.tabela tbody td {
  padding: 18px 16px;
  background: #FAFAFA;
  border-bottom: 1px solid #E8E8E8;
  border-left: 1px solid #E8E8E8;
}
.tabela tbody td:last-child { border-right: 1px solid #E8E8E8; }
.tabela tbody tr:last-child th:first-child { border-bottom-left-radius: var(--raio); }
.tabela tbody tr:last-child td:last-child { border-bottom-right-radius: var(--raio); }

.tabela tbody th {
  font-weight: 500;
  text-align: left;
}

.tabela td {
  text-align: center;
  font-weight: 500;
}
.tabela td span { display: block; margin-top: 6px; }

.ic { width: 20px; height: 20px; margin: 0 auto; }
.ic--ruim { color: #C2412D; }
.ic--bom { color: #1E7A4C; }

/* comparativo: a coluna da Franco é um cartão que salta da tabela */
.comp {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.15fr);
  margin-top: 40px;
}
.comp__linha { display: contents; }
.comp__rotulo { grid-column: 1; }
.comp__outro { grid-column: 2; }
.comp__franco { grid-column: 3; }
.comp__rotulo,
.comp__outro,
.comp__franco {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 22px;
  border-bottom: 1px solid #E6E6E6;
  font-size: 15px;
}
.comp__rotulo { font-weight: 700; }
.comp__outro { color: var(--grafite); }
.comp__franco { font-weight: 700; border-bottom-color: #EFE6C4; }
.comp__linha:last-child > div { border-bottom: 0; }

.comp__cabeca > div {
  padding-top: 26px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--preto);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--grafite);
}
.comp__cabeca .comp__franco {
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  background: var(--coroa);
  border-bottom: 2px solid var(--preto);
  border-radius: 12px 12px 0 0;
  font-family: var(--fonte-titulo);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--preto);
  text-align: center;
}
.comp__coroa { width: 26px; }

/* cartão por trás da coluna da Franco, ocupando todas as linhas */
.comp__destaque {
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: calc(1.8 / 2.95 * 100% - 6px);
  width: calc(1.15 / 2.95 * 100% + 12px);
  border: 2px solid var(--preto);
  border-radius: 14px;
  background: var(--branco);
  box-shadow: 6px 6px 0 var(--preto), 0 0 38px rgba(245, 197, 52, .55);
}
.comp__cabeca .comp__franco { margin: -10px -6px 0; padding-top: 32px; border-left: 0; }

.comp__ic { flex: none; width: 26px; height: 26px; }
.comp__ic--nao { width: 20px; height: 20px; color: #B9B9B9; }
#por-que .botao--centro { margin-top: 48px; }

/* ---------- para quem é ---------- */

.publicos {
  padding: 120px 0 120px var(--moldura);
  max-width: var(--largura);
  margin: 0 auto;
}

.publicos__painel {
  margin-left: max(0px, calc((100vw - var(--conteudo)) / 2 - 50px));
  padding: 56px 0 56px 50px;
  background: #F4F4F4;
  border-radius: 24px 0 0 24px;
}

.publicos__cabeca { padding-right: var(--moldura); }

.publicos__lista {
  display: flex;
  gap: 20px;
  margin: 36px 0 0;
  padding: 0 50px 8px 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.publico {
  flex: 0 0 340px;
  display: flex;
  flex-direction: column;
  padding: 12px 12px 22px;
  background: var(--branco);
  border-radius: 12px;
  scroll-snap-align: start;
}

.publico__foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  background: #E9E9E9;
}

.publico h3 {
  margin: 18px 8px 0;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
}

.publico p {
  flex: 1;
  margin: 8px 8px 0;
  font-size: 14px;
  line-height: 1.55;
  color: #3A3A3A;
}

.publico--outros {
  background: var(--preto);
  color: var(--branco);
}
.publico--outros p { color: #CFCFCF; }
.publico__foto--vazia {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  background: #1A1A1A center / cover no-repeat;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: #9A9A9A;
}
.publico__marca {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  background: #161616;
  color: var(--coroa);
}
.publico__marca svg { width: 64px; }

.publico__link {
  margin: 16px 8px 0;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* ---------- cores e modelagens ---------- */

.cores { padding: 0 var(--moldura) 120px; }

.cores__inner { max-width: var(--conteudo); margin: 0 auto; }

.cores__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  margin-top: 36px;
}

.cores__vitrine {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 12%;
  background: #F4F4F4;
  border-radius: var(--raio);
  overflow: hidden;
}

.vitrine__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  border: 1px dashed #BDBDBD;
  border-radius: 10px;
  text-align: center;
  color: var(--grafite);
}
.vitrine__placeholder p { margin: 0; font-size: 15px; font-weight: 600; color: var(--preto); }
.vitrine__placeholder .vitrine__arquivo { font-size: 13px; font-weight: 400; color: var(--grafite); }
.cores__vitrine.tem-foto .vitrine__placeholder { display: none; }

.cores__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.abas {
  display: inline-flex;
  padding: 4px;
  background: #F4F4F4;
  border-radius: 10px;
}
.aba {
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--grafite);
  cursor: pointer;
}
.aba[aria-selected="true"] {
  background: var(--branco);
  color: var(--preto);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

.modelagem { margin-top: 20px; }
.modelagem p { margin: 0; font-size: 16px; line-height: 1.55; }
.modelagem .modelagem__tamanhos { margin-top: 8px; font-size: 14px; color: var(--grafite); }

.cores__rotulo { margin: 28px 0 12px; font-size: 14px; color: var(--grafite); }
.cores__rotulo strong { color: var(--preto); font-weight: 500; }

.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
  cursor: pointer;
}
.chip[aria-checked="true"] {
  outline: 2px solid var(--preto);
  outline-offset: 3px;
}

.tamanhos { display: flex; flex-wrap: wrap; gap: 10px; }

/* pílulas de escolha (malha na vitrine e modelo na calculadora) */
.pilulas { display: flex; flex-wrap: wrap; gap: 8px; }
.pilula {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #D6D6D6;
  border-radius: 999px;
  background: var(--branco);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--preto);
  cursor: pointer;
}
.pilula:hover { border-color: var(--preto); }
.pilula[aria-checked="true"] { border-color: var(--preto); background: var(--preto); color: var(--branco); }
.etapa__passo { margin: 14px 0 10px; font-size: 13px; font-weight: 700; color: var(--grafite); }
.grade__cor > span { display: flex; flex-direction: column; line-height: 1.25; }
.grade__cor small { font-size: 12px; font-weight: 500; color: var(--grafite); }
.faixa__precos dt { font-size: 12.5px; }
.tamanho {
  min-width: 52px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #D6D6D6;
  border-radius: 8px;
  background: var(--branco);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--preto);
  cursor: pointer;
  transition: border-color .15s ease;
}
.tamanho:hover { border-color: var(--preto); }
.tamanho[aria-checked="true"] {
  border-color: var(--preto);
  background: var(--preto);
  color: var(--branco);
}

.cores__nota { margin: 20px 0 0; font-size: 13px; line-height: 1.5; color: var(--grafite); }

.cores__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 32px;
}
.cores__acoes .botao { min-width: 0; }
.link-medidas {
  padding-block: 10px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* ---------- especificações (ficha técnica) ---------- */

.ficha { padding: 0 var(--moldura) 120px; }

.ficha__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 64px;
  align-items: stretch;
  max-width: var(--conteudo);
  margin: 0 auto;
}

.ficha__tabela {
  margin: 32px 0 0;
  border-top: 2px solid var(--preto);
}

.ficha__linha {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 24px;
  padding: 15px 0;
  border-bottom: 1px solid #E3E3E3;
}
.ficha__linha dt {
  font-size: 14px;
  font-weight: 700;
}
.ficha__linha dd {
  margin: 0;
  font-size: 15px;
  color: #3A3A3A;
}

.ficha__foto {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  border-radius: var(--raio);
  background: #F4F4F4 center / cover no-repeat;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: var(--grafite);
}

/* ---------- aviso interno (remover antes de publicar) ---------- */

.aviso-interno {
  position: relative;
  margin: 0 0 40px;
  padding: 18px 22px 18px 64px;
  border: 2px solid #000;
  border-radius: 10px;
  background:
    linear-gradient(#FFF4C7, #FFF4C7) padding-box,
    repeating-linear-gradient(-45deg, #000 0 10px, #F5C534 10px 20px) border-box;
  border-color: transparent;
  border-width: 6px;
  font-size: 15px;
  line-height: 1.5;
  color: #1A1A1A;
}
.aviso-interno::before {
  content: "!";
  position: absolute;
  left: 20px;
  top: 18px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #000;
  color: var(--coroa);
  font-family: var(--fonte-titulo);
  font-size: 18px;
}
.aviso-interno strong { display: block; font-size: 17px; font-weight: 800; }
.aviso-interno code { font-size: 13px; background: rgba(0, 0, 0, .08); padding: 1px 6px; border-radius: 4px; }

/* ---------- tabela de preços ---------- */

.precos { padding: 0 var(--moldura) 120px; }
.precos__inner { max-width: var(--conteudo); margin: 0 auto; }


/* ---------- lisa + DTF ---------- */

.dtf { padding: 0 var(--moldura) 120px; }

.dtf__card {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  position: relative;
  max-width: var(--conteudo);
  margin: 0 auto;
  padding: 48px;
  border: 2px solid var(--preto);
  border-radius: var(--raio);
  background: var(--coroa);
  color: var(--preto);
  box-shadow: 8px 8px 0 var(--preto);
  isolation: isolate;
  overflow: hidden;
}
/* grafismo de retícula (meio-tom), como uma estampa impressa, mais forte no canto e sumindo */
.dtf__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, rgba(0, 0, 0, .17) 2px, transparent 2.5px);
  background-size: 13px 13px;
  -webkit-mask-image: radial-gradient(130% 110% at 100% 100%, #000 0%, rgba(0, 0, 0, .6) 40%, transparent 78%);
          mask-image: radial-gradient(130% 110% at 100% 100%, #000 0%, rgba(0, 0, 0, .6) 40%, transparent 78%);
  pointer-events: none;
}
.dtf .secao-titulo { max-width: 16em; }
.dtf .secao-sub { color: #1A1A1A; max-width: 36em; }

.dtf__opcoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 28px 0 32px;
  padding: 0;
  list-style: none;
}
.dtf__opcao {
  padding: 18px;
  border: 2px solid var(--preto);
  border-radius: 10px;
  background: var(--branco);
  box-shadow: 4px 4px 0 var(--preto);
}
.dtf__opcao svg { width: 28px; height: 28px; margin-bottom: 10px; }
.dtf__opcao h3 { margin: 0 0 6px; font-size: 16px; font-weight: 800; }
.dtf__opcao p { margin: 0; font-size: 14px; line-height: 1.5; color: #3A3A3A; }

/* no fundo amarelo o botão vira preto */
.dtf .botao {
  background: var(--preto);
  color: var(--branco);
  border-color: var(--preto);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .25);
}
.dtf .botao:hover { background: #222; box-shadow: 6px 6px 0 rgba(0, 0, 0, .3); }
.dtf .botao__icone { background: var(--coroa); color: var(--preto); }
.dtf .botao::after { background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .3) 50%, transparent 100%); }

.dtf__foto {
  order: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: rgba(0, 0, 0, .08) center / cover no-repeat;
  border: 1px dashed rgba(0, 0, 0, .35);
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: #3A3A3A;
}
.dtf__foto.tem-foto { border: 0; }

/* faixas de preço em escada: cada degrau mais barato que o anterior */
.faixas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: end;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.faixa {
  display: flex;
  flex-direction: column;
  padding: 20px 20px 22px;
  min-height: calc(250px + var(--degrau) * 28px);
  border: 1px solid #E3E3E3;
  border-radius: 12px;
  background: #FAFAFA;
}
.faixa__topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.faixa__nome { font-size: 13px; font-weight: 700; color: var(--grafite); }
.faixa__selo {
  padding: 4px 8px;
  border-radius: 999px;
  background: #E9F5EE;
  color: #1E7A4C;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.faixa__selo--base { background: #EFEFEF; color: var(--grafite); }
.faixa__qtd {
  margin: 14px 0 0;
  font-family: var(--fonte-titulo);
  font-size: 22px;
  line-height: 1.1;
  text-transform: uppercase;
}
.faixa__precos { margin: auto 0 0; padding-top: 20px; }
.faixa__precos div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid #E3E3E3;
}
.faixa__precos dt { font-size: 13px; color: var(--grafite); }
.faixa__precos dd { margin: 0; font-family: var(--fonte-titulo); font-size: 22px; white-space: nowrap; }
.faixa__precos small { margin-left: 2px; font-family: var(--fonte); font-size: 12px; font-weight: 600; color: var(--grafite); }

/* a última faixa é a mais vantajosa: vira o cartão de destaque */
.faixa--melhor {
  border: 2px solid var(--preto);
  background: var(--coroa);
  box-shadow: 6px 6px 0 var(--preto);
}
.faixa--melhor .faixa__nome,
.faixa--melhor .faixa__precos dt,
.faixa--melhor .faixa__precos small { color: #3A2E00; }
.faixa--melhor .faixa__selo { background: var(--preto); color: var(--coroa); }
.faixa--melhor .faixa__precos div { border-top-color: rgba(0, 0, 0, .18); }

/* ---------- calculadora ---------- */

.calc { padding: 0 var(--moldura) 120px; }
.calc__inner { max-width: var(--conteudo); margin: 0 auto; }

.calc__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  margin-top: 36px;
}

.etapa {
  min-width: 0;
  margin: 0 0 32px;
  padding: 0;
  border: 0;
}
.etapa legend {
  margin-bottom: 12px;
  padding: 0;
  font-size: 16px;
  font-weight: 800;
}
.etapa__ajuda { margin: 12px 0 0; font-size: 13px; color: var(--grafite); }

.opcoes { display: flex; gap: 10px; flex-wrap: wrap; }
.opcao input { position: absolute; opacity: 0; pointer-events: none; }
.opcao span {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid #D6D6D6;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}
.opcao input:checked + span { border-color: var(--preto); background: var(--preto); color: var(--branco); }
.opcao input:focus-visible + span { outline: 2px solid var(--preto); outline-offset: 3px; }

.chip[aria-checked="true"] { outline: 2px solid var(--preto); outline-offset: 3px; }

.atalhos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.atalhos__rotulo { font-size: 13px; color: var(--grafite); margin-right: 4px; }
.atalho {
  min-width: 52px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #D6D6D6;
  border-radius: 999px;
  background: var(--branco);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.atalho[aria-pressed="true"] { border-color: var(--preto); background: var(--preto); color: var(--branco); }
.atalho--limpar { border-color: transparent; text-decoration: underline; text-underline-offset: 4px; }

.grade { display: flex; flex-direction: column; gap: 12px; }

.item {
  padding: 14px 16px 16px;
  border: 1px solid #E3E3E3;
  border-radius: 10px;
}
.item { transition: box-shadow .3s ease, border-color .3s ease; }
.item.is-novo { border-color: var(--coroa); box-shadow: 0 0 0 3px rgba(245, 197, 52, .45); }
.item__topo {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.grade__cor { display: flex; align-items: center; gap: 8px; min-width: 120px; font-size: 15px; font-weight: 700; }
.grade__cor i { width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }

/* seletor de modelagem em segmentos */
.seg {
  display: inline-flex;
  padding: 3px;
  border-radius: 8px;
  background: #F0F0F0;
}
.seg button {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--grafite);
  cursor: pointer;
}
.seg button[aria-checked="true"] { background: var(--preto); color: var(--branco); }
.seg button:disabled { opacity: .35; cursor: not-allowed; }

.grade__remover {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--grafite);
  cursor: pointer;
}
.grade__remover:hover { background: #F0F0F0; color: var(--preto); }

.item__tamanhos {
  display: grid;
  grid-template-columns: repeat(5, 1fr) 64px;
  gap: 8px;
  align-items: end;
}
.item__tamanhos label,
.item__total { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.item__t { font-size: 12px; font-weight: 700; color: var(--grafite); }
.item input {
  width: 100%;
  height: 44px;
  border: 1px solid #D6D6D6;
  border-radius: 6px;
  font: inherit;
  font-size: 16px;
  text-align: center;
  -moz-appearance: textfield;
}
.item input::-webkit-outer-spin-button,
.item input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.item input:focus { outline: 2px solid var(--preto); outline-offset: 1px; border-color: transparent; }
.item__total b { display: grid; place-items: center; height: 44px; font-size: 17px; font-weight: 800; }

.chip--add { position: relative; }
.chip--add::after {
  content: "+";
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--preto);
  color: var(--branco);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--branco);
}
#res-preco span { display: block; }

/* observação com ajuda do vendedor */
.obs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  align-items: start;
  margin-top: 4px;
  padding: 18px 20px;
  border-radius: 12px;
  background: #FFF1B8;
  border: 1.5px solid var(--coroa);
}
.obs__icone { width: 30px; height: 30px; color: #000; grid-row: 1 / 3; }
.obs .botao-ajuda { grid-column: 2; justify-self: start; margin-top: 12px; }
.obs p { margin: 0; max-width: 46em; font-size: 14px; line-height: 1.5; color: #3A3A3A; }
.obs .obs__titulo, .ajuda-ativa .obs__titulo { margin-bottom: 2px; font-size: 15px; font-weight: 800; color: var(--preto); }
.botao-ajuda {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 8px;
  background: var(--preto);
  color: var(--branco);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.botao-ajuda svg { flex: none; width: 20px; height: 20px; color: #25D366; }
.botao-ajuda:hover { background: #222; transform: translateY(-1px); }

/* animações da troca entre montar a grade e pedir ajuda */
.anim-sair { animation: sair .26s ease forwards; }
.anim-entrar { animation: entrar .45s cubic-bezier(.2, .7, .3, 1) both; }
.anim-pulso { animation: pulsoResumo .6s ease; }
@keyframes sair { to { opacity: 0; transform: translateY(-8px) scale(.98); } }
@keyframes entrar { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pulsoResumo { 0% { box-shadow: 0 0 0 0 rgba(245, 197, 52, .6); } 100% { box-shadow: 0 0 0 14px rgba(245, 197, 52, 0); } }
.ajuda-ativa.anim-entrar svg { animation: check .5s .15s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes check { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .anim-sair, .anim-entrar, .anim-pulso, .ajuda-ativa.anim-entrar svg { animation: none; }
}

.botao-sec {
  height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--preto);
  border-radius: 8px;
  background: var(--branco);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.botao-sec:hover { background: var(--preto); color: var(--branco); }

.ajuda-ativa {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px;
  border: 1px solid #E3E3E3;
  border-radius: 12px;
  background: #FAFAFA;
}
.ajuda-ativa[hidden] { display: none; }
.ajuda-ativa svg { width: 40px; flex: none; }
.ajuda-ativa p { margin: 0; font-size: 14px; line-height: 1.5; color: #3A3A3A; }
.calc.is-ajuda .resumo .resumo__total dd { font-family: var(--fonte); font-size: 18px; font-weight: 800; }
.calc.is-ajuda .progresso,
.calc.is-ajuda .resumo__aviso { display: none; }
.calc.is-ajuda .resumo__msg { margin-bottom: 20px; }

.link-voltar {
  margin-top: 10px;
  padding: 6px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.grade__vazia { margin: 0; padding: 20px; font-size: 14px; color: var(--grafite); }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.check { display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; font-size: 15px; font-weight: 600; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: #000; flex: none; }
.check small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--grafite); }

/* resumo fixo ao lado */
.resumo {
  position: sticky;
  top: 96px;
  padding: 28px;
  background: var(--preto);
  color: var(--branco);
  border-radius: var(--raio);
}
.resumo__titulo { margin: 0 0 16px; font-family: var(--fonte-titulo); font-size: 20px; text-transform: uppercase; }
.resumo dl { margin: 0; }
.resumo dl div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid #2A2A2A;
  font-size: 14px;
}
.resumo dt { color: #A3A3A3; }
.resumo dd { margin: 0; font-weight: 700; text-align: right; }
.resumo .resumo__total { border-bottom: 0; padding-top: 14px; align-items: baseline; }
.resumo .resumo__total dt { color: var(--branco); font-weight: 700; }
.resumo .resumo__total dd { font-family: var(--fonte-titulo); font-size: 28px; font-weight: 400; color: var(--coroa); }

.progresso { height: 6px; margin-top: 8px; border-radius: 3px; background: #2A2A2A; overflow: hidden; }
.progresso span { display: block; height: 100%; width: 0; background: var(--coroa); transition: width .3s ease; }
.resumo__msg { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: #E6E6E6; }
.calc.is-abaixo .resumo__msg { color: #FFB4A6; }

.resumo__aviso {
  display: flex;
  gap: 10px;
  margin: 18px 0 20px;
  padding: 12px;
  border-radius: 8px;
  background: #161616;
  font-size: 12px;
  line-height: 1.5;
  color: #BDBDBD;
}
.resumo__aviso svg { width: 18px; height: 18px; flex: none; color: var(--coroa); }
.resumo .botao { width: 100%; min-width: 0; padding: 0 14px; font-size: 13px; letter-spacing: .03em; }
.resumo .botao__icone { margin-right: -6px; }
.botao:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* etapa de contato */
.contato {
  margin-top: 48px;
  padding: 36px;
  border: 1px solid #E3E3E3;
  border-radius: var(--raio);
  scroll-margin-top: 96px;
}
.contato h3,
.sucesso h3 { margin: 0; font-family: var(--fonte-titulo); font-size: 24px; font-weight: 400; text-transform: uppercase; }
.contato__sub { margin: 8px 0 24px; font-size: 15px; color: #3A3A3A; }
.contato__campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin-bottom: 8px; }
.campo label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.campo input[type="text"],
.campo input[type="tel"],
.campo input[type="email"],
.campo select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid #CFCFCF;
  border-radius: 8px;
  background: var(--branco);
  font: inherit;
  font-size: 16px;
}
.campo input:focus,
.campo select:focus { outline: 2px solid var(--preto); outline-offset: 1px; border-color: transparent; }
.campo [aria-invalid="true"] { border-color: #C2412D; }
.campo__ajuda { margin: 6px 0 0; font-size: 12px; color: var(--grafite); }
.campo__erro { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: #C2412D; }
.campo__erro:empty { display: none; }
.campo .check { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-weight: 500; font-size: 14px; line-height: 1.4; }
.campo .check input { margin: 0; }
.contato .botao { margin-top: 20px; }
.contato__legal { margin: 14px 0 0; font-size: 12.5px; color: var(--grafite); }
.contato__legal a { color: var(--preto); font-weight: 700; text-underline-offset: 3px; }

.sucesso {
  margin-top: 48px;
  padding: 40px;
  border-radius: var(--raio);
  background: #F4F4F4;
  text-align: center;
}
.sucesso svg { width: 56px; margin: 0 auto 16px; }
.sucesso p { max-width: 36em; margin: 12px auto 24px; font-size: 15px; }


/* ---------- como funciona ---------- */

.passos { padding: 0 var(--moldura) 120px; }
.passos__inner { max-width: var(--conteudo); margin: 0 auto; }

.passos__lista {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}
/* linha que liga os passos */
.passos__lista::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 22px;
  right: 12%;
  border-top: 2px dashed #D6D6D6;
}
.passo { position: relative; }
.passo__num {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--preto);
  color: var(--coroa);
  font-family: var(--fonte-titulo);
  font-size: 18px;
}
.passo__icone { width: 32px; height: 32px; margin: 22px 0 12px; }
.passo h3 { margin: 0 0 8px; font-size: 17px; font-weight: 800; line-height: 1.3; }
.passo p { margin: 0; font-size: 14px; line-height: 1.55; color: #3A3A3A; }

/* ---------- a fábrica ---------- */

.fabrica { padding: 0 var(--moldura) 120px; }
.fabrica__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  max-width: var(--conteudo);
  margin: 0 auto;
}
.fabrica__foto {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  border-radius: var(--raio);
  background: #1A1A1A center / cover no-repeat;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: #9A9A9A;
}
.fabrica__texto p { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: #2B2B2B; }
.fabrica__texto .secao-titulo { margin-bottom: 8px; }
.fabrica__endereco {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 0;
  border-top: 1px solid #E3E3E3;
  border-bottom: 1px solid #E3E3E3;
  font-size: 14px !important;
  font-weight: 600;
}
.fabrica__endereco svg { width: 20px; height: 20px; flex: none; }
.fabrica .botao { margin-top: 28px; }

/* ---------- perguntas frequentes ---------- */

.faq { padding: 0 var(--moldura) 120px; }
.faq__inner {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr);
  gap: 56px;
  align-items: start;
  max-width: var(--conteudo);
  margin: 0 auto;
}
.faq__cabeca { position: sticky; top: 110px; }

.faq__lista { border-top: 2px solid var(--preto); }
.pergunta { border-bottom: 1px solid #E3E3E3; }
.pergunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta__sinal {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #F0F0F0;
  transition: background-color .2s ease, transform .3s ease;
}
.pergunta__sinal::before,
.pergunta__sinal::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  background: var(--preto);
  transition: transform .3s ease;
}
.pergunta__sinal::after { transform: rotate(90deg); }
.pergunta[open] .pergunta__sinal { background: var(--coroa); transform: rotate(180deg); }
.pergunta[open] .pergunta__sinal::after { transform: rotate(0); }
.pergunta__resposta p { margin: 0; padding: 0 44px 22px 0; font-size: 15px; line-height: 1.6; color: #3A3A3A; }
.pergunta[open] .pergunta__resposta { animation: abrir .3s ease; }
@keyframes abrir { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- CTA final ---------- */

.final { padding: 0 var(--moldura) 24px; max-width: var(--largura); margin: 0 auto; }
.final__card {
  position: relative;
  overflow: hidden;
  padding: 96px 56px;
  border-radius: var(--raio);
  background: var(--preto);
  color: var(--branco);
  text-align: center;
  isolation: isolate;
}
/* monograma de coroas (como um tecido estampado), sumindo no centro para o texto respirar */
.final__padrao {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  opacity: .16;
  -webkit-mask-image: radial-gradient(60% 75% at 50% 50%, transparent 0%, transparent 35%, #000 85%);
          mask-image: radial-gradient(60% 75% at 50% 50%, transparent 0%, transparent 35%, #000 85%);
}
/* coroa grande da marca saindo pelo canto, com brilho */
.final__coroa {
  position: absolute;
  right: 4%;
  bottom: 9%;
  z-index: -1;
  width: min(400px, 30%);
  transform: rotate(-14deg);
  color: var(--coroa);
  filter: drop-shadow(0 0 40px rgba(245, 197, 52, .45));
}
.final__card::after {
  content: "";
  position: absolute;
  left: -10%;
  top: -40%;
  z-index: -1;
  width: 50%;
  height: 90%;
  background: radial-gradient(closest-side, rgba(245, 197, 52, .14), transparent);
  pointer-events: none;
}
.final .secao-titulo { max-width: 18em; margin: 0 auto; font-size: clamp(28px, 3vw, 46px); }
.final .secao-sub { max-width: 38em; margin: 16px auto 0; color: #CFCFCF; }
.final__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 32px;
  margin-top: 36px;
}
.final .botao { border-color: var(--coroa); box-shadow: 4px 4px 0 rgba(245, 197, 52, .35); }

/* ---------- rodapé ---------- */

.rodape {
  margin-top: 0;
  padding: 64px var(--moldura) 28px;
  background: var(--preto);
  color: #CFCFCF;
  font-size: 14px;
}
.rodape__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--conteudo);
  margin: 0 auto;
}
.rodape__marca img { width: 120px; height: auto; }
.rodape__marca p { margin: 12px 0 0; }
.rodape__titulo { margin: 0 0 12px !important; font-family: var(--fonte-titulo); font-size: 14px; text-transform: uppercase; color: var(--branco); }
.rodape__col p { margin: 0 0 8px; }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--coroa); text-decoration: underline; text-underline-offset: 4px; }
.rodape__link { color: var(--branco); font-weight: 700; text-decoration: underline !important; text-underline-offset: 5px; }

.rodape__legal {
  max-width: var(--conteudo);
  margin: 48px auto 0;
  padding-top: 20px;
  border-top: 1px solid #222;
  font-size: 12px;
  color: #8C8C8C;
}
.rodape__legal p { margin: 0; }
.rodape :focus-visible { outline-color: var(--branco); }

/* ---------- conteúdo aparecendo conforme a rolagem ---------- */
.tem-revelar .revelar {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--atraso, 0ms);
}
.tem-revelar .revelar.is-visivel { opacity: 1; transform: none; }
.tem-revelar .secao-sub.revelar { transition-delay: 120ms; }

/* ---------- página da política de privacidade ---------- */

.topo__inner--simples { display: flex; justify-content: center; }
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px var(--moldura) 96px;
}
.legal .secao-titulo { font-size: clamp(30px, 3.4vw, 44px); }
.legal__data { margin: 8px 0 32px; font-size: 14px; color: var(--grafite); }
.legal h2 { margin: 40px 0 12px; font-size: 20px; font-weight: 800; }
.legal p, .legal li { font-size: 16px; line-height: 1.7; color: #2B2B2B; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal__voltar { margin-top: 48px !important; }
.legal__voltar a { font-weight: 800; text-underline-offset: 5px; }
.pagina-legal .rodape { padding-top: 8px; }
.pagina-legal .rodape__legal { margin-top: 0; border-top: 0; }

/* ---------- pop-up de contato ---------- */

.modal {
  width: min(560px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 2px solid var(--preto);
  border-radius: 16px;
  background: var(--branco);
  box-shadow: 8px 8px 0 var(--preto);
  overflow: auto;
}
.modal::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(3px); }
.modal[open] { animation: modalEntra .32s cubic-bezier(.2, .8, .2, 1); }
.modal[open]::backdrop { animation: fundoEntra .3s ease; }
.modal.is-saindo { animation: modalSai .2s ease forwards; }
@keyframes modalEntra { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes modalSai { to { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes fundoEntra { from { opacity: 0; } }
.modal .contato { margin: 0; padding: 32px; border: 0; border-radius: 0; }
.modal .contato__campos { grid-template-columns: 1fr; gap: 14px; }
.modal .sucesso { margin: 0; border-radius: 0; }
.modal__fechar {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #F0F0F0;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.modal__fechar:hover { background: var(--preto); color: var(--branco); }
.modal .contato h3 { padding-right: 40px; line-height: 1.05; }
.modal .sucesso h3 { line-height: 1.1; }
#ok-whats { white-space: nowrap; }
.modal .contato .botao { width: 100%; }
html.modal-aberto { overflow: hidden; }

/* resumo do pedido para conferir no pop-up */
.conf {
  margin: 0 0 22px;
  border: 1.5px solid var(--preto);
  border-radius: 12px;
  overflow: hidden;
}
.conf__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--coroa);
  border-bottom: 1.5px solid var(--preto);
}
.conf__titulo { margin: 0; font-family: var(--fonte-titulo); font-size: 14px; text-transform: uppercase; }
.conf__editar {
  padding: 4px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.conf__itens { max-height: 200px; margin: 0; padding: 4px 14px; list-style: none; overflow: auto; }
.conf__itens li {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  grid-template-areas: "cor nome qtd" ". grade qtd";
  column-gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #EDEDED;
}
.conf__itens li:last-child { border-bottom: 0; }
.conf__itens i { grid-area: cor; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.conf__nome { grid-area: nome; font-size: 14px; font-weight: 700; }
.conf__grade { grid-area: grade; font-size: 12px; color: var(--grafite); }
.conf__itens b { grid-area: qtd; font-family: var(--fonte-titulo); font-size: 18px; font-weight: 400; }
.conf__itens .conf__ajuda,
.conf__itens .conf__dtf { grid-column: 1 / -1; font-size: 14px; font-weight: 700; }
.conf__itens .conf__dtf { color: var(--grafite); }
.conf__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #FAFAFA;
  border-top: 1px solid #E3E3E3;
  font-size: 13px;
  font-weight: 600;
  color: var(--grafite);
}
.conf__total strong { font-family: var(--fonte-titulo); font-size: 18px; font-weight: 400; color: var(--preto); }
@media (prefers-reduced-motion: reduce) {
  .modal[open], .modal[open]::backdrop, .modal.is-saindo { animation: none; }
}

/* ---------- página de obrigado ---------- */

.obrigado { max-width: 760px; margin: 0 auto; padding: 32px var(--moldura) 80px; }
.obrigado__card {
  padding: 48px 40px;
  border: 2px solid var(--preto);
  border-radius: 16px;
  background: var(--branco);
  box-shadow: 8px 8px 0 var(--preto);
  text-align: center;
}
.obrigado__check { width: 64px; margin: 0 auto 20px; animation: check .6s .1s cubic-bezier(.3, 1.6, .5, 1) both; }
.obrigado .secao-titulo { max-width: none; font-size: clamp(28px, 3.2vw, 40px); }
.obrigado__sub { max-width: 36em; margin: 14px auto 0; font-size: 16px; line-height: 1.6; color: #2B2B2B; }

.obrigado__resumo {
  margin: 28px auto 0;
  padding: 20px 22px;
  border-radius: 12px;
  background: #FAFAFA;
  border: 1px solid #E3E3E3;
  text-align: left;
}
.obrigado__rotulo { margin: 0 0 10px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--grafite); }
.obrigado__resumo ul { margin: 0; padding: 0; list-style: none; }
.obrigado__resumo li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #EDEDED; font-size: 15px; }
.obrigado__resumo li i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); flex: none; }
.obrigado__resumo li span { flex: 1; font-weight: 600; }
.obrigado__resumo .obrigado__extra { color: var(--grafite); font-weight: 600; }
.obrigado__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; font-size: 14px; }
.obrigado__total strong { font-family: var(--fonte-titulo); font-size: 24px; font-weight: 400; }
.obrigado__aviso { margin: 8px 0 0; font-size: 12.5px; color: var(--grafite); }

.obrigado__card .botao { margin-top: 28px; }
.obrigado__dica { margin: 12px 0 0; font-size: 13px; color: var(--grafite); }

.obrigado__proximos { margin-top: 56px; }
.obrigado__h2 { margin: 0 0 24px; font-family: var(--fonte-titulo); font-size: 22px; font-weight: 400; text-transform: uppercase; }
.passos__lista--compacta { grid-template-columns: repeat(3, 1fr); margin-top: 0; }
.passos__lista--compacta::before { right: 18%; }
.passos__lista--compacta .passo h3 { margin-top: 18px; }
.obrigado__insta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 48px;
  padding: 22px 24px;
  border-radius: 14px;
  background: #F4F4F4;
}
.obrigado__insta p { margin: 0; max-width: 30em; font-size: 15px; font-weight: 600; }
.botao-insta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 22px;
  border: 2px solid var(--preto);
  border-radius: 8px;
  background: linear-gradient(45deg, #F9CE34 0%, #EE2A7B 50%, #6228D7 100%);
  color: var(--branco);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 4px 4px 0 var(--preto);
  transition: transform .15s ease, box-shadow .15s ease;
}
.botao-insta svg { width: 20px; height: 20px; }
.botao-insta:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--preto); }
.pagina-obrigado .rodape, .pagina-legal .rodape { padding-top: 8px; }
.pagina-obrigado .rodape__legal { margin-top: 0; border-top: 0; }

/* ---------- responsivo ---------- */

@media (max-width: 1100px) {
  .faixas { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .faixa { min-height: 0; }
  .passos__lista { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .passos__lista::before { display: none; }
  .fabrica__inner, .faq__inner { gap: 40px; }
  .dtf__card { grid-template-columns: 1fr; padding: 40px; }
  .calc__grade { grid-template-columns: minmax(0, 1fr); }
  .resumo { position: static; }
  .ficha__inner { gap: 40px; }
  .ficha__linha { grid-template-columns: 130px 1fr; }
  .cores__grade { gap: 32px; }
  .topo__inner { padding: 14px 24px; }
  .topo__nav { gap: 20px; font-size: 12px; }
  .hero__texto { padding-left: 40px; }
  .beneficios { gap: 20px 28px; margin-top: 48px; }
}

@media (max-width: 760px) {
  :root { --moldura: 20px; }

  .topo__inner { grid-template-columns: 1fr; justify-items: center; padding: 14px 20px; }
  .topo__nav { display: none; }
  .topo__logo img { width: 96px; }

  /* no celular a imagem vem primeiro, como na referência */
  .hero__card {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }
  .hero__imagem {
    position: relative;
    inset: auto;
    z-index: 0;
    aspect-ratio: 6 / 5;
    max-height: none;
    transform: none;
    background-image: url("assets/hero-mobile.jpg");
    background-position: center;
    background-size: cover;
  }
  .hero__texto { max-width: none; padding: 32px 20px 36px; }
  .hero__titulo { font-size: 30px; line-height: .98; }
  .hero__sub { font-size: 16px; margin: 20px 0 24px; }
  .botao { width: 100%; min-width: 0; padding: 0 14px; font-size: 13px; letter-spacing: .03em; text-align: center; }
  .botao__icone { width: 26px; height: 26px; margin-right: -6px; }

  .beneficios {
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
  }
  .beneficios li { font-size: 14px; }

  .prova { padding-top: 16px; }
  .prova__caixa { grid-template-columns: 1fr; padding: 4px 0; }
  .prova__item { padding: 18px 16px; }
  .prova__item + .prova__item { border-left: 0; border-top: 1px solid #E3E3E3; }
  .prova__item strong { font-size: 32px; }
  .beneficios br { display: none; }

  .comparativo { padding-top: 72px; }
  .secao-titulo { font-size: 26px; }
  .secao-sub { font-size: 15px; }
  /* no celular, o nome da linha vira um rótulo acima das duas colunas */
  .tabela, .tabela thead, .tabela tbody { display: block; font-size: 13px; }
  .tabela tr { display: grid; grid-template-columns: 1fr 1fr; }
  .tabela thead th:first-child { display: none; }
  .tabela thead th { padding: 16px 10px; }
  .tabela thead th:nth-child(2) { border-top-left-radius: var(--raio); }
  .tabela tbody th {
    grid-column: 1 / -1;
    padding: 14px 12px 0;
    border-bottom: 0;
    border-right: 1px solid #E8E8E8;
    text-align: center;
    color: var(--grafite);
  }
  .tabela tbody td { padding: 8px 10px 16px; }
  .tabela tbody td:nth-of-type(1) { border-left: 1px solid #E8E8E8; }
  .tabela tbody tr:last-child th:first-child { border-bottom-left-radius: 0; }
  .tabela tbody tr:last-child td:nth-of-type(1) { border-bottom-left-radius: var(--raio); }
  .botao--centro { min-width: 0; width: 100%; }

  .publicos { padding: 72px 0 72px var(--moldura); }
  .publicos__painel { margin-left: 0; padding: 32px 0 32px 20px; border-radius: 18px 0 0 18px; }
  .publicos__lista { padding-right: 20px; gap: 12px; }
  .publico { flex-basis: 82%; }

  .cores { padding-bottom: 72px; }
  .cores__grade { grid-template-columns: 1fr; gap: 28px; margin-top: 24px; }
  .chips { gap: 8px; }
  .chip { width: 36px; height: 36px; }
  .cores__acoes .botao { width: 100%; }
  .cores__acoes .link-medidas { margin: 0 auto; }

  .comp { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); margin-top: 28px; }
  .comp__cabeca .comp__rotulo { display: none; }
  .comp__linha:not(.comp__cabeca) .comp__rotulo {
    grid-column: 1 / -1;
    padding: 16px 0 4px;
    border: 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--grafite);
  }
  .comp__outro, .comp__franco { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; font-size: 13.5px; }
  .comp__franco br, .comp__outro br { display: none; }
  .comp__destaque { top: -8px; bottom: -8px; left: calc(1 / 2.1 * 100% - 4px); width: calc(1.1 / 2.1 * 100% + 8px); }
  .comp__outro { grid-column: 1; }
  .comp__franco { grid-column: 2; }
  .comp__cabeca .comp__franco { margin: -8px -4px 0; padding: 22px 8px 12px; font-size: 13px; align-items: center; }
  .comp__cabeca > div { font-size: 11px; padding: 18px 12px 12px; }
  .comp__linha:not(.comp__cabeca) .comp__rotulo { position: relative; z-index: 2; background: transparent; }

  .obrigado__card { padding: 36px 20px; box-shadow: 5px 5px 0 var(--preto); }
  .obrigado__card .botao { width: 100%; }
  .passos__lista--compacta { grid-template-columns: 1fr; }
  .obrigado__insta { padding: 20px; }
  .botao-insta { width: 100%; justify-content: center; }

  .ficha { padding-bottom: 72px; }
  .ficha__inner { grid-template-columns: 1fr; gap: 28px; }
  .ficha__linha { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; }
  .ficha__foto { min-height: 0; aspect-ratio: 4 / 3; }

  .aviso-interno { padding: 14px 16px 14px 54px; font-size: 14px; }
  .aviso-interno::before { left: 14px; top: 14px; }
  .precos, .calc, .dtf { padding-bottom: 72px; }
  .faixas { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
  .faixa__qtd, .faixa__precos dd { font-size: 20px; }
  .dtf__card { padding: 32px 22px; gap: 28px; box-shadow: 5px 5px 0 var(--preto); }
  .dtf__opcoes { grid-template-columns: 1fr; }

  .passos, .fabrica, .faq { padding-bottom: 72px; }
  .passos__lista { grid-template-columns: 1fr; gap: 0; }
  .passo { display: grid; grid-template-columns: 44px 1fr; gap: 0 16px; padding-bottom: 28px; }
  .passo::before { content: ""; position: absolute; left: 21px; top: 50px; bottom: 4px; border-left: 2px dashed #D6D6D6; }
  .passo:last-child::before { display: none; }
  .passo__num { grid-row: 1 / 4; }
  .passo__icone { display: none; }
  .passo h3 { margin-top: 10px; }
  .fabrica__inner, .faq__inner { grid-template-columns: 1fr; }
  .fabrica__foto { aspect-ratio: 4 / 3; }
  .faq__cabeca { position: static; }
  .pergunta__resposta p { padding-right: 0; }
  .final__card { padding: 56px 20px 120px; }
  .final__coroa { width: 52%; right: 6%; bottom: 5%; }
  .final__padrao { -webkit-mask-image: linear-gradient(transparent 40%, #000 100%); mask-image: linear-gradient(transparent 40%, #000 100%); }
  .final__acoes .botao { width: 100%; }
  .rodape__inner { flex-direction: column; align-items: flex-start; }



  .item { padding: 12px; }
  .item__topo { flex-wrap: wrap; gap: 10px; }
  .grade__cor { min-width: 0; }
  .seg { order: 3; width: 100%; }
  .seg button { flex: 1; }
  .item__tamanhos { grid-template-columns: repeat(5, 1fr); }
  .item__total { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; gap: 8px; }
  .item__total b { height: auto; }
  .obs .botao-ajuda { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .obs__icone { grid-row: auto; }
  .resumo { padding: 22px; }
  .contato { padding: 22px; margin-top: 32px; }
  .contato__campos { grid-template-columns: 1fr; }
  .contato .botao, .sucesso .botao { width: 100%; min-width: 0; }
  .sucesso { padding: 28px 20px; }

}

/* ===== ajustes finos do celular (revisão geral) ===== */
@media (max-width: 760px) {
  /* seções com respiro um pouco menor e títulos mais compactos */
  .secao-titulo { font-size: 25px; line-height: 1.02; }
  .secao-sub { margin-top: 12px; }

  /* números: 3 colunas lado a lado em vez de empilhados */
  .prova__caixa { grid-template-columns: repeat(3, 1fr); padding: 18px 0; }
  .prova__item { padding: 0 6px; }
  .prova__item + .prova__item { border-top: 0; border-left: 1px solid #E3E3E3; }
  .prova__item strong { font-size: 20px; }
  .prova__item span { font-size: 11.5px; line-height: 1.3; }

  /* comparativo: ícone e texto na mesma linha, cartão mais enxuto */
  .comp__outro, .comp__franco { flex-direction: row; align-items: flex-start; gap: 8px; padding: 12px 10px; font-size: 13px; line-height: 1.4; }
  .comp__ic { width: 20px; height: 20px; margin-top: 1px; }
  .comp__ic--nao { width: 16px; height: 16px; margin-top: 2px; }
  .comp__linha:not(.comp__cabeca) .comp__rotulo { padding: 14px 0 2px; font-size: 11px; }
  .comp__destaque { box-shadow: 4px 4px 0 var(--preto), 0 0 24px rgba(245, 197, 52, .45); }

  /* cores: vitrine menor e abas ocupando a largura */
  .cores__vitrine { aspect-ratio: 4 / 3; padding: 8%; }
  .abas { display: flex; }
  .aba { flex: 1; padding: 0 8px; }
  .pilula { min-height: 38px; padding: 0 13px; font-size: 13px; }
  .cores__rotulo { margin-top: 22px; }

  /* faixas de preço: cards compactos, preços lado a lado */
  .faixas { gap: 10px; }
  .faixa { padding: 14px 16px 14px; }
  .faixa__qtd { margin-top: 8px; font-size: 18px; }
  .faixa__precos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; padding-top: 12px; }
  .faixa__precos div { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 0 0; }
  .faixa__precos dt { font-size: 12px; }
  .faixa__precos dd, .faixa__qtd { font-size: 19px; }
  .faixa--melhor { box-shadow: 4px 4px 0 var(--preto); }

  /* bloco DTF: foto em cima como capa, opções compactas com ícone ao lado */
  .dtf__card { padding: 0; gap: 0; overflow: hidden; }
  .dtf__card > div:first-child { padding: 24px 18px 26px; }
  .dtf__foto { display: none; }
  .dtf .secao-titulo { font-size: 23px; }
  .dtf__opcoes { gap: 10px; margin: 20px 0 22px; }
  .dtf__opcao { display: grid; grid-template-columns: 28px 1fr; gap: 2px 12px; padding: 14px; box-shadow: 3px 3px 0 var(--preto); }
  .dtf__opcao svg { grid-row: 1 / 3; margin: 2px 0 0; width: 26px; height: 26px; }
  .dtf__opcao h3 { margin: 0; font-size: 15px; }
  .dtf__opcao p { font-size: 13px; }
  .dtf .botao { width: 100%; }

  /* calculadora */
  .atalhos { flex-wrap: wrap; gap: 6px; }
  .atalhos__rotulo { flex-basis: 100%; margin: 0 0 2px; font-size: 12px; }
  .atalho { flex: none; min-width: 46px; height: 34px; }
  .atalho--limpar { padding: 0 6px; }
  .obs { padding: 16px; gap: 4px 12px; }
  .obs .botao-ajuda { padding: 0 12px; font-size: 12.5px; letter-spacing: .03em; }
  .resumo .botao { font-size: 12px; letter-spacing: .02em; gap: 8px; }
  .resumo .botao__icone { width: 24px; height: 24px; margin-right: -4px; }

  /* fábrica: foto um pouco mais baixa */
  .fabrica__foto { aspect-ratio: 16 / 10; }

  /* FAQ: toques mais confortáveis */
  .pergunta summary { padding: 18px 0; font-size: 15px; }
}

/* ===== pop-up do pedido (montagem + dados em duas etapas) ===== */
.modal--pedido {
  width: min(1120px, calc(100% - 40px));
  height: min(860px, calc(100dvh - 40px));
  max-height: none;
  overflow: hidden;
}
.pedido { display: flex; flex-direction: column; height: 100%; }

.pedido__topo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 64px 16px 28px;
  border-bottom: 2px solid var(--preto);
  background: var(--coroa);
}
.pedido__titulo { margin: 0; font-family: var(--fonte-titulo); font-size: 18px; text-transform: uppercase; white-space: nowrap; }
.pedido__etapas { display: flex; gap: 6px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.pedido__etapas li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(0, 0, 0, .55);
}
.pedido__etapas li span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 12px;
}
.pedido__etapas li.is-atual { background: var(--preto); color: var(--branco); }
.pedido__etapas li.is-atual span { border-color: var(--coroa); background: var(--coroa); color: var(--preto); }
.pedido__etapas li.is-feito { color: var(--preto); }
.pedido__etapas li.is-feito span { background: var(--preto); border-color: var(--preto); color: var(--coroa); }
.modal--pedido .modal__fechar { top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, .1); }

.pedido__corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 24px 28px 32px; }
.pedido__corpo .calc__grade { margin-top: 20px; gap: 32px; }
.pedido__corpo .resumo { top: 0; }
.pedido__corpo .aviso-interno { margin: 0; }
.aviso-interno--compacto { padding: 10px 14px 10px 54px; font-size: 13px; border-width: 4px; }
.aviso-interno--compacto::before { top: 10px; left: 14px; width: 26px; height: 26px; font-size: 15px; }
.aviso-interno--compacto strong { display: inline; font-size: 14px; }

.pedido__etapa--dados { max-width: 560px; margin: 0 auto; }
.pedido__etapa--dados .contato { padding: 8px 0 0; border: 0; margin: 0; }
.pedido__etapa--dados .contato__campos { grid-template-columns: 1fr; gap: 14px; }
.pedido__etapa--dados .botao { width: 100%; }
.pedido__voltar { margin: 0 0 8px; }

/* barra de total fixa no rodapé do pop-up (celular) */
.pedido__barra { display: none; }

@media (max-width: 760px) {
  .modal--pedido {
    width: 100%;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .pedido__topo { flex-wrap: wrap; gap: 10px; padding: 12px 56px 12px 16px; }
  .pedido__titulo { font-size: 15px; }
  .pedido__etapas { flex-basis: 100%; margin: 0; }
  .pedido__etapas li { font-size: 12px; padding: 4px 10px 4px 4px; }
  .pedido__etapas li span { width: 20px; height: 20px; font-size: 11px; }
  .modal--pedido .modal__fechar { top: 10px; transform: none; }
  .pedido__corpo { padding: 16px 16px 24px; }
  .pedido__corpo .calc__grade { margin-top: 16px; }
  .pedido__corpo .resumo .botao { display: none; }

  .pedido__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 2px solid var(--preto);
    background: var(--branco);
  }
  .pedido__barra[hidden] { display: none; }
  .pedido__barra-total { display: flex; flex-direction: column; line-height: 1.2; }
  .pedido__barra-total small { font-size: 11px; color: var(--grafite); }
  .pedido__barra-total b { font-size: 15px; }
  .botao--barra { min-height: 46px; width: auto !important; padding: 0 14px 0 18px; font-size: 13px; }
}
@media (max-width: 760px) {
  .pedido__corpo .aviso-interno--compacto { padding: 8px 10px 8px 44px; font-size: 12px; line-height: 1.4; }
  .pedido__corpo .aviso-interno--compacto::before { left: 10px; top: 8px; width: 24px; height: 24px; }
  .pedido__corpo .chips { gap: 8px; }
  .pedido__corpo .chip { width: 34px; height: 34px; }
}

/* ===== orçamento rápido: 3 perguntas ===== */
.modal--pedido { width: min(720px, calc(100% - 40px)); height: auto; max-height: calc(100dvh - 40px); }
.pedido__corpo { max-height: calc(100dvh - 40px - 72px); }
.rapido { max-width: 600px; margin: 22px auto 0; }
.rapido__pergunta { margin-bottom: 26px; }
.rapido__rotulo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 800;
}
.rapido__rotulo span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--preto);
  color: var(--coroa);
  font-family: var(--fonte-titulo);
  font-size: 13px;
}
.rapido__rotulo small { font-size: 13px; font-weight: 500; color: var(--grafite); }

.cores-check { display: flex; flex-wrap: wrap; gap: 8px; }
.cor-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px 0 8px;
  border: 1px solid #D6D6D6;
  border-radius: 999px;
  background: var(--branco);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.cor-check i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.cor-check:hover { border-color: var(--preto); }
.cor-check[aria-checked="true"] { border: 2px solid var(--preto); padding: 0 13px 0 7px; background: #FFF6D1; }
.cor-check[aria-checked="true"]::after { content: "✓"; font-weight: 800; }

.qtds { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.qtd {
  min-height: 48px;
  border: 1px solid #D6D6D6;
  border-radius: 10px;
  background: var(--branco);
  font-family: var(--fonte-titulo);
  font-size: 16px;
  cursor: pointer;
}
.qtd:hover { border-color: var(--preto); }
.qtd[aria-checked="true"] { border: 2px solid var(--preto); background: var(--coroa); box-shadow: 3px 3px 0 var(--preto); }
.qtd-outra { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 14px; color: var(--grafite); }
.qtd-outra input {
  width: 120px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #CFCFCF;
  border-radius: 8px;
  font: inherit;
  font-size: 15px;
}

.rapido__estimativa {
  position: static;
  padding: 18px 20px;
  border-radius: 12px;
  background: var(--preto);
  color: var(--branco);
}
.rapido__preco { margin: 0; font-size: 15px; color: #CFCFCF; }
.rapido__preco strong { font-family: var(--fonte-titulo); font-size: 30px; font-weight: 400; color: var(--coroa); }
.rapido__total { margin: 4px 0 0; font-size: 14px; color: #E6E6E6; }
.rapido__dica { margin: 6px 0 0; font-size: 13px; color: #A3A3A3; }
.rapido__dtf { margin-top: 18px; }
.rapido__continuar { width: 100%; margin-top: 20px; }
.rapido__nota { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--grafite); text-align: center; }
.pedido__corpo .aviso-interno { max-width: 600px; margin: 0 auto; }

@media (max-width: 760px) {
  .modal--pedido { width: 100%; height: 100dvh; max-height: none; }
  .pedido__corpo { max-height: none; }
  .rapido { margin-top: 16px; }
  .rapido__pergunta { margin-bottom: 22px; }
  .rapido__rotulo { font-size: 16px; }
  .qtds { grid-template-columns: repeat(3, 1fr); }
  .rapido__continuar { display: none; }
  .cor-check { min-height: 38px; font-size: 13px; }
}

/* ===== orçamento passo a passo ===== */
.modal--pedido { width: min(640px, calc(100% - 40px)); }
.pedido__topo { gap: 18px; }
.pedido__progresso { display: flex; flex-direction: column; gap: 6px; flex: 1; max-width: 220px; margin-left: auto; font-size: 12px; font-weight: 700; }
.pedido__trilho { height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .15); overflow: hidden; }
.pedido__trilho i { display: block; height: 100%; width: 25%; background: var(--preto); border-radius: 3px; transition: width .35s ease; }

.passos-q { margin-top: 20px; }
.passo-q__titulo { margin: 0 0 6px; font-family: var(--fonte-titulo); font-size: 24px; font-weight: 400; line-height: 1.1; text-transform: uppercase; }
.passo-q__sub { margin: 0 0 18px; font-size: 14px; color: var(--grafite); }
.passo-q__titulo + .opcoes-grandes { margin-top: 18px; }

.opcoes-grandes { display: flex; flex-direction: column; gap: 10px; }
.op-grande {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 18px;
  border: 1.5px solid #D6D6D6;
  border-radius: 14px;
  background: var(--branco);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.op-grande:hover { border-color: var(--preto); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--preto); }
.op-grande[aria-checked="true"] { border: 2px solid var(--preto); background: #FFF6D1; box-shadow: 3px 3px 0 var(--preto); }
.op-grande svg { flex: none; width: 56px; height: 46px; color: var(--preto); }
.op-grande__texto { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.op-grande__texto b { font-size: 16px; font-weight: 800; }
.op-grande__texto small { font-size: 13px; line-height: 1.4; color: var(--grafite); }
.op-grande__texto em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--preto); }
.op-grande__preco { flex: none; font-size: 11px; line-height: 1.3; color: var(--grafite); text-align: right; }
.op-grande__preco b { font-family: var(--fonte-titulo); font-size: 17px; font-weight: 400; color: var(--preto); }

.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 10px; }
.swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.swatch i {
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
  transition: transform .15s ease, box-shadow .15s ease;
}
.swatch:hover i { transform: scale(1.06); }
.swatch[aria-checked="true"] i { box-shadow: 0 0 0 3px var(--branco), 0 0 0 5px var(--preto); }
.swatch[aria-checked="true"] i::after {
  content: "✓";
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--coroa);
  color: var(--preto);
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 0 0 2px var(--preto);
}

.contador { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 8px 0 14px; }
.contador__btn {
  width: 52px;
  height: 52px;
  border: 2px solid var(--preto);
  border-radius: 50%;
  background: var(--branco);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.contador__btn:hover { background: var(--coroa); }
.contador__valor { display: flex; flex-direction: column; align-items: center; }
.contador__valor input {
  width: 150px;
  border: 0;
  background: none;
  font-family: var(--fonte-titulo);
  font-size: 54px;
  line-height: 1;
  text-align: center;
  -moz-appearance: textfield;
}
.contador__valor input::-webkit-outer-spin-button,
.contador__valor input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.contador__valor input:focus { outline: none; border-bottom: 2px solid var(--coroa); }
.contador__valor small { font-size: 13px; font-weight: 700; color: var(--grafite); }
.contador__range { width: 100%; accent-color: #000; margin: 0 0 12px; }
.passo-q .qtds { grid-template-columns: repeat(5, 1fr); margin-bottom: 18px; }
.passo-q .qtd { min-height: 40px; font-size: 14px; }
.passo-q .qtd.is-ativo { border: 2px solid var(--preto); background: var(--coroa); }

/* rodapé do pop-up em todos os passos */
.pedido__barra {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px;
  border-top: 2px solid var(--preto);
  background: var(--branco);
}
.pedido__barra[hidden] { display: none; }
.pedido__barra .link-voltar { margin: 0; padding: 8px 0; }
.pedido__barra-total { display: flex; flex-direction: column; line-height: 1.2; margin-left: auto; text-align: right; }
.pedido__barra-total[hidden] { display: none; }
.pedido__barra-total small { font-size: 11px; color: var(--grafite); }
.pedido__barra-total b { font-size: 15px; }
.pedido__barra .botao--barra { margin-left: auto; min-height: 48px; min-width: 0; padding: 0 16px 0 22px; font-size: 14px; }
.pedido__barra-total:not([hidden]) + .botao--barra { margin-left: 0; }
.botao--barra:disabled { opacity: .45; }
.pedido__etapa--dados .pedido__voltar { margin-top: 0; }

@media (max-width: 760px) {
  .pedido__progresso { flex-basis: 100%; max-width: none; margin: 0; }
  .passo-q__titulo { font-size: 21px; }
  .op-grande { padding: 14px; gap: 12px; }
  .op-grande svg { width: 44px; height: 36px; }
  .op-grande__texto b { font-size: 15px; }
  .op-grande__texto small { font-size: 12.5px; }
  .swatches { grid-template-columns: repeat(4, 1fr); gap: 12px 6px; }
  .swatch i { width: 52px; height: 52px; }
  .swatch { font-size: 12px; text-align: center; }
  .contador__valor input { font-size: 46px; width: 130px; }
  .passo-q .qtds { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .passo-q .qtd { font-size: 13px; }
  .pedido__barra { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .pedido__barra .botao--barra { width: auto !important; }
}
@media (max-width: 760px) {
  .modal--pedido { width: 100%; max-width: none; height: 100dvh; max-height: none; }
  .pedido__barra-total { display: none !important; }
  .pedido__corpo .aviso-interno--compacto { font-size: 0; padding: 8px 10px 8px 42px; min-height: 0; }
  .pedido__corpo .aviso-interno--compacto strong { font-size: 13px; }
  .pedido__corpo .aviso-interno--compacto::before { top: 6px; width: 22px; height: 22px; font-size: 13px; }
}

/* ===== carrinho: várias peças no mesmo pedido ===== */
.carrinho { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.carrinho__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "cores texto qtd" "cores acoes acoes";
  gap: 4px 14px;
  align-items: center;
  padding: 14px 16px;
  border: 2px solid var(--preto);
  border-radius: 12px;
  background: var(--branco);
  box-shadow: 3px 3px 0 var(--preto);
}
.carrinho__cores { grid-area: cores; display: flex; align-self: start; padding-top: 2px; }
.carrinho__cores i {
  width: 26px;
  height: 26px;
  margin-left: -8px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 2px var(--branco), inset 0 0 0 1px rgba(0, 0, 0, .15);
}
.carrinho__cores i:first-child { margin-left: 0; }
.carrinho__texto { grid-area: texto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.carrinho__texto b { font-size: 15px; font-weight: 800; }
.carrinho__texto small { font-size: 13px; color: var(--grafite); }
.carrinho__qtd { grid-area: qtd; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.carrinho__qtd b { font-family: var(--fonte-titulo); font-size: 17px; font-weight: 400; }
.carrinho__qtd small { font-size: 12px; color: var(--grafite); }
.carrinho__acoes { grid-area: acoes; display: flex; gap: 16px; }
.carrinho__acoes button {
  padding: 4px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.carrinho__acoes [data-remover] { color: var(--grafite); }

.add-peca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  margin-bottom: 18px;
  border: 2px dashed var(--preto);
  border-radius: 12px;
  background: #FFFBEA;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: background-color .15s ease;
}
.add-peca:hover { background: #FFF1B8; }
.add-peca span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--preto);
  color: var(--coroa);
  font-size: 18px;
  line-height: 1;
}
.conf__itens li b { grid-area: qtd; }

@media (max-width: 760px) {
  .carrinho__item { padding: 12px; gap: 4px 10px; }
  .carrinho__cores i { width: 22px; height: 22px; }
}
.carrinho__item { grid-template-columns: 52px 1fr auto; }
.carrinho__cores { flex-wrap: wrap; row-gap: 4px; }
@media (max-width: 760px) { .carrinho__item { grid-template-columns: 44px 1fr auto; } }

/* silhueta da peça + bolinhas das cores (resumo e confirmação) */
.peca-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 4px 6px;
  border-radius: 10px;
  background: #F4F4F4;
}
.peca-visual svg { width: 44px; height: 36px; color: var(--preto); }
.peca-visual__cores { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
.peca-visual__cores i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
}
.carrinho__item { grid-template-columns: 72px 1fr auto; }
.carrinho__cores { display: block; align-self: stretch; padding: 0; }
.carrinho__cores i { margin: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.carrinho__cores .peca-visual { height: 100%; justify-content: center; }

.conf__itens li { grid-template-columns: 56px 1fr auto; grid-template-areas: "vis nome qtd" "vis grade qtd"; column-gap: 12px; }
.conf__itens li .conf__visual { grid-area: vis; }
.conf__visual .peca-visual { padding: 6px 2px 5px; }
.conf__visual .peca-visual svg { width: 34px; height: 28px; }
.conf__visual .peca-visual__cores i { width: 10px; height: 10px; }
.conf__itens { max-height: 260px; }

@media (max-width: 760px) {
  .carrinho__item { grid-template-columns: 62px 1fr auto; }
  .peca-visual svg { width: 38px; height: 32px; }
  .peca-visual__cores i { width: 12px; height: 12px; }
}
.carrinho__cores .peca-visual__cores i { width: 18px; height: 18px; }
.carrinho__cores .peca-visual__cores { gap: 4px; }
.conf__visual .peca-visual__cores i { width: 13px; height: 13px; }

/* prompt de IA mostrado no lugar da foto enquanto ela não existe */
.vitrine__placeholder { padding: 24px; gap: 10px; }
.vitrine__prompt {
  max-width: 34em;
  margin: 4px 0 0 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.55;
  color: var(--grafite) !important;
  text-align: left;
}
.vitrine__copiar {
  margin-top: 4px;
  padding: 8px 14px;
  border: 1.5px solid var(--preto);
  border-radius: 8px;
  background: var(--branco);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.vitrine__copiar:hover { background: var(--coroa); }
@media (max-width: 760px) {
  .cores__vitrine { aspect-ratio: 1 / 1; min-height: 0; }
  .vitrine__prompt { font-size: 11px !important; }
}
@media (max-width: 760px) {
  #cores-chips { gap: 6px; }
  #cores-chips .chip { width: 32px; height: 32px; }
}

/* vídeo vertical da estamparia DTF */
.dtf__video {
  display: flex;
  justify-content: center;
  align-items: center;
}
.dtf__video video {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  aspect-ratio: 480 / 854;
  object-fit: cover;
  border: 2px solid var(--preto);
  border-radius: 16px;
  background: #111;
  box-shadow: 6px 6px 0 var(--preto);
}
@media (max-width: 760px) {
  .dtf__card { gap: 0; }
  .dtf__video { order: 2; padding: 0 18px 26px; }
  .dtf__video video { max-width: 240px; box-shadow: 4px 4px 0 var(--preto); }
}

/* tamanhos disponíveis (só informativo) */
.cores__tamanhos { margin: 18px 0 0; font-size: 15px; }
.cores__tamanhos strong { font-weight: 800; }

/* com a foto da peça, a vitrine volta a ser quadrada também no celular */
.cores__vitrine.tem-foto { aspect-ratio: 1 / 1; min-height: 0; }