/* ÍLIA Solutions · site. Tokens copiados de ../tokens.css (guia em ../design-system.md) */
:root {
  --brand-ink: #111111;
  --brand-graphite: #8a8a8a;
  --brand-stone: #d6d4d1;
  --brand-paper: #f3f1ee;
  --brand-orange: #e2733a;

  --bg: #f3f1ee;
  --surface: #ffffff;
  --surface-alt: #e6e4e1;
  --fg: #141414;
  --fg-muted: #5c5c5c;
  --accent: var(--brand-orange);
  --accent-text: #b04a18;
  --border: #d6d4d1;

  --shadow-sm: 0 1px 2px rgba(17,17,17,.06);
  --shadow-md: 0 8px 24px -8px rgba(17,17,17,.12);
  --shadow-lg: 0 24px 60px -20px rgba(17,17,17,.20);

  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(2.75rem, 1.6rem + 4.8vw, 5rem);
  --fs-h1: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --fs-h3: clamp(1.375rem, 1.2rem + .7vw, 1.75rem);
  --fs-body-lg: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --fs-eyebrow: .8125rem;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;

  --container: 1280px;
  --page-margin: var(--space-4);
  --section-y: var(--space-8);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-base: 500ms;
  --dur-slow: 800ms;

  --signature-w: 24px;
  --signature-h: 3px;
  --header-h: 68px;
}
@media (min-width: 768px) {
  :root { --page-margin: var(--space-6); --signature-w: 32px; --signature-h: 4px; --section-y: var(--space-9); }
}
@media (min-width: 1200px) {
  :root { --page-margin: var(--space-8); --section-y: var(--space-10); --header-h: 80px; }
}

/* tema escuro: segue o sistema, a menos que data-theme="light" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111111; --surface: #1a1a1a; --surface-alt: #181818;
    --fg: #f3f1ee; --fg-muted: #a3a3a3; --accent-text: #e9844f; --border: #2e2e2e;
    --shadow-sm: 0 0 0 1px rgba(255,255,255,.06);
    --shadow-md: 0 0 0 1px rgba(255,255,255,.12);
    --shadow-lg: 0 0 0 1px rgba(255,255,255,.14);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111111; --surface: #1a1a1a; --surface-alt: #181818;
  --fg: #f3f1ee; --fg-muted: #a3a3a3; --accent-text: #e9844f; --border: #2e2e2e;
  --shadow-sm: 0 0 0 1px rgba(255,255,255,.06);
  --shadow-md: 0 0 0 1px rgba(255,255,255,.12);
  --shadow-lg: 0 0 0 1px rgba(255,255,255,.14);
  color-scheme: dark;
}

/* base */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 1rem; line-height: 1.6;
       -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
strong { font-weight: 700; }
[hidden] { display: none !important; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--page-margin); }

/* tipografia */
.display, .h1, .h3, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }
.display { font-size: var(--fs-display); line-height: 1.02; }
.h1 { font-size: var(--fs-h1); }
.h3 { font-size: var(--fs-h3); line-height: 1.2; }
.muted { color: var(--fg-muted); }
.eyebrow { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--fg-muted); }
.eyebrow--accent { color: var(--accent-text); }
.eyebrow a { border-bottom: 1px solid currentColor; }
.lead { font-size: var(--fs-body-lg); line-height: 1.6; color: var(--fg-muted); max-width: 34em; }
.lead strong { color: var(--fg); font-weight: 500; }

/* traço-assinatura */
.sig { display: block; width: var(--signature-w); height: var(--signature-h); background: var(--accent); transform-origin: left; }

/* section header: eyebrow, título, traço, lead */
.sh .eyebrow + * { margin-top: var(--space-4); }
.sh .sig { margin-top: var(--space-5); }
.sh .sig + .lead { margin-top: var(--space-6); }
.sh--narrow { max-width: 760px; margin-bottom: var(--space-7); }

