/* =========================================
   1. DEFINIÇÕES GERAIS E RESET
   ========================================= */
:root {
    --cor-primaria-azul: #002D62;
    --cor-secundaria-laranja: #FF7F00;
    --cor-texto-principal: #333333;
    --fundo-claro: #FFFFFF;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Open Sans', sans-serif;
    color: var(--cor-texto-principal);
    background-color: var(--fundo-claro);
    line-height: 1.6;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; }

h1 { font-size: 3em; font-weight: 700; margin-bottom: 0.5em; color: var(--cor-primaria-azul); }
p { font-size: 1.1em; margin-bottom: 1em; }

/* =========================================
   2. CABEÇALHO (HEADER)
   ========================================= */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5em 5%;
    border-bottom: 1px solid #eee;
    background-color: #fff;
    position: relative;
}

.logo { display: flex; align-items: center; }
.logo img {
    height: 120px !important; 
    width: auto !important;
    min-height: 120px;
    display: block;
    transition: transform 0.3s;
}
.logo img:hover { transform: scale(1.05); }

.nav a {
    text-decoration: none;
    color: var(--cor-texto-principal);
    margin-left: 25px;
    font-weight: 400;
    transition: color 0.3s;
}
.nav a:hover { color: var(--cor-secundaria-laranja); }

