/**
 * Home do Salão CasaNoivas — redesign
 *
 * Baseado no Figma "Casa Noiva (Copy)" (fileKey h8qOPHxm0UXvdvNamLXQY2):
 *   - handoff-documentation (nodeId 5:499)  -> tokens em style.css (--sc-*)
 *   - home-desktop (nodeId 2006:91)         -> regras base deste arquivo
 *   - home-tablet  (nodeId 2017:472)        -> @media (max-width: 1024px)
 *   - home-mobile  (nodeId 2087:616)        -> @media (max-width: 480px)
 *
 * Convenção: todo elemento novo desta home usa classes prefixadas
 * `sc-` (Salão CasaNoivas) para não colidir com `.salao-section-*` /
 * `.festival-*`, usadas por page-salao.php e pelos temas-irmãos — nenhum
 * desses seletores é tocado aqui.
 *
 * @package CasaModa_Theme
 */

/* page-styles.css tem uma regra legada (".page-salao h1, h2, h3...")
   forçando "29LT Zarid Sans Regular" (sans-serif) em QUALQUER heading
   dentro de ".page-salao" — e o wrapper desta home também carrega essa
   classe (compartilhada com page-salao.php, pré-redesign). Como
   ".page-salao h2" é classe+tag (mais específico que uma classe só,
   tipo ".sc-display"), ela vence e sequestra a fonte de todo título
   serifado do redesign, mesmo com a convenção de prefixo `sc-` (o
   problema é a TAG genérica h1-h6, não o nome da classe). Reafirmando
   aqui com ".sc-home" (duas classes) a especificidade fica maior que
   ".page-salao h2" e o valor certo (--sc-font-display, Libre Baskerville)
   volta a valer — sem tocar a regra legada, que ainda serve o
   page-salao.php antigo.
   */
.sc-home .sc-display,
.sc-home .sc-display-xl,
.sc-home .sc-h1-serif {
  font-family: var(--sc-font-display);
}

.sc-home .sc-h1,
.sc-home .sc-h2 {
  font-family: var(--sc-font-body);
}

.sc-main {
  background-color: var(--sc-color-bg-primary);
  font-family: var(--sc-font-body);
  color: var(--sc-color-text-primary);
}

.sc-section {
  position: relative;
  width: 100%;
}

/* Espaçamento vertical padrão entre seções (token: Section Gap 100px) */
.sc-main > .sc-section + .sc-section {
  margin-top: 0;
}

.sc-eyebrow {
  font-family: var(--sc-font-body);
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 2.75px;
  text-transform: uppercase;
  color: var(--sc-color-text-primary);
  margin-bottom: var(--sc-space-sm);
}

.sc-display {
  font-family: var(--sc-font-display);
  font-weight: 400;
  color: var(--sc-color-text-primary);
  font-size: clamp(32px, 4vw, 58px);
  line-height: 1.15;
  margin-bottom: var(--sc-space-lg);
}

.sc-display-xl {
  /* clamp(36px, 6vw, 80px) era o valor anterior — diminuído a pedido do
     Celso (título "Casa Higienópolis" na seção O Espaço, único uso desta
     classe). */
  font-size: clamp(28px, 4.5vw, 60px);
}

.sc-display em,
.sc-display i {
  font-style: italic;
}

.sc-h1-serif {
  font-family: var(--sc-font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.5vw, 42px);
  letter-spacing: 2px;
  line-height: 1.3;
  color: var(--sc-color-text-primary);
  margin-bottom: var(--sc-space-md);
}

.sc-h1 {
  font-family: var(--sc-font-body);
  font-weight: 600;
  font-size: 25px;
  color: var(--sc-color-text-primary);
}

.sc-h2 {
  font-family: var(--sc-font-body);
  font-weight: 600;
  font-size: 20px;
  color: var(--sc-color-text-primary);
}

.sc-body-large {
  font-family: var(--sc-font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--sc-color-text-primary);
}

.sc-body {
  font-family: var(--sc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--sc-color-text-primary);
}

.sc-caption {
  font-family: var(--sc-font-caption);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.6;
  color: var(--sc-color-text-secondary);
}

.sc-centered { text-align: center; }
.sc-justify { text-align: justify; }
.sc-uppercase { text-transform: uppercase; }
.sc-italic { font-style: italic; }
.sc-inverse { color: var(--sc-color-text-inverse); }

/* Placeholder de desenvolvimento — a imagem/vídeo real entra pelo ACF.
   Nunca usar como entrega final, apenas para visualizar a estrutura. */
.sc-media-placeholder {
  width: 100%;
  height: 100%;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(
    45deg,
    var(--sc-color-bg-secondary),
    var(--sc-color-bg-secondary) 10px,
    var(--sc-color-bg-primary) 10px,
    var(--sc-color-bg-primary) 20px
  );
  color: var(--sc-color-text-muted);
  font-family: var(--sc-font-body);
  font-size: 12px;
  text-align: center;
  padding: var(--sc-space-sm);
}

/* :where() zera a especificidade do "img" aqui de propósito: sem isso,
   ".sc-section img" (classe+tag) tem mais especificidade que qualquer
   classe única aplicada direto na img (ex.: .sc-quote-logo, .sc-hero-logo,
   .sc-audience-stats-logo) e vence a regra de tamanho dela — a imagem
   perde o width fixo e renderiza no tamanho natural do arquivo (uma logo
   de 682x375 virava 1777x977 na seção "Quote/Marcas"). Com :where(), esta
   regra cai pra especificidade de uma classe só, e a ordem no arquivo
   decide — como as regras de logo vêm DEPOIS desta, elas passam a vencer
   normalmente, sem precisar duplicar seletor ou usar !important em cada
   uma. As imagens sem classe própria (fundos full-bleed) continuam
   herdando normalmente, porque nada mais compete por elas. */
.sc-section :where(img) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================
   1_Hero — imagem de fundo em tela cheia
   ========================================================== */
.sc-hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
}

.sc-hero-image {
  width: 100%;
  height: 100%;
}

/* Bloco de marca sobreposto no canto inferior direito da foto de capa
   (nodeId 2007:8, "LogoBlock") — existia no Figma e no site em produção,
   mas tinha ficado de fora desta implementação. */
