/* ==========================================================================
   UpMobb — Componentes
   Pecas reutilizaveis: botoes, cards, selos, cabecalho, rodape, formularios.
   ========================================================================== */

/* --- Botoes ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: 0.8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--raio-full);
  font-family: var(--fonte-texto);
  font-size: var(--t-sm);
  font-weight: var(--peso-semi);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--rapida), color var(--rapida),
              border-color var(--rapida), transform var(--rapida),
              box-shadow var(--rapida);
}

.btn:active { transform: translateY(1px); }

.btn svg { width: 1.1em; height: 1.1em; flex-shrink: 0; }

.btn-primario {
  background: var(--marca-500);
  color: var(--branco);
  box-shadow: var(--sombra-marca);
}

.btn-primario:hover {
  background: var(--marca-600);
  color: var(--branco);
  box-shadow: 0 16px 40px rgba(0, 68, 146, 0.34);
}

.btn-acento {
  background: var(--acento-500);
  color: var(--branco);
  box-shadow: 0 12px 32px rgba(255, 122, 26, 0.3);
}

.btn-acento:hover { background: var(--acento-600); color: var(--branco); }

.btn-contorno {
  background: transparent;
  color: var(--marca-500);
  border-color: var(--borda-forte);
}

.btn-contorno:hover {
  border-color: var(--marca-500);
  background: var(--marca-50);
  color: var(--marca-600);
}

.btn-fantasma {
  background: transparent;
  color: var(--texto);
  border-color: transparent;
}

.btn-fantasma:hover { background: var(--tinta-100); color: var(--tinta-900); }

/* Variantes para uso sobre fundo escuro ou azul */
.btn-claro {
  background: var(--branco);
  color: var(--marca-600);
}

.btn-claro:hover { background: var(--marca-50); color: var(--marca-700); }

.btn-contorno-claro {
  background: transparent;
  color: var(--branco);
  border-color: rgba(255, 255, 255, 0.4);
}

.btn-contorno-claro:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--branco);
  color: var(--branco);
}

.btn-lg { padding: 1rem 2rem; font-size: var(--t-base); }
.btn-sm { padding: 0.55rem 1.1rem; font-size: var(--t-xs); }
.btn-bloco { display: flex; width: 100%; }

/* Link com seta que avanca no hover */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-weight: var(--peso-semi);
  font-size: var(--t-sm);
}

.link-seta svg {
  width: 1.05em;
  height: 1.05em;
  transition: transform var(--rapida);
}

.link-seta:hover svg { transform: translateX(4px); }

/* --- Selos e etiquetas -------------------------------------------------- */

.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0.35rem 0.85rem;
  border-radius: var(--raio-full);
  background: var(--marca-50);
  color: var(--marca-600);
  font-size: var(--t-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.selo-acento { background: var(--acento-100); color: var(--acento-600); }
.selo-claro   { background: rgba(255, 255, 255, 0.14); color: var(--branco); }
.selo-neutro  { background: var(--tinta-100); color: var(--tinta-600); }

/* Rotulo curto acima do titulo da secao ("EXATIDAO", "FURACOES"...) */
.rotulo {
  display: block;
  margin-bottom: var(--e-3);
  font-family: var(--fonte-titulo);
  font-size: var(--t-xs);
  font-weight: var(--peso-extra);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--marca-500);
}

.secao-escura .rotulo,
.secao-marca .rotulo { color: var(--acento-400); }

/* --- Cabecalho de secao ------------------------------------------------- */

.cabecalho-secao { max-width: 720px; margin-bottom: var(--e-12); }
.cabecalho-secao.centro { margin-inline: auto; text-align: center; }
.cabecalho-secao p {
  margin-top: var(--e-4);
  font-size: var(--t-lg);
  color: var(--texto-suave);
  line-height: 1.7;
}

.secao-escura .cabecalho-secao p,
.secao-marca .cabecalho-secao p { color: rgba(255, 255, 255, 0.78); }

