/* Seção 1: header + hero (nó 63:192) — referencia/figma-dados/secao1-hero.md
   Medidas do Figma a 1440px nos comentários. */

/* ---------- Header (4:13) ----------
   Fixo no topo. No início da página fica igual ao Figma (88px); depois de rolar vira
   compacto (64px); some ao rolar para baixo e volta ao rolar para cima (js/main.js). */
.header {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  background: var(--creme-kalina);
  border-bottom: var(--linha-grade) solid var(--fundo-cinza);
  transition: transform 0.35s ease;
}

/* A linha vertical da grade continua atravessando o header */
.header::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: var(--trilho-x);
  width: var(--linha-grade);
  background: var(--fundo-cinza);
  pointer-events: none;
}

.header.is-oculto {
  transform: translateY(-100%);
}

/* O header fixo não ocupa espaço: o corpo começa 88px abaixo */
body {
  padding-top: var(--header-altura);
}

.header__interno {
  display: flex;
  align-items: center;
  height: calc(var(--header-altura) - var(--linha-grade));   /* 88 com a borda */
  transition: height 0.35s ease;
  padding-left: calc(var(--conteudo-x) - 4px);   /* logo em x 140 */
  padding-right: clamp(20px, 8.2vw, 118px);      /* seta termina a 118 da borda */
}

/* Logo: posições internas copiadas do Figma (35:3) */
.logo-nome {
  position: relative;
  flex: none;
  width: 164px;
  height: 28px;
  color: var(--navy-kalina);
  font-family: var(--fonte-logo);
  font-weight: 500;
  font-size: 23.383px;
  line-height: 1;
}

.logo-nome__texto {
  position: absolute;
  top: 1px;
  left: 0;
}

.logo-nome__texto + .logo-nome__simbolo + .logo-nome__texto {
  left: 91.11px;
}

.logo-nome__simbolo {
  position: absolute;
  top: 3.47px;
  left: 68.73px;
  width: 20.494px;
  height: 20.825px;
}

.header__divisor {
  flex: none;
  width: 0.5px;
  height: 45px;
  margin-left: 16.5px;
  background: var(--texto-claro);
}

.header__tagline {
  flex: none;
  width: 166px;
  margin-left: 32px;
  color: var(--texto-claro);
  font-family: var(--fonte-mono);
  font-weight: 300;
  font-size: var(--fs-etiqueta-g);   /* 15 */
  line-height: normal;
  text-transform: uppercase;
}

.menu {
  margin-left: clamp(24px, 5.97vw, 86px);
}

.menu__lista {
  display: flex;
  gap: 25px;
}

.menu__lista a {
  display: block;
  min-width: 74px;
  color: var(--navy-kalina);
  font-weight: 500;
  font-size: var(--fs-corpo);
  line-height: var(--lh-32);
  text-align: center;
}

.vamos-conversar {
  display: flex;
  white-space: nowrap;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  color: var(--navy-kalina);
  font-family: var(--fonte-mono);
  font-size: var(--fs-botao);   /* 13 */
  line-height: normal;
  text-transform: uppercase;
}

.vamos-conversar__texto {
  padding: 5px 6px;   /* sublinhado de 129px */
  border-bottom: 0.5px solid var(--texto-claro);
}

.seta--20 {
  width: 20px;
  height: 20px;
}

.menu-botao {
  display: none;
}

/* Compacto (depois de rolar): 64px, sem "Desenvolvimento de sites" */
.header.is-compacto .header__interno {
  height: calc(64px - var(--linha-grade));
}

.header.is-compacto .header__tagline,
.header.is-compacto .header__divisor {
  display: none;
}

.header.is-compacto .menu {
  margin-left: auto;
}

.header.is-compacto .vamos-conversar {
  margin-left: clamp(24px, 4vw, 56px);
}

/* Item do menu da seção atual: sublinhado dourado (acompanha a largura da palavra) */
.menu__lista a {
  text-decoration: underline 1px transparent;
  text-underline-offset: 6px;
  transition: text-decoration-color 0.3s ease;
}

.menu__lista a[aria-current="true"] {
  text-decoration-color: var(--dourado-kalina);
}

