/* ============================================================
   Blocos da página "A Berrante".
   Carregado depois de site.css e blocos.css.
   ============================================================ */

/* ---------- herói com retrato ao lado ---------- */
.hero-duplo .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(26px,4vw,56px);align-items:center}
@media (max-width:900px){.hero-duplo .wrap{grid-template-columns:1fr}}
.hero-foto{position:relative;border-radius:var(--raio-cartao);overflow:hidden;border:1px solid var(--linha-escuro);box-shadow:0 44px 110px -50px #000;aspect-ratio:4/5;max-height:560px}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.hero-foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 18px 14px;font-family:var(--f-titulo);font-weight:700;font-size:.72rem;letter-spacing:.06em;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.88))}
@media (max-width:900px){.hero-foto{max-height:420px;aspect-ratio:16/11}.hero-foto img{object-position:center 25%}}

/* ---------- origem: retrato + texto ---------- */
.retrato-texto{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(26px,4vw,52px);align-items:start;margin-top:34px}
@media (max-width:820px){.retrato-texto{grid-template-columns:1fr}}
.retrato{border-radius:var(--raio-cartao);overflow:hidden;border:1px solid var(--linha);background:var(--palha);position:sticky;top:90px}
.escura .retrato{border-color:var(--linha-escuro);background:var(--superficie-escura)}
.retrato img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 18%}
.retrato figcaption{padding:16px 18px 18px}
.retrato .nome{font-family:var(--f-titulo);font-weight:900;font-size:1.12rem;line-height:1.1}
.retrato .cargo{font-family:var(--f-titulo);font-weight:700;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-laranja);margin-top:6px}
.escura .retrato .cargo{color:var(--amarelo)}
.escura .retrato .nome{color:#fff}
@media (max-width:820px){.retrato{position:static;max-width:320px}}
.texto-corrido p{color:var(--texto-2);margin-top:16px;max-width:64ch;font-size:1.04rem}
.escura .texto-corrido p{color:var(--no-escuro-3)}
.texto-corrido p:first-child{margin-top:0}
.texto-corrido p b{font-family:var(--f-titulo);font-weight:700;color:var(--texto)}
.escura .texto-corrido p b{color:#fff}
.marco-frase{padding:0;margin-top:26px;font-family:var(--f-titulo);font-weight:800;font-size:clamp(1.1rem,2vw,1.4rem);line-height:1.25;color:var(--texto);max-width:34ch}
.escura .marco-frase{color:#fff}

/* ---------- o livro ---------- */
.livro{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(26px,4vw,54px);align-items:center;margin-top:34px}
@media (max-width:820px){.livro{grid-template-columns:1fr;justify-items:start}}
.livro-capa{border-radius:10px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.08);max-width:330px;transform:rotate(-2deg);transition:transform .5s var(--curva)}
.livro-capa:hover{transform:rotate(0) translateY(-4px)}
.livro-capa img{width:100%;display:block}
.livro-etapas{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:26px}
@media (max-width:640px){.livro-etapas{grid-template-columns:1fr 1fr}}
.etapa{border:1px solid var(--linha-escuro);border-radius:var(--raio);padding:14px 12px;text-align:center}
.etapa .n{font-family:var(--f-titulo);font-weight:900;font-size:.72rem;color:var(--amarelo)}
.etapa .t{font-family:var(--f-titulo);font-weight:700;font-size:.92rem;color:#fff;margin-top:6px}

/* ---------- mídia e palco ---------- */
.midia{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
@media (max-width:900px){.midia{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.midia{grid-template-columns:1fr}}
.midia figure{margin:0;border-radius:var(--raio-cartao);overflow:hidden;border:1px solid var(--linha);background:var(--palha);position:relative}
.escura .midia figure{border-color:var(--linha-escuro);background:var(--superficie-escura)}
.midia img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.midia figure img,.midia figure video{aspect-ratio:3/4}
.midia figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 14px 12px;font-family:var(--f-titulo);font-weight:700;font-size:.8rem;line-height:1.25;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.9))}
.midia figcaption span{display:block;font-family:var(--f-texto);font-weight:300;font-size:.74rem;color:var(--no-escuro-3);margin-top:4px}

/* ---------- time ---------- */
.time{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;margin-top:34px}
.pessoa{border-radius:var(--raio-cartao);overflow:hidden;border:1px solid var(--linha);background:var(--cartao)}
.pessoa img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center}
.pessoa .txt{padding:14px 16px 16px}
.pessoa .nome{font-family:var(--f-titulo);font-weight:900;font-size:1rem;line-height:1.1}
.pessoa .cargo{font-family:var(--f-titulo);font-weight:700;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-laranja);margin-top:6px;line-height:1.3}
.pessoa.vaga{display:grid;place-items:center;text-align:center;padding:26px 18px;background:var(--palha);border-style:dashed;color:var(--texto-2)}
.pessoa.vaga .n{font-family:var(--f-titulo);font-weight:900;font-size:1.35rem;color:var(--texto-laranja);line-height:1}
.pessoa.vaga p{font-size:.86rem;margin-top:8px}

/* ---------- legado / família ---------- */
.legado{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,34px);align-items:center;margin-top:32px}
@media (max-width:820px){.legado{grid-template-columns:1fr}}
.legado-fotos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.legado-fotos figure{margin:0;border-radius:var(--raio-cartao);overflow:hidden;border:1px solid var(--linha)}
.escura .legado-fotos figure{border-color:var(--linha-escuro)}
.legado-fotos img{width:100%;aspect-ratio:3/4;object-fit:cover}


/* ---------- cartão de vídeo ----------
   Os vídeos são depoimentos: o áudio é o conteúdo. Entram parados, com
   poster e botão — nada de autoplay mudo, que entregaria boca mexendo e
   nenhuma informação. */
.hero-foto.video-card video{object-position:center 25%}

/* aviso de som, quando o navegador recusou o áudio no primeiro toque */