/*!
 * evento.css · LP do evento "Linda por Dentro e por Fora"
 * Componentes compartilhados (chip, placa, faixa, pilares, manifesto, stats) vivem no app.css.
 * Autoria: Eight Group · https://eightgroup.com.br/
 * Projeto Gerado pelo Prompt Mestre do Desenvolvedor e Vibe Coder Dante Testa · www.dantetesta.com.br
 *
 * Nota de direção: todas as fotos das edições são verticais (celular). Nenhuma faixa
 * full-bleed horizontal, porque recortar 9:16 para 16:10 jogaria fora metade da cena.
 * A página inteira trabalha com retrato: placa 4:5 no topo e grade 3:4 na galeria.
 */

/* ── Hero do evento ───────────────────────────────────────────── */
.sd-ev-hero { position: relative; }
.sd-ev-hero__grade {
	position: relative;
	display: grid; grid-template-columns: 7fr 5fr;
	gap: clamp(40px, 5vw, 72px);
	align-items: end;
	padding-top: calc(var(--header-h) + clamp(48px, 6vw, 92px));
}
.sd-ev-hero__coluna { min-width: 0; }
.sd-ev-hero .sd-eyebrow { font-size: 12px; letter-spacing: .18em; }
.sd-ev-hero__titulo { margin: 26px 0 22px; max-width: 700px; }
.sd-ev-hero__lead { max-width: 520px; color: var(--creme); font-size: 20px; line-height: 1.5; }
.sd-ev-hero__apoio { max-width: 480px; margin-top: 16px; color: var(--creme-suave); }
.sd-ev-hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; margin-top: 34px; padding-bottom: clamp(56px, 8vw, 104px); }
.sd-ev-hero__placa { position: relative; margin-bottom: -88px; z-index: 2; max-width: 360px; justify-self: end; width: 100%; }

@media (max-width: 980px) {
	.sd-ev-hero__grade { grid-template-columns: 1fr; align-items: start; }
	.sd-ev-hero__lead { font-size: 18px; }
	.sd-ev-hero__acoes { padding-bottom: 48px; }
	.sd-ev-hero__placa { justify-self: start; max-width: 340px; margin-bottom: -72px; }
}

/* ── Origem (família hoje · texto · avó e vídeo) ───────────────────
   Três colunas: a família de hoje abre, o texto conta, e a coluna da direita
   junta a origem (a avó) com o vídeo em que a Dra. Sara narra o caso. */
.sd-ev-origem__grade {
	display: grid; grid-template-columns: 290px minmax(0, 1fr) 230px;
	gap: clamp(28px, 3.6vw, 56px);
	/* start, não center: a coluna da direita (avó + vídeo) é bem mais alta que as
	   outras duas, e centralizar deixava a foto da família flutuando no meio do vão. */
	align-items: start;
}
.sd-ev-origem__foto { position: relative; }
.sd-ev-origem__foto img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
/* Filete que amarra a foto à faixa, mesmo gesto da placa de retrato do site. */
.sd-ev-origem__foto::after {
	content: ""; position: absolute; inset: 14px -14px -14px 14px;
	border: 1px solid rgba(239, 234, 229, .22); z-index: -1;
}
.sd-ev-origem__texto { display: grid; gap: 16px; }
.sd-ev-origem__texto h2 { margin-top: 6px; }

.sd-ev-origem__midia { display: grid; gap: 18px; align-content: start; }
.sd-ev-origem__avo img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.sd-ev-origem__avo figcaption {
	margin-top: 8px; font-size: 13px; line-height: 1.4;
	color: var(--taupe-claro); letter-spacing: .02em;
}
/* O vídeo é um Short 9:16; nesta coluna estreita ele já nasce na proporção certa. */
.sd-ev-origem__midia .sd-video { max-width: 100%; }

@media (max-width: 1100px) {
	.sd-ev-origem__grade { grid-template-columns: 230px minmax(0, 1fr) 200px; }
}
@media (max-width: 900px) {
	/* Empilha na ordem da leitura: família, texto, e a dupla avó + vídeo lado a lado. */
	.sd-ev-origem__grade { grid-template-columns: 1fr; }
	.sd-ev-origem__foto { max-width: 260px; }
	.sd-ev-origem__midia {
		grid-template-columns: 1fr 1fr; align-items: start;
		gap: 16px; max-width: 460px;
	}
}
@media (max-width: 440px) {
	.sd-ev-origem__midia { grid-template-columns: 1fr; max-width: 260px; }
}

