/* =====================================================================
   VALENTEC — Página Início (index.html)
   ---------------------------------------------------------------------
   Estilos exclusivos da Home. Tokens globais (--ease, --r, --pad, --hh,
   --grad, --brand, --hero-pos*) vêm do CSS base do site.

   Organização: cada seção traz suas regras e, logo abaixo, as media
   queries dela (mobile junto do componente, fácil de achar e manter).

   Breakpoints usados (max-width):
     1200px  desktop pequeno
     1024px  tablet paisagem
      820px  tablet retrato
      760px  mobile grande (seção Tecnologia)
      720px  mobile
      380px  mobile pequeno

   ÍNDICE
     1. Utilitários da Home (título .d2, cabeçalho de seção, imagens de fundo)
     2. Hero
     3. Faixa de marcas (marquee)
     4. Bandas com foto + pilares (Como trabalhamos)
     5. Pessoas
     6. Soluções
     7. Tecnologia — "Da ideia ao produto digital"
     8. Animações de entrada
   ===================================================================== */


/* =====================================================================
   1. UTILITÁRIOS DA HOME
   ===================================================================== */

/* Título display secundário */
.d2 {
  font-size: clamp(40px, 5.4vw, 92px);
  line-height: .94;
  letter-spacing: -.05em;
  font-weight: 500;
}

/* Cabeçalho editorial de seção: título à esquerda + texto lateral */
.s-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 96px);
}
.s-head h2    { grid-column: 1 / span 8; }
.s-head .side { padding-bottom: .3em; }

/* Imagem de fundo genérica (hero, bandas, pessoas) */
.bgimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .s-head h2,
  .s-head .side { grid-column: 1 / -1; }
  .s-head .side { margin-top: 24px; }
}

@media (max-width: 720px) {
  .d2           { font-size: clamp(38px, 10.5vw, 56px); }
  .s-head       { margin-bottom: 36px; }
  .s-head .side { margin-top: 16px; font-size: 16px; }
}


/* =====================================================================
   2. HERO
   ===================================================================== */

/* 2.1 Estrutura base (hero com <img> de fundo) */
.hero .bgimg { z-index: -2; }

.hero .bgimg img {
  transform: scale(1.12);
  transition: transform 2.6s var(--ease);
}
.hero.ready .bgimg img { transform: scale(1); }

.hero-in {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--hh) + 60px);
  padding-bottom: clamp(40px, 5vw, 72px);
}

/* 2.2 Variante com foto (a imagem entra via ::before + overlays azuis) */
.hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(180deg, rgba(2, 11, 28, .62) 0%, rgba(2, 11, 28, .2) 14%, rgba(2, 11, 28, 0) 26%),   /* escurece o topo (menu) */
    linear-gradient(90deg,  rgba(2, 11, 28, .94) 0%, rgba(2, 11, 28, .84) 28%, rgba(4, 20, 52, .55) 50%,
                            rgba(6, 28, 74, .16) 74%, rgba(2, 11, 28, .06) 100%),                          /* legibilidade do texto */
    linear-gradient(0deg,   rgba(2, 11, 28, .6) 0%, rgba(2, 11, 28, 0) 28%),                              /* base */
    url("../../images/home/hero-home.webp");
  background-size: cover;
  background-position: center, center, center, var(--hero-pos);
  background-repeat: no-repeat;
}

/* Zoom suave da foto quando a página fica visível */
[data-page]:not([hidden]) .hero--photo::before {
  animation: phZoom 2.8s var(--ease) both;
}

.hero--photo .hero-in {
  justify-content: center;
  padding-top: calc(var(--hh) + 32px);
  padding-bottom: 56px;
}

.hero--photo .hero-title,
.hero--photo .hero-text,
.hero--photo .hero-eyebrow {
  text-shadow: 0 1px 16px rgba(0, 0, 0, .25);
}

/* 2.3 Conteúdo */
.hero-copy { max-width: clamp(560px, 46vw, 780px); }

.hero-eyebrow {
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
}
.hero-eyebrow::before { display: none; } /* remove o traço herdado do CSS base */

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

/* 2.4 Responsivo */
@media (max-width: 1024px) {
  .hero--photo::before {
    background-image:
      linear-gradient(180deg, rgba(2, 11, 28, .55) 0%, rgba(2, 11, 28, 0) 22%),
      linear-gradient(90deg,  rgba(2, 11, 28, .92) 0%, rgba(2, 11, 28, .74) 45%,
                              rgba(4, 20, 52, .3) 80%, rgba(2, 11, 28, .12) 100%),
      url("../../images/home/hero-home.webp");
    background-position: center, center, var(--hero-pos-t);
  }
  .hero-copy { max-width: 560px; }
}

