/* ==========================================================================
   AJUSTES DA HOME (todos só afetam a .hero — as páginas interiores usam
   .page-header, por isso não são tocadas).
   1. corte limpo para branco entre hero e stats (sem fade opaco)
   2. logo + título alinhados, na borda esquerda (sem deslocamento)
   3. botão primário na cor do tema (sem laranja)
   4. texto do hero a branco (foto nítida)
   5. varrimento VERTICAL pendular da fotografia
   6. botões "4 cantos" (Uiverse) só no hero da home
   7. botão da navbar (Login) no mesmo estilo (cor neutra, letra intacta)
   Carregar DEPOIS de style.css.
   ========================================================================== */

/* 1. SEM VÉU E SEM FADE — a fotografia fica nítida e a passagem para as
   secções brancas por baixo é um corte limpo (branco logo, sem opacidade). */
.hero__shade {
  background: none;
}

/* 2. Logo + título alinhados e puxados para a esquerda, para dentro da margem
   exterior do container. O deslocamento escala com a margem disponível
   ((100vw - container)/2) e satura em 4.2rem, para nunca cortar em ecrãs
   estreitos. O MESMO valor em ambos mantém-nos no mesmo eixo. */
.page-home {
  --home-shift: clamp(0.5rem, calc((100vw - 1180px) / 2 - 0.75rem), 4.2rem);
}
.page-home .navbar .brand,
.page-home .hero .hero__inner {
  transform: translateX(calc(-1 * var(--home-shift)));
}

/* 3. BOTÃO PRIMÁRIO NA COR DO TEMA (sem laranja) --------------------------- */
.btn--fire {
  background: linear-gradient(160deg, var(--cta-bg-2), var(--cta-bg));
  color: var(--cta-fg);
  box-shadow: 0 10px 28px rgba(var(--brand-rgb), 0.30);
}
.btn--fire:hover {
  box-shadow: 0 14px 34px rgba(var(--brand-rgb), 0.42);
}

/* 4. HERO COM FOTO NÍTIDA (sem véu branco) — texto a branco para ler sobre
   a fotografia. Só a home tem .hero, logo não afeta as páginas interiores. */
.hero__title {
  color: #ffffff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.42);
}
.hero__title-accent { color: #d8e08a; }   /* azeitona clara da marca sobre a foto */
.hero__lead {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.42);
}
.hero__slogan { color: rgba(255, 255, 255, 0.72); }

/* links da navbar a branco no topo da home (sobre a foto) — sombra dupla
   (contorno curto e forte + halo largo) para contraste sobre zonas claras */