/* --- Cards -------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  padding: var(--e-8);
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  transition: transform var(--media), box-shadow var(--media),
              border-color var(--media);
}

.card-elevado { box-shadow: var(--sombra); border-color: transparent; }

.card-interativo:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-lg);
  border-color: var(--marca-200);
}

.card h3 { font-size: var(--t-xl); margin-bottom: var(--e-3); }
.card p  { color: var(--texto-suave); }
.card .link-seta { margin-top: auto; padding-top: var(--e-5); }

/* Icone quadrado arredondado no topo do card */
.card-icone {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--e-5);
  border-radius: var(--raio-md);
  background: var(--marca-50);
  color: var(--marca-500);
  flex-shrink: 0;
}

.card-icone svg { width: 26px; height: 26px; }
.card-icone.acento { background: var(--acento-100); color: var(--acento-600); }
.card-icone.solido { background: var(--marca-500); color: var(--branco); }

/* Card sobre fundo escuro */
.card-escuro {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.78);
}

.card-escuro h3 { color: var(--branco); }
.card-escuro p  { color: rgba(255, 255, 255, 0.72); }
.card-escuro .card-icone { background: rgba(255, 255, 255, 0.1); color: var(--branco); }
.card-escuro.card-interativo:hover { border-color: rgba(255, 255, 255, 0.3); }

/* Card com faixa colorida no topo, para as tres solucoes */
.card-solucao { position: relative; overflow: hidden; }

.card-solucao::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--marca-500), var(--marca-300));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--lenta);
}

.card-solucao:hover::before { transform: scaleX(1); }

/* --- Lista de checks ---------------------------------------------------- */

.lista-check { display: flex; flex-direction: column; gap: var(--e-3); }

.lista-check li {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  color: var(--texto-suave);
  line-height: 1.6;
}

.lista-check li::before {
  content: '';
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: var(--raio-full);
  background: var(--marca-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004492' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
}

.secao-escura .lista-check li,
.secao-marca .lista-check li { color: rgba(255, 255, 255, 0.8); }

.secao-escura .lista-check li::before,
.secao-marca .lista-check li::before {
  background-color: rgba(255, 255, 255, 0.14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* --- Cabecalho / navegacao ---------------------------------------------- */

.cabecalho {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-cabecalho);
  height: var(--altura-cabecalho);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--media), box-shadow var(--media),
              background var(--media);
}

/* Classe aplicada por JS depois de rolar alguns pixels */
.cabecalho.rolado {
  border-bottom-color: var(--borda);
  box-shadow: var(--sombra-sm);
  background: rgba(255, 255, 255, 0.96);
}

.cabecalho-interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-6);
  height: 100%;
}

.marca { display: flex; align-items: center; flex-shrink: 0; }
.marca img { height: 30px; width: auto; }

.nav-principal { display: flex; align-items: center; gap: var(--e-1); }

.nav-item { position: relative; }

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  padding: 0.6rem 0.9rem;
  border-radius: var(--raio);
  color: var(--tinta-700);
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--rapida), background var(--rapida);
}

.nav-link:hover { color: var(--marca-500); background: var(--marca-50); }

/* Pagina atual */
.nav-link[aria-current='page'] {
  color: var(--marca-500);
  font-weight: var(--peso-semi);
}

.nav-link .chevron {
  width: 14px;
  height: 14px;
  transition: transform var(--rapida);
}

.nav-item[data-aberto='true'] .nav-link .chevron { transform: rotate(180deg); }

.acoes-cabecalho { display: flex; align-items: center; gap: var(--e-3); }

/* Menu suspenso (mega-menu de Solucoes) */
.submenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  translate: -50% 0;
  min-width: 460px;
  padding: var(--e-4);
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--media), transform var(--media), visibility var(--media);
}

.nav-item[data-aberto='true'] .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.submenu-grade { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }

.submenu-link {
  display: flex;
  gap: var(--e-3);
  padding: var(--e-3);
  border-radius: var(--raio);
  transition: background var(--rapida);
}

.submenu-link:hover { background: var(--marca-50); }

.submenu-icone {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--raio-sm);
  background: var(--marca-50);
  color: var(--marca-500);
}

.submenu-icone svg { width: 19px; height: 19px; }
.submenu-link:hover .submenu-icone { background: var(--marca-500); color: var(--branco); }

