/* Landing e páginas legais da Loja Minha (spec da landing, seções 4 e 8): direção C, abertura escura e resto claro.
   Tokens do painel (creme, superfície, borda, texto, verde petróleo) mais os da abertura. Sem o Pico. */
:root {
  --site-fundo: #f7f5f0;
  --site-superficie: #fffdf8;
  --site-borda: #e7e2d8;
  --site-texto: #1c1917;
  --site-texto-2: #57534e;
  --site-destaque: #0f766e;
  --site-destaque-forte: #115e59;
  --site-escuro: #0c2724;
  --site-escuro-2: #0a1d1b;
  --site-agua: #5eead4;
  --site-agua-texto: #b8cfcb;
  --site-erro: #b91c1c;
  --site-raio: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body.site { margin: 0; background: var(--site-fundo); color: var(--site-texto); font: 400 1rem/1.55 "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; }
:where(.site) :where(h1, h2, h3, p) { margin: 0; }
:where(.site) a { color: inherit; }
.site code { font-size: .92em; padding: .05em .35em; border-radius: 6px; background: color-mix(in srgb, var(--site-destaque) 10%, transparent); }
.site-largura { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* Botões */
.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border: 1px solid transparent;
  border-radius: 999px; background: var(--site-destaque); color: #fff; font-weight: 600; font-size: .95rem; text-decoration: none;
  cursor: pointer; transition: background-color .15s; }
.botao:hover { background: var(--site-destaque-forte); }
.botao:focus-visible, .site a:focus-visible, .site summary:focus-visible { outline: 3px solid var(--site-destaque); outline-offset: 2px; }
.abertura a:focus-visible, .abertura .botao:focus-visible, .plano--destaque .botao:focus-visible { outline-color: var(--site-agua); }  /* no fundo escuro, o verde-água aparece */
.botao--pequeno { min-height: 38px; padding: 0 16px; font-size: .88rem; }
.botao--contorno { background: transparent; border-color: color-mix(in srgb, #fff 45%, transparent); color: #f1f5f4; }
.botao--contorno:hover { background: color-mix(in srgb, #fff 10%, transparent); }
.botao--contorno-escuro { background: transparent; border-color: var(--site-destaque); color: var(--site-destaque); }
.botao--contorno-escuro:hover { background: color-mix(in srgb, var(--site-destaque) 8%, transparent); }

/* Topo */
.site-topo { padding: 16px 0; }
.site-topo--claro { border-bottom: 1px solid var(--site-borda); background: var(--site-superficie); }
.site-nav { display: flex; align-items: center; gap: 24px; }
.site-marca { display: block; text-decoration: none; }
.site-marca img { display: block; height: 32px; width: auto; }
.site-rodape__logo { display: block; height: 24px; width: auto; }
.site-nav nav { display: flex; gap: 22px; margin-left: auto; font-size: .92rem; }
.site-nav nav a { text-decoration: none; color: var(--site-texto-2); }
.site-nav nav a:hover { color: var(--site-texto); }

/* Abertura escura */
.abertura { background: radial-gradient(120% 90% at 80% 0%, #145e57 0%, var(--site-escuro) 55%, var(--site-escuro-2) 100%);
  color: #f1f5f4; padding-bottom: 72px; overflow: hidden; }
.abertura .site-marca { color: #fff; }
.abertura .site-nav nav a { color: var(--site-agua-texto); }
.abertura .site-nav nav a:hover { color: #fff; }
.abertura .botao { background: var(--site-agua); color: var(--site-escuro-2); }
.abertura .botao:hover { background: #99f6e4; }
.abertura .botao--contorno { background: transparent; color: #f1f5f4; }
.abertura__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 48px; padding-top: 40px; }
.abertura h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.05; letter-spacing: -.03em; font-weight: 800; }
.abertura h1 em { font-style: normal; color: var(--site-agua); }
.abertura__texto { margin-top: 18px; max-width: 34rem; color: var(--site-agua-texto); font-size: 1.1rem; }
.abertura__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.abertura__exemplo { display: inline-block; margin-top: 18px; color: var(--site-agua-texto); font-size: .92rem; }
.abertura__prints { position: relative; padding: 0 0 28px 44px; }
.abertura__painel { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.abertura__celular { position: absolute; left: 0; bottom: 0; width: 26%; height: auto; border: 5px solid var(--site-escuro-2);
  border-radius: 18px; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }

/* Seções claras */
.secao { padding: 72px 0; }
.secao--superficie { background: var(--site-superficie); border-top: 1px solid var(--site-borda); border-bottom: 1px solid var(--site-borda); }
.secao h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; letter-spacing: -.02em; margin-bottom: 28px; }
.recursos, .passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; margin: 0; padding: 0; list-style: none; }
.recursos li { padding-left: 14px; border-left: 3px solid var(--site-destaque); color: var(--site-texto-2); }
.recursos strong, .passos strong { display: block; margin-bottom: 4px; color: var(--site-texto); font-size: 1.02rem; }
.passos { counter-reset: passo; }
.passos li { counter-increment: passo; color: var(--site-texto-2); }
.passos li::before { content: counter(passo); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px;
  border-radius: 50%; background: var(--site-escuro); color: var(--site-agua); font-weight: 700; }

/* Planos */
.planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.plano { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 28px 22px 24px; border: 1px solid var(--site-borda);
  border-radius: var(--site-raio); background: var(--site-superficie); }
.plano h3 { font-size: 1.05rem; }
.plano__preco { font-size: 2.1rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.plano__preco small { margin-left: 2px; font-size: .95rem; font-weight: 500; color: var(--site-texto-2); }
.plano__preco--texto { font-size: 1.5rem; }
.plano p:not(.plano__preco) { color: var(--site-texto-2); }
.plano .botao { margin-top: auto; }
.plano > p:last-of-type { margin-bottom: 16px; }
.plano--destaque { border-color: var(--site-escuro); background: var(--site-escuro); color: #f1f5f4; }
.plano--destaque .plano__preco small, .plano--destaque p:not(.plano__preco) { color: var(--site-agua-texto); }
.plano--destaque .botao { background: var(--site-agua); color: var(--site-escuro-2); }
.plano__selo { position: absolute; top: -11px; left: 22px; padding: 2px 10px; border-radius: 999px; background: var(--site-agua);
  color: var(--site-escuro-2); font-size: .75rem; font-weight: 700; }
.planos__nota { margin-top: 20px; color: var(--site-texto-2); font-size: .92rem; }
.planos__sem-tabela { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 20px; font-size: 1.1rem; }

/* Personalizado */
.personalizado { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.personalizado h2 { margin-bottom: 12px; }
.personalizado > div > p { color: var(--site-texto-2); }
.personalizado > div > p + p { margin-top: 12px; }

/* Formulário do Personalizado */
.contato { display: grid; gap: 14px; padding: 24px; border: 1px solid var(--site-borda); border-radius: var(--site-raio);
  background: var(--site-fundo); }
.contato__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.contato label { display: grid; align-content: start; gap: 6px; font-size: .9rem; font-weight: 600; }
.contato input, .contato select, .contato textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--site-borda);
  border-radius: 10px; background: var(--site-superficie); color: var(--site-texto); font: 400 1rem/1.4 "Inter", system-ui, sans-serif; }
.contato input:focus, .contato select:focus, .contato textarea:focus { outline: 3px solid color-mix(in srgb, var(--site-destaque) 35%, transparent);
  border-color: var(--site-destaque); }
.contato [aria-invalid="true"] { border-color: var(--site-erro); }
.contato .botao { justify-self: start; }
.contato__nota { color: var(--site-texto-2); font-size: .85rem; }
.contato--enviado { color: var(--site-destaque-forte); font-weight: 600; }
.erro { color: var(--site-erro); font-size: .85rem; font-weight: 500; }
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Perguntas */
.perguntas { max-width: 820px; }  /* dentro de .site-largura: alinhada às outras seções */
.perguntas details { border-bottom: 1px solid var(--site-borda); }
.perguntas summary { padding: 18px 0; font-weight: 600; cursor: pointer; }
.perguntas details p { padding: 0 0 18px; color: var(--site-texto-2); }

/* Termos e privacidade */
.legal { max-width: 800px; padding-top: 48px; padding-bottom: 72px; }
.legal h1 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); line-height: 1.15; letter-spacing: -.02em; }
.legal__data { margin-top: 8px; color: var(--site-texto-2); font-size: .9rem; }
.legal h2 { margin-top: 36px; margin-bottom: 10px; font-size: 1.2rem; line-height: 1.3; }
.legal p, .legal li { color: #3a3531; }
.legal p + p { margin-top: 10px; }
.legal ul { margin: 0; padding-left: 20px; }
.legal li + li { margin-top: 6px; }
.legal a { color: var(--site-destaque); }
.legal__tabela { overflow-x: auto; }
.legal table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .92rem; }
.legal th, .legal td { padding: 10px 12px; border-bottom: 1px solid var(--site-borda); text-align: left; vertical-align: top; }
.legal th { background: var(--site-superficie); }

/* Rodapé */
.site-rodape { padding: 36px 0; border-top: 1px solid var(--site-borda); background: var(--site-superficie); color: var(--site-texto-2);
  font-size: .88rem; }
.site-rodape__linha { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
.site-rodape strong { color: var(--site-texto); }
.site-rodape nav { display: flex; flex-wrap: wrap; gap: 20px; }
.site-rodape__marca { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.site-rodape__nuvark { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.site-rodape__nuvark img { display: block; width: auto; height: 14px; }

/* Banner rotativo da home (platform/partials/banners.html), proposta A: cartão dividido, texto à esquerda e desenho à
   direita; o slide de tom "escuro" destaca a landing page. Os controles ficam por cima, no rodapé da coluna do texto. */
.banners { padding-top: 32px; --banners-controles: 92px; }
.banners__caixa { position: relative; }
.banners__trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--site-raio);
  border: 1px solid var(--site-borda); }
.banners__trilho::-webkit-scrollbar { display: none; }
.banners__item { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--site-superficie); }
.banners__texto { display: grid; align-content: start; justify-items: start; gap: 12px; padding: 40px 48px var(--banners-controles); }
.banners__selo { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--site-destaque); }
.banners__selo .icon { width: 18px; height: 18px; }
.banners__texto h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.15; letter-spacing: -.02em; font-weight: 800; }
.banners__texto p:not(.banners__selo) { color: var(--site-texto-2); max-width: 44ch; }
.banners__texto .botao { margin-top: 4px; }
.banners__visual { display: grid; place-items: center; padding: 28px; background: #eaf3f0; }
.banners__item[data-tone="escuro"] { background: var(--site-escuro); color: #fff; }
.banners__item[data-tone="escuro"] .banners__selo { color: var(--site-agua); }
.banners__item[data-tone="escuro"] .banners__texto p:not(.banners__selo) { color: var(--site-agua-texto); }
.banners__item[data-tone="escuro"] .botao { background: var(--site-agua); color: var(--site-escuro-2); }
.banners__item[data-tone="escuro"] .botao:hover { background: #99f6e4; }
.banners__item[data-tone="escuro"] .banners__visual { background: #123a35; }
.banners__controles { position: absolute; left: 68px; right: calc(50% + 48px); bottom: 24px; display: flex; align-items: center; gap: 8px;
  color: var(--site-texto); }  /* 20px do .site-largura + 48px de respiro: alinhado ao texto */
.banners[data-tone="escuro"] .banners__controles { color: #f1f5f4; }
.banners__botao { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent); background: transparent; color: inherit; }
.banners__botao .icon { width: 18px; height: 18px; }
.banners__pausa .icon { fill: currentColor; width: 14px; height: 14px; }
.banners__pausa .icon--play, .banners.is-paused .banners__pausa .icon--pause { display: none; }
.banners.is-paused .banners__pausa .icon--play { display: block; }
.banners__pontos { display: flex; align-items: center; }
.banners__pontos button { display: grid; place-items: center; width: 24px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.banners__pontos button::before { content: ""; width: 8px; height: 8px; border-radius: 999px;
  background: color-mix(in srgb, currentColor 30%, transparent); }
/* o ponto atual vira uma barra que enche em 6 s; ao terminar, o carousel.js passa para o próximo slide */
.banners__pontos button[aria-current="true"] { width: 52px; }
.banners__pontos button[aria-current="true"]::before { width: 40px; background-color: color-mix(in srgb, currentColor 18%, transparent);
  background-image: linear-gradient(var(--banners-barra, var(--site-destaque)), var(--banners-barra, var(--site-destaque)));
  background-repeat: no-repeat; background-size: 0% 100%; animation: banners-progresso 6s linear forwards; }
.banners[data-tone="escuro"] { --banners-barra: var(--site-agua); }
/* pausa: mouse em cima (só onde há mouse: no toque o :hover fica preso), foco do teclado em algo do banner que não seja
   o próprio botão de pausa, ou o botão apertado */
@media (hover: hover) { .banners:hover .banners__pontos button::before { animation-play-state: paused; } }
.banners:has(:focus-visible:not(.banners__pausa)) .banners__pontos button::before,
.banners.is-paused .banners__pontos button::before { animation-play-state: paused; }
@keyframes banners-progresso { to { background-size: 100% 100%; } }
@media (prefers-reduced-motion: reduce) {  /* sem troca automática: a barra fica cheia e a pausa some */
  .banners__pontos button[aria-current="true"]::before { animation: none; background-size: 100% 100%; }
  .banners__pausa { display: none; }
}
.banners__contador { margin-left: auto; font-size: .85rem; font-weight: 500; color: color-mix(in srgb, currentColor 75%, transparent); }
.banners button:focus-visible { outline: 3px solid var(--site-destaque); outline-offset: 2px; }
.banners[data-tone="escuro"] button:focus-visible, .banners__item[data-tone="escuro"] a:focus-visible { outline-color: var(--site-agua); }

/* desenhos ilustrativos (platform/partials/banner_visuals.html) */
.mini { width: min(320px, 100%); display: grid; gap: 10px; padding: 18px 20px; border: 1px solid var(--site-borda); border-radius: 14px;
  background: #fff; color: var(--site-texto); box-shadow: 0 12px 32px rgba(12, 39, 36, .12); font-size: .875rem; }
.mini p { margin: 0; }
.mini__topo, .mini__linha { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mini__linha { color: var(--site-texto-2); }
.mini__linha--total { padding-top: 10px; border-top: 1px solid var(--site-borda); color: var(--site-texto); font-weight: 700; }
.mini__destaque { color: var(--site-destaque); font-weight: 700; }
.mini__selo { display: inline-flex; align-items: center; gap: 4px; justify-self: start; padding: 3px 10px; border-radius: 999px;
  background: #ccfbf1; color: var(--site-destaque-forte); font-size: .75rem; font-weight: 700; }
.mini__selo .icon { width: 12px; height: 12px; stroke-width: 3; }
.mini__legenda { color: var(--site-texto-2); font-size: .8rem; }
.mini__opcao { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--site-borda); border-radius: 10px; }
.mini__opcao::before { content: ""; flex-shrink: 0; width: 14px; height: 14px; box-sizing: border-box; border: 2px solid #a8a29e; border-radius: 50%; }
.mini__opcao--escolhida { border: 2px solid var(--site-destaque); }
.mini__opcao--escolhida::before { border: 4px solid var(--site-destaque); }
.mini__opcao > span { display: grid; flex-grow: 1; }
.mini__opcao small { color: var(--site-texto-2); font-size: .75rem; }
.mini--navegador { padding: 0; gap: 0; overflow: hidden; width: min(340px, 100%); }
.mini__barra { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #f5f3ee; border-bottom: 1px solid var(--site-borda); }
.mini__bolinhas { width: 34px; height: 8px; background: radial-gradient(circle, #d6d0c4 4px, transparent 4.5px) 0 0 / 13px 8px repeat-x; }
.mini__endereco { display: inline-flex; flex-grow: 1; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--site-borda);
  border-radius: 999px; background: #fff; font-weight: 600; font-size: .8rem; }
.mini__endereco .icon { width: 12px; height: 12px; color: var(--site-destaque); stroke-width: 2.5; }
.mini__vitrine { display: grid; gap: 10px; padding: 14px; }
.mini__logo { width: 90px; height: 12px; border-radius: 6px; background: var(--site-texto); }
.mini__produtos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mini__produtos span { height: 74px; border-radius: 8px; background: linear-gradient(#eaf3f0 0 58px, transparent 58px),
  linear-gradient(#e7e2d8, #e7e2d8) 0 64px / 80% 7px no-repeat; }
.mini-fluxo { display: flex; align-items: center; gap: 12px; color: var(--site-agua); }
.mini-fluxo > .icon { flex-shrink: 0; width: 28px; height: 28px; stroke-width: 2.5; }
.mini--estreito { width: 168px; padding: 12px; gap: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
.mini--estreito .mini__legenda { font-size: .65rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mini--estreito small { color: var(--site-texto-2); font-size: .75rem; }
.mini--estreito .mini__selo { font-size: .7rem; }
.mini__foto { height: 60px; border-radius: 8px; background: #7c4a2d; }
.mini__titulo { font-size: 1rem; font-weight: 800; line-height: 1.2; }
.mini__botao { display: grid; place-items: center; min-height: 30px; border-radius: 999px; background: var(--site-destaque); color: #fff;
  font-size: .75rem; font-weight: 700; }
.mini__botao--escuro { background: var(--site-texto); }

#pedido h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.2; letter-spacing: -.02em; margin-bottom: 12px; }

@media (max-width: 900px) {
  /* tablet e celular: uma coluna, o desenho em cima e menor, o texto embaixo; os controles na largura do cartão, sem
     setas (dá para arrastar): na metade do cartão eles não cabem abaixo de 900 px */
  .banners { --banners-controles: 84px; }
  .banners__item { grid-template-columns: minmax(0, 1fr); }
  .banners__visual { order: -1; padding: 20px 12px; }
  .banners__visual > * { zoom: .82; }
  .banners__texto { padding: 24px 20px var(--banners-controles); }
  .banners__controles { left: 40px; right: 40px; bottom: 20px; }
  .banners__seta { display: none; }
  .abertura__grade, .personalizado { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .abertura__prints { padding-left: 28px; }
  .recursos, .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mini--estreito { width: 132px; }  /* os dois cartões e a seta cabem em 320 px */
  .mini-fluxo { gap: 8px; }
  .site-nav nav { display: none; }
  .site-nav .botao { margin-left: auto; }
  .site-marca img { height: 28px; }
  .secao { padding: 52px 0; }
  .recursos, .passos { grid-template-columns: minmax(0, 1fr); }
  .contato__grade { grid-template-columns: minmax(0, 1fr); }
  .abertura__celular { width: 30%; border-width: 4px; border-radius: 14px; }
}