/* botões e links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
       background: var(--fg); color: var(--bg); font-weight: 700; font-size: 1rem; padding: 16px 24px;
       border-radius: var(--radius-sm); border: 0; cursor: pointer; white-space: nowrap;
       transition: background var(--dur-fast) var(--ease-in-out), color var(--dur-fast) var(--ease-in-out); }
.btn .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover { background: var(--accent); color: var(--brand-ink); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--light { background: var(--brand-paper); color: var(--brand-ink); }
.btn--sm { padding: 10px 16px; font-size: .9375rem; }
.btn--full { width: 100%; }

.link { position: relative; font-weight: 700; padding-bottom: 2px; }
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent);
               transform: scaleX(.25); transform-origin: left; transition: transform var(--dur-fast) var(--ease-out); }
.link:hover::after { transform: scaleX(1); }
.link--light { color: var(--brand-paper); }

/* cabeçalho */
.header { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h); color: var(--brand-paper);
          transition: background var(--dur-base) var(--ease-in-out), color var(--dur-base) var(--ease-in-out), border-color var(--dur-base); border-bottom: 1px solid transparent; }
.header__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.header__logo svg { width: 92px; height: 53px; }
.header.is-scrolled { background: color-mix(in srgb, var(--bg) 85%, transparent); color: var(--fg);
                      -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: var(--border); }
.header.is-scrolled .nav__cta { background: var(--fg); color: var(--bg); }
.header.is-scrolled .nav__cta:hover { background: var(--accent); color: var(--brand-ink); }

.nav { display: flex; align-items: center; gap: var(--space-6); font-size: .9375rem; font-weight: 500; }
.nav > a:not(.btn) { position: relative; }
.nav > a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--accent);
                            transform: scaleX(0); transform-origin: left; transition: transform var(--dur-fast) var(--ease-out); }
.nav > a:not(.btn):hover::after { transform: scaleX(1); }
.nav__cta { background: var(--brand-paper); color: var(--brand-ink); }

.menu { display: none; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; position: relative; }
.menu span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; transition: transform var(--dur-fast) var(--ease-out); }
.menu span:first-child { top: 18px; }
.menu span:last-child { top: 25px; }
.menu[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 959px) {
  .menu { display: block; }
  .nav { position: fixed; inset: var(--header-h) 0 auto; flex-direction: column; align-items: stretch; gap: 0;
         background: var(--bg); color: var(--fg); padding: var(--space-3) var(--page-margin) var(--space-6);
         border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md);
         opacity: 0; visibility: hidden; transform: translateY(-8px);
         transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast); }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav > a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 1.0625rem; }
  .nav > a:not(.btn)::after { display: none; }
  .nav__cta { margin-top: var(--space-5); background: var(--fg); color: var(--bg); padding: 16px; }
  .header.menu-open { background: var(--bg); color: var(--fg); border-bottom-color: var(--border); }
}

/* hero: sempre escuro, com a onda laranja (único gradiente da marca) */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
        background: var(--brand-ink); color: var(--brand-paper); overflow: hidden; isolation: isolate;
        padding-top: calc(var(--header-h) + var(--space-8)); }
