@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,700;0,6..96,800&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --accent: #3f5c4a;
  --accent-dark: #2f4837;
  --accent-hover: #2f4837;
  --accent-contrast: #fffaf3;
  --accent-2: #d9c39a;
  --accent-2-tint: #f1e8d5;
  --panel-gradient: linear-gradient(155deg, var(--accent) 0%, var(--accent-dark) 100%);

  --card: #f6ecd9;
  --card-warm: #efdcb8;
  --card-gradient: linear-gradient(135deg, #faf1e6 0%, #f5d7c3 55%, #eec19f 100%);
  --card-warm-gradient: linear-gradient(135deg, #f5d7c3 0%, #eec19f 55%, #d9a066 100%);

  --page-bg: #faf8f4;
  --page-bg-2: #f6f1e6;
  --text-heading: #23281f;
  --text-body: #4a4f45;
  --text-faint: #7a7f75;
  --border: #ece6da;
  --tag-bg: #f1e8d5;
  --tag-text: #2f4837;
  --nav-bg: rgba(250, 248, 244, 0.92);
  --nav-brand: #2f4837;

  --header-bg: radial-gradient(66% 92% at 50% 46%, var(--accent-2) 0%, var(--accent-2-tint) 32%, var(--page-bg-2) 58%, var(--page-bg) 88%);
  --hero-plain: #1a1a1a;
  --hero-gloss: linear-gradient(180deg, #2e2e2e 0%, #000000 50%, #050505 100%);
  --hero-gloss-filter: drop-shadow(0 1px 0 rgba(255,255,255,0.4)) drop-shadow(0 2px 4px rgba(0,0,0,0.15));

  --whatsapp-green: #25d366;
}

:root[data-theme="dark"] {
  --accent: #9fbea8;
  --accent-dark: #c9dfce;
  --accent-hover: #b7d0bd;
  --accent-contrast: #142019;
  --accent-2: #e0b384;
  --accent-2-tint: #3b251d;
  --panel-gradient: linear-gradient(155deg, #405d4b 0%, #22352a 100%);

  --page-bg: #120e0c;
  --page-bg-2: #1a1310;
  --text-heading: #fff8ef;
  --text-body: #eadccf;
  --text-faint: #cdb9a8;
  --border: #705446;
  --nav-bg: rgba(18, 14, 12, 0.88);

  --card-gradient: linear-gradient(135deg, #422f26 0%, #2c211c 58%, #1c1512 100%);
  --card-warm-gradient: linear-gradient(135deg, #4b3024 0%, #31221c 56%, #1f1713 100%);
  --tag-bg: #493328;
  --tag-text: #fff8ef;
  --nav-brand: #fff8ef;

  --header-bg:
    radial-gradient(50% 62% at 16% 20%, rgba(245,215,195,0.55) 0%, rgba(245,215,195,0) 65%),
    radial-gradient(55% 68% at 84% 16%, rgba(238,193,159,0.5) 0%, rgba(238,193,159,0) 68%),
    radial-gradient(46% 60% at 22% 88%, rgba(92,58,36,0.55) 0%, rgba(92,58,36,0) 65%),
    radial-gradient(52% 66% at 84% 90%, rgba(138,86,54,0.5) 0%, rgba(138,86,54,0) 68%),
    radial-gradient(70% 92% at 50% 48%, #d9a066 0%, rgba(217,160,102,0.75) 30%, rgba(185,122,77,0.4) 55%, var(--page-bg-2) 82%, var(--page-bg) 100%);
  --hero-plain: #fff8ef;
  --hero-gloss: linear-gradient(180deg, #fffaf3 0%, #f8e8da 52%, #edc9a7 100%);
  --hero-gloss-filter: drop-shadow(0 2px 12px rgba(0,0,0,0.46));
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Manrope', sans-serif;
  background: var(--page-bg);
  color: var(--text-heading);
  width: 100%;
  min-height: 100vh;
}
h1, h2, h3, .display { font-family: 'Bodoni Moda', serif; }
a { text-decoration: none; }
button { font-family: inherit; }
img, svg { display: block; max-width: 100%; }

.nav-link { color: var(--text-heading); opacity: 0.75; font-size: 15px; font-weight: 500; }
.nav-link:hover { opacity: 1; }

.icon-btn { background: transparent; border: 1.5px solid transparent; border-radius: 999px; padding: 6px; cursor: pointer; opacity: 0.55; transition: opacity 0.15s ease, border-color 0.15s ease; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; }
.icon-btn.active { opacity: 1; border-color: var(--nav-brand); }
.icon-btn svg { width: 20px; height: 20px; }

.theme-btn { background: transparent; border: 1.5px solid var(--border); border-radius: 999px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-heading); }
.theme-btn svg { width: 17px; height: 17px; }

.btn-primary { background: var(--accent); color: var(--accent-contrast); display: inline-flex; align-items: center; gap: 8px; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-outline { border: 1.5px solid var(--accent); color: var(--accent); background: transparent; }
.btn-outline:hover { background: var(--accent); color: var(--accent-contrast); }
.wa-icon { width: 18px; height: 18px; flex-shrink: 0; }

.service-card { background: var(--card-gradient); border: 1px solid var(--border); border-top: 4px solid var(--accent); }
.service-card:nth-of-type(3n+2) { border-top-color: var(--accent-2); background: var(--card-warm-gradient); }
.service-card:nth-of-type(3n+3) { border-top-color: var(--accent-dark); }
.service-card .tag { background: var(--tag-bg); color: var(--tag-text); }

.footer-link { color: #f3ede0; opacity: 0.85; }
.footer-link:hover { opacity: 1; }

.tool-tab { background: transparent; color: var(--text-faint); border: none; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; padding: 10px 22px; border-radius: 999px; font-size: 14px; font-weight: 700; }
.tool-tab.active { background: var(--accent); color: var(--accent-contrast); }

.quiz-option { background: var(--card-gradient); border: 1px solid var(--border); color: var(--text-heading); transition: background 0.15s ease, border-color 0.15s ease; text-align: left; padding: 14px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; }
.quiz-option:hover { background: var(--tag-bg); border-color: var(--accent-2); }

.tone-swatch { background: none; border: none; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; padding: 6px; width: 100px; }
.tone-swatch:hover .circle { transform: scale(1.08); }
.circle { transition: transform 0.15s ease; display: block; border-radius: 50%; border: 3px solid var(--card); box-shadow: 0 2px 8px rgba(0,0,0,0.14); }

.cravinho-dot { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: #4a3527; border: 2px solid var(--card); box-shadow: 0 1px 4px rgba(0,0,0,0.25); cursor: pointer; padding: 0; transition: transform 0.15s ease, opacity 0.2s ease, background 0.2s ease; }
.cravinho-dot:hover { transform: scale(1.12); }
.cravinho-dot.popped { background: #bcd9c4; opacity: 0.4; transform: scale(0.55); cursor: default; pointer-events: none; }

.skin-zone { position: relative; width: 260px; height: 200px; border-radius: 46% 46% 42% 42% / 55% 55% 45% 45%; background: linear-gradient(155deg, #f1d9c2 0%, #e6c4a3 100%); box-shadow: inset 0 0 30px rgba(0,0,0,0.08); }

.wa-fab { width: 34px; height: 34px; border-radius: 999px; background: var(--whatsapp-green); display: flex; align-items: center; justify-content: center; }
.wa-fab svg { width: 19px; height: 19px; }

nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--nav-bg);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 6vw; box-sizing: border-box;
}
.nav-links { display: flex; align-items: center; gap: 20px; }
.flag-group { display: flex; align-items: center; gap: 2px; }
.flag-svg { width: 22px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.16); display: block; }
.nav-brand { font-size: 24px; font-weight: 800; letter-spacing: 0.3px; white-space: nowrap; }

header {
  padding: 96px 6vw 88px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px;
  background: var(--header-bg);
}
.hero-eyebrow { font-size: 14px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--hero-plain); opacity: 0.8; }
.hero-title {
  margin: 0; font-size: clamp(38px, 6vw, 64px); font-weight: 700; max-width: 820px; line-height: 1.08;
  background: var(--hero-gloss); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: var(--hero-gloss-filter);
}
.hero-subtitle { margin: 0; max-width: 560px; font-size: 18px; line-height: 1.6; color: var(--hero-plain); }
.hero-ctas { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }

.pill-btn { padding: 16px 32px; border-radius: 999px; font-size: 16px; font-weight: 700; }

section { padding: 88px 6vw; box-sizing: border-box; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent-dark); opacity: 0.7; }

#pele { background: linear-gradient(160deg, #d9a06630 0%, var(--page-bg) 55%); display: flex; flex-direction: column; align-items: center; gap: 40px; }
.tool-tabs { display: flex; gap: 8px; background: var(--card-warm-gradient); padding: 6px; border-radius: 999px; border: 1px solid var(--border); flex-wrap: wrap; justify-content: center; }
.tool-panel { width: 100%; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.result-block { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.result-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.tone-grid { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; max-width: 560px; width: 100%; margin: 0 auto; }
.quiz-options { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 420px; margin: 8px auto 0; }

#servicos { background: linear-gradient(160deg, #eec19f26 0%, var(--page-bg) 55%); display: flex; flex-direction: column; align-items: center; gap: 48px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; width: 100%; max-width: 1080px; margin: 0 auto; }
.service-card, .blog-card { border-radius: 18px; padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; }
.tag { align-self: flex-start; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }

#sobre { background: linear-gradient(160deg, #b97a4d26 0%, var(--page-bg) 55%); display: flex; justify-content: center; }
.sobre-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; max-width: 1080px; width: 100%; align-items: center; margin: 0 auto; }
.sobre-bullets { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.sobre-bullet { display: flex; gap: 12px; align-items: flex-start; }
.sobre-panel { border-radius: 20px; background: var(--panel-gradient); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; padding: 32px; box-sizing: border-box; }

#blog { background: linear-gradient(160deg, #8a563622 0%, var(--page-bg) 55%); display: flex; flex-direction: column; align-items: center; gap: 44px; }
.blog-card { background: var(--card-gradient); border: 1px solid var(--border); }
.blog-card:nth-of-type(3n+2) { background: var(--card-warm-gradient); }
.blog-body { margin: 0; font-size: 14px; line-height: 1.65; color: var(--text-body); border-top: 1px solid var(--border); padding-top: 14px; }
.blog-toggle { align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--accent-dark); background: none; border: none; cursor: pointer; padding: 0; }

#contato { display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; background: linear-gradient(160deg, #5c3a241e 0%, var(--page-bg) 55%); }
.contact-grid { display: flex; gap: 40px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.contact-block { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.contact-label { font-size: 13px; font-weight: 700; color: var(--accent-dark); }

footer {
  background: #23281f; padding: 40px 6vw; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
}
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }

@media (max-width: 780px) {
  .nav-links { gap: 10px !important; }
  .nav-link { display: none !important; }
  nav { padding: 14px 5vw !important; }
}
@media (max-width: 640px) {
  .sobre-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  header { padding: 64px 5vw 56px !important; }
  section { padding: 56px 5vw !important; }
  .tool-tab { padding: 9px 16px !important; font-size: 13px !important; }
}
@media (max-width: 480px) {
  .nav-brand { font-size: 15px !important; }
  nav { padding: 12px 4vw !important; }
  .nav-links { gap: 6px !important; }
  .flag-group { gap: 1px !important; }
  .icon-btn { width: 26px !important; height: 26px !important; padding: 3px !important; }
  .icon-btn svg { width: 15px !important; height: 15px !important; }
  .flag-svg { width: 17px !important; height: 12px !important; }
  .theme-btn { width: 26px !important; height: 26px !important; }
  .theme-btn svg { width: 13px !important; height: 13px !important; }
  .nav-book-btn { padding: 8px !important; }
  .nav-book-btn .btn-label { display: none !important; }
  .nav-book-btn .wa-icon { width: 17px !important; height: 17px !important; }
}

/* --------------------------------------------------------------------------
   iPhone app experience
   -------------------------------------------------------------------------- */

:root {
  --ios-glass: rgba(255, 255, 255, 0.72);
  --ios-glass-strong: rgba(255, 255, 255, 0.88);
  --ios-surface: rgba(255, 255, 255, 0.58);
  --ios-shadow: 0 14px 34px rgba(57, 46, 34, 0.12);
  --ios-hairline: rgba(71, 61, 49, 0.10);
  --ios-green: #496653;
}

:root[data-theme="dark"] {
  --ios-glass: rgba(31, 25, 20, 0.76);
  --ios-glass-strong: rgba(31, 25, 20, 0.91);
  --ios-surface: rgba(255, 255, 255, 0.07);
  --ios-shadow: 0 16px 38px rgba(0, 0, 0, 0.28);
  --ios-hairline: rgba(255, 255, 255, 0.10);
  --ios-green: #9fbea8;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 10%, rgba(217, 195, 154, 0.9), transparent 34%),
    radial-gradient(circle at 82% 86%, rgba(73, 102, 83, 0.62), transparent 34%),
    linear-gradient(145deg, #18221c 0%, #314638 48%, #c6aa7d 140%);
}

#app {
  position: relative;
  width: min(430px, calc(100vw - 32px));
  height: min(900px, calc(100svh - 48px));
  overflow: hidden;
  border: 10px solid #101111;
  border-radius: 54px;
  background: var(--page-bg);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.25),
    0 34px 90px rgba(0, 0, 0, 0.46),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  isolation: isolate;
}

.iphone-screen {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scroll-padding-top: 64px;
  scrollbar-width: none;
  background: var(--page-bg);
}

.iphone-screen::-webkit-scrollbar { display: none; }

.mac-windowbar { display: none; }

.top-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  min-height: 58px;
  padding: 8px 14px !important;
  gap: 8px;
  border-bottom: 1px solid var(--ios-hairline);
  background: var(--ios-glass) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
}

.top-nav .nav-brand {
  max-width: 126px;
  overflow: hidden;
  font-family: 'Manrope', sans-serif;
  font-size: 13px !important;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.25px;
  white-space: normal;
}

.top-nav .nav-links { gap: 3px !important; }
.top-nav .nav-link { display: none !important; }
.top-nav .flag-group { gap: 0 !important; }
.top-nav .icon-btn,
.top-nav .theme-btn {
  width: 28px !important;
  height: 28px !important;
  padding: 4px !important;
  border-width: 1px;
}
.top-nav .icon-btn svg { width: 16px !important; height: 12px !important; }
.top-nav .theme-btn svg { width: 14px !important; height: 14px !important; }
.top-nav .nav-book-btn {
  width: 32px;
  height: 32px;
  justify-content: center;
  padding: 0 !important;
  box-shadow: 0 5px 14px rgba(63, 92, 74, 0.22);
}
.top-nav .nav-book-btn .btn-label { display: none !important; }
.top-nav .nav-book-btn .wa-icon { width: 17px !important; height: 17px !important; }

main { background: var(--page-bg); }
main > * { scroll-margin-top: 64px; }

header {
  position: relative;
  min-height: 560px;
  margin: 10px 12px 12px;
  padding: 70px 24px 54px !important;
  gap: 18px;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.48);
  border-radius: 34px;
  background: url("assets/light-skin-gradient.webp") center / cover no-repeat;
  box-shadow: var(--ios-shadow), inset 0 1px 0 rgba(255,255,255,0.7);
}

:root[data-theme="dark"] header {
  border-color: rgba(255,255,255,0.10);
  background:
    linear-gradient(180deg, rgba(12,8,7,0.18) 0%, rgba(12,8,7,0.34) 100%),
    url("assets/dark-skin-gradient.webp") center / cover no-repeat;
  box-shadow: 0 18px 48px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.10);
}

:root[data-theme="dark"] .hero-eyebrow,
:root[data-theme="dark"] .hero-subtitle {
  text-shadow: 0 2px 12px rgba(0,0,0,0.72);
}

:root[data-theme="dark"] header::before,
:root[data-theme="dark"] header::after {
  display: none;
}

:root[data-theme="light"] header::before,
:root[data-theme="light"] header::after {
  display: none;
}

header::before,
header::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
header::before {
  top: -58px;
  left: -58px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(255,255,255,0.52);
  box-shadow: 0 0 0 24px rgba(255,255,255,0.08), 0 0 0 52px rgba(255,255,255,0.05);
}
header::after {
  right: -70px;
  bottom: -60px;
  width: 210px;
  height: 210px;
  background: radial-gradient(circle, rgba(63,92,74,0.22), transparent 66%);
}
header > * { position: relative; z-index: 1; }
.hero-eyebrow { font-size: 11px; letter-spacing: 1.7px; }
.hero-title { max-width: 350px; font-size: 41px !important; line-height: 1.04; letter-spacing: -1.5px; }
.hero-subtitle { max-width: 330px; font-size: 15px; line-height: 1.55; }
.hero-ctas { width: 100%; flex-direction: column; gap: 10px; margin-top: 12px; }
.pill-btn { width: 100%; justify-content: center; padding: 15px 22px; font-size: 14px; }
.btn-primary,
.btn-outline,
button,
a { -webkit-tap-highlight-color: transparent; }
.btn-primary,
.btn-outline,
.quiz-option,
.tool-tab,
.icon-btn,
.theme-btn { transition: transform 160ms ease, filter 160ms ease, background 160ms ease, color 160ms ease; }
.btn-primary:active,
.btn-outline:active,
.quiz-option:active,
.tool-tab:active,
.icon-btn:active,
.theme-btn:active { transform: scale(0.96); }

section {
  margin: 12px;
  padding: 46px 22px !important;
  border: 1px solid var(--ios-hairline);
  border-radius: 30px;
  box-shadow: var(--ios-shadow);
}
.section-head { gap: 9px; }
.section-head h2 { font-size: 32px !important; line-height: 1.08; letter-spacing: -0.7px; }
.eyebrow { font-size: 11px; letter-spacing: 1.6px; }

#pele,
#servicos,
#resultados,
#sobre,
#blog,
#contato {
  background: linear-gradient(145deg, var(--ios-surface), color-mix(in srgb, var(--page-bg) 96%, var(--accent-2))) !important;
}
#pele { gap: 30px; }
#servicos { gap: 30px; }
#blog { gap: 30px; }
#contato { gap: 28px; }

.home-results { display:flex; flex-direction:column; align-items:center; gap:30px; }
.home-result-preview {
  width:min(100%,900px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:8px;
  border:1px solid var(--ios-hairline);
  border-radius:26px;
  background:var(--ios-glass-strong);
  box-shadow:var(--ios-shadow);
}
.home-result-preview > div {
  min-height:250px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:20px;
  color:var(--text-body);
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent-2-tint) 76%,var(--page-bg)),color-mix(in srgb,var(--page-bg) 88%,var(--accent-2)));
}
.home-result-preview span { color:var(--accent-dark); font-size:11px; font-weight:900; letter-spacing:1.8px; text-transform:uppercase; }
.home-result-preview strong { font-size:14px; }
.home-results-link { padding:14px 24px; border-radius:999px; font-size:14px; font-weight:800; }

.tool-tabs {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--ios-hairline);
  border-radius: 18px;
  background: color-mix(in srgb, var(--ios-surface) 80%, var(--accent-2-tint));
}
.tool-tab { min-height: 42px; padding: 8px 6px !important; border-radius: 14px; font-size: 11px !important; }
.tool-tab.active { box-shadow: 0 5px 14px rgba(63,92,74,0.24); }
.tool-panel { gap: 22px; }
.tone-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 5px; }
.tone-swatch { width: auto; padding: 4px 0; }
.quiz-option { border-radius: 16px; background: var(--ios-glass-strong); }
.skin-zone { max-width: 100%; }