.sc-hero-overlay-brand {
  position: absolute;
  right: var(--sc-padding-h-desktop);
  bottom: 79px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sc-hero-overlay-logo {
  width: 204px;
  height: auto;
  filter: brightness(0) invert(1);
}

.sc-hero-overlay-venue,
.sc-hero-overlay-dates {
  margin-top: var(--sc-space-xs);
  color: var(--sc-color-text-inverse);
  font-family: var(--sc-font-body);
  font-size: 20px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.sc-hero-overlay-venue { margin-top: var(--sc-space-sm); }

/* ==========================================================
   Left_Text — logo/ano/data/local/atividades | imagem lateral
   ========================================================== */
.sc-hero-info {
  display: flex;
  min-height: 560px;
  background-color: var(--sc-color-bg-dark);
}

.sc-hero-info-text {
  /* flex-basis:50% + shrink:1, não "1 0 0": basis 0 com min-width:0 ainda
     deixava a divisão desigual neste caso (1017/889 em vez de 50/50) —
     forçar o basis direto em 50% é a forma que realmente trava a divisão,
     com min-width:0 evitando que o conteúdo empurre além disso. */
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sc-space-2xl);
  text-align: center;
  color: var(--sc-color-text-inverse);
}

.sc-hero-logo-block {
  /* "2027" agora vem desenhado dentro do próprio logotipo (Logo_casamoda_noivas_2027.png)
     — antes era um <span> separado ("2027" colado no logo, à direita, a pedido do
     Celso); removido para não duplicar o ano. */
  display: flex;
  align-items: center;
  justify-content: center;
}

.sc-hero-logo {
  width: 320px; /* 203px, depois 240px, foram os valores anteriores — aumentado de novo a pedido do Celso */
  height: auto;
  filter: brightness(0) invert(1);
}

/* Espaçamento gradeado do Figma (nodeId 2006:128), não um "gap" uniforme
   entre os 5 filhos de .sc-hero-info-text: 64px antes da data (40px do
   container + 24px de padding próprio do bloco no Figma), 8px entre data
   e local (mesmo bloco, linhas coladas), 40px antes do divisor, 56px
   antes de "Desfiles & Showroom" (40px + 16px). Um gap único de 32px
   grudava data/local longe demais um do outro e afastava pouco o resto. */
.sc-hero-dates {
  margin-top: 64px;
  font-family: var(--sc-font-display);
  font-size: 24px; /* 20px era o valor anterior — um pouco maior a pedido do Celso */
  line-height: 1.5;
}

.sc-hero-venue {
  margin-top: var(--sc-space-xs);
  font-family: var(--sc-font-display);
  /* font-style:italic removido — a pedido do Celso, "Casa Higienópolis"
     não deve ser itálico aqui (diferente da seção "O Espaço"). */
  font-size: 24px; /* 20px era o valor anterior — um pouco maior a pedido do Celso */
  line-height: 1.5;
}

/* div, não <hr>: o tema tem um filtro global (inc/theme-setup.php,
   casamoda_remove_hr_from_output) que apaga QUALQUER <hr> da página
   inteira via regex no buffer de saída — inclusive divisores legítimos
   de template, não só o que o filtro original pretendia limpar. */
.sc-hero-divider {
  margin-top: 40px;
  width: 200px;
  height: 1px;
  background-color: var(--sc-color-bg-primary);
}

.sc-hero-activities {
  margin-top: 56px;
  font-family: var(--sc-font-display);
  font-size: 40px; /* 36px era o valor anterior — um pouco maior a pedido do Celso */
  line-height: 1.333;
}

.sc-hero-info-image {
  flex: 1 1 50%;
  min-width: 0;
  min-height: 400px;
}

/* ==========================================================
   3_About
   ========================================================== */
.sc-about {
  display: flex;
  background-color: var(--sc-color-bg-primary);
}

.sc-about-image {
  flex: 1 1 50%;
  min-width: 0;
  min-height: 500px;
}

.sc-about-content {
  /* flex-basis:50%, mesmo motivo do .sc-hero-info-text acima. */
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* px-[72px] py-[80px] no Figma — 72px é específico desta seção, não o
     --sc-padding-h-desktop genérico (64px) usado nas outras. */
  padding: var(--sc-space-3xl) 72px;
  text-align: right;
}

/* Tamanhos e espaçamento exatos do Figma (nodeId 2006:162) pra esta seção —
   .sc-eyebrow/.sc-display/.sc-body-large são compartilhadas com tamanho
   "genérico" nas outras seções; aqui sobrescrevo só dentro do About pro
   valor real do design. O espaçamento entre os 3 blocos é GRADUADO no
   Figma (pt-[24px] no título, pt-[32px] no parágrafo) — não uniforme —
   por isso é margin-top em cada um, não um "gap" único no container. */
.sc-about-content .sc-eyebrow {
  text-align: right;
  font-size: 12px;
  margin-bottom: 0;
}

.sc-about-content .sc-display {
  /* font-family igual ao base .sc-display (Libre Baskerville) — o design
     original usava Playfair Display só neste heading (removida do site
     a pedido do Celso); a declaração ficou redundante mas inofensiva. */
  font-family: var(--sc-font-display);
  /* 60px, não os 52px do Figma (nodeId 2006:179) — valor calibrado a
     pedido do Celso quando este heading ainda usava Playfair Display
     (x-height/cap-height menor, lia visualmente menor no mesmo tamanho
     nominal). Mantido em 60px após a troca pra Libre Baskerville; pode
     estar um pouco grande agora — revisar se ficar desproporcional. */
  font-size: 60px;
  line-height: 1.115; /* 58px/52px, igual ao Figma */
  margin-top: 24px;
  margin-bottom: 0;
}

.sc-about-content .sc-body-large {
  font-size: 25px;
  line-height: 1.28; /* 32px/25px, igual ao Figma */
  margin-top: 32px;
}

/* ==========================================================
   Galerias de fotos (galeria_evento / desfile_galeria)
   ========================================================== */
/* 80px uniforme (--sc-space-3xl) igual ao Figma nas 3 galerias (Container
   com p-[80px], nodeIds 2006:186 e 2006:369) — não os 64px genéricos
   (--sc-space-2xl vertical + --sc-padding-h-desktop horizontal). */
.sc-gallery {
  background-color: var(--sc-color-bg-primary);
  padding: var(--sc-space-3xl);
}

.sc-gallery-grid {
  display: grid;
  gap: var(--sc-space-md);
  max-width: var(--sc-container-max);
  margin: 0 auto;
}

.sc-gallery-grid-4 { grid-template-columns: repeat(4, 1fr); }
.sc-gallery-grid-3 { grid-template-columns: repeat(3, 1fr); }

.sc-gallery-item {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

/* Galeria 1 (nodeId 2006:186) — fileira A: 3 fotos estreitas + 1 larga;
   fileira B: 5 fotos estreitas iguais. No desktop a larga cobre 2 linhas
   de altura (grid), ocupando o espaço das 2 últimas fotos da fileira B —
   por isso as fileiras viram display:contents (os itens passam a ser
   filhos diretos do grid da seção) e a 4ª/5ª foto da fileira B ficam
   ocultas. Tablet/mobile revertem pro mosaico original com as 9 fotos
   (ver breakpoints abaixo). Proporção 240x440 das fotos estreitas, exata
   do Figma — por isso escopado aqui, não no .sc-gallery-item genérico
   (usado também pela galeria do Desfile, com proporção diferente). */
.sc-gallery-1 {
  /* Sem max-width: no Figma o Container desta seção é w-full (fluido),
     limitado só pelo padding da própria .sc-gallery — não tem o cap de
     1280px que .sc-gallery-grid (usada noutras galerias) tem. */
  display: grid;
  grid-template-columns: repeat(3, 1fr) 500px;
  gap: 20px;
}

.sc-gallery-row {
  display: contents;
}

.sc-gallery-row-a .sc-gallery-item,
.sc-gallery-row-b .sc-gallery-item {
  min-width: 0;
  aspect-ratio: 240 / 440;
}

.sc-gallery-row-a .sc-gallery-item:nth-child(1) { grid-column: 1; grid-row: 1; }
.sc-gallery-row-a .sc-gallery-item:nth-child(2) { grid-column: 2; grid-row: 1; }
.sc-gallery-row-a .sc-gallery-item:nth-child(3) { grid-column: 3; grid-row: 1; }

.sc-gallery-row-a .sc-gallery-item-wide {
  grid-column: 4;
  grid-row: 1 / 3;
  aspect-ratio: auto;
}

.sc-gallery-row-b .sc-gallery-item:nth-child(1) { grid-column: 1; grid-row: 2; }
.sc-gallery-row-b .sc-gallery-item:nth-child(2) { grid-column: 2; grid-row: 2; }
.sc-gallery-row-b .sc-gallery-item:nth-child(3) { grid-column: 3; grid-row: 2; }

/* 4ª e 5ª foto da fileira B: cobertas pela larga no desktop (que ocupa a
   mesma coluna/linhas). Restauradas no mosaico de tablet/mobile. */
.sc-gallery-row-b .sc-gallery-item:nth-child(4),
.sc-gallery-row-b .sc-gallery-item:nth-child(5) {
  display: none;
}

/* Galeria do Desfile (nodeId 2006:689, 2006:735) — 7 fotos: fileira A
   com a 1ª coluna dividida em 2 fotos empilhadas (grupo de modelos +
   placa "Lucas Anderi") ao lado de 2 fotos simples (retrato, brinde);
   fileira B com 3 fotos de passarela lado a lado. */
.sc-gallery-3-inner {
  max-width: var(--sc-container-max);
  margin: 0 auto;
}

.sc-gallery-3-row {
  display: flex;
  gap: var(--sc-space-sm);
}

/* 80px, não 16px: no Figma a colagem (nodeId 2006:689) e a fileira de 3
   fotos (nodeId 2006:735) são 2 seções separadas, cada uma com seu
   próprio padding de 80px — aqui viraram 2 linhas dentro da mesma
   seção, então o respiro entre elas precisa ser o --sc-space-3xl real,
   não o --sc-space-sm usado como gap interno de uma linha só. */
.sc-gallery-3-row + .sc-gallery-3-row {
  margin-top: var(--sc-space-3xl);
}

.sc-gallery-3-row .sc-gallery-item {
  flex: 1 1 0;
  min-width: 0;
}

.sc-gallery-3-split {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-sm);
}

.sc-gallery-3-split .sc-gallery-item {
  flex: 1 1 0;
  aspect-ratio: auto;
}

/* Galeria 2 (nodeId 2006:369) — grade 2×2 (4 fotos) à esquerda + 1 foto
   vertical fixa à direita (460px no desktop — alinhada com a 3ª coluna
   do Showroom logo abaixo, .sc-showroom-stack; 360px original em
   tablet/mobile, ver breakpoint), mesma altura da grade toda. */
.sc-gallery-2-row {
  /* Sem max-width, mesmo motivo do .sc-gallery-row acima. */
  display: flex;
  gap: 16px;
}

.sc-gallery-2-quad {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  gap: 16px;
}

.sc-gallery-2-quad .sc-gallery-item {
  aspect-ratio: auto;
}

.sc-gallery-item-tall {
  flex: 0 0 460px;
  aspect-ratio: 360 / 640;
}

/* ==========================================================
   Vídeos em tela cheia
   ========================================================== */
.sc-video {
  height: 90vh;
  min-height: 480px;
  background-color: var(--sc-color-bg-dark);
}

.sc-video-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Vídeo 1 (nodeId 2006:298) — bloco pequeno e centralizado (460×788,
   estilo vídeo vertical de celular), NÃO full-bleed 90vh como o vídeo
   aéreo (que usa a regra genérica .sc-video acima, essa sim correta pra
   ele). Fundo claro (--sc-color-bg-primary), não escuro. */
/* pb-[80px] px-[80px], sem padding-top, igual ao Figma (nodeId 2006:298)
   — sem isso o vídeo ficava colado nas bordas da seção. */
.sc-video-portrait {
  height: auto;
  min-height: 0;
  display: flex;
  justify-content: center;
  padding: 0 var(--sc-space-3xl) var(--sc-space-3xl);
  background-color: var(--sc-color-bg-primary);
}

.sc-video-portrait .sc-video-el {
  width: 460px;
  max-width: 100%;
  aspect-ratio: 460 / 788;
  height: auto;
}

/* Marca sobreposta no canto inferior esquerdo do vídeo aéreo (nodeId
   2006:483) — igual ao .sc-hero-overlay-logo (mesmo PNG preto + filter
   pra branco), existia no Figma e tinha ficado de fora desta seção. */
.sc-video-aerial-logo {
  position: absolute;
  left: var(--sc-padding-h-desktop);
  bottom: 64px;
  width: 180px;
  height: auto;
  filter: brightness(0) invert(1);
}

/* ==========================================================
   6_Venue_Details — "O Espaço"
   ========================================================== */
.sc-venue {
  display: flex;
  gap: var(--sc-space-3xl);
  /* Padding horizontal 80px (--sc-space-3xl) igual ao Figma (p-[80px]
     uniforme na Section, nodeId 2006:307) — não os 64px genéricos de
     --sc-padding-h-desktop usados nas outras seções.
     Sem padding-bottom: a seção seguinte (.sc-gallery-2, mesmo fundo
     --sc-color-bg-primary) já entra com o próprio padding-top — com os
     dois juntos a sobra de espaço em branco entre as fotos era enorme
     (80px + 64px). */
  padding: var(--sc-space-3xl) var(--sc-space-3xl) 0;
  background-color: var(--sc-color-bg-primary);
}

.sc-venue-content {
  flex: 1 0 0;
}

/* 25px no Figma (nodeId 2006:307) — .sc-body-large vem com 16px genérico
   de outras seções; label/título/detalhes desta seção já batiam certo. */
.sc-venue-text {
  font-size: 25px;
}

.sc-venue-text p + p {
  margin-top: var(--sc-space-sm);
}

/* 32px só antes do 1º bloco (Endereço, pt-32 no Figma vindo da
   Description) — os blocos seguintes (Estacionamento/Metrô/Datas) têm
   só 16px entre si no Figma, não os mesmos 32px genéricos. */
.sc-venue-detail {
  margin-top: var(--sc-space-lg);
}

.sc-venue-detail + .sc-venue-detail {
  margin-top: var(--sc-space-sm);
}

.sc-detail-label {
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: var(--sc-space-xs);
}

.sc-detail-value {
  font-family: var(--sc-font-body);
  font-weight: 300;
  font-size: 20px;
}

.sc-venue-image {
  flex: 0 0 38%;
  min-height: 500px;
}

/* ==========================================================
   8_Showroom
   ========================================================== */
/* pb-80/px-80, sem padding-top, igual ao Figma (nodeId 2006:437) — a
   seção anterior (.sc-gallery-2, mesmo fundo) já fecha com pb-80 dela,
   um pt aqui duplicava o respiro. Sides 80px, não os 64px genéricos. */
.sc-showroom {
  padding: 0 var(--sc-space-3xl) var(--sc-space-3xl);
  background-color: var(--sc-color-bg-primary);
}

/* Título/subtítulo só existem no Figma tablet (2017:597) e mobile
   (2087:754) — escondido por padrão (desktop, nodeId 2006:437, não
   tem esse bloco), reativado nos breakpoints menores mais abaixo. */
.sc-showroom-heading {
  display: none;
}

/* LeftPanel+CenterPanel (largura igual, lado a lado) + coluna fixa de
   380px à direita com RightTop/RightBottom empilhados — estrutura real
   do Figma, não uma grade uniforme de 4 colunas. Sem max-width: o
   Container é w-full (fluido) no Figma, mesmo caso da Galeria. */
.sc-showroom-grid {
  display: flex;
  gap: 16px;
  height: 620px;
}

.sc-showroom-wide {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  gap: 16px;
}

.sc-showroom-wide .sc-showroom-panel {
  flex: 1 1 0;
  min-width: 0;
}

.sc-showroom-stack {
  /* 460px no desktop — alinhada com a foto vertical da Galeria 2 logo
     acima (.sc-gallery-item-tall). flex:none no breakpoint de
     tablet/mobile já neutraliza este valor lá (ver abaixo). */
  flex: 0 0 460px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sc-showroom-stack .sc-showroom-panel {
  flex: 1 1 0;
  min-height: 0;
}

.sc-showroom-panel {
  overflow: hidden;
}

/* ==========================================================
   Programação
   ========================================================== */
.sc-programacao {
  padding: var(--sc-space-3xl) var(--sc-padding-h-desktop);
  background-color: var(--sc-color-bg-primary);
}

/* Toda a tipografia desta seção usa Libre Baskerville (--sc-font-display),
   não Montserrat (--sc-font-body, usado por .sc-h1/.sc-h2/.sc-body/
   .sc-caption em todo o resto do site) — por isso escopado aqui. No
   Figma (nodeId 2006:492) esta seção usava Playfair Display, removida
   do site a pedido do Celso. Tamanhos batendo com o Figma: título 42px,
   data 20px, título de cada item 20px, descrição 16px, aviso final 16px
   itálico (a data NÃO é itálico no Figma — a regra antiga aplicava
   itálico nela por engano). */
.sc-programacao .sc-h1 {
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: 42px;
  letter-spacing: 2.2px;
  line-height: 66px;
}

/* Sem margin-top: no Figma o título e a data ficam colados (line-box do
   título de 66px já dá o respiro visual) — os 16px extras aqui deixavam
   o espaço maior que o real. */
.sc-programacao-data {
  font-family: var(--sc-font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 33px;
}

.sc-programacao .sc-h2 {
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
}

.sc-programacao .sc-body {
  font-family: var(--sc-font-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
}

/* 64px (--sc-space-3xl) até a lista acima, igual ao Figma (nodeId
   2006:492) — sem isso o aviso ficava colado direto embaixo do último
   item da lista, sem respiro nenhum. */
.sc-programacao .sc-caption {
  margin-top: var(--sc-space-3xl);
  font-family: var(--sc-font-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
}

.sc-programacao-lista {
  max-width: 576px;
  margin: var(--sc-space-2xl) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-xl);
}

.sc-programacao-item .sc-body {
  margin-top: var(--sc-space-xs);
}

/* ==========================================================
   Quote + marcas participantes
   ========================================================== */
.sc-quote-brands {
  padding: var(--sc-space-2xl) var(--sc-padding-h-desktop) var(--sc-space-3xl);
  background-color: var(--sc-color-bg-primary);
}

.sc-quote-bar {
  height: 64px;
  /* Preenche a largura útil de .sc-quote-brands (dentro do padding
     --sc-padding-h-desktop) sem o max-width:1280px/centralização que
     tinha antes — mesmo limite que os containers de imagem das outras
     seções (sc-gallery etc.), que também só respeitam o padding do
     pai, sem encostar na borda da viewport. */
  width: 100%;
  margin: 0 0 var(--sc-space-xl);
  background-color: var(--sc-color-bg-dark);
}

/* Playfair Display 46px/52.9px, não Libre Baskerville clamp(28-42px) —
   confirmado no Figma (nodeId 2006:1383, "Event Quote"). */
.sc-quote-brands .sc-h1-serif {
  max-width: 900px;
  /* margin: 0 auto var(--sc-space-lg) era o valor anterior (sem margin-top) —
     top e bottom aumentados a pedido do Celso. */
  margin: var(--sc-space-lg) auto var(--sc-space-xl);
  font-family: var(--sc-font-display);
  font-size: 46px;
  line-height: 1; /* 1.15 era o valor anterior — a pedido do Celso */
  letter-spacing: 0;
}

/* Playfair Display Italic 19px/27px, não Montserrat 300 16px — mesmo
   caso acima, "Event Subtitle" no Figma. Único .sc-body-large desta
   seção (a lista de marcas usa .sc-body), por isso escopado direto na
   classe genérica sem precisar de classe própria no PHP. */
.sc-quote-brands .sc-body-large {
  font-family: var(--sc-font-display);
  font-size: 19px;
  line-height: 1.42;
}

.sc-brands-list {
  /* Valores exatos a pedido do Celso. font-size 22px era o valor anterior —
     diminuído a pedido do Celso. max-width 1150px e margin-top 2rem eram
     os valores anteriores — diminuído/aumentado a pedido do Celso pra
     mais respiro entre título/subtítulo e a lista de marcas. */
  max-width: 1060px;
  margin: var(--sc-space-2xl) auto 0;
  text-align: center;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.sc-quote-logo {
  display: block;
  width: 204px;
  height: auto;
  margin: var(--sc-space-xl) auto 0;
  /* Seção .sc-quote-brands tem fundo --sc-color-bg-primary (claro) — a
     arte de $header_logo cadastrada no ACF é clara (removebg em fundo
     branco), então sem isso ela some no fundo claro. brightness(0)
     força preto puro independente da cor original do arquivo fonte
     (mesmo raciocínio do brightness(0) invert(1) usado nas versões
     brancas sobre fundo escuro). */
  filter: brightness(0);
}

/* ==========================================================
   Público (profissionais x noivas)
   ========================================================== */
/* 80px uniforme (--sc-space-3xl) igual ao Figma (nodeId 2006:547),
   não os 64px genéricos de --sc-padding-h-desktop. */
.sc-publico {
  padding: var(--sc-space-3xl);
  background-color: var(--sc-color-bg-primary);
}

.sc-publico-columns {
  display: flex;
  /* var(--sc-space-xl) (48px) era o valor anterior — aumentado a pedido
     do Celso pra mais respiro entre as colunas Profissionais/Noivas. */
  gap: var(--sc-space-3xl);
  margin-top: var(--sc-space-lg);
}

.sc-publico-col {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* height:270px fixo (valor antigo) virou aspect-ratio: como as 2 colunas
   têm a mesma largura (.sc-publico-col, flex 1 0 0), aspect-ratio no lugar
   de um px fixo faz as duas colunas renderizarem SEMPRE com a mesma altura
   entre si — em qualquer largura de tela — sem precisar sincronizar via
   JS. 21/10 ≈ a proporção de 3 fotos de 189:270 (7:10) lado a lado com os
   2 gaps de 16px entre elas descontados (aproximado: a fórmula exata
   depende da largura real da coluna, mas o desvio é <2% pras larguras que
   esta seção assume - object-fit:cover absorve a diferença sem distorcer). */
.sc-publico-photos {
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  gap: var(--sc-space-sm);
  width: 100%;
  aspect-ratio: 21 / 10;
}

/* 2fr 1fr (2/3 + 1/3 da largura), não mais 189px fixo — a foto estreita
   escala junto com a largura da coluna em vez de ficar num valor fixo em
   px (a pedido do Celso). */
.sc-publico-photos-2 { grid-template-columns: 2fr 1fr; }

/* 189px fixo por foto (Atualização 35) deixava o bloco com só 599px de
   largura, bem menor que os ~832px da coluna — sobrava vão vazio grande à
   direita, desalinhado com a coluna "Para profissionais" ao lado (que
   preenche 100%). Voltou a preencher a coluna toda (repeat(3, 1fr) +
   width:100%) — a pedido do Celso. */
.sc-publico-photos-3 {
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  align-self: flex-start;
}

.sc-publico-photos .sc-media-placeholder { height: 100%; }

/* Playfair Display 28px/42px, sem letter-spacing — não o .sc-h1-serif
   genérico (Libre Baskerville, clamp 28-42px, tracking 2px), confirmado
   no Figma ("Para profissionais"/"Para noivas", nodeId 2006:547). Em
   telas largas o clamp genérico renderizava no teto de 42px, bem maior
   que o tamanho fixo real do design. */
.sc-publico-col .sc-h1-serif {
  margin-top: var(--sc-space-lg);
  font-family: var(--sc-font-display);
  font-size: 32px;
  line-height: 1.5;
  letter-spacing: 0;
}

.sc-publico-lista {
  list-style: none;
  margin-top: var(--sc-space-md);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.sc-publico-lista li {
  font-family: var(--sc-font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.393;
}

/* ==========================================================
   Desfile hero + colagem
   ========================================================== */
.sc-desfile-hero {
  /* Ao contrário do .sc-hero do topo (cheio de propósito no primeiro
     load), esta seção fica no meio do scroll — usar vh aqui deixava a
     altura dependente da janela do navegador em vez da proporção real
     do frame no Figma (nodeId 2006:673, 1440×766). */
  aspect-ratio: 1440 / 766;
  min-height: 420px;
  background-color: var(--sc-color-bg-dark);
}

/* ==========================================================
   Creative Director
   ========================================================== */
/* Padding horizontal 80px (--sc-space-3xl), não os 64px genéricos de
   --sc-padding-h-desktop usados nas outras seções — Container fica em
   x=80 dos dois lados no Figma (nodeId 2006:805), não 64. */
.sc-diretor {
  display: flex;
  gap: var(--sc-space-3xl);
  padding: var(--sc-space-3xl);
  background-color: var(--sc-color-bg-primary);
}

/* 518px era o valor exato do Figma (Container do texto) — 650px a
   pedido do Celso, coluna de texto maior.
   flex: 1 1 50% + min-width:0 (mesmo padrão de .sc-hero-info-text) —
   antes era "0 0 50%" (sem encolher) com as fotos em "1 0 0" (sem
   encolher, absorvendo o resto); em monitores menores isso deixava as
   fotos espremidas em vez de manter as 2 colunas realmente meio a meio. */
.sc-diretor-text {
  flex: 1 1 50%;
  min-width: 0;
  max-width: 650px;
}

/* Espaçamento graduado entre os 3 blocos, igual ao .sc-about-content
   (pt-[24px] no título, pt-[32px] no parágrafo no Figma, nodeId
   2006:805) — sem isso os blocos usavam o margin-bottom genérico de
   .sc-eyebrow/.sc-display (16px/32px), que não bate com o gap real. */
.sc-diretor-text .sc-eyebrow {
  margin-bottom: 0;
}

.sc-diretor-text .sc-display {
  margin-top: 24px;
  margin-bottom: 0;
  line-height: 1.05; /* 60.9px/58px, igual ao Figma (nodeId 2006:811) — não o 1.15 genérico */
}

.sc-diretor-text .sc-body {
  margin-top: 32px;
  font-size: 18px; /* 14px era o valor do Figma — maior a pedido do Celso */
  line-height: 1.9;
}

.sc-diretor-photos {
  /* Duas fileiras de verdade (3 fotos + 2 fotos, igual ao Figma: Frame 10
     360px + Frame 11 228px) — a altura vem das duas linhas do grid-template-rows
     abaixo, não de um height fixo aqui (um "height: 360px" nesta regra brigava
     com as 360+228px de conteúdo real e cortava a segunda fileira).
     6 colunas (não 3): as fotos da fileira 2 são retangulares na origem
     (~1.47:1, contra ~0.66:1 das 3 de cima) — em terços iguais ficavam
     espremidas num corte quase quadrado. Com terço (2/6) em cima e
     metade (3/6) embaixo, a fileira de baixo ganha o dobro da largura
     por foto e o corte fica fiel à foto original.
     flex:1 1 50% + min-width:0 (não flex:1 0 0) — igual à mudança em
     .sc-diretor-text acima: com "1 0 0" as fotos absorviam todo o
     espaço que sobrava do texto (mais de 50% em telas grandes, e ficava
     espremido contra a altura fixa das linhas do grid em monitores
     menores); agora as 2 colunas ficam sempre meio a meio de verdade. */
  flex: 1 1 50%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  /* clamp(): 487px/331px é o valor desktop (360px/228px do Figma, maior
     a pedido do Celso) — abaixo de ~1440px de viewport ele reduz de
     forma fluida (em vez de ficar fixo e a foto ficar espremida/alta
     demais pra largura da coluna) até bater no valor do breakpoint de
     tablet (240px/160px, @media max-width:1024px abaixo). */
  grid-template-rows: clamp(240px, 24vw, 487px) clamp(160px, 16vw, 331px);
  gap: var(--sc-space-sm);
}

.sc-diretor-photo-0 { grid-row: 1; grid-column: 1 / 3; }
.sc-diretor-photo-1 { grid-row: 1; grid-column: 3 / 5; }
.sc-diretor-photo-2 { grid-row: 1; grid-column: 5 / 7; }
.sc-diretor-photo-3 { grid-row: 2; grid-column: 1 / 4; }
.sc-diretor-photo-4 { grid-row: 2; grid-column: 4 / 7; }

/* ==========================================================
   Público Salão CasaNoivas (dados, fundo escuro)
   ========================================================== */
.sc-audience-stats {
  position: relative;
  background-color: var(--sc-color-bg-dark);
  padding: var(--sc-space-3xl) var(--sc-padding-h-desktop);
  overflow: hidden;
}

.sc-audience-stats-bg {
  position: absolute;
  inset: 0;
  opacity: 0.3;
  object-fit: cover;
}

.sc-audience-stats-content {
  /* Preenche a largura útil de .sc-audience-stats (dentro do padding
     --sc-padding-h-desktop), igual à .sc-quote-bar — sem o
     max-width:1280px/centralização que sobrava espaço vazio nas
     laterais em telas largas. */
  position: relative;
  display: flex;
  gap: var(--sc-space-3xl);
  width: 100%;
}

.sc-audience-stats-text {
  /* 6 de 12 colunas (50%) — 8/12 (~66.7%) era o valor anterior; reduzido
     a pedido do Celso pra sobrar mais espaço pra .sc-audience-stats-numbers
     (a faixa etária estava quebrando feio em monitores menores). */
  flex: 0 1 calc(100% * 6 / 12);
}

.sc-audience-stats-text .sc-h1-serif {
  /* Playfair Display Regular, não Libre Baskerville — confirmado no
     Figma (nodeId 2006:855, 36px original), 48px era o valor anterior
     (a pedido do Celso) — reduzido um pouco de novo, também a pedido. */
  color: var(--sc-color-text-inverse);
  font-family: var(--sc-font-display);
  font-size: 40px;
  line-height: 1.5;
  letter-spacing: 1.8px;
}

.sc-audience-stats-text .sc-body-large {
  /* Montserrat Medium (500) era o valor anterior — texto não deve ser
     negrito/semi-negrito a pedido do Celso, voltou pro peso regular (400).
     24px era o valor anterior — reduzido um pouco a pedido do Celso. */
  color: var(--sc-color-text-inverse);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.6;
}

/* dados_texto/dados_texto2 são <div>, não <p> (ver front-page.php) —
   :first-of-type em vez de "p + p", que nunca batia com nada. */
.sc-audience-stats-text .sc-body-large:first-of-type {
  margin-bottom: var(--sc-space-md);
}

.sc-audience-stats-numbers {
  /* flex:1 0 0 + space-between (não flex:0 0 auto) — a pedido do
     Celso, cobre o resto da largura disponível já que o texto ao
     lado ficou fixo em 420px (ver .sc-audience-stats-text). */
  flex: 1 0 0;
  display: flex;
  justify-content: space-between;
  gap: var(--sc-space-3xl);
  color: var(--sc-color-text-inverse);
}

.sc-stat-col {
  /* gap (não margin em cada item) já garante espaçamento IGUAL entre
     Mulheres/Homens/Faixa etária (e visitantes/noivas/imprensa/alcance
     na outra coluna) — 16px, depois 2rem, foram os valores anteriores;
     1.5rem é o valor final pedido pelo Celso. */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sc-stat { display: flex; flex-direction: column; }
.sc-stat-inline { align-items: center; }


/* Playfair Display (--sc-font-playfair), não Libre Baskerville
   (--sc-font-display) — confirmado no Figma (nodeId 2006:852), mesma
   fonte já usada nos números da seção Programação. */
.sc-stat-number {
  /* 52px a pedido do Celso — maior que os 42px exatos do Figma
     (nodeId 2006:852). */
  font-family: var(--sc-font-display);
  font-size: 52px;
}

.sc-stat-number-lg {
  font-family: var(--sc-font-display);
  font-size: 25px;
  line-height: 1.56;
  text-align: center;
}

.sc-stat-number-sm {
  font-family: var(--sc-font-body);
  font-weight: 600;
  font-size: 16px;
}

.sc-stat-label {
  font-family: var(--sc-font-body);
  font-size: 12px;
}

.sc-stat-age-label {
  /* font-weight:700 era o valor anterior — "Faixa etária" não deve ser
     negrito, mesmo peso do resto do texto da seção, a pedido do Celso. */
  font-family: var(--sc-font-body);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 1.65px;
  text-transform: uppercase;
}

.sc-stat-age-list {
  font-family: var(--sc-font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.393;
  margin-top: var(--sc-space-xs);
}

/* ul/li (só no Apoio Oficial, ver front-page.php) — controla a altura
   de cada linha da idade individualmente via li, em vez de um único
   line-height pro bloco todo. Reduzido a pedido do Celso. */
ul.sc-stat-age-list {
  list-style: none;
  margin: var(--sc-space-xs) 0 0;
  padding: 0;
}

ul.sc-stat-age-list li {
  line-height: 1.1;
  margin-bottom: var(--sc-space-sm); /* --sc-space-xs (8px) era pouco — aumentado a pedido do Celso */
}

.sc-audience-stats-logo {
  position: relative;
  display: block;
  width: 204px;
  height: auto;
  margin: var(--sc-space-2xl) auto 0;
  filter: brightness(0) invert(1);
}

/* ==========================================================
   Alcance no Instagram — no Figma o card escuro fica encaixado
   com margem clara (--sc-color-bg-primary) de --sc-space-3xl (80px)
   nos 4 lados (nodeId 2013:7112), não é full-bleed.
   ========================================================== */
.sc-instagram-stats {
  background-color: var(--sc-color-bg-primary);
  padding: var(--sc-space-3xl);
}

/* Card ocupando a tela inteira (100vh) — a pedido do Celso, maior que
   os 823px fixos do Figma (nodeId 2013:7112). display:flex +
   justify-content:flex-start orienta o conteúdo ao topo da tela cheia
   (não centralizado), já que o texto sozinho não preenche 100vh. */
.sc-instagram-stats-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100vh;
  min-height: 600px;
  background-color: var(--sc-color-bg-dark);
  /* padding-top 80px (--sc-space-3xl) era o valor original — 160px a
     pedido do Celso, mais respiro no topo do card. */
  padding: 160px var(--sc-padding-h-desktop) var(--sc-space-3xl);
  overflow: hidden;
}

.sc-instagram-stats-bg {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  object-fit: cover;
}

.sc-instagram-stats-content {
  position: relative;
  max-width: var(--sc-container-max);
  margin: 0 auto;
}

/* "Alcance no Instagram" (Montserrat Medium 25px) + "Grupo CasaModa"
   (Montserrat Regular 25px), 8px entre eles — não o .sc-eyebrow genérico
   (16px light). Confirmado no Figma (nodeId 2013:7112).
   Fora do .sc-instagram-stats-content (que tem max-width/margin:auto
   e centraliza pra caber os 1280px do container) — a pedido do Celso,
   o título fica solto direto no .sc-instagram-stats-inner, alinhado à
   esquerda de verdade (grudado no padding da seção) em vez de seguir
   a centralização do container de texto abaixo. */
.sc-instagram-stats-title {
  /* position:relative — sem isso o parágrafo (sem posicionamento) pinta
     ATRÁS do .sc-instagram-stats-bg (absolute), que vem antes no DOM;
     elementos posicionados sempre pintam por cima de blocos normais no
     mesmo contexto de empilhamento, independente da ordem no HTML. */
  position: relative;
  text-align: left;
  margin-bottom: 0;
  font-family: var(--sc-font-body);
  /* clamp, não 44px fixo (25px era o valor do Figma) — 44px estourava o
     card de 100vh em monitores menores (ver .sc-instagram-stats-inner),
     cortando "seguidores no Instagram" pra fora da tela; em monitores
     grandes o teto sobe além dos 44px, também a pedido do Celso. */
  font-size: clamp(16px, 1.8vw, 30px); /* reduzido de novo a pedido do Celso, inclusive o teto pra monitores grandes */
  text-transform: uppercase;
}

.sc-instagram-stats-title:nth-of-type(1) {
  font-weight: 500;
  letter-spacing: 2.6px;
  line-height: 0.78;
}

.sc-instagram-stats-title:nth-of-type(2) {
  margin-top: var(--sc-space-xs);
  font-weight: 400;
  letter-spacing: 2.4px;
  line-height: 0.72;
}

.sc-instagram-accounts {
  display: flex;
  justify-content: center;
  /* 80px (--sc-space-3xl) era o valor original — 240px fixo a pedido do
     Celso quebrava em monitores menores (não desktop grande o bastante
     pra caber 2×480px + 240px de gap sem estourar, mas largo o
     suficiente pra não cair no breakpoint de tablet que empilha em
     coluna). clamp() mantém os 240px em telas grandes e reduz de forma
     fluida em telas menores. */
  gap: clamp(40px, 8vw, 240px);
  /* 64px era o valor do Figma (nodeId 2013:7112), depois 200px fixo a
     pedido do Celso — clamp() com piso pra caber em monitores menores
     sem estourar os 100vh do card (ver .sc-instagram-stats-inner) e
     mantendo os 200px como teto em telas grandes. */
  margin-top: clamp(60px, 12vh, 200px);
}

.sc-instagram-account {
  /* flex:1 0 0 (sem encolher) + max-width:480px fixo é o que quebrava o
     layout em monitores menores, junto com o gap fixo acima — trocado
     pra "1 1 0" + min-width:0 pra poder encolher em vez de estourar a
     largura do container. */
  flex: 1 1 0;
  min-width: 0;
  max-width: 480px;
  display: flex;
  flex-direction: column;
}

/* Playfair Display 48px/72px era o valor do Figma (nodeId 2013:7112,
   32px de pt em CADA número) — fonte e espaçamento maiores a pedido
   do Celso, pra acompanhar o card de 100vh (ver .sc-instagram-accounts). */
.sc-instagram-account .sc-body {
  margin-top: 0;
  margin-bottom: 4rem; /* a pedido do Celso */
  font-size: clamp(20px, 2vw, 30px); /* aumentado de novo a pedido do Celso */
}

.sc-instagram-account .sc-display {
  /* 48px fixo era o valor anterior — em vh, não px, pra encolher junto
     com a altura do card (mesmo racional do font-size abaixo). */
  margin-top: clamp(16px, 5vh, 48px);
  margin-bottom: 0;
  font-family: var(--sc-font-display);
  font-size: clamp(26px, 3.2vw, 48px); /* reduzido de novo a pedido do Celso, inclusive o teto */
  line-height: 1.5;
}

.sc-instagram-account .sc-caption {
  margin-top: 0;
  font-size: clamp(13px, 1.1vw, 17px); /* aumentado de novo a pedido do Celso */
  font-weight: 700; /* a pedido do Celso */
}

/* Mais um degrau pra baixo especificamente em monitores <1400px (não
   entra no breakpoint de tablet, 1024px, mas o clamp() sozinho não
   encolhia o bastante nessa faixa) — a pedido do Celso. */
@media (max-width: 1400px) {
  .sc-instagram-stats-title { font-size: clamp(14px, 1.6vw, 22px); }
  .sc-instagram-account .sc-body { font-size: clamp(17px, 1.6vw, 24px); }
  .sc-instagram-account .sc-display { font-size: clamp(22px, 3vw, 36px); }
  .sc-instagram-account .sc-caption { font-size: clamp(11px, 0.95vw, 14px); }
}

/* ==========================================================
   Ecossistema digital — badges de redes sociais em órbita ao
   redor da marca, sobre foto com overlay escuro (nodeId 2006:976)
   ========================================================== */
.sc-digital-ecosystem {
  position: relative;
  padding: var(--sc-space-3xl) var(--sc-padding-h-desktop);
  background-color: var(--sc-color-bg-dark);
  text-align: center;
  overflow: hidden;
}

.sc-digital-ecosystem-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Overlay escuro pra garantir contraste do texto/logo (brancos) sobre a
   imagem de fundo, a pedido do Celso — a regra antiga
   (".sc-digital-ecosystem-bg::after") não fazia nada: ::after/::before
   não renderiza em elemento substituído (<img>), então a imagem de
   fundo nunca era escurecida de verdade. z-index explícito nas 3
   camadas (bg 0, overlay 1, content 2) garante a ordem de pintura
   certa — sem isso, ".sc-digital-ecosystem::before" (sem z-index) ficava
   OU atrás da imagem (que vem depois dele no DOM) OU por cima do
   conteúdo, dependendo da ordem, já que todos são position:absolute. */
.sc-digital-ecosystem::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1;
}

.sc-digital-ecosystem-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  /* flex-start, não center: no Figma só a área de badges (.sc-digital-
     ecosystem-orbit, largura fixa) fica centralizada — o título
     "Ecossistema Digital" fica alinhado à esquerda. */
  align-items: flex-start;
  /* Figma (nodeId 2006:976): card de conteúdo tem 495px de altura pra
     1280px de largura — o título + a área de badges sozinhos só
     ocupavam ~394px, deixando a seção proporcionalmente baixa (554px
     contra 655px no frame). */
  gap: 128px;
}

.sc-digital-ecosystem-content .sc-eyebrow {
  text-align: left;
}

.sc-digital-ecosystem-orbit {
  margin: 0 auto;
}

/* Área circular onde os badges ficam posicionados por percentual —
   escala junto com a largura (aspect-ratio trava a proporção do Figma),
   sem precisar de breakpoint específico pra mobile/tablet. */
.sc-digital-ecosystem-orbit {
  position: relative;
  width: 386px;
  max-width: 100%;
  aspect-ratio: 386 / 335;
}

.sc-digital-ecosystem-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 35%;
  height: auto;
  filter: brightness(0) invert(1);
}

.sc-digital-ecosystem-badge {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 10.4%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--sc-color-bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.sc-digital-ecosystem-badge:hover,
.sc-digital-ecosystem-badge:focus-visible {
  transform: translate(-50%, -50%) scale(1.1);
}

.sc-digital-ecosystem-badge img {
  width: 55%;
  height: 55%;
}

/* Posições em "flor" ao redor da logo, na mesma ordem/proporção do
   frame Figma (LinkedIn/Instagram/TikTok/Pinterest/YouTube/Globe/
   Asterisco) — nth-of-type ignora a <img> da logo, que é irmã. */
.sc-digital-ecosystem-badge:nth-of-type(1) { left: 50%;   top: 6.1%; }
.sc-digital-ecosystem-badge:nth-of-type(2) { left: 23.3%; top: 22.5%; }
.sc-digital-ecosystem-badge:nth-of-type(3) { left: 76.7%; top: 22.5%; }
.sc-digital-ecosystem-badge:nth-of-type(4) { left: 12.4%; top: 50%; }
.sc-digital-ecosystem-badge:nth-of-type(5) { left: 87.6%; top: 50%; }
.sc-digital-ecosystem-badge:nth-of-type(6) { left: 34.5%; top: 82.5%; }
.sc-digital-ecosystem-badge:nth-of-type(7) { left: 65.3%; top: 82.5%; }

/* ==========================================================
   Mídia Partner (FashionTV)
   ========================================================== */
/* 80px uniforme (--sc-space-3xl) igual ao Figma (nodeId 2006:1003), não
   os 64px genéricos de --sc-padding-h-desktop. */
.sc-media-partner {
  display: flex;
  background-color: var(--sc-color-bg-dark);
  padding: var(--sc-space-3xl);
  gap: var(--sc-space-2xl);
}

.sc-media-partner-photos {
  flex: 0 0 48%;
  /* Sem isso a grade não tinha altura nenhuma pra dividir entre as
     fileiras 1fr/0.78fr — ficava do tamanho natural das imagens, bem
     mais baixa que a coluna de texto ao lado (nodeId 2006:1004: bloco
     de fotos é 624×652, quase quadrado). */
  aspect-ratio: 624 / 652;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 0.78fr;
  gap: var(--sc-space-sm);
}

.sc-media-partner-photo-3 {
  grid-column: 1 / -1;
}

.sc-media-partner-content {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* center, não space-between (não centralize de verdade, e ainda por
     cima ignorava o gap reduzido, espalhando os blocos igual antes) —
     a pedido do Celso, blocos colados e centralizados na coluna. */
  justify-content: center;
  gap: 2rem; /* 0 ficou apertado demais — 2rem (32px) a pedido do Celso */
  text-align: center;
}

.sc-media-partner-logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sc-space-md);
}

/* "+" entre os 2 logos — fonte League Spartan, não a Libre Baskerville
   genérica de .sc-display, a pedido do Celso. */
.sc-media-partner-logo-row .sc-display {
  font-family: 'League Spartan', sans-serif;
  font-weight: 900;
}

/* Playfair Display 42px/60px + tracking 2px pro título (Medium), 448px
   fixos pro parágrafo (Montserrat Light, line-height 1.9) — confirmado
   no Figma (nodeId 2006:1003). Sem o max-width o parágrafo esticava até
   a largura toda da coluna, bem mais largo que o design real. */
.sc-media-partner-content .sc-h1-serif {
  font-family: var(--sc-font-display);
  font-weight: 500;
  font-size: 42px;
  line-height: 1.428;
  letter-spacing: 2px;
}

.sc-media-partner-content .sc-caption {
  max-width: 520px; /* 448px era o valor original — um pouco maior a pedido do Celso */
  margin: 0 auto;
  font-size: 16px; /* 12px era o valor de .sc-caption — maior a pedido do Celso */
  line-height: 1.9;
}

.sc-media-partner-logo-row img {
  width: 120px;
  height: auto;
  object-fit: contain;
  /* Seção .sc-media-partner tem fundo --sc-color-bg-dark — sem isso as
     logos (FashionTV + CasaModa Noivas), que são artes escuras, ficam
     quase invisíveis (mesmo tratamento usado em .sc-hero-logo/.sc-dark-split-content). */
  filter: brightness(0) invert(1);
}

/* Só o logo do Salão (1º da linha) fica maior — a pedido do Celso, o
   FashionTV (alt="FashionTV") volta pro tamanho original. */
.sc-media-partner-logo-row img:first-child {
  width: 180px;
}

.sc-media-partner-stats {
  display: flex;
  gap: var(--sc-space-xl);
}

/* "Desde 2012" fica numa fileira própria abaixo dos outros 2 stats, com
   texto maior — não é um 3º item inline (nodeId 2006:1003). */
.sc-media-partner-since {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0; /* 8px (--sc-space-xs) era o valor anterior — coladinho a pedido do Celso */
  margin-top: var(--sc-space-lg);
}

/* Playfair Display Regular 25px/39px pro "Desde 2012" — mesmo tamanho
   dos outros números desta seção (.sc-stat-number-lg), não os 28-42px
   clamp do .sc-h1-serif genérico usado no título grande da seção. */
.sc-media-partner-since .sc-h1-serif {
  font-family: var(--sc-font-display);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.56;
  letter-spacing: 0;
  /* .sc-h1-serif base tem margin-bottom:24px (--sc-space-md) — como
     item de flex column, isso ainda empurrava "no mercado" pra baixo
     mesmo com gap:0 no .sc-media-partner-since. Removido. */
  margin-bottom: 0;
}

/* ==========================================================
   Apoio Oficial — 2 colunas (nodeId 2006:1097): texto+stats à
   esquerda, foto à direita, 600/600 + gap 80 no Figma (aqui em fr
   iguais pra acompanhar a largura real do container).
   ========================================================== */
/* 80px uniforme (--sc-space-3xl) igual ao Figma (nodeId 2006:1097), não
   os 64px genéricos de --sc-padding-h-desktop. */
.sc-apoio-oficial {
  background-color: var(--sc-color-bg-dark);
  padding: var(--sc-space-3xl);
  /* min-height:100vh removido — altura livre (baseada no conteúdo) a
     pedido do Celso. */
  box-sizing: border-box;
}

.sc-apoio-oficial-row {
  display: flex;
  align-items: stretch;
  gap: var(--sc-space-3xl);
  margin: 0 auto; /* max-width removido a pedido do Celso — só o max-width, margin:auto ficou */
}

.sc-apoio-oficial-content {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 2rem;
}

.sc-apoio-oficial-image {
  flex: 1 0 0;
}

.sc-apoio-oficial-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Playfair Display 42px/60px + tracking 2px, igual ao título da seção
   Mídia Partner — confirmado no Figma (nodeId 2006:1097). */
.sc-apoio-oficial-content .sc-h1-serif {
  margin-bottom: var(--sc-space-lg); /* 0 era o valor anterior — maior a pedido do Celso */
  font-family: var(--sc-font-display);
  font-weight: 500;
  font-size: 52px; /* 42px era o valor anterior — maior a pedido do Celso */
  line-height: 1.428;
  letter-spacing: 2px;
  /* Título + logos + parágrafo centralizados (stats abaixo continuam à
     esquerda) — a pedido do Celso, igual ao Figma (nodeId 2006:1097). */
  text-align: center;
}

/* 72px do título (40px do container + 32px de padding próprio do bloco
   no Figma) — não os 32px genéricos de .sc-h1-serif/.sc-apoio-oficial-logos
   somados (64px). */
.sc-apoio-oficial-logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 530px;
  margin: 0 auto;
}

.sc-apoio-oficial-logos-label {
  font-family: var(--sc-font-body);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.sc-apoio-oficial-logos img {
  height: 45px;
  width: auto;
  object-fit: contain;
  /* Sem brightness(0) invert(1) (usado no resto da página pra forçar
     logo branca em fundo escuro) — a pedido do Celso: o logo do
     Higienópolis aqui é a versão "caixa escura" (fundo próprio +
     texto branco, já auto-contida), e o filtro forçava TUDO pra branco
     sólido (caixa e texto viravam a mesma cor), apagando o texto.
     O Iguatemi One já é a versão branca/transparente, funciona igual
     sem o filtro. */
}

.sc-apoio-oficial-text {
  max-width: 567px;
  margin: 0 auto var(--sc-space-lg);
  text-align: center;
  font-size: 18px;
  line-height: 1.9;
}

/* 40px em vez dos tokens genéricos (48/24/48px) nos 3 — nenhum bate
   exato num token da escala (8/16/24/32/48/64/80), então valor fixo
   mesmo, confirmado no Figma (nodeId 2006:1097). */
.sc-apoio-oficial-stats {
  display: flex;
  align-items: flex-start;
  justify-content: space-around; /* a pedido do Celso, as 2 colunas (fluxo/renda/gênero + idade) espalhadas */
  gap: var(--sc-space-2xl);
  /* margin-top removido — gap:2rem do .sc-apoio-oficial-content (pai) cuida do espaçamento */
}

/* Fonte um pouco maior nas colunas de stats — a pedido do Celso. */
.sc-apoio-oficial-stats .sc-stat-number-sm { font-size: 18px; }
.sc-apoio-oficial-stats .sc-stat-label { font-size: 14px; }
.sc-apoio-oficial-stats .sc-stat-age-label { font-size: 14px; }
.sc-apoio-oficial-stats .sc-stat-age-list { font-size: 16px; }

/* Legendas maiores em "Público Salão CasaNoivas" — a pedido do Celso.
   Faixa etária aumenta mais que as outras legendas. Escopado só nesta
   seção (não em .sc-stat-label/.sc-stat-age-list direto) pra não mexer
   em Mídia Partner/Apoio Oficial, que usam as mesmas classes. */
.sc-audience-stats .sc-stat-label { font-size: 16px; }
.sc-audience-stats .sc-stat-age-label { font-size: 16px; }
.sc-audience-stats .sc-stat-age-list { font-size: 20px; }

.sc-apoio-oficial-stats-col {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.sc-apoio-oficial-gender {
  display: flex;
  gap: 40px;
}

.sc-apoio-oficial-stats .sc-stat-age {
  text-align: center;
}

/* ==========================================================
   Imprensa — grid de clippings reais (nodeId 2006:1256)
   ========================================================== */
/* 80px uniforme (--sc-space-3xl) igual ao Figma (nodeId 2006:1256), não
   os 64px genéricos de --sc-padding-h-desktop. */
.sc-imprensa {
  background-color: var(--sc-color-bg-primary);
  padding: var(--sc-space-3xl);
}

.sc-imprensa-grid {
  max-width: var(--sc-container-max);
  margin: var(--sc-space-lg) auto 0;
}

/* Fileira 1 tem 5 fotos, fileira 2 tem 3 — não é um grid parelho
   (nodeId 2006:1256), por isso duas fileiras flex em vez de CSS grid.
   Cada card é um print inteiro (título+foto+legenda já compostos na
   própria imagem, não HTML), então NÃO faz sentido cortar em larguras
   iguais: medindo o export do handoff, todo card de uma fileira tem a
   MESMA ALTURA e a largura varia com o aspect ratio natural de cada um
   (largura = altura da fileira × aspect ratio da imagem) — por isso
   height fixo + width auto, sem object-fit:cover/flex:1 igualando
   larguras (isso cortava conteúdo real dos prints mais largos/estreitos). */
.sc-imprensa-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sc-space-sm);
}

.sc-imprensa-row + .sc-imprensa-row {
  margin-top: var(--sc-space-sm);
}

.sc-imprensa-row-5 .sc-imprensa-item { height: 340px; }
.sc-imprensa-row-3 .sc-imprensa-item { height: 282px; }

.sc-imprensa-item {
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* ==========================================================
   Fechamento
   ========================================================== */
.sc-dark-split {
  display: flex;
  /* 813px reais do frame no Figma (nodeId 2006:1257, "Backstage-Passarela"). */
  min-height: 813px;
}

.sc-dark-split-image { flex: 1 0 0; }

/* Painel escuro com a foto de bastidores centralizada (400×400, p-128) —
   não logo+frase, que não existe nesse node do Figma. */
.sc-dark-split-content {
  flex: 1 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 128px;
  background-color: var(--sc-color-bg-dark);
}

.sc-dark-split-content img {
  width: 400px;
  height: 400px;
  max-width: 100%;
  object-fit: cover;
}

/* Painel de fechamento (logo + "O ENCONTRO DA MODA BRIDAL") só existe
   no Figma tablet/mobile — escondido no desktop, onde o painel escuro
   mostra a foto de bastidores acima. */
.sc-dark-split-closing {
  display: none;
}

.sc-closing-hero {
  position: relative;
  /* Mesmo racional do .sc-desfile-hero: fica no fim do scroll, não no
     primeiro load, então segue a proporção do frame (nodeId 2006:1292,
     1440×760) em vez de vh. */
  aspect-ratio: 1440 / 760;
  min-height: 380px;
}

/* right/bottom 80px (--sc-space-3xl), alinhado à direita (items-end) —
   não os 64px genéricos nem o center, confirmado no Figma (nodeId
   2006:1292: Container com p-[80px], Frame com items-end). */
.sc-closing-hero-footer {
  position: absolute;
  right: var(--sc-space-3xl);
  bottom: var(--sc-space-3xl);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sc-space-sm);
  color: var(--sc-color-text-inverse);
}

/* Montserrat 12px, tracking 3.3px, uppercase, alinhado à direita — não
   o .sc-caption genérico (Neue Montreal, sem tracking/uppercase). */
.sc-closing-hero-footer .sc-caption {
  font-family: var(--sc-font-body);
  font-size: 12px;
  letter-spacing: 3.3px;
  text-transform: uppercase;
  text-align: right;
  /* .sc-caption base define color:var(--sc-color-text-secondary), que
     sobrescreve o color:inverse herdado do .sc-closing-hero-footer
     (pai) — texto ficava escuro sobre a foto. Força branco de volta. */
  color: var(--sc-color-text-inverse);
}

.sc-closing-hero-footer img {
  width: 172px;
  height: auto;
  object-fit: contain;
  /* .sc-closing-hero-footer fica sobre a foto de fechamento (fundo
     escuro) — cor: var(--sc-color-text-inverse) no texto ao lado já
     confirma isso; logo precisa ficar branca, mesmo tratamento das
     outras instâncias sobre fundo escuro. */
  filter: brightness(0) invert(1);
}

/* py-128/px-80 no Figma (nodeId 2006:1335) — bem mais respirado que os
   48px/64px genéricos usados antes; a seção inteira é só esses 3 logos
   soltos num fundo claro. */
.sc-partner-logos {
  padding: 128px var(--sc-space-3xl);
  background-color: var(--sc-color-bg-primary);
  text-align: center;
}

/* space-between + max-width:1280px (não center+gap) — confirmado no
   Figma (nodeId 2006:1335, "Logos-Apoio"): os 3 grupos ocupam a largura
   toda do container, ponta a ponta, não ficam agrupados no centro. */
.sc-partner-logos-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--sc-container-max);
  margin: var(--sc-space-md) auto 0;
  gap: var(--sc-space-2xl);
  flex-wrap: wrap;
}

/* Cada grupo é rótulo de texto fixo (Apoio / Mídia Partner / Espaço Evento)
   + 1 ou 2 logos ao lado — texto sempre à esquerda das imagens. */
.sc-partner-group {
  display: flex;
  align-items: center;
  gap: var(--sc-space-md);
  flex-wrap: wrap;
}

.sc-partner-group img {
  height: 90px; /* 60px (do Figma, nodeId 2006:1335) era o valor anterior — aumentado a pedido do Celso */
  width: auto;
  object-fit: contain;
}

/* Só o logo do Higienópolis maior que os outros 3 — a pedido do Celso.
   Seletor com .sc-partner-group img.___ (não só a classe sozinha) pra
   vencer a especificidade de ".sc-partner-group img" acima (classe+tag
   sempre bate classe sozinha). */
.sc-partner-group img.sc-partner-logo-higienopolis {
  height: 140px;
}

.sc-partner-label {
  font-family: var(--sc-font-body);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sc-color-text-primary);
  white-space: nowrap;
}

/* ==========================================================
   Footer
   ========================================================== */
/* 80px uniforme (--sc-space-3xl) igual ao Figma (nodeId 2006:1336), não
   os 64px genéricos de --sc-padding-h-desktop. */
.sc-footer {
  background-color: var(--sc-color-bg-dark);
  padding: var(--sc-space-3xl);
}

.sc-footer-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between; /* a pedido do Celso — colunas espaçadas de ponta a ponta */
  gap: var(--sc-space-3xl);
  max-width: var(--sc-container-max);
  margin: 0 auto;
}

