/* =========================================================
   1º Curso de Verão BioVeg • UFU — identidade visual
   Paleta extraída da logomarca: ipê amarelo, céu do Cerrado, verde e areia.
   ========================================================= */

:root {
  --ipe: #f2b307;
  --ipe-claro: #ffd766;
  --ipe-fundo: #fef6e0;
  --ceu: #1ba5dc;
  --ceu-claro: #d3eefb;
  --noite: #0c2733;
  --noite-2: #143847;
  --cerrado: #4a7a4e;
  --cerrado-claro: #e7f0e7;

  --papel: #fbfaf6;
  --superficie: #ffffff;
  --areia: #f4f1e8;
  --borda: #e6e2d7;
  --tinta: #16212b;
  --tinta-suave: #5c6a76;
  --tinta-fraca: #8a949d;

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --sombra-sm: 0 1px 2px rgba(12, 39, 51, .06), 0 2px 8px rgba(12, 39, 51, .04);
  --sombra: 0 4px 12px rgba(12, 39, 51, .06), 0 12px 32px rgba(12, 39, 51, .07);
  --sombra-lg: 0 8px 24px rgba(12, 39, 51, .08), 0 24px 64px rgba(12, 39, 51, .1);

  --max: 1200px;
  --gap-secao: clamp(4.5rem, 9vw, 8rem);
  --transicao: 220ms cubic-bezier(.22, .61, .36, 1);
}

/* ---------------- Base ---------------- */

*, *::before, *::after { box-sizing: border-box; }

/* [hidden] precisa vencer as classes que definem display (.btn é inline-flex). */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  /* Compensa o header fixo ao navegar por âncoras. */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--noite);
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 5.6vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

p { margin: 0 0 1rem; text-wrap: pretty; }
img { max-width: 100%; display: block; }
a { color: var(--noite); text-decoration-color: var(--ipe); text-underline-offset: 3px; }

:focus-visible {
  outline: 3px solid var(--ceu);
  outline-offset: 3px;
  border-radius: 4px;
}

.container { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; }
.pular-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--noite); color: #fff; padding: .85rem 1.25rem; border-radius: 0 0 var(--r) 0;
}
.pular-link:focus { left: 0; }

/* ---------------- Header ---------------- */

.cabecalho {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(251, 250, 246, .82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.cabecalho.rolado { border-bottom-color: var(--borda); box-shadow: var(--sombra-sm); }

.cabecalho__interno {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 74px;
}
.marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex-shrink: 0; }
.marca img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.1; }
.marca__nome { font-family: var(--serif); font-weight: 700; font-size: 1.08rem; color: var(--noite); }
.marca__sub {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-suave); font-weight: 600;
}

.navegacao { display: flex; align-items: center; gap: .3rem; }
.navegacao a {
  padding: .5rem .72rem; border-radius: var(--r-sm); text-decoration: none;
  font-size: .9rem; font-weight: 500; color: var(--tinta-suave);
  transition: color var(--transicao), background var(--transicao);
  white-space: nowrap;
}
.navegacao a:hover { color: var(--noite); background: var(--areia); }
.navegacao a.ativo { color: var(--noite); font-weight: 600; }

.menu-botao {
  display: none; background: none; border: 1px solid var(--borda); border-radius: var(--r-sm);
  width: 44px; height: 44px; cursor: pointer; padding: 0;
  align-items: center; justify-content: center; color: var(--noite);
}

/* ---------------- Botões ---------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.5rem; border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--sans); font-size: .93rem; font-weight: 600; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform var(--transicao), box-shadow var(--transicao), background var(--transicao), color var(--transicao);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.btn--principal { background: var(--ipe); color: var(--noite); box-shadow: 0 4px 14px rgba(242, 179, 7, .32); }
.btn--principal:hover { background: var(--ipe-claro); box-shadow: 0 8px 22px rgba(242, 179, 7, .4); }
.btn--escuro { background: var(--noite); color: #fff; }
.btn--escuro:hover { background: var(--noite-2); box-shadow: var(--sombra); }
.btn--contorno { border-color: var(--borda); color: var(--noite); background: var(--superficie); }
.btn--contorno:hover { border-color: var(--noite); box-shadow: var(--sombra-sm); }
.btn--claro { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .4); }
.btn--claro:hover { background: rgba(255, 255, 255, .24); }
.btn--pequeno { padding: .55rem 1.05rem; font-size: .85rem; }
.btn--bloco { width: 100%; }

/* ---------------- Seções ---------------- */

