/* ==================================================================
   THE DOG & PONY SHOW — Client & market perception survey
   Visual system read from Survey_01 (site KV) + Exemplo Alternativa
================================================================== */

/* ---------- Fonts ----------
   Big Shoulders (display) e Onest (corpo), ambas variáveis e sob SIL Open
   Font License. Hospedadas aqui, não puxadas do CDN do Google: o CDN entrega
   o IP do visitante ao Google, o que um tribunal alemão já tratou como
   violação de GDPR, e o arquivo único de `dist/` precisa funcionar offline.
   Substituíram MD Nichrome e Season Sans, que são comerciais e não podiam ser
   repassadas a terceiros junto com o site. */
@font-face {
  font-family:'Big Shoulders'; src:url('assets/fonts/bigshoulders-latin.woff2') format('woff2');
  font-weight:100 900; font-stretch:100%; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:'Big Shoulders'; src:url('assets/fonts/bigshoulders-latin-ext.woff2') format('woff2');
  font-weight:100 900; font-stretch:100%; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:'Onest'; src:url('assets/fonts/onest-latin.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:'Onest'; src:url('assets/fonts/onest-latin-ext.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root{
  --paper:#f5f0e6;        /* page field */
  --paper-2:#faf5eb;      /* raised surface */
  --cream:#ebe6dc;        /* the offset card */
  --cream-line:#e1dcd2;
  --dot:#e4ddcd;          /* the site's faint dot grid */
  --red:#e6001e;
  --red-dark:#be001e;
  --maroon:#500a14;
  --acid:#e6f032;
  --white:#fff;

  --ink:var(--maroon);
  /* measured on the cream: 58% maroon gave only 4.02:1, under the 4.5 AA
     floor for normal text. 68% reads the same and clears it at 5.43:1. */
  --muted:color-mix(in srgb, var(--maroon) 68%, var(--paper));

  --r:6px;
  --off:5px;              /* deslocamento +5/+5, conforme Shadows.svg */
  --hair:1.5px;
  /* A sombra deslocada, conforme Shadows.svg: NÃO é um cartão creme opaco —
     é #323232 em multiply, com opacidade variando por campo: .1 sobre creme,
     .2 sobre vermelho, .3 sobre marrom. Nessas opacidades multiply e alpha
     normal dão o mesmo resultado sobre fundo claro (medido 229.9 vs 230 em
     250), então box-shadow rgba é tradução fiel. */
  --shadow-a:.1;
  --card:      var(--off) var(--off) 0 0 rgba(50,50,50,var(--shadow-a));
  --card-lift: 8px 8px 0 0 rgba(50,50,50,var(--shadow-a));
  --card-press:2px 2px 0 0 rgba(50,50,50,var(--shadow-a));

  --display:'Big Shoulders',Impact,'Haettenschweiler',sans-serif;
  --body:'Onest','Helvetica Neue',Helvetica,Arial,sans-serif;

  --wrap:46rem;
  --foot:min(1440px,100%);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(.9375rem,.89rem + .25vw,1.0625rem);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  /* Mobile, short viewports and heavy zoom get plain document scrolling.
     The fixed one-viewport frame is opt-in further down, only where there is
     genuinely room for it — two nested hidden scrollers is a trap. */
  --frame:0;
  min-height:100dvh;
  overflow-x:hidden;
  /* the site's cream field + faint dot grid */
  background:
    radial-gradient(circle at 50% 50%, var(--dot) 1.15px, transparent 1.2px) 0 0/26px 26px,
    var(--paper);
  transition:background-color .45s ease;
}
/* sobre o campo vermelho a sombra sobe para .2, conforme o arquivo */
body.is-finale{ --shadow-a:.2; }
/* the finale flips the whole field to the big-top red band */
body.is-finale{
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--maroon) 22%,transparent) 1.15px, transparent 1.2px) 0 0/26px 26px,
    var(--red);
}

.page{ min-height:100dvh; display:flex; flex-direction:column; }

/* ---------- Masthead ---------- */
.masthead{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.5rem clamp(1.125rem,4vw,2.5rem) 1rem;
  max-width:var(--wrap); width:100%; margin:0 auto;
}
.masthead__logo{ display:block; width:clamp(112px,20vw,150px); flex:0 0 auto; }
.logo-img{ display:block; width:100%; height:auto; }
.logo-img--light{ display:none; }
body.is-finale .logo-img--dark{ display:none; }
body.is-finale .logo-img--light{ display:block; }
.masthead__meta{
  margin:0; text-align:right;
  font-family:var(--display); font-variation-settings:'opsz' 14,'wght' 500;
  font-size:.75rem; letter-spacing:0; text-transform:uppercase;
  color:var(--red-dark); line-height:1.5;
}
body.is-finale .masthead__meta{ color:var(--acid); }

