/* Site Cinematográfico · © 2026 Labrego IA · LBG-SC-2026-v1
   Página dos Jovens no sistema “Papel e Luz” (Fase A): mesmas fontes, curvas e regras,
   com o verde dos flyers do retiro como tom próprio da página. Fundos sólidos, sem pílulas. */

.pagina-jovens {
  --verde-950: #04170F;
  --verde-900: #0A2419;
  --verde-800: #11321F;
  --rose: #C98A97;
  --rose-claro: #EDC7CF;
  --sobre-verde: #F2F0E6;
  --sobre-verde-suave: rgb(242 240 230 / .76);
  --fio-verde: rgb(242 240 230 / .18);
  background: var(--verde-900);
  color: var(--sobre-verde-suave);
}

/* Topo: continua escuro (verde) depois da abertura */
.pagina-jovens .topo.claro { background: var(--verde-900); color: var(--sobre-verde); box-shadow: 0 1px 0 var(--fio-verde); }
.pagina-jovens .topo.claro .marca-logo--claro { opacity: 1; }
.pagina-jovens .topo.claro .marca-logo--escuro { opacity: 0; }
.pagina-jovens .topo .menu-cta, .pagina-jovens .topo.claro .menu-cta { background: var(--rose-claro); border-color: var(--rose-claro); color: var(--verde-950); }
.pagina-jovens .topo .menu-cta:hover { background: var(--sobre-verde); border-color: var(--sobre-verde); }
@media (max-width: 860px) { .pagina-jovens .menu a.menu-cta { display: inline-flex; } }

/* Botões na página verde */
.pagina-jovens .botao { background: var(--rose-claro); color: var(--verde-950); }
.pagina-jovens .botao:hover { background: var(--sobre-verde); }
.pagina-jovens .botao--contorno-claro { background: none; color: var(--sobre-verde); }
.pagina-jovens .botao--contorno-claro:hover { background: none; text-decoration-color: var(--rose-claro); }
.pagina-jovens .rotulo { color: var(--sobre-verde-suave); }
.pagina-jovens h1, .pagina-jovens h2, .pagina-jovens h3 { color: var(--sobre-verde); }

/* ── Abertura ── */
.j-abertura {
  position: relative; isolation: isolate; overflow: clip; min-height: 100svh;
  display: grid; align-items: end;
  padding: calc(18vh + env(safe-area-inset-top, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)) 12vh max(var(--gutter), env(safe-area-inset-left, 0px));
  background: var(--verde-950); color: var(--sobre-verde);
}
.j-abertura-fundo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(.95); opacity: .4; transform: scale(1.04); animation: j-fundo var(--t-4) var(--curva-assentar) forwards; }
@keyframes j-fundo { to { transform: none; } }
/* um gradiente funcional: legibilidade na base */
.j-abertura::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--verde-950) 0%, rgb(4 23 15 / .55) 45%, rgb(4 23 15 / .2) 100%); }
.j-abertura-conteudo { width: 100%; max-width: var(--largura); margin: 0 auto; }
.j-titulo { max-width: 12ch; margin: 0 0 28px; font: 700 var(--t-hero)/.86 var(--grotesca); letter-spacing: -.062em; color: var(--sobre-verde); }
.j-titulo span { display: inline-block; opacity: 0; transform: translateY(.35em); animation: j-sobe var(--t-3) var(--curva-assentar) forwards; }
.j-titulo span:nth-child(2) { animation-delay: 70ms; }
.j-titulo span:nth-child(3) { animation-delay: 140ms; }
.j-destaque { font-family: var(--serifa); font-style: italic; font-weight: 500; font-size: 1.06em; letter-spacing: -.025em; color: var(--rose-claro); }
@keyframes j-sobe { to { opacity: 1; transform: none; } }
.j-sub { max-width: 560px; margin: 0 0 32px; font-size: 1.25rem; line-height: 1.5; color: var(--sobre-verde-suave); opacity: 0; animation: j-sobe var(--t-3) .25s var(--curva-assentar) forwards; }
.j-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-bottom: 48px; opacity: 0; animation: j-sobe var(--t-3) .35s var(--curva-assentar) forwards; }
.j-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 40px; margin: 0; padding-top: 22px; border-top: 1px solid var(--fio-verde); opacity: 0; animation: j-sobe var(--t-3) .45s var(--curva-assentar) forwards; }
.j-info dt { margin-bottom: 6px; font: 400 .72rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--rose-claro); }
.j-info dd { margin: 0; font-size: 1rem; font-weight: 500; color: var(--sobre-verde); }
@media (max-width: 760px) { .j-info { grid-template-columns: 1fr; } }

