:root {
  --exemplo-bg: #F7FAFC;
  --exemplo-ink: #0F2B46;
  --exemplo-accent: #2FA6E0;
  --exemplo-prata: #C9D6E0;
  --exemplo-line: rgba(15, 43, 70, 0.14);
  --exemplo-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --exemplo-sans: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --exemplo-progress: 0;
}

html[data-exemplo-bucket="dentista"] {
  --exemplo-bg: #F7FAFC; --exemplo-ink: #0F2B46;
  --exemplo-accent: #2FA6E0; --exemplo-prata: #C9D6E0;
  --exemplo-line: rgba(15, 43, 70, 0.14);
}

html[data-exemplo-bucket="psicologa"] {
  --exemplo-bg: #F5EFE6; --exemplo-ink: #4A3F35;
  --exemplo-accent: #C97B5D; --exemplo-prata: #9CAF88;
  --exemplo-line: rgba(74, 63, 53, 0.16);
}

html[data-exemplo-bucket="nutricionista"] {
  --exemplo-bg: #F4F7F0; --exemplo-ink: #2F3E2E;
  --exemplo-accent: #6FA95C; --exemplo-prata: #D97C5A;
  --exemplo-line: rgba(47, 62, 46, 0.16);
}

body {
  margin: 0;
  background: var(--exemplo-bg);
  color: var(--exemplo-ink);
  font-family: var(--exemplo-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
p { max-width: 64ch; }
.exemplo-shell { position: relative; z-index: 1; }


#exemplo-film {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
#exemplo-film canvas { display: block; width: 100%; height: 100%; }


.exemplo-progress {
  position: fixed; top: 0; left: 0; z-index: 80;
  height: 2px; width: 100%;
  background: var(--exemplo-accent);
  transform: scaleX(var(--exemplo-progress, 0));
  transform-origin: 0 50%;
  pointer-events: none;
}


[data-act-root] { position: relative; }

[data-act-root][data-act-id="0"] {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(20px, 7vw, 110px);
  overflow: hidden;
}

[data-act-root][data-act-id="0"] > :not(.exemplo-mega) {
  position: relative; z-index: 1;
  max-width: min(620px, 46vw);
}


.act-root { position: relative; }

.act-root.pin .act-pin-viewport {
  position: sticky; top: 0;
  height: 100vh; height: 100svh; height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}

.act-root.pin .act-pin-viewport > * {
  position: relative; z-index: 1;
  width: min(620px, 88vw);
}

.act-root.flow {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16vh clamp(20px, 7vw, 110px) 14vh;
}

.act-root.flow > *:not(.exemplo-mega) {
  position: relative; z-index: 1;
  width: min(760px, calc(100% - 40px));
  margin: 0 auto;
}





.act-root.flow.tmpl {
  display: block;
  min-height: 0;
  padding: 0;
}

.act-root.flow.tmpl > *:not(.exemplo-mega) {
  width: auto;
  margin: 0;
}


.exemplo-mega {
  position: absolute; top: 4vh; left: 0; z-index: 0;
  font-family: var(--exemplo-serif);
  font-weight: 800;
  font-size: clamp(120px, 23vw, 380px);
  line-height: 1;
  letter-spacing: -0.05em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  color: var(--exemplo-ink);
  opacity: 0.07;
  -webkit-text-stroke: 1.5px var(--exemplo-ink);
}

@supports not (-webkit-text-stroke: 1px #fff) {
  .exemplo-mega { opacity: 0.16; }
}

.act-root.flow .exemplo-mega { top: 6vh; font-size: clamp(72px, 16vw, 240px); }



[data-act-root] h2, .act-root:not(.tmpl) h2 {
  margin: 0;
  font-family: var(--exemplo-serif);
  font-weight: 340;
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: var(--exemplo-ink);
  font-size: clamp(38px, 5.8vw, 82px);
}

[data-act-root][data-act-id="0"] h2 { font-size: clamp(46px, 8vw, 112px); }

[data-act-root] p, .act-root:not(.tmpl) p { margin: 26px 0 0; }


.exemplo-rail {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin: 52px 0 0;
  padding: 0;
}

.exemplo-rail li { border-top: 2px solid var(--exemplo-line); padding-top: 18px; }


.exemplo-faq {
  border-bottom: 1px solid var(--exemplo-line);
  max-height: min(80vh, 420px);
  overflow-y: auto;
}

.exemplo-faq:first-of-type { margin-top: 44px; border-top: 1px solid var(--exemplo-line); }

.exemplo-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--exemplo-serif);
  font-weight: 340;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  color: var(--exemplo-ink);
}