main{
  width:100%; max-width:var(--wrap); margin:0 auto;
  padding:.5rem clamp(1.125rem,4vw,2.5rem) 1.5rem;
  flex:1 0 auto;
}
#screen-q.is-active{ display:block; }
.qhead{ }
.qbody{ /* room for the option cards' 5px offset so it isn't clipped */
  padding:2px 8px 8px 2px; margin:-2px -8px -8px -2px;
}
.qnav{ padding-top:.25rem; }

/* fieldset carries the grouping; it must not carry a box */
.grp{ border:0; margin:0; padding:0; min-width:0; }

/* ---------- the desktop frame ----------
   Only above 46rem AND 640px tall: one viewport, question body scrolls
   inside itself, nav always in view. Below that the page just scrolls. */
@media (min-width:46rem) and (min-height:640px){
  body{ --frame:1; height:100dvh; overflow:hidden; }
  .page{
    height:100dvh; display:grid;
    grid-template-rows:auto minmax(0,1fr) auto auto;
  }
  main{
    min-height:0; flex:initial;
    padding-bottom:1rem;
    display:flex; flex-direction:column;
    overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none;
  }
  main::-webkit-scrollbar{ width:0; height:0; }
  /* auto margins centre short screens without clipping tall ones */
  .screen.is-active{ margin-block:auto; }
  #screen-q.is-active{ display:flex; flex-direction:column; max-height:100%; }
  .qhead{ flex:0 0 auto; }
  .qbody{
    flex:1 1 auto; min-height:0;
    overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none;
  }
  .qbody::-webkit-scrollbar{ width:0; height:0; }
  .qbody.is-scrollable{
    mask-image:linear-gradient(to bottom,#000 calc(100% - 30px),transparent 100%);
  }
  .qbody__in{ margin-block:auto; }
  .qnav{ flex:0 0 auto; }
}

/* ---------- Screens ---------- */
.screen{ display:none; }
.screen.is-active{ display:block; animation:rise .3s cubic-bezier(.2,.8,.25,1) both; }
@keyframes rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .screen.is-active{ animation:none; }
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
  /* the looping ones get switched off outright, not run at 0.01ms forever */
  .intro__char img,
  .done__char img,
  .progress__rider,
  .progress__fill{ animation:none !important; }
  .btn::before, .btn::after{ transition:none !important; }
  .btn:hover::before, .btn:hover::after{ transform:none !important; }
}

/* ---------- Type ---------- */
.eyebrow{
  display:flex; align-items:center; gap:.45rem;
  font-family:var(--display); font-variation-settings:'opsz' 14,'wght' 500;
  font-size:.75rem; letter-spacing:0; text-transform:uppercase;
  color:var(--red-dark); margin:0 0 .875rem;
}
.eyebrow svg{ width:.95em; height:.95em; fill:var(--red); flex:0 0 auto; }

h1,h2{
  /* Pesos e entrelinha alinhados ao dp-site, por papel e não por px: lá o
     .hero__title é 700 e os títulos de seção 500, ambos sem tracking. Não
     copiei um `font-weight` junto do `font-variation-settings` — no site
     .clients__title declara 800 e renderiza 500, porque varsettings vence. */
  font-family:var(--display); font-weight:400;
  font-variation-settings:'opsz' 72,'wght' 500;
  line-height:1; letter-spacing:0; text-transform:uppercase;
  color:var(--red); margin:0 0 1rem; text-wrap:balance;
}
h1{ font-size:clamp(1.875rem,1.35rem + 2.4vw,2.875rem); }
h2{
  font-size:clamp(1.375rem,1.1rem + 1.2vw,1.875rem); max-width:32ch;
  font-variation-settings:'opsz' 72,'wght' 500;   /* .show__title / .proof__title */
}

