@font-face{font-family:"Montserrat";src:url("../fonts/Montserrat/static/Montserrat-Light.ttf") format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/Cormorant_Garamond/static/CormorantGaramond-SemiBoldItalic.ttf") format("truetype");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/Cormorant_Garamond/static/CormorantGaramond-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/Cormorant_Garamond/static/CormorantGaramond-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/Montserrat/static/Montserrat-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/Montserrat/static/Montserrat-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}

:root{
  --bg:#1a110a;
  --fg:#fff;
  --gold:#b38e6b;
  --gold-2:#d6b48f;
  --brown:#462f19;
  --cream:#f1ebe5;
  --muted:#cdbfb1;
  --radius:20px;
  --display:"Cormorant Garamond",Georgia,serif;
  --label:"Montserrat",system-ui,sans-serif;
  --body:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--body);min-height:100vh;display:flex;flex-direction:column;align-items:center}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
img{display:block;width:100%;height:100%;object-fit:cover}
.media{display:block;overflow:hidden}

/* HERO */
.hero{position:relative;width:100%;max-width:560px;height:78vh;min-height:460px;max-height:720px;overflow:hidden}
.hero-media,.hero-media img{position:absolute;inset:0;width:100%;height:100%}
.hero-media img{object-position:50% 20%}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(26,17,10,0) 40%,rgba(26,17,10,.8) 78%,var(--bg) 100%)}
.hero-content{position:absolute;left:24px;right:24px;bottom:10px;display:flex;justify-content:center}
.hero-name{font-weight:400;width:min(440px,100%)}
.hero-name img{width:100%;height:auto;object-fit:contain}

.wrap{width:100%;max-width:560px;padding:0 16px 24px}

