/* rodape.css — spec J, refinado em 29/10/2026. y relativo ao topo natural do painel (página 8182,7 + antes).
   O fundo do rodapé é branco (fim da seção I); o painel escuro, a faixa branca e a cauda escura são camadas. O
   recorte da borda (off) é aplicado só ao .rd__painel: o conteúdo fica na coordenada natural (J §6.1).
   --extra: a vitrine e as fichas entram entre a marca e a faixa branca; o painel cresce e a faixa e a cauda
   descem o mesmo tanto (a cauda continua encostada na cópia do hero, js/loop.js). */
#rodape{--extra:1045}
.rd__painel{position:absolute;left:0;top:0;width:100%;height:calc((1124.7 + var(--extra)) * var(--u));background:var(--c-ink);
  border-radius:calc(55 * var(--u)) calc(55 * var(--u)) 0 0}
.rd__cauda{position:absolute;left:0;top:calc((1248.8 + var(--extra)) * var(--u));width:100%;height:calc(188 * var(--u));background:var(--c-ink)}

/* marca SKNA: as quatro letras do logo vetorial (js/sections/rodape.js), na altura da maiúscula do layout
   (321,8 = 324 unidades do logo) e centradas: 1399 de largura, de x 40,5 a 1439,5 — alinhada aos cards
   (30 → 1450). O recorte (.lt-linha) cobre a letra inteira: 109 → 433,8. */
.rd__marca{left:calc(40.5 * var(--u));top:calc(109 * var(--u));width:calc(1399 * var(--u));height:calc(324.8 * var(--u));color:#fff}
.rd__marca .lt svg{display:block;width:100%;height:100%}

/* bio sob a marca: maiúscula em 476, fio no meio da maiúscula até o quadrado verde, que fecha na borda da marca */
.rd__bio{left:calc(41.5 * var(--u));top:calc(470 * var(--u));--cap:16;padding:calc(6 * var(--u)) 0;color:rgba(255,255,255,.88)}
.rd__bio-fio{position:absolute;top:calc(484 * var(--u));height:1px;background:rgba(255,255,255,.22);transform-origin:0 50%}
.rd__bio-q{position:absolute;left:calc(1428.5 * var(--u));top:calc(478.5 * var(--u));width:calc(11 * var(--u));height:calc(11 * var(--u));background:var(--c-limao)}

/* ===== vitrine "a sua marca aqui" ===== */
.rd__vt-l{left:calc(40 * var(--u));--cap:50;padding:calc(12 * var(--u)) 0 calc(16 * var(--u));color:#fff}
.rd__vt-l1{top:calc(588 * var(--u))}
.rd__vt-l2{top:calc(646 * var(--u))}
.rd__vt-txt{left:calc(1050 * var(--u));top:calc(604 * var(--u));--cap:14;--lh:25;color:rgba(255,255,255,.62);white-space:nowrap;text-box:trim-both cap alphabetic}
/* a foto vem recortada na proporção da caixa (1420 × 680, em 2x): as coordenadas do letreiro batem 1:1 com ela.
   Faixa de terracota y 260 → 432 em três fiadas (juntas em 317 e 375); o Festval ocupa a fiada do meio,
   x 776 → 988. O nome do visitante vai na mesma fiada, centrado sobre as lojas vagas (x 80 → 680). */
.rd__vt{position:absolute;left:calc(30 * var(--u));top:calc(760 * var(--u));width:calc(1420 * var(--u));height:calc(680 * var(--u));
  border-radius:calc(42.5 * var(--u));overflow:hidden;background:var(--c-grafite)}
.rd__vt-img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 55%}
.rd__placa{position:absolute;left:calc(80 * var(--u));top:calc(300 * var(--u));width:calc(600 * var(--u));height:calc(92 * var(--u));
  display:flex;align-items:center;justify-content:center;cursor:text}
/* letra-caixa: face branca fosca, retorno (a lateral da letra) e sombra curta na terracota, como as do Festval */
.rd__nome{position:relative;white-space:pre;font-family:var(--f-logo);font-weight:700;line-height:1;letter-spacing:-.01em;color:#ebe5de;
  text-shadow:calc(.8 * var(--u)) calc(1.2 * var(--u)) 0 #a3988d,calc(3 * var(--u)) calc(5 * var(--u)) calc(6 * var(--u)) rgba(84,32,8,.34)}
.rd__ch{position:relative;display:inline-block}
/* a luz: mesma letra por cima, branca, com halo; só a opacidade anima */
.rd__luz{position:absolute;left:0;top:0;font-weight:700;color:#fff;opacity:0;will-change:opacity;
  text-shadow:0 0 calc(1.5 * var(--u)) #fff,0 0 calc(9 * var(--u)) rgba(255,248,236,.95),0 0 calc(22 * var(--u)) rgba(255,238,212,.7),0 0 calc(46 * var(--u)) rgba(255,224,186,.45)}
.rd__halo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(255,236,210,.6),rgba(255,236,210,.2) 55%,rgba(255,236,210,0));mix-blend-mode:screen}
/* campo de vidro fosco sobre o céu, logo acima do letreiro; o botão escuro leva o nome digitado ao WhatsApp */
.rd__vt-form{position:absolute;left:calc(30 * var(--u));top:calc(30 * var(--u));width:calc(700 * var(--u));height:calc(76 * var(--u));
  border-radius:calc(38 * var(--u));background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.8);
  box-shadow:0 calc(10 * var(--u)) calc(34 * var(--u)) rgba(20,40,70,.14);
  -webkit-backdrop-filter:blur(calc(16 * var(--u))) saturate(1.3);backdrop-filter:blur(calc(16 * var(--u))) saturate(1.3);
  transition:border-color .3s cubic-bezier(.25,.46,.45,.94)}
