/* =========================================================
   L&L · COMPONENTES
   ========================================================= */

/* =========================================================
   1. NAVEGAÇÃO — pílula de vidro flutuante, logo ao centro
   ========================================================= */
.nav{
  position:fixed;inset:16px 0 auto;z-index:var(--z-nav);
  display:flex;justify-content:center;
  padding-inline:var(--gut);
  pointer-events:none;
  transition:transform var(--t),opacity var(--t);
}
.nav.is-hidden{transform:translateY(-140%);opacity:0}

/* Pílula branca: a marca colorida precisa de fundo claro para
   as duas cores da identidade aparecerem. */
.nav__pill{
  pointer-events:auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(20px,3vw,48px);
  width:max-content;max-width:100%;
  height:var(--nav-h);
  padding-inline:10px;
  border-radius:var(--r-pill);
  border:1px solid rgba(27,33,22,.08);
  background:rgba(255,255,255,.93);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  backdrop-filter:blur(22px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 18px 46px rgba(23,28,20,.24);
  transition:background var(--t),border-color var(--t),box-shadow var(--t);
}
.nav.is-stuck .nav__pill{
  background:#FFFFFF;
  border-color:rgba(27,33,22,.12);
  box-shadow:0 14px 38px rgba(23,28,20,.2);
}

.nav__side{display:flex;align-items:center;gap:clamp(14px,1.8vw,28px)}
.nav__side--l{justify-content:flex-start;padding-left:14px}
.nav__side--r{justify-content:flex-end}

.nav__link{
  position:relative;
  font-size:14px;font-weight:600;
  letter-spacing:-.01em;
  color:rgba(27,33,22,.72);            /* 6,5:1 sobre o branco */
  padding-block:6px;
  transition:color var(--t-fast);
  white-space:nowrap;
}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:0;
  width:100%;height:2px;background:var(--ac);
  transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--e);
}
.nav__link:hover{color:#1B2116}
.nav__link:hover::after{transform:scaleX(1);transform-origin:left}
.nav__link[aria-current="page"]{color:var(--ac-3)}   /* 6,6:1 sobre o branco */
.nav__link[aria-current="page"]::after{transform:scaleX(1)}

/* A marca é o centro da pílula: colorida e maior que
   qualquer outro elemento da navegação. Sem placa: no branco
   ela se sustenta sozinha. */
.nav__logo{
  display:flex;align-items:center;justify-content:center;
  padding-inline:14px;
  transition:transform var(--t-fast);
}
.nav__logo:hover{transform:translateY(-2px) scale(1.03)}
.nav__logo img{height:50px;width:auto}

/* ---- botão hambúrguer com morph em X ---- */
.burger{
  display:none;
  position:relative;
  width:42px;height:42px;
  border-radius:var(--r-pill);
  border:1px solid rgba(27,33,22,.16);
  margin-left:auto;
}
.burger i{
  position:absolute;left:50%;top:50%;
  width:17px;height:2px;
  /* a pílula é branca: a barra tem que ser tinta, não --fg */
  background:#1B2116;
  border-radius:2px;
  transform:translate(-50%,-50%);
  transition:transform .55s var(--e),opacity .3s var(--e);
}
.burger i:nth-child(1){transform:translate(-50%,calc(-50% - 4px))}
.burger i:nth-child(2){transform:translate(-50%,calc(-50% + 4px))}
.burger[aria-expanded="true"] i:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg)}

/* ---- menu em tela cheia ---- */
.menu{
  position:fixed;inset:0;z-index:var(--z-menu);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + 48px) var(--gut) var(--s8);
  background:rgba(14,17,16,.9);
  -webkit-backdrop-filter:blur(32px) saturate(150%);
  backdrop-filter:blur(32px) saturate(150%);
  opacity:0;visibility:hidden;
  transition:opacity .5s var(--e),visibility .5s var(--e);
}
.menu.is-open{opacity:1;visibility:visible}
.menu__list{display:flex;flex-direction:column;gap:2px}
.menu__list a{
  display:block;
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(2rem,9vw,3rem);
  letter-spacing:-.04em;line-height:1.16;
  padding-block:12px;
  border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(38px);
  transition:opacity .6s var(--e),transform .6s var(--e);
}
.menu.is-open .menu__list a{opacity:1;transform:none}
.menu.is-open .menu__list a:nth-child(1){transition-delay:.10s}
.menu.is-open .menu__list a:nth-child(2){transition-delay:.16s}
.menu.is-open .menu__list a:nth-child(3){transition-delay:.22s}
.menu.is-open .menu__list a:nth-child(4){transition-delay:.28s}
.menu__foot{
  margin-top:var(--s8);
  opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--e) .34s,transform .6s var(--e) .34s;
}
.menu.is-open .menu__foot{opacity:1;transform:none}

