/* Layout compartilhado por todas as telas: barra de topo de vidro, menu
   (cartões na tela inicial, pílulas no painel, a mesma gaveta no celular),
   foto de fundo, entrada da equipe e fundo do painel.
   Breakpoint do celular: 767px (igual em todas as telas). */

/* ---------- Foto de fundo (tela inicial e entrada da equipe) ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}
.hero__bg,
.hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__bg img {
  object-fit: cover;
  object-position: right center;   /* desktop: estudantes à direita */
}
@media (max-width: 1024px) and (orientation: portrait) {
  .hero__bg img { object-position: center bottom; } /* estudantes embaixo */
}

/* ---------- Faixa "Sistema em fase de implantação" (FAIXA_IMPLANTACAO) ---------- */
.com-faixa { --faixa-altura: 26px; }
.faixa-implantacao {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--faixa-altura);
  margin: 0;
  padding: 2px var(--esp-4);
  background: var(--azul);
  color: var(--branco);
  font-family: var(--fonte);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .01em;
  text-align: center;
}
@media (max-width: 767px) {
  .com-faixa { --faixa-altura: 36px; }
  .faixa-implantacao { font-size: 12px; }
}

/* ---------- Barra de topo (vidro, ponta a ponta) ---------- */
.topo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid var(--vidro-borda);
  box-shadow: var(--sombra-topo);
}
/* Painel: a barra acompanha a rolagem sem cobrir o conteúdo */
.topo--rolagem { position: sticky; }
/* O vidro fica num pseudo-elemento: backdrop-filter no próprio header
   prenderia o painel e o véu (position: fixed) dentro da barra */
.topo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--vidro-topo);
  -webkit-backdrop-filter: var(--desfoque-topo);
  backdrop-filter: var(--desfoque-topo);
}
.topo__conteudo {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--esp-5);
  max-width: var(--largura-max);
  min-height: 76px;
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.topo__acoes {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  flex: none;
}
.marca {
  display: flex;
  align-items: center;             /* tudo centralizado na vertical */
  gap: var(--esp-4);
  min-width: 0;
  font-family: var(--fonte);
  line-height: 1.15;
  color: var(--azul);
  text-decoration: none;
}
.marca__logo {
  display: block;
  flex: none;
  height: 48px;
  width: auto;                     /* nunca distorce */
}
.marca__texto {
  padding-left: var(--esp-4);
  border-left: 1px solid rgba(18, 50, 90, 0.2);
}
.marca__titulo {
  display: block;
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}
.marca__subtitulo {
  display: block;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  opacity: 0.8;
}

/* Só existem no celular */
.hamburguer, .veu,
.menu__cabecalho, .menu__rodape, .menu__conta { display: none; }

/* ---------- Menu: base comum ao desktop e à gaveta do celular ---------- */
.menu { flex: none; }
.menu__lista {
  display: flex;
  gap: var(--esp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu__link {
  font-family: var(--fonte);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.icone-botao {
  align-items: center;
  justify-content: center;
  width: 44px;                     /* área de toque mínima */
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--raio-p);
  background: transparent;
  color: var(--azul);
  cursor: pointer;
}

@media (min-width: 768px) {
  .menu { display: flex; align-items: center; gap: var(--esp-3); }
  .marca__titulo, .marca__subtitulo { white-space: nowrap; }

  /* Tela inicial: cartões compactos com a mesma largura */
  .menu--cartoes .menu__lista {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;        /* os dois com a largura do maior */
    gap: var(--esp-3);
  }
  .menu--cartoes .menu__link {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 8px 14px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-m);
    background: var(--branco);
    color: var(--azul);
    white-space: nowrap;
    transition: background var(--transicao), border-color var(--transicao);
  }
  .menu--cartoes .menu__link:hover {
    background: linear-gradient(var(--realce), var(--realce)), var(--branco);
    border-color: var(--borda-forte);
  }
  .menu--cartoes .menu__icone {
    display: inline-flex;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--azul);
    color: var(--branco);
  }
  .menu--cartoes .menu__icone svg { width: 18px; height: 18px; }
  .menu--cartoes .menu__textos {
    display: flex;
    flex: 1;
    flex-direction: column;
  }
  .menu--cartoes .menu__rotulo {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.15;
  }
  .menu--cartoes .menu__descricao {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.15;
    opacity: 0.65;
  }
  .menu--cartoes .menu__seta {
    flex: none;
    font-size: 20px;
    line-height: 1;
    opacity: 0.4;
    transition: transform var(--transicao);
  }
  .menu--cartoes .menu__link:hover .menu__seta { transform: translateX(2px); }

  /* Painel: navegação em pílulas, item atual destacado */
  .menu--pilulas .menu__lista { gap: 6px; }
  .menu--pilulas .menu__icone,
  .menu--pilulas .menu__descricao,
  .menu--pilulas .menu__seta { display: none; }
  .menu--pilulas .menu__link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: var(--raio-pilula);
    color: var(--azul);
    font-size: 15px;
    white-space: nowrap;
    transition: background var(--transicao), border-color var(--transicao);
  }
  .menu--pilulas .menu__link:hover {
    background: var(--vidro-leve);
    border-color: var(--borda);
  }
  .menu--pilulas .menu__link[aria-current="page"] {
    background: var(--azul);
    border-color: var(--azul);
    color: var(--branco);
  }
}

