/* DDR principal · extensões da integração no site real
   Complementa ddr-principal.css (Sistema Visual v1 do Codex, copiado sem alteração). Mesmo escopo
   #ddr-base, mesmos tokens e breakpoints de container, sem motion. A profundidade da página vem de
   superfícies, imagem e composição: cada território tem uma variante semântica própria sobre
   primitivas comuns (E1, papel, marcos). Nenhuma cor nova além do verde de apoio aprovado. */

/* ---------- tokens da integração ---------- */
#ddr-base {
  /* Verde de apoio, APROVADO em 25/09/2026 (amostrado da referência Fundamentos). Só aprendizado,
     progresso e concluído; sempre com tinta carvão (12,75:1); nunca texto nem linha fina sobre
     off-white (1,27:1). Não é cor de marca e não compete com o laranja. */
  --ddr-verde: #D5E52D;
  /* Papel do território editorial (densidade intermediária aprovada para o Entre Rounds). */
  --ddr-papel: #EAE3D5;
  /* Composições das cores-base (não são cores novas). */
  --ddr-linha-inversa: color-mix(in srgb, var(--ddr-offwhite) 19%, var(--ddr-charcoal));
  --ddr-texto-inverso-apoio: rgba(246, 244, 239, .78);
  --ddr-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3 4.8 8.8 9.8 3.4' fill='none' stroke='%23181818' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ddr-grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- página: as faixas de superfície vão até a borda da tela; o contêiner segue com 1440 px ---------- */
