/* Essencial — landing page. Mobile-first. */
:root{
  --paper:#FBF8F2; --mist:#C5FFF2; --mist-soft:#E6FBF6; --ink:#1E3B37; --ink-soft:#4C6561;
  --gold:#8A6A2B; --gold-line:#C9A24D; --white:#fff;
  --font-title:'Quattrocento',Georgia,'Times New Roman',serif;
  --font-body:'Quattrocento Sans','Helvetica Neue',Arial,sans-serif;
  --font-accent:'Tamoncherry','Quattrocento',Georgia,serif; /* usa Tamoncherry se instalada; senão Quattrocento */
  --wrap:min(1120px,calc(100% - 2.5rem));
  --section:clamp(4.5rem,12vw,8rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--font-body);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p{margin:0}
h1,h2{font-family:var(--font-title);font-weight:400;line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(2.35rem,9vw,4.4rem)}
h2{font-size:clamp(1.9rem,6.4vw,3rem)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.7rem 1rem;z-index:100}
.skip:focus{left:0}
.wrap{width:var(--wrap);margin-inline:auto}
.lead{color:var(--ink-soft);max-width:34ch;font-size:1.125rem}

/* Botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-height:52px;padding:.85rem 1.7rem;border-radius:999px;font:700 1rem/1 var(--font-body);text-decoration:none;transition:background-color .25s,transform .2s,box-shadow .25s}
.btn svg{width:20px;height:20px;flex:none}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#2b524c}
.btn:active{transform:scale(.97)}
.link{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--gold-line);text-underline-offset:.35em;text-decoration-thickness:1.5px}
.link:hover{color:var(--gold)}

/* Hero */
.hero{padding:1.25rem 0 3rem}
.brand{font-family:var(--font-accent);font-size:1.3rem;letter-spacing:.04em;text-align:center;margin-bottom:1.25rem}
.hero-grid{display:grid;gap:1.75rem;justify-items:center;text-align:center}
.arch-wrap{position:relative;width:min(70%,300px)}
.arch-wrap::before{content:"";position:absolute;inset:-12px -12px 12px 12px;border:1px solid var(--gold-line);border-radius:999px 999px 6px 6px;z-index:0}
.arch{position:relative;z-index:1;aspect-ratio:3/4;border-radius:999px 999px 6px 6px;overflow:hidden;background:var(--mist)}
.arch img{width:100%;height:100%;object-fit:cover}
.hero-text{display:grid;gap:1.1rem;justify-items:center}
.hero-text .lead{margin-inline:auto}
.hero-text .btn{margin-top:.6rem}
@media (max-height:700px){.arch-wrap{width:min(56%,240px)}}

/* Experiência */
.exp{padding:var(--section) 0;background:var(--mist-soft)}
.exp-grid{display:grid;gap:2.5rem}
.exp-text{display:grid;gap:1.1rem;align-content:start}
.exp-photos{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;align-items:start}
.exp-photos img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px}
.exp-photos img:last-child{margin-top:2.5rem}

/* Serviços */
.serv{padding:var(--section) 0}
.serv h2{text-align:center;margin-bottom:2.5rem}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem .9rem;list-style:none;padding:0;margin:0}
.tile figure{margin:0}
.tile img,.ph{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px}
.tile figcaption{font-family:var(--font-title);font-size:1.2rem;margin-top:.7rem;line-height:1.25}
.ph{display:grid;place-items:center;background:var(--mist);color:var(--ink-soft);font-size:.8rem;text-align:center;padding:1rem}
.works{display:flex;gap:.9rem;margin-top:2.5rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem;-webkit-overflow-scrolling:touch}
.works img{flex:0 0 62%;max-width:260px;aspect-ratio:4/5;object-fit:cover;border-radius:6px;scroll-snap-align:start}