.btn-cta-principal {
    width: 280px;
    display: inline-block;
    background-color: var(--cor-secundaria-laranja);
    color: #FFF;
    padding: 1em 2em;
    text-decoration: none;
    font-weight: 600;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s;
}
.btn-cta-principal:hover { background-color: #E66A00; transform: translateY(-2px); }

.btn-cta-nav {
    background-color: var(--cor-primaria-azul) !important;
    color: #FFF !important;
    padding: 0.5em 1.5em !important;
    border-radius: 3px;
    margin-left: 30px !important;
}
.btn-cta-nav:hover { background-color: var(--cor-secundaria-laranja) !important; }


.btn-cta-secundario {
    width: 280px;
    display:inline-block;
    border:2px solid #fff;
    color:#fff;
    padding:1em 2em;
    border-radius:5px;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}
.btn-cta-secundario:hover {
    background:rgba(255,255,255,0.15);
}

.link-esqueci {
    display: block;
    text-align: right;
    font-size: 0.9em;
    font-weight: 700;
    margin-top: 6px;
    text-decoration: none;
    color: var(--cor-primaria-azul);
}

.link-esqueci:hover {
    color: var(--cor-secundaria-laranja);
}


.page input{
    width:100%;
    padding:12px 14px;
    border:1px solid #dcdcdc;
    border-radius:6px;
    font-size:15px;
    margin-top:6px;
    margin-bottom:16px;
    transition:border 0.2s, box-shadow 0.2s;
}

.page input:focus{
    outline:none;
    border-color:#0B3A6F;
    box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}

.page label{
    font-size:14px;
    font-weight:600;
    color:#333;
}

.actions button{
    width:100%;
    padding:13px;
    border:none;
    border-radius:6px;
    background:#0B3A6F;
    color:white;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:background 0.2s;
}

.actions button:hover{
    background:#E66A00;
}

.link-esqueci{
    display:block;
    text-align:right;
    font-size:14px;
    color:#0B3A6F;
    text-decoration:none;
    margin-top:-8px;
    margin-bottom:20px;
}

.link-esqueci:hover{
    text-decoration:underline;
}

/* --- Tooltip “Em desenvolvimento” com tema dark --- */
.tool-card[data-dev="true"] { position: relative; }

/* Balão */
.tool-card[data-dev="true"]::after {
  content: attr(data-dev-text);
  position: absolute;
  left: 12px;
  bottom: calc(100% + 10px);
  z-index: 30;
  background: rgba(17, 24, 39, .92);           /* gray-900 com transparência */
  color: #e5e7eb;                               /* gray-200 */
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1;
  border-radius: 8px;
  border: 1px solid #334155;                    /* slate-700 */
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

/* Triângulo */
.tool-card[data-dev="true"]::before {
  content: "";
  position: absolute;
  left: 22px;
  bottom: calc(100% + 6px);
  z-index: 29;
  border: 6px solid transparent;
  border-top-color: rgba(17, 24, 39, .92);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
}

/* Mostrar ao passar o mouse ou focar via teclado */
.tool-card[data-dev="true"]:hover::after,
.tool-card[data-dev="true"]:hover::before,
.tool-card[data-dev="true"]:focus-visible::after,
.tool-card[data-dev="true"]:focus-visible::before {
  opacity: 1;
  transform: translateY(0);
}

/* Badge “Em desenvolvimento” no canto do card (opcional) */
.tool-card .dev-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #1f2937;       /* gray-800 */
  color: #fbbf24;            /* amber-400 */
  border: 1px solid #374151; /* gray-700 */
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
}

/* =========================================
   3. BANNERS (HERO) - PADRONIZADOS
   ========================================= */
.hero {
    /* Se quiser imagem de fundo, descomente abaixo e adicione img/banner-home.png */
    /* background-image: linear-gradient(rgba(0, 45, 98, 0.7), rgba(0, 45, 98, 0.7)), url('../img/banner-home.png'); */
    background: linear-gradient(135deg, rgba(0,45,98,0.9), rgba(255,127,0,0.7));
    background-size: cover;
    background-position: center;
    color: #FFF;
    text-align: center;
    padding: 120px 5% !important;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero h1 { color: #FFF; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.hero p  { font-size: 1.3em; max-width: 900px; margin: 0 auto; }

/* =========================================
   4. CONTEÚDO PADRÃO DAS PÁGINAS
   ========================================= */
.page {
    max-width: 720px;
    margin: 0 auto 60px auto;
    padding: 0 5%;
}
label{font-weight:600;display:block;margin:14px 0 6px}
input{width:100%;padding:12px;border:1px solid #ccc;border-radius:6px}
button{margin-top:18px;padding:12px 16px;background:var(--cor-primaria-azul);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:15px}
button:hover{background:#001a3b}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.center{text-align:center}
.success{padding:14px;border:1px solid #cfe9cc;background:#e6f6e8;color:#2e6b2f;border-radius:8px}
.error{padding:14px;border:1px solid #f3c0c0;background:#fde8e8;color:#7d1f1f;border-radius:8px}
.note{font-size:13px;color:#555}
.page .links a{color:var(--cor-primaria-azul);text-decoration:none}
.page .links a:hover{color:var(--cor-secundaria-laranja)}

.hero-actions{
    margin-top: 25px;
    display: flex;
    flex-direction: column;   /* força ficar um embaixo do outro */
    gap: 12px;
    align-items: center;
}

.hero-actions a{
    width: 260px;             /* mesmo tamanho */
    display: block;           /* impede ficar lado a lado */
    text-align: center;
}

/* =========================================
   5. RODAPÉ
   ========================================= */
.footer {
    background-color: var(--cor-primaria-azul);
    color: #DDD;
    padding: 30px 5%;
    font-size: 0.9em;
    text-align:center;
}

/* =========================================
   6. MENU MOBILE
   ========================================= */
.menu-toggle, .close-menu, .menu-overlay, .mobile-menu-header { display: none; }
@media (max-width: 768px) {
  .menu-toggle { display:block;background:none;border:none;font-size:2rem;color:var(--cor-primaria-azul);cursor:pointer }
  .nav {
    display:flex;flex-direction:column;position:fixed;top:0;left:-100%;
    width:80%;max-width:300px;height:100vh;background:#fff;
    box-shadow:2px 0 10px rgba(0,0,0,.2);align-items:flex-start;justify-content:flex-start;
    padding:20px;gap:0;transition:left .3s ease-in-out;z-index:1000;
  }
  .nav.active { left:0; }
  .mobile-menu-header {
    display:flex;justify-content:space-between;align-items:center;
    width:calc(100% + 40px);background:rgba(0,45,98,.1);
    margin:-20px -20px 20px -20px;padding:20px;border-bottom:1px solid #ddd;
  }
  .logo-mobile-inside { height: 50px !important; width: auto !important; }
  .close-menu { display:block;background:none;border:none;font-size:2rem;color:var(--cor-secundaria-laranja);cursor:pointer;padding:0 }
  .nav a{display:block;width:100%;padding:15px 0;border-bottom:1px solid #eee;margin-left:0;font-size:1.1em;color:var(--cor-primaria-azul)}
  .btn-cta-nav { margin-top: 20px; margin-left: 0 !important; width:100%; text-align:center; padding:12px !important; }
  .menu-overlay{ display:block; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5); z-index:999; opacity:0; visibility:hidden; transition:opacity .3s }
  .menu-overlay.active{ opacity:1; visibility:visible }
}