/* Convite online — Portal Márcio Lourenço */
:root{
  --preto:#0a0908; --texto:#f5efe4; --mudo:#a79e8e; --fraco:#6f675a;
  --ouro1:#f6e7bd; --ouro2:#d4b06a; --ouro3:#9c7a3c;
  --ok:#86dba9; --erro:#ff8585;
  --linha:rgba(233,213,161,.18);
  --foil:linear-gradient(100deg,#f6e7bd 0%,#d4b06a 28%,#fff6d8 50%,#c79f57 72%,#f6e7bd 100%);
  --serif:'Cormorant Garamond','Playfair Display','Didot',Georgia,serif;
  --sans:'Jost','Segoe UI',system-ui,-apple-system,sans-serif;
  --suave:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--preto);-webkit-text-size-adjust:100%}
body{min-height:100vh;min-height:100dvh;font-family:var(--sans);font-weight:300;color:var(--texto);-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums;letter-spacing:.01em;overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--ouro2);outline-offset:3px}

.fundo{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(70% 40% at 90% 0%,rgba(255,148,112,.16),transparent 62%),
    radial-gradient(60% 40% at 0% 100%,rgba(98,212,201,.09),transparent 62%),
    var(--preto)}
.aura{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5}
.aura.a1{width:70vmax;height:70vmax;left:-30vmax;top:-34vmax;background:radial-gradient(circle,rgba(212,176,106,.30),transparent 65%);animation:vagar 26s ease-in-out infinite alternate}
.aura.a2{width:60vmax;height:60vmax;right:-28vmax;bottom:-26vmax;background:radial-gradient(circle,rgba(255,148,112,.20),transparent 65%);animation:vagar 32s ease-in-out infinite alternate-reverse}
@keyframes vagar{to{transform:translate(8vmax,6vmax) scale(1.15)}}
.grao{position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.convite{position:relative;z-index:1;width:min(460px,100%);margin:0 auto;padding:max(34px,env(safe-area-inset-top)) 24px max(40px,env(safe-area-inset-bottom));text-align:center}
.convite>*{animation:sobe 1s var(--suave) both}
.convite>*:nth-child(2){animation-delay:.12s}
.convite>*:nth-child(3){animation-delay:.24s}
.convite>*:nth-child(4){animation-delay:.36s}
.convite>*:nth-child(5){animation-delay:.48s}
.convite>*:nth-child(n+6){animation-delay:.6s}
@keyframes sobe{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.logo{width:min(210px,56%);height:auto;display:block;margin:0 auto 28px;filter:drop-shadow(0 6px 26px rgba(212,176,106,.28))}
.olho,.rotulo{font-size:11.5px;letter-spacing:.36em;text-transform:uppercase;color:var(--ouro1);font-weight:400}
.olho{display:flex;align-items:center;justify-content:center;gap:12px}
.olho::before,.olho::after{content:'';width:26px;height:1px;background:var(--ouro2)}
h1{font:400 clamp(40px,12.4vw,56px)/1 var(--serif);letter-spacing:-.01em}
h1 em,.nome,.foil{font-style:italic;background:var(--foil);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:brilho 7s linear infinite}
h1 em{padding-right:.06em}
@keyframes brilho{to{background-position:-220% 0}}

.para{margin-top:38px;padding-top:30px;position:relative}
.para::before{content:'';position:absolute;top:0;left:50%;width:9px;height:9px;transform:translate(-50%,-50%) rotate(45deg);background:var(--foil)}
.para::after{content:'';position:absolute;top:0;left:18%;right:18%;height:1px;background:linear-gradient(90deg,transparent,var(--ouro2) 35%,transparent 44%,transparent 56%,var(--ouro2) 65%,transparent)}
.nome{font:500 clamp(34px,10.5vw,46px)/1.08 var(--serif);margin:8px 0 18px;padding:0 .06em .08em;overflow-wrap:anywhere}
.nome.longo{font-size:clamp(28px,8.6vw,38px)}
.nome.muito-longo{font-size:clamp(23px,7vw,31px)}
.texto{font-size:16.5px;line-height:1.65;color:#d9d1c2;max-width:34ch;margin:0 auto;text-wrap:balance}

.quando{margin-top:34px;padding:26px 18px 24px;border:1px solid var(--linha);border-radius:22px;background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.012));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.data{font:400 clamp(30px,9.4vw,40px)/1.05 var(--serif);font-variant-numeric:lining-nums;text-transform:uppercase;letter-spacing:.06em}
.hora i,.atracoes i{font-style:normal;color:var(--ouro2);margin:0 .12em}
.hora{margin-top:9px;font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:var(--ouro1);font-weight:400}
.atracoes{margin-top:18px;padding-top:16px;border-top:1px solid var(--linha);font:italic 400 21px/1.2 var(--serif);color:#e7dfd0}

.resposta{margin-top:34px}
.resposta h2{font:400 clamp(27px,8vw,34px)/1.1 var(--serif)}
.resposta-texto{margin:8px auto 20px;font-size:14.5px;line-height:1.55;color:var(--mudo);max-width:34ch;text-wrap:balance}
.btn-ouro{position:relative;overflow:hidden;display:block;width:100%;min-height:58px;padding:18px 20px;border-radius:99px;font:500 13.5px/1.2 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:#1b1713;background:var(--foil);background-size:200% 100%;box-shadow:0 18px 40px -16px rgba(212,176,106,.75),inset 0 1px 0 rgba(255,255,255,.6);animation:brilho 4s linear infinite;transition:transform .25s,filter .25s,opacity .25s}
.btn-ouro:hover{filter:brightness(1.07)}
.btn-ouro:active{transform:scale(.97)}
.btn-ouro:disabled{opacity:.6;cursor:default}
.btn-link{margin-top:6px;min-height:44px;padding:10px 18px;font-size:13.5px;letter-spacing:.08em;color:var(--mudo);text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(167,158,142,.45)}
.erro{margin-top:10px;font-size:14px;color:var(--erro)}

/* estados da resposta */
body[data-resposta=sim] .resposta h2{color:var(--ok)}
body[data-resposta=sim] .btn-ouro{background:#12301f;color:var(--ok);box-shadow:inset 0 0 0 1px rgba(134,219,169,.5);animation:none;cursor:default}
body[data-resposta=nao] .resposta h2{color:var(--mudo)}
body[data-entrou=sim] .resposta .btn-ouro,body[data-entrou=sim] .resposta .btn-link{display:none}
body[data-entrou=sim] .resposta h2{color:var(--ok)}

.ingresso{margin-top:36px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;text-align:left;padding:18px;border-radius:20px;color:#1b1713;position:relative;
  background:linear-gradient(160deg,#fbf6ea,#eadfc6);box-shadow:0 26px 50px -24px #000,0 0 0 1px rgba(233,213,161,.5)}
/* os dois picotes ficam em cima da linha tracejada (margem + QR + meio do vão) */
.ingresso::before,.ingresso::after{content:'';position:absolute;left:calc(27px + min(34vw,138px));width:18px;height:18px;border-radius:50%;background:#0d0b0a}
.ingresso::before{top:-9px}
.ingresso::after{bottom:-9px}
.ingresso-qr{width:min(34vw,138px);background:#fff;border-radius:10px;padding:4px;box-shadow:0 0 0 1px rgba(156,122,60,.35)}
.ingresso-qr svg{display:block;width:100%;height:auto}
.ingresso-txt{border-left:1.5px dashed rgba(156,122,60,.55);padding-left:18px;min-width:0}
.ingresso-txt small{display:block;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#8d8272;font-weight:500}
.ingresso-txt b{display:block;margin:4px 0 8px;font:600 clamp(15px,4.5vw,19px)/1.2 var(--sans);letter-spacing:.08em;white-space:nowrap}
.ingresso-txt span{display:block;font-size:13px;line-height:1.45;color:#5d5548;font-weight:400}

.local{margin-top:36px;padding:26px 18px;border:1px solid var(--linha);border-radius:22px;background:linear-gradient(150deg,rgba(255,255,255,.05),rgba(255,255,255,.01))}
.local-nome{font:400 clamp(26px,7.8vw,33px)/1.1 var(--serif);text-transform:uppercase;letter-spacing:.05em;margin-top:10px}
.local-end{margin:8px auto 20px;font-size:15px;line-height:1.5;color:#d9d1c2;max-width:28ch}
.btn-contorno{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 24px;border-radius:99px;border:1px solid rgba(233,213,161,.5);font:400 12.5px/1.2 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ouro1);text-decoration:none;transition:background .3s,border-color .3s}
.btn-contorno:hover{background:rgba(212,176,106,.12);border-color:var(--ouro2)}
.btn-contorno svg{width:18px;height:18px;fill:none;stroke:var(--ouro1);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}

.fim{margin-top:44px}
.despedida{font:italic 400 clamp(24px,7.2vw,30px)/1.25 var(--serif);color:#efe7d8;max-width:16ch;margin:0 auto}
.assinatura{margin-top:16px;font-size:12px;letter-spacing:.36em;text-transform:uppercase;color:var(--ouro1)}
.miudo{margin-top:34px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--fraco)}

.faisca{position:fixed;z-index:60;pointer-events:none;background:var(--foil);transform:rotate(45deg)}

/* página de aviso (convite não encontrado / entrada) */
.aviso{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:grid;place-content:center;justify-items:center;gap:6px;padding:32px 24px;text-align:center}
.aviso h1{font-size:clamp(32px,9vw,44px)}
.aviso p{font-size:15.5px;line-height:1.6;color:var(--mudo);max-width:32ch;margin-top:10px}
.aviso .btn-contorno{margin-top:22px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important}
}