.hero .muted, .section--ink .muted { color: #8f8f8f; }
.hero .eyebrow, .section--ink .eyebrow { color: #a3a3a3; }
.hero .lead, .section--ink .lead { color: #b9b6b1; }
.hero__wave { position: absolute; inset: 0; z-index: -1; pointer-events: none;
              background: radial-gradient(ellipse 75% 55% at 100% 110%, rgba(226,115,58,.55), rgba(122,50,21,.35) 42%, transparent 75%);
              transform: translate3d(0, var(--wave-y, 0px), 0); }
.hero__wave--soft { background: radial-gradient(ellipse 60% 50% at 0% 110%, rgba(226,115,58,.28), rgba(122,50,21,.18) 45%, transparent 75%); }
.hero__grooves { position: absolute; inset: 0; z-index: -1; pointer-events: none;
                 background: repeating-linear-gradient(112deg, rgba(255,255,255,.045) 0 1px, transparent 1px 16px);
                 -webkit-mask-image: linear-gradient(200deg, #000, transparent 70%); mask-image: linear-gradient(200deg, #000, transparent 70%); }
.hero__mono { position: absolute; z-index: -1; right: -12%; top: 8%; width: 95%; max-width: 980px; height: auto; aspect-ratio: 146 / 130;
              fill: none; stroke: rgba(243,241,238,.09); stroke-width: .35; }
.hero__in { padding-bottom: var(--space-8); }
.hero .display { margin-top: var(--space-5); max-width: 11em; }
.hero .sig { margin-top: var(--space-6); }
.hero .lead { margin-top: var(--space-6); max-width: 32em; }
.hero__cta { margin-top: var(--space-7); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-6); }
.hero__foot { display: flex; justify-content: space-between; align-items: center; padding-block: var(--space-5);
              border-top: 1px solid rgba(243,241,238,.12); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: #8f8f8f; }
.hero__scroll { display: inline-flex; gap: var(--space-2); }
.hero__scroll:hover { color: var(--brand-paper); }

/* seções */
.section { position: relative; padding-block: var(--section-y); overflow: hidden; }
.section--alt { background: var(--surface-alt); }
.section--ink { background: var(--brand-ink); color: var(--brand-paper); isolation: isolate; }
.section--ink .hero__wave { z-index: -1; }

.grid-2 { display: grid; gap: var(--space-7); }
@media (min-width: 960px) {
  .grid-2 { grid-template-columns: 5fr 6fr; gap: var(--space-9); align-items: start; }
  .grid-2 > .sh { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
  .grid-2--case { grid-template-columns: 6fr 5fr; align-items: center; }
}

/* história: passos à esquerda, telemóvel parado à direita */
.section.story { overflow: visible; }
.story__grid { display: grid; gap: var(--space-5); }
.story__steps { display: grid; }
.story__step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding-block: var(--space-6);
               opacity: .25; transition: opacity var(--dur-base) var(--ease-out); }
.story__step.is-active { opacity: 1; }
.story__n { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .28em; color: var(--accent-text); }
.story__step h3 { font-size: var(--fs-h2); line-height: 1.12; margin-top: var(--space-3); }
.story__step p { margin-top: var(--space-4); color: var(--fg-muted); font-size: var(--fs-body-lg); max-width: 28em; }
.story__stage { position: sticky; top: calc(var(--header-h) + var(--space-3)); z-index: 2; align-self: start;
                background: var(--bg); padding-block: var(--space-3); order: -1; }
@media (min-width: 960px) {
  .story__grid { grid-template-columns: 1fr 1fr; gap: var(--space-9); }
  .story__stage { order: 0; top: calc(50vh - 260px); background: none; padding: 0; }
  .story__step { min-height: 80vh; }
}

.chat { width: 100%; max-width: 380px; margin-inline: auto; background: var(--surface); border: 1px solid var(--border);
        border-radius: 28px; padding: var(--space-4); box-shadow: var(--shadow-lg); }
.chat__head { display: flex; align-items: center; gap: var(--space-3); padding: 4px 6px 14px; border-bottom: 1px solid var(--border); }
.chat__head b { font-size: .9375rem; }
.chat__sub { display: block; font-size: .8125rem; color: var(--fg-muted); }
.chat__av { width: 36px; height: 36px; border-radius: 999px; background: var(--surface-alt); display: grid; place-items: center; font-weight: 700; font-size: .875rem; }
.chat__dot { margin-left: auto; width: 8px; height: 8px; border-radius: 999px; background: var(--brand-graphite); transition: background var(--dur-base); }
.chat[data-state="4"] .chat__dot { background: var(--accent); }
.chat__chip { margin: 14px auto 0; width: fit-content; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
              color: var(--fg-muted); background: var(--bg); padding: 6px 10px; border-radius: var(--radius-sm); }
.chat[data-state="4"] .chat__chip { color: var(--accent-text); }
.chat__body { position: relative; min-height: 270px; padding: 14px 4px 4px; display: flex; flex-direction: column; gap: 8px; }
.msg { align-self: flex-start; max-width: 82%; background: var(--bg); padding: 10px 14px; border-radius: 16px; border-top-left-radius: 4px;
       font-size: .9375rem; line-height: 1.4; opacity: 0; transform: translateY(12px) scale(.96); transform-origin: left top;
       transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out); }
.msg.is-on { opacity: 1; transform: none; }
.chat[data-state="3"] .msg.is-on:not(.msg--lost) { opacity: .35; }
.msg--lost { font-weight: 500; }
.order { position: absolute; inset: 14px 4px auto; background: var(--bg); border-radius: 16px; padding: var(--space-4);
         opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.order.is-on { opacity: 1; transform: none; }
.order__t { font-weight: 500; }
.order dl { margin-top: var(--space-3); display: grid; gap: 6px; font-size: .875rem; }
.order dl div { display: grid; grid-template-columns: 6em 1fr; gap: var(--space-3); padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.order dt { color: var(--fg-muted); }
.order dd { font-weight: 500; }
.order__ok { display: block; margin-top: var(--space-3); text-align: right; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.chat__note { text-align: center; font-size: .75rem; color: var(--fg-muted); margin-top: var(--space-2); }
@media (max-width: 959px) {
  .chat { max-width: 340px; padding: var(--space-3); border-radius: 22px; }
  .chat__body { min-height: 216px; gap: 6px; }
  .msg { font-size: .875rem; padding: 8px 12px; }
  .order { padding: var(--space-3); }
  .order dl { gap: 4px; }
}

/* serviços: lista editorial numerada, abre ao clicar (inspirada em "Editorial service list", 21st.dev) */
.sh__link { display: inline-block; margin-top: var(--space-6); }
@media (min-width: 960px) {
  .sh--svc { max-width: none; display: grid; grid-template-columns: 5fr 6fr; column-gap: var(--space-9); align-items: end; }
  .sh--svc > .eyebrow, .sh--svc > .h1, .sh--svc > .sig { grid-column: 1; }
  .sh--svc > .lead { grid-column: 2; grid-row: 2 / span 2; margin-top: 0; align-self: end; }
  .sh--svc > .sh__link { grid-column: 2; justify-self: start; }
}
.svc { border-top: 1px solid var(--fg); }
.svc__item { border-bottom: 1px solid color-mix(in srgb, var(--fg) 18%, transparent); }
.svc h3 { font: inherit; letter-spacing: normal; }
.svc__row { width: 100%; display: grid; grid-template-columns: 44px 1fr 24px; align-items: baseline; gap: var(--space-3);
            padding: var(--space-5) 0; background: none; border: 0; cursor: pointer; text-align: left; }
.svc__n { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .2em; color: var(--fg-muted); transition: color var(--dur-fast); }
.svc__t { font-family: var(--font-display); font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem); line-height: 1.15; letter-spacing: -.02em;
          transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast); }
.svc__tag { display: none; font-size: .875rem; color: var(--fg-muted); white-space: nowrap; transition: opacity var(--dur-fast); }
.svc__ico { position: relative; width: 14px; height: 14px; align-self: center; justify-self: end; }
.svc__ico::before, .svc__ico::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--fg-muted);
                                      transition: transform var(--dur-base) var(--ease-out), background var(--dur-fast); }
.svc__ico::after { transform: rotate(90deg); }
.svc__item.is-open .svc__ico::after { transform: rotate(0deg); }
.svc__row:hover .svc__t, .svc__item.is-open .svc__t { transform: translateX(8px); }
.svc__row:hover .svc__n, .svc__item.is-open .svc__n { color: var(--accent-text); }
.svc__row:hover .svc__ico::before, .svc__row:hover .svc__ico::after { background: var(--fg); }
.svc__panel > div { overflow: hidden; }
.svc__panel p { padding: 0 var(--space-6) var(--space-5) calc(44px + var(--space-3) + 8px); color: var(--fg-muted); max-width: 40em; }
.js .svc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-in-out); }
.js .svc__item.is-open .svc__panel { grid-template-rows: 1fr; }
.js .svc__panel p { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.js .svc__item.is-open .svc__panel p { opacity: 1; transform: none; transition-delay: 120ms; }
@media (min-width: 640px) {
  .svc__row { grid-template-columns: 64px 1fr auto 24px; gap: var(--space-5); padding: var(--space-6) 0; }
  .svc__tag { display: block; }
  .svc__panel p { padding-left: calc(64px + var(--space-5) + 8px); }
}

/* títulos: palavras sobem em escada e a parte cinza do topo troca de frase (inspirado em "Shared Axis Y", 21st.dev) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em 0 .16em; margin: -.12em 0 -.16em; }
.w__i { display: inline-block; }
.js .split .w__i { transform: translateY(110%); transition: transform 900ms var(--ease-out); transition-delay: calc(var(--d, 0ms) + var(--wi, 0) * 70ms); }
.js .split.is-in .w__i { transform: none; }
.js .split.reveal { opacity: 1; transform: none; }
.js .split .cycle .w__i { transition: transform 650ms var(--ease-in-out); transition-delay: calc(var(--wi, 0) * 70ms); }
.js .split .cycle.is-out .w__i { transform: translateY(-110%); }
.js .split .cycle.is-pre .w__i { transform: translateY(110%); transition: none; }

/* caso real */
.case { margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--border); max-width: 36em; }
.case .h3 { margin-top: var(--space-4); }
.case p:not(.eyebrow) { margin-top: var(--space-4); color: var(--fg-muted); }

.phone { justify-self: center; width: 100%; max-width: 400px; background: var(--surface); border-radius: var(--radius-lg);
         padding: var(--space-4); box-shadow: var(--shadow-lg); }
.phone__top { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-4);
              border-bottom: 1px solid var(--border); font-size: .9375rem; }
