/* ===========================================================
   JF ESTÉTICA E BELEZA — Página Institucional
   Desenho fixo em 1440px, escalado proporcionalmente pelo
   efeitos.js. Tudo prefixado com .jf- para não conflitar com
   o tema do WordPress / Elementor.
   =========================================================== */

/* ---------- FONTES ----------
   No WordPress, troque "fontes/" pela URL da pasta onde você
   subiu as fontes. Exemplo:
   https://jfesteticaebeleza.com.br/wp-content/uploads/jf/fontes/Degular-Regular.otf
---------------------------------------------------------- */
@font-face{font-family:'Degular';src:url('fontes/Degular-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Degular';src:url('fontes/Degular-Medium.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:'Degular';src:url('fontes/Degular-Semibold.otf') format('opentype');font-weight:600;font-display:swap}
@font-face{font-family:'Degular';src:url('fontes/Degular-Bold.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:'Champagne';src:url('fontes/ChampagneLimousines-Bold.ttf') format('truetype');font-weight:700;font-display:swap}

/* ---------- BASE ----------
   sem isso o navegador poe 8px de margem no body e aparece
   uma faixa clara em volta da pagina inteira */
html,body{margin:0;padding:0}
body{background:#C9AE8A;color:#6D461B;
  font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  text-rendering:optimizeLegibility}
img,video,svg{max-width:100%}
/* o scroll suave e feito no efeitos.js; aqui so o caso de quem
   pediu menos movimento, que usa o nativo do navegador */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- ELEMENTOR / WORDPRESS ----------
   O Elementor poe padding lateral nos containers dele, e isso
   empurra a pagina inteira para dentro (10px nos quatro lados:
   aparecia faixa nas laterais e tambem no topo).
   O :has() faz a regra pegar SOMENTE os containers que envolvem
   esta pagina — nada mais do tema e afetado.
---------------------------------------------------------- */
.elementor-element:has(.jf-palco),
.elementor-widget-container:has(.jf-palco),
.elementor-container:has(.jf-palco),
.e-con:has(.jf-palco),
.e-con-inner:has(.jf-palco),
.elementor-section:has(.jf-palco),
.elementor-column:has(.jf-palco),
.elementor-widget-wrap:has(.jf-palco){
  padding:0 !important;margin:0 !important;
  max-width:100% !important;width:100% !important}

/* ---------- PALCO E ESCALA ---------- */
/* o palco usa overflow-x:clip (e nao hidden) porque hidden criaria
   um contexto de rolagem e o empilhamento das secoes pararia de funcionar */
.jf-palco{width:100%;overflow-x:clip;background:#C9AE8A}
.jf-page{width:100%;margin:0}

/* cada secao vive dentro de um envelope. o envelope tem a altura ja
   reduzida e e ele quem gruda no topo; a secao dentro e que e escalada */
.jf-env{position:relative;width:100%;overflow:hidden}
.jf-env.jf-gruda{position:sticky}
.jf-page,.jf-page *{box-sizing:border-box}
.jf-page img{display:block;max-width:none}
.jf-page p{margin:0}
.jf-page h1,.jf-page h2,.jf-page h3,.jf-page h4{margin:0;font-weight:inherit}
.jf-page a{text-decoration:none;color:inherit}

.jf-sec{position:relative;width:1440px;overflow:hidden;transform-origin:top left;
  font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased}

/* ---------- BOTÃO ---------- */
.jf-page a.jf-btn,.jf-btn{display:inline-flex;align-items:center;justify-content:center;
  background-image:linear-gradient(99.8deg,#8C6534 8%,#D4A06A 112%);
  border:6px solid rgba(147,107,57,.2);background-clip:padding-box;border-radius:62px;
  color:#FFFFFF;font-family:'Inter',sans-serif;font-weight:600;font-size:14px;
  line-height:1.33;letter-spacing:.02em;text-transform:uppercase;cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease}
.jf-btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(89,61,20,.28)}

/* ===========================================================
   2. SOBRE — selo girando devagar
   =========================================================== */
@keyframes jf-girar{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.jf-selo{animation:jf-girar 45s linear infinite;transform-origin:50% 50%}

/* ===========================================================
   3. BUMBUM DE LUXO
   =========================================================== */
/* galeria que corre sozinha, com as fotos inclinando */
@keyframes jf-correr{from{transform:translateX(0)}to{transform:translateX(-1687px)}}
/* o mesmo passeio no celular, onde um ciclo da faixa mede 827px */
@keyframes jf-correr-mob{from{transform:translateX(0)}to{transform:translateX(-827px)}}
/* e no tablet, onde mede 1099px */
@keyframes jf-correr-tab{from{transform:translateX(0)}to{transform:translateX(-1099px)}}
@keyframes jf-inclinaA{0%,100%{transform:rotateZ(-3deg)}50%{transform:rotateZ(3deg)}}
@keyframes jf-inclinaB{0%,100%{transform:rotateZ(3deg)}50%{transform:rotateZ(-3deg)}}
.jf-faixa{animation:jf-correr 34s linear infinite}
.jf-faixa > div{animation:jf-inclinaA 7s ease-in-out infinite}
.jf-faixa > div:nth-child(even){animation-name:jf-inclinaB;animation-duration:8.5s}
.jf-faixa > div:nth-child(3n){animation-delay:-2.4s}
.jf-faixa > div:nth-child(3n+1){animation-delay:-4.8s}
.jf-faixa img{width:100%;height:100%;object-fit:cover}
.jf-galeria:hover .jf-faixa,.jf-galeria:hover .jf-faixa > div{animation-play-state:paused}

/* selos flutuantes */
.jf-selo-pill{position:absolute;background:#8D6A2F;border:1.25px solid #E6DFD4;
  border-radius:125px;padding:13.8px 27.6px;color:#FFFFFF;
  font-family:'Inter',sans-serif;font-weight:400;font-size:18px;letter-spacing:.35px}

/* cards de benefício */
.jf-benef{position:absolute;width:277px;height:214px;background:#EEE2CC;
  border:1px solid #C5965B;border-radius:15px;padding:22.5px 22.5px 19.5px;
  display:flex;flex-direction:column;gap:10.5px;box-shadow:0 12px 30px rgba(89,61,20,.06)}
.jf-tag{align-self:flex-start;background:#F3EADB;border:1px solid rgba(197,150,91,.6);
  border-radius:100px;padding:5px 12px;color:#6D461B;
  font-family:'Inter',sans-serif;font-weight:500;font-size:11px}
.jf-benef h4{font-weight:600;font-size:17px;color:#26201A}
.jf-benef p{font-weight:400;font-size:12px;line-height:19px;color:#6C645C}

/* comparador antes e depois */
.jf-ad{position:absolute;left:300px;top:0;width:315px;height:450px;
  border-radius:15px;overflow:hidden;background:#E6DFD4}
.jf-ad-foto{position:absolute;inset:0;background-repeat:no-repeat}
.jf-ad-linha{position:absolute;top:0;bottom:0;width:2.25px;background:#FFFFFF;
  transform:translateX(-50%);z-index:4;pointer-events:none}
.jf-ad-bola{position:absolute;top:50%;width:39px;height:39px;border-radius:50%;
  background:#FFFFFF;transform:translate(-50%,-50%);z-index:5;pointer-events:none;
  box-shadow:0 6px 20px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center}
.jf-ad-rotulo{position:absolute;top:19.5px;z-index:6;background:#FFFFFF;border-radius:75px;
  padding:7px 13.5px;color:#26201A;font-weight:600;font-size:10px;letter-spacing:.78px;
  pointer-events:none}
.jf-ad-range{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;
  opacity:0;cursor:ew-resize;z-index:7}

/* ===========================================================
   4. PROCEDIMENTOS — carrossel de slides
   =========================================================== */
.jf-card{position:absolute;border-radius:15px;overflow:hidden;background:#241B13;
  transition:left .55s cubic-bezier(.4,0,.2,1), top .55s cubic-bezier(.4,0,.2,1),
             width .55s cubic-bezier(.4,0,.2,1), height .55s cubic-bezier(.4,0,.2,1),
             transform .55s cubic-bezier(.4,0,.2,1), opacity .45s ease,
             filter .45s ease, box-shadow .45s ease}
/* O palco tem 1440: o meio e 720. Os cards sao medidos a partir dai, e os
   dois laterais tem o mesmo tamanho e o mesmo afastamento (228,5px de
   centro a centro) — antes um estava a 221 e o outro a 236 do meio. */
.jf-esq{left:381.5px;top:179px;width:220px;height:373px;z-index:1;
  transform:rotate(-4deg);opacity:.6;filter:brightness(.86) saturate(.88);
  box-shadow:0 6px 18px rgba(69,46,18,.22)}
.jf-dir{left:838.5px;top:179px;width:220px;height:373px;z-index:1;
  transform:rotate(4deg);opacity:.6;filter:brightness(.86) saturate(.88);
  box-shadow:0 6px 18px rgba(69,46,18,.22)}
.jf-centro{left:586.5px;top:152px;width:267px;height:445px;z-index:3;
  transform:rotate(0deg);opacity:1;filter:none;box-shadow:0 16px 38px rgba(69,46,18,.34)}
/* cards que estao na fila: ficam estacionados fora, invisiveis, prontos
   para entrar pelo lado certo quando a seta e clicada */
.jf-fora-esq,.jf-fora-dir{top:179px;width:220px;height:373px;z-index:0;
  opacity:0;pointer-events:none;filter:brightness(.86) saturate(.88);box-shadow:none}
.jf-fora-esq{left:297.5px;transform:rotate(-7deg) scale(.9)}
.jf-fora-dir{left:922.5px;transform:rotate(7deg) scale(.9)}
.jf-card img{width:100%;height:100%;object-fit:cover}
/* fotos quase quadradas: num card alto, o corte comeria 40% da largura.
   Estas cabem inteiras, encostadas no topo, e a sobra fica embaixo —
   justamente onde o texto entra. Com altura automatica a caixa da imagem
   fica do tamanho exato da foto, entao a mascara desbota o pe dela
   na mesma proporcao em qualquer tamanho de card. */
.jf-card.jf-inteiro img{width:100%;height:auto;
  -webkit-mask-image:linear-gradient(180deg,#000 62%,rgba(0,0,0,.45) 84%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 62%,rgba(0,0,0,.45) 84%,transparent 100%)}
.jf-grad{position:absolute;left:0;right:0;bottom:0;height:62%;
  background:linear-gradient(180deg, rgba(20,15,10,0) 0%, rgba(20,15,10,.55) 45%, rgba(20,15,10,.93) 100%)}
.jf-info{position:absolute;left:8%;right:8%;bottom:7%}
.jf-pill{display:inline-block;background:#FFFFFF;border-radius:8px;padding:5px 11px;
  color:#221C16;font-weight:600;font-size:10px}
.jf-info h3{margin:9px 0 0;font-family:'Inter',sans-serif;font-weight:400;
  font-size:16px;line-height:19px;color:#FFFFFF}
.jf-info p{margin:7px 0 0;font-weight:600;font-size:12px;line-height:17px;
  color:rgba(255,255,255,.92)}
.jf-seta{position:absolute;width:44px;height:44px;z-index:5;padding:0;
  border:none;border-radius:50%;background:#6D461B;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(69,46,18,.28);
  transition:transform .22s ease, background-color .22s ease}
.jf-seta:hover{transform:scale(1.08);background-color:#8D6A2F}
.jf-seta:active{transform:scale(.95)}
.jf-seta svg{display:block}

/* ===========================================================
   5. DEPOIMENTOS — carrossel de vídeos
   =========================================================== */
.jf-dep-trilho{display:flex;gap:29px;padding:55px 29px;
  transition:transform .6s cubic-bezier(.4,0,.2,1)}
.jf-dep-video{flex:none;width:282px;height:500px;position:relative;border-radius:27px;
  background:rgba(255,255,255,.5);
  transition:transform .35s ease, box-shadow .35s ease}
.jf-dep-video:hover{transform:translateY(-6px);
  box-shadow:0 16px 34px -10px rgba(69,46,18,.32), 0 4px 10px -4px rgba(69,46,18,.14)}
.jf-dep-moldura{position:absolute;inset:22px;overflow:hidden;border-radius:14px;
  background-color:#E6DFD4}
.jf-dep-moldura video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;background:#E6DFD4}
.jf-dep-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);
  background:rgba(20,15,10,.34);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;z-index:3;
  transition:transform .3s ease, background-color .3s ease, opacity .25s ease}
.jf-dep-video:hover .jf-dep-play{transform:translate(-50%,-50%) scale(1.1);
  background:rgba(109,70,27,.55)}
.jf-dep-nome{position:absolute;left:0;right:0;bottom:0;padding:12px 16px 14px;z-index:2;
  background:linear-gradient(180deg, rgba(20,15,10,0), rgba(20,15,10,.72));
  color:#FFFFFF;font-weight:600;font-size:14px;pointer-events:none;
  transition:opacity .25s ease}
.jf-dep-dots{position:absolute;left:0;width:1440px;display:flex;
  justify-content:center;align-items:center;gap:9px}
/* mesma linguagem das setas: marrom solido, hover mais claro,
   sombra quente e o leve crescer ao passar o mouse */
.jf-dot{width:10px;height:10px;padding:0;border:none;border-radius:50%;
  background:rgba(109,70,27,.32);cursor:pointer;
  box-shadow:0 2px 6px rgba(69,46,18,.18);
  transition:width .3s ease, background-color .22s ease,
             border-radius .3s ease, transform .22s ease}
.jf-dot:hover{background:#8D6A2F;transform:scale(1.15)}
.jf-dot:active{transform:scale(.95)}
.jf-dot-on{width:32px;border-radius:5px;background:#6D461B;
  box-shadow:0 4px 14px rgba(69,46,18,.28)}
.jf-dot-on:hover{background:#8D6A2F;transform:none}

/* ===========================================================
   6. EQUIPE — carrossel que rola sozinho e pode ser arrastado
   =========================================================== */
.jf-eq-pista{width:100%;height:100%;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:auto;
  cursor:grab;touch-action:pan-x pan-y}
.jf-eq-pista::-webkit-scrollbar{display:none}
.jf-eq-pista:active{cursor:grabbing}
.jf-eq-trilho{display:flex;gap:24px;width:max-content;padding:55px 0}
.jf-eq-pessoa{flex:none;width:264px;height:425px;position:relative;border-radius:22px;
  background:rgba(109,70,27,.3);
  transition:transform .35s ease, box-shadow .35s ease}
.jf-eq-pessoa:hover{transform:translateY(-6px);
  box-shadow:0 14px 40px rgba(69,46,18,.2), 0 4px 12px rgba(69,46,18,.08)}
.jf-eq-retrato{position:absolute;inset:14px;border-radius:12px;overflow:hidden;
  background-color:#E6DFD4;background-repeat:no-repeat}
.jf-eq-tarja{position:absolute;left:0;right:0;bottom:0;padding:13px 17px 15px;
  background:rgba(109,70,27,.45);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.jf-eq-tarja strong{display:block;font-family:'Degular','Figtree',sans-serif;
  font-weight:500;font-size:21px;line-height:24px;color:#FFFFFF}
.jf-eq-tarja span{display:block;margin-top:2px;font-weight:400;font-size:12px;
  line-height:14px;color:rgba(255,255,255,.88)}

/* desfoque que come as pontas */
.jf-veu{position:absolute;top:0;bottom:0;width:165px;pointer-events:none;z-index:4;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.jf-veu-esq{left:0;
  background:linear-gradient(to right, rgba(201,174,138,.75), rgba(201,174,138,0));
  mask-image:linear-gradient(to right,#000 20%,transparent 100%);
  -webkit-mask-image:linear-gradient(to right,#000 20%,transparent 100%)}
.jf-veu-dir{right:0;
  background:linear-gradient(to left, rgba(201,174,138,.75), rgba(201,174,138,0));
  mask-image:linear-gradient(to left,#000 20%,transparent 100%);
  -webkit-mask-image:linear-gradient(to left,#000 20%,transparent 100%)}

/* ===========================================================
   ACESSIBILIDADE — quem pede menos movimento, recebe menos
   =========================================================== */
@media (prefers-reduced-motion:reduce){
  .jf-selo,.jf-faixa,.jf-faixa > div{animation:none}
  .jf-dep-trilho,.jf-card{transition:none}
}

.jf-env:last-child{margin-bottom:0}

/* ===========================================================
   EFEITOS DE ENTRADA
   Os elementos nascem escondidos e se revelam quando entram
   na tela. A classe .jf-dentro é posta pelo efeitos.js.
   =========================================================== */

/* dissolução das fontes: cada palavra entra desfocada e sobe */
.jf-palavra{display:inline-block;opacity:0;filter:blur(7px);transform:translateY(16px);
  transition:opacity .75s cubic-bezier(.22,1,.36,1),
             filter .75s cubic-bezier(.22,1,.36,1),
             transform .75s cubic-bezier(.22,1,.36,1)}
.jf-dentro .jf-palavra{opacity:1;filter:blur(0);transform:none}

/* blocos que sobem enquanto aparecem */
.jf-sobe{opacity:0;transform:translateY(34px);
  transition:opacity .85s cubic-bezier(.22,1,.36,1),
             transform .85s cubic-bezier(.22,1,.36,1)}
.jf-sobe.jf-dentro{opacity:1;transform:none}

/* só a revelação, sem movimento (para imagens grandes) */
.jf-aparece{opacity:0;transition:opacity 1s cubic-bezier(.22,1,.36,1)}
.jf-aparece.jf-dentro{opacity:1}

@media (prefers-reduced-motion:reduce){
  .jf-palavra,.jf-sobe,.jf-aparece{
    opacity:1 !important;filter:none !important;
    transform:none !important;transition:none !important}
}

/* ---------- MENU: hover e clique em marrom ---------- */
/* o :not(.jf-btn) deixa o botao de fora: o texto dele e branco */
/* o botao hamburguer so existe no celular */
.jf-menu-botao{display:none}
/* quebras de linha que so valem no celular */
br.jf-cel{display:none}
.jf-menu a{color:#F1ECE2;transition:color .25s ease}
.jf-menu a:hover,
.jf-menu a:focus-visible,
.jf-menu a:active,
.jf-menu a.jf-menu-ativo{color:#6D461B}

/* ---------- PARALLAX: elementos que andam em outra velocidade ---------- */
.jf-par{will-change:transform}
@media (prefers-reduced-motion:reduce){
  .jf-par{transform:none !important}
}

/* setas discretas do carrossel de depoimentos */
.jf-dep-seta{position:absolute;width:40px;height:40px;z-index:5;padding:0;
  border:none;border-radius:50%;background:rgba(109,70,27,.5);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(69,46,18,.18);
  transition:transform .22s ease, background-color .22s ease}
.jf-dep-seta:hover{background:#6D461B;transform:scale(1.08)}
.jf-dep-seta:active{transform:scale(.95)}
.jf-dep-seta svg{display:block}

/* ===========================================================
   ACESSIBILIDADE
   =========================================================== */

/* atalho "ir para o conteudo": invisivel ate receber o foco
   do teclado, quando desce do topo da tela */
.jf-pula{position:fixed;left:16px;top:-80px;z-index:9999;
  padding:14px 20px;border-radius:0 0 10px 10px;
  background:#6D461B;color:#FFFFFF;text-decoration:none;
  font-family:'Figtree',system-ui,sans-serif;font-weight:600;font-size:16px;
  transition:top .2s ease}
.jf-pula:focus{top:0}

/* anel de foco visivel em tudo que recebe teclado.
   usa outline (nao border) para nao mexer no layout */
.jf-page a:focus-visible,
.jf-page button:focus-visible,
.jf-page input:focus-visible,
.jf-page [tabindex]:focus-visible{
  outline:3px solid #6D461B;outline-offset:3px;border-radius:4px}

/* sobre fundo escuro o marrom desaparece: ali o anel e claro */
#rodape a:focus-visible,
.jf-dep-seta:focus-visible,
.jf-play:focus-visible,
.jf-btn:focus-visible{
  outline:3px solid #F2EDE3;outline-offset:3px}

/* o <main> recebe foco pelo atalho, mas nao deve desenhar anel */
#conteudo:focus,#conteudo:focus-visible{outline:none}

/* texto escondido que so o leitor de tela anuncia */
.jf-so-leitor{position:absolute !important;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;white-space:nowrap;
  clip:rect(0 0 0 0);clip-path:inset(50%);border:0}

/* ===========================================================
   CELULAR — layout proprio das secoes 1, 3 e 8
   Abaixo de 860px essas secoes saem do desenho de 1440px e se
   reorganizam em pilha vertical. O desktop nao e tocado: tudo
   aqui vive dentro da media query.
   O !important e necessario porque o posicionamento original
   esta em atributos style=, que vencem qualquer classe.
   =========================================================== */
@media (max-width: 860px){

  /* a secao deixa de ser uma tela de 1440px e passa a fluir */
  .jf-sec.jf-mob{
    width:100% !important;height:auto !important;isolation:isolate;
    /* clip em vez de hidden: hidden cria um container rolavel e o navegador
       empurra a secao para o lado ao focar um elemento que passa da borda */
    overflow:clip !important;
    transform:none !important;display:flex;flex-direction:column;align-items:stretch}

  /* as quebras marcadas com .jf-cel passam a valer */
  br.jf-cel{display:inline}

  /* tipografia comum do celular */
  .jf-mob p{font-size:16px !important;line-height:24px !important}
  .jf-mob a.jf-btn{height:62px !important;font-size:13px !important;
    border-width:5px !important;width:auto !important}

  /* ---------- MENU ---------- */
  .jf-menu{position:relative;z-index:30;order:1;
    height:58px;display:flex;align-items:center;justify-content:flex-end;padding:0 16px}
  .jf-menu-botao{display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;padding:0 9px;border:none;background:none;cursor:pointer}
  .jf-menu-botao span{display:block;height:2px;border-radius:2px;background:#6D461B;
    transition:transform .25s ease, opacity .2s ease}
  .jf-menu.jf-aberto .jf-menu-botao span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .jf-menu.jf-aberto .jf-menu-botao span:nth-child(2){opacity:0}
  .jf-menu.jf-aberto .jf-menu-botao span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .jf-menu-lista{position:absolute;left:0;right:0;top:58px;
    flex-direction:column;background:#F2EDE3;
    border-radius:0 0 20px 20px;box-shadow:0 14px 34px rgba(69,46,18,.18);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
    display:flex;overflow:hidden}
  .jf-menu.jf-aberto .jf-menu-lista{opacity:1;visibility:visible;transform:none}
  .jf-menu-lista a{position:static !important;left:auto !important;top:auto !important;
    display:block;padding:15px 22px !important;font-size:17px !important;
    color:#6D461B !important;border-bottom:1px solid rgba(109,70,27,.1)}
  .jf-menu-lista a:last-child{border-bottom:none}

  /* ---------- 1. HERO ---------- */
  #topo{padding:0 0 96px !important;background:#C9AE8A !important}
  /* o painel com gradiente vira o fundo da secao inteira */
  #topo > div:first-of-type{z-index:-1;left:0 !important;top:58px !important;
    width:100% !important;height:calc(100% - 58px) !important;
    border-radius:0 60px 0 90px !important}
  /* a mancha desfocada fica so como decoracao, no canto */
  #topo > .jf-par{z-index:-1;left:auto !important;right:-240px !important;top:-150px !important;
    width:460px !important;height:600px !important}
  #topo > .jf-par img{width:430px !important;height:290px !important;
    filter:blur(18px) !important}

  #topo > img{order:2;position:static !important;
    width:58px !important;height:56px !important;margin:30px 0 0 22px !important}
  #topo > h1{order:3;position:static !important;width:auto !important;
    margin:16px 22px 0 !important;font-size:52px !important;line-height:53px !important;
    letter-spacing:-2.2px !important}
  #topo > p{order:4;position:static !important;width:auto !important;
    margin:18px 22px 0 !important}
  #topo > a.jf-btn{order:5;position:static !important;
    margin:26px 22px 0 !important}

  /* ---------- 3. BUMBUM DE LUXO ---------- */
  #bumbum{padding:40px 0 46px !important;border-radius:22px 110px 0 0 !important}
  #bumbum > h2{order:1;position:static !important;width:auto !important;
    margin:0 22px !important;font-size:54px !important;line-height:50px !important;
    letter-spacing:-2.4px !important}
  #bumbum > p:nth-of-type(1){order:2;position:static !important;width:auto !important;
    margin:18px 22px 0 !important}
  /* mesmo slide do desktop, correndo sozinho e inclinando,
     com as medidas reduzidas na mesma proporcao (0,49) */
  #bumbum > .jf-galeria{order:3;position:static !important;
    width:100% !important;height:345px !important;margin-top:26px !important;
    overflow-x:auto !important;overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  #bumbum > .jf-galeria::-webkit-scrollbar{display:none}
  /* o passeio e feito por rolagem (efeitos.js), nao por animacao:
     assim da para encostar o dedo, parar e arrastar as fotos */
  #bumbum .jf-faixa{animation:none !important;
    width:max-content !important;margin-left:0 !important}
  #bumbum .jf-faixa > div:nth-child(5n+1){width:170px !important;height:252px !important;
    margin:40px 16px 0 0 !important}
  #bumbum .jf-faixa > div:nth-child(5n+2){width:118px !important;height:290px !important;
    margin:22px 15px 0 0 !important}
  #bumbum .jf-faixa > div:nth-child(5n+3){width:170px !important;height:252px !important;
    margin:42px 19px 0 0 !important}
  #bumbum .jf-faixa > div:nth-child(5n+4){width:124px !important;height:215px !important;
    margin:61px 9px 0 0 !important}
  #bumbum .jf-faixa > div:nth-child(5n+5){width:170px !important;height:252px !important;
    margin:12px 16px 0 0 !important}

  #bumbum > .jf-selos{order:4;display:flex;flex-wrap:wrap;justify-content:center;
    gap:8px;margin:22px 22px 0}
  #bumbum .jf-selo-pill{position:static !important;left:auto !important;top:auto !important;
    padding:9px 16px !important;font-size:12px !important;border-width:1px !important}

  #bumbum > p:nth-of-type(2){order:5;position:static !important;width:auto !important;
    margin:24px 22px 0 !important;font-size:14px !important;line-height:21px !important}

  #bumbum > h3:nth-of-type(1){order:6;position:static !important;width:auto !important;
    margin:34px 22px 0 !important;font-size:29px !important;line-height:32px !important}

  /* o bloco com os 4 cards e o comparador vira uma coluna */
  #bumbum > div:nth-of-type(3){order:7;position:static !important;
    width:auto !important;height:auto !important;margin:22px 22px 0 !important;
    display:flex;flex-direction:column;gap:14px}
  #bumbum .jf-ad{order:-1;position:relative !important;
    left:auto !important;top:auto !important;width:100% !important;height:380px !important}
  #bumbum .jf-benef{position:static !important;left:auto !important;top:auto !important;
    width:100% !important;height:auto !important}
  #bumbum .jf-benef p{font-size:13px !important;line-height:20px !important}

  #bumbum > h3:nth-of-type(2){order:8;position:static !important;width:auto !important;
    margin:36px 22px 0 !important;font-size:27px !important;line-height:31px !important}
  #bumbum > p:nth-of-type(3){order:9;position:static !important;width:auto !important;
    margin:14px 22px 0 !important;font-size:15px !important;line-height:22px !important}
  #bumbum > a.jf-btn{order:10;position:static !important;margin:24px 22px 0 !important}

  /* o ornamento fica so como marca d'agua ao fundo */
  #bumbum > .jf-par{z-index:-1;order:99;position:absolute !important;
    left:-120px !important;top:auto !important;bottom:560px !important;
    width:660px !important;height:565px !important;pointer-events:none}

  /* ---------- 8. CTA FINAL ---------- */
  #contato{padding:0 !important;background:transparent !important}
  /* cantos: so a curva grande em cima a esquerda e 50px embaixo
     a esquerda; o lado direito fica reto.
     o topo desce 28px para abrir uma folga da dobra de cima */
  #contato > div:first-of-type{z-index:-1;left:0 !important;top:28px !important;
    width:100% !important;height:calc(100% - 28px) !important;
    border-radius:120px 0 0 50px !important}
  #contato > h2{order:2;position:static !important;width:auto !important;
    margin:156px 22px 0 !important;font-size:30px !important;line-height:34px !important}
  #contato > p{order:3;position:static !important;width:auto !important;
    margin:16px 22px 0 !important}
  #contato > p br{display:none}
  #contato > a.jf-btn{order:4;position:static !important;margin:34px 22px 100px !important}


  /* ---------- parallax e giro saem no celular ----------
     sao efeitos de tela grande e custam rolagem no aparelho */
  .jf-mob .jf-par{transform:none !important}

  /* ---------- 2. SOBRE ---------- */
  #sobre{padding:36px 0 0 !important}
  /* a foto que sangrava na lateral vira a abertura da secao */
  #sobre > h2{order:1;position:static !important;width:auto !important;
    margin:30px 22px 0 !important;font-size:34px !important;line-height:39px !important;
    letter-spacing:-1.4px !important}
  #sobre > p{order:2;position:static !important;width:auto !important;
    margin:18px 22px 0 !important;font-size:17px !important;line-height:26px !important;
    letter-spacing:-0.1px !important}
  /* a foto fecha a secao, com o selo sobreposto no canto */
  #sobre > img.jf-par{order:3;position:static !important;
    width:100% !important;height:430px !important;margin-top:14px !important;
    object-fit:cover;object-position:50% 24%}
  /* o selo sobe inteiro para cima da foto, como no desktop.
     a margem de baixo devolve o que a negativa tirou, para a
     secao nao encolher e cortar a imagem */
  #sobre > img.jf-selo{order:4;position:static !important;
    width:92px !important;height:92px !important;
    margin:-196px 0 104px 36px !important}

  /* ---------- 4. NOSSOS PROCEDIMENTOS ---------- */
  #estetica{padding:44px 0 40px !important;border-radius:0 0 22px 22px !important}
  #estetica > h2{order:1;position:static !important;width:auto !important;
    margin:0 22px !important;font-size:30px !important;line-height:34px !important}
  #estetica > p:nth-of-type(1){order:2;position:static !important;width:auto !important;
    margin:2px 22px 0 !important;font-size:15px !important}
  /* so o card do meio ocupa lugar; os outros dois ficam fora do fluxo,
     invisiveis, prontos para assumir quando a seta e clicada */
  /* os tres cards vivem dentro do agrupador, que reserva a altura.
     O do meio fica inteiro; os das laterais espiam pelas bordas,
     inclinados e mais opacos — a mesma leitura do desktop. */
  #estetica > .jf-cards{order:3;position:relative;height:424px;margin:18px 0 0}
  /* o card do meio volta ao tamanho cheio; os laterais continuam
     espiando pelas bordas, na mesma proporcao do desktop (83%) */
  /* tudo ancorado no meio do container, nao na borda esquerda: em pixel
     fixo o conjunto so ficava centrado numa tela de 375px e escorregava
     em qualquer outra. Os afastamentos sao simetricos: o centro do card
     lateral fica a 181,5px do meio, de cada lado. */
  #estetica .jf-centro{left:calc(50% - 125px) !important;top:0 !important;
    width:250px !important;height:415px !important}
  #estetica .jf-esq{left:calc(50% - 264px) !important;top:26px !important;
    width:165px !important;height:344px !important}
  #estetica .jf-dir{left:calc(50% + 99px) !important;top:26px !important;
    width:165px !important;height:344px !important}
  /* a fila espera fora da tela, de cada lado */
  #estetica .jf-fora-esq,#estetica .jf-fora-dir{top:26px !important;
    width:165px !important;height:344px !important}
  #estetica .jf-fora-esq{left:calc(50% - 388px) !important}
  #estetica .jf-fora-dir{left:calc(50% + 223px) !important}
  /* nos cards laterais so a foto espia: o texto cortado pela
     borda da tela ficaria ilegivel */
  #estetica .jf-esq .jf-info,#estetica .jf-dir .jf-info{opacity:0}
  #estetica .jf-info{transition:opacity .45s ease}
  /* as setas descem para uma linha sob o card */
  #estetica > .jf-setas{order:4;display:flex;justify-content:center;gap:18px;margin:20px 0 0}
  #estetica .jf-seta{position:static !important;left:auto !important;top:auto !important}
  #estetica > p:nth-of-type(2){order:5;position:static !important;width:auto !important;
    margin:22px 22px 0 !important;font-size:12px !important;line-height:17px !important;
    text-align:center}
  #estetica > img{order:6;position:static !important;
    width:230px !important;height:80px !important;object-fit:contain;
    margin:14px auto 0 !important}

  /* ---------- 5. DEPOIMENTOS ---------- */
  #depoimentos{padding:104px 0 40px !important;margin-top:-60px !important}
  /* o painel claro vira o fundo da secao */
  /* o painel sobe para alem do topo da secao e se enfia por baixo
     da dobra de cima. overflow-y:visible deixa ele passar; o
     overflow-x:clip continua segurando a rolagem lateral */
  #depoimentos{overflow-x:clip !important;overflow-y:visible !important}
  /* o painel acompanha a secao, que ja sobe por baixo da dobra */
  #depoimentos > div:first-of-type{z-index:-1;left:14px !important;right:14px !important;
    top:0 !important;width:auto !important;height:100% !important;
    border-radius:0 0 26px 26px !important}
  /* a secao 4 passa a pintar por cima, para a 5 sangrar por baixo dela */
  .jf-env-estetica{z-index:30 !important}
  /* o envelope recorta com overflow:hidden. quem sangra para fora
     dele (o painel das provas sociais e o rodape, com margem
     negativa) precisa que esse recorte seja liberado, senao a
     parte que sobe some. */
  .jf-env-depoimentos,.jf-env-rodape{overflow:visible !important}
  #depoimentos > h2{order:1;position:static !important;width:auto !important;
    margin:0 22px 0 58px !important;font-size:52px !important;line-height:48px !important;
    letter-spacing:-2.2px !important}
  /* a submarca abre a secao, centralizada */
  #depoimentos > img{order:0;position:static !important;
    width:66px !important;height:64px !important;margin:0 auto 10px !important}
  /* a caixa do carrossel: um video por vez */
  #depoimentos > div:nth-of-type(2){order:3;position:static !important;
    width:100% !important;height:auto !important;margin:18px 0 0 !important}
  #depoimentos .jf-dep-trilho{padding:16px 22px !important;gap:44px !important}
  #depoimentos .jf-dep-video{width:calc(100vw - 44px) !important;height:480px !important}
  #depoimentos .jf-dep-video:hover{transform:none !important;box-shadow:none !important}
  /* setas e bolinhas numa linha so, abaixo do video */
  /* Setas sobre o video, encostadas nas bordas, e bolinhas embaixo —
     a mesma leitura do desktop.
     O envelope tem altura zero e sobe 256px (metade da moldura de 512),
     parando exatamente na linha do meio do video. A margem de baixo
     devolve os mesmos 256px, para o que vem depois nao subir junto. */
  #depoimentos > .jf-dep-controles{order:4;position:relative;
    height:0;margin:-256px 0 256px}
  #depoimentos .jf-dep-seta{position:absolute !important;top:-22px !important;
    width:44px !important;height:44px !important;z-index:6}
  #depoimentos #jf-dep-ant{left:6px !important;right:auto !important}
  #depoimentos #jf-dep-prox{left:auto !important;right:6px !important}
  #depoimentos .jf-dep-dots{position:absolute !important;
    left:0 !important;right:0 !important;top:274px !important;
    width:auto !important;justify-content:center;gap:14px !important}
  /* bolinha igual a do desktop. a area de toque fica num
     pseudo-elemento invisivel, sem afetar sombra nem forma */
  #depoimentos .jf-dot{position:relative}
  #depoimentos .jf-dot::after{content:'';position:absolute;
    left:50%;top:50%;transform:translate(-50%,-50%);width:24px;height:44px}
  #depoimentos .jf-dot-on::after{width:46px}
  #depoimentos > p{order:5;position:static !important;width:auto !important;
    margin:78px 22px 0 !important;font-size:15px !important}

  /* ---------- 6. EQUIPE ---------- */
  #equipe{padding:40px 0 40px !important}
  /* cor original, sem veu, centralizado e atras do fim da secao */
  /* sobe para a faixa dos retratos, como no desktop: os cards
     cobrem a maior parte e ele deixa de atravessar o paragrafo */
  #equipe > img.jf-par{z-index:-1;position:absolute !important;
    left:50% !important;right:auto !important;top:118px !important;bottom:auto !important;
    width:430px !important;height:368px !important;
    transform:translateX(-50%) !important}
  #equipe > h2{order:1;position:static !important;width:auto !important;
    margin:0 22px !important;font-size:34px !important;line-height:37px !important;
    text-align:center}
  #equipe > div{order:2;position:static !important;
    width:100% !important;height:auto !important;margin:22px 0 0 !important}
  #equipe .jf-eq-trilho{padding:14px 22px !important;gap:14px !important}
  #equipe .jf-eq-pessoa{width:244px !important;height:390px !important}
  #equipe .jf-eq-pessoa:hover{transform:none !important;box-shadow:none !important}
  #equipe .jf-veu{width:40px !important}
  #equipe > p{order:3;position:static !important;width:auto !important;
    margin:22px 22px 0 !important;font-size:15px !important}

  /* ---------- 7. O ESPAÇO ---------- */
  #espaco{padding:46px 0 46px !important}
  /* a foto volta ao formato retrato do desktop (531x820 -> 0,65),
     menor e centralizada, com os mesmos dois cantos arredondados */
  #espaco > div.jf-par{order:1;position:static !important;
    width:296px !important;height:457px !important;
    margin:0 auto !important;
    border-radius:128px 0 128px 0 !important}
  /* mesmas quebras e mesmo corpo, so centralizado */
  #espaco > h2{order:2;position:static !important;width:auto !important;
    margin:30px 22px 0 !important;font-size:54px !important;line-height:51px !important;
    letter-spacing:-2.2px !important;text-align:center}
  #espaco > p{order:3;position:static !important;width:auto !important;
    margin:20px 22px 0 !important;text-align:center}

  /* ---------- 9. RODAPÉ ---------- */
  /* o rodape sobe e se enfia por baixo do CTA: a curva do canto
     inferior esquerdo passa a revelar a foto do rodape atras dela.
     Como no caso da secao 5, a dobra de cima precisa pintar por
     cima — dai o z-index no envelope do contato. */
  .jf-env-contato{z-index:40 !important}
  #rodape{padding:208px 0 0 !important;align-items:center;margin-top:-160px !important}
  #rodape > img:first-of-type{order:1;position:static !important;
    width:54px !important;height:54px !important;margin:0 !important}
  #rodape > p{order:2;position:static !important;width:auto !important;
    margin:18px 22px 0 !important;text-align:center;font-size:15px !important}
  /* a assinatura larga passa a caber na tela */
  #rodape > img:last-of-type{order:3;position:static !important;
    width:calc(100% - 28px) !important;height:auto !important;
    margin:40px 14px 18px !important}

}

