/* Visual do site: cores, tipos, pedido, vitrine, mapa e rodapé */
:root {
  --linho: #f7f3ea;
  --linho-fundo: #efe8d8;
  --jeans: #3d5b8a;
  --jeans-noite: #26395a;
  --jeans-nevoa: #dfe8f3;
  --manteiga: #f5d46b;
  --manteiga-leve: #fbefc4;
  --tatu: #6e5646;
  --tatu-noite: #3a2f28;
  --zap: #157a5b;
  --zap-fundo: #10614a;
  --tinta: #1f2733;
  --apagado: #5b6470;
  --risco: #d9cfbd;
  --alerta: #a4302a;
  --raio: 16px;
  --raio-maior: 24px;
  --sombra: 0 1px 2px rgb(38 57 90 / .08), 0 12px 32px -16px rgb(38 57 90 / .35);
  --titulo: "Bree Serif", Georgia, serif;
  --corpo: "Kumbh Sans", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}

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

html { font-size: 106.25%; scroll-padding-top: 96px; -webkit-text-size-adjust: none; text-size-adjust: none; }
body { margin: 0; background: var(--linho); color: var(--tinta); font: 400 1rem/1.62 var(--corpo); }
[hidden] { display: none !important; visibility: hidden; }
svg, img { max-width: 100%; display: block; }
a { color: var(--jeans); text-underline-offset: 3px; text-decoration-thickness: from-font; }
a:hover { color: var(--jeans-noite); }
:focus-visible { outline: 3px solid var(--manteiga); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 400; line-height: 1.15; color: var(--jeans-noite); margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 5.6vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 3.6vw, 2.25rem); }
h3 { font-size: 1.22rem; }
p { margin-block: 0 1em; }
ul, ol { padding: 0; margin: 0; list-style: none; }
input, select, textarea, button { font: inherit; color: inherit; }
pre { font-family: var(--corpo); }

