/* ==========================================================================
   ORGANIZACAO DO ARQUIVO: portfolio.css
   AUTOR: Marcílio Souza
   SECAO: Galeria do portfolio, filtros, cartoes, botoes e responsividade.
   Os comentarios abaixo identificam os blocos sem alterar o funcionamento.
   ========================================================================== */

/* Secao Meu Portfolio */
section.portfolio {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 5rem;
  padding: 7rem 0 8rem;
  margin: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(210, 224, 121, 0.16), transparent 28%),
    radial-gradient(circle at 88% 82%, rgba(207, 79, 139, 0.16), transparent 30%),
    linear-gradient(135deg, #5d61a9 0%, #5a58a0 46%, #494780 100%);
}

section.portfolio::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 38%, rgba(255, 255, 255, 0.04));
  pointer-events: none;
}

/* Cabecalho da secao Portfolio */
.portfolio .interface {
  position: relative;
  z-index: 1;
  text-align: center;
}

.portfolio h2.titulo-section {
  position: relative;
  display: table;
  margin: 0 auto 2.4rem;
  padding-top: 1.6rem;
  color: #ffffff;
  font-family: 'Poppins', var(--font-family), sans-serif;
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
}

.portfolio h2.titulo-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 8rem;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue-btn1-color), var(--red-btn2-color), #d2e079);
  box-shadow: 0 8px 18px rgba(20, 20, 60, 0.22);
}

.portfolio h2.titulo-section span {
  color: #d2e079;
  font-size: inherit;
  font-weight: 700;
}

.portfolio p {
  max-width: 92rem;
  margin: 0 auto 3.6rem;
  color: #edf0ff;
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 3.2rem;
}

/* Filtros do portfolio: botoes de categoria acima dos cards. */
.portfolio-filter-wrap {
  position: relative;
  z-index: 1;
  margin: 0 auto 2.6rem;
}

.portfolio-filter-heading {
  display: grid;
  justify-items: start;
  gap: 0.45rem;
  margin-bottom: 1.6rem;
}

.portfolio-filter-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.16rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-family: 'Poppins', var(--font-family), sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 14px 30px rgba(20, 20, 60, 0.16);
}

.portfolio-filter-brand-mar {
  color: #d2e079;
  text-shadow: 0 0 18px rgba(210, 224, 121, 0.34);
}

.portfolio-filter-brand-souza {
  color: #ffffff;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.22);
}

.portfolio-filter-label {
  display: block;
  color: #ffffff;
  font-family: 'Poppins', var(--font-family), sans-serif;
  font-size: clamp(1.75rem, 2.6vw, 3.2rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-transform: uppercase;
  text-shadow: 0 12px 28px rgba(20, 20, 60, 0.28);
}

.portfolio-filter-label::after {
  content: "";
  display: block;
  width: min(18rem, 56vw);
  height: 4px;
  margin-top: 0.85rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #d2e079 0%, #f4c95d 42%, #ffffff 100%);
  box-shadow: 0 10px 24px rgba(20, 20, 60, 0.26);
}

.portfolio-filter-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(11rem, 1fr));
  gap: 1.6rem;
}

/* Botao de filtro: base discreta para combinar com o desenho da secao. */
.portfolio-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 4.8rem;
  padding: 0 1.8rem;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 12px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 14px 24px rgba(20, 20, 60, 0.16), 0 0 0 0 rgba(210, 224, 121, 0);
  transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

/* Hover dos filtros: destaque amarelo sem mudar a altura do botao. */
.portfolio-filter:hover,
.portfolio-filter:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(210, 224, 121, 0.95);
  color: #1d2351;
  background: linear-gradient(135deg, #d2e079 0%, #f4c95d 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.82), 0 20px 34px rgba(20, 20, 60, 0.24), 0 0 0 4px rgba(210, 224, 121, 0.14);
}

/* Estado ativo fica amarelo e alinhado com os demais filtros. */
.portfolio-filter.is-active {
  transform: none;
  border-color: rgba(210, 224, 121, 0.95);
  color: #1d2351;
  background: linear-gradient(135deg, #d2e079 0%, #f4c95d 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.82), 0 18px 32px rgba(20, 20, 60, 0.24);
}
.portfolio-filter:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 4px;
}

/* Grade dos projetos do portfolio */
.portfolio .portfolio-container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.4rem;
  margin-top: 0;
  perspective: 120rem;
}

/* Entrada dos projetos como uma vitrine em perspectiva. */
.portfolio.portfolio-reveal-ready .interface,
.portfolio.portfolio-reveal-ready .portfolio-container > a,
.portfolio.portfolio-reveal-ready .btn-mostra-mais {
  opacity: 0;
  will-change: translate, rotate, scale, opacity;
}