.card-grid { grid-template-columns: 1fr; gap: 12px; }
.service-card,
.blog-card {
  padding: 23px 21px;
  gap: 11px;
  border: 1px solid rgba(255,255,255,0.46);
  border-top: 1px solid rgba(255,255,255,0.60);
  border-radius: 24px;
  background: var(--ios-glass-strong) !important;
  box-shadow: 0 9px 24px rgba(62,49,35,0.08), inset 0 1px 0 rgba(255,255,255,0.5);
}
:root[data-theme="dark"] .service-card,
:root[data-theme="dark"] .blog-card { border-color: rgba(255,255,255,0.14); }
.service-card h3 { font-size: 22px !important; }
.service-card::after {
  content: "";
  width: 38px;
  height: 3px;
  margin-top: 3px;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0.7;
}

.sobre-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
.sobre-grid h2 { font-size: 31px !important; line-height: 1.08; }
.sobre-panel { min-height: 230px; aspect-ratio: auto; border-radius: 25px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.15); }
.sobre-bullet {
  padding: 12px 14px;
  border-radius: 15px;
  background: var(--ios-glass-strong);
  border: 1px solid var(--ios-hairline);
}

.contact-grid { width: 100%; flex-direction: column; gap: 10px; }
.contact-block {
  width: 100%;
  padding: 15px;
  border-radius: 17px;
  background: var(--ios-glass-strong);
  border: 1px solid var(--ios-hairline);
}
#contato > .btn-primary { width: 100%; justify-content: center; padding: 16px 22px !important; font-size: 15px !important; }

