:root{
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --border: rgba(255,255,255,.14);
  --focus: rgba(255,255,255,.28);
  --card: rgba(0,0,0,.45);
  --btn: rgba(255,255,255,.16);
  --btnHover: rgba(255,255,255,.22);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  background-image: url("./alvorada.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;

  background-color: #0b1220;
  color: var(--text);
  position: relative;

  overflow-x: hidden;
  overflow-y: auto;
}

/* película escura */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.45) 45%,
    rgba(0,0,0,.60) 100%
  );
  z-index: 0;
  pointer-events: none;
}

.container{
  max-width: 860px;
  margin: 0 auto;

  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;

  /* espaço do menu fixo */
  padding: 88px 16px 18px;

  position: relative;
  z-index: 1;
}

.header{
  text-align:center;
  margin-bottom: 10px;
}

.logo{
  margin: 0 auto 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(0 22px 40px rgba(0,0,0,.55));
}

.logo img{
  width: auto;
  height: auto;
  max-width: min(92vw, 520px);
  max-height: 240px;
  object-fit: contain;
  display: block;
}

h1{
  margin: 0 0 6px;
  letter-spacing: .06em;
  font-size: clamp(22px, 3.2vw, 34px);
  text-shadow: 0 10px 30px rgba(0,0,0,.45);
}

.subtitle{
  margin: 0 auto;
  color: var(--muted);
  max-width: 780px;
  line-height: 1.25;
  font-size: 13px;
  text-shadow: 0 10px 30px rgba(0,0,0,.45);
}

.card{
  margin: 12px auto 10px;
  width: min(820px, 100%);

  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 12px 16px;

  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
}

.card h2{
  margin: 0 0 4px;
  font-size: 16px;
}

.hint{
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
}

.form{
  display: grid;
  gap: 10px;
}

.label{
  font-size: 13px;
  color: var(--muted);
}

.input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.35);
  color: var(--text);
  font-size: 16px;
  outline: none;
}
.input:focus{
  border-color: var(--focus);
  box-shadow: 0 0 0 4px rgba(255,255,255,.10);
}

.small{
  font-size: 12px;
  color: var(--muted);
}

.validation{
  min-height: 16px;
  font-size: 13px;
  color: #ffd2d2;
}

.button{
  cursor: pointer;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--btn);
  color: var(--text);
  font-weight: 600;
  letter-spacing: .02em;
}
.button:hover{ background: var(--btnHover); }

.footer{
  margin-top: 10px;
  text-align:center;
  color: var(--muted);
  font-size: 12px;
  text-shadow: 0 10px 30px rgba(0,0,0,.45);
}

/* ========= MENU ========= */
.topnav{
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.topnav a, .topnav button{
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font: inherit;
}

.brand{
  cursor: pointer;
  border: 0;
  background: transparent;

  font-weight: 700;
  letter-spacing: .02em;
  padding: 8px 10px;
  border-radius: 12px;
}
.brand:hover{ background: rgba(255,255,255,.10); }

.navlinks{
  display: flex;
  align-items: center;
  gap: 6px;
}

.navlinks > a{
  padding: 8px 10px;
  border-radius: 12px;
  opacity: .92;
}
.navlinks > a:hover{ background: rgba(255,255,255,.10); }
.navlinks > a.active{ background: rgba(255,255,255,.14); }

.dropdown{ position: relative; }

.dropbtn{
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 8px 10px;
  border-radius: 12px;
}
.dropbtn:hover{ background: rgba(255,255,255,.10); }

.caret{ opacity: .8; margin-left: 6px; }

/* dropdown principal: abre "pra dentro" (lado direito da tela) */
.dropmenu{
  display: none;
  position: absolute;

  right: 0;
  left: auto;

  /* sem gap grande (evita perder hover) */
  top: 100%;
  margin-top: 6px;

  min-width: 260px;
  padding: 10px;
  border-radius: 16px;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.dropdown.open .dropmenu{ display: block; }

.submenu{ position: relative; }

/* botão ano */
.subbtn{
  width: 100%;
  text-align: left;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 10px 10px;
  border-radius: 12px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}
.subbtn:hover{ background: rgba(255,255,255,.10); }

/* ===== DESKTOP: meses SEMPRE abrem pra ESQUERDA e sem gap ===== */
@media (min-width: 781px){
  .subpanel{
    display: none;
    position: absolute;
    top: 0;

    right: 100%;   /* colado no menu (sem calc + 10px) */
    left: auto;

    min-width: 220px;
    padding: 10px;
    border-radius: 16px;

    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.62);
    backdrop-filter: blur(10px);
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
    z-index: 10000;
  }

  /* cria uma "ponte" de hover pra não fechar quando vai pro subpanel */
  .submenu{
    padding-right: 10px;
  }

  /* Desktop abre por hover (não depende de JS) */
  #pcDropdown:hover .dropmenu{
    display: block !important;
  }
  #pcDropdown .submenu:hover .subpanel{
    display: block !important;
  }
}