.sc-footer-logo {
  width: 172px;
  height: auto;
  object-fit: contain;
  /* $header_logo é o PNG preto (fundo claro) — footer agora é escuro,
     mesmo tratamento usado em .sc-hero-logo/.sc-quote-logo. */
  filter: brightness(0) invert(1);
}

/* Sem gap uniforme: no Figma só existe respiro (16px) entre o título
   (Contato/Siga) e o conteúdo abaixo — isso já vem do margin-bottom
   nativo de .sc-eyebrow. Entre "Grupo CasaModa" e o e-mail não há
   espaço nenhum (0), diferente do 8px genérico que estava aqui. */
.sc-footer-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* margin-left:auto removido — redundante e conflitava com o
   justify-content:space-between novo em .sc-footer-content. */

.sc-footer .sc-eyebrow,
.sc-footer .sc-body-large,
.sc-footer .sc-body {
  color: var(--sc-color-text-inverse);
  /* Algum plugin injeta "footer p { display: none; visibility: hidden }
     !important" pra esconder o crédito padrão "Powered by WordPress" —
     como .sc-footer usa a tag semântica <footer>, isso também apagava
     nossos <p> daqui (Contato/Siga e o texto da empresa) como dano
     colateral. !important necessário pra vencer o !important do plugin. */
  display: block !important;
  visibility: visible !important;
}

