/* =====================================================================
   Hydrive — mesmo estilo do HybridUs Portal do Funcionário
   Paleta: cinzento, laranja e branco (com modo claro/escuro)
   ===================================================================== */

:root{
  --branco:#ffffff;
  --cinza-50:#f4f4f3;
  --cinza-100:#e7e6e3;
  --cinza-300:#c7c5c0;
  --cinza-500:#8b8983;
  --cinza-800:#2b2a27;
  --laranja:#e2711d;
  --laranja-escuro:#b85a12;

  --fundo:var(--cinza-50);
  --cartao:var(--branco);
  --linha:var(--cinza-100);
  --texto:var(--cinza-800);
  --texto-suave:var(--cinza-500);
  --accent:var(--laranja);
  --accent-escuro:var(--laranja-escuro);
  --atencao:var(--laranja-escuro);
  --radius:10px;
}
html[data-tema="escuro"]{
  --fundo:#201f1d;
  --cartao:#2a2926;
  --linha:#3c3a36;
  --texto:var(--branco);
  --texto-suave:#b3b0aa;
  --accent:var(--laranja);
  --accent-escuro:#f08a3c;
  --atencao:#f08a3c;
  color-scheme:dark;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:"Segoe UI", system-ui, -apple-system, sans-serif;
  background:var(--fundo);
  color:var(--texto);
  font-size:16px;
  line-height:1.5;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  transition:background .2s ease, color .2s ease;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}
a{color:var(--accent);}
img{max-width:100%;}
code{font-size:.88em; background:var(--fundo); border:1px solid var(--linha); border-radius:5px; padding:1px 5px;}

/* --- Cabeçalho comum --- */
header.cabecalho-site{
  padding:16px 16px;
  border-bottom:1px solid var(--linha);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  position:sticky;
  top:0;
  background:var(--fundo);
  z-index:10;
}
@media (min-width:700px){
  header.cabecalho-site{padding:20px 28px;}
}
.acoes-topo{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.acoes-topo .botao{padding:8px 14px; font-size:.85rem; min-height:38px;}

/* --- Marca do site: logótipo HybridUs + nome do produto --- */
.marca-site{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:0;
  text-decoration:none;
}
.marca-site img{height:28px; width:auto;}
.logotipo-hybridus{
  font-weight:700;
  font-size:1.08rem;
  color:var(--texto);
  text-decoration:none;
  white-space:nowrap;
}
.logotipo-hybridus .ponto-logo,
.letra-destaque{color:var(--accent);}
.nome-produto{
  font-size:.88rem;
  font-weight:600;
  color:var(--texto-suave);
  padding-left:10px;
  border-left:1px solid var(--linha);
  white-space:nowrap;
}

/* --- Interruptor claro/escuro --- */
.interruptor-tema{
  display:flex;
  align-items:center;
  gap:8px;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
  min-height:44px;
  -webkit-tap-highlight-color:transparent;
}
.interruptor-tema .trilho{
  width:46px;
  height:26px;
  border-radius:999px;
  background:var(--cinza-300);
  position:relative;
  transition:background .2s ease;
}
html[data-tema="escuro"] .interruptor-tema .trilho{background:var(--accent);}
.interruptor-tema .bola{
  position:absolute;
  top:3px;
  left:3px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--branco);
  transition:transform .2s ease;
}
html[data-tema="escuro"] .interruptor-tema .bola{transform:translateX(20px);}
.interruptor-tema .rotulo{font-size:.82rem; color:var(--texto-suave);}

/* --- Área de conteúdo --- */
main.conteudo{
  flex:1;
  width:100%;
  max-width:920px;
  margin:0 auto;
  padding:16px 16px 60px;
}
@media (min-width:700px){
  main.conteudo{padding:28px 24px 70px;}
}
main.conteudo > h1{font-size:1.5rem; margin:0 0 14px;}
.estreito{max-width:440px; margin:0 auto;}

/* --- Navegação por separadores (páginas autenticadas) --- */
nav.abas{
  display:flex;
  gap:6px;
  overflow-x:auto;
  margin-bottom:18px;
  border-bottom:1px solid var(--linha);
}
nav.abas a{
  display:inline-block;
  padding:10px 14px;
  font-size:.88rem;
  font-weight:600;
  color:var(--texto-suave);
  text-decoration:none;
  white-space:nowrap;
  border-bottom:2px solid transparent;
}
nav.abas a.ativa{
  color:var(--accent);
  border-bottom-color:var(--accent);
}