.secao { padding-block: var(--gap-secao); }
.secao--areia { background: var(--areia); }
.secao--noite { background: var(--noite); color: #dfe7ec; }
.secao--noite h2, .secao--noite h3 { color: #fff; }

.secao__cabecalho { max-width: 60ch; margin-bottom: 3.2rem; }
.secao__cabecalho--centro { margin-inline: auto; text-align: center; }

.etiqueta {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .73rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cerrado); margin-bottom: 1rem;
}
.etiqueta::before { content: ""; width: 26px; height: 2px; background: var(--ipe); border-radius: 2px; }
.secao--noite .etiqueta { color: var(--ipe-claro); }
.secao__cabecalho--centro .etiqueta::before { display: none; }

.subtitulo { font-size: 1.1rem; color: var(--tinta-suave); margin: 0; }
.secao--noite .subtitulo { color: #9fb4c0; }

/* ---------------- Hero ---------------- */

.hero {
  position: relative; overflow: hidden;
  padding-top: clamp(8rem, 15vw, 11rem); padding-bottom: clamp(4rem, 8vw, 6rem);
  background:
    radial-gradient(1000px 520px at 82% -8%, var(--ceu-claro) 0%, transparent 62%),
    radial-gradient(760px 420px at 4% 100%, var(--ipe-fundo) 0%, transparent 60%),
    var(--papel);
}
/* Silhueta de capim do Cerrado no rodapé do hero. */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='90' preserveAspectRatio='none' viewBox='0 0 1200 90'%3E%3Cg stroke='%234a7a4e' stroke-opacity='.22' stroke-width='1.6' fill='none' stroke-linecap='round'%3E%3Cpath d='M20 90C22 60 14 40 8 24M60 90C58 58 66 38 74 20M100 90C104 64 96 44 90 30M150 90C146 56 156 34 164 18M200 90C204 62 194 42 188 26M250 90C246 54 258 32 266 16M300 90C304 66 294 46 288 32M350 90C346 58 356 36 364 20M400 90C404 62 394 42 388 28M450 90C446 56 458 34 466 18M500 90C504 64 494 44 488 30M550 90C546 58 556 36 564 20M600 90C604 62 594 42 588 26M650 90C646 54 658 32 666 16M700 90C704 66 694 46 688 32M750 90C746 58 756 36 764 20M800 90C804 62 794 42 788 28M850 90C846 56 858 34 866 18M900 90C904 64 894 44 888 30M950 90C946 58 956 36 964 20M1000 90C1004 62 994 42 988 26M1050 90C1046 54 1058 32 1066 16M1100 90C1104 66 1094 46 1088 32M1150 90C1146 58 1156 36 1164 20M1190 90C1194 62 1184 42 1178 28'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom / 1200px 90px;
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero__grade { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }

.hero__selo {
  display: inline-flex; align-items: center; gap: .6rem; padding: .45rem 1rem;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 999px;
  font-size: .8rem; font-weight: 600; color: var(--noite); box-shadow: var(--sombra-sm);
  margin-bottom: 1.5rem;
}
.hero__selo .ponto {
  width: 7px; height: 7px; border-radius: 50%; background: var(--cerrado);
  box-shadow: 0 0 0 3px rgba(74, 122, 78, .18);
}
.hero__selo .ponto--fechado { background: var(--tinta-fraca); box-shadow: 0 0 0 3px rgba(138, 148, 157, .18); }

.hero h1 { margin-bottom: 1.1rem; }
.hero h1 em { font-style: normal; color: var(--ipe); }
.hero__texto { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--tinta-suave); max-width: 54ch; margin-bottom: 2rem; }

.hero__fatos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--borda); border: 1px solid var(--borda);
  border-radius: var(--r); overflow: hidden; margin-bottom: 2.2rem;
}
.hero__fato { background: var(--superficie); padding: 1rem 1.15rem; display: flex; gap: .85rem; align-items: flex-start; }
.hero__fato svg { flex-shrink: 0; color: var(--cerrado); margin-top: 3px; }
.hero__fato dt {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-fraca); font-weight: 700; margin-bottom: .15rem;
}
.hero__fato dd { margin: 0; font-size: .92rem; font-weight: 500; line-height: 1.4; }

