@font-face{font-family:Bricolage;src:url('assets/bricolage.woff2') format('woff2');font-weight:200 800;font-display:swap}

:root{
  --blue:#353fc1;--blue-deep:#263692;--yellow:#ffe065;--yellow-soft:#fff0a8;
  --ink:#10162f;--ink-soft:#3b4262;--mist:#f1f3fa;--white:#fff;
  --on-blue-soft:#dfe2ff;--on-ink-soft:#c9cfea;
  --gutter:clamp(20px,4.5vw,72px);--section:clamp(80px,10vw,144px);
  --ease-out:cubic-bezier(.16,1,.3,1);
  font-family:Bricolage,Arial,sans-serif;color:var(--ink);background:var(--mist);
  scroll-behavior:smooth;scroll-padding-top:88px;scrollbar-color:var(--blue) var(--mist);caret-color:var(--blue);
  -webkit-text-size-adjust:100%;
}
*{box-sizing:border-box}
body{margin:0;font-size:17px;line-height:1.6}
h1,h2,h3{text-wrap:balance;margin:0}
h3{font-weight:700;letter-spacing:-.015em}
p{text-wrap:pretty;margin:0}
ul,ol{list-style:none;margin:0;padding:0}
a{color:inherit;text-decoration:none}
button{font:inherit}
a,button{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--blue);outline-offset:4px;border-radius:4px}
.hero :focus-visible,.header:not(.is-scrolled) :focus-visible{outline-color:var(--yellow)}
::selection{background:var(--yellow);color:var(--ink)}
img{max-width:100%}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
.skip{position:fixed;top:12px;left:12px;z-index:40;padding:14px 18px;border-radius:10px;background:var(--white);color:var(--ink);font-weight:600;transform:translateY(-200%)}
.skip:focus{transform:none}