/* ---------- Seção 1 ---------- */
.secao1-hero {
  position: relative;
  overflow-x: clip;   /* corta o carrossel na lateral, mas deixa a diagonal descer sobre a faixa do portfólio */
  background: var(--creme-kalina);
}

.hero-corpo {
  position: relative;
}

.hero-corpo__interno {
  display: grid;
  grid-template-columns: minmax(0, min(564px, 45.6%)) minmax(0, 1fr);   /* 564 + 673 a 1440 */
  min-height: 672px;
  padding-left: var(--conteudo-x);
  padding-right: var(--margem-dir);
}

/* Coluna esquerda (10:16) */
.hero {
  padding-top: 101px;
}

.hero__titulo {
  max-width: 7.3em;                  /* 466 a 64px */
  font-size: var(--fs-display-xl);   /* 64 */
  line-height: 1.23;                 /* "normal" da Fraunces: ~79px a 64px */
  color: var(--navy-kalina);
}

/* Bloco navy com textura atrás de "próprio" (19:119): 243x74, 9px à esquerda e 12px abaixo do topo da linha */
.hero__destaque {
  position: relative;
  z-index: 0;
  color: var(--branco);
  white-space: nowrap;
}

.hero__destaque::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.14em;
  top: 0.19em;
  width: 3.8em;
  height: 1.156em;
  background: url("../../img/destaque-proprio.svg") no-repeat 0 0 / 100% 100%;
}

/* Cursor (21:238): linha branca de 52px logo depois da palavra */
.cursor-piscando {
  position: absolute;
  top: 0.34em;
  right: -0.03em;
  width: 1px;
  height: 0.8125em;
  background: var(--branco);
  animation: cursor-piscar 1.06s steps(1) infinite;
}

@keyframes cursor-piscar {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-piscando {
    animation: none;
  }
}

.hero__texto {
  max-width: 440px;
  margin-top: 19px;
  color: var(--texto-claro);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

.hero__botoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 39px;
  margin-top: 31px;
}

.botao-solucoes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  height: 50px;
  padding: 0 29px;
  background: var(--dourado-kalina);
  color: var(--navy-kalina);
  font-family: var(--fonte-mono);
  font-size: var(--fs-botao);
  line-height: 1;
  text-transform: uppercase;
}

.botao-portfolio {
  padding: 7.5px 0;
  border-bottom: 1px solid var(--texto-claro);
  color: var(--navy-kalina);
  font-family: var(--fonte-mono);
  font-size: var(--fs-botao);
  line-height: normal;
  text-transform: uppercase;
}

/* Coluna direita (43:254) */
.solucoes-hero {
  position: relative;
  min-width: 0;
  padding-top: 258px;   /* título em y 346 */
}

.boas-ideias-art {
  position: absolute;
  top: 3px;
  left: min(76.08%, 512px);   /* x 1220 a 1440 */
  height: 161px;
  padding-left: 19px;
  border-left: 1px solid var(--navy-kalina);
  color: var(--cinza-texto);
}

.boas-ideias-art__losango {
  position: absolute;
  top: 53px;
  left: 22.5px;
  width: 12.338px;
  height: 12.338px;
  background: var(--dourado-kalina);
  transform: rotate(45deg);
}

.boas-ideias-art .etiqueta {
  width: 62px;
  margin-top: 81px;
  line-height: 16px;
}

.nossas-solucoes-line {
  display: flex;
  align-items: center;
  height: 25px;
}

.nossas-solucoes-line__titulo {
  flex: none;
  color: var(--texto-claro);
  letter-spacing: 0.6px;
}

.nossas-solucoes-line__linha {
  flex: 1;
  height: 1px;
  margin: 0 16px 0 25px;
  background: var(--logo-claro);
}

.nossas-solucoes-line__setas {
  display: flex;
  gap: 17px;
}

.carrossel-seta {
  display: block;
  color: var(--cinza-texto);
}

/* Carrossel: vai até a borda direita da janela, como no Figma (cards cortados a 1440) */
.carrossel {
  position: relative;
  margin-top: 21px;
  margin-right: calc(-1 * var(--margem-dir));
}

.carrossel__trilha {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-right: var(--fade-largura);
  scroll-padding-right: var(--fade-largura);
  --fade-largura: clamp(48px, 10.9vw, 157px);
}