footer {
  margin: 12px;
  padding: 34px 24px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 28px;
  background: linear-gradient(145deg, #283a2e, #17241c);
  box-shadow: var(--ios-shadow);
}
.footer-links { gap: 12px 18px; }

@media (max-width: 520px) {
  body { padding: 0; background: var(--page-bg); }
  #app {
    width: 100%;
    height: 100svh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

@media (max-width: 560px) {
  .home-result-preview { grid-template-columns:1fr; }
  .home-result-preview > div { min-height:180px; }
}

@media (max-width: 360px) {
  .top-nav .nav-brand { max-width: 100px; font-size: 12px !important; }
  .top-nav .icon-btn,
  .top-nav .theme-btn { width: 25px !important; height: 25px !important; }
  .hero-title { font-size: 36px !important; }
  section { margin-left: 8px; margin-right: 8px; padding-left: 18px !important; padding-right: 18px !important; }
}

/* Desktop has its own layout: spacious, content-rich and iOS-inspired. */
@media (min-width: 900px) {
  body {
    padding: 24px;
    background:
      radial-gradient(circle at 12% 8%, rgba(224, 204, 169, 0.9), transparent 30%),
      radial-gradient(circle at 90% 88%, rgba(73, 102, 83, 0.72), transparent 32%),
      linear-gradient(145deg, #18221c 0%, #314638 48%, #ae9165 135%);
  }

  :root[data-theme="dark"] body {
    background:
      radial-gradient(circle at 10% 8%, rgba(217,160,102,0.22), transparent 31%),
      radial-gradient(circle at 90% 88%, rgba(92,58,36,0.42), transparent 34%),
      linear-gradient(145deg, #0d0a08 0%, #19110e 52%, #291a13 100%);
  }

  #app {
    width: min(1440px, calc(100vw - 48px));
    height: calc(100svh - 48px);
    border: 1px solid rgba(255,255,255,0.34);
    border-radius: 30px;
    box-shadow: 0 34px 100px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.22);
  }

  .ios-statusbar,
  .ios-tabbar,
  .home-indicator { display: none; }

  .mac-windowbar {
    position: sticky;
    top: 0;
    z-index: 80;
    height: 46px;
    display: grid;
    grid-template-columns: 120px minmax(260px, 580px) 120px;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    border-bottom: 1px solid rgba(0,0,0,0.10);
    background: color-mix(in srgb, var(--page-bg) 72%, #d8d8d8);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    backdrop-filter: blur(28px) saturate(170%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.56);
  }
  :root[data-theme="dark"] .mac-windowbar {
    border-bottom-color: rgba(255,255,255,0.08);
    background: rgba(24,19,16,0.94);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  }
  .mac-traffic-lights { display: flex; align-items: center; gap: 8px; }
  .mac-traffic-lights i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.18); }
  .mac-traffic-lights i:nth-child(1) { background: #ff5f57; }
  .mac-traffic-lights i:nth-child(2) { background: #febc2e; }
  .mac-traffic-lights i:nth-child(3) { background: #28c840; }
  .mac-address-bar {
    justify-self: center;
    width: min(100%, 580px);
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 18px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 9px;
    color: color-mix(in srgb, var(--text-heading) 72%, transparent);
    background: rgba(255,255,255,0.62);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.04), 0 1px 0 rgba(255,255,255,0.72);
    font-size: 12px;
    font-weight: 500;
  }
  :root[data-theme="dark"] .mac-address-bar { border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.08); }
  .mac-address-bar svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .mac-address-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mac-toolbar-action { justify-self: end; color: var(--text-heading); opacity: 0.68; }
  .mac-toolbar-action svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

  .iphone-screen {
    scroll-padding-top: 96px;
    background:
      radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent-2-tint) 45%, transparent), transparent 34%),
      var(--page-bg);
  }

  .top-nav {
    top: 46px;
    min-height: 76px;
    padding: 12px clamp(26px, 4vw, 62px) !important;
    border-bottom-color: var(--ios-hairline);
  }

  .top-nav .nav-brand {
    max-width: none;
    font-family: 'Bodoni Moda', serif;
    font-size: 21px !important;
    line-height: 1;
    letter-spacing: -0.3px;
    white-space: nowrap;
  }

  .top-nav .nav-links { gap: clamp(10px, 1.4vw, 22px) !important; }
  .top-nav .nav-link {
    display: inline-flex !important;
    position: relative;
    font-size: 13px;
    white-space: nowrap;
  }
  .top-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -6px;
    height: 2px;
    border-radius: 999px;
    background: var(--accent);
    transition: right 160ms ease;
  }
  .top-nav .nav-link:hover::after { right: 0; }
  .top-nav .flag-group { margin-left: 4px; }
  .top-nav .icon-btn,
  .top-nav .theme-btn { width: 32px !important; height: 32px !important; }
  .top-nav .nav-book-btn {
    width: auto;
    height: 38px;
    padding: 0 18px !important;
    border-radius: 999px;
  }
  .top-nav .nav-book-btn .btn-label { display: inline !important; }

  main > * { scroll-margin-top: 94px; }

  header {
    min-height: min(680px, calc(100svh - 130px));
    margin: 18px;
    padding: 110px clamp(40px, 9vw, 140px) 96px !important;
    border-radius: 34px;
  }
  header::before {
    top: -160px;
    left: -100px;
    width: 430px;
    height: 430px;
    box-shadow: 0 0 0 46px rgba(255,255,255,0.08), 0 0 0 96px rgba(255,255,255,0.04);
  }
  header::after { right: -120px; bottom: -170px; width: 520px; height: 520px; }
  .hero-eyebrow { font-size: 13px; letter-spacing: 2.2px; }
  .hero-title { max-width: 900px; font-size: clamp(56px, 5.2vw, 78px) !important; line-height: 1.02; letter-spacing: -2.6px; }
  .hero-subtitle { max-width: 660px; font-size: 18px; line-height: 1.65; }
  .hero-ctas { width: auto; flex-direction: row; gap: 12px; }
  .pill-btn { width: auto; min-width: 205px; padding: 16px 28px; font-size: 15px; }

  section {
    margin: 18px;
    padding: 94px clamp(44px, 7vw, 110px) !important;
    border-radius: 32px;
  }
  .section-head { max-width: 740px; gap: 13px; }
  .section-head h2 { font-size: 48px !important; letter-spacing: -1.3px; }
  .eyebrow { font-size: 12px; letter-spacing: 2px; }

  #pele,
  #servicos,
  #blog { gap: 50px; }

  .tool-tabs {
    width: auto;
    display: flex;
    grid-template-columns: none;
    gap: 7px;
    padding: 6px;
    border-radius: 999px;
  }
  .tool-tab { min-width: 150px; min-height: 44px; padding: 10px 20px !important; border-radius: 999px; font-size: 13px !important; }
  .tool-panel { min-height: 310px; justify-content: center; }
  .tone-grid { display: flex; gap: 16px; }
  .tone-swatch { width: 100px; }
  .quiz-options { max-width: 580px; }

  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1180px; }
  .service-card,
  .blog-card { min-height: 260px; padding: 30px 28px; }
  .service-card h3 { font-size: 27px !important; }

  .sobre-grid { grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr) !important; gap: clamp(54px, 7vw, 100px) !important; max-width: 1180px; }
  .sobre-grid h2 { font-size: 48px !important; }
  .sobre-panel { min-height: 430px; }
  .sobre-bullets { display: grid; grid-template-columns: 1fr; }

  #contato { gap: 36px; }
  #contato > div:first-child { max-width: 700px !important; }
  #contato > .btn-primary { width: auto; min-width: 280px; }
  .contact-grid { max-width: 1050px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .contact-block { min-height: 112px; justify-content: center; padding: 20px; }

  footer {
    margin: 18px;
    padding: 44px clamp(34px, 5vw, 74px);
    flex-direction: row;
    align-items: center;
    border-radius: 28px;
  }
  .bottom-safe-space { height: 0; }

  .native-mac body {
    padding: 0;
    background: var(--page-bg);
  }
  .native-mac #app {
    width: 100vw;
    height: 100svh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .native-mac .mac-windowbar { display: none; }
  .native-mac .top-nav { top: 0; }
}

