/* Casaverso public landing (site/, served at the root of its own Pages project): black opening, then a sticky stage beside the content column.
   Every hidden starting state lives under prefers-reduced-motion: no-preference; on-scroll hidden states exist only once landing.js tags an element, so no JS means nothing is hidden. */
:root {
  --black: #000; --bg: #f5f5f3; --sf: #e9e9e6; --ink: #1d1d1f; --mut: #5e5e62; --line: #cfcfcb;
  --ac: #0f7d45; --ac-strong: #0b6538; --on: #fff; --night: #f5f5f7; --night-mut: #c9c9cf;
  --font: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --expo: cubic-bezier(.16, 1, .3, 1);
  --press: 140ms; --hover: 180ms;
  --pad: 72px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 18px/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 4px; }
p { margin: 0; }
b { font-weight: 600; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--font); font-weight: 600; margin: 0; text-wrap: balance; }
h2 { font-size: 52px; line-height: 1.05; letter-spacing: -.03em; }
h3 { font-size: 21px; line-height: 1.3; letter-spacing: -.01em; }
.sub { margin-top: 20px; max-width: 34em; }
.small { font-size: 16px; color: var(--mut); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--bg); color: var(--ink); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }

/* buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 30px; border: 0; border-radius: 999px; background: var(--ac); color: var(--on);
  font: 500 18px var(--font); text-decoration: none; text-align: center; transition: transform var(--press) var(--expo), background-color var(--hover) ease; }
.btn:active { transform: scale(.97); }
.text-link, .bar a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; transition: text-decoration-color var(--hover) ease; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; transition: text-decoration-color var(--hover) ease, transform var(--press) var(--expo); }
.text-link:active, .bar a:active { transform: scale(.98); }
.cta-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--ac-strong); }
  .text-link:hover, .bar a:hover { text-decoration-color: currentColor; }
}

/* black opening */
.top { background: var(--black); color: var(--night); text-align: center; min-height: 100svh; display: flex; flex-direction: column; overflow: clip; }
.bar { display: flex; align-items: center; gap: 28px; padding: 24px 40px; text-align: left; }
.bar a { display: inline-block; font-size: 16px; padding: 8px 0; transition: text-decoration-color var(--hover) ease, transform var(--press) var(--expo); }
.wordmark { font: 600 21px var(--font); letter-spacing: -.02em; margin-right: auto; }
.bar a.wordmark { font-size: 21px; }
.bar nav { display: flex; gap: 28px; }
.hero-copy { padding: 8px 24px 0; }
.lines { font-size: clamp(44px, 6.67vw, 96px); line-height: 1.02; letter-spacing: -.035em; }
.line { display: block; overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; }
.line > span { display: block; }
.say { font-size: clamp(19px, 1.67vw, 24px); line-height: 1.35; margin-top: 16px; color: var(--night-mut); }
.go { margin-top: 24px; }
.go .cta-row { justify-content: center; }
.hero-pic { margin: 32px 0 0; flex: 1 0 auto; height: max(41.6vw, 46svh); overflow: clip; background: #050805; }
.hero-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }

/* two columns */
.page { display: grid; grid-template-columns: 46% 54%; }
.stage { position: sticky; top: 0; height: 100svh; background: #0e0e0f; overflow: clip; }
.stage img { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 900ms ease; }
.stage img.near, .stage img.on { display: block; }   /* a lazy picture with no box does not load: landing.js brings the others in */
.stage img.on { opacity: 1; }
.stage img[data-k="pronta"] { object-position: 60% 50%; }
.stage img[data-k="dentro"] { object-position: 72% 50%; }
.stage img[data-k="aberta"] { object-position: 68% 50%; }
.stage img[data-k="estrutura"] { object-position: 52% 50%; }
.states { --at: 1; display: none; position: absolute; left: 24px; bottom: 24px; padding: 4px; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--bg); border-radius: 999px; isolation: isolate; }
.js .states { display: grid; }
.thumb { position: absolute; left: 4px; top: 4px; bottom: 4px; width: calc((100% - 8px) / 3); border-radius: 999px; background: var(--ac); transform: translateX(calc(var(--at) * 100%)); transition: transform 500ms var(--expo), opacity var(--hover) ease; z-index: -1; }
.states[data-free] .thumb { opacity: 0; }
.states button { appearance: none; border: 0; background: none; color: var(--ink); cursor: pointer; font: 400 16px var(--font); min-height: 44px; padding: 0 18px; border-radius: 999px; white-space: nowrap; transition: color var(--hover) ease, transform var(--press) var(--expo); }
.states button[aria-pressed="true"] { color: var(--on); font-weight: 500; }
.states button:active { transform: scale(.96); }
.states button:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.col { padding: 0 var(--pad); min-width: 0; }
section { padding-top: 140px; max-width: 640px; }
.intro { min-height: 100svh; padding-top: 0; display: flex; flex-direction: column; justify-content: center; }
.lede { font-size: 32px; line-height: 1.2; letter-spacing: -.02em; font-weight: 500; }
.lede [data-ss] { white-space: nowrap; }
.facts { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 8px; }
.facts b { font-weight: 600; }

