/* ==========================================================================
   victoou.com — components.css
   Componentes globais, cada um existindo em UM único lugar:
   header · language-change · menu-overlay · footer · btn · project-card ·
   work-toghether · faq · icon · social-row
   Nomes de classe seguem as camadas do Figma em kebab-case.
   Nesta fase todo comportamento está inerte: os ganchos data-* estão prontos.
   ========================================================================== */

/* ---------- ícone ---------- */
.icon { display: block; flex: none; fill: currentColor; }

/* ---------- logotipo (símbolo da marca) ---------- */
.logo-mark { width: 100%; height: 100%; object-fit: contain; }
/* o hover usa o PNG vermelho da marca: a versão vetorial serrilhava na troca */
.logo-mark--hover { image-rendering: auto; }
.logo-mark--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .35s var(--ease);
}
a:hover > .logo-mark--hover { opacity: 1; }

/* ==========================================================================
   HEADER
   Barra horizontal na largura do container, a 62px do topo, fundo
   transparente, sobreposta ao hero. Flex de três partes.
   ========================================================================== */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;   /* acima de qualquer seção; o menu overlay usa 100 */
  width: 100%;
  padding: 44px 0 28px;
}
/* gradiente de preto a transparente atrás do header, para o conteúdo que
   passa por baixo nunca brigar de contraste */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--bg) 0%, rgba(0, 0, 0, 0.72) 45%, rgba(0, 0, 0, 0) 100%);
}



.header__inner {
  position: relative;
  width: var(--container);
  margin-inline: auto;
  height: 37px;        /* altura travada: a caixa de idioma aberta não empurra nada */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* o logotipo é fixado no centro do container, sem depender da largura dos
   blocos laterais */
.header__center {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
}
.header__right { display: flex; align-items: center; gap: 13px; }

/* logotipo central — existe só nas páginas internas, nunca na home */
.header__logo {
  position: relative;
  width: var(--logo-header);
  height: var(--logo-header);
  overflow: hidden;
}
.header__logo .img-ph { height: 100%; }
.header__logo .logo-mark { padding: 2px; }
.header__logo img, .header__logo svg { width: 100%; height: 100%; object-fit: cover; }
.page-home .header__center { pointer-events: none; }
.page-home .header__center .header__logo {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.page-home .header__center.is-in,
body.is-past-hero .page-home .header__center { pointer-events: auto; }
.page-home .header__center.is-in .header__logo,
body.is-past-hero .header__center .header__logo { opacity: 1; transform: none; }

/* ==========================================================================
   LANGUAGE-CHANGE  (inerte nesta fase)
   ========================================================================== */
.language-change {
  position: relative;
  width: 215px;
  height: 37px;       /* mesma altura dos botões da direita */
  padding: 0 12px;
  border: 1px solid var(--stroke-btn);
  border-radius: var(--radius-lang);
  display: flex;
  flex-direction: column;
  background: transparent;
}
/* aberta, a caixa cresce por cima do hero: a linha do header não se mexe,
   então os botões da direita ficam parados */
.language-change[data-open="true"] {
  height: auto;
  background: var(--bg);
}
/* cresce só para baixo, a partir do topo da linha */
.language-change { align-self: flex-start; }

.language-change__option {
  display: flex;
  align-items: center;
  min-height: 35px;
  gap: 22px;
  font-family: var(--font-text);
  font-weight: var(--w-medium);
  font-size: var(--fs-ui-18);
  line-height: var(--lh-1);
  color: var(--text-soft);
  white-space: nowrap;
}

.language-change__flag {
  width: 19px; height: 19px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-1);
  flex: none;
}
.language-change__flag img { width: 100%; height: 100%; object-fit: cover; }

.language-change__option .icon { margin-left: auto; color: var(--text-soft); }

/* dropdown: cresce a altura da caixa, não sobrepõe o conteúdo abaixo */
.language-change {
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.language-change .drop-down {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .35s var(--ease), opacity .3s var(--ease), padding-top .35s var(--ease);
}
.language-change[data-open="true"] .drop-down { max-height: 80px; opacity: 1; padding-top: 8px; padding-bottom: 8px; }

.language-change__option {
  padding: 4px 8px;
  border-radius: 6px;
  transition: background .3s var(--ease);
}
.language-change__option:hover { background: var(--surface-1); cursor: pointer; }

/* texto que sobe e reaparece na mesma posição */
.slide { display: inline-block; flex: none; overflow: hidden; vertical-align: middle; }
.slide > span { display: block; position: relative; transition: transform .4s var(--ease); }
.slide > span::after { content: attr(data-text); position: absolute; left: 0; top: 100%; width: 100%; }
.language-change__option:hover .slide > span,
.btn:hover .btn__label > span { transform: translateY(-100%); }
.drop-down__divider {
  height: 1px;
  background: var(--stroke-divider);
  margin-bottom: 8px;
}

/* ==========================================================================
   MENU OVERLAY  (montado, display:none nesta fase)
   ========================================================================== */
.menu-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 100;
  width: min(620px, 45vw);
  background: var(--bg);
  border-left: 1px solid var(--stroke-row);
  overflow-y: auto;
  padding: 62px 0 64px;
}
.menu-overlay .container { width: min(100% - 96px, 480px); margin-inline: 48px; }
/* fechado: fora da tela à direita. Aberto: desliza para dentro.
   [hidden] o mantém fora do fluxo de leitura enquanto a saída não termina. */
.menu-overlay {
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform .62s var(--ease), opacity .45s var(--ease), visibility 0s linear .62s;
}
.menu-overlay[data-open="true"] {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: transform .62s var(--ease), opacity .35s var(--ease), visibility 0s;
}
.menu-overlay[hidden] { display: block; }

.menu-overlay__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-overlay__label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-util);
  font-size: var(--fs-ui-18);
  text-transform: uppercase;
  color: var(--text-soft);
}
.menu-overlay__label::before {
  content: "";
  width: 12px; height: 12px;
  background: var(--accent);
}

