/* Páginas internas do site da Keyla (países, artigos, 404). Mesmas cores e fontes da página inicial. */
:root{
  --noite:#121a2f;--noite2:#1b2440;--creme:#f5efe6;--creme2:#ece3d5;--taupe:#6f5f58;--cacau:#33281f;--texto:#4a3f37;
  --verde:#4f8a4b;--verde-escuro:#2f5a39;--carmim:#b3202b;--luz:#f3ece1;--dourado:#e8c9a4;
  --serif:'EB Garamond',Georgia,serif;--sans:'Jost',system-ui,sans-serif;--borda:clamp(18px,5vw,72px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:clip}
body{background:var(--creme);color:var(--texto);font:300 17px/1.7 var(--sans)}
img,svg{display:block;max-width:100%}
a{color:inherit}
em{font-style:italic}
strong,b{font-weight:500}
.rotulo{font:500 11.5px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--taupe)}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08;color:var(--cacau)}
h1{font-size:clamp(36px,4.6vw,64px)}
h1 em,h2 em{color:var(--verde-escuro)}
h2{font-size:clamp(28px,3.2vw,44px)}
h3{font-size:clamp(21px,1.7vw,25px);line-height:1.2}

.botao{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;border:1px solid currentColor;
  font:500 15px/1 var(--sans);letter-spacing:.02em;text-decoration:none;transition:background .3s,color .3s,border-color .3s,transform .3s}
.botao:hover{transform:translateY(-1px)}
.botao.cheio{background:var(--cacau);border-color:var(--cacau);color:var(--luz)}
.botao.cheio:hover{background:var(--verde-escuro);border-color:var(--verde-escuro)}
.botao.claro{background:var(--luz);border-color:var(--luz);color:var(--noite)}
.botao.claro:hover{background:#fff}
.botao svg{width:18px;height:18px;flex:none}
.botoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.seta{display:inline-block;margin-top:14px;font:500 14px/1 var(--sans);letter-spacing:.06em;color:var(--verde-escuro);text-underline-offset:4px}
.seta::after{content:' →'}

/* topo */
.topo{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:24px;padding:12px var(--borda);color:var(--cacau);
  background:rgba(245,239,230,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(51,40,31,.08)}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.marca img{width:40px;height:40px}
.marca b{display:block;font:500 21px/1 var(--serif);letter-spacing:.01em}
.marca small{display:block;margin-top:4px;font:400 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.nav{display:flex;gap:26px}
.nav a{font:400 14px/1 var(--sans);text-decoration:none;opacity:.85}
.nav a:hover{opacity:1}
.topo .botao{padding:11px 18px;font-size:14px}
.topo .curto{display:none}
@media (max-width:860px){.nav{display:none}.marca small{display:none}.marca b{font-size:19px}}
@media (max-width:520px){.topo .longo{display:none}.topo .curto{display:inline}}

.trilha{font:400 13px/1.4 var(--sans);color:var(--taupe);margin-bottom:22px}
.trilha a{text-underline-offset:3px}
.trilha i{font-style:normal;margin:0 6px;opacity:.6}

/* abertura das páginas por país */
.capa-pagina{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center;
  padding:clamp(40px,6vw,90px) var(--borda) clamp(60px,8vw,110px)}
.capa-pagina h1{margin-top:16px}
.capa-pagina .intro{margin-top:22px;max-width:34em;font-size:clamp(17px,1.25vw,20px)}
.capa-pagina figure img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%;border-radius:3px}
@media (max-width:860px){.capa-pagina{grid-template-columns:1fr}.capa-pagina figure{order:-1}.capa-pagina figure img{aspect-ratio:16/10}}

/* blocos */
.bloco{padding:clamp(64px,8vw,120px) var(--borda)}
.bloco>h2{margin-top:14px;max-width:18em}
.nota{margin-top:28px;font-size:15px;max-width:44em}
.cartoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:clamp(32px,4vw,56px);list-style:none;
  background:rgba(132,114,107,.22);border:1px solid rgba(132,114,107,.22)}
.cartoes li{background:var(--creme);padding:clamp(24px,3vw,38px)}
.cartoes p{margin-top:10px;font-size:16px}
@media (max-width:640px){.cartoes{grid-template-columns:1fr}}

.prosa{max-width:42em}
.bloco>.prosa{margin-top:22px;font-size:clamp(17px,1.2vw,19px)}
.prosa p{margin-top:1em}
.prosa h2{font-size:clamp(25px,2.4vw,34px);margin-top:1.8em}
.prosa ul{margin:1em 0 0 1.1em}
.prosa li{margin-top:.55em}
.prosa strong{color:var(--cacau)}

.escuro{background:var(--noite);color:var(--luz)}
.escuro h2{color:var(--luz)}
.escuro h2 em,.escuro .rotulo{color:var(--dourado)}
.escuro .prosa{margin-top:22px;font-size:clamp(17px,1.2vw,19px)}
.escuro strong{color:#fff}

.perguntas{background:var(--creme2)}
.perguntas .itens{margin-top:36px;max-width:860px}
.perguntas details{border-top:1px solid rgba(132,114,107,.3)}
.perguntas details:last-child{border-bottom:1px solid rgba(132,114,107,.3)}
.perguntas summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:22px 0;
  font:500 clamp(19px,1.6vw,23px)/1.3 var(--serif);color:var(--cacau)}
.perguntas summary::-webkit-details-marker{display:none}
.perguntas summary::after{content:'+';font:300 26px/1 var(--sans);color:var(--taupe);transition:transform .3s}
.perguntas details[open] summary::after{transform:rotate(45deg);color:var(--carmim)}
.perguntas details p{padding:0 0 22px;max-width:44em}

.autora{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:center;background:var(--creme2)}
.autora img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 16%;border-radius:3px}
.autora h2{margin-top:12px}
.autora p{margin-top:14px;max-width:40em}
@media (max-width:640px){.autora{grid-template-columns:1fr}.autora img{max-width:240px}}