/* video and pictures */
.clips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 36px; }
.clips figure, .gallery figure { margin: 0; min-width: 0; }
.clip-box { position: relative; display: block; overflow: clip; background: var(--sf); }
.clips video { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.clip-box .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip-box video { cursor: pointer; }
figcaption { font-size: 16px; line-height: 1.35; margin-top: 8px; }
.play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--ac); color: var(--on); cursor: pointer;
  transition: transform var(--press) var(--expo), opacity var(--hover) ease, background-color var(--hover) ease; }
.play svg { width: 24px; height: 24px; fill: currentColor; }
.play .i-pause, .is-playing .play .i-play { display: none; }
.is-playing .play .i-pause { display: block; }
.play:active { transform: scale(.94); }
.play:focus-visible { outline-color: var(--bg); outline-offset: 2px; }
.is-playing .play { opacity: 0; }
.is-playing .play:focus-visible { opacity: 1; }
.seek { position: absolute; left: 12px; right: 12px; bottom: 8px; height: 28px; display: flex; align-items: center; opacity: 0; transition: opacity var(--hover) ease; }
.is-started .seek, .seek:focus-within { opacity: 1; }
.seek i { position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; background: var(--night); opacity: .4; }
.seek b { position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; background: var(--night); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; transition: transform 250ms linear; }
.seek input { position: relative; width: 100%; height: 28px; margin: 0; opacity: 0; cursor: pointer; }
.seek:focus-within { outline: 2px solid var(--night); outline-offset: 2px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) {
  .play:hover { background: var(--ac-strong); }
  .is-playing .clip-box:hover .play { opacity: 1; }
  .frame img { transition: transform 600ms var(--expo); }
  .frame:hover img { transform: scale(1.03); }
}
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; margin-top: 48px; }
.frame { display: block; overflow: clip; background: var(--sf); }
.gallery img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* steps */
.steps { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 28px; }
.steps p { margin-top: 4px; }
#como-funciona .small { margin-top: 28px; }