.menu-overlay__close {
  width: 80px; height: 37px;
  border: 0;
  display: grid;
  place-items: center;
  color: var(--text-soft);
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.menu-overlay__close:hover { color: var(--text); transform: rotate(90deg); }

.menu-overlay__divider { height: 1px; background: var(--stroke-row); margin-top: 32px; }

.menu-overlay__nav { display: flex; flex-direction: column; }
.menu-overlay__nav li { border-bottom: 1px solid var(--stroke-row); }
.menu-overlay__nav a {
  position: relative;
  display: inline-block;
  width: fit-content;
  padding-bottom: 10px;
  overflow: hidden;
  margin: 14px 0;
  font-family: var(--font-text);
  font-weight: var(--w-medium);
  font-size: var(--fs-manifesto);
  line-height: 1.1;
  letter-spacing: var(--ls-copy);
  color: var(--text);
  transition: color .3s var(--ease);
}
.menu-overlay__nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease) .3s;
}
.menu-overlay__nav a:hover::after { transform: scaleX(1); }
/* rótulo duplicado: o de cima sai, a cópia entra por cima — mesma posição
   final, movimento de cima para baixo */
.menu-overlay__nav a span {
  display: block;
  transition: transform .42s var(--ease), opacity .42s var(--ease);
}
.menu-overlay__nav a span:last-child {
  position: absolute;
  inset: 0;
  transform: translateY(-100%);
  opacity: 0;
}
.menu-overlay__nav a:hover span:first-child { transform: translateY(100%); opacity: 0; }
.menu-overlay__nav a:hover span:last-child { transform: none; opacity: 1; }
.menu-overlay__nav a[aria-current="page"] { color: var(--accent); }
.menu-overlay__nav a[aria-current="page"]::after { transform: scaleX(1); }

.menu-overlay__blocks {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 48px;
}
.menu-overlay__email a {
  display: block;
  margin-top: 12px;
  font-weight: var(--w-bold);
  font-size: var(--fs-p-24);
  color: var(--accent);
}