/* ── Retiro 2027 ── */
.j-retiro { padding: calc(var(--respiro) * .6) max(var(--gutter), env(safe-area-inset-right, 0px)) calc(var(--respiro) * .6) max(var(--gutter), env(safe-area-inset-left, 0px)); background: var(--verde-900); }
.j-retiro-cartao { position: relative; overflow: hidden; max-width: var(--largura); margin: 0 auto; padding: 0; border-radius: 0; background: none; border: 0; box-shadow: none; color: var(--sobre-verde); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.j-retiro-ano { display: none; }
.j-retiro-texto { position: relative; z-index: 1; grid-column: 1 / 9; max-width: none; }
.j-retiro h2 { margin: 0 0 18px; font-size: var(--t-titulo); }
.j-retiro-tema { margin: 0 0 20px; font: italic 500 var(--t-subtitulo)/1.15 var(--serifa); color: var(--rose-claro); }
.j-retiro-descricao { max-width: 56ch; margin: 0 0 36px; color: var(--sobre-verde-suave); }
.j-retiro-dados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin: 0 0 36px; }
.j-retiro-dados div { padding: 16px 0 0; border: 0; border-top: 1px solid var(--fio-verde); border-radius: 0; background: none; }
.j-retiro-dados dt { margin-bottom: 6px; font: 400 .72rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--rose-claro); }
.j-retiro-dados dd { margin: 0; font-weight: 600; color: var(--sobre-verde); }
.j-contagem { display: flex; gap: 32px; margin: 0 0 36px; }
.j-contagem div { min-width: 0; padding: 0; border-radius: 0; background: none; text-align: left; }
.j-contagem b { display: block; font: 700 clamp(2.6rem, 2rem + 2.5vw, 4rem)/1 var(--grotesca); letter-spacing: -.05em; font-variant-numeric: tabular-nums lining-nums; color: var(--sobre-verde); }
.j-contagem span { font-size: .875rem; color: var(--sobre-verde-suave); }
.j-retiro-contato { margin: 16px 0 0; color: var(--sobre-verde-suave); }
.j-retiro-contato a { color: var(--sobre-verde); font-weight: 600; }
.j-ramo { position: absolute; width: clamp(90px, 12vw, 150px); height: auto; color: var(--rose); opacity: .55; pointer-events: none; z-index: 0; }
.j-ramo--topo { top: 0; right: 0; transform: scaleX(-1); }
.j-ramo--base { display: none; }
@media (max-width: 860px) { .j-retiro-texto { grid-column: 1 / -1; } .j-ramo { display: none; } }
@media (max-width: 640px) { .j-retiro-dados { grid-template-columns: 1fr; } .j-contagem { gap: 20px; } }

.j-flyers { max-width: var(--largura); margin: clamp(48px, 7vw, 96px) auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 32px); align-items: start; }
.j-flyers a { display: block; overflow: hidden; border-radius: var(--raio-g); box-shadow: none; border: 0; }
.j-flyers img { width: 100%; height: auto; }
@media (max-width: 760px) { .j-flyers { grid-template-columns: 1fr; max-width: 420px; } }

/* ── Instagram ── */
.pagina-jovens .j-instagram { background: var(--verde-800); color: var(--sobre-verde-suave); }
.j-instagram { min-height: auto; }
.pagina-jovens .j-instagram .painel { background: none; border: 0; box-shadow: none; color: var(--sobre-verde-suave); }
.pagina-jovens .j-instagram .painel--cabecalho > p { color: var(--sobre-verde-suave); }
.j-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(16px, 2.5vw, 32px); align-items: start; }
.j-posts .instagram-media { margin: 0 !important; min-width: 0 !important; width: 100% !important; border-radius: var(--raio-g) !important; }
.j-posts--vazio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.j-post-vazio { aspect-ratio: 4 / 5; display: grid; place-items: center; align-content: center; gap: 12px; padding: 20px; text-align: center; border-radius: var(--raio-g); border: 0; background: var(--verde-900); color: var(--sobre-verde-suave); font: 500 .875rem/1.4 var(--fonte-texto); letter-spacing: 0; text-transform: none; }
.j-post-vazio .icone { width: 28px; height: 28px; margin: 0 auto 4px; display: block; color: var(--rose-claro); }
.j-posts blockquote.instagram-media { background: var(--papel); border: 0; padding: 0; min-height: 420px; display: grid; place-items: center; }
.j-posts blockquote.instagram-media a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--vinho); }
.j-instagram > .botao { justify-self: start; }
@media (max-width: 640px) { .j-posts--vazio { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .j-post-vazio { padding: 10px; } }

.pagina-jovens .rodape { background: var(--verde-950); }
.pagina-jovens .rodape::before { background: var(--rose-claro); }
.pagina-jovens .menu a[aria-current] { opacity: 1; }
.pagina-jovens .whats { background: var(--rose-claro); color: var(--verde-950); }

@media (prefers-reduced-motion: reduce) {
  .j-abertura-fundo, .j-titulo span, .j-sub, .j-acoes, .j-info { animation: none; opacity: 1; transform: none; }
}

/* Modelo “Casa”: títulos grotescos, retiro em card arredondado */
.j-retiro h2 { letter-spacing: -.055em; }
.j-retiro-cartao { padding: clamp(28px, 5vw, 72px); border-radius: var(--raio-g); background: var(--verde-800); }
.pagina-jovens .rodape { margin-top: 0; }
.j-instagram { overflow-x: clip; }
.j-instagram .painel--cabecalho { margin-bottom: clamp(32px, 4vw, 48px); }
.j-instagram .painel--cabecalho p { margin-top: 16px; max-width: 46ch; }
.j-instagram > .botao { display: flex; width: max-content; max-width: 100%; margin-top: 32px; }
.pagina-jovens .rotulo { color: var(--rose-claro); }
.j-posts iframe.instagram-media { max-width: 100% !important; min-width: 0 !important; width: 100% !important; position: static !important; }