/* ============================================================
   Seminário Clínico — Prof. Dr. Fábio Belo
   Folha de estilo compartilhada por index.html e acervo.html
   ============================================================ */

:root{
  /* --- Cores oficiais da marca (não alterar sem autorização) --- */
  --azul:#0B4BB2;          /* azul principal da marca */
  --azul-escuro:#113D82;   /* azul escuro da marca — hover / fundos escuros */
  --tinta:#333E4D;         /* cor de texto principal da marca */

  /* --- APROXIMAÇÃO, NÃO É VALOR OFICIAL DA MARCA ---------------
     Os três tons abaixo (--azul-claro, --azul-linha, --paper) foram
     DERIVADOS do azul oficial #0B4BB2 para servir de fundo e borda.
     A marca não define valores para tons claros. Se a família
     publicar os oficiais um dia, é só trocar aqui.               */
  --azul-claro:#E8EEF9;
  --azul-linha:#C9D6EC;
  --paper:#F6F8FC;
  /* ------------------------------------------------------------ */

  /* Derivados de apoio (contraste conferido contra branco / --azul) */
  --azul-marinho:#16428C;  /* badge "Aula N" — branco em cima: 9.6:1 */
  --texto-claro:#CBD9F1;   /* texto secundário sobre --azul: 5.5:1  */
  --tinta-2:#4C5666;       /* texto de corpo secundário: 7.4:1      */
  --muted:#626C7D;         /* meta / legendas: 5.3:1 no branco      */
  --linha:#E4EAF4;
  --branco:#ffffff;

  --radius:10px;
  --maxw:960px;
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:"Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

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

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--branco);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;}
img{max-width:100%;}

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 20px;
}

h2{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.55rem,5vw,2.1rem);
  line-height:1.2;
  letter-spacing:-.02em;
  margin:0 0 8px;
}

.etiqueta{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--azul);
  margin:0 0 10px;
}

.sec-head{margin-bottom:20px;}
.sec-head p{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
  max-width:46em;
}

/* ---------- Topo fixo ---------- */
.topbar{
  position:sticky;
  top:0;
  z-index:30;
  background:var(--azul);
  color:#fff;
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:56px;
}
.brand{
  font-family:var(--serif);
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.15;
  text-decoration:none;
}
.brand span{
  display:block;
  font-family:var(--sans);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--texto-claro);
  margin-top:3px;
}
.topbar-acoes{
  display:flex;
  align-items:center;
  gap:10px;
}
.topbar-voltar{
  font-size:.84rem;
  font-weight:500;
  color:var(--texto-claro);
  text-decoration:none;
  white-space:nowrap;
}
.topbar-voltar:hover{color:#fff;}
.topbar .btn{padding:9px 16px;font-size:.82rem;min-height:38px;min-width:98px;}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--sans);
  font-size:.94rem;
  font-weight:600;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  padding:14px 22px;
  border-radius:100px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease, transform .1s ease;
  min-height:50px;
}
.btn:active{transform:translateY(1px);}
.btn-claro{
  background:var(--branco);
  color:var(--azul-escuro);
}
.btn-claro:hover{background:var(--azul-claro);color:var(--azul-escuro);}
.btn-solido{
  background:var(--azul);
  color:#fff;
}
.btn-solido:hover{background:var(--azul-escuro);color:#fff;}
.btn-contorno{
  background:var(--branco);
  color:var(--azul-escuro);
  border-color:var(--azul);
}
.btn-contorno:hover{background:var(--azul);color:#fff;}
.btn svg{flex:none;}

/* Foco visível consistente (teclado) */
.btn:focus-visible,
.link-acao:focus-visible,
.chip-area:focus-visible,
.brand:focus-visible,
.topbar-voltar:focus-visible,
.footer-link:focus-visible{
  outline:3px solid var(--azul-claro);
  outline-offset:2px;
}
.btn-claro:focus-visible{outline-color:#fff;}

/* ---------- Hero (composição centrada) ---------- */
.hero{
  background:var(--azul);
  color:#fff;
  padding:52px 0 56px;
  text-align:center;
}
.hero-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero-eyebrow{
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--texto-claro);
  margin:0 0 22px;
}
h1{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.95rem,6.4vw,3.1rem);
  line-height:1.14;
  letter-spacing:-.02em;
  margin:0 auto 22px;
  max-width:19ch;
}
.hero-lead{
  font-size:1.03rem;
  line-height:1.62;
  color:var(--texto-claro);
  margin:0 auto 34px;
  max-width:52ch;
}
.hero-autor{
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left;
  margin:0 0 30px;
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,.28);
}
.autor-foto{
  flex:none;
  width:58px;
  height:58px;
  border-radius:50%;
  object-fit:cover;
  object-position:50% 8%;
  background:var(--azul-escuro);
  border:2px solid rgba(255,255,255,.5);
}
.autor-nome{
  font-size:.98rem;
  font-weight:700;
  color:#fff;
  margin:0;
  line-height:1.3;
}
.autor-credencial{
  font-size:.83rem;
  color:var(--texto-claro);
  margin:2px 0 0;
  line-height:1.35;
}
.hero .btn{min-width:230px;}

