/* ==========================================================================
   ORGANIZACAO DO ARQUIVO: topo-portfolio.css
   AUTOR: Marcílio Souza
   SECAO: Barra superior fixa, busca, atalhos e identidade do portfolio.
   Os comentarios abaixo identificam os blocos sem alterar o funcionamento.
   ========================================================================== */

/* Container geral da nova secao superior: fica acima do menu azul principal. */
.portfolio-topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 12;
  background: #ffffff;
  border-bottom: 1px solid rgba(6, 22, 47, 0.1);
  box-shadow: 0 10px 28px rgba(6, 22, 47, 0.12);
}

/* Faixa escura onde os links do portfolio passam da direita para a esquerda. */
.portfolio-topbar__ticker {
  overflow: hidden;
  background: linear-gradient(90deg, #0f172a 0%, #164e63 32%, #0f766e 68%, #1e3a8a 100%);
  color: #ffffff;
  border-bottom: 3px solid #22d3ee;
}

/* Trilho animado: contem duas listas iguais para criar movimento continuo. */
.portfolio-topbar__track {
  display: flex;
  width: max-content;
  animation: portfolioTicker 32s linear infinite;
}

/* Grupo de links repetido dentro da animacao. */
.portfolio-topbar__group {
  display: flex;
  align-items: center;
  gap: 2.8rem;
  padding: 0.8rem 1.4rem;
  font-size: 1.35rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Links da faixa animada. */
.portfolio-topbar__group a {
  color: #ffffff;
  text-decoration: none;
}

/* Efeito visual quando passa o mouse ou navega pelo teclado nos links animados. */
.portfolio-topbar__group a:hover,
.portfolio-topbar__group a:focus-visible {
  color: #a7f3d0;
}

/* Separador entre os links da faixa animada. */
.portfolio-topbar__group span {
  color: #67e8f9;
}

/* Area principal da nova secao: marca, busca, atendimento e login. */
.portfolio-topbar__main {
  min-height: 104px;
  height: 122px;
  display: grid;
  grid-template-columns: minmax(140px, 210px) minmax(280px, 1fr) auto;
  align-items: center;
  gap: 2.4rem;
  padding: 1.8rem 4rem;
}

/* Bloco da marca Marsouza / Meu Portfolio. */
.portfolio-brand {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: #1d4ed8;
  text-decoration: none;
  line-height: 1.05;
}

/* Icone circular que representa o portfolio. */
.portfolio-brand > i {
  width: 4.8rem;
  height: 4.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, #1d4ed8 0%, #0f766e 100%);
  border-radius: 50%;
  font-size: 2.5rem;
  box-shadow: 0 12px 24px rgba(29, 78, 216, 0.24);
}

/* Mantem o texto da marca organizado em duas linhas. */
.portfolio-brand__text,
.portfolio-brand__text strong,
.portfolio-brand__text span {
  display: block;
}

/* Nome principal da marca. */
.portfolio-brand__text strong {
  color: #e11d48;
  font-size: 2.2rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* Subtitulo abaixo do nome Marsouza. */
.portfolio-brand__text span {
  margin-top: 0.3rem;
  color: #be123c;
  font-size: 1.6rem;
  font-weight: 600;
}

/* Area central da busca: envolve campo e lista de resultados. */
.portfolio-search-wrap {
  position: relative;
  max-width: 900px;
  width: 100%;
  justify-self: center;
  z-index: 30;
}

/* Formulario de busca central. */
.portfolio-search {
  display: flex;
  align-items: center;
  width: 100%;
  border: 2px solid #1d2b73;
  border-radius: 999px;
  background: #f8fafc;
  overflow: hidden;
}

/* Campo onde o usuario digita a pesquisa. */
.portfolio-search input {
  width: 100%;
  height: 4.8rem;
  border: 0;
  outline: 0;
  padding: 0 1.9rem;
  background: transparent;
  color: #1e293b;
  font-size: 1.5rem;
}

/* Texto de exemplo dentro do campo de busca. */
.portfolio-search input::placeholder {
  color: #1d2b73;
  opacity: 0.9;
}

/* Oculta o X nativo para usar um botao vermelho consistente no navegador. */
.portfolio-search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}

/* X proprio: aparece com texto e limpa o campo por meio do JavaScript. */
.portfolio-search .portfolio-search-clear {
  width: 3.8rem;
  flex: 0 0 3.8rem;
  color: #e11d48;
  font-size: 1.75rem;
}

.portfolio-search .portfolio-search-clear[hidden] {
  display: none;
}

.portfolio-search .portfolio-search-clear:hover,
.portfolio-search .portfolio-search-clear:focus-visible {
  color: #be123c;
  transform: scale(1.1);
}

/* Botao com icone de lupa do campo de busca. */
.portfolio-search button {
  width: 5.4rem;
  height: 4.8rem;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #e11d48;
  cursor: pointer;
  font-size: 2.2rem;
}

/* Efeito da lupa ao passar o mouse ou focar pelo teclado. */
.portfolio-search button:hover,
.portfolio-search button:focus-visible {
  color: #be123c;
}

/* Caixa suspensa com os resultados vindos do banco de dados. */
.portfolio-search-results {
  position: absolute;
  top: calc(100% + 0.8rem);
  left: 0;
  right: 0;
  display: grid;
  gap: 0.7rem;
  padding: 0.9rem;
  background: #ffffff;
  border: 1px solid rgba(29, 43, 115, 0.18);
  border-radius: 12px;
  box-shadow: 0 18px 42px rgba(6, 22, 47, 0.22);
  z-index: 2147483008;
}

.portfolio-search-results[hidden] {
  display: none;
}

.portfolio-search-result,
.portfolio-search-message {
  width: 100%;
  border: 0;
  border-radius: 9px;
  padding: 1rem 1.2rem;
  text-align: left;
  font: inherit;
}

.portfolio-search-result {
  display: grid;
  gap: 0.28rem;
  color: #172554;
  background: #eff6ff;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.portfolio-search-result:hover,
.portfolio-search-result:focus-visible {
  color: #ffffff;
  background: linear-gradient(135deg, #1d4ed8, #0f766e);
  box-shadow: 0 12px 24px rgba(29, 78, 216, 0.24);
  outline: none;
  transform: translateY(-2px);
}

.portfolio-search-result__category {
  color: #0f766e;
  font-size: 1.08rem;
  font-weight: 900;
  text-transform: uppercase;
}

.portfolio-search-result:hover .portfolio-search-result__category,
.portfolio-search-result:focus-visible .portfolio-search-result__category {
  color: #a7f3d0;
}

.portfolio-search-result strong {
  font-size: 1.35rem;
}

.portfolio-search-result__description,
.portfolio-search-message {
  color: #475569;
  font-size: 1.18rem;
  line-height: 1.45;
}

.portfolio-search-result:hover .portfolio-search-result__description,
.portfolio-search-result:focus-visible .portfolio-search-result__description {
  color: #e0f2fe;
}

.portfolio-search-message {
  background: #f8fafc;
  border: 1px dashed rgba(29, 43, 115, 0.22);
}

.portfolio-search-message.is-loading {
  color: #1d4ed8;
}

.portfolio-search-message.is-error {
  color: #be123c;
  background: #fff1f2;
}

/* Agrupa os menus Atendimento e Login. */
.portfolio-actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

/* Cada item que possui submenu suspenso. */
.portfolio-action-menu {
  position: relative;
}

/* Link principal do menu suspenso, com icone, texto e seta. */
.portfolio-action {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  column-gap: 0.8rem;
  min-height: 4.8rem;
  padding: 0 1.6rem;
  color: #ffffff;
  background: linear-gradient(135deg, #123f78 0%, #0f766e 100%);
  border: 1px solid rgba(14, 116, 144, 0.22);
  border-radius: 12px;
  box-shadow: 0 12px 26px rgba(15, 118, 110, 0.18);
  text-decoration: none;
  font-size: 1.35rem;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

/* Icones principais de Atendimento e Login. */
.portfolio-action i {
  color: #cffafe;
  font-size: 2.25rem;
}

/* Seta que indica a abertura do submenu. */
.portfolio-action .portfolio-action__arrow {
  color: #a7f3d0;
  font-size: 1.25rem;
  transition: transform 0.2s ease;
}

/* Cor do item principal no hover/foco. */
.portfolio-action:hover,
.portfolio-action:focus-visible {
  color: #ffffff;
  transform: translateY(-3px);
  filter: brightness(1.08);
  box-shadow: 0 17px 32px rgba(15, 118, 110, 0.28);
  outline: none;
}

.portfolio-action:focus-visible {
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.24), 0 17px 32px rgba(15, 118, 110, 0.28);
}

/* Gira a seta quando o submenu esta aberto. */
.portfolio-action-menu:hover .portfolio-action__arrow,
.portfolio-action-menu:focus-within .portfolio-action__arrow {
  transform: rotate(180deg);
}

/* Caixa suspensa que aparece abaixo de Atendimento e Login. */
.portfolio-action-dropdown {
  position: absolute;
  top: calc(100% + 0.8rem);
  left: 50%;
  min-width: 160px;
  padding: 0.8rem;
  display: grid;
  gap: 0.4rem;
  background: #ffffff;
  border: 1px solid rgba(29, 43, 115, 0.16);
  border-radius: 8px;
  box-shadow: 0 18px 35px rgba(6, 22, 47, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 20;
}

/* Area invisivel que evita o submenu fechar ao mover o mouse para baixo. */
.portfolio-action-dropdown::before {
  content: "";
  position: absolute;
  top: -0.9rem;
  left: 0;
  width: 100%;
  height: 0.9rem;
}

/* Links internos do submenu. */
.portfolio-action-dropdown a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  color: #172554;
  text-decoration: none;
  font-size: 1.28rem;
  font-weight: 700;
  border-radius: 6px;
  white-space: nowrap;
}

/* Icones pequenos dentro do submenu. */
.portfolio-action-dropdown a i {
  color: #2563eb;
  font-size: 1.45rem;
}

/* Estado hover/foco dos links do submenu. */
.portfolio-action-dropdown a:hover,
.portfolio-action-dropdown a:focus-visible {
  color: #ffffff;
  background: #1d4ed8;
}

/* Mantem o icone branco junto com o texto no hover/foco. */
.portfolio-action-dropdown a:hover i,
.portfolio-action-dropdown a:focus-visible i {
  color: #ffffff;
}

/* Mostra o submenu ao passar o mouse ou navegar pelo teclado. */
.portfolio-action-menu:hover .portfolio-action-dropdown,
.portfolio-action-menu:focus-within .portfolio-action-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* Desktop: nivela os submenus de Atendimento e Login com o topo do menu horizontal azul. */
@media only screen and (min-width: 769px) {
  .portfolio-action-dropdown {
    top: calc(100% + 4.2rem);
  }

  /* Mantem o hover ativo no percurso maior entre o botao e o submenu alinhado. */
  .portfolio-action-dropdown::before {
    top: -4.3rem;
    height: 4.3rem;
  }
}

/* Cria espaco no topo da pagina para as duas barras fixas nao cobrirem o conteudo. */
body {
  margin-top: 0;
  padding-top: 246px;
}

/* Posiciona o menu azul principal logo abaixo da nova secao superior. */
body .navbar {
  top: 161px;
}

/* Remove o espaco branco acima do banner Seja Bem Vindo. */
body section.topo-banner {
  margin-top: 0;
}

/* Propaganda de abertura do novo site da NG Acessoria. */
.ng-site-promo {
  position: fixed;
  inset: 0;
  isolation: isolate;
  z-index: 2147482500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background:
    radial-gradient(circle at 18% 28%, rgba(245, 210, 130, 0.34), transparent 22%),
    radial-gradient(circle at 78% 64%, rgba(34, 211, 238, 0.22), transparent 24%),
    rgba(4, 20, 24, 0.62);
  backdrop-filter: blur(7px);
  overflow: hidden;
  animation: ngPromoBackdropIn 0.55s ease both;
}

.ng-site-promo[hidden] {
  display: none;
}

.ng-site-promo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.2) 45%, transparent 62%);
  transform: translateX(-110%);
  animation: ngPromoShine 5.5s ease-in-out infinite;
}

.ng-site-promo.is-hiding {
  animation: ngPromoBackdropOut 0.42s ease both;
  pointer-events: none;
}

.ng-site-promo__card {
  position: relative;
  width: min(760px, 100%);
  border: 1px solid rgba(245, 210, 130, 0.55);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(4, 58, 49, 0.96), rgba(8, 83, 76, 0.94)),
    radial-gradient(circle at 18% 28%, rgba(245, 210, 130, 0.28), transparent 30%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.36), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
  animation: ngPromoCardIn 0.68s cubic-bezier(0.2, 0.85, 0.28, 1.2) both;
}

.ng-site-promo--mcomp {
  background:
    radial-gradient(circle at 18% 28%, rgba(96, 165, 250, 0.3), transparent 22%),
    radial-gradient(circle at 78% 64%, rgba(245, 210, 130, 0.24), transparent 24%),
    rgba(8, 18, 36, 0.68);
}

.ng-site-promo--mcomp .ng-site-promo__card {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.97), rgba(30, 64, 175, 0.92)),
    radial-gradient(circle at 18% 28%, rgba(96, 165, 250, 0.26), transparent 30%);
  border-color: rgba(147, 197, 253, 0.6);
}

