/* =========================================================================
   APAE Lauro de Freitas - Hot site "Tijolo a Tijolo"
   Convertido de HOTSITE_APAE.psd (prancha 1920 x 6951).

   Sistema de coordenadas
   ----------------------
   Cada <section> declara --h (altura da fatia no PSD) e recebe --s, a escala
   (largura atual / 1920). Todo elemento posicionado usa os MESMOS numeros em
   px do PSD:  left: calc(var(--x) * var(--s)).
   Assim o desktop e fiel ao original e acompanha qualquer largura de tela.
   Abaixo de 820px entra um layout empilhado proprio (final do arquivo).
   ========================================================================= */

:root {
  --ink: #232322;
  --ink2: #1c1c1b;
  --branco: #ffffff;
  --amarelo-card: #ffe300;
  --azul: #0075e0;
  --azul-sec: #2f74dc;
  --laranja-bullet: #f66900;
  --cinza-card: #484848;
  --amarelo: #f9af00;
  --laranja: #f36b0c;
  --laranja-esc: #e56608;
  --rodape: #f56900;
  --parede: #fe6900;   /* base da parede de tijolos da secao APOIO */
  --fonte: "Barlow Condensed", "Myriad Pro Condensed", "Arial Narrow", Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--amarelo);
  color: var(--ink);
  font-family: var(--fonte);
  font-weight: 400;
  line-height: 1;
}

img { display: block; max-width: 100%; }
p, h1, h2, h3, ul, li, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 700; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--ink); color: #fff; padding: 12px 20px; font-size: 18px;
}
.skip:focus { left: 0; }

/* ---------- Palco e secoes ---------- */
.stage { width: 100%; overflow-x: clip; }
@supports (container-type: inline-size) { .stage { container-type: inline-size; } }

.sec {
  position: relative;
  width: 100%;
  --s: calc(100vw / 1920);
  height: calc(var(--h) * var(--s));
  overflow: visible;
}
@supports (container-type: inline-size) { .sec { --s: calc(100cqw / 1920); } }

.plate {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: fill;
}

/* Posicionamento generico. --dy compensa a diferenca entre a caixa de texto
   do CSS e a caixa de glifos medida no PSD. */
.abs {
  position: absolute;
  z-index: 1;
  left: calc(var(--x) * var(--s));
  top: calc((var(--y) + var(--dy, 0)) * var(--s));
  width: calc(var(--w) * var(--s));
}
img.abs { height: auto; }
/* Só os wrappers que devem preencher a largura declarada em --w.
   (Evita atingir os ícones do botão PIX, que têm tamanho próprio.) */
.logo img, .hero-cta img, .social a img { width: 100%; height: auto; }

/* ---------- Tipografia base ---------- */
.tit, .sede-txt, .tagline, .doe, .tij-pre, .tij-tit, .tij-sub, .rodape-txt,
.item span, .stat b, .stat span, .card h3, .card li {
  font-size: calc(var(--fs) * var(--s));
}

/* =========================================================================
   1. HERO
   ========================================================================= */
.logo { z-index: 3; transition: transform .3s var(--ease); }
.logo:hover { transform: translateY(-2px); }

.menu {
  background: none; border: 0; padding: 0; cursor: pointer;
  height: calc(var(--hh) * var(--s));
  display: flex; flex-direction: column; justify-content: space-between;
  z-index: 3;
}
.menu span {
  display: block; width: 100%;
  height: calc(9 * var(--s));
  background: var(--ink2); border-radius: calc(2 * var(--s));
  transition: transform .3s var(--ease);
}
.menu:hover span:first-child { transform: translateX(calc(-6 * var(--s))); }
.menu:hover span:last-child { transform: translateX(calc(6 * var(--s))); }

.hero-cta { z-index: 3; transition: transform .3s var(--ease); }
.hero-cta:hover { transform: translateY(-3px); }
.hero-title { z-index: 2; }
.hero-photo { z-index: 2; }

/* =========================================================================
   2. A SEDE
   ========================================================================= */
.sede-mao { z-index: 2; }

.sede-txt {
  --dy: calc(var(--fs) * -0.27);
  letter-spacing: -.011em;
  z-index: 3;
  text-transform: uppercase;
  line-height: 1.14;
  color: var(--ink);
}
.sede-txt b { font-weight: 900; }

