/* composição de cada bloco da página, seção por seção */

/* --- hero --- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: var(--color-navy-950);
  padding-top: clamp(6rem, 5rem + 4vw, 9rem);
  padding-bottom: var(--space-16);
}

/* camadas gráficas de fundo do hero */
.hero__field {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
}

/* espalhado e sutil de propósito. um core muito luminoso lia como "bola de
   luz" em vez de ambiente, então aumentei o raio, baixei bastante o pico
   de opacidade e troquei os dois stops do gradiente por uma transição em
   vários estágios — assim a luz se dissolve em vez de concentrar num ponto */
.hero__glow {
  position: absolute;
  top: -24%;
  right: -18%;
  width: min(78vw, 1100px);
  height: min(78vw, 1100px);
  background: radial-gradient(circle at 50% 50%,
    rgba(249, 227, 178, 0.10) 0%,
    rgba(249, 227, 178, 0.06) 32%,
    rgba(173, 142, 68, 0.03) 58%,
    transparent 80%);
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform;
}

.hero__glow--secondary {
  top: auto;
  bottom: -32%;
  left: -22%;
  right: auto;
  width: min(58vw, 780px);
  height: min(58vw, 780px);
  background: radial-gradient(circle at 50% 50%,
    rgba(173, 142, 68, 0.13) 0%,
    rgba(173, 142, 68, 0.06) 38%,
    transparent 75%);
  mix-blend-mode: normal;
}

/* já cria a camada de composição antes de animar. promover o elemento no
   meio do movimento é receita clássica pra travar o FPS */
[data-parallax-strength] {
  will-change: transform;
}

/* marca d'água única, sem repetição em mosaico: o ícone repetido em grade
   lembrava uma "grade/cadeia" e brigava com a leitura da logo oficial no
   header. a cliente pediu pra manter a luz e o movimento mas tirar esse
   efeito de grade */
.hero__pattern {
  position: absolute;
  top: 50%;
  right: -6%;
  width: min(52vw, 780px);
  aspect-ratio: 198 / 241;
  transform: translateY(-50%);
  background-image: url('../assets/logos/ellos-icon-navy.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.05;
  -webkit-mask-image: radial-gradient(circle at center, #000 55%, transparent 78%);
  mask-image: radial-gradient(circle at center, #000 55%, transparent 78%);
}

/* conteúdo do hero */
.hero__container {
  position: relative;
  z-index: var(--z-content);
  width: 100%;
}

.hero__top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(3rem, 2rem + 5vw, 7rem);
}

.hero__coords {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-fog-dim);
  text-align: right;
}

.hero__composition {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--col-gap);
  align-items: end;
}

.hero__headline {
  grid-column: 1 / span 8;
  font-size: var(--text-display-xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tightest);
  line-height: 1.08;
  color: var(--color-white);
}

.hero__headline-row {
  display: block;
  overflow: hidden;
}

.hero__headline .is-outline {
  color: var(--color-gold-light); /* fallback sólido caso o navegador não suporte text-stroke */
}

@supports (-webkit-text-stroke: 1px black) {
  .hero__headline .is-outline {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--color-gold-light);
  }
}

.hero__aside {
  grid-column: 9 / span 4;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-bottom: var(--space-4);
}

.hero__statement {
  font-size: var(--text-body-l);
  line-height: var(--leading-relaxed);
  color: var(--color-fog);
  max-width: 34ch;
}

.hero__indicators {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.hero__indicators .indicator {
  align-self: flex-start;
}

/* só existe pro mobile — no desktop os dois indicadores ficam, ver
   responsive.css */
.hero__mobile-cta {
  display: none;
}

/* dica de rolagem no fim do hero */
.hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: var(--space-10);
  transform: translateX(-50%);
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.hero__scroll-cue span {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-fog-dim);
}

.hero__scroll-line {
  position: relative;
  width: 1px;
  height: 46px;
  background: var(--color-hairline-dark);
  overflow: hidden;
}

.hero__scroll-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: var(--color-gold-light);
  animation: scrollCue 2.2s var(--ease-in-out-quart) infinite;
}

/* --- dados rápidos --- */

