/* Hero e pilares: regras locais para preservar as demais seções. */
.hero {
  padding-top: 112px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #021a33;
}
/* Uma unica imagem se move por tras do degrade e da textura. */
.hero::before {
  content: '';
  position: absolute;
  inset: -4%;
  z-index: -1;
  pointer-events: none;
  background: url('../img/backgrounds/hero-background.jpg') center bottom / cover no-repeat;
  filter: contrast(1.18) brightness(1.08);
  transform: translate3d(-1.5%, 1%, 0) scale(1.02);
  animation: hero-background-drift 24s ease-in-out infinite alternate;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(180deg, rgba(2, 26, 51, .58) 0%, rgba(2, 26, 51, .3) 42%, rgba(2, 26, 51, .12) 100%), url('../img/backgrounds/hero-grain.svg');
  background-size: 100% 100%, 180px 180px;
  background-repeat: no-repeat, repeat;
}
@keyframes hero-background-drift {
  to { transform: translate3d(1.5%, -1%, 0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; transform: none; }
}
.hero .hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
  max-width: 1360px;
  min-height: 792px;
  padding-top: 32px;
  padding-bottom: 52px;
}
.hero .hero-text { position: relative; z-index: 2; align-self: start; min-width: 0; container-type: inline-size; padding-top: 56px; display: flex; flex-direction: column; gap: 24px; }
.hero .kicker { margin: 0; gap: 16px; color: var(--branco); font-size: 11px; font-weight: 700; letter-spacing: .36em; }
.hero .kicker .line { width: 48px; flex-shrink: 0; }
.hero h1 { font-size: clamp(20px, 8.4cqi, 64px); font-weight: 800; line-height: .9; letter-spacing: -.035em; overflow-wrap: normal; }
.hero h1 > span { display: block; white-space: nowrap; }
.hero h1 .hl { margin-top: -4px; font-size: .86em; line-height: 1.02; color: var(--amarelo); }
.hero .hero-lead { display: block; width: 100%; max-width: 600px; margin-top: -6px; }
.hero .hero-lead p { display: inline; margin: 0; color: #f1f4f9; font-size: clamp(18px, 1.52vw, 22px); line-height: 1.5; }
.hero .hero-lead p + p::before { content: ' '; }
.hero .hero-pillars { width: 100%; max-width: 600px; margin-top: 12px; margin-inline-start: clamp(-20px, -1.4vw, -8px); }
.hero .pillars-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.hero .pillars-list li { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 11px; min-width: 0; padding: 4px 9px 0; text-align: center; color: var(--branco); font-size: 14px; line-height: 1.35; }
.hero .pillars-list li + li { border-left: 1px solid rgba(184, 196, 212, .3); }
.hero .pillars-list svg { flex-shrink: 0; width: 32px; height: 32px; color: var(--amarelo); }
.hero .hero-media { position: relative; isolation: isolate; min-width: 0; width: calc(100% - 16px); aspect-ratio: 1.02; margin-block: 20px; }
.hero .hero-frame {
  position: absolute;
  top: 12%;
  left: 27%;
  height: 15%;
  z-index: 0;
  width: 0;
  border-left: 2px solid var(--amarelo);
  border-radius: 2px;
  transform: rotate(4deg);
}
.hero .hero-frame::after { content: ''; position: absolute; top: 265%; left: -85px; width: 85px; height: 2px; border-radius: 2px; background: var(--amarelo); transform: rotate(-9deg); }
/* Um único recorte arredondado evita desencontro entre as bordas da foto e do cartão.
   Sombras de contato e ambiente diferenciam a altura de cada camada. */
.hero .hero-photo {
  position: absolute;
  overflow: hidden;
  border: 0;
  border-radius: clamp(18px, 2vw, 26px);
  background: #011a33;
  box-shadow: 0 4px 12px rgba(0, 8, 20, .16), 0 24px 48px -16px rgba(0, 8, 20, .42);
}
.hero .hero-photo::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(232, 240, 248, .2); border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); pointer-events: none; }
.hero .hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero .hero-photo-main { inset: 0 2% 3% 28%; z-index: 1; transform: rotate(3deg); }
.hero .hero-photo-main img { object-position: 48% 35%; }
.hero .hero-photo-secondary {
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 55%;
  aspect-ratio: 600 / 599;
  border-radius: 18px;
  box-shadow: 0 3px 10px rgba(0, 8, 20, .2), 0 18px 32px -10px rgba(0, 8, 20, .48);
  transform: rotate(-4deg);
}
.hero .hero-photo-secondary::after { border-color: rgba(247, 243, 228, .58); }
/* A proporção original preserva o símbolo AK e as três pessoas. */
.hero .hero-photo-secondary img { object-position: center; }