.lede{ max-width:44ch; margin:0 0 1rem; }
.hint{ color:var(--muted); font-size:.9375rem; margin:-.25rem 0 1.5rem; max-width:52ch; }
/* stays in the DOM for aria-describedby even with nothing to say */
.hint.is-empty{ margin:0 0 .75rem; min-height:.25rem; }
.kicker{
  font-family:var(--display); font-variation-settings:'opsz' 14,'wght' 500;
  font-size:.9375rem; letter-spacing:0; text-transform:uppercase;
  /* the brighter #e6001e lands at 4.22:1 on the cream, under the 4.5 AA
     floor for text this size — #be001e reads the same and clears it at 5.76 */
  color:var(--red-dark); margin:1.25rem 0 1.75rem;
}

/* ---------- Opening ---------- */
.intro{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:start; gap:1rem 1.75rem;
}
.intro__copy{ grid-area:1 / 1; }
.intro__char{
  grid-area:1 / 2;
  width:clamp(140px,19vw,204px);
  margin-top:-.75rem;                /* lift him level with the headline */
}
.char{ display:block; }
.intro__char img{
  display:block; width:100%; height:auto;
  transform-origin:50% 100%;          /* pivot at his feet, not his middle */
  animation:bear-idle 5s ease-in-out infinite;
}
@keyframes bear-idle{
  0%,100%{ transform:rotate(-1.1deg) translateY(0); }
  50%    { transform:rotate(1.1deg) translateY(-1.6%); }
}

.meta-list{
  list-style:none; margin:0 0 1.75rem; padding:0;
  display:flex; flex-wrap:wrap; gap:.35rem 1.375rem;
}
.privacy{
  max-width:52ch; margin:1.125rem 0 0;
  font-size:.875rem; line-height:1.45; color:var(--muted);
}
@media (max-width:46rem){ .privacy{ margin-top:.875rem; } }

.meta-list li{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--display); font-variation-settings:'opsz' 14,'wght' 500;
  font-size:.75rem; letter-spacing:0; text-transform:uppercase;
  color:var(--red-dark);
}
.meta-list li svg{ width:.75em; height:.75em; fill:var(--red); flex:0 0 auto; }

/* ---------- Options — Exemplo Alternativa ---------- */
.options{ list-style:none; margin:0 0 1.75rem; padding:0; display:flex; flex-direction:column; gap:calc(var(--off) + .3rem); }
/* long checkbox lists run two-up so the screen still fits the frame */
@media (min-width:40rem){
  .options--two{ display:grid; grid-template-columns:1fr 1fr; column-gap:calc(var(--off) + .75rem); }
  /* the grid already stretches each cell to its row height, but the visible box
     sits inside the cell and hugged its own text — a one-line option next to a
     three-line one left a hole. Pass the row height down to the box instead. */
  .options--two .opt{ display:flex; flex-direction:column; }
  .options--two .opt__box{ flex:1 1 auto; }
}
.opt{ position:relative; display:block; }
.opt input[type=checkbox],
.opt input[type=radio]{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }

.opt__box{
  position:relative; display:flex; align-items:center; gap:.75rem;
  min-height:48px; padding:.6rem 1rem;
  background:var(--paper-2);
  border:var(--hair) solid var(--cream-line);
  border-radius:var(--r);
  box-shadow:var(--card);
  cursor:pointer;
  transition:background .15s, border-color .15s, transform .15s cubic-bezier(.2,.8,.25,1), box-shadow .15s cubic-bezier(.2,.8,.25,1);
}
.opt__box:hover{ transform:translate(-2px,-2px); border-color:var(--red-dark); box-shadow:var(--card-lift); }
.opt__box:active{ transform:translate(2px,2px); box-shadow:var(--card-press); }
.opt input:focus-visible + .opt__box{ outline:3px solid var(--red); outline-offset:3px; }

.opt__mark{
  position:relative; flex:0 0 auto; width:21px; height:21px;
  border:var(--hair) solid var(--red-dark); background:var(--white);
  display:grid; place-items:center; transition:background .15s;
}
.opt--radio .opt__mark{ border-radius:50%; }
.opt--check .opt__mark{ border-radius:5px; }
.opt__mark svg{
  width:19px; height:19px; fill:var(--acid);
  opacity:0; transform:scale(.35) rotate(-60deg);
  transition:opacity .16s, transform .26s cubic-bezier(.2,1.6,.4,1);
}
.opt__label{ font-size:1.0625rem; line-height:1.3; }

