/* ==========================================================================
   CLIC · páginas de detalhe de produto
   programa · mulheres · direitos-humanos · palestras · gabinete
   Depende de css/clic.css (tokens, abertura, chamada final, rodapé).

   O que é comum às cinco vive aqui: a abertura em duas colunas com a ficha
   rápida, as fileiras de blocos numerados, as citações e os formatos de
   contratação. O que é de uma página só está no fim, marcado.
   ========================================================================== */

/* ===== Abertura em duas colunas ===== */
.hero-split {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 7%;
  align-items: start;
  margin-top: 34px;
}

.hero-split .lede p,
.hero-lede p {
  margin: 0 0 16px;
  font-size: clamp(15px,1.25vw,18px);
  line-height: 1.7;
  color: #c9d3d9;
}

.hero-split .lede strong,
.hero-lede strong { color: var(--text); font-weight: 600; }

/* Ficha rápida */
.hero-card {
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(20,39,49,.8), rgba(8,18,26,.8));
  padding: 26px;
}

.card-k {
  margin-bottom: 20px;
  font: 400 10px var(--mono);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--mint);
}

.hero-card dl { margin: 0; }

.hero-card dt {
  padding-top: 13px;
  border-top: 1px solid rgba(255,255,255,.08);
  font: 400 10px var(--mono);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #8fa0ac;
}

.hero-card dt:first-of-type { padding-top: 0; border-top: 0; }

.hero-card dd {
  margin: 5px 0 13px;
  font-size: 14px;
  line-height: 1.55;
  color: #cdd8de;
}

.hero-card dd em { font-style: normal; color: var(--mint); }

/* ===== Blocos numerados empilhados =====
   Serve às palestras, aos níveis do programa, às trilhas e aos ritmos:
   fileira larga, numeral na tarja, título, tese e corpo. */
.blocos { border-top: 1px solid var(--line); }

.bloco {
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
  transition: background .25s;
}

.bloco:hover { background: rgba(89,234,203,.03); }

.bloco-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font: 400 10px var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #93a4b0;
}

.bloco-topo b { color: var(--mint); font-weight: 400; margin-right: 10px; }
.bloco-marca { color: #7f909c; white-space: nowrap; }

.bloco h3 {
  margin: 18px 0 16px;
  max-width: 24ch;
  font: 400 clamp(23px,2.4vw,34px)/1.22 "Playfair Display", Georgia, serif;
  letter-spacing: -.025em;
}

.bloco h3 em { font-style: normal; color: var(--mint); }

.tese {
  margin: 0 0 18px;
  padding-left: 20px;
  border-left: 2px solid rgba(89,234,203,.5);
  max-width: 70ch;
  font-size: 15px;
  line-height: 1.65;
  color: #dbe4e9;
}

.bloco-corpo {
  margin: 0;
  max-width: 76ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}

.bloco-corpo a {
  color: var(--mint);
  border-bottom: 1px solid rgba(89,234,203,.4);
}

.bloco-corpo strong { color: #dbe4e9; font-weight: 600; }

/* Pares de contexto dentro de um bloco */
.contexto {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 18px;
  margin-top: 24px;
}

.ctx {
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.025);
}

.ctx b {
  display: block;
  margin-bottom: 7px;
  font: 400 10px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mint);
  font-weight: 400;
}

.ctx p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* ===== Cartões em grade ===== */
.cartoes {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 15px;
}

.cartoes.duas { grid-template-columns: repeat(2,1fr); }
.cartoes.quatro { grid-template-columns: repeat(4,1fr); }

.cartao {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.025);
  transition: background .25s, border-color .25s, transform .25s;
}

.cartao:hover {
  background: rgba(89,234,203,.05);
  border-color: rgba(89,234,203,.45);
  transform: translateY(-4px);
}

.cartao-n {
  font: 400 26px/1 "Playfair Display", Georgia, serif;
  color: var(--mint);
}

.cartao h3 {
  margin: 0;
  font: 600 20px/1.25 var(--display);
  letter-spacing: -.035em;
}

.cartao h3 em { font-style: normal; color: var(--mint); }

.cartao p { margin: 0; flex: 1; font-size: 14px; line-height: 1.65; color: var(--muted); }
.cartao p strong { color: #dbe4e9; font-weight: 600; }

.cartao ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

.cartao li {
  padding: 7px 0 7px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  position: relative;
}

.cartao li::before {
  content: "·";
  position: absolute;
  left: 2px;
  color: var(--mint);
}

.cartao li:first-child { border-top: 0; }

.cartao-pe {
  padding-top: 13px;
  border-top: 1px solid rgba(255,255,255,.1);
  font: 400 10px/1.6 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7f909c;
}

.cartao-tag {
  align-self: flex-start;
  padding: 3px 10px;
  border: 1px solid rgba(89,234,203,.45);
  border-radius: 100px;
  font: 400 9px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mint);
}