/* SOCIAL */
.socials{display:flex;justify-content:center;gap:14px;margin:14px 0 22px}
.social-btn{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#2a1d13;border:1px solid #4a3626;transition:transform .2s,background .2s}
.social-btn:hover{transform:translateY(-3px);background:var(--gold)}
.social-icon{width:26px;height:26px;object-fit:contain}

/* CARDS */
.links{display:flex;flex-direction:column;gap:14px}
.card{position:relative;display:flex;border-radius:var(--radius);overflow:hidden;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(179,142,107,.28)}

/* 1 - Agendar */
.card-brand{flex-direction:column;justify-content:center;gap:4px;padding:22px 24px;min-height:120px;background:linear-gradient(120deg,#8c6a4a,var(--gold) 60%,var(--gold-2))}
.card-brand-img{background:linear-gradient(120deg,rgba(96,68,42,.88),rgba(150,114,80,.6) 60%,rgba(214,180,143,.35)),url("../images/botao-agende-consulta.png") center/cover no-repeat}
.brand-label{font-family:var(--label);font-weight:600;font-size:13px;letter-spacing:4px;color:#fff}
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand-word{font-family:var(--display);font-style:italic;font-weight:600;font-size:clamp(40px,12vw,58px);line-height:1;color:#fff;letter-spacing:1px}
.brand-arrow{font-family:var(--label);font-size:34px;color:#fff}

/* 2 - Tratamentos */
.card-split{min-height:150px;align-items:center;background:linear-gradient(120deg,#120b06,#2a1b10 60%,#3d2a18);border:1px solid #4a3626}
.split-text{position:relative;display:flex;flex-direction:column;padding:22px 56px 22px 24px;width:100%}
.sp-small{font-family:var(--label);font-weight:600;font-size:13px;letter-spacing:4px;color:#fff}
.sp-big{font-family:var(--display);font-style:italic;font-weight:600;font-size:clamp(38px,11vw,54px);line-height:1;background:linear-gradient(90deg,#fff,var(--gold-2));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.sp-desc{margin-top:8px;color:var(--muted);font-size:13px;line-height:1.4}
.split-plus{position:absolute;right:20px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;font-size:20px;color:var(--gold-2)}

.services{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:-4px}
.services[hidden]{display:none}
.services a{display:block;border-radius:16px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.services a:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(179,142,107,.28)}
.services img{width:100%;height:auto}

/* 3 - Clareamento */

/* 4 - Sobre mim */
.card-feature{overflow:visible;align-items:center;min-height:150px;margin-top:64px;padding:18px 18px 18px 0;background:#2a1d13;border:1px solid #4a3626}
.feature-mocks{flex:0 0 150px;align-self:stretch;position:relative}
.feature-cutout{position:absolute;left:4px;bottom:0;width:150px;height:auto;object-fit:contain;pointer-events:none}
.feature-text{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:6px;flex:1;margin-left:8px;padding-right:6px}
.feature-tag{font-family:var(--display);font-style:italic;font-weight:600;font-size:48px;line-height:1;letter-spacing:1px;color:var(--gold-2)}
.feature-title{font-family:var(--label);font-weight:300;font-size:14px;letter-spacing:3px;line-height:1.4}

/* 5 - Localização */

/* 6 - WhatsApp */
.card-whats{align-items:center;justify-content:center;gap:12px;padding:18px;background:#25a05a;font-family:var(--label);font-weight:600;font-size:16px;letter-spacing:1px}
.whats-icon{width:26px;height:26px;object-fit:contain}

/* FOOTER */
.footer{width:100%;padding:20px 16px 32px;text-align:center;color:#8d7a68;font-size:12px;display:flex;flex-direction:column;gap:6px}
.footer .dev strong{color:var(--gold);letter-spacing:2px}
.footer .dev em{font-style:italic}

/* ===== MOBILE ===== */
@media (max-width:480px){
  .hero{height:62vh;min-height:360px;max-height:520px}
  .hero-content{left:16px;right:16px;bottom:6px}
  .hero-name{width:min(340px,92%)}

  .wrap{padding:0 12px 16px}
  .socials{gap:10px;margin:10px 0 14px}
  .social-btn{width:44px;height:44px}
  .social-icon{width:22px;height:22px}

  .links{gap:10px}
  .card{border-radius:16px}

  .card-brand{padding:14px 16px;min-height:0}
  .brand-label{font-size:11px}
  .brand-word{font-size:clamp(32px,10.5vw,42px)}

  .card-split{min-height:0}
  .split-text{padding:16px 52px 16px 16px}
  .sp-small{font-size:11px}
  .sp-big{font-size:clamp(30px,9.5vw,40px)}
  .sp-desc{font-size:12px;margin-top:4px}



  .card-feature{min-height:124px;margin-top:54px;padding:14px 12px 14px 0}
  .feature-mocks{flex:0 0 124px}
  .feature-cutout{width:124px}
  .feature-tag{font-size:38px}
  .feature-title{font-size:12px;letter-spacing:2.5px}


  .card-whats{padding:14px;font-size:14px}
  .footer{padding:12px 16px 24px;font-size:11px}
}

/* 5 - Localização (ícone vazando do botão) */
.card-local{overflow:visible;align-items:center;min-height:96px;margin:18px 0 6px;padding:20px 24px;background:var(--cream);border:1px solid #e3d8cc;color:var(--brown)}
.card-local:hover{box-shadow:0 10px 30px rgba(241,235,229,.18)}
.local-text{display:flex;flex-direction:column;line-height:1}
.local-small{font-family:var(--display);font-style:italic;font-weight:500;font-size:24px;color:#6b4f35;margin-bottom:-2px}
.local-big{font-family:var(--display);font-weight:600;font-size:clamp(38px,11vw,50px);color:var(--brown)}
.local-pin{position:absolute;right:20px;top:-26px;width:76px;height:auto;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25))}
@media (max-width:480px){
  .card-local{min-height:78px;padding:14px 16px;margin:16px 0 4px}
  .local-small{font-size:20px}
  .local-big{font-size:clamp(32px,9.5vw,40px)}
  .local-pin{width:62px;right:14px;top:-22px}
}