.carrossel__trilha::-webkit-scrollbar {
  display: none;
}

.solucao-card {
  --icone-linha: var(--navy-kalina);
  --icone-destaque: var(--dourado-kalina);
  --card-titulo: var(--navy-kalina);
  --card-seta: var(--texto-claro);
  position: relative;
  flex: none;
  display: grid;
  grid-template-rows: 59px 51px auto;   /* ícone em +22, título em +81, texto em +132 */
  width: 157px;
  height: 244px;
  padding: 21px 10px 11px 13px;
  border: 1px solid var(--logo-claro);
  background: var(--creme-kalina);
  color: var(--texto-claro);
  scroll-snap-align: start;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.solucao-card__icone {
  align-self: start;
  height: auto;
}

.solucao-card__icone .l {
  stroke: var(--icone-linha);
  transition: stroke 0.3s;
}

.solucao-card__icone .d {
  fill: var(--icone-destaque);
  transition: fill 0.3s;
}

.solucao-card__titulo {
  width: var(--titulo-largura, 114px);
  color: var(--card-titulo);
  font-size: var(--fs-card-titulo);
  line-height: normal;
  transition: color 0.3s;
}

/* Larguras do Figma que diferem do padrão (ficavam no HTML; saíram para a política de segurança CSP) */
.site-profissional-card .solucao-card__titulo { --titulo-largura: 116px; }
.site-equipes-card .solucao-card__titulo { --titulo-largura: 130px; }
.landing-page-card .solucao-card__titulo { --titulo-largura: 96px; }

.solucao-card__texto {
  width: 132px;
  font-size: var(--fs-card-texto);
  line-height: var(--lh-15);
}

.solucao-card__link {
  color: var(--card-seta);
  transition: color 0.3s;
}

.solucao-card__link .seta {
  position: absolute;
  right: 12px;   /* seta em x+119, y+207 */
  bottom: 11px;
}

/* O card inteiro é clicável */
.solucao-card__link::after {
  content: "";
  position: absolute;
  inset: -1px;
}

/* Identidade visual: card navy (ícone com linhas douradas e destaque creme) */
.solucao-card--navy {
  --icone-linha: var(--dourado-kalina);
  --icone-destaque: var(--creme-kalina);
  --card-titulo: var(--creme-kalina);
  --card-seta: var(--creme-kalina);
  background: var(--navy-kalina);
  color: var(--creme-kalina);
}

/* Card selecionado (automático a cada 5s, ou sob o mouse/foco): como "Site para equipes" no Figma */
.solucao-card.is-ativo {
  --icone-linha: var(--creme-kalina);
  --icone-destaque: var(--navy-kalina);
  --card-titulo: var(--navy-kalina);
  --card-seta: var(--navy-kalina);
  border-color: var(--fundo-claro);
  background: var(--dourado-kalina);
  color: var(--navy-kalina);
}

/* Degradê que some com o card cortado na borda (41:227) */
.fade-away-bloco-solucoes {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: clamp(48px, 10.9vw, 157px);
  background: linear-gradient(to right, rgb(250 248 242 / 0), var(--creme-kalina) 54.808%);
  pointer-events: none;
  transition: opacity 0.2s;
}

.carrossel.is-fim .fade-away-bloco-solucoes {
  opacity: 0;
}

/* Barra de progresso + "Deslize para ver mais" (43:253) */
.ver-mais-roll {
  display: flex;
  align-items: center;
  gap: 25px;   /* texto em x 1225, 25px depois da barra */
  margin-top: 30px;
}

.ver-mais-roll__barra {
  position: relative;
  flex: 0 1 73.1%;   /* 492 de 673 */
  height: 4px;
  background: var(--fundo-cinza);
}

.ver-mais-roll__progresso {
  position: absolute;
  top: 0;
  left: calc(var(--progresso, 0) * 83.74%);
  width: 16.26%;   /* 80 de 492 */
  height: 100%;
  background: var(--logo-claro);
}

.ver-mais-roll__texto {
  color: var(--cinza-texto);
  white-space: nowrap;
}

/* Diagonal do canto inferior esquerdo (63:170): passa pelo cruzamento do trilho com a faixa */
.hero-diagonal {
  position: absolute;
  z-index: 1;
  left: calc(var(--trilho-x) - 99px);
  bottom: -67px;   /* 97px acima da faixa, 67px dentro dela (a faixa abre o portfólio) */
  width: 164px;
  height: 164px;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 1.5px),
    var(--fundo-cinza) calc(50% - 1.5px),
    var(--fundo-cinza) calc(50% + 1.5px),
    transparent calc(50% + 1.5px)
  );
  pointer-events: none;
}