.rd__vt-form:focus-within{border-color:var(--c-limao)}
.rd__vt-in{position:absolute;left:0;top:0;width:calc(370 * var(--u));height:100%;padding:0 0 0 calc(30 * var(--u));border:0;outline:0;background:none;
  font-family:var(--f-texto);font-weight:500;font-size:calc(15 * var(--u) / var(--cr-t));letter-spacing:-.02em;color:var(--c-ink);caret-color:var(--c-ink)}
.rd__vt-in::placeholder{color:rgba(12,12,12,.55)}
.rd__vt-cta{position:absolute;right:calc(6 * var(--u));top:calc(5 * var(--u));width:calc(320 * var(--u));height:calc(64 * var(--u));
  border-radius:calc(32 * var(--u));background:var(--c-ink);color:#fff;transition:background-color .2s cubic-bezier(.25,.46,.45,.94)}
.rd__vt-cta:hover{background:#262626}
.rd__vt-cta > span.t{left:calc(26 * var(--u));top:calc(25.75 * var(--u));--cap:12.5}
.rd__vt-seta{position:absolute;right:calc(7 * var(--u));top:calc(7 * var(--u));width:calc(50 * var(--u));height:calc(50 * var(--u));
  border-radius:50%;background:var(--c-limao);color:var(--c-ink);overflow:hidden}
.rd__vt-leg{left:calc(40 * var(--u));top:calc(1466 * var(--u));--cap:12;color:#8d8d8d}
.rd__vt-com{right:calc(40 * var(--u));top:calc(1466 * var(--u));--cap:12;color:#8d8d8d}

/* ===== contato: dois cards (J §2: 700 × 2, calha 20) em linhas de link ===== */
.rd__card{position:absolute;top:calc(1580 * var(--u));width:calc(700 * var(--u));height:calc(340 * var(--u));border-radius:calc(42.5 * var(--u));
  background:#1e1e1e;border:1px solid rgba(255,255,255,.08);transform-origin:50% 50%}
.rd__card--contato{left:calc(30 * var(--u))}
.rd__card--redes{left:calc(750 * var(--u))}
.rd__ct{left:calc(40 * var(--u));top:calc(44 * var(--u));--cap:15;color:rgba(255,255,255,.62)}
.rd__q{display:inline-block;position:relative;top:calc(-3 * var(--u));width:calc(9 * var(--u));height:calc(9 * var(--u));margin-right:calc(12 * var(--u));background:var(--c-limao)}
.rd__fio{position:absolute;left:calc(40 * var(--u));width:calc(620 * var(--u));height:1px;background:rgba(255,255,255,.12);transform-origin:0 50%}
.rd__row{position:absolute;left:0;width:100%;height:calc(120 * var(--u));border-radius:calc(20 * var(--u))}
.rd__row:nth-of-type(1){top:calc(100 * var(--u))}
.rd__row:nth-of-type(2){top:calc(220 * var(--u))}
.rd__rot{left:calc(40 * var(--u));top:calc(30 * var(--u));--cap:12;color:#8d8d8d}
/* o recorte das letras que sobem: 6 acima da maiúscula, 10 abaixo da base (os parênteses descem) */
.rd__val{left:calc(40 * var(--u));top:calc(50 * var(--u));--cap:30;padding:calc(6 * var(--u)) 0 calc(10 * var(--u));color:#fff;
  transition:transform .55s cubic-bezier(.34,0,.1,1)}
.rd__seta{position:absolute;right:calc(40 * var(--u));top:calc(30 * var(--u));width:calc(58 * var(--u));height:calc(58 * var(--u));border-radius:50%;
  background:#ebecf1;color:var(--c-ink);overflow:hidden;transform-origin:50% 50%;transition:background-color .35s cubic-bezier(.25,.46,.45,.94)}
.rd__row:hover .rd__val,.rd__row:focus-visible .rd__val{transform:translateX(calc(8 * var(--u)))}
.rd__row:hover .rd__seta,.rd__row:focus-visible .rd__seta{background:var(--c-limao)}
.rd__row:focus-visible,.rd__mapa:focus-visible,.rd__vt-cta:focus-visible,.rd__bt:focus-visible{outline:1px solid var(--c-limao);outline-offset:calc(-2 * var(--u))}

/* setas que andam: duas no mesmo lugar; no hover a 1ª sai pela diagonal e a 2ª entra de baixo-esquerda */
.rd__seta svg,.rd__vt-seta svg,.rd__mapa-seta svg{position:absolute;left:50%;top:50%;width:calc(14 * var(--u));height:calc(14 * var(--u));
  margin:calc(-7 * var(--u)) 0 0 calc(-7 * var(--u));transition:transform .55s cubic-bezier(.34,0,.1,1)}
.rd__seta svg:last-child,.rd__vt-seta svg:last-child,.rd__mapa-seta svg:last-child{transform:translate(-230%,230%)}
.rd__row:hover .rd__seta svg:first-child,.rd__vt-cta:hover .rd__vt-seta svg:first-child,.rd__mapa:hover .rd__mapa-seta svg:first-child{transform:translate(230%,-230%)}
.rd__row:hover .rd__seta svg:last-child,.rd__vt-cta:hover .rd__vt-seta svg:last-child,.rd__mapa:hover .rd__mapa-seta svg:last-child{transform:none}

/* fichas: sede · setor · cidades, alinhadas por dentro dos cards (70 e 790) */
.rd__ficha{position:absolute;top:calc(1986 * var(--u))}
.rd__ficha--sede{left:calc(70 * var(--u))}
.rd__ficha--setor{left:calc(400 * var(--u))}
.rd__ficha--cidades{left:calc(790 * var(--u))}
.rd__frot{--cap:12;color:#8d8d8d}
.rd__fval{margin-top:calc(16 * var(--u));--cap:14.5;--lh:28;color:rgba(255,255,255,.88);white-space:nowrap;text-box:trim-both cap alphabetic}
.rd__sq{display:inline-block;width:calc(5 * var(--u));height:calc(5 * var(--u));margin:0 calc(12 * var(--u));background:var(--c-limao);vertical-align:middle}
.rd__mapa{color:inherit;transition:color .25s cubic-bezier(.25,.46,.45,.94)}
.rd__mapa:hover{color:#fff}
.rd__mapa-seta{display:inline-block;position:relative;width:calc(18 * var(--u));height:calc(18 * var(--u));margin-left:calc(8 * var(--u));
  vertical-align:calc(-2 * var(--u));overflow:hidden;color:var(--c-limao)}
.rd__mapa-seta svg{width:calc(11 * var(--u));height:calc(11 * var(--u));margin:calc(-5.5 * var(--u)) 0 0 calc(-5.5 * var(--u))}
/* assinatura da T.ZION (link): letras em duas cópias que rolam no recorte, seta ↗ que entra pelo canto */
.rd__assin{right:calc(70 * var(--u));top:calc(2106 * var(--u));display:flex;align-items:center;gap:calc(7 * var(--u));
  color:rgba(255,255,255,.34);transition:color .35s cubic-bezier(.25,.46,.45,.94)}
.rd__assin-pre{--cap:11}
.rd__tz{display:flex;font-family:var(--f-display);font-variation-settings:'wdth' 87,'wght' 600;font-size:calc(16 * var(--u));
  line-height:1.05;letter-spacing:.01em}
.rd__tz{position:relative}
.rd__tz::after{content:'';position:absolute;left:0;right:0;bottom:calc(-4 * var(--u));height:1px;background:var(--c-limao);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .55s cubic-bezier(.65,.05,.36,1) .12s}
.rd__assin:hover .rd__tz::after,.rd__assin:focus-visible .rd__tz::after,.rd__assin.is-rola .rd__tz::after{transform:scaleX(1)}
.rd__tz-l{display:block;height:1.05em;overflow:hidden}
.rd__tz-l b{display:block;font-weight:inherit;transition:transform .6s cubic-bezier(.65,.05,.36,1) calc(var(--i) * 40ms)}
.rd__tz-l b + b{color:#fff}
.rd__tz-l--ponto b + b{color:var(--c-limao)}
.rd__assin:hover .rd__tz-l b,.rd__assin:focus-visible .rd__tz-l b,.rd__assin.is-rola .rd__tz-l b{transform:translateY(-100%)}
.rd__assin:hover,.rd__assin:focus-visible{color:rgba(255,255,255,.62)}
.rd__tz-seta{position:relative;display:block;width:calc(11 * var(--u));height:calc(11 * var(--u));overflow:hidden;color:var(--c-limao)}
.rd__tz-seta svg{display:block;width:100%;height:100%;transform:translate(-110%,110%);
  transition:transform .5s cubic-bezier(.65,.05,.36,1) .18s}
.rd__assin:hover .rd__tz-seta svg,.rd__assin:focus-visible .rd__tz-seta svg,.rd__assin.is-rola .rd__tz-seta svg{transform:none}
@media (prefers-reduced-motion:reduce){.rd__tz-l b,.rd__tz-seta svg,.rd__tz::after{transition:none}}

/* ===== faixa branca (J §2): a chamada e o botão ===== */
.rd__faixa{position:absolute;left:0;top:calc((1124.7 + var(--extra)) * var(--u));width:100%;height:calc(124.1 * var(--u));background:#fff}
.rd__ast{position:absolute;left:calc(27 * var(--u));top:calc(42 * var(--u));width:calc(40 * var(--u));height:calc(40 * var(--u));color:var(--c-limao)}
.rd__frase{left:calc(420 * var(--u));top:calc(55.4 * var(--u));--cap:18;color:#090909}
/* botão: "Agende uma conversa" mede 161 px contra 89 do texto do layout; o botão cresce para a esquerda e
   mantém a borda direita (1452,7), a altura, o raio e as folgas (30 antes do texto, 22,7 depois do ícone) */
.rd__bt{position:absolute;left:calc(1205 * var(--u));top:calc(31.2 * var(--u));width:calc(247.7 * var(--u));height:calc(61.7 * var(--u));
  border-radius:calc(25 * var(--u));background:var(--c-ink);color:#f7f7f7;transform-origin:50% 50%;
  transition:background-color .2s cubic-bezier(.25,.46,.45,.94)}
.rd__bt:hover{background:#262626}
.rd__bt span{left:calc(30 * var(--u));top:calc(25 * var(--u));--cap:12}
.rd__bt svg{position:absolute;left:calc(205 * var(--u));top:calc(20.85 * var(--u));width:calc(20 * var(--u));height:calc(20 * var(--u));color:#eaeaea;
  transition:transform .45s cubic-bezier(.34,0,.1,1)}
.rd__bt:hover svg{transform:rotate(-12deg)}

@media (prefers-reduced-motion: reduce){
  .rd__seta svg,.rd__vt-seta svg,.rd__mapa-seta svg,.rd__val,.rd__bt svg{transition:none}
}