/* Olea Estética · mínimo premium, areia + oliva + grafite quente */
:root{
  --areia:#EEE8DE; --areia-2:#E4DCCE; --claro:#F6F2EA; --oliva:#5C6340; --grafite:#3A3532; --suave:#5F5A53;
  --serif:"Instrument Serif",Georgia,serif; --sans:"Hanken Grotesk",system-ui,sans-serif;
  --w:1280px;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--areia);color:var(--grafite);font:400 1.0625rem/1.75 var(--sans);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:1.5px solid var(--oliva);outline-offset:5px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 clamp(16px,5vw,64px)}
.pular{position:absolute;left:-999px;top:8px;background:var(--grafite);color:var(--claro);padding:10px 14px;z-index:10}
.pular:focus{left:8px}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1;letter-spacing:-.01em}
h2{font-size:clamp(2.6rem,5.4vw,4.6rem)}
.num{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--oliva);display:block;margin-bottom:24px}
section{padding:clamp(88px,13vw,180px) 0}
.suave{color:var(--suave)}

.topo .wrap{display:flex;justify-content:space-between;align-items:center;min-height:96px;gap:16px;flex-wrap:wrap}
.marca{min-height:44px;display:inline-flex;align-items:center;font-family:var(--serif);font-size:1.9rem;text-decoration:none;line-height:1}
.menu{display:flex;gap:clamp(4px,2vw,24px);list-style:none;padding:0;font-size:.9rem;letter-spacing:.04em;flex-wrap:wrap}
.menu a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;text-decoration:none}
.menu a[aria-current]{border-bottom:1px solid var(--oliva)}
.menu a:hover{color:var(--oliva)}

.btn{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0 30px;background:var(--oliva);color:var(--claro);text-decoration:none;font-size:.95rem;letter-spacing:.04em;border:1px solid var(--oliva);transition:background .3s ease,color .3s ease}
.btn:hover{background:transparent;color:var(--oliva)}
.btn.fio{background:transparent;color:var(--grafite);border-color:var(--grafite)}
.btn.fio:hover{background:var(--grafite);color:var(--claro)}
.link-seta{display:inline-flex;align-items:center;min-height:44px;gap:10px;text-decoration:none;border-bottom:1px solid currentColor;color:var(--oliva)}

/* hero */
.hero{padding:clamp(40px,7vw,96px) 0 clamp(88px,12vw,160px)}
.hero .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.hero .txt{grid-column:1/8}
.hero h1{font-size:clamp(3.6rem,9.4vw,9rem);line-height:.92;letter-spacing:-.02em}
.hero h1 i{color:var(--oliva)}
.hero .txt p{max-width:36ch;margin:40px 0 36px;font-size:1.15rem}
.hero .acoes{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero figure{grid-column:9/13}
.hero figure img{width:100%;aspect-ratio:2/3;object-fit:cover}
.hero figcaption{font-size:.82rem;margin-top:14px;color:var(--suave)}
@media (prefers-reduced-motion:no-preference){
  .hero figure img{animation:abre 1.4s cubic-bezier(.65,0,.35,1) .15s both}
  @keyframes abre{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
}

/* princípios */
.principios{border-top:1px solid rgba(58,53,50,.2)}
.principios .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.principios .cab{grid-column:1/6}
.principios ol{grid-column:7/13;list-style:none;padding:0}
.principios li{padding:32px 0;border-top:1px solid rgba(58,53,50,.2)}
.principios li:first-child{border-top:0;padding-top:0}
.principios h3{font-size:2rem;margin-bottom:10px}

/* tratamentos em destaque */
.destaque{background:var(--claro)}
.destaque .cab{display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:24px;margin-bottom:72px}
.trat{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center}
.trat+.trat{margin-top:96px}
.trat img{grid-column:1/6;width:100%;aspect-ratio:4/5;object-fit:cover}
.trat .info{grid-column:7/12}
.trat:nth-child(even) img{grid-column:8/13;grid-row:1}
.trat:nth-child(even) .info{grid-column:2/7;grid-row:1}
.trat h3{font-size:clamp(2.2rem,3.6vw,3.2rem);margin-bottom:16px}
.fatos{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:8px 40px;margin-top:28px;padding-top:20px;border-top:1px solid rgba(58,53,50,.2)}
.fatos dt{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--suave)}
.fatos dd{font-family:var(--serif);font-size:1.6rem}

/* depoimentos */
.vozes .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.vozes .num{grid-column:1/13}
.vozes .wrap>figure{grid-column:1/8}

.vozes .wrap>figure blockquote{font-size:clamp(2rem,3.4vw,3rem)}
.vozes blockquote{font-family:var(--serif);font-size:1.6rem;line-height:1.2}
.vozes cite{display:block;font-style:normal;margin-top:18px;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--suave)}
.vozes .resto{grid-column:1/13;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,96px);margin-top:72px}