.socials-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  gap: 10px 32px;
  margin-top: 12px;
}
.socials-list a {
  position: relative;
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  font-size: var(--fs-ui-18);
  color: var(--text-soft);
  transition: color .3s var(--ease);
}
.socials-list a::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.socials-list a:hover { color: var(--text); }
.socials-list a:hover::after { transform: scaleX(1); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
/* revelação: o footer fica preso ao fundo da janela e a seção anterior
   desliza sobre ele. Nenhuma animação além disso. */
.footer {
  position: relative;
  z-index: 0;
  width: 100%;
  min-height: var(--footer-h);
  background: var(--accent);
  color: var(--text-on-accent);
  display: flex;
  align-items: center;
  padding: 40px 0;
}

/* preso ao fundo da janela só na última parte da rolagem (classe posta por
   main.js): é o que cria a revelação sem risco de aparecer antes da hora */
.footer.is-pinned { position: sticky; bottom: 0; }

.footer__inner {
  width: var(--container);
  margin-inline: auto;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 40px;
}

/* O wordmark ocupa a largura restante depois da coluna de informação: a
   coluna é reservada e o corpo da fonte é derivado do espaço real (cqw),
   com o valor de 1920 como teto. Assim nunca colide com .footer__info. */
.footer__wordmark {
  flex: 1 1 auto;
  min-width: 0;
  container-type: inline-size;
}
.js .footer__wordmark span {
  opacity: 0;
  transform: translateY(-56px);
  transition: opacity .7s var(--ease), transform .9s var(--ease);
}
.js .footer__wordmark.is-in span { opacity: 1; transform: none; }

.footer__wordmark span {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: min(var(--fs-wordmark-footer), 19cqw);
  line-height: var(--lh-1);
  letter-spacing: var(--ls-wordmark);
  text-transform: uppercase;
  color: var(--text-on-accent);
  white-space: nowrap;
}

.footer__info {
  flex: none;
  width: 375px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  text-align: right;
  gap: 24px;
}

.footer__logo {
  position: relative;
  width: var(--logo-footer);
  height: var(--logo-footer);
  overflow: hidden;
}
.footer__logo .img-ph { height: 100%; }
.footer__logo svg, .footer__logo img { width: 100%; height: 100%; object-fit: cover; }

.footer__rights {
  font-weight: var(--w-bold);
  font-size: var(--fs-p-27);
  line-height: 1.11;   /* 40px sobre 36px no arquivo */
  letter-spacing: var(--ls-copy);
  text-transform: uppercase;
}

.footer__legal {
  display: flex;
  gap: 8px;
  font-weight: var(--w-regular);
  font-size: var(--fs-ui-18);
}
/* sublinhado que cresce da esquerda no hover, como nos demais links do site */
.footer__legal a {
  position: relative;
  color: var(--text-on-accent);
}
.footer__legal a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s var(--ease);
}
.footer__legal a:hover { color: var(--bg); }
.footer__legal a:hover::after { transform: scaleX(1); }

/* ==========================================================================
   BTN — pill base + três variantes
   ========================================================================== */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-text);
  font-weight: var(--w-medium);
  font-size: var(--fs-btn);
  line-height: var(--lh-1);
  text-transform: uppercase;
  white-space: nowrap;
}
.btn .icon { width: 24px; height: 24px; transition: transform .4s var(--ease); }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .45s var(--ease);
}
.btn:hover::before { transform: scaleY(1); }
.btn:hover { color: var(--text); border-color: transparent; }
.btn:hover .icon { transform: translate(3px, -3px); }

.btn__label { display: inline-block; flex: none; overflow: hidden; vertical-align: middle; }
.btn__label > span { display: block; position: relative; white-space: nowrap; transition: transform .4s var(--ease); }
.btn__label > span::after { content: attr(data-text); position: absolute; left: 0; top: 100%; width: 100%; }

.btn--outline { border: 1px solid var(--stroke-btn); color: var(--text-soft); }

/* Todo pill com rótulo cresce com o texto: os nomes mudam ao trocar o idioma
   (SEE MORE PROJECTS → VER MAIS PROJETOS). As medidas do arquivo viram piso,
   nunca teto, e o rótulo nunca quebra em duas linhas. */
.btn:not(.btn--menu) { width: auto; white-space: nowrap; }
.btn--solid   { background: var(--accent); color: var(--text-soft); }
.btn--ghost   { background: var(--surface-1); color: var(--text-soft); }


/* botões pill do header, menores e sem ícone.
   A largura acompanha o texto (o rótulo muda com o idioma: LET'S TALK →
   VAMOS CONVERSAR), com 123px como piso para manter a proporção do arquivo. */
.btn--header {
  gap: 0;
  padding: 0 18px;
  height: 37px;
  width: auto;
  min-width: 123px;
  font-size: var(--fs-ui-18);
  white-space: nowrap;
}
/* o botão de menu é um ícone: mantém a medida fixa do arquivo */
.btn--menu { width: 80px; min-width: 80px; padding: 0; flex-direction: column; gap: 6px; }
.btn--menu span {
  display: block;
  width: 22px; height: 2px;
  background: var(--text-soft);
}

/* setas circulares de carrossel */
.arrow-btn {
  width: 70px; height: 50px;
  border: 1px solid var(--stroke-btn);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--text);
  display: grid;
  place-items: center;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.arrow-btn:hover { border-color: var(--text); transform: translateY(-2px); }
.arrow-btn--prev .icon { transform: rotate(180deg); }

/* ==========================================================================
   PROJECT-CARD
   Valores do Figma (node 164:36, estados "cover-portfolio-ativo" e
   "cover-portfolio-inativo", card de 1176x749 → 882x562 a 0,75):
   · mouse off  → capa com tinta rgba(21,21,21,.7) e a informação do projeto
                  em vermelho, centralizada (cliente / título / serviço, todos
                  em Bold 24, lh 72,49%, ls -2%)
   · hover      → só a capa, com contorno branco de 4px e zoom out suave
   A linha BY VICTOOU / © 2026 fica fora dos dois estados, conforme pedido.
   ========================================================================== */
