/*
Theme Name: Rafael Rafic
Description: Tema do site de agenciamento de influenciadores de Rafael Rafic.
  Traz a home com o conteudo aprovado, um painel em Aparencia > Conteudo da
  home para edita-la, e o casting como tipo de conteudo proprio com filtro
  por porte, nicho e regiao. Os creators sao cadastrados na ativacao.
Author: Metrica Studio
Author URI: https://metricastudio.com.br
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: rafael-rafic
*/

/* Gerado por tools/gerar_tema.py -- nao edite a mao. */

/* ---------- home ---------- */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#28307e;color:#fff;
  font-family:Lato,"Segoe UI",system-ui,sans-serif;line-height:1.6;
  -webkit-font-smoothing:antialiased}
img,picture{max-width:100%;height:auto;display:block}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.envelope{max-width:1120px;margin:0 auto;padding:0 20px}

/* ---- topo ----
   No celular o menu inteiro na barra ocupava 132px, 16% da tela, e ainda
   quebrava em duas linhas com o "Faca parte" sozinho embaixo. Vira um painel
   que abre no botao; a barra fica com 60px. */
.topo{position:sticky;top:0;z-index:20;background:rgba(40,48,126,.96);
  backdrop-filter:blur(8px)}
.topo .envelope{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding-top:8px;padding-bottom:8px}
.topo img{height:34px;width:auto}
.marca{display:inline-flex;align-items:center;min-height:44px}

.abrir{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;background:none;border:0;color:#fff;
  font-size:19px;cursor:pointer}