/* ---------- Botao PIX (3 ocorrencias) ---------- */
.btn-pix {
  position: absolute;
  z-index: 3;
  height: calc(var(--hh) * var(--s));
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit;
}
/* Fundo (pilula + losango) vem recortado do PSD, para as formas baterem exatamente. */
.btn-pix__fundo {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  transition: filter .25s var(--ease), transform .25s var(--ease);
}
.btn-pix__logo {
  position: absolute; z-index: 2;
  left: calc(11 * var(--s)); top: calc(11 * var(--s));
  width: calc(48 * var(--s)); height: auto;
}
.btn-pix__label {
  position: absolute; z-index: 2;
  left: calc(75 * var(--s)); top: calc(17.8 * var(--s));
  font-size: calc(31 * var(--s));
  font-weight: 900; color: var(--branco);
  text-transform: uppercase; white-space: nowrap;
}
.btn-pix__copy {
  position: absolute; z-index: 2;
  left: calc(303 * var(--s)); top: calc(21 * var(--s));
  width: calc(24 * var(--s)); height: auto;
  opacity: .6;
  mix-blend-mode: multiply;
}
.btn-pix:hover .btn-pix__fundo { filter: brightness(.93); transform: translateY(calc(-2 * var(--s))); }
.btn-pix:focus-visible { outline: calc(4 * var(--s)) solid var(--ink2); outline-offset: calc(3 * var(--s)); border-radius: 999px; }
.btn-pix.is-copiado .btn-pix__fundo { filter: hue-rotate(85deg) saturate(1.4); }

/* =========================================================================
   3. O QUE FALTA
   ========================================================================= */
.tit {
  --dy: calc(var(--fs) * -0.20);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: var(--ink);
}
.tit b { font-weight: 700; }
/* As quebras de linha são fixas (<br>), como no PSD: nada reflui no desktop. */
.tit, .tagline, .doe, .sede-txt, .tij-pre, .tij-tit, .tij-sub,
.rodape-txt, .item span, .card h3 { white-space: nowrap; }
.tit--branco { color: var(--branco); }
.tit--amarelo { color: var(--amarelo-card); text-transform: none; }
/* tracking calibrado por titulo: a Barlow e um pouco mais larga que a Myriad
   do PSD, e cada titulo mistura pesos diferentes. */
#falta-tit { letter-spacing: -.011em; }
#num-tit   { letter-spacing: -.015em; }
#serv-tit  { letter-spacing: -.035em; }

.item { text-align: center; --dy: -4.8; }
.item img {
  position: absolute;
  left: calc(var(--ix) * var(--s));
  top: calc((var(--iy) - var(--dy, 0)) * var(--s));
  width: calc(var(--iw) * var(--s));
  height: auto;
}
.item span {
  --fs: 24;
  letter-spacing: -.012em;
  display: block;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: var(--branco);
}

/* =========================================================================
   4. NUMEROS
   ========================================================================= */
.stat { text-align: center; --dy: -8; }
.stat b {
  --fs: 76.3;
  display: block;
  text-transform: uppercase;
  font-weight: 900;
  line-height: .81;
  letter-spacing: -.05em;
  color: var(--ink);
}
.stat span {
  --fs: 25.7;
  display: block;
  font-weight: 600;
  line-height: .88;
  text-transform: uppercase;
  color: var(--ink);
}
.stat--texto { --dy: -5.5; }
.stat--texto span { --fs: 25.7; font-weight: 600; }
.stat--texto b { --fs: 50.7; line-height: .95; letter-spacing: -.03em; }

.divisor { height: calc(12 * var(--s)); }
.divisor::before {
  content: ""; position: absolute;
  left: calc(3 * var(--s)); top: calc(3 * var(--s));
  width: calc(84 * var(--s)); height: calc(6 * var(--s));
  background: var(--ink);
}
.divisor::after {
  content: ""; position: absolute; left: 0; top: 0;
  width: calc(13 * var(--s)); height: calc(12 * var(--s));
  border-radius: 50%; background: var(--ink);
  box-shadow: calc(80 * var(--s)) 0 0 var(--ink);
}

.tagline {
  --dy: calc(var(--fs) * -0.135);
  letter-spacing: -.040em;
  line-height: .87;
  text-transform: uppercase;
  color: var(--ink2);
  font-weight: 400;
}
.tagline b { font-weight: 700; }
.tagline__in { display: inline-block; padding-left: calc(42 * var(--s)); }

