/* The Beauty T-53 — tokens em design-system.md (travado) */
:root{
  --ink:#0D141A; --ink-2:#151E26;
  --sand:#F5E9E2; --sand-2:#EADBD1;
  --bronze:#B08A6E; --bronze-ink:#7A5C48;
  --muted-d:rgba(245,233,226,.68); --muted-l:rgba(13,20,26,.66);
  --line-d:rgba(245,233,226,.14); --line-l:rgba(13,20,26,.12);
  --serif:"Playfair Display",Georgia,serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:20px; --sec:96px;
}
@media (min-width:900px){:root{--gut:40px; --sec:144px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--sand);font:400 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
@media (min-width:900px){body{font-size:17px}}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.08;margin:0;letter-spacing:-.01em}
h1 em,h2 em{font-style:italic;color:var(--bronze)}
.sec--light h2 em{color:var(--bronze-ink)}
p{margin:0 0 1em}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--gut)}

/* Elementos */
.eyebrow{font:600 12px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--bronze);margin:0 0 20px}
.eyebrow--ink{color:var(--bronze-ink)}
.lead{font-size:18px;color:var(--muted-d);max-width:34ch}
.sub{color:var(--muted-d);max-width:46ch;margin:20px 0 0}
.sec--light .sub{color:var(--muted-l)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:16px 28px;border-radius:999px;font:600 15px/1 var(--sans);text-decoration:none;transition:background .25s,color .25s,transform .25s}
.btn:active{transform:scale(.98)}
.btn--light{background:var(--sand);color:var(--ink)}
.btn--light:hover{background:#fff}
.btn--dark{background:var(--ink);color:var(--sand)}
.btn--dark:hover{background:var(--bronze-ink)}
.btn--sm{min-height:42px;padding:12px 20px;font-size:14px}
.link{font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;transition:color .2s}
.link:hover{color:var(--bronze)}
.center{text-align:center}

/* Nav */
.nav{position:fixed;inset:0 0 auto;z-index:20;transition:background .35s,backdrop-filter .35s}
.nav.is-solid{background:rgba(13,20,26,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.nav__logo img{height:44px;width:auto;mix-blend-mode:screen}
.nav__links{display:none;gap:32px;font-size:14px;font-weight:500}
.nav__links a{text-decoration:none;color:var(--muted-d);transition:color .2s}
.nav__links a:hover{color:var(--sand)}
@media (min-width:900px){.nav__links{display:flex}.nav__in{height:88px}.nav__logo img{height:52px}}
@media (max-width:420px){.nav .btn--sm{padding:10px 16px;font-size:13px;min-height:40px}}

/* Hero */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero__media{position:relative;z-index:-1;height:min(78svh,560px);overflow:hidden}
.hero__media img{width:100%;height:110%;object-fit:cover;object-position:50% 12%;will-change:transform}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,20,26,.55) 0%,rgba(13,20,26,0) 22%,rgba(13,20,26,0) 50%,var(--ink) 100%)}
.hero__in{position:relative;margin-top:-72px;padding-bottom:56px}
.hero h1{font-size:clamp(44px,11vw,88px);max-width:12ch;margin-bottom:24px}
.hero__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;margin-top:32px}
.hero__copy{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (min-width:900px){
  .hero{min-height:100svh;display:flex;align-items:center}
  .hero__media{position:absolute;inset:0;left:auto;height:auto;width:min(46vw,640px)}
  .hero__media img{object-position:50% 25%}
  .hero__media::after{background:linear-gradient(90deg,var(--ink) 0%,rgba(13,20,26,.2) 30%,rgba(13,20,26,0) 60%),linear-gradient(0deg,var(--ink) 0%,rgba(13,20,26,0) 22%)}
  .hero__in{margin-top:0;padding-top:88px;padding-bottom:0}
  .hero__copy{max-width:620px}
}

/* Fatos */
.facts{border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.facts__in{list-style:none;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:0}
.facts li{padding:24px 0;display:flex;flex-direction:column;gap:4px}
.facts li:nth-child(odd){padding-right:16px}
.facts li:nth-child(n+3){border-top:1px solid var(--line-d)}
.facts strong{font:400 20px/1.2 var(--serif)}
.facts span{font-size:13px;color:var(--muted-d)}
@media (min-width:900px){
  .facts__in{grid-template-columns:repeat(4,1fr)}
  .facts li{padding:36px 24px 36px 0}
  .facts li:nth-child(n+3){border-top:0}
  .facts li+li{border-left:1px solid var(--line-d);padding-left:32px}
  .facts strong{font-size:24px}
}

/* Seções */
.sec{padding:var(--sec) 0}
.sec--light{background:var(--sand);color:var(--ink)}
.head{margin-bottom:48px}
.head h2,.story h2,.visit h2{font-size:clamp(34px,7vw,56px);max-width:16ch}
@media (min-width:900px){.head{margin-bottom:72px}}

/* Abas + serviços */
.tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--sand-2);margin-bottom:40px}
.tabs button{appearance:none;border:0;background:transparent;font:600 15px/1 var(--sans);color:var(--muted-l);padding:14px 24px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s;min-height:44px}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--sand)}
.svc{display:grid;gap:40px}
.svc[hidden]{display:none}
.svc__img img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.svc__group{font:600 12px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-ink);margin:0 0 8px}
.svc__group:not(:first-child){margin-top:48px}
.svc ul{list-style:none;margin:0;padding:0}
.svc li{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:22px 0;border-bottom:1px solid var(--line-l)}
.svc h4{font-size:22px;margin-bottom:6px}
.svc li p{margin:0;font-size:15px;color:var(--muted-l);max-width:44ch}
.svc li a{flex:none;font:600 14px/1 var(--sans);text-decoration:none;color:var(--ink);padding:12px 0 12px 12px;white-space:nowrap;transition:color .2s}
.svc li a::after{content:" →"}
.svc li a:hover{color:var(--bronze-ink)}
.svc__extra{margin-top:40px}
.svc__extra img{width:100%;border-radius:2px}
@media (min-width:900px){
  .svc{grid-template-columns:5fr 7fr;gap:80px;align-items:start}
  .svc__img{position:sticky;top:120px}
}

