/* LUMIÈRE · base.css
 * Vale para todas as telas: os tokens da direção nova (BRIEF, "DIREÇÃO NOVA (30/10/2026, manhã)": loja
 * comercial no padrão da Donna Carioca, com a paleta da Lumière como o site da LT Beauty), o reset mínimo,
 * o foco de teclado e as peças de tipo e de ação de toda tela.
 * As peças comuns (barra de vantagens, cabeçalho, menu, busca, sacola, rodapé, cartão) ficam em comum.css;
 * o que é só de 641 px para cima, em largo.css; o que é só até 640 px, em celular.css.
 *
 * Contraste calculado (WCAG 2.1, texto pequeno pede 4,5:1):
 *   café #2A1F19: 15,60 no papel · 12,78 no nude · 12,27 no pêssego · 16,05 no branco
 *   secundário #6B5F57: 6,00 no papel · 4,92 no nude · 4,72 no pêssego
 *   cobre profundo #B65D37: 4,43 no papel (só texto grande, 24 px ou 19 px em negrito) · 4,56 com texto
 *     branco por cima (botão "Levar os três", contador da sacola)
 *   cobre #D27447: 3,22 no papel, só elemento gráfico (botão redondo da sacola, ícone branco 3,32:1)
 *   creme #FBF2E7 no café do rodapé: 14,49 · cobre claro #E39466 no café: 6,64 */

:root {
  /* ---------- cores da marca (manual) e da direção nova ---------- */
  --papel: #FFFBF8;           /* fundo da página: quase branco quente */
  --nude: #F2E3D5;            /* faixas, barra de vantagens, fundo de card */
  --pessego: #F7DCCB;         /* faixas e fundo de card (alternado com o nude) */
  --branco: #FFFFFF;          /* mini card do "Assista e compre", botão claro do banner */
  --cobre-claro: #E39466;     /* detalhe sobre o café do rodapé */
  --cobre: #D27447;           /* botão redondo da sacola e detalhes (só gráfico) */
  --cobre-profundo: #B65D37;  /* segunda linha dos títulos de banner (texto grande); fundo do botão cobre */
  --cobre-texto: #A85531;     /* cobre para texto pequeno (item ativo do menu, rótulo do produto): 5,09:1 no papel */
  --chocolate: #3B2B21;
  --cafe: #2A1F19;            /* todo texto sobre fundo claro; fundo do rodapé */
  --creme: #FBF2E7;           /* texto sobre o café */
  --tinta: var(--cafe);
  --tinta-2: #6B5F57;         /* texto secundário */
  --linha: rgb(42 31 25 / .14); /* fios de 1 px */
  --assinatura: var(--cobre-profundo);
  --erro: #A3261B;            /* 6,9:1 no papel, sempre com o ícone circle-alert */
  --foto-produto: #F7F1EC;    /* o fundo das 53 fotos de produto (quadradas, sem borda: montar-packshots.mjs) */
  --placa: var(--foto-produto); /* fundo de TODO card de produto e de categoria: a mesma cor da foto, sem faixa */
  --rolagem-polegar: var(--cobre-profundo); /* barra de rolagem fina do computador (reset mínimo, mais abaixo) */
  --rolagem-polegar-hover: #A45231;         /* o mesmo escurecido do hover do botão cobre */
  --rolagem-trilho: var(--papel);           /* some no fundo da página */

  /* ---------- as seis coleções da loja editorial: agora na paleta quente (nada de azul, turquesa ou verde).
   * As páginas internas ainda usam estes nomes até ganharem o layout novo; todas viram nude, pêssego ou
   * creme, com tinta café. ---------- */
  --luz-primeira-luz: var(--nude);
  --luz-primeira-luz-tinta: var(--cafe);
  --luz-primeira-luz-acento: var(--cafe);
  --luz-reflexo: var(--pessego);
  --luz-reflexo-tinta: var(--cafe);
  --luz-reflexo-acento: var(--cafe);
  --luz-hora-dourada: var(--nude);
  --luz-hora-dourada-tinta: var(--cafe);
  --luz-hora-dourada-acento: var(--cafe);
  --luz-halo: var(--pessego);
  --luz-halo-tinta: var(--cafe);
  --luz-halo-acento: var(--cafe);
  --luz-luz-de-vela: var(--nude);
  --luz-luz-de-vela-tinta: var(--cafe);
  --luz-luz-de-vela-acento: var(--cafe);
  --luz-luz-baixa: var(--pessego);
  --luz-luz-baixa-tinta: var(--cafe);
  --luz-luz-baixa-acento: var(--cafe);

  /* ---------- uma família só: Montserrat de 400 a 700 (fontes.css; "Reserva" = Arial com a métrica
   * ajustada, para a troca não empurrar o layout). Os nomes antigos apontam para ela. ---------- */
  --f-texto: "Montserrat", "Montserrat Reserva", Arial, sans-serif;
  --f-display: var(--f-texto);
  --f-mono: var(--f-texto);
  /* só no banner "Capa" da home: a palavra gigante (Light 300) e a nota da etiqueta (itálico 400) */
  --f-serifa: "Cormorant Garamond", "Cormorant Garamond Reserva", "Times New Roman", serif;

  /* ---------- escala ---------- */
  --t-micro: 11px;       /* rótulo em caixa alta (KIT PRONTO), 600, espaço .14em */
  --t-micro-2: 12px;
  --t-mono: 13px;
  --t-botao: 15px;       /* botão em pílula, 600, sem caixa alta */
  --t-nota: 13px;
  --t-erro: 14px;
  --t-preco: 18px;       /* preço em negrito nos cards */
  --t-leitura: 16px;
  --t-campo: 16px;       /* campo de formulário: 16 px fixo (o iPhone dá zoom abaixo disso) */
  --t-nome: clamp(22px, 1.1rem + .8vw, 28px);
  --t-secao: clamp(22px, 1rem + 1.2vw, 34px);       /* ESCOLHIDOS PARA VOCÊ, ASSISTA E COMPRE */
  --t-banner: clamp(34px, 1.2rem + 3.6vw, 64px);    /* título de banner em duas cores */
  --t-numero: clamp(40px, 6vw, 72px);
  --t-giga: var(--t-numero);
  --t-giga-max: var(--t-numero);

  --e-micro: .14em;
  --e-micro-2: .08em;
  --e-mono: 0;
  --e-giga: -.02em;
  --entrelinha-leitura: 1.55;
  --entrelinha-nota: 1.45;
  --entrelinha-nome: 1.15;
  --entrelinha-giga: 1;
  --leitura-max: 68ch;

  /* ---------- espaçamento: base de 4 px ---------- */
  --e-4: 4px;
  --e-8: 8px;
  --e-12: 12px;
  --e-16: 16px;
  --e-24: 24px;
  --e-32: 32px;
  --e-48: 48px;
  --e-64: 64px;
  --e-96: 96px;
  --e-128: 128px;
  --e-160: 160px;
  --respiro-secao: clamp(48px, 6vw, 88px);
  --respiro-bloco: clamp(24px, 4vw, 48px);
  --gutter-celular: 16px;

  /* ---------- grade ---------- */
  --grade-colunas: 12;
  --grade-vao: 24px;
  --grade-sangria-min: 32px;

  /* ---------- medidas fixas ---------- */
  --altura-vantagens: 40px;
  --altura-cabecalho: 96px;
  --altura-aviso: 32px;
  --altura-botao: 48px;
  --toque: 44px;              /* menor alvo tocável */
  --gaveta-sacola: 440px;
  --icone: 22px;
  --icone-traco: 1.5;

  /* ---------- formas: pílula nos botões, raio de 12 a 16 px nos cards ---------- */
  --raio: 12px;               /* foto de produto, campo, aviso */
  --raio-card: 16px;          /* cards de categoria, banner de kit, reels, inspire-se */
  --raio-pilula: 999px;       /* botões */
  --raio-amostra: 50%;
  --sombra-leve: 0 6px 20px rgb(42 31 25 / .08);

  /* ---------- movimento ---------- */
  --d-micro: 150ms;
  --d-hover: 220ms;
  --d-painel: 300ms;
  --d-luz: 600ms;
  --d-entrada: 600ms;
  --e-saida: cubic-bezier(.2, .7, 0, 1);
  --e-gaveta: cubic-bezier(.32, .72, 0, 1);
  --e-luz: cubic-bezier(.45, 0, .55, 1);

  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-micro: 0ms;
    --d-hover: 0ms;
    --d-painel: 0ms;
    --d-luz: 0ms;
    --d-entrada: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    animation-timeline: auto !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}