@media (min-width: 900px) and (max-width: 1120px) {
  .top-nav .nav-link:nth-of-type(2),
  .top-nav .nav-link:nth-of-type(4) { display: none !important; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-card:last-child { grid-column: span 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

/* Analytics consent UI. It is only displayed after a Google tag ID is configured. */
.consent-banner {
  position: fixed;
  z-index: 140;
  right: 16px;
  bottom: 18px;
  left: 16px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.62);
  border-radius: 22px;
  color: var(--text-heading);
  background: var(--ios-glass-strong);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  backdrop-filter: blur(30px) saturate(190%);
  box-shadow: 0 18px 48px rgba(20,26,21,0.28), inset 0 1px 0 rgba(255,255,255,0.52);
}
.consent-banner[hidden] { display: none; }
.consent-title { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 800; }
.consent-text { margin: 0; color: var(--text-body); font-size: 12px; line-height: 1.5; }
.consent-text a { color: var(--accent); font-weight: 700; }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.consent-button {
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid var(--ios-hairline);
  border-radius: 14px;
  color: var(--text-heading);
  background: var(--ios-surface);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}
.consent-button.primary { border-color: var(--accent); color: #fff; background: var(--accent); }
.consent-settings {
  position: fixed;
  z-index: 110;
  right: 18px;
  bottom: 18px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ios-hairline);
  border-radius: 50%;
  color: var(--text-heading);
  background: var(--ios-glass-strong);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.16);
  cursor: pointer;
  font-size: 15px;
}
.consent-settings[hidden] { display: none; }

@media (min-width: 900px) {
  .consent-banner { right: 28px; bottom: 28px; left: auto; width: 410px; padding: 20px; }
  .consent-settings { right: 28px; bottom: 28px; }
}

/* --------------------------------------------------------------------------
   Fotos personalizadas (painel /admin)
   Quando nada foi enviado ainda, os elementos de foto ficam ocultos (via
   estilo inline "display:none" e onerror removendo a tag) e o visual padrão
   acima continua exatamente igual a antes.
   -------------------------------------------------------------------------- */

.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(20,22,18,0.28) 0%, rgba(20,22,18,0.58) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
header.has-photo .hero-scrim { opacity: 1; }
header.has-photo .hero-eyebrow,
header.has-photo .hero-subtitle {
  color: #fffaf3;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}

.sobre-panel { position: relative; overflow: hidden; }
.sobre-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.home-result-preview > div,
.case-image { position: relative; overflow: hidden; }
.case-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   Agendamento online (modal de reserva + pagamento Pix via Asaas)
   -------------------------------------------------------------------------- */

.booking-overlay {
  position: absolute;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20, 22, 18, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.booking-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 22px;
  border-radius: 26px;
  background: var(--ios-glass-strong);
  border: 1px solid var(--ios-hairline);
  box-shadow: var(--ios-shadow);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  backdrop-filter: blur(30px) saturate(190%);
}

.booking-modal-title { margin: 0; font-size: 22px; font-weight: 700; padding-right: 24px; }
.booking-modal-subtitle { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-body); }

.booking-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--ios-hairline);
  background: var(--ios-surface);
  color: var(--text-heading);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.booking-field { display: flex; flex-direction: column; gap: 6px; }