.project-card {
  position: relative;
  display: block;
  container-type: inline-size;
  color: var(--text);
}
/* o corte fica só na capa: assim a etiqueta pode vazar para fora do card */
.project-card__clip { position: absolute; inset: 0; overflow: hidden; }
.project-card--carousel { width: var(--card-carousel-w); height: var(--card-carousel-h); }
.project-card--grid     { width: var(--card-grid-w);     height: var(--card-grid-h); }

.project-card__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* com o mouse fora a capa fica em preto e branco; no hover volta a cor */
  filter: grayscale(1);
  transform: scale(1.06);
  transition: transform .6s var(--ease), filter .5s var(--ease);
  will-change: transform;
}
.project-card:hover .project-card__cover { transform: scale(1); filter: grayscale(0); }

/* etiqueta que segue o mouse dentro da capa */
.project-card__cursor {
  position: absolute;
  top: 0; left: 0;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--surface-1);
  border: 1px solid var(--stroke-btn);
  border-radius: var(--radius-pill);
  font-weight: var(--w-medium);
  font-size: var(--fs-ui-18);
  line-height: var(--lh-1);
  color: var(--text);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  /* fica ao lado do ponteiro, não sob ele */
  transform: translate(18px, -50%) scale(0.94);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  pointer-events: none;
}
.project-card:hover .project-card__cursor { opacity: 1; transform: translate(18px, -50%) scale(1); }
.project-card__cursor .icon { width: 18px; height: 18px; }

/* BY VICTOOU / © 2026 — brancos, centralizados na vertical, flanqueando o
   título no estado inativo; saem no hover */
.project-card__meta {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding-inline: 9.35%;   /* 110px de 1176 no arquivo */
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: var(--w-bold);
  font-size: var(--fs-p-24);
  line-height: 1.15;
  letter-spacing: var(--ls-by);
  text-transform: uppercase;
  color: var(--text);
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.project-card__meta span { display: block; width: 27.2%; text-align: center; }
.project-card:hover .project-card__meta { opacity: 1; }


/* informação do projeto: visível com o mouse fora, esconde no hover */
.project-card__hover {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--surface-3-70);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--accent);
  padding: 20% 9.35%;   /* 110px de 1176 no arquivo */
  transition: opacity .4s var(--ease);
}
.project-card:hover .project-card__hover { opacity: 0; }

.project-card__client,
.project-card__service {
  display: block;
  width: 100%;
  font-weight: var(--w-bold);
  font-size: var(--fs-p-24);
  line-height: var(--lh-by);
  letter-spacing: var(--ls-by);
  text-transform: uppercase;
}
/* título grande e centralizado, derivado da largura útil do card */
.project-card__title {
  display: block;
  width: 100%;
  margin: 28px 0 40px;
  font-weight: var(--w-bold);
  font-size: 12.24cqw;   /* 108px em 882px de card, no arquivo */
  line-height: 0.78;
  letter-spacing: var(--ls-card);
  text-transform: uppercase;
}

/* card do grid (606x386): mesma composição em escala menor */
.project-card--grid .project-card__client,
.project-card--grid .project-card__service { font-size: var(--fs-ui-18); }
.project-card--grid .project-card__title { margin: 14px 0 18px; }
.project-card--grid .project-card__meta { font-size: var(--fs-ui-18); }

/* ==========================================================================
   WORK-TOGHETHER — bloco de CTA
   ========================================================================== */
.work-toghether {
  width: 100%;
  min-height: 660px;
  background-color: var(--bg);
  background-image: url('../img/cta-bg.webp');
  /* enquadramento mais aberto que o cover, sem recorte */
  background-size: 78% auto;
  background-position: center;
  /* zoom out de entrada: começa maior e assenta ao chegar na seção */
  transition: background-size 1.6s var(--ease);
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  padding: 114px 0 190px;
}
.work-toghether:not(.is-in) { background-size: 92% auto; }
/* véu escuro sobre a imagem, para o texto de apoio ter contraste */
.work-toghether::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  pointer-events: none;
}
/* dissolve as quatro bordas da imagem, para não se ver onde ela termina */
.work-toghether::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, var(--bg) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 78%, var(--bg) 100%),
    linear-gradient(to bottom, var(--bg) 0%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 74%, var(--bg) 100%);
}
.work-toghether--solid::after { display: none; }
.work-toghether { position: relative; }
.work-toghether__inner { position: relative; z-index: 1; }
.work-toghether--solid::before { display: none; }
.work-toghether--solid { background-image: none; background-color: var(--bg); min-height: 577px; transition: none; }

/* as duas colunas ocupam a mesma altura: título em cima e e-mail na base à
   esquerda; parágrafo em cima, botão no meio e socials na base à direita */