.chamada{background:var(--noite);color:var(--luz);text-align:center}
.chamada h2{color:var(--luz);margin:14px auto 0}
.chamada h2 em,.chamada .rotulo{color:var(--dourado)}
.chamada p{margin:18px auto 0;max-width:34em;opacity:.88}
.chamada .botoes{justify-content:center}
.chamada .aviso{margin-top:34px;font-size:13px;opacity:.6}

.mais{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,100px)}
.paises{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;list-style:none}
.paises a{display:inline-block;padding:11px 17px;border-radius:999px;border:1px solid rgba(132,114,107,.4);background:rgba(255,255,255,.5);
  font:400 15px/1 var(--sans);text-decoration:none;transition:background .3s,border-color .3s,color .3s}
.paises a:hover{background:var(--cacau);border-color:var(--cacau);color:var(--luz)}
.leituras{list-style:none;margin-top:12px}
.leituras li{border-top:1px solid rgba(132,114,107,.25)}
.leituras li:last-child{border-bottom:1px solid rgba(132,114,107,.25)}
.leituras a{display:block;padding:15px 0;font:500 clamp(18px,1.4vw,21px)/1.3 var(--serif);color:var(--cacau);text-decoration:none}
.leituras a:hover{color:var(--verde-escuro)}
@media (max-width:860px){.mais{grid-template-columns:1fr}}

/* artigos */
.cabeca-artigo{padding:clamp(40px,6vw,90px) var(--borda) 0;max-width:calc(46em + 2 * var(--borda))}
.cabeca-artigo h1{margin-top:14px}
.linha-fina{margin-top:20px;font-size:clamp(18px,1.35vw,21px);max-width:38em}
.por{margin-top:18px;font-size:14px;color:var(--taupe)}
.texto-artigo{padding:clamp(28px,4vw,48px) var(--borda) clamp(64px,8vw,110px)}
.texto-artigo>p:first-child{font-size:clamp(18px,1.3vw,20px);color:var(--cacau)}
.aviso-artigo{margin-top:2.4em!important;padding-top:1.2em;border-top:1px solid rgba(132,114,107,.3);font-size:14px;color:var(--taupe)}
.lista-artigos{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(132,114,107,.22);border:1px solid rgba(132,114,107,.22)}
.lista-artigos a{display:block;height:100%;padding:clamp(26px,3vw,40px);background:var(--creme);text-decoration:none;transition:background .3s}
.lista-artigos a:hover{background:#f8f3eb}
.lista-artigos h2{margin-top:12px;font-size:clamp(24px,2.2vw,32px)}
.lista-artigos p{margin-top:12px;font-size:16px}
@media (max-width:760px){.lista-artigos{grid-template-columns:1fr}}
.nao-achei{padding-top:18vh;padding-bottom:18vh}

/* rodapé */
.rodape{padding:48px var(--borda) 36px;display:flex;flex-wrap:wrap;gap:22px 40px;align-items:center;justify-content:space-between;font-size:14px}
.rodape .marca small{display:block}
.rodape p{opacity:.8}
.rodape a{text-underline-offset:3px}
.rodape-empresa{flex-basis:100%;font-size:12.5px;line-height:1.5}
.zap-fixo{position:fixed;z-index:40;right:16px;bottom:16px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--verde-escuro);color:#fff;box-shadow:0 10px 30px rgba(18,26,47,.25)}
.zap-fixo svg{width:26px;height:26px}
@media (min-width:861px){.zap-fixo{display:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}