.hero__acoes { display: flex; flex-wrap: wrap; gap: .85rem; }

.hero__arte { position: relative; display: grid; place-items: center; }
/* O círculo é responsabilidade da moldura, não da imagem: assim ele se mantém
   redondo em qualquer largura e mesmo que a logomarca seja trocada por uma não
   quadrada. Deixar isso a cargo do <img> depende do aspect-ratio ser aplicado, e
   qualquer variação de arredondamento ou de suporte achatava o círculo. */
.hero__moldura {
  width: min(100%, 420px); aspect-ratio: 1;
  border-radius: 50%; overflow: hidden; background: #fff;
  box-shadow: 0 24px 70px rgba(12, 39, 51, .18);
  animation: flutuar 9s ease-in-out infinite;
}
.hero__moldura img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

.hero__vagas {
  position: absolute; right: 0; bottom: 6%;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r);
  padding: .9rem 1.2rem; box-shadow: var(--sombra); text-align: center;
}
.hero__vagas strong { display: block; font-family: var(--serif); font-size: 1.9rem; color: var(--noite); line-height: 1; }
.hero__vagas span { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); font-weight: 600; }

/* ---------------- Cards ---------------- */

.grade { display: grid; gap: 1.5rem; }
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grade--3 { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.grade--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
/* Com um ou dois itens a grade larga deixa cards órfãos: centraliza e limita a largura. */
.grade--3:has(> :nth-child(1):last-child) { grid-template-columns: minmax(0, 430px); justify-content: center; }
.grade--3:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 430px)); justify-content: center; }

.cartao {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-lg);
  padding: 1.75rem; transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.cartao--destaque:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: #d8d3c4; }
.cartao__icone {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--ipe-fundo); color: var(--noite); margin-bottom: 1.1rem;
}
.cartao h3 { margin-bottom: .4rem; }
.cartao p { color: var(--tinta-suave); font-size: .94rem; margin: 0; }

/* ---------------- Sobre ---------------- */