/* plans (block rendered by tools/build_site.py) */
.draft { background: var(--sf); padding: 14px 18px; margin-top: 28px; font-size: 16px; }
.bands { border: 0; padding: 0; margin: 32px 0 0; min-width: 0; }
.bands legend { font-weight: 500; margin-bottom: 12px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--sf); font-size: 16px; white-space: nowrap; transition: background-color var(--hover) ease, color var(--hover) ease, transform var(--press) var(--expo); }
.chip:active span { transform: scale(.96); }
.chip input:checked + span { background: var(--ac); color: var(--on); font-weight: 500; }
.chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .chip:hover input:not(:checked) + span { background: var(--line); } }
.bands .small { margin-top: 12px; }
.plans { display: grid; gap: 12px; margin-top: 24px; }
.plan { background: var(--sf); padding: 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(6, auto) 1fr; column-gap: 28px; }
.plan > * { grid-column: 1; margin: 0; }
.plan .tag { grid-column: 2; grid-row: 1; font-weight: 500; }
.plan .price { margin-top: 12px; font-size: 40px; font-weight: 600; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.plan .per, .plan .host, .plan .lead { margin-top: 6px; font-size: 16px; line-height: 1.4; color: var(--mut); }
.plan .lead b { color: var(--ink); font-weight: 500; }
.plan ul { grid-column: 2; grid-row: 2 / -1; margin: 12px 0 0; padding: 0; list-style: none; font-size: 16px; line-height: 1.4; }
.plan li { margin-bottom: 8px; }
.plan .btn { margin-top: 24px; justify-self: start; }
.band-label { white-space: nowrap; }
.table { margin-top: 24px; }
.table summary { cursor: pointer; font-weight: 500; padding: 12px 0; }
.tw { overflow-x: auto; }
.table:not([open]) > .tw { display: none; }
table { border-collapse: collapse; width: 100%; font-size: 16px; }
th, td { padding: 12px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; font-weight: 400; }
th:first-child { padding-left: 0; }
td:last-child, thead th:last-child { padding-right: 0; }
th[scope="row"], thead th:first-child { text-align: left; }
thead th { font-weight: 500; }
tr.sub th, tr.sub td { color: var(--mut); }
.terms { list-style: none; padding: 0; margin: 28px 0 0; }
.terms li { margin-bottom: 8px; }

/* files */
.files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; margin-top: 36px; }
.file .fmt { font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.file p:last-child { font-size: 16px; line-height: 1.45; }
.pill { font-size: 16px; font-weight: 400; letter-spacing: 0; color: var(--mut); }

/* faq */
.faq { margin-top: 28px; }
.faq details { background: var(--sf); margin-top: 10px; transition: background-color var(--hover) ease; }
summary { cursor: pointer; list-style: none; transition: transform var(--press) var(--expo); }
summary::-webkit-details-marker { display: none; }
.faq summary, .table summary { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; font-weight: 500; }
.faq summary { padding: 16px 20px; }
.faq summary::after, .table summary::after { content: "+"; flex: none; font-size: 24px; line-height: 1; transition: transform 400ms var(--expo); }
details[open] > summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 20px 18px; }
summary:active { transform: scale(.99); }
summary:focus-visible { outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) { .faq details:hover { background: var(--line); } }