.work-toghether__inner {
  width: var(--container);
  margin-inline: auto;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 64px;
  min-height: 356px;
}
.work-toghether__inner > div:first-child {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.work-toghether__title {
  font-weight: var(--w-bold);
  font-size: var(--fs-section);
  line-height: var(--lh-section);
  letter-spacing: var(--ls-section);
  text-transform: uppercase;
  color: var(--accent);
}

.work-toghether__email {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  font-weight: var(--w-regular);
  font-size: var(--fs-p-28);
  color: var(--accent);
}
.work-toghether__email::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.work-toghether__email:hover::after { transform: scaleX(1); }

.work-toghether__title .w { display: inline-block; }
.js .work-toghether__title .w {
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.work-toghether__title.is-in .w { opacity: 1; transform: none; }
.work-toghether__title.is-in .w:nth-child(2) { transition-delay: .09s; }
.work-toghether__title.is-in .w:nth-child(4) { transition-delay: .18s; }

.work-toghether__aside {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  text-align: right;
  gap: 32px;
}
.work-toghether__copy {
  width: 435px;
  max-width: 100%;
  font-weight: var(--w-regular);
  font-size: var(--fs-p-32);
  line-height: 1.0556;
  text-align: justify;
  color: var(--text);
}
/* pill preenchido em vermelho profundo, com brilho suave */
.work-toghether__aside .btn--solid {
  background: var(--accent-fill);
  width: auto;
  min-width: 239px;
  height: 49px;
  gap: 18px;
  padding: 0 24px;
  background: var(--accent-deep);
  color: var(--accent);
  box-shadow: 0 0 32px -8px var(--accent-deep);
}
.work-toghether__aside .btn--solid:hover { color: var(--text); }

.social-row { display: flex; align-items: center; gap: 31px; color: var(--text-gray); }
.social-row a { display: block; width: 23px; height: 23px; color: var(--text-gray); }
.social-row a:first-child { color: var(--accent); }
.social-row .icon { width: 23px; height: 23px; }

.soc {
  display: block;
  width: 100%; height: 100%;
  mask-repeat: no-repeat; mask-position: center; mask-size: contain;
  -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
  background-image: linear-gradient(to top, var(--accent) 50%, currentColor 50%);
  background-size: 100% 200%;
  background-position: 0 0;
  transition: background-position .45s var(--ease), transform .35s var(--ease);
}
.social-row a:hover .soc { background-position: 0 100%; transform: translateY(-3px); }
.soc--youtube   { mask-image: url(../icons/youtube.svg);   -webkit-mask-image: url(../icons/youtube.svg); }
.soc--instagram { mask-image: url(../icons/instagram.svg); -webkit-mask-image: url(../icons/instagram.svg); }
.soc--x         { mask-image: url(../icons/x.svg);         -webkit-mask-image: url(../icons/x.svg); }
.soc--linkedin  { mask-image: url(../icons/linkedin.svg);  -webkit-mask-image: url(../icons/linkedin.svg); }
.soc--discord   { mask-image: url(../icons/discord.svg);   -webkit-mask-image: url(../icons/discord.svg); }
.soc--tiktok    { mask-image: url(../icons/tiktok.svg);    -webkit-mask-image: url(../icons/tiktok.svg); }
.soc--behance   { mask-image: url(../icons/behance.svg);   -webkit-mask-image: url(../icons/behance.svg); }

/* ==========================================================================
   FAQ — accordion (home e contato)
   Geometria do Figma (node 170:873, frame 2560x1133) convertida a 0,75:
   cabeçalho e lista compartilham a mesma borda esquerda (523px a partir da
   borda do container), formando uma coluna de 753px alinhada à direita.
   Item fechado 94px; aberto ~260px. Sem ícone de mais: não existe no arquivo.
   ========================================================================== */
.faq { width: 100%; padding: 62px 0 120px; }
.faq__inner { width: var(--container); margin-inline: auto; }

.faq__col {
  width: 753px;
  max-width: 100%;
  margin-left: auto;
}

.faq__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}
.faq__head-row {
  display: flex;
  align-items: center;
  gap: 40px;
}
.faq__eyebrow {
  font-family: var(--font-util);
  font-size: var(--fs-ui-18);
  line-height: var(--lh-1);
  text-transform: uppercase;
  color: var(--text-eyebrow);
}
.faq__title {
  font-weight: var(--w-medium);
  font-size: var(--fs-section);
  line-height: var(--lh-section);
  letter-spacing: var(--ls-section);
  text-transform: uppercase;
  color: var(--text);
}

.faq__list { margin-top: 46px; }

.ask-closed {
  border: 0;
  border-bottom: 1px solid var(--stroke-line);
}
.ask-closed__trigger {
  width: 100%;
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  text-align: left;
  padding: 0 14px;
  font-weight: var(--w-medium);
  font-size: var(--fs-faq-q);
  line-height: var(--lh-p);
  color: var(--text-dim);
}

.ask-closed[data-open="true"] {
  border-bottom-color: var(--accent);
  border-bottom-width: 2px;
}
.ask-closed[data-open="true"] .ask-closed__trigger { min-height: 0; padding-top: 45px; }

/* sinal à direita: + fechado, − aberto */
.ask-closed__trigger::after {
  content: "+";
  flex: none;
  font-weight: var(--w-regular);
  line-height: var(--lh-1);
  transition: color .3s var(--ease);
}
.ask-closed[data-open="true"] .ask-closed__trigger::after { content: "−"; }

.faq__answer {
  padding: 28px 14px 56px;
  animation: faq-in .4s var(--ease);
  font-weight: var(--w-bold);
  font-size: var(--fs-p-27);
  line-height: 1.2;
  color: var(--text);
}
.faq__answer[hidden] { display: none; }

@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }

