/* Tez — direção "Luz" + "Conversa" (MeriForm)
   ---------------------------------------------------------------------------
   Clínica de medicina estética (fictícia), em Braga. A assinatura é a luz:
   o rato é uma luz quente de fim de tarde a passear pelo retrato do hero (sem
   rato, anda sozinha). Logo abaixo, a médica responde às perguntas da primeira
   vez — em Portugal a confiança numa clínica vem de quem faz o tratamento.
   A utilidade é o planeador: tratamento + data de um evento → até quando marcar.
   A mesma folha serve o PT (/) e o EN (/en/). */

:root{
  --marfim:#f5efe6;
  --areia:#ece2d4;
  --creme:#fffaf3;
  --tinta:#2a1c14;
  --suave:#6f5e51;
  --linha:rgba(42,28,20,.14);
  --ambar:#b8742f;      /* destaque em títulos grandes e pontos */
  --ambar-txt:#93561d;  /* o mesmo âmbar, escuro o bastante para texto pequeno */
  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --margem:clamp(16px,4vw,56px);
  --barra:32px;
  --nav:72px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav) + 8px)}
body{background:var(--marfim);color:var(--tinta);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ambar);outline-offset:3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.rotulo{font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ambar-txt);margin-bottom:18px}
.titulo{font:400 clamp(44px,5.4vw,84px)/.95 var(--serif);letter-spacing:-.02em}
.titulo em{color:var(--ambar)}
.seccao{padding:clamp(80px,11vw,150px) var(--margem)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 26px;border-radius:999px;font:500 15px/1 var(--sans);white-space:nowrap;transition:transform .2s,background-color .3s,color .3s}
.btn:hover{transform:translateY(-2px)}
.btn-tinta{background:var(--tinta);color:var(--marfim)}
.btn-linha{border:1px solid var(--tinta)}
.btn-pequeno{padding:11px 18px;font-size:14px}