.doe {
  --dy: calc(var(--fs) * -0.215);
  letter-spacing: -.022em;
  line-height: 1.03;
  text-transform: uppercase;
  text-align: right;
  color: var(--ink);
}
.regua { height: calc(var(--hh) * var(--s)); background: var(--ink2); }

/* =========================================================================
   5. CARROSSEL DE SERVICOS
   ========================================================================= */
.carrossel { overflow: hidden; }
.carrossel__trilho {
  display: flex;
  gap: calc(12.33 * var(--s));
  transform: translateX(calc(var(--n, 0) * -358.33 * var(--s)));
  transition: transform .6s var(--ease);
}
.card {
  position: relative;
  flex: 0 0 calc(346 * var(--s));
  width: calc(346 * var(--s));
}
.card > img { width: 100%; height: auto; border-radius: calc(58 * var(--s)); }
.card h3 {
  --fs: 40;
  letter-spacing: -.010em;
  position: absolute;
  --dy: 0;
  left: calc(36 * var(--s));
  top: calc(var(--th, 43) * var(--s));
  width: calc(270 * var(--s));
  font-weight: 700;
  line-height: .83;
  text-transform: uppercase;
  color: var(--ink);
}
.card__tit--menor { --fs: 40.5; }
.card > ul {
  position: absolute;
  left: calc(34 * var(--s));
  /* -5.5: alinha a tinta da 1a linha com a caixa medida no PSD */
  top: calc((var(--bt, 128) - 5.5) * var(--s));
  width: calc(302 * var(--s));
}
.card li {
  --fs: 22.3;
  letter-spacing: -.033em;   /* caixa baixa da Barlow e mais larga que a da Myriad */
  line-height: 1.09;
  color: var(--cinza-card);
  break-inside: avoid;
}
/* marcador inline (como no PSD): a linha que quebra volta a alinhar na margem */
.card li::before {
  content: "• ";
  color: var(--laranja-bullet);
  font-size: 1.3em;
  line-height: 0;
}
.card__duas { width: calc(312 * var(--s)); columns: 2; column-gap: calc(18 * var(--s)); }
.card__duas .quebra { break-after: column; }

.seta {
  height: calc(39 * var(--s));
  padding: 0; border: 0; background: none; cursor: pointer; z-index: 4;
  transition: transform .25s var(--ease);
}
.seta svg { width: 100%; height: auto; display: block; }
.seta circle { fill: var(--branco); }
.seta path { fill: none; stroke: var(--azul-sec); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.seta:hover { transform: scale(1.12); }
.seta:focus-visible { outline: calc(4 * var(--s)) solid var(--branco); outline-offset: calc(3 * var(--s)); border-radius: 50%; }
.seta[disabled] { opacity: .35; cursor: default; transform: none; }

/* =========================================================================
   6. TIJOLOMETRO
   ========================================================================= */
.tij-pre {
  --dy: calc(var(--fs) * -0.20);
  letter-spacing: -.027em;
  text-transform: uppercase; line-height: 1; color: var(--ink2);
}
.tij-tit {
  --dy: calc(var(--fs) * -0.175);
  letter-spacing: -.029em;
  font-weight: 700; line-height: .95; text-transform: uppercase; color: var(--ink2);
}
.tij-sub {
  --dy: calc(var(--fs) * -0.18);
  letter-spacing: -.020em;
  line-height: .96; text-transform: uppercase; color: var(--ink);
}

.tijolos-sombra { mix-blend-mode: multiply; z-index: 0; }

.contador {
  display: flex;
  gap: calc(4.6 * var(--s));
  height: calc(123 * var(--s));
}
.contador span {
  flex: 1 1 calc(86 * var(--s));
  display: grid; place-items: center;
  border: calc(2 * var(--s)) solid var(--ink2);
  border-radius: calc(24 * var(--s));
  font-size: calc(114 * var(--s));
  font-weight: 600;
  line-height: 1;
  color: var(--ink2);
}
/* a tinta do algarismo fica 0.05em abaixo do centro da caixa de linha */
.contador i { font-style: normal; display: block; transform: translateY(-.05em); }

/* =========================================================================
   7. APOIO (parceiros)
   A parede de tijolos e a chapa; so o titulo, o botao e as marcas sao DOM.
   ========================================================================= */
#apoio-tit {
  line-height: .97;          /* entrelinha 62 para corpo 64, como no PSD */
  letter-spacing: -.025em;
  /* Alinhado pelo topo das MAIUSCULAS, nao pela caixa do PSD: os acentos da
     Barlow sobem mais que os da Myriad, entao casar a caixa deixaria a linha
     inteira 12px acima. Anula o --dy herdado de .tit. */
  --dy: -0.8;
}