body {
  margin: 0;
  overflow-x: clip;
  min-height: 100svh;
  background: var(--papel);
  color: var(--tinta);
  font: 400 var(--t-leitura) / var(--entrelinha-leitura) var(--f-texto);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}
/* barra de rolagem fina na cor da marca, só no computador (mouse ou trackpad); o celular segue com a barra
 * sobreposta do sistema. Só CSS, nada a mais para baixar.
 * Chrome, Edge e Safari: ::-webkit-scrollbar (8 px, cantos redondos, mais escura no hover, sem setas). Com
 * scrollbar-color o Chrome desenha o hover dele (clareia) e põe setas, por isso o padrão fica só para quem
 * não tem ::-webkit-scrollbar (Firefox): scrollbar-color herda para os roladores internos e scrollbar-width
 * vai em todos com especificidade zero. Os roladores já escondidos (filtros, prateleiras, trilhos: com
 * scrollbar-width: none e .x::-webkit-scrollbar { display: none }) continuam escondidos nos dois caminhos. */
@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar { width: 8px; height: 8px; background: var(--rolagem-trilho); }
  ::-webkit-scrollbar-thumb { background: var(--rolagem-polegar); background-clip: padding-box; border: 1px solid transparent; border-radius: 8px; }
  ::-webkit-scrollbar-thumb:hover { background-color: var(--rolagem-polegar-hover); }
  ::-webkit-scrollbar-button { display: none; }
  ::-webkit-scrollbar-corner { background: var(--rolagem-trilho); }
  @supports not selector(::-webkit-scrollbar) {
    html { scrollbar-color: var(--rolagem-polegar) var(--rolagem-trilho); }
    :where(*) { scrollbar-width: thin; }
  }
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
:where(h1, h2, h3) { text-wrap: balance; }