@media (max-width: 820px) {
  .hero--photo { min-height: clamp(650px, 100svh, 850px); }

  /* No mobile usamos a foto vertical e um único overlay de baixo para cima */
  .hero--photo::before {
    background-image:
      linear-gradient(0deg, rgba(2, 11, 28, .96) 0%, rgba(2, 11, 28, .86) 40%,
                            rgba(4, 20, 52, .3) 66%, rgba(2, 11, 28, .45) 100%),
      url("../../images/home/hero-home-mobile.webp");
    background-position: center, var(--hero-pos-m);
  }
  .hero--photo .hero-in {
    justify-content: flex-end;
    padding-bottom: 40px;
  }
  .hero-text { font-size: 15.5px; }
}

@media (max-width: 720px) {
  .hero--photo            { min-height: clamp(650px, 100svh, 750px); }
  .hero--photo .hero-in   { padding-bottom: 32px; }
  .hero--photo .hero-title { margin-top: 14px; }
  .hero-text              { margin-top: 14px; }
  .hero-actions           { margin-top: 24px; }
  .hero-actions .btn {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 380px) {
  .hero--photo .hero-title { font-size: 32px; }
}


/* =====================================================================
   3. FAIXA DE MARCAS (MARQUEE)
   ===================================================================== */
.marq-track {
  display: flex;
  gap: 40px;
  width: max-content;
  animation: marq 40s linear infinite;
}

/* Separador entre os itens */
.marq span::after {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: rgba(140, 188, 255, .6);
}

.marq-band .marq              { padding: 26px 0; }
.marq-band .marq span::after  { background: var(--brand); }


/* =====================================================================
   4. BANDAS COM FOTO + PILARES ("Como trabalhamos")
   ===================================================================== */

/* 4.1 Banda genérica */
.band .bgimg { z-index: -2; }

.band-in {
  min-height: clamp(640px, 90vh, 960px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 80px;
  padding-block: clamp(110px, 12vw, 180px);
}

.band h2 { max-width: 11em; }

/* 4.2 Pilares */
.pillar h3 {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.025em;
}

/* 4.3 Seção "Como trabalhamos" (.how) */
.how .band-in {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 6vw, 88px);
  padding-block: clamp(96px, 10vw, 150px);
}

.how h2 {
  margin-top: 0;
  max-width: 12em;
  font-size: clamp(36px, 4.4vw, 70px);
}

.how .pillars {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.how .pillar {
  gap: 10px;
  padding-top: 26px;
}
.how .pillar h3 { margin-top: 0; }

/* 4.4 Responsivo */
@media (max-width: 1200px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .band-in  { min-height: 0; }
  .pillars  { grid-template-columns: 1fr; }
  .pillar   { min-height: 0; }

  .how .band-in {
    padding-block: 72px;
    gap: 40px;
  }
  .how h2 { font-size: clamp(32px, 9vw, 40px); }

  .how .pillar {
    display: block;
    padding: 26px 20px 22px;
  }
  .how .pillar .n  { padding-top: 4px; }
  .how .pillar h3  { font-size: 18px; }
  .how .pillar p   { font-size: 14.5px; }
}


/* =====================================================================
   5. PESSOAS (foto real da equipe + texto)
   ===================================================================== */
.people .bgimg img {
  object-position: right center;
  transform: scaleX(-1);
}

.people-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  align-items: center;
}

.people .people-media { box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .7); }

.people-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.people-body { grid-column: 9 / -1; }

.people-body h2 {
  margin-top: 0;
  font-size: clamp(34px, 3.6vw, 58px);
}
.people-body .lead { margin-top: 22px; }

@media (max-width: 1024px) {
  .people-media,
  .people-body { grid-column: 1 / -1; }
  .people-body { margin-top: 44px; }
}

@media (max-width: 720px) {
  .people .bgimg img { opacity: .35; }
  .people-body       { margin-top: 36px; }
  .people-body h2    { font-size: clamp(32px, 9vw, 40px); }
  .people-list li    { padding: 14px 0; }
}


/* =====================================================================
   6. SOLUÇÕES
   ===================================================================== */
.sol-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(28px, 3.4vw, 56px);
  row-gap: clamp(36px, 4vw, 56px);
}

.sol-ic {
  display: block;
  align-self: flex-start;
}
.sol-ic svg {
  width: 24px;
  height: 24px;
}

