/* =====================================================================
   TNF · efeitos do site (títulos, botões, links, cartões)
   Carregado em TODAS as páginas do /tnf pelo _injeta_fx.py. Quem marca os
   elementos é o tnf-fx.js, só com classes "fx-*" (nunca mexe no texto nem
   na estrutura): o editor do /admin grava o DOM inteiro, e o
   editor-save.php apaga essas classes antes de salvar.

   Movimento reduzido (Windows com "Efeitos de animação" desligado): os
   esmaecimentos, o brilho e os sublinhados continuam; saem só os
   deslocamentos, o desfoque e o efeito magnético. Ver o fim do arquivo.
   ===================================================================== */

:root{
  --fx-ease:cubic-bezier(.16,1,.3,1);
  --fx-taupe:#C7B9AF;
  --fx-taupe-2:#E2D9D2;
  --fx-taupe-3:#A89A8F;
}

/* ---------- correção: o formulário da home vazava 54px à direita ----------
   Ele tem width:130% da coluna (de propósito, para ficar largo) e crescia
   para FORA da tela. Com a margem negativa cresce para a esquerda, no vão
   de 300px entre as colunas, e a borda direita fica alinhada ao conteúdo. */
@media (min-width:1025px){
  .footer-right>.cform{margin-left:-30%}
}

/* ---------- entrada da página ---------- */
html.fx-on body{animation:fx-pagina .8s var(--fx-ease) both}
@keyframes fx-pagina{from{opacity:0}}

/* ---------- barra fina de leitura no topo ---------- */
.fx-progresso{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:100001;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--fx-taupe-2),var(--fx-taupe),var(--fx-taupe-3));
  box-shadow:0 0 12px rgba(199,185,175,.7);
}

/* ---------- cabeçalho: sombra quando a página rola ---------- */
.fx-cabecalho{transition:box-shadow .5s var(--fx-ease)}
.fx-cabecalho.fx-rolou{box-shadow:0 14px 34px -22px rgba(40,30,25,.55)}

/* ---------- títulos ----------
   O H1 do topo entra por CSS puro, sem esperar o JS: assim não pisca. */
