/* Blocos novos do site — 404, index do blog, prazo de resposta, bloco local e
   página de obrigado. Usa os mesmos tokens de styles.css, então não duplica
   paleta nem tipografia. */

/* ---------- Página 404 ---------- */
.e404{padding:150px 0 90px;max-width:760px}
.e404 .eyebrow{color:var(--gold)}
.e404 strong.e404-code{display:block;font:700 clamp(64px,13vw,132px)/.9 Outfit,sans-serif;letter-spacing:-.05em;color:var(--bright);margin:18px 0 6px}
.e404 h1{font-size:clamp(28px,4vw,44px);letter-spacing:-.03em;line-height:1.1;margin-bottom:18px}
.e404 p{color:var(--muted);font-size:16px;line-height:1.7;margin-bottom:12px;max-width:60ch}
.e404-actions{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 44px}
.e404-links{border-top:1px solid var(--line);padding-top:26px}
.e404-links h2{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:16px}
.e404-links ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.e404-links a{color:var(--gold);font-size:15px}
.e404-links a:hover{color:var(--bright)}

/* ---------- Índice do blog ---------- */
.blog-index-hero{padding:170px 0 50px;max-width:760px}
.blog-index-hero h1{font-size:clamp(32px,4.6vw,56px);letter-spacing:-.03em;line-height:1.06;margin-bottom:18px}
.blog-index-hero p{color:var(--muted);font-size:16px;line-height:1.7;max-width:60ch}
.blog-index-hero .article-crumb{margin-bottom:26px}

/* ---------- Prazo de resposta (tira de confiança) ---------- */
.prazo{display:inline-flex;align-items:center;gap:10px;font:500 12px Outfit,sans-serif;letter-spacing:.04em;color:var(--muted);border:1px solid var(--line);background:#0f172a66;border-radius:99px;padding:9px 16px;margin-top:20px}
.prazo b{color:var(--bright);font-weight:600}
.prazo::before{content:"●";font-size:8px;color:#34d399;line-height:1}

/* ---------- Bloco local (onde acontece / como chegar) ---------- */
.local{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start;margin-top:34px}
.local-map{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:linear-gradient(150deg,#18243c,#101a2c);padding:26px 28px}
.local-map h3{font-size:17px;letter-spacing:-.01em;margin-bottom:8px;color:var(--text);font-weight:600}
.local-map p{color:var(--muted);font-size:14px;line-height:1.6;margin-bottom:16px}
.local-map dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0 0 20px;font-size:14px}
.local-map dt{color:var(--muted);font:500 10px Outfit,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding-top:3px}
.local-map dd{margin:0;color:var(--text)}
.local-list{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.local-list li{border-left:2px solid var(--gold);padding-left:16px;color:var(--muted);font-size:14px;line-height:1.6}
.local-list b{display:block;color:var(--text);font-weight:500;font-size:15px;margin-bottom:2px}
@media(max-width:900px){.local{grid-template-columns:1fr}}

/* ---------- Foto real na seção "quem está no volante" ---------- */
/* Ficha de autor: retrato real do Vinicius ao lado do nome, em vez de um
   retrato grande empurrando o título. Rosto é o que a IA usa como prova de
   entidade, então a foto precisa aparecer como <img> com alt de verdade. */
.story-photo{display:flex;align-items:center;gap:14px;margin:0 0 24px;padding:6px 20px 6px 6px;max-width:430px;
  border:1px solid var(--line);border-radius:99px 18px 18px 99px;background:#0f172a66}
.story-photo img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:center 20%;flex:0 0 auto}
.story-photo figcaption{font-size:12px;line-height:1.45;color:var(--muted);padding:0;border:0}
@media(max-width:767px){.story-photo{max-width:none}}

/* ---------- Página de obrigado ---------- */
.obrigado{padding:160px 0 100px;max-width:680px}
.obrigado h1{font-size:clamp(30px,4.4vw,50px);letter-spacing:-.03em;line-height:1.08;margin:20px 0 18px}
.obrigado p{color:var(--muted);font-size:16px;line-height:1.75;margin-bottom:18px;max-width:60ch}
.obrigado-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}