.booking-field label { font-size: 12px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.booking-field input,
.booking-field select,
.booking-field textarea {
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--page-bg);
  color: var(--text-heading);
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
.booking-field input:focus,
.booking-field select:focus,
.booking-field textarea:focus { border-color: var(--accent); }
.booking-field-row { display: flex; gap: 10px; }
.booking-field-row .booking-field { flex: 1; min-width: 0; }

.booking-submit { width: 100%; justify-content: center; padding: 14px 18px; border-radius: 12px; font-size: 15px; }
.booking-submit:disabled { opacity: 0.65; cursor: default; }
.booking-copy { width: 100%; justify-content: center; padding: 12px 18px; border-radius: 12px; font-size: 13px; }

.booking-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(179, 38, 30, 0.12);
  color: #b3261e;
  font-size: 13px;
}
:root[data-theme="dark"] .booking-error { background: rgba(255, 138, 128, 0.16); color: #ff8a80; }

.booking-fineprint { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-faint); }
.booking-waiting { text-align: center; }

.booking-qr {
  width: 200px;
  height: 200px;
  align-self: center;
  border-radius: 14px;
  border: 1px solid var(--ios-hairline);
  background: #fff;
  padding: 8px;
}

.booking-pix-code { font-family: monospace; font-size: 11px; resize: none; }