.sobre__grade { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.lista-marcada { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .7rem; }
.lista-marcada li { display: flex; gap: .7rem; align-items: flex-start; font-size: .97rem; }
.lista-marcada li::before {
  content: ""; flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%;
  background: var(--cerrado-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a7a4e' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.painel {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-lg);
  padding: 1.75rem; box-shadow: var(--sombra-sm);
}
.painel + .painel { margin-top: 1.25rem; }
.painel h3 { font-size: 1.1rem; display: flex; align-items: center; gap: .6rem; }
.painel h3 svg { color: var(--cerrado); }
.painel p:last-child { margin-bottom: 0; }

/* ---------------- Programação ---------------- */

.dias-abas { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 2.25rem; }
.dia-aba {
  border: 1px solid var(--borda); background: var(--superficie); border-radius: 999px;
  padding: .6rem 1.2rem; cursor: pointer; font-family: var(--sans); font-size: .88rem; font-weight: 600;
  color: var(--tinta-suave); transition: all var(--transicao);
}
.dia-aba:hover { border-color: var(--noite); color: var(--noite); }
.dia-aba[aria-selected="true"] { background: var(--noite); border-color: var(--noite); color: #fff; }

.linha-tempo { position: relative; padding-left: 2rem; margin: 0; }
.linha-tempo::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(var(--ipe), var(--cerrado)); opacity: .3; border-radius: 2px;
}
.atividade { position: relative; padding-bottom: 1.5rem; }
.atividade:last-child { padding-bottom: 0; }
.atividade::before {
  content: ""; position: absolute; left: -2rem; top: 1.45rem; width: 16px; height: 16px;
  border-radius: 50%; background: var(--superficie); border: 3px solid var(--ipe);
}
.atividade__corpo {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r);
  padding: 1.15rem 1.35rem; transition: border-color var(--transicao), box-shadow var(--transicao);
}
.atividade__corpo:hover { border-color: #d8d3c4; box-shadow: var(--sombra-sm); }
.atividade__topo { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: .45rem; }
.atividade__hora {
  font-family: var(--serif); font-size: 1.02rem; font-weight: 700; color: var(--noite);
  font-variant-numeric: tabular-nums;
}
.atividade h3 { font-size: 1.1rem; margin: 0 0 .35rem; }
.atividade__meta {
  display: flex; flex-wrap: wrap; gap: 1rem; font-size: .85rem; color: var(--tinta-suave); margin-top: .55rem;
}
.atividade__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.atividade p { font-size: .92rem; color: var(--tinta-suave); margin: 0; }

.marca-tipo {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: var(--ceu-claro); color: #0a5f80; padding: .25rem .6rem; border-radius: 999px;
}

/* ---------------- Professores ---------------- */

.professor { display: flex; flex-direction: column; text-align: center; align-items: center; padding: 2rem 1.5rem; }
.professor__foto {
  width: 116px; height: 116px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--superficie); box-shadow: 0 0 0 1px var(--borda), var(--sombra-sm); margin-bottom: 1.15rem;
}
.professor__foto--vazia {
  display: grid; place-items: center; background: linear-gradient(140deg, var(--ipe-fundo), var(--ceu-claro));
  font-family: var(--serif); font-size: 2.1rem; font-weight: 600; color: var(--noite);
}
.professor h3 { font-size: 1.12rem; margin-bottom: .2rem; }
.professor__cargo { font-size: .9rem; color: var(--cerrado); font-weight: 600; margin: 0 0 .15rem; }
.professor__inst { font-size: .86rem; color: var(--tinta-suave); margin: 0 0 1rem; }
.professor__area {
  font-size: .75rem; background: var(--areia); color: var(--tinta-suave);
  padding: .3rem .75rem; border-radius: 999px; margin-bottom: 1.2rem;
}

/* ---------------- Conteúdos ---------------- */

.artigo-cartao {
  display: flex; flex-direction: column; overflow: hidden; padding: 0;
  text-decoration: none; color: inherit;
}
.artigo-cartao__capa { aspect-ratio: 16 / 9; overflow: hidden; background: var(--areia); }
.artigo-cartao__capa img { width: 100%; height: 100%; object-fit: cover; transition: transform 480ms cubic-bezier(.22,.61,.36,1); }
.artigo-cartao:hover .artigo-cartao__capa img { transform: scale(1.05); }
.artigo-cartao__capa--vazia { background: linear-gradient(135deg, var(--ceu-claro), var(--ipe-fundo)); display: grid; place-items: center; }
.artigo-cartao__corpo { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.categoria {
  font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--cerrado); margin-bottom: .6rem;
}
.artigo-cartao h3 { font-size: 1.18rem; margin-bottom: .5rem; }
.artigo-cartao p { font-size: .92rem; color: var(--tinta-suave); flex: 1; }
.artigo-cartao__rodape {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-size: .82rem; color: var(--tinta-fraca); margin-top: 1rem;
  padding-top: 1rem; border-top: 1px solid var(--borda);
}
.ler-mais { color: var(--noite); font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.artigo-cartao:hover .ler-mais svg { transform: translateX(3px); }
.ler-mais svg { transition: transform var(--transicao); }

/* ---------------- Apoiadores ---------------- */

.apoio-grupo + .apoio-grupo { margin-top: 3rem; }
.apoio-grupo__titulo {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-suave);
}
.apoio-grupo__titulo::after { content: ""; flex: 1; height: 1px; background: var(--borda); }

.apoio-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.apoio-item {
  display: grid; place-items: center; gap: .75rem; min-height: 132px; padding: 1.4rem 1rem;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r);
  text-decoration: none; color: var(--tinta-suave); text-align: center;
  transition: all var(--transicao);
}
.apoio-item:hover { border-color: var(--noite); transform: translateY(-3px); box-shadow: var(--sombra-sm); color: var(--noite); }
.apoio-item img { max-height: 62px; width: auto; object-fit: contain; }
.apoio-item span { font-size: .85rem; font-weight: 600; line-height: 1.35; }

