/* rodape.css (celular) — rodapé (#rodape), o fim da página. Fundo branco (o fim dos #numeros); o painel escuro é
   uma camada (.rd__painel) cuja borda de cima sobe por recorte (js), e a faixa branca fecha embaixo. Medidas em u
   (desenho em 390), larguras fluidas. A última linha (.rd__pe) tem a altura do chip do menu e a mesma folga de
   baixo (16u + área segura): a assinatura fica à esquerda e o chip à direita, sem cobrir nada no fim da rolagem. */
#rodape{background:#fff}
.rd__escuro{position:relative;padding:calc(46 * var(--u)) 0 calc(64 * var(--u));color:#fff}
.rd__painel{position:absolute;inset:0;background:var(--c-ink);border-radius:calc(32 * var(--u)) calc(32 * var(--u)) 0 0}
.rd__escuro > :not(.rd__painel){position:relative}

/* ===== marca: as quatro letras do logo, largura cheia; cada letra é uma janela com duas cópias ===== */
.rd__marca{position:relative;width:100%;color:#fff}
.rd__lt{position:absolute;top:0;height:100%;overflow:clip}
.rd__lt-c{position:absolute;inset:0;will-change:transform}
.rd__lt-c svg{width:100%;height:100%}

/* bio em duas linhas; o fio vai do fim da 2ª até o quadrado verde, alinhado à borda direita da marca */
.rd__bio{margin-top:calc(18 * var(--u));font-family:var(--f-display);font-variation-settings:'wdth' 87,'wght' 500;font-weight:500;
  text-transform:uppercase;font-size:calc(20 * var(--u));line-height:1;letter-spacing:-.02em;color:rgba(255,255,255,.88)}
.rd__bio-l{display:flex;align-items:center;overflow-x:visible;overflow-y:clip;padding:calc(3 * var(--u)) 0 calc(4 * var(--u))}
.rd__bio-i{display:block;white-space:nowrap}
.rd__bio-fio{flex:1;height:1px;margin:0 calc(12 * var(--u)) 0 calc(16 * var(--u));background:rgba(255,255,255,.24);transform-origin:0 50%}
.rd__bio-q{flex:none;width:calc(9 * var(--u));height:calc(9 * var(--u));background:var(--c-limao)}

/* ===== vitrine "a sua marca aqui" ===== */
.rd__vitrine{margin-top:calc(78 * var(--u))}
.rd__vt-tit{font-size:calc(50 * var(--u));line-height:.93;color:#fff}
.rd__vt-txt{margin-top:calc(16 * var(--u));max-width:calc(330 * var(--u));font-size:calc(15 * var(--u));line-height:1.45;letter-spacing:-.02em;color:rgba(255,255,255,.66)}
/* a foto: recorte da fachada do SKNA São José para a tela em pé (assets/m/rodape/, 660 × 450 em unidades da caixa do
   desktop). O letreiro e o campo ficam por cima, em % da foto: batem com a imagem em qualquer largura. */
.rd__vt{position:relative;margin-top:calc(26 * var(--u));aspect-ratio:660 / 450;border-radius:calc(24 * var(--u));overflow:hidden;
  background:var(--c-grafite);isolation:isolate}
.rd__vt-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 55%}
/* fiada do meio da terracota: centro em y 196 de 450; o nome à esquerda do Festval, x 20 → 406 de 660 */
.rd__placa{position:absolute;left:3.03%;top:33.33%;width:58.48%;height:20.44%;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.
   As sombras são em em: acompanham o corpo do nome, que muda com a largura da foto e com o tamanho do nome */
.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:.0125em .019em 0 #a3988d,.047em .078em .094em rgba(84,32,8,.34)}
.rd__ch{position:relative;display:inline-block}
.rd__luz{position:absolute;left:0;top:0;font-weight:700;color:#fff;opacity:0;will-change:opacity;
  text-shadow:0 0 .023em #fff,0 0 .14em rgba(255,248,236,.95),0 0 .34em rgba(255,238,212,.7),0 0 .72em 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}
/* o campo: vidro fosco sobre a base da foto (as vitrines), logo abaixo do letreiro. Corpo de no mínimo 16 px
   reais: abaixo disso o iPhone dá zoom na página ao focar. scroll-margin: quando o navegador rola o campo para a
   vista (teclado abrindo), a foto acima e o botão abaixo entram junto */
.rd__vt-form{position:absolute;left:calc(10 * var(--u));right:calc(10 * var(--u));bottom:calc(10 * var(--u));height:calc(52 * var(--u));
  border-radius:calc(26 * var(--u));background:rgba(255,255,255,.64);border:1px solid rgba(255,255,255,.85);
  box-shadow:0 calc(8 * var(--u)) calc(26 * var(--u)) rgba(20,24,30,.22);
  -webkit-backdrop-filter:blur(calc(14 * var(--u))) saturate(1.3);backdrop-filter:blur(calc(14 * var(--u))) saturate(1.3);
  transition:border-color .3s var(--e-suave),background-color .3s var(--e-suave)}
.rd__vt-form:focus-within{border-color:var(--c-limao);background:rgba(255,255,255,.8)}
.rd__vt-in{display:block;width:100%;height:100%;padding:0 calc(46 * var(--u)) 0 calc(20 * var(--u));border:0;outline:0;border-radius:inherit;background:none;
  font-family:var(--f-texto);font-weight:500;font-size:max(16px, calc(16 * var(--u)));letter-spacing:-.02em;color:var(--c-ink);caret-color:var(--c-ink);
  scroll-margin:calc(200 * var(--u)) 0 calc(96 * var(--u))}
.rd__vt-in::placeholder{color:rgba(12,12,12,.56);opacity:1}
.rd__vt-in:focus-visible{outline:0}
/* o quadrado verde no fim do campo: gira 45° quando ele está em foco */
.rd__vt-q{position:absolute;right:calc(22 * var(--u));top:50%;width:calc(7 * var(--u));height:calc(7 * var(--u));margin-top:calc(-3.5 * var(--u));
  background:var(--c-limao);pointer-events:none;transition:transform .6s var(--e-expo)}
.rd__vt-form:focus-within .rd__vt-q{transform:rotate(45deg)}

/* o botão do WhatsApp: logo abaixo da foto, largura cheia */
.rd__vt-cta{display:flex;align-items:center;justify-content:space-between;margin-top:calc(12 * var(--u));height:calc(58 * var(--u));
  padding:0 calc(7 * var(--u)) 0 calc(24 * var(--u));border-radius:calc(29 * var(--u));background:#fff;color:var(--c-ink);touch-action:manipulation;
  transition:background-color .2s var(--e-suave),transform .25s var(--e-expo)}
.rd__vt-ctt{font-family:var(--f-texto);font-weight:600;font-size:calc(15.5 * var(--u));letter-spacing:-.02em}
.rd__vt-seta{position:relative;flex:none;width:calc(44 * var(--u));height:calc(44 * var(--u));border-radius:50%;background:var(--c-limao);color:var(--c-ink);overflow:hidden}
.rd__vt-cta:active{transform:scale(.98);background:#e9e9e6}
.rd__vt-leg{margin-top:calc(16 * var(--u));font-size:calc(12 * var(--u));line-height:1.55;letter-spacing:-.01em;color:#8d8d8d}
.rd__vt-com{display:flex;align-items:center;margin-top:calc(8 * var(--u));font-size:calc(12 * var(--u));letter-spacing:-.01em;color:#b4b4b4}
.rd__vt-com .rd__q{width:calc(6 * var(--u));height:calc(6 * var(--u));margin-right:calc(9 * var(--u))}

/* ===== contato: dois cards em linhas de link ===== */
.rd__contato{margin-top:calc(76 * var(--u));display:grid;gap:calc(12 * var(--u))}
.rd__card{position:relative;padding:calc(22 * var(--u)) calc(18 * var(--u)) calc(6 * var(--u));border-radius:calc(26 * var(--u));
  background:#1e1e1e;border:1px solid rgba(255,255,255,.08)}
.rd__ct{display:flex;align-items:center;height:calc(28 * var(--u));margin-bottom:calc(12 * var(--u));font-family:var(--f-display);
  font-variation-settings:'wdth' 87,'wght' 500;font-weight:500;text-transform:uppercase;font-size:calc(19 * var(--u));letter-spacing:-.035em;color:rgba(255,255,255,.62)}
.rd__q{display:inline-block;flex:none;width:calc(8 * var(--u));height:calc(8 * var(--u));margin-right:calc(11 * var(--u));background:var(--c-limao)}
.rd__row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:calc(12 * var(--u));
  min-height:calc(86 * var(--u));padding:calc(16 * var(--u)) 0 calc(15 * var(--u));touch-action:manipulation}
.rd__fio{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.12);transform-origin:0 50%}
.rd__rot{grid-column:1;font-size:calc(13 * var(--u));line-height:1.2;letter-spacing:-.01em;color:#8d8d8d}
/* o recorte das letras que sobem: folga em cima e embaixo (os parênteses descem) */
.rd__val{grid-column:1;position:relative;display:block;overflow-x:visible;overflow-y:clip;margin-top:calc(2 * var(--u));padding:calc(5 * var(--u)) 0 calc(6 * var(--u));
  font-family:var(--f-display);font-variation-settings:'wdth' 87,'wght' 500;font-weight:500;text-transform:uppercase;font-size:calc(24 * var(--u));
  line-height:1;letter-spacing:-.045em;white-space:nowrap;color:#fff;transition:transform .55s cubic-bezier(.34,0,.1,1)}
.rd__fant{visibility:hidden}
.rd__lt1{position:absolute;white-space:pre;will-change:transform}
.rd__seta{grid-column:2;grid-row:1 / span 2;position:relative;width:calc(46 * var(--u));height:calc(46 * var(--u));border-radius:50%;
  background:#ebecf1;color:var(--c-ink);overflow:hidden;transition:background-color .35s var(--e-suave)}
/* toque (o hover do desktop): o valor anda, o círculo fica verde e a seta sai pela diagonal enquanto outra entra */
.rd__row:active .rd__val,.rd__row.is-toque .rd__val{transform:translateX(calc(6 * var(--u)))}
.rd__row:active .rd__seta,.rd__row.is-toque .rd__seta{background:var(--c-limao)}
.rd__row:focus-visible,.rd__mapa:focus-visible,.rd__vt-cta:focus-visible,.rd__bt:focus-visible{outline:2px solid var(--c-limao);outline-offset:calc(2 * var(--u))}

/* setas que andam: duas no mesmo lugar; no toque 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.is-toque .rd__seta svg:first-child,.rd__vt-cta.is-toque .rd__vt-seta svg:first-child,.rd__mapa.is-toque .rd__mapa-seta svg:first-child{transform:translate(230%,-230%)}
.rd__row.is-toque .rd__seta svg:last-child,.rd__vt-cta.is-toque .rd__vt-seta svg:last-child,.rd__mapa.is-toque .rd__mapa-seta svg:last-child{transform:none}

/* ===== fichas: sede e setor lado a lado; as cidades embaixo, cada uma com o seu quadradinho ===== */
.rd__fichas{margin-top:calc(46 * var(--u));display:grid;grid-template-columns:1fr 1fr;gap:calc(30 * var(--u)) calc(20 * var(--u))}
.rd__ficha--cidades{grid-column:1 / -1}
.rd__frot{font-size:calc(12.5 * var(--u));letter-spacing:-.01em;color:#8d8d8d}
.rd__fval{display:block;margin-top:calc(8 * var(--u));font-size:calc(15 * var(--u));line-height:1.45;letter-spacing:-.02em;color:rgba(255,255,255,.88)}
.rd__mapa{margin-top:calc(4 * var(--u));padding:calc(4 * var(--u)) 0;transition:color .25s var(--e-suave)}
.rd__mapa:active,.rd__mapa.is-toque{color:#fff}
.rd__mapa-seta{display:inline-block;position:relative;width:calc(18 * var(--u));height:calc(18 * var(--u));margin-left:calc(6 * var(--u));
  vertical-align:calc(-3 * var(--u));overflow:hidden;color:var(--c-limao)}
.rd__nw{white-space:nowrap}
.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))}
.rd__cids{display:flex;flex-wrap:wrap;align-items:center;column-gap:calc(16 * var(--u))}
.rd__cid{display:inline-flex;align-items:center;white-space:nowrap}
.rd__sq{display:inline-block;flex:none;width:calc(5 * var(--u));height:calc(5 * var(--u));margin-right:calc(8 * var(--u));background:var(--c-limao)}

/* ===== faixa branca: a chamada, o botão e a última linha ===== */
.rd__faixa{background:#fff;color:var(--c-ink);padding:calc(46 * var(--u)) 0 calc(16 * var(--u) + var(--safe-b))}
.rd__chama{display:flex;align-items:flex-start;gap:calc(14 * var(--u))}
.rd__ast{flex:none;width:calc(26 * var(--u));height:calc(26 * var(--u));margin-top:calc(3 * var(--u));color:var(--c-limao)}
.rd__frase{font-family:var(--f-texto);font-weight:500;font-size:calc(24 * var(--u));line-height:1.22;letter-spacing:-.04em;color:#3b3b3b}
.rd__frase b{font-weight:700;color:#090909;white-space:nowrap}
.rd__bt{display:flex;align-items:center;justify-content:space-between;margin-top:calc(26 * var(--u));height:calc(58 * var(--u));
  padding:0 calc(22 * var(--u)) 0 calc(24 * var(--u));border-radius:calc(22 * var(--u));background:var(--c-ink);color:#f7f7f7;touch-action:manipulation;
  transition:background-color .2s var(--e-suave)}
.rd__bt span{font-family:var(--f-texto);font-weight:600;font-size:calc(15.5 * var(--u));letter-spacing:-.02em}
.rd__bt svg{width:calc(20 * var(--u));height:calc(20 * var(--u));color:#eaeaea;transition:transform .45s cubic-bezier(.34,0,.1,1)}
.rd__bt:active,.rd__bt.is-toque{background:#262626}
.rd__bt:active svg,.rd__bt.is-toque svg{transform:rotate(-12deg)}
/* última linha: a altura do chip do menu (css/m/menu.css: 54u); a folga de baixo (16u + área segura) é o padding
   da faixa, para a margem não vazar para fora do rodapé */
.rd__pe{position:relative;display:flex;align-items:center;height:calc(54 * var(--u));margin-top:calc(40 * var(--u))}
.rd__pe::before{content:'';position:absolute;left:0;right:0;top:calc(-18 * var(--u));height:1px;background:rgba(12,12,12,.1)}

/* assinatura da T.ZION (link): letras em duas cópias que rolam no recorte; o ponto da 2ª é verde; seta ↗ */
.rd__assin{display:inline-flex;align-items:center;gap:calc(7 * var(--u));min-height:44px;padding-right:calc(10 * var(--u));color:#6b6b6b;touch-action:manipulation}
.rd__assin-pre{font-family:var(--f-texto);font-weight:500;font-size:calc(13 * var(--u));letter-spacing:-.02em}
.rd__tz{position:relative;display:flex;font-family:var(--f-display);font-variation-settings:'wdth' 87,'wght' 600;font-weight:600;font-size:calc(17 * var(--u));
  line-height:1.05;letter-spacing:.01em}
.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__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:var(--c-ink)}
.rd__tz-l--ponto b + b{color:var(--c-limao)}
.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.is-rola .rd__tz-l b,.rd__assin:focus-visible .rd__tz-l b{transform:translateY(-100%)}
.rd__assin.is-rola .rd__tz::after,.rd__assin:focus-visible .rd__tz::after{transform:scaleX(1)}
.rd__assin.is-rola .rd__tz-seta svg,.rd__assin:focus-visible .rd__tz-seta svg{transform:none}
.rd__assin.is-rola{color:#3b3b3b}
/* teclado aberto no campo da vitrine: o rodapé põe html.is-digitando e o chip do menu sai do caminho (css/m/menu.css) */

/* ===== tablet ===== */
@media (min-width:700px){
  .rd__vitrine{display:grid;grid-template-columns:1fr auto;column-gap:calc(30 * var(--u));align-items:end}
  .rd__vitrine > :not(.rd__vt-tit):not(.rd__vt-txt){grid-column:1 / -1}
  .rd__vt-tit{font-size:calc(44 * var(--u))}
  .rd__vt-txt{max-width:calc(210 * var(--u));margin:0 0 calc(4 * var(--u))}
  .rd__vt-cta{width:min(100%, calc(360 * var(--u)))}
  .rd__fichas{grid-template-columns:1fr 1fr 1.7fr}
  .rd__ficha--cidades{grid-column:auto}
  .rd__faixa > .m-wrap{display:grid;grid-template-columns:1fr auto;column-gap:calc(30 * var(--u));align-items:center}
  .rd__frase{font-size:calc(22 * var(--u))}
  .rd__bt{margin-top:0;width:calc(230 * var(--u))}
  .rd__pe{grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){
  .rd__seta svg,.rd__vt-seta svg,.rd__mapa-seta svg,.rd__val,.rd__bt svg,.rd__tz-l b,.rd__tz-seta svg,.rd__tz::after,.rd__vt-q{transition:none}
}