/* ── Linha do tempo ───────────────────────────────────────────── */
.sd-ev-linha { display: grid; gap: 0; margin-top: 44px; counter-reset: edicao; }
.sd-ev-linha__item {
	display: grid; grid-template-columns: 160px minmax(0, 1fr);
	gap: clamp(20px, 4vw, 56px);
	padding: 34px 0;
	border-top: 1px solid var(--creme-2);
}
.sd-ev-linha__item:last-child { border-bottom: 1px solid var(--creme-2); }
.sd-ev-linha__ano {
	font-family: var(--serif); font-size: 38px; line-height: 1;
	color: var(--acento); font-stretch: 92%;
}
.sd-ev-linha__corpo { display: grid; gap: 12px; max-width: 720px; }
/* h3 global é 24px; dentro da linha do tempo o ano já carrega o peso, então o
   título da edição entra um degrau abaixo para não brigar com ele. */
.sd-ev-linha__titulo { font-size: 21px; }
.sd-ev-linha__ficha { font-size: 15px; color: var(--taupe-texto); }
.sd-ev-linha__texto p + p { margin-top: 12px; }
.sd-ev-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.sd-ev-tags li {
	font-size: 13px; line-height: 1; padding: 9px 14px;
	border: 1px solid var(--creme-2); border-radius: var(--r-pill);
	color: var(--taupe-texto); background: var(--branco);
}
@media (max-width: 760px) {
	.sd-ev-linha__item { grid-template-columns: 1fr; gap: 14px; }
	.sd-ev-linha__ano { font-size: 32px; }
}

/* ── O que acontece (cards com ícone) ─────────────────────────────
   Sem grade de filete (gap 1px sobre fundo): são 5 cards e a última linha fica
   sempre incompleta, e o fundo da grade pintava as células vazias como um bloco
   cinza. Com borda por card e respiro entre eles, linha incompleta é natural. */
.sd-ev-cards {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px; margin-top: 44px;
}
.sd-ev-card {
	background: var(--branco); border: 1px solid var(--creme-2);
	padding: 32px 30px; display: grid; gap: 12px; align-content: start;
}
/* Sem ícone desde a 1.6.1 (pedido da cliente). Card estreito (240px): o h3 de 24px quebrava em duas linhas. */
.sd-ev-card__titulo { font-size: 20px; }
.sd-ev-card p { color: var(--taupe-texto); font-size: 16px; }