/* final + footer */
section.final { margin: 140px calc(var(--pad) * -1) 0; padding: 96px var(--pad); max-width: none; background: var(--black); color: var(--night); }
.final .sub { color: var(--night-mut); margin-bottom: 28px; }
.final h2 { max-width: 12em; }
.final .btn.ghost { background: #2a2a2d; }
.contact { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.contact-tbd { margin-top: 20px; font-size: 16px; color: var(--night-mut); }
.foot { padding: 36px 0 48px; font-size: 16px; display: grid; gap: 6px; }
.placeholder { padding: 96px 20px; max-width: 640px; margin: 0 auto; text-align: center; }
.placeholder .wordmark { margin: 0; text-decoration: none; }
.placeholder h1 { font-size: clamp(36px, 7vw, 52px); line-height: 1.05; letter-spacing: -.03em; margin: 32px 0 0; }
.placeholder .sub { margin: 16px auto 28px; }
.placeholder p:last-child { margin-top: 20px; }

@media (max-width: 1180px) {
  :root { --pad: 40px; }
  h2 { font-size: 44px; }
  .plan { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .plan .tag { grid-column: 1; grid-row: auto; margin-top: 16px; }
  .plan ul { grid-column: 1; grid-row: auto; margin-top: 8px; }
  .plan .btn { justify-self: stretch; }
}
@media (max-width: 900px) {
  :root { --pad: 20px; }
  .page { display: block; }
  .stage { position: relative; height: 44svh; }
  .states { left: 50%; bottom: 12px; width: max-content; translate: -50% 0; }
  .states button { padding: 0 12px; }
  h2 { font-size: 34px; }
  section { padding-top: 88px; max-width: none; }
  .intro { min-height: 0; padding-top: 56px; }
  .lede { font-size: 24px; }
  .bar { padding: 20px; }
  .bar nav { display: none; }
  .hero-copy { padding: 4px 20px 0; }
  .hero-pic { margin-top: 24px; }
  section.final { margin-top: 96px; padding: 56px var(--pad); }
}
@media (min-width: 641px) and (max-width: 900px) {
  :root { --pad: 48px; }
  .plan { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(6, auto) 1fr; }
  .plan .tag { grid-column: 2; grid-row: 1; margin-top: 0; }
  .plan ul { grid-column: 2; grid-row: 2 / -1; margin-top: 12px; }
  .plan .btn { justify-self: start; }
}
@media (max-width: 640px) {
  .clips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clips figure:first-child { grid-column: 1 / -1; }
  .files { grid-template-columns: minmax(0, 1fr); }
  .plan { padding: 24px 20px; }
  th, td { padding: 12px 4px; white-space: normal; }
}

/* motion: finished state above, arrivals below */
@media (prefers-reduced-motion: no-preference) {
  /* load sequence, settled by 1.2 s; no JS needed */
  .line > span { animation: line-up 900ms var(--expo) both; animation-delay: calc(100ms + var(--i) * 90ms); }
  .say, .go { animation: load-rise 560ms var(--expo) both; animation-delay: var(--d); }
  .hero-pic img { animation: pic-settle 1050ms var(--expo) 120ms both; }

  /* the incoming stage picture settles while it fades in */
  .stage img.on { animation: stage-settle 1400ms var(--expo) both; }

  /* band change: the new price arrives */
  .price [data-band]:not([hidden]) { display: inline-block; animation: load-rise 360ms var(--expo) both; }
  /* details have no exit: the content arrives, the summary marker turns */
  .faq details[open] p, .table[open] .tw { animation: load-rise 320ms var(--expo) both; }

  /* on-scroll arrivals, varied by content; tagged only by landing.js */
  .r { transition-delay: calc(var(--n, 0) * var(--step, 70ms)); }
  .r-line { overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; }
  .r-line > span { display: block; transition: transform 900ms var(--expo), opacity 240ms ease; transition-delay: inherit; }
  .r-line:not(.in) > span { transform: translateY(110%); opacity: 0; }
  .r-rise { transition-property: opacity, transform; transition-duration: 700ms; transition-timing-function: var(--expo); }
  .r-rise:not(.in) { opacity: 0; transform: translateY(20px); }
  .r-row { transition-property: opacity, transform; transition-duration: 700ms; transition-timing-function: var(--expo); }
  .r-row:not(.in) { opacity: 0; transform: translateX(-24px); }
  .r-card { transition-property: opacity, transform; transition-duration: 900ms; transition-timing-function: var(--expo); }
  .r-card:not(.in) { opacity: 0; transform: translateY(32px) scale(.98); }
  .r-clip { transition-property: opacity, transform; transition-duration: 800ms; transition-timing-function: var(--expo); }
  .r-clip:not(.in) { opacity: 0; transform: scale(.96); }
  .r-pic { transition-property: opacity; transition-duration: 700ms; transition-timing-function: ease; }
  .r-pic:not(.in) { opacity: 0; }
  .r-pic .frame img { transition: transform 1100ms var(--expo); transition-delay: inherit; }
  .r-pic:not(.in) .frame img { transform: scale(1.1); }
  .r-fade { transition-property: opacity; transition-duration: 800ms; transition-timing-function: ease; }
  .r-fade:not(.in) { opacity: 0; }

  /* hero picture grows to full width, locked to the scrollbar */
  @supports (animation-timeline: scroll()) {
    .hero-pic { transform-origin: 50% 0; animation: pic-grow linear both; animation-timeline: scroll(root block); animation-range: 0 70svh; }
    .hero-copy { animation: copy-lift linear both; animation-timeline: scroll(root block); animation-range: 8svh 60svh; }
  }
}
@keyframes line-up { from { transform: translateY(108%); } to { transform: none; } }
@keyframes load-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pic-settle { from { transform: scale(1.07); } to { transform: none; } }
@keyframes stage-settle { from { transform: scale(1.04); } to { transform: none; } }
@keyframes pic-grow { from { transform: scale(.92); } to { transform: none; } }
@keyframes copy-lift { to { opacity: .25; transform: translateY(-5%); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stage img { transition: opacity 300ms ease; }
  .thumb, .btn, .text-link, .states button, .chip span, summary, summary::after, .play { transition-duration: 0ms; }
}