html.fx-on h1:not(:where(.anim,.anim-fade,.anim-right,header,.header,nav) *):not(.anim):not(.anim-fade){
  animation:fx-titulo 1.3s var(--fx-ease) .15s both;
}
@keyframes fx-titulo{
  from{opacity:0;transform:translateY(.45em);filter:blur(8px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
/* o que acompanha o título no topo (breadcrumb, subtítulo, botão) */
html.fx-on :where(.treatment-hero,.page-hero,.hero-content) :where(p,.breadcrumb,a[class*="btn"]):not(:where(.anim,.anim-fade,.anim-right) *){
  animation:fx-sobe 1.1s var(--fx-ease) .45s both;
}
@keyframes fx-sobe{from{opacity:0;transform:translateY(14px)}}

/* cartões de diferenciais (/clinica-taina-fracaroli): a página cabe numa
   tela só, então eles entram ao abrir, em cascata, também por CSS puro */
html.fx-on .dif-grid>.dif-item{animation:fx-sobe 1.1s var(--fx-ease) both}
html.fx-on .dif-grid>.dif-item:nth-child(1){animation-delay:.45s}
html.fx-on .dif-grid>.dif-item:nth-child(2){animation-delay:.55s}
html.fx-on .dif-grid>.dif-item:nth-child(3){animation-delay:.65s}
html.fx-on .dif-grid>.dif-item:nth-child(4){animation-delay:.75s}
html.fx-on h1+p:not(.anim):not(.anim-fade){animation:fx-sobe 1.1s var(--fx-ease) .35s both}

/* brilho que atravessa o título depois que ele aparece. A cor do brilho
   (--fx-brilho) é escolhida pelo JS: mais escura em título claro, mais
   clara em título escuro. Só entra em título sem text-shadow. */
.fx-brilho{
  background-image:linear-gradient(100deg,currentColor 0 38%,var(--fx-brilho,#8C7A6B) 50%,currentColor 62% 100%);
  background-size:260% 100%;background-position:100% 0;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:fx-brilho 1.8s var(--fx-ease) .1s forwards;
}
@keyframes fx-brilho{to{background-position:0 0}}

/* ---------- revelação ao rolar ---------- */
.fx-r{
  opacity:0;
  transition:opacity 1s var(--fx-ease),transform 1.1s var(--fx-ease),
             filter 1s var(--fx-ease),clip-path 1.3s var(--fx-ease);
}
.fx-r.fx-t{transform:translateY(.5em);filter:blur(6px)}
.fx-r.fx-up{transform:translateY(26px)}
.fx-r.fx-card{transform:translateY(34px) scale(.97)}
.fx-r.fx-img{clip-path:inset(9% 9% 9% 9%);transform:scale(1.07)}
.fx-r.fx-in{opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0)}
/* cascata: itens que entram juntos (uma fileira de cartões) */
.fx-d1{transition-delay:.08s}.fx-d2{transition-delay:.16s}.fx-d3{transition-delay:.24s}
.fx-d4{transition-delay:.32s}.fx-d5{transition-delay:.40s}.fx-d6{transition-delay:.48s}

/* ---------- botões ---------- */
.fx-btn{
  position:relative;isolation:isolate;overflow:hidden;
  transition:transform .45s var(--fx-ease),box-shadow .45s var(--fx-ease),
             filter .45s var(--fx-ease),background-color .3s,color .3s;
}
.fx-btn:hover{
  transform:translate(var(--fx-mx,0px),calc(var(--fx-my,0px) - 3px));
  box-shadow:0 16px 34px -14px rgba(120,100,88,.6);
  filter:saturate(1.08) brightness(1.03);
}
.fx-btn:active{transform:translate(var(--fx-mx,0px),var(--fx-my,0px)) scale(.97);transition-duration:.12s}
.fx-btn:focus-visible{outline:2px solid var(--fx-taupe-3);outline-offset:3px}
/* faixa de luz que cruza o botão (só onde o ::after está livre) */
.fx-btn.fx-luz::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
  transform:translateX(-130%);transition:transform .9s var(--fx-ease);
}
.fx-btn.fx-luz:hover::after{transform:translateX(130%)}
/* onda do clique */
.fx-onda{
  position:absolute;border-radius:50%;pointer-events:none;z-index:-1;
  width:16px;height:16px;margin:-8px 0 0 -8px;background:rgba(255,255,255,.55);
  transform:scale(0);animation:fx-onda .7s ease-out forwards;
}
@keyframes fx-onda{to{transform:scale(28);opacity:0}}

/* ---------- links de texto: sublinhado que corre da esquerda ---------- */
.fx-link{
  text-decoration:none!important;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:100% 100%;background-size:0 1px;
  transition:background-size .5s var(--fx-ease),color .3s,opacity .3s;
  padding-bottom:1px;
}
.fx-link:hover,.fx-link:focus-visible{background-position:0 100%;background-size:100% 1px}

/* itens do menu suspenso: a seta do rodapé do item desliza */
.dd-menu a,.sub-link{transition:all .35s var(--fx-ease)}

/* ---------- cartões ---------- */
.fx-cartao{transition:transform .6s var(--fx-ease),box-shadow .6s var(--fx-ease)}
.fx-cartao:hover{transform:translateY(-6px);box-shadow:0 22px 44px -22px rgba(90,70,60,.45)}
.fx-zoom>img{transition:transform 1.4s var(--fx-ease),filter .6s}
.fx-cartao:hover .fx-zoom>img{transform:scale(1.07)}

/* imagens soltas do conteúdo: respiro leve ao passar o mouse */
.fx-foto{transition:transform 1.2s var(--fx-ease),box-shadow .8s var(--fx-ease)}
.fx-foto:hover{transform:scale(1.015);box-shadow:0 26px 50px -28px rgba(80,60,50,.5)}

/* ---------- movimento reduzido: sem deslocamento, com esmaecimento ---------- */
@media (prefers-reduced-motion:reduce){
  html.fx-on h1{animation-name:fx-some!important}
  html.fx-on :where(.treatment-hero,.page-hero,.hero-content) :where(p,.breadcrumb,a[class*="btn"]),
  html.fx-on .dif-grid>.dif-item,html.fx-on h1+p{animation-name:fx-some!important}
  .fx-r,.fx-r.fx-t,.fx-r.fx-up,.fx-r.fx-card,.fx-r.fx-img{transform:none!important;filter:none!important;clip-path:none!important}
  .fx-btn:hover,.fx-btn:active,.fx-cartao:hover,.fx-foto:hover{transform:none}
  .fx-cartao:hover .fx-zoom>img{transform:none}
}
@keyframes fx-some{from{opacity:0}}

@media print{.fx-progresso{display:none}.fx-r{opacity:1!important}}

/* ---------- fotos de pessoas: ampliação ancorada no TOPO ----------
   Ampliar a partir do centro come o alto da foto, e nas fotos da Dra. o
   cabelo encosta na borda de cima (23/09: "não pode cortar a cabeça da
   médica"). Com a origem no topo, o que cresce sai por baixo e pelos lados. */
.sobre-img img,.fx-foto,.fx-zoom>img{transform-origin:50% 0}

/* ---------- faixa do topo das categorias SEM foto (23/09) ----------
   Pedido: "remove esse banner, coloca só um degradê de fundo de forma que dê
   leitura nos textos". Degradê nos tons da marca, textura de linhas bem leve
   e texto ESCURO (#3F342D dá ~9:1 no claro e ~6:1 no taupe). */
.hero-banner.hero-grad{
  min-height:320px;overflow:hidden;
  background:
    radial-gradient(900px 320px at 12% 0%,rgba(255,255,255,.8),transparent 62%),
    radial-gradient(760px 340px at 92% 110%,rgba(168,154,143,.5),transparent 60%),
    linear-gradient(118deg,#F6F1EC 0%,#E9DED5 46%,#D3C4B9 100%);
}
.hero-banner.hero-grad::before{
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.22) 0 1px,transparent 1px 26px);
  opacity:.55;
}
.hero-banner.hero-grad::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:min(80%,900px);height:1px;
  background:linear-gradient(90deg,transparent,#A89A8F,transparent);
}
.hero-grad .hero-content{max-width:760px}
.hero-grad .hero-eyebrow{
  display:inline-flex;align-items:center;gap:14px;margin-bottom:14px;
  font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.32em;
  text-transform:uppercase;color:#8C7A6B;
}
.hero-grad .hero-eyebrow::before,.hero-grad .hero-eyebrow::after{content:"";width:34px;height:1px;background:#B7A89D}
.hero-banner.hero-grad .hero-title{color:#3F342D;text-shadow:none;margin:0}
.hero-grad .hero-sub{
  margin:16px auto 0;max-width:560px;
  font-family:'Inter',sans-serif;font-size:17px;font-weight:300;line-height:1.6;color:#5E524A;
}
@media (max-width:768px){
  .hero-banner.hero-grad{min-height:240px}
  .hero-grad .hero-sub{font-size:15px}
}

/* ---------- leitura (revisão de 23/09) ----------
   O taupe claro da marca (#C7B9AF) sobre o creme dá ~1,9:1 de contraste:
   títulos, "Saiba mais" e rótulos ficavam "sem leitura". O tnf-fx.js marca
   com .fx-legivel só o texto nesse tom que está sobre fundo CLARO (no
   rodapé escuro o taupe claro continua, lá ele lê bem). */
.fx-legivel{color:#74655A!important;text-shadow:none!important}
/* botões e faixas com texto BRANCO sobre taupe claro: fundo mais fundo */
.btn-agendar,.cform button,.footer-form button,.area-btn{
  background:linear-gradient(135deg,#8C7A6B,#A08F83)!important;color:#fff!important}
.footer-cta{background:linear-gradient(135deg,#8C7A6B 0%,#A08F83 50%,#8C7A6B 100%)!important}
/* título do topo da home: estava #C7B9AF sobre a foto clara */
.hero h1{color:#8C7A6B!important;text-shadow:0 1px 18px rgba(255,255,255,.6)!important}
/* botão flutuante "Agende a sua consulta": branco no verde claro dava 2:1 */
.whatsapp-float a{background:#12803F!important}
/* seção "Sobre" da home: branco sobre #C7B9AF dava ~1,9:1 */
.sobre{background:linear-gradient(135deg,#8C7A6B 0%,#A08F83 55%,#8C7A6B 100%)!important}
.sobre-text .sub{color:rgba(255,255,255,.82)!important}

/* ---------- menu em tela média (769 a 1199px) ----------
   Já quebrava antes (em 1024px "Dra. Tainá / Fracaroli" em duas linhas e as
   setas soltas embaixo) e com "Na Mídia" (24/09) ficaria pior: item sem
   quebra, respiro menor e logo um pouco menor. */
@media (min-width:769px) and (max-width:1199px){
  .header{gap:22px!important;padding-left:24px!important;padding-right:24px!important}
  .header-logo img{max-width:140px!important}
  .nav>a,.nav-dd>a{white-space:nowrap;padding-left:9px!important;padding-right:9px!important;font-size:14.5px!important}
  .nav>a::after{left:9px!important;right:9px!important}
}
@media (min-width:769px) and (max-width:900px){
  .nav>a,.nav-dd>a{padding-left:6px!important;padding-right:6px!important;font-size:13.5px!important}
  .header-logo img{max-width:118px!important}
}