/* Le Clinique Odontologia, prévia. Arquétipo "luz de fachada" (LEITURA.md):
   parede de estuque branco ao sol de fim de tarde, letras-caixa de latão, sombra de ramos de oliveira. Nível declarado: N4 desde a crítica 2 (14/10): sem cena presa, sem grão e sem folhagem animada. */
:root {
  --fundo: #F5F1EA;      /* estuque */
  --linho: #E9E2D6;
  --tinta: #2A2420;      /* tinta quente */
  --suave: #5E554D;
  --cinza: #8D8B88;      /* fundo do retrato da equipe */
  --marca: #8A6C44;      /* latão escuro, ação */
  --marca-2: #CBAC80;    /* latão do logo */
  --luz: #F2D6A2;        /* luz da recepção */
  --linha: rgb(42 36 32 / .14);
  --cartao: #FBF8F3;
  --raio: 2px;
  --fonte-titulo: "Noto Serif Display", Georgia, serif;
  --fonte-rotulo: "Josefin Sans", "Futura", sans-serif;
  --fonte-texto: "Outfit", system-ui, sans-serif;
  --sol: .5;             /* 0 = meio-dia, 1 = fim de tarde; atualizado pela rolagem em js/site.js */
  --estuque: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='4' seed='7'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='1.4' diffuseConstant='1.1'%3E%3CfeDistantLight azimuth='215' elevation='58'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
}
body { font-weight: 300; letter-spacing: .005em; }
::selection { background: var(--luz); color: var(--tinta); }
b, strong { font-weight: 500; }

/* ---------- Parede de estuque (motivo 4) ---------- */
.parede { position: relative; isolation: isolate; background-color: var(--fundo); }
.parede::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(100deg, rgb(255 252 246 / .75) 0%, rgb(255 252 246 / 0) 38%, rgb(120 92 60 / .07) 100%), var(--estuque);
  background-size: 100% 100%, 260px 260px; mix-blend-mode: multiply; opacity: .55; }
.parede--linho { background-color: var(--linho); }

/* ---------- Sombra de ramos de oliveira (motivo 1) ---------- */
.ramos { position: absolute; inset: -10% -5%; z-index: -1; pointer-events: none; overflow: hidden; mix-blend-mode: multiply;
  translate: calc(var(--sol) * -46px) calc(var(--sol) * 10px); }
.ramos svg { position: absolute; width: min(1100px, 120%); height: auto; color: rgb(74 56 38 / .17); filter: blur(5px); transform-origin: 0 0; will-change: transform;
  animation: balanco 11s ease-in-out infinite alternate; }
.ramos--d svg { right: -8%; top: -6%; transform: scaleX(-1); animation-name: balanco-d; }
.ramos--e svg { left: -10%; top: 4%; }
.ramos--b svg { left: 30%; bottom: -14%; top: auto; transform: rotate(160deg); animation-name: balanco-b; opacity: .8; }
@keyframes balanco { from { transform: rotate(0deg) translate(0, 0); } to { transform: rotate(1.6deg) translate(-1.2%, 1%); } }
@keyframes balanco-d { from { transform: scaleX(-1) rotate(0deg); } to { transform: scaleX(-1) rotate(-1.8deg) translate(1%, 1.2%); } }
@keyframes balanco-b { from { transform: rotate(160deg); } to { transform: rotate(158.5deg) translate(1%, 0); } }

