/* Ourènt — site público.
   Direção: claro, bege quase branco, dourado profundo. Perfumaria se vende por
   presença, não por quantidade de informação. Tema único de propósito: a
   marca tem uma cara só.
   As cores de texto foram conferidas por contraste (WCAG AA): tinta 15,2:1,
   apoio 5,5:1 e ouro 5,4:1 sobre o fundo. */
:root{
  --fundo:#F7F3EA;
  --fundo-2:#EFE9DC;
  --tinta:#211C17;
  --tinta-fosca:#6A6056;
  --ouro:#7E5F1C;
  --ouro-forte:#6E5316;
  --linha:#E3DBCB;
  --display:"Marcellus","Hoefler Text",Georgia,serif;
  --corpo:"Karla","Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--fundo);color:var(--tinta);
  font:300 16px/1.65 var(--corpo);-webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;letter-spacing:.01em}
p{margin:0}
a{color:inherit}

.eyebrow{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ouro);font-weight:500;margin-bottom:18px}

/* --- topo --- */
.topo{display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 28px;border-bottom:1px solid var(--linha);flex-wrap:wrap;
  position:sticky;top:env(safe-area-inset-top,0px);background:rgba(247,243,234,.92);
  backdrop-filter:blur(10px);z-index:10}
.marca{font-family:var(--display);font-size:25px;letter-spacing:.08em;
  text-decoration:none;line-height:1}
.marca span{display:block;font-family:var(--corpo);font-size:9px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--tinta-fosca);margin-top:5px;font-weight:400}
.nav{display:flex;gap:26px;align-items:center;font-size:13px;letter-spacing:.06em}
.nav a{text-decoration:none;color:var(--tinta-fosca);padding:4px 0;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.nav a:hover{color:var(--tinta);border-bottom-color:var(--ouro)}
.nav-cta{color:var(--ouro)!important}

/* --- capa --- */
.capa{max-width:1120px;margin:0 auto;padding:clamp(52px,8vw,96px) 28px clamp(40px,7vw,70px)}
.capa h1{font-size:clamp(30px,5.2vw,52px);line-height:1.16;margin-bottom:26px}
.capa-txt{max-width:50ch;color:var(--tinta-fosca);font-size:clamp(15px,2vw,17.5px);margin-bottom:34px}
.capa-acoes{display:flex;gap:14px;flex-wrap:wrap}

.btn{display:inline-block;font:500 13px var(--corpo);letter-spacing:.09em;
  text-transform:uppercase;padding:15px 30px;text-decoration:none;
  border:1px solid transparent;transition:background .2s,color .2s,border-color .2s}
.btn-primario{background:var(--ouro);color:var(--fundo);border-color:var(--ouro)}
.btn-primario:hover{background:var(--ouro-forte);border-color:var(--ouro-forte)}
.btn-linha{border-color:var(--linha);color:var(--tinta)}
.btn-linha:hover{border-color:var(--ouro);color:var(--ouro)}

/* --- números --- */
.numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px;background:var(--linha);border-block:1px solid var(--linha);margin-block:20px}
.numeros div{background:var(--fundo);padding:30px 24px;text-align:center}
.numeros strong{display:block;font-family:var(--display);font-size:clamp(23px,3.4vw,31px);
  color:var(--ouro);font-weight:400;margin-bottom:7px;
  /* lining figures: no Marcellus o algarismo 1 sai parecido com I maiusculo */
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1}
.numeros span{font-size:12px;color:var(--tinta-fosca);letter-spacing:.04em;line-height:1.45;display:block}

/* --- coleção --- */
.colecao{max-width:1000px;margin:0 auto;padding:clamp(56px,9vw,100px) 28px}
.sec-topo{margin-bottom:52px;max-width:54ch}
.sec-topo h2{font-size:clamp(27px,4.4vw,40px);margin-bottom:16px}
.sec-txt{color:var(--tinta-fosca);font-size:16px}
.grupo{margin-bottom:56px}
.grupo:last-child{margin-bottom:0}
.grupo-nome{font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--tinta-fosca);font-family:var(--corpo);font-weight:500;
  padding-bottom:14px;border-bottom:1px solid var(--linha);margin-bottom:8px}
.lista{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0}
.lista li{padding:28px 26px 30px;min-width:0;transition:background .25s;
  border-bottom:1px solid var(--linha);border-right:1px solid var(--linha)}
/* Sem a borda da direita na ultima coluna, para a grade nao ficar com uma
   linha solta onde nao ha vizinho. */
@media(min-width:880px){ .lista li:nth-child(3n){border-right:none} }
@media(max-width:879px) and (min-width:560px){ .lista li:nth-child(2n){border-right:none} }
@media(max-width:559px){ .lista li{border-right:none} }
.lista li:hover{background:var(--fundo-2)}
.lista h4{font-size:23px;margin-bottom:7px}
.familia{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ouro);margin-bottom:14px;font-weight:500}
.nota{font-size:14.5px;color:var(--tinta-fosca);line-height:1.6}