.quickfacts {
  position: relative;
  background: var(--color-navy-900);
  border-top: 1px solid var(--color-hairline-dark);
  border-bottom: 1px solid var(--color-hairline-dark);
}

.quickfacts__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding-block: var(--space-6);
}

.quickfacts__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.quickfacts__icon {
  flex-shrink: 0;
  color: var(--color-gold-light);
}

.quickfacts__label {
  display: block;
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-fog-dim);
}

.quickfacts__value {
  display: block;
  margin-top: 2px;
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--color-white);
}

.quickfacts__divider {
  width: 1px;
  height: 32px;
  background: var(--color-hairline-dark);
  flex-shrink: 0;
}

/* --- números (stats-band) --- */

/* cor sólida e exata da paleta (--color-gold-light, F9E3B2), nada de
   degradê com tons fora do manual de marca — a cliente foi bem clara
   que queria o hex oficial, sem aproximação. legibilidade da legenda
   vem do tratamento do texto (tamanho, peso, opacidade cheia), não de
   mexer na cor do fundo */
.stats-band {
  position: relative;
  background: var(--color-gold-light);
  border-block: 1px solid rgba(0, 17, 61, 0.14);
}

.stats-band__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-block: var(--space-16);
  text-align: center;
}

.stats-band__item {
  position: relative;
  padding-inline: var(--space-6);
}

.stats-band__item + .stats-band__item::before {
  content: '';
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 0;
  width: 1px;
  background: rgba(0, 17, 61, 0.18);
}

.stats-band__item .stat__label {
  margin-top: var(--space-4);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-navy-950);
  max-width: none;
}

/* --- cabeçalho editorial reutilizável (eyebrow + título) --- */

.section-head {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--col-gap);
  margin-bottom: clamp(3rem, 2.5rem + 3vw, 5.5rem);
}

.section-head__eyebrow-col {
  grid-column: 1 / span 4;
}

.section-head__title-col {
  grid-column: 5 / span 8;
}

/* --- quem somos --- */

.about {
  position: relative;
}

/* highlight de abertura do parágrafo, sem itálico — diferente do .accent
   padrão do resto do site, foi pedido específico pra esse trecho */
.about__paragraph .accent {
  font-style: normal;
  font-weight: 700;
}

.about__body {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--col-gap);
  align-items: start;
}

.about__logo-panel {
  grid-column: 1 / span 4;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: var(--space-8);
  border-radius: var(--radius-l);
  background: var(--color-navy-950);
  box-shadow: var(--glass-shadow-soft);
}

.about__logo-panel img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.about__copy {
  grid-column: 6 / span 5;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.about__paragraph {
  font-size: var(--text-body-l);
  color: var(--color-slate);
}

.about__tags {
  grid-column: 11 / span 2;
  display: flex;
  flex-direction: column;
}

.about__tags li {
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-hairline-light);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink);
}

.about__tags li:last-child {
  border-bottom: 1px solid var(--color-hairline-light);
}

/* --- missão --- */

.method {
  position: relative;
}

.method__list {
  position: relative;
  margin-top: var(--space-4);
}

.method__rule {
  position: absolute;
  top: 0.6em;
  bottom: 2.5em;
  left: clamp(2.4rem, 2rem + 3vw, 4.7rem);
  width: 1px;
  background: var(--color-hairline-dark);
}

.method__rule-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: var(--color-gold);
  transform-origin: top;
}

.method__item {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--col-gap);
  align-items: start;
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
  border-top: 1px solid var(--color-hairline-dark);
}

.method__item:last-child {
  border-bottom: 1px solid var(--color-hairline-dark);
}

.method__index {
  grid-column: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--color-gold-soft);
  border-radius: var(--radius-full);
  background: rgba(173, 142, 68, 0.08);
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--color-gold);
  letter-spacing: var(--tracking-tight);
}

.method__name {
  grid-column: 3 / span 3;
  font-size: var(--text-heading-l);
  font-weight: 700;
  color: var(--color-white);
  align-self: center;
}

.method__desc {
  grid-column: 7 / span 6;
  font-size: var(--text-body-l);
  color: var(--color-fog);
  align-self: center;
}

/* --- vídeo institucional --- */