/* ---------- Diferenciais ---------- */
.diferenciais{
  background:var(--branco);
  padding:50px 0;
  border-bottom:1px solid var(--linha);
}
.dif-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  margin-top:26px;
}
.dif-item{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.dif-icone{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--azul-claro);
  color:var(--azul);
  margin:0 0 14px;
}
.dif-item h3{
  font-family:var(--serif);
  font-weight:700;
  font-size:1.12rem;
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--tinta);
  margin:0 0 6px;
}
.dif-item p{
  font-size:.93rem;
  line-height:1.6;
  color:var(--tinta-2);
  margin:0;
}

/* ---------- Próximos encontros ---------- */
.proximos{
  background:var(--paper);
  padding:50px 0;
  border-bottom:1px solid var(--linha);
}
.proximos[hidden]{display:none;}
.proximos-lista{
  list-style:none;
  margin:24px 0 26px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.proximo-item{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 14px;
  background:var(--branco);
  border:1px solid var(--azul-linha);
  border-radius:12px;
  padding:16px 18px;
}
.proximo-numero{
  flex:none;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#fff;
  background:var(--azul-marinho);
  border-radius:100px;
  padding:5px 12px;
  white-space:nowrap;
}
.proximo-data{
  flex:none;
  font-size:.84rem;
  font-weight:600;
  color:var(--azul-escuro);
}
.proximo-titulo{
  flex:1 1 100%;
  font-family:var(--serif);
  font-size:1.05rem;
  font-weight:600;
  line-height:1.35;
  color:var(--tinta);
  margin:0;
  overflow-wrap:anywhere;
}

/* ---------- Sobre o professor ---------- */
.sobre{
  background:var(--branco);
  padding:52px 0;
  border-bottom:1px solid var(--linha);
}
.sobre-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  align-items:start;
}
.sobre-foto{
  width:150px;
  height:190px;
  object-fit:cover;
  object-position:50% 12%;
  border-radius:12px;
  background:var(--azul-claro);
}
.sobre h2{margin-bottom:14px;}
.sobre p{
  color:var(--tinta-2);
  margin:0 0 14px;
  max-width:60ch;
}
.sobre p:last-child{margin-bottom:0;}

/* ---------- Aprofunde-se em um tema (módulos) ---------- */
.modulos{
  background:var(--paper);
  padding:50px 0;
  border-bottom:1px solid var(--linha);
}
.modulos-lista{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:24px;
}
.modulo-item{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 12px;
  background:var(--branco);
  border:1px solid var(--azul-linha);
  border-radius:12px;
  padding:14px 16px;
}
.modulo-item-info{
  flex:1 1 100%;
  min-width:0;
}
.modulo-item-nome{
  font-size:.95rem;
  font-weight:600;
  line-height:1.3;
  color:var(--tinta);
  margin:0;
  overflow-wrap:anywhere;
}
.modulo-item-contagem{
  font-size:.8rem;
  color:var(--muted);
  margin:2px 0 0;
}
.modulo-item-desc{
  font-size:.85rem;
  line-height:1.5;
  color:var(--tinta-2);
  margin:5px 0 0;
}
.modulo-item .link-acao{
  flex:none;
  font-size:.82rem;
  padding:8px 14px;
  min-height:38px;
}

/* ---------- Últimas aulas (home) ---------- */
.ultimas{
  background:var(--branco);
  padding:50px 0;
  border-bottom:1px solid var(--linha);
}
.ultimas-rodape{
  display:flex;
  justify-content:center;
  margin-top:28px;
}
.ultimas-rodape .btn{min-width:250px;}