/* Montserrat Light 20px/18px, tracking 2.4px pros títulos "Contato"/
   "Siga" (não os 16px/2.75px genéricos de .sc-eyebrow), e 14px/21px pro
   nome da empresa + e-mail (não os 16px de .sc-body-large nem os
   parâmetros default de .sc-body) — confirmado no Figma (nodeId
   2006:1336). */
.sc-footer-col .sc-eyebrow {
  font-size: 20px;
  letter-spacing: 2.4px;
  line-height: 0.9;
}

.sc-footer-col .sc-body-large,
.sc-footer-col .sc-body {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
}

.sc-footer-col a {
  color: var(--sc-color-text-inverse);
  text-decoration: none;
}

.sc-footer-col a:hover { opacity: 0.7; }

/* Sem margin-top: o pt-16 já vem do margin-bottom nativo de .sc-eyebrow
   (mesmo raciocínio do .sc-footer-col acima) — um valor extra aqui
   somava aos 16px e passava do respiro real do Figma. Links sublinhados
   e Montserrat Light 14px/19.5px, que não vinham de nenhuma classe
   (são <a> soltos dentro do <li>, sem .sc-body). */
.sc-footer-social-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-xs);
}

.sc-footer-social-list a {
  font-family: var(--sc-font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.393;
  text-decoration: underline;
  text-transform: uppercase;
}

/* ============================================================
   Responsivo — tablet (grid tokens: 8 col / 16px gutter / 40px
   margin, viewport 768). home-tablet nodeId 2017:472
   ============================================================ */
@media (max-width: 1024px) {
  /* Tamanhos de fonte do Figma home-tablet (nodeId 2017:472) — Playfair
     Display nestes 4 textos usa pontos diferentes do desktop em cada
     breakpoint (24/20/32/36px aqui, 20/20/36/52px no desktop). */
  .sc-hero-dates { font-size: 24px; }
  .sc-hero-activities { font-size: 32px; }
  .sc-about-content .sc-display { font-size: 36px; }

  .sc-about,
  .sc-venue,
  .sc-diretor,
  .sc-hero-info,
  .sc-media-partner,
  .sc-apoio-oficial-row,
  .sc-audience-stats-content {
    flex-direction: column;
  }

  /* Left_Text (nodeId 2087:701 mobile / 2017:556 tablet) não tem imagem
     lateral no Figma abaixo de desktop — só o bloco de texto, centralizado
     e ocupando a largura toda. Sem isto, a imagem herdava min-height:400px
     do desktop e inflava a seção em ~700px além do design. */
  .sc-hero-info-image { display: none; }

  .sc-about-content,
  .sc-venue-content {
    text-align: left;
    padding: var(--sc-space-xl) var(--sc-padding-h-tablet);
  }

  .sc-about-content .sc-eyebrow { text-align: left; }

  .sc-venue { padding: var(--sc-space-xl) var(--sc-padding-h-tablet) 0; }

  .sc-gallery,
  .sc-showroom,
  .sc-programacao,
  .sc-quote-brands,
  .sc-publico,
  .sc-diretor,
  .sc-audience-stats,
  .sc-instagram-stats-inner,
  .sc-media-partner,
  .sc-apoio-oficial,
  .sc-imprensa,
  .sc-footer,
  .sc-partner-logos,
  .sc-digital-ecosystem {
    padding-left: var(--sc-padding-h-tablet);
    padding-right: var(--sc-padding-h-tablet);
  }

  .sc-imprensa-row { flex-wrap: wrap; }
  .sc-imprensa-row-5 .sc-imprensa-item,
  .sc-imprensa-row-3 .sc-imprensa-item { height: 220px; }

  .sc-gallery-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .sc-gallery-grid-3 { grid-template-columns: repeat(2, 1fr); }

  /* Galeria 1: no desktop as fileiras viram display:contents (grid) e a
     4ª/5ª foto da fileira B ficam ocultas (a larga cobre esse espaço,
     span de 2 linhas). Tablet/mobile mantêm o mosaico original com as 9
     fotos — por isso revertem pra display:flex aqui, com as ocultas de
     volta visíveis. A foto larga (.sc-gallery-item-wide) é flex:0 0 500px
     fixo no desktop — sem shrink, ela não cabe em 768px de tablet e
     empurra as 3 fotos estreitas da mesma fileira quase a 0px de largura
     (scrollWidth vazava ~194px do viewport). Aqui ela vira uma linha
     cheia própria e as fotos ao redor quebram em grade, sem overflow. */
  .sc-gallery-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  .sc-gallery-row-a .sc-gallery-item,
  .sc-gallery-row-b .sc-gallery-item {
    flex: 1 1 0;
  }
  .sc-gallery-row-a .sc-gallery-item-wide {
    flex: 1 1 100%;
    aspect-ratio: 500 / 440;
  }
  .sc-gallery-row-b .sc-gallery-item:nth-child(4),
  .sc-gallery-row-b .sc-gallery-item:nth-child(5) {
    display: block;
  }

  .sc-gallery-3-row { flex-wrap: wrap; }
  .sc-gallery-3-split { flex-direction: row; }

  /* Galeria 2: a foto vertical (.sc-gallery-item-tall) é 460px fixo só
     no desktop (base acima) — restaura os 360px originais aqui, já que
     esta seção não tem outro ajuste de responsividade próprio. */
  .sc-gallery-item-tall {
    flex: 0 0 360px;
  }

  .sc-showroom-heading {
    display: block;
    text-align: center;
    margin-bottom: var(--sc-space-lg);
  }
  .sc-showroom-title {
    font-family: var(--sc-font-display);
    font-size: 32px;
    margin: 0 0 var(--sc-space-sm);
  }
  .sc-showroom-subtitle {
    font-family: var(--sc-font-body);
    font-size: 16px;
    max-width: 560px;
    margin: 0 auto;
  }

  .sc-showroom-grid { flex-direction: column; height: auto; }
  .sc-showroom-wide { flex-direction: column; }
  .sc-showroom-wide .sc-showroom-panel,
  .sc-showroom-stack .sc-showroom-panel { aspect-ratio: 4 / 3; flex: none; }
  .sc-showroom-stack { flex: none; }

  .sc-publico-columns { flex-direction: column; gap: var(--sc-space-2xl); }

  .sc-diretor-photos { height: auto; grid-template-rows: 240px 160px; }

  .sc-audience-stats-numbers { gap: var(--sc-space-xl); }

  .sc-instagram-accounts { flex-direction: column; align-items: center; }

  /* No Figma tablet/mobile (nodeId 2081:738 / 2087:907) o card escuro
     é full-bleed, sem a margem clara de 80px que existe só no desktop
     (nodeId 2013:7112) — confirmado ao vivo, a margem comia 41% da
     tela em 390px. */
  .sc-instagram-stats { padding: 0; }

  .sc-media-partner-photos { flex: none; width: 100%; }

  .sc-dark-split { min-height: 480px; }

  /* Tablet (nodeId 2017:788): painel escuro mostra logo + frase, não a
     foto de bastidores — layout continua lado a lado (384/384). */
  .sc-dark-split-bastidores { display: none; }
  .sc-dark-split-closing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sc-space-sm);
    text-align: center;
    color: var(--sc-color-text-inverse);
  }
  .sc-dark-split-content .sc-dark-split-logo { width: 160px; height: auto; object-fit: contain; }
  .sc-dark-split-content { padding: var(--sc-space-xl); }

  .sc-footer-content { flex-direction: column; gap: var(--sc-space-lg); }
  .sc-footer-col:last-child { margin-left: 0; }
}