.sol h3 {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.025em;
  transition: color .3s;
}

/* Link "Saiba mais": sublinhado simples */
.sol-more {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.sol-more svg {
  width: 16px;
  height: 16px;
  transition: transform .4s var(--ease);
}

/* Hover: só a seta anda; o card não levanta nem ganha sombra */
.sol:hover {
  transform: none;
  box-shadow: none;
}
.sol:hover .sol-more svg { transform: translateX(4px); }

@media (max-width: 1024px) {
  .sol-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .sol-grid      { grid-template-columns: 1fr; }
  .solutions h2  { font-size: clamp(32px, 9vw, 40px); }
  .sol h3        { font-size: 19px; }
  .sol-more      { padding-top: 8px; }
}


/* =====================================================================
   7. TECNOLOGIA — "Da ideia ao produto digital"
   ===================================================================== */
.tech { padding-block: clamp(100px, 9vw, 130px); }

.tech .tech-grid {
  display: grid;
  grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
  column-gap: clamp(56px, 6.5vw, 96px);
  align-items: center;
  max-width: calc(1240px + var(--pad) * 2);
}

.tech .tech-body,
.tech .tech-media { grid-column: auto; }

/* 7.1 Texto */
.tech .tech-title {
  margin-top: 0;
  max-width: 9em;
  font-size: clamp(44px, 4.4vw, 62px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.04em;
  color: #081226;
  text-wrap: balance;
}

.tech .lead {
  margin-top: 22px;
  max-width: 32em;
  font-size: 18px;
  line-height: 1.6;
  color: #64748b;
}

/* 7.2 Lista de recursos (ícone + título + descrição) */
.tech .tech-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 28px;
  margin-top: 40px;
}

.tech .tech-list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
}

.tech .tech-list .ti {
  width: 40px;
  height: 40px;
  background: #fff;
  border: 1px solid #d8dee8;
  color: #2878f0;
}
.tech .tech-list .ti svg {
  width: 19px;
  height: 19px;
}

.tech .tech-list b {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  color: #081226;
}
.tech .tech-list span {
  font-size: 14.5px;
  color: #64748b;
}

/* 7.3 Imagem */
.tech .tech-media {
  margin: 0;
  aspect-ratio: 7 / 5;
  overflow: hidden;
  border-radius: 18px;
  background: #dfe5ee;
  box-shadow: 0 20px 50px rgba(8, 18, 38, .12);
}

.tech .tech-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 60%;
  transition: transform 400ms ease;
}

@media (hover: hover) {
  .tech .tech-media:hover img { transform: scale(1.015); }
}

/* 7.4 Responsivo */
@media (max-width: 1024px) {
  .tech .tech-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 40px;
  }
  .tech .tech-title { font-size: clamp(38px, 4.6vw, 48px); }
  .tech .lead       { font-size: 16.5px; }
  .tech .tech-list {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 30px;
  }
}

@media (max-width: 760px) {
  .tech { padding-block: 80px 88px; }
  .tech .tech-grid { grid-template-columns: 1fr; }
  .tech .tech-title {
    max-width: none;
    font-size: clamp(34px, 9.4vw, 42px);
  }
  .tech .lead { font-size: 16px; }
  .tech .tech-list { margin-top: 28px; }
  .tech .tech-media {
    margin-top: 40px;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
    box-shadow: 0 14px 36px rgba(8, 18, 38, .12);
  }
  .tech .tech-media img { object-position: 57% 58%; }
}


/* =====================================================================
   8. ANIMAÇÕES DE ENTRADA
   (só rodam com JS ativo: a classe .js é adicionada no <html>)
   ===================================================================== */

/* 8.1 Hero: itens sobem em sequência (--d = ordem do item) */
.js .hero-copy > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease, transform .8s ease;
  transition-delay: calc(var(--d, 0) * 110ms);
}
.js .hero.ready .hero-copy > * {
  opacity: 1;
  transform: none;
}

/* O título tem animação própria (palavra por palavra), então fica fora da sequência */
.js .hero-copy > .hero-title {
  opacity: 1;
  transform: none;
  transition: none;
}

/* 8.2 Seção Tecnologia (--i = ordem do item) */
.tech-anim .tech-a {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.tech-anim.is-in .tech-a {
  opacity: 1;
  transform: none;
}

/* 8.3 Revelação de imagens desativada na Home (imagens aparecem direto) */
.js .rv-img,
.js .rv-img.in {
  clip-path: none;
  transition: none;
}