/* ---------- Letras-caixa de latão (motivo 2) ---------- */
.latao { font-family: var(--fonte-titulo); font-weight: 400; letter-spacing: -.015em; line-height: 1.04;
  background: linear-gradient(172deg, #5a4229 0%, #876840 28%, #b08c58 44%, #775b37 58%, #5a442c 78%, #83653c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(calc((var(--sol) - .5) * -18px) calc(6px + var(--sol) * 3px) 4px rgb(78 56 34 / .26)); }
.latao em { font-style: italic; font-weight: 300; }

/* ---------- Comuns ---------- */
.rotulo { display: inline-block; font: 600 12px/1 var(--fonte-rotulo); letter-spacing: .32em; text-transform: uppercase; color: var(--marca); padding-top: 2px; }
.texto-grande { font-size: clamp(18px, 1.35vw, 21px); line-height: 1.6; color: var(--suave); }
.botao { --b-fundo: var(--marca); border-radius: var(--raio); font: 500 15px/1 var(--fonte-texto); letter-spacing: .04em; padding: 1.05em 1.6em; }
.botao--vazado { --b-fundo: transparent; --b-tinta: var(--tinta); border-color: color-mix(in srgb, var(--tinta) 30%, transparent); }
.link-seta { display: inline-flex; gap: .5em; align-items: center; color: var(--marca); font-weight: 500; border-bottom: 1px solid color-mix(in srgb, var(--marca) 40%, transparent); padding-bottom: 2px; }
.link-seta svg { width: 1.1em; height: 1.1em; }
.miudo { font-size: 13px; color: var(--suave); }

/* ---------- Cabeçalho ---------- */
.topo { position: sticky; top: 0; z-index: 50; background: rgb(245 241 234 / .86); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; }
.topo.rolou { border-bottom-color: var(--linha); }
.topo__linha { display: flex; align-items: center; gap: 28px; min-height: 74px; }
.topo__logo { display: inline-flex; align-items: center; min-height: 48px; }
.topo__logo img { height: 42px; width: auto; }
.topo__nav { display: flex; gap: 30px; margin-left: auto; font: 600 12px/1 var(--fonte-rotulo); letter-spacing: .22em; text-transform: uppercase; }
.topo__nav a { padding: 10px 0; color: var(--suave); }
.topo__nav a:hover { color: var(--marca); }
.topo__cta { padding: .85em 1.25em; }
.topo__menu { display: none; }

/* ---------- Hero: a fachada ---------- */
.hero { position: relative; min-height: min(calc(100svh - 74px), 940px); overflow: hidden; background: var(--fundo); }
.hero__foto { position: absolute; inset: 0; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; }
.hero__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, rgb(245 241 234 / .55), rgb(245 241 234 / 0) 46%); pointer-events: none; }
.hero__cartao { position: absolute; right: clamp(16px, 4vw, 56px); bottom: clamp(20px, 5vh, 56px); width: min(520px, 42vw); padding: clamp(26px, 3vw, 40px);
  box-shadow: 0 30px 60px -36px rgb(60 42 24 / .45); overflow: hidden; }
.hero__cartao h1 { font-size: clamp(34px, 3.4vw, 54px); font-weight: 400; color: var(--tinta); margin: 16px 0 16px; }
.hero__cartao h1 em { font-style: italic; font-weight: 300; color: var(--marca); }
.hero__cartao p { color: var(--suave); }
.hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero__nota { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 14px; color: var(--suave); border-bottom: 1px solid var(--linha); padding-bottom: 3px; }
.hero__nota span { color: var(--marca); letter-spacing: .12em; }