/* ============================================================
   Responsivo — mobile (grid tokens: 4 col / 16px gutter / 24px
   margin, viewport 375). home-mobile nodeId 2087:616
   ============================================================ */
@media (max-width: 480px) {
  .sc-hero { min-height: 480px; }
  .sc-hero-info-text { padding: var(--sc-space-lg) var(--sc-padding-h-mobile); }

  /* Tamanhos de fonte do Figma home-mobile (nodeId 2087:616) — pisando
     nos valores de tablet acima (mesma especificidade, este bloco vem
     depois no arquivo e 480px é subconjunto de 1024px). */
  .sc-hero-dates { font-size: 20px; }
  .sc-hero-venue { font-size: 16px; }
  .sc-hero-activities { font-size: 26px; }
  .sc-about-content .sc-display { font-size: 28px; }

  /* Logo + "2027" (.sc-hero-logo-block) só no desktop — no mobile some
     inteiro, ficando só data/local/atividades. */
  .sc-hero-logo-block { display: none; }

  .sc-about-content,
  .sc-venue,
  .sc-showroom,
  .sc-programacao,
  .sc-quote-brands,
  .sc-publico,
  .sc-diretor,
  .sc-audience-stats,
  .sc-instagram-stats-inner,
  .sc-media-partner,
  .sc-apoio-oficial,
  .sc-imprensa,
  .sc-footer,
  .sc-partner-logos,
  .sc-digital-ecosystem,
  .sc-gallery {
    padding-left: var(--sc-padding-h-mobile);
    padding-right: var(--sc-padding-h-mobile);
  }

  .sc-gallery-grid-4,
  .sc-gallery-grid-3 {
    grid-template-columns: 1fr 1fr;
  }

  /* Container (nodeId 2087:713): no mobile as 9 fotos da Galeria 1 viram
     mosaico de 2 colunas com proporção ~173/180 (quase quadrada), bem mais
     compacta que os 240/440 (retrato longo) do desktop. flex-wrap sozinho
     (herdado do breakpoint de tablet acima) já evita o overflow; aqui só
     ajusta a proporção das fotos pro valor real do Figma mobile.
     :not(.sc-gallery-item-wide) é necessário porque o item largo também
     carrega a classe .sc-gallery-item — sem excluí-lo aqui, esta regra
     (mesma especificidade, mais tardia no arquivo) vencia a declaração
     flex:1 1 100% dele lá no breakpoint de tablet e voltava a espremê-lo
     pra 50% de largura junto com os outros. */
  .sc-gallery-row-a .sc-gallery-item:not(.sc-gallery-item-wide),
  .sc-gallery-row-b .sc-gallery-item {
    flex-basis: calc(50% - 10px);
    aspect-ratio: 173 / 180;
  }
  .sc-gallery-row-a .sc-gallery-item-wide {
    flex-basis: 100%;
    aspect-ratio: 358 / 240;
  }

  .sc-gallery-3-row,
  .sc-gallery-3-split { flex-direction: column; }

  /* .sc-gallery-3-row/.sc-gallery-3-split em coluna: os itens tinham
     flex:1 1 0 sem altura própria (o .sc-gallery-3-split ainda tinha
     aspect-ratio:auto). Em coluna, sem uma altura definida no
     container (auto) pra distribuir via flex-grow, isso colapsa tudo
     pra 0px — reproduzido ao vivo (Playwright, 390px): só as 2 fotos
     do split apareciam depois do primeiro fix, os itens diretos da
     linha ainda sumiam. Fixando aspect-ratio explícito (3/4, mesma
     proporção padrão de .sc-gallery-item) e tirando o flex-grow
     resolve os dois casos. */
  .sc-gallery-3-row .sc-gallery-item {
    flex: none;
    aspect-ratio: 3 / 4;
  }

  .sc-imprensa-row { flex-direction: column; align-items: center; }
  .sc-imprensa-row-5 .sc-imprensa-item,
  .sc-imprensa-row-3 .sc-imprensa-item { height: auto; width: 100%; }

  .sc-diretor-photos { grid-template-rows: 150px 110px; }

  .sc-media-partner-photos { grid-template-columns: 1fr 1fr; }

  .sc-media-partner-stats { flex-direction: column; align-items: center; gap: var(--sc-space-md); }

  .sc-apoio-oficial-stats { flex-direction: column; align-items: center; }

  .sc-quote-logo { width: 140px; }

  /* Desktop usa a proporção do frame 1440×766 — no mobile (nodeId
     2087:852, 390×220) o frame é bem mais baixo/largo; mantendo a
     proporção do desktop aqui cortava o texto "FASHION SHOW" da foto
     de abertura (virava "HION SHO"), confirmado ao vivo em 390px. */
  .sc-desfile-hero {
    aspect-ratio: 390 / 220;
    min-height: 0;
  }

  /* Mobile (nodeId 2087:1129): empilha — foto em cima, painel de
     fechamento (logo + frase) embaixo, sem a foto de bastidores 400×400
     (que forçava padding:128px fixo e espremia tudo em telas estreitas). */
  .sc-dark-split { flex-direction: column; min-height: 0; }
  .sc-dark-split-image { aspect-ratio: 342 / 380; }
  .sc-dark-split-bastidores { display: none; }
  .sc-dark-split-closing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sc-space-sm);
    text-align: center;
    color: var(--sc-color-text-inverse);
  }
  .sc-dark-split-content .sc-dark-split-logo { width: 140px; height: auto; object-fit: contain; }
  .sc-dark-split-content { padding: var(--sc-space-lg) var(--sc-padding-h-mobile); }

  .sc-closing-hero-footer {
    right: var(--sc-padding-h-mobile);
    bottom: var(--sc-space-md);
  }
}