/* DDR principal · Além do Round: a identidade aprovada (território com a Forma) abre o índice e cada recorte.
   Acervo misto: tipografia, borda e neutros compartilhados; o formato muda só a mídia (texto sustenta a
   composição sozinho; vídeo com a imagem inteira; imagem+texto sobre o rebaixo). Leitura 18/1.75 (17/1.7). */
#ddr-base .ddr-alem__formato { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
#ddr-base .ddr-alem__resumo { font-size: 17px; line-height: 1.5; max-width: 60ch; }
#ddr-base .ddr-alem__destaque { display: grid; gap: 22px 44px; align-items: center; padding: 30px 0 8px; }
#ddr-base .ddr-alem__destaque--midia { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
#ddr-base .ddr-alem__destaque-midia img, #ddr-base .ddr-alem__card-midia img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--ddr-radius-card); }
#ddr-base .ddr-alem__destaque-texto { display: grid; gap: 12px; justify-items: start; }
#ddr-base .ddr-alem__destaque h2 { font: 700 clamp(38px, 4.6cqw, 64px)/1 var(--ddr-heading); letter-spacing: -.05em; max-width: 16ch; }
#ddr-base .ddr-alem__destaque h2 a:hover, #ddr-base .ddr-alem__card h3 a:hover { text-decoration: underline; text-underline-offset: 5px; }
#ddr-base .ddr-alem__trecho { margin: 4px 0; padding-left: 18px; border-left: 3px solid var(--ddr-orange); }
#ddr-base .ddr-alem__trecho p { font: 600 clamp(20px, 2cqw, 26px)/1.3 var(--ddr-heading); letter-spacing: -.02em; }
#ddr-base .ddr-alem__filtros ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; }
#ddr-base .ddr-alem__filtros a { display: inline-flex; min-height: 40px; align-items: center; padding: 8px 14px; border: 1px solid rgba(24, 24, 24, .34); border-radius: 999px; font-size: 14px; }
#ddr-base .ddr-alem__filtros a[aria-current] { background: var(--ddr-charcoal); color: var(--ddr-offwhite); border-color: var(--ddr-charcoal); }
#ddr-base .ddr-alem__colecao { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; }
#ddr-base .ddr-alem__card { display: grid; align-content: start; overflow: hidden; border: 1px solid rgba(24, 24, 24, .22); border-radius: var(--ddr-radius-card); background: var(--ddr-offwhite); }
#ddr-base .ddr-alem__card-midia img { border-radius: 0; }
#ddr-base .ddr-alem__card--imagem-texto { background: #E6E0D5; }
#ddr-base .ddr-alem__card-texto { display: grid; gap: 8px; padding: 20px 22px 22px; }
#ddr-base .ddr-alem__card h3 { font: 700 clamp(24px, 2.4cqw, 32px)/1.08 var(--ddr-heading); letter-spacing: -.035em; }
#ddr-base .ddr-alem__acao { font-size: 14px; font-weight: 600; }
#ddr-base .ddr-alem__vazio { font-size: 16px; }
#ddr-base .ddr-alem__vazio a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#ddr-base .ddr-alem__rascunho { margin: 16px auto 0; padding: 12px 16px; border-left: 3px solid var(--ddr-orange); background: #F6EEE6; font-weight: 600; }
#ddr-base .ddr-alem__leitura { display: grid; gap: 28px; justify-items: start; }
#ddr-base .ddr-alem__midia { width: 100%; max-width: 980px; margin: 0; }
#ddr-base .ddr-alem__midia img, #ddr-base .ddr-alem__arquivo { display: block; width: 100%; border-radius: var(--ddr-radius-card); background: #000; }
#ddr-base .ddr-alem__midia figcaption, #ddr-base .ddr-alem__corpo figcaption { margin-top: 8px; font-size: 14px; color: var(--ddr-text-muted); }
#ddr-base .ddr-alem__video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--ddr-radius-card); background: #000; }
#ddr-base .ddr-alem__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#ddr-base .ddr-alem__corpo { display: grid; gap: 18px; max-width: 68ch; font-size: 18px; line-height: 1.75; }
#ddr-base .ddr-alem__corpo h2 { margin-top: 12px; font: 600 clamp(24px, 2.4cqw, 30px)/1.15 var(--ddr-heading); letter-spacing: -.03em; }
#ddr-base .ddr-alem__corpo blockquote { margin: 6px 0; padding-left: 20px; border-left: 3px solid var(--ddr-charcoal); }
#ddr-base .ddr-alem__corpo blockquote p { font: 600 22px/1.4 var(--ddr-heading); letter-spacing: -.015em; }
#ddr-base .ddr-alem__corpo blockquote footer { margin-top: 6px; font-size: 15px; color: var(--ddr-text-muted); }
#ddr-base .ddr-alem__corpo ul, #ddr-base .ddr-alem__corpo ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
#ddr-base .ddr-alem__corpo img { display: block; width: 100%; border-radius: var(--ddr-radius-card); }
@container (max-width: 800px) {
  #ddr-base .ddr-alem__destaque--midia, #ddr-base .ddr-alem__colecao { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 550px) {
  #ddr-base .ddr-alem__corpo { font-size: 17px; line-height: 1.7; }
  #ddr-base .ddr-alem__card-texto { padding: 18px 18px 20px; }
}

/* ---------- recorte: corpo — imagem e vídeo com a largura toda do conteúdo ---------- */
#ddr-base .base-content.ddr-alem__leitura { padding-top: 28px; }
#ddr-base .ddr-alem__leitura--imagem-texto .ddr-alem__midia, #ddr-base .ddr-alem__leitura--video .ddr-alem__midia { max-width: none; }

/* ---------- recorte no celular: a Forma Contínua com presença ----------
   A abertura é o território aprovado (Forma grande, presença territorial forte). No celular, a Forma ganha
   escala e é cortada na borda da tela: a seção do território já recorta o que passa e a página não rola de
   lado (overflow-x: clip). O respiro da marca sai só aqui, para a escala ir para o desenho. */
@container (max-width: 550px) {
  #ddr-base .base-content.ddr-alem__leitura { padding-top: 20px; }
  #ddr-base .ddr-alem__abertura .ddr-ar__forma { justify-content: flex-start; margin: -30px 0 -4px; }
  #ddr-base .ddr-alem__abertura .ddr-ar__forma .v2-marca-respiro { padding: 0 !important; max-width: none; transform: translateX(14%); }
  #ddr-base .ddr-alem__abertura .ddr-ar__forma .v2-marca { width: 118vw; max-width: none; }
}