/* Entrevets — Especial de Natal. Estilo comum de /natal e das páginas de inscrição. */
:root{
  --bg:#F4F1EC;
  --bg-2:#EDE8E0;
  --card:#FBF9F5;
  --beige:#E6D9C6;
  --beige-2:#D9C7AE;
  --brown:#6B4F3A;
  --brown-ink:#4A3628;
  --dark:#2B221C;
  --cream-soft:#D9CDBE;
  --ink:#1b1b1b;
  --ink-2:#3d3a36;
  --ink-soft:#5c5852;
  --line:rgba(27,27,27,.12);
  --field-line:rgba(27,27,27,.18);
  --ok:#4E6B58;
  --error:#A3352B;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none!important}
img{max-width:100%;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--brown);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Tipografia */
.eyebrow{margin:0;font-size:.6875rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--brown)}
.h1{margin:0;font-family:var(--serif);font-weight:400;font-size:2rem;line-height:1.17;letter-spacing:-.018em;text-wrap:balance}
.h2{margin:12px 0 0;font-family:var(--serif);font-weight:400;font-size:1.6875rem;line-height:1.2;letter-spacing:-.012em;text-wrap:balance}
.h1 em,.h2 em{font-weight:300}
.lead{margin:16px 0 0;font-size:1.0625rem;color:var(--ink-soft);text-wrap:pretty}
.muted{color:var(--ink-soft)}

/* Selo */
.badge{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:100px;background:var(--beige);color:var(--brown-ink);font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.badge svg{width:16px;height:16px;flex:none}

/* Botões */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:100px;border:1px solid transparent;font:inherit;font-size:1rem;font-weight:500;text-decoration:none;cursor:pointer;transition:transform .18s ease,background-color .18s ease,box-shadow .18s ease}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--ink);color:var(--bg);box-shadow:0 8px 24px -12px rgba(27,27,27,.55)}
.btn-primary:hover{background:var(--brown)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary[disabled]{background:#4a4743;cursor:progress}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--bg)}
.btn-soft{background:var(--beige);color:var(--ink);border-color:var(--ink)}
.btn-light{background:var(--bg);color:var(--ink)}
.btn-block{width:100%}
/* O gorrinho pendurado no canto do botão */
.btn .hat{position:absolute;left:10px;top:-17px;width:34px;height:34px;transform:rotate(-16deg)}

/* Cartões */
.card{padding:22px;border-radius:20px;background:var(--card);border:1px solid var(--line)}
.icon-circle{width:44px;height:44px;border-radius:50%;background:var(--beige);display:flex;align-items:center;justify-content:center;flex:none}
.icon-circle svg{width:22px;height:22px}

/* Camada de movimento (fios, confete) atrás do conteúdo */
.motion-layer{position:absolute;inset:0;pointer-events:none}
.motion-layer canvas{display:block;width:100%;height:100%}

/* Campos */
.field{display:flex;flex-direction:column;gap:8px}
.field label,.field .label{font-size:1rem;font-weight:500}
.field .opt{font-weight:300;color:var(--ink-soft)}
.input,.select-trigger{width:100%;height:48px;padding:0 16px;border-radius:14px;border:1px solid var(--field-line);background:#fff;color:var(--ink);font:inherit;font-size:16px}
.input::placeholder{color:#8a857e}
.input:focus,.select-trigger:focus-visible{outline:none;border:2px solid var(--ink);padding:0 15px;box-shadow:0 0 0 4px rgba(107,79,58,.15)}
.input[aria-invalid="true"],.select-trigger[aria-invalid="true"]{border:2px solid var(--error);padding:0 15px}
.input-wrap{position:relative}
.input-wrap .input{padding-right:48px}
.input-wrap .check{position:absolute;right:16px;top:14px;width:20px;height:20px;color:var(--ok);visibility:hidden}
.input-wrap.valid .check{visibility:visible}
.select-trigger{display:flex;align-items:center;justify-content:space-between;text-align:left;cursor:pointer;padding-right:14px}
.select-trigger[data-empty="true"]{color:var(--ink-soft)}
.select-trigger svg{width:18px;height:18px;color:var(--ink-soft);flex:none}
.field-error{font-size:.875rem;font-weight:400;color:var(--error)}
.field-error:empty{display:none}
.row{display:flex;gap:8px}

/* Folha de baixo (seleção em lista, padrão do celular) */
.sheet-backdrop{position:fixed;inset:0;z-index:50;background:rgba(27,27,27,.38);opacity:0;transition:opacity .2s ease}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:51;max-height:80dvh;min-height:352px;display:flex;flex-direction:column;border-radius:24px 24px 0 0;background:var(--card);padding:10px 0 max(24px,env(safe-area-inset-bottom));box-shadow:0 -12px 40px -12px rgba(0,0,0,.3);transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.sheet.open{transform:none}
.sheet-backdrop.open{opacity:1}
.sheet-handle{display:flex;justify-content:center}
.sheet-handle span{width:44px;height:6px;border-radius:6px;background:rgba(27,27,27,.18)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:8px 16px 6px 20px}
.sheet-head h2{margin:0;font-size:1.1875rem;font-weight:600}
.sheet-close{width:44px;height:44px;border:0;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer}
.sheet-close span{width:34px;height:34px;border-radius:50%;background:var(--bg-2);display:flex;align-items:center;justify-content:center}
.sheet-list{margin:6px 0 0;padding:0;list-style:none;overflow-y:auto}
.sheet-list li{border-top:1px solid rgba(27,27,27,.08)}
.sheet-list li:last-child{border-bottom:1px solid rgba(27,27,27,.08)}
.sheet-option{width:100%;min-height:56px;padding:0 20px;border:0;background:none;display:flex;align-items:center;justify-content:space-between;font:inherit;font-size:16px;color:var(--ink);text-align:left;cursor:pointer}
.sheet-option[aria-selected="true"]{font-weight:500}
.sheet-option svg{width:20px;height:20px;color:var(--brown);visibility:hidden}
.sheet-option[aria-selected="true"] svg{visibility:visible}
@media (min-width:768px){
  .sheet{left:50%;right:auto;bottom:auto;top:50%;width:420px;min-height:0;border-radius:24px;transform:translate(-50%,-46%);opacity:0;transition:opacity .2s ease,transform .2s ease;padding-bottom:16px}
  .sheet.open{transform:translate(-50%,-50%);opacity:1}
  .sheet-handle{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}