/* ===== Citação de destaque ===== */
.citacao {
  margin: clamp(60px,7vw,100px) 0;
  padding: clamp(36px,4vw,56px) 0;
  border-block: 1px solid var(--line);
  text-align: center;
}

.citacao p {
  margin: 0 auto;
  max-width: 26ch;
  font: 400 clamp(28px,3.4vw,50px)/1.2 "Playfair Display", Georgia, serif;
  letter-spacing: -.03em;
  color: var(--text);
}

.citacao p em { font-style: normal; color: var(--mint); }

.citacao .fonte {
  display: block;
  margin-top: 22px;
  font: 400 10px var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7f909c;
}

/* ===== Painel de contraponto (a parte honesta) ===== */
.ressalva {
  padding: 30px 32px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
}

.ressalva h3 {
  margin: 14px 0 14px;
  font: 400 clamp(21px,2vw,27px)/1.3 "Playfair Display", Georgia, serif;
  letter-spacing: -.02em;
}

.ressalva p {
  margin: 0 0 12px;
  max-width: 78ch;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
}

.ressalva p:last-child { margin-bottom: 0; }
.ressalva strong { color: #dbe4e9; font-weight: 600; }

/* ===== Como contratar · seção em papel ===== */
.formatos { background: var(--paper); color: var(--ink); }
.formatos .section-intro p { color: #566166; }

.formatos-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  border-top: 1px solid #b8c1ba;
}

.formato {
  padding: 30px 28px 26px 0;
  border-right: 1px solid #bac1bc;
  margin-right: 28px;
}

.formato:last-child { border-right: 0; margin-right: 0; }
.formato .eyebrow { color: #268b7e; }

.formato h3 {
  margin: 16px 0 14px;
  font-size: 21px;
  letter-spacing: -.04em;
}

.formato h3 em { font-style: normal; color: #268b7e; }

.formato > p { margin: 0 0 16px; font-size: 14px; line-height: 1.7; color: #546168; }

.formato ul { margin: 0; padding: 0; list-style: none; }

.formato li {
  padding: 7px 0 7px 16px;
  border-top: 1px solid #ccd2cc;
  position: relative;
  font-size: 13.5px;
  line-height: 1.5;
  color: #546168;
}

.formato li::before { content: "·"; position: absolute; left: 2px; color: #268b7e; }
.formato li:first-child { border-top: 0; }

.formato-meta {
  margin-top: 18px;
  font: 400 10px/1.6 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #7b8a86;
}

/* ===== Só em palestras · quem fala ===== */
.bio-card {
  display: grid;
  grid-template-columns: .9fr 1.4fr;
  gap: 7%;
  padding: clamp(34px,4vw,52px);
  border: 1px solid rgba(89,234,203,.28);
  background:
    radial-gradient(circle at 92% 15%, rgba(19,57,56,.85), transparent 58%),
    #0b1621;
}

.bio-card h2 {
  margin: 14px 0 0;
  font: 400 clamp(26px,2.8vw,38px)/1.2 "Playfair Display", Georgia, serif;
  letter-spacing: -.03em;
}

.bio-card h2 em { font-style: normal; color: var(--mint); }

.bio-corpo p {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
}

.bio-corpo p:last-child { margin-bottom: 0; }
.bio-corpo strong { color: #dbe4e9; font-weight: 600; }
.bio-corpo em { font-style: normal; color: var(--mint); }

/* ===== Só em mulheres e direitos-humanos · faixa de números ===== */
.numeros {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border-top: 1px solid var(--line);
}

.numero {
  padding: 26px 24px 0 0;
  border-right: 1px solid var(--line);
}

.numero:last-child { border-right: 0; }

.numero b {
  display: block;
  margin-bottom: 10px;
  font: 700 clamp(30px,3.2vw,46px)/1 var(--display);
  letter-spacing: -.055em;
  color: var(--text);
}

.numero b span { color: var(--mint); }

.numero-lbl {
  font: 400 10px/1.7 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #93a4b0;
}

.numero-src {
  display: block;
  margin-top: 8px;
  font: 400 9px/1.6 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7f909c;
}

/* ===== Só em direitos-humanos · zonas de risco ===== */
.zona-verde { color: #8fdfa6; border-color: rgba(126,220,150,.45) !important; }
.zona-amarela { color: #ffd98c; border-color: rgba(255,217,140,.45) !important; }
.zona-vermelha { color: #ff8f7a; border-color: rgba(255,143,122,.45) !important; }

/* ===== Responsivo ===== */
@media (max-width: 1100px) {
  .hero-split { grid-template-columns: 1fr; gap: 34px; }
  .cartoes, .cartoes.quatro { grid-template-columns: repeat(2,1fr); }
  .bio-card { grid-template-columns: 1fr; gap: 26px; }
  .numeros { grid-template-columns: repeat(2,1fr); }
  .numero:nth-child(2) { border-right: 0; }
  .numero:nth-child(-n+2) { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
}

@media (max-width: 760px) {
  .bloco { padding: 26px 0; }
  .bloco h3 { max-width: none; }
  .contexto { grid-template-columns: 1fr; gap: 12px; }
  .cartoes, .cartoes.duas, .cartoes.quatro { grid-template-columns: 1fr; }
  .hero-card, .ressalva { padding: 22px; }

  .formatos-grid { grid-template-columns: 1fr; }
  .formato {
    padding: 26px 0 22px;
    margin-right: 0;
    border-right: 0;
    border-bottom: 1px solid #b8c1ba;
  }
  .formato:last-child { border-bottom: 0; }

  .citacao { margin: 50px 0; }
  .numeros { grid-template-columns: 1fr; }
  .numero { border-right: 0; padding-right: 0; }
  .numero:nth-child(-n+3) { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
}

/* ===== Só em dorina · a página de homenagem ===== */
.retrato {
  position: relative;
  justify-self: center;
  width: min(100%, 340px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(89,234,203,.4);
  box-shadow: 0 0 0 14px rgba(89,234,203,.05), inset 0 0 60px rgba(89,234,203,.1);
}

.retrato img { width: 100%; height: 100%; object-fit: cover; display: block; }

.prosa { max-width: 68ch; }

.prosa p {
  margin: 0 0 20px;
  font-size: clamp(15px,1.3vw,17px);
  line-height: 1.8;
  color: var(--muted);
}

.prosa strong { color: #dbe4e9; font-weight: 600; }

.prosa .destaque {
  margin: 34px 0;
  padding: 26px 0 26px 26px;
  border-left: 2px solid var(--mint);
  font: 400 clamp(21px,2.2vw,28px)/1.4 "Playfair Display", Georgia, serif;
  letter-spacing: -.02em;
  color: var(--text);
}

.secao-tinta { background: #1a2b36; border-top: 1px solid var(--line); }

/* ===== Só em programa · a escada dos seis níveis ===== */
.escada {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.degrau {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background .25s, padding-left .3s;
}

.degrau:hover { background: rgba(89,234,203,.05); padding-left: 24px; }

.degrau-n { font: 400 22px/1 "Playfair Display", Georgia, serif; color: var(--mint); }

.degrau-nome {
  font: 600 17px/1.2 var(--display);
  letter-spacing: -.03em;
  color: var(--text);
}

.degrau-sub,
.degrau-hrs {
  font: 400 10px/1.5 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8fa0ac;
}

.degrau-hrs { color: var(--mint); margin-top: auto; }

/* A virada: o último degrau e o último nível ganham destaque. */
.degrau.virada { background: rgba(89,234,203,.07); border-color: rgba(89,234,203,.4); }

.nivel {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 6%;
  align-items: start;
  padding: clamp(40px,5vw,66px) 0;
  border-top: 1px solid var(--line);
}

.nivel.virada {
  background:
    radial-gradient(circle at 92% 12%, rgba(19,57,56,.7), transparent 55%),
    #0b1621;
  border-color: rgba(89,234,203,.35);
}

.nivel-tag {
  font: 400 10px var(--mono);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--mint);
}

.nivel h3 {
  margin: 16px 0 16px;
  max-width: 20ch;
  font: 400 clamp(25px,2.7vw,38px)/1.18 "Playfair Display", Georgia, serif;
  letter-spacing: -.028em;
}

.nivel h3 em { font-style: normal; color: var(--mint); }

.nivel-lead {
  margin: 0 0 24px;
  max-width: 68ch;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--muted);
}

.nivel-lead strong { color: #dbe4e9; font-weight: 600; }

.aprende h4 {
  margin: 0 0 12px;
  font: 400 10px var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #93a4b0;
  font-weight: 400;
}

.aprende ul { margin: 0; padding: 0; list-style: none; }

.aprende li {
  position: relative;
  padding: 10px 0 10px 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}

.aprende li::before { content: "·"; position: absolute; left: 2px; color: var(--mint); }
.aprende li:first-child { border-top: 0; }
.aprende strong { color: #dbe4e9; font-weight: 600; }

.exemplo {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.exemplo b {
  display: block;
  margin-bottom: 7px;
  font: 400 10px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mint);
  font-weight: 400;
}

.exemplo p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

@media (max-width: 1100px) {
  .escada { grid-template-columns: repeat(3,1fr); }
  .nivel { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 760px) {
  .escada { grid-template-columns: repeat(2,1fr); }
  .nivel h3 { max-width: none; }
}