/* ================= Superfacilito - estilos (mobile first) ================= */ :root{ --azul:#2563eb; --azul-oscuro:#1d4ed8; --azul-suave:#eff4ff; --azul-texto:#1e40af; --morado:#ede9fe; --morado-texto:#6d28d9; --naranja:#f59e0b; --amarillo:#fffbeb; --amarillo-borde:#fde68a; /* UN SOLO VERDE en todo el sitio: aciertos, barras de avance y botones de WhatsApp. Antes había dos parecidos (#16a34a y #25d366) que se notaban distintos al ponerlos cerca, sin que ninguno significara nada especial. Y no es más claro por una razón medible: sobre el verde brillante de WhatsApp (#25d366) el texto blanco da un contraste de 1.98, cuando el mínimo legible es 4.5 — casi invisible al sol o con la vista cansada. Este da 4.05: se lee bien y sigue siendo un verde vivo. Si lo aclaras más, el texto de los botones empieza a perderse. */ --verde:#18914a; --verde-oscuro:#15803d; --verde-suave:#f0fdf4; --rojo:#dc2626; --rojo-suave:#fef2f2; --wa:#18914a; --wa-suave:#effaf3; /* UN SOLO AMARILLO, por el mismo motivo que hay un solo verde: lo usan el botón de la barra de anuncio y el "Desbloquear" de las fichas de pago, y dos amarillos casi iguales se notarían distintos sin que la diferencia significara nada. Con texto casi negro (#1f2937) da 9.26 de contraste, muy por encima del 4.5 mínimo. Al revés no funciona: con blanco encima daría 1.58 y no se leería al sol, que es donde va a estar mirando el celular media Puno. Si lo oscureces se vuelve mostaza y parece un aviso de error. */ --dorado:#f5c84e; --dorado-oscuro:#e8b933; --dorado-borde:#e2b333; --candado:#b45309; --texto:#1f2937; --tenue:#6b7280; --borde:#e5e7eb; --fondo:#f7f8fa; --blanco:#fff; --radio:12px; --sombra:0 1px 2px rgba(16,24,40,.05); } *{box-sizing:border-box} body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:var(--texto);background:var(--fondo);line-height:1.6;-webkit-font-smoothing:antialiased} a{color:var(--azul);text-decoration:none} a:hover{text-decoration:none} /* --------------------------------------------------------------- EL FOCO, QUE HASTA AHORA NO SE VEÍA EN NINGUNA PARTE Solo los campos de los formularios tenían marca de foco. Todo lo demás —enlaces, botones, los números del navegador, las alternativas— se quedaba con el contorno que trae el navegador, que en varios temas de Chrome y Edge es un gris finísimo casi invisible sobre fondo blanco. A quién le importa esto, en concreto: · quien va con el teclado porque el mouse no le responde bien, · quien navega con el tabulador porque le resulta más rápido, · y cualquiera que llegue con un lector de pantalla. Sin marca de foco, ninguno de los tres sabe dónde está parado. Va con :focus-visible y NO con :focus, y esa diferencia es la que hace que se pueda poner sin que moleste: el navegador solo lo enciende cuando el foco vino del teclado. Con :focus a secas, cada botón tocado con el dedo se quedaría con un aro azul pegado hasta tocar otra cosa. El :has() del final es para las alternativas del cuestionario. Ahí el radio de verdad está escondido (opacity:0, 0x0 px), así que el foco lo recibe algo que no se ve: sin esto, quien responde con el teclado no tiene forma de saber sobre qué alternativa está. Los navegadores que no entiendan :has() se saltan esa línea y todo lo demás sigue igual. */ :focus-visible{outline:3px solid var(--azul);outline-offset:2px;border-radius:4px} .opcion:has(input:focus-visible){outline:3px solid var(--azul);outline-offset:2px} /* --------------------------------------------------------------- MOVIMIENTO REDUCIDO El sitio mueve cosas: la página se desplaza sola al saltar de pregunta, el reloj late cuando quedan cinco minutos, la barra de progreso crece. Para la mayoría eso ayuda a entender qué pasó. A quien se marea con el movimiento —vértigo, migraña, sensibilidad vestibular— le arruina la pantalla, y en un examen con reloj eso no es un detalle. El sistema operativo ya tiene ese ajuste puesto por quien lo necesita; aquí solo hay que hacerle caso. No se quita nada: todo sigue pasando, pero de golpe en vez de deslizándose. OJO: esto NO alcanza a los desplazamientos que pide el JavaScript con scrollIntoView({behavior:'smooth'}). Ese "smooth" escrito a mano le gana a cualquier regla de aquí, por norma. Por eso sesion.js y resultado.js preguntan por su cuenta antes de desplazar; si algún día aparece un scroll suave nuevo en otro archivo, tiene que preguntar también. */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important} } h1{font-size:1.6rem;margin:.2em 0 .4em;line-height:1.2;letter-spacing:-.5px} h2{font-size:1.25rem} h3{font-size:1rem;margin:0} img{max-width:100%;height:auto} button{font-family:inherit} .contenedor{width:100%;max-width:1000px;margin:0 auto;padding:0 16px} .pagina{padding-top:24px;padding-bottom:80px} .centro{text-align:center} .estrecho{max-width:420px} .tenue{color:var(--tenue)} .oculto{display:none !important} .vacio{color:var(--tenue);font-style:italic;font-size:.9rem} .titulo-seccion{font-size:1.4rem;margin-bottom:18px} .migaja{display:inline-block;font-size:.85rem;color:var(--tenue);margin-bottom:10px} /* ---------------- botones ---------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:10px 18px;border-radius:8px;border:1px solid transparent; font-weight:600;font-size:.95rem;cursor:pointer;transition:.15s;text-decoration:none;white-space:nowrap} .btn:disabled{opacity:.5;cursor:not-allowed} .btn-primario{background:var(--azul);color:#fff} .btn-primario:hover:not(:disabled){background:var(--azul-oscuro)} .btn-ghost{background:#fff;color:var(--texto);border-color:var(--borde)} .btn-ghost:hover{background:#f9fafb} .btn-whatsapp{background:var(--wa);color:#fff} .btn-whatsapp:hover:not(:disabled){background:var(--verde-oscuro)} .btn-wa-suave{background:var(--wa-suave);color:var(--verde);border-color:#a7e8c4} .btn-sm{padding:6px 13px;font-size:.85rem} .btn-lg{padding:13px 26px;font-size:1rem} .btn-bloque{width:100%} /* ---------------- header ---------------- */ /* --- Barra de anuncio (la franja oscura de arriba del todo) -------------- Va ANTES de .topbar en el HTML y no lleva position:fixed a propósito: empuja la página hacia abajo en vez de taparle nada al visitante. Un cartel flotante sobre el contenido es lo que hace que la gente cierre la pestaña; una franja que se queda arriba se lee y se ignora sin estorbar. POR QUÉ OSCURA Y NO AMARILLA ENTERA Lo estuvo, y competía. La portada ya tiene mucho color —el azul del botón principal, el verde de los checks, el mockup del celular—, y una franja amarilla maciza encima de todo eso se peleaba con la propia página. Ahora el fondo ancla y el amarillo queda SOLO en el botón: en toda la franja hay un único punto de color, y es justo donde quieres que vaya el dedo. Blanco sobre #1f2937 da 14.68 de contraste; el botón amarillo con texto oscuro, 9.26. Los dos muy por encima del 4.5 mínimo, que importa cuando media Puno lo va a leer en un celular al sol. */ .barra-anuncio{background:var(--texto);color:#fff} .barra-anuncio[hidden]{display:none} .barra-anuncio-inner{max-width:1160px;margin:0 auto;padding:6px 16px; display:flex;align-items:center;gap:10px} .barra-anuncio-texto{flex:1;display:flex;align-items:center;justify-content:center; gap:9px;color:#fff;font-size:.84rem;line-height:1.35;text-align:center; flex-wrap:wrap;min-width:0} .barra-anuncio-emoji{font-size:.95rem;flex:0 0 auto} /* El botón: el único amarillo de la franja. Empezó siendo una píldora transparente con solo un borde, y ahí estaba el problema: sin relleno se lee como una etiqueta más y no como algo que se toca. Esquinas de 6px, algo más ceñidas que el resto del sitio porque aquí el botón mide la mitad. */ .barra-anuncio-btn{flex:0 0 auto;background:var(--dorado);color:var(--texto); border-radius:6px;padding:3px 11px;font-size:.76rem;font-weight:500; white-space:nowrap;transition:.15s} .barra-anuncio-texto:hover .barra-anuncio-btn{background:#fff} .barra-anuncio-x{flex:0 0 auto;background:none;border:0;color:#fff; font-size:1.2rem;line-height:1;padding:0 4px;cursor:pointer;opacity:.6; font-family:inherit} .barra-anuncio-x:hover{opacity:1} @media(max-width:640px){ /* El botón se QUEDA en celular. Estuvo oculto aquí mientras el texto era largo ("...practica gratis con solucionario"), porque entre las dos cosas la frase se partía en tres renglones. Al acortarse el mensaje dejó de haber motivo, y esconderlo salía caro: en celular —que es por donde entra casi todo el mundo— la barra se quedaba sin nada que invitara a tocarla. Un anuncio sin botón es un cartel: se lee y se sigue de largo. */ .barra-anuncio-inner{padding:6px 12px;gap:6px} .barra-anuncio-texto{font-size:.78rem;gap:7px} .barra-anuncio-btn{padding:3px 9px;font-size:.72rem} } /* La cabecera se queda arriba al bajar (position:sticky). EL `will-change` NO ES UN ADORNO NI UNA OPTIMIZACIÓN SUELTA. Chrome de Android esconde su barra de dirección cuando bajas, y al hacerlo la ventana visible crece de golpe. Durante esa animación, un elemento pegado con `top:0` sigue anclado al borde de arriba del documento, que en ese instante está por encima de lo que se ve: la cabecera aparece cortada por la mitad y se arregla sola al soltar el dedo. Se veía en las entradas del blog, donde uno baja de un tirón. Con `will-change:transform` el navegador la sube a su propia capa y la mueve con la pantalla en vez de repintarla cada cuadro, que es lo que provoca el recorte. OJO si algún día se le pone un `transform` de verdad: eso convierte a la cabecera en el marco de referencia de sus hijos `position:fixed`, y .tapa-menu vivía dentro. Hoy es `absolute` y no le afecta. */ .topbar{background:#fff;border-bottom:1px solid var(--borde);position:sticky;top:0;z-index:60; will-change:transform} .topbar-inner{width:100%;max-width:1180px;margin:0 auto;padding:0 16px; display:flex;align-items:center;gap:12px;height:66px} .logo{display:flex;align-items:center;gap:9px;color:var(--azul);font-weight:800;font-size:1.2rem; letter-spacing:-.4px;min-width:0;flex:0 1 auto;overflow:hidden} .logo-texto{color:#111827} .logo-texto b{color:#111827;font-weight:800} .nav{display:none;gap:26px;flex:1;justify-content:center} .nav a{display:flex;align-items:center;gap:7px;color:#374151;font-weight:500;font-size:1rem;padding:6px 2px;border-bottom:2px solid transparent} .nav a svg{color:#9ca3af;flex:0 0 auto} .nav a.activo{color:var(--azul);border-bottom-color:var(--azul)} .nav a.activo svg{color:var(--azul)} /* El margen negativo va a la IZQUIERDA porque el botón ahora abre la barra. Sin él, el padding de 8px del botón se suma a los 16px de .topbar-inner y la hamburguesa queda hundida respecto al logo y al contenido de abajo. */ .menu-btn{display:flex;background:none;border:0;cursor:pointer;color:var(--texto); padding:8px;margin-left:-8px;border-radius:9px} .menu-btn:hover{background:#f3f4f6} .menu-btn[aria-expanded="true"]{background:#eff6ff;color:var(--azul)} /* La hamburguesa se vuelve una X cuando el menú está abierto */ .menu-btn .icono-cerrar{display:none} .menu-btn[aria-expanded="true"] .icono-menu{display:none} .menu-btn[aria-expanded="true"] .icono-cerrar{display:block} @media(min-width:900px){ .nav{display:flex} .menu-btn{display:none} } /* ---- menú de hamburguesa (celular) ---- */ /* Aquí la marca de "estás aquí" NO es una raya de lado a lado: es una pastilla azul clara. La raya solo tiene sentido en la barra de escritorio. */ /* OJO con el z-index: la capa oscura y el menú viven los dos dentro de .topbar. Si el menú no queda por encima de la capa, se ve gris y transparente, como si estuviera roto. */ /* top:100% y no top:66px. Vale lo mismo hoy —la barra mide 66— pero se mide sola: cuelga del borde de abajo de .topbar, mida lo que mida y esté donde esté. Un número escrito a mano aquí es el mismo fallo que había en .tapa-menu, esperando a que alguien cambie el alto de la cabecera. */ .nav.abierto{display:flex;position:absolute;top:100%;left:0;right:0;background:#fff; flex-direction:column;gap:2px;padding:8px;border-bottom:1px solid var(--borde); box-shadow:0 12px 28px rgba(16,24,40,.14);z-index:3; /* 100 y no 66: con la barra de anuncio arriba, la cabecera empieza más abajo y el menú tiene esa altura menos para desplegarse. Se descuenta siempre; cuando no hay barra sobran 34px y no pasa nada, solo aparece el scroll del menú un poco antes. dvh para que en celular cuente el alto REAL, sin la barra del navegador que se esconde al bajar. */ max-height:calc(100vh - 100px);max-height:calc(100dvh - 100px); overflow-y:auto;-webkit-overflow-scrolling:touch} .nav.abierto a{padding:13px 14px;border-bottom:0;border-radius:10px;font-size:1.02rem;gap:13px} .nav.abierto a:active{background:#f3f4f6} .nav.abierto a.activo{background:#eff6ff;color:var(--azul);font-weight:600} .nav.abierto a.activo svg{color:var(--azul)} /* Capa que oscurece lo de atrás: deja claro que el menú está abierto. AQUÍ ESTABA EL FALLO DE LA BARRA DE ANUNCIO. Antes era `position:fixed; inset:66px 0 0`: fijada a la PANTALLA y empezando a 66px, o sea dando por hecho que la cabecera ocupa justo del borde de arriba al píxel 66. Eso era cierto mientras no hubiera nada encima. Con la barra de anuncio delante, la cabecera pasa a ir del 34 al 100, y la capa gris arrancaba en el 66: por la mitad. Se veía como una banda oscura cruzando el logo y el botón "Ingresar", que es exactamente lo que salía en el celular. Ahora cuelga de la propia cabecera (`top:100%` dentro de .topbar, que es sticky y por tanto su ancla): empieza justo donde la cabecera termina, haya barra o no, y esté la página arriba del todo o a media pantalla. */ .tapa-menu{display:none;position:absolute;top:100%;left:0;right:0;height:100vh; background:rgba(17,24,39,.35);z-index:1} .tapa-menu.visible{display:block} @media(min-width:900px){ .tapa-menu{display:none!important} } /* Con el menú abierto, el botón flotante de WhatsApp estorba */ body.menu-abierto .wa-flotante{display:none} /* ---- acciones a ancho completo dentro del menú del celular ---- El problema que resuelven: a 350px de ancho la barra intenta meter el logo (40vw), "Ingresar", "Crear cuenta" y la hamburguesa. Suma más que la pantalla, y como .logo lleva overflow:hidden, el que se recorta es el logo. Sacando "Crear cuenta" de la barra se liberan unos 115px y ya entra todo. Ojo con la especificidad: `.nav.abierto a` (0,2,1) le gana a `.btn` (0,1,0), así que sin repetir aquí el padding y el redondeo, los botones heredarían el aspecto de un enlace del menú y se verían planos. */ .nav-acciones{display:none} .nav.abierto .nav-acciones{display:grid;gap:10px;margin-top:6px;padding-top:12px; border-top:1px solid var(--borde)} .nav.abierto .nav-acciones .btn{width:100%;padding:13px 16px;border-radius:10px; font-size:1rem;font-weight:600} /* Y el color del texto hay que devolvérselo uno por uno, por lo mismo: `.nav a` fija color:#374151 con especificidad (0,1,1) y le gana a `.btn-primario` (0,1,0). Sin estas dos líneas el texto sale gris oscuro sobre azul, que casi no se lee. */ .nav.abierto .nav-acciones .btn-primario{color:#fff} /* Si se abre el menú en celular y luego se agranda la ventana, .abierto sigue puesto. Sin este !important los botones se colarían en el escritorio. */ @media(min-width:900px){ .nav-acciones{display:none!important} } @media(max-width:899px){ /* "Crear cuenta" sale de la barra: abajo reaparece como botón grande */ .solo-escritorio{display:none} } .perfil{margin-left:auto;display:flex;align-items:center;gap:8px;position:relative} .perfil-caja{position:relative} .perfil-boton{display:flex;align-items:center;gap:10px;background:none;border:0;cursor:pointer;padding:4px} .perfil-datos{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25} .perfil-nombre{font-weight:600;font-size:.9rem;color:#111827} .avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#1e3a8a); color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;flex:0 0 40px} .avatar-foto{object-fit:cover} .badge{font-size:.68rem;font-weight:700;padding:1px 9px;border-radius:6px;white-space:nowrap} .badge-premium{background:#fef3c7;color:#92400e} .badge-free{background:var(--morado);color:var(--morado-texto)} .menu-perfil{display:none;position:absolute;right:0;top:calc(100% + 10px);background:#fff; border:1px solid var(--borde);border-radius:10px;box-shadow:0 10px 30px rgba(16,24,40,.12); min-width:190px;padding:6px;z-index:70} .menu-perfil.abierto{display:block} .menu-perfil a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px; color:#374151;font-size:.95rem} .menu-perfil a:hover{background:#f3f4f6} .menu-perfil a svg{color:var(--tenue)} .menu-linea{height:1px;background:var(--borde);margin:6px 4px} @media(max-width:520px){ .perfil-datos{display:none} } /* ---------------- hero ---------------- */ .hero{background:#fff;padding:36px 0 44px;border-bottom:1px solid var(--borde);overflow:hidden} .hero-inner{display:grid;gap:32px} .hero-etiqueta{display:inline-block;background:#fef3c7;color:#92400e;font-size:.75rem;font-weight:700; padding:5px 14px;border-radius:8px;letter-spacing:.6px;margin-bottom:14px} .hero h1{font-size:2.1rem;font-weight:800;line-height:1.12;margin:0 0 12px} .hero-sub{color:#4b5563;font-size:1.05rem;margin:0 0 18px;max-width:44ch} .hero-lista{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:9px} .hero-lista li{display:flex;align-items:center;gap:10px;color:#374151;font-size:.95rem} .check{width:21px;height:21px;flex:0 0 21px;border-radius:50%;background:var(--verde-suave); color:var(--verde);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800} .hero-botones{display:flex;flex-wrap:wrap;gap:10px} @media(min-width:900px){ .hero-inner{grid-template-columns:1.05fr .95fr;align-items:center} .hero h1{font-size:2.9rem} } /* mockup de celular */ .hero-mockup{display:flex;justify-content:center} .celular{width:290px;background:#fff;border:9px solid #111827;border-radius:30px;overflow:hidden; box-shadow:0 20px 50px rgba(16,24,40,.18);font-size:.72rem} .celular-barra{display:flex;justify-content:space-between;padding:5px 14px;color:#6b7280;font-size:.62rem} .celular-header{display:flex;justify-content:space-between;align-items:center;padding:7px 12px;border-bottom:1px solid var(--borde)} .celular-logo{font-weight:800;color:#111827} .celular-btn{background:var(--azul);color:#fff;padding:3px 11px;border-radius:6px;font-weight:600;font-size:.65rem} .celular-cuerpo{padding:10px 12px 14px} .celular-num{color:var(--azul);font-weight:700;margin:6px 0} .celular-enunciado{margin:0 0 8px;color:#374151} .celular-op{border:1px solid var(--borde);border-radius:7px;padding:5px 9px;margin-bottom:5px;color:#374151} .celular-op.ok{border-color:var(--verde);color:var(--verde-oscuro)} .celular-op.mal{border-color:var(--rojo);color:#7f1d1d} .celular-pie{display:flex;justify-content:space-between;align-items:center;margin-top:8px} .celular-mal{color:var(--rojo);font-weight:700} .celular-chip{border:1px solid var(--borde);border-radius:6px;padding:2px 8px;color:var(--tenue);font-size:.62rem} .celular-expl{background:#fffdf6;border:1px solid #fbe8bf;border-radius:8px;padding:8px 10px;margin-top:8px} .celular-expl b{display:block;text-align:center;margin-bottom:3px} .celular-expl p{margin:0;color:#4b5563;font-size:.66rem;line-height:1.45} /* ---------------- secciones de la portada ---------------- */ .seccion{padding:44px 16px} .franja{background:#fff;border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);padding:46px 0} .titulo-centro{text-align:center;font-size:1.5rem;margin:0 0 6px} .sub-centro{text-align:center;color:var(--tenue);margin:0 0 26px;font-size:.95rem} .cabecera-seccion{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:18px} .cabecera-seccion h2{font-size:1.5rem;margin:0} .enlace-vertodos{font-size:.9rem;font-weight:600;white-space:nowrap} .tres-pasos{display:grid;gap:18px;margin-top:24px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .paso-inicio{text-align:center;padding:6px} .paso-circulo{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px; border-radius:50%;background:var(--azul-suave);color:var(--azul);font-weight:800;margin-bottom:10px} .paso-inicio h3{font-size:1.02rem;margin:0 0 5px} .paso-inicio p{margin:0;color:var(--tenue);font-size:.9rem;line-height:1.55} .planes-inicio{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));align-items:start} .tarjeta-plan{position:relative;background:var(--fondo);border:1px solid var(--borde);border-radius:14px;padding:24px 22px; display:flex;flex-direction:column;gap:12px} .tarjeta-plan.destacado{background:#fff;border:2px solid var(--azul);box-shadow:0 8px 26px rgba(37,99,235,.12)} .plan-cinta{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--azul);color:#fff; font-size:.7rem;font-weight:700;padding:3px 14px;border-radius:999px;white-space:nowrap} .plan-nombre{margin:0;font-weight:700;color:#374151} .plan-precio{margin:0;font-size:2rem;font-weight:800;line-height:1.1} .plan-lista{list-style:none;margin:0;padding:0;display:grid;gap:8px;flex:1} .plan-lista li{position:relative;padding-left:22px;font-size:.9rem;color:var(--tenue);line-height:1.5} .plan-lista li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--verde);font-weight:800} .caja-contacto{background:#fff;border:1px solid var(--borde);border-radius:14px;padding:24px; display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap} .caja-contacto h2{margin:0 0 4px;font-size:1.2rem} .caja-contacto p{margin:0;font-size:.92rem} /* ---------------- tarjetas de curso ---------------- */ /* La grilla se acomoda sola segun el ancho: sin cortes fijos */ .grilla-modulos{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))} .tarjeta-curso{background:#fff;border:1px solid var(--borde);border-radius:12px;overflow:hidden; display:flex;flex-direction:column;transition:.15s} .tarjeta-curso:hover{border-color:#cbd5e1;box-shadow:0 4px 14px rgba(16,24,40,.07)} .curso-img{position:relative;display:flex;align-items:center;justify-content:center; aspect-ratio:16/9;overflow:hidden;text-decoration:none} /* La foto llena el rectángulo sin estirarse: lo que sobra se recorta */ .curso-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} /* Sin foto queda el color del curso con un libro tenue. El nombre NO se repite aquí: ya está escrito justo debajo (o al lado, en la portada). */ .curso-adorno{display:none;position:relative;color:rgba(255,255,255,.55)} .sin-imagen > .curso-adorno{display:block} .tono-0{background:linear-gradient(135deg,#c8a97e,#8d6e4a)} .tono-1{background:linear-gradient(135deg,#12b3a2,#0d8f6f)} .tono-2{background:linear-gradient(135deg,#7c2d12,#b45309)} .tono-3{background:linear-gradient(135deg,#c4a5e8,#9061c2)} .tono-4{background:linear-gradient(135deg,#3b82f6,#1e40af)} .curso-cuerpo{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1} .curso-nombre{font-size:.95rem;font-weight:600;color:#111827;margin:0;line-height:1.3} .curso-meta{margin:0;font-size:.78rem;color:var(--tenue);display:flex;align-items:center;gap:6px} .curso-cuerpo .btn{margin-top:auto} /* ---------------- portada del curso ---------------- La imagen va en un rectángulo 16:9, igual que en las tarjetas de Estudiar, para que entre completa. El texto va aparte, sobre blanco: así se lee siempre y no choca con lo que la propia imagen tenga escrito. */ .portada-curso{display:flex;flex-direction:column;background:#fff; border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden;margin-bottom:16px} .portada-imagen{position:relative;aspect-ratio:16/9;overflow:hidden; display:flex;align-items:center;justify-content:center;flex:0 0 auto} .portada-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .portada-texto{padding:16px} .portada-titulo{margin:0;font-size:1.35rem;font-weight:800;line-height:1.2;color:#111827} .portada-sub{margin:6px 0 0;font-size:.93rem;color:#4b5563;max-width:62ch} .portada-datos{margin:9px 0 0;font-size:.82rem;color:var(--tenue)} @media(min-width:700px){ /* En pantalla ancha, la imagen a un lado y el texto al otro */ .portada-curso{flex-direction:row;align-items:center} .portada-imagen{flex:0 0 340px;max-width:44%} .portada-texto{padding:22px 26px;flex:1;min-width:0} .portada-titulo{font-size:1.7rem} } .par-botones{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px} .par-botones.solo-uno{grid-template-columns:1fr} .par-botones .btn{width:100%} @media(max-width:520px){ .par-botones{grid-template-columns:1fr} } .acordeon{display:grid;gap:12px} .acordeon-item{background:#fff;border:1px solid var(--borde);border-radius:10px;overflow:hidden} .acordeon-cabecera{width:100%;display:flex;align-items:center;gap:10px;padding:16px 18px; background:none;border:0;cursor:pointer;text-align:left;font-size:1rem} .acordeon-titulo{flex:1;color:#374151} /* Cuántas fichas del tema lleva hechas, con el tema todavía plegado. Pastilla discreta: informa, no compite con el nombre del tema. Cuando el tema está entero se pone verde, que es el único momento en que sí merece robar un poco de atención. */ .acordeon-avance{flex:0 0 auto;font-size:.76rem;font-weight:700;color:var(--tenue); background:#f3f4f6;border-radius:999px;padding:3px 9px;font-variant-numeric:tabular-nums} .acordeon-avance.completo{background:var(--verde-suave);color:var(--verde-oscuro)} .acordeon-signo{width:16px;height:16px;position:relative;flex:0 0 16px} .acordeon-signo::before,.acordeon-signo::after{content:"";position:absolute;background:#6b7280;border-radius:2px} .acordeon-signo::before{left:0;top:7px;width:16px;height:2px} .acordeon-signo::after{left:7px;top:0;width:2px;height:16px;transition:.2s} .acordeon-item.abierto .acordeon-signo::after{opacity:0} .acordeon-cuerpo{display:none;padding:0 10px 10px} .acordeon-item.abierto .acordeon-cuerpo{display:block} .lista-fichas{list-style:none;margin:0;padding:0} .ficha-item{display:grid;gap:4px 12px;align-items:center;padding:13px 10px;border-top:1px solid #f1f2f4; grid-template-columns:auto 1fr auto;grid-template-areas:"icono nombre boton" ". meta boton"} .ficha-icono{grid-area:icono;display:flex;color:#6b7280} .ficha-nombre{grid-area:nombre;color:#1f2937;font-weight:500;text-align:left; background:none;border:0;padding:0;font-size:1rem;font-family:inherit;cursor:pointer} a.ficha-nombre:hover{color:var(--azul)} .ficha-nombre.sin-link{color:var(--tenue);cursor:pointer} .ficha-meta{grid-area:meta;font-size:.8rem;color:var(--tenue)} .ficha-item .btn{grid-area:boton} /* La ficha ya hecha: solo se le pinta el visto de verde. Nada más. Se probó atenuar la fila entera y quedaba peor: una ficha hecha no es una ficha desactivada —repasarla es justo lo que hay que hacer— y apagarla la convertía en algo a lo que ya no vale la pena volver. */ .ficha-item.hecha .ficha-icono{color:var(--verde)} /* --- La ficha con candado ------------------------------------------------ Aquí había un atajo que jugaba en contra: `opacity:.72` sobre TODA la fila. La opacidad se hereda y no se puede deshacer desde dentro, así que apagaba por igual las tres cosas —el nombre, el candado y el botón de pagar— cuando solo la primera sobraba. El resultado era una fila que no parece bloqueada, parece rota: candado gris claro que se confunde con el borde, y el único botón que te da dinero tan lavado como el texto que hay que ignorar. Ahora se atenúa a mano y solo lo que toca. El nombre baja a gris medio pero sigue legible —tiene que dar ganas de abrirlo—, el candado sube a ámbar para que se lea como "esto es premium" y no como "esto falló", y el botón va a plena opacidad en amarillo. */ .ficha-item.bloqueada .ficha-nombre.sin-link{color:#4b5563} .ficha-item.bloqueada .ficha-meta{color:#9ca3af} .ficha-item.bloqueada .ficha-icono{color:var(--candado)} /* El botón de desbloquear, aquí y en la tarjeta de Modo examen. Se pinta encima del verde de WhatsApp sin tocar las plantillas: el verde es el color de "escríbenos" en todo el sitio, y este botón no abre WhatsApp, lleva a pagar. Dos acciones distintas no deberían compartir color. */ .ficha-item.bloqueada .btn-whatsapp, .tarjeta-examen.con-candado .btn-whatsapp{ background:var(--dorado);color:var(--texto);border-color:var(--dorado-borde);font-weight:600} .ficha-item.bloqueada .btn-whatsapp:hover, .tarjeta-examen.con-candado .btn-whatsapp:hover{background:var(--dorado-oscuro)} .btn-suave-linea{background:#fff;color:var(--azul);border-color:#dbe4f3} .btn-suave-linea:hover{background:var(--azul-suave)} /* En celular la ficha se convierte en una tarjeta apilada */ @media(max-width:520px){ .ficha-item{grid-template-columns:auto 1fr; grid-template-areas:"icono nombre" ". meta" "boton boton"; padding:14px 10px;gap:6px 10px} .ficha-item .btn{width:100%;margin-top:4px} } /* ---------------- ficha de examen ---------------- */ .caja-cabecera-ficha{background:#fff;border:1px solid var(--borde);border-radius:10px; padding:16px;text-align:center;margin-bottom:16px} .cab-curso{margin:0;font-weight:700;font-size:1.05rem;color:#111827} .cab-tema{margin:2px 0 0;color:var(--tenue);font-size:.92rem} /* ---- LA BARRA DE PROGRESO ---- Ahora vive DENTRO del panel de preguntas (más abajo en este archivo). Antes iba a lo ancho de la página y pegada arriba, con el contador al lado; el panel entero es lo que se queda quieto en pantalla ancha, así que la barra viaja con él y ya no necesita su propio sticky. Sigue siendo lo primero del panel a propósito: cuánto llevas se lee de un golpe de ojo, sin ponerse a contar cuadritos de colores. */ .progreso-barra{height:7px;background:var(--borde);border-radius:999px;overflow:hidden} .progreso-relleno{height:100%;width:0;background:var(--verde);transition:width .3s} .pregunta{display:none;background:#fff;border:1px solid var(--borde);border-radius:14px;margin-bottom:16px;overflow:hidden} .pregunta.visible{display:block} .pregunta-cabecera{padding:13px 18px;border-bottom:1px solid var(--borde);color:var(--azul);font-weight:600; display:flex;align-items:center;justify-content:space-between;gap:10px} /* De qué examen salió la pregunta. Se lee sin robarle el sitio al número: si no cabe, se parte en dos líneas en vez de empujarlo. */ .tag-examen{font-size:.72rem;font-weight:700;background:#e8f0fe;color:#1d4ed8; padding:3px 10px;border-radius:999px;text-align:right;line-height:1.35} .pregunta-cuerpo{padding:16px 18px 18px} /* Justificado: el enunciado suele ser un párrafo largo y así queda parejo a los dos lados, como en un libro. */ .enunciado{margin-bottom:14px;color:#374151;text-align:justify} .enunciado p{margin:0 0 6px} .enunciado img{border-radius:8px;margin:8px 0} .opciones{display:grid;gap:10px} @media(min-width:640px){ .opciones{grid-template-columns:1fr 1fr} } .opcion{display:flex;align-items:center;gap:11px;padding:12px 14px;border:1px solid var(--borde); border-radius:11px;cursor:pointer;background:#fff;transition:.12s;color:#374151} .opcion:hover{border-color:#bfdbfe} .opcion input{position:absolute;opacity:0;width:0;height:0} /* ---- LA LETRA, EN PASTILLA ---- Antes era un "a)" gris del mismo tamaño y peso que el resto de la línea. Se perdía dentro del texto, y el estado de la alternativa dependía por completo del borde. Metida en un cuadrito de color, la letra pasa a ser lo primero que se ve y carga ella sola con el estado: gris en reposo, azul lo que marcaste, verde la correcta, rojo tu error. A la distancia a la que se mira un celular, un cuadrito de 26px se distingue cuando un borde de 2px no. Ancho y alto fijos, y flex:0 0 auto: sin eso, un enunciado largo aplasta el cuadrado y la letra sale en un rectángulo cada vez más estrecho. `tabular-nums` no hace falta aquí (son letras) pero el centrado sí: la I y la M tienen anchos muy distintos. */ .opcion-letra{flex:0 0 auto;width:26px;height:26px;display:flex;align-items:center; justify-content:center;border-radius:7px;background:#f3f4f6;color:#6b7280; font-weight:700;font-size:.8rem;line-height:1;transition:.12s} .opcion-texto{flex:1} /* marcada = solo azul, sin pista de si es correcta */ .opcion.marcada{border-color:var(--azul);border-width:2px;padding:11px 13px;background:var(--azul-suave)} .opcion.marcada .opcion-letra{background:var(--azul);color:#fff} /* ---- DESPUÉS DE VERIFICAR ---- Esto antes era solo un borde de 2px de color. En un celular al sol, con la vista cansada y el aparato a un brazo de distancia, dos píxeles no se ven: el alumno tenía que bajar a leer el "Correcto / Incorrecto" para saber cómo le había ido en una pregunta que tenía delante. Ahora la alternativa entera se pinta y lleva su marca al final. Los fondos son los suaves de la paleta, los mismos del resto del sitio, no colores nuevos. La marca va con ::after y NO con un añadido. Este HTML lo rehace sesion.js al verificar y lo vuelve a armar el servidor al recargar la página: un elemento de más habría que ponerlo en los dos sitios, y el día que uno se olvide, la mitad de las preguntas salen sin marca. */ .opcion.correcta{border-color:var(--verde);border-width:2px;padding:11px 13px; background:var(--verde-suave)} .opcion.incorrecta{border-color:var(--rojo);border-width:2px;padding:11px 13px; background:var(--rojo-suave)} .opcion.correcta .opcion-letra{background:var(--verde);color:#fff} .opcion.incorrecta .opcion-letra{background:var(--rojo);color:#fff} .opcion.correcta::after,.opcion.incorrecta::after{font-weight:800;font-size:1rem; line-height:1.35;flex:0 0 auto} .opcion.correcta::after{content:"\2713";color:var(--verde)} .opcion.incorrecta::after{content:"\2715";color:var(--rojo)} .pregunta.verificada .opcion{cursor:default} /* ---- EL CANTO DE LA TARJETA ---- Una franja de color en el borde izquierdo, para que el estado de una pregunta se vea sin leer nada de dentro. Al bajar por la revisión de veinticinco, esa columna de colores en el margen es lo que deja contar los fallos de un vistazo. En la revisión del resultado la clase la pone la plantilla (r.estado); en la práctica se la pone sesion.js al verificar. Los dos nombres son los mismos —bien / mal / blanco— para que esta regla valga en las dos. NO sustituye al ✓ y la ✗ de las alternativas: el color por sí solo deja fuera a quien no distingue el rojo del verde, que es cerca de uno de cada doce hombres. La franja es para los demás; las marcas son para todos. */ .pregunta.bien{border-left:4px solid var(--verde)} .pregunta.mal{border-left:4px solid var(--rojo)} .pregunta.blanco{border-left:4px solid #d1d5db} .btn-verificar{margin-top:16px} .fila-resultado{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;flex-wrap:wrap} .resultado{font-weight:700;font-size:.95rem} .resultado.bien{color:var(--verde)} .resultado.mal{color:var(--rojo)} .resultado.blanco{color:var(--tenue)} /* El ojo del botón: abierto cuando el solucionario está escondido, tachado cuando está a la vista. */ .btn-solucionario .ojo-ocultar{display:none} .btn-solucionario.abierto .ojo-ver{display:none} .btn-solucionario.abierto .ojo-ocultar{display:inline} .icono-ok,.icono-mal{display:inline-flex;align-items:center;justify-content:center; width:19px;height:19px;border-radius:4px;color:#fff;font-size:.7rem;vertical-align:middle} .icono-ok{background:var(--verde)} .icono-mal{background:var(--rojo)} .solucionario{margin-top:14px;background:#fffdf6;border:1px solid #fbe8bf; border-radius:10px;padding:14px 16px;color:#374151;font-size:.93rem} .sol-titulo{text-align:center;font-weight:700;margin-bottom:8px;color:#4b5563;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap} /* El botón de escuchar. Va dentro del título de la explicación y lo pone lectura.js al abrirla, solo si el navegador sabe leer en voz alta. Mientras lee se pinta, para que se vea de un vistazo cuál de todas las explicaciones está sonando. */ .lectura{font-weight:600} .lectura svg{margin-right:5px} .lectura.leyendo{background:var(--verde,#16a34a);color:#fff;border-color:var(--verde,#16a34a)} .lectura.leyendo:hover{filter:brightness(.95)} .sol-texto p{margin:0 0 6px} .sol-video{position:relative;padding-top:56.25%;margin-top:12px;border-radius:10px;overflow:hidden} .sol-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .paginador{display:flex;align-items:center;justify-content:center;gap:26px;margin-top:22px} .pag-btn{width:44px;height:44px;border-radius:10px;border:1px solid var(--borde);background:#fff; display:flex;align-items:center;justify-content:center;cursor:pointer;color:#374151} .pag-btn:hover:not(:disabled){background:#f9fafb} .pag-btn:disabled{opacity:.35;cursor:not-allowed} .pag-texto{color:var(--tenue);font-size:.95rem} /* ---------------- formularios ---------------- */ .formulario{display:grid;gap:14px;background:#fff;border:1px solid var(--borde); border-radius:var(--radio);padding:20px;box-shadow:var(--sombra)} .formulario label{display:grid;gap:6px;font-size:.85rem;font-weight:600;color:var(--tenue)} .formulario input{padding:11px 13px;border:1px solid var(--borde);border-radius:8px;font-size:1rem;font-family:inherit} .formulario input:focus{outline:2px solid var(--azul);border-color:transparent} .alerta{background:var(--rojo-suave);color:#7f1d1d;padding:12px 14px;border-radius:8px;margin-bottom:14px;font-size:.9rem} /* ---------------- boton flotante de whatsapp ---------------- */ .wa-flotante{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;align-items:center;gap:9px; background:var(--wa);color:#fff;font-weight:700;padding:12px 20px;border-radius:999px; box-shadow:0 8px 24px rgba(24,145,74,.35)} /* El icono hereda el color del texto (fill:currentColor), así que con esta línea quedan los dos en blanco de una sola vez. */ .wa-flotante:hover{filter:brightness(1.05)} @media(max-width:520px){ .wa-flotante span{display:none} .wa-flotante{padding:14px;border-radius:50%} } /* ---------------- pie ---------------- */ .pie{border-top:1px solid var(--borde);background:#fff;padding:24px 0 34px;margin-top:40px; text-align:center;font-size:.85rem;color:var(--tenue)} .pie p{margin:2px 0} .pie-tenue{opacity:.7} /* Privacidad y términos. Se marcan con subrayado para que se vean como enlaces: en el pie todo va en gris y sin subrayar no los encuentra nadie, que es justo lo contrario de para lo que están puestos. */ .pie-legal{margin-top:8px !important} .pie-legal a{color:var(--tenue);text-decoration:underline} .pie-legal a:hover{color:var(--texto)} /* ---------------- perfil ---------------- */ .perfil-pagina{max-width:900px} .rejilla-perfil{display:grid;gap:18px} @media(min-width:820px){ .rejilla-perfil{grid-template-columns:300px 1fr;align-items:start} } .columna-perfil{display:grid;gap:18px} .caja-perfil{background:#fff;border:1px solid var(--borde);border-radius:12px;padding:20px} .caja-perfil h2{font-size:1.05rem;margin:0 0 14px} .formulario-plano{border:0;padding:0;box-shadow:none;background:none} .foto-zona{display:flex;flex-direction:column;align-items:center;gap:10px;padding-bottom:18px; border-bottom:1px solid var(--borde);margin-bottom:18px} .foto-grande{width:112px;height:112px;border-radius:50%;object-fit:cover;display:block} .foto-inicial{background:linear-gradient(135deg,#3b82f6,#1e3a8a);color:#fff;font-size:2.4rem; font-weight:700;display:flex;align-items:center;justify-content:center} .nota{font-size:.78rem;color:var(--tenue);margin:0;line-height:1.45} .membresia{display:grid;gap:10px;justify-items:center} .membresia-titulo{margin:0;font-size:.8rem;font-weight:700;color:var(--tenue);text-transform:uppercase;letter-spacing:.5px} .badge-grande{font-size:.85rem;padding:5px 14px} .alerta-ok{background:var(--verde-suave);color:var(--verde-oscuro)} .badge-admin{background:#ede9fe;color:#6d28d9} /* ---------------- imágenes de las preguntas ---------------- */ .figura{margin:12px 0 0;padding:0} .figura img{width:var(--ancho,50%);max-width:100%;border-radius:8px;display:block} /* En celular siempre ocupan todo el ancho, si no no se leen */ @media(max-width:640px){ .figura img{width:100% !important} } .enunciado img{max-width:100%;border-radius:8px;margin:8px 0} /* ---------------- login y crear cuenta ---------------- */ .acceso{padding:32px 16px 70px;display:flex;justify-content:center} .acceso-caja{width:100%;max-width:880px;background:#fff;border:1px solid var(--borde); border-radius:18px;overflow:hidden;display:grid;box-shadow:0 8px 30px rgba(16,24,40,.06)} @media(min-width:820px){ .acceso-caja{grid-template-columns:1fr 1fr} } .acceso-lado{background:linear-gradient(160deg,#1e3a8a,#2563eb);color:#fff;padding:34px 30px; display:flex;flex-direction:column;justify-content:center} .acceso-lado .hero-etiqueta{background:rgba(255,255,255,.18);color:#fff;margin-bottom:16px;align-self:flex-start} .acceso-lado h1{font-size:1.7rem;margin:0 0 8px;color:#fff} .acceso-lado p{margin:0 0 20px;color:rgba(255,255,255,.85);font-size:.95rem;line-height:1.6} .acceso-lista{list-style:none;padding:0;margin:0;display:grid;gap:11px} .acceso-lista li{display:flex;align-items:center;gap:10px;font-size:.92rem;color:rgba(255,255,255,.95)} .acceso-lista .check{background:rgba(255,255,255,.2);color:#fff} @media(max-width:819px){ .acceso-lado{padding:26px 24px} .acceso-lado h1{font-size:1.4rem} } .acceso-form{padding:34px 30px} .acceso-form h2{font-size:1.4rem;margin:0 0 4px} .acceso-form > .tenue{margin:0 0 18px;font-size:.9rem} .acceso-pie{margin:16px 0 0;font-size:.9rem;color:var(--tenue);text-align:center} .campo-clave{position:relative;display:block} .campo-clave input{width:100%;padding-right:44px} .ojo{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0; cursor:pointer;color:#9ca3af;padding:7px;border-radius:8px;display:flex} .ojo:hover{color:var(--texto);background:#f3f4f6} .ojo.activo{color:var(--azul)} /* ---------------- ajustes finos del responsive (alumno) ---------------- */ @media(max-width:640px){ .pagina{padding-top:18px;padding-bottom:70px} h1{font-size:1.35rem} .titulo-seccion{font-size:1.2rem} .caja-cabecera-ficha{padding:13px} .cab-curso{font-size:.98rem} .cab-tema{font-size:.85rem} .pregunta-cuerpo{padding:14px} .pregunta-cabecera{padding:11px 14px;font-size:.92rem} .enunciado{font-size:.98rem} /* Más alto que antes (era 10px) para que el dedo acierte. Con 12px de arriba y abajo la alternativa pasa de unos 42px de alto a unos 46, que es el mínimo que recomiendan Apple y Google para algo que se toca. En una lista de cinco pegadas, cuatro píxeles deciden si tocas la que querías o la de al lado. */ .opcion{padding:12px 14px} .opcion.marcada,.opcion.correcta,.opcion.incorrecta{padding:11px 13px} /* Los números del navegador también crecen en el celular, pero esa regla NO puede ir aquí: .nav-num se define más abajo en este archivo y, a igual especificidad, gana la última escrita. Puesta aquí no hacía nada — comprobado midiéndola en un navegador de verdad: seguía en 34px. Está junto a .nav-num, en su propio @media. */ .paginador{gap:18px} .acordeon-cabecera{padding:14px} .portada-titulo{font-size:1.2rem} .portada-texto{padding:14px} .caja-contacto{flex-direction:column;align-items:stretch;text-align:center} .caja-contacto .btn{width:100%} .hero{padding:26px 0 30px} .hero h1{font-size:1.6rem} .hero-botones .btn{width:100%} .seccion{padding:30px 16px} .franja{padding:32px 0} } /* ================= portada del examen ================= */ .estrecho-medio{max-width:760px} .modo-icono{width:44px;height:44px;border-radius:12px;background:var(--azul-suave);color:var(--azul); display:flex;align-items:center;justify-content:center} .modo-lista{list-style:none;padding:0;margin:6px 0 4px;display:grid;gap:8px;flex:1} .modo-lista li{position:relative;padding-left:20px;font-size:.9rem;color:#4b5563;line-height:1.5} .modo-lista li::before{content:"\2022";position:absolute;left:4px;color:#9ca3af;font-weight:700} .ultima-vez{text-align:center;color:var(--tenue);font-size:.88rem;margin:0 0 6px} /* ================= barra de la sesión ================= */ .barra-sesion{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fff; border:1px solid var(--borde);border-radius:12px;padding:12px 16px;margin-bottom:14px} .barra-sesion.examen{border-color:#c7d9ff;background:var(--azul-suave)} .barra-info{display:flex;align-items:center;gap:10px;flex:1;min-width:0;flex-wrap:wrap} .barra-ficha{font-size:.88rem;color:var(--tenue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .etiqueta-modo{font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:6px;white-space:nowrap} .etiqueta-modo.azul{background:var(--azul-suave);color:var(--azul)} .etiqueta-modo.naranja{background:var(--azul-suave);color:var(--azul)} .reloj{font-variant-numeric:tabular-nums;font-weight:800;font-size:1.25rem;color:#111827; background:#f3f4f6;padding:4px 14px;border-radius:9px;letter-spacing:.5px} .reloj.poco{background:var(--rojo-suave);color:var(--rojo);animation:latido 1s infinite} @keyframes latido{50%{opacity:.55}} /* ================= el panel de preguntas ================= La lista de números, la barra de progreso y qué significa cada color, todo dentro de una caja del tamaño de lo que enseña. Antes los números iban sueltos, en una tira a lo ancho encima de la pregunta. Con veinticinco daba dos filas largas que empujaban la pregunta hacia abajo y no se leían como una lista: se leían como una regla de medir. EN PANTALLA ANCHA el panel va a la derecha y se queda quieto mientras se baja: `order` lo manda a la segunda columna aunque en el HTML esté escrito primero (allí va primero porque en el celular es lo que toca ver antes; el porqué largo está anotado en la plantilla). Que se quede quieto no es un adorno: quien mira el panel casi siempre busca UNA pregunta concreta —la que dejó en blanco, la que falló— y necesita verlo al mismo tiempo que la pregunta. EN EL CELULAR no hay dos columnas: es una caja normal arriba del todo, y se puede plegar. Veinticinco números en un teléfono son cinco filas entre la cabecera y la pregunta; quien ya sabe por dónde va lo cierra una vez y se olvida. */ .sesion-cuerpo{display:flex;flex-direction:column;gap:16px} .sesion-principal{min-width:0} .panel-preguntas{background:#fff;border:1px solid var(--borde);border-radius:14px} .panel-cabecera{display:flex;align-items:center;gap:10px;padding:13px 14px} .panel-titulo{margin:0;font-size:.95rem;font-weight:700;color:#111827;flex:1} /* Cuántas van. Tabular a propósito: sin eso el número cambia de ancho al pasar de 9 a 10 y la pastilla pega un salto con cada respuesta, que es justo lo que cansa de un contador que se mueve solo. */ .panel-cuenta{font-size:.78rem;font-weight:600;color:var(--tenue);background:#f3f4f6; padding:4px 11px;border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums} .panel-plegar{display:none;align-items:center;justify-content:center;width:32px;height:32px; border:1px solid var(--borde);border-radius:9px;background:#fff;color:var(--tenue); cursor:pointer;transition:.12s;flex:none} .panel-plegar:hover{border-color:var(--azul);color:var(--azul)} /* La flecha apunta a lo que va a pasar al tocarla, no a como está ahora. */ .panel-preguntas.plegado .panel-plegar svg{transform:rotate(180deg)} .panel-cuerpo{display:grid;gap:13px;padding:0 14px 14px} .panel-preguntas.plegado .panel-cuerpo{display:none} .panel-leyenda{display:flex;flex-wrap:wrap;gap:14px;margin:0;font-size:.8rem;color:var(--tenue)} .leyenda-item{display:inline-flex;align-items:center;gap:6px} .leyenda-punto{width:9px;height:9px;border-radius:50%;flex:none} /* Los puntos van del mismo color que el NÚMERO de su cuadrito, no del fondo: un punto de 9px en tinte claro no se ve, y encima tiene que parecerse a lo que explica. */ .leyenda-punto.verde{background:var(--verde-oscuro)} .leyenda-punto.rojo{background:#b91c1c} /* Cuántas quedan. Vacío antes de empezar y el :empty lo esconde, para que no quede un renglón en blanco colgando del panel. */ .panel-faltan{margin:0;font-size:.82rem;color:var(--tenue)} .panel-faltan:empty{display:none} .panel-faltan.completo{color:var(--verde);font-weight:600} /* Los números, en rejilla y no en fila suelta: en rejilla todos miden lo mismo y las columnas quedan a plomo, que es lo que hace que se lea como una lista de preguntas y no como una tira de cuadritos. */ .navegador{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:8px} /* 40px de alto es el mínimo que recomiendan Apple y Google para algo que se toca con el dedo, y estos botones van pegados de a veinticinco. */ .nav-num{height:40px;border-radius:10px;border:1px solid var(--borde);background:#fff; cursor:pointer;font-weight:600;font-size:.85rem;color:#9ca3af;transition:.12s} .nav-num:hover{border-color:var(--azul);color:var(--azul)} /* Respondida pero sin corregir todavía. Va en tinte como las otras dos: los tres estados son la misma clase de dato —cómo va esta pregunta— y si uno se pinta a todo color se lleva la vista sin merecerlo. En examen este es el ÚNICO color que sale, y aun en tinte se separa de lo blanco sin discusión. Contraste del número, 7:1. */ .nav-num.marcada{background:#dbeafe;border-color:#a8c7fa;color:var(--azul-oscuro)} /* En PRÁCTICA el número dice además CÓMO fue, no solo que fue contestada. Así, terminada la ficha, los fallos se ven de un vistazo y se vuelve a ellos tocando el número, sin ir pregunta por pregunta buscándolos. Van DESPUÉS de .marcada a propósito: las dos clases conviven en el mismo botón (contestada + acertada) y aquí gana la última que se escribe. En examen estas dos no se ponen nunca, que es justo lo que corresponde: ahí no se sabe cómo fue hasta el final. */ /* En tinte y no a todo color. Van veinticinco juntos en una caja pequeña: con el verde y el rojo enteros el panel se volvía un semáforo que se llevaba la vista por encima de la pregunta, que es lo que de verdad hay que mirar. El fondo tenue dice el estado, y el número va del mismo color pero oscuro, que es lo que lo hace legible. Los dos pasan de 4.5:1 de contraste, así que se siguen leyendo con sol en la pantalla. */ .nav-num.bien{background:#dcfce7;border-color:#a7e8c4;color:var(--verde-oscuro)} .nav-num.mal{background:#fee2e2;border-color:#f6b9b9;color:#b91c1c} /* El botón de plegar solo existe donde el panel estorba: en el celular, donde ocupa el ancho entero y hay que pasar por encima de él para llegar a la pregunta. Al lado, en pantalla ancha, no molesta a nadie. */ @media(max-width:899px){ .panel-plegar{display:inline-flex} } /* LAS DOS COLUMNAS. LOS 66px NO SON UN NÚMERO AL AZAR: es el alto exacto de .topbar-inner, que es lo que ocupa la cabecera cuando está pegada arriba. Si algún día cambia ese alto, este número cambia con él o el panel se monta encima. La barra de anuncio NO cuenta: no es sticky, se va con el scroll. Este @media va AQUÍ y no con los demás ajustes de más arriba: las reglas del panel se escriben en este punto del archivo, y a igual especificidad manda la última. Allá arriba no haría nada. */ @media(min-width:900px){ /* Un poco más ancho que el resto del sitio: son dos columnas, y con los 1000px de siempre la pregunta se quedaba estrecha para que cupiera el panel. Solo en esta pantalla. */ .contenedor-sesion{max-width:1180px} .sesion-cuerpo{flex-direction:row;align-items:flex-start;gap:20px} .sesion-principal{flex:1;order:1} .panel-preguntas{order:2;width:272px;flex:none;position:sticky;top:66px; max-height:calc(100vh - 86px);overflow:auto} /* Si alguien plegó el panel en el celular y luego giró el aparato o agrandó la ventana, la clase se queda puesta. Aquí no pinta nada: plegado o no, en pantalla ancha el panel se ve entero. */ .panel-preguntas.plegado .panel-cuerpo{display:grid} /* Cinco por fila: con 272px de panel salen cinco cuadros cómodos, y las veinticinco caben en cinco filas justas que se cuentan de un vistazo. */ .navegador{grid-template-columns:repeat(5,1fr)} } .pregunta.resaltada{box-shadow:0 0 0 3px var(--azul-suave)} .zona-terminar{margin-top:24px;background:#fff;border:1px solid var(--borde);border-radius:12px; padding:20px;text-align:center;display:grid;gap:12px;justify-items:center} .pendientes{margin:0;font-size:.9rem;color:var(--tenue)} .pendientes.completo{color:var(--verde);font-weight:600} /* ================= resultado ================= */ .tarjeta-resultado{background:#fff;border:1px solid var(--borde);border-radius:16px;padding:28px 24px; text-align:center;display:grid;gap:14px;justify-items:center;margin-bottom:30px} .res-ficha{margin:0;color:var(--tenue);font-size:.9rem} .rueda{width:130px;height:130px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:conic-gradient(var(--verde) calc(var(--pct)*1%), #eef0f3 0)} .rueda-num{width:100px;height:100px;border-radius:50%;background:#fff;display:flex;align-items:center; justify-content:center;font-size:1.6rem;font-weight:800} .res-frase{margin:0;font-size:1.02rem} .marcadores{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:420px} .marcador{border-radius:11px;padding:12px 8px;display:flex;flex-direction:column;gap:2px} .marcador b{font-size:1.5rem;line-height:1.2} .marcador span{font-size:.76rem} .marcador.bien{background:var(--verde-suave);color:var(--verde-oscuro)} .marcador.mal{background:var(--rojo-suave);color:#b91c1c} .marcador.blanco{background:#f3f4f6;color:var(--tenue)} .res-botones{display:flex;gap:10px;flex-wrap:wrap;justify-content:center} .res-botones form{margin:0} /* Aviso de que la ficha siguiente tiene candado. Tono de invitación, no de error: el alumno no ha hecho nada mal, simplemente ahí se acaba lo que tiene abierto. Por eso va en el amarillo del sitio y no en rojo. */ .res-candado{margin:2px 0 0;font-size:.9rem;color:#78500c;background:var(--amarillo); border:1px solid var(--amarillo-borde);border-radius:10px;padding:10px 14px;text-align:center} /* ---- FILTRO DE LA REVISIÓN ---- */ .filtro-revision{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} .filtro-btn{border:1px solid var(--borde);background:#fff;color:#4b5563;font-weight:600; font-size:.86rem;padding:8px 14px;border-radius:999px;cursor:pointer;transition:.12s} .filtro-btn:hover{border-color:#bfdbfe} .filtro-btn.activo{background:var(--texto);border-color:var(--texto);color:#fff} /* El de falladas se colorea SOLO cuando está elegido. En reposo va gris como los demás: un botón rojo permanente al lado de la nota se lee como que algo falló en la página, no como un filtro. */ .filtro-btn.mal.activo{background:var(--rojo);border-color:var(--rojo)} .filtro-btn.blanco.activo{background:var(--tenue);border-color:var(--tenue)} /* Esconder, no quitar del documento: si se quitaran, un solucionario abierto dentro de una pregunta escondida dejaría a app.js contando botones que ya no existen. Los cuatro nombres de clase de este selector le ganan a .pregunta.visible, que son dos. Si algún día alguien sube la especificidad de aquella regla, el filtro deja de esconder nada y nadie se entera hasta que un alumno lo cuenta. */ .revision.solo-mal .pregunta:not(.mal){display:none} .revision.solo-blanco .pregunta:not(.blanco){display:none} .aviso-tiempo{background:var(--rojo-suave);color:#7f1d1d;border:1px solid #fecaca;border-radius:10px; padding:12px 16px;margin-bottom:14px;font-size:.92rem} .titulo-revision{font-size:1.2rem;margin:0 0 2px} .revision{display:grid;gap:16px;margin-top:16px} .pregunta.revisada .opcion{cursor:default} /* La marca de cómo salió la pregunta. En la revisión va abajo a la izquierda, igual que en la práctica, así que ahí no lleva pastilla. */ .sello{float:right;font-size:.72rem;font-weight:700;padding:2px 10px;border-radius:6px} .sello-bien{background:var(--verde-suave);color:var(--verde-oscuro)} .sello-mal{background:var(--rojo-suave);color:#b91c1c} .sello-blanco{background:#f3f4f6;color:var(--tenue)} .fila-resultado .sello{float:none;background:none;padding:0;font-size:.95rem} .aviso-vencida{background:#fffdf6;border:1px solid #fbe8bf;color:#4b5563;border-radius:10px; padding:12px 16px;margin-bottom:14px;font-size:.9rem} /* ---------------- checkout ---------------- */ .checkout{display:grid;gap:14px;margin-top:22px} .paso-checkout{display:flex;align-items:center;gap:11px;margin-top:8px} .paso-checkout h2{font-size:1.05rem;margin:0} .paso-num{width:28px;height:28px;flex:0 0 28px;border-radius:50%;background:var(--azul);color:#fff; display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem} .planes-checkout{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))} .plan-op{cursor:pointer;display:block} .plan-op input{position:absolute;opacity:0;width:0;height:0} .plan-op-caja{position:relative;display:flex;flex-direction:column;gap:4px;height:100%; background:#fff;border:2px solid var(--borde);border-radius:14px;padding:20px 18px;transition:.15s} .plan-op:hover .plan-op-caja{border-color:#bfdbfe} .plan-op input:checked + .plan-op-caja{border-color:var(--azul);box-shadow:0 6px 20px rgba(37,99,235,.14)} .plan-op-nombre{font-weight:700;color:#374151} .plan-op-precio{font-size:1.7rem;font-weight:800;line-height:1.15} .plan-op-meses{font-size:.82rem;color:var(--tenue)} .plan-op-lista{display:grid;gap:5px;margin-top:8px} .plan-op-lista span{position:relative;padding-left:19px;font-size:.83rem;color:var(--tenue);line-height:1.45} .plan-op-lista span::before{content:"\2713";position:absolute;left:0;color:var(--verde);font-weight:800} .campos-checkout{display:grid;gap:14px;background:#fff;border:1px solid var(--borde);border-radius:14px;padding:20px} .campos-checkout label{display:grid;gap:6px;font-size:.85rem;font-weight:600;color:var(--tenue)} .campos-checkout input{padding:11px 13px;border:1px solid var(--borde);border-radius:9px;font-size:1rem;font-family:inherit;width:100%} .campos-checkout input:focus{outline:2px solid var(--azul);border-color:transparent} .campo-tel{display:flex;align-items:stretch} .prefijo{display:flex;align-items:center;padding:0 12px;background:#f3f4f6;border:1px solid var(--borde); border-right:0;border-radius:9px 0 0 9px;font-weight:600;color:var(--tenue);font-size:.95rem} .campo-tel input{border-radius:0 9px 9px 0} .plan-meses{margin:0;font-size:.83rem;color:var(--tenue)} /* ---------------- página de la orden ---------------- */ .orden-cabecera{text-align:center;margin-bottom:18px} .orden-cabecera h1{margin:8px 0 4px} .estado{display:inline-block;font-size:.74rem;font-weight:700;padding:3px 12px;border-radius:999px} .estado-en_progreso{background:var(--ambar-suave);color:#92400e} .estado-completado{background:var(--verde-suave);color:var(--verde-oscuro)} .estado-cancelado{background:var(--rojo-suave);color:#b91c1c} .reloj-orden{background:#fff;border:1px solid var(--borde);border-radius:12px;padding:16px; text-align:center;margin-bottom:18px} .reloj-orden b{display:block;font-size:2rem;font-variant-numeric:tabular-nums;line-height:1.1} .reloj-orden span{font-size:.84rem;color:var(--tenue)} .reloj-orden.poco b{color:var(--rojo)} .pasos-pago{display:grid;gap:14px} .paso-pago{display:flex;gap:14px;background:#fff;border:1px solid var(--borde);border-radius:12px;padding:18px} .paso-pago h3{font-size:1rem;margin:0 0 6px} .paso-pago > div{flex:1;min-width:0} .qr-pago{border:1px solid var(--borde);border-radius:10px;padding:10px;margin:10px 0;text-align:center;background:#fff} .qr-pago img{max-width:230px;width:100%;border-radius:6px;display:block;margin:0 auto} .numero-pago{margin:0;font-size:1.02rem} .titular-pago{margin:2px 0 0;color:var(--tenue);font-size:.92rem} /* --- Instrucciones de Yape dentro del checkout -------------------------- El número va grande y con espacio alrededor porque se lee desde el celular, a menudo con la app de Yape ya abierta al lado. Tabular-nums para que los nueve dígitos no bailen y se puedan leer de tres en tres. */ .caja-yape{background:#fff;border:1px solid var(--borde);border-radius:12px;padding:18px; display:grid;gap:14px} .caja-yape .qr-pago{margin:0} .caja-yape .qr-pago .nota{margin:8px 0 0} .yape-numero{background:var(--wa-suave);border:1px solid #a7e8c4;border-radius:10px; padding:14px;text-align:center;display:grid;gap:4px;justify-items:center} .yape-etiqueta{font-size:.82rem;color:var(--tenue);text-transform:uppercase;letter-spacing:.04em} .yape-numero b{font-size:1.55rem;font-variant-numeric:tabular-nums;letter-spacing:.03em; color:var(--verde-oscuro);line-height:1.2} .yape-numero .titular-pago{margin:0} .btn-copiar{margin-top:8px;padding:7px 14px;font-size:.86rem} .btn-copiar.copiado{background:var(--verde-suave);border-color:#a7e8c4;color:var(--verde-oscuro)} .yape-pasos{margin:0;padding-left:20px;display:grid;gap:6px;font-size:.93rem;color:var(--texto)} .yape-pasos li{padding-left:2px} /* --- "Te abrimos WhatsApp": la pantalla de después del comprobante ------ */ .caja-enviado{background:#fff;border:1px solid #a7e8c4;border-radius:14px;padding:30px 22px; text-align:center;display:grid;gap:14px;justify-items:center} .enviado-icono{width:64px;height:64px;border-radius:50%;background:var(--wa-suave);color:var(--wa); display:flex;align-items:center;justify-content:center} .caja-enviado h1{margin:0;font-size:1.4rem} .enviado-sub{margin:0;font-size:.98rem;max-width:34rem} .caja-enviado .btn{width:100%;max-width:26rem} .caja-enviado .nota{margin:0} .enviado-resumen{width:100%;max-width:26rem;border-top:1px solid var(--borde);padding-top:14px; display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:left} .enviado-resumen div{display:grid;gap:1px} .enviado-resumen span{font-size:.78rem;color:var(--tenue);text-transform:uppercase;letter-spacing:.03em} .enviado-resumen b{font-size:.98rem} .alerta-orden{background:var(--ambar-suave);border:1px solid #fcd9a0;color:#78350f;border-radius:10px; padding:13px 16px;margin-top:18px;font-size:.9rem;line-height:1.55} .caja-exito,.caja-cancelada{background:#fff;border:1px solid var(--borde);border-radius:14px; padding:28px 22px;text-align:center;display:grid;gap:12px;justify-items:center} .caja-exito{border-color:#bbf7d0;background:var(--verde-suave)} .caja-exito h2,.caja-cancelada h2{margin:0;font-size:1.2rem} .caja-exito p,.caja-cancelada p{margin:0;font-size:.94rem} .cabecera-ordenes{display:flex;align-items:flex-end;justify-content:space-between;gap:14px; flex-wrap:wrap;margin-bottom:18px} .cabecera-ordenes .titulo-seccion{margin-bottom:2px} .cabecera-ordenes p{margin:0;font-size:.9rem} .sin-ordenes{background:#fff;border:1px solid var(--borde);border-radius:14px;padding:36px 22px; text-align:center;display:grid;gap:12px;justify-items:center;color:var(--tenue)} .sin-ordenes p{margin:0} .lista-ordenes{display:grid;gap:12px} .tarjeta-orden{display:grid;gap:10px;background:#fff;border:1px solid var(--borde);border-radius:12px; padding:16px 18px;color:var(--texto);transition:.15s} .tarjeta-orden:hover{border-color:#cbd5e1;box-shadow:0 4px 14px rgba(16,24,40,.06)} .orden-arriba{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .orden-codigo{font-weight:700;font-size:1.02rem;letter-spacing:.3px} .orden-medio{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap} .orden-plan{color:#374151;font-weight:500} .orden-precio{font-size:1.25rem;font-weight:800} .orden-abajo{display:flex;gap:16px;flex-wrap:wrap;padding-top:10px;border-top:1px solid #f1f2f4} .orden-abajo span{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--tenue)} .orden-aviso{font-size:.84rem;border-radius:8px;padding:9px 12px;line-height:1.5} .orden-aviso.pendiente{background:var(--amarillo);color:#78350f} .orden-aviso.listo{background:var(--verde-suave);color:var(--verde-oscuro)} .orden-aviso.muerta{background:#f3f4f6;color:var(--tenue)} @media(max-width:520px){ .cabecera-ordenes .btn{width:100%} .orden-abajo{gap:8px;flex-direction:column} } .aviso-premium{background:var(--azul-suave);border:1px solid #c7d9ff;border-radius:10px; padding:12px 16px;margin-bottom:14px;font-size:.92rem} /* ---------------- practicar sin cuenta ---------------- La tira va discreta: avisa, pero no se pone delante de la primera pregunta. El bloque del resultado sí pesa, porque ahí ya practicó, ya vio su nota, y es cuando registrarse tiene sentido para él. */ .tira-invitado{background:var(--amarillo);border:1px solid var(--amarillo-borde); border-radius:10px;padding:9px 14px;margin:0 0 14px;font-size:.86rem;color:#4b5563} .tira-invitado a{font-weight:600} .aviso-invitado{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio); box-shadow:var(--sombra);padding:22px 20px;margin:18px 0;text-align:center} .aviso-invitado p{margin:0 0 12px;color:var(--tenue);font-size:.94rem} .aviso-invitado-titulo{font-weight:700;color:var(--texto) !important;font-size:1.05rem !important} .aviso-invitado-pie{margin:12px 0 0 !important;font-size:.86rem !important} .campo-clave .ojo{color:#9ca3af} /* ---------------- métodos de pago ---------------- */ .metodos-pago{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))} .metodo{cursor:pointer;display:block} .metodo input{position:absolute;opacity:0;width:0;height:0} .metodo-caja{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid var(--borde); border-radius:12px;padding:14px 16px;transition:.15s} .metodo:hover .metodo-caja{border-color:#bfdbfe} .metodo input:checked + .metodo-caja{border-color:var(--azul);box-shadow:0 4px 14px rgba(37,99,235,.12)} .metodo-logo{width:36px;height:36px;flex:0 0 36px;border-radius:9px;color:#fff;font-weight:800; display:flex;align-items:center;justify-content:center} .metodo-logo.yape{background:#742284} .metodo-logo.plin{background:#0ea5b7} .metodo-nombre{font-weight:600} .enlace-ordenes{font-size:.85rem;margin-top:4px} .caja-perfil .campo-tel input{border-radius:0 10px 10px 0} .caja-perfil .prefijo{border-radius:10px 0 0 10px} .estado-por_confirmar{background:var(--azul-suave);color:var(--azul-texto)} .orden-aviso.revisando{background:var(--azul-suave);color:var(--azul-texto)} .caja-confirmar{background:#fff;border:1px solid #c7d9ff;background:var(--azul-suave); border-radius:14px;padding:26px 22px;text-align:center;display:grid;gap:12px;justify-items:center} .caja-confirmar h2{margin:0;font-size:1.2rem} .caja-confirmar p{margin:0;font-size:.94rem;line-height:1.6} /* ---------------- retomar lo que dejó a medias ---------------- */ .retomar{background:#fff;border:2px solid var(--azul);border-radius:16px;padding:26px 24px; text-align:center;display:grid;gap:12px;justify-items:center; box-shadow:0 8px 26px rgba(37,99,235,.12);margin-bottom:22px} .retomar h1{font-size:1.35rem;margin:0} .retomar-sub{margin:0;color:var(--tenue);font-size:.95rem} .retomar-barra{width:100%;max-width:340px;height:8px;background:#eef0f3;border-radius:999px;overflow:hidden} .retomar-relleno{height:100%;background:var(--azul);border-radius:999px;transition:width .3s} .retomar .btn{max-width:340px} /* Cuando ya hay algo a medias, los modos pasan a segundo plano */ /* ---------------- tarjeta del examen dentro del curso ---------------- */ .tarjeta-examen{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#2563eb,#1e3a8a);color:#fff; border-radius:12px;padding:16px 18px;margin-bottom:16px;transition:.15s} .tarjeta-examen:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(37,99,235,.28)} .tarjeta-examen.con-candado{background:#f3f4f6;color:var(--texto);border:1px solid var(--borde)} .examen-icono{width:42px;height:42px;flex:0 0 42px;border-radius:11px;background:rgba(255,255,255,.14); display:flex;align-items:center;justify-content:center} /* El candado en ámbar sobre fondo crema, no gris sobre gris: tiene que leerse como "esto es premium" y no como "esto no cargó". Va aquí abajo y no con el resto de reglas del candado porque esta hoja se lee en orden y la de arriba perdería contra esta, que tiene el mismo peso y llega después. */ .tarjeta-examen.con-candado .examen-icono{background:#fdf3d7;color:var(--candado)} .examen-texto{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0} .examen-texto b{font-size:1rem} .examen-texto span{font-size:.82rem;opacity:.75;line-height:1.4} .tarjeta-examen .btn{white-space:nowrap} @media(max-width:520px){ .tarjeta-examen{flex-wrap:wrap} .tarjeta-examen .btn{width:100%;justify-content:center} } /* ---------------- portada del examen ---------------- */ .examen-portada{background:#fff;border:1px solid var(--borde);border-radius:16px;padding:30px 24px; text-align:center;display:grid;gap:14px;justify-items:center} .examen-portada h1{font-size:1.4rem;margin:0} .examen-sub{margin:0;color:var(--tenue);font-size:.95rem;max-width:44ch} .modo-icono.grande{width:60px;height:60px;border-radius:16px} .examen-datos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:400px;margin:4px 0} .examen-datos div{background:var(--fondo);border-radius:11px;padding:12px 8px;display:flex;flex-direction:column} .examen-datos b{font-size:1.5rem;line-height:1.2} .examen-datos span{font-size:.74rem;color:var(--tenue);line-height:1.3} .examen-lista{text-align:left;max-width:420px;width:100%} .examen-portada form{width:100%;max-width:400px} .btn-texto-suave{background:none;color:var(--tenue);border:0;font-size:.85rem;text-decoration:underline;padding:6px} .btn-texto-suave:hover{color:var(--rojo)} .retomar form{margin:0} .btn-blanco{background:#fff;color:var(--azul)} .btn-blanco:hover{background:#eef4ff} .reloj-restante{display:inline-flex;align-items:center;gap:8px;background:var(--azul-suave); color:var(--azul-texto);padding:8px 16px;border-radius:999px;font-size:.88rem} .reloj-restante.poco{background:var(--rojo-suave);color:var(--rojo)} /* ---------------- el logo de la cabecera ---------------- Si subiste el logo largo, se ve SIEMPRE, también en celular. No se corta ni se deforma: se hace más chico y ya. El cuadrado solo entra cuando no hay logo largo. */ .logo-img{display:block} .logo-ancho{height:34px;width:auto;max-width:min(46vw,280px);object-fit:contain;object-position:left center} .logo-cuadrado{width:32px;height:32px;object-fit:contain;border-radius:8px;flex:0 0 32px} @media(max-width:600px){ .logo-ancho{height:30px;max-width:min(44vw,220px)} } @media(max-width:380px){ .logo-ancho{height:26px;max-width:40vw} } /* ================= BLOG ================= Rejilla de tarjetas: imagen arriba, título y dos líneas de resumen. Todo respira: el blog es para LEER, no para llenar la pantalla. */ .blog-portada{margin:8px 0 26px} .blog-titulo{font-size:2.1rem;line-height:1.15;margin:0 0 8px} .blog-bajada{color:var(--tenue);font-size:1.05rem;margin:0;max-width:620px} @media(max-width:600px){ .blog-titulo{font-size:1.7rem} .blog-bajada{font-size:1rem} } .blog-rejilla{display:grid;gap:20px;grid-template-columns:1fr} @media(min-width:640px){ .blog-rejilla{grid-template-columns:1fr 1fr} } @media(min-width:900px){ .blog-rejilla{grid-template-columns:repeat(3,1fr)} } .blog-tarjeta{display:flex;flex-direction:column;background:#fff;border:1px solid var(--borde); border-radius:var(--radio);overflow:hidden;color:inherit;transition:.16s;height:100%} .blog-tarjeta:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(16,24,40,.08); border-color:#d6dce6} .blog-imagen{position:relative;aspect-ratio:16/9;overflow:hidden;display:flex; align-items:center;justify-content:center} .blog-imagen img{width:100%;height:100%;object-fit:cover;display:block} .blog-adorno{display:none;position:relative;color:rgba(255,255,255,.55)} .blog-imagen.sin-imagen > .blog-adorno{display:block} .blog-texto{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1} .blog-tarjeta-titulo{font-size:1.05rem;line-height:1.35;margin:0;color:var(--texto)} .blog-tarjeta:hover .blog-tarjeta-titulo{color:var(--azul)} /* Dos líneas y punto: si una tarjeta tiene un resumen larguísimo, no puede quedar el doble de alta que las de al lado. */ .blog-resumen{margin:0;color:var(--tenue);font-size:.92rem; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .blog-fecha{margin-top:auto;font-size:.78rem;color:var(--tenue)} /* ---------------- "Sigue leyendo" (final del artículo) ---------------- Casi no hay nada aquí y es a propósito: las tarjetas son las mismas de /blog y ya tienen su estilo arriba. Lo único propio es separar el bloque de la invitación a matricularse —si van pegados parecen la misma cosa— y una raya fina que diga "el artículo terminó, esto es otra cosa". */ .relacionados{margin:44px 0 8px;padding-top:28px;border-top:1px solid var(--borde)} .relacionados-titulo{font-size:1.3rem;margin:0 0 18px} @media(max-width:600px){ .relacionados{margin-top:32px} .relacionados-titulo{font-size:1.15rem} } /* ---------------- respuesta que no se pudo guardar ---------------- En el examen, una respuesta que no llega al servidor tiene que VERSE. Antes se marcaba como contestada igual y el alumno entregaba sin enterarse; ver la nota en public/js/sesion.js. */ .pregunta.sin-guardar{border-color:var(--rojo);box-shadow:0 0 0 2px var(--rojo-suave)} .aviso-sin-guardar{margin-top:10px;padding:8px 12px;border-radius:8px; background:var(--rojo-suave);color:var(--rojo);font-size:.85rem;font-weight:600} /* La barra de abajo. Va fija porque el alumno puede estar mirando la pregunta 40 cuando falló la 7, y tiene que enterarse igual. El z-index es 55 y no 80 por una razón que cazó la propia auditoría (logos-y-menu · M16): la barra de arriba y su menú desplegable viven en 60. Con 80, esta barra se pondría por delante del menú abierto y taparía la última opción. Con 55 se ve siempre menos cuando el menú está abierto, que es justo el momento en que el alumno no está respondiendo. */ .aviso-conexion{position:fixed;left:0;right:0;bottom:0;z-index:55; background:var(--rojo);color:#fff;text-align:center;padding:11px 16px; font-size:.9rem;font-weight:600} /* ---------------- entrar con Google ---------------- El botón va en blanco con borde, que es lo que pide Google en sus normas de marca: su logo a color, sobre fondo claro, y el texto "Continuar con Google" sin adornos. */ .btn-google{gap:10px;font-weight:600;color:#3c4043;border-color:#dadce0} .btn-google:hover{background:#f8f9fa;border-color:#d2d5d9} .btn-google svg{flex:0 0 18px} /* La rayita con el "o con tu correo" en medio. Los dos trazos se estiran solos para llenar lo que sobre a cada lado, sin importar lo largo que sea el texto. */ .separador-o{display:flex;align-items:center;gap:12px;margin:18px 0; color:var(--tenue);font-size:.85rem} .separador-o::before,.separador-o::after{content:"";flex:1;height:1px;background:var(--borde)} /* ---------------- el artículo ---------------- EL ANCHO LO MANDA LA TARJETA, NO EL TEXTO. Antes la tarjeta se estiraba hasta los 1000 px del contenedor y era el cuerpo el que se frenaba, a 68 caracteres. Resultado: el título ocupaba todo el ancho, el texto solo dos tercios, y quedaba un hueco grande a la derecha. Parecía que el texto estaba corrido a la izquierda, aunque estuviera justificado. Ahora el tope está aquí, en un solo sitio: 760 px de tarjeta menos sus márgenes internos dan unos 70 caracteres por línea, que es el ancho de lectura cómodo. Título y cuerpo empiezan y terminan en la misma vertical, y el blanco queda igual a los dos lados. */ .articulo{background:#fff;border:1px solid var(--borde);border-radius:var(--radio); padding:26px 22px 30px;margin-top:6px} @media(min-width:760px){ .articulo{padding:38px 46px 44px;max-width:760px;margin-left:auto;margin-right:auto} } .articulo-cabecera{margin-bottom:18px} .articulo-titulo{font-size:2rem;line-height:1.2;margin:0 0 10px} @media(max-width:600px){ .articulo-titulo{font-size:1.55rem} } .articulo-datos{margin:0;color:var(--tenue);font-size:.85rem} .articulo-portada{margin:0 0 22px} .articulo-portada img{width:100%;border-radius:10px;display:block} /* El cuerpo ya no lleva tope propio: el ancho lo pone la tarjeta (ver arriba). Con dos topes distintos, uno de los dos siempre sobra y es el que deja el hueco. El `hyphens:auto` es lo que hace que el texto justificado no quede feo. Justificar estira los espacios hasta que la línea llegue al borde; en español, con palabras largas como "correspondiente", eso abre huecos enormes entre palabras. Partiendo con guion, el navegador tiene por dónde ceder y los espacios quedan parejos. Funciona porque la página declara lang="es" en el . */ .articulo-cuerpo{font-size:1.05rem;line-height:1.75;color:#374151;text-align:justify; hyphens:auto;-webkit-hyphens:auto} /* En celular NO se justifica. La columna es tan estrecha que caben cinco o seis palabras por línea, y estirarlas deja ríos de blanco en medio del párrafo. Alineado a la izquierda se lee mucho mejor. */ @media(max-width:600px){ .articulo-cuerpo{text-align:left;hyphens:none} } .articulo-cuerpo p{margin:0 0 1.1em} .articulo-cuerpo h2{font-size:1.35rem;margin:1.6em 0 .5em;line-height:1.3;color:var(--texto);text-align:left} .articulo-cuerpo h3{font-size:1.12rem;margin:1.4em 0 .4em;color:var(--texto);text-align:left} .articulo-cuerpo ul,.articulo-cuerpo ol{margin:0 0 1.1em;padding-left:1.3em} .articulo-cuerpo li{margin-bottom:.4em} .articulo-cuerpo img{border-radius:10px;margin:1em 0} .articulo-cuerpo blockquote{margin:1.2em 0;padding:2px 0 2px 16px;border-left:3px solid var(--azul-suave); color:var(--tenue);font-style:italic} .articulo-cuerpo a{text-decoration:underline} /* ---------------- tablas dentro del artículo ---------------- Quill las escribe peladas:
, sin clases y sin . Por eso la primera fila se marca como encabezado desde aquí, con :first-child, y no con una etiqueta distinta. El max-width:68ch del cuerpo lo tiene que romper la tabla: una tabla de resultados con cinco columnas no cabe en el ancho cómodo de lectura, y si la apretamos ahí sale ilegible. */ .articulo-cuerpo table{border-collapse:collapse;width:100%;max-width:none; margin:1.4em 0;font-size:.95rem;text-align:left} .articulo-cuerpo td{border:1px solid var(--borde);padding:8px 12px;vertical-align:top} .articulo-cuerpo tr:first-child td{background:var(--azul-suave);color:var(--azul-texto); font-weight:600;white-space:nowrap} .articulo-cuerpo tr:nth-child(even):not(:first-child) td{background:#fbfcfe} /* En celular la tabla se desplaza de lado en vez de estrujar el diseño. display:block la convierte en su propia caja con desplazamiento; las filas y casillas siguen ordenándose como tabla dentro. */ @media(max-width:700px){ .articulo-cuerpo table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch; white-space:nowrap;font-size:.9rem} .articulo-cuerpo td{padding:7px 10px} } /* ---------------- el botón de descarga ---------------- Va después del texto, fuera del contenido del editor. Grande y con el peso a la vista: quien lo abre con datos móviles agradece saber cuánto le va a costar antes de tocarlo. */ .boton-descarga{display:flex;align-items:center;gap:12px;margin:30px 0 0; padding:16px 20px;border:1px solid var(--borde);border-radius:var(--radio); background:var(--verde-suave);border-color:#bbf0cf;color:var(--verde-oscuro); font-weight:600;text-decoration:none;transition:.15s} .boton-descarga:hover{background:#e4f9ec;border-color:#8fe3b0} .boton-descarga svg{flex:0 0 auto} .boton-descarga span{flex:1 1 auto} .boton-descarga small{flex:0 0 auto;font-weight:500;font-size:.8rem;opacity:.75; white-space:nowrap} @media(max-width:480px){ .boton-descarga{padding:14px 16px;gap:10px} .boton-descarga span{font-size:.95rem} } /* ---------------- la invitación del final ---------------- Caja aparte, después del texto. No interrumpe la lectura. */ /* ---------------- la comunidad ---------------- Verde y no azul a propósito: el azul es el color de comprar en todo el sitio (los botones de matrícula, las cajas del blog). Si la comunidad fuera azul, competiría con la matrícula por la misma mirada. En verde se lee como otra cosa —WhatsApp, gratis, sin compromiso— y las dos cajas pueden convivir una encima de otra sin pelearse. */ .cta-comunidad{margin-top:34px;background:var(--wa-suave);border:1px solid #cfead9; border-radius:16px;padding:26px 24px;display:flex;gap:24px;align-items:center; justify-content:space-between;flex-wrap:wrap} .cta-comunidad-texto{flex:1 1 320px} .cta-comunidad-etiqueta{display:inline-block;font-size:.72rem;font-weight:700; letter-spacing:.08em;color:var(--verde-oscuro);background:#fff; border:1px solid #cfead9;border-radius:999px;padding:4px 10px;margin-bottom:10px} .cta-comunidad-titulo{font-size:1.3rem;margin:0 0 12px;color:#14532d} .cta-comunidad-lista{margin:0;padding:0;list-style:none;display:grid;gap:7px} /* El palomeo va con ::before y no como carácter dentro del
  • : así el texto que se copia o que lee un lector de pantalla sale limpio, sin un signo suelto delante de cada línea. */ .cta-comunidad-lista li{position:relative;padding-left:26px;color:#31543f;font-size:.96rem} .cta-comunidad-lista li::before{content:"";position:absolute;left:4px;top:.42em; width:9px;height:5px;border-left:2px solid var(--verde);border-bottom:2px solid var(--verde); transform:rotate(-45deg)} .cta-comunidad-accion{display:grid;gap:8px;justify-items:center;flex:0 0 auto} .cta-comunidad-accion .btn{display:inline-flex;align-items:center;gap:9px} .cta-comunidad-nota{font-size:.8rem;color:#5b7a67;text-align:center;max-width:220px} @media(max-width:640px){ .cta-comunidad{padding:22px 18px} .cta-comunidad-accion{width:100%} .cta-comunidad-accion .btn{width:100%;justify-content:center} .cta-comunidad-nota{max-width:none} } /* La comunidad en la barra de arriba. Es un enlace más, con el mismo peso que Inicio o Blog, y va justo antes de "Comprar": primero lo gratis, después lo que se paga. Lo único que lo distingue es el icono verde. Un botón de color aquí le quitaría fuerza a "Crear cuenta", que es el que convierte, y la barra ya va llena. ANTES ERA UN BOTÓN VERDE EN EL MENÚ DEL CELULAR, Y SE QUITÓ. Aquello tenía sentido cuando la comunidad iba al final de la lista, pegada a "Crear cuenta": ahí abajo los dos botones se leían como las dos cosas que puedes hacer. Ahora va en medio de los enlaces, y un botón verde a ancho completo entre "Blog" y "Comprar" parte la lista en dos y deja "Comprar" colgando debajo, como si fuera de otro grupo. Perder ese botón no deja al celular sin invitación a la comunidad: el botón flotante verde ya dice "Comunidad" a quien no ha iniciado sesión, está siempre a la vista y cae donde llega el pulgar, que es mejor sitio que dentro de un menú que hay que abrir. */ .nav-comunidad svg{color:var(--wa) !important} .cta-blog{margin-top:34px;background:var(--azul-suave);border:1px solid #dbe6ff; border-radius:var(--radio);padding:26px 22px;text-align:center} .cta-blog-titulo{font-size:1.25rem;margin:0 0 8px;color:var(--azul-texto)} .cta-blog-texto{margin:0 auto 18px;color:#3f4b63;max-width:520px} .cta-blog-botones{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} .cta-blog-botones .btn-ghost{background:#fff} @media(max-width:520px){ .cta-blog-botones{flex-direction:column} .cta-blog-botones .btn{width:100%} }