/* ==========================================================================
   Home
   ========================================================================== */

/* --- Cabeçalho de seção --------------------------------------------------- */

.section__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  margin-inline: auto;
  margin-bottom: var(--space-16);
  text-align: center;
}

.section__head--tight { margin-bottom: var(--space-12); }

@media (max-width: 700px) {
  .section__head { margin-bottom: var(--space-8); }
  .section__head--tight { margin-bottom: var(--space-8); }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  /* Entalhe da base: a curva vem de assets/img/hero-mask.svg, o recorte do
     hero no Figma. Lá ela mede 241 x 59 no canvas de 1728, então a altura é
     derivada da largura para o traçado nunca distorcer. */
  --hero-notch-w:  clamp(160px, 13.95vw, 241px);
  --hero-notch-h:  calc(var(--hero-notch-w) * 59 / 241);
  /* O ícone do mouse vale 65% da altura do domo — a proporção do design. O
     arquivo exportado (assets/img/icon-scroll-hero.svg) tem 50px, o tamanho do
     componente; dentro do hero a instância aparece menor. Derivar do domo
     mantém o encaixe igual em qualquer largura. */
  --hero-scroll-h: calc(var(--hero-notch-h) * .65);

  /* Sangria de 2 unidades do viewBox por baixo da base, para o domo e a seção
     seguinte não deixarem um fio da cor do hero entre eles. */
  --hero-notch-bleed: calc(var(--hero-notch-w) * 2 / 241);

  /* O path do Figma transladado para a origem (menos o retângulo do hero) e
     estendido 2 unidades abaixo da base, a sangria acima. */
  --hero-notch-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 241 61' preserveAspectRatio='none'%3E%3Cpath d='M241 59C193.5 59 171.92-.52 119 0 67.132.51 45 59 0 59v2h241z'/%3E%3C/svg%3E");

  position: relative;
  /* min-height: calc(100vh - 60px); */
  min-height: 600px;
  height: min(876px, 92svh);
  display: grid;
  color: var(--c-white);
  background: #06122c;
  isolation: isolate;
}

/* O zoom lento das imagens (animations.js) as faz transbordar a caixa; com o
   hero mais baixo que a viewport, esse excesso apareceria sob o entalhe. */
/* min-width: 0 nos dois: a coluna implícita do .hero é dimensionada pelo
   min-content do maior item, e com o min-width: auto que o grid dá por padrão
   o viewport reportava a largura da foto, não a da tela — a home ganhava
   rolagem lateral no estreito (WCAG 1.4.10). A foto continua sangrando; quem
   a corta é o overflow: clip. */
.hero__viewport {
  display: grid;
  grid-area: 1 / 1;
  min-width: 0;
  overflow: clip;
}

.hero__slide {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  min-width: 0;
  align-content: end;
  padding-bottom: clamp(var(--space-24), 14vh, 132px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s var(--ease), visibility .8s;
}
.hero__slide.is-active { opacity: 1; visibility: visible; }

.hero__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* O cabeçalho tem sua própria proteção. Ela segura 56% de preto em toda a
   faixa ocupada pelo logo e pelo menu e desaparece logo abaixo, deixando o
   restante da fotografia livre. */
.hero__slide::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: 160px;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, .56) 0 60%,
    rgba(0, 0, 0, 0) 100%);
}

/* Proteção contínua no plano da fotografia, como no layout do Figma. O
   centro do degradê cobre a região de leitura no canto inferior esquerdo e
   se dissolve pelo hero inteiro, sem criar caixas por título ou parágrafo. */
.hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    ellipse 110% 85% at left bottom,
    rgba(0, 0, 0, .56) 0 42%,
    rgba(0, 0, 0, .28) 68%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 0;
  display: grid;
  gap: var(--space-6);
}

.hero__title {
  width: fit-content;
  max-width: 17.5ch;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);   /* o hero usa The Seasons Bold */
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  color: var(--c-white);
}

.hero__text {
  width: fit-content;
  max-width: 47ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-white);
}

/* --- Controles do carrossel ---------------------------------------------- */

.hero__ui {
  grid-area: 1 / 1;
  z-index: 2;
  align-self: end;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-bottom: var(--space-8);
}

.hero__dots { display: flex; gap: var(--space-3); }

@media (max-width: 700px) {
    .hero__ui {
        padding-bottom: var(--space-12);
    }
    .hero__dots {
        gap: var(--space-2);
    }
}

/* Pausar/retomar o avanço automático. Segue a linguagem dos indicadores —
   mesmo disco de 32px, mesmo véu translúcido — porque é da mesma família de
   controle; o que muda é o ícone. O main.js o esconde quando não há avanço. */
