/* foot90 — visual do site. Paleta aprovada: bege, azul e caramelo. */
:root {
  --bege: #EFE3C8;
  --bege-claro: #F6EEDC;
  --azul: #1F3F73;
  --azul-escuro: #14284A;
  --caramelo: #B5813E;
  --branco: #FFFFFF;
  --texto: #1E2533;
  --cinza: #6B7080;
  --linha: #E6DCC6;
  --verde: #2E7D4F;
  --vermelho: #B23A3A;
  --largura: 1200px;
  --serifa: "Lora", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--branco);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: var(--azul); }
h1, h2, h3 { font-family: var(--serifa); color: var(--azul-escuro); line-height: 1.2; }

.conteudo { max-width: var(--largura); margin: 0 auto; padding: 0 16px; }

/* ---------- cabeçalho ---------- */
#topo { background: var(--bege); border-bottom: 1px solid var(--linha); position: relative; z-index: 10; }
.faixa {
  background: var(--azul-escuro); color: var(--bege-claro);
  text-align: center; font-size: 13px; letter-spacing: .04em; padding: 7px 16px;
}
.topo-linha {
  max-width: var(--largura); margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.logo img { height: 64px; width: auto; }
.carrinho-link {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  color: var(--azul-escuro); font-weight: 600; position: relative;
}
.carrinho-link b {
  background: var(--caramelo); color: #fff; font-size: 12px; min-width: 20px; height: 20px;
  border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
}
.carrinho-link b[hidden] { display: none; }

.menu { border-top: 1px solid var(--linha); }
.menu-lista {
  list-style: none; margin: 0 auto; padding: 0 16px; max-width: var(--largura);
  display: flex; gap: 28px;
}
.menu-item { position: relative; }
.menu-item > a {
  display: block; padding: 12px 0; text-decoration: none; color: var(--azul-escuro);
  font-weight: 600; font-size: 15px; white-space: nowrap;
}
.menu-item > a:hover { color: var(--caramelo); }
.sub {
  display: none; position: absolute; top: 100%; left: -12px; min-width: 200px;
  list-style: none; margin: 0; padding: 8px 0; background: var(--bege-claro);
  border: 1px solid var(--linha); border-radius: 6px; box-shadow: 0 8px 20px rgba(20,40,74,.12);
}
.tem-sub:hover .sub, .tem-sub:focus-within .sub { display: block; }
.sub a { display: block; padding: 7px 16px; text-decoration: none; color: var(--texto); font-size: 14px; }
.sub a:hover { background: var(--bege); }

/* ---------- vitrine ---------- */
.banner picture img { width: 100%; height: auto; }
.titulo-vitrine { margin: 32px 0 20px; font-size: 28px; }
.grade {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 20px; margin-bottom: 56px;
}
.cartao { text-decoration: none; color: inherit; }
.cartao-foto { position: relative; aspect-ratio: 1; background: #fff; overflow: hidden; }
.cartao-foto img { width: 100%; height: 100%; object-fit: contain; transition: opacity .25s; }
.cartao-foto .verso { position: absolute; inset: 0; opacity: 0; }
.cartao:hover .verso { opacity: 1; }
.cartao-info { padding-top: 10px; }
.cartao-info h3 { margin: 0; font-size: 17px; }
.cartao-detalhe { margin: 2px 0 6px; color: var(--cinza); font-size: 14px; }
.cartao-preco { margin: 0; font-weight: 700; color: var(--azul-escuro); }
.vazio { padding: 48px 0; text-align: center; }

/* ---------- produto ---------- */
.produto {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; padding: 32px 0 64px;
}
.foto-grande { aspect-ratio: 1; background: #fff; border: 1px solid var(--linha); }
.foto-grande img { width: 100%; height: 100%; object-fit: contain; }
.miniaturas { display: flex; gap: 10px; margin-top: 12px; }
.mini {
  width: 84px; height: 84px; padding: 0; background: #fff; cursor: pointer;
  border: 1px solid var(--linha); border-radius: 4px;
}
.mini.ativa { border: 2px solid var(--azul); }
.mini img { width: 100%; height: 100%; object-fit: contain; }

.trilha { margin: 0 0 8px; font-size: 13px; color: var(--cinza); }
.trilha a { color: var(--cinza); }
.compra h1 { margin: 0; font-size: 32px; }
.detalhe { margin: 4px 0 16px; color: var(--cinza); }
.preco { margin: 0; font-size: 28px; font-weight: 700; color: var(--azul-escuro); }
.pix { margin: 2px 0 20px; color: var(--cinza); font-size: 14px; }
fieldset { border: 0; padding: 0; margin: 0 0 20px; }
legend { font-weight: 700; margin-bottom: 8px; color: var(--azul-escuro); }
.tamanhos { display: flex; gap: 8px; flex-wrap: wrap; }
.tam input { position: absolute; opacity: 0; pointer-events: none; }
.tam span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 44px;
  border: 1px solid #C9BFA8; border-radius: 4px; cursor: pointer; font-weight: 600; background: #fff;
}
.tam input:checked + span { background: var(--azul); border-color: var(--azul); color: #fff; }
.tam input:focus-visible + span { outline: 2px solid var(--caramelo); outline-offset: 2px; }
.medidas { display: inline-block; margin-top: 8px; font-size: 14px; }
.opcao { display: block; margin-bottom: 6px; cursor: pointer; }
.campos-perso { display: flex; gap: 12px; margin-top: 10px; }
.campos-perso[hidden] { display: none; }
.campos-perso label { display: flex; flex-direction: column; font-size: 14px; gap: 4px; }
.campos-perso input {
  height: 42px; padding: 0 10px; border: 1px solid #C9BFA8; border-radius: 4px; font: inherit; width: 160px;
}
.campos-perso label:last-child input { width: 80px; }

.botao {
  display: inline-block; width: 100%; padding: 15px 20px; border: 0; border-radius: 999px;
  background: var(--azul); color: #fff; font: 600 16px var(--sans); cursor: pointer;
  text-align: center; text-decoration: none;
}
.botao:hover { background: var(--azul-escuro); }
.aviso { min-height: 24px; margin: 10px 0 0; font-size: 14px; }
.aviso.ok { color: var(--verde); }
.aviso.erro { color: var(--vermelho); }
.garantias {
  list-style: none; margin: 20px 0 0; padding: 16px; background: var(--bege-claro);
  border-radius: 6px; font-size: 14px;
}
.garantias li + li { margin-top: 6px; }

/* ---------- carrinho ---------- */
.carrinho {
  display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; padding-bottom: 64px;
}
.linhas { list-style: none; margin: 0; padding: 0; }
.linha {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--linha);
}
.linha img { width: 96px; height: 96px; object-fit: contain; background: #fff; border: 1px solid var(--linha); }
.linha-info { display: flex; flex-direction: column; gap: 4px; }
.linha-info a { text-decoration: none; color: var(--azul-escuro); }
.linha-info span { font-size: 14px; color: var(--cinza); }
.qtd { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; }
.qtd button {
  width: 30px; height: 30px; border: 1px solid #C9BFA8; background: #fff; border-radius: 4px;
  font-size: 16px; cursor: pointer;
}
.resumo { background: var(--bege-claro); border-radius: 8px; padding: 20px; }
.resumo h2 { margin: 0 0 12px; font-size: 22px; }
.resumo p { display: flex; justify-content: space-between; margin: 8px 0; }
.resumo .total { font-size: 20px; font-weight: 700; border-top: 1px solid var(--linha); padding-top: 12px; }
.resumo .dica, .resumo .prazo, .resumo .seguro { display: block; font-size: 14px; }
.dica { color: var(--caramelo); }
.dica.ok { color: var(--verde); font-weight: 600; }
.prazo { color: var(--cinza); }
.seguro { color: var(--cinza); text-align: center; }

/* ---------- checkout simulado ---------- */
.simulado { max-width: 560px; margin: 48px auto 72px; text-align: center; }
.simulado .caixa { background: var(--bege-claro); border: 2px dashed var(--caramelo); border-radius: 8px; padding: 28px; }

/* ---------- rodapé ---------- */
#rodape { background: var(--bege); color: var(--texto); border-top: 1px solid var(--linha); }
.rodape-colunas {
  max-width: var(--largura); margin: 0 auto; padding: 40px 16px 24px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px;
}
.rodape-logo { height: 56px; width: auto; margin-bottom: 8px; }
#rodape h4 { margin: 0 0 10px; color: var(--azul-escuro); font-family: var(--serifa); font-size: 17px; }
#rodape ul { list-style: none; margin: 0; padding: 0; }
#rodape li { margin-bottom: 6px; }
#rodape a { color: var(--texto); text-decoration: none; font-size: 14px; }
#rodape a:hover { color: var(--caramelo); }
#rodape p { margin: 0; font-size: 14px; }
.rodape-legal {
  max-width: var(--largura); margin: 0 auto !important; padding: 14px 16px 20px;
  border-top: 1px solid var(--linha); color: var(--cinza); font-size: 12px !important;
}

/* ---------- celular ---------- */
@media (max-width: 900px) {
  .grade { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
  .produto, .carrinho { grid-template-columns: 1fr; gap: 24px; }
  .rodape-colunas { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 640px) {
  .logo img { height: 48px; }
  .carrinho-link span { display: none; }
  .menu-lista { gap: 20px; overflow-x: auto; scrollbar-width: none; }
  .menu-lista::-webkit-scrollbar { display: none; }
  .sub { display: none !important; }
  .titulo-vitrine { font-size: 22px; margin: 20px 0 14px; }
  .compra h1 { font-size: 26px; }
  .linha { grid-template-columns: 72px 1fr; }
  .linha img { width: 72px; height: 72px; }
  .linha-preco { grid-column: 2; }
}

/* ---------- catálogo completo ---------- */
.barra-vitrine { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 28px 0 8px; }
.barra-vitrine .titulo-vitrine { margin: 0; }
.titulo-vitrine .trilha { display: block; font: 400 13px var(--sans); color: var(--cinza); margin-bottom: 4px; }
.titulo-vitrine .trilha a { color: var(--cinza); }
.contagem { margin: 0 0 12px; color: var(--cinza); font-size: 14px; }
.busca { display: flex; gap: 0; }
.busca input { height: 40px; width: 240px; max-width: 60vw; padding: 0 12px; border: 1px solid #C9BFA8; border-right: 0; border-radius: 999px 0 0 999px; font: inherit; }
.busca button { height: 40px; padding: 0 16px; border: 0; border-radius: 0 999px 999px 0; background: var(--azul); color: #fff; font: 600 14px var(--sans); cursor: pointer; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }
.chip { padding: 6px 14px; border: 1px solid #C9BFA8; border-radius: 999px; text-decoration: none; color: var(--azul-escuro); font-size: 14px; background: #fff; }
.chip:hover { border-color: var(--azul); }
.chip.ativo { background: var(--azul); border-color: var(--azul); color: #fff; }
.sub-larga { display: none; min-width: 640px; padding: 14px 16px; column-count: 4; column-gap: 20px; }
.tem-sub:hover .sub-larga, .tem-sub:focus-within .sub-larga { display: block; }
.grupo-pais { break-inside: avoid; margin-bottom: 10px; }
.grupo-pais ul { list-style: none; margin: 0; padding: 0; }
.sub .pais { font-weight: 700; color: var(--azul-escuro); padding: 4px 6px; }
.sub-larga a { padding: 3px 6px; }
.relacionadas { padding-bottom: 24px; }
.relacionadas .titulo-vitrine { font-size: 24px; }
.botao-curto { width: auto; padding: 13px 32px; }
.botao:disabled { opacity: .6; cursor: wait; }

/* ---------- entrega ---------- */
.seguro-topo { color: var(--azul-escuro); font-weight: 600; font-size: 14px; }
.passos { display: flex; gap: 8px; list-style: none; padding: 0; margin: 24px 0 8px; font-size: 14px; color: var(--cinza); flex-wrap: wrap; }
.passos li::after { content: "›"; margin-left: 8px; }
.passos li:last-child::after { content: ""; }
.passos .atual { color: var(--azul-escuro); font-weight: 700; }
.entrega { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; padding-bottom: 64px; }
.form-entrega h2 { font-size: 20px; margin: 24px 0 12px; }
.form-entrega h2:first-child { margin-top: 0; }
.campos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.campos label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; color: var(--azul-escuro); grid-column: span 6; }
.campos .c3 { grid-column: span 3; }
.campos .c2 { grid-column: span 2; }
.campos .c4 { grid-column: span 4; }
.campos input, .campos select { height: 44px; padding: 0 12px; border: 1px solid #C9BFA8; border-radius: 4px; font: 400 16px var(--sans); color: var(--texto); background: #fff; }
.campos input:focus, .campos select:focus { outline: 2px solid var(--azul); outline-offset: 0; border-color: var(--azul); }
.campos small { font-weight: 400; color: var(--cinza); }
.aceite { display: flex; gap: 10px; align-items: flex-start; margin: 20px 0; font-size: 14px; }
.aceite input { margin-top: 3px; width: 18px; height: 18px; }
.erro-entrega { color: var(--vermelho); min-height: 22px; font-size: 14px; }
.resumo-itens { list-style: none; margin: 0 0 12px; padding: 0; border-bottom: 1px solid var(--linha); }
.resumo-itens li { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; font-size: 14px; }
.resumo-itens img { width: 52px; height: 52px; object-fit: contain; background: #fff; border: 1px solid var(--linha); }
.resumo-itens small { display: block; color: var(--cinza); }
.selos { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--cinza); }

/* ---------- páginas de texto (trocas, privacidade...) ---------- */
.texto { max-width: 760px; margin: 0 auto; padding: 32px 16px 64px; }
.texto h1 { font-size: 32px; margin: 0 0 16px; }
.texto h2 { font-size: 20px; margin: 28px 0 8px; }
.texto table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 15px; }
.texto th, .texto td { border: 1px solid var(--linha); padding: 8px 10px; text-align: center; }
.texto th { background: var(--bege-claro); }
.confirmado { text-align: center; }
.confirmado .numero { font: 700 24px var(--serifa); color: var(--azul-escuro); }
.confirmado .botao { width: auto; padding: 13px 32px; margin: 8px; }

@media (max-width: 900px) {
  .entrega { grid-template-columns: 1fr; }
  .resumo-entrega { order: -1; }
}
@media (max-width: 640px) {
  .busca, .busca input { width: 100%; max-width: none; }
  .campos .c3, .campos .c2, .campos .c4 { grid-column: span 6; }
  .campos .m3 { grid-column: span 3; }
  .texto h1 { font-size: 26px; }
}

/* ---------- tabela de medidas ---------- */
.lead { font-size: 17px; color: var(--cinza); }
.simulador { background: var(--bege-claro); border: 1px solid var(--linha); border-radius: 10px; padding: 20px; margin: 24px 0; }
.simulador h2 { margin: 0 0 12px; }
.sim-campos { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.sim-campos label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; color: var(--azul-escuro); }
.sim-campos input { height: 44px; width: 120px; padding: 0 12px; border: 1px solid #C9BFA8; border-radius: 4px; font: 400 16px var(--sans); }
.sim-campos .botao { width: auto; padding: 12px 28px; }
.sim-resultado { margin: 12px 0 0; min-height: 24px; }
.medidas-grade { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: center; margin: 8px 0 12px; }
.medidas-figura { margin: 0; text-align: center; }
.medidas-figura svg { width: 100%; max-width: 220px; height: auto; }
.medidas-figura figcaption { font-size: 13px; color: var(--cinza); text-align: left; margin-top: 8px; }
.tabela-rolagem { overflow-x: auto; }
.tabela-medidas { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 15px; border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; }
.tabela-medidas caption { text-align: left; font-weight: 600; color: var(--azul-escuro); margin-bottom: 8px; }
.tabela-medidas th, .tabela-medidas td { padding: 10px 12px; text-align: center; border: 0; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela-medidas thead th { background: var(--azul-escuro); color: var(--bege-claro); font-weight: 600; font-size: 13px; letter-spacing: .03em; }
.tabela-medidas tbody th { color: var(--azul-escuro); font: 700 16px var(--serifa); }
.tabela-medidas tbody tr:nth-child(even) { background: #FBF7EE; }
.tabela-medidas tbody tr:last-child th, .tabela-medidas tbody tr:last-child td { border-bottom: 0; }
.tabela-medidas tr.destaque { background: var(--bege) !important; box-shadow: inset 4px 0 0 var(--caramelo); }
@media (max-width: 640px) {
  .medidas-grade { grid-template-columns: 1fr; }
  .medidas-figura { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; }
  .medidas-figura figcaption { margin: 0; }
  .tabela-medidas th, .tabela-medidas td { padding: 8px; font-size: 14px; }
}
body[data-pagina="tamanhos"] .texto { max-width: 1000px; }
.aviso-medidas { background: var(--bege-claro); border-left: 4px solid var(--caramelo); padding: 12px 16px; border-radius: 4px; font-size: 15px; }
.nota-medidas { font-size: 14px; color: var(--cinza); }