.video-showcase__frame {
  position: relative;
  aspect-ratio: 16 / 8;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--color-navy-950);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
}

.video-showcase__pattern {
  position: absolute;
  inset: 0;
  background-image: url('../assets/logos/ellos-icon-navy.png');
  background-size: min(45%, 320px);
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.07;
}

.video-showcase__play {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background: var(--glass-bg-dark);
  border: 1px solid var(--glass-border-dark);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--color-gold-light);
}

.video-showcase__play svg {
  margin-left: 3px;
}

.video-showcase__caption {
  position: relative;
  font-size: var(--text-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-fog-dim);
}

/* --- soluções --- */

.solutions__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--col-gap);
}

.solution {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  background: var(--color-gold-wash);
  border: 1px solid var(--color-hairline-light);
  border-radius: var(--radius-l);
  transition: background var(--dur-base) var(--ease-out-quart),
              border-color var(--dur-base) var(--ease-out-quart),
              transform var(--dur-base) var(--ease-in-out-quart);
}

.solution:hover {
  background: rgba(173, 142, 68, 0.13);
  border-color: var(--color-gold-soft);
  transform: translateY(-4px);
}

.solution__tag {
  align-self: flex-start;
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  /* deixei navy em vez do dourado escuro aqui: funciona bem tanto no branco
     quanto se essa seção virar champagne de novo algum dia */
  color: var(--color-ink);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-hairline-light);
  border-radius: var(--radius-full);
}

.solution__name {
  font-size: var(--text-heading-m);
  font-weight: 700;
  color: var(--color-ink);
}

/* isso aqui é o pull-quote: era pequeno e meio apagado, mas na real é o
   gancho emocional do card (a pergunta que bate na dor do cliente), então
   merecia mais peso visual. aumentei o tamanho, passei pra cor cheia e
   coloquei um filete dourado do lado, no mesmo espírito editorial do
   resto do site */
.solution__problem {
  position: relative;
  padding-left: var(--space-5);
  border-left: 2px solid var(--color-gold);
  font-size: var(--text-body-l);
  font-weight: 500;
  font-style: italic;
  color: var(--color-ink);
  line-height: var(--leading-snug);
}

.solution__divider {
  height: 1px;
  background: var(--color-hairline-light);
}

.solution__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.solution__list li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--text-small);
  color: var(--color-slate);
  line-height: var(--leading-normal);
}

.solution__list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-gold-dark);
}

.solution__transform {
  margin-top: auto;
  padding: var(--space-4) var(--space-5);
  border-left: 2px solid var(--color-gold);
  /* uso o champagne aqui de propósito: a seção é branca agora, então isso
     mantém a citação em destaque em vez de sumir no fundo do card */
  background: var(--color-paper-deep);
  font-style: italic;
  font-size: var(--text-small);
  color: var(--color-ink);
  line-height: var(--leading-relaxed);
}

/* --- diferenciais --- */

/* o viewport, por padrão (sem JS, ou com prefers-reduced-motion), é uma
   faixa com scroll horizontal nativo, então funciona mesmo se o GSAP não
   carregar. no desktop o JS assume o controle (pin + scrub) e troca pra
   overflow:hidden via .is-pinned, porque a partir dali quem manda na
   posição é o ScrollTrigger, não o scroll nativo do navegador */
.pillars__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  padding-inline: var(--container-padding);
  padding-block: var(--space-8) var(--space-4);
  -webkit-overflow-scrolling: touch;
}

.pillars__viewport.is-pinned {
  overflow: hidden;
}

.pillars__track {
  display: flex;
  gap: var(--col-gap);
  width: max-content;
}

.pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: min(80vw, 400px);
  flex-shrink: 0;
  padding: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
  border: 1px solid var(--color-hairline-dark);
  border-radius: var(--radius-l);
  background: rgba(249, 227, 178, 0.04);
  transition: border-color var(--dur-base) var(--ease-out-quart),
              background var(--dur-base) var(--ease-out-quart);
}

.pillar:hover {
  border-color: var(--color-gold-soft);
  background: rgba(249, 227, 178, 0.08);
}