/* ---------- Botão "Entrar" (candidatos e equipes) ---------- */
.menu__entrar {
  font-family: var(--fonte);
  color: var(--azul);
  text-decoration: none;
}
@media (min-width: 768px) {
  .menu__entrar {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--esp-2);
    min-height: 44px;
    padding: 10px 20px 10px 16px;
    border: 1px solid var(--azul);
    border-radius: var(--raio-pilula);
    background: var(--azul);
    color: var(--branco);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: var(--sombra-cartao);
    transition: background-color var(--transicao), transform var(--transicao), box-shadow var(--transicao);
  }
  .menu__entrar:hover { background: var(--azul-hover); transform: translateY(-1px); box-shadow: var(--sombra-hover); }
  .menu__entrar .menu__icone { display: inline-flex; color: var(--branco); }
  .menu__entrar .menu__icone svg { width: 20px; height: 20px; }
  .menu__entrar .menu__descricao, .menu__entrar .menu__seta { display: none; }
}

/* ---------- Conta do usuário (painel, desktop): círculo com iniciais ---------- */
.conta { position: relative; flex: none; }
.conta > summary { list-style: none; }
.conta > summary::-webkit-details-marker { display: none; }
.conta__avatar {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--vidro-borda);
  border-radius: 50%;
  background: var(--azul);
  color: var(--branco);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: box-shadow var(--transicao);
}
.conta__avatar:hover, .conta[open] .conta__avatar { box-shadow: 0 0 0 4px rgba(18, 50, 90, 0.15); }
.conta__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 260px;
  padding: var(--esp-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-m);
  background: var(--branco);
  box-shadow: var(--sombra-flutuante);
}
.conta__nome { margin: 0; font-weight: 700; }
.conta__email { margin: 0; font-size: 13px; color: var(--texto-suave); word-break: break-all; }
.conta__perfil { margin: var(--esp-2) 0 var(--esp-3); }
.conta__menu form { margin: 0; }

/* Painel: em 768–1023px a navegação do admin (5 itens) não cabe com o texto da marca */
@media (min-width: 768px) and (max-width: 1023px) {
  .topo--nav-longa .marca__texto { display: none; }
}

/* ---------- Tela inicial: reduções progressivas no desktop ---------- */
/* Até 1180px: só ícone + título; subtítulo da marca menor */
@media (min-width: 768px) and (max-width: 1180px) {
  .menu--cartoes .menu__descricao, .menu--cartoes .menu__seta { display: none; }
  .marca__subtitulo { font-size: 12px; }
}
/* Até 1100px: os cartões ficam só com o título */
@media (min-width: 768px) and (max-width: 1100px) {
  .menu--cartoes .menu__icone { display: none; }
  .menu--cartoes .menu__textos { align-items: center; }
}
/* Até 899px: marca e espaçamentos mais compactos */
@media (min-width: 768px) and (max-width: 899px) {
  .topo__conteudo { gap: var(--esp-3); }
  .menu { gap: var(--esp-2); }
  .menu--cartoes .menu__lista { gap: var(--esp-2); }
  .menu--cartoes .menu__link { padding: 8px 10px; }
  .menu__entrar { padding: 10px 14px 10px 12px; }
  .marca { gap: 10px; }
  .marca__logo { height: 36px; }
  .marca__texto { padding-left: 10px; }
  .marca__titulo { font-size: 18px; }
  .marca__subtitulo { display: none; }
}

