/* v8.8 (08-10-2026) · Aplicación de a una pregunta por pantalla (estetica-landing.md § 37). v8.9 (08-10-2026, § 38): fuera las 4 partes y el "N de 13"; arriba queda solo la barra sin números; Atrás abajo. Va DESPUÉS de estilos.css y solo pisa lo de la aplicación; la landing y gracias no lo cargan. */ .barra-app .riel { margin: 8px 0 12px; } .barra-app .riel .avance { transition: width 250ms var(--c-casa, ease-out); } .barra-app { border-bottom: 1px solid var(--gris-2); } /* Una pregunta por pantalla. Los botones van justo debajo (no fijos): así la pregunta y su botón se ven juntos y, con el teclado abierto, el campo y el botón suben juntos. */ .pantalla { padding: var(--e24) 0 var(--e8); } .pantalla[data-n="1"] { padding-top: var(--e16); } main.angosto { padding-bottom: 0; } .acciones { position: static; border-top: 0; background: none; padding: var(--e8) var(--margen) calc(var(--e24) + env(safe-area-inset-bottom)); } .acciones .interno { max-width: calc(600px - 2 * var(--margen)); gap: 8px; } .pantalla .bajada-app { margin-bottom: var(--e16); } .nota-calc { background: var(--gris-1); border-left: 3px solid var(--naranja); border-radius: 8px; padding: 10px 12px; font-size: 14px; line-height: 1.45; color: var(--texto-2); margin: 0 0 var(--e12); } .nota-calc[hidden] { display: none; } /* La pregunta */ .preg { border: 0; margin: 0; padding: 0; min-width: 0; } .preg legend, .preg .campo > label { padding: 0; margin: 0 0 var(--e16); display: block; float: left; width: 100%; } .preg legend ~ * { clear: both; } /* ~ y no +: la nota de la cuenta va escondida justo después y no limpiaría */ .preg .campo > label { float: none; } .txt-preg { display: block; font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 21px; line-height: 1.3; letter-spacing: -0.01em; color: var(--texto); outline: none; } .opcional { font-family: 'Inter', system-ui, sans-serif; font-weight: 400; font-size: 15px; color: var(--texto-3); letter-spacing: 0; } .preg .sub-pregunta { margin: calc(-1 * var(--e8)) 0 var(--e12); font-size: 14px; } .preg .sub-pregunta.varias { font-weight: 600; color: var(--texto-2); } .preg .campo { margin-bottom: 0; } /* Opciones: un círculo en las de una sola respuesta, un cuadro en las de varias */ .preg .opciones { margin: 0; gap: 8px; grid-template-columns: 1fr; } .preg .opciones.dos { grid-template-columns: 1fr 1fr; } .preg .opciones.dos .opcion.ancha { grid-column: 1 / -1; } /* "Hoy no puedo invertir", sola en su fila */ .preg .opcion { min-height: 48px; padding: 10px 12px; font-size: 15px; line-height: 1.3; border-radius: 12px; gap: 10px; } .preg .opcion:has(input:checked) { background: var(--fondo); border-color: var(--texto); font-weight: 600; } .preg .opcion:not(.marca)::before { content: ""; width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid var(--texto-3); background: var(--fondo); box-sizing: border-box; transition: border 120ms ease-out; } .preg .opcion:not(.marca):has(input:checked)::before { border: 6px solid var(--texto); background: var(--naranja); } /* Multiopción: 7 opciones + el campo de "Otra" + el aviso tienen que entrar en 844 sin scroll */ .preg .opciones:has(.marca) { gap: 6px; } .preg .opcion.marca { min-height: 44px; padding-top: 8px; padding-bottom: 8px; } .opcion .cuadro { width: 20px; height: 20px; flex: none; border-radius: 6px; border: 2px solid var(--texto-3); background: var(--fondo); position: relative; transition: background 120ms ease-out, border-color 120ms ease-out; } .opcion:has(input:checked) .cuadro { background: var(--naranja); border-color: var(--texto); } .opcion:has(input:checked) .cuadro::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--texto); border-width: 0 2px 2px 0; transform: rotate(45deg); } /* "Otra": el campo aparece debajo de las opciones solo cuando está marcada */ .abre.otro .campo { padding-top: var(--e12); } .abre.otro .campo label { font-size: 15px; } .abre.otro input { width: 100%; } /* Campo con % al final */ .entrada.con-sufijo input { padding-right: 44px !important; } .entrada .sufijo { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-weight: 600; color: var(--texto-2); pointer-events: none; } /* Abajo: lo que falta, los botones de envío (solo la última) y la fila Atrás + Siguiente. Atrás es un botón entero de 52 px de alto a la izquierda (fácil de tocar con el pulgar); Siguiente ocupa el resto. */ .nav { display: flex; gap: 8px; align-items: flex-start; } .nav #atras { width: auto; flex: none; padding: 16px 20px; font-size: 16px; } .nav #caja-continuar { flex: 1; min-width: 0; } #envio + .nav { margin-top: 4px; } .falta-preg { font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--naranja-texto); margin: 0; text-align: center; } .falta-preg:empty { display: none; } .pantalla.pendiente .opcion { border-color: var(--naranja-texto); border-style: dashed; } .pantalla.pendiente .abre.otro input:placeholder-shown { border-color: var(--naranja-texto); } #continuar.bloqueado, #envio .boton.bloqueado { background: var(--gris-2); color: var(--texto-3); cursor: default; } #continuar.bloqueado:hover, #envio .boton.bloqueado:hover { background: var(--gris-2); } .pista-enter[hidden] { display: none !important; } #envio .aviso-p2 { margin: 4px 0 0; } @media (max-width: 359px) { .preg .opciones.dos { grid-template-columns: 1fr; } } @media (min-width: 1024px) { .pantalla { padding-top: var(--e32); } .txt-preg { font-size: 24px; } .preg .opcion { font-size: 16px; } } /* v8.10 — WhatsApp de cualquier país (estetica-landing.md § 39). A la izquierda del número, el país: se ve "+56 ▾" con el mismo borde y alto del campo; encima, el