/* Blog do L'Essence. Herda os tokens da LP para nao parecer outro site:
   mesma paleta, mesmas fontes, mesma escala. O que muda e a densidade -
   aqui o texto e para ler, entao a coluna e estreita e a linha e alta. */

@font-face{font-family:'EBGaramond';src:url('../assets/EBGaramond.woff2') format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:'EBGaramond';src:url('../assets/EBGaramond-italic.woff2') format('woff2');font-weight:400 800;font-style:italic;font-display:swap}
@font-face{font-family:'Ballantines';src:url('../assets/BallantinesSerial-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Gotham';src:url('../assets/GothamBook.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Gotham';src:url('../assets/GothamBold.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --ink:#0C110E; --ink-2:#101613; --ink-3:#16201B; --ink-4:#1D2822;
  --gold:#C9A227; --gold-2:#E3C56A; --gold-dim:rgba(201,162,39,.28);
  --sand:#E8E2D8; --sand-2:rgba(232,226,216,.66); --sand-3:rgba(232,226,216,.40);
  --line:rgba(201,162,39,.20); --line-2:rgba(232,226,216,.12);
  --ease:cubic-bezier(.2,.6,.2,1);
  --wrap:1180px; --leitura:720px;
  --gutter:clamp(22px,4.4vw,64px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink); color:var(--sand);
  font:400 17px/1.75 'Gotham','Montserrat',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.wrap{width:min(100% - var(--gutter)*2, var(--wrap));margin-inline:auto}
.col{width:min(100%, var(--leitura));margin-inline:auto}

/* ---- topo ---- */
.topo{
  position:sticky;top:0;z-index:50;
  background:rgba(12,17,14,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-2);
}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0}
.marca{display:flex;align-items:center;gap:11px;text-decoration:none}
.marca img{width:118px}
.marca span{
  font:400 9.5px/1 'Gotham',sans-serif;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);padding-left:11px;border-left:1px solid var(--line);
}
.topo nav{display:flex;gap:26px;align-items:center}
.topo nav a{
  font:400 10.5px/1 'Gotham',sans-serif;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sand-2);text-decoration:none;transition:color .3s var(--ease);
}
.topo nav a:hover{color:var(--gold-2)}
.topo .cta{
  border:1px solid var(--gold-dim);border-radius:2px;padding:10px 18px;color:var(--gold-2);
}
.topo .cta:hover{background:var(--gold-wash,rgba(201,162,39,.07));border-color:var(--gold)}
@media(max-width:820px){.topo nav a:not(.cta){display:none}.marca span{display:none}}

/* ---- rotulos ---- */
.olho{
  font:400 10px/1 'Gotham',sans-serif;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);display:flex;align-items:center;gap:12px;margin-bottom:22px;
}
.olho::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}

/* ---- tipografia de artigo ---- */
h1,h2,h3{font-family:'EBGaramond',Georgia,serif;font-weight:400;letter-spacing:-.01em;line-height:1.14}
h1{font-size:clamp(32px,4.6vw,54px);margin-bottom:24px}
h2{font-size:clamp(25px,2.8vw,36px);margin:64px 0 20px;padding-top:8px}
h3{font-size:clamp(20px,2vw,25px);margin:40px 0 14px;color:var(--gold-2)}
.lede{font:400 clamp(18px,1.7vw,21px)/1.65 'EBGaramond',Georgia,serif;color:var(--sand-2);margin-bottom:34px}
article p{margin-bottom:22px;color:rgba(232,226,216,.86)}
article strong{color:var(--sand);font-weight:700}
article a:not(.btn){color:var(--gold-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold-dim)}
article a:not(.btn):hover{text-decoration-color:var(--gold)}
article ul,article ol{margin:0 0 24px 22px;color:rgba(232,226,216,.86)}
article li{margin-bottom:11px}
article li::marker{color:var(--gold)}