/* --- Cartões --- */
.card, .cartao{
  background:var(--cartao);
  border:1px solid var(--linha);
  border-radius:var(--radius);
  padding:18px;
  margin-bottom:20px;
}
@media (min-width:700px){
  .card, .cartao{padding:22px;}
}
.card h2, .cartao h2{
  font-size:0.9rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--texto-suave);
  margin:0 0 14px;
}
.cartao h1{font-size:1.4rem; margin:0 0 14px;}

/* --- Botões --- */
button, .botao{
  font:inherit;
  cursor:pointer;
  border-radius:8px;
  border:1px solid transparent;
  padding:12px 18px;
  font-weight:600;
  min-height:44px;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn-primary, .botao, button[type=submit]{background:var(--accent); color:var(--branco);}
.btn-primary:hover, .botao:hover, button[type=submit]:hover{background:var(--accent-escuro);}
.btn-secondary, .botao.secundario{background:transparent; border-color:var(--linha); color:var(--texto);}
.btn-secondary:hover, .botao.secundario:hover{background:var(--cartao);}
.botao.perigo{background:var(--atencao);}
.botao.pequeno{padding:6px 10px; font-size:.78rem; min-height:32px;}
button:disabled, .botao:disabled{opacity:.5; cursor:not-allowed;}
form button[type=submit]{margin-top:16px;}

/* --- Campos de formulário --- */
form label{
  display:block;
  font-size:.82rem;
  color:var(--texto-suave);
  margin:16px 0 5px;
}
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=tel], input[type=file], select, textarea{
  width:100%;
  padding:12px 12px;
  border:1px solid var(--linha);
  border-radius:7px;
  font:inherit;
  font-size:16px; /* evita zoom automático no iOS ao focar */
  color:var(--texto);
  background:var(--cartao);
  min-height:44px;
}
textarea{resize:vertical; font-family:inherit;}
select{
  -webkit-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238b8983'><path d='M5.5 7.5l4.5 4.5 4.5-4.5z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px;
  padding-right:34px;
}
input[type=file]{padding:9px 10px;}
input:focus, select:focus, textarea:focus{outline:2px solid var(--accent); outline-offset:-1px;}
form label.check, label.check{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:.92rem;
  color:var(--texto);
}
label.check input{margin-top:4px; accent-color:var(--accent); width:18px; height:18px; flex:none;}

/* --- Mensagens e textos de apoio --- */
.mensagem, .mensagem-sucesso{
  background:var(--fundo);
  border:1px solid var(--linha);
  border-left:3px solid var(--accent);
  padding:10px 14px;
  border-radius:6px;
  font-size:.88rem;
  margin:0 0 16px;
}
.mensagem.erro{border-left-color:var(--atencao); color:var(--atencao); font-weight:600;}
.suave, .aviso{color:var(--texto-suave); font-size:.9rem;}
.ajuda{color:var(--texto-suave); font-size:.85rem; margin:4px 0 8px; padding-left:20px;}
.ajuda li{margin:2px 0;}

/* --- Tabelas --- */
table{width:100%; border-collapse:collapse; font-size:.9rem;}
th, td{text-align:left; padding:10px 8px; border-bottom:1px solid var(--linha); vertical-align:middle;}
th{
  color:var(--texto-suave);
  font-weight:600;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.tabela-rolar{overflow-x:auto;}
td input[type=text], td select{min-height:38px; padding:8px 10px;}

/* --- Página inicial --- */
.pagina-inicial main.conteudo{max-width:none; padding:0;}
.banner{
  position:relative;
  min-height:calc(100vh - 66px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
  overflow:hidden;
  background:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 45%),
    radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 45%);
}
.banner .slide{max-width:680px; animation:surgir .6s ease;}
@keyframes surgir{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}
.banner h2{font-size:1.9rem; line-height:1.25; margin:0 0 14px; color:var(--texto);}
@media (min-width:700px){ .banner h2{font-size:2.6rem;} }
.banner p.subtexto{color:var(--texto-suave); font-size:1.05rem; margin:0 0 28px;}
.banner .cta{display:inline-flex; gap:12px; flex-wrap:wrap; justify-content:center;}
.banner .cta .botao{padding:14px 26px; font-size:1rem;}
.seta-scroll{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  color:var(--texto-suave); font-size:.8rem; text-decoration:none;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}

