/* Arquivo Olfativo · identidade "Laboratório": branco, verde-escuro, números em destaque, cor por acorde. */
:root {
  --fundo: #FFFFFF;
  --fundo-suave: #F4F8F6;
  --caixa: #EEF5F2;
  --linha: #DCE5E1;
  --tinta: #14332B;
  --tinta-2: #5B726B;
  --acento: #1F6B57;
  --acento-forte: #14332B;
  --raio: 10px;
  /* Projeção (cores da cartilha do dono): Íntima amarelo, Moderada verde, Forte azul, Enorme violeta;
     subníveis = mais claro (−) / base / mais escuro (+). O violeta é mais escuro que o azul para os dois não se
     confundirem no daltonismo (validate_palette: CVD e visão normal passam). */
  --nv-intima-menos: #F2D98A; --nv-intima: #E2B93B; --nv-intima-mais: #C99A1C;
  --nv-moderada-menos: #86CF98; --nv-moderada: #43A862; --nv-moderada-mais: #2D8549;
  --nv-forte-menos: #9CC4EE; --nv-forte: #5A9BE0; --nv-forte-mais: #2F74C4;
  --nv-enorme-menos: #9A78D0; --nv-enorme: #6A3BAE; --nv-enorme-mais: #4A2385;
  /* Fixação (cartilha do dono): azul-petróleo, do claro (dura pouco) ao escuro (Eterno). */
  --fx-muito-fraco: #A8E3EA; --fx-fraco: #6CCFDB; --fx-moderada: #2FB0C2; --fx-longa-duracao: #1B87A0; --fx-eterno: #0D4A5E;
  /* Padrão do site: sempre o tema claro (pedido do dono), mesmo com o aparelho em modo escuro. */
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font: 16px/1.6 'Space Grotesk', system-ui, sans-serif; }
a { color: var(--acento); }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-weight: 500; line-height: 1.15; margin: 0; }
.largura { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.discreto { color: var(--tinta-2); font-size: 14px; }
[hidden] { display: none !important; }

/* Topo e rodapé */
.topo { border-bottom: 1px solid var(--linha); }
.topo .largura { display: flex; align-items: center; justify-content: space-between; min-height: 60px; gap: 16px; }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--tinta); font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.logo-marca { width: 24px; height: 24px; fill: var(--acento); flex: none; }
.topo nav { display: flex; gap: 20px; font-size: 14px; }
.topo nav a { color: var(--tinta-2); text-decoration: none; white-space: nowrap; }
.logo span { white-space: nowrap; }
.topo nav a:hover { color: var(--tinta); }
.rodape { border-top: 1px solid var(--linha); margin-top: 56px; padding: 24px 0 32px; color: var(--tinta-2); font-size: 14px; }
.rodape p { margin: 0 0 6px; max-width: 640px; }
.versao { font-size: 12px; }

/* Abertura e filtros */
.abertura { padding: 36px 0 20px; max-width: 680px; }
.abertura h1 { font-size: clamp(28px, 5vw, 44px); letter-spacing: -.02em; }
.abertura p { color: var(--tinta-2); margin: 10px 0 0; }
.filtros { position: sticky; top: 0; z-index: 2; background: var(--fundo); padding: 12px 0; border-bottom: 1px solid var(--linha); }
.busca input { width: 100%; height: 46px; padding: 0 14px; font: inherit; color: var(--tinta); background: var(--fundo-suave); border: 1px solid var(--linha); border-radius: var(--raio); }
.busca input:focus, select:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.filtros-linha { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 2px; }
.filtros-linha label { display: flex; flex-direction: column; gap: 2px; flex: none; font-size: 12px; color: var(--tinta-2); }
select { height: 36px; max-width: 200px; padding: 0 8px; font: inherit; font-size: 14px; color: var(--tinta); background: var(--fundo); border: 1px solid var(--linha); border-radius: 8px; }
select.ativo { border-color: var(--acento); background: var(--caixa); }
.filtros-status { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--tinta-2); padding-top: 8px; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--acento); text-decoration: underline; cursor: pointer; }