/* ── Galeria (filtro por ano: abas .sd-abas no app.css) ───────── */
.sd-ev-galeria__topo { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; }
.sd-ev-galeria__painel { margin-top: 36px; }
.sd-ev-galeria__painel + .sd-ev-galeria__painel { margin-top: 56px; } /* sem JS as edições empilham */
.sd-ev-galeria__legenda {
	font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--ameixa); margin: 0 0 18px;
}
.sd-ev-galeria__legenda span { font-weight: 400; color: var(--taupe-texto); }
.sd-ev-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
/* Edição fotografada em paisagem (salão, plateia): 3:2 em colunas largas, três por linha no desktop. */
.sd-ev-grade--paisagem { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.sd-ev-grade__item { min-width: 0; }  /* item de grid sem isto estoura a coluna */
.sd-ev-grade__botao {
	display: block; width: 100%; padding: 0; border: 0; background: none;
	cursor: pointer; overflow: hidden; position: relative;
}
.sd-ev-grade__botao img {
	width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
	transition: transform var(--transicao), filter var(--transicao);
}
.sd-ev-grade--paisagem .sd-ev-grade__botao img { aspect-ratio: 3 / 2; }
.sd-ev-grade__botao:hover img,
.sd-ev-grade__botao:focus-visible img { transform: scale(1.03); filter: brightness(1.04); }
@media (prefers-reduced-motion: reduce) {
	.sd-ev-grade__botao img { transition: none; }
	.sd-ev-grade__botao:hover img { transform: none; }
}
@media (max-width: 640px) {
	.sd-ev-grade,
	.sd-ev-grade--paisagem { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* Lightbox vive no app.css: as duas LPs usam. */

/* ── Barra de inscrição (segue a rolagem) ─────────────────────── */
.sd-ev-fecho__acoes { margin-top: 28px; }
.sd-ev-barra {
	position: fixed; z-index: 90; left: 50%; bottom: 18px; transform: translate(-50%, 160%);
	display: flex; align-items: center; gap: 20px; width: min(660px, calc(100vw - 24px));
	padding: 12px 14px 12px 24px; background: var(--ameixa); color: var(--creme-suave);
	box-shadow: var(--sombra-2); opacity: 0; visibility: hidden;
	transition: transform var(--transicao), opacity var(--transicao), visibility var(--transicao);
}
.sd-ev-barra.is-ativa { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.sd-ev-barra__texto { display: grid; gap: 2px; min-width: 0; }
.sd-ev-barra__texto strong { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.sd-ev-barra__texto span { font-size: 14px; color: var(--taupe-claro); }
.sd-ev-barra .sd-chip { flex: none; margin-left: auto; }
/* A barra flutua por cima do rodapé: o respiro evita cobrir a última linha. */
body:has(.sd-ev-barra) .site-footer { padding-bottom: 96px; }
@media (max-width: 640px) {
	.sd-ev-barra { left: 0; right: 0; bottom: 0; width: auto; transform: translateY(160%); gap: 10px; padding: 10px 12px; }
	.sd-ev-barra.is-ativa { transform: translateY(0); }
	/* Uma linha só: "Inscrições abertas" quebrava em duas e encostava no botão. */
	.sd-ev-barra__texto strong { font-size: 12px; letter-spacing: .06em; white-space: nowrap; }
	.sd-ev-barra__texto span { display: none; }
	.sd-ev-barra .sd-chip { height: 46px; padding: 0 18px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .sd-ev-barra { transition: none; } }

/* ── Apoiadores ───────────────────────────────────────────────── */
.sd-ev-apoio__intro { margin-top: 20px; color: var(--taupe-texto); }
.sd-ev-apoio { margin-top: 40px; }
.sd-ev-apoio__ano {
	font-size: 15px; letter-spacing: .2em; text-transform: uppercase;
	color: var(--taupe-texto); margin-bottom: 16px;
}
/* Mesma razão dos cards: o número de marcas por edição varia, então linha
   incompleta é a regra e não a exceção. 150px de mínimo dá duas colunas no celular. */
.sd-ev-apoio__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.sd-ev-apoio__item {
	background: var(--branco); border: 1px solid var(--creme-2); min-height: 104px;
	display: grid; place-items: center; padding: 20px 18px; text-align: center;
}
.sd-ev-apoio__item span {
	font-weight: 700; font-size: 16px; letter-spacing: .04em;
	color: var(--ameixa); text-transform: uppercase;
}
/* Logo entra no lugar do nome sem mexer na célula. As proporções são MUITO
   diferentes entre marcas (um logo quase quadrado, outro 4:1), então a caixa é fixa
   e o object-fit resolve: cada logo ocupa a mesma área ótica, nenhum estica. */
.sd-ev-apoio__item.tem-logo { padding: 18px 20px; }
.sd-ev-apoio__item.tem-logo img {
	max-height: 68px; max-width: 100%; width: auto; height: auto;
	object-fit: contain;
}
.sd-ev-apoio--aberta .sd-ev-apoio__vaga {
	border: 1px dashed var(--taupe); padding: 30px 24px; text-align: center;
	color: var(--taupe-texto); background: rgba(157, 135, 120, .07);
}

/* ── O evento na mídia ─────────────────────────────────────────────
   Este bloco é argumento de patrocínio, então encosta na seção seguinte: dois
   blocos claros com padding cheio somavam 240px de vão e liam como buraco. */
.sd-ev-midia { padding-bottom: 0; }
.sd-ev-midia__grade {
	display: grid; grid-template-columns: minmax(0, 1fr) 340px;
	gap: clamp(32px, 5vw, 72px); align-items: center;
}
.sd-ev-midia__texto { display: grid; gap: 16px; max-width: 620px; }
.sd-ev-midia__texto p { color: var(--taupe-texto); }
.sd-ev-midia__foto img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
/* Com recortes de imprensa o bloco deixa de encostar na seção seguinte: os cartões precisam de ar. */
.sd-ev-midia__recortes { margin-top: clamp(32px, 4vw, 52px); }
.sd-ev-midia:has(.sd-ev-midia__recortes) { padding-bottom: var(--sec-y); }
@media (max-width: 900px) {
	.sd-ev-midia__grade { grid-template-columns: 1fr; }
	.sd-ev-midia__foto { max-width: 300px; }
}

/* ── Por que apoiar + audiência ───────────────────────────────── */
.sd-ev-apoiar__grade {
	display: grid; grid-template-columns: minmax(0, 1fr) 360px;
	gap: clamp(32px, 5vw, 72px); align-items: start; margin-top: 40px;
}
.sd-ev-apoiar__texto { display: grid; gap: 16px; justify-items: start; max-width: 620px; }
.sd-ev-apoiar__texto .sd-chip { margin-top: 10px; }
.sd-ev-audiencia { background: var(--branco); border: 1px solid var(--creme-2); padding: 30px 28px; }
.sd-ev-audiencia__titulo { font-size: var(--t-h4); margin-bottom: 18px; }
.sd-ev-audiencia__lista { display: grid; gap: 16px; }
.sd-ev-audiencia__lista li { display: grid; gap: 2px; padding-bottom: 16px; border-bottom: 1px solid var(--creme-2); }
.sd-ev-audiencia__lista li:last-child { border-bottom: 0; padding-bottom: 0; }
.sd-ev-audiencia__lista b { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--acento); font-stretch: 92%; }
.sd-ev-audiencia__lista span { font-size: 14px; color: var(--taupe-texto); }
.sd-ev-audiencia__ref { margin-top: 18px; font-size: 13px; color: var(--taupe-texto); }
@media (max-width: 900px) { .sd-ev-apoiar__grade { grid-template-columns: 1fr; } }

/* ── Próxima edição ───────────────────────────────────────────── */
.sd-ev-proxima__grade {
	display: grid; grid-template-columns: minmax(0, 1fr) 380px;
	gap: clamp(32px, 5vw, 72px); align-items: center;
}
.sd-ev-proxima__titulo { max-width: 620px; }
.sd-ev-proxima__ficha { margin-top: 14px; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--taupe-claro); }
.sd-ev-proxima__texto { margin-top: 18px; max-width: 580px; }
.sd-ev-proxima__texto p + p { margin-top: 12px; }
.sd-ev-proxima__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 30px; }
.sd-ev-proxima__lista { display: grid; gap: 14px; }
.sd-ev-proxima__lista li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; }
.sd-ev-proxima__lista .sd-icone { width: 18px; height: 18px; color: var(--taupe-claro); margin-top: 4px; }
@media (max-width: 900px) { .sd-ev-proxima__grade { grid-template-columns: 1fr; } }

/* ── Contato direto (a cliente tirou o formulário: só WhatsApp) ──── */
.sd-ev-conversa__grade {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
	gap: clamp(32px, 5vw, 80px); align-items: center;
}
.sd-ev-conversa__intro { display: grid; gap: 16px; max-width: 560px; }
.sd-ev-conversa__intro p { color: var(--taupe-texto); }
.sd-ev-canais {
	background: var(--branco); border: 1px solid var(--creme-2);
	padding: clamp(28px, 3vw, 40px);
	display: grid; gap: 16px; justify-items: start;
}
.sd-ev-canais__email,
.sd-ev-canais__numero { font-size: 15px; color: var(--taupe-texto); }
.sd-ev-canais__numero { font-weight: 700; color: var(--ameixa); letter-spacing: .02em; }
@media (max-width: 900px) { .sd-ev-conversa__grade { grid-template-columns: 1fr; } }

/* ── Fecho emocional ──────────────────────────────────────────── */
.sd-ev-fecho { text-align: center; }
.sd-ev-fecho .sd-leitura { margin-inline: auto; display: grid; gap: 18px; justify-items: center; }
.sd-ev-fecho__aspas { width: 34px; height: 34px; color: var(--taupe-claro); }
.sd-ev-fecho__frase { font-size: clamp(28px, 3.4vw, 44px); }
.sd-ev-fecho__acoes { margin-top: 12px; }

/* ── Ponte para a exposição (bloco discreto, por pedido do briefing) ─ */
.sd-ev-ponte { padding-block: 0 clamp(56px, 9vw, 120px); }
.sd-ev-ponte__link {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
	padding: 26px 30px; text-decoration: none;
	border: 1px solid var(--creme-2); background: var(--branco);
	transition: border-color var(--transicao), background var(--transicao);
}
.sd-ev-ponte__link:hover { border-color: var(--acento); background: var(--creme); }
.sd-ev-ponte__rotulo { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe-texto); }
.sd-ev-ponte__titulo { font-family: var(--serif); font-size: 24px; color: var(--ameixa); font-stretch: 92%; }
.sd-ev-ponte__seta { width: 18px; height: 18px; margin-left: auto; color: var(--acento); }