/* ---------- Desktop: o hero cabe na janela (até a faixa cinza) ----------
   Altura do Figma (672) quando cabe; em janelas mais baixas encolhe até 570,
   e os respiros verticais encolhem junto (--hero-k = quanto falta para 672) */
@media (min-width: 1024px) {
  .hero-corpo__interno {
    --hero-h: clamp(570px, calc(100svh - 88px), 672px);
    --hero-k: calc(672px - var(--hero-h));
    min-height: var(--hero-h);
  }

  .hero {
    padding-top: calc(101px - var(--hero-k) * 0.55);
  }

  .solucoes-hero {
    padding-top: calc(258px - var(--hero-k) * 0.5);
  }

  .boas-ideias-art {
    height: calc(161px - var(--hero-k) * 0.5);
  }

  .boas-ideias-art__losango {
    top: calc(53px - var(--hero-k) * 0.4);
  }

  .boas-ideias-art .etiqueta {
    margin-top: calc(81px - var(--hero-k) * 0.5);
  }
}

/* ---------- Até 1439px: o desktop encolhe ---------- */
@media (max-width: 1279px) {
  .header__tagline,
  .header__divisor {
    display: none;
  }

  .menu {
    margin-left: auto;
  }

  .vamos-conversar {
    margin-left: clamp(24px, 4vw, 56px);
  }
}

/* ---------- Tablet e celular: menu recolhido ---------- */
@media (max-width: 1023px) {
  .header__interno {
    padding-left: var(--conteudo-x);
  }

  .menu-botao {
    display: flex;
    align-items: center;
    height: 44px;
    margin-left: auto;
    padding: 0 4px;
    color: var(--navy-kalina);
    font-family: var(--fonte-mono);
    font-size: var(--fs-botao);
    text-transform: uppercase;
  }

  .menu-botao__texto {
    padding: 5px 0;
    border-bottom: 0.5px solid var(--texto-claro);
  }

  .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 16px var(--margem-dir) 24px var(--conteudo-x);
    background: var(--creme-kalina);
    border-bottom: var(--linha-grade) solid var(--fundo-cinza);
  }

  .menu.is-aberto {
    display: block;
  }

  .menu__lista {
    flex-direction: column;
    gap: 4px;
  }

  .menu__lista a {
    min-width: 0;
    padding: 6px 0;
    text-align: left;
  }

  .vamos-conversar {
    order: 1;
    margin-left: auto;
  }

  .menu-botao {
    order: 2;
    margin-left: 32px;
  }
}

/* ---------- Tablet e celular: uma coluna ---------- */
@media (max-width: 1023px) {
  .hero-corpo__interno {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding-bottom: 48px;
  }

  .hero {
    padding-top: 64px;
  }

  .hero__titulo {
    max-width: 10em;
  }

  .solucoes-hero {
    padding-top: 56px;
  }

  .boas-ideias-art {
    display: none;
  }

  /* Com o texto da faixa quebrando em várias linhas, a diagonal para na borda da faixa */
  .hero-corpo {
    overflow: hidden;
  }

  .hero-diagonal {
    bottom: -64px;
  }
}

/* ---------- Celular ---------- */
@media (max-width: 767px) {
  .vamos-conversar {
    display: none;
  }

  .menu-botao {
    margin-left: auto;
  }

  .hero {
    padding-top: 48px;
  }

  .hero__titulo {
    max-width: none;
  }

  .hero__texto {
    margin-top: 20px;
  }

  .hero__botoes {
    margin-top: 32px;
    gap: 24px 32px;
  }

  .ver-mais-roll__barra {
    flex: 1 1 auto;
  }

}