/* =========================================================
   2. BOTÕES — pílula com ícone aninhado
   ========================================================= */
.btn{
  position:relative;
  display:inline-flex;align-items:center;gap:14px;
  padding:9px 9px 9px 24px;
  border-radius:var(--r-pill);
  background:var(--ac);color:var(--on-ac);
  font-size:14px;font-weight:600;letter-spacing:-.012em;
  white-space:nowrap;
  transition:background var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);
  box-shadow:0 10px 30px -12px var(--ac-glow);
}
.btn__ic{
  display:grid;place-items:center;
  width:34px;height:34px;flex:none;
  border-radius:var(--r-pill);
  background:rgba(26,12,4,.14);
  font-size:15px;
  transition:transform .5s var(--e),background var(--t-fast);
}
.btn:hover{background:var(--ac-2);transform:translateY(-1px)}
.btn:hover .btn__ic{transform:translate(3px,-1px) scale(1.06);background:rgba(26,12,4,.2)}
.btn:active{transform:scale(.98)}

.btn--ghost{
  background:transparent;color:var(--fg);
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.btn--ghost .btn__ic{background:var(--tint-2)}
.btn--ghost:hover{background:var(--tint-1);box-shadow:inset 0 0 0 1px var(--fg-3)}
.btn--ghost:hover .btn__ic{background:var(--tint-3)}

.btn--sm{padding:6px 6px 6px 18px;font-size:13px;gap:10px}
.btn--sm .btn__ic{width:28px;height:28px;font-size:13px}

/* link com seta */
.tlink{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14px;font-weight:600;color:var(--ac-text);
  transition:gap var(--t-fast),color var(--t-fast);
}
.tlink .ic{font-size:16px;transition:transform .5s var(--e)}
.tlink:hover{gap:13px;color:var(--ac-text-h)}
.tlink:hover .ic{transform:translate(2px,-2px)}

/* =========================================================
   3. BEZEL DUPLO — toda mídia vive dentro de uma moldura
   ========================================================= */
.shell{
  padding:var(--shell);
  border-radius:var(--r-xl);
  background:var(--tint-1);
  border:1px solid var(--line);
  transition:border-color var(--t),background var(--t);
}
.shell__in{
  position:relative;
  border-radius:calc(var(--r-xl) - var(--shell));
  overflow:hidden;
  background:var(--bg-2);
  box-shadow:inset 0 1px 0 var(--hi);
}
.shell__in img,.shell__in video{width:100%;height:100%;object-fit:cover}
a.shell:hover,.shell.is-hot:hover{border-color:var(--line-2);background:var(--tint-2)}

.ratio{position:relative;width:100%}
.ratio > *{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ratio--wide{aspect-ratio:16/10}
.ratio--sq{aspect-ratio:1/1}
.ratio--tall{aspect-ratio:3/4}
.ratio--hero{aspect-ratio:4/3}

.zoom img{transition:transform 1.3s var(--e-soft)}
.zoom:hover img{transform:scale(1.045)}

/* =========================================================
   4. DOCK FLUTUANTE — contato rápido
   ========================================================= */
.dock{
  position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);
  z-index:var(--z-dock);
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
}
.dock__items{
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
}
.dock__item{
  display:flex;align-items:center;gap:10px;
  opacity:0;transform:translateY(14px) scale(.82);
  pointer-events:none;
  transition:opacity .45s var(--e),transform .45s var(--e);
}
.dock.is-open .dock__item{opacity:1;transform:none;pointer-events:auto}
.dock.is-open .dock__item:nth-child(1){transition-delay:.14s}
.dock.is-open .dock__item:nth-child(2){transition-delay:.08s}
.dock.is-open .dock__item:nth-child(3){transition-delay:.02s}

.dock__label{
  padding:6px 12px;
  border-radius:var(--r-pill);
  background:var(--glass-2);
  border:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  font-size:12px;font-weight:600;color:var(--fg);
  white-space:nowrap;
}
.dock__btn{
  display:grid;place-items:center;
  width:42px;height:42px;flex:none;
  border-radius:var(--r-pill);
  border:1px solid var(--line-2);
  background:var(--glass-2);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  color:var(--fg);font-size:19px;
  transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast);
}
.dock__btn:hover{background:var(--ac);color:var(--on-ac);transform:scale(1.07)}