.page-home .navbar:not(.is-scrolled) .navbar__nav a:not(.btn) {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* 5. PAN VERTICAL por TRANSFORM (acelerado por GPU = suave, sem stutter).
   Enquadramento no topo da imagem (object-position 0%); um scale pequeno dá
   a margem para o pan sem amolecer (foto em 2800px). Amplitude pequena, só na
   zona de cima. ease-in-out = pendular suave nas viragens. */
.hero__bg {
  object-position: 50% 0%;
  transform: scale(1.2) translateY(7%);
  animation: hero-sweep 7s ease-in-out infinite alternate;
  will-change: transform;
  backface-visibility: hidden;
}
@keyframes hero-sweep {
  from { transform: scale(1.2) translateY(7%); }    /* extremo alto = topo */
  to   { transform: scale(1.2) translateY(4.5%); }  /* desce pouco (amplitude pequena) */
}
@media (prefers-reduced-motion: reduce) {
  .hero__bg { animation: none; transform: none; object-position: var(--hero-pos); }
}

/* 5b. DETEÇÃO ancorada ao movimento.
   Camada por cima do fundo com EXATAMENTE o mesmo transform + animação do
   .hero__bg → move-se em sincronia com a foto. A caixa é posicionada por JS
   (mapeamento object-fit: cover da foto), por isso fica colada ao fumo. */
.hero__track {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transform: scale(1.2) translateY(7%);
  animation: hero-sweep 7s ease-in-out infinite alternate;
  will-change: transform;
  backface-visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .hero__track { animation: none; transform: none; }
}
.hero__det {
  position: absolute;                        /* left/top/width/height em % via JS */
  /* SÓ OS CANTOS (mira), como o botão login em repouso: 8 mini-barras em "L".
     Interior 100% transparente — vê-se a fotografia. */
  border: 4px solid transparent;             /* reserva a espessura da moldura (linha mais grossa) */
  background-color: transparent;
  background-repeat: no-repeat;
  background-origin: border-box;
  background-image:
    linear-gradient(#ffd24a, #ffd24a), linear-gradient(#ffd24a, #ffd24a),
    linear-gradient(#ffd24a, #ffd24a), linear-gradient(#ffd24a, #ffd24a),
    linear-gradient(#ffd24a, #ffd24a), linear-gradient(#ffd24a, #ffd24a),
    linear-gradient(#ffd24a, #ffd24a), linear-gradient(#ffd24a, #ffd24a);
  background-position:
    left top,     left top,
    right top,    right top,
    left bottom,  left bottom,
    right bottom, right bottom;
  background-size:
    20px 4px, 4px 20px,
    20px 4px, 4px 20px,
    20px 4px, 4px 20px,
    20px 4px, 4px 20px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55)); /* contraste dos cantos sobre a foto */
  transform-origin: center;
  animation: det-breathe 3.2s ease-in-out infinite;   /* respiração subtil */
}
@keyframes det-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__det { animation: none; }
}

/* substituído pela caixa de deteção acima */
.hero__hud { display: none; }

/* 6. EXPERIÊNCIA — botões Uiverse "4 cantos" com fundo TRANSPARENTE, só na home.
   O original desenha a moldura completa e TAPA o meio de cada lado com
   pseudo-elementos da cor da página (#212121) — impossível sobre fotografia.
   Aqui a técnica é invertida: nada é tapado, desenha-se só o que se vê.
   - 4 cantos em "L" (sempre visíveis): 8 mini-barras em background-image.
   - Segmentos do meio: ::before (laterais) e ::after (topo/fundo) desenham-nos
     com borders e entram no hover com o MESMO scale + delay 0.5s do original.
   Estado inicial: só os 4 cantos brancos, interior 100% transparente (foto). */
.page-home .hero__actions .btn {
  position: relative;
  display: inline-block;
  padding: 15px 30px;
  border: 2px solid transparent;        /* reserva a espessura da moldura */
  border-radius: 0;
  box-shadow: none;
  color: #fefefe;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.1;
  /* cantos: por canto, uma barra horizontal 8×2 + uma vertical 2×8 */
  background-color: transparent;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(#fefefe, #fefefe), linear-gradient(#fefefe, #fefefe),
    linear-gradient(#fefefe, #fefefe), linear-gradient(#fefefe, #fefefe),
    linear-gradient(#fefefe, #fefefe), linear-gradient(#fefefe, #fefefe),
    linear-gradient(#fefefe, #fefefe), linear-gradient(#fefefe, #fefefe);
  background-position:
    left top,     left top,
    right top,    right top,
    left bottom,  left bottom,
    right bottom, right bottom;
  background-size:
    8px 2px, 2px 8px,
    8px 2px, 2px 8px,
    8px 2px, 2px 8px,
    8px 2px, 2px 8px;
}
.page-home .hero__actions .btn:hover {
  transform: none;
  box-shadow: none;
  color: #fefefe;                       /* interior continua transparente: texto sempre branco */
}

/* ::before — segmentos VERTICAIS (esquerda + direita). Repouso: escondidos;
   no hover crescem do centro até tocar nos cantos (geometria igual à original). */
.page-home .hero__actions .btn::before {
  content: '';
  position: absolute;
  top: 6px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% - 12px);
  background: none;
  border-left: 2px solid #fefefe;
  border-right: 2px solid #fefefe;
  transform: scaleY(0);
  transition: transform 0.3s ease-in-out;
}
.page-home .hero__actions .btn:hover::before {
  transform: scaleY(1);
}

/* ::after — segmentos HORIZONTAIS (topo + fundo), com o delay 0.5s do original. */
.page-home .hero__actions .btn::after {
  content: '';
  position: absolute;
  left: 6px;
  top: -2px;
  height: calc(100% + 4px);
  width: calc(100% - 12px);
  background: none;
  border-top: 2px solid #fefefe;
  border-bottom: 2px solid #fefefe;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out 0.5s;
}
.page-home .hero__actions .btn:hover::after {
  transform: scaleX(1);
}

.page-home .hero__actions .btn > span {
  position: relative;
  z-index: 3;
}

/* 7. NAVBAR — "Talk to us!" no mesmo estilo de 4 cantos, LETRA INTACTA
   (mantém tamanho/peso/caixa do .btn--sm; muda só o "vestido" do botão).
   A cor vem de --ub-c e adapta-se ao fundo da banda:
   - escura (tinta) sobre banda clara: scroll, menu móvel, páginas interiores;
   - branca sobre a fotografia: home, topo, desktop. */
.navbar__nav .btn {
  --ub-c: #1a1a1a;
  position: relative;
  border: 2px solid transparent;        /* reserva a espessura da moldura */
  border-radius: 0;
  box-shadow: none;
  color: var(--ub-c);
  /* cantos: por canto, uma barra horizontal 8×2 + uma vertical 2×8 */
  background-color: transparent;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--ub-c), var(--ub-c)), linear-gradient(var(--ub-c), var(--ub-c)),
    linear-gradient(var(--ub-c), var(--ub-c)), linear-gradient(var(--ub-c), var(--ub-c)),
    linear-gradient(var(--ub-c), var(--ub-c)), linear-gradient(var(--ub-c), var(--ub-c)),
    linear-gradient(var(--ub-c), var(--ub-c)), linear-gradient(var(--ub-c), var(--ub-c));
  background-position:
    left top,     left top,
    right top,    right top,
    left bottom,  left bottom,
    right bottom, right bottom;
  background-size:
    8px 2px, 2px 8px,
    8px 2px, 2px 8px,
    8px 2px, 2px 8px,
    8px 2px, 2px 8px;
}
.navbar__nav .btn:hover {
  transform: none;
  box-shadow: none;
  color: var(--ub-c);
}

/* segmentos VERTICAIS (esquerda + direita) — crescem no hover
   (velocidade 2×: 0.15s em vez dos 0.3s do original) */
.navbar__nav .btn::before {
  content: '';
  position: absolute;
  top: 6px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% - 12px);
  background: none;
  border-left: 2px solid var(--ub-c);
  border-right: 2px solid var(--ub-c);
  transform: scaleY(0);
  transition: transform 0.15s ease-in-out;
}
.navbar__nav .btn:hover::before { transform: scaleY(1); }

/* segmentos HORIZONTAIS (topo + fundo) — delay também a metade (0.25s) */
.navbar__nav .btn::after {
  content: '';
  position: absolute;
  left: 6px;
  top: -2px;
  height: calc(100% + 4px);
  width: calc(100% - 12px);
  background: none;
  border-top: 2px solid var(--ub-c);
  border-bottom: 2px solid var(--ub-c);
  transform: scaleX(0);
  transition: transform 0.15s ease-in-out 0.25s;
}
.navbar__nav .btn:hover::after { transform: scaleX(1); }

/* sobre a fotografia (home, topo, desktop) os cantos/letra passam a branco.
   filter: drop-shadow dá contraste a TUDO o que o botão desenha de uma vez:
   letra, cantos (background-image) e segmentos do hover (pseudo-elementos) —
   text-shadow não chegava, porque não apanha os cantos. */
@media (min-width: 900px) {
  .page-home .navbar:not(.is-scrolled) .navbar__nav .btn {
    --ub-c: #fefefe;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55))
            drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
  }
}

/* 8. Botão único do hero — letra normal (não maiúsculas), como o da banda, mas
   MAIOR. Mantém a moldura de 4 cantos e o texto branco. Só o hero — os botões
   do CTA ficam como estão. */
.page-home .hero__actions .btn {
  text-transform: none;
  font-size: 1.2rem;
  font-weight: 650;
  letter-spacing: normal;
  padding: 0.85em 2.2em;
}

/* 9. TAMANHOS tipo pano.ai — título ~48px (era ~74px) e subtítulo ~20px.
   CONTRASTE da banda (mesma sombra dupla das palavras da navbar) aplicado ao
   SUBTÍTULO (text-shadow) e ao BOTÃO (drop-shadow, apanha letra + cantos). */
.page-home .hero__title {
  font-size: clamp(2rem, 4.6vw, 3rem);   /* máx 48px */
  line-height: 1.12;
  max-width: 13em;
}
.page-home .hero__lead {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);   /* máx 20px */
  line-height: 1.6;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 2px 12px rgba(0, 0, 0, 0.5);
}
.page-home .hero__actions .btn {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55))
          drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

/* 10. Título + subtítulo mais para cima: o bloco do hero deixa de estar
   encostado ao fundo e centra-se na vertical (paddings equilibrados, um pouco
   menos em baixo para subir ligeiramente acima do centro). */
.page-home .hero {
  align-items: center;
}
.page-home .hero .hero__inner {
  padding-top: 5rem;
  padding-bottom: 3.5rem;
}

/* 11. Botão "Solution" (hero): SEM animação — estado final, moldura branca
   COMPLETA. Remove os 4 cantos (background-image) e os segmentos animados
   (pseudo-elementos) e desenha a borda inteira a branco. Só o hero; os botões
   do CTA mantêm o efeito de 4 cantos. */
.page-home .hero__actions .btn {
  border: 2px solid #fefefe;
  background-image: none;
}
.page-home .hero__actions .btn::before {
.page-home .hero__actions .btn::after {
  content: none;
}