/* HL Web Solutions - Light Copper Theme */
:root {
  --color-bg: #faf9f5;
  --color-text: #1E1510;
  --color-accent: #C86927;
  --color-accent-dark: #3B2215;
  --color-border: rgba(30, 21, 16, 0.15);
  --color-border-hover: rgba(200, 105, 39, 0.8);
}

/* Global Overrides */
* {
  text-shadow: none !important;
}

html,
body {
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
}

/* Typography Overrides */
h1,
h2,
h3,
h4,
h5,
p,
span,
a,
div {
  color: var(--color-text);
}

.focus__title,
.listening__title {
  color: #faf9f5 !important;
}

.craft__title,
.craft__title * {
  color: #7C7468 !important;
}

#intro h2,
#intro h2 * {
  color: #7C7468 !important;
}

/* Navigation & Header */
.hero__where,
.hero__range {
  color: #FBF8F0 !important;
}

.hero-css {
  background: var(--color-bg) !important;
}

.hero-css:after {
  background: radial-gradient(120% 90% at 50% 38%, rgba(250, 249, 245, 0.1), rgba(250, 249, 245, 0.8) 62%, var(--color-bg)),
    linear-gradient(to bottom, rgba(250, 249, 245, 0.6), rgba(250, 249, 245, 0.3) 26%, rgba(250, 249, 245, 0.8) 78%, var(--color-bg)) !important;
}

/* Limelight Navigation Bar */
.hero__nav {
  background: rgba(250, 249, 245, 0.85) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
  border: 1px solid rgba(124, 116, 104, 0.22) !important;
  box-shadow: 0 8px 32px rgba(30, 21, 16, 0.08) !important;
  padding: 4px 6px !important;
  border-radius: 999px !important;
  overflow: visible !important;
  /* centraliza o menu na tela agora que o e-mail saiu do topo */
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  translate: -50% -50% !important;
  margin: 0 !important;
}

.hero__nav a {
  color: rgba(30, 21, 16, 0.6) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  padding: 8px 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  text-decoration: none !important;
  transition: color 0.25s ease, opacity 0.25s ease !important;
  position: relative !important;
  z-index: 3 !important;
}

.hero__nav a:hover {
  color: rgba(30, 21, 16, 0.95) !important;
  opacity: 1 !important;
}