/* Diferencial */
.dif{padding:var(--section) 0;background:var(--mist-soft)}
.dif-grid{display:grid;gap:2.5rem}
.dif img{width:100%;max-width:420px;aspect-ratio:1/1;object-fit:cover;border-radius:6px}
.dif-list{display:grid;gap:1.4rem;margin-top:2rem;list-style:none;padding:0}
.dif-list li{padding-left:1.1rem;border-left:1px solid var(--gold-line)}
.dif-list strong{display:block;font-family:var(--font-title);font-weight:400;font-size:1.3rem}
.dif-list span{color:var(--ink-soft)}

/* Localização */
.loc{padding:var(--section) 0;text-align:center}
.loc-in{display:grid;gap:1rem;justify-items:center}
.loc address{font-style:normal;font-size:1.1rem}
.loc .ref,.loc .hours{color:var(--ink-soft)}
.loc .btn{margin-top:.8rem}
.btn-outline{border:1.5px solid var(--ink);color:var(--ink);background:transparent}
.btn-outline:hover{background:var(--ink);color:#fff}

/* CTA final */
.final{padding:var(--section) 0;background:var(--mist)}
.final-grid{display:grid;gap:2.25rem;justify-items:center;text-align:center}
.final .arch-wrap{width:min(62%,260px)}
.final-text{display:grid;gap:1.4rem;justify-items:center}
.final-links{display:flex;gap:1.6rem;flex-wrap:wrap;justify-content:center}

footer{padding:2.5rem 0 6rem;text-align:center;color:var(--ink-soft);font-size:.9rem}
footer .brand{margin-bottom:.4rem;color:var(--ink)}

/* WhatsApp flutuante (discreto) */
.float{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:50;min-height:52px;padding:.8rem 1.25rem;box-shadow:0 6px 18px rgba(30,59,55,.22);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s,transform .3s}
.float.on{opacity:1;transform:none;pointer-events:auto}

/* Entrada sutil */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.btn,.float{transition:none}}

/* Tablet */
@media (min-width:640px){
  .tiles{gap:1.5rem}
  .works img{flex-basis:30%}
  .exp-photos{gap:1.25rem}
}
/* Desktop */
@media (min-width:900px){
  body{font-size:1.125rem}
  .hero{padding:1.75rem 0 4rem;min-height:100svh;display:flex;flex-direction:column}
  .brand{text-align:left;font-size:1.5rem}
  .hero .wrap{flex:1;display:flex;flex-direction:column}
  .hero-grid{flex:1;grid-template-columns:1.05fr .95fr;align-items:center;text-align:left;justify-items:start;gap:4rem}
  .hero-text{justify-items:start;order:1}
  .hero-text .lead{margin-inline:0}
  .arch-wrap{order:2;width:auto;height:min(72svh,620px);aspect-ratio:3/4;justify-self:end;margin-right:12px}
  .arch{height:100%}
  .exp-grid{grid-template-columns:.8fr 1.2fr;gap:5rem;align-items:center}
  .exp-photos img:last-child{margin-top:4rem}
  .tiles{grid-template-columns:repeat(4,1fr)}
  .works{display:grid;grid-template-columns:repeat(4,1fr);overflow:visible}
  .works img{max-width:none}
  .dif-grid{grid-template-columns:.8fr 1.2fr;gap:5rem;align-items:center}
  .dif img{max-width:none}
  .final-grid{grid-template-columns:1fr auto;gap:5rem;text-align:left;justify-items:start;align-items:center}
  .final-text{justify-items:start}
  .final .arch-wrap{order:2;width:300px;height:auto;margin-right:12px}
  .final-links{justify-content:flex-start}
  .float{display:none}
}

/* Logo */
.logo{display:block;width:clamp(150px,46vw,200px);height:auto;margin-inline:auto}
.logo-sm{width:150px}
@media (min-width:900px){.hero .logo{margin-left:0;width:210px}}

/* Hidroterapia: foto e vídeo alternando */
.alt{position:relative;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:var(--mist)}
.alt img,.alt video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto;border-radius:0;transition:opacity 1s ease}
.alt-video{opacity:0}
.alt.show-video .alt-video{opacity:1}
.alt.show-video .alt-photo{opacity:0}
@media (prefers-reduced-motion:reduce){.alt video{display:none}}

.tile img.face{object-position:38% 50%}