.num, [data-num] { font-variant-numeric: tabular-nums lining-nums; }

/* foco de teclado: anel cobre de 2 px, 3 px afastado, que acompanha o raio do componente; link de texto
 * sem raio ganha cantos de 4 px (especificidade zero: o raio de cada componente vale por cima). Nunca removido. */
:focus-visible { outline: 2px solid var(--cobre-profundo); outline-offset: 3px; }
:where(a, summary, [tabindex]):focus-visible { border-radius: 4px; }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =====================================================================================================
 * Peças de tipo e de ação de toda tela
 * ===================================================================================================== */
.micro {
  font: 600 var(--t-micro) / 1.4 var(--f-texto);
  letter-spacing: var(--e-micro);
  text-transform: uppercase;
}
.mono { font: 400 var(--t-mono) / 1.5 var(--f-texto); font-variant-numeric: tabular-nums lining-nums; }
.nota { font: 400 var(--t-nota) / var(--entrelinha-nota) var(--f-texto); }
.titulo { font: 700 var(--t-nome) / var(--entrelinha-nome) var(--f-texto); letter-spacing: -.01em; text-wrap: balance; }

/* botão em pílula: café cheio com texto branco (16,05:1) */
.botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--altura-botao);
  padding: 0 28px;
  border: 0;
  border-radius: var(--raio-pilula);
  background: var(--tinta);
  color: var(--branco);
  font: 600 var(--t-botao) / 1 var(--f-texto);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--d-hover), color var(--d-hover), box-shadow var(--d-hover), translate var(--d-hover) var(--e-saida);
}
.botao:hover { background: var(--chocolate); }
.botao[aria-busy="true"] { opacity: .6; }
.botao:disabled, .botao[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.botao--largo { display: flex; width: 100%; }
.botao .num { padding-left: .35em; }
/* branco: o botão do banner ("Ver a seleção"), sobre foto */
.botao--branco { background: var(--branco); color: var(--tinta); box-shadow: var(--sombra-leve); }
.botao--branco:hover { background: var(--branco); translate: 0 -1px; box-shadow: 0 10px 26px rgb(42 31 25 / .14); }
/* cobre: "Levar os três" (cobre profundo com texto branco, 4,56:1) */
.botao--cobre { background: var(--cobre-profundo); color: var(--branco); }
.botao--cobre:hover { background: #A45231; }
/* sobre fundo escuro */
.botao--claro { background: var(--creme); color: var(--cafe); }
.botao--claro:hover { background: var(--branco); }
/* contorno: 1 px na tinta, sem fundo */
.botao--contorno { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1px currentColor; }
.botao--contorno:hover { background: color-mix(in srgb, var(--nude) 60%, transparent); }

/* link de texto: sublinhado cobre */
.link {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: 500 14px / 1.3 var(--f-texto);
  letter-spacing: 0;
  text-decoration: underline;
  text-decoration-color: var(--cobre);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
  transition: text-decoration-thickness var(--d-micro), text-underline-offset var(--d-micro);
}
.link:hover { text-decoration-thickness: 2.5px; }

/* botão de ícone: círculo de 44 px, ícone Lucide de traço 1,5 */
.botao-icone {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--toque);
  height: var(--toque);
  padding: 0;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  transition: border-color var(--d-micro), background-color var(--d-micro);
}
.botao-icone:hover { border-color: currentColor; }
.botao-icone:disabled { opacity: .35; cursor: not-allowed; }
.icone { flex: none; }

/* PARA DECIDIR: marcador discreto (contorno pontilhado fino, letra pequena em cinza), no máximo um por
 * bloco, sempre AO LADO de uma frase que já se sustenta sozinha (nunca no meio dela). Nunca vai ao ar:
 * AMBIENTE=loja trava a montagem. Na prévia fica escondido; aparece com ?decidir=1 (html.decidir-visivel,
 * script do <head>); a lista inteira está na prévia técnica. */
.decidir { display: none; }
html.decidir-visivel .decidir {
  display: inline-block;
  margin-inline: 4px;
  padding: 1px 6px;
  border: 1px dotted color-mix(in srgb, currentColor 60%, transparent);
  border-radius: 4px;
  background: none;
  color: var(--tinta-2);
  font: 500 10px / 1.35 var(--f-texto);
  letter-spacing: .02em;
  text-transform: none;
  vertical-align: middle;
  white-space: normal;
}

/* pular para o conteúdo (teclado) */
.pular {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 15px 18px;
  border-radius: var(--raio-pilula);
  background: var(--tinta);
  color: var(--branco);
  font: 600 14px / 1 var(--f-texto);
}
.pular:focus { top: 8px; }

html:not(.js) .so-js { display: none !important; }
/* hidden vale sempre (um .link, .botao ou flex no mesmo elemento não pode desfazer o hidden) */
[hidden] { display: none !important; }