/* seções ficam acima do footer, que é revelado por trás delas. As margens
   verticais entre irmãos são zeradas: qualquer folga sem fundo deixaria o
   footer aparecer no meio da página durante a rolagem. */
/* o pop-up (.promo) e o lightbox são divs no body mas NÃO são seções: sem a
   exclusão herdavam o fundo preto e apareciam como uma coluna escura */
body > section, body > div:where(:not(.promo):not([data-promo])), body > form {
  position: relative;
  z-index: 1;
  margin: 0;
  background-color: var(--bg);
}
body > [data-menu-overlay] { z-index: 100; }
.page-home > section { background-color: var(--bg-home); }

/* página de revisão de componentes: footer estático, para não cobrir os blocos */
.page-components .footer { position: static; }

/* --------------------------------------------------------------------------
   F.A.Q — entrada
   O título e o CTA sobem juntos; as perguntas fechadas entram em cascata,
   uma após a outra, de baixo para cima. Mesma curva do resto do site.
   -------------------------------------------------------------------------- */
[data-reveal-head] .faq__title,
[data-reveal-head] .btn {
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal-head].is-in .faq__title,
[data-reveal-head].is-in .btn { opacity: 1; transform: none; }
[data-reveal-head].is-in .btn { transition-delay: .12s; }

[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(0.6em);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
[data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: .08s; }
[data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: .16s; }
[data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: .24s; }
[data-reveal-stagger].is-in > *:nth-child(5) { transition-delay: .32s; }
[data-reveal-stagger].is-in > *:nth-child(6) { transition-delay: .40s; }

/* entrada simples de baixo para cima, usada nas páginas internas */
[data-reveal-up] {
  opacity: 0;
  transform: translateY(0.55em);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal-up].is-in { opacity: 1; transform: none; }

/* card oculto pelo filtro não ocupa espaço no grid */
.project-card[hidden] { display: none; }

/* --------------------------------------------------------------------------
   TOAST — avisos de envio do formulário
   Cartão escuro no canto inferior direito, com um halo em gradiente na cor do
   estado (verde no sucesso, amarelo no limite de tempo) e ícone à esquerda.
   -------------------------------------------------------------------------- */
.toast-tray {
  position: fixed;
  right: 28px; bottom: 28px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.toast {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 16px;
  width: 404px;
  max-width: calc(100vw - 56px);
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--bg-800);
  border: 1px solid var(--stroke-card);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.9);
  pointer-events: auto;
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  animation: toast-in .7s var(--ease) both;
}
.toast.is-out { animation: toast-out .5s var(--ease) both; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes toast-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(10px) scale(0.98); }
}

/* halo do estado, atrás do conteúdo */
.toast::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto -30%;
  height: 190%;
  pointer-events: none;
  opacity: 0.55;
  animation: toast-glow 3.4s var(--ease) infinite;
}
.toast--success::before {
  background: radial-gradient(46% 60% at 12% 40%,
    oklch(0.72 0.17 152 / 0.55) 0%, oklch(0.72 0.17 152 / 0.16) 46%, transparent 74%);
}
.toast--warning::before {
  background: radial-gradient(46% 60% at 12% 40%,
    oklch(0.82 0.15 92 / 0.5) 0%, oklch(0.82 0.15 92 / 0.14) 46%, transparent 74%);
}
@keyframes toast-glow {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.72; }
}

