/* Canil Gelbes Wasser — Lista de espera em quiz (v35, 2026-10-01)
   Sem framework. Sem JavaScript o formulário aparece inteiro e envia normal (Netlify Forms).
   Com JavaScript: um passo por vez, avanço automático no toque, animação curta e suave.
   Texto secundário #948F85 sobre fundo escuro (contraste AA, regra 11 da governança). */
.le-sec{--le-gold:#C9A84C;--le-gold-l:#E8C96B;--le-ink:#F5F0E8;--le-soft:#B9B2A4;--le-mute:#948F85;--le-line:rgba(201,168,76,.18);--le-line2:rgba(201,168,76,.42);--le-card:#101010;--le-field:#0B0B0B;--le-ease:cubic-bezier(.2,.8,.2,1);
  position:relative;padding:6.5rem 1.5rem 6rem;background:radial-gradient(ellipse 70% 55% at 50% 0%,rgba(201,168,76,.09),transparent 70%),#080808;border-top:1px solid var(--le-line);color:var(--le-ink);overflow:hidden;scroll-margin-top:72px}
.le-sec *{box-sizing:border-box}
.le-anchor{position:absolute;top:-72px}
.le-head{max-width:760px;margin:0 auto 3rem;text-align:center}
.le-kicker{display:inline-flex;align-items:center;gap:.7rem;font-family:'Syne',sans-serif;font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;color:var(--le-gold);margin:0 0 1.1rem}
.le-kicker::before,.le-kicker::after{content:'';width:26px;height:1px;background:var(--le-gold);opacity:.7}
.le-title{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.08;margin:0 0 1rem;color:var(--le-ink)}
.le-title em{font-style:italic;color:var(--le-gold)}
.le-lead{font-size:1rem;line-height:1.7;color:var(--le-soft);margin:0 auto;max-width:600px}
.le-wrap{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr) minmax(0,1fr);gap:1.8rem;align-items:start}
/* laterais */
.le-side{border:1px solid var(--le-line);border-radius:14px;padding:1.6rem 1.4rem;background:rgba(255,255,255,.015)}
.le-side-k{font-family:'Syne',sans-serif;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--le-gold);margin:0 0 1.1rem}
.le-st{display:grid;gap:.15rem;padding:1rem 0;border-top:1px solid var(--le-line)}
.le-st:first-of-type{border-top:0;padding-top:0}
.le-st .k{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--le-mute)}
.le-st .n{font-family:'Cormorant Garamond',serif;font-size:1.35rem;color:var(--le-ink);text-decoration:none;line-height:1.2}
.le-st .n:hover{color:var(--le-gold)}
.le-st .v{font-size:.92rem;color:var(--le-soft)}
.le-st .v b{color:var(--le-ink);font-weight:600;white-space:nowrap}
.le-st .s{display:inline-flex;align-items:center;gap:.45rem;font-size:.74rem;color:var(--le-soft);margin-top:.25rem}
.le-st .s::before{content:'';width:7px;height:7px;border-radius:50%;background:#4CAF6A;box-shadow:0 0 0 0 rgba(76,175,106,.5);animation:le-pulse 2.4s infinite}
.le-st .s.w::before{background:var(--le-gold);box-shadow:0 0 0 0 rgba(201,168,76,.5)}
@keyframes le-pulse{70%{box-shadow:0 0 0 7px rgba(76,175,106,0)}100%{box-shadow:0 0 0 0 rgba(76,175,106,0)}}
.le-side-note{font-size:.78rem;line-height:1.6;color:var(--le-mute);margin:1rem 0 0}
.le-more{display:inline-block;margin-top:1rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--le-gold);text-decoration:none;border-bottom:1px solid var(--le-line2);padding-bottom:2px}
.le-how{list-style:none;margin:0;padding:0;display:grid;gap:1.15rem;counter-reset:le}
.le-how li{display:grid;grid-template-columns:34px 1fr;gap:.85rem;align-items:start}
.le-how svg{width:34px;height:34px;stroke:var(--le-gold);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.le-how b{display:block;font-size:.9rem;color:var(--le-ink);margin-bottom:.15rem}
.le-how span{font-size:.82rem;line-height:1.55;color:var(--le-soft)}
/* cartão do quiz */
.le-card{position:relative;background:linear-gradient(165deg,#161616 0%,#0d0d0d 100%);border:1px solid var(--le-line2);border-radius:18px;padding:2.2rem 2.1rem 1.9rem;box-shadow:0 40px 90px -50px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.04)}
.le-card::before{content:'';position:absolute;inset:-1px;border-radius:18px;padding:1px;background:linear-gradient(140deg,rgba(232,201,107,.55),transparent 35%,transparent 65%,rgba(201,168,76,.35));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.le-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.le-free{font-family:'Syne',sans-serif;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--le-gold)}
.le-count{font-size:.74rem;color:var(--le-mute);margin:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.le-count b{color:var(--le-ink);font-weight:600}
.le-progress{height:3px;border-radius:3px;background:rgba(201,168,76,.14);overflow:hidden;margin-bottom:1rem}
.le-bar{display:block;height:100%;width:33.34%;border-radius:3px;background:linear-gradient(90deg,#8B6A24,var(--le-gold),var(--le-gold-l));transform-origin:left;transition:width .55s var(--le-ease)}
.le-form{margin:0}
.le-stage{position:relative}
.le-step{border:0;margin:0 0 1.6rem;padding:0;min-width:0}
.le-js .le-step{margin:0}
.le-q{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(1.75rem,2.9vw,2.3rem);line-height:1.18;color:var(--le-ink);padding:0;margin:0 0 .45rem;outline:none}
.le-q em{font-style:italic;color:var(--le-gold)}
.le-hint{font-size:.84rem;line-height:1.6;color:var(--le-soft);margin:0 0 1.3rem}
.le-hint a{color:var(--le-gold)}
.le-opts{display:grid;gap:.7rem}
.le-opts.le-3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* opção = cartão inteiro clicável */
.le-opt{position:relative;display:grid;align-content:start;gap:.35rem;padding:1.05rem 1.05rem 1rem;border:1px solid var(--le-line);border-radius:12px;background:#121212;cursor:pointer;transition:border-color .25s,background-color .25s,transform .3s var(--le-ease),box-shadow .3s var(--le-ease);-webkit-tap-highlight-color:transparent;user-select:none}
.le-opt:hover{border-color:var(--le-line2);transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(0,0,0,.9)}
.le-opt:active{transform:translateY(0) scale(.985)}
.le-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.le-opt:has(input:focus-visible){outline:2px solid var(--le-gold);outline-offset:3px}
.le-opt.is-on,.le-opt:has(input:checked){border-color:var(--le-gold);background:linear-gradient(160deg,rgba(201,168,76,.13),rgba(201,168,76,.03));box-shadow:0 0 0 1px var(--le-gold) inset,0 18px 36px -22px rgba(201,168,76,.55)}
.le-ico{width:40px;height:40px;stroke:var(--le-gold);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:.2rem;transition:transform .4s var(--le-ease)}
.le-opt.is-on .le-ico,.le-opt:has(input:checked) .le-ico{transform:scale(1.08)}
.le-t{font-family:'Syne',sans-serif;font-weight:700;font-size:.95rem;color:var(--le-ink);line-height:1.25}
.le-d{font-size:.8rem;line-height:1.5;color:var(--le-soft)}
.le-d b{color:var(--le-ink);font-weight:600;white-space:nowrap}
.le-tag{justify-self:start;font-family:'Syne',sans-serif;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:#0a0a0a;background:var(--le-gold);border-radius:999px;padding:.22rem .6rem}
.le-tag.o{background:transparent;color:var(--le-gold);box-shadow:0 0 0 1px var(--le-line2) inset}
.le-mark{position:absolute;top:.8rem;right:.8rem;width:22px;height:22px;border-radius:50%;border:1px solid var(--le-line2);display:grid;place-items:center;transition:background-color .25s,border-color .25s}
.le-mark svg{width:12px;height:12px;stroke:#0a0a0a;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .35s var(--le-ease) .05s}
.le-opt.is-on .le-mark,.le-opt:has(input:checked) .le-mark{background:var(--le-gold);border-color:var(--le-gold)}
.le-opt.is-on .le-mark svg,.le-opt:has(input:checked) .le-mark svg{stroke-dashoffset:0}
/* ninhadas: cartões em linha com letra */
.le-litter{grid-template-columns:auto 1fr;column-gap:1rem;align-items:center;padding-right:2.6rem}
.le-letter{grid-row:span 3;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-style:italic;color:var(--le-gold);border:1px solid var(--le-line2);background:rgba(201,168,76,.05);transition:background-color .3s,color .3s}
.le-opt.is-on .le-letter,.le-opt:has(input:checked) .le-letter{background:var(--le-gold);color:#0a0a0a}
.le-letter.sm{font-size:1.05rem;font-style:normal;letter-spacing:.04em}
/* campos */
.le-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.2rem}
.le-chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.76rem;color:var(--le-ink);border:1px solid var(--le-line2);border-radius:999px;padding:.32rem .75rem;background:rgba(201,168,76,.06);cursor:pointer;font-family:inherit;transition:border-color .2s,background-color .2s}
.le-chip:hover{border-color:var(--le-gold);background:rgba(201,168,76,.12)}
.le-chip svg{width:11px;height:11px;stroke:var(--le-gold);fill:none;stroke-width:2}
.le-chip:empty{display:none}
.le-field{display:block;margin-bottom:.95rem}
.le-field>span{display:block;font-size:.74rem;letter-spacing:.06em;color:var(--le-soft);margin-bottom:.4rem}
.le-field input{width:100%;font:500 16px/1.4 'Syne',sans-serif;color:var(--le-ink);background:var(--le-field);border:1px solid var(--le-line);border-radius:11px;padding:.95rem 1rem;transition:border-color .2s,box-shadow .25s;-webkit-appearance:none;appearance:none}
.le-field input::placeholder{color:#6F6A61}
.le-field input:focus{outline:none;border-color:var(--le-gold);box-shadow:0 0 0 4px rgba(201,168,76,.14)}
.le-field input[aria-invalid=true]{border-color:#E07A5F;box-shadow:0 0 0 4px rgba(224,122,95,.12)}
.le-check{display:grid;grid-template-columns:24px 1fr;gap:.8rem;align-items:start;padding:1rem 1rem;border:1px solid var(--le-line);border-radius:12px;background:rgba(255,255,255,.015);cursor:pointer;margin:.3rem 0 1.15rem;transition:border-color .2s,background-color .2s}
.le-check:hover{border-color:var(--le-line2)}
.le-check input{position:absolute;opacity:0;width:1px;height:1px}
.le-box{width:22px;height:22px;border-radius:6px;border:1px solid var(--le-line2);display:grid;place-items:center;margin-top:1px;transition:background-color .2s,border-color .2s}
.le-box svg{width:12px;height:12px;stroke:#0a0a0a;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .3s var(--le-ease)}
.le-check:has(input:checked){border-color:var(--le-gold);background:rgba(201,168,76,.06)}
.le-check:has(input:checked) .le-box,.le-check.is-on .le-box{background:var(--le-gold);border-color:var(--le-gold)}
.le-check:has(input:checked) .le-box svg,.le-check.is-on .le-box svg{stroke-dashoffset:0}
.le-check:has(input:focus-visible){outline:2px solid var(--le-gold);outline-offset:3px}
.le-check.bad{border-color:#E07A5F}
.le-check-t{font-size:.83rem;line-height:1.6;color:var(--le-soft)}
.le-check-t b{color:var(--le-ink);font-weight:600}
.le-err{min-height:1.2em;font-size:.8rem;color:#F0A08A;margin:.6rem 0 0}
.le-err:empty{min-height:0;margin:0}
/* botões */
.le-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.5rem}
.le-back{background:none;border:0;padding:.6rem 0;font:600 .7rem/1 'Syne',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--le-mute);cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;transition:color .2s}
.le-back:hover{color:var(--le-ink)}
.le-back[hidden]{display:none}
.le-back svg,.le-next svg,.le-send svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.le-next,.le-send{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;border:0;border-radius:999px;cursor:pointer;font:700 .74rem/1 'Syne',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#0a0a0a;background:linear-gradient(135deg,var(--le-gold),var(--le-gold-l));padding:1rem 1.6rem;transition:transform .25s var(--le-ease),box-shadow .25s,opacity .2s;box-shadow:0 12px 28px -14px rgba(201,168,76,.8);margin-left:auto}
.le-next:hover,.le-send:hover{transform:translateY(-1px);box-shadow:0 16px 34px -14px rgba(201,168,76,.95)}
.le-next:focus-visible,.le-send:focus-visible,.le-back:focus-visible,.le-wa:focus-visible{outline:2px solid var(--le-ink);outline-offset:3px}
.le-next[hidden]{display:none}
.le-send{width:100%;padding:1.15rem 1.6rem;font-size:.78rem}
.le-send[disabled]{opacity:.7;cursor:progress}
.le-spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(10,10,10,.25);border-top-color:#0a0a0a;animation:le-rot .8s linear infinite;display:none}
.le-send.busy .le-spin{display:inline-block}
.le-send.busy .le-arr{display:none}
@keyframes le-rot{to{transform:rotate(360deg)}}
.le-fine{font-size:.74rem;line-height:1.55;color:var(--le-mute);text-align:center;margin:.9rem 0 0}
.le-wa-alt{display:block;text-align:center;font-size:.78rem;color:var(--le-soft);margin-top:1.1rem}
.le-wa-alt a{color:var(--le-gold)}
/* concluído */
.le-done{text-align:center;padding:.6rem 0 .2rem;outline:none}
.le-done[hidden]{display:none}
.le-card.is-done .le-wa-alt{display:none}
.le-ring{width:76px;height:76px;margin:0 auto 1.2rem;display:block}
.le-ring circle{fill:none;stroke:var(--le-gold);stroke-width:2;stroke-dasharray:226;stroke-dashoffset:226;transition:stroke-dashoffset .9s var(--le-ease)}
.le-ring path{fill:none;stroke:var(--le-gold-l);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48;transition:stroke-dashoffset .5s var(--le-ease) .6s}
.le-done.go .le-ring circle,.le-done.go .le-ring path{stroke-dashoffset:0}
.le-done h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:2rem;line-height:1.15;margin:0 0 .6rem;color:var(--le-ink)}
.le-done h3 em{font-style:italic;color:var(--le-gold)}
.le-done p{font-size:.92rem;line-height:1.7;color:var(--le-soft);margin:0 auto 1.4rem;max-width:420px}
.le-sum{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:.45rem;margin:0 0 1.5rem}
.le-sum span{font-size:.76rem;border:1px solid var(--le-line2);border-radius:999px;padding:.32rem .8rem;color:var(--le-ink)}
.le-wa{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;width:100%;max-width:360px;background:#25A84C;color:#fff;text-decoration:none;font:700 .74rem/1 'Syne',sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:1.05rem 1.4rem;border-radius:999px;transition:background-color .2s,transform .25s var(--le-ease)}
.le-wa:hover{background:#1E9040;transform:translateY(-1px)}
.le-wa svg{width:19px;height:19px;fill:#fff}
.le-opt-note{display:block;font-size:.74rem;color:var(--le-mute);margin-top:.7rem}

/* v35.1: ficha ao vivo dentro do cartao (resumo do que a pessoa ja escolheu, piso e custo zero) */
.le-ticket{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--le-line);border:1px solid var(--le-line);border-radius:11px;overflow:hidden;margin:0 0 1.7rem}
.le-tk{all:unset;box-sizing:border-box;display:grid;align-content:start;gap:.15rem;padding:.6rem .75rem;background:#0F0F0E;min-width:0;transition:background-color .2s}
.le-tk i{font-style:normal;font-family:'Syne',sans-serif;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--le-mute)}
.le-tk b{display:block;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.05rem;line-height:1.2;color:var(--le-soft);overflow-wrap:anywhere;transition:color .3s}
.le-tk.on b{color:var(--le-gold)}
button.le-tk:not([disabled]){cursor:pointer}
button.le-tk:not([disabled]):hover{background:#17150F}
button.le-tk:not([disabled]) i::after{content:' · editar';letter-spacing:.06em;text-transform:none;color:var(--le-gold)}
.le-tk:focus-visible{outline:2px solid var(--le-gold);outline-offset:-2px}
.le-tk.flash b{animation:le-flash .55s var(--le-ease)}
@keyframes le-flash{0%{opacity:0;transform:translateY(5px)}100%{opacity:1;transform:none}}
.le-card.is-done .le-ticket{display:none}
/* "Como funciona": aberto no computador, recolhivel no celular (o texto continua no HTML) */
.le-how-d>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;margin:0 0 1.1rem}
.le-how-d>summary::-webkit-details-marker{display:none}
.le-how-d>summary svg{width:12px;height:12px;stroke:var(--le-gold);fill:none;stroke-width:1.6;transition:transform .3s var(--le-ease)}
.le-how-d[open]>summary svg{transform:rotate(180deg)}
.le-how-d:not([open])>summary{margin:0}
@media(min-width:1061px){.le-how-d>summary{pointer-events:none}.le-how-d>summary svg{display:none}}
@media(max-width:1060px){
  .le-side.le-side-st{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;padding:1.1rem 1.15rem}
  .le-side-st .le-side-k,.le-side-st .le-side-note,.le-side-st .le-more{grid-column:1/-1}
  .le-side-st .le-side-k{margin-bottom:.4rem}
  .le-side-st .le-st,.le-side-st .le-st:first-of-type{border-top:0;padding:.35rem 0}
  .le-side-st .le-st .n{font-size:1.15rem}
  .le-side-st .le-side-note{margin-top:.6rem}
  .le-side-how{padding:1rem 1.15rem}
}
@media(max-width:560px){.le-ticket{margin-bottom:1.4rem}}
/* responsivo */
@media(max-width:1060px){.le-wrap{grid-template-columns:minmax(0,1fr);max-width:640px}.le-card{order:-1}.le-side{display:block}}
@media(max-width:560px){
  .le-sec{padding:4.5rem 1rem 4rem}
  .le-head{margin-bottom:2rem}
  .le-free{font-size:.58rem;letter-spacing:.14em}
  .le-card{padding:1.6rem 1.15rem 1.4rem;border-radius:16px}
  .le-opts.le-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
  .le-opts.le-3 .le-opt{padding:.85rem .55rem .8rem;justify-items:center;text-align:center}
  .le-opts.le-3 .le-ico{width:34px;height:34px}
  .le-opts.le-3 .le-t{font-size:.84rem}
  .le-opts.le-3 .le-mark{top:.45rem;right:.45rem;width:18px;height:18px}
  .le-litter{padding:.9rem 2.3rem .9rem .9rem;column-gap:.8rem}
  .le-letter{width:44px;height:44px;font-size:1.35rem}
  .le-q{font-size:1.5rem}
}
@media(prefers-reduced-motion:reduce){
  .le-sec *,.le-sec *::before,.le-sec *::after{transition-duration:.01ms!important;animation:none!important}
}
