/* ═══════════════════════════════════════════════════════════════
   Sistema visual do Movimento ID (páginas redesenhadas: classe "site" no <body>)
   Identidade: as quatro cores da marca como estrutura (faixa), fotos reais
   inteiras e em cores, tipografia grande, cantos retos e sombra dura.
   Cada página tem o seu CSS (home.css, paginas.css); o que é comum fica aqui.
   Evitar: gradientes suaves, vidro fosco, cartões com ícone, etiquetas em
   pílula, granulado, texto vazado e filtro de cor sobre as fotos.
   Ao mudar este arquivo, incremente o ?v= nas páginas (cache de 30 dias).
   ═══════════════════════════════════════════════════════════════ */

.site {
    --h-blue: var(--id-blue, #134F7D);
    --h-green: var(--id-green, #0F8245);
    --h-yellow: var(--id-yellow, #ECA219);
    --h-orange: var(--id-orange, #E7492E);
    --h-paper: var(--parchment, #fdfbf7);
    --h-muted: rgba(19, 79, 125, 0.78);
    --h-stripe: linear-gradient(90deg, var(--h-blue) 0 25%, var(--h-green) 25% 50%, var(--h-yellow) 50% 75%, var(--h-orange) 75% 100%);
    background: var(--h-paper);
}

.site *, .site *::before, .site *::after { box-sizing: border-box; }
.h-photo img { height: auto; }

/* Menu: mesmo desenho, com a faixa de quatro cores no lugar do fio amarelo */
.site nav.sylvan-blur {
    background: rgba(253, 251, 247, 0.96);
    backdrop-filter: none;
    border-bottom: 0;
}
.site nav.sylvan-blur::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 5px;
    background: var(--h-stripe);
}

.h-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* Etiqueta de seção: faixa curta de quatro cores + texto, sem pílula */
.h-label {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.h-label::before {
    content: '';
    width: 38px;
    height: 8px;
    flex: none;
    background: var(--h-stripe);
}

.h-arr { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: square; }

/* Botões: retos, com sombra dura */
.h-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1rem 1.5rem;
    border: 2px solid var(--h-blue);
    background: var(--h-blue);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 5px 5px 0 var(--h-orange);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.h-btn:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--h-orange); }
.h-btn--ghost { background: transparent; color: var(--h-blue); box-shadow: 5px 5px 0 var(--h-yellow); }
.h-btn--ghost:hover { box-shadow: 2px 2px 0 var(--h-yellow); }
.h-btn--light { background: var(--h-paper); border-color: var(--h-paper); color: var(--h-blue); box-shadow: 5px 5px 0 var(--h-yellow); }
.h-btn--light:hover { box-shadow: 2px 2px 0 var(--h-yellow); }
.h-btn--lima { background: #ACDA39; border-color: #ACDA39; color: #072A2F; box-shadow: 5px 5px 0 #4BBFC7; }
.h-btn--lima:hover { box-shadow: 2px 2px 0 #4BBFC7; }

.site a:focus-visible, .site .h-btn:focus-visible {
    outline: 3px solid var(--h-orange);
    outline-offset: 3px;
}

.h-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: inherit;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 2px solid currentColor;
    padding-bottom: 0.25rem;
}
.h-link:hover { gap: 0.9rem; }


.h-mark {
    box-shadow: inset 0 -0.3em 0 var(--h-yellow);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.h-lede {
    max-width: 34rem;
    margin: 0 0 2.4rem;
    color: var(--h-muted);
    font-size: 1.2rem;
    line-height: 1.65;
}
.h-actions { display: flex; flex-wrap: wrap; gap: 1.1rem 1.4rem; }

/* Foto com moldura de cor deslocada (a legenda fica fora do bloco colorido) */
.h-photo { position: relative; margin: 0 18px 0 0; }
.h-frame { position: relative; }
.h-frame::before {
    content: '';
    position: absolute;
    inset: 20px -18px -20px 18px;
    background: var(--h-yellow);
}
.h-photo img { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.h-photo figcaption {
    position: relative;
    margin-top: 2.2rem;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--h-muted);
}

/* ── Entrada suave (só quando o JS está ativo) ────────────────── */
.js .h-rv { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .h-rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .js .h-rv { opacity: 1; transform: none; transition: none; }
    .h-btn { transition: none; }
}

@media (max-width: 1023px) {
    .h-photo { max-width: 540px; margin-right: 18px; }
}
@media (max-width: 560px) {
    .h-wrap { padding: 0 18px; }
    .h-photo { margin-right: 14px; }
    .h-frame::before { inset: 14px -14px -14px 14px; }
    .h-lede { font-size: 1.1rem; }
    .h-btn { width: 100%; justify-content: space-between; }
}

/* Rodapé: parceiros numa linha e o texto legal com a largura toda, sem "Digital Ventura" sozinho */
.site footer .border-t.pt-12 { flex-direction: column-reverse; align-items: flex-start; gap: 1.6rem; }
.site footer .border-t.pt-12 p.mono { font-size: 0.72rem; line-height: 1.8; opacity: 0.75; text-wrap: balance; }
.site footer .flex.gap-8 { flex-wrap: wrap; gap: 0.6rem 1.6rem; }

/* ── Pilares (Missão, Visão, Valores): sobre fundo de cor da marca ── */
.h-pillars { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--h-paper); }
.h-pillar { position: relative; padding: 2.6rem 2.2rem 3.6rem; border-left: 1px solid rgba(253, 251, 247, 0.4); }
.h-pillar:first-child { border-left: 0; padding-left: 0; }
.h-pillar::before { content: ''; position: absolute; top: -2px; left: 2.2rem; width: 56px; height: 8px; background: var(--c); }
.h-pillar:first-child::before { left: 0; }
.h-pillar h3 { margin: 0 0 1rem; font-size: 0.95rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.h-pillar p { margin: 0; font-size: 1.05rem; line-height: 1.65; }
.h-pillar ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin: 0; padding: 0; list-style: none; font-size: 1.05rem; }
.h-pillar li::before { content: '/'; margin-right: 0.55rem; opacity: 0.5; }
@media (max-width: 1023px) {
    .h-pillars { grid-template-columns: 1fr; }
    .h-pillar, .h-pillar:first-child { padding: 2.4rem 0 2.6rem; border-left: 0; border-top: 1px solid rgba(253, 251, 247, 0.4); }
    .h-pillar:first-child { border-top: 0; }
    .h-pillar::before, .h-pillar:first-child::before { left: 0; top: 0; }
    .h-pillar:first-child::before { top: -2px; }
}

/* ── Cartões de post do blog (home e /blog) ───────────────────── */
.h-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.8rem; }
.h-post { display: block; color: var(--h-blue); text-decoration: none; }
.h-post-img { position: relative; overflow: hidden; background: #e8e2d6; }
.h-post-img img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.4s ease; }
.h-post:hover .h-post-img img { transform: scale(1.04); }
.h-post-meta { display: flex; align-items: center; gap: 0.7rem; margin: 1.3rem 0 0.7rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.h-post-meta i { width: 12px; height: 12px; flex: none; background: var(--c, var(--h-blue)); }
.h-post-meta time { margin-left: auto; font-weight: 600; letter-spacing: 0.04em; text-transform: none; opacity: 0.85; }
.h-post h2, .h-post h3 { margin: 0 0 0.7rem; font-size: 1.3rem; font-weight: 800; line-height: 1.25; }
.h-post:hover h2, .h-post:hover h3 { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; text-decoration-color: var(--h-orange); }
.h-post p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--h-muted); }
.h-posts-fallback { margin: 0; color: var(--h-muted); }
@media (max-width: 1023px) {
    .h-posts { grid-template-columns: 1fr; gap: 3rem; }
}