/* ===========================================================
   TABLET (600–860px)
   O layout empilhado do celular esticado numa tela larga vira
   linha de leitura comprida demais. Aqui a coluna ganha uma
   medida confortavel e a tipografia sobe junto.
   =========================================================== */
@media (min-width: 600px) and (max-width: 860px){

  /* coluna central com medida de leitura */
  .jf-mob > h1,.jf-mob > h2,.jf-mob > h3,.jf-mob > p,.jf-mob > a.jf-btn,
  .jf-mob > .jf-selos,.jf-mob > .jf-setas,.jf-mob > .jf-dep-controles,
  #bumbum > div:nth-of-type(3){
    max-width:600px;width:auto !important;
    margin-left:auto !important;margin-right:auto !important}

  /* tipografia um degrau acima */
  #topo > h1{font-size:54px !important;line-height:55px !important}
  #bumbum > h2,#depoimentos > h2{font-size:76px !important;line-height:70px !important}
  #espaco > h2{font-size:64px !important;line-height:62px !important}
  #equipe > h2{font-size:44px !important;line-height:48px !important}
  #sobre > h2,#estetica > h2,#contato > h2{font-size:38px !important;line-height:43px !important}
  #sobre > h2{letter-spacing:-1.5px !important}
  #bumbum > h3:nth-of-type(1){font-size:36px !important;line-height:40px !important}
  #bumbum > h3:nth-of-type(2){font-size:32px !important;line-height:36px !important}
  .jf-mob p{font-size:17px !important;line-height:26px !important}
  .jf-mob a.jf-btn{height:60px !important;font-size:14px !important}

  /* imagens e carrosseis acompanham a tela maior */
  #sobre > img.jf-par{height:460px !important}
  #espaco > div.jf-par{width:320px !important;height:494px !important;
    border-radius:138px 0 138px 0 !important}
  /* a galeria sobe para 0,65 da medida original; o ciclo passa a 1099px */
  #bumbum .jf-galeria{height:450px !important}
  #bumbum .jf-faixa{animation-name:jf-correr-tab !important}
  #bumbum .jf-faixa > div:nth-child(5n+1){width:226px !important;height:335px !important;
    margin:53px 21px 0 0 !important}
  #bumbum .jf-faixa > div:nth-child(5n+2){width:157px !important;height:385px !important;
    margin:29px 20px 0 0 !important}
  #bumbum .jf-faixa > div:nth-child(5n+3){width:226px !important;height:335px !important;
    margin:56px 25px 0 0 !important}
  #bumbum .jf-faixa > div:nth-child(5n+4){width:165px !important;height:285px !important;
    margin:81px 12px 0 0 !important}
  #bumbum .jf-faixa > div:nth-child(5n+5){width:226px !important;height:335px !important;
    margin:16px 21px 0 0 !important}
  /* os cards sobem 1,30x em relacao ao celular, mantendo a proporcao e os
     afastamentos simetricos. O agrupador acompanha a altura, senao o card
     passa por cima das setas. */
  #estetica > .jf-cards{height:549px !important}
  #estetica .jf-centro{left:calc(50% - 162px) !important;
    width:325px !important;height:540px !important}
  #estetica .jf-esq{left:calc(50% - 343px) !important;top:34px !important;
    width:215px !important;height:448px !important}
  #estetica .jf-dir{left:calc(50% + 128px) !important;top:34px !important;
    width:215px !important;height:448px !important}
  #estetica .jf-fora-esq,#estetica .jf-fora-dir{top:34px !important;
    width:215px !important;height:448px !important}
  #estetica .jf-fora-esq{left:calc(50% - 505px) !important}
  #estetica .jf-fora-dir{left:calc(50% + 290px) !important}
  #equipe .jf-eq-pessoa{width:238px !important;height:378px !important}
  #equipe .jf-veu{width:70px !important}
  /* dois depoimentos por vez; as bolinhas se ajustam sozinhas */
  #depoimentos .jf-dep-video{width:352px !important;height:580px !important}
  /* a moldura passa a 612px de altura: as setas sobem 306 (a metade)
     e as bolinhas descem na mesma proporcao */
  #depoimentos > .jf-dep-controles{margin:-306px 0 306px !important}
  #depoimentos .jf-dep-dots{top:324px !important}
  #rodape > img:last-of-type{max-width:700px;margin-left:auto !important;margin-right:auto !important}
}