/* ---------- Catálogo (acervo.html) ---------- */
.catalogo{
  background:var(--paper);
  padding:40px 0 8px;
  scroll-margin-top:56px;
}
.busca-bar{
  position:sticky;
  top:56px;
  z-index:20;
  background:var(--paper);
  padding:14px 0 12px;
  border-bottom:1px solid var(--azul-linha);
  margin-bottom:6px;
}
.busca-field{position:relative;}
.busca-field .icone-busca{
  position:absolute;
  left:15px;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  pointer-events:none;
}
#busca{
  width:100%;
  font-family:var(--sans);
  font-size:1rem;
  color:var(--tinta);
  background:var(--branco);
  border:1px solid var(--azul-linha);
  border-radius:100px;
  padding:14px 46px 14px 44px;
  min-height:52px;
  -webkit-appearance:none;
  appearance:none;
}
#busca::placeholder{color:#7C8494;}
#busca::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;}
#busca:focus{
  outline:none;
  border-color:var(--azul);
  box-shadow:0 0 0 3px var(--azul-claro);
}
#limpar{
  position:absolute;
  right:11px;
  top:50%;
  transform:translateY(-50%);
  display:none;
  background:none;
  border:0;
  color:var(--muted);
  font-size:1.4rem;
  line-height:1;
  width:34px;
  height:34px;
  border-radius:50%;
  cursor:pointer;
}
#limpar:hover{background:var(--azul-claro);color:var(--azul-escuro);}
#limpar.show{display:block;}
.contador{
  margin:10px 0 0;
  font-size:.86rem;
  color:var(--muted);
}
.contador b{color:var(--tinta);font-weight:600;}

