/* Home · Crio sua marca
   CSS só desta página. Carrega depois de todos os outros,
   então o que estiver aqui tem a última palavra. */

/* ==========================================================================
   QUEM ESTÁ À FRENTE — o banner "Eu sou o Zé Paulo Gomes"

   É o mesmo banner da home do site pessoal (zepaulogomes.com.br), medida
   por medida, para a pessoa reconhecer o Zé de um site para o outro:

   · fundo preto liso, sem foto atrás;
   · o retrato à esquerda, em pé (2:3), cantos de 28px, com um bloco
     amarelo deslocado 22px para baixo e para a esquerda por trás;
   · à direita: o chapéu amarelo em caixa alta, o nome em Anton de 56px, a
     frase cinza-clara, as seis credenciais em duas colunas (ícone num
     círculo amarelo de 36px, sem cartão nem borda) e os botões.

   Os botões seguem o site do Zé: o primeiro amarelo cheio, os outros
   vazados com traço branco. A classe é própria (autorZe) para não herdar
   nada da dobra antiga (.autor), que tinha fotos de fundo e cartões.
   ========================================================================== */
.autorZe{
  position:relative; width:100%; margin:0; box-sizing:border-box;
  background:#000; color:#fff;
  padding:120px 28px 120px;
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.autorZe *, .autorZe *::before, .autorZe *::after{ box-sizing:border-box; }

.autorZe__interno{
  position:relative; max-width:1120px; margin:0 auto; width:100%;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -ms-flex-wrap:wrap; flex-wrap:wrap;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  gap:88px;
}

/* ---------- o retrato com a moldura amarela ---------- */
.autorZe__foto{
  -webkit-box-flex:0; -ms-flex:0 1 360px; flex:0 1 360px;
  max-width:360px; position:relative;
}
.autorZe__foto::before{
  content:''; position:absolute;
  left:-22px; top:22px; right:22px; bottom:-22px;
  background:#feec34; border-radius:30px;
}
.autorZe__quadro{
  position:relative; margin:0; overflow:hidden;
  border-radius:28px; background:#141414;
}
/* a proporção vem do padding; o aspect-ratio entra onde existir */
.autorZe__quadro::before{ content:''; display:block; padding-top:150%; }
.autorZe__quadro img{
  position:absolute; top:0; left:0; width:100%; height:100%;
  display:block; margin:0; border:0; max-width:100%;
  -o-object-fit:cover; object-fit:cover;
  -o-object-position:center top; object-position:center top;
}

/* ---------- a fala ---------- */
.autorZe__texto{ -webkit-box-flex:1; -ms-flex:1 1 480px; flex:1 1 480px; min-width:0; }

.autorZe p.autorZe__chapeu{
  display:inline-block; margin:0 0 22px; line-height:1;
  font-size:12px; font-weight:700; letter-spacing:2.2px; text-transform:uppercase;
  color:#000; background:#feec34; padding:7px 12px; border-radius:4px;
}
.autorZe .autorZe__titulo{
  font-family:'Anton', Impact, sans-serif; font-weight:400;
  font-size:56px; line-height:.98; letter-spacing:.4px; text-transform:uppercase;
  color:#fff; margin:0 0 22px; text-shadow:none;
  text-wrap:balance;
}
.autorZe .autorZe__frase{
  margin:0 0 36px; max-width:520px;
  font-size:17px; line-height:1.7; color:#d6d6cc; text-shadow:none;
  text-wrap:balance;
}

/* ---------- as credenciais, sem cartão ---------- */
.autorZe__creds{
  list-style:none; margin:0 0 38px; padding:0;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -ms-flex-wrap:wrap; flex-wrap:wrap;
  gap:10px 28px;
}
.autorZeCred{
  -webkit-box-flex:0; -ms-flex:0 1 calc(50% - 14px); flex:0 1 calc(50% - 14px);
  min-width:240px; margin:0; padding:8px 0;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  gap:12px;
  border:0; background:transparent;
}
.autorZeCred__icone{
  -webkit-box-flex:0; -ms-flex:0 0 36px; flex:0 0 36px;
  width:36px; height:36px; border-radius:50%;
  background:#feec34; color:#000;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
}
.autorZeCred__icone svg{ width:18px; height:18px; display:block; }
.autorZeCred__corpo{ display:block; min-width:0; }
.autorZe .autorZeCred__valor{
  display:block; margin:0;
  font-size:14px; font-weight:700; line-height:1.25; color:#fff;
}
.autorZe .autorZeCred__rotulo{
  display:block; margin-top:2px;
  font-size:12.5px; line-height:1.3; color:#9a9a90;
}

/* ---------- os botões: o amarelo em cima, os dois vazados embaixo, um
   sobre o outro, alinhados à esquerda como o resto da fala ---------- */
.autorZe__botoes{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-orient:vertical; -webkit-box-direction:normal;
  -ms-flex-direction:column; flex-direction:column;
  -webkit-box-align:start; -ms-flex-align:start; align-items:flex-start;
  gap:12px;
}
.autorZe .btn{
  min-height:56px; padding:0 30px; gap:10px;
  border-width:2px; border-radius:40px;
  font-size:15.5px; font-weight:700; line-height:1; white-space:nowrap;
}
.autorZe .btn--principal,
.autorZe .btn--principal .btn__texto{ background:#feec34; color:#000; }
.autorZe .btn--principal{ border-color:#feec34; }
.autorZe .btn--principal:hover, .autorZe .btn--principal:focus{ background:#000; border-color:#000; }
.autorZe .btn--principal:hover, .autorZe .btn--principal:hover .btn__texto,
.autorZe .btn--principal:focus, .autorZe .btn--principal:focus .btn__texto{ background:transparent; color:#feec34; }

.autorZe .btn--secundario,
.autorZe .btn--secundario .btn__texto{ background:transparent; color:#fff; }
.autorZe .btn--secundario{ border-color:#fff; border-width:2px; }
.autorZe .btn--secundario:hover, .autorZe .btn--secundario:focus{ background:#feec34; border-color:#feec34; }
.autorZe .btn--secundario:hover, .autorZe .btn--secundario:hover .btn__texto,
.autorZe .btn--secundario:focus, .autorZe .btn--secundario:focus .btn__texto{ color:#000; }

.autorZe .btn .btn__seta{
  display:inline-block; width:8px; height:8px;
  border-right:2.5px solid currentColor; border-top:2.5px solid currentColor;
  -webkit-transform:rotate(45deg); transform:rotate(45deg);
  -webkit-transition:.22s ease-in; transition:.22s ease-in;
}
.autorZe .btn:hover .btn__seta, .autorZe .btn:focus .btn__seta{
  -webkit-transform:translateX(4px) rotate(45deg); transform:translateX(4px) rotate(45deg);
}

/* ---------- sem retrato cadastrado: a fala ocupa a largura e centraliza ---------- */
.autorZe--semFoto .autorZe__interno{ -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; }
.autorZe--semFoto .autorZe__texto{ -ms-flex:1 1 100%; flex:1 1 100%; max-width:820px; text-align:center; }
.autorZe--semFoto .autorZe__frase{ margin-left:auto; margin-right:auto; }
.autorZe--semFoto .autorZe__creds{ -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; }
.autorZe--semFoto .autorZe__botoes{ -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; }

/* ---------- no celular: o retrato em cima, tudo pelo meio ---------- */
@media (max-width:900px){
  .autorZe{ padding:64px 16px 64px; text-align:center; }
  .autorZe__interno{ gap:40px; }
  .autorZe__foto{
    -ms-flex:1 1 100%; flex:1 1 100%; max-width:320px;
    margin-left:auto; margin-right:auto;
  }
  .autorZe__foto::before{ left:-14px; top:14px; right:14px; bottom:-14px; border-radius:24px; }
  .autorZe__texto{ -ms-flex:1 1 100%; flex:1 1 100%; }
  .autorZe p.autorZe__chapeu{ margin-bottom:16px; }
  .autorZe .autorZe__titulo{ font-size:44px; }
  .autorZe .autorZe__frase{ font-size:16.5px; margin-left:auto; margin-right:auto; }

  /* cada credencial vira uma coluna centrada: ícone em cima, texto embaixo */
  .autorZe__creds{ -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; gap:6px 0; }
  .autorZeCred{
    -ms-flex:1 1 100%; flex:1 1 100%; min-width:0;
    -webkit-box-orient:vertical; -webkit-box-direction:normal;
    -ms-flex-direction:column; flex-direction:column;
    gap:8px; padding:12px 0; text-align:center;
  }
  .autorZeCred__icone{ margin:0 auto; }

  .autorZe__botoes{ -webkit-box-align:center; -ms-flex-align:center; align-items:center; }
  .autorZe__botoes .btn{ width:100%; max-width:360px; }
}

@media (min-width:641px) and (max-width:900px){
  /* na tela média cabem duas credenciais por linha, ainda centradas */
  .autorZeCred{ -ms-flex:1 1 50%; flex:1 1 50%; }
}

@media (max-width:640px){
  .autorZe .autorZe__titulo{ font-size:38px; }
}

/* ==========================================================================
   OS TÍTULOS DAS FAIXAS DE VÍDEO
   Antes eram escritos em caixa alta no próprio código. Agora vêm do
   gerenciador, digitados normalmente, e a caixa alta é do estilo: assim o
   padrão dos títulos (Anton, caixa alta) não depende de como se digita.
   ========================================================================== */
.elementor-widget-heading .elementor-heading-title{ text-transform:uppercase; }