.submenu-titulo {
  display: block;
  font-size: var(--t-sm);
  font-weight: var(--peso-semi);
  color: var(--tinta-900);
  line-height: 1.3;
}

.submenu-desc {
  display: block;
  margin-top: 2px;
  font-size: var(--t-xs);
  color: var(--texto-fraco);
  line-height: 1.45;
}

.submenu-rodape {
  margin-top: var(--e-3);
  padding-top: var(--e-3);
  border-top: 1px solid var(--borda);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-4);
  padding-inline: var(--e-3);
  font-size: var(--t-xs);
  color: var(--texto-fraco);
}

/* Botao hamburguer: so aparece no mobile (ver responsivo.css) */
.btn-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: none;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  cursor: pointer;
  color: var(--tinta-800);
}

.btn-menu svg { width: 22px; height: 22px; }
.btn-menu .icone-fechar { display: none; }
.btn-menu[aria-expanded='true'] .icone-abrir  { display: none; }
.btn-menu[aria-expanded='true'] .icone-fechar { display: block; }

/* Painel de navegacao mobile */
.nav-mobile {
  position: fixed;
  top: var(--altura-cabecalho);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-menu);
  padding: var(--e-6) var(--gutter) var(--e-12);
  background: var(--branco);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--lenta), visibility var(--lenta);
}

.nav-mobile[data-aberto='true'] { transform: translateX(0); visibility: visible; }

.nav-mobile-lista { display: flex; flex-direction: column; }

.nav-mobile-link {
  display: block;
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--borda);
  font-family: var(--fonte-titulo);
  font-size: var(--t-lg);
  font-weight: var(--peso-semi);
  color: var(--tinta-800);
}

.nav-mobile-link:hover { color: var(--marca-500); }

.nav-mobile-sub {
  padding: var(--e-2) 0 var(--e-4) var(--e-4);
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.nav-mobile-sub a { font-size: var(--t-sm); color: var(--texto-suave); }
.nav-mobile-sub a:hover { color: var(--marca-500); }

.nav-mobile-acoes {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin-top: var(--e-8);
}

/* Trava a rolagem do body enquanto o menu mobile esta aberto */
body.menu-aberto { overflow: hidden; }

/* --- Acordeao (FAQ) ----------------------------------------------------- */

.acordeao { display: flex; flex-direction: column; gap: var(--e-3); }

.acordeao-item {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  overflow: hidden;
  transition: border-color var(--rapida), box-shadow var(--rapida);
}

.acordeao-item[data-aberto='true'] {
  border-color: var(--marca-200);
  box-shadow: var(--sombra);
}

.acordeao-gatilho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  width: 100%;
  padding: var(--e-5) var(--e-6);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--fonte-titulo);
  font-size: var(--t-base);
  font-weight: var(--peso-semi);
  color: var(--tinta-900);
  transition: color var(--rapida);
}

.acordeao-gatilho:hover { color: var(--marca-500); }

.acordeao-gatilho .icone-mais {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--marca-500);
  transition: transform var(--media);
}

.acordeao-item[data-aberto='true'] .icone-mais { transform: rotate(45deg); }

/* A altura e calculada por JS para permitir a transicao */
.acordeao-corpo {
  height: 0;
  overflow: hidden;
  transition: height var(--media);
}

.acordeao-conteudo {
  padding: 0 var(--e-6) var(--e-5);
  color: var(--texto-suave);
  line-height: 1.7;
}

/* --- Abas --------------------------------------------------------------- */

.abas-lista {
  display: flex;
  gap: var(--e-2);
  flex-wrap: wrap;
  padding: var(--e-2);
  background: var(--tinta-100);
  border-radius: var(--raio-full);
  width: fit-content;
  max-width: 100%;
}

.aba-btn {
  padding: 0.6rem 1.35rem;
  border: none;
  border-radius: var(--raio-full);
  background: transparent;
  color: var(--texto-suave);
  font-size: var(--t-sm);
  font-weight: var(--peso-semi);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--rapida), color var(--rapida);
}

.aba-btn:hover { color: var(--tinta-900); }