.portfolio.portfolio-reveal-ready .interface {
  translate: 0 -3rem;
}

.portfolio.portfolio-reveal-ready .portfolio-container > a:nth-child(odd) {
  translate: -5rem 5rem;
  rotate: -3deg;
  scale: 0.9;
}

.portfolio.portfolio-reveal-ready .portfolio-container > a:nth-child(even) {
  translate: 5rem 5rem;
  rotate: 3deg;
  scale: 0.9;
}

.portfolio.portfolio-reveal-ready .btn-mostra-mais {
  translate: 0 3rem;
}

.portfolio.portfolio-reveal-ready.portfolio-reveal-visible .interface,
.portfolio.portfolio-reveal-ready.portfolio-reveal-visible .portfolio-container > a,
.portfolio.portfolio-reveal-ready.portfolio-reveal-visible .btn-mostra-mais {
  opacity: 1;
  translate: 0 0;
  rotate: 0deg;
  scale: 1;
  transition:
    translate 0.95s cubic-bezier(0.16, 1, 0.3, 1),
    rotate 0.95s cubic-bezier(0.16, 1, 0.3, 1),
    scale 0.95s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.62s ease;
}

.portfolio.portfolio-reveal-ready.portfolio-reveal-visible .interface { transition-delay: 0.02s; }
.portfolio.portfolio-reveal-ready.portfolio-reveal-visible .portfolio-container > a:nth-child(1) { transition-delay: 0.12s; }
.portfolio.portfolio-reveal-ready.portfolio-reveal-visible .portfolio-container > a:nth-child(2) { transition-delay: 0.20s; }
.portfolio.portfolio-reveal-ready.portfolio-reveal-visible .portfolio-container > a:nth-child(3) { transition-delay: 0.28s; }
.portfolio.portfolio-reveal-ready.portfolio-reveal-visible .portfolio-container > a:nth-child(4) { transition-delay: 0.36s; }
.portfolio.portfolio-reveal-ready.portfolio-reveal-visible .btn-mostra-mais { transition-delay: 0.46s; }

/* Revela em leque os quatro projetos adicionais ao clicar em Mostrar mais. */
.portfolio .portfolio-container.mostrar > a:nth-child(n + 5) {
  animation: portfolio-open-card 0.72s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.portfolio .portfolio-container.mostrar > a:nth-child(6) { animation-delay: 0.08s; }
.portfolio .portfolio-container.mostrar > a:nth-child(7) { animation-delay: 0.16s; }
.portfolio .portfolio-container.mostrar > a:nth-child(8) { animation-delay: 0.24s; }

@keyframes portfolio-open-card {
  from {
    opacity: 0;
    translate: 0 5rem;
    rotate: -2deg;
    scale: 0.9;
  }
  to {
    opacity: 1;
    translate: 0 0;
    rotate: 0deg;
    scale: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio.portfolio-reveal-ready .interface,
  .portfolio.portfolio-reveal-ready .portfolio-container > a,
  .portfolio.portfolio-reveal-ready .btn-mostra-mais {
    opacity: 1;
    translate: none;
    rotate: none;
    scale: none;
    transition: none;
  }

  .portfolio .portfolio-container.mostrar > a:nth-child(n + 5) {
    animation: none;
  }
}

.portfolio .portfolio-container a {
  display: block;
}

.portfolio .portfolio-container a.filtro-oculto {
  display: none !important;
}

.portfolio-container .portfolio-box {
  position: relative;
  min-width: 20rem;
  height: 40rem;
  overflow: hidden;
  border: 2px solid rgba(210, 224, 121, 0.72);
  border-radius: 18px;
  background-size: cover;
  background-position: top center;
  box-shadow: 0 18px 36px rgba(20, 20, 60, 0.24);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease, background-position-y 5s ease;
}

.portfolio-container .portfolio-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 42%, rgba(0, 0, 0, 0.18));
  pointer-events: none;
}

.portfolio-container .portfolio-box:hover {
  transform: translateY(-8px);
  border-color: #d2e079;
  background-position-y: 100%;
  box-shadow: 0 28px 54px rgba(20, 20, 60, 0.34);
}

/* Overlay de informacao dos projetos */
.portfolio-container .portfolio-box .infor-portfolio {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(33, 33, 78, 0.78);
  color: #ffffff;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 0;
  opacity: 0;
  backdrop-filter: blur(2px);
  transition: opacity 0.28s ease;
}

.portfolio-container .portfolio-box:hover .infor-portfolio {
  opacity: 1;
}


