/* La encuesta. Portada y cierre sobre azul cumbre; las preguntas sobre cal. */
body { min-height: 100dvh; }

.pantalla-azul {
  min-height: 100dvh; display: flex; flex-direction: column;
  padding: 32px 28px calc(32px + env(safe-area-inset-bottom));
  background: var(--azul); color: #fff; overflow-x: clip;
}
.pantalla-azul > * { width: 100%; max-width: 560px; margin-inline: auto; }

/* Marca de agua: el símbolo sangrado al borde, en su propia franja para que
   nunca quede debajo de un texto. */
.agua { flex: 1; min-height: 150px; position: relative; margin-block: 28px; }
.agua svg { position: absolute; top: 50%; right: -34%; width: 115%; max-width: 560px; transform: translateY(-50%); fill: #fff; opacity: .14; }

.pantalla-azul .etiqueta { color: rgba(255, 255, 255, .78); }
.pantalla-azul h1 {
  font-size: clamp(32px, 9vw, 52px); line-height: 1.04; font-weight: 900; letter-spacing: -.015em;
  margin: 16px 0 18px; outline: none;
}
.pantalla-azul p { font-size: 18px; color: rgba(255, 255, 255, .88); max-width: 30em; }
.pantalla-azul .campo { margin-top: 26px; }
.pantalla-azul .campo > span { font-size: 15px; }
.pantalla-azul .campo input { background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff; }
.pantalla-azul .campo input::placeholder { color: rgba(255, 255, 255, .6); }
.pantalla-azul .campo input:focus { border-color: #fff; }
.pantalla-azul :focus-visible { outline-color: #fff; }
.acciones { margin-top: 32px; }
.acciones .btn { width: 100%; }
.acciones .nota { margin-top: 14px; font-size: 14px; color: rgba(255, 255, 255, .78); }
.cita { margin-top: 30px; font: italic 500 31px/1.2 var(--ritual); color: #fff; }
.enlace-claro { background: none; border: 0; padding: 12px 0; color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; text-align: left; }

/* Un paso por pantalla. */
.encuesta { min-height: 100dvh; display: flex; flex-direction: column; }
.barra { position: sticky; top: 0; z-index: 2; background: var(--cal); padding: 18px 28px 0; }
.barra-fila { display: flex; align-items: center; justify-content: space-between; max-width: 560px; margin: 0 auto 16px; }
.barra svg { width: 48px; fill: var(--azul); display: block; }
.barra .cuenta { font-size: 12px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--tenue); font-variant-numeric: tabular-nums; }
.avance { height: 4px; background: var(--tierra); margin: 0 -28px; }
.avance i { display: block; height: 100%; background: var(--azul); transform-origin: left; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }

.pasos { flex: 1; padding: 36px 28px 24px; }
.paso { max-width: 560px; margin: 0 auto; animation: entra .26s cubic-bezier(.2, .8, .2, 1); }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }
.paso h2 { font-size: clamp(28px, 7.6vw, 38px); line-height: 1.06; font-weight: 900; letter-spacing: -.015em; margin: 12px 0 10px; outline: none; }
.paso .sub { font-weight: 700; font-size: 19px; line-height: 1.35; margin-bottom: 6px; }
.paso .ayuda { color: var(--tenue); margin-bottom: 30px; }
.paso .campo + .campo { margin-top: 26px; }

fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset + fieldset { margin-top: 30px; padding-top: 28px; border-top: 2px solid var(--tierra); }
legend { padding: 0; font-weight: 700; font-size: 18px; line-height: 1.35; margin-bottom: 16px; }

/* Escalas: radios reales, vestidos de casillas. */
.escala { display: grid; gap: 8px; }
.escala-5 { grid-template-columns: repeat(5, 1fr); }
.escala-3 { grid-template-columns: repeat(3, 1fr); }
.escala-11 { grid-template-columns: repeat(6, 1fr); }
@media (min-width: 520px) { .escala-11 { grid-template-columns: repeat(11, 1fr); gap: 6px; } }
.op { position: relative; display: block; }
.op input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.op span {
  display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 4px;
  border: 2px solid var(--tierra); background: #fff; font-weight: 700; line-height: 1.2;
  font-variant-numeric: tabular-nums; text-align: center;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.op:hover span { border-color: var(--electrico); }
.op input:active + span { transform: scale(.96); }
.op input:checked + span { background: var(--azul); border-color: var(--azul); color: #fff; }
.op input:focus-visible + span { outline: 3px solid var(--electrico); outline-offset: 2px; }
.escala-3 .op span { font-size: 15px; min-height: 60px; }
.extremos { display: flex; justify-content: space-between; gap: 16px; margin-top: 8px; font-size: 13px; color: var(--tenue); }
.extremos span:last-child { text-align: right; }

.casilla { display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; cursor: pointer; }
.casilla input { width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--azul); flex: none; }
.opcional { font-weight: 500; color: var(--tenue); }
.aviso { margin-top: 22px; font-weight: 700; }
.aviso:not(:empty) { border-left: 4px solid var(--azul); padding-left: 12px; }
.trampa { position: absolute; left: -9999px; }

.pie { position: sticky; bottom: 0; background: linear-gradient(to top, var(--cal) 72%, rgba(244, 241, 235, 0)); padding: 20px 28px calc(20px + env(safe-area-inset-bottom)); }
.pie-fila { display: flex; gap: 12px; max-width: 560px; margin: 0 auto; }
.pie .btn-azul { flex: 1; }