/* Mantém duas colunas proporcionais em monitores amplos. */
@media (min-width: 1600px) {
  .hero .hero-inner { max-width: 1480px; min-height: 840px; gap: 56px; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
  .hero .hero-media { max-width: 650px; }
}
@media (max-width: 1200px) and (min-width: 1001px) {
  .hero .hero-inner { gap: 36px; min-height: 710px; }
  .hero .hero-text { padding-top: 36px; gap: 22px; }
  .hero h1 { font-size: clamp(20px, 8.4cqi, 64px); }
  .hero .hero-pillars { margin-top: 8px; }
  .hero .pillars-list li { padding-right: 6px; padding-left: 6px; font-size: 12px; }
}
@media (max-width: 1000px) {
  .hero { padding-top: 92px; }

  .hero .hero-inner { grid-template-columns: 1fr; gap: 48px; min-height: 0; padding: 52px 32px 64px; }
  .hero .hero-text { max-width: 720px; padding-top: 0; }
  .hero h1 { max-width: 720px; font-size: clamp(20px, 8.4cqi, 64px); }
  .hero .hero-lead { max-width: 660px; margin-top: 0; }
  .hero .hero-pillars { max-width: 660px; }
  .hero .hero-media { justify-self: center; width: 80%; max-width: 600px; }
}
@media (max-width: 600px) {
  .hero { padding-top: 80px; }

  .hero .hero-inner { gap: 36px; padding: 36px 22px 48px; }
  .hero .hero-text { gap: 22px; }
  .hero .kicker { gap: 12px; font-size: 9px; letter-spacing: .23em; }
  .hero .kicker .line { width: 32px; }
  .hero h1 { font-size: clamp(20px, 8.4cqi, 64px); line-height: .96; letter-spacing: -.035em; }
  .hero h1 .hl { margin-top: 8px; font-size: .86em; line-height: 1.12; }
  .hero .hero-lead p { font-size: 17px; line-height: 1.6; }
  .hero .hero-pillars { margin-top: 8px; margin-inline-start: -4px; }
  .hero .pillars-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero .pillars-list li { padding: 0 2px; gap: 8px; font-size: clamp(8px, 2.7cqi, 12px); white-space: nowrap; }

  .hero .pillars-list svg { width: clamp(22px, 7cqi, 30px); height: clamp(22px, 7cqi, 30px); }
  .hero .hero-media { width: calc(100% - 12px); max-width: 400px; margin-block: 8px 16px; }
  .hero .hero-frame { border-radius: 21px; }
  .hero .hero-photo-secondary { border-radius: 16px; }
}
/* Proposta de hero com tres fotos selecionaveis; sem troca automatica. */
.hero .hero-stack { margin-bottom: 64px; touch-action: pan-y; }
.hero .hero-stack .hero-photo {
  appearance: none; padding: 0; margin: 0; cursor: pointer;
  inset: auto; top: 10%; left: 0; width: 65%; height: 76%; aspect-ratio: auto;
  border-radius: clamp(16px, 2vw, 26px); transform: rotate(-9deg) scale(.96);
  z-index: 1;
  transition: top .55s ease, left .55s ease, width .55s ease, height .55s ease, transform .55s ease, box-shadow .55s ease;
}
.hero .hero-stack .hero-photo.is-right { left: 35%; top: 12%; transform: rotate(9deg) scale(.96); z-index: 2; }
.hero .hero-stack .hero-photo.is-front { top: 0; left: 13%; width: 74%; height: 90%; transform: rotate(0); z-index: 3; box-shadow: 0 26px 60px -12px rgba(0, 8, 20, .65); }
.hero .hero-stack .hero-photo img { object-fit: cover; object-position: center; }
.hero .hero-stack .hero-photo-main img { object-position: 48% 35%; }
.hero .hero-stack .hero-photo-third img { object-position: 50% 42%; }
.hero .hero-stack .hero-photo:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 5px; }
/* 44 px targets with 36 px bars: the visible space between bars is 12 px. */
.hero-photo-controls { position: absolute; top: calc(100% + 8px); left: 0; width: 100%; display: flex; justify-content: center; gap: 4px; }
.hero-photo-controls button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--amarelo); cursor: pointer; }
.hero-photo-controls button::before { content: ""; width: 36px; height: 4px; border-radius: 2px; background: currentColor; opacity: .35; transition: opacity .2s ease; }
.hero-photo-controls button[aria-pressed="true"]::before { opacity: 1; }
.hero-photo-controls button:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 2px; }
.hero-photo-controls button:focus-visible::before { opacity: 1; transition: none; }
@media (hover: hover) and (pointer: fine) {
  .hero-photo-controls button:hover::before { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero-stack .hero-photo, .hero-photo-controls button::before { transition: none; }
}