.abrir:hover{color:#e88648}

.menu{display:none;position:absolute;left:0;right:0;top:100%;
  flex-direction:column;background:#28307e;padding:4px 20px 14px;
  border-bottom:1px solid rgba(255,255,255,.12)}
.menu.aberto{display:flex}
/* o padding nao e enfeite: sem ele o link fica com 18px de altura e vira
   alvo pequeno demais para o dedo (o minimo recomendado e 44px) */
.menu a{font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;display:inline-flex;align-items:center;
  min-height:48px;padding:0 2px}
.menu a:hover{color:#e88648}

/* precisa ser ".menu a.pilula", nao so ".pilula": a regra ".menu a" acima
   tem classe + elemento e ganharia no padding, deixando a borda colada no
   texto. No painel do celular o item ocupa a largura toda, entao vira botao
   preenchido -- destacado do resto da lista, que e so texto. */
.menu a.pilula{background:#e88648;color:#28307e;font-weight:700;
  border:1px solid #e88648;border-radius:10px;padding:0 18px;
  justify-content:center;margin-top:12px}
.menu a.pilula:hover{background:#f09a63;border-color:#f09a63}

/* ---- faixas com imagem de fundo ----
   Sao tres: topo, casting e o dado dos 76%. O cliente pediu essa quebrada,
   com todo o resto em azul. O veu por cima garante contraste do texto sobre
   qualquer parte da foto. */
.faixa{position:relative;overflow:hidden;isolation:isolate}
.faixa picture{position:absolute;inset:0;z-index:-2}
.faixa img{width:100%;height:100%;object-fit:cover}
.faixa::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(40,48,126,.74),rgba(40,48,126,.93))}
.capa .envelope{padding-top:64px;padding-bottom:64px}
h1{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;
  font-size:clamp(30px,7vw,56px);line-height:1.1;margin:0 0 16px;max-width:16ch}
.chamada{font-size:clamp(15px,2.4vw,19px);color:#d7d9f0;max-width:52ch;margin:0 0 28px}
.acoes{display:flex;gap:12px;flex-wrap:wrap}
.botao{display:inline-block;padding:13px 26px;border-radius:999px;
  text-decoration:none;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.botao.cheio{background:#e88648;color:#28307e;font-weight:700}
.botao.cheio:hover{background:#f09a63}
/* background explicito: em <button> o navegador aplica um cinza proprio
   (#f0f0f0 no Chrome), e o texto branco cairia para 1,14:1 */
.botao.vazio{border:1px solid rgba(255,255,255,.5);background:transparent}
.botao.vazio:hover{border-color:#e88648;color:#e88648}

/* ---- secoes ---- */
section{padding:58px 0}

/* As faixas alternadas passaram de azul escuro para cinza claro. Trocar so o
   fundo deixaria o texto branco invisivel, entao todo o conteudo delas ganha
   cor escura. Os valores foram escolhidos por contraste medido sobre
   #f6f6f6: azul da marca 10,7:1 e laranja fechado 4,6:1, ambos acima do
   minimo 4,5:1. O laranja original dava 2,45:1 e reprovava ate como texto
   grande. */
.alterna{background:#f6f6f6;color:#4a4f70}
.alterna h2{color:#b4551f}
.alterna .subtitulo{color:#5c6180}
.alterna p{color:#4a4f70}
.alterna .citacao{border-left-color:#b4551f}
.alterna .citacao p{color:#28307e}
.alterna .citacao cite{color:#b4551f}
.alterna .fonte{color:#5c6180}
.alterna .faq details{background:rgba(40,48,126,.05);
  border:1px solid rgba(40,48,126,.12)}
.alterna .faq summary{color:#28307e}
.alterna .faq summary::after{color:#b4551f}
.alterna .faq p{color:#4a4f70}
h2{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;
  font-size:clamp(24px,4.4vw,36px);margin:0 0 8px;color:#e88648}
.subtitulo{margin:0 0 30px;color:#b9bce0;font-size:14px;
  letter-spacing:.16em;text-transform:uppercase}
p{margin:0 0 16px}

.citacao{margin:0;padding:0;border-left:3px solid #e88648;padding-left:22px;
  max-width:62ch}
.citacao p{font-family:Georgia,"Times New Roman",serif;font-style:italic;
  font-size:clamp(18px,3vw,26px);line-height:1.45;margin:0 0 12px}
.citacao cite{font-style:normal;font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;color:#e88648}

.dupla{display:grid;gap:34px;align-items:center}
.dupla img{border-radius:14px}
.dupla p{color:#d7d9f0}
/* Referencia do cliente: foto grande, circulo com o anel colorido (o mesmo
   gradiente dos cartoes do casting) e o circulo cortado pela borda direita
   da secao. O corte vem de overflow:hidden com margem negativa -- sem o
   overflow, a margem negativa criaria rolagem horizontal em telas de
   largura proxima a do envelope. */
#sobre{padding:42px 0}
#sobre .dupla{gap:26px}
#sobre p{font-size:15px}
#sobre .retrato{width:200px;height:200px;border-radius:50%;padding:4px;
  background:linear-gradient(135deg,#e88648,#d6407f 55%,#7b3fa0);
  margin:0 auto}
#sobre .retrato picture{display:block;width:100%;height:100%}
#sobre .retrato img{width:100%;height:100%;border-radius:50%;
  object-fit:cover;object-position:center 18%;max-height:none}
@media(min-width:760px){
  #sobre .dupla{grid-template-columns:1fr auto;gap:52px;align-items:center}
  #sobre .retrato{width:170px;height:170px;margin:0}
}
/* Do desktop largo em diante o circulo sai da grade e passa a ser ancorado a
   borda DIREITA DA SECAO, que ocupa a tela toda. Com margem negativa dentro
   da grade ele nunca chegava a cortar: o envelope e centralizado, entao a
   borda dele fica a 80px do fim da tela em 1280px e mais longe ainda em
   telas maiores. Ancorado assim, o corte acontece em qualquer largura. */
@media(min-width:1024px){
  /* Partiu da altura do bloco de paragrafos (144px medidos) e subiu para
     200px a pedido -- "so mais um pouco". Continua dentro da grade: o
     recorte pela borda direita servia a um circulo grande. */
  #sobre{padding:48px 0}
  #sobre .dupla{grid-template-columns:1fr auto;gap:56px;align-items:center}
  #sobre .retrato{width:200px;height:200px;padding:4px;margin:0}
  #sobre p{font-size:16px}
}

/* ---- numeros do casting ---- */
.numeros{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:0 0 28px;
  padding:0;list-style:none}
.numeros li{background:rgba(255,255,255,.06);border-radius:12px;padding:18px}
.numeros b{display:block;font-size:clamp(26px,5vw,38px);line-height:1.1;
  color:#e88648;font-weight:700}
.numeros span{font-size:13px;color:#b9bce0}

/* o mockup dele poe o botao no canto direito, abaixo da faixa de fotos */
.acoes-direita{display:flex;justify-content:flex-start;margin-top:26px}
@media(min-width:760px){.acoes-direita{justify-content:flex-end}}

.marcas{background:#fff;border-radius:14px;padding:18px}
.fonte{font-size:12px;color:#9aa0d4;margin-top:10px}

.destaque{font-family:Georgia,"Times New Roman",serif;font-style:italic;
  font-size:clamp(20px,4vw,32px);line-height:1.35;max-width:24ch;margin:0 0 8px}

.icone{width:22px;height:22px;flex:none;fill:currentColor}
.abrir .icone{width:24px;height:24px}

/* ---- faixa abobora do formulario ----
   Fundo mais torrado que a abobora da marca para sustentar texto branco
   (4,95:1; sobre a abobora original o branco dava 2,65:1).

   Os campos levam veu PRETO, nao branco: clarear o fundo derrubaria o
   branco do texto -- medido, veu branco reprova em qualquer nivel, ate a 6%%
   (4,46:1). Com preto a 12%% o branco sobe para 6,06:1. */
#faca-parte{background:#e88648;color:#fff}
#faca-parte h2,#faca-parte .subtitulo,#faca-parte legend,
#faca-parte .campo label,#faca-parte .sublabel,#faca-parte .marcador{
  color:#fff}
/* solido: a 90%% dava 4,32:1 e a 78%%, 3,65:1. O corpo menor e o
   parenteses ja marcam que e secundario, sem precisar de opacidade. */
#faca-parte .campo .opcional{color:#fff}
/* caixas brancas com texto preto: 20,6:1, o maior contraste possivel na
   faixa. Os rotulos por fora seguem em branco sobre a abobora. */
#faca-parte .campo input,#faca-parte .campo textarea{
  background:#fff;border-color:rgba(0,0,0,.2);color:#111}
#faca-parte .campo input:hover,#faca-parte .campo textarea:hover{
  border-color:rgba(0,0,0,.36)}
/* cinza escuro sobre branco: 7,0:1 -- passa e ainda le mais leve que o
   texto digitado */
#faca-parte .campo input::placeholder,
#faca-parte .campo textarea::placeholder{color:#595959;opacity:1}
#faca-parte .campo input:focus,#faca-parte .campo textarea:focus{
  outline-color:#111}
#faca-parte .redes-campo{border-color:rgba(255,255,255,.28)}
#faca-parte .marcador input{accent-color:#fff}
/* texto do botao no azul da marca: a abobora sobre branco daria 2,65:1 */
#faca-parte .botao.cheio{background:#fff;color:#28307e}
#faca-parte .botao.cheio:hover{background:#ffe9dc}
#faca-parte .botao.vazio{border-color:rgba(255,255,255,.6);color:#fff}
#faca-parte .botao.vazio:hover{background:#fff;color:#28307e;
  border-color:#fff}
#faca-parte .recado{background:#fff;border-left-color:#28307e;color:#111}
#faca-parte .erro{color:#ffd9d4}

/* ---- formulario "Faca parte" ---- */
.formulario{display:grid;gap:18px;max-width:760px}
/* Nome, WhatsApp e E-mail na mesma linha; empilham no celular */
.trio{display:grid;gap:18px}
@media(min-width:760px){
  .trio{grid-column:1 / -1;grid-template-columns:repeat(3,1fr)}
}
.campo{display:flex;flex-direction:column;gap:7px}
.campo label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:#b9bce0}
.campo .opcional{text-transform:none;letter-spacing:0;color:#8f95c9}
.campo input,.campo textarea{font:inherit;font-size:15px;color:#fff;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  border-radius:10px;padding:13px 14px;min-height:48px}
.campo textarea{min-height:110px;resize:vertical}
.campo input::placeholder,.campo textarea::placeholder{color:#7f86bd}
.campo input:focus,.campo textarea:focus{outline:2px solid #e88648;
  outline-offset:1px;border-color:transparent}
.campo input[aria-invalid="true"]{border-color:#ff9a8b}
.erro{font-size:12px;color:#ff9a8b;min-height:0}
.formulario button{border:0;cursor:pointer;font:inherit;justify-self:start}
/* "Redes sociais" agrupa os tres links, como ele escreveu, com a opcao de
   nao possuir nenhuma */
.redes-campo{border:1px solid rgba(255,255,255,.18);border-radius:10px;
  padding:16px;margin:0}
.redes-campo legend{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:#b9bce0;padding:0 6px}
.tres{display:grid;gap:14px}
@media(min-width:760px){.tres{grid-template-columns:repeat(3,1fr)}}
.sublabel{display:flex;flex-direction:column;gap:6px;font-size:13px;
  color:#b9bce0}
.marcador{display:flex;align-items:center;gap:10px;margin-top:14px;
  font-size:14px;color:#d7d9f0;min-height:44px;cursor:pointer}
.marcador input{width:20px;height:20px;min-height:0;accent-color:#e88648;
  flex:none}
.acoes-form{flex-direction:row;flex-wrap:wrap;gap:12px;align-items:center}
.acoes-form .recado{flex-basis:100%}

.recado{margin:0;font-size:14px;padding:14px 16px;border-radius:10px;
  background:rgba(255,255,255,.08);border-left:3px solid #e88648}
.recado[hidden]{display:none}
/* erro usa a mesma caixa, com a barra em outro tom */
.recado-erro{border-left-color:#8c1d18}


/* ---- perguntas frequentes ---- */
.faq{display:grid;gap:14px}
.faq details{background:rgba(255,255,255,.06);border-radius:12px;
  padding:16px 18px}
.faq summary{cursor:pointer;font-weight:700;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:center;
  min-height:28px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:#e88648;font-size:22px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:12px 0 0;color:#d7d9f0}

/* ---- telas largas ---- */
@media(min-width:760px){
  section{padding:76px 0}
  .capa .envelope{padding-top:112px;padding-bottom:112px}
  .dupla{grid-template-columns:1fr 1fr;gap:48px}
  .dupla.invertida > *:first-child{order:2}
  .numeros{grid-template-columns:repeat(4,1fr)}
  .formulario{grid-template-columns:1fr 1fr}
  .campo.largo{grid-column:1 / -1}
  .abrir{display:none}
  .menu{display:flex;position:static;flex-direction:row;align-items:center;
    gap:26px;background:none;border:0;padding:0}
  .menu a{min-height:44px}
  .topo .envelope{padding-top:14px;padding-bottom:14px}
  .topo img{height:42px}
  /* na barra ele volta a ser contornado: preenchido competiria com o botao
     principal da capa, que fica logo abaixo */
  .menu a.pilula{background:none;color:#e88648;font-weight:400;
    border-radius:999px;margin-top:0}
  .menu a.pilula:hover{background:#e88648;color:#28307e;
    border-color:#e88648}
}


/* ---------- pagina de casting ---------- */
*, *::before, *::after{box-sizing:border-box}
body.rafic-casting{margin:0;background:#28307e;color:#fff;
  font-family:Lato,"Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body.rafic-casting nav.aberto{display:flex}
body.rafic-casting .abas{display:flex;gap:28px;flex-wrap:wrap;margin:30px 0 0;padding:0 0 12px;
  border-bottom:1px solid rgba(255,255,255,.16)}
body.rafic-casting .aba{background:none;border:0;padding:0 0 6px;color:#c9cbe8;cursor:pointer;
  font:inherit;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  border-bottom:2px solid transparent;margin-bottom:-13px}
body.rafic-casting .aba:hover{color:#fff}
body.rafic-casting .aba[aria-selected="true"]{color:#e88648;border-bottom-color:#e88648}
body.rafic-casting .chips{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0}
/* sem isto o display:flex acima vence o [hidden] do navegador (mesma
   especificidade, e este vem depois) e todos os grupos aparecem juntos */
body.rafic-casting .chips[hidden]{display:none}
body.rafic-casting .chip{background:rgba(255,255,255,.08);border:1px solid transparent;border-radius:999px;
  padding:7px 15px;color:#e6e7f5;cursor:pointer;font:inherit;font-size:13px;
  display:inline-flex;align-items:center;gap:7px}
body.rafic-casting .chip:hover{background:rgba(255,255,255,.16)}
body.rafic-casting .chip[aria-pressed="true"]{background:#e88648;color:#28307e;font-weight:700}
body.rafic-casting .chip .n{opacity:.65;font-size:11px}
body.rafic-casting .chip[aria-pressed="true"] .n{opacity:.8}
body.rafic-casting .contagem{margin:22px 0 6px;font-size:13px;color:#c9cbe8}
body.rafic-casting .contagem b{color:#e88648}
body.rafic-casting .grade{display:grid;gap:34px 26px;padding:14px 0 60px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
body.rafic-casting .cartao{text-align:center}
body.rafic-casting .cartao[hidden]{display:none}
body.rafic-casting .anel{width:132px;height:132px;margin:0 auto 16px;border-radius:50%;padding:3px;
  background:linear-gradient(135deg,#e88648,#d6407f 55%,#7b3fa0)}
body.rafic-casting .avatar{width:100%;height:100%;border-radius:50%;background:#343c8c;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-size:34px;letter-spacing:.04em;color:#fff}
body.rafic-casting .avatar img{width:100%;height:100%;object-fit:cover;display:block}
body.rafic-casting .cartao h3{font-family:Georgia,"Times New Roman",serif;font-style:italic;
  font-weight:400;font-size:22px;margin:0 0 4px;color:#e88648}
body.rafic-casting .nicho{margin:0 0 3px;font-size:12px;color:#c9cbe8}
body.rafic-casting .cidade{margin:0 0 12px;font-size:13px;color:#7fd4d0}
body.rafic-casting .redes{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
body.rafic-casting .rede{display:flex;flex-direction:column;align-items:center;gap:5px;
  color:#fff;text-decoration:none;font-size:15px;min-width:34px}
body.rafic-casting .rede .icone{width:16px;height:16px;fill:currentColor;display:block}
body.rafic-casting .rede b{font-size:11px;font-weight:400;color:#c9cbe8}
body.rafic-casting .rede:hover{color:#e88648}
body.rafic-casting .rede:hover b{color:#e88648}
body.rafic-casting .email{display:inline-block;padding-top:11px;font-size:11px;color:#9aa0d4;
  text-decoration:none;border-top:1px solid rgba(255,255,255,.16);min-width:190px}
body.rafic-casting .email:hover{color:#e88648}
body.rafic-casting button.anel{border:0;cursor:pointer;font:inherit;color:inherit;display:block}
body.rafic-casting button.anel:focus-visible{outline:2px solid #e88648;outline-offset:4px}
/* ---- ficha em tela cheia ---- */
body.rafic-casting dialog.ficha{border:0;padding:0;margin:0;width:100%;max-width:100%;
  height:100%;max-height:100%;background:#28307e;color:#fff;overflow:auto}
body.rafic-casting dialog.ficha::backdrop{background:rgba(10,14,48,.72)}
body.rafic-casting .ficha-fechar{position:sticky;top:0;margin-left:auto;display:flex;
  align-items:center;justify-content:center;width:48px;height:48px;
  background:none;border:0;color:#fff;cursor:pointer;font-size:26px;
  line-height:1}
body.rafic-casting .ficha-fechar:hover{color:#e88648}
body.rafic-casting .ficha-fechar:focus-visible{outline:2px solid #e88648;outline-offset:-4px}
body.rafic-casting .ficha-corpo{display:flex;align-items:center;justify-content:center;
  min-height:calc(100% - 48px);padding:0 24px 48px}
body.rafic-casting .ficha-corpo .cartao{max-width:520px}
body.rafic-casting .ficha-corpo .anel{width:200px;height:200px;margin-bottom:26px}
body.rafic-casting .ficha-corpo .avatar{font-size:52px}
body.rafic-casting .ficha-corpo h3{font-size:34px;margin-bottom:8px}
body.rafic-casting .ficha-corpo .nicho{font-size:15px;margin-bottom:6px}
body.rafic-casting .ficha-corpo .cidade{font-size:17px;margin-bottom:26px}
body.rafic-casting .ficha-corpo .redes{gap:22px;margin-bottom:22px}
body.rafic-casting .ficha-corpo .rede .icone{width:22px;height:22px}
body.rafic-casting .ficha-corpo .rede b{font-size:13px}
body.rafic-casting .ficha-corpo .email{font-size:13px;padding-top:18px}
/* animacao curta: 180ms para entrar, 140ms para sair */
body.rafic-casting @keyframes ficha-entra{from{opacity:0;transform:translateY(10px)}
                       to{opacity:1;transform:none}}
@keyframes ficha-fundo{from{opacity:0} to{opacity:1}}
body.rafic-casting dialog.ficha[open]{animation:ficha-entra .18s ease-out}
body.rafic-casting dialog.ficha[open]::backdrop{animation:ficha-fundo .18s ease-out}
/* nome proprio para a saida: reaproveitar "ficha-entra" com reverse nao
   reinicia a animacao (o nome nao muda), o animationend nunca dispara e a
   ficha fica presa aberta */
body.rafic-casting @keyframes ficha-sai{from{opacity:1;transform:none}
                     to{opacity:0;transform:translateY(6px)}}
@keyframes ficha-fundo-sai{from{opacity:1} to{opacity:0}}
body.rafic-casting dialog.ficha.fechando{animation:ficha-sai .14s ease-in forwards}
body.rafic-casting dialog.ficha.fechando::backdrop{animation:ficha-fundo-sai .14s ease-in forwards}
@media(prefers-reduced-motion:reduce){
body.rafic-casting dialog.ficha[open], body.rafic-casting dialog.ficha[open]::backdrop, body.rafic-casting dialog.ficha.fechando, body.rafic-casting dialog.ficha.fechando::backdrop{animation:none}
}
body.rafic-casting .vazio{padding:50px 0 70px;text-align:center;color:#c9cbe8}
@media(max-width:620px){
body.rafic-casting .grade{grid-template-columns:1fr 1fr;gap:26px 16px}
body.rafic-casting .anel{width:96px;height:96px}
body.rafic-casting .avatar{font-size:25px}
body.rafic-casting .cartao h3{font-size:17px}
body.rafic-casting .redes{gap:9px}
body.rafic-casting .email{min-width:0;word-break:break-all}
body.rafic-casting .abas{gap:18px}
body.rafic-casting .abas{margin-top:18px}
body.rafic-casting .contagem{margin:14px 0 0}
body.rafic-casting .grade{padding-top:8px}
}

/* ---------- rodape ---------- */

.rodape{margin-top:auto;border-top:1px solid rgba(255,255,255,.14);
  padding:30px 0 0;font-size:14px;color:#b9bce0}
.rodape .envelope{display:grid;gap:22px}
.rodape h2{font-family:Georgia,"Times New Roman",serif;font-style:italic;
  font-weight:400;font-size:20px;color:#fff;margin:0 0 4px}
.rodape .lema{margin:0;max-width:34ch;color:#9aa0d4;font-size:13px}
.rodape h3{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;margin:0 0 4px;font-weight:700}
.rodape ul{list-style:none;margin:0;padding:0}
/* Os 44px de area de toque continuam, mas o texto fica no topo da caixa em
   vez de centralizado: e o que aproxima visualmente as linhas sem tirar o
   alvo do dedo. Ele pediu "mais juntinhos". */
.rodape li a{color:#b9bce0;text-decoration:none;display:flex;
  align-items:flex-start;min-height:40px;padding-top:9px;line-height:1.3}
.rodape a{color:#b9bce0;text-decoration:none}
.rodape a:hover{color:#e88648}

/* redes desenhadas, nao escritas */
.rodape .redes{display:flex;gap:10px;margin-top:10px}
.rodape .redes a{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:1px solid rgba(255,255,255,.22);
  border-radius:10px}
.rodape .redes a:hover{border-color:#e88648;color:#e88648}
.rodape .redes svg{width:19px;height:19px;fill:currentColor}

.rodape .barra{margin-top:24px;border-top:1px solid rgba(255,255,255,.1);
  padding:14px 0 20px;display:flex;justify-content:space-between;
  gap:8px 20px;flex-wrap:wrap;font-size:12px;color:#8f95c9}
/* inline-flex com altura: cresce a area de toque sem tirar o
   link de dentro da frase */
.rodape .barra a{display:inline-flex;align-items:center;
  min-height:44px;color:#8f95c9}
@media(min-width:760px){
  .rodape .envelope{grid-template-columns:1.6fr 1fr 1fr;gap:40px}
}