.btn-parceiros {
  display: block;
  height: calc(var(--hh) * var(--s));
  z-index: 3;
}
/* A pilula vem recortada do PSD: o dourado dela nao e o --amarelo do site. */
.btn-parceiros__fundo {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  transition: filter .25s var(--ease), transform .25s var(--ease);
}
.btn-parceiros__label {
  position: absolute; z-index: 2;
  left: 0; right: 0;
  top: calc(24.8 * var(--s));
  font-size: calc(36 * var(--s));
  letter-spacing: -.021em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: #000;
}
.btn-parceiros:hover .btn-parceiros__fundo { filter: brightness(.95); transform: translateY(calc(-2 * var(--s))); }
.btn-parceiros:focus-visible { outline: calc(4 * var(--s)) solid var(--branco); outline-offset: calc(3 * var(--s)); border-radius: 999px; }

.apoio-marcas img { transition: transform .3s var(--ease); }
.apoio-marcas img:hover { transform: translateY(calc(-3 * var(--s))); }

/* =========================================================================
   8. RODAPE
   ========================================================================= */
.rodape-txt {
  --dy: calc(var(--fs) * -0.20);
  letter-spacing: -.020em;
  text-align: center; text-transform: uppercase; color: var(--branco); line-height: 1;
}
.social { display: flex; gap: calc(11 * var(--s)); }
.social a { display: block; width: calc(65 * var(--s)); transition: transform .25s var(--ease); }
.social a:hover { transform: scale(1.1); }
.social a:focus-visible { outline: calc(3 * var(--s)) solid var(--branco); outline-offset: calc(3 * var(--s)); border-radius: 50%; }

/* ---------- Aviso de copia ---------- */
.aviso {
  /* Centraliza por left+right+margin, nao por translate(-50%): com `left: 50%` a
     largura disponivel para o shrink-to-fit e so metade da tela, e o aviso do PIX
     (duas linhas) desceria para quatro linhas num celular de 320px. */
  position: fixed; left: 16px; right: 16px; bottom: 24px;
  width: fit-content; max-width: 440px; margin-inline: auto;
  transform: translateY(20px);
  background: var(--ink2); color: #fff; padding: 13px 24px; border-radius: 20px;
  font-size: 17px; letter-spacing: .02em; text-align: center; line-height: 1.35;
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s;
  z-index: 50;
}
.aviso.is-visivel { opacity: 1; transform: translateY(0); }

/* =========================================================================
   MOVIMENTO (N1 + N2)
   Sem JS os elementos ja nascem visiveis; .js-on e aplicado pelo script.
   ========================================================================= */
.js-on .reveal { opacity: 0; transform: translateY(26px); }
.js-on .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js-on .reveal.is-in.d1 { transition-delay: .08s; }
.js-on .reveal.is-in.d2 { transition-delay: .16s; }
.js-on .reveal.is-in.d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js-on .reveal { opacity: 1 !important; transform: none !important; }
  .carrossel__trilho { transition: none !important; }
}

/* =========================================================================
   MOBILE - layout empilhado (abaixo de 820px)
   ========================================================================= */