/* ---------------- FAQ (accordion nativo) ---------------- */

.faq { max-width: 820px; margin-inline: auto; }
.faq details {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r);
  margin-bottom: .75rem; overflow: hidden; transition: border-color var(--transicao);
}
.faq details[open] { border-color: var(--ipe); box-shadow: var(--sombra-sm); }
.faq summary {
  padding: 1.15rem 1.4rem; cursor: pointer; font-weight: 600; font-size: 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  list-style: none; color: var(--noite);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex-shrink: 0; width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230c2733' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--transicao);
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq__resposta { padding: 0 1.4rem 1.3rem; color: var(--tinta-suave); font-size: .95rem; }
.faq__resposta p:last-child { margin-bottom: 0; }

/* ---------------- Contato ---------------- */

.contato__grade { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contato-item { display: flex; gap: 1rem; padding: 1.15rem 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.contato-item:last-child { border-bottom: 0; }
.contato-item svg { flex-shrink: 0; color: var(--ipe); margin-top: 3px; }
.contato-item dt {
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: #8ba3b1; font-weight: 700; margin-bottom: .2rem;
}
.contato-item dd { margin: 0; font-size: .97rem; white-space: pre-line; }
.contato-item a { color: #fff; }

.chamada {
  background: linear-gradient(135deg, var(--noite-2), var(--noite));
  border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-xl);
  padding: clamp(2rem, 4vw, 3rem); text-align: center;
}
.chamada h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: .75rem; }
.chamada p { color: #9fb4c0; margin-bottom: 1.75rem; }

/* ---------------- Rodapé ---------------- */

.rodape { background: #071a23; color: #93a8b4; padding-block: 4rem 1.5rem; font-size: .92rem; }
.rodape__grade { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 2.5rem; margin-bottom: 3rem; }
.rodape h4 {
  color: #fff; font-family: var(--sans); font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1.1rem;
}
.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.rodape a { color: #93a8b4; text-decoration: none; transition: color var(--transicao); }
.rodape a:hover { color: var(--ipe-claro); }
.rodape__marca { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.1rem; }
.rodape__marca img { width: 52px; height: 52px; border-radius: 50%; }
.rodape__marca strong { color: #fff; font-family: var(--serif); font-size: 1.15rem; display: block; }
.rodape__sobre { max-width: 34ch; line-height: 1.6; }

.redes { display: flex; gap: .6rem; margin-top: 1.25rem; }
.redes a {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .07); transition: all var(--transicao);
}
.redes a:hover { background: var(--ipe); color: var(--noite); transform: translateY(-2px); }

.rodape__base {
  border-top: 1px solid rgba(255, 255, 255, .09); padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  font-size: .84rem;
}
.rodape__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
/* Link discreto para a área administrativa — visível, sem chamar atenção. */
.rodape__admin { color: #3d5561; font-size: .8rem; }
.rodape__admin:hover { color: #93a8b4; }

/* ---------------- Formulários ---------------- */

.campo { margin-bottom: 1.15rem; }
.campo > label, .campo__rotulo {
  display: block; font-size: .87rem; font-weight: 600; color: var(--noite); margin-bottom: .4rem;
}
.campo__obrigatorio { color: #c0392b; }
.campo__ajuda { font-size: .8rem; color: var(--tinta-fraca); margin: .35rem 0 0; }
.campo__erro { font-size: .82rem; color: #c0392b; margin: .35rem 0 0; font-weight: 500; display: flex; gap: .35rem; align-items: center; }

input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="date"], input[type="time"], input[type="number"], input[type="url"],
input[type="search"], select, textarea {
  width: 100%; padding: .72rem .9rem; font-family: var(--sans); font-size: .95rem; color: var(--tinta);
  background: var(--superficie); border: 1.5px solid var(--borda); border-radius: var(--r-sm);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
input:hover, select:hover, textarea:hover { border-color: #cfcabb; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--ceu); box-shadow: 0 0 0 3px rgba(27, 165, 220, .15);
}
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: #c0392b; background: #fdf5f4;
}
textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
select {
  appearance: none; cursor: pointer; padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235c6a76' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center;
}
.linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 1.15rem; }
.linha--2-1 { grid-template-columns: 2fr 1fr; }

.escolha { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; font-size: .92rem; line-height: 1.55; }
.escolha input { width: 19px; height: 19px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--cerrado); cursor: pointer; }
.escolha--caixa {
  border: 1.5px solid var(--borda); border-radius: var(--r); padding: 1rem 1.15rem;
  background: var(--superficie); transition: border-color var(--transicao), background var(--transicao);
}
.escolha--caixa:hover { border-color: #cfcabb; }
.escolha--caixa:has(input:checked) { border-color: var(--cerrado); background: var(--cerrado-claro); }

/* ---------------- Inscrição em etapas ---------------- */

.inscricao { padding-top: clamp(7.5rem, 13vw, 10rem); padding-bottom: 5rem; background: var(--areia); min-height: 100vh; }
.inscricao__caixa {
  max-width: 760px; margin-inline: auto; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--r-xl); box-shadow: var(--sombra);
  overflow: hidden;
}
.inscricao__topo { padding: 2rem clamp(1.5rem, 4vw, 2.75rem) 1.5rem; border-bottom: 1px solid var(--borda); }
.inscricao__corpo { padding: 2rem clamp(1.5rem, 4vw, 2.75rem) 2.5rem; }

.passos { display: flex; gap: .4rem; margin-top: 1.5rem; }
.passo { flex: 1; }
.passo__barra { height: 4px; border-radius: 2px; background: var(--borda); transition: background 320ms; }
.passo[data-estado="atual"] .passo__barra, .passo[data-estado="feito"] .passo__barra { background: var(--ipe); }
.passo__rotulo {
  font-size: .72rem; font-weight: 600; color: var(--tinta-fraca); margin-top: .5rem; display: block;
  letter-spacing: .04em;
}
.passo[data-estado="atual"] .passo__rotulo { color: var(--noite); }

/* Sem JS todas as etapas aparecem empilhadas e o formulário continua utilizável. */
.etapa + .etapa { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--borda); }
.js-etapas .etapa { display: none; animation: aparecer 340ms cubic-bezier(.22,.61,.36,1); }
.js-etapas .etapa[data-ativa] { display: block; margin-top: 0; padding-top: 0; border-top: 0; }
.passos, .navegacao-etapas { display: none; }
.js-etapas .passos { display: flex; }
.js-etapas .navegacao-etapas { display: flex; }
@keyframes aparecer { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.etapa h2 { font-size: 1.5rem; margin-bottom: .35rem; }
.etapa__intro { color: var(--tinta-suave); font-size: .94rem; margin-bottom: 1.75rem; }

.navegacao-etapas {
  display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem;
  padding-top: 1.5rem; border-top: 1px solid var(--borda);
}
/* Sem o "Voltar" na primeira etapa, o avanço continua alinhado à direita. */
#btn-avancar, #btn-enviar { margin-left: auto; }

.resumo { border: 1px solid var(--borda); border-radius: var(--r); overflow: hidden; margin-bottom: 1.75rem; }
.resumo__titulo {
  background: var(--areia); padding: .7rem 1.1rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave);
}
.resumo dl { margin: 0; padding: .35rem 1.1rem 1rem; }
.resumo div { display: flex; gap: 1rem; justify-content: space-between; padding: .55rem 0; border-bottom: 1px dashed var(--borda); }
.resumo div:last-child { border-bottom: 0; }
.resumo dt { font-size: .86rem; color: var(--tinta-suave); flex-shrink: 0; }
.resumo dd { margin: 0; font-size: .9rem; font-weight: 500; text-align: right; word-break: break-word; }

/* ---------------- Sucesso ---------------- */

.sucesso { padding-top: clamp(8rem, 14vw, 11rem); padding-bottom: 5rem; }
.sucesso__caixa { max-width: 640px; margin-inline: auto; text-align: center; }
.sucesso__icone {
  width: 84px; height: 84px; border-radius: 50%; background: var(--cerrado-claro);
  display: grid; place-items: center; margin: 0 auto 1.75rem; color: var(--cerrado);
  animation: pulsar 620ms cubic-bezier(.22,.61,.36,1);
}
@keyframes pulsar { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
.protocolo {
  background: var(--noite); color: #fff; border-radius: var(--r-lg); padding: 1.75rem; margin: 2rem 0;
}
.protocolo span { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: #8ba3b1; font-weight: 700; }
.protocolo strong {
  display: block; font-family: var(--serif); font-size: clamp(2rem, 6vw, 2.8rem);
  letter-spacing: .04em; margin-top: .4rem;
}
.proximos { text-align: left; }
.proximos ol { padding-left: 1.3rem; display: grid; gap: .8rem; color: var(--tinta-suave); }
.proximos ol strong { color: var(--noite); }

/* ---------------- Artigo ---------------- */

.artigo-topo { padding-top: clamp(7.5rem, 13vw, 10rem); padding-bottom: 2.5rem; }
.artigo-topo .container { max-width: 760px; }
.artigo-meta { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: .88rem; color: var(--tinta-suave); margin-top: 1.25rem; }
.artigo-capa { max-width: 1000px; margin: 0 auto 3rem; border-radius: var(--r-xl); overflow: hidden; }
.artigo-conteudo { max-width: 700px; margin-inline: auto; font-size: 1.06rem; line-height: 1.78; }
.artigo-conteudo h2 { font-size: 1.65rem; margin-top: 2.5rem; }
.artigo-conteudo h3 { font-size: 1.3rem; margin-top: 2rem; }
.artigo-conteudo img { border-radius: var(--r); margin: 2rem 0; }
.artigo-conteudo blockquote {
  margin: 2rem 0; padding: .35rem 0 .35rem 1.5rem; border-left: 3px solid var(--ipe);
  font-family: var(--serif); font-size: 1.2rem; color: var(--noite);
}
.artigo-conteudo ul, .artigo-conteudo ol { padding-left: 1.4rem; display: grid; gap: .5rem; margin-bottom: 1.5rem; }
.artigo-conteudo a { color: var(--ceu); }

/* ---------------- Páginas legais ---------------- */

.legal { padding-top: clamp(7.5rem, 13vw, 10rem); padding-bottom: 5rem; }
.legal .container { max-width: 780px; }
.legal h2 { font-size: 1.5rem; margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--borda); }
.legal h2:first-of-type { border-top: 0; padding-top: 0; }
.legal h3 { font-size: 1.1rem; margin-top: 1.75rem; }
.legal ul { padding-left: 1.3rem; display: grid; gap: .55rem; margin-bottom: 1.25rem; color: var(--tinta-suave); }
.legal p { color: var(--tinta-suave); }
.legal .atualizado { font-size: .86rem; color: var(--tinta-fraca); }

/* ---------------- Modal (nativo) ---------------- */

dialog {
  border: none; border-radius: var(--r-xl); padding: 0; max-width: 560px; width: calc(100% - 2.5rem);
  box-shadow: var(--sombra-lg); color: var(--tinta); background: var(--superficie);
}
dialog::backdrop { background: rgba(12, 39, 51, .55); backdrop-filter: blur(3px); }
dialog[open] { animation: aparecer 260ms cubic-bezier(.22,.61,.36,1); }
.modal__corpo { padding: 2.25rem; }
.modal__fechar {
  position: absolute; top: 1rem; right: 1rem; width: 36px; height: 36px; border-radius: 50%;
  border: none; background: var(--areia); cursor: pointer; display: grid; place-items: center; color: var(--tinta-suave);
}
.modal__fechar:hover { background: var(--borda); color: var(--noite); }
.modal__topo { display: flex; gap: 1.25rem; align-items: center; margin-bottom: 1.5rem; }
.modal__topo img, .modal__topo .professor__foto--vazia { width: 84px; height: 84px; margin: 0; }
.modal__bio { color: var(--tinta-suave); font-size: .96rem; white-space: pre-line; }

/* ---------------- Alertas e estados ---------------- */

.alerta {
  display: flex; gap: .75rem; align-items: flex-start; padding: .95rem 1.15rem;
  border-radius: var(--r); font-size: .92rem; margin-bottom: 1.5rem; border: 1px solid;
}
.alerta svg { flex-shrink: 0; margin-top: 2px; }
.alerta--erro { background: #fdf3f2; border-color: #f0c4bf; color: #8f2c20; }
.alerta--ok { background: var(--cerrado-claro); border-color: #bcd6bd; color: #2f5632; }
.alerta--info { background: var(--ceu-claro); border-color: #a9dcf2; color: #0a5f80; }
.alerta--aviso { background: var(--ipe-fundo); border-color: #f3dfa6; color: #85630a; }

.vazio { text-align: center; padding: 3.5rem 1.5rem; color: var(--tinta-suave); }
.vazio svg { color: var(--tinta-fraca); margin-bottom: 1rem; }
.vazio h3 { color: var(--tinta-suave); font-size: 1.15rem; }

.erro-pagina { min-height: 70vh; display: grid; place-items: center; text-align: center; padding-top: 6rem; }
.erro-pagina .codigo { font-family: var(--serif); font-size: clamp(5rem, 16vw, 9rem); color: var(--ipe); line-height: 1; }

/* Revelação suave ao rolar. */
.revelar { opacity: 0; transform: translateY(22px); transition: opacity 620ms ease, transform 620ms cubic-bezier(.22,.61,.36,1); }
.revelar.visivel { opacity: 1; transform: none; }

/* ---------------- Responsivo ---------------- */

@media (max-width: 1000px) {
  .hero__grade, .sobre__grade, .contato__grade { grid-template-columns: 1fr; }
  .hero__arte { order: -1; }
  .hero__moldura { width: min(74%, 300px); }
  .hero__vagas { right: 4%; bottom: 0; }
  .rodape__grade { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 860px) {
  html { scroll-padding-top: 76px; }
  .menu-botao { display: flex; }
  .navegacao {
    position: fixed; inset: 66px 0 auto 0; flex-direction: column; align-items: stretch; gap: .15rem;
    background: var(--papel); border-bottom: 1px solid var(--borda); padding: 1rem 1.25rem 1.5rem;
    box-shadow: var(--sombra); max-height: calc(100dvh - 66px); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
  }
  .navegacao[data-aberto] { transform: none; opacity: 1; pointer-events: auto; }
  .navegacao a { padding: .8rem .75rem; font-size: 1rem; border-bottom: 1px solid var(--borda); border-radius: 0; }
  .navegacao a:last-of-type { border-bottom: 0; }
  .navegacao .btn { margin-top: .85rem; }
  .cabecalho__interno { min-height: 66px; }
}

@media (max-width: 620px) {
  .hero__fatos { grid-template-columns: 1fr; }
  .hero__acoes .btn { width: 100%; }
  .rodape__grade { grid-template-columns: 1fr; }
  .rodape__base { flex-direction: column; align-items: flex-start; }
  .linha, .linha--2-1 { grid-template-columns: 1fr; }
  .navegacao-etapas { flex-direction: column-reverse; }
  .navegacao-etapas .btn { width: 100%; }
  .linha-tempo { padding-left: 1.5rem; }
  .atividade::before { left: -1.5rem; width: 13px; height: 13px; }
  .resumo div { flex-direction: column; gap: .2rem; }
  .resumo dd { text-align: left; }
  .marca__sub { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .revelar { opacity: 1; transform: none; }
}

@media print {
  .cabecalho, .rodape, .btn, .menu-botao { display: none !important; }
  body { background: #fff; }
}

/* ---------------- Contagem até a abertura das inscrições ---------------- */

.abertura { margin-top: 2rem; }
.abertura--centro { text-align: center; margin: 2rem 0 0; }
.abertura__rotulo {
  font-size: .73rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-suave); margin: 0 0 .7rem;
}

.contagem { display: flex; flex-wrap: wrap; gap: .6rem; }
.abertura--centro .contagem { justify-content: center; }

.contagem__bloco {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-lg);
  padding: .7rem 1rem; min-width: 74px; text-align: center; box-shadow: var(--sombra-sm);
}
.contagem__bloco strong {
  display: block; font-size: 1.65rem; line-height: 1.1; color: var(--noite);
  font-variant-numeric: tabular-nums;
}
.contagem__bloco span {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-suave);
}

@media (max-width: 480px) {
  .contagem__bloco { min-width: 62px; padding: .55rem .7rem; }
  .contagem__bloco strong { font-size: 1.35rem; }
}