/* Portada y landing: las dos páginas de HTML plano.
Los colores, la tipografía y los chips salen de styles.css, que es donde viven
los tokens del sitio. Aquí solo está lo que estas páginas necesitan y el juego
no: desplazamiento, ancho de lectura y bloques de contenido. */
/* styles.css bloquea el desplazamiento y el táctil porque el juego es una
pantalla fija. Estas páginas se leen, así que se devuelven las dos cosas. La
clase va en y en para no depender de :has(). */
html.page,
body.page {
height: auto;
min-height: 100%;
/**
* `visible`, no `auto`. Con `overflow-y: auto` en pasaba algo tonto: el
* elemento raíz se convertía en su propio contenedor de desplazamiento, con el
* contenido cabiéndole justo, así que no tenía nada que desplazar; y como
* styles.css pone `overscroll-behavior: none` para que el juego no rebote, el
* gesto no pasaba de ahí a la ventana. Resultado: la página se movía con
* scrollTo() pero no con la rueda ni con el dedo. Con `visible` manda la
* ventana, que es lo normal en una página que se lee.
*/
overflow: visible;
overscroll-behavior: auto;
/* Se permite el arrastre vertical y el pellizco; el juego los bloquea, estas
páginas no. */
touch-action: pan-y pinch-zoom;
}
/* ------------------------------------------------------------- cursores */
/* Los mismos cursores en pixel art del juego: la flecha la pone styles.css en
html y body, y aquí se añade la mano en todo lo que se pueda pulsar. */
body.page a,
body.page button,
body.page label,
body.page summary {
cursor: var(--cursor-hand, pointer);
}
/* ---------------------------------------------------------------- marca */
/* Dos tonos como en el archivo original: el wordmark y el ".dev". En claro se
respetan los colores del asset; en oscuro no se verían, así que el nombre pasa
a tinta clara y el ".dev" al cian de la casa, que es como se ve el letrero
dentro del juego. */
:root {
--brand-ink: #e7ecf7;
--brand-dim: var(--cyan);
}
:root[data-theme="day"] {
--brand-ink: #37474f;
--brand-dim: #9e9e9e;
}
.brand.has-logo {
display: inline-flex;
align-items: center;
/* El texto de repuesto desaparece cuando entra el SVG. */
font-size: 0;
letter-spacing: 0;
text-indent: 0;
}
.brand svg {
display: block;
height: 1.5rem;
width: auto;
}
.brand svg path:first-of-type {
fill: var(--brand-ink);
}
.brand svg path:last-of-type {
fill: var(--brand-dim);
}
/* En la portada el logotipo es la presentación de la casa: va más grande. */
.start-top .brand svg {
height: 1.9rem;
}
/* La navegación de la landing se desplaza a lo ancho cuando no cabe, y para eso
necesita su propio permiso: los padres solo dejan pasar el eje vertical. */
.lp-nav {
touch-action: pan-x;
}
/* La trama de puntos va en y el body se queda transparente: styles.css le
pone al body un fondo sólido para el juego, que aquí taparía la trama. */
html.page {
background-color: var(--bg);
background-image:
radial-gradient(circle, var(--dot-strong) 1px, transparent 1px),
radial-gradient(circle, var(--dot) 1px, transparent 1px);
background-size:
48px 48px,
8px 8px;
background-position: center;
}
body.page {
background: transparent;
font-size: 16px;
line-height: 1.6;
}
/* -------------------------------------------------- interruptor de luz -- */
/* El mismo cacharro que hay en la pared del estudio, hecho con cajas de CSS: la
placa, la palanca (arriba de noche, abajo de día) y los dos tornillos. Nada de
imágenes: a este tamaño las cajas ya salen a canto de píxel. */
.switch {
position: relative;
width: 1.5rem;
height: 2.1rem;
padding: 0;
background: var(--chip-border);
border: 1px solid var(--dim);
cursor: var(--cursor-hand, pointer);
}
/* Tornillos. */
.switch::before {
content: "";
position: absolute;
left: 50%;
top: 2px;
width: 2px;
height: 2px;
transform: translateX(-50%);
background: var(--dim);
box-shadow: 0 calc(2.1rem - 8px) 0 var(--dim);
}
/* Palanca: sube cuando está de noche (la luz apagada) y baja de día. */
.switch::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 0.7rem;
height: 0.75rem;
background: var(--amber);
transition: top 0.12s steps(2);
top: calc(2.1rem - 0.75rem - 6px);
}
:root[data-theme="night"] .switch::after {
background: var(--dim);
top: 6px;
}
.switch:hover,
.switch:focus-visible {
border-color: var(--cyan);
}
/* Después del chispazo: tizne alrededor y la palanca muerta. */
.switch.fried {
border-color: #6b4a2f;
box-shadow:
-2px -2px 0 0 #241708,
3px 3px 0 0 #1b1208;
}
.switch.fried::after {
background: #3a2a18;
}
/* Aviso con la frase del apagón, debajo del interruptor. */
#fuse-msg {
position: fixed;
z-index: 60;
top: 3.6rem;
right: clamp(1rem, 4vw, 2rem);
max-width: min(20rem, calc(100% - 2rem));
margin: 0;
padding: 0.6rem 0.7rem 0.5rem;
font-size: 12px;
line-height: 1.45;
color: var(--ink);
background: var(--frame);
border: 1px solid var(--amber);
opacity: 0;
transform: translateY(-4px);
transition:
opacity 0.25s ease,
transform 0.25s ease;
pointer-events: none;
}
#fuse-msg.on {
opacity: 1;
transform: none;
}
/* ---------------------------------------------- apagón (easter egg) ----- */
#blowout {
position: fixed;
inset: 0;
z-index: 55;
pointer-events: none;
}
#blowout .veil {
position: absolute;
inset: 0;
background: #02030a;
opacity: 0;
animation: veil-in 4.2s steps(1, end) forwards;
}
/* El parpadeo del diferencial intentando volver: pasos, no degradado. */
@keyframes veil-in {
0% {
opacity: 0;
}
4% {
opacity: 0.9;
}
8% {
opacity: 0.55;
}
12% {
opacity: 0.92;
}
18% {
opacity: 0.6;
}
24% {
opacity: 0.94;
}
100% {
opacity: 0.94;
}
}
#blowout .flash {
position: absolute;
inset: 0;
background: #ffffff;
animation: flash-out 0.18s steps(2, end) forwards;
}
@keyframes flash-out {
from {
opacity: 0.85;
}
to {
opacity: 0;
}
}
#blowout.over {
opacity: 0;
transition: opacity 0.6s ease;
}
/* Chispas y humo, colgados de la posición del interruptor. */
#blowout .sparks {
position: absolute;
width: 0;
height: 0;
}
.spark,
.smoke {
position: absolute;
display: block;
}
.spark {
width: 3px;
height: 3px;
background: var(--amber);
animation: spark-out 0.6s steps(4, end) infinite;
}
.spark:nth-child(3n) {
background: #ffffff;
}
.spark:nth-child(3n + 1) {
background: #ffd479;
}
@keyframes spark-out {
from {
transform: rotate(var(--a)) translateX(2px);
opacity: 1;
}
to {
transform: rotate(var(--a)) translateX(var(--d));
opacity: 0;
}
}
.smoke {
width: 4px;
height: 4px;
background: #9aa6bd;
animation: smoke-up 1.4s steps(6, end) infinite;
}
@keyframes smoke-up {
from {
transform: translate(-2px, 0);
opacity: 0.45;
}
to {
transform: translate(-6px, -34px);
opacity: 0;
}
}
/* Con movimiento reducido el apagón sigue ocurriendo, pero sin fogonazo, sin
chispas y sin parpadeo: se va la luz y punto. */
#blowout.gentle .veil {
animation: veil-calm 4.2s ease forwards;
}
@keyframes veil-calm {
from {
opacity: 0;
}
to {
opacity: 0.94;
}
}
/* ---------------------------------------------------------------- portada */
#start {
min-height: 100dvh;
display: grid;
grid-template-rows: auto 1fr auto;
gap: 2rem;
padding: clamp(1rem, 4vw, 2rem);
max-width: 60rem;
margin: 0 auto;
}
.start-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.start-main {
align-self: center;
padding: 1rem 0 2rem;
}
.start-eyebrow {
margin: 0 0 0.9rem;
font-size: 11px;
letter-spacing: 0.24em;
color: var(--dim);
}
.start-title {
margin: 0;
font-size: clamp(28px, 7vw, 46px);
line-height: 1.15;
font-weight: 400;
}
.start-title em {
display: block;
font-style: normal;
color: var(--cyan);
}
.start-sub {
margin: 1.1rem 0 2.4rem;
max-width: 34rem;
font-size: clamp(15px, 3.6vw, 17px);
color: var(--dim);
}
/* Tres tarjetas: la principal ocupa la fila entera y las otras dos se reparten
la de abajo. En móvil van en columna, con la principal siempre primera. */
.cards {
display: grid;
gap: 0.9rem;
grid-template-columns: 1fr;
}
@media (min-width: 44rem) {
.cards {
grid-template-columns: 1fr 1fr;
}
.card.primary {
grid-column: 1 / -1;
}
}
.card {
display: grid;
gap: 0.55rem;
align-content: start;
padding: clamp(1rem, 3.5vw, 1.4rem);
background: var(--frame);
border: 1px solid var(--chip-border);
color: var(--ink);
text-decoration: none;
transition:
border-color 0.18s ease,
transform 0.18s ease,
background-color 0.18s ease;
}
.card:hover,
.card:focus-visible {
border-color: var(--cyan);
transform: translateY(-2px);
}
.card-kicker {
justify-self: start;
padding: 0.34rem 0.5rem 0.28rem;
font-size: 10px;
letter-spacing: 0.18em;
color: var(--bg);
background: var(--cyan);
}
.card-title {
font-size: clamp(16px, 4vw, 19px);
letter-spacing: 0.04em;
color: var(--ink);
}
.card-desc {
font-size: 14px;
color: var(--dim);
}
.card-go {
justify-self: start;
margin-top: 0.3rem;
font-size: 12px;
letter-spacing: 0.12em;
color: var(--cyan);
}
/* La principal es la que queremos que se pulse: más aire, borde cian, título más
grande y un latido lento que la señala sin dar saltos. */
.card.primary {
gap: 0.7rem;
padding: clamp(1.2rem, 4.5vw, 1.9rem);
border-color: var(--cyan);
box-shadow: 0 0 0 0 rgba(34, 201, 224, 0.45);
animation: card-pulse 3.2s ease-in-out infinite;
}
.card.primary .card-title {
font-size: clamp(20px, 5.4vw, 27px);
}
.card.primary .card-desc {
max-width: 40rem;
font-size: clamp(14px, 3.4vw, 15px);
color: var(--ink);
}
.card.primary .card-go {
padding: 0.5rem 0.8rem 0.42rem;
color: var(--bg);
background: var(--cyan);
font-size: 13px;
}
@keyframes card-pulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(34, 201, 224, 0);
}
50% {
box-shadow: 0 0 22px -6px rgba(34, 201, 224, 0.55);
}
}
/* Con reducción de movimiento, la tarjeta se queda quieta y marcada. */
@media (prefers-reduced-motion: reduce) {
.card.primary {
animation: none;
box-shadow: 0 0 18px -8px rgba(34, 201, 224, 0.5);
}
.card:hover,
.card:focus-visible {
transform: none;
}
}
/* El chip del idioma vive en el pie: se va al extremo y deja el contacto a la
izquierda. */
.start-foot #lang,
.lp-foot-actions {
margin-left: auto;
}
/* El pie de la landing es un bloque, no un flex, así que el chip se manda a la
derecha desde dentro. */
.lp-foot-actions {
display: flex;
justify-content: flex-end;
margin-top: 1.2rem;
}
.start-foot {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.6rem;
align-items: center;
font-size: 12px;
color: var(--dim);
border-top: 1px dotted var(--chip-border);
padding-top: 1rem;
}
/* ---------------------------------------------------------------- landing */
/* La landing es la versión "página web" del sitio, así que aquí la tipografía es
Geist normal y no la pixel. Se cambia en la raíz y en los sitios donde
styles.css la fija a mano (los chips y el bloque sin JS), porque el resto
hereda. Los tamaños y el interlineado ya venían pensados para leer. */
:root {
--sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
html.lp,
html.lp body,
html.lp .mini,
html.lp #static {
font-family: var(--sans);
}
/* Geist sí tiene pesos: los títulos dejan de ir todos en regular, que era una
limitación de la pixel (una sola variante). */
html.lp h1,
html.lp h2 {
font-weight: 600;
}
html.lp h3,
html.lp .lp-eyebrow,
html.lp .lp-rows dt,
html.lp .lp-nav a,
html.lp .mini {
font-weight: 500;
}
/* Sin la rejilla de píxeles, el espaciado de los rótulos puede ser algo más
cerrado y las etiquetas ganan al bajarles el tamaño un punto. */
html.lp .lp-eyebrow,
html.lp .lp-rows dt {
letter-spacing: 0.16em;
}
html.lp .lp-tags li {
font-size: 12px;
}
.lp-top {
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
gap: 1rem;
padding: 0.8rem clamp(1rem, 4vw, 2rem);
background: color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter: blur(6px);
border-bottom: 1px solid var(--chip-border);
}
.lp-nav {
display: flex;
gap: 1.1rem;
margin-right: auto;
font-size: 12px;
letter-spacing: 0.08em;
overflow-x: auto;
}
.lp-nav a {
color: var(--dim);
text-decoration: none;
white-space: nowrap;
}
.lp-nav a:hover {
color: var(--cyan);
}
.lp-top-actions {
display: flex;
gap: 0.4rem;
align-items: center;
}
/* El chip del HUD del juego, reutilizado aquí como enlace. */
.mini.cta,
a.mini {
display: inline-flex;
align-items: center;
text-decoration: none;
}
@media (max-width: 52rem) {
.lp-nav {
display: none;
}
.lp-top-actions {
margin-left: auto;
}
}
#lp {
max-width: 64rem;
margin: 0 auto;
padding: 0 clamp(1rem, 4vw, 2rem);
}
.lp-hero {
padding: clamp(3rem, 10vw, 6rem) 0 clamp(2rem, 6vw, 3.5rem);
border-bottom: 1px dotted var(--chip-border);
}
.lp-eyebrow {
margin: 0 0 0.9rem;
font-size: 11px;
letter-spacing: 0.24em;
color: var(--dim);
}
.lp-hero h1 {
margin: 0;
font-size: clamp(30px, 7.5vw, 52px);
line-height: 1.12;
font-weight: 400;
}
.lp-hero h1 em {
font-style: normal;
color: var(--cyan);
}
.lp-lead {
margin: 1.2rem 0 0;
max-width: 40rem;
font-size: clamp(15px, 3.6vw, 18px);
color: var(--dim);
}
.lp-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin: 2rem 0 0;
}
/* Nombre propio: styles.css ya tiene un .btn para los paneles del juego, con
flex:1 para repartir la fila, y aquí estiraba los enlaces del hero. */
.lp-btn {
padding: 0.8rem 1.1rem 0.7rem;
font-size: 13px;
letter-spacing: 0.08em;
color: var(--cyan);
background: var(--frame);
border: 1px solid var(--chip-border);
text-decoration: none;
}
.lp-btn:hover,
.lp-btn:focus-visible {
border-color: var(--cyan);
}
.lp-btn.primary {
color: var(--bg);
background: var(--cyan);
border-color: var(--cyan);
}
.lp-live {
margin: 1.2rem 0 0;
font-size: 12px;
color: var(--green);
}
.lp-live::before {
content: "● ";
}
.lp-section {
padding: clamp(2.5rem, 8vw, 4.5rem) 0;
border-bottom: 1px dotted var(--chip-border);
}
.lp-section h2 {
margin: 0 0 2rem;
font-size: clamp(20px, 5vw, 28px);
font-weight: 400;
}
.lp-grid {
display: grid;
gap: 0.9rem;
grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
.lp-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 58rem) {
.lp-grid.three {
grid-template-columns: repeat(3, 1fr);
}
}
.lp-card {
padding: clamp(1rem, 3vw, 1.4rem);
background: var(--frame);
border: 1px solid var(--chip-border);
}
.lp-card.flat {
background: transparent;
}
.lp-num {
margin: 0 0 0.6rem;
font-size: 11px;
letter-spacing: 0.2em;
color: var(--cyan);
}
.lp-card h3 {
margin: 0 0 0.6rem;
font-size: 16px;
font-weight: 400;
}
.lp-card p {
margin: 0 0 0.9rem;
font-size: 14px;
color: var(--dim);
}
.lp-tags {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin: 0;
padding: 0;
list-style: none;
}
.lp-tags li {
padding: 0.34rem 0.5rem 0.26rem;
font-size: 11px;
color: var(--dim);
border: 1px solid var(--chip-border);
}
.lp-steps {
display: grid;
gap: 0.9rem;
margin: 0;
padding: 0;
list-style: none;
counter-reset: paso;
}
@media (min-width: 52rem) {
.lp-steps {
grid-template-columns: repeat(3, 1fr);
}
}
.lp-steps li {
counter-increment: paso;
padding-top: 2.4rem;
border-top: 2px solid var(--cyan);
position: relative;
}
.lp-steps li::before {
content: counter(paso, decimal-leading-zero);
position: absolute;
top: 0.7rem;
left: 0;
font-size: 11px;
letter-spacing: 0.2em;
color: var(--cyan);
}
.lp-steps h3 {
margin: 0 0 0.5rem;
font-size: 16px;
font-weight: 400;
}
.lp-steps p {
margin: 0;
font-size: 14px;
color: var(--dim);
}
.lp-rows {
display: grid;
gap: 0;
margin: 2rem 0 0;
}
.lp-rows > div {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1rem;
padding: 0.8rem 0;
border-bottom: 1px dotted var(--chip-border);
}
.lp-rows dt {
min-width: 8rem;
font-size: 11px;
letter-spacing: 0.16em;
color: var(--dim);
padding-top: 0.15rem;
}
.lp-rows dd {
margin: 0;
font-size: 15px;
}
.lp-foot {
max-width: 64rem;
margin: 0 auto;
padding: clamp(2rem, 6vw, 3rem) clamp(1rem, 4vw, 2rem) 3rem;
font-size: 13px;
color: var(--dim);
}
.lp-foot-links {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 1rem 0 0;
font-size: 12px;
}