/* ---------- Cena da luz (motivo 3) ---------- */
.cena { position: relative; background: var(--linho); }
.cena__palco { display: none; }
.cena__lista { list-style: none; margin: 0 auto; padding: clamp(56px, 8vw, 110px) 0; display: grid; gap: clamp(48px, 7vw, 90px); }
.cena__item { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.cena__item:nth-child(2) { grid-template-columns: 1fr 1.2fr; }
.cena__item:nth-child(2) .quadro { order: 2; }
.quadro { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; background: var(--tinta); }
.quadro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quadro::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.quadro--1::after { background: linear-gradient(180deg, rgb(255 255 250 / .18), transparent 60%); }
.quadro--2 img { filter: saturate(1.08) sepia(.12); }
.quadro--2::after { background: linear-gradient(115deg, rgb(255 214 150 / .28), transparent 55%); mix-blend-mode: soft-light; }
.quadro--3 img { filter: brightness(.78) saturate(1.1) sepia(.18); }
.quadro--3::after { background: radial-gradient(ellipse 48% 56% at 52% 58%, rgb(255 210 140 / .55), transparent 70%); mix-blend-mode: screen; }
.frase h2 { font-size: clamp(34px, 3.6vw, 58px); margin: 14px 0 18px; }
.frase p { color: var(--suave); max-width: 34ch; }
.frase .botao { margin-top: 24px; }

/* cena presa: só a partir de 900 px, com N5 e animação (js/site.js põe .cena--presa) */
.cena--presa { height: 100svh; min-height: 560px; overflow: hidden; }
.cena--presa .cena__palco { display: block; position: absolute; inset: 0; overflow: hidden; background: var(--tinta); }
.cena--presa .cena__lista { position: absolute; inset: 0; padding: 0; display: block; width: auto; }
.cena--presa .cena__item { position: absolute; top: 50%; right: clamp(24px, 5vw, 80px); width: min(440px, 34vw); translate: 0 -50%; display: block; opacity: 0; visibility: hidden; }
.cena--presa .cena__item:first-child { opacity: 1; visibility: visible; }
.cena--presa .quadro { display: none; }
.palco__quadro { position: absolute; left: 50%; top: 50%; width: max(100%, calc(100svh * 1.494)); aspect-ratio: 1533 / 1026; translate: -50% -50%; }
.palco__quadro > * { position: absolute; inset: 0; }
.palco__quadro img { width: 100%; height: 100%; }
.palco__quente { background: linear-gradient(120deg, rgb(255 196 120 / .55), rgb(255 170 90 / .15) 60%, rgb(120 70 30 / .25)); mix-blend-mode: soft-light; opacity: 0; }
.palco__tarde { background: rgb(40 24 12); opacity: 0; mix-blend-mode: multiply; }
.palco__porta { background: radial-gradient(ellipse 13% 25% at 38.7% 75%, rgb(255 214 150 / .95), rgb(255 190 110 / .35) 55%, transparent 100%); mix-blend-mode: screen; opacity: 0; }
.palco__ramos { overflow: hidden; mix-blend-mode: multiply; }
.palco__ramos svg { position: absolute; left: -6%; top: -18%; width: 70%; height: auto; color: rgb(60 40 22 / .28); filter: blur(6px); }
.palco__veu { position: absolute; inset: 0; background: linear-gradient(to left, rgb(245 241 234 / .94) 0, rgb(245 241 234 / .86) 30%, rgb(245 241 234 / 0) 50%); }
.palco__passos { position: absolute; left: clamp(24px, 4vw, 56px); bottom: clamp(20px, 4vh, 40px); display: flex; gap: 10px; }
.palco__passos i { width: 36px; height: 2px; background: rgb(255 255 255 / .5); }
.palco__passos i.ativo { background: var(--marca-2); }

/* ---------- Equipe ---------- */
.equipe { overflow: hidden; padding: clamp(64px, 9vw, 130px) 0; }
.equipe__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.equipe__foto { margin: 0; }
.equipe__quadro { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--cinza); }
.equipe__quadro img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; object-position: 50% 26%; }
.equipe__foto figcaption { margin-top: 14px; font-size: 13px; color: var(--suave); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.equipe__foto figcaption b { font: 600 12px/1 var(--fonte-rotulo); letter-spacing: .26em; text-transform: uppercase; color: var(--marca); white-space: nowrap; }
.equipe__texto h2 { font-size: clamp(40px, 4.6vw, 76px); margin: 18px 0 26px; }
.equipe__texto .botao { margin-top: 32px; }

/* ---------- Tratamentos ---------- */
.tratamentos { overflow: hidden; padding: clamp(64px, 8vw, 120px) 0; text-align: center; }
.tratamentos h2 { font-size: clamp(44px, 6vw, 96px); margin: 16px 0 0; }
.tratamentos__trilho { width: min(560px, 80%); height: 2px; margin: 22px auto 28px; background: linear-gradient(90deg, transparent, var(--marca-2), transparent); }
.tratamentos p { max-width: 52ch; margin-inline: auto; }
.tratamentos .botao { margin-top: 30px; }

/* ---------- Como chegar ---------- */
.chegar { padding: clamp(64px, 8vw, 120px) 0; overflow: hidden; }
.chegar__grade { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
.chegar__capa { position: relative; display: block; overflow: hidden; aspect-ratio: 7 / 8; background: var(--tinta); }
.chegar__capa img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.chegar__capa:hover img { transform: scale(1.03); }
.chegar__capa span { position: absolute; left: 16px; bottom: 16px; display: inline-flex; gap: 8px; align-items: center; min-height: 44px; padding: 10px 16px; background: var(--cartao); color: var(--tinta); font: 600 12px/1 var(--fonte-rotulo); letter-spacing: .2em; text-transform: uppercase; }
.chegar__capa span svg { width: 16px; height: 16px; }
.chegar h2 { font-size: clamp(46px, 5.6vw, 92px); margin: 16px 0 10px; }
.chegar__linhas { list-style: none; padding: 0; margin: 26px 0 0; border-top: 1px solid var(--linha); }
.chegar__linhas li { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--linha); align-items: baseline; }
.chegar__linhas li > span:first-child { font: 600 12px/1.4 var(--fonte-rotulo); letter-spacing: .24em; text-transform: uppercase; color: var(--marca); }
.chegar__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ---------- Fecho ---------- */
.fecho { position: relative; overflow: hidden; background: var(--tinta); color: #F3ECE1; padding: clamp(80px, 11vw, 160px) 0; text-align: center; isolation: isolate; }
.fecho::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 40% 60% at 50% 100%, rgb(242 214 162 / .32), transparent 70%); }
.fecho img { width: min(300px, 64vw); height: auto; margin: 0 auto 30px; }
.fecho h2 { font-size: clamp(34px, 4.4vw, 68px); font-weight: 300; max-width: 18ch; margin: 0 auto; color: #F6EEE2; }
.fecho h2 em { font-style: italic; color: var(--marca-2); }
.fecho p { margin: 20px auto 0; max-width: 46ch; color: rgb(243 236 225 / .78); }
.fecho .botao { --b-fundo: var(--marca-2); --b-tinta: #1f1a16; margin-top: 34px; }

/* ---------- Rodapé ---------- */
.rodape { padding: 56px 0 40px; font-size: 14px; color: var(--suave); }
.rodape__in { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: start; }
.rodape__in img { height: 46px; width: auto; }
.rodape p + p { margin-top: 6px; }
.rodape a { text-decoration: underline; text-underline-offset: 3px; }
.rodape__miudo { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid var(--linha); font-size: 12.5px; }

.wa-flutuante { background: var(--marca); }

/* ---------- Celular e tablet ---------- */
@media (max-width: 1080px) {
  .topo__nav { display: none; }
  .topo__cta { margin-left: auto; }
}
@media (max-width: 899px) {
  .cena__item, .cena__item:nth-child(2) { grid-template-columns: 1fr; }
  .cena__item:nth-child(2) .quadro { order: 0; }
  .equipe__grade, .chegar__grade { grid-template-columns: 1fr; }
  .rodape__in { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hero { min-height: 0; display: flex; flex-direction: column; }
  .hero__foto { position: relative; inset: auto; aspect-ratio: 4 / 3.4; }
  .hero__foto img { object-position: 46% 30%; }
  .hero__foto::after { background: linear-gradient(to top, rgb(245 241 234 / .5), transparent 40%); }
  .hero__cartao { position: relative; right: auto; bottom: auto; width: auto; margin: -36px 14px 0; box-shadow: 0 20px 40px -30px rgb(60 42 24 / .5); }
  .hero__acoes .botao { flex: 1 1 100%; }
  .chegar__capa { aspect-ratio: 4 / 3; }
  .chegar__linhas li { grid-template-columns: 1fr; gap: 6px; }
  .chegar__acoes .botao, .equipe__texto .botao, .tratamentos .botao, .frase .botao { width: 100%; }
}
@media (max-width: 640px) {
  .topo__linha { min-height: 64px; gap: 12px; }
  .topo__logo img { height: 34px; }
  .topo__cta { padding: .8em 1em; min-height: 44px; }
  .ramos svg, .palco__ramos svg { animation: none; }
  .rotulo { letter-spacing: .24em; }
}
@media (prefers-reduced-motion: reduce) { .ramos svg { animation: none; } }

/* ---------- Crítica 2 (14/10): N4. Três frases sem imagem (a fachada não se repete), sombra dos ramos parada ---------- */
.ramos svg, .palco__ramos svg { animation: none !important; }
.cena--estatica .cena__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); padding-block: clamp(56px, 7vw, 100px); }
.cena--estatica .cena__item { display: block; padding-top: 24px; border-top: 1px solid var(--linha); }
.cena--estatica .frase h2 { font-size: clamp(30px, 2.7vw, 44px); }
.cena--estatica .frase p { max-width: 30ch; }
@media (max-width: 899px) { .cena--estatica .cena__lista { grid-template-columns: 1fr; gap: 40px; } }