.toast__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 11px;
  background: var(--bg-700);
  border: 1px solid var(--stroke-card);
}
.toast--success .toast__icon { color: oklch(0.78 0.17 152); }
.toast--warning .toast__icon { color: oklch(0.85 0.15 92); }
/* o traço do ícone é desenhado ao aparecer */
.toast__icon .icon path,
.toast__icon .icon polyline { stroke-dasharray: 40; stroke-dashoffset: 40; animation: toast-draw .8s var(--ease) .22s both; }
@keyframes toast-draw { to { stroke-dashoffset: 0; } }

.toast__body { position: relative; min-width: 0; }
.toast__title {
  font-weight: var(--w-bold);
  font-size: var(--fs-ui-18);
  line-height: 1.3;
  color: var(--text);
}
.toast__text {
  margin-top: 4px;
  font-size: var(--fs-p-19);
  line-height: 1.32;
  color: var(--text-muted);
}
.toast__close {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  color: var(--text-dim);
  transition: color .3s var(--ease);
}
.toast__close:hover { color: var(--text); }

/* o ícone de alerta é preenchido, não traçado: entra em fade e escala */
.toast--warning .toast__icon .icon path {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  animation: none;
}
.toast--warning .toast__icon .icon { animation: toast-pop .6s var(--ease) .12s both; }
@keyframes toast-pop {
  from { opacity: 0; transform: scale(0.72); }
  to   { opacity: 1; transform: none; }
}

/* texto de apoio do aviso um pouco menor */
.toast__text { font-size: var(--fs-ui-18); line-height: 1.3; }

/* contador dentro do aviso */
.toast__text [data-countdown] {
  color: oklch(0.85 0.15 92);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   POP-UP PROMOCIONAL
   Configurado no dashboard (/assets/data/promo.json). Entra pelo canto
   inferior direito, sem cobrir a tela toda: divulgação não deve bloquear a
   navegação. Em telas estreitas ocupa a largura, ancorado na base.
   -------------------------------------------------------------------------- */
.promo {
  position: fixed;
  inset: auto 0 0 auto;
  z-index: 110;
  padding: 28px;
  pointer-events: none;
}
.promo__panel {
  position: relative;
  width: 336px;
  max-width: calc(100vw - 56px);
  background: var(--bg-800);
  border: 1px solid var(--stroke-card);
  border-radius: var(--radius-card);
  overflow: hidden;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(22px) scale(0.97);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.9);
}
.promo.is-open .promo__panel { opacity: 1; transform: none; }
/* fora do estado aberto o cartão não é pintado nem recebe clique: mesmo
   que um script antigo em cache não remova o elemento, nada fica na tela */
.promo:not(.is-open) .promo__panel {
  visibility: hidden;
  pointer-events: none;
  /* some depois do fade de saída, não antes */
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s .4s;
}
.promo:not(.is-open) { pointer-events: none; }

.promo__close {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: rgba(8, 8, 8, 0.66);
  backdrop-filter: blur(4px);
  color: var(--text-soft);
  transition: background .35s var(--ease), color .35s var(--ease);
}
.promo__close:hover { background: var(--accent); color: var(--text); }

.promo__media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--surface-1) center / cover no-repeat;
}

.promo__body { padding: 20px 22px 24px; }
.promo__eyebrow {
  font-family: var(--font-util);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.promo__title {
  margin-top: 10px;
  font-weight: var(--w-medium);
  font-size: 26px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
}
.promo__copy {
  margin-top: 10px;
  font-size: var(--fs-p-19);
  line-height: 1.45;
  color: var(--text-dim);
}
.promo__cta {
  display: inline-flex;
  align-items: center;
  margin-top: 18px;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  font-weight: var(--w-medium);
  font-size: var(--fs-ui-18);
  letter-spacing: -0.01em;
  color: var(--text);
  transition: background .35s var(--ease);
}
.promo__cta:hover { background: var(--accent-token); color: var(--text); }

@media (max-width: 700px) {
  .promo { padding: 16px; }
  .promo__panel { width: 100%; }
}

/* --------------------------------------------------------------------------
   POP-UP — formato horizontal
   Mesmo componente, ancorado na base da janela com a imagem à esquerda. A
   orientação vem de "layout" em /assets/data/promo.json.
   -------------------------------------------------------------------------- */
/* posição escolhida no painel: direita (padrão), esquerda ou centro */
.promo--left { inset: auto auto 0 0; }
.promo--center {
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.72);
  pointer-events: auto;                /* clicar no fundo fecha */
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.promo--center.is-open { opacity: 1; }
.promo--center .promo__panel { width: min(420px, 100%); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 1); }