.aba-btn[aria-selected='true'] {
  background: var(--branco);
  color: var(--marca-500);
  box-shadow: var(--sombra-sm);
}

.aba-painel[hidden] { display: none; }

/* --- Formularios -------------------------------------------------------- */

.campo { display: flex; flex-direction: column; gap: var(--e-2); }

.campo label {
  font-size: var(--t-sm);
  font-weight: var(--peso-semi);
  color: var(--tinta-800);
}

.campo .obrigatorio { color: var(--erro); }

.campo input,
.campo select,
.campo textarea {
  padding: 0.8rem 1rem;
  background: var(--branco);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  font-size: var(--t-sm);
  transition: border-color var(--rapida), box-shadow var(--rapida);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--marca-500);
  box-shadow: 0 0 0 3px var(--marca-100);
}

.campo textarea { resize: vertical; min-height: 130px; }

.campo-ajuda { font-size: var(--t-xs); color: var(--texto-fraco); }

.campo-erro {
  font-size: var(--t-xs);
  color: var(--erro);
  font-weight: var(--peso-medio);
}

.campo input[aria-invalid='true'],
.campo textarea[aria-invalid='true'] { border-color: var(--erro); }

/* --- Rodape ------------------------------------------------------------- */

.rodape {
  background: var(--marca-900);
  color: rgba(255, 255, 255, 0.7);
  padding-top: var(--e-20);
}

.rodape h4 {
  margin-bottom: var(--e-5);
  font-size: var(--t-sm);
  font-weight: var(--peso-forte);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--branco);
}

.rodape-grade {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: var(--e-10) var(--e-8);
  padding-bottom: var(--e-16);
}

/* Sem altura fixa: a largura manda e a altura vem do `height: auto` do reset,
   preservando a proporcao original do arquivo (550x206). */
.rodape-marca img { width: 170px; margin-bottom: var(--e-5); }

.rodape-marca p {
  font-size: var(--t-sm);
  line-height: 1.75;
  max-width: 34ch;
  color: rgba(255, 255, 255, 0.62);
}

.rodape-lista { display: flex; flex-direction: column; gap: var(--e-3); }

.rodape-lista a {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--t-sm);
  transition: color var(--rapida);
}

.rodape-lista a:hover { color: var(--branco); }

.rodape-contato {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin-top: var(--e-6);
}

.rodape-contato a {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--t-sm);
}

.rodape-contato a:hover { color: var(--branco); }
.rodape-contato svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--marca-300); }

.redes { display: flex; gap: var(--e-3); margin-top: var(--e-6); }

.redes a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--raio-full);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  transition: background var(--rapida), color var(--rapida), transform var(--rapida);
}

.redes a:hover {
  background: var(--marca-500);
  color: var(--branco);
  transform: translateY(-2px);
}

.redes svg { width: 18px; height: 18px; }

.rodape-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--e-4);
  padding-block: var(--e-6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, 0.5);
}

.rodape-base a { color: rgba(255, 255, 255, 0.6); }
.rodape-base a:hover { color: var(--branco); }
.rodape-legal { display: flex; gap: var(--e-5); flex-wrap: wrap; }

/* --- Botao flutuante do WhatsApp ---------------------------------------- */

.whatsapp-flutuante {
  position: fixed;
  right: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  z-index: var(--z-suspenso);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--raio-full);
  background: #25d366;
  color: var(--branco);
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
  transition: transform var(--media), box-shadow var(--media);
}

.whatsapp-flutuante:hover {
  transform: scale(1.08);
  color: var(--branco);
  box-shadow: 0 14px 38px rgba(37, 211, 102, 0.52);
}

.whatsapp-flutuante svg { width: 28px; height: 28px; }

/* --- Revelacao ao rolar -------------------------------------------------
   O elemento entra deslocado e o JS adiciona .visivel quando ele
   aparece na viewport. Sem JS, o CSS de fallback em no-js mantem tudo
   visivel (ver principal.js, que remove a classe .sem-js do html). */

.revelar {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--lenta), transform var(--lenta);
}

.revelar.visivel { opacity: 1; transform: none; }

html.sem-js .revelar { opacity: 1; transform: none; }