/* ===========================================================
   ECONOMIA DE PROCESSAMENTO
   As animacoes continuas (galeria correndo, fotos inclinando,
   selo girando) so rodam enquanto a secao esta a vista. O
   efeitos.js poe e tira a classe .jf-visivel conforme a rolagem.
   =========================================================== */
.jf-sec:not(.jf-visivel) .jf-faixa,
.jf-sec:not(.jf-visivel) .jf-faixa > div,
.jf-sec:not(.jf-visivel) .jf-selo,
.jf-sec:not(.jf-visivel) .jf-eq-trilho{animation-play-state:paused}

/* ===========================================================
   BOTAO FLUTUANTE DE WHATSAPP — so no celular
   Mora fora do .jf-palco: dentro dele o transform:scale das
   secoes faria o position:fixed grudar na secao em vez da tela.
   =========================================================== */
.jf-zap{display:none}

@media (max-width: 860px){
  .jf-zap{
    display:flex;align-items:center;justify-content:center;
    position:fixed;z-index:9000;
    right:18px;
    /* env() afasta da barra de gestos do iPhone */
    bottom:calc(18px + env(safe-area-inset-bottom, 0px));
    width:58px;height:58px;border-radius:50%;
    background:#25D366;
    color:#FFFFFF;text-decoration:none;
    box-shadow:0 8px 22px rgba(18,94,48,.34), 0 2px 6px rgba(18,94,48,.22);
    transition:transform .22s ease, box-shadow .22s ease}
  .jf-zap:active{transform:scale(.94)}
  .jf-zap:focus-visible{outline:3px solid #6D461B;outline-offset:3px}
  .jf-zap svg{display:block}
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce){
  .jf-zap{transition:none}
}