.explicacao{max-width:920px; margin:0 auto; padding:70px 20px 40px;}
.explicacao h3, .precos h3{font-size:1.5rem; margin:0 0 10px; text-align:center;}
.explicacao > p.lead, .precos .lead{
  text-align:center; color:var(--texto-suave); max-width:560px; margin:0 auto 40px; line-height:1.55;
}
.passos{display:grid; grid-template-columns:1fr; gap:20px; margin-bottom:50px;}
@media (min-width:700px){ .passos{grid-template-columns:repeat(3, 1fr);} }
.passos.quatro{grid-template-columns:1fr;}
@media (min-width:700px){ .passos.quatro{grid-template-columns:repeat(2, 1fr);} }
@media (min-width:980px){ .passos.quatro{grid-template-columns:repeat(4, 1fr);} }
.passo{background:var(--cartao); border:1px solid var(--linha); border-radius:var(--radius); padding:22px;}
.passo .numero{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background:var(--accent); color:var(--branco);
  font-weight:700; font-size:.9rem; margin-bottom:14px;
}
.passo h4{margin:0 0 8px; font-size:1.02rem;}
.passo p{margin:0; color:var(--texto-suave); font-size:.92rem; line-height:1.5;}

.precos{max-width:980px; margin:0 auto; padding:0 20px 80px; text-align:center;}
.grelha-precos{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:16px; text-align:left;}
.plano-preco{background:var(--cartao); border:1px solid var(--linha); border-radius:12px; padding:22px 20px; display:flex; flex-direction:column; gap:8px;}
.plano-preco.destaque{border:2px solid var(--accent);}
.plano-preco h4{margin:0; font-size:1.05rem; line-height:1.3; min-height:2.6em;}
.plano-preco .valor{font-size:1.9rem; font-weight:700; line-height:1.15; color:var(--accent);}
.plano-preco .valor small{display:block; margin-top:2px; font-size:.82rem; font-weight:400; color:var(--texto-suave);}
.plano-preco p{margin:0; color:var(--texto-suave); font-size:.9rem;}
.plano-preco form{margin-top:auto;}
.plano-preco .botao, .plano-preco button{margin-top:auto; width:100%;}

/* --- Assistente --- */
.assistente{text-align:center;}
.microfone{
  width:160px; height:160px; border-radius:50%; border:0; margin:24px auto;
  background:var(--accent); color:var(--branco); font-size:3.5rem;
  display:flex; align-items:center; justify-content:center;
}
.microfone:hover{background:var(--accent-escuro);}
.microfone.a-ouvir{animation:pulso 1.2s infinite;}
@keyframes pulso{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);}
  50%{box-shadow:0 0 0 22px transparent;}
}
.estado{color:var(--texto-suave); min-height:1.5em;}
.opcoes{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; align-items:center;}
.opcoes select{width:auto; min-width:180px;}
.opcoes label{margin:0;}
.conversa{text-align:left; margin-top:24px;}
.bolha{padding:10px 14px; border-radius:12px; margin:8px 0; max-width:85%; width:fit-content;}
.bolha.eu{background:var(--accent); color:var(--branco); margin-left:auto;}
.bolha.ia{background:var(--cartao); border:1px solid var(--linha);}
.escrever{display:flex; gap:8px; margin-top:16px;}
.escrever input{flex:1;}
.escrever button[type=submit]{margin-top:0;}

/* --- Textos legais --- */
.texto-legal{line-height:1.65;}
.texto-legal h1{font-size:1.7rem; margin:0 0 4px;}
.texto-legal h3{font-size:1.12rem; margin:30px 0 8px; color:var(--accent);}
.texto-legal p{font-size:.95rem;}

/* --- Rodapé: faixa escura fixa, independente do tema claro/escuro --- */
footer.rodape{
  background:#201f1d;
  padding:26px 20px;
  text-align:center;
  font-size:.85rem;
  color:#a7a49f;
  line-height:1.9;
}
footer.rodape a{color:var(--branco); font-weight:700; text-decoration:none; margin:0 8px;}
footer.rodape a:hover{text-decoration:underline;}

/* --- Aviso de cookies --- */
.aviso-cookies{
  position:fixed; left:16px; right:16px; bottom:16px; max-width:560px; margin:0 auto;
  background:var(--cartao); border:1px solid var(--linha); border-left:3px solid var(--accent);
  border-radius:var(--radius); padding:12px 16px;
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  box-shadow:0 10px 30px rgba(0,0,0,.18); z-index:60; font-size:.88rem;
}
.aviso-cookies[hidden]{display:none;}
.aviso-cookies p{margin:0;}

.qr{background:#fff; padding:12px; display:inline-block; border-radius:8px;}

/* O topo fixo não tapa o início das secções ao seguir links internos */
section[id]{scroll-margin-top:90px;}