.hero__nav a[data-active] {
  color: #C86927 !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

.hero__nav a .nav-icon {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.hero__nav a[data-active] .nav-icon {
  opacity: 1;
  transform: scale(1.1);
}

/* Limelight Indicator (Removido círculo / borda / fundo) */
.hero__nav-pill {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  z-index: 2 !important;
  overflow: visible !important;
}

.hero__nav-ghost {
  display: none !important;
}

/* Limelight Top Glowing Light Bar */
.hero__nav-pill::before {
  display: none !important;
}

/* Limelight Downward Spotlight Cone Beam */
.hero__nav-pill::after {
  display: none !important;
}


.versions {
  background: rgba(250, 249, 245, 0.8) !important;
  border-color: var(--color-border) !important;
}

.versions a {
  color: rgba(30, 21, 16, 0.6) !important;
}

.versions a:hover,
.versions a.is-on {
  color: var(--color-text) !important;
}

.versions a.is-on {
  background: var(--color-text) !important;
  color: var(--color-bg) !important;
}

/* Buttons and Links */
.btn,
.btn--ghost {
  color: var(--color-text) !important;
  border-color: var(--color-accent) !important;
}

.work__link {
  color: #7C7468 !important;
  border-color: #7C7468 !important;
}

.btn:hover,
.btn--ghost:hover {
  border-color: var(--color-accent-dark) !important;
  background: rgba(200, 105, 39, 0.05) !important;
}

.work__link:hover {
  border-color: var(--color-accent) !important;
  background: rgba(124, 116, 104, 0.1) !important;
  color: var(--color-text) !important;
}

/* Focus / Listening / Craft Sections */
.focus__stage,
.listening__bg,
.craft__scene,
.validation__scene {
  background: transparent !important;
}

.story__note {
  color: rgba(30, 21, 16, 0.8) !important;
}

.story__note--validation,
.story__note--validation * {
  color: #7C7468;
}

.story__note--validation {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.story__note--focus {
  color: #faf9f5 !important;
}

.story__note--craft,
.story__note--craft * {
  color: #7C7468;
}

.story__note--craft {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.craft__title,
.craft__title * {
  color: #7C7468;
}

/* Featured Projects Section */
.section--featured,
.section--work {
  background-color: #faf9f5 !important;
  position: relative;
  z-index: 10;
}

.section--featured *,
.section--work * {
  color: #7C7468 !important;
}

.featured__title,
.featured__title * {
  color: #7C7468 !important;
  -webkit-text-stroke: 0 !important;
}

.validation__title,
.validation__title * {
  color: #7C7468;
}

/* About Section */
.about__title,
.about__title * {
  color: #FBF8F0 !important;
}

.about__copy,
.about__copy * {
  color: #FBF8F0 !important;
}

.about__sign {
  color: var(--color-accent) !important;
}

/* Outro / Footer */
.outro,
.outro * {
  color: #FBF8F0 !important;
}

.outro__title,
.outro__title *,
.outro__title span {
  color: #FBF8F0 !important;
}

.outro__social,
.outro__social *,
.outro__mail,
.outro__mail * {
  color: #FBF8F0 !important;
}

.outro__arrow,
.copy-email-icon svg {
  color: #FBF8F0 !important;
  stroke: #FBF8F0 !important;
}

.outro__meta,
.outro__meta * {
  color: #FBF8F0 !important;
}

/* 3D Headline */
.headline-text {
  background: linear-gradient(180deg, #FBF8F0 0%, var(--color-accent-dark) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

.hero__eyebrow {
  font-size: 24px !important;
  color: #FBF8F0 !important;
}

/* WebGL Fallback styles */
.fallback {
  color: var(--color-text) !important;
}

/* Lightbox overides */
.lightbox__scrim {
  background: rgba(250, 249, 245, 0.9) !important;
}

.lightbox__close {
  background: rgba(250, 249, 245, 0.8) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

.lightbox__close:hover {
  border-color: var(--color-accent) !important;
}



/* Floating Icons Hero in Técnica (Craft) Section */
.craft__scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  background: transparent !important;
  filter: none !important;
  transition: opacity 0.35s ease;
}

.craft__scene.is-live {
  pointer-events: auto !important;
}

.floating-icons-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.floating-icon-item {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  will-change: transform;
  user-select: none;
}

.floating-icon-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  padding: 12px;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(30, 21, 16, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  background: rgba(250, 249, 245, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(124, 116, 104, 0.2);
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-icon-card:hover {
  box-shadow: 0 16px 40px rgba(200, 105, 39, 0.22), 0 4px 12px rgba(0, 0, 0, 0.06);
  border-color: rgba(200, 105, 39, 0.5);
  transform: scale(1.1);
}

@media (min-width: 768px) {
  .floating-icon-card {
    width: 72px;
    height: 72px;
    padding: 15px;
    border-radius: 24px;
  }
}

/* No celular a cena fica estreita: alguns icones somem para nao cobrir o titulo */
@media (max-width: 47.9375rem) {
  .floating-icon-item.is-desktop-only {
    display: none;
  }
}

.floating-icon-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Canvas WebGL do topo: o script o esconde com visibility:hidden de uma vez.
   Aqui o esconder vira um fade, e o voltar continua imediato. */
.stage-gl {
  transition: opacity 0.55s ease, visibility 0s linear 0s !important;
}

.stage-gl[style*="visibility: hidden"] {
  opacity: 0 !important;
  transition: opacity 0.55s ease, visibility 0s linear 0.55s !important;
}

/* About Section Overrides */
.about {
  --about-photo: url('/gallery/fundo_hl.png') !important;
  padding-inline: 0 !important;
  padding-block: 0 !important;
  grid-template-columns: minmax(0, 1fr);
}

/* Foto de fundo do tamanho da viewport: mostra a imagem inteira, sem zoom */
.about__photo {
  grid-area: 1 / 1;
  justify-self: stretch;
  align-self: start;
  position: sticky !important;
  inset: auto !important;
  top: -6vh !important;
  width: 100%;
  height: 112vh;
  background-image: url('/gallery/fundo_hl.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  scale: 1 !important;
}

/* Véu escuro só do lado direito, para o texto ficar legível sobre a parede clara */
.about__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left,
    rgba(22, 15, 10, 0.66) 0%,
    rgba(22, 15, 10, 0.6) 32%,
    rgba(22, 15, 10, 0.28) 56%,
    rgba(22, 15, 10, 0) 74%);
  pointer-events: none;
}

.about__inner {
  grid-area: 1 / 1;
  justify-self: end;
  width: min(44rem, 100%);
  padding-inline: 2.5em 4em;
  padding-block: 22.5em;
  text-align: left;
}

.about__title {
  margin-inline: 0;
  max-width: none;
  font-size: 4.2em;
  text-align: left;
}

.about__copy {
  margin-inline: 0;
  width: 100%;
}

@media (max-width: 47.9375rem) {
  .about__photo {
    top: -4vh !important;
    height: 108svh;
    background-position: 38% center !important;
  }

  .about__photo::after {
    background: linear-gradient(to bottom,
      rgba(22, 15, 10, 0.35) 0%,
      rgba(22, 15, 10, 0.55) 40%,
      rgba(22, 15, 10, 0.55) 100%);
  }

  .about__inner {
    justify-self: stretch;
    width: 100%;
    padding-inline: 1.75em;
    padding-block: 5em;
  }

  .about__title {
    font-size: 3em;
  }
}


/* ============================================================
   AJUSTES DE CELULAR
   ============================================================ */

@media (max-width: 47.9375rem) {
  /* O logo fixo (64px por atributo inline) passava por cima do texto
     das secoes ao rolar. Menor, ele sai do caminho. */
  .hero__logo img {
    height: 40px !important;
  }

  /* O logo e fixo e ficava por cima do texto das secoes ao rolar.
     No celular ele fica so no topo: some quando o hero sai da tela
     (o canvas do hero ganha visibility:hidden nesse momento) e
     volta quando o usuario sobe. A navegacao fica na barra de baixo. */
  .hero__logo {
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  body:has(.stage-gl[style*="visibility: hidden"]) .hero__logo {
    opacity: 0;
    visibility: hidden;
  }

  /* A frase do topo tinha 504px de largura com nowrap numa tela de 390px:
     metade dela ficava fora. Agora quebra em duas linhas. */
  .hero__eyebrow {
    font-size: 15px !important;
    white-space: normal !important;
    max-width: 19ch;
    margin-inline: auto !important;
    line-height: 1.35 !important;
  }

  /* A assinatura do hero passava ~50px da borda direita. */
  .hero__where {
    font-size: 15px !important;
  }

  /* "PROJETOS EM DESTAQUE" tem 407px de texto e era cortado nas duas pontas. */
  .featured__title {
    font-size: 15.5vw !important;
  }

  /* O e-mail do rodape ocupava 380px de 390 e encostava nas bordas. */
  .outro__mail {
    font-size: 16px !important;
  }

  /* Nenhum projeto tem screenshot ainda: no celular o slider aparece como
     um retangulo branco vazio ocupando meia tela. Enquanto as imagens nao
     existirem, esconde a area de imagem do projeto. Some sozinho quando
     um screenshot de verdade for adicionado. */
  .work__slider:has(img[src*="empty-1200"]) {
    display: none !important;
  }

  /* Espaco para a barra de navegacao nao cobrir o "© 2026". */
  .outro {
    padding-bottom: 84px !important;
  }
}

/* O CSS original esconde o menu abaixo de 640px, o que deixa o site
   sem nenhuma navegacao no celular. Aqui ele volta como barra inferior:
   nao briga com o logo e fica no alcance do polegar. */
@media (max-width: 40rem) {
  .hero__nav {
    display: flex !important;
    position: fixed !important;
    left: 50% !important;
    top: auto !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    translate: -50% 0 !important;
    padding: 4px !important;
    gap: 0 !important;
    max-width: calc(100vw - 24px);
    box-shadow: 0 10px 30px rgba(30, 21, 16, 0.16) !important;
  }

  .hero__nav a {
    font-size: 11.5px !important;
    padding: 9px 11px !important;
    gap: 5px !important;
  }

  .hero__nav a .nav-icon {
    width: 13px;
    height: 13px;
  }
}

/* A historia rolavel (FOCO / TECNICA / ESCUTA / VALIDACAO) ocupava ~7 telas
   no celular, com muito espaco vazio entre um estagio e outro. Comprimida,
   as mesmas 4 etapas cabem em ~5 telas. */
@media (max-width: 40rem) {
  .section--focus {
    --story-scale: 0.52 !important;
  }
}



/* ============================================================
   FOCO  Dither Effect (assets/foco-dither.js)
   Fundo animado da etapa FOCO, com titulo e descricao centralizados.
   ============================================================ */

/* sem o gradiente roxo de fallback da cena antiga */
.focus__unicorn[data-foco-dither] {
  background: none !important;
}

.foco-dither {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

/* titulo e descricao no meio, legiveis sobre o fundo claro */
.focus__title {
  top: calc(50% - 58px) !important;
  color: #7C7468 !important;
}

.story__note.story__note--focus {
  top: calc(50% + 30px) !important;
  color: #7C7468 !important;
  text-shadow: 0 0 2px #FAF9F5, 0 0 10px #FAF9F5, 0 0 22px #FAF9F5 !important;
}

@media (max-width: 40rem) {
  .focus__title {
    top: calc(50% - 50px) !important;
  }

  .story__note.story__note--focus {
    top: calc(50% + 2px) !important;
  }
}


/* ============================================================
   PROJETOS  Carrossel (assets/projetos-carousel.js, Skiper UI 49)
   Coverflow com perspectiva: laterais giradas, sombras e paginacao.
   ============================================================ */
.hl-carousel {
  /* telas dos projetos sao paisagem (~1530x890) */
  --hl-slide-w: min(62vw, 780px);
  --hl-ratio: 1.72;
  position: relative;
  width: 100%;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease 0.5s, transform 0.3s ease 0.5s;
}

.hl-carousel.is-ready {
  opacity: 1;
  transform: none;
}

/* altura = slide + 50px de respiro para a paginacao (box-sizing do site e border-box) */
.hl-carousel__swiper {
  width: 100%;
  height: calc(var(--hl-slide-w) / var(--hl-ratio) + 50px);
  padding-bottom: 50px !important;
}

.hl-carousel__slide {
  width: var(--hl-slide-w);
  border-radius: 20px;
  overflow: hidden;
  background: #eae7df;
}

.hl-carousel__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.hl-carousel .swiper-pagination-bullet {
  background-color: #7C7468 !important;
}

@media (max-width: 40rem) {
  .hl-carousel {
    --hl-slide-w: 80vw;
  }
}


/* Projetos sem fotos: slides vazios, so o efeito do carrossel */
.hl-carousel__slide--vazio {
  background: linear-gradient(160deg, #efece5 0%, #e6e2d9 100%);
  box-shadow: inset 0 0 0 1px rgba(124, 116, 104, 0.14);
}


/* ============================================================
   PROJETOS  Transicao entre projetos (assets/projetos-transicao.js)
   Cada projeto ocupa uma tela; o atual fica fixo e encolhe enquanto o
   proximo sobe por cima. A altura (100vh) e definida pelo JS.
   ============================================================ */
.work--stack .work__item--stack {
  position: relative;
  overflow: hidden;
  min-height: 0;
  /* mesmo fundo da secao: o projeto que entra cobre o que sai */
  background-color: var(--color-bg);
}

/* conteudo maior que a tela: comeca do topo para poder rolar por dentro */
.work--stack .work__item--stack.is-tall {
  justify-content: flex-start;
}

/* involucro interno: mantem o alinhamento que o projeto ja tinha */
.work__panel {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: inherit;
}

/* PROJETOS NO CELULAR: cada projeto ocupa uma tela (transicao entre projetos),
   mas o conteudo tem ~520-640px; alinhado no topo sobravam 250-400px vazios
   embaixo do carrossel. Centraliza na vertical (exceto conteudo maior que a tela). */
@media (max-width: 47.9375rem) {
  .work--stack .work__item--stack:not(.is-tall) {
    justify-content: center;
  }
}