@media (max-width: 820px) {
  .stage { container-type: normal; }

  .sec {
    height: auto;
    padding: 34px 20px 40px;
    display: flex; flex-direction: column; align-items: center;
    gap: 22px;
    text-align: center;
  }
  .plate { display: none; }
  .abs, img.abs {
    position: static;
    width: auto; max-width: 100%;
    left: auto; top: auto;
  }
  .abs { --dy: 0; }

  /* tamanhos de texto proprios do mobile */
  .tit, .tagline, .doe, .sede-txt, .tij-pre, .tij-tit, .tij-sub,
  .rodape-txt, .item span, .card h3 { white-space: normal; }
  .tit { font-size: 30px; line-height: 1.04; }
  .sede-txt { font-size: 19px; line-height: 1.25; text-align: left; }
  .sede-txt br { display: none; }
  .item span { font-size: 14px; }
  .stat b { font-size: 46px; }
  .stat span { font-size: 15px; }
  .stat--texto b { font-size: 32px; }
  .tagline { font-size: 32px; }
  .doe { font-size: 19px; text-align: center; }
  .tij-pre { font-size: 26px; }
  .tij-tit { font-size: 56px; }
  .tij-sub { font-size: 18px; }
  .rodape-txt { font-size: 18px; }
  .card h3 { font-size: 26px; }
  .card li { font-size: 15px; }

  /* 1. hero */
  .sec--hero { background: var(--amarelo); padding-top: 22px; }
  .sec--hero .logo { width: 180px; align-self: flex-start; }
  .sec--hero .menu {
    position: absolute; top: 30px; right: 20px;
    width: 42px; height: 32px;
  }
  .sec--hero .menu span { height: 5px; border-radius: 2px; }
  .hero-title { width: 290px; order: 1; }
  .hero-photo { width: 100%; max-width: 420px; order: 2; }
  .hero-cta { width: 190px; order: 3; }

  /* 2. sede */
  .sec--sede { background: var(--laranja); }
  .sede-mao { width: 112%; max-width: none; margin-inline: -6%; }
  .sec--sede img[src*="qr-"] { width: 100%; max-width: 420px; }

  /* botao PIX */
  .btn-pix {
    position: relative; width: 300px; height: 60px;
    --s: 1px; align-self: center; flex: none;
  }
  .btn-pix::before { left: 17px; top: 6px; right: 0; bottom: 5px; }
  .btn-pix::after { left: 9px; top: 9px; width: 42px; height: 42px; border-radius: 10px; }
  .btn-pix__logo { left: 10px; top: 10px; width: 41px; }
  .btn-pix__label { left: 66px; top: 19px; font-size: 26px; }
  .btn-pix__copy { left: auto; right: 16px; top: 18px; width: 20px; }

  /* 3. o que falta */
  .sec--falta { background: var(--laranja-esc); }
  .falta-lista {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 30px 16px; width: 100%; margin-top: 8px;
  }
  .item {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding-top: 0;
  }
  .item img { position: static; width: auto; height: 64px; object-fit: contain; }

  /* 4. numeros */
  .sec--numeros { background: var(--amarelo); }
  .numeros {
    display: grid; grid-template-columns: 1fr 1fr; gap: 26px 10px;
    width: 100%; justify-items: center;
  }
  .divisor { display: none; }
  .regua { display: none; }
  .tagline__in { padding-left: 0; }

  /* 5. carrossel - rolagem horizontal nativa */
  .sec--servicos { background: var(--azul-sec); }
  .carrossel { width: 100vw; margin-inline: -20px; overflow: visible; }
  .carrossel__trilho {
    transform: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    padding: 4px 20px 16px;
    -webkit-overflow-scrolling: touch;
  }
  .card { flex: 0 0 270px; width: 270px; scroll-snap-align: center; --s: 0.78px; text-align: left; }
  .card h3 { position: absolute; font-size: 26px; }
  .card > ul { position: absolute; width: 215px; }
  .card li { font-size: 13px; }
  .seta { display: none; }

  /* 6. tijolometro */
  .sec--tijolometro { background: var(--amarelo); }
  .tijolos-sombra { display: none; }   /* sombra so faz sentido na posicao do desktop */
  .contador { --s: 1px; height: 78px; gap: 5px; }
  .contador span { font-size: 54px; border-width: 2px; border-radius: 12px; }
  .sec--tijolometro img[src*="tijolos"] { width: 100%; max-width: 440px; }

  /* 7. apoio */
  .sec--apoio { background: var(--parede); gap: 26px; }
  #apoio-tit { font-size: 27px; line-height: 1.04; letter-spacing: -.01em; }
  #apoio-tit br { display: none; }
  .btn-parceiros {
    position: relative; --s: .47px;
    width: calc(585 * var(--s)); height: calc(96 * var(--s));
  }
  .apoio-marcas {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 22px 18px; width: 100%; margin-top: 4px;
  }
  .apoio-marcas li { display: grid; place-items: center; height: 68px; }
  .apoio-marcas img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }

  /* 8. rodape */
  .sec--rodape { background: var(--rodape); padding: 26px 20px 30px; gap: 14px; }
  .social { --s: 1px; gap: 12px; }
  .social a { width: 50px; }
}

@media (max-width: 420px) {
  .falta-lista { gap: 24px 10px; }
  .tij-tit { font-size: 46px; }
  .tagline { font-size: 27px; }
}