.phone__top small { margin-left: auto; color: var(--fg-muted); font-size: .8125rem; }
.phone__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); }
.bubble { margin: var(--space-5) var(--space-2) var(--space-3); background: var(--bg); border-radius: var(--radius-md); border-top-left-radius: 2px;
          padding: var(--space-5); }
.bubble__t { font-weight: 500; }
.bubble dl { margin-top: var(--space-4); display: grid; gap: var(--space-2); font-size: .9063rem; }
.bubble dl div { display: grid; grid-template-columns: minmax(0, 9.5em) 1fr; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.bubble dl div:last-child { border-bottom: 0; padding-bottom: 0; }
.bubble dt { color: var(--fg-muted); }
.bubble dd { font-weight: 500; }
.bubble__time { display: block; margin-top: var(--space-4); text-align: right; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
.phone figcaption { text-align: center; font-size: .8125rem; color: var(--fg-muted); padding: var(--space-2) 0 var(--space-1); }

/* como funciona */
.steps { display: grid; gap: 0; border-top: 1px solid rgba(243,241,238,.14); }
.steps li { padding-block: var(--space-6); border-bottom: 1px solid rgba(243,241,238,.14); display: grid; grid-template-columns: 56px 1fr; column-gap: var(--space-4); }
.steps__n { font-family: var(--font-display); font-size: 1.5rem; color: #8f8f8f; grid-row: span 2; line-height: 1.2; }
.steps h3 { font-size: var(--fs-h3); line-height: 1.2; }
.steps p { margin-top: var(--space-3); color: #b9b6b1; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, 1fr); border-top: 0; gap: var(--space-5); }
  .steps li { display: block; border-bottom: 0; border-top: 1px solid rgba(243,241,238,.2); padding-block: var(--space-6) 0; }
  .steps__n { display: block; font-size: 2.5rem; margin-bottom: var(--space-7); }
}

/* pacotes */
.packs__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-6); }
.country { display: inline-flex; padding: 4px; border-radius: var(--radius-sm); background: var(--surface-alt); }
.country button { border: 0; background: none; cursor: pointer; padding: 10px 20px; border-radius: 4px; font-weight: 700; font-size: .9375rem; color: var(--fg-muted);
                  transition: background var(--dur-fast), color var(--dur-fast); }
.country button[aria-selected="true"] { background: var(--surface); color: var(--fg); box-shadow: var(--shadow-sm); }

.launch { margin-top: var(--space-7); display: grid; gap: var(--space-4); padding: var(--space-5) 0; border-block: 1px solid var(--border); }
.launch__t { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.02em; margin-top: var(--space-2); }
.launch__d { color: var(--fg-muted); max-width: 30em; }
@media (min-width: 900px) { .launch { grid-template-columns: 1fr auto; align-items: end; gap: var(--space-7); } .launch__d { text-align: right; } }

.packs { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
@media (min-width: 960px) { .packs { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); align-items: stretch; } }
.pack { position: relative; background: var(--surface); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-sm);
        display: flex; flex-direction: column; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.pack:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pack--feat { background: var(--brand-ink); color: var(--brand-paper); }
.pack--feat:hover { box-shadow: var(--shadow-lg); }
.pack__k { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .28em; color: var(--fg-muted); }
.pack--feat .pack__k, .pack--feat .pack__for, .pack--feat .pack__deliv, .pack--feat .price s { color: #a3a3a3; }
.badge { position: absolute; top: var(--space-6); right: var(--space-6); font-size: .6875rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
         border: 1px solid var(--accent); color: #e9844f; border-radius: var(--radius-sm); padding: 5px 9px; }
.pack__name { font-size: 2.5rem; line-height: 1; margin-top: var(--space-3); }
.pack__for { margin-top: var(--space-3); color: var(--fg-muted); }
.price { margin-top: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border); }
.pack--feat .price { border-color: #2e2e2e; }
.price s { display: block; color: var(--fg-muted); font-size: 1rem; }
.price strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 4rem; line-height: 1; letter-spacing: -.03em; margin-top: var(--space-2); }
.price strong small { font-size: 1.75rem; margin-left: 4px; }
.price strong small.cur { margin: 0 6px 0 0; }
.price .from { font-family: var(--font-body); font-size: .9375rem; letter-spacing: 0; color: var(--fg-muted); margin-right: 8px; }
.pack ul { margin-top: var(--space-5); display: grid; gap: var(--space-2); font-size: .9688rem; }
.pack li { position: relative; padding-left: 20px; }
.pack li::before { content: ""; position: absolute; left: 0; top: .8em; width: 9px; height: 1.5px; background: currentColor; opacity: .45; }
.pack li.plus { padding-left: 0; font-weight: 700; }
.pack li.plus::before { display: none; }
.pack__note { margin-top: var(--space-4); font-size: .8125rem; color: var(--fg-muted); }
.pack__deliv { margin-top: auto; padding-top: var(--space-6); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
:root[data-theme="dark"] .pack--feat { box-shadow: 0 0 0 1px rgba(243,241,238,.22); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pack--feat { box-shadow: 0 0 0 1px rgba(243,241,238,.22); } }

.terms { margin-top: var(--space-6); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-5); }
.terms p { color: var(--fg-muted); max-width: 40em; }
.terms strong { color: var(--fg); font-weight: 500; }
.packs__other { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--border); color: var(--fg-muted); }
.packs__other .link { color: var(--fg); margin-left: var(--space-2); white-space: nowrap; }

/* perguntas */
.faq { border-top: 1px solid var(--fg); }
.faq details { border-bottom: 1px solid color-mix(in srgb, var(--fg) 18%, transparent); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--space-5); align-items: baseline;
               padding: var(--space-5) 0; font-family: var(--font-display); font-size: clamp(1.25rem, 1.15rem + .4vw, 1.5rem); line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-body); font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--fg-muted);
                      transition: transform var(--dur-fast) var(--ease-out); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 var(--space-7) var(--space-5) 0; color: var(--fg-muted); max-width: 40em; }