/* visita */
.visita{background:var(--grafite);color:var(--claro)}
.visita .num{color:#C9CDB0}
.visita .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.visita .a{grid-column:1/7}
.visita .b{grid-column:8/13}
.visita address{font-style:normal;font-size:1.25rem;margin:24px 0 32px}
.visita table{width:100%;border-collapse:collapse}
.visita td{padding:14px 0;border-bottom:1px solid rgba(246,242,234,.18)}
.visita td+td{text-align:right}
.visita .btn{background:var(--claro);color:var(--grafite);border-color:var(--claro)}
.visita .btn:hover{background:transparent;color:var(--claro)}
.visita .btn.fio{background:transparent;color:var(--claro);border-color:var(--claro)}
.visita .btn.fio:hover{background:var(--claro);color:var(--grafite)}

.fim{text-align:center}
.fim h2{max-width:16ch;margin:0 auto 24px}
.fim p{max-width:44ch;margin:0 auto 40px}

footer{padding:48px 0 64px;font-size:.85rem;line-height:1.9;color:var(--suave);border-top:1px solid rgba(58,53,50,.2)}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer a{display:inline-block;padding:4px 0}

/* página tratamentos */
.cab-pg{padding:clamp(48px,8vw,120px) 0 clamp(48px,6vw,80px)}
.cab-pg .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.cab-pg h1{grid-column:1/8;font-size:clamp(3.2rem,8vw,7.4rem);line-height:.94}
.cab-pg p{grid-column:9/13}
.ficha{border-top:1px solid rgba(58,53,50,.25);padding:clamp(48px,6vw,80px) 0}
.ficha .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.ficha .idx{grid-column:1/3;font-family:var(--serif);font-size:1.6rem;color:var(--oliva)}
.ficha .corpo{grid-column:3/9}
.ficha h2{font-size:clamp(2.2rem,4vw,3.4rem);margin-bottom:18px}
.ficha .corpo p+p{margin-top:12px}
.ficha .corpo .nao{margin-top:20px;font-size:.95rem;color:var(--suave);padding-left:16px;border-left:1px solid var(--oliva)}
.ficha dl{grid-column:10/13;display:grid;gap:18px;align-content:start}
.ficha dt{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--suave)}
.ficha dd{font-family:var(--serif);font-size:1.7rem;line-height:1.1}
.aviso{background:var(--areia-2);padding:clamp(40px,6vw,72px) 0}
.aviso p{max-width:70ch}

@media (max-width:900px){
  .hero .txt,.hero figure,.principios .cab,.principios ol,.trat img,.trat .info,.trat:nth-child(even) img,.trat:nth-child(even) .info,
  .vozes .wrap>figure,.visita .a,.visita .b,.cab-pg h1,.cab-pg p,.ficha .idx,.ficha .corpo,.ficha dl{grid-column:1/-1;grid-row:auto}
  .hero figure img{aspect-ratio:4/5}
  .vozes .resto{grid-template-columns:1fr}
  .ficha dl{grid-template-columns:repeat(3,auto);justify-content:start;column-gap:28px;margin-top:24px}
}
@media (max-width:480px){
  .fatos,.ficha dl{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