/* "Other" — the field only appears once the box is ticked */
.opt--other .opt__other{
  display:none; position:relative; opacity:1;
  width:100%; height:auto; margin-top:calc(var(--off) + .35rem);
  padding:.55rem .8rem; font-size:.9375rem;
}
.opt--other:has(input[type=checkbox]:checked) .opt__other{ display:block; }

.opt input:checked + .opt__box{ background:var(--acid); border-color:var(--red-dark); }
.opt input:checked + .opt__box .opt__mark{ background:var(--red); border-color:var(--red-dark); }
.opt input:checked + .opt__box .opt__mark svg{ opacity:1; transform:none; }

/* ---------- Grid question ---------- */
.grid-q{ margin:0 0 2rem; }
.grid-tbl{ width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; }
.grid-tbl col.grid-col--lab{ width:36%; }
.grid-tbl th{
  font-family:var(--display); font-variation-settings:'opsz' 14,'wght' 500;
  font-size:.75rem; letter-spacing:0; text-transform:uppercase;
  color:var(--red-dark); font-weight:400; text-align:center;
  padding:0 .2rem .625rem; vertical-align:bottom;
}
.grid-tbl th:first-child{ text-align:left; }
.grid-tbl tbody tr td{ padding:.55rem 0; border-top:1px solid var(--cream-line); }
.grid-tbl tbody tr:first-child td{ border-top:0; }
.grid-tbl .rowlab{
  font-family:var(--display); font-variation-settings:'opsz' 14,'wght' 500;
  font-size:.8125rem; letter-spacing:0; text-transform:uppercase;
  color:var(--maroon); padding-right:1rem; text-align:left;
}
.cellbox{ position:relative; display:grid; place-items:center; }
.cellbox input{ position:absolute; opacity:0; width:1px; height:1px; }
.cellbox__mark{
  width:23px; height:23px; border-radius:50%;
  border:var(--hair) solid var(--red-dark); background:var(--white);
  display:grid; place-items:center; cursor:pointer;
  transition:background .15s, transform .15s;
}
.cellbox__mark:hover{ transform:scale(1.14); }
.cellbox__mark svg{ width:20px; height:20px; fill:var(--acid); opacity:0; transform:scale(.35); transition:opacity .16s, transform .26s cubic-bezier(.2,1.6,.4,1); }
.cellbox input:checked + .cellbox__mark{ background:var(--red); }
.cellbox input:checked + .cellbox__mark svg{ opacity:1; transform:none; }
.cellbox input:focus-visible + .cellbox__mark{ outline:3px solid var(--red); outline-offset:3px; }

.grid-rows{ display:none; }
@media (max-width:42rem){
  .grid-tbl{ display:none; }
  .grid-rows{ display:flex; flex-direction:column; gap:1.375rem; }
  .grid-row__lab{
    font-family:var(--display); font-variation-settings:'opsz' 14,'wght' 500;
    font-size:.8125rem; letter-spacing:0; text-transform:uppercase;
    color:var(--maroon); margin:0 0 .5rem;
  }
  .grid-row__scale{
    display:flex; gap:2px;
    /* a fileira é o contêiner de medida: o rótulo passa a escalar com ela,
       em vez de um px fixo que serve a uma largura de tela só */
    container-type:inline-size;
  }
  /* Caixas dimensionadas por conteúdo, não em cinco partes iguais: "Poor" e
     "Fair" não precisam da mesma largura que "Very good". A folga que isso
     libera é o que permite voltar aos 12px em vez de encolher a fonte. */
  .grid-row__scale .seg{ flex:1 1 auto; position:relative; min-width:0; }
  .grid-row__scale input{ position:absolute; opacity:0; width:1px; height:1px; }
  /* Aqui o corpo, não o display: numa condensada estes cinco rótulos ficavam
     estreitos demais dentro de uma caixa de largura fixa. Onest em 700
     preenche melhor.
     O vermelho é #be001e e não #e6001e: a 12px o pedido dava 4.41:1 sobre o
     creme e 3.85:1 sobre o amarelo do estado selecionado, ambos abaixo do
     mínimo de 4.5:1. Este passa nos dois (6.02 e 5.26) e nesse corpo é
     indistinguível a olho. */
  .grid-row__scale .seg__box{
    display:block; text-align:center; cursor:pointer;
    font-family:var(--body); font-weight:700; font-variation-settings:normal;
    /* Medido: os cinco rótulos somam 239px a 12px e a fileira oferece 316px
       num telefone de 360 — cabe com folga quando as caixas seguem o conteúdo.
       O clamp só entra abaixo de ~360px, onde 12px ficaria 3px curto.
       O padding vertical leva a caixa a ~44px de altura de toque. */
    font-size:12px;
    font-size:clamp(11px, 4cqi, 12px);
    letter-spacing:0; text-transform:uppercase;
    padding:.85rem .4rem; border-radius:5px; color:var(--red-dark);
    line-height:1.15; white-space:nowrap;
    background:var(--paper-2); border:var(--hair) solid var(--cream-line);
    transition:background .15s, border-color .15s;
  }
  .grid-row__scale input:checked + .seg__box{
    background:var(--acid); border-color:var(--red-dark); font-weight:800;
  }
  .grid-row__scale input:focus-visible + .seg__box{ outline:3px solid var(--red); outline-offset:2px; }
}