/* contato */
.contact .hero__wave { transform: none; }
.contact__info { margin-top: var(--space-7); display: grid; gap: var(--space-4); }
.contact__info li { display: grid; grid-template-columns: 7.5em 1fr; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid rgba(243,241,238,.12); color: var(--brand-paper); }
.contact__info span { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #8f8f8f; padding-top: 3px; }
.contact__info .link { justify-self: start; }

.form { background: #1a1a1a; border: 1px solid #2e2e2e; border-radius: var(--radius-md); padding: var(--space-6); display: grid; gap: var(--space-5); }
.field { display: grid; gap: var(--space-2); }
.field-row { display: grid; gap: var(--space-5); }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field label { font-size: .875rem; font-weight: 500; color: #b9b6b1; }
.field input, .field select, .field textarea { width: 100%; background: #111111; border: 1px solid #333; border-radius: var(--radius-sm);
        padding: 14px 16px; color: var(--brand-paper); font-size: 1rem; transition: border-color var(--dur-fast); }
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a3a3a3' stroke-width='1.5'/%3E%3C/svg%3E");
        background-repeat: no-repeat; background-position: right 16px center; }
.field textarea { resize: vertical; min-height: 96px; }
.field input::placeholder, .field textarea::placeholder { color: #6b6b6b; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field .is-invalid { border-color: #e9844f; }
.form__note { font-size: .875rem; color: #b9b6b1; min-height: 1.4em; }
.form__note:empty { display: none; }

/* rodapé */
.footer { background: var(--brand-ink); color: #a3a3a3; border-top: 1px solid #222; }
.footer__in { display: grid; gap: var(--space-5); padding-block: var(--space-7); align-items: center; }
.footer__logo { color: var(--brand-paper); }
.footer__logo svg { width: 110px; height: 63px; }
.footer__claim { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .28em; text-transform: uppercase; }
.footer__nav { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); font-size: .9375rem; }
.footer__nav a:hover { color: var(--brand-paper); }
.footer__copy { font-size: .875rem; }
@media (min-width: 900px) {
  .footer__in { grid-template-columns: auto 1fr auto auto; gap: var(--space-7); }
}

/* abertura: o logo monta-se e a cortina sobe */
.intro { display: none; }
.js:not(.no-intro) .intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 100; background: var(--brand-ink); color: var(--brand-paper);
                            clip-path: inset(0 0 0 0); animation: intro-out 800ms var(--ease-in-out) 1700ms forwards; }
.intro__logo { width: min(52vw, 260px); height: auto; overflow: visible; }
.ib { transform-box: fill-box; opacity: 0; transform: translate(-18px, 46px); animation: ib-in 700ms var(--ease-out) forwards; }
.ib:nth-child(2) { animation-delay: 100ms; } .ib:nth-child(3) { animation-delay: 180ms; } .ib:nth-child(4) { animation-delay: 260ms; }
.ib:nth-child(5) { animation-delay: 340ms; } .ib:nth-child(6) { animation-delay: 420ms; } .ib:nth-child(7) { animation-delay: 500ms; }
.ib--acc { transform: translate(12px, -30px); animation-delay: 720ms; }
.intro__sig { transform-box: fill-box; transform-origin: left; transform: scaleX(0); animation: sig-in 600ms var(--ease-out) 900ms forwards; }
.intro__word { opacity: 0; animation: fade-in 600ms var(--ease-out) 1050ms forwards; }
@keyframes ib-in { to { opacity: 1; transform: none; } }
@keyframes sig-in { to { transform: scaleX(1); } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes intro-out { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }

/* topo: rede de pontos e resposta */
.hero__net { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.hero__title { max-width: 11.5em; }
.hero__answer { margin-top: var(--space-6); font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.01em; color: var(--brand-paper); }
.hero__answer .cycle { color: #e9844f; }
.hero .hero__answer + .lead { margin-top: var(--space-4); }
.hero__play { display: inline-flex; align-items: center; gap: var(--space-3); font-weight: 700; color: var(--brand-paper); }
.hero__play-ico { position: relative; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(243,241,238,.35);
                  transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.hero__play-ico::after { content: ""; position: absolute; left: 17px; top: 14px; border-left: 11px solid currentColor; border-block: 8px solid transparent; }
.hero__play:hover .hero__play-ico { border-color: var(--accent); transform: scale(1.08); }

/* filme: começa como um cartão e cresce até a tela cheia */
.film { position: relative; height: 210vh; background: var(--brand-ink); --w0: 62vw; --h0: 56vh; --h1: 100vh; }
.film__sticky { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; }
.film__frame { position: relative; overflow: hidden; background: #1a1a1a;
               width: calc(var(--w0) + (100vw - var(--w0)) * var(--p, 0));
               height: calc(var(--h0) + (var(--h1) - var(--h0)) * var(--p, 0));
               border-radius: calc(24px * (1 - var(--p, 0))); }
.film__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.film.is-empty .film__frame::before { content: "O filme aparece aqui."; position: absolute; inset: 0; display: grid; place-items: center; color: #6b6b6b; }
@media (max-width: 759px) {
  .film { height: 140vh; --w0: 84vw; }
  .film__frame { height: auto; aspect-ratio: 16 / 9; }
}

/* serviços: miniatura que segue o cursor */
.svc-prev { position: fixed; left: 0; top: 0; z-index: 40; width: 240px; height: 160px; pointer-events: none; border-radius: var(--radius-md);
            background: var(--surface); box-shadow: var(--shadow-lg); opacity: 0; transition: opacity 250ms var(--ease-out); }
.svc-prev.is-on { opacity: 1; }
.svc-prev__art { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--fg); stroke-width: 1.5; opacity: 0; transition: opacity 250ms; }
.svc-prev__art.is-on { opacity: 1; }
.svc-prev .acc { fill: var(--accent); stroke: none; }
.svc-prev .acc-s { stroke: var(--accent); stroke-width: 3; }
@media (hover: none), (max-width: 959px) { .svc-prev { display: none; } }

/* como funciona: linha laranja que avança com a rolagem */
.steps-wrap { position: relative; }
.steps__bar { position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent);
              transform-origin: top; transform: scaleY(var(--p, 0)); }
.steps li { transition: opacity var(--dur-base); }
.steps__n { transition: color var(--dur-base); }
.steps li.is-on .steps__n { color: var(--brand-paper); }
@media (max-width: 899px) { .steps { padding-left: var(--space-5); } }
@media (min-width: 900px) {
  .steps__bar { right: 0; bottom: auto; width: auto; height: 2px; transform-origin: left; transform: scaleX(var(--p, 0)); }
}

/* faixa em movimento */
.marquee { overflow: hidden; background: var(--bg); border-block: 1px solid var(--border); padding-block: var(--space-6); }
.marquee__track { display: flex; align-items: center; gap: var(--space-7); width: max-content; will-change: transform; padding-left: var(--space-7); }
.marquee span { font-family: var(--font-display); font-size: clamp(2.75rem, 1.5rem + 5vw, 6.5rem); line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.marquee span:nth-of-type(even) { color: transparent; -webkit-text-stroke: 1px var(--fg); }
.marquee i { flex: none; width: 12px; height: 36px; background: var(--brand-graphite); transform: skewX(-22deg); }

/* pacotes: luz que segue o cursor */
.pack { overflow: hidden; }
.pack::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 300ms;
                background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(17,17,17,.06), transparent 60%); }
.pack--feat::before { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(226,115,58,.16), transparent 60%); }
.pack:hover::before { opacity: 1; }
.pack > *:not(.badge) { position: relative; z-index: 1; }
.badge { z-index: 1; }

/* botões magnéticos */
.magnetic { transition: background var(--dur-fast) var(--ease-in-out), color var(--dur-fast) var(--ease-in-out), transform 300ms var(--ease-out); }

/* cursor próprio (só com rato) */
.cursor { display: none; }
.has-cursor .cursor { display: block; position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; mix-blend-mode: difference; }
.has-cursor .cursor::after { content: ""; position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 999px; background: #fff;
                             transition: width 250ms var(--ease-out), height 250ms var(--ease-out), margin 250ms var(--ease-out), opacity 200ms; }
.has-cursor .cursor.is-hover::after { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
.has-cursor .cursor.is-hidden::after { opacity: 0; }

/* entrada ao rolar: só quando o JS está ativo, para a página nunca ficar vazia */
.js .reveal { opacity: 0; transform: translateY(24px);
              transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
              transition-delay: var(--d, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .sig.reveal { opacity: 1; transform: scaleX(0); transition: transform 600ms var(--ease-out); transition-delay: var(--d, 0ms); }
.js .sig.reveal.is-in { transform: scaleX(1); }
.js .pack.reveal.is-in:hover { transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .sig.reveal { transform: none !important; transition: opacity 200ms linear !important; transition-delay: 0ms !important; }
  .js .split .w__i, .cycle .w__i { transform: none !important; transition: none !important; }
  .hero__wave { transform: none !important; }
  .msg, .order, .story__step { transition: none; }
  .pack, .svc__t { transition: none; }
}