.hero__toggle {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .56);
  color: var(--c-white);
  transition: background var(--dur) var(--ease);
}
.hero__toggle:hover { background: rgba(0, 0, 0, .68); }

.hero__toggle-icon {
  display: none;
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Tocando, o botão oferece pausar; pausado, oferece tocar. O ícone mostra a
   ação, não o estado — o estado quem diz é o aria-label. */
.hero__toggle[data-playing="true"]  .hero__toggle-icon--pause,
.hero__toggle[data-playing="false"] .hero__toggle-icon--play { display: block; }

/* No design os inativos são discos preenchidos; o ativo fica vazado, com um
   anel que se desenha enquanto o slide corre — é o temporizador do avanço
   automático, visível. */
.hero__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .56);
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--c-white);
  transition: background var(--dur) var(--ease);
}
/* .hero__dot:hover { background: transparent;  } */

.hero__dot.is-active,
.hero__dot.is-active:hover { background: transparent; }

.hero__dot-num { position: relative; line-height: 1; }

.hero__dot-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* O traço de um <circle> começa às 3 horas; girar -90° o leva ao topo. */
  transform: rotate(-90deg);
  pointer-events: none;
}

.hero__dot-ring circle {
  fill: none;
  stroke: transparent;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 100;
}

/* Sem avanço automático, o anel fica inteiro: ainda marca qual é o slide. */
.hero__dot.is-active .hero__dot-ring circle {
  stroke: var(--c-white);
  stroke-dashoffset: 0;
}

[data-carousel].is-playing .hero__dot.is-active .hero__dot-ring circle {
  animation: hero-ring var(--hero-interval, 7000ms) linear forwards;
}

[data-carousel].is-paused .hero__dot.is-active .hero__dot-ring circle {
  animation-play-state: paused;
}

/* Offset negativo faz o traço crescer no sentido anti-horário, como no design. */
@keyframes hero-ring {
  from { stroke-dashoffset: -100; }
  to   { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-carousel] .hero__dot-ring circle { animation: none; }
}

/* --- Setas do carrossel ---------------------------------------------------
   No design não são botões circulares: são setas longas, só traço, à direita
   e acima dos indicadores — na faixa do título, não na linha dos números. */

.hero__nav {
  grid-area: 1 / 1;
  z-index: 2;
  align-self: end;
  display: flex;
  justify-content: flex-end;
  margin-bottom: clamp(10rem, 25vh, 16rem);
  pointer-events: none;   /* só as setas recebem clique */
}

.hero__arrows {
  display: flex;
  gap: clamp(var(--space-6), 3vw, var(--space-12));
  pointer-events: auto;
}

.hero__arrow {
  display: grid;
  place-items: center;
  padding: var(--space-2);
  background: transparent;
  color: var(--c-white);
  transition: transform var(--dur) var(--ease);
}

.hero__arrow:hover,
.hero__arrow:focus-visible { color: var(--c-white); }

.hero__arrow[disabled] {
  display: none;
}

.hero__arrow[data-prev]:hover { transform: translateX(-4px); }
.hero__arrow[data-next]:hover { transform: translateX(4px); }

/* O passador do design tem a ponta aberta e alta (123×71); a largura manda,
   a altura acompanha. Em prev é o mesmo desenho espelhado. */
.hero__arrow-icon {
  display: block;
  width: clamp(76px, 7vw, 123px);
  height: auto;
}

.hero__arrow--prev .hero__arrow-icon { transform: scaleX(-1); }

/* --- Entalhe da base ------------------------------------------------------
   A seção seguinte sobe num domo no centro da base do hero. O contorno é a
   curva do Figma: o elemento é pintado com a cor da seção de baixo e recortado
   pela máscara, então a curva escala junto com a largura sem se deformar. */

.hero__notch {
  grid-area: 1 / 1;
  z-index: 3;
  align-self: end;
  justify-self: center;
  width: var(--hero-notch-w);
  height: calc(var(--hero-notch-h) + var(--hero-notch-bleed));
  margin-bottom: calc(var(--hero-notch-bleed) * -1);
  background: var(--c-bg);
  -webkit-mask: var(--hero-notch-shape) center / 100% 100% no-repeat;
  mask: var(--hero-notch-shape) center / 100% 100% no-repeat;
  pointer-events: none;
}

/* O mouse fica afundado no domo, não centrado nele: a base atravessa a linha
   do hero e cerca de um quinto da altura sobra no branco da seção seguinte,
   como no design. A fração é da altura do próprio ícone, então o encaixe se
   mantém em qualquer largura de tela. */