/* ---------- Scale 0–10 ---------- */
.scale{ margin:0 0 1.5rem; }
.scale__row{ display:flex; gap:.35rem; }
.scale__item{ flex:1 1 0; position:relative; min-width:0; }
.scale__item input{ position:absolute; opacity:0; width:1px; height:1px; }
.scale__item label{
  display:grid; place-items:center; aspect-ratio:1/1; min-height:44px;
  border-radius:6px; cursor:pointer; color:var(--maroon);
  background:var(--paper-2); border:var(--hair) solid var(--cream-line);
  font-family:var(--display); font-variation-settings:'opsz' 14,'wght' 500; font-size:.9375rem;
  transition:background .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.scale__item label:hover{ transform:translate(-2px,-2px); border-color:var(--red-dark); box-shadow:var(--card); }
.scale__item input:checked + label{ background:var(--red); border-color:var(--red-dark); color:var(--acid); font-variation-settings:'opsz' 14,'wght' 500; }
.scale__item input:focus-visible + label{ outline:3px solid var(--red); outline-offset:3px; }
.scale__ends{
  display:flex; justify-content:space-between; gap:1rem; margin-top:.5rem;
  font-family:var(--display); font-variation-settings:'opsz' 14,'wght' 500;
  font-size:.75rem; letter-spacing:0; text-transform:uppercase; color:var(--muted);
}
@media (max-width:34rem){
  .scale__row{ display:grid; grid-template-columns:repeat(6,1fr); }
}

/* ---------- Text + fields ---------- */
.field{ margin:0 0 1.25rem; }
.field__lab em{
  font-style:normal; color:var(--red);
  font-variation-settings:'opsz' 14,'wght' 500;
}
.field__lab{
  display:block;
  font-family:var(--display); font-variation-settings:'opsz' 14,'wght' 500;
  font-size:.75rem; letter-spacing:0; text-transform:uppercase;
  color:var(--red-dark); margin:0 0 .45rem;
}
textarea,input[type=text],input[type=email]{
  display:block; width:100%; font:inherit; color:var(--ink);
  background:var(--paper-2); border:var(--hair) solid var(--cream-line);
  border-radius:var(--r); padding:.8rem .95rem; box-shadow:var(--card);
  transition:border-color .15s, background .15s;
}
textarea{ min-height:8.5rem; resize:vertical; line-height:1.5; }
textarea::placeholder,input::placeholder{ color:color-mix(in srgb,var(--maroon) 35%,var(--paper)); }
textarea:hover,input:hover{ border-color:var(--red-dark); }
textarea:focus,input:focus{ outline:none; border-color:var(--red); background:var(--white); }
textarea:focus-visible,input:focus-visible{ outline:3px solid var(--red); outline-offset:2px; }
.fields{ display:grid; gap:1.25rem; margin:0 0 1.5rem; }
@media (min-width:34rem){ .fields{ grid-template-columns:1fr 1fr; } .fields .field--wide{ grid-column:1/-1; } }

/* ---------- Buttons — the site's yellow chip CTA ---------- */
.nav{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:.25rem; }

.btn{
  /* Medido no dpsite.web.app: 22px, altura 44, raio 5, borda 1px #e6001e,
     gap 11px, opsz 14 / wght 500, sem tracking. As marcas × são
     ::before/::after com mask e cor por --x, como o site faz — não SVG no
     markup, que é o que eu tinha antes. */
  --x:var(--red);
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  font-family:var(--display); font-variation-settings:'opsz' 14,'wght' 500;
  font-size:22px; letter-spacing:0; text-transform:uppercase; line-height:1;
  min-height:44px; padding:0 14px; border-radius:5px;
  border:1px solid var(--red);
  background:var(--acid); color:var(--red-dark);
  cursor:pointer; text-decoration:none; white-space:nowrap;
  box-shadow:var(--card);
  transition:transform .14s cubic-bezier(.2,.8,.25,1), background .14s, color .14s, box-shadow .14s;
}
.btn::before,
.btn::after{
  content:''; flex:0 0 auto; width:10px; height:10px;
  background-color:var(--x);
  -webkit-mask:url('assets/x-mark.svg') center/contain no-repeat;
  mask:url('assets/x-mark.svg') center/contain no-repeat;
  transition:transform .3s cubic-bezier(.2,.9,.3,1), background-color .14s;
}
/* o × gira 45° e vira + ao passar o mouse (e no foco por teclado) */
.btn:hover::before, .btn:hover::after,
.btn:focus-visible::before, .btn:focus-visible::after{ transform:rotate(45deg); }

.btn:hover{
  background:var(--red-dark); color:var(--acid); --x:var(--acid);
  transform:translate(-2px,-2px); box-shadow:var(--card-lift);
}
.btn:active{ transform:translate(2px,2px); box-shadow:var(--card-press); }
.btn:focus-visible{ outline:3px solid var(--maroon); outline-offset:3px; }
.btn--lg{ font-size:25px; min-height:50px; padding:0 18px; }

.btn--ghost{
  background:transparent; color:var(--maroon); border-color:var(--cream-line);
  box-shadow:none; --x:var(--red-dark);
}
.btn--ghost:hover{ background:var(--cream); color:var(--red-dark); border-color:var(--red-dark); transform:none; box-shadow:none; --x:var(--red-dark); }
.btn--ghost:active{ transform:translate(2px,2px); box-shadow:none; }

.skip{
  background:none; border:0; padding:.4rem 0; cursor:pointer;
  font-family:var(--body); font-size:.875rem; color:var(--muted);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
}
.skip:hover{ color:var(--red-dark); }

.err{
  display:none; align-items:center; gap:.4rem; margin:0 0 1rem;
  font-family:var(--display); font-variation-settings:'opsz' 14,'wght' 500;
  font-size:.8125rem; letter-spacing:0; text-transform:uppercase; color:var(--red-dark);
}
.err.is-on{ display:flex; }

/* ---------- Progress + the monkey ---------- */
.progress{
  padding:0 clamp(1.125rem,4vw,2.5rem);
  pointer-events:none;
}
.progress__inner{
  position:relative; max-width:var(--wrap); margin:0 auto;
  /* headroom sized to the rider so he never sits on the content */
  --rider:clamp(38px,4.2vw,54px);
  --pt:calc(var(--rider) * 1.71 + 6px);
  padding-top:var(--pt);
}

.progress__rider{
  position:absolute; left:0;
  bottom:calc(100% - var(--pt));   /* sits exactly on top of the track */
  width:var(--rider);
  transform:translateX(-52%);
  transform-origin:50% 100%;
  transition:left .55s cubic-bezier(.34,1.25,.5,1);
}
.progress__rider img{ display:block; width:100%; height:auto; margin-bottom:-5%; }
.progress__rider.is-rolling{ animation:pedal .55s cubic-bezier(.34,1.25,.5,1); }
@keyframes pedal{
  0%{ transform:translateX(-52%) rotate(-7deg); }
  55%{ transform:translateX(-52%) rotate(4deg); }
  100%{ transform:translateX(-52%) rotate(0); }
}

.progress__track{
  position:relative; height:14px; border-radius:999px;
  background:var(--cream); border:var(--hair) solid var(--cream-line);
  overflow:hidden;
}
.progress__fill{
  position:absolute; inset:0 auto 0 0; width:0; border-radius:999px;
  background:repeating-linear-gradient(112deg,var(--red) 0 11px,var(--red-dark) 11px 22px);
  background-size:31px 100%;
  transition:width .55s cubic-bezier(.34,1.25,.5,1);
  animation:crawl 1.6s linear infinite;
}
@keyframes crawl{ to{ background-position:31px 0; } }
.progress__meta{
  display:flex; justify-content:space-between; gap:1rem; margin-top:.45rem;
  font-family:var(--display); font-variation-settings:'opsz' 14,'wght' 500;
  font-size:.75rem; letter-spacing:0; text-transform:uppercase; color:var(--muted);
}
.progress__meta strong{ font-variation-settings:'opsz' 14,'wght' 500; color:var(--red-dark); }

/* ---------- Finale ---------- */
.done{ text-align:center; padding-top:.5rem; }
.done__char{
  position:relative; width:min(48vw,196px); margin:0 auto .5rem;
}
.done__char::before{
  content:''; position:absolute; z-index:-1;
  left:50%; top:6%; width:190%; height:110%;
  transform:translateX(-50%);
  background:radial-gradient(closest-side,
    color-mix(in srgb,var(--acid) 26%,transparent) 0%,
    color-mix(in srgb,var(--acid) 8%,transparent) 55%,
    transparent 100%);
}
.done__char img{
  display:block; width:100%; height:auto;
  transform-origin:50% 96%;           /* pivot where he meets the ball */
  animation:elephant-balance 4.2s ease-in-out infinite;
}
/* deliberately uneven — a steady sway would read as a metronome, not balance */
@keyframes elephant-balance{
  0%,100%{ transform:rotate(-2.1deg) translateY(0); }
  28%    { transform:rotate(1.5deg)  translateY(-.9%); }
  52%    { transform:rotate(-.7deg)  translateY(.5%); }
  76%    { transform:rotate(2.1deg)  translateY(-.7%); }
}
.done .eyebrow{ justify-content:center; color:var(--acid); }
.done .eyebrow svg{ fill:var(--acid); }
.done h1{ color:var(--acid); }
.done .lede{ margin-inline:auto; color:var(--white); }
.done .btn{
  background:var(--acid); border-color:var(--maroon); color:var(--red-dark); --x:var(--red);
}
.done .btn:hover{ background:var(--white); color:var(--red); --x:var(--red); }

.payload{ margin-top:2.5rem; text-align:left; }
.payload summary{
  font-family:var(--display); font-variation-settings:'opsz' 14,'wght' 500;
  font-size:.8125rem; letter-spacing:0; text-transform:uppercase;
  color:var(--acid); cursor:pointer; padding:.5rem 0;
}
.payload summary:hover{ color:var(--acid); }
.payload .hint{ color:color-mix(in srgb,var(--white) 82%,var(--red)); }
.payload .hint code{ background:color-mix(in srgb,var(--maroon) 45%,transparent); padding:.1em .35em; border-radius:3px; }
.payload textarea{
  min-height:15rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.75rem;
  background:var(--maroon); color:var(--paper); border-color:var(--maroon); box-shadow:none;
}
.payload textarea:focus{ background:var(--maroon); color:var(--white); border-color:var(--acid); }
.payload__row{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1rem; }
.payload__row .btn{ background:transparent; color:var(--acid); border-color:color-mix(in srgb,var(--acid) 55%,var(--red)); box-shadow:none; }
.payload__row .btn:hover{ box-shadow:none; transform:none; }
.payload__row .btn:hover{ background:var(--acid); color:var(--red-dark); }

/* ---------- Footnote ---------- */
/* ---------- Footer — rebuilt 1:1 from Rodapé.svg ---------- */
.foot{
  --chipsize:clamp(20px, 16.5px + .94vw, 30px);
  width:var(--foot); margin:0 auto;
  padding:1.125rem clamp(1.125rem,4vw,2.5rem) 1.25rem;
  display:flex; align-items:center; gap:clamp(.75rem,1.4vw,1.375rem);
  flex-wrap:wrap;
  /* scaled from the source's 20px @1440 so the row still fits one line */
  font-size:clamp(12px, 1.15vw, 16px);
  white-space:nowrap;
}
.foot__logo{ display:block; width:clamp(110px, 78px + 8.45vw, 200px); flex:0 0 auto; }

.social{ list-style:none; display:flex; gap:calc(10 / 30 * var(--chipsize)); margin:0; padding:0; }
.chip{
  --chip:var(--chipsize);
  display:grid; place-items:center;
  width:var(--chip); height:var(--chip);
  border-radius:calc(var(--chip) / 10);
  background:var(--acid); border:.5px solid var(--red-dark);
  box-shadow:2px 2px 0 0 rgba(50,50,50,var(--shadow-a));
  transition:transform .14s cubic-bezier(.2,.8,.25,1), background .14s, box-shadow .14s;
}
.chip svg{ width:100%; height:100%; fill:var(--red-dark); display:block; }
.chip:hover{ transform:translate(-1px,-1px); background:var(--red); box-shadow:3px 3px 0 0 rgba(50,50,50,var(--shadow-a)); }
.chip:hover svg{ fill:var(--acid); }
.chip:focus-visible{ outline:3px solid var(--red); outline-offset:3px; }

.foot__copy{
  margin:0; font-family:var(--body); font-weight:500;
  /* black, as in Rodapé.svg — that line carries no fill, so it defaults to it */
  font-size:1em; color:#000; white-space:nowrap;
}
.foot__quip{
  margin:0 0 0 auto; text-align:right;
  font-family:var(--display); font-variation-settings:'opsz' 14,'wght' 500;
  /* menor que o resto do rodapé, mas travado em 12px: abaixo disso
     reintroduziríamos o problema que acabamos de corrigir no site todo */
  font-size:max(12px, .8em); text-transform:uppercase; color:var(--red-dark);
}
@media (max-width:64rem){
  .foot{ row-gap:.75rem; white-space:normal; }
  .foot__copy{ white-space:normal; }
  .foot__quip{ margin-left:0; text-align:left; flex:1 1 100%; }
}
body.is-finale .foot__copy{ color:var(--white); }
body.is-finale .foot__quip{ color:var(--acid); }

body.is-finale .chip{ border-color:var(--maroon); }

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ==================================================================
   Compact frame — keeps every screen inside one viewport on phones
   and short laptops without introducing a page scrollbar.
================================================================== */
@media (max-width:46rem){
  .masthead{ padding:1rem clamp(1.125rem,4vw,2.5rem) .625rem; }
  main{ padding:.25rem clamp(1.125rem,4vw,2.5rem) .75rem; }

  h1{ font-size:clamp(1.625rem,1.2rem + 2.6vw,2.125rem); }
  h2{ font-size:clamp(1.1875rem,1.05rem + 1.4vw,1.5rem); }
  .lede{ margin-bottom:.75rem; }
  /* the chips below already say what this paragraph says */
  .intro__copy .lede + .lede{ display:none; }
  .kicker{ margin:.875rem 0 1rem; }
  .meta-list{ margin-bottom:1.125rem; }

  /* one block with the bear floated right, so the headline and lede run
     alongside him and the empty band he used to sit under disappears */
  .intro{ display:flow-root; }
  .intro__copy,
  .intro__char{ grid-area:auto; }
  .intro__char{
    float:right;
    width:min(35vw,132px);
    margin:.375rem -.375rem .25rem .875rem;
  }
  .char{ display:block; }
.intro__char img{ width:100%; height:auto; }

  .opt__box{ min-height:44px; padding:.5rem .8rem; }
  .opt__label{ font-size:.9375rem; }
  .opt__mark{ width:19px; height:19px; }
  .opt__mark svg{ width:17px; height:17px; }
  .options{ gap:calc(var(--off) + .1rem); margin-bottom:1.25rem; }

  textarea{ min-height:6.5rem; }
  .fields{ gap:.875rem; }

  .done__char{ width:min(42vw,150px); }
  .done__char img{ height:min(24dvh,210px); width:auto; margin:0 auto; }
  .payload{ margin-top:1.25rem; }
  .payload textarea{ min-height:9rem; }
}

@media (max-width:64rem){
  .foot{ font-size:clamp(12px,2.6vw,14px); }
}
@media (max-width:34rem){
  .foot{
    padding:.75rem clamp(1.125rem,4vw,2.5rem) .875rem;
    gap:.5rem .75rem; row-gap:.5rem;
  }
  .foot__logo{ width:104px; }
  .foot__copy,.foot__quip{ font-size:1em; }
  .foot__quip{ flex:1 1 100%; }
}

/* short laptops / landscape phones */
@media (max-height:720px) and (min-width:46rem){
  .masthead{ padding-block:1rem .625rem; }
  h1{ font-size:clamp(1.625rem,1.2rem + 2vw,2.25rem); }
  .intro__char{ width:clamp(130px,15vw,176px); }
  .opt__box{ min-height:44px; padding:.5rem .9rem; }
  .options{ gap:calc(var(--off) + .1rem); }
  textarea{ min-height:6.5rem; }
  .done__char img{ height:min(22dvh,190px); width:auto; margin:0 auto; }
  .done__char{ width:auto; }
}