.dock__fab{
  display:grid;place-items:center;
  width:54px;height:54px;
  border-radius:var(--r-pill);
  background:var(--ac);color:var(--on-ac);
  font-size:23px;
  box-shadow:0 16px 38px -10px rgba(217,122,72,.5);
  transition:transform .55s var(--e),background var(--t-fast);
}
.dock__fab:hover{background:var(--ac-2)}
.dock__fab .ic{transition:transform .55s var(--e)}
.dock.is-open .dock__fab .ic{transform:rotate(135deg)}
.dock.is-open .dock__fab{background:var(--bg-3);color:var(--fg)}

/* =========================================================
   5. ACORDEÃO
   ========================================================= */
.acc__item{border-bottom:1px solid var(--line)}
.acc__item:first-child{border-top:1px solid var(--line)}
.acc__btn{
  width:100%;display:flex;align-items:flex-start;gap:var(--s5);
  padding:24px 0;text-align:left;
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.02rem,1.6vw,1.2rem);
  letter-spacing:-.025em;line-height:1.26;
  color:var(--fg);
  transition:color var(--t-fast);
}
.acc__btn:hover{color:var(--ac-text)}
.acc__ic{
  flex:none;margin-left:auto;margin-top:2px;
  display:grid;place-items:center;
  width:30px;height:30px;
  border-radius:var(--r-pill);
  border:1px solid var(--line-2);
  font-size:14px;
  transition:transform .55s var(--e),background var(--t-fast),color var(--t-fast);
}
.acc__btn[aria-expanded="true"] .acc__ic{transform:rotate(45deg);background:var(--ac);color:var(--on-ac);border-color:transparent}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--e)}
.acc__panel.is-open{grid-template-rows:1fr}
.acc__panel > div{overflow:hidden}
.acc__panel p{color:var(--fg-2);max-width:64ch;padding-bottom:26px}

/* =========================================================
   6. FORMULÁRIO
   ========================================================= */