/* Galeria */
.gallery{columns:2;column-gap:12px}
.g{break-inside:avoid;margin-bottom:12px}
.g img{width:100%;border-radius:2px}
@media (min-width:900px){.gallery{columns:3;column-gap:20px}.g{margin-bottom:20px}}
.quote{margin:80px auto 24px;max-width:780px;text-align:center}
.quote p{font:400 italic clamp(24px,4.4vw,36px)/1.3 var(--serif);margin-bottom:20px}
.quote footer{font-size:14px;color:var(--muted-d)}
.quote footer span{color:var(--bronze);margin-left:8px;letter-spacing:.1em}

/* A casa */
.story{display:grid;gap:40px;align-items:center}
.story__img img{width:100%;max-width:420px;aspect-ratio:2/3;object-fit:cover;border-radius:2px}
.story__copy p{color:var(--muted-l);max-width:52ch}
.story__copy h2{margin-bottom:28px}
.story__copy .btn{margin-top:16px}
@media (min-width:900px){.story{grid-template-columns:5fr 7fr;gap:80px}}
.team{display:grid;gap:28px;margin-top:96px;align-items:center}
.team img{width:100%;border-radius:2px}
.team h3{font-size:30px;margin-bottom:16px}
.team p{color:var(--muted-l);max-width:44ch}
@media (min-width:900px){.team{grid-template-columns:7fr 5fr;gap:64px;margin-top:144px}}
.space{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:72px}
.space img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px}
.space figcaption{font-size:13px;color:var(--muted-l);margin-top:10px}
@media (min-width:900px){.space{grid-template-columns:repeat(4,1fr);gap:20px;margin-top:96px}}

/* Visite */
.visit__in{display:grid;gap:56px}
.info{margin:40px 0 0;display:grid;gap:0}
.info div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:16px 0;border-top:1px solid var(--line-d)}
.info dt{font-size:13px;color:var(--muted-d);padding-top:2px}
.info dd{margin:0}
.info a{text-decoration:none;border-bottom:1px solid var(--line-d)}
.info a:hover{color:var(--bronze)}
.visit__media{display:grid;gap:12px}
.visit__media img{width:100%;border-radius:2px}
.map{position:relative;aspect-ratio:16/10;background:var(--ink-2);border-radius:2px;overflow:hidden}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.35) contrast(1.05)}
.map__btn{position:absolute;inset:0;margin:auto;width:max-content;height:max-content;appearance:none;border:1px solid var(--line-d);background:transparent;color:var(--sand);font:600 14px/1 var(--sans);padding:14px 22px;border-radius:999px;cursor:pointer}
@media (min-width:900px){.visit__in{grid-template-columns:6fr 6fr;gap:80px;align-items:center}}

/* Rodapé */
.foot{border-top:1px solid var(--line-d);padding:64px 0 120px;text-align:center}
.foot img{height:56px;width:auto;margin:0 auto 20px;mix-blend-mode:screen}
.foot p{color:var(--muted-d);margin:0 0 8px}
.foot__small{font-size:13px}
@media (min-width:900px){.foot{padding-bottom:64px}}

/* CTA fixo no celular */
.sticky{position:fixed;left:12px;right:12px;bottom:12px;z-index:30;display:flex;align-items:center;justify-content:center;min-height:54px;border-radius:999px;background:var(--sand);color:var(--ink);font:600 15px/1 var(--sans);text-decoration:none;transform:translateY(140%);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.sticky.is-on{transform:none}
@media (min-width:900px){.sticky{display:none}}

/* Reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.hero__copy{opacity:1;transform:none;transition:none;animation:none}
}
