/* ==========================================================================
   MaisMoney — landing page
   Tokens: laranja #FF7F00, roxo profundo #4B0082, branco, cinza claro #F5F5F5
   ========================================================================== */

:root{
  --color-primary: #FF7F00;
  --color-primary-ink: #2B1400;      /* texto/ícone sobre laranja — branco falha contraste (2.53:1) */
  --color-primary-dark: #E06E00;     /* hover do laranja */

  --color-secondary: #4B0082;
  --color-secondary-fg: #FFFFFF;     /* texto sobre roxo — 12.95:1 */
  --color-secondary-dark: #38005F;   /* hover do roxo */

  --color-bg: #FFFFFF;
  --color-bg-alt: #F5F5F5;

  --color-ink: #1C1526;              /* nunca preto puro — tingido na direção do roxo da marca */
  --color-muted: #5C5568;
  --color-border: #E7E3EC;

  --color-focus: #38005F;

  --font-display: "Montserrat", system-ui, sans-serif;
  --font-body: "Montserrat", system-ui, sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(28,21,38,.06), 0 8px 24px rgba(28,21,38,.08);
  --shadow-lift: 0 12px 32px rgba(28,21,38,.14);

  --wrap: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
img{ max-width: 100%; display: block; }
img[hidden]{ display: none; }
ul{ list-style: none; margin: 0; padding: 0; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3,h4{ font-family: var(--font-display); margin: 0; font-weight: 800; letter-spacing: -.01em; }
p{ margin: 0; }
button{ font-family: inherit; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

:focus-visible{ outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }

.skip-link{
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--color-secondary); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 8px 0;
}
.skip-link:focus{ left: 0; }

.wrap{ max-width: var(--wrap); margin-inline: auto; }

.section-title{ font-size: 2.5rem; line-height: 1.15; }
@media (max-width: 640px){ .section-title{ font-size: 1.75rem; } }
.section-title--center{ text-align: center; margin-inline: auto; }
.section-lead{ color: var(--color-muted); font-size: 1.05rem; max-width: 46ch; margin-top: .9rem; }

section{
  padding-top: 5rem;
  padding-bottom: 5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (max-width: 640px){
  section{ padding-top: 3.25rem; padding-bottom: 3.25rem; }
}

.placeholder-text{
  color: var(--color-muted);
  font-style: italic;
  border-left: 2px dashed var(--color-border);
  padding-left: .7rem;
}

/* ---------- buttons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  padding: .85rem 1.5rem; border-radius: var(--radius-pill);
  transition: transform .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease);
  min-height: 44px; border: 2px solid transparent; cursor: pointer;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn--lg{ padding: 1rem 2rem; font-size: 1.02rem; }

.btn--primary{ background: var(--color-primary); color: var(--color-primary-ink); }
.btn--primary:hover{ background: var(--color-primary-dark); }

.btn--secondary{ background: var(--color-secondary); color: var(--color-secondary-fg); }
.btn--secondary:hover{ background: var(--color-secondary-dark); }

.btn--ghost-light{ background: transparent; color: #fff; border-color: rgba(255,255,255,.65); }
.btn--ghost-light:hover{ background: rgba(255,255,255,.12); border-color: #fff; }

/* ==========================================================================
   Media placeholders (auto-swapped by js/main.js once real files exist).
   Defined before component sections so a component's own background
   (e.g. .hero__media's dark gradient) wins the cascade over this default.
   ========================================================================== */
[data-media-bg]{
  background-color: var(--color-bg-alt);
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
[data-media-bg].is-placeholder::after{
  content: attr(data-media-label);
  font-size: .85rem; font-weight: 600; color: var(--color-muted);
  border: 1.5px dashed var(--color-border); border-radius: var(--radius-sm);
  padding: .6rem 1rem; background: rgba(255,255,255,.7); max-width: 80%;
}

/* ==========================================================================
   Header
   ========================================================================== */
/* Sem fundo: o cabeçalho flutua sobre o hero. Ao passar do hero ele ganha
   fundo — as seções abaixo são claras e os links brancos sumiriam nelas. */
.site-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-solid{
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.1) blur(6px);
  border-bottom-color: var(--color-border);
}

/* Estado transparente: tudo em branco, sobre o hero escuro. O botão vira
   branco com texto roxo porque o roxo do estado sólido é a mesma cor do
   painel do hero — ali ele simplesmente desapareceria. */
.site-header .nav__list a{ color: #fff; }
.site-header .nav__list a:hover{ color: #fff; border-color: var(--color-primary); }
.site-header .nav__toggle-icon,
.site-header .nav__toggle-icon::before,
.site-header .nav__toggle-icon::after{ background: #fff; }
.site-header .nav__cta{ background: #fff; color: var(--color-secondary); }
.site-header .nav__cta:hover{ background: rgba(255,255,255,.88); }

/* Estado sólido: volta às cores originais */
.site-header.is-solid .nav__list a{ color: var(--color-ink); }
.site-header.is-solid .nav__list a:hover{ color: var(--color-secondary); }
.site-header.is-solid .nav__toggle-icon,
.site-header.is-solid .nav__toggle-icon::before,
.site-header.is-solid .nav__toggle-icon::after{ background: var(--color-ink); }
.site-header.is-solid .nav__cta{ background: var(--color-secondary); color: var(--color-secondary-fg); }
.site-header.is-solid .nav__cta:hover{ background: var(--color-secondary-dark); }

/* O cabeçalho saiu do fluxo: sem isto, as âncoras do menu parariam com o
   topo da seção escondido atrás dele. */
section[id], footer[id]{ scroll-margin-top: 84px; }
/* Sem logo no cabeçalho: menu e botão ficam centralizados como um grupo.
   A marca segue presente na página pelo vídeo do topo e pelo rodapé. */
.site-header__inner{
  display: flex; align-items: center; gap: 1.5rem; min-height: 72px;
  justify-content: center;
  padding-left: 1.5rem; padding-right: 1.5rem;
}
/* .logo/.logo__img saíram junto com a marca do cabeçalho; .logo__word segue
   em uso no rodapé */
.logo__word{ font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--color-ink); }
.logo__word-mais{ color: var(--color-primary-dark); }
.logo__word--on-dark{ color: #fff; font-size: 1.4rem; }
.logo__word--on-dark .logo__word-mais{ color: var(--color-primary); }

.nav__list{ display: flex; gap: 1.9rem; }
.nav__list a{
  font-weight: 600; font-size: .95rem; color: var(--color-ink);
  padding-block: .3rem; border-bottom: 2px solid transparent;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.nav__list a:hover{ color: var(--color-secondary); border-color: var(--color-primary); }

.nav__toggle{
  display: none; width: 44px; height: 44px; border: none; background: none;
  position: relative; cursor: pointer;
}
.nav__toggle-icon,
.nav__toggle-icon::before,
.nav__toggle-icon::after{
  content: ""; position: absolute; left: 11px; right: 11px; height: 2px; background: var(--color-ink);
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav__toggle-icon{ top: 21px; }
.nav__toggle-icon::before{ top: -7px; }
.nav__toggle-icon::after{ top: 7px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon{ background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon::before{ transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon::after{ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px){
  .nav{
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--color-bg); border-bottom: 1px solid var(--color-border);
    max-height: 0; overflow: hidden; transition: max-height .25s var(--ease);
  }
  .nav.is-open{ max-height: 320px; }
  .nav__list{ flex-direction: column; gap: 0; padding: .5rem 1.5rem 1rem; }
  /* o painel aberto é branco, então os links voltam ao escuro mesmo com o
     cabeçalho transparente */
  .site-header .nav__list a{
    display: block; padding: .8rem 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-ink);
  }
  .nav__cta{ display: none; }
  /* sem logo, o centralizar deixaria o botão do menu no meio da barra */
  .nav__toggle{ display: block; margin-left: auto; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative; overflow: hidden;
  /* preenche a tela inteira: o cabeçalho é fixed e flutua por cima, então
     não entra na conta da altura (sem isso sobrava uma faixa branca da
     seção seguinte já visível sem rolar) */
  min-height: 100vh;
  color: #fff;
}
.hero__media{
  position: absolute; inset: 0;
  display: flex; align-items: center;
  background-color: #2B1400;
  background-image: linear-gradient(135deg, #2B1400 0%, var(--color-secondary) 100%);
  background-size: cover; background-position: center;
}
.hero__video{
  position: absolute; top: 0; left: 0; bottom: 0; right: auto; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
@media (min-width: 1024px){
  /* O arquivo tem 1112px de largura. Espalhá-lo por todo o hero obrigava a
     ampliar 1,7x em 1920px, e é isso que deixava a imagem mole. Como o
     gradiente já é roxo opaco a partir dos 60%, o vídeo nunca aparece
     depois dali: cobrindo só 64% ele passa a ser reduzido (nítido) nas
     larguras comuns, em vez de ampliado. */
  .hero__video{ width: 64%; }
}
/* Divisão do hero: vídeo limpo à esquerda e roxo sólido nos 40% da direita,
   atrás da copy, com uma passagem em gradiente entre os dois. A faixa até
   18% mantém um véu escuro leve: sem ele o vídeo compete com o conteúdo e
   deixa de ler como fundo. */
.hero__overlay{
  position: absolute; inset: 0; z-index: 1;
  background:
    /* véu no topo: o cabeçalho não tem fundo, e o vídeo tem paredes claras
       onde o logo branco ficaria ilegível. Some antes dos 180px. */
    linear-gradient(180deg, rgba(28, 21, 38, .5) 0%, rgba(28, 21, 38, 0) 180px),
    linear-gradient(90deg,
      rgba(28, 21, 38, .3) 0%,
      rgba(28, 21, 38, .34) 18%,
      rgba(75, 0, 130, .38) 32%,
      rgba(75, 0, 130, .82) 48%,
      var(--color-secondary) 60%,
      var(--color-secondary) 100%);
}
.hero__gif{
  /* fica do lado do vídeo: à direita passaria por cima da copy */
  position: absolute; left: 4%; bottom: 0; width: min(34vw, 420px); z-index: 2;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.35));
}
/* A copy ocupa 40% da largura da tela, encostada à direita (margin-left
   auto empurra a coluna dentro do flex do .hero__media). O recuo à direita
   acompanha a grade do site — alinha com a borda do botão do cabeçalho —
   até 10rem, e para aí: sem esse teto, em telas muito largas o recuo
   cresceria mais rápido que a coluna e o texto ficaria mais estreito a
   2560px do que a 1440px. */
.hero__content{
  position: relative; z-index: 3;
  flex: 0 0 40%; width: 40%;
  margin-left: auto;
  padding-block: 5rem;
  padding-right: clamp(1.5rem, calc((100vw - 1180px) / 2 + 1.5rem), 10rem);
  padding-left: 2.5rem;
}
.hero__title{
  font-size: 2.6rem;
  line-height: 1.12;
  /* distribui as palavras entre as linhas: sem isto sobra uma linha curta
     e solta no meio do título. Navegador sem suporte ignora e quebra normal. */
  text-wrap: balance;
}
@media (max-width: 1023px){
  /* 40% deixa a coluna estreita demais para o título: a copy passa a ocupar
     a largura toda e o gradiente vira vertical, com o vídeo aparecendo no
     alto e o roxo sólido descendo até o rodapé do bloco. */
  .hero__content{ flex: 0 0 100%; width: 100%; padding-left: 1.5rem; padding-right: 1.5rem; }
  .hero__overlay{
    background: linear-gradient(180deg,
      rgba(28, 21, 38, .35) 0%,
      rgba(75, 0, 130, .85) 30%,
      var(--color-secondary) 55%,
      var(--color-secondary) 100%);
  }
}
@media (max-width: 640px){ .hero__title{ font-size: 2.15rem; } }
.hero__title-accent{ color: var(--color-primary); }
.hero__subtitle{
  margin-top: 1.4rem; font-size: 1.15rem; color: rgba(255,255,255,.88); max-width: 52ch;
}
.hero__actions{ margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 1rem; }

/* hero placeholder label reads light-on-dark, unlike the generic (light) placeholder below */
.hero__media.is-placeholder::after{
  position: absolute; bottom: 1.5rem; right: 1.5rem; left: auto; top: auto; margin: 0; max-width: min(80%, 320px);
  color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.4); background: rgba(0,0,0,.35);
}

/* ==========================================================================
   Products carousel
   ========================================================================== */
.products{ background: var(--color-bg); }
.products .wrap{ text-align: left; }
/* precisa do .products na frente: os dois seletores caem no mesmo elemento
   (<div class="wrap products__cta">) e o de cima venceria por especificidade */
.products .products__cta{ text-align: center; margin-top: 2.5rem; }

.carousel{ position: relative; margin-top: 2.5rem; }
.carousel__track{
  display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 1.25rem 1.5rem 2rem; cursor: grab;
  scrollbar-width: thin; scrollbar-color: var(--color-border) transparent;
}
.carousel__track:active{ cursor: grabbing; }
.carousel__track.is-dragging{ scroll-snap-type: none; }

.carousel__arrow{
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: #fff; border: 1px solid var(--color-border); box-shadow: var(--shadow-card);
  color: var(--color-secondary); cursor: pointer;
  position: absolute; top: 42%; transform: translateY(-50%); z-index: 5;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.carousel__arrow:hover{ background: var(--color-secondary); color: #fff; }
.carousel__arrow--prev{ left: -4px; }
.carousel__arrow--next{ right: -4px; }
@media (max-width: 720px){ .carousel__arrow{ display: none; } }

.card-product{
  scroll-snap-align: start; flex: 0 0 auto; width: min(78vw, 300px);
  background: var(--color-bg-alt); border-radius: var(--radius-md);
  padding: 1.75rem 1.5rem; border: 1px solid var(--color-border);
  display: flex; flex-direction: column; gap: .6rem;
  position: relative;
  cursor: pointer;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease),
              border-color .28s var(--ease), background-color .28s var(--ease);
  will-change: transform;
}
/* O levantamento precisa competir com a parada da esteira, que acontece no
   mesmo instante: por isso o card também troca de fundo (cinza -> branco),
   o que o destaca dos vizinhos mesmo quando o olho perde os 12px de subida. */
.card-product:hover,
.card-product:focus-visible{
  transform: translateY(-12px) scale(1.02);
  background: var(--color-bg);
  border-color: var(--color-primary);
  box-shadow: 0 18px 38px rgba(28,21,38,.20), 0 0 0 2px rgba(255,127,0,.35);
}
.link-arrow{ display: inline-block; transition: transform .2s var(--ease); }
.card-product:hover .link-arrow,
.card-product:focus-visible .link-arrow{ transform: translateX(5px); }
.card-product h3{ font-size: 1.08rem; }
.card-product p{ color: var(--color-muted); font-size: .93rem; flex-grow: 1; }
.card-product__icon{
  width: 52px; height: 52px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; color: var(--color-secondary);
  border: 1px solid var(--color-border); margin-bottom: .4rem;
}
.card-product__link{ font-weight: 700; font-size: .9rem; color: var(--color-secondary); }
/* .card-product--highlight e o selo "Novidade" saíram: todos os cards de
   modalidade agora têm o mesmo tratamento visual */

/* ==========================================================================
   Benefits
   ========================================================================== */
/* ==========================================================================
   Bancos parceiros — esteira de logos em bolas
   Sem card e sem clique: é uma faixa informativa, não um controle.
   ========================================================================== */
.partners{ background: var(--color-bg-alt); }
.partners__lead{ max-width: 52ch; margin-inline: auto; text-align: center; }
.partners__marquee{
  overflow: hidden;
  margin-top: 2.75rem;
  /* anula o padding lateral da section: a faixa corre de ponta a ponta */
  margin-left: -1.5rem; margin-right: -1.5rem;
}
.partners__track{
  display: flex; align-items: center; gap: 2.5rem;
  width: max-content; padding: .5rem 1.5rem;
  will-change: transform;
}
/* Cada bola usa a cor da própria marca (--marca, no HTML). As seis logos
   são brancas sobre fundo escuro: numa bola branca elas sumiriam, e como
   a cor da bola bate com o fundo do arquivo, a borda do retângulo não
   aparece dentro do círculo. */
.partner{
  flex: 0 0 auto;
  width: 132px; height: 132px; border-radius: 50%;
  background: var(--marca, var(--color-bg));
  display: grid; place-items: center;
  overflow: hidden;
  padding: 1.4rem;
  box-shadow: var(--shadow-card);
}
.partner__logo{ max-width: 100%; max-height: 100%; object-fit: contain; }
.partner__logo[hidden]{ display: none; }
.partner__nome{
  font-family: var(--font-display); font-weight: 700; font-size: .92rem;
  color: #fff; text-align: center; line-height: 1.25;
}
@media (max-width: 640px){
  .partner{ width: 108px; height: 108px; padding: 1.2rem; }
  .partners__track{ gap: 1.5rem; }
  .partner__nome{ font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce){
  /* sem esteira: as bolas ficam paradas, centralizadas e quebrando linha */
  .partners__track{
    width: auto; flex-wrap: wrap; justify-content: center;
    transform: none !important; row-gap: 1.5rem;
  }
}

/* ==========================================================================
   Store
   ========================================================================== */
.store__grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
}
@media (max-width: 900px){ .store__grid{ grid-template-columns: 1fr; } }

.store__facts{ margin: 1.75rem 0 2rem; display: grid; gap: 1.1rem; }
.store__fact dt{ font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-secondary); }
.store__fact dd{ margin: .25rem 0 0; line-height: 1.5; }
.store__fact dd a{ text-decoration: underline; text-decoration-color: var(--color-border); text-underline-offset: 3px; }
.store__fact dd a:hover{ color: var(--color-secondary); text-decoration-color: currentColor; }

.store__photos{
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 1rem;
}
.store__photo{ border-radius: var(--radius-md); aspect-ratio: 4 / 3; }
.store__photo--lg{ grid-column: 1 / -1; aspect-ratio: 16 / 9; }

/* ==========================================================================
   Founder
   ========================================================================== */
.founder{ background: var(--color-bg-alt); }
.founder__grid{
  display: grid; grid-template-columns: .8fr 1.2fr; gap: 3.5rem; align-items: center;
}
@media (max-width: 900px){ .founder__grid{ grid-template-columns: 1fr; } }
/* Painel da fundadora: a foto é um recorte com fundo transparente, então
   ganha um painel tingido com o roxo da marca para se apoiar. O object-fit
   cover com alinhamento no topo enquadra cabeça e tronco a partir da imagem
   de corpo inteiro, sem precisar de um segundo arquivo recortado. */
.founder__photo{
  border-radius: var(--radius-lg);
  aspect-ratio: 3 / 4;
  max-width: 380px;
  margin-inline: auto;
  background: rgba(75, 0, 130, .07);
  overflow: hidden;
  padding: 1.75rem 1.25rem 0;
}
.founder__photo img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
.founder__content .section-title{ margin-top: .4rem; }
.founder__content p{
  margin-top: 1.25rem;
  color: var(--color-muted);
  max-width: 58ch; /* limita a linha: a coluna cheia daria ~80 caracteres */
}
.founder__signature{
  margin-top: 1.75rem !important;
  color: var(--color-ink) !important;
  font-weight: 700;
  font-size: .95rem;
}
.founder__signature::before{
  content: ""; display: block; width: 42px; height: 3px;
  background: var(--color-primary); border-radius: 2px; margin-bottom: .85rem;
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials{ background: var(--color-secondary); color: #fff; }
.testimonials .section-title{ color: #fff; }
.testimonials .carousel__arrow{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff; }
.testimonials .carousel__arrow:hover{ background: #fff; color: var(--color-secondary); }

.carousel--testimonials .carousel__track{ justify-content: flex-start; padding-left: 1.5rem; padding-right: 1.5rem; }
.card-testimonial{
  scroll-snap-align: center; flex: 0 0 auto; width: min(84vw, 480px);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-md); padding: 2rem; font-size: 1.05rem;
  display: flex; flex-direction: column;
}
.card-testimonial blockquote{ margin: 0; }
.card-testimonial__author{
  /* margin-top auto encosta a assinatura na base: como os cards têm altura
     igual e as citações têm tamanhos diferentes, sem isto os nomes ficariam
     em alturas diferentes de card para card */
  margin-top: auto; padding-top: 1.25rem; font-weight: 700;
  display: flex; flex-direction: column; gap: .15rem;
}
.card-testimonial__date{
  font-weight: 500; font-size: .85rem; color: rgba(255,255,255,.65);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background: var(--color-secondary); color: rgba(255,255,255,.85);
  padding-top: 4rem; padding-bottom: 1.5rem; padding-left: 1.5rem; padding-right: 1.5rem;
}
.site-footer__grid{
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem;
  padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.15);
}
@media (max-width: 760px){ .site-footer__grid{ grid-template-columns: 1fr; gap: 2.5rem; } }

.site-footer__brand p{ margin-top: .9rem; max-width: 32ch; }
.site-footer__social{ display: flex; gap: .75rem; margin-top: 1.5rem; }
.social-icon{
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  transition: background-color .15s var(--ease);
}
.social-icon:hover{ background: var(--color-primary); color: var(--color-primary-ink); }

.site-footer__col h3{ font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: #fff; margin-bottom: 1rem; }
.site-footer__col ul{ display: grid; gap: .65rem; }
.site-footer__col .placeholder-text{ color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.3); }
.site-footer__col a:hover{ color: var(--color-primary); }

.site-footer__legal{ padding-top: 1.5rem; font-size: .85rem; color: rgba(255,255,255,.6); }

/* ==========================================================================
   Scroll reveal
   O estado oculto vive sob `html.js`, classe escrita por um script inline no
   <head>: se o JS falhar em carregar, nada disso se aplica e a página aparece
   inteira, em vez de ficar em branco.
   O deslocamento usa `translate` (propriedade própria) e não `transform`:
   assim ele compõe com o `transform` de hover de botões e cards em vez de
   sobrescrevê-lo. Só opacidade e deslocamento mudam, então o conteúdo segue
   no DOM, acessível a leitor de tela e navegável por teclado antes de revelar.
   ========================================================================== */
html.js .reveal{
  opacity: 0;
  translate: 0 22px;
  transition: opacity .6s ease-out, translate .6s ease-out;
}
html.js .reveal.is-visible{
  opacity: 1;
  translate: 0 0;
}
@media (prefers-reduced-motion: reduce){
  html.js .reveal{
    opacity: 1 !important;
    translate: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Esteira contínua (marquee) — o JS ativa este modo apenas quando
   prefers-reduced-motion NÃO está ativo; sem JS o carrossel continua
   rolável normalmente (overflow-x do .carousel__track original).
   ========================================================================== */
.carousel__viewport{ overflow: hidden; }
.carousel__track.is-marquee{
  overflow: visible;
  width: max-content;
  /* folga suficiente para a subida (12px) + escala + sombra do hover não
     serem cortadas pelo overflow:hidden do .carousel__viewport */
  padding: 2rem 0 3.25rem;
  scroll-snap-type: none;
  touch-action: pan-y;
  will-change: transform;
}

/* ==========================================================================
   Detalhe em retângulo flutuante (morph FLIP a partir do card clicado)
   O painel não cobre mais a tela inteira — vira um cartão grande, centrado,
   com bordas arredondadas. Como agora sobra página visível ao redor, entra
   um backdrop escuro atrás dele (senão o texto branco perderia contraste
   contra o conteúdo claro por baixo).
   ========================================================================== */
.morph-backdrop{
  position: fixed; inset: 0; z-index: 299;
  background: rgba(15, 12, 20, .6);
  opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease);
}
.morph-backdrop.is-visible{ opacity: 1; pointer-events: auto; }
.morph-backdrop[hidden]{ display: none; }

.morph-overlay{
  position: fixed; z-index: 300; overflow: hidden;
  background: var(--color-secondary); color: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 30px 70px rgba(13,10,20,.45);
  /* abertura com leve "pop": passa um pouco do tamanho final e assenta —
     dá a sensação de um cartão que salta pra frente, não de algo que só
     cresce. cubic-bezier(.34,1.56,.64,1) é a mesma curva usada no voo do
     ícone, aqui reaproveitada porque as duas animações acontecem juntas. */
  transition:
    top .5s cubic-bezier(.34, 1.56, .64, 1),
    left .5s cubic-bezier(.34, 1.56, .64, 1),
    width .5s cubic-bezier(.34, 1.56, .64, 1),
    height .5s cubic-bezier(.34, 1.56, .64, 1),
    border-radius .5s cubic-bezier(.34, 1.56, .64, 1),
    opacity .25s var(--ease);
  will-change: top, left, width, height;
}
.morph-overlay[hidden]{ display: none; }

/* Fechamento com curva própria, sem overshoot: o alvo é o card pequeno na
   grade, e "passar do ponto" ali vira tremor visível bem na hora de
   assentar — o mesmo motivo que já valia para o ícone. Mais lenta que a
   abertura de propósito: fechar rápido demais lê como sumiço, não como
   retorno. A opacidade entra atrasada — no fim do encolhimento o painel
   dissolve sobre o card em vez de sumir de uma vez. */
.morph-overlay.is-closing{
  transition:
    top .65s cubic-bezier(.32, .72, .24, 1),
    left .65s cubic-bezier(.32, .72, .24, 1),
    width .65s cubic-bezier(.32, .72, .24, 1),
    height .65s cubic-bezier(.32, .72, .24, 1),
    border-radius .65s cubic-bezier(.32, .72, .24, 1),
    opacity .28s ease-out .34s;
}
/* texto e botão saem antes de a caixa começar a encolher: conteúdo
   diagramado encolhendo junto com o painel fica ilegível e embolado */
.morph-overlay.is-closing .morph-overlay__content,
.morph-overlay.is-closing .morph-overlay__close{
  transition-duration: .16s;
}

.morph-overlay__close{
  position: absolute; top: 1.25rem; right: 1.25rem; z-index: 2;
  width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid currentColor; background: transparent; color: inherit;
  display: grid; place-items: center; cursor: pointer;
  opacity: 0;
  transition: opacity .25s var(--ease), transform .2s var(--ease);
}
.morph-overlay__close:hover{ transform: scale(1.08); }

.morph-overlay__content{
  position: relative; z-index: 2; /* acima dos ícones decorativos do fundo */
  height: 100%; overflow-y: auto;
  display: flex; flex-direction: column;
  /* "safe center": centraliza quando cabe, mas vira topo quando o conteúdo
     estoura a altura do painel. Com "center" puro, conteúdo mais longo (o
     card com a lista "Atendemos:") ficava cortado por cima ao rolar até o
     topo — bug clássico de flexbox centralizado com overflow, porque o
     browser centraliza pelo tamanho ideal e a rolagem não alcança o topo
     real do conteúdo. */
  justify-content: safe center;
  max-width: 620px; margin-inline: auto;
  padding: 1.25rem 2rem;
  opacity: 0; transform: translateY(12px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
/* Reserva o lugar onde o ícone do card vai pousar. Fica vazio de propósito:
   quem aparece ali é o .morph-flyer, que voa desde o card. O slot existe
   para o texto ser diagramado já contando com o ícone (sem pulo no layout)
   e para o JS medir o destino exato do voo. */
.morph-overlay__icon-slot{
  width: 68px; height: 68px; flex: 0 0 auto; margin-bottom: 1rem;
}
@media (max-width: 640px){
  .morph-overlay__icon-slot{ width: 56px; height: 56px; margin-bottom: .85rem; }
}
.morph-overlay.is-revealed .morph-overlay__content,
.morph-overlay.is-revealed .morph-overlay__close{
  opacity: 1; transform: none;
}

.morph-overlay__title{ font-size: 1.85rem; line-height: 1.15; }
@media (max-width: 640px){ .morph-overlay__title{ font-size: 1.5rem; } }
.morph-overlay__body p{
  margin-top: .7rem; font-size: 1.05rem; line-height: 1.42;
}
.morph-overlay__rotulo{
  font-weight: 700; margin-top: .9rem !important; opacity: .85;
}
/* Duas colunas: a lista "Atendemos:" (consignado, 5 itens) é o que mais
   empurra o painel pra fora da tela em janelas baixas — em 1 coluna são
   5 linhas, em 2 só 3. Listas curtas (2-3 itens) também ficam bem assim,
   então não há necessidade de uma variante condicional. */
.morph-overlay__lista{
  margin-top: .4rem; display: grid; grid-template-columns: repeat(2, 1fr);
  column-gap: 1.25rem; row-gap: .3rem; font-size: 1rem;
}
@media (max-width: 480px){
  .morph-overlay__lista{ grid-template-columns: 1fr; }
}
.morph-overlay__lista li{
  position: relative; padding-left: 1.4rem; line-height: 1.35;
}
.morph-overlay__lista li::before{
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; opacity: .55;
}
.morph-overlay__cta{
  margin-top: 1.5rem; align-self: flex-start;
  background: #fff; color: var(--color-ink);
}
/* fundos claros (laranja) usam texto/CTA escuros */
.morph-overlay--ink-dark .morph-overlay__cta{
  background: var(--color-primary-ink); color: #fff;
}

.morph-overlay__close{ z-index: 3; }

/* --------------------------------------------------------------------------
   Ícone do card viajando até a tela cheia (FLIP em camada própria)
   Fica no <body>, acima do overlay, para cruzar a cor que se expande.
   Só transform anima: a posição inicial é fixada em px no próprio elemento.
   -------------------------------------------------------------------------- */
.morph-flyer{
  position: fixed; z-index: 301;
  transform-origin: top left;
  pointer-events: none;
  /* overshoot: chega com uma molejada, denunciando camada independente */
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1);
  will-change: transform;
}
/* Na volta, sem overshoot. O destino é o círculo pequeno do card, então
   passar do ponto vira um tremor logo no instante em que o ícone deveria
   assentar. Mesma curva e mesma duração do painel, para os dois voltarem
   como uma coisa só. */
.morph-flyer.is-returning{
  transition: transform .6s cubic-bezier(.32, .72, .24, 1), opacity .2s ease-out .4s;
}
.morph-flyer .card-product__icon{ margin: 0; width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   Ícones decorativos do fundo da tela cheia
   -------------------------------------------------------------------------- */
.morph-overlay__decor{
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden; pointer-events: none;
}
.morph-decor{
  position: absolute;
  width: var(--decor-tam); height: var(--decor-tam);
  color: currentColor;
  opacity: 0;
  transform: translateY(26px) rotate(0deg);
  transition: opacity .5s ease-out, transform .55s var(--ease);
  will-change: transform, opacity;
}
.morph-decor.is-in{
  opacity: var(--decor-op);
  transform: rotate(var(--decor-rot));
}
.morph-decor__inner{
  display: block; width: 100%; height: 100%;
  animation: decor-float 5s ease-in-out infinite alternate;
}
@keyframes decor-float{
  from{ transform: translateY(-8px); }
  to{ transform: translateY(8px); }
}
/* fechando: somem rápido, antes de o fundo começar a encolher */
.morph-overlay.is-closing .morph-decor{
  opacity: 0;
  transition-duration: .16s;
  transition-delay: 0s;
}
@media (max-width: 640px){
  /* tela estreita não tem margem lateral livre: os ícones passam por baixo
     do texto, então perdem peso para não atrapalhar a leitura */
  .morph-decor{ opacity: 0; }
  .morph-decor.is-in{ opacity: calc(var(--decor-op) * .55); }
  .morph-decor{ width: calc(var(--decor-tam) * .7); height: calc(var(--decor-tam) * .7); }
}
@media (prefers-reduced-motion: reduce){
  /* sem voo e sem flutuação: aparecem direto na posição de repouso */
  .morph-flyer{ transition: none; }
  .morph-decor{ transition: none; transform: rotate(var(--decor-rot)); }
  .morph-decor__inner{ animation: none; }
}