/* Botões e links */
.button{display:inline-flex;align-items:center;gap:14px;min-height:54px;padding:0 22px;border-radius:12px;font-size:16px;font-weight:600;line-height:1.2;transition:background .2s,transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.button svg,.service-link svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease-out)}
.button:hover svg,.service-link:hover svg{transform:translateX(3px)}
.button-yellow{background:var(--yellow);color:var(--ink);box-shadow:0 12px 28px -16px #10162fcc}
.button-yellow:hover{background:var(--yellow-soft);transform:translateY(-1px);box-shadow:0 16px 32px -14px #10162fcc}
.button-yellow:active{transform:translateY(0)}
/* Toque: o destaque nativo está desligado, então o botão afunda um pouco ao ser tocado */
@media(hover:none){.button:active{transform:scale(.97);transition-duration:.08s}}
.text-link{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;transition:text-decoration-thickness .2s}
.text-link:hover{text-decoration-thickness:2px}

/* Cabeçalho: transparente sobre o azul, vidro fosco sobre as seções claras */
.header{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px var(--gutter);color:var(--white);transition:background .3s,color .3s,box-shadow .3s}
.header.is-scrolled{color:var(--ink);background:#f1f3fac7;-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 1px 0 #10162f14,0 10px 30px -24px #10162f66}
.brand{display:flex;align-items:center;gap:16px;min-height:44px}
.brand img{width:96px;height:auto}
.logo-on-light,.header.is-scrolled .logo-on-blue{display:none}
.header.is-scrolled .logo-on-light{display:block}
.descriptor{font-size:13px;line-height:1.3;max-width:19ch;opacity:.85;padding-left:16px;border-left:1px solid currentColor}
.desktop-nav{display:flex;align-items:center;gap:28px;font-size:16px;font-weight:600}
.desktop-nav a{min-height:44px;display:inline-flex;align-items:center}
.desktop-nav a:not(.nav-cta,.guia-convite):hover{text-decoration:underline;text-underline-offset:6px}
.nav-cta{padding:0 18px;border-radius:12px;background:var(--yellow);color:var(--ink);transition:background .2s}
.nav-cta:hover{background:var(--yellow-soft)}
.nav-cta[aria-current=page]{box-shadow:0 0 0 2px currentColor inset}
@media(prefers-reduced-transparency:reduce){.header.is-scrolled{background:var(--mist);-webkit-backdrop-filter:none;backdrop-filter:none}}
/* Rolou dentro do hero escuro (páginas sem a jornada): vidro tinta pra o texto não passar por baixo do logo */
.header.is-solid:not(.is-scrolled){background:#10162fb8;-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}
@media(prefers-reduced-transparency:reduce){.header.is-solid:not(.is-scrolled){background:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Aba do convite: envelope que se abre sozinho de tempos em tempos (a carta sobe, sai uma nota) e, no desktop,
   uma espiada do convite ao passar o mouse. Fica fora da descida da home (decisão de 14/10/2026). */
.guia-convite{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 15px 0 9px;border-radius:999px;border:1px solid color-mix(in srgb,currentColor 34%,transparent);background:color-mix(in srgb,currentColor 7%,transparent);font-size:15px;font-weight:600;white-space:nowrap;transition:background .25s,border-color .25s}
.guia-convite:hover{background:color-mix(in srgb,currentColor 14%,transparent);border-color:color-mix(in srgb,currentColor 60%,transparent)}
.guia-convite[aria-current=page]{border-color:currentColor}
.envelope{width:32px;height:28px;flex:none;margin-top:-9px;overflow:visible;stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.envelope .env-corpo{fill:var(--yellow)}
.envelope .env-dobra{fill:none;stroke-opacity:.45}
.envelope .env-carta rect{fill:var(--white)}
.envelope .env-selo,.envelope .env-coracao{fill:var(--blue);stroke:none}
.envelope .env-aba-fechada{fill:var(--yellow-soft)}
.envelope .env-aba-aberta{fill:#f5cf3f}
.envelope .env-nota{fill:currentColor;stroke:none;opacity:0}
.envelope .env-aba-fechada,.envelope .env-aba-aberta,.envelope .env-carta,.envelope .env-nota{transform-box:fill-box;transition:transform .4s var(--ease-out)}
.envelope .env-aba-fechada{transform-origin:50% 0;animation:aba-fecha 9s var(--ease-out) 2.5s infinite}
.envelope .env-aba-aberta{transform-origin:50% 100%;transform:scaleY(0);animation:aba-abre 9s var(--ease-out) 2.5s infinite}
.envelope .env-carta{animation:carta-sobe 9s var(--ease-out) 2.5s infinite}
.envelope .env-nota{animation:nota-sobe 9s ease-out 2.5s infinite}
@keyframes aba-fecha{0%,5%{transform:scaleY(1)}9%,35%{transform:scaleY(0)}39%,100%{transform:scaleY(1)}}
@keyframes aba-abre{0%,8%{transform:scaleY(0)}12%,32%{transform:scaleY(1)}36%,100%{transform:scaleY(0)}}
@keyframes carta-sobe{0%,11%{transform:translateY(0)}19%,27%{transform:translateY(-8px)}33%,100%{transform:translateY(0)}}
@keyframes nota-sobe{0%,17%{opacity:0;transform:translate(0,3px) rotate(-10deg)}21%{opacity:1}33%,100%{opacity:0;transform:translate(4px,-8px) rotate(10deg)}}
.guia-convite:is(:hover,:focus-visible) .env-aba-fechada{animation:none;transform:scaleY(0)}
.guia-convite:is(:hover,:focus-visible) .env-aba-aberta{animation:none;transform:scaleY(1)}
.guia-convite:is(:hover,:focus-visible) .env-carta{animation:none;transform:translateY(-8px)}
.guia-convite:is(:hover,:focus-visible) .env-nota{animation:nota-flutua 1.8s ease-in-out infinite}
@keyframes nota-flutua{0%{opacity:0;transform:translate(0,3px) rotate(-10deg)}30%{opacity:1}100%{opacity:0;transform:translate(4px,-9px) rotate(10deg)}}
.guia-convite--movel{display:none}
.espiada{display:none}
@media(hover:hover) and (pointer:fine) and (min-width:768px){
  .espiada{position:absolute;top:calc(100% + 14px);left:50%;z-index:1;display:grid;grid-template-columns:92px 1fr;align-items:center;gap:16px;width:316px;padding:14px 18px 14px 14px;border-radius:18px;background:var(--ink);color:var(--on-ink-soft);font-size:14px;font-weight:500;line-height:1.45;white-space:normal;box-shadow:0 0 0 1px #ffffff1f inset,0 24px 48px -20px #090e20cc;opacity:0;visibility:hidden;transform:translate(-50%,-8px) scale(.97);transform-origin:50% 0;transition:opacity .2s,transform .35s var(--ease-out),visibility 0s .35s;pointer-events:none}
  .espiada::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:16px}
  .espiada::after{content:"";position:absolute;left:50%;top:-6px;width:12px;height:12px;border-radius:2px;background:var(--ink);transform:translateX(-50%) rotate(45deg)}
  .espiada img{display:block;width:92px;height:auto;border-radius:12px;box-shadow:0 0 0 1px #ffffff1a}
  .espiada strong{display:block;margin-bottom:4px;font-size:18px;line-height:1.15;font-weight:720;color:var(--yellow)}
  .espiada-cta{display:inline-block;margin-top:8px;color:var(--white);font-weight:650;text-decoration:underline;text-underline-offset:4px}
  .guia-convite:is(:hover,:focus-visible) .espiada{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);transition:opacity .2s,transform .35s var(--ease-out),visibility 0s;pointer-events:auto}
}

/* Hero */
.hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:max(680px,100svh);max-height:1040px;padding:120px var(--gutter) 96px;background:var(--blue);color:var(--white)}
.atmosphere{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 74% 58%,#8188e077,transparent 56%),linear-gradient(130deg,var(--blue) 35%,#293597 100%)}
.hero-content{position:relative;z-index:3;width:min(50%,640px);margin-left:max(0px,calc((100vw - 1240px)/2))}
.hero h1{font-size:clamp(44px,5.6vw,88px);font-weight:760;line-height:1;letter-spacing:-.035em}
.hero h1 span{display:block;color:var(--yellow)}
.hero-lead{margin-top:28px;max-width:34ch;font-size:clamp(18px,1.45vw,21px);line-height:1.5;color:var(--on-blue-soft)}
.hero-actions{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
/* O render termina num corte reto na cintura. A inclinação pro cursor sobe o corpo até ~25 px
   (12 px de inclinação e impulso, 8 px de canto pela rotação, 4 px de respiração), então o
   personagem sangra 36 px abaixo da borda do hero: o corte nunca aparece e ele não "levita". */
.character{--forma-bleed:36px;position:absolute;z-index:2;right:2vw;bottom:calc(var(--forma-bleed) * -1);height:min(86svh,900px);max-width:52vw;aspect-ratio:1086/1448;pointer-events:none;contain:layout style}
.character picture,.character img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.character .pose{opacity:0;will-change:opacity}

/* Olhar do Forma: os renders ficam dentro do .rig, que se inclina pro cursor; o .character respira por baixo. */
.rig{position:absolute;inset:0;transform-origin:50% 100%;animation:forma-in .6s var(--ease-out) both}
.character{transform-origin:50% 100%;animation:breathe 6s ease-in-out infinite}
.hero.is-still .character{animation-play-state:paused}
@keyframes breathe{50%{translate:0 -4px;scale:1.004}}
@keyframes forma-in{from{translate:0 36px;scale:.97}to{translate:0 0;scale:1}}
@media(hover:hover) and (pointer:fine){.hero:not(.is-still) .rig{will-change:transform}}

/* Rodapé (a home sobrescreve com .rodape) */
.footer{background:var(--white);padding:56px 0 40px;font-size:15px}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px}
.footer img{display:block;width:110px;height:auto}
.signature{margin-top:14px;font-weight:600;color:var(--blue)}
.footer-links a{display:inline-flex;min-height:44px;align-items:center;text-decoration:underline;text-underline-offset:5px}
.footer-links a:hover{color:var(--blue)}
.privacy{grid-column:1/-1;padding-top:24px;border-top:1px solid #10162f1f;font-size:13px;color:var(--ink-soft)}

/* Página do convite */
.button-blue{background:var(--blue);color:var(--white);box-shadow:0 12px 28px -16px #10162fcc}
.button-blue:hover{background:var(--blue-deep);transform:translateY(-1px)}
.invite-hero{position:relative;overflow:hidden;padding:128px 0 var(--section);background:radial-gradient(ellipse at 72% 45%,#353fc1b3,transparent 55%),var(--ink);color:var(--white)}
.invite-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:56px}
.invite-hero h1{font-size:clamp(44px,6vw,92px);font-weight:760;line-height:1;letter-spacing:-.035em}
.invite-hero h1 span{display:block;color:var(--yellow)}
.invite-hero .hero-lead{color:var(--on-ink-soft);margin-bottom:36px}
.phone{margin:0;justify-self:center;width:min(100%,340px)}
.phone video{display:block;width:100%;height:auto;aspect-ratio:9/16;border-radius:32px;background:#0b1024;box-shadow:0 0 0 10px #1c2447,0 40px 80px -30px #000c}
.phone figcaption{margin-top:28px;font-size:13px;line-height:1.5;color:var(--on-ink-soft)}
.packages{padding:var(--section) 0;background:var(--mist)}
.packages h2{font-size:clamp(32px,4vw,56px);font-weight:720;line-height:1.08;letter-spacing:-.03em}
.packages-lead{margin-top:18px;max-width:52ch;color:var(--ink-soft)}
.package-list{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.package-list>li{padding:32px 28px;border-radius:16px;background:var(--white);box-shadow:0 1px 0 #10162f14,0 18px 40px -32px #10162f80}
.package-list>li.is-featured{background:var(--blue);color:var(--white)}
.package-list h3{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:28px;line-height:1.15}
.tag{padding:4px 10px;border-radius:100px;background:var(--yellow);color:var(--ink);font-size:12px;font-weight:600;letter-spacing:0}
.includes{margin-top:16px;font-weight:600}
.features{margin-top:16px}
.features li{position:relative;padding:8px 0 8px 26px;border-top:1px solid #10162f14;line-height:1.45}
.is-featured .features li{border-color:#ffffff2e}
.features li::before{content:"";position:absolute;left:2px;top:15px;width:12px;height:7px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);rotate:-45deg}
.is-featured .features li::before{border-color:var(--yellow)}
.packages-cta{margin-top:clamp(40px,5vw,64px);display:flex;align-items:center;gap:20px clamp(24px,4vw,48px)}
.convite-forma{flex:none;width:clamp(150px,15vw,200px);margin:0 0 -8px}
.convite-forma img{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 22px #10162f33)}
.packages-cta-texto{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.packages-cta p{max-width:44ch;color:var(--ink-soft);font-size:15px}
@media(max-width:900px){.package-list{grid-template-columns:1fr}.invite-hero-grid{grid-template-columns:1fr}.phone{width:min(100%,300px)}}
@media(max-width:767px){.invite-hero{padding-top:96px}.invite-hero .button,.packages-cta .button{width:100%;justify-content:space-between}.packages-cta{flex-direction:column;align-items:stretch}.convite-forma{align-self:center;width:min(56vw,200px)}.packages-cta-texto{align-items:stretch}}

/* Menu mobile */
.menu-toggle{display:none}
#mobile-menu{position:fixed;inset:0 0 0 auto;border:0;background:var(--mist);color:var(--ink);max-width:none;max-height:none;width:min(84vw,360px);height:100dvh;margin:0;padding:20px 24px calc(28px + env(safe-area-inset-bottom));box-shadow:-24px 0 60px -30px #10162f99;display:flex;flex-direction:column;gap:32px}
#mobile-menu:not([open]){display:none}
#mobile-menu[open]{animation:gaveta .32s cubic-bezier(.2,.8,.2,1)}
#mobile-menu::backdrop{background:#10162f99;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
@keyframes gaveta{from{transform:translateX(100%)}}
.menu-topo{display:flex;align-items:center;justify-content:space-between}
#mobile-menu nav{flex:1;display:flex;flex-direction:column;gap:4px;font-size:22px;font-weight:650}
#mobile-menu nav a{display:flex;align-items:center;min-height:56px;padding:0 4px;border-bottom:1px solid #10162f14}
#mobile-menu nav .menu-cta{justify-content:center;margin-top:auto;border:0;border-radius:12px;background:var(--yellow);font-size:17px}
.close-menu{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #10162f26;border-radius:12px;background:none;color:var(--ink);cursor:pointer}
.close-menu svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media(prefers-reduced-motion:reduce){#mobile-menu[open]{animation:none}}
.menu-open{overflow:hidden}

@media(max-width:1100px){.desktop-nav{gap:20px}}
@media(max-width:900px){.descriptor{display:none}}
@media(max-width:767px){
  body{font-size:16px}
  .header{gap:8px;padding:12px 20px}
  .brand img{width:84px}
  .desktop-nav{display:none}
  .guia-convite--movel{display:inline-flex;margin-left:auto;min-height:40px;padding:0 13px 0 7px;font-size:14px;gap:6px}
  .guia-convite--movel .envelope{width:28px;height:25px}
  .menu-toggle:not([hidden]){display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;width:44px;height:44px;border:0;background:none;cursor:pointer}
  .menu-toggle span{width:24px;height:2px;background:currentColor;transition:transform .3s,opacity .3s}
  .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(7px) rotate(45deg)}
  .menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-7px) rotate(-45deg)}
  .hero{flex-direction:column;align-items:stretch;justify-content:flex-start;min-height:0;max-height:none;padding:68px 20px 56px}
  .character{position:relative;right:auto;bottom:auto;align-self:center;height:clamp(220px,34svh,300px);max-width:none;mask-image:linear-gradient(#000 78%,transparent)}
  .hero-content{width:100%;margin:8px 0 0}
  .hero h1{font-size:clamp(30px,8.6vw,44px);letter-spacing:-.03em}
  .hero-lead{margin-top:14px;font-size:17px}
  .hero-actions{margin-top:22px;gap:6px 20px}
  .hero-actions .button{width:100%;justify-content:space-between}
  .footer-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}