.tt-miolo { width: min(1160px, 100% - 40px); margin-inline: auto; }
.tt-miolo--estreito { width: min(780px, 100% - 40px); }
.tt-pular { position: absolute; left: 12px; top: -80px; z-index: 99; padding: 10px 16px; background: var(--jeans-noite); color: #fff; border-radius: 10px; }
.tt-pular:focus { top: 12px; }

/* cintas: as placas do casco do tatu, como faixa decorativa */
.tt-cintas {
  height: 14px;
  background:
    radial-gradient(15px 11px at 50% 100%, var(--jeans) 95%, transparent 100%) 0 0 / 30px 14px repeat-x,
    var(--manteiga);
}
.tt-cintas--rodape { background-color: var(--tatu-noite); transform: scaleY(-1); }

/* botões */
.tt-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 10px 20px;
  border: 2px solid transparent; border-radius: 40px;
  font-weight: 700; text-decoration: none; cursor: pointer; line-height: 1.2;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.tt-botao:hover { transform: translateY(-1px); }
.tt-botao:active { transform: translateY(1px); }
.tt-botao--zap { background: var(--zap); color: #fff; box-shadow: 0 4px 0 var(--zap-fundo); }
.tt-botao--zap:hover { color: #fff; background: #13704f; }
.tt-botao--anil { background: var(--jeans); color: #fff; box-shadow: 0 4px 0 var(--jeans-noite); }
.tt-botao--anil:hover { color: #fff; background: #36517c; }
.tt-botao--manteiga { background: var(--manteiga); color: var(--jeans-noite); box-shadow: 0 4px 0 #c9a73b; }
.tt-botao--manteiga:hover { color: var(--jeans-noite); background: #f2cb52; }
.tt-botao--claro { background: #fff; color: var(--jeans-noite); border-color: var(--jeans-nevoa); }
.tt-botao--linha { background: transparent; color: var(--jeans-noite); border-color: currentColor; }
.tt-botao--largo { width: 100%; }
.tt-icone { width: 20px; height: 20px; flex: none; }

/* topo */
.tt-topo { position: sticky; top: 0; z-index: 40; background: rgb(247 243 234 / .94); backdrop-filter: blur(8px); }
.tt-topo__faixa { display: flex; align-items: center; gap: 22px; min-height: 76px; }
.tt-marca { display: inline-flex; align-items: center; gap: 11px; color: var(--jeans-noite); text-decoration: none; margin-right: auto; }
.tt-marca__desenho { width: 44px; height: 44px; }
.tt-marca__nome { font-family: var(--titulo); font-size: 1.28rem; line-height: 1.05; }
.tt-marca__nome small { display: block; margin-top: 3px; font: 600 .76rem var(--corpo); letter-spacing: .04em; text-transform: uppercase; color: var(--tatu); }
.tt-topo__menu { display: flex; gap: 22px; }
.tt-topo__menu a { color: var(--tinta); font-weight: 600; text-decoration: none; }
.tt-topo__menu a:hover { color: var(--jeans); text-decoration: underline; }
.tt-topo__contato { display: flex; gap: 10px; }
.tt-topo__contato .tt-botao { min-height: 44px; padding-inline: 16px; }

/* abertura */
.tt-abertura {
  padding: 48px 0 56px;
  background:
    radial-gradient(520px 320px at 8% 0%, var(--jeans-nevoa), transparent 70%),
    radial-gradient(420px 300px at 100% 100%, var(--manteiga-leve), transparent 70%);
}
.tt-abertura__grade { display: grid; gap: 34px; }
.tt-selo { display: inline-block; margin-bottom: 14px; padding: 6px 14px; border-radius: 8px 8px 8px 2px; background: var(--jeans-noite); color: var(--manteiga); font-weight: 700; font-size: .86rem; letter-spacing: .02em; }
.tt-abertura__apoio { max-width: 33em; font-size: 1.12rem; color: var(--apagado); }
.tt-etiquetas { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 22px; }
.tt-etiquetas li { padding: 6px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--risco); font-size: .9rem; font-weight: 600; color: var(--tatu-noite); }
.tt-abertura__conta { display: flex; align-items: center; gap: 14px; max-width: 30em; padding: 14px 16px; border-radius: var(--raio); background: #fff; border: 2px dashed var(--manteiga); color: var(--tinta); text-decoration: none; }
.tt-abertura__conta .tt-icone { width: 34px; height: 34px; color: var(--tatu); }
.tt-abertura__conta b { display: block; color: var(--jeans-noite); }
.tt-abertura__conta:hover { border-style: solid; color: var(--tinta); }
.tt-abertura__ligar { margin: 18px 0 0; color: var(--apagado); }
.tt-abertura__ligar a { font-weight: 700; }

.tt-abertura__cartao, .tt-final__cartao { color: var(--tinta); position: relative; padding: 30px 22px 24px; border-radius: var(--raio-maior); background: #fff; box-shadow: var(--sombra); border: 1px solid var(--jeans-nevoa); }
.tt-cartao__alca { position: absolute; top: -14px; right: 22px; margin: 0; padding: 4px 12px; border-radius: 999px; background: var(--manteiga); color: var(--jeans-noite); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.tt-cartao__apoio { color: var(--apagado); font-size: .96rem; }

/* pedido */
.tt-pedido { display: grid; gap: 16px; }
.tt-pedido__alerta { margin: 0; padding: 12px 14px; border-radius: 12px; background: #fbe9e6; color: var(--alerta); font-weight: 600; }
.tt-pedido__grupo { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.tt-pedido__grupo legend { padding: 0; margin-bottom: 8px; font-weight: 700; }
.tt-pedido__grupo--pilulas { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-pedido__par { display: grid; gap: 16px; }
.tt-qtd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--linho); }
.tt-qtd label { font-weight: 600; }
.tt-qtd__controle { display: flex; align-items: center; gap: 6px; }
.tt-qtd__controle input { width: 60px; height: 42px; text-align: center; border: 1px solid var(--risco); border-radius: 10px; background: #fff; font-weight: 700; -moz-appearance: textfield; appearance: textfield; }
.tt-qtd__controle input::-webkit-outer-spin-button,
.tt-qtd__controle input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tt-qtd__botao { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--jeans); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.tt-qtd__botao:hover { background: var(--jeans-noite); }
.tt-pilula input { position: absolute; opacity: 0; }
.tt-pilula span { display: inline-block; padding: 9px 16px; border-radius: 999px; border: 2px solid var(--risco); background: #fff; font-weight: 600; cursor: pointer; }
.tt-pilula input:checked + span { border-color: var(--jeans); background: var(--jeans); color: #fff; }
.tt-pilula input:focus-visible + span { outline: 3px solid var(--manteiga); outline-offset: 2px; }
.tt-campo { display: grid; gap: 6px; }
.tt-campo label { font-weight: 700; font-size: .95rem; }
.tt-campo em { font-style: normal; font-weight: 400; color: var(--apagado); }
.tt-campo input, .tt-campo select, .tt-campo textarea { width: 100%; min-height: 48px; padding: 10px 13px; border: 1px solid #c9c1b1; border-radius: 12px; background: #fff; }
.tt-campo textarea { resize: vertical; }
.tt-campo input:focus, .tt-campo select:focus, .tt-campo textarea:focus { border-color: var(--jeans); outline: 3px solid var(--jeans-nevoa); outline-offset: 0; }
[aria-invalid="true"] { border-color: var(--alerta) !important; }
.tt-erro { color: var(--alerta); font-size: .88rem; font-weight: 600; }
.tt-isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tt-recibo { padding: 14px 16px 16px; border-radius: 14px; background: var(--manteiga-leve); border-left: 6px solid var(--manteiga); }
.tt-recibo__titulo { margin: 0 0 6px; font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tatu); }
.tt-recibo__texto { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: .95rem; color: var(--tatu-noite); }
.tt-pedido__site { display: grid; gap: 16px; }
.tt-pedido__site summary { cursor: pointer; font-weight: 700; color: var(--jeans); padding: 4px 0; }
details.tt-pedido__site[open] summary { margin-bottom: 4px; }
.tt-aceite { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start; font-size: .93rem; }
.tt-aceite input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--jeans); }
.tt-aceite .tt-erro { grid-column: 2; }
.tt-pedido__nota { margin: 0; text-align: center; font-size: .84rem; color: var(--apagado); }

/* identidade */
.tt-identidade { background: var(--jeans-noite); color: #e8eef7; }
.tt-identidade__lista { display: grid; gap: 14px 28px; margin: 0 auto; padding: 22px 0; }
.tt-identidade__lista dt { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--manteiga); }
.tt-identidade__lista dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }

/* seções */
.tt-secao { padding: 72px 0; }
.tt-sobretitulo { margin-bottom: 8px; font-weight: 700; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tatu); }
.tt-sobretitulo--claro { color: var(--manteiga); }
.tt-secao__apoio { color: var(--apagado); }
.tt-vitrine { display: grid; gap: 18px; margin-top: 26px; }
.tt-produto { display: grid; grid-template-columns: 110px 1fr; gap: 22px; align-items: center; padding: 22px; border-radius: var(--raio-maior); background: #fff; border: 1px solid var(--risco); }
.tt-produto__desenho { width: 110px; height: auto; }
.tt-produto p { color: var(--apagado); }
.tt-produto a { font-weight: 700; }
@media (max-width: 26.25em) {
  .tt-produto { grid-template-columns: 1fr; text-align: center; }
  .tt-produto__desenho { margin-inline: auto; }
}

.tt-secao--duracao { background: var(--jeans-noite); color: #eef2f8; }
.tt-secao--duracao h2 { color: #fff; }
.tt-secao--duracao .tt-sobretitulo { color: var(--manteiga); }
.tt-duracao { display: grid; gap: 30px; align-items: center; }
.tt-duracao__aviso { font-size: .9rem; color: #c3cfe0; }
.tt-duracao__conta { display: grid; gap: 18px; padding: 24px; border-radius: var(--raio-maior); background: #fff; color: var(--tinta); }
.tt-duracao__campos { display: grid; gap: 14px; }
.tt-duracao__resultado { display: grid; gap: 2px; padding: 16px 18px; border-radius: 16px; background: var(--manteiga-leve); }
.tt-duracao__dias { font: 400 1.9rem/1.1 var(--titulo); color: var(--jeans-noite); }
.tt-duracao__data { color: var(--tatu-noite); font-weight: 600; }
.tt-duracao__acoes { display: flex; flex-wrap: wrap; gap: 10px; }

.tt-secao--passos { background: var(--linho-fundo); }
.tt-passos { display: grid; gap: 16px; margin-top: 28px; counter-reset: passo; }
.tt-passo { position: relative; padding: 26px 22px 20px; border-radius: 26px 26px 14px 14px; background: #fff; border-top: 8px solid var(--tatu); counter-increment: passo; }
.tt-passo::before { content: counter(passo); position: absolute; top: -22px; left: 20px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--manteiga); color: var(--jeans-noite); font: 400 1.25rem var(--titulo); border: 3px solid var(--linho-fundo); }
.tt-passo p { margin: 0; color: var(--apagado); }

.tt-cartoes { display: grid; gap: 16px; margin-top: 26px; }
.tt-cartao { padding: 22px; border-radius: var(--raio); background: #fff; border: 1px solid var(--risco); box-shadow: inset 0 -5px 0 var(--jeans-nevoa); }
.tt-cartao p { margin: 0; color: var(--apagado); }

.tt-loja { display: grid; gap: 26px; align-items: center; }
.tt-loja__endereco { display: flex; gap: 10px; font-weight: 700; color: var(--tatu-noite); }
.tt-loja__endereco .tt-icone { margin-top: 3px; color: var(--jeans); }
.tt-mapa { display: grid; place-items: center; gap: 12px; min-height: 260px; padding: 24px; border-radius: var(--raio-maior); text-align: center; color: #fff;
  background: linear-gradient(160deg, rgb(38 57 90 / .92), rgb(61 91 138 / .86)), repeating-linear-gradient(45deg, #2f4870 0 12px, #35507b 12px 24px) var(--jeans-noite); }
.tt-mapa p { margin: 0; }
.tt-mapa a { color: var(--manteiga); font-weight: 700; }
.tt-mapa--aberto { padding: 0; overflow: hidden; background: var(--jeans-nevoa); }
.tt-mapa iframe { width: 100%; height: 340px; border: 0; }

.tt-secao--duvidas { background: #fff; }
.tt-duvida { border-bottom: 1px solid var(--risco); }
.tt-duvida summary { display: flex; justify-content: space-between; gap: 18px; padding: 18px 2px; cursor: pointer; list-style: none; font-weight: 700; }
.tt-duvida summary::-webkit-details-marker { display: none; }
.tt-duvida summary::after { content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--linho) center / 12px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%233d5b8a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); transition: transform .2s ease; }
.tt-duvida[open] summary::after { transform: rotate(45deg); }
.tt-duvida p { padding: 0 2px 18px; margin: 0; color: var(--apagado); }

.tt-final { padding: 72px 0; background: var(--jeans-noite); color: #e8eef7; }
.tt-final h2 { color: #fff; }
.tt-final__grade { display: grid; gap: 30px; align-items: start; }
.tt-final__contatos { display: grid; gap: 10px; margin-top: 18px; }
.tt-final__contatos li > a, .tt-final__contatos li > span { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgb(255 255 255 / .07); color: #fff; text-decoration: none; }
.tt-final__contatos a:hover { background: rgb(255 255 255 / .13); }
.tt-final__contatos .tt-icone { color: var(--manteiga); }
.tt-final__contatos li > * > span { display: grid; font-size: .82rem; color: #c3cfe0; }
.tt-final__contatos b { font-size: 1rem; color: #fff; overflow-wrap: anywhere; }

/* rodapé */
.tt-rodape { background: var(--tatu-noite); color: #e9dfd4; font-size: .93rem; padding-bottom: 24px; }
.tt-rodape a { color: #fff; }
.tt-rodape__grade { display: grid; gap: 24px; padding: 40px 0 26px; }
.tt-rodape__nome { display: flex; align-items: center; gap: 10px; font: 400 1.2rem var(--titulo); color: #fff; }
.tt-rodape__marca { width: 32px; height: 32px; }
.tt-rodape__titulo { margin-bottom: 8px; font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--manteiga); }
.tt-rodape li { margin-bottom: 6px; }
.tt-rodape__cookies { padding: 0; border: 0; background: none; color: #fff; text-decoration: underline; cursor: pointer; }
.tt-rodape__fim { margin: 0 auto; padding-top: 18px; border-top: 1px solid rgb(233 223 212 / .2); font-size: .84rem; color: #cbbdae; }

/* aviso de cookies e atalhos */
.tt-cookies { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 16px; }
.tt-cookies__caixa { width: auto; max-width: 560px; margin: 0; padding: 18px 20px; border-radius: 18px; background: #fff; box-shadow: var(--sombra), 0 0 0 1px var(--risco); }
.tt-cookies__caixa p { font-size: .93rem; }
.tt-cookies__botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tt-atalhos { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: #fff; box-shadow: 0 -6px 20px -10px rgb(38 57 90 / .45); transition: transform .25s ease; }
.tt-atalhos a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; border-radius: 12px; font-weight: 700; text-decoration: none; background: var(--jeans-nevoa); color: var(--jeans-noite); }
.tt-atalhos .tt-atalhos__zap { background: var(--zap); color: #fff; }
.tt-atalhos .tt-atalhos__pedir { background: var(--manteiga); color: var(--jeans-noite); }
.tt-atalhos--fora { transform: translateY(110%); }
body:has(.tt-atalhos) .tt-rodape { padding-bottom: 92px; }

/* páginas de texto e de aviso */
.tt-legal, .tt-feito { padding: 56px 0 72px; }
.tt-legal h2 { margin-top: 1.6em; font-size: 1.4rem; }
.tt-legal__apoio, .tt-feito__apoio { font-size: 1.08rem; color: var(--apagado); }
.tt-feito .tt-recibo { margin: 22px 0; }
.tt-feito__acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.tt-feito__links { display: grid; gap: 8px; margin-top: 12px; }
.tt-feito__links a { font-weight: 700; }

@media (min-width: 43.75em) {
  .tt-pedido__par { grid-template-columns: 1fr 1fr; }
  .tt-identidade__lista { grid-template-columns: repeat(2, 1fr); }
  .tt-cartoes { grid-template-columns: repeat(2, 1fr); }
  .tt-passos { grid-template-columns: repeat(3, 1fr); }
  .tt-rodape__grade { grid-template-columns: 1.4fr 1fr 1fr; }
  .tt-cookies { left: 24px; right: auto; bottom: 24px; }
}
@media (min-width: 62.5em) {
  .tt-abertura { padding: 64px 0 80px; }
  .tt-abertura__grade { grid-template-columns: 1.08fr .92fr; align-items: start; }
  .tt-identidade__lista { grid-template-columns: 1.1fr .8fr 1.6fr 1.5fr; }
  .tt-cartoes { grid-template-columns: repeat(4, 1fr); }
  .tt-duracao { grid-template-columns: 1fr 1fr; }
  .tt-loja { grid-template-columns: 1fr 1.1fr; }
  .tt-final__grade { grid-template-columns: .8fr 1.2fr; }
  .tt-vitrine { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
  .tt-atalhos { display: none; }
  body:has(.tt-atalhos) .tt-rodape { padding-bottom: 24px; }
}
@media (min-width: 561px) and (max-width: 999px) {
  body:has(.tt-atalhos) .tt-cookies { bottom: 88px; }
}
@media (max-width: 1080px) { .tt-topo__menu { display: none; } }
@media screen and (max-width: 560px) {
  .tt-miolo, .tt-miolo--estreito { width: calc(100% - 32px); }
  .tt-topo__faixa { min-height: 66px; gap: 10px; }
  .tt-marca__desenho { width: 38px; height: 38px; }
  .tt-marca__nome { font-size: 1.08rem; }
  .tt-marca__nome small { font-size: .68rem; }
  .tt-topo__contato .tt-botao span { display: none; }
  .tt-marca__nome small { letter-spacing: .02em; }
  body:has(.tt-atalhos) .tt-cookies { bottom: 84px; }
  .tt-topo__contato .tt-botao { min-height: 42px; padding-inline: 12px; }
  .tt-abertura { padding-top: 30px; }
  .tt-abertura__cartao, .tt-final__cartao { padding: 28px 16px 20px; }
  .tt-secao, .tt-final { padding: 56px 0; }
}
@media (prefers-reduced-motion: reduce) { .tt-botao, .tt-atalhos, .tt-duvida summary::after { transition: none; } }
@media print {
  .tt-topo, .tt-atalhos, .tt-cookies, .tt-abertura__cartao, .tt-final__cartao, .tt-cintas { display: none !important; }
}