/* Reto flash · la bienvenida, «¿Qué IA usas?», el registro, los videos y la pregunta. */
.bienvenida{background:radial-gradient(circle at 50% 30%,#FFFFFF 0,var(--suave) 42%,var(--fondo) 75%)}
main.centro{align-items:center;text-align:center;padding:0 24px}
.grande{font-size:34px;line-height:1.08;font-weight:800}
.promesa{font-size:20px;line-height:1.25;font-weight:700;text-wrap:balance}
.centro .bajada{text-wrap:balance}
.firma{margin-top:4px;font-size:15px;font-weight:600;color:var(--gris)}
.letra-chica{font-size:12px;line-height:1.3;color:var(--gris);text-align:center}

/* «¿Qué IA usas?» */
.tu-ia main{gap:6px;padding-top:4px}
.etiqueta-campo{margin-top:6px;font-size:17px;font-weight:800}
.cuatro{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ficha{min-height:52px;border-radius:14px;border:2px solid var(--lila2);background:var(--blanco);font-size:15px;font-weight:700;padding:0 4px}
.ficha.marcada{background:var(--suave);border:2.5px solid var(--morado)}
.ficha.ancha{min-height:48px;font-size:16px}
.aviso-verde{padding:12px 14px;border-radius:14px;background:var(--verde-fondo);font-size:15px;line-height:1.4;color:var(--sobre-verde);animation:aparecer .25s ease-out both}
.lista-radio{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;border-top:1.5px solid var(--lila2)}
.lista-radio li{border-bottom:1.5px solid var(--lila2)}
.fila-radio{width:100%;min-height:58px;display:flex;align-items:center;gap:14px;padding:6px 2px;border:none;background:transparent;text-align:left}
.apretada .fila-radio{min-height:50px}
.fila-radio .texto{flex:1;min-width:0;display:flex;flex-direction:column}
.fila-radio b{font-size:17px;font-weight:700;line-height:1.2}
.fila-radio small{font-size:14px;color:var(--gris)}
.chica-fila{min-height:44px;padding:3px 0;gap:12px}
.chica-fila b{font-size:16px}
.chica-fila small{font-size:13px}
.circulo{width:24px;height:24px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:50%;border:2.5px solid var(--lila);background:var(--blanco)}
.circulo i{width:12px;height:12px;border-radius:50%}
.circulo.marcado{border-color:var(--morado)}
.circulo.marcado i{background:var(--morado)}
.otra{display:flex;flex-direction:column;margin-top:4px;padding:10px 14px 6px;border-radius:16px;background:var(--suave);border:1.5px solid var(--lila2);animation:aparecer .25s ease-out both}
.otra-titulo{font-size:16px;line-height:1.3;font-weight:800}
.otra-frase{margin:4px 0 2px;font-size:14px;line-height:1.35;color:var(--hondo)}
.etiqueta{display:inline-block;vertical-align:1px;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--verde);color:var(--sobre-verde);font-size:12px;line-height:1.3;font-weight:700}
.btn.largo{font-size:16px}

/* el registro */
.formulario{gap:16px;padding-top:12px}
.campo{display:flex;flex-direction:column;gap:6px;font-size:16px;font-weight:700}
.campo small{font-size:14px;font-weight:500;color:var(--gris)}
.campo input,.campo select,.campo textarea{min-height:52px;padding:0 14px;border-radius:14px;border:2px solid var(--lila2);background:var(--blanco);font-size:17px;font-weight:500;color:var(--tinta)}
.campo textarea{padding:12px 14px;resize:vertical}
.campo.chico{font-size:15px}
.campo.chico input{min-height:48px}
.campo input::placeholder,.campo textarea::placeholder{color:#9C94B3}
.casilla{display:flex;align-items:flex-start;gap:12px;min-height:44px;font-size:15px;line-height:1.4;font-weight:500;cursor:pointer}
.casilla input{width:24px;height:24px;flex:none;margin:0;accent-color:var(--morado)}
.aviso-error{padding:10px 14px;border-radius:14px;background:var(--suave);color:var(--hondo);font-size:15px;font-weight:600}

/* los videos: espacio reservado con su portada; vertical en el celular y horizontal en la computadora */
.video main{gap:12px;padding-top:10px}
.cuadro-video{position:relative;width:100%;flex:none;border-radius:20px;overflow:hidden;background:var(--hondo)}
.cuadro-video.reservado{aspect-ratio:16/9;background:radial-gradient(circle at 30% 25%,var(--morado) 0,transparent 55%),radial-gradient(circle at 75% 80%,var(--verde) 0,transparent 45%),var(--hondo);background-size:cover;display:flex;align-items:center;justify-content:center}
.cuadro-video.reservado p{position:absolute;left:20px;right:20px;bottom:18px;color:var(--blanco);font-size:15px;font-weight:600;text-align:center}
.cuadro-video .play{width:64px;height:64px;border-radius:50%;background:var(--verde);color:var(--sobre-verde);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 0 var(--verde-sombra)}
.cuadro-video.vertical{flex:1;min-height:0;display:flex;justify-content:center;background:#000}
.cuadro-video.vertical video{height:100%;aspect-ratio:9/16;max-width:100%}
.cuadro-video.horizontal video{width:100%;aspect-ratio:16/9;display:block}

/* la pregunta del video */
.pregunta main{padding-top:16px}
.opciones{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.opcion{width:100%;min-height:64px;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:var(--blanco);border:2px solid var(--lila2);box-shadow:0 3px 0 var(--lila2);font-size:17px;font-weight:600;line-height:1.3;text-align:left}
.opcion .n{width:32px;height:32px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:10px;border:2px solid var(--lila2);color:var(--gris);font-size:15px;font-weight:700}
.opcion.elegida{background:var(--suave);border-color:var(--morado);box-shadow:0 3px 0 var(--morado)}
.opcion.elegida .n{border-color:var(--morado);color:var(--morado)}
.opcion.bien{background:var(--verde-fondo);border-color:var(--verde);box-shadow:0 3px 0 var(--verde)}
.opcion.bien .n{border-color:var(--verde);color:var(--verde-texto)}
.opcion.mal{background:var(--suave);border-color:var(--lila);box-shadow:0 3px 0 var(--lila)}
.resultado{display:flex;flex-direction:column;gap:10px;padding:18px 16px 24px;animation:aparecer .2s ease-out both}
.resultado.bien{background:var(--verde-fondo);color:var(--sobre-verde)}
.resultado.mal{background:var(--suave)}
.resultado-titulo{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:800}
.resultado.bien .resultado-titulo{color:var(--verde-texto)}
.resultado.mal .resultado-titulo{color:var(--hondo)}
.resultado p{font-size:16px;line-height:1.4}
.resultado .btn{flex:none}
/* con 4 planes y la tarjeta del plan que no se activa, la pantalla se aprieta para entrar sin deslizar */
.tu-ia.con-otra main{gap:4px}
.tu-ia.con-otra .bajada{font-size:15px}
.tu-ia.con-otra .etiqueta-campo{margin-top:2px;font-size:16px}
.tu-ia.con-otra .ficha{min-height:46px}
.tu-ia.con-otra .ficha.ancha{min-height:44px}
.tu-ia.con-otra.apretada .fila-radio{min-height:44px;padding:2px}
.tu-ia.con-otra.apretada .fila-radio b{font-size:16px}
.tu-ia.con-otra.apretada .fila-radio small{font-size:13px}
.tu-ia.con-otra .otra{padding:8px 12px 4px}
.tu-ia.con-otra .otra-titulo{font-size:15px}