/* ── Topo ──────────────────────────────────────────────────────────────── */
.topo{position:fixed;inset:0 0 auto;z-index:50;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.topo.rolado{transform:translateY(calc(-1 * var(--barra)))}
.demo-bar{height:var(--barra);display:flex;align-items:center;justify-content:center;gap:6px;padding:0 16px;background:var(--tinta);color:rgba(245,239,230,.7);font-size:12.5px;white-space:nowrap;overflow:hidden}
.demo-bar strong{color:var(--marfim)}
@media (max-width:560px){.demo-bar{font-size:11px}.demo-bar .longo{display:none}}
.nav{height:var(--nav);display:flex;align-items:center;gap:32px;padding:0 var(--margem);background:var(--marfim);border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.topo.rolado .nav{background:rgba(245,239,230,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--linha)}
.marca{font:400 32px/1 var(--serif);letter-spacing:-.01em;display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.marca small{font:500 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--suave)}
.menu{display:flex;gap:28px;font-size:14px;margin-left:auto}
.menu a{opacity:.8;transition:opacity .2s}.menu a:hover{opacity:1}
.acoes{display:flex;align-items:center;gap:14px}
.lingua{display:flex;gap:2px;font:500 12px var(--sans)}
.lingua a{padding:6px 7px;border-radius:5px;color:var(--suave)}
.lingua a[aria-current]{color:var(--tinta);background:rgba(42,28,20,.08)}
@media (max-width:960px){.menu{display:none}.acoes{margin-left:auto}.marca small{display:none}}
@media (max-width:440px){.acoes .btn{display:none}}

/* ── Hero: a luz ───────────────────────────────────────────────────────── */
.hero{display:grid;grid-template-columns:44fr 56fr;min-height:100vh;min-height:100svh;padding-top:calc(var(--barra) + var(--nav))}
.hero-txt{padding:clamp(40px,6vh,80px) var(--margem);display:flex;flex-direction:column;justify-content:center;gap:26px}
.hero h1{font:400 clamp(58px,7.4vw,124px)/.92 var(--serif);letter-spacing:-.025em}
.hero h1 em{color:var(--ambar)}
.hero .intro{max-width:28em;font-size:17px;color:var(--suave)}
.hero .intro b{color:var(--tinta);font-weight:500}
.hero-acoes{display:flex;flex-wrap:wrap;gap:12px}
.hero-medica{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--suave);margin-top:6px}
.hero-medica img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.hero-medica b{display:block;color:var(--tinta);font-weight:500}
.hero-foto{position:relative;overflow:hidden;background:#3a2a20;touch-action:pan-y}
.hero-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.luz,.sombra{position:absolute;inset:0;pointer-events:none}
.luz{background:radial-gradient(circle at var(--x,50%) var(--y,40%),rgba(255,212,150,.85) 0,rgba(255,180,110,.35) 16%,transparent 40%);mix-blend-mode:soft-light}
.sombra{background:radial-gradient(circle at var(--x,50%) var(--y,40%),transparent 14%,rgba(42,22,8,.5) 72%);mix-blend-mode:multiply}
.hero-foto .dica{position:absolute;left:22px;bottom:20px;color:#fff;font:500 11.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:.85;display:flex;align-items:center;gap:10px}
.hero-foto .dica::before{content:"";width:9px;height:9px;border-radius:50%;background:#ffd9a0;box-shadow:0 0 14px 4px rgba(255,200,130,.7)}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-foto{height:58vh;height:58svh;order:-1}
  .hero-txt{padding:36px var(--margem) 64px}
  .hero .intro{font-size:16px}
}

/* ── Conversa ──────────────────────────────────────────────────────────── */
.conversa{background:var(--areia);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:start}
.medica{position:sticky;top:calc(var(--nav) + 24px)}
.medica figure{border-radius:22px;overflow:hidden;aspect-ratio:4/5;background:#d9cbb9}
.medica img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.medica figcaption{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-top:16px;font-size:14px;color:var(--suave)}
.medica figcaption b{display:block;font:400 24px/1.1 var(--serif);color:var(--tinta)}
.selo{display:inline-flex;align-items:center;gap:8px;font-size:13px;white-space:nowrap;color:var(--tinta)}
.selo::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ambar);box-shadow:0 0 0 4px rgba(184,116,47,.2)}
.conversa-txt>p{margin-top:18px;max-width:30em;color:var(--suave);font-size:17px}
.chat{margin-top:40px;display:flex;flex-direction:column;gap:12px;min-height:240px}
.b{max-width:86%;padding:14px 18px;border-radius:20px;animation:entra .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes entra{from{opacity:0;transform:translateY(10px) scale(.98)}}
.b.eu{align-self:flex-end;background:var(--tinta);color:var(--marfim);border-bottom-right-radius:6px}
.b.ela{align-self:flex-start;background:var(--creme);border-bottom-left-radius:6px;font:400 21px/1.35 var(--serif);box-shadow:0 1px 0 rgba(42,28,20,.08)}
.b.ela small{display:block;font:500 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ambar-txt);margin-bottom:9px}
.b.ela em{display:block;margin-top:10px;font-style:normal;font-family:var(--sans);font-size:13px;color:var(--suave)}
/* sem JavaScript, as perguntas ficam como lista */
.faq dt{font-weight:600;margin-top:22px}
.faq dd{font:400 21px/1.35 var(--serif);margin-top:6px}
.escreve{align-self:flex-start;background:var(--creme);border-radius:20px;border-bottom-left-radius:6px;padding:17px 18px;display:flex;gap:5px}
.escreve i{width:7px;height:7px;border-radius:50%;background:var(--tinta);opacity:.3;animation:ponto 1s infinite}
.escreve i:nth-child(2){animation-delay:.15s}.escreve i:nth-child(3){animation-delay:.3s}
@keyframes ponto{50%{opacity:.85;transform:translateY(-3px)}}
.perguntas{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;min-height:46px}
.perguntas button{padding:11px 16px;border-radius:999px;border:1px solid rgba(42,28,20,.3);font-size:14px;text-align:left;transition:background .2s,color .2s}
.perguntas button:hover{background:var(--tinta);color:var(--marfim)}
.perguntas button.marcar{background:var(--ambar);border-color:var(--ambar);color:#fff}
.horas{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;font-family:var(--sans)}
.horas a{padding:10px 14px;border-radius:12px;background:var(--areia);font-size:14px;font-weight:500;transition:background .2s,color .2s}
.horas a:hover{background:var(--tinta);color:var(--marfim)}
.conversa .nota{margin-top:28px;font-size:13px;color:var(--suave);max-width:36em}
@media (max-width:860px){
  .conversa{grid-template-columns:1fr}
  .medica{position:static}
  .medica figure{aspect-ratio:5/4}
  .b{max-width:94%}
  .b.ela{font-size:19px}
}

/* ── Planear para uma data ─────────────────────────────────────────────── */
.planear{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(32px,6vw,96px);align-items:start}
.planear-cab>p{margin-top:20px;max-width:26em;color:var(--suave)}
.form{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}
.form label{display:flex;flex-direction:column;gap:8px;font:500 11.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--suave)}
.form select,.form input{font-size:17px;letter-spacing:0;text-transform:none;color:var(--tinta);padding:15px 16px;border:1px solid rgba(42,28,20,.25);border-radius:12px;background:var(--creme);width:100%;min-width:0}
.resultado{margin-top:24px;background:var(--creme);border-radius:22px;padding:32px 32px 30px;box-shadow:0 1px 0 rgba(42,28,20,.08)}
.ate{font:400 clamp(32px,3.4vw,48px)/1.05 var(--serif)}
.ate strong{font-weight:400;color:var(--ambar);font-style:italic}
.porque{margin-top:12px;color:var(--suave);max-width:36em}
.linha{position:relative;height:96px;margin:30px 0 8px}
.linha::before{content:"";position:absolute;left:0;right:0;top:40px;height:2px;background:rgba(42,28,20,.15)}
.folga{position:absolute;left:0;top:39px;height:4px;border-radius:4px;background:var(--ambar);transition:width .5s}
.recup{position:absolute;top:39px;height:4px;background:repeating-linear-gradient(90deg,#c9a27a 0 6px,transparent 6px 10px);transition:left .5s,width .5s}
.mk{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;white-space:nowrap;transition:left .5s,opacity .3s}
.mk i{width:12px;height:12px;border-radius:50%;background:var(--tinta);margin-top:34px;order:2}
.mk span{order:1;color:var(--suave)}
.mk b{order:3;font-weight:500}
.mk.ev i{background:var(--ambar);box-shadow:0 0 0 5px rgba(184,116,47,.2)}
.mk.baixo span{order:3}.mk.baixo b{order:4}
.legenda{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12.5px;color:var(--suave);margin-bottom:22px}
.legenda span{display:inline-flex;align-items:center;gap:8px}
.legenda i{width:22px;height:4px;border-radius:4px;background:var(--ambar)}
.legenda i.r{background:repeating-linear-gradient(90deg,#c9a27a 0 6px,transparent 6px 10px)}
@media (max-width:860px){
  .planear{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .resultado{padding:24px 18px 22px}
  .mk{font-size:11px}
}

/* ── Tratamentos e preços ──────────────────────────────────────────────── */
.tratamentos{background:var(--creme)}
.trat-cab{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:48px}
.trat-cab p{color:var(--suave);max-width:30em}
.lista{border-top:1px solid var(--tinta)}
.lista li{list-style:none;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.6fr) 150px 120px;gap:24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--linha)}
.lista h3{font:400 clamp(26px,2.4vw,34px)/1.05 var(--serif)}
.lista p{color:var(--suave);font-size:15px}
.lista .rec{font-size:13.5px;color:var(--suave)}
.lista .rec b{display:block;font-weight:500;color:var(--tinta);font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px;opacity:.6}
.lista .preco{font:400 26px/1 var(--serif);text-align:right;white-space:nowrap}
.lista .preco small{display:block;font:400 12px/1.3 var(--sans);color:var(--suave);margin-top:6px}
.trat-nota{margin-top:24px;font-size:14px;color:var(--suave);max-width:46em}
@media (max-width:860px){
  .trat-cab{grid-template-columns:1fr}
  .lista li{grid-template-columns:1fr auto;gap:6px 16px}
  .lista p,.lista .rec{grid-column:1}
  .lista .preco{grid-column:2;grid-row:1}
}

/* ── A médica ──────────────────────────────────────────────────────────── */
.sobre{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.sobre figure{border-radius:22px;overflow:hidden;aspect-ratio:5/4}
.sobre img{width:100%;height:100%;object-fit:cover}
.sobre blockquote{font:400 clamp(32px,3.4vw,50px)/1.08 var(--serif);letter-spacing:-.01em;margin:6px 0 22px}
.sobre blockquote em{color:var(--ambar)}
.sobre cite{font-style:normal;color:var(--suave);font-size:14px}
.principios{margin-top:36px;display:grid;gap:16px}
.principios li{list-style:none;display:grid;grid-template-columns:28px 1fr;gap:12px;padding-top:16px;border-top:1px solid var(--linha)}
.principios li span{font:400 22px/1 var(--serif);color:var(--ambar)}
.principios b{display:block;font-weight:500}
.principios p{color:var(--suave);font-size:15px}
@media (max-width:860px){.sobre{grid-template-columns:1fr}}

/* ── Visitar ───────────────────────────────────────────────────────────── */
.visitar{background:var(--areia)}
.visitar-grelha{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px);margin-top:48px}
.visitar h3{font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--suave);margin-bottom:16px}
.visitar address{font-style:normal;font:400 24px/1.25 var(--serif)}
.ligacao{display:inline-block;margin-top:14px;font-weight:500;border-bottom:1px solid currentColor;color:var(--ambar-txt)}
.horario{list-style:none}
.horario li{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--linha);font-size:15px}
.horario li.hoje{font-weight:600}
.estado{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:14px;font-weight:500}
.estado i{width:9px;height:9px;border-radius:50%;background:#a49383}
.estado.aberto i{background:#4f8a5b;box-shadow:0 0 0 4px rgba(79,138,91,.2)}
.contactos{display:flex;flex-direction:column;gap:6px;font:400 24px/1.3 var(--serif)}
@media (max-width:860px){.visitar-grelha{grid-template-columns:1fr}}

/* ── Rodapé ────────────────────────────────────────────────────────────── */
.rodape{background:var(--tinta);color:var(--marfim);padding:clamp(72px,9vw,120px) var(--margem) 36px}
.rodape h2{font:400 clamp(44px,5.4vw,84px)/.95 var(--serif);letter-spacing:-.02em}
.rodape h2 em{color:#e0a868}
.rodape-linha{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-top:44px;padding-bottom:36px;border-bottom:1px solid rgba(245,239,230,.15)}
.rodape-dados{display:flex;flex-wrap:wrap;gap:12px 40px;font-size:14px;color:rgba(245,239,230,.75)}
.rodape-dados b{display:block;color:var(--marfim);font-weight:500}
.rodape .btn{background:var(--marfim);color:var(--tinta)}
.rodape-pe{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:24px;font-size:13px;color:rgba(245,239,230,.6)}
.rodape-pe a{text-decoration:underline}