/* ---------- Filtro por área ---------- */
.filtros-area{
  display:flex;
  gap:8px;
  margin:14px 0 2px;
  padding-bottom:4px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.filtros-area::-webkit-scrollbar{display:none;}
.chip-area{
  flex:none;
  white-space:nowrap;
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:500;
  color:var(--tinta-2);
  background:var(--branco);
  border:1px solid var(--azul-linha);
  border-radius:100px;
  padding:9px 16px;
  min-height:40px;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.chip-area:hover{border-color:var(--azul);color:var(--azul);}
.chip-area.ativo{
  background:var(--azul);
  border-color:var(--azul);
  color:#fff;
  font-weight:600;
}
.chip-area.ativo:hover{color:#fff;}

.modulo-destaque{
  display:flex;
  flex-direction:column;
  gap:16px;
  background:var(--azul-claro);
  border:1px solid var(--azul-linha);
  border-radius:14px;
  padding:20px;
  margin:16px 0 4px;
}
/* o display:flex acima vence o [hidden] do navegador; sem esta regra a caixa
   fica sempre visivel e vazia mesmo com atualizarDestaque() setando hidden */
.modulo-destaque[hidden]{display:none;}
.modulo-destaque-etiqueta{
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--azul);
  margin:0 0 6px;
}
.modulo-destaque h3{
  font-family:var(--serif);
  font-weight:700;
  font-size:1.24rem;
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--tinta);
  margin:0 0 4px;
}
.modulo-destaque-contagem{
  font-size:.88rem;
  color:var(--muted);
  margin:0;
}

/* ---------- Cards de aula ---------- */
.lista{
  list-style:none;
  margin:0;
  padding:0;
}
.aula-card{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  padding:22px 0;
  border-bottom:1px solid var(--azul-linha);
}
.aula-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.aula-numero{
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#fff;
  background:var(--azul-marinho);
  border-radius:100px;
  padding:5px 12px;
  white-space:nowrap;
}
.aula-data{
  font-size:.82rem;
  color:var(--muted);
}
.badge-em-breve{
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--azul-escuro);
  background:var(--azul-claro);
  border:1px solid var(--azul-linha);
  border-radius:100px;
  padding:4px 11px;
  white-space:nowrap;
}
.aula-titulo{
  font-family:var(--serif);
  font-size:1.14rem;
  font-weight:600;
  line-height:1.35;
  letter-spacing:-.01em;
  color:var(--tinta);
  margin:0;
  overflow-wrap:anywhere;
}
.aula-acoes{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.link-acao{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:.86rem;
  font-weight:500;
  text-decoration:none;
  color:var(--tinta-2);
  background:var(--branco);
  border:1px solid var(--azul-linha);
  border-radius:100px;
  padding:9px 16px;
  min-height:42px;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.link-acao:hover{border-color:var(--azul);color:var(--azul);}
.link-acao.video{color:var(--azul-escuro);border-color:var(--azul-linha);background:var(--azul-claro);}
.link-acao.modulo{
  color:var(--azul-escuro);
  background:var(--branco);
  border-color:var(--azul);
  font-weight:600;
}
.link-acao.modulo:hover{background:var(--azul);color:#fff;border-color:var(--azul);}
.link-acao.video:hover{background:var(--azul);color:#fff;border-color:var(--azul);}
.link-acao svg{flex:none;}
.aula-previsto{
  font-size:.86rem;
  color:var(--muted);
  font-style:italic;
  margin:12px 0 0;
}

.estado{
  padding:46px 4px;
  text-align:center;
  color:var(--muted);
  font-size:.95rem;
}
.estado strong{color:var(--tinta);}

/* ---------- Fechamento ---------- */
.final{
  background:var(--azul);
  color:#fff;
  padding:52px 0;
  text-align:center;
}
.final h2{margin-bottom:22px;}
.final .btn{min-width:250px;}

footer{
  background:var(--azul-escuro);
  color:var(--texto-claro);
  padding:26px 0 30px;
  font-size:.82rem;
  text-align:center;
}
.footer-link{
  display:inline-block;
  margin-top:10px;
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px;
}
.footer-link:hover{color:var(--azul-claro);}

/* ---------- Modal "Inscrever-se" ---------- */
.modal-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0;
  background:rgba(17,25,45,.55);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.modal-overlay[hidden]{display:none;}
.modal-card{
  position:relative;
  width:100%;
  max-width:560px;
  background:var(--branco);
  color:var(--tinta);
  border-radius:18px 18px 0 0;
  padding:30px 22px 26px;
  box-shadow:0 -8px 40px rgba(17,25,45,.28);
}
.modal-fechar{
  position:absolute;
  top:12px;
  right:12px;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--paper);
  border:1px solid var(--azul-linha);
  border-radius:50%;
  color:var(--tinta-2);
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
}
.modal-fechar:hover{background:var(--azul-claro);color:var(--azul-escuro);}
.modal-fechar:focus-visible{outline:3px solid var(--azul-claro);outline-offset:2px;}
.modal-titulo{
  font-family:var(--serif);
  font-weight:700;
  font-size:1.42rem;
  line-height:1.22;
  letter-spacing:-.015em;
  color:var(--tinta);
  margin:0 44px 6px 0;
}
.modal-intro{
  font-size:.92rem;
  color:var(--muted);
  margin:0 0 22px;
}
.modal-opcoes{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.modal-opcao{
  border:1px solid var(--azul-linha);
  border-radius:14px;
  padding:18px 18px 16px;
  background:var(--paper);
}
.modal-opcao h3{
  font-family:var(--serif);
  font-weight:700;
  font-size:1.08rem;
  line-height:1.25;
  color:var(--tinta);
  margin:0 0 6px;
}
.modal-opcao p{
  font-size:.9rem;
  line-height:1.55;
  color:var(--tinta-2);
  margin:0 0 16px;
}
.modal-opcao .btn{width:100%;}
body.modal-aberto{overflow:hidden;}

/* ---------- Breakpoints ---------- */
@media (min-width:720px){
  .topbar-acoes{gap:14px;}
  .topbar-voltar{font-size:.86rem;}

  .hero{padding:76px 0 72px;}
  .hero-eyebrow{margin-bottom:26px;}
  .hero-lead{margin-bottom:40px;}
  .hero-autor{margin-bottom:34px;padding-top:30px;}

  .diferenciais{padding:64px 0;}
  .dif-grid{grid-template-columns:1fr 1fr;gap:30px 34px;}

  .proximos{padding:60px 0;}
  .proximo-item{padding:18px 22px;}
  .proximo-titulo{flex:1 1 100%;font-size:1.1rem;}

  .sobre{padding:64px 0;}
  .sobre-grid{
    grid-template-columns:186px 1fr;
    gap:36px;
    align-items:center;
  }
  .sobre-foto{width:186px;height:236px;}

  .modulos{padding:60px 0;}
  .modulo-item-info{flex:1 1 130px;}
  .modulos-lista{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    align-content:start;
  }

  .ultimas{padding:60px 0;}

  .aula-card{
    grid-template-columns:118px 1fr;
    column-gap:26px;
    padding:26px 0;
  }
  .aula-meta{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .aula-titulo{font-size:1.2rem;}

  .filtros-area{flex-wrap:wrap;overflow:visible;}
  .modulo-destaque{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:22px 26px;
  }
  .modulo-destaque .btn{flex:none;}

  .modal-overlay{align-items:center;padding:24px;}
  .modal-card{
    border-radius:18px;
    padding:34px 32px 30px;
    box-shadow:0 24px 60px rgba(17,25,45,.32);
  }
  .modal-opcoes{flex-direction:row;}
  .modal-opcao{flex:1 1 0;display:flex;flex-direction:column;}
  .modal-opcao .btn{margin-top:auto;}
}

@media (min-width:900px){
  .dif-grid{grid-template-columns:repeat(4,1fr);gap:28px;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;}
  html{scroll-behavior:auto;}
}