body.ddr-pagina { margin: 0; background: #F6F4EF; overflow-x: clip; }
/* as faixas e o grão se estendem até a borda com box-shadow e pseudo-elementos; o clip impede rolagem lateral */
#ddr-base > header, #ddr-base .base-hero { box-shadow: 0 0 0 100vmax var(--ddr-charcoal); clip-path: inset(0 -100vmax); }
#ddr-base .base-content, #ddr-base .base-footer { box-shadow: 0 0 0 100vmax var(--ddr-offwhite); clip-path: inset(0 -100vmax); }
#ddr-base .ddr-pular { position: absolute; left: -9999px; top: 0; }
#ddr-base a.ddr-pular:focus { left: 16px; top: 16px; z-index: 20; padding: 10px 14px; border-radius: var(--ddr-radius-button); background: var(--ddr-offwhite); color: var(--ddr-charcoal); font-weight: 600; }

/* ---------- navegação do site real ----------
   A referência previu dois links. O site tem sete destinos: quando não cabem (contêiner até 1080 px),
   um botão abre a lista completa. Sem JavaScript, a lista fica aberta. */
#ddr-base .base-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--ddr-orange); text-decoration-thickness: 2px; text-underline-offset: 6px; }
#ddr-base .ddr-menu { display: none; min-height: 44px; padding: 10px 16px; border: 1px solid var(--ddr-border-outline); border-radius: var(--ddr-radius-button); background: transparent; color: var(--ddr-text-inverse); font-size: 15px; font-weight: 600; }
#ddr-base .ddr-menu:hover { background: var(--ddr-offwhite); color: var(--ddr-charcoal); }
#ddr-base .ddr-menu:focus-visible { outline-color: var(--ddr-offwhite); }
#ddr-base .ddr-gaveta { display: none; }
@container (max-width: 1080px) {
  #ddr-base .base-nav { display: none; }
  #ddr-base .base-header > .base-button { margin-left: auto; }
  #ddr-base .ddr-menu { display: inline-flex; align-items: center; }
  html:not(.ddr-menu-pronto) #ddr-base .ddr-menu { display: none; }
  #ddr-base .ddr-header-aberto .ddr-gaveta, html:not(.ddr-menu-pronto) #ddr-base .ddr-gaveta { display: grid; padding: 4px 0 22px; }
  #ddr-base .ddr-gaveta a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--ddr-border-inverse); font-size: 17px; font-weight: 500; }
  #ddr-base .ddr-gaveta a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--ddr-orange); text-decoration-thickness: 2px; text-underline-offset: 6px; }
}
@container (max-width: 550px) { #ddr-base .ddr-menu { margin-left: auto; font-size: 14px; } }

/* ---------- cabeçalho de seção com ação e divisória entre seções claras ---------- */
#ddr-base .ddr-head-lado { display: grid; justify-items: start; gap: 4px; max-width: 30ch; padding-bottom: 3px; }
#ddr-base .ddr-head-lado > p { font-size: 15px; line-height: 1.45; }
@container (max-width: 550px) { #ddr-base .ddr-head-lado { margin-top: 16px; } }
#ddr-base .base-content + .base-content { padding-top: 0; }
#ddr-base .base-content + .base-content > :first-child { padding-top: 44px; border-top: 1px solid var(--ddr-border-divider); }
@container (max-width: 550px) { #ddr-base .base-content + .base-content > :first-child { padding-top: 32px; } }

/* =============================== primitivas =============================== */

/* E1 · dobra de componente: o canto segue o bojo do D oficial (arco de raio 1,334 × a dobra) e mostra o
   avesso laranja, que leva uma informação curta sempre repetida no texto para leitores de tela. */
#ddr-base .ddr-e1 { --d: 64px; position: relative; isolation: isolate; }
#ddr-base .ddr-e1__avesso { position: absolute; top: 0; right: 0; z-index: 0; width: var(--d); height: var(--d); display: flex; justify-content: flex-end; align-items: flex-start;
  padding: calc(var(--d) * .13) calc(var(--d) * .12); background: var(--ddr-orange); color: var(--ddr-charcoal); border-top-right-radius: calc(var(--d) * .14);
  font: 700 calc(var(--d) * .26)/1 var(--ddr-heading); letter-spacing: -.02em; }
#ddr-base .ddr-e1__avesso--rotulo { padding: calc(var(--d) * .14) calc(var(--d) * .1); font: 700 11px/1 var(--ddr-body); letter-spacing: .07em; text-transform: uppercase; }
#ddr-base .ddr-e1__sup { position: relative; z-index: 1; background: var(--e1-sup, var(--ddr-charcoal));
  -webkit-mask: radial-gradient(133.4% 133.4% at -30% 130%, #000 calc(100% - 1px), transparent 100%) top right / var(--d) var(--d) no-repeat,
    linear-gradient(#000 0 0) left top / calc(100% - var(--d) + 1px) 100% no-repeat, linear-gradient(#000 0 0) left bottom / 100% calc(100% - var(--d) + 1px) no-repeat;
  mask: radial-gradient(133.4% 133.4% at -30% 130%, #000 calc(100% - 1px), transparent 100%) top right / var(--d) var(--d) no-repeat,
    linear-gradient(#000 0 0) left top / calc(100% - var(--d) + 1px) 100% no-repeat, linear-gradient(#000 0 0) left bottom / 100% calc(100% - var(--d) + 1px) no-repeat; }

/* concluído e progresso (verde de apoio) */
#ddr-base .ddr-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ddr-text-primary); }
#ddr-base .ddr-status::before { content: ''; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--ddr-verde) var(--ddr-check) center / 12px no-repeat; }
#ddr-base .ddr-progresso { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; margin-top: 20px; font-size: 13px; }
#ddr-base .ddr-progresso__trilho { height: 6px; border-radius: 3px; background: var(--ddr-border-subtle); overflow: hidden; }
#ddr-base .ddr-progresso__trilho > span { display: block; height: 100%; background: var(--ddr-verde); }
/* marca-texto de aprendizagem: rótulo curto sobre o verde, com tinta carvão */
#ddr-base .ddr-marcador { align-self: flex-start; margin: 0 0 14px; padding: 2px 7px; background: var(--ddr-verde); color: var(--ddr-charcoal); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }

/* etapas numeradas do destaque do hero */
#ddr-base .ddr-etapas { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; font-size: 14px; line-height: 1.4; }
#ddr-base .ddr-etapas li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
#ddr-base .ddr-etapas li::before { content: attr(data-n); display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--ddr-border-card); border-radius: 50%; font-size: 11px; font-weight: 600; }
#ddr-base .ddr-etapas li.is-feita::before { content: ''; border-color: transparent; background: var(--ddr-verde) var(--ddr-check) center / 13px no-repeat; }
#ddr-base .ddr-feature-meta { font-size: 13px; font-weight: 600; line-height: 1.4; }

/* =============================== territórios =============================== */

/* ---------- Como funciona: o quadro do ciclo de evolução ----------
   Não é linear, é processo: observar, questionar, praticar, revisar, evoluir — e voltar. O traço do ciclo
   é aprendizagem, por isso em verde; os pilares do DDR aparecem ligados a cada fase, sem numeração. */
#ddr-base .ddr-quadro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px 48px; align-items: center; padding: 30px 36px; border-radius: var(--ddr-radius-cta);
  background-color: var(--ddr-charcoal); color: var(--ddr-offwhite); color-scheme: dark;
  background-image: linear-gradient(rgba(246, 244, 239, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(246, 244, 239, .05) 1px, transparent 1px); background-size: 32px 32px; }
#ddr-base .ddr-ciclo { position: relative; margin: 0; width: 100%; max-width: 560px; aspect-ratio: 1; justify-self: center; }
#ddr-base .ddr-ciclo__traco { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--ddr-verde); overflow: visible; }
#ddr-base .ddr-ciclo__aro { fill: none; stroke: rgba(246, 244, 239, .16); stroke-width: .35; stroke-dasharray: 1 1.6; }
#ddr-base .ddr-ciclo__arco { fill: none; stroke: currentColor; stroke-width: .7; stroke-linecap: round; }
#ddr-base .ddr-ciclo__fases { list-style: none; margin: 0; padding: 0; }
#ddr-base .ddr-ciclo__fases li { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 3px; width: max-content; max-width: 30%; text-align: center; }
#ddr-base .ddr-ciclo__fases b { font: 600 clamp(16px, 1.7cqw, 23px)/1.1 var(--ddr-heading); letter-spacing: -.02em; }
#ddr-base .ddr-ciclo__fases span { font-size: clamp(12px, 1cqw, 14px); line-height: 1.3; color: var(--ddr-texto-inverso-apoio); }
#ddr-base .ddr-ciclo__centro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 42%; display: grid; gap: 8px; text-align: center; }
#ddr-base .ddr-ciclo__centro strong { font: 700 clamp(20px, 2.3cqw, 31px)/1.06 var(--ddr-heading); letter-spacing: -.035em; }
#ddr-base .ddr-ciclo__centro span { font-size: clamp(12px, 1cqw, 14px); line-height: 1.4; color: var(--ddr-texto-inverso-apoio); }
#ddr-base .ddr-quadro__pilares { list-style: none; margin: 0; padding: 0; display: grid; }
#ddr-base .ddr-quadro__pilar { display: grid; gap: 8px; justify-items: start; padding: 20px 0; border-top: 1px solid var(--ddr-border-inverse); }
#ddr-base .ddr-quadro__pilar:first-child { border-top: 0; padding-top: 2px; }
#ddr-base .ddr-quadro__pilar h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font: 600 25px/1.1 var(--ddr-heading); letter-spacing: -.03em; }
#ddr-base .ddr-quadro__fase { font: 600 11px/1.4 var(--ddr-body); letter-spacing: .07em; text-transform: uppercase; color: var(--ddr-texto-inverso-apoio); }
#ddr-base .ddr-quadro__pilar p { font-size: 15px; line-height: 1.5; color: var(--ddr-texto-inverso-apoio); max-width: 46ch; }
#ddr-base .ddr-quadro__pilar .base-textlink { min-height: 36px; font-weight: 600; }
#ddr-base .ddr-quadro .base-textlink:focus-visible { outline-color: var(--ddr-offwhite); }
@container (max-width: 900px) { #ddr-base .ddr-quadro { grid-template-columns: minmax(0, 1fr); padding: 26px 26px 12px; } #ddr-base .ddr-ciclo { max-width: 470px; } }
@container (max-width: 550px) {
  #ddr-base .ddr-quadro { padding: 18px 16px 6px; }
  #ddr-base .ddr-quadro__pilar h3 { font-size: 23px; }
  /* ciclo estreito: o centro fica só com a frase curta */
  #ddr-base .ddr-ciclo__centro { width: 34%; }
  #ddr-base .ddr-ciclo__centro strong { font-size: 17px; }
  #ddr-base .ddr-ciclo__centro span { display: none; }
  #ddr-base .ddr-ciclo__fases li { max-width: 27%; }
  #ddr-base .ddr-ciclo__fases b { font-size: 15px; }
  #ddr-base .ddr-ciclo__fases span { font-size: 11px; }
}

/* ---------- Trilha: sequência de aprendizagem ----------
   Marcos numerados ligados por um trilho; o verde marca só o que foi feito; a etapa atual ganha a E1. */
#ddr-base .ddr-trilha-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin: -8px 0 28px; font-size: 14px; }
#ddr-base .ddr-trilha-resumo .ddr-progresso { flex: 1 1 240px; max-width: 380px; margin: 0; }
#ddr-base .ddr-trilha { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
#ddr-base .ddr-etapa { display: grid; grid-template-rows: auto 1fr; gap: 14px; min-width: 0; }
#ddr-base .ddr-etapa__marco { position: relative; height: 36px; }
#ddr-base .ddr-etapa__marco::after { content: ''; position: absolute; left: 44px; right: -10px; top: 17px; height: 2px; background: var(--ddr-border-card); }
#ddr-base .ddr-etapa:last-child .ddr-etapa__marco::after { display: none; }
#ddr-base .ddr-etapa.is-feita .ddr-etapa__marco::after { top: 16px; height: 4px; background: var(--ddr-verde); }
#ddr-base .ddr-etapa.is-embreve .ddr-etapa__marco::after { background: none; border-top: 2px dashed var(--ddr-border-card); }

/* ---------- estados da trilha: os mesmos na Home, na página da trilha e na legenda ----------
   concluída = verde com check; onde você está = marco carvão + dobra "Agora" + marca-texto;
   disponível = contorno; em breve = tracejado e texto em tom de apoio. */
#ddr-base .ddr-etapa__no { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border: 1.5px solid var(--ddr-charcoal); border-radius: 50%; background: var(--ddr-offwhite); font: 700 14px/1 var(--ddr-heading); }
#ddr-base .ddr-etapa.is-feita .ddr-etapa__no { border-color: var(--ddr-verde); background: var(--ddr-verde) var(--ddr-check) center / 16px no-repeat; color: transparent; }
#ddr-base .ddr-etapa.is-atual .ddr-etapa__no { background: var(--ddr-charcoal); color: var(--ddr-offwhite); }
#ddr-base .ddr-etapa.is-embreve .ddr-etapa__no { border-style: dashed; border-color: var(--ddr-border-card); color: var(--ddr-text-muted); }
#ddr-base .ddr-etapa.is-atual .ddr-etapa__corpo { border-color: var(--ddr-charcoal); }
#ddr-base .ddr-etapa.is-embreve .ddr-etapa__corpo { border-style: dashed; }
#ddr-base .ddr-etapa.is-embreve h3 { color: var(--ddr-text-muted); }
#ddr-base .ddr-etapa__card { --e1-sup: var(--ddr-offwhite); --d: 96px; display: flex; min-width: 0; }
/* o rótulo fica no alto da dobra, onde a área laranja é mais larga */
#ddr-base .ddr-etapa__card .ddr-e1__avesso--rotulo { padding: 8px 10px; }
#ddr-base .ddr-etapa__corpo { flex: 1; display: flex; flex-direction: column; padding: 22px 22px 16px; border: 1px solid var(--ddr-border-card); border-radius: var(--ddr-radius-card); background: var(--ddr-offwhite); }
#ddr-base .ddr-etapa__rotulo { font-size: 12px; font-weight: 600; line-height: 1.4; padding-right: 64px; }
#ddr-base .ddr-etapa h3 { font: 600 24px/1.13 var(--ddr-heading); letter-spacing: -.035em; margin: 20px 0 12px; }
#ddr-base .ddr-etapa h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
#ddr-base .ddr-etapa__corpo > p:not([class]) { font-size: 15px; line-height: 1.5; margin-bottom: 18px; }
#ddr-base .ddr-etapa__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: auto 0 16px; font-size: 13px; color: var(--ddr-text-muted); }
#ddr-base .ddr-etapa .base-card-link { margin-top: 0; }
@container (max-width: 800px) {
  #ddr-base .ddr-trilha { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #ddr-base .ddr-etapa { grid-template-rows: none; grid-template-columns: 36px minmax(0, 1fr); gap: 0 16px; padding-bottom: 18px; }
  #ddr-base .ddr-etapa:last-child { padding-bottom: 0; }
  #ddr-base .ddr-etapa__marco { height: auto; }
  #ddr-base .ddr-etapa__marco::after { left: 17px; right: auto; top: 44px; bottom: -18px; width: 2px; height: auto; }
  #ddr-base .ddr-etapa.is-feita .ddr-etapa__marco::after { left: 16px; top: 44px; width: 4px; height: auto; }
}

/* ---------- Biblioteca: acervo; a capa entra quando existe, sem obrigar imagem ---------- */
#ddr-base .ddr-acervo-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
#ddr-base .ddr-acervo { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--ddr-border-card); border-radius: var(--ddr-radius-card); overflow: hidden; background: var(--ddr-offwhite); }
#ddr-base .ddr-acervo__capa { position: relative; aspect-ratio: 16 / 9; margin: 0; overflow: hidden; background: var(--ddr-charcoal); color: var(--ddr-offwhite); }
#ddr-base .ddr-acervo__capa img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 50%); }
/* capa com imagem: P&B com grão por padrão (une fotos, ilustrações e imagens geradas); 'cor' quando a imagem pede */
#ddr-base .ddr-acervo__capa--pb img { filter: grayscale(1) contrast(1.08) brightness(.95); }
#ddr-base .ddr-acervo__capa--pb::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .18; mix-blend-mode: multiply; background-image: var(--ddr-grao); }
#ddr-base .ddr-acervo__rotulo { position: absolute; left: 14px; top: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 5px 9px 5px 0; border-radius: 0 4px 4px 0; background: var(--ddr-charcoal); color: var(--ddr-offwhite); font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: .07em; text-transform: uppercase; }
#ddr-base .ddr-acervo__rotulo::before { content: ''; width: 5px; height: 14px; border-radius: 0 4px 4px 0; background: var(--ddr-orange); }
#ddr-base .ddr-acervo__credito { position: absolute; right: 10px; bottom: 8px; z-index: 1; padding: 3px 7px; border-radius: 4px; background: rgba(24, 24, 24, .78); color: var(--ddr-offwhite); font-size: 11px; line-height: 1.3; }
/* sem imagem: capa tipográfica com o mapa e o tema da própria aula, sobre uma grade tática discreta */
#ddr-base .ddr-acervo__tipo { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 16px 18px 14px;
  background-image: linear-gradient(rgba(246, 244, 239, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(246, 244, 239, .07) 1px, transparent 1px); background-size: 28px 28px; }
#ddr-base .ddr-acervo__mapa { font: 700 clamp(30px, 3.2cqw, 44px)/1 var(--ddr-heading); letter-spacing: -.045em; text-transform: capitalize; }
#ddr-base .ddr-acervo__corpo { flex: 1; display: flex; flex-direction: column; padding: 18px 20px 14px; }
#ddr-base .ddr-acervo__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--ddr-text-muted); }
#ddr-base .ddr-acervo h3 { font: 600 22px/1.15 var(--ddr-heading); letter-spacing: -.03em; margin: 12px 0 10px; }
#ddr-base .ddr-acervo__corpo > p:not([class]) { font-size: 15px; line-height: 1.5; margin-bottom: 18px; }
#ddr-base .ddr-selo { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid var(--ddr-border-card); border-radius: 4px; font-size: 12px; font-weight: 600; color: var(--ddr-text-primary); }
@container (max-width: 1000px) { #ddr-base .ddr-acervo-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 640px) { #ddr-base .ddr-acervo-lista { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Entre Rounds: território editorial em papel com grão; as pessoas no centro ---------- */
#ddr-base .base-content.ddr-papel { position: relative; background: var(--ddr-papel); box-shadow: 0 0 0 100vmax var(--ddr-papel); padding-block: 52px 58px; }
#ddr-base .base-content.ddr-papel::before { content: ''; position: absolute; inset: 0 min(0px, calc((100% - 100vw) / 2)); pointer-events: none; opacity: .2; mix-blend-mode: multiply; background-image: var(--ddr-grao); }
#ddr-base .base-content.ddr-papel > * { position: relative; }
#ddr-base .base-content.ddr-papel > :first-child { padding-top: 0; border-top: 0; }
#ddr-base .ddr-conversas { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: start; }
#ddr-base .ddr-conversas__lado { display: grid; gap: 18px; }
#ddr-base .ddr-conversa { display: grid; min-width: 0; background: var(--ddr-offwhite); border-radius: var(--ddr-radius-card); overflow: hidden; }
#ddr-base .ddr-conversa--destaque { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
#ddr-base .ddr-conversa--compacta { grid-template-columns: 128px minmax(0, 1fr); }
#ddr-base .ddr-conversa__foto { position: relative; margin: 0; min-height: 100%; background: var(--ddr-charcoal); color: var(--ddr-offwhite); }
#ddr-base .ddr-conversa--destaque .ddr-conversa__foto { min-height: 440px; }
#ddr-base .ddr-conversa__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 35%); filter: grayscale(1) contrast(1.08) brightness(.96); }
#ddr-base .ddr-conversa__foto::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .18; mix-blend-mode: multiply; background-image: var(--ddr-grao); }
/* borda de filme: a foto como fotograma de uma conversa gravada */
#ddr-base .ddr-conversa__foto::before { content: ''; position: absolute; left: 9px; top: 10px; bottom: 10px; z-index: 1; width: 7px; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(246, 244, 239, .82) 0 7px, transparent 7px 15px); border-radius: 1px; }
#ddr-base .ddr-conversa--compacta .ddr-conversa__foto::before { left: 6px; width: 5px; background: repeating-linear-gradient(to bottom, rgba(246, 244, 239, .78) 0 5px, transparent 5px 11px); }
/* o que fica da conversa é aprendizado: marca-texto verde, discreto */
#ddr-base .ddr-conversa__fica { align-self: flex-start; margin: 0 0 10px; padding: 2px 7px; background: var(--ddr-verde); color: var(--ddr-charcoal); font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: .07em; text-transform: uppercase; }
#ddr-base .ddr-conversa--destaque .ddr-conversa__citacao { font: 600 22px/1.3 var(--ddr-heading); letter-spacing: -.02em; }
#ddr-base .ddr-conversa__iniciais { position: absolute; inset: 0; display: grid; place-items: center; font: 700 clamp(48px, 6cqw, 88px)/1 var(--ddr-heading); letter-spacing: -.05em; }
#ddr-base .ddr-conversa--compacta .ddr-conversa__iniciais { font-size: 34px; }
#ddr-base .ddr-conversa__nome { position: absolute; left: 14px; bottom: 14px; z-index: 1; max-width: calc(100% - 28px); padding: 6px 10px; border-radius: 4px; background: var(--ddr-charcoal); color: var(--ddr-offwhite); font-size: 13px; font-weight: 600; }
#ddr-base .ddr-conversa__corpo { display: flex; flex-direction: column; min-width: 0; padding: 24px 24px 16px; }
#ddr-base .ddr-conversa--compacta .ddr-conversa__corpo { padding: 18px 18px 12px; }
#ddr-base .ddr-conversa__tipo { font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .07em; text-transform: uppercase; }
#ddr-base .ddr-conversa h3 { font: 600 28px/1.1 var(--ddr-heading); letter-spacing: -.035em; margin: 16px 0 16px; }
#ddr-base .ddr-conversa--compacta h3 { font-size: 20px; line-height: 1.15; margin: 8px 0 8px; }
#ddr-base .ddr-conversa__citacao { margin: 0 0 16px; padding-left: 14px; border-left: 3px solid var(--ddr-charcoal); font-size: 17px; font-weight: 500; line-height: 1.45; }
#ddr-base .ddr-conversa__texto { font-size: 15px; line-height: 1.5; margin-bottom: 16px; }
#ddr-base .ddr-conversa__quem { margin: auto 0 16px; font-size: 14px; font-weight: 600; }
#ddr-base .ddr-conversa__quem span { font-weight: 400; color: var(--ddr-text-muted); }
#ddr-base .ddr-conversa--compacta .ddr-conversa__quem { margin-bottom: 10px; }
@container (max-width: 800px) {
  #ddr-base .ddr-conversas { grid-template-columns: minmax(0, 1fr); }
  #ddr-base .ddr-conversa--destaque { grid-template-columns: minmax(0, 1fr); }
  #ddr-base .ddr-conversa--destaque .ddr-conversa__foto { min-height: 0; aspect-ratio: 4 / 3; }
}
@container (max-width: 550px) { #ddr-base .ddr-conversa--compacta { grid-template-columns: 96px minmax(0, 1fr); } #ddr-base .ddr-conversa h3 { font-size: 25px; } #ddr-base .ddr-conversa--compacta h3 { font-size: 19px; } }

/* ---------- Além do Round: território próprio em carvão ----------
   A Forma Contínua oficial aparece inteira (é a marca); a geometria derivada (arquivos em
   /assets/forma-derivada/) vira o espaço, em off-white translúcido, nunca como a marca. */
#ddr-base .ddr-ar { position: relative; padding-block: 76px 80px; background: var(--ddr-charcoal); color: var(--ddr-offwhite); box-shadow: 0 0 0 100vmax var(--ddr-charcoal); clip-path: inset(0 -100vmax); color-scheme: dark; overflow: hidden; }
#ddr-base .ddr-ar__geo { position: absolute; inset: 0; pointer-events: none; background: var(--ddr-offwhite); opacity: .07;
  -webkit-mask: url(/assets/forma-derivada/silhueta.svg) 116% 42% / auto 150% no-repeat; mask: url(/assets/forma-derivada/silhueta.svg) 116% 42% / auto 150% no-repeat; }
#ddr-base .ddr-ar__grade { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 36px 48px; align-items: center; }
#ddr-base .ddr-ar h1, #ddr-base .ddr-ar h2 { font: var(--ddr-title-weight) var(--ddr-feature-size)/1.07 var(--ddr-heading); letter-spacing: -.035em; margin: 16px 0 18px; max-width: 15ch; }
#ddr-base .ddr-ar h1 { font-size: var(--ddr-display-size-medium); line-height: .99; letter-spacing: -.05em; max-width: 13ch; }
#ddr-base .ddr-ar__texto > p:not(.base-eyebrow) { font-size: 17px; line-height: 1.5; max-width: 42ch; color: var(--ddr-texto-inverso-apoio); }
#ddr-base .ddr-ar__texto > p + p { margin-top: 12px; }
#ddr-base .ddr-ar .base-actions { margin-top: 26px; }
#ddr-base .ddr-ar .base-textlink:focus-visible { outline-color: var(--ddr-offwhite); }
#ddr-base .ddr-ar__forma { display: flex; justify-content: center; }
#ddr-base .ddr-ar__forma .v2-marca-respiro { display: inline-block; max-width: 100%; }
#ddr-base .ddr-ar__forma .v2-marca { display: block; max-width: 100%; height: auto; }
@container (max-width: 800px) {
  #ddr-base .ddr-ar__grade { grid-template-columns: minmax(0, 1fr); }
  #ddr-base .ddr-ar__forma { order: -1; justify-content: flex-start; }
  #ddr-base .ddr-ar__geo { -webkit-mask-position: 70% 20%; mask-position: 70% 20%; -webkit-mask-size: auto 90%; mask-size: auto 90%; }
}
@container (max-width: 550px) { #ddr-base .ddr-ar { padding-block: 48px 54px; } #ddr-base .ddr-ar h2 { font-size: 35px; } #ddr-base .ddr-ar h1 { font-size: var(--ddr-display-size-small); } }
/* página do Além do Round: temas do território (sem conteúdo definitivo ainda) */
#ddr-base .ddr-temas { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
#ddr-base .ddr-temas li { padding: 10px 16px; border: 1px solid var(--ddr-border-card); border-radius: var(--ddr-radius-button); font: 600 20px/1.2 var(--ddr-heading); letter-spacing: -.02em; }

/* ---------- rodapé com os destinos do site ---------- */
#ddr-base .ddr-rodape-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font-size: 14px; font-weight: 500; }
#ddr-base .ddr-rodape-nav a { display: inline-flex; align-items: center; min-height: 44px; }
#ddr-base .ddr-rodape-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
@container (max-width: 800px) { #ddr-base .base-footer { flex-wrap: wrap; } #ddr-base .ddr-rodape-nav { order: 3; width: 100%; justify-content: flex-start; } }

/* ---------- fechamento como primeira peça de uma seção ---------- */
#ddr-base .base-content > .base-closing:first-child { margin-top: 0; }

/* ---------- ação secundária com presença (ainda secundária): link de texto com ícone de direção ---------- */
#ddr-base .ddr-acao-secundaria { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 600; text-underline-offset: 5px; }
#ddr-base .ddr-acao-secundaria__icone { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border: 1px solid var(--ddr-border-outline); border-radius: 50%; font-size: 14px; line-height: 1; }
#ddr-base .ddr-acao-secundaria:hover .ddr-acao-secundaria__icone { background: var(--ddr-offwhite); color: var(--ddr-charcoal); }
#ddr-base .base-feature .ddr-acao-secundaria__icone, #ddr-base .base-content .ddr-acao-secundaria__icone { border-color: var(--ddr-border-card); }

/* ---------- legibilidade no celular: textos pequenos do quadro e metadados sobem de tamanho ---------- */
@container (max-width: 550px) {
  #ddr-base .ddr-ciclo__fases b { font-size: 16px; }
  #ddr-base .ddr-ciclo__fases span { font-size: 12.5px; }
  #ddr-base .ddr-quadro__fase, #ddr-base .ddr-marcador, #ddr-base .ddr-conversa__fica, #ddr-base .ddr-acervo__rotulo, #ddr-base .ddr-acervo__credito { font-size: 12px; }
  #ddr-base .ddr-etapa__rotulo, #ddr-base .ddr-acervo__meta, #ddr-base .ddr-conversa__tipo, #ddr-base .ddr-trilha-resumo { font-size: 13.5px; }
  #ddr-base .ddr-etapa__meta, #ddr-base .ddr-feature-meta { font-size: 14px; }
  #ddr-base .ddr-quadro__pilar p, #ddr-base .ddr-etapa__corpo > p:not([class]), #ddr-base .ddr-acervo__corpo > p:not([class]) { font-size: 15.5px; }
}

/* ---------- estados mínimos (Handoff V1): zero publicados, sem resultados, erro, 404 ---------- */
#ddr-base .ddr-estado { display: grid; gap: 10px; justify-items: start; max-width: 640px; padding: 24px 26px; border: 1px solid var(--ddr-border-card); border-radius: var(--ddr-radius-card); background: #FFFEFA; color: var(--ddr-charcoal); }
#ddr-base .ddr-estado__titulo { font: 600 24px/1.2 var(--ddr-heading); letter-spacing: -.02em; }
#ddr-base .ddr-estado__texto { font-size: 16px; line-height: 1.5; color: var(--ddr-text-muted); }
#ddr-base .ddr-estado__acao { display: flex; flex-wrap: wrap; gap: 8px 24px; }
#ddr-base .ddr-estado__h1 { margin: 14px 0 24px; font: 700 clamp(36px, 5cqw, 64px)/1 var(--ddr-heading); letter-spacing: -.05em; max-width: 18ch; }

/* conta: o botão do header marca a página atual (Entrar / Meu perfil) só com a borda laranja */
#ddr-base .base-button-outline[aria-current="page"] { border-color: var(--ddr-orange); }

/* Acabamento público autorizado em 02/10/2026: proporções, sem alterar a referência. */
#ddr-base .ddr-hub > .ddr-estado { margin-top: 32px; }
#ddr-base .base-header { min-height: 92px; }
#ddr-base .base-footer { padding-block: 26px; align-items: center; gap: 24px; }
#ddr-base .base-footer > a { flex: none; }
#ddr-base .base-footer-logo { width: 188px; }
#ddr-base .base-footer-avatar { width: 48px; height: 48px; }
#ddr-base .base-footer p { font-size: 14px; flex: none; }
#ddr-base .ddr-rodape-nav { gap: 2px 18px; }
#ddr-base .ddr-quadro__pilar h3 { font-weight: 700; }
#ddr-base .ddr-quadro__pilar h3::before { content: ''; width: 22px; height: 3px; background: var(--ddr-orange); align-self: center; flex: none; }
#ddr-base .ddr-home-er__vazio { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); border: 1px solid var(--ddr-border-card); border-radius: var(--ddr-radius-card); overflow: hidden; }
#ddr-base .ddr-home-er__poster { aspect-ratio: 16 / 9; background: var(--ddr-charcoal); color: var(--ddr-offwhite); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; border-top: 4px solid var(--ddr-orange); }
#ddr-base .ddr-home-er__poster > span:first-child { font: 700 clamp(38px, 5cqw, 64px)/.98 var(--ddr-heading); letter-spacing: -.045em; }
#ddr-base .ddr-home-er__poster > span:last-child { font-size: 13px; }
#ddr-base .ddr-home-er__espera { padding: 28px; display: flex; flex-direction: column; justify-content: center; align-items: start; gap: 16px; }
#ddr-base .ddr-home-er__espera h3 { font: 600 clamp(26px, 3cqw, 36px)/1.08 var(--ddr-heading); letter-spacing: -.03em; }
#ddr-base .ddr-home-er__espera > p:not(.base-eyebrow) { font-size: 16px; line-height: 1.5; max-width: 42ch; }
#ddr-base .ddr-home-er .ddr-conversas { grid-template-columns: minmax(0, 1fr); }
#ddr-base .ddr-home-er .ddr-conversa--destaque { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
#ddr-base .ddr-home-er .ddr-conversa--destaque .ddr-conversa__foto { aspect-ratio: 16 / 9; min-height: 0; align-self: center; }
#ddr-base .ddr-home-er .ddr-conversas__lado { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
/* A silhueta de fundo fica dentro da Home; marca oficial e desenho permanecem intactos. */
#ddr-base .ddr-ar:not(.ddr-ar--pagina):not(.ddr-alem__hero) .ddr-ar__geo { inset: 24px 3% 24px 50%; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
#ddr-base .ddr-ar:not(.ddr-ar--pagina):not(.ddr-alem__hero) .ddr-ar__forma .v2-marca { max-width: 240px; }
@container (max-width: 800px) {
  #ddr-base .ddr-home-er__vazio, #ddr-base .ddr-home-er .ddr-conversa--destaque { grid-template-columns: minmax(0, 1fr); }
  #ddr-base .ddr-home-er .ddr-conversas__lado { grid-template-columns: minmax(0, 1fr); }
  #ddr-base .ddr-ar:not(.ddr-ar--pagina):not(.ddr-alem__hero) .ddr-ar__geo { inset: 24px 8%; }
}
@container (max-width: 550px) {
  #ddr-base .base-header { min-height: 72px; }
  #ddr-base .base-brand { padding-block: 10px; }
  #ddr-base .base-footer { gap: 16px; padding-block: 22px; }
  #ddr-base .base-footer p { font-size: 13px; }
  #ddr-base .ddr-rodape-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; font-size: 14px; }
  #ddr-base .ddr-home-er__espera, #ddr-base .ddr-home-er__poster { padding: 22px; }
}