.field{display:flex;flex-direction:column;gap:8px}
.field > label{
  font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:var(--fg-2);
}
.field input,.field textarea{
  width:100%;
  padding:15px 18px;
  border-radius:var(--r-md);
  border:1px solid var(--line-2);
  background:var(--tint-1);
  color:var(--fg);
  font-size:15px;
  transition:border-color var(--t-fast),background var(--t-fast);
}
.field textarea{resize:vertical;min-height:110px}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-3)}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--ac);background:var(--tint-2);
}
.field small{min-height:16px;font-size:12px;color:var(--ac-text)}
.form__grid{display:grid;gap:var(--s5)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.form__ok{
  font-size:14px;font-weight:600;color:var(--ac-text);
  min-height:22px;
}

/* =========================================================
   7. REVELAÇÃO EM SCROLL
   ========================================================= */
[data-rv]{
  opacity:0;
  transform:translateY(38px);
  filter:blur(8px);
  transition:opacity .9s var(--e) var(--d,0s),
             transform .9s var(--e) var(--d,0s),
             filter .9s var(--e) var(--d,0s);
}
[data-rv].is-in{opacity:1;transform:none;filter:none}

/* Linhas de título que sobem atrás de uma máscara. */
.mask{display:block;overflow:hidden;padding-bottom:.08em}
.mask > span{
  display:block;
  transform:translateY(110%);
  transition:transform 1.05s var(--e) var(--d,0s);
}
.is-in .mask > span,.mask.is-in > span{transform:none}

@media (prefers-reduced-motion:reduce){
  [data-rv]{opacity:1;transform:none;filter:none}
  .mask > span{transform:none}
}

/* =========================================================
   9. RESPONSIVO
   ========================================================= */
@media (max-width:1024px){
  .nav__side--l .nav__link:nth-child(n+3){display:none}
}
@media (max-width:860px){
  .nav__pill{width:100%;padding-inline:8px}
  .nav__logo{padding-inline:8px}
  .nav__logo img{height:38px}
  .nav__side--l{padding-left:0}
  .nav__side--l .nav__link{display:none}
  .nav__side--r .nav__link{display:none}
  .burger{display:block}
  /* O botão vira só o ícone: a pílula não pode encostar nas bordas. */
  .nav__side--r .btn--sm{padding:5px;gap:0}
  .nav__side--r .btn--sm .btn__t{display:none}
  .nav__side--r .btn--sm .btn__ic{width:32px;height:32px;font-size:16px;background:transparent}
}
/* Alvos de toque: links de rodapé e listas ganham área. */
@media (pointer:coarse){
  .ft__col a,.ft__base a,.nav__link,.tlink{display:inline-block;padding-block:7px}
  .acc__btn{min-height:56px}
}

@media (max-width:760px){
  body{font-size:16px}
  .form__row{grid-template-columns:1fr}
  .dock__label{display:none}
}

/* =========================================================
   10. LOADER — 0,8 s com a marca
   Painel oliva sólido, marca ao centro e um filete de
   terracota que preenche. Depois o painel sobe e sai.
   Aparece uma vez por sessão: repetir a cada página seria
   pedágio, não abertura.
   ========================================================= */
.loader{
  position:fixed;inset:0;z-index:var(--z-loader);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:26px;
  background:var(--bg);
  transition:transform .66s var(--e) .1s,visibility 0s linear .76s;
}
.loader.is-done{transform:translateY(-101%);visibility:hidden}
.loader__mark{
  width:clamp(74px,9vw,104px);
  opacity:0;transform:translateY(10px);
  animation:loadMark .5s var(--e) forwards;
}
.loader__mark img{width:100%;height:auto}
@keyframes loadMark{to{opacity:1;transform:none}}
.loader__bar{
  width:clamp(120px,16vw,190px);height:2px;
  background:var(--line-2);overflow:hidden;
}
.loader__bar i{
  display:block;height:100%;background:var(--ac);
  transform:scaleX(0);transform-origin:left;
  animation:loadBar .8s var(--e) forwards;
}
@keyframes loadBar{to{transform:scaleX(1)}}

@media (prefers-reduced-motion:reduce){
  .loader{display:none}
}

/* =========================================================
   11. RODAPÉ — fecho com imagem de fundo e marca em escala
   ========================================================= */
.ft{
  position:relative;
  overflow:hidden;
  border-top:0;
  padding-block:clamp(72px,10vw,132px) 0;
  background:var(--bg);
}
.ft__bg{position:absolute;inset:0;z-index:0}
.ft__bg img{
  width:100%;height:100%;object-fit:cover;object-position:50% 60%;
  /* a areia da orla é clara demais para o texto: a foto entra
     rebaixada e o véu sólido fecha por cima */
  opacity:.58;
}
.ft__bg::after{content:"";position:absolute;inset:0;background:var(--veil-strong)}
.ft > .wrap{position:relative;z-index:1}

/* a frase de fecho, em escala de cartaz */
.ft__claim{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(2rem,5.4vw,4.4rem);
  line-height:1.0;letter-spacing:-.04em;
  max-width:16ch;
  margin-bottom:clamp(40px,6vw,72px);
}
.ft__claim em{font-style:normal;color:var(--ac-2)}

.ft__grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,.6fr)) minmax(0,.9fr);
  gap:var(--s7) var(--s6);
  padding-bottom:clamp(48px,6vw,80px);
}
.ft__grid p{color:var(--fg-2);font-size:14.5px;max-width:30ch}
.ft__col h3{
  font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ac-2);
  margin-bottom:var(--s4);
}
.ft__col ul{display:grid;gap:11px}
/* Só os links da lista. Sem `ul`, este seletor vencia o .btn
   e pintava o texto do CTA de branco sobre a terracota. */
.ft__col ul a,.ft__col ul li{font-size:14.5px;color:var(--fg-2);transition:color var(--t-fast)}
.ft__col ul a:hover{color:var(--fg)}
.ft__cta .btn{width:100%;justify-content:space-between}

.ft__base{
  display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);
  align-items:center;
  border-top:1px solid var(--line);
  padding-top:var(--s5);
  font-size:12.5px;color:var(--fg-3);
}
.ft__base .push{margin-left:auto}
.ft__base a:hover{color:var(--fg)}

