:root {
  --mar: #4d5ca6;
  --paginas: #edeae5;
  --tinta: #0a2b1a;
  --travesia: #f5ae8d;
  --borde: #dcd8cf;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  background: var(--paginas);
  color: var(--tinta);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 28px;
  font-size: 22px;
}

/* franja superior con el logo oficial */
.fil-brand { width: 100%; background: #fff; padding: 16px 20px 12px; text-align: center; border-bottom: 4px solid var(--mar); }
.fil-brand__logo { display: block; margin: 0 auto 8px; height: 56px; width: auto; }
.fil-brand__edicion { font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--mar); font-weight: 700; }
.fil-brand__italia { font-size: 15px; color: var(--tinta); margin-top: 3px; font-style: italic; }

/* tarjeta flotante con la encuesta */
.hoja {
  width: 100%;
  max-width: 680px;
  margin: 26px 20px 0;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 18px;
  box-shadow: 0 18px 44px -20px rgba(10, 43, 26, 0.4);
  overflow: hidden;
}
.hoja__cab { background: var(--mar); color: #fff; padding: 14px 24px; text-align: center; position: relative; }
.hoja__titulo { font-size: 22px; font-weight: 700; letter-spacing: 0.5px; }
.hoja__paso { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-size: 17px; opacity: 0.9; }

.barra { height: 8px; background: rgba(77, 92, 166, 0.15); }
.barra__relleno { height: 100%; background: var(--travesia); width: 0; transition: width 0.25s ease; }

.tarjeta { padding: 24px 26px 6px; }
.tarjeta__titulo { font-size: 28px; line-height: 1.2; margin: 0 0 20px; font-weight: 700; }
.tarjeta__opciones { display: flex; flex-direction: column; gap: 12px; }
.opcion {
  display: flex; align-items: center;
  background: #fff;
  border: 2px solid var(--borde);
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 22px;
  font-weight: 500;
  cursor: pointer;
  min-height: 62px;
  user-select: none;
}
.opcion:active { transform: scale(0.99); }
.opcion--marcada { border-color: var(--mar); background: #eef0f8; }
.opcion input { width: 28px; height: 28px; margin-right: 13px; accent-color: var(--mar); flex: none; }
.opcion--editorial { font-size: 18px; padding: 12px 14px; }
.campo-texto { margin-top: 16px; }
.campo-texto input { width: 100%; font-size: 22px; padding: 14px; border: 2px solid var(--borde); border-radius: 12px; font-family: inherit; }

.pie { padding: 12px 26px 20px; border-top: 1px solid var(--borde); }
.pie__botones { display: flex; gap: 13px; margin-bottom: 12px; }
.btn { flex: 1; font-size: 21px; font-weight: 700; padding: 17px 16px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; font-family: inherit; }
.btn--primario { background: var(--mar); color: #fff; }
.btn--primario:disabled { background: #b7bdd7; cursor: default; }
.btn--secundario { background: transparent; border-color: var(--borde); color: #555; }
.btn--secundario:disabled { opacity: 0.4; cursor: default; }
.pie__marca { text-align: center; font-size: 13px; color: #7a8077; }
.pie__marca strong { color: #0a2b1a; }

.gracias { text-align: center; padding: 48px 20px; }
.gracias__titulo { font-size: 36px; color: var(--mar); margin: 0 0 12px; }
.gracias__texto { font-size: 21px; color: #555; }
.gracias__cuenta { margin-top: 18px; font-size: 15px; color: #8a8f98; }