/* ---------- Celular: barra em duas linhas e gaveta lateral ---------- */
@media (max-width: 767px) {
  .topo__conteudo {
    flex-direction: column;
    gap: 0;
    min-height: 0;
    padding-bottom: 6px;
  }
  .marca {
    flex-direction: column;
    gap: 0;
    text-align: center;
  }
  .marca__logo {
    height: 40px;
    margin: 8px 0;                 /* linha 1: 56px */
  }
  .marca__texto {
    padding-left: 0;
    border-left: 0;
  }
  .marca__titulo { font-size: 18px; }
  .marca__subtitulo { font-size: 12px; }
  .conta { display: none; }

  .hamburguer {
    display: inline-flex;
    position: absolute;
    top: 6px;                      /* centralizado na linha 1 */
    right: max(4px, env(safe-area-inset-right));
  }
  .hamburguer line {
    transition: transform .25s ease, opacity .2s ease;
    transform-box: fill-box;
    transform-origin: center;
  }
  .hamburguer[aria-expanded="true"] .l1 { transform: translateY(6px) rotate(45deg); }
  .hamburguer[aria-expanded="true"] .l2 { opacity: 0; }
  .hamburguer[aria-expanded="true"] .l3 { transform: translateY(-6px) rotate(-45deg); }

  /* Véu: azul translúcido com desfoque leve */
  .veu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgba(18, 50, 90, 0.35);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s;
  }

  /* Gaveta de vidro que desliza da direita */
  .menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    width: min(86vw, 360px);
    overflow-y: auto;
    border-radius: var(--raio-g) 0 0 var(--raio-g);
    background: var(--vidro-painel);
    -webkit-backdrop-filter: var(--desfoque-painel);
    backdrop-filter: var(--desfoque-painel);
    box-shadow: var(--sombra-painel);
    transform: translateX(100%);
    visibility: hidden;            /* fechado: itens fora do Tab */
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility .28s;
  }

  /* Cabeçalho da gaveta: alinhado com a 1ª linha da barra */
  .menu__cabecalho {
    display: flex;
    flex: none;
    justify-content: space-between;
    align-items: center;
    height: calc(56px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) max(10px, env(safe-area-inset-right)) 0 20px;
    border-bottom: 1px solid var(--divisoria);
  }
  .menu__marca {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .menu__logo {
    display: block;
    height: 32px;
    width: auto;
  }
  .menu__titulo {
    font-family: var(--fonte);
    font-size: 18px;
    font-weight: 700;
    color: var(--azul);
  }
  .menu__fechar {
    display: inline-flex;
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(18, 50, 90, 0.06);
    transition: background-color var(--transicao);
  }
  .menu__fechar::before {          /* área de toque de 44px */
    content: "";
    position: absolute;
    inset: -2px;
  }
  .menu__fechar:hover { background: rgba(18, 50, 90, 0.12); }

  /* Itens: cartões iguais */
  .menu__lista {
    flex-direction: column;
    gap: var(--esp-3);
    padding: 16px max(16px, env(safe-area-inset-right)) 16px 16px;
  }
  .menu__link {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    min-height: 64px;
    padding: 14px 16px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-m);
    background: var(--branco);
    color: var(--azul);
    white-space: normal;
    transition: background var(--transicao), border-color var(--transicao);
  }
  .menu__link:hover,
  .menu__link:active {
    background: linear-gradient(var(--realce), var(--realce)), var(--branco);
    border-color: var(--borda-forte);
  }
  .menu__link[aria-current="page"] { border-color: var(--azul); box-shadow: inset 3px 0 0 var(--azul); }
  .menu__icone {
    display: inline-flex;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--azul);
    color: var(--branco);
  }
  .menu__textos {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
  }
  .menu__rotulo {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
  }
  .menu__descricao {
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    opacity: 0.65;
  }
  .menu__seta {
    display: block;
    flex: none;
    font-size: 24px;
    line-height: 1;
    opacity: 0.4;
    transition: transform var(--transicao);
  }
  .menu__link:hover .menu__seta,
  .menu__link:active .menu__seta { transform: translateX(2px); }

  /* "Entrar": cartão igual a "Nova inscrição" e "Consultar inscrição" */
  .menu__entrar {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--esp-3);
    min-height: 64px;
    margin: -4px max(16px, env(safe-area-inset-right)) 16px 16px;
    padding: 14px 16px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-m);
    background: var(--branco);
  }
  .menu__entrar:hover, .menu__entrar:active {
    background: linear-gradient(var(--realce), var(--realce)), var(--branco);
    border-color: var(--borda-forte);
  }
  .menu__entrar:hover .menu__seta, .menu__entrar:active .menu__seta { transform: translateX(2px); }

  /* Conta do usuário na gaveta (painel) */
  .menu__conta {
    display: block;
    flex: none;
    margin: 0 max(16px, env(safe-area-inset-right)) 0 16px;
    padding: 14px 16px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-m);
    background: var(--vidro-leve);
  }
  .menu__conta form { margin: var(--esp-3) 0 0; }

  /* Rodapé fixado embaixo */
  .menu__rodape {
    display: block;
    flex: none;
    margin-top: auto;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--divisoria);
    font-family: var(--fonte);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    color: var(--azul);
  }
  .menu__rodape p {
    margin: 0;
    opacity: 0.6;
  }

  /* Itens entram em sequência (fade + leve subida) */
  .menu__lista li,
  .menu__entrar,
  .menu__conta,
  .menu__rodape {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease, background var(--transicao), border-color var(--transicao);
  }
  html.menu-aberto .menu__lista li,
  html.menu-aberto .menu__entrar,
  html.menu-aberto .menu__conta,
  html.menu-aberto .menu__rodape { opacity: 1; transform: none; }
  html.menu-aberto .menu__lista li:nth-child(1) { transition-delay: 80ms; }
  html.menu-aberto .menu__lista li:nth-child(2) { transition-delay: 120ms; }
  html.menu-aberto .menu__lista li:nth-child(3) { transition-delay: 160ms; }
  html.menu-aberto .menu__lista li:nth-child(4) { transition-delay: 200ms; }
  html.menu-aberto .menu__lista li:nth-child(5) { transition-delay: 240ms; }
  html.menu-aberto .menu__entrar,
  html.menu-aberto .menu__conta { transition-delay: 160ms; }
  html.menu-aberto .menu__rodape { transition-delay: 200ms; }

  /* Menu aberto */
  html.menu-aberto,
  html.menu-aberto body { overflow: hidden; }   /* trava a rolagem */
  html.menu-aberto .veu { opacity: 1; visibility: visible; }
  html.menu-aberto .menu { transform: none; visibility: visible; }
}