.ng-site-promo--mcomp .ng-site-promo__badge {
  color: #10233f;
  background: linear-gradient(135deg, #93c5fd, #ffffff);
  box-shadow: 0 14px 24px rgba(96, 165, 250, 0.22);
}

.ng-site-promo--mcomp .ng-site-promo__text strong {
  color: #dbeafe;
}

.ng-site-promo--mcomp .ng-site-promo__text small {
  color: #eef6ff;
}

.ng-site-promo--mcomp .ng-site-promo__button {
  color: #10233f;
  box-shadow: inset 0 0 0 3px rgba(147, 197, 253, 0.62), 0 16px 30px rgba(0, 0, 0, 0.16);
}

.ng-site-promo--mcomp .ng-site-promo__button i {
  color: #1d4ed8;
}

.ng-site-promo--mcomp .ng-site-promo__timer {
  background: linear-gradient(90deg, #93c5fd, #f5d282, #ffffff);
}

.ng-site-promo.is-hiding .ng-site-promo__card {
  animation: ngPromoCardOut 0.42s ease both;
}

.ng-site-promo__close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 2;
  width: 3.8rem;
  height: 3.8rem;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: rgba(5, 36, 34, 0.64);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.ng-site-promo__close:hover,
.ng-site-promo__close:focus-visible {
  background: #be123c;
  transform: rotate(90deg);
  outline: none;
}

.ng-site-promo__link {
  min-height: 19rem;
  padding: 3.2rem 3rem;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  gap: 1.25rem;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  transition: filter 0.25s ease;
}

.ng-site-promo__link:hover,
.ng-site-promo__link:focus-visible {
  color: #ffffff;
  filter: brightness(1.07);
  outline: none;
}

.ng-site-promo__badge,
.ng-site-promo__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  min-height: 4.8rem;
  border-radius: 999px;
  font-weight: 900;
  white-space: nowrap;
}

.ng-site-promo__badge {
  padding: 0 1.5rem;
  color: #073b34;
  background: linear-gradient(135deg, #f5d282, #fff3c4);
  font-size: 1.28rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 14px 24px rgba(245, 210, 130, 0.22);
}

.ng-site-promo__badge i {
  font-size: 1.7rem;
}

.ng-site-promo__text {
  display: grid;
  gap: 0.35rem;
}

.ng-site-promo__text strong {
  color: #fff8d9;
  font-family: 'Poppins', var(--font-family), sans-serif;
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
  text-shadow: 0 10px 24px rgba(0, 0, 0, 0.26);
}

.ng-site-promo__text small {
  color: #e5fff8;
  max-width: 58rem;
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.45;
}

.ng-site-promo__button {
  margin-top: 0.4rem;
  padding: 0 2.2rem;
  color: #073b34;
  background: #ffffff;
  font-size: 1.4rem;
  box-shadow: inset 0 0 0 3px rgba(245, 210, 130, 0.55), 0 16px 30px rgba(0, 0, 0, 0.16);
  transition: transform 0.25s ease, background 0.25s ease;
}

.ng-site-promo__button i {
  color: #0f766e;
  font-size: 1.9rem;
}

.ng-site-promo__link:hover .ng-site-promo__button,
.ng-site-promo__link:focus-visible .ng-site-promo__button {
  background: #fff3c4;
  transform: translateY(-2px);
}

.ng-site-promo__timer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #f5d282, #22d3ee, #ffffff);
  transform-origin: left;
  animation: ngPromoTimer 6s linear both;
}

/* Animacao horizontal da faixa de links. */
@keyframes portfolioTicker {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes ngPromoShine {
  0%,
  58% {
    transform: translateX(-110%);
  }

  100% {
    transform: translateX(110%);
  }
}

@keyframes ngPromoBackdropIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes ngPromoBackdropOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes ngPromoCardIn {
  from {
    opacity: 0;
    transform: translateY(32px) scale(0.94);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ngPromoCardOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(-18px) scale(0.96);
  }
}

@keyframes ngPromoTimer {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

/* Ajustes para telas medias, evitando que os submenus saiam da tela. */
@media only screen and (max-width: 1200px) {
  .portfolio-topbar__main {
    grid-template-columns: minmax(130px, 170px) minmax(260px, 1fr) auto;
    gap: 1.4rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .portfolio-actions {
    gap: 1.2rem;
  }

  .portfolio-action-dropdown {
    left: auto;
    right: 0;
    transform: translate(0, -8px);
  }

  .portfolio-action-menu:hover .portfolio-action-dropdown,
  .portfolio-action-menu:focus-within .portfolio-action-dropdown {
    transform: translate(0, 0);
  }
}

/* Ajustes para celular: a nova secao deixa de ser fixa e empilha os elementos. */
@media only screen and (max-width: 768px) {
  .portfolio-topbar {
    position: relative;
    z-index: 12;
    overflow: visible;
  }

  .portfolio-topbar:has(.portfolio-action-menu:hover),
  .portfolio-topbar:has(.portfolio-action-menu:focus-within) {
    z-index: 2147483005;
  }

  .portfolio-topbar__main,
  .portfolio-actions,
  .portfolio-action-menu {
    overflow: visible;
  }

  .portfolio-action-menu {
    z-index: 2147483006;
  }

  .portfolio-action-dropdown {
    z-index: 2147483007;
  }

  .portfolio-topbar__main {
    min-height: auto;
    height: auto;
    grid-template-columns: 1fr;
    gap: 1.3rem;
    padding: 1.6rem;
    text-align: center;
  }

  .portfolio-brand {
    justify-self: center;
  }

  .portfolio-search {
    max-width: 100%;
  }

  .portfolio-actions {
    justify-content: center;
    flex-wrap: wrap;
  }

  .portfolio-action-dropdown {
    left: 50%;
    right: auto;
    transform: translate(-50%, -8px);
  }

  .portfolio-action-menu:hover .portfolio-action-dropdown,
  .portfolio-action-menu:focus-within .portfolio-action-dropdown {
    transform: translate(-50%, 0);
  }

  body {
    margin-top: 0;
    padding-top: 0;
  }

  body .navbar {
    position: sticky;
    top: 0;
  }

  .ng-site-promo {
    padding: 1.2rem;
  }

  .ng-site-promo__link {
    min-height: 20rem;
    padding: 3.2rem 1.5rem 2.2rem;
  }

  .ng-site-promo__badge,
  .ng-site-promo__button {
    width: 100%;
    max-width: 28rem;
  }

  .ng-site-promo__text small {
    font-size: 1.3rem;
  }

  .navbar .navbar__content .navbar__mobile .mobile__links,
  .navbar .navbar__content .navbar__mobile.active .mobile__links,
  .navbar .navbar__content .navbar__mobile .mobile-menu-check:checked ~ .mobile__links {
    /* O menu aberto ocupa a altura disponivel da tela do celular. */
    top: 0 !important;
  }
}

/* Ajustes finais para celulares pequenos. */
@media only screen and (max-width: 480px) {
  .portfolio-topbar__group {
    gap: 1.8rem;
    font-size: 1.2rem;
  }

  .portfolio-brand > i {
    width: 4.2rem;
    height: 4.2rem;
    font-size: 2.2rem;
  }

  .portfolio-brand__text strong {
    font-size: 1.9rem;
  }

  .portfolio-brand__text span {
    font-size: 1.35rem;
  }

  .portfolio-search input {
    font-size: 1.35rem;
  }
}