.booking-checkout-link {
  align-self: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-dark);
  text-decoration: underline;
}

.booking-confirmed-icon {
  align-self: center;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 26px;
  margin: 0 0 4px;
}

@media (min-width: 900px) {
  .booking-modal { max-width: 460px; padding: 34px 30px; }
}


/* Aurora Phase 1 — editorial identity layer.
   Additive by design: existing tools, booking, content and integrations remain available. */
:root{
  --bg:#f6f2ec;--bg-2:#e9e4dc;--ink:#1a1714;--ink-2:#3d3630;--muted:#6e6358;
  --line:#ddd5ca;--photo:#ddd5ca;--green:#2f4538;--clay:#9c6547;--on-green:#f6f2ec;
  --font-display:'Bodoni Moda',Georgia,serif;--font-body:'Jost',system-ui,sans-serif;
}
body{font-family:var(--font-body);font-weight:300;background:var(--bg);color:var(--ink)}
.iphone-screen{background:var(--bg)}
.aurora-kicker{display:block;font:400 10px/1.4 var(--font-body);letter-spacing:.3em;color:var(--muted);margin-bottom:22px}
.aurora-editorial,.aurora-principles,.aurora-professional{max-width:1080px;margin:0 auto;padding:92px 6vw}
.aurora-editorial h2,.aurora-professional h2,.aurora-invite h2{font:400 clamp(30px,5vw,52px)/1.08 var(--font-display);margin:0;max-width:820px;text-wrap:balance}
.aurora-lead,.aurora-professional p,.aurora-invite p{font:300 15px/1.75 var(--font-body);color:var(--ink-2);max-width:680px}
.aurora-numbered{margin-top:48px;border-top:1px solid var(--line)}
.aurora-numbered>div{display:grid;grid-template-columns:52px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline}
.aurora-numbered b{font:400 12px var(--font-body);letter-spacing:.15em;color:var(--clay)}
.aurora-numbered span{font:400 16px/1.5 var(--font-body)}
.aurora-principles>div{display:grid;grid-template-columns:minmax(150px,.7fr) 1fr;gap:24px;padding:22px 0;border-top:1px solid var(--line)}
.aurora-principles h3{font:400 25px/1.15 var(--font-display);margin:0}
.aurora-principles p{margin:0;color:var(--ink-2);line-height:1.7}
.aurora-principles blockquote{font:italic 400 clamp(25px,4vw,38px)/1.35 var(--font-display);text-align:center;margin:72px auto 0;padding:36px 0;border-top:1px solid var(--clay);border-bottom:1px solid var(--clay);max-width:780px}
.aurora-professional{display:grid;grid-template-columns:minmax(280px,.85fr) 1fr;gap:64px;align-items:center}
.aurora-professional-photo{min-height:520px;background:var(--photo);display:grid;place-items:center;position:relative;color:var(--muted);font-size:10px;letter-spacing:.16em;text-align:center}
.aurora-professional-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.aurora-reg{font-size:10px!important;letter-spacing:.25em;color:var(--clay)!important;text-transform:uppercase}
.aurora-professional dl{margin:30px 0 0;border-top:1px solid var(--line)}
.aurora-professional dl div{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:14px 0;border-bottom:1px solid var(--line)}
.aurora-professional dt{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.aurora-professional dd{margin:0;font-size:13px;color:var(--ink-2)}
.aurora-invite{padding:80px 6vw;background:var(--green);color:var(--on-green)}
.aurora-invite .aurora-kicker,.aurora-invite p{color:var(--on-green);opacity:.82}
.aurora-invite a{display:inline-flex;align-items:center;justify-content:center;min-height:52px;margin-top:20px;padding:0 28px;background:var(--on-green);color:var(--green);font:500 11px var(--font-body);letter-spacing:.26em}
@media(max-width:640px){
 .aurora-editorial,.aurora-principles,.aurora-professional{padding:88px 5vw}
 .aurora-professional{grid-template-columns:1fr;gap:42px}
 .aurora-professional-photo{min-height:480px}
 .aurora-principles>div{grid-template-columns:1fr;gap:8px}
 .aurora-professional dl div{grid-template-columns:1fr;gap:5px}
}