/* ainda permite abrir por JS (mobile) */
.submenu.open .subpanel{ display: block; }

.subpanel a{
  display: block;
  padding: 9px 10px;
  border-radius: 12px;
  opacity: .92;
}
.subpanel a:hover{ background: rgba(255,255,255,.10); }

/* ========= MOBILE ========= */
@media (max-width: 780px){
  .topnav{
    left: 10px; right: 10px; top: 10px;
    padding: 8px 10px;

    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }

  /* menu colapsável (abre com ☰ Menu) */
  .navlinks{
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding-top: 6px;
  }
  .topnav.menu-open .navlinks{ display: flex; }

  .navlinks > a, .dropbtn{
    width: 100%;
    text-align: left;
  }

  .dropmenu{
    position: static;
    display: none;
    min-width: unset;
    margin-top: 6px;

    right: auto;
    left: auto;
  }
  .dropdown.open .dropmenu{ display: block; }

  /* meses no mobile: abre embaixo */
  .subpanel{
    position: static;
    display: none;
    margin-top: 6px;

    left: auto;
    right: auto;

    box-shadow: none;
    background: rgba(255,255,255,.06);
  }
  .submenu.open .subpanel{ display: block; }

  /* ajustes gerais mobile */
  .container{
    min-height: auto;
    padding: 86px 14px 18px;
    justify-content: flex-start;
  }

  .logo img{
    max-width: 92vw;
    max-height: 210px;
  }
}

/* telas baixas */
@media (max-height: 720px){
  .container{ justify-content: flex-start; }
}

.button.button-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.button.button-icon .btn-ico{
  width: 50px;
  height: 50px;
  object-fit: contain;
  display: block;
  flex: 0 0 50px;
}

/* ===== DESKTOP: hover estável (sem sumir ao mover o mouse) ===== */
@media (min-width: 781px){

  /* garante contexto */
  .topnav .dropdown{ position: relative; }

  /* o menu principal abre ao passar o mouse no bloco inteiro */
  .topnav .dropdown:hover > .dropmenu,
  .topnav .dropdown:focus-within > .dropmenu{
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  /* dropmenu sempre “grudado” e com área maior */
  .topnav .dropmenu{
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 260px;
    z-index: 9999;

    display: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    pointer-events: none;

    /* importante: evita quebrar hover */
    padding-top: 10px; /* cria espaço interno */
  }

  /* “PONTE” invisível entre o botão e o dropmenu (remove o gap do hover) */
  .topnav .dropdown::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:100%;
    height:14px;      /* aumenta se ainda estiver difícil */
  }

  /* ===== SUBMENU (ano) abre ao passar o mouse no item ===== */
  .topnav .submenu{ position: relative; }

  .topnav .submenu:hover > .subpanel,
  .topnav .submenu:focus-within > .subpanel{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    transform: translateX(0) !important;
    pointer-events:auto !important;
  }

  .topnav .subpanel{
    position:absolute;
    top:0;
    left: calc(100% + 6px);
    min-width: 230px;
    z-index: 10000;

    display:none;
    opacity:0;
    visibility:hidden;
    transform: translateX(6px);
    pointer-events:none;
  }

  /* Outra “ponte” invisível entre o item do ano e a lista de meses */
  .topnav .submenu::after{
    content:"";
    position:absolute;
    top:0;
    left:100%;
    width:14px;       /* aumenta se necessário */
    height:100%;
  }
}

/* ===== DESKTOP: submenu abre para ESQUERDA (evita sair da tela) ===== */
@media (min-width: 781px){

  .topnav .submenu{ position: relative; }

  /* abre o painel do ano */
  .topnav .submenu:hover > .subpanel,
  .topnav .submenu:focus-within > .subpanel{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    transform: translateX(0) !important;
    pointer-events:auto !important;
  }

  /* SUBPANEL À ESQUERDA */
  .topnav .subpanel{
    position:absolute;
    top:0;
    left:auto !important;
    right: calc(100% + 6px);   /* <-- abre pra esquerda */
    min-width: 230px;
    z-index: 10000;

    display:none;
    opacity:0;
    visibility:hidden;
    transform: translateX(-6px);
    pointer-events:none;
  }

  /* “ponte” invisível entre item do ano e subpanel (lado esquerdo) */
  .topnav .submenu::after{
    content:"";
    position:absolute;
    top:0;
    right:100%;     /* <-- ponte pra esquerda */
    width:18px;     /* ajuste se precisar */
    height:100%;
  }
}