/* =========================================================================
   curiosidades.css — «Português sem dúvidas», partilhado pelas quatro versões.

   Carrossel por scroll-snap nativo, não por trocar slides com JavaScript:
   o arrasto por toque, o teclado e o momentum vêm do browser, e sem
   JavaScript continua a funcionar — arrasta-se na mesma. O JavaScript só
   acrescenta o arrasto com o RATO (que o browser não dá) e a rotação.

   A estrutura é comum; a aparência vem da secção que envolve o bloco:
   .cur-palco--emenda (v1) · --cartaz (v2) · --ficha (v3) · --registo (v4).
   ========================================================================= */

.cur {
  /* Variáveis próprias: assim funciona na v1, que usa outra nomenclatura. */
  --display: 'Raleway', 'Avenir Next', system-ui, sans-serif;
  --body: 'Open Sans', system-ui, -apple-system, sans-serif;
  --red: #ed2e1f; --green: #40b93c; --yellow: #f7db11;
  --ink: #151515; --papel: #fff; --suave: #f4f4f2;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --cartao-w: clamp(268px, 78vw, 340px);
  --cartao-h: 380px;
  margin-top: clamp(20px, 3vw, 40px);
}

.cur__fonte {
  font: 700 12px/1 var(--display);
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 14px;
}
.cur__fonte span { opacity: .55; }