.hero__scroll {
  grid-area: 1 / 1;
  z-index: 4;
  align-self: end;
  justify-self: center;
  margin-bottom: calc(var(--hero-scroll-h) * -0.2);
  pointer-events: none;
}

.hero__scroll-icon {
  display: block;
  height: var(--hero-scroll-h);
  width: auto;
}

/* Percurso e ritmo lidos do lottie de origem (assets/img/scroll_down.lottie):
   98 frames a 60fps, a bolinha desce 80 unidades numa composição de 156 de
   altura — 25.64 no viewBox de 50 deste ícone. Ela desce visível, some parada
   embaixo, sobe invisível e reaparece no topo. As curvas de cada trecho são as
   do arquivo, convertidas de i/o para cubic-bezier.
   transform-box fixa as unidades no viewBox. */
.hero__scroll-dot {
  transform-box: view-box;
  animation: hero-scroll 1.633s infinite;
}

@keyframes hero-scroll {
  0% {
    transform: translateY(0);
    opacity: 1;
    animation-timing-function: cubic-bezier(.333, 0, .667, 1);
  }
  50% {
    transform: translateY(25.64px);
    opacity: 1;
    animation-timing-function: linear;
  }
  72.45% {
    transform: translateY(25.64px);
    opacity: 0;
    animation-timing-function: cubic-bezier(.167, 0, .667, 1);
  }
  95.92% {
    transform: translateY(0);
    opacity: 0;
    animation-timing-function: linear;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

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

/* No estreito não há faixa livre à direita do texto: as setas descem para a
   linha dos indicadores, do outro lado dela. */
@media (max-width: 700px) {
  .hero__nav { display: none; justify-content: center; margin-bottom: var(--space-8); }
  .hero__arrows { gap: 4px; }
  .hero__arrow { padding: 4px 8px; }
  .hero__arrow-icon { width: 40px; }
}

/* ==========================================================================
   Pilares do portfólio
   ========================================================================== */

/* Marca d'água do portfólio: no Figma o símbolo tem 692px num canvas de
   1728 e só 313px ficam dentro da tela — os outros 55% sangram pela direita.
   Daí o recuo em fração do próprio tamanho: a proporção do design se mantém
   em qualquer largura, em vez de depender de um corte fixo. */
.portfolio { position: relative; overflow: hidden; }

/* Sem isto o conteúdo, que não é posicionado, ficaria atrás da marca d'água
   — uma imagem `absolute` empilha acima de qualquer irmão estático. */
.portfolio > .container { position: relative; }

.portfolio__watermark {
  --size: clamp(200px, 40vw, 692px);   /* 40vw mantém os ~18% de tela do design */
  /* O símbolo tem 6% de margem transparente no topo, então a caixa começa
     acima de onde o desenho aparece: no Figma o traço nasce a ~110px do topo
     da seção (canvas de 1728), o que põe a caixa a 10% do próprio tamanho. */
  top: -200px;
  right: calc(var(--size) * -.55);
  width: var(--size);
}

.portfolio #portfolio-title {
  max-width: 1095px;
}

@media (max-width: 900px) {
  .portfolio__watermark {
    top: calc(var(--size) * .1);
  }
}

/* 260px é o teto: a 320px de viewport o --gutter mínimo come 20px de cada
   lado, e uma trilha maior que a largura restante empurraria a página inteira
   para o lado (WCAG 1.4.10). */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}

.pillar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pillar:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 62, 197, .10);
}

.pillar__image {
  width: 100%;
  aspect-ratio: 497 / 332;
  object-fit: cover;
}

.pillar__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  flex: 1;
  padding: var(--space-8) var(--space-6) var(--space-12);
  text-align: center;
}

/* O círculo de contorno vem dentro do próprio SVG do pilar, não do CSS. */
.pillar__icon { width: 47px; height: 47px; }

.pillar__label {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--c-border);
  width: 100%;
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-ink);
}

.pillar__title { margin-top: var(--space-2); }

.pillar__text {
  max-width: 34ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
}

.pillar .btn { margin-top: auto; }

/* ==========================================================================
   Marcas
   ========================================================================== */