.pillar__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border: 1px solid var(--color-gold-soft);
  border-radius: var(--radius-full);
  background: rgba(249, 227, 178, 0.06);
  font-size: var(--text-micro);
  font-weight: 700;
  color: var(--color-gold-light);
}

.pillar__title {
  font-size: var(--text-heading-m);
  font-weight: 700;
  color: var(--color-white);
  overflow-wrap: break-word;
}

.pillar__desc {
  font-size: var(--text-body-l);
  color: var(--color-fog);
  overflow-wrap: break-word;
}

/* --- banco de talentos --- */

.talentos {
  position: relative;
  overflow: hidden;
}

/* marca d'água única, sem mosaico — mesma lógica do hero__pattern e do
   footer__pattern. dá identidade de marca sem precisar pintar a seção
   inteira de dourado */
.talentos__pattern {
  position: absolute;
  top: 50%;
  right: -10%;
  width: min(38vw, 560px);
  aspect-ratio: 198 / 241;
  transform: translateY(-50%);
  background-image: url('../assets/logos/ellos-icon-navy.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.05;
  -webkit-mask-image: radial-gradient(circle at center, #000 55%, transparent 78%);
  mask-image: radial-gradient(circle at center, #000 55%, transparent 78%);
  pointer-events: none;
}

.talentos .container {
  position: relative;
  z-index: 1;
}

.talentos__body {
  max-width: 46rem;
}

.talentos__lead {
  font-size: var(--text-body-l);
  color: var(--color-slate);
  margin-bottom: var(--space-8);
}

/* card de formulário genérico — usado no Banco de Talentos e no Contato,
   por isso o nome não é preso a nenhum dos dois */
.lead-form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: clamp(1.75rem, 1.4rem + 2vw, 3rem);
  background: var(--color-white);
  border: 1px solid var(--color-hairline-light);
  border-radius: var(--radius-l);
  box-shadow: var(--glass-shadow-soft);
}

.lead-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.lead-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* item de grid sem min-width:0 não encolhe abaixo do tamanho intrínseco
     do <input> (uns 170-200px de padrão do navegador) — é isso que
     estourava o card quando a coluna ficava mais estreita que isso */
  min-width: 0;
}

.lead-form__field label {
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-slate);
}

.lead-form__optional {
  text-transform: none;
  font-weight: 400;
  letter-spacing: var(--tracking-normal);
}

.lead-form__field input[type='text'] {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-hairline-light);
  border-radius: var(--radius-m);
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-body);
  transition: border-color var(--dur-fast) var(--ease-out-quart),
              background var(--dur-fast) var(--ease-out-quart);
}

.lead-form__field input[type='text']:focus {
  outline: none;
  border-color: var(--color-gold);
  background: var(--color-white);
}

.lead-form__submit {
  align-self: flex-start;
}

.lead-form__status {
  min-height: 1.2em;
  font-size: var(--text-small);
}

.lead-form__status[data-state='success'] {
  color: #2f7a4d;
}

.lead-form__status[data-state='error'] {
  color: #b0432f;
}

/* --- depoimentos --- */

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--col-gap);
}

.testimonial {
  position: relative;
  padding: var(--space-4);
  border: 1px dashed var(--color-hairline-light);
  border-radius: var(--radius-l);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow: hidden;
}

.testimonial__tag {
  align-self: flex-start;
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  /* mesma ideia do .solution__tag: navy é seguro em qualquer fundo claro */
  color: var(--color-ink);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-hairline-light);
  border-radius: var(--radius-full);
}

/* estado temporário, enquanto não chegam os prints de verdade */
.testimonial__shot-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-m);
  background: var(--color-hairline-light);
  color: var(--color-slate);
}

.testimonial__shot-placeholder span {
  max-width: 18ch;
  text-align: center;
  font-size: var(--text-small);
}

/* estado final, quando o print real entrar no lugar do placeholder */
.testimonial__shot {
  display: block;
  width: 100%;
  border-radius: var(--radius-m);
  object-fit: cover;
}

/* --- perguntas frequentes (accordion nativo com <details>, sem JS) --- */

.faq__list {
  margin-top: var(--space-4);
}

