@font-face { font-family: "Space Grotesk"; src: url("/sistema/fuentes/space-grotesk-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/sistema/fuentes/space-grotesk-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: Inter; src: url("/sistema/fuentes/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url("/sistema/fuentes/inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* Piel de la Agencia: lima como luz y relleno (nunca texto lima sobre blanco), magenta de contraste. */
:root { color-scheme: light; --lima: #D1FE17; --magenta: #FF1F7A; --tinta: #0B0C0E; --suave: #62656b; --fondo: #f7f7f4; --superficie: #fff; --linea: #dcded8; --sombra: rgb(11 12 14 / .1); }
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --tinta: #f2f3ef; --suave: #a4a7ad; --fondo: #030304; --superficie: #111214; --linea: #2a2c30; --sombra: rgb(0 0 0 / .5); }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-width: 320px; min-height: 100svh; margin: 0; background: var(--fondo); color: var(--tinta); font: 16px/1.45 Inter, system-ui, sans-serif; }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }
main { width: min(100% - 2rem, 36rem); min-height: 100svh; margin: auto; padding: max(1.5rem, env(safe-area-inset-top)) 0 calc(2rem + env(safe-area-inset-bottom)); display: grid; align-content: center; }

.pantalla { display: grid; gap: 1rem; animation: entra .28s ease both; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }
.icono { width: 64px; height: 64px; padding: 12px; border-radius: 20px; background: #0B0C0E; }
.marca { margin: 0; font: 700 1.15rem/1 "Space Grotesk", sans-serif; letter-spacing: -.04em; }
h1, h2 { margin: 0; font-family: "Space Grotesk", sans-serif; font-weight: 700; letter-spacing: -.05em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 8vw, 3rem); line-height: 1; }
h2 { font-size: clamp(1.5rem, 6vw, 2.1rem); line-height: 1.05; }
.sub { margin: 0; color: var(--suave); text-wrap: pretty; }
.letra-chica { margin: 0; color: var(--suave); font-size: .8rem; }

/* Barra de avance */
.avance { display: flex; align-items: center; gap: .75rem; color: var(--suave); font-size: .8rem; }
.avance__barra { flex: 1; height: 6px; border-radius: 99px; background: var(--linea); overflow: hidden; }
.avance__barra i { display: block; height: 100%; background: var(--lima); border-radius: inherit; transition: width .3s ease; }

/* Opciones grandes para el dedo */
/* Más juntas (ajuste de Paul, 4-oct): se leen como una sola lista, no como tarjetas sueltas. */
.opciones { display: grid; gap: .4rem; margin: .1rem 0 0; padding: 0; border: 0; }
.opcion { position: relative; display: flex; align-items: center; gap: .75rem; min-height: 54px; padding: .55rem .9rem .55rem .55rem; border: 1.5px solid var(--linea); border-radius: 14px; background: var(--superficie); cursor: pointer; transition: border-color .15s ease, transform .15s ease, background-color .15s ease;
  animation: opcion-entra .32s cubic-bezier(.2, .8, .3, 1.2) backwards; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes opcion-entra { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion__texto { flex: 1; line-height: 1.3; }

/* Icono en pastilla lima: se mece al pasar y «salta» al elegir */
.opcion__icono { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--lima) 22%, transparent); color: var(--tinta); transition: background-color .2s ease, transform .2s ease; }
.opcion__icono svg { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
@media (hover: hover) {
  .opcion:hover { border-color: var(--tinta); transform: translateY(-1px); }
  .opcion:hover .opcion__icono svg { animation: mecer .5s ease; }
}
@keyframes mecer { 25% { transform: rotate(-12deg) scale(1.1); } 60% { transform: rotate(9deg) scale(1.1); } }
.opcion:has(input:checked) .opcion__icono { background: var(--lima); color: #0B0C0E; animation: saltar .38s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes saltar { 40% { transform: scale(1.18) rotate(-6deg); } }

/* Marca a la derecha: círculo (una opción) o cuadro (varias) */
.opcion__marca { flex: 0 0 auto; width: 20px; height: 20px; border: 2px solid var(--linea); border-radius: 50%; display: grid; place-items: center; transition: background-color .15s ease, border-color .15s ease; }
.opcion--varias .opcion__marca { border-radius: 6px; }
.opcion:has(input:checked) { border-color: var(--tinta); }
.opcion:has(input:checked) .opcion__marca { border-color: var(--tinta); background: var(--lima); }
.opcion:has(input:checked) .opcion__marca::after { content: "✓"; color: #0B0C0E; font-size: .72rem; font-weight: 700; }
.opcion:has(input:focus-visible) { outline: 3px solid var(--magenta); outline-offset: 2px; }

/* Campos de contacto */
.campo { display: grid; gap: .35rem; font-weight: 600; font-size: .9rem; }
.campo input { min-height: 52px; padding: .75rem .9rem; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--superficie); color: var(--tinta); font: 16px Inter, system-ui, sans-serif; }
.campo input:focus { border-color: var(--tinta); outline: none; }
.campo small { color: var(--suave); font-weight: 400; }

/* Botones */
.acciones { display: flex; gap: .6rem; align-items: center; margin-top: .5rem; flex-wrap: wrap; }
.boton { min-height: 52px; padding: .8rem 1.4rem; border: 1.5px solid var(--tinta); border-radius: 999px; background: transparent; color: var(--tinta); font: 600 1rem Inter, system-ui, sans-serif; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.boton--principal { border-color: #0B0C0E; background: var(--lima); color: #0B0C0E; }
.boton[disabled] { opacity: .4; cursor: not-allowed; }
.boton--texto { border-color: transparent; padding-inline: .5rem; color: var(--suave); }
.pantalla > .boton--principal { justify-self: start; }

/* Resultado */
.tarjeta { padding: 1.25rem; border: 1.5px solid var(--linea); border-radius: 18px; background: var(--superficie); display: grid; gap: .5rem; }
.tarjeta--entrada { border-color: #0B0C0E; background: #0B0C0E; color: #f2f3ef; box-shadow: 0 18px 40px var(--sombra); }
.tarjeta--entrada .etiqueta { background: var(--lima); color: #0B0C0E; }
.tarjeta--entrada .precio { color: var(--lima); }
.tarjeta--entrada p { color: rgb(242 243 239 / .8); }
.etiqueta { justify-self: start; padding: .2rem .6rem; border-radius: 99px; background: color-mix(in srgb, var(--lima) 35%, transparent); font: 600 .75rem Inter, sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.tarjeta h3 { margin: 0; font: 700 1.35rem/1.1 "Space Grotesk", sans-serif; letter-spacing: -.03em; }
.precio { margin: 0; font: 700 1rem "Space Grotesk", sans-serif; }
.tarjeta p { margin: 0; }
.escalera { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; counter-reset: paso 1; }
.escalera li { counter-increment: paso; display: grid; grid-template-columns: 2rem 1fr; gap: .1rem .75rem; padding: .9rem 1rem; border: 1px solid var(--linea); border-radius: 14px; background: var(--superficie); }
.escalera li::before { content: counter(paso); grid-row: span 3; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--lima) 35%, transparent); font: 700 .9rem "Space Grotesk", sans-serif; }
.escalera b { font-family: "Space Grotesk", sans-serif; }
.escalera small { color: var(--suave); }
.escalera .cuando { font-size: .9rem; }
.caso { font-size: .85rem; color: var(--suave); border-left: 3px solid var(--magenta); padding-left: .75rem; }

@media (prefers-reduced-motion: reduce) {
  .pantalla, .opcion, .opcion__icono, .opcion__icono svg { animation: none !important; }
  .opcion, .avance__barra i, .opcion__icono, .opcion__icono svg { transition: none; }
}
@media (prefers-color-scheme: dark) {
  .opcion__icono { background: color-mix(in srgb, var(--lima) 12%, transparent); color: var(--lima); }
}

/* 6-oct: el logo nuevo ya trae su cuadro y su fondo */
.icono { padding: 0; background: none; box-shadow: none; }