blockquote{
  border-left:2px solid var(--gold);padding:6px 0 6px 24px;margin:34px 0;
  font:400 clamp(19px,2vw,23px)/1.5 'EBGaramond',Georgia,serif;color:var(--sand);
}

/* tabela precisa rolar sozinha no celular, senao a pagina inteira anda de lado */
.tab-rolo{overflow-x:auto;margin:30px 0;border:1px solid var(--line-2);border-radius:3px}
table{border-collapse:collapse;width:100%;min-width:540px;font-size:14.5px}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:top}
th{font:700 10px/1.4 'Gotham',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);background:rgba(201,162,39,.05)}
td{color:rgba(232,226,216,.84)}
tr:last-child td{border-bottom:0}

.nota{
  border:1px solid var(--line);background:rgba(201,162,39,.05);border-radius:3px;
  padding:22px 24px;margin:34px 0;font-size:15.5px;color:var(--sand-2);
}
.nota strong{color:var(--gold-2)}

/* ---- caixa de conversao ---- */
.oferta{
  border:1px solid var(--line);border-radius:3px;padding:clamp(28px,4vw,44px);
  margin:56px 0;background:linear-gradient(180deg,rgba(201,162,39,.06),transparent);
}
.oferta h3{margin-top:0;color:var(--sand);font-size:clamp(22px,2.4vw,30px)}
.oferta p{color:var(--sand-2);margin-bottom:26px}
.btn{
  display:inline-block;background:var(--gold);color:var(--ink);text-decoration:none;
  font:700 11px/1 'Gotham',sans-serif;letter-spacing:.16em;text-transform:uppercase;
  padding:17px 30px;border-radius:2px;transition:transform .3s var(--ease),background .3s var(--ease);
}
.btn:hover{background:var(--gold-2);transform:translateY(-2px)}
.btn.vazado{background:transparent;color:var(--gold-2);border:1px solid var(--gold-dim);margin-left:10px}
.btn.vazado:hover{background:rgba(201,162,39,.08);border-color:var(--gold)}
@media(max-width:560px){.btn{display:block;text-align:center}.btn.vazado{margin:12px 0 0}}

/* ---- migalha ---- */
.migalha{font:400 10.5px/1 'Gotham',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--sand-3);margin-bottom:26px}
.migalha a{color:var(--sand-2);text-decoration:none}
.migalha a:hover{color:var(--gold-2)}
.migalha span{color:var(--gold);margin:0 9px}

/* ---- cartoes do indice ---- */
.grade{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));margin-top:44px}
.cartao{
  border:1px solid var(--line-2);border-radius:3px;padding:32px 30px;text-decoration:none;display:block;
  transition:border-color .35s var(--ease),transform .35s var(--ease),background .35s var(--ease);
}
.cartao:hover{border-color:var(--gold-dim);transform:translateY(-3px);background:rgba(201,162,39,.04)}
.cartao .marca-tipo{font:400 9.5px/1 'Gotham',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;display:block}
.cartao h2{font-size:clamp(21px,2.1vw,26px);margin:0 0 12px;padding:0;color:var(--sand)}
.cartao p{font-size:15px;color:var(--sand-3);margin:0}
.cartao .ler{display:inline-block;margin-top:20px;font:400 10px/1 'Gotham',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2)}

/* ---- rodape ---- */
footer{border-top:1px solid var(--line-2);margin-top:96px;padding:52px 0 60px}
footer .wrap{display:flex;flex-wrap:wrap;gap:34px;justify-content:space-between}
footer p,footer a{font-size:13.5px;color:var(--sand-3);text-decoration:none;line-height:1.9}
footer a:hover{color:var(--gold-2)}
footer .tit{font:400 9.5px/1 'Gotham',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;display:block}
.legal{margin-top:40px;padding-top:26px;border-top:1px solid var(--line-2);font-size:11.5px;color:rgba(232,226,216,.3);line-height:1.8}

.secao{padding:clamp(52px,7vw,88px) 0}
.topo-artigo{padding:clamp(44px,6vw,76px) 0 0}