/* A marca em escala de fachada, cortada pela borda inferior:
   é a assinatura da página, não um logotipo de rodapé. */
.ft__mark{
  position:relative;z-index:1;
  margin-top:clamp(40px,6vw,72px);
  overflow:hidden;
  line-height:0;
}
/* Nada de margem negativa aqui: porcentagem resolve sobre a LARGURA,
   e a marca tem só 19% de altura em relação a ela. Um -14% comia
   quase três quartos do logo. A marca aparece inteira. */
.ft__mark picture{display:block}
.ft__mark img{
  width:100%;height:auto;
  display:block;
  opacity:.16;
}

@media (max-width:1024px){
  .ft__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft__cta{grid-column:1 / -1}
}
@media (max-width:640px){
  .ft__mark img{opacity:.2}
}

/* =========================================================
   12. MARCA ANIMADA
   O símbolo é desenhado traço a traço em terracota e só
   depois preenche em branco. Mesma peça no loader e no hero,
   para a abertura ter continuidade.
   ========================================================= */
.mk{display:block;line-height:0}
.mk__svg{width:100%;height:auto;overflow:visible}
.mk__p{
  fill:var(--fg);
  fill-opacity:1;
  stroke:var(--ac);
  stroke-width:.9;
  stroke-linejoin:miter;
  vector-effect:non-scaling-stroke;
}
/* Estado de espera: contorno apagado e sem preenchimento. */
.mk--draw .mk__p{
  fill-opacity:0;
  stroke-dasharray:var(--len);
  stroke-dashoffset:var(--len);
}
.mk--draw.is-drawing .mk__p{
  animation:
    mkTraco .82s var(--e) calc(var(--i) * .1s) forwards,
    mkPreenche .55s var(--e) calc(.5s + var(--i) * .1s) forwards;
}
@keyframes mkTraco{to{stroke-dashoffset:0}}
@keyframes mkPreenche{to{fill-opacity:1;stroke-opacity:0}}

@media (prefers-reduced-motion:reduce){
  .mk--draw .mk__p{fill-opacity:1;stroke-dashoffset:0;stroke-opacity:0}
  .mk--draw.is-drawing .mk__p{animation:none}
}

/* =========================================================
   13. BRILHO — foco e destaque, sem gradiente
   Sombra colorida é luz, não degradê: continua cor sólida.
   ========================================================= */
.glow{transition:box-shadow var(--t),transform var(--t)}
.glow:hover{
  box-shadow:0 0 0 1px var(--ac),0 12px 40px -12px rgba(204,127,82,.55);
  transform:translateY(-3px);
}

/* =========================================================
   CONSULTOR
   Botão fixo no canto esquerdo, oposto à dock de contato,
   com ponto verde pulsando. Nas subpáginas um balão sobe
   sozinho depois de um tempo de leitura — uma vez por
   sessão, e nunca mais se a pessoa fechar.
   ========================================================= */
.cons{
  position:fixed;
  left:var(--gut); bottom:clamp(18px,3vw,30px);
  z-index:var(--z-dock);
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
}

.cons__fab{
  display:inline-flex;align-items:center;gap:0;
  padding:8px;
  border:1px solid rgba(27,33,22,.08);
  border-radius:var(--r-pill);
  background:#FFFFFF;
  color:#1B2116;
  box-shadow:0 18px 44px rgba(23,28,20,.26);
  cursor:pointer;
  transition:gap var(--t),padding var(--t),box-shadow var(--t);
}
.cons__fab:hover,.cons__fab:focus-visible{
  gap:10px;padding-right:20px;
  box-shadow:0 22px 56px rgba(23,28,20,.34);
}
/* O rótulo só se abre no toque do cursor: parado, é um ícone. */
.cons__rot{
  max-width:0;overflow:hidden;white-space:nowrap;
  font-family:var(--f-display);font-weight:600;
  font-size:.86rem;letter-spacing:-.01em;
  opacity:0;
  transition:max-width var(--t),opacity var(--t);
}
.cons__fab:hover .cons__rot,
.cons__fab:focus-visible .cons__rot,
.cons.is-aberto .cons__rot{max-width:260px;opacity:1}

