/* ==========================================================================
   CrIAmos V2 — componentes (mobile first)
   Motivos recorrentes: ponto orbital (.orbit / .btn__dot / .cue), linha curva (.arc-line).
   ========================================================================== */

/* Wordmark ---------------------------------------------------------------- */
.wordmark { position: relative; display: inline-flex; align-items: flex-end; min-height: 44px; font-family: var(--font-display); font-size: 1.32rem; font-weight: 500; letter-spacing: 0.06em; line-height: 1; color: var(--fg); padding-top: 0.5em; }
.wordmark__text { position: relative; z-index: 1; }
.wordmark__ia { letter-spacing: 0.02em; }
.wordmark__arc { position: absolute; left: 22%; top: -0.05em; width: 1.9em; height: 0.85em; color: var(--champagne); overflow: visible; }
.wordmark--footer { font-size: 2rem; }

/* Cabeçalho --------------------------------------------------------------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 120; height: var(--header-h); padding: env(safe-area-inset-top) var(--pad-x) 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; color: var(--fg); transition: background-color 400ms ease; }
.site-header::after { content: ""; position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: 0; height: 1px; background: var(--line); opacity: 0; transition: opacity 400ms ease; }
.site-header.is-scrolled { background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.site-header.is-scrolled::after { opacity: 1; }
@supports not (background: color-mix(in srgb, red 50%, blue)) { .site-header.is-scrolled { background: var(--bg); } }
html[data-page="home"] .site-header:not(.is-scrolled) { color: var(--cream-3); }
.site-header__page { justify-self: center; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-muted); opacity: 0; transform: translateY(4px); transition: opacity 400ms ease, transform 400ms ease; }
.site-header.is-scrolled .site-header__page { opacity: 1; transform: none; }
.menu-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 500; color: inherit; -webkit-tap-highlight-color: transparent; }
.menu-btn__lines { display: inline-flex; flex-direction: column; gap: 5px; width: 22px; }
.menu-btn__lines i { display: block; height: 1.5px; background: currentColor; transition: transform 400ms var(--ease-out); transform-origin: center; }
html.menu-open .menu-btn__lines i:first-child { transform: translateY(3.25px) rotate(45deg); }
html.menu-open .menu-btn__lines i:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* Menu -------------------------------------------------------------------- */
.menu { position: fixed; inset: 0; z-index: 110; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--header-h) + 24px) var(--pad-x) calc(32px + env(safe-area-inset-bottom)); background: var(--brown-100); color: var(--cream-3); background-image: radial-gradient(120% 70% at 20% 100%, rgba(121, 83, 51, 0.45), transparent 60%), radial-gradient(80% 50% at 90% 0%, rgba(176, 135, 93, 0.16), transparent 60%); opacity: 0; visibility: hidden; transition: opacity 450ms var(--ease-out), visibility 0s linear 450ms; }
.menu[hidden] { display: flex; }
html.menu-open .menu { opacity: 1; visibility: visible; transition-delay: 0s; }
html.menu-open { overflow: hidden; }
html.menu-open .site-header { color: var(--cream-3); background: transparent; backdrop-filter: none; }
html.menu-open .site-header::after, html.menu-open .site-header__page { opacity: 0; }
.menu__list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 40px; }
.menu__list a { display: flex; align-items: baseline; gap: 16px; padding: 10px 0; font-family: var(--font-display); font-size: clamp(2.1rem, 9vw, 3rem); line-height: 1.1; color: var(--cream-3); opacity: 0; transform: translateY(16px); transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out); }
html.menu-open .menu__list li:nth-child(1) a { transition-delay: 80ms; }
html.menu-open .menu__list li:nth-child(2) a { transition-delay: 150ms; }
html.menu-open .menu__list li:nth-child(3) a { transition-delay: 220ms; }
html.menu-open .menu__list li:nth-child(4) a { transition-delay: 290ms; }
html.menu-open .menu__list a { opacity: 1; transform: none; }
.menu__list a[aria-current="page"] .menu__label { color: var(--champagne); font-style: italic; }
.menu__num { font-family: var(--font-ui); font-size: var(--fs-label); letter-spacing: var(--track-label); color: var(--champagne); min-width: 1.6em; }
.menu__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; border-top: 1px solid rgba(233,209,178,0.16); padding-top: 20px; }
.menu__tag { font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: rgba(233,209,178,0.6); }
.menu__contact { display: flex; gap: 16px; font-size: var(--fs-small); color: var(--cream); }

/* Ponto orbital (motivo 1) ------------------------------------------------ */
.orbit { position: relative; display: inline-block; width: 14px; height: 14px; flex: 0 0 auto; vertical-align: middle; }
.orbit::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid currentColor; opacity: 0.28; }
.orbit b { position: absolute; left: 50%; top: -1px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--champagne); transform-origin: 2.5px 8px; animation: orbit-spin 7s linear infinite; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }

/* Linha curva (motivo 2) --------------------------------------------------- */
.arc-line { color: var(--champagne); overflow: visible; }
.arc-line path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1600ms var(--ease-in-out) 200ms; }
.arc-line circle { opacity: 0; transition: opacity 400ms ease 1600ms; }
.in .arc-line path, .arc-line.in path { stroke-dashoffset: 0; }
.in .arc-line circle, .arc-line.in circle { opacity: 1; }