.portfolio-container .projeto-07 .infor-portfolio-ng {
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  text-align: center;
  font-size: 1.15rem;
  line-height: 1.2;
}

.portfolio-container .projeto-07 .infor-portfolio-ng span {
  color: #f4c95d;
  font-weight: 700;
}

.portfolio-container .projeto-07 .infor-portfolio-ng strong {
  color: #ffffff;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

/* Imagens dos projetos */
.portfolio-container .projeto-01 {
  background-image: url(../componentes/_portfolio/proj-01.webp);
}

.portfolio-container .projeto-02 {
  background-image: url(../componentes/_portfolio/dentista-sorriso-principal.webp);
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.portfolio-container .projeto-03 {
  background-image: url(../componentes/_portfolio/proj-03.webp);
}

.portfolio-container .projeto-04 {
  background-image: url(../componentes/_portfolio/proj-04.webp);
}

.portfolio-container .projeto-05 {
  background-image: url(../componentes/_portfolio/proj-05.png);
}

.portfolio-container .projeto-06 {
  background-image: url(../componentes/_portfolio/proj-06.png);
}

.portfolio-container .projeto-07 {
  background-image: url(../../_img/msc-ng.webp);
}

.portfolio-container .projeto-08 {
  background-image: url("/portfolio/lex-prime/img-03.png");
}


/* Exemplos extras por categoria: pizzaria, advogados, blog e dentista. */
/* Author: Marcílio Souza */
/* Pizzaria: capturas otimizadas dos layouts atualizados; estes cards nao pertencem ao filtro Todos. */
.portfolio-container .projeto-09 {
  background-image: url(../../portfolio/lex-prime/msc-forno-nobre-otimizado.png);
}

.portfolio-container .projeto-10 {
  background-image: url(../../portfolio/lex-prime/msc-bella-massa-otimizado.png);
}

.portfolio-container .projeto-11 {
  background-image: url(../../portfolio/lex-prime/msc-advocacia-otimizado.png);
}

.portfolio-container .projeto-12 {
  background-image: url(../../portfolio/lex-prime/msc-direito-social-otimizado.png);
}

.portfolio-container .projeto-13 {
  background-image: url(../../portfolio/lex-prime/msc-tech-norte-blog-otimizado.png);
}

.portfolio-container .projeto-14 {
  background-image: url(../../portfolio/lex-prime/msc-codigo-aberto-otimizado.png);
}

/* Dentista: segunda, terceira e quarta imagens usam as capturas otimizadas na ordem solicitada. */
/* A primeira imagem e os cards do filtro Todos permanecem com as regras existentes. */
.portfolio-container .projeto-15 {
  background-image: url(../../portfolio/lex-prime/msc-clinica-vida-dental-otimizado.png);
}

.portfolio-container .projeto-16 {
  /* Captura atualizada com o sorriso exclusivo; a versao renova o cache da imagem. */
  background-image: url(../../portfolio/lex-prime/msc-sorriso-ideal-otimizado.png?v=20261007-icones);
}

.portfolio-container .projeto-17 {
  /* Captura atualizada com o dente de duas raizes, diferente das outras clinicas. */
  background-image: url(../../portfolio/lex-prime/msc-odonto-prime-otimizado.png?v=20261007-icones);
}

.portfolio-container .projeto-18 {
  background-image: url(../componentes/_portfolio/pizzaria-sabores.webp);
}

.portfolio-container .projeto-19 {
  background-image: url(../componentes/_portfolio/bella-massa-cardapio.webp);
}

.portfolio-container .projeto-20 {
  background-image: url(../componentes/_portfolio/restaurante-sabor-arte.webp);
}

.portfolio-container .projeto-21 {
  background-image: url(../componentes/_portfolio/layout-pizzaria-vila-napoli.png);
}

.portfolio-container .projeto-22 {
  background-image: url(../componentes/_portfolio/msc-pizzaria.webp);
}

.portfolio-container .projeto-23 {
  background-image: url(../componentes/_portfolio/layout-restaurante-mesa-viva.png);
}

.portfolio-container .projeto-24 {
  background-image: url(../componentes/_portfolio/dentista-sorriso-01.webp);
}

.portfolio-container .projeto-25 {
  background-image: url(../componentes/_portfolio/dentista-sorriso-02.webp);
}

.portfolio-container .projeto-26 {
  background-image: url(../componentes/_portfolio/dentista-sorriso-03.webp);
}

.portfolio-container .projeto-27 {
  background-image: url(../componentes/_portfolio/dentista-implantes.webp);
}

.portfolio-container .projeto-28 {
  background-image: url(../componentes/_portfolio/advocacia-almeida.webp);
}

.portfolio-container .projeto-29 {
  background-image: url(../componentes/_portfolio/advocacia-01.webp);
}

.portfolio-container .projeto-30 {
  background-image: url(../componentes/_portfolio/advocacia-02.webp);
}

.portfolio-container .projeto-31 {
  background-image: url(../componentes/_portfolio/advocacia-04.webp);
}

.portfolio-container .projeto-32 {
  background-image: url(../componentes/_portfolio/advocacia-06-ajustada.webp);
}

.portfolio-container :is(.projeto-28, .projeto-29, .projeto-30, .projeto-31, .projeto-32) {
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-color: #ffffff;
}

.portfolio-container :is(.projeto-24, .projeto-25, .projeto-26, .projeto-27) {
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-color: #ffffff;
}


/* Projetos novos: as capturas 900x1400 precisam ficar em largura inteira para sobrar altura e rolar no hover. */
.portfolio-container :is(.projeto-08, .projeto-09, .projeto-10, .projeto-11, .projeto-12, .projeto-13, .projeto-14, .projeto-15, .projeto-16, .projeto-17, .projeto-18, .projeto-19, .projeto-20, .projeto-21, .projeto-22, .projeto-23) {
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top center;
  background-color: #ffffff;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease, background-position 5s ease;
}

.portfolio-container :is(.projeto-08, .projeto-09, .projeto-10, .projeto-11, .projeto-12, .projeto-13, .projeto-14, .projeto-15, .projeto-16, .projeto-17, .projeto-18, .projeto-19, .projeto-20, .projeto-21, .projeto-22, .projeto-23):hover {
  background-position: bottom center;
}
/* Botao Mostrar Mais: revela ou recolhe a segunda linha de projetos. */
.portfolio .btn-mostra-mais {
  position: relative;
  z-index: 1;
  margin-top: 4rem;
  text-align: center;
}

.portfolio .btn-mostra-mais button {
  min-width: 27rem;
  min-height: 5.2rem;
  padding: 0 2.4rem;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, #00b8d9 0%, #6f4df6 52%, #cf4f8b 100%);
  font-size: 1.55rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 18px 34px rgba(20, 20, 60, 0.28), 0 0 0 4px rgba(255, 255, 255, 0.08);
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease, letter-spacing 0.22s ease;
}

.portfolio .btn-mostra-mais button:hover {
  transform: translateY(-4px) scale(1.02);
  filter: brightness(1.1) saturate(1.08);
  letter-spacing: 0.02em;
  box-shadow: 0 26px 48px rgba(20, 20, 60, 0.36), 0 0 0 5px rgba(210, 224, 121, 0.18);
}

.portfolio .btn-mostra-mais button:focus-visible {
  outline: 3px solid #d2e079;
  outline-offset: 4px;
}

/* Estados usados pelo botao Mostrar Mais */
.portfolio .portfolio-box.oculto {
  display: none;
}

.portfolio .portfolio-container a:has(.portfolio-box.oculto) {
  display: none;
}

.portfolio .portfolio-container.mostrar {
  grid-template-rows: 1fr 1fr;
}

.portfolio .portfolio-container.mostrar .portfolio-box.oculto,
.portfolio .portfolio-container.filtrando .portfolio-box.oculto {
  display: block;
}

.portfolio .portfolio-container.mostrar a:has(.portfolio-box.oculto),
.portfolio .portfolio-container.filtrando a:has(.portfolio-box.oculto) {
  display: block;
}

/* Ajustes responsivos da secao Portfolio */
@media screen and (max-width: 1000px) {
  .portfolio-filter-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .portfolio .portfolio-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 600px) {
  section.portfolio {
    padding: 5rem 0 6rem;
  }

  .portfolio h2.titulo-section {
    font-size: 2.6rem;
  }

  .portfolio p {
    margin-bottom: 2.8rem;
    font-size: 1.6rem;
    line-height: 2.8rem;
  }

  .portfolio-filter-heading {
    justify-items: center;
    text-align: center;
  }

  .portfolio-filter-brand {
    font-size: 1.05rem;
  }

  .portfolio-filter-label {
    font-size: 1.8rem;
  }

  .portfolio-filter-label::after {
    margin-right: auto;
    margin-left: auto;
  }

  .portfolio-filter-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .portfolio-filter {
    min-height: 4rem;
    font-size: 1.25rem;
  }

  .portfolio .portfolio-container {
    grid-template-columns: 1fr;
  }

  .portfolio-container .portfolio-box {
    height: 34rem;
  }

  .portfolio .btn-mostra-mais {
    margin-top: 0.8rem;
  }
}