/* Grade de cartões */
.grade { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.cartao { display: flex; flex-direction: column; border: 1px solid var(--linha); border-radius: 14px; background: var(--fundo); transition: border-color .15s; }
.cartao:hover { border-color: var(--acento); }
.cartao-link { display: flex; gap: 14px; flex: 1; padding: 14px 14px 10px; color: inherit; text-decoration: none; border-radius: 14px; }
.cartao-rodape { display: flex; justify-content: flex-end; padding: 0 14px 12px; }
.cartao-foto { flex: none; width: 76px; }
.cartao-foto img, .cartao-foto .sem-foto { width: 76px; height: 104px; object-fit: contain; border-radius: 8px; background: #fff; }
.sem-foto { display: flex; align-items: center; justify-content: center; background: var(--caixa) !important; }
.sem-foto .logo-marca { width: 40%; height: 40%; opacity: .35; }
.cartao-corpo { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.cartao-marca { font-size: 12px; color: var(--tinta-2); }
.cartao-nome { font-size: 19px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.cartao-familia { font-size: 12px; color: var(--tinta-2); margin-top: -4px; }
.cartao-numeros { display: flex; gap: 14px; font-size: 15px; font-weight: 500; }
.cartao-numeros small { display: block; font-size: 11px; font-weight: 400; color: var(--tinta-2); }
.vazio { padding: 40px 0; text-align: center; color: var(--tinta-2); }

/* Curva de projeção */
.curva { margin: 2px 0; }
.curva-barras { display: flex; align-items: flex-end; gap: 3px; height: 34px; border-bottom: 1px solid var(--linha); }
.fase { flex-basis: 0; border-radius: 3px 3px 0 0; min-width: 6px; }
.nv-intima-menos { background: var(--nv-intima-menos); } .nv-intima { background: var(--nv-intima); } .nv-intima-mais { background: var(--nv-intima-mais); }
.nv-moderada-menos { background: var(--nv-moderada-menos); } .nv-moderada { background: var(--nv-moderada); } .nv-moderada-mais { background: var(--nv-moderada-mais); }
.nv-forte-menos { background: var(--nv-forte-menos); } .nv-forte { background: var(--nv-forte); } .nv-forte-mais { background: var(--nv-forte-mais); }
.nv-enorme-menos { background: var(--nv-enorme-menos); } .nv-enorme { background: var(--nv-enorme); } .nv-enorme-mais { background: var(--nv-enorme-mais); }
.nv-nenhum { background: var(--linha); }
.fx-muito-fraco { background: var(--fx-muito-fraco); } .fx-fraco { background: var(--fx-fraco); } .fx-moderada { background: var(--fx-moderada); }
.fx-longa-duracao { background: var(--fx-longa-duracao); } .fx-eterno { background: var(--fx-eterno); }
/* Ponto de cor ao lado do texto (a cor nunca vem sozinha: o nível/horas estão sempre escritos). */
.ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
/* Régua da fixação (0 a 24 h) */
.regua { height: 8px; border-radius: 99px; background: var(--linha); overflow: hidden; margin: 8px 0 4px; }
.regua-cheia { height: 100%; border-radius: 99px; }
/* Uma barra por dia (24 h): a 2ª, 3ª... ficam logo abaixo, com a mesma altura. */
.reguas { margin: 8px 0 4px; }
.reguas .regua { margin: 0; }
.reguas .regua + .regua { margin-top: 4px; }
.curva-grande .curva-barras { height: 110px; gap: 4px; }
.curva-legenda { display: flex; gap: 4px; margin-top: 8px; }
/* Largura mínima igual na barra e na legenda: fase curta não quebra o nome do nível e as duas continuam alinhadas. */
.curva-grande .fase, .curva-legenda div { min-width: 68px; }
.curva-legenda div { flex-basis: 0; font-size: 13px; color: var(--tinta-2); white-space: nowrap; }
.curva-legenda b { display: block; font-size: 17px; font-weight: 500; color: var(--tinta); }

/* Acordes: cor por grupo */
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { font-size: 12px; line-height: 1; padding: 5px 9px; border-radius: 99px; background: #EDEFEE; color: #3B4541; }
.chips-grandes .chip { font-size: 14px; padding: 7px 12px; }
.ac-citrico { background: #FFF3C4; color: #6B5200; }
.ac-ambar { background: #F8E1C8; color: #7A4614; }
.ac-fresco { background: #DDF0F7; color: #1B5468; }
.ac-especiado { background: #F9DDD3; color: #8A3418; }
.ac-amadeirado { background: #E9DFD3; color: #5A4330; }
.ac-floral { background: #FBE3EC; color: #8A2E52; }
.ac-frutado { background: #FCE2DC; color: #8F2F22; }
.ac-verde { background: #E1F1DA; color: #2F5F1E; }
.ac-doce { background: #F6E9D7; color: #75501F; }
.ac-escuro { background: #E2DEDB; color: #3D332C; }
.ac-almiscar { background: #ECE6F4; color: #4F3E70; }

/* Principais acordes (cores do Fragrantica, largura = força); barras coladas, sem espaço entre as linhas (como no Fragrantica). */
.acordes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.acorde { display: block; min-width: 0; padding: 4px 10px; border-radius: 0 6px 6px 0; font-size: 13px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Galeria do frasco: foto e imagem dos acordes; setas sobre a imagem passam de uma para a outra. */
.galeria { position: relative; }
.galeria .slide-acordes { aspect-ratio: 3 / 4; border: 1px solid var(--linha); border-radius: 14px; background: var(--fundo); display: flex; align-items: center; }
.slide-acordes-caixa { width: 100%; padding: 18px 44px; }
.slide-acordes-caixa p { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); }
.seta { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; padding: 0; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--linha); border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--tinta); cursor: pointer; transition: background .15s, border-color .15s; }
.seta:hover { background: #fff; border-color: var(--acento); color: var(--acento); }
.seta:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.seta svg { width: 18px; height: 18px; }
.seta-esq { left: 8px; }
.seta-dir { right: 8px; }

/* Quando usar: estações e turno; sem números, só "iluminação". Cores das estações = as do Fragrantica. */
/* Estações numa linha (4 colunas iguais) e Dia/Noite numa segunda linha (2 colunas, ícone ao lado do nome): cabe na coluna estreita. */
.quando-usar { display: flex; flex-direction: column; gap: 6px; }
.usos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.usos-turno { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 6px; border-top: 1px solid var(--linha); }
.uso { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px 6px; border-radius: 10px; font-size: 12px; color: var(--tinta-2); min-width: 0; white-space: nowrap; }
.usos-turno .uso { flex-direction: row; justify-content: center; gap: 8px; padding: 6px 4px; }
.usos-turno .uso svg { width: 22px; height: 22px; }
.uso svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.uso-primavera svg { stroke-width: 1.3; }
.uso-inverno { --cor-uso: #3FB7DA; } .uso-primavera { --cor-uso: #6CC24A; } .uso-verao { --cor-uso: #F2675A; }
.uso-outono { --cor-uso: #E8952E; } .uso-dia { --cor-uso: #F59E0B; } .uso-noite { --cor-uso: #5C8DB8; }
.uso-aceso { color: var(--cor-uso); background: color-mix(in srgb, var(--cor-uso) 14%, transparent); font-weight: 600; }
.uso-aceso span { color: var(--tinta); }
.uso-meio { color: color-mix(in srgb, var(--cor-uso) 55%, var(--linha)); }
.uso-apagado { color: var(--linha); }
.uso-apagado span { color: var(--tinta-2); opacity: .7; }

/* Página do perfume */
.trilha { padding: 20px 0 8px; font-size: 14px; }
.trilha a { text-decoration: none; }
/* Frasco e perfil olfativo na coluna da esquerda; números e curva à direita. No celular: frasco, números/curva, perfil. */
.perfume { display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-areas: "foto principal" "perfil principal"; grid-template-rows: auto 1fr; column-gap: 32px; row-gap: 4px; align-items: start; padding-top: 8px; }
.perfume-foto { grid-area: foto; }
.perfume-principal { grid-area: principal; }
.perfume-perfil { grid-area: perfil; }
.perfume-perfil .secao { margin-top: 20px; }
.perfume-perfil .chips-grandes .chip { font-size: 13px; padding: 6px 10px; }
.duas-colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.perfume-foto img, .perfume-foto .sem-foto { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; border-radius: 14px; background: #fff; border: 1px solid var(--linha); }
.perfume h1 { font-size: clamp(32px, 6vw, 52px); letter-spacing: -.02em; margin-top: 4px; }
.perfume-familia { color: var(--tinta-2); margin: 6px 0 0; }
.numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 22px 0 6px; }
.numeros > div { background: var(--caixa); border-radius: var(--raio); padding: 12px 14px; }
.numeros small { display: block; font-size: 12px; color: var(--tinta-2); }
.numeros b { display: block; font-size: 26px; font-weight: 500; line-height: 1.2; }
.numeros span { font-size: 13px; color: var(--tinta-2); }
.secao { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); margin: 28px 0 12px; font-weight: 500; }
/* Botão Reels: pílula com o degradê do Instagram (texto e ícones brancos). */
.botao-reels { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 99px; color: #fff; font-size: 13px; font-weight: 600; text-decoration: none;
  background: linear-gradient(100deg, #B92B9C 0%, #E1306C 45%, #F2554A 75%, #F77737 100%); transition: filter .15s; }
.botao-reels:hover { filter: brightness(1.08) saturate(1.1); }
/* Tooltip (data-dica): acima do botão, no verde-escuro do site. */
.botao-reels { position: relative; }
.botao-reels::after { content: attr(data-dica); position: absolute; bottom: calc(100% + 8px); right: 0; padding: 6px 10px; border-radius: 6px;
  background: var(--tinta); color: var(--fundo); font-size: 12px; font-weight: 500; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; z-index: 3; }
.botao-reels:hover::after, .botao-reels:focus-visible::after { opacity: 1; transform: none; }
.botao-reels-grande::after { right: auto; left: 0; }
.botao-reels:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.botao-reels svg { width: 15px; height: 15px; flex: none; }
.botao-reels svg:last-child { width: 13px; height: 13px; opacity: .9; }
.botao-reels-grande { height: 40px; padding: 0 18px; font-size: 15px; gap: 8px; margin-top: 24px; }
.botao-reels-grande svg { width: 18px; height: 18px; }
.botao-reels-grande svg:last-child { width: 15px; height: 15px; }
.botao { display: inline-block; margin-top: 24px; padding: 11px 18px; border-radius: var(--raio); background: var(--acento); color: var(--fundo); text-decoration: none; font-weight: 500; }
.texto { max-width: 720px; }
.texto p { margin: 0 0 8px; font-size: 17px; }
.nota-nivel { margin-top: 14px; }
.nota-nivel h3 { font-size: 13px; color: var(--tinta-2); font-weight: 500; }
.nota-nivel p { margin: 2px 0 0; }
.ficha { margin: 0; }
.ficha div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--linha); }
.ficha dt { color: var(--tinta-2); }
.ficha dd { margin: 0; text-align: right; font-weight: 500; }
.grade-mini { margin-top: 0; }

/* Como ler */
.como-ler { max-width: 760px; }
.como-ler > p { margin: 0 0 10px; }
.exemplo { max-width: 460px; margin: 16px 0 6px; }
.escala-projecao { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.escala-classe { border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; }
.escala-classe h3 { font-size: 17px; }
.escala-classe h3 small { font-size: 13px; font-weight: 400; color: var(--tinta-2); margin-left: 4px; }
.escala-classe ul { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; }
.escala-classe li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.escala-classe li b { min-width: 82px; font-weight: 500; }
.amostra { flex: none; width: 22px; height: 12px; border-radius: 3px; }
.escala-fixacao { list-style: none; margin: 0; padding: 0; }
.escala-fixacao li { padding: 8px 0 10px; border-bottom: 1px solid var(--linha); }
.escala-fixacao li .regua { margin-top: 0; }
.escala-fixacao b { font-weight: 500; }
.escala-fixacao span { color: var(--tinta-2); margin-left: 6px; }
.escala-fixacao em { display: block; font-style: normal; font-size: 14px; color: var(--tinta-2); }

/* Celular estreito: o logo já leva à lista de perfumes, então o link "Perfumes" sai para o menu caber com margem. */
@media (max-width: 420px) { .nav-perfumes { display: none; } }
@media (max-width: 720px) {
  .escala-projecao { grid-template-columns: 1fr; }
  .duas-colunas { grid-template-columns: 1fr; gap: 0; }
  .perfume { grid-template-columns: 1fr; grid-template-areas: "foto" "principal" "perfil"; grid-template-rows: none; gap: 18px; }
  /* Frasco maior e centralizado no celular */
  .perfume-foto { width: 100%; max-width: 320px; justify-self: center; }
  .numeros b { font-size: 21px; }
  .numeros > div { padding: 10px; }
  .grade { grid-template-columns: 1fr; }
  .filtros-linha { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .filtros { position: static; }
  .topo nav { gap: 12px; font-size: 13px; }
  .logo { font-size: 15px; }
}