/* Botões: objeto desenhado — o ponto percorre a borda como a órbita do logo ---- */
.btn { position: relative; display: inline-flex; align-items: center; min-height: 56px; padding: 0 30px; border-radius: 2px; font-family: var(--font-ui); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.2; text-align: left; border: 1px solid currentColor; overflow: visible; -webkit-tap-highlight-color: transparent; transition: transform 200ms var(--ease-out), background-color 300ms ease, color 300ms ease, box-shadow 300ms ease; }
.btn::after { content: ""; position: absolute; left: 10%; right: 10%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--champagne), transparent); opacity: 0; transition: opacity 400ms ease; }
.btn__dot { position: absolute; left: -4px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--champagne); box-shadow: 0 0 0 2px var(--bg); pointer-events: none; }
.btn:hover .btn__dot, .btn:focus-visible .btn__dot, .btn:active .btn__dot { animation: dot-travel 900ms var(--ease-in-out) forwards; }
.btn:hover::after, .btn:active::after { opacity: 1; }
.btn:active { transform: translateY(1px); }
@keyframes dot-travel { 0% { left: -4px; top: 50%; } 50% { left: calc(50% - 3px); top: -4px; margin-top: 0; } 100% { left: calc(100% - 3px); top: 50%; margin-top: -3.5px; } }
.btn--primary { background: var(--ink); color: var(--ivory); border-color: var(--ink); --bg: var(--ivory); }
.btn--ghost { background: transparent; color: var(--fg); border-color: color-mix(in srgb, currentColor 40%, transparent); }
.btn--cream { background: var(--cream); color: var(--brown-100); border-color: var(--cream); --bg: var(--brown-100); }
html[data-world="brown"] .btn--primary { background: var(--cream); color: var(--brown-100); border-color: var(--cream); --bg: var(--brown-100); }
.btn--ghost .btn__dot { box-shadow: 0 0 0 2px var(--bg); }

/* Link de texto com ponto orbital */
.textlink { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--font-ui); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg); -webkit-tap-highlight-color: transparent; }
.textlink::after { content: ""; position: absolute; }
.textlink:hover, .textlink:focus-visible { color: var(--accent); }

/* Rodapé ------------------------------------------------------------------ */
.site-footer { background: var(--brown-000); color: var(--cream-3); padding: 72px var(--pad-x) calc(36px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 32px; }
.site-footer .wordmark { color: var(--cream-3); }
.site-footer__tag { margin-top: 10px; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: rgba(233,209,178,0.55); }
.site-footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.site-footer__nav a { font-size: var(--fs-small); color: rgba(243,232,216,0.85); min-height: 44px; display: inline-flex; align-items: center; }
.site-footer__nav a[aria-current="page"] { color: var(--champagne); }
.site-footer__contact { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-small); color: var(--cream); }
.site-footer__contact a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer__legal { font-size: 0.78rem; color: rgba(233,209,178,0.45); border-top: 1px solid rgba(233,209,178,0.12); padding-top: 22px; }

/* Lançamento (foguete + fumaça) -------------------------------------------- */
.launch { position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: 0; overflow: hidden; contain: strict; }
.launch.is-on { opacity: 1; }
.launch__smoke { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; }
.launch__rocket { position: absolute; left: 50%; bottom: -2vh; width: clamp(96px, 30vw, 150px); height: auto; transform: translate(-50%, 104%) rotate(-7deg); transform-origin: 50% 30%; will-change: transform; backface-visibility: hidden; filter: drop-shadow(0 30px 40px rgba(0,0,0,0.4)); }
.launch__glow { position: absolute; left: 50%; bottom: -2vh; width: 26vw; height: 26vw; margin-left: -13vw; border-radius: 50%; background: radial-gradient(circle, rgba(243,232,216,0.9), rgba(233,209,178,0.35) 35%, rgba(233,209,178,0) 70%); opacity: 0; will-change: transform, opacity; }

/* Chegada: a fumaça se dissipa e revela a página ------------------------- */
.arrive { position: fixed; inset: 0; z-index: 190; pointer-events: none; opacity: 0; visibility: hidden; }
.arrive::before { content: ""; position: absolute; inset: 0; background: var(--ivory); opacity: 1; transition: opacity 700ms ease; }
.arrive__smoke { position: absolute; inset: 0; width: 100%; height: 100%; }
html.is-arriving .arrive { opacity: 1; visibility: visible; }
html.is-arriving.arrive-reveal .arrive::before { opacity: 0; }
html.is-arriving .page { transform: translateY(10px); transition: transform 1100ms var(--ease-out); }
html.is-arriving.arrive-reveal .page { transform: none; }
body.is-leaving { opacity: 0; transition: opacity 260ms ease; }

@media (min-width: 900px) {
  .btn { min-height: 60px; padding: 0 36px; }
  .site-footer { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-areas: "brand nav contact" "legal legal legal"; align-items: start; padding-top: 96px; }
  .site-footer__brand { grid-area: brand; } .site-footer__nav { grid-area: nav; grid-template-columns: 1fr; } .site-footer__contact { grid-area: contact; } .site-footer__legal { grid-area: legal; margin-top: 24px; }
  .menu { justify-content: center; } .menu__list a { font-size: clamp(3rem, 5vw, 4.6rem); }
  .launch__rocket { width: clamp(140px, 13vw, 220px); }
  .launch__glow { width: 14vw; height: 14vw; margin-left: -7vw; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit b { animation: none; }
  .btn:hover .btn__dot, .btn:active .btn__dot { animation: none; }
}

/* V3: nota do Instagram do CRM no rodapé */
.site-footer__hint { color: rgba(233,209,178,0.5); }