.cons__ava{
  position:relative;flex:none;
  display:grid;place-items:center;
  width:44px;aspect-ratio:1;
  border-radius:var(--r-pill);
  background:var(--ac);color:var(--on-ac);
  font-size:1.25rem;
}
/* o ícone respira devagar, sem chamar atenção demais */
.cons__ava--fab .ic{animation:consRespira 3.4s var(--e-soft) infinite}
@keyframes consRespira{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.12)}
}

/* ponto verde de online, com halo pulsando */
.cons__on{
  position:absolute;right:-1px;bottom:-1px;
  width:12px;height:12px;border-radius:var(--r-pill);
  background:#2FBF5C;
  box-shadow:0 0 0 2px #FFFFFF;
}
.cons__on::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:#2FBF5C;
  animation:consPulso 2.2s var(--e-soft) infinite;
}
@keyframes consPulso{
  0%{transform:scale(1);opacity:.7}
  70%,100%{transform:scale(2.6);opacity:0}
}

/* ---- balão ---- */
.cons__balao{
  position:relative;
  width:min(84vw,310px);
  padding:20px;
  border:1px solid rgba(27,33,22,.08);
  border-radius:var(--r-lg);
  background:#FFFFFF;
  color:#1B2116;
  box-shadow:0 26px 64px rgba(23,28,20,.3);
  transform:translateY(14px) scale(.96);
  transform-origin:left bottom;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--t),transform var(--t),visibility var(--t);
}
.cons.is-aberto .cons__balao{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:none;
}
.cons__topo{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.cons__topo strong{
  display:block;
  font-family:var(--f-display);font-weight:600;
  font-size:.98rem;letter-spacing:-.02em;
}
.cons__status{
  display:block;font-size:12.5px;
  color:#1E7A3C;                       /* 4,9:1 sobre o branco */
}
.cons__balao p{
  font-size:14px;line-height:1.55;
  color:rgba(27,33,22,.74);
  margin-bottom:16px;
}
.cons__x{
  position:absolute;top:10px;right:10px;
  display:grid;place-items:center;
  width:30px;height:30px;border-radius:var(--r-pill);
  background:transparent;border:0;cursor:pointer;
  color:rgba(27,33,22,.6);font-size:15px;
  transition:background var(--t-fast),color var(--t-fast);
}
.cons__x:hover{background:rgba(27,33,22,.07);color:#1B2116}

/* No celular a dock e o consultor dividem a base: o consultor
   encolhe para o ícone e o balão ocupa a largura útil. */
@media (max-width:560px){
  .cons{left:16px;bottom:16px}
  .cons__balao{width:min(88vw,300px)}
  .cons__fab:hover{padding-right:8px}
  .cons__fab:hover .cons__rot,
  .cons__fab:focus-visible .cons__rot{max-width:0;opacity:0}
  .cons.is-aberto .cons__rot{max-width:0;opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .cons__ava--fab .ic,.cons__on::after{animation:none}
  .cons__on::after{display:none}
}

/* =========================================================
   TOQUE NO CELULAR
   Dedo não é cursor: tudo que se toca precisa de 44px de
   altura, e o selo em 10,5px não se lê em tela de telefone.
   ========================================================= */
@media (max-width:760px){
  .eyebrow{font-size:12px}

  /* links do rodapé: a área cresce, o texto não muda de lugar */
  .ft__col ul a,
  .ft__base a{
    display:inline-block;
    padding-block:13px;
    margin-block:-9px;
  }
  .ft__col ul li{margin-block:0}

  .tlink{padding-block:11px;margin-block:-11px}

  .burger{min-width:44px;min-height:44px}
  .dock__btn{width:44px;height:44px}
  .dock__fab{width:56px;height:56px}
  .cons__fab{min-height:44px}
}

/* nav e rodapé: área de toque no telefone */
@media (max-width:760px){
  .nav__logo{padding-block:6px}
  .ft__col ul a{display:block}
}

/* Alvos do balão do consultor: só valem quando ele está aberto,
   e aí precisam dos mesmos 44px do resto. O título de coluna do
   rodapé em 11px também não se lê em tela de telefone. */
@media (max-width:760px){
  .cons__x{width:44px;height:44px;top:4px;right:4px}
  .cons__balao .btn--sm{min-height:44px}
  .ft__col h3{font-size:12px}
}