/* --- sobre --- */
.sobre{max-width:1000px;margin:0 auto;padding:clamp(56px,9vw,100px) 28px;
  display:grid;grid-template-columns:1fr;gap:48px;border-top:1px solid var(--linha)}
@media(min-width:880px){.sobre{grid-template-columns:1.15fr .85fr;gap:70px}}
.sobre-txt h2{font-size:clamp(26px,4.2vw,38px);line-height:1.2;margin-bottom:26px}
.sobre-txt p{color:var(--tinta-fosca);margin-bottom:18px;max-width:52ch}
.sobre-txt p:last-child{margin-bottom:0}
.sobre-itens{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;
  background:var(--linha);border:1px solid var(--linha)}
.sobre-itens li{background:var(--fundo);padding:22px 24px;font-size:14px;color:var(--tinta-fosca);line-height:1.55}
.sobre-itens strong{display:block;color:var(--tinta);font-weight:500;font-size:14.5px;margin-bottom:5px;
  letter-spacing:.02em}

/* --- contato --- */
.contato{max-width:760px;margin:0 auto;padding:clamp(56px,9vw,104px) 28px;
  text-align:center;border-top:1px solid var(--linha)}
.contato h2{font-size:clamp(26px,4.4vw,40px);margin-bottom:20px}
.contato-txt{color:var(--tinta-fosca);max-width:48ch;margin:0 auto 34px}
.contato-acoes{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.contato-nota{font-size:13.5px;color:var(--tinta-fosca)}

/* --- rodapé --- */
.rodape{border-top:1px solid var(--linha);padding:44px 28px 52px;text-align:center;
  color:var(--tinta-fosca);font-size:13px}
.rodape-marca{font-family:var(--display);font-size:21px;letter-spacing:.08em;
  color:var(--tinta);margin-bottom:6px}
.rodape-marca span{display:block;font-family:var(--corpo);font-size:8.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--tinta-fosca);margin-top:4px}
.rodape p{margin-top:12px}
.rodape-fino{font-size:11.5px;max-width:62ch;margin-inline:auto;line-height:1.6;
  color:var(--tinta-fosca);margin-top:22px}

:focus-visible{outline:2px solid var(--ouro);outline-offset:3px}

.contato-fone{font-size:14px;color:var(--tinta-fosca);margin-top:14px}
.contato-fone a{color:var(--ouro);text-decoration:none;font-variant-numeric:tabular-nums;
  border-bottom:1px solid transparent}
.contato-fone a:hover{border-bottom-color:var(--ouro)}
.rodape a{color:var(--tinta-fosca);text-decoration:none;border-bottom:1px solid var(--linha)}
.rodape a:hover{color:var(--ouro);border-bottom-color:var(--ouro)}
.rodape [data-fone]{font-variant-numeric:tabular-nums}

.rodape-legal{font-size:12px;color:var(--tinta-fosca);letter-spacing:.03em;
  font-variant-numeric:tabular-nums;margin-top:18px}

/* --- logo --- */
.marca{color:var(--tinta)}
.marca .logo-svg{display:block;width:108px;height:auto}
.rodape-logo{color:var(--tinta);margin-bottom:4px}
.rodape-logo .logo-svg{display:block;width:126px;height:auto;margin-inline:auto}

/* --- frascos --- */
/* Em telas largas o frasco fica ao lado do titulo; no celular ele some,
   porque empurraria o texto para fora da primeira tela.
   A ordem importa: o display:none vem ANTES da media query, senao a regra
   tardia vence e o frasco nunca aparece. */
.capa{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
.capa-frasco{display:none;justify-self:center}
.capa-frasco .frasco{width:min(118px,15vw);height:auto;
  filter:drop-shadow(0 20px 40px rgba(33,28,23,.20))}
@media(min-width:920px){
  .capa{grid-template-columns:1.7fr .3fr;gap:40px}
  .capa-frasco{display:block}
}

.frasco-caixa{margin-bottom:18px;position:relative}
/* Halo sutil: sem ele o vidro translucido some no fundo preto. */
.frasco-caixa::before{content:"";position:absolute;left:0;top:14%;
  width:46px;height:72%;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(126,95,28,.09),transparent 70%);
  filter:blur(10px)}
.frasco{width:46px;height:auto;display:block;position:relative;
  filter:drop-shadow(0 8px 16px rgba(33,28,23,.16))}
.capa-frasco{position:relative}
.capa-frasco::before{content:"";position:absolute;inset:8% 12%;
  background:radial-gradient(ellipse at center,rgba(126,95,28,.11),transparent 68%);
  filter:blur(26px)}
.lista li{display:flex;flex-direction:column;align-items:flex-start}