/* Deletrazo — el sitio. * * Todo el color, el espaciado y la tipografía salen de tokens.css, que es copia * del handoff. Si aquí aparece un hexadecimal suelto, es que alguien se lo * inventó y hay que llevarlo al sistema de diseño. * * **Solo modo oscuro, y es una decisión.** El sistema «Pulso» es dark-first: la * app, el panel y todas las pantallas del handoff son oscuras, así que el sitio * también lo es. Un docente que llega aquí y luego abre la app tiene que * reconocer el mismo producto. tokens.css trae los alias de tema claro, pero * aplicarlos requeriría una clase en el y este sitio no lleva JavaScript. */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font: var(--dz-tipo-cuerpo); background: var(--dz-fondo); color: var(--dz-texto); -webkit-font-smoothing: antialiased; } :focus-visible { outline: var(--dz-foco); outline-offset: 3px; } .saltar { position: absolute; left: -9999px; padding: var(--dz-esp-8) var(--dz-esp-16); background: var(--dz-primario); color: var(--dz-sobre-primario); border-radius: var(--dz-radio-md); } .saltar:focus { left: var(--dz-esp-16); top: var(--dz-esp-16); z-index: 10; } /* Para lectores de pantalla: el wordmark se parte en dos para poder colorear la «z», y eso lo deletrearía letra a letra. */ .oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ── Composición ─────────────────────────────────────────────────────────── */ :root { /* El armazón de la página. Estaba en 760, que es una buena medida de lectura y una mala medida de página: en un monitor ancho dejaba seiscientos píxeles muertos a cada lado y el sitio parecía una columna de periódico perdida en el centro. Ahora el armazón respira y **el texto conserva su medida**: los párrafos siguen topados en 62ch y la entradilla en 60ch, así que ninguna línea se alarga. Lo que aprovecha el ancho es lo que se reparte —las tarjetas de docentes, que ya eran `auto-fit`— y el titular, que es display y agradece el sitio. */ --dz-ancho: 1120px; } main > section { max-width: var(--dz-ancho); margin: 0 auto; padding: var(--dz-esp-64) var(--dz-esp-24); border-top: 1px solid var(--dz-borde); } main > section:first-child { border-top: none; } /* ── Cinta superior ──────────────────────────────────────────────────────── */ .cinta { display: flex; align-items: center; justify-content: space-between; gap: var(--dz-esp-16); flex-wrap: wrap; max-width: var(--dz-ancho); margin: 0 auto; padding: var(--dz-esp-16) var(--dz-esp-24); } .cinta nav { display: flex; gap: var(--dz-esp-16); flex-wrap: wrap; } .cinta a { font: var(--dz-tipo-detalle); color: var(--dz-texto-suave); text-decoration: none; padding: var(--dz-esp-4) 0; } .cinta a:hover { color: var(--dz-texto); text-decoration: underline; text-underline-offset: 4px; } /* El enlace al panel se separa de los de sección: va al mismo sitio visual —la cinta— pero no es una sección de esta página. */ .cinta__panel { padding-left: var(--dz-esp-12); border-left: 1px solid var(--dz-borde); } .marca { margin: 0; font-family: var(--dz-fuente); font-weight: 900; font-style: italic; font-size: clamp(24px, 5vw, 30px); letter-spacing: -0.015em; line-height: 1; white-space: nowrap; } .marca__z { color: var(--dz-primario); } /* ── Portada ─────────────────────────────────────────────────────────────── */ .portada { padding-top: var(--dz-esp-48); } h1 { margin: 0; font-family: var(--dz-fuente); font-weight: 900; font-style: italic; /* Sin `text-wrap: balance`: el corte ya lo pone el
, y balance lo ignoraba y repartía la frase en cuatro líneas. Son dos frases, y la pausa entre ellas es la mitad de lo que dicen. */ font-size: clamp(32px, 5.4vw, 76px); line-height: 1.05; letter-spacing: -0.025em; } .portada__entrada { margin: var(--dz-esp-24) 0 0; max-width: 60ch; font: var(--dz-tipo-cuerpo-lg); color: var(--dz-texto-suave); } .portada__entrada b { color: var(--dz-texto); } /* En construcción y se dice, sin letra pequeña. Prometer una tienda que no existe se paga con el único docente que se moleste en comprobarlo. */ .portada__estado { display: inline-flex; align-items: center; gap: var(--dz-esp-8); margin: var(--dz-esp-32) 0 0; padding: var(--dz-esp-8) var(--dz-esp-16); border: 1px solid var(--dz-borde); border-radius: var(--dz-radio-pill); font: var(--dz-tipo-detalle); color: var(--dz-texto-suave); } .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--dz-aviso); flex: none; } /* ── Encabezados de sección ──────────────────────────────────────────────── */ .eyebrow { margin: 0 0 var(--dz-esp-8); font: var(--dz-tipo-micro); text-transform: uppercase; letter-spacing: 0.1em; color: var(--dz-primario); } h2 { margin: 0; font-family: var(--dz-fuente); font-weight: 900; font-style: italic; font-size: clamp(26px, 3.6vw, 36px); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; } h3 { margin: 0; font: var(--dz-tipo-subtitulo); } p { max-width: 62ch; } section > p { margin: var(--dz-esp-16) 0 0; } .apostilla { margin-top: var(--dz-esp-24); font: var(--dz-tipo-detalle); color: var(--dz-texto-suave); } /* ── La demostración ─────────────────────────────────────────────────────── */ .pizarra { margin-top: var(--dz-esp-32); padding: var(--dz-esp-32) var(--dz-esp-24); border: 1px solid var(--dz-borde); border-radius: var(--dz-radio-lg); background: var(--dz-fondo-hundido); text-align: center; } /* Nueve casillas de 30 px con 5 de hueco piden 310 px, y en un móvil de 390 no caben con el relleno normal: «vergüenza» se partía en dos filas y parecía un defecto. En la app partir está bien —hay palabras de 18 letras— pero aquí es la demostración, y tiene que verse entera. */ @media (max-width: 460px) { .pizarra { padding-left: var(--dz-esp-8); padding-right: var(--dz-esp-8); } } .pizarra__dictado { margin: 0 auto; font: var(--dz-tipo-detalle); color: var(--dz-texto-suave); } .pizarra__dictado b { color: var(--dz-texto); } /* Las mismas medidas que CasillasPalabra.vue en la app: 30×46, hueco de 5. */ .casillas { list-style: none; margin: var(--dz-esp-24) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; } .celda { position: relative; width: 30px; height: 46px; display: flex; align-items: center; justify-content: center; background: var(--dz-superficie); border: 1px solid var(--dz-noche-300); border-radius: var(--dz-radio-sm); font-weight: 700; font-size: 20px; line-height: 1; } .celda--ok { background: #1b2e33; /* contenedor de acierto del handoff */ border-bottom: 3px solid var(--dz-acierto-brillante); } /* El fallo lleva subrayado DISCONTINUO además del icono. Nunca solo color: es la regla no negociable de accesibilidad del handoff. */ .celda--marca { border-bottom: 3px dashed var(--dz-error-brillante); } .badge { position: absolute; top: -8px; right: -6px; min-width: 18px; height: 18px; padding: 0 3px; border-radius: var(--dz-radio-pill); background: var(--dz-error-brillante); color: var(--dz-noche-900); font-size: 12px; font-weight: 700; line-height: 18px; } .pizarra__juicio { margin: var(--dz-esp-24) auto 0; font: var(--dz-tipo-titulo); } .pizarra__regla { margin: var(--dz-esp-12) auto 0; max-width: 52ch; font: var(--dz-tipo-detalle); color: var(--dz-texto-suave); } /* ── Cifras ──────────────────────────────────────────────────────────────── */ .cifras { list-style: none; margin: var(--dz-esp-32) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--dz-esp-16); } .cifras li { padding: var(--dz-esp-16); border: 1px solid var(--dz-borde); border-radius: var(--dz-radio-lg); background: var(--dz-superficie); } .cifra { display: block; font-family: var(--dz-fuente); font-weight: 900; font-style: italic; font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--dz-primario); } .pie { display: block; margin-top: var(--dz-esp-8); font: var(--dz-tipo-detalle); color: var(--dz-texto-suave); } /* ── Docentes ────────────────────────────────────────────────────────────── */ .tarjetas { margin-top: var(--dz-esp-32); display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--dz-esp-16); } .tarjetas article { padding: var(--dz-esp-24); border: 1px solid var(--dz-borde); border-radius: var(--dz-radio-lg); background: var(--dz-superficie); } .tarjetas p { margin: var(--dz-esp-8) 0 0; font: var(--dz-tipo-detalle); color: var(--dz-texto-suave); } .tarjetas b { color: var(--dz-texto); } .codigo { font-weight: 900; letter-spacing: 0.06em; color: var(--dz-primario) !important; white-space: nowrap; } /* ── Listas ──────────────────────────────────────────────────────────────── */ .lista { margin: var(--dz-esp-16) 0 0; padding: 0; list-style: none; display: grid; gap: var(--dz-esp-8); max-width: 62ch; } .lista li { padding-left: var(--dz-esp-16); border-left: 3px solid var(--dz-primario); font: var(--dz-tipo-detalle); color: var(--dz-texto-suave); } /* ── Cierre ──────────────────────────────────────────────────────────────── */ .cierre { text-align: center; } .cierre p { margin-left: auto; margin-right: auto; } .acciones { margin-top: var(--dz-esp-32) !important; } .boton { display: inline-block; min-height: var(--dz-tactil-min); padding: var(--dz-esp-12) var(--dz-esp-24); border-radius: var(--dz-radio-md); background: var(--dz-primario); color: var(--dz-sobre-primario); font-weight: 700; text-decoration: none; } .boton:hover { background: var(--dz-lima-200); } /* ── Pie ─────────────────────────────────────────────────────────────────── */ footer { max-width: var(--dz-ancho); margin: 0 auto; padding: var(--dz-esp-48) var(--dz-esp-24) var(--dz-esp-64); border-top: 1px solid var(--dz-borde); } footer p { margin: var(--dz-esp-8) 0 0; font: var(--dz-tipo-detalle); color: var(--dz-texto-suave); } .marca--pie { font-size: 22px; } .tenue { margin-top: var(--dz-esp-16) !important; font: var(--dz-tipo-micro) !important; color: var(--dz-texto-suave); } /* ── Páginas legales ────────────────────────────────────────────────────── Privacidad, términos y soporte. Son documentos para leer, no para vender, así que van a una sola columna con la medida de lectura del cuerpo y sin ninguna de las florituras de la portada. */ .legal { max-width: 72ch; margin: 0 auto; padding: var(--dz-esp-48) var(--dz-esp-24) var(--dz-esp-64); } .legal h1 { font-size: clamp(30px, 4vw, 46px); } .legal__fecha { margin: var(--dz-esp-16) 0 0; font: var(--dz-tipo-detalle); color: var(--dz-texto-suave); } .legal h2 { margin: var(--dz-esp-48) 0 var(--dz-esp-8); font: var(--dz-tipo-titulo); } .legal h3 { margin: var(--dz-esp-24) 0 var(--dz-esp-4); font: var(--dz-tipo-subtitulo); } .legal p, .legal li { max-width: none; } .legal p { margin: var(--dz-esp-12) 0 0; } .legal ul { margin: var(--dz-esp-12) 0 0; padding-left: var(--dz-esp-24); display: grid; gap: var(--dz-esp-8); } .legal strong { color: var(--dz-texto); } /* Lo que se promete y no se cumple es peor que no prometerlo: las promesas fuertes van marcadas para que se lean, y para que se revisen si cambian. */ .legal__clave { margin: var(--dz-esp-24) 0 0; padding: var(--dz-esp-16); border-left: 3px solid var(--dz-primario); border-radius: 0 var(--dz-radio-md) var(--dz-radio-md) 0; background: var(--dz-fondo-hundido); } .legal__clave p:first-child { margin-top: 0; } .legal__volver { display: inline-block; margin-bottom: var(--dz-esp-24); font: var(--dz-tipo-detalle); color: var(--dz-texto-suave); } .legal dl { margin: var(--dz-esp-16) 0 0; display: grid; gap: var(--dz-esp-12); } .legal dt { font-weight: 700; } .legal dd { margin: var(--dz-esp-4) 0 0; color: var(--dz-texto-suave); } /* Enlaces del pie a las páginas legales. */ .pie-legal { display: flex; flex-wrap: wrap; gap: var(--dz-esp-8) var(--dz-esp-16); margin: var(--dz-esp-16) 0 0; font: var(--dz-tipo-detalle); }