.brands__list {
  /* Grid em vez de flex: com space-between a última linha ficava
     desalinhada quando os 7 logos quebravam em duas. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  place-items: center;
  gap: clamp(var(--space-6), 3vw, var(--space-12));
}

.brands__item img {
  width: auto;
  max-height: 62px;
}

.brands__dots { display: none; }

/* No mobile a grade vira uma faixa com scroll-snap: dois logos por vez, com
   o próximo espiando na borda — mesmo padrão do slide dos Fast Facts. */
@media (max-width: 700px) {
  .brands__list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    gap: var(--space-8);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }

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

  .brands__item {
    flex: 0 0 50%;
    scroll-snap-align: center;
  }

  .brands__item img {
    margin: 0 auto;
    max-height: 45px;
  }

  .brands__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
  }

  .brands__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--c-rule);
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
  }

  .brands__dot.is-active {
    background: var(--c-blue);
    transform: scale(1.25);
  }
}

/* ==========================================================================
   Mindset
   ========================================================================== */

.mindset { padding-bottom: 0; }

.mindset .section__head { margin-bottom: var(--space-8); }

.mindset .btn--lg {
  min-height: 60px;
  padding-inline: var(--space-8);
  border-radius: 30px;
  font-size: var(--fs-label);
  transform: none !important;
}

/* Faixa azul atrás da foto, como no design. */
.mindset__media {
  position: relative;
  padding-block: 0 var(--space-28);
  /* Rede de segurança para o zoom de entrada da foto (animations.js): o
     excesso da escala morre aqui em vez de virar rolagem horizontal. O corte
     é nesta caixa, não na da foto, porque aqui sobra folga — o recuo lateral
     e o respiro de cima e de baixo — e a foto nunca chega a encostar nela. */
  overflow: clip;
}
.mindset__media::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: calc(50% + (var(--space-28) / 2));
  background: var(--c-blue);
}
.mindset__media .container { position: relative; }

.mindset__media img {
  width: 100%;
  aspect-ratio: 1528 / 475;
  object-fit: cover;
  border-radius: var(--radius-card);
}

@media (max-width: 1200px) {
  .mindset__media {
    padding-block: 0 var(--space-16);
  }
  .mindset__media::before {
    height: calc(50% + (var(--space-16) / 2));
  }
}

@media (max-width: 700px) {
  .mindset__media {
    padding-block: 0 var(--space-10);
  }
  .mindset__media::before {
    height: calc(50% + (var(--space-10) / 2));
  }
  .mindset__media .mindset__image {
    aspect-ratio: 700 / 447;
    object-position: center;
  }
}

/* ==========================================================================
   Fast facts
   ========================================================================== */

.facts__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-8);
}

.fact {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 290px;
  padding: var(--space-8) var(--space-6);
  background: var(--c-white);
  border: 1px solid rgba(217, 217, 217, .3);
  border-radius: var(--radius-card);
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

/* O cartão responde ao ponteiro mesmo não sendo um link: o azul da marca toma
   o cartão inteiro, o conteúdo inverte para branco e ele sobe um fio. */
.fact:hover {
  background: var(--c-blue);
  border-color: transparent;
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -12px rgba(0, 62, 197, .5);
}

.fact:hover .fact__value,
.fact:hover .fact__text { color: var(--c-white); }

/* Os ícones são SVG de traço cinza servidos por <img>, onde CSS não alcança
   o desenho. O filtro leva qualquer cor a branco — evita manter uma segunda
   cópia de cada arquivo só para o estado de hover. */
.fact:hover .fact__icon { filter: brightness(0) invert(1); }

@media (prefers-reduced-motion: reduce) {
  .fact:hover { transform: none; }
}

.fact__icon {
  width: 42px;
  height: 42px;
  transition: filter var(--dur) var(--ease);
}

.fact__value {
  margin-top: 50px;
  transition: color var(--dur) var(--ease);
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(1.5rem, 0.75rem + 1.1vw, 2.25rem);   /* 28 → 36px */
  line-height: 1.39;
  color: var(--c-blue);
}

.fact__text {
  font-size: 1.125rem;   /* 18px */
  line-height: 1.39;     /* 25/18 */
  max-width: 27ch;
  color: var(--c-ink);
  transition: color var(--dur) var(--ease);
}

.facts__dots { display: none; }

/* No mobile a grade vira uma faixa com scroll-snap: cada cartão ocupa a
   maior parte da largura e deixa o próximo espiar na borda, como no design. */
@media (max-width: 900px) {
  .facts__list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    gap: var(--space-4);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }

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

  .fact {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }

  .facts__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
  }

  .facts__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--c-rule);
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
  }

  .facts__dot.is-active {
    background: var(--c-blue);
    transform: scale(1.25);
  }
}

/* ==========================================================================
   Conteúdo de páginas internas
   ========================================================================== */

.entry__content { max-width: 70ch; }
.entry__content > * + * { margin-top: var(--space-6); }
.entry__content a { color: var(--c-blue); text-decoration: underline; }