/* vídeo incorporado dentro do cartão */
.promo--video .promo__media { position: relative; aspect-ratio: 16 / 9; background: #000; }
.promo--video .promo__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.promo--video.promo--vertical .promo__panel { width: min(480px, calc(100vw - 56px)); }
/* só a mídia: a CTA fica sobre a mídia e aparece ao passar o mouse; a
   camada cobre o iframe, então o clique vai para o link e não para o player */
.promo--bare .promo__media { position: relative; }
.promo__hover {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.38);
  opacity: 0;
  transition: opacity .35s var(--ease);
  text-decoration: none;
}
.promo__hover .promo__cta { margin-top: 0; transform: translateY(6px); transition: transform .35s var(--ease); }
.promo--bare .promo__panel:hover .promo__hover,
.promo--bare .promo__panel:focus-within .promo__hover { opacity: 1; }
.promo--bare .promo__panel:hover .promo__hover .promo__cta { transform: none; }
@media (hover: none) { .promo__hover { opacity: 1; background: rgba(0, 0, 0, 0.22); } }
/* só a mídia: o cartão é a imagem ou o vídeo inteiro */
.promo--bare .promo__body { display: none; }
.promo--bare.promo--horizontal .promo__panel { display: block; width: min(720px, calc(100vw - 56px)); }
.promo--bare.promo--horizontal .promo__media { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
.promo--bare.promo--vertical .promo__media { aspect-ratio: 4 / 5; }
.promo--bare.promo--video .promo__media { aspect-ratio: 16 / 9; }
.promo--center.promo--video .promo__panel,
.promo--center.promo--bare .promo__panel { width: min(860px, 100%); }

.promo--horizontal { inset: auto 0 0 0; display: flex; justify-content: center; }
.promo--horizontal .promo__panel {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  align-items: stretch;
  width: min(688px, calc(100vw - 56px));
}
.promo--horizontal .promo__media { height: 100%; aspect-ratio: auto; min-height: 208px; }
.promo--horizontal.promo--video .promo__panel { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); width: min(820px, calc(100vw - 56px)); }
.promo--horizontal.promo--video .promo__media { aspect-ratio: auto; min-height: 240px; }
/* só a mídia + vídeo: o player ocupa o cartão inteiro em 16:9, em qualquer
   formato e posição (vem por último para vencer as regras acima) */
.promo.promo--bare.promo--video .promo__panel { display: block; grid-template-columns: none; width: min(720px, calc(100vw - 56px)); }
.promo.promo--bare.promo--video .promo__media { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
.promo.promo--center.promo--bare .promo__panel,
.promo.promo--center.promo--video .promo__panel { width: min(860px, 100%); }
.promo--horizontal .promo__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px 30px 28px;
}
.promo--horizontal .promo__title { font-size: 30px; }
.promo--horizontal .promo__copy { max-width: 38ch; }

@media (max-width: 700px) {
  .promo--horizontal .promo__panel { grid-template-columns: minmax(0, 1fr); }
  .promo--horizontal .promo__media { aspect-ratio: 16 / 10; min-height: 0; }
}

/* --------------------------------------------------------------------------
   Campo de busca — o mesmo em /work e em /blog: fundo de superfície, ícone de
   30px e a barra vermelha piscante no lugar do cursor enquanto está vazio.
   -------------------------------------------------------------------------- */
.search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 272px;
  height: 62px;
  padding: 0 18px;
  background: var(--surface-1);
  /* a borda existe desde o repouso, em cinza: assim ela muda de cor ao focar
     em vez de aparecer do nada e empurrar o conteúdo em 1px */
  border: 1px solid var(--stroke-input);
  border-radius: 0;
  color: var(--stroke-input);
  transition: border-color .45s var(--ease), box-shadow .45s var(--ease);
}
/* clicando, o contorno vermelho envolve o retângulo inteiro */
.search-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.search-field input:focus,
.search-field input:focus-visible { outline: 0; }
/* barra vermelha piscante no lugar do cursor, enquanto o campo está vazio */
.search-field::after {
  content: "";
  position: absolute;
  left: 60px;
  width: 2px;
  height: 24px;
  background: var(--accent);
  animation: caret-blink 1.1s steps(1) infinite;
  pointer-events: none;
}
.search-field:focus-within::after,
.search-field.has-text::after { display: none; }
@keyframes caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.search-field .icon { width: 30px; height: 30px; }
.search-field input {
  width: 100%;
  font-weight: var(--w-medium);
  font-size: var(--fs-ui-18);
  color: var(--text-soft);
}
.search-field input::placeholder { color: var(--text-dim); }

/* horizontal respeita a posição escolhida (antes ficava sempre no centro
   da base); o modo "centro" vence o formato, seja qual for */
.promo--horizontal.promo--left { justify-content: flex-start; }
.promo--horizontal.promo--right { justify-content: flex-end; }
.promo.promo--center { inset: 0; display: grid; place-items: center; justify-content: center; }