/* ---------- Entrada da equipe: cartão de vidro sobre a foto ---------- */
/* O cartão fica sobre o céu, sem cobrir os rostos: à esquerda no desktop
   (estudantes à direita) e no alto em telas em pé (estudantes embaixo) */
.entrada {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  justify-items: start;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--topo-altura) + var(--faixa-altura) + var(--esp-5)) var(--esp-4) calc(72px + env(safe-area-inset-bottom)) max(var(--gutter), 6vw);
}
@media (max-width: 1024px) and (orientation: portrait), (max-width: 767px) {
  .entrada {
    align-items: start;
    justify-items: center;
    padding-left: var(--esp-4);
    padding-top: calc(110px + var(--faixa-altura) + env(safe-area-inset-top));
  }
}

/* ---------- Rodapé (todas as telas): link do Aviso de Privacidade ---------- */
.rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 8px;
  padding: var(--esp-4) var(--gutter) calc(var(--esp-4) + env(safe-area-inset-bottom));
  color: var(--texto-suave);
  font-family: var(--fonte);
  font-size: 13px;
  font-weight: 600;
}
.rodape a { color: var(--azul); }
/* Telas com foto: pílula discreta no canto, sobre as ondas, sem cobrir rostos */
.pagina-inicio, .pagina-entrada { position: relative; }
.pagina-inicio .rodape, .pagina-entrada .rodape {
  position: absolute;
  z-index: 2;
  left: max(var(--gutter), env(safe-area-inset-left));
  bottom: calc(14px + env(safe-area-inset-bottom));
  padding: 5px 14px;
  border-radius: var(--raio-pilula);
  background: var(--vidro-leve);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--azul);
}
@media (max-width: 767px) {
  .pagina-inicio .rodape, .pagina-entrada .rodape { left: 50%; transform: translateX(-50%); white-space: nowrap; }
  .pagina-inicio .rodape span, .pagina-entrada .rodape span { display: none; }
}

/* ---------- Painel: fundo claro com as ondas da foto no rodapé ---------- */
.pagina-painel {
  min-height: 100vh;
  min-height: 100svh;
  background: linear-gradient(180deg, var(--ceu) 0, #eaf4fc 260px, var(--branco) 640px) fixed;
}
.pagina-painel::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: min(26vh, 220px);
  background: url("../img/ondas.webp") center bottom / cover no-repeat;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(to top, #000 35%, transparent);
  mask-image: linear-gradient(to top, #000 35%, transparent);
  pointer-events: none;
}
.conteudo {
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: var(--esp-5) max(var(--gutter), env(safe-area-inset-right)) 96px max(var(--gutter), env(safe-area-inset-left));
}
.conteudo--estreito { max-width: 760px; }