/*!
 * 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;
}
.sd-ev-card__icone { display: block; color: var(--acento); }
/* 40px, não os 30px do card de cuidado: o ícone de Libras é o mais detalhado dos
   quatro que a cliente desenhou (duas mãos, dedos separados) e abaixo disto vira
   rabisco. Medido: a 30px os traços caem abaixo de 1px. */
.sd-ev-card__icone .sd-icone { width: 40px; height: 40px; }
/* Card estreito (240px): o h3 de 24px quebrava em duas linhas em quase todos. */
.sd-ev-card__titulo { font-size: 20px; }
.sd-ev-card p { color: var(--taupe-texto); font-size: 16px; }

/* ── Galeria ──────────────────────────────────────────────────── */
.sd-ev-galeria__bloco + .sd-ev-galeria__bloco { margin-top: 52px; }
.sd-ev-galeria__ano {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px;
	margin: 44px 0 20px; padding-bottom: 14px;
	border-bottom: 1px solid var(--creme-2);
}
.sd-ev-galeria__ano span { font-size: 15px; font-weight: 400; color: var(--taupe-texto); }
.sd-ev-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.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__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 { grid-template-columns: 1fr 1fr; gap: 10px; } }

/* ── Lightbox ─────────────────────────────────────────────────── */
.sd-lightbox {
	position: fixed; inset: 0; z-index: 120;
	display: grid; grid-template-rows: 1fr auto; place-items: center;
	background: rgba(44, 22, 28, .94);
	padding: clamp(16px, 4vw, 48px);
}
.sd-lightbox[hidden] { display: none !important; }
.sd-lightbox__figura { display: grid; place-items: center; max-height: 100%; min-height: 0; }
.sd-lightbox__img {
	max-width: 100%; max-height: 78vh; width: auto; height: auto;
	object-fit: contain;
}
.sd-lightbox__legenda {
	margin-top: 16px; text-align: center; color: var(--creme-suave);
	font-size: 15px; max-width: 60ch;
}
.sd-lightbox__fechar,
.sd-lightbox__nav {
	position: absolute; display: grid; place-items: center;
	width: 48px; height: 48px; border-radius: var(--r-pill);
	border: 1px solid rgba(239, 234, 229, .3); background: rgba(44, 22, 28, .6);
	color: var(--creme); cursor: pointer;
}
.sd-lightbox__fechar { top: 16px; right: 16px; }
/* Uma seta só no sprite: "anterior" é a mesma girada, sem símbolo extra. */
.sd-lightbox__nav--ant { left: 16px; top: 50%; transform: translateY(-50%); }
.sd-lightbox__nav--ant .sd-icone { transform: rotate(180deg); }
.sd-lightbox__nav--prox { right: 16px; top: 50%; transform: translateY(-50%); }
.sd-lightbox__fechar:hover,
.sd-lightbox__nav:hover { background: var(--acento); border-color: var(--acento); }
.sd-lightbox__nav[disabled] { opacity: .35; cursor: default; }
.sd-lightbox .sd-icone { width: 20px; height: 20px; }
.sd-lightbox__contador { color: var(--taupe-claro); font-size: 13px; letter-spacing: .12em; padding-top: 12px; }
@media (max-width: 640px) {
	.sd-lightbox__nav { width: 42px; height: 42px; }
	.sd-lightbox__nav--ant { left: 6px; }
	.sd-lightbox__nav--prox { right: 6px; }
	.sd-lightbox__img { max-height: 66vh; }
}

/* ── 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%; }
@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); }