.faq-item {
  border-top: 1px solid var(--color-hairline-light);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--color-hairline-light);
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  list-style: none;
  cursor: pointer;
  font-size: var(--text-heading-m);
  font-weight: 600;
  color: var(--color-ink);
}

.faq-item__question::-webkit-details-marker {
  display: none;
}

.faq-item__icon {
  flex-shrink: 0;
  color: var(--color-gold-dark);
  transition: transform var(--dur-base) var(--ease-out-expo);
}

.faq-item[open] .faq-item__icon {
  transform: rotate(45deg);
}

/* truque pra animar a altura automática: grid-row vai de 0fr a 1fr, e o
   wrapper com overflow:hidden esconde o conteúdo durante a transição.
   assim dá pra abrir/fechar o <details> sem precisar saber a altura
   de antemão */
.faq-item__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out-quart);
}

.faq-item[open] .faq-item__answer {
  grid-template-rows: 1fr;
}

.faq-item__answer > div {
  overflow: hidden;
}

.faq-item__answer p {
  padding-bottom: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  padding-right: clamp(2rem, 4vw, 7rem);
  color: var(--color-slate);
  font-size: var(--text-body-l);
  max-width: 60ch;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item__answer {
    transition: none;
  }
}

/* --- CTA final --- */

.cta {
  position: relative;
  overflow: hidden;
}

.cta__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--col-gap);
  align-items: center;
}

.cta__intro {
  grid-column: 1 / span 7;
}

.cta__heading {
  margin-bottom: var(--space-6);
}

.cta__sub {
  font-size: var(--text-body-l);
  color: var(--color-fog);
  max-width: 42ch;
}

/* deixou de ser um glass-panel: agora abriga o formulário (que já é um
   cartão branco por si só) mais o botão de WhatsApp embaixo, então uma
   segunda caixa por cima ia ficar caixa-dentro-de-caixa */
.cta__action {
  grid-column: 9 / span 4;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-5);
}

.cta__or {
  align-self: center;
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-fog-dim);
}

.cta__whatsapp {
  justify-content: center;
  font-size: var(--text-body-l);
  padding: var(--space-6) var(--space-10);
}

/* 1em pra escalar junto com o font-size do botão, em vez de um tamanho
   fixo em px que ficava desproporcional ao texto */
.cta__whatsapp .btn__arrow {
  width: 1em;
  height: 1em;
}

.cta__note {
  margin-top: 0;
  text-align: center;
  font-size: var(--text-micro);
  color: var(--color-fog-dim);
}

/* --- rodapé --- */

.footer {
  position: relative;
  background: radial-gradient(ellipse 60% 60% at 12% 0%, rgba(173, 142, 68, 0.12), transparent 62%),
              var(--color-navy-950);
  padding-block: var(--space-16) var(--space-8);
  overflow: hidden;
}

.footer__pattern {
  position: absolute;
  top: 50%;
  left: -8%;
  width: min(40vw, 560px);
  aspect-ratio: 198 / 241;
  transform: translateY(-50%);
  background-image: url('../assets/logos/ellos-icon-navy.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.05;
  -webkit-mask-image: radial-gradient(circle at center, #000 55%, transparent 80%);
  mask-image: radial-gradient(circle at center, #000 55%, transparent 80%);
}

.footer__top {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--col-gap);
  padding-bottom: var(--space-16);
}

.footer__brand {
  grid-column: 1 / span 4;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.footer__tagline {
  font-size: var(--text-small);
  color: var(--color-fog-dim);
  max-width: 30ch;
}

.footer__nav {
  grid-column: 6 / span 3;
}

.footer__contact {
  grid-column: 9 / span 4;
}

.footer__cta {
  margin-top: var(--space-5);
}

.footer__col-title {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-5);
}

.footer__col-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__col-list a,
.footer__col-list span {
  font-size: var(--text-body);
  color: var(--color-fog);
}

.footer__col-list a:hover {
  color: var(--color-white);
}

.footer__bottom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-hairline-dark);
  font-size: var(--text-micro);
  color: var(--color-fog-dim);
}

.footer__socials {
  display: flex;
  gap: var(--space-6);
}

.footer__socials a {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-fog-dim);
}

.footer__socials a:hover {
  color: var(--color-gold-light);
}