.exemplo-faq summary::-webkit-details-marker { display: none; }

.exemplo-faq summary::after {
  content: "+";
  flex: 0 0 26px;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--exemplo-line);
  color: var(--exemplo-accent);
  font-size: 0.9rem;
  transition: transform 0.3s;
}

.exemplo-faq[open] summary::after {
  content: "−";
  background: var(--exemplo-accent);
  border-color: var(--exemplo-accent);
  color: #fff;
}

.exemplo-faq p { margin: 0; padding: 0 44px 20px 0; font-size: 0.94rem; }


.exemplo-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 44px;
  margin-top: 40px;
  padding: 14px 30px;
  background: var(--exemplo-accent);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.exemplo-cta:hover { opacity: 0.92; }


.exemplo-final-cta {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
}

.exemplo-agendar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 16px 30px;
  background: var(--exemplo-accent);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.exemplo-micro {
  margin-top: 22px;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--exemplo-ink);
  opacity: 0.75;
}

.exemplo-selo {
  position: relative; z-index: 2;
  padding: 40px clamp(20px, 6vw, 80px);
  font-size: 0.875rem;
  background: var(--exemplo-ink);
  color: var(--exemplo-prata);
}

.exemplo-selo a { color: var(--exemplo-accent); text-decoration: none; }

.exemplo-deligus-label,
.exemplo-deligus-note,
.exemplo-deligus-mail,
.exemplo-deligus-copy { font-size: 0.875rem; }

.exemplo-deligus-copy {
  padding: 0.25em 0.6em;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  cursor: pointer;
}

.static-legend[data-static-legend] { font-size: 0.875rem; }

.exemplo-demo-notice {
  margin: 0;
  padding: .55em 1.2em;
  font-size: 15px;
  line-height: 1.4;
  background: #111;
  color: #fff;
}

.exemplo-demo-notice--global {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 91;
  text-align: center;
}

.nav,
.site-header {
  top: var(--exemplo-notice-h, 0px) !important;
}

html.mobile-scroll-snap .exemplo-demo-notice { scroll-snap-align: start; }


[data-exemplo-spacer] { display: block; }


@media (max-width: 860px) {
  html.mobile-scroll-snap {
    scroll-snap-type: y mandatory;
    scroll-behavior: auto;
    scroll-padding-top: var(--exemplo-chrome-h, 0px);
  }

  html.mobile-scroll-snap body { scroll-behavior: auto; }

  html.mobile-scroll-snap #exemplo-window > *,
  html.mobile-scroll-snap [data-act-root],
  html.mobile-scroll-snap .act-root[data-act-id] {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin-top: var(--exemplo-chrome-h, 0px);
  }

  html.mobile-scroll-snap [data-exemplo-spacer] {
    scroll-margin-top: var(--exemplo-chrome-h, 0px);
  }

  html.mobile-scroll-snap .act-root.pin { height: 100dvh !important; }
  html.mobile-scroll-snap .act-root.pin .act-pin-viewport { position: static; height: 100dvh; }
  html.mobile-scroll-snap .act-root.flow { min-height: 100dvh; }
  html.mobile-scroll-snap .act-root.flow.tmpl { min-height: 0; }
  html.mobile-scroll-snap [data-exemplo-spacer] { height: 100dvh !important; }

  .exemplo-cta, .exemplo-agendar { width: 100%; max-width: 480px; }
  .exemplo-rail { grid-template-columns: 1fr; gap: 26px; }
  .exemplo-mega { top: 8vh; font-size: clamp(72px, 22vw, 180px); }
  [data-act-root][data-act-id="0"] > :not(.exemplo-mega) { max-width: 100%; }
  .act-root.flow { padding: 13vh 22px 12vh; }
}

@media (max-width: 520px) {
  [data-act-root][data-act-id="0"], .act-root.flow { padding-left: 18px; padding-right: 18px; }
  .exemplo-mega { font-size: clamp(56px, 24vw, 120px); }
  [data-act-root] h2, .act-root:not(.tmpl) h2 { font-size: clamp(30px, 9vw, 44px); }
  .exemplo-faq summary { font-size: 1.05rem; }
  .exemplo-cta { padding: 12px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html.mobile-scroll-snap { scroll-snap-type: y proximity; }
  .act-root *,
  .exemplo-cta,
  .exemplo-agendar,
  .exemplo-progress { transition: none !important; }
}