/* ------------------------------------------------------------- a pista -- */
.cur__pista {
  display: flex;
  gap: clamp(12px, 1.4vw, 20px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  /* Sangra para lá da margem para o cartão seguinte espreitar. */
  padding-block: 4px;
  scrollbar-width: none;            /* a barra é ruído: há setas e pontos */
  overscroll-behavior-x: contain;   /* não arrasta a página inteira com ela */
}
.cur__pista::-webkit-scrollbar { display: none; }

/* Enquanto o rato arrasta, o cursor muda e a selecção fica suspensa. */
.cur.is-arrastar .cur__pista { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.cur.is-carrossel .cur__pista { cursor: grab; }

.cur__slide {
  flex: 0 0 var(--cartao-w);
  min-height: var(--cartao-h);
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 10px;
  padding: clamp(18px, 2vw, 24px);
  border-radius: 16px;
}

/* --------------------------------------------------------- o conteúdo -- */
.cur__erro { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 13px; }
.cur__erro s { text-decoration-thickness: 2px; }
.cur__rotulo { font: 800 10px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.cur__cruz, .cur__visto {
  display: inline-grid; place-items: center; width: 18px; height: 18px;
  border-radius: 50%; font-size: 11px; font-weight: 700; flex: none;
}
.cur__pergunta {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(21px, 2.1vw, 27px); line-height: 1.08; letter-spacing: -.02em;
}
.cur__exemplo { font-size: 14px; line-height: 1.5; }
.cur__certo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; align-self: end; }
.cur__certo b { font-family: var(--display); font-weight: 800; font-size: 17px; }
.cur__explica { font-size: 12.5px; line-height: 1.55; }

/* -------------------------------------------------------- os controlos -- */
.cur__barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px;
}
.cur__pontos { display: flex; gap: 15px; flex-wrap: wrap; }   /* 9 px + 15 px = 24 px entre centros (WCAG 2.2, tamanho do alvo) */
.cur__ponto {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
  position: relative; cursor: pointer; transition: transform .2s var(--ease);
}
/* O ponto continua a ter 9 px à vista; a zona que responde ao toque tem 25 px. */
.cur__ponto::before { content: ""; position: absolute; inset: -8px; }
.cur__ponto:hover { transform: scale(1.35); }
.cur__setas { display: flex; align-items: center; gap: 10px; }
.cur__seta {
  width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer;
  font-size: 15px; line-height: 1; transition: background .12s var(--ease);
}
.cur__seta[disabled] { opacity: .3; cursor: default; }
.cur__conta { font: 700 13px/1 var(--display); font-variant-numeric: tabular-nums; }
.cur__cta { margin-top: 14px; font-size: 14px; }
.cur__cta a { font-weight: 700; color: inherit; text-underline-offset: 3px; }

/* ================================================= A · emenda (da v1) == */
.cur-palco--emenda .cur__fonte { color: #777; }
.cur-palco--emenda .cur__slide { background: var(--papel); border: 1px solid #0001; }
.cur-palco--emenda .cur__cruz { background: var(--red); color: #fff; }
.cur-palco--emenda .cur__visto { background: var(--green); color: #fff; }
.cur-palco--emenda .cur__erro { color: #777; }
.cur-palco--emenda .cur__erro s { color: var(--red); }
.cur-palco--emenda .cur__exemplo { color: #444; }
.cur-palco--emenda .cur__certo b { color: #2f9a33; }
.cur-palco--emenda .cur__explica { color: #666; }
.cur-palco--emenda .cur__barra { border-top: 1px solid #0001; }
.cur-palco--emenda .cur__ponto { background: #0002; }
.cur-palco--emenda .cur__ponto[aria-selected="true"] { background: var(--green); }
.cur-palco--emenda .cur__seta { border: 1px solid #0002; background: #fff; }
.cur-palco--emenda .cur__seta:hover { background: var(--suave); }
.cur-palco--emenda .cur__cta { color: #555; }
.cur-palco--emenda .cur__cta a { color: #2f9a33; }

/* ================================================= B · cartaz (da v2) == */
.cur-palco--cartaz .cur { --cartao-w: clamp(280px, 82vw, 368px); --cartao-h: 400px; }
.cur-palco--cartaz .cur__fonte { color: #ffffffcc; }
.cur-palco--cartaz .cur__slide { background: #ffffff1a; border: 1px solid #ffffff33; color: #fff; }
.cur-palco--cartaz .cur__cruz { background: #fff; color: var(--red); }
.cur-palco--cartaz .cur__visto { background: var(--yellow); color: var(--ink); }
.cur-palco--cartaz .cur__erro { color: #ffffffcc; }
.cur-palco--cartaz .cur__erro s { color: #fff; }
.cur-palco--cartaz .cur__pergunta { font-weight: 900; }
.cur-palco--cartaz .cur__exemplo { color: #ffffffdd; }
.cur-palco--cartaz .cur__certo b { color: var(--yellow); }
.cur-palco--cartaz .cur__explica { color: #ffffffbb; }
.cur-palco--cartaz .cur__barra { border-top: 1px solid #ffffff33; }
.cur-palco--cartaz .cur__ponto { background: #ffffff55; }
.cur-palco--cartaz .cur__ponto[aria-selected="true"] { background: var(--yellow); }
.cur-palco--cartaz .cur__seta { border: 1px solid #ffffff55; background: transparent; color: #fff; }
.cur-palco--cartaz .cur__seta:hover { background: #ffffff22; }
.cur-palco--cartaz .cur__cta { color: #ffffffcc; }
.cur-palco--cartaz .cur__cta a { color: var(--yellow); }

/* ================================================== C · ficha (da v3) == */
.cur-palco--ficha .cur__fonte { color: #888; }
.cur-palco--ficha .cur__slide { background: var(--suave); }
.cur-palco--ficha .cur__cruz { background: #f4dcda; color: var(--red); }
.cur-palco--ficha .cur__visto { background: var(--green); color: #fff; }
.cur-palco--ficha .cur__erro { color: #777; }
.cur-palco--ficha .cur__erro s { color: #a33; }
.cur-palco--ficha .cur__exemplo { color: #555; }
.cur-palco--ficha .cur__certo { padding: 10px 12px; background: #e8f3e7; border-radius: 10px; }
.cur-palco--ficha .cur__certo b { color: #2f9a33; }
.cur-palco--ficha .cur__explica { color: #666; }
.cur-palco--ficha .cur__barra { border-top: 1px solid #0001; }
.cur-palco--ficha .cur__ponto { background: #0002; }
.cur-palco--ficha .cur__ponto[aria-selected="true"] { background: var(--green); }
.cur-palco--ficha .cur__seta { border: 1px solid #0002; background: #fff; }
.cur-palco--ficha .cur__cta { color: #555; }
.cur-palco--ficha .cur__cta a { color: #2f9a33; }

/* ================================================ D · registo (da v4) == */
.cur-palco--registo .cur__fonte { color: #9a9a96; }
.cur-palco--registo .cur__slide { background: #141413; border: 1px solid #f2f2f029; color: #f2f2f0; }
.cur-palco--registo .cur__cruz { background: #2a1210; color: #ff6a5e; }
.cur-palco--registo .cur__visto { background: var(--yellow); color: #000; }
.cur-palco--registo .cur__erro { color: #9a9a96; }
.cur-palco--registo .cur__erro s { color: #ff6a5e; }
.cur-palco--registo .cur__exemplo { color: #c9c9c5; }
.cur-palco--registo .cur__certo b { color: var(--yellow); }
.cur-palco--registo .cur__explica { color: #9a9a96; }
.cur-palco--registo .cur__barra { border-top: 1px solid #f2f2f029; }
.cur-palco--registo .cur__ponto { background: #f2f2f040; }
.cur-palco--registo .cur__ponto[aria-selected="true"] { background: var(--yellow); }
.cur-palco--registo .cur__seta { border: 1px solid #f2f2f029; background: transparent; color: #f2f2f0; }
.cur-palco--registo .cur__seta:hover { background: #f2f2f014; }
.cur-palco--registo .cur__cta { color: #9a9a96; }
.cur-palco--registo .cur__cta a { color: var(--yellow); }

@media (prefers-reduced-motion: reduce) {
  .cur__pista { scroll-behavior: auto; }
  .cur__ponto, .cur__seta { transition: none; }
}