La
Casa

un estudio interactivo de Osvaldo Pineda

La arquitectura emocional de Luis Barragán, reconstruida con muros de CSS, luz que cambia con tu hora y cimientos de HTML semántico.

Esta página tiene hora. La luz y la sombra siguen tu reloj local, como el sol sobre un patio de Barragán. Muévela tú con la barra de abajo. De noche, la ventana ámbar se enciende.

Arquitectura emocional, también en el navegador

Luis Barragán (Guadalajara 1902, Premio Pritzker 1980) no decoraba. Componía emoción con tres materiales: el muro, el color y la luz. Sus muros no son fondo, son el evento. Y el sol, al moverse sobre ellos, cuenta una historia distinta a cada hora.

Esta página traduce ese oficio al navegador. Cada color viene de una obra real: el rosa de Gilardi y de San Cristóbal, el cobalto de la alberca, el ámbar del corredor, la cal de los muros encalados. No hay imágenes: todo lo que ves es CSS sobre HTML.

Una casa bien construida empieza por su estructura, y una buena casa la puede habitar cualquiera. En la web eso tiene nombre: HTML semántico y accesibilidad. Por eso este sitio expone sus etiquetas como un plano expone sus cotas, y su foco de teclado no se esconde: se celebra.

navega con Tab: el anillo de foco es cobalto de día y ámbar de noche

La columna que no sostiene nada

En Casa Gilardi (1976), la última casa que construyó Barragán, la alberca vive dentro de la casa. Y en medio del agua se planta una columna rosa que no carga ningún techo. Existe por placer, para que la luz tenga dónde caer.

La columna, esperando la luz.

La columna es un botón de verdad: llega con Tab, actívala con Enter o con Espacio. Y la luz es un estado, no una animación. Si tu sistema pide menos movimiento, la luz cae igual, solo que sin viaje.

La luz es el material más caro

En el corredor de Gilardi la luz entra por vidrios verticales y pinta franjas doradas sobre muros amarillos. No hay cuadros colgados. El sol es la obra, y cambia de sala según la hora.

Esta casa digital obedece la misma regla. Su luz sigue tu reloj local:

mañana
cal fría, sombra suave y larga
mediodía
la luz cae vertical y la sombra se afila
tarde
todo se dora y la sombra se acuesta
noche
los muros descansan y la ventana ámbar vela

Tres casas, tres reglas

Tres obras sostienen esta página. Cada una dejó una regla en el sitio que estás leyendo.

Casa Gilardi

Ciudad de México, 1976

La última casa. Un corredor de luz dorada desemboca en una alberca interior con un muro cobalto y, en el agua, la columna rosa. Barragán salió de su retiro a los 74 años para construirla, convencido por un árbol: la jacaranda del patio.

Regla que dejó aquí: el color no adorna, estructura la emoción.

Cuadra San Cristóbal

Los Clubes, Estado de México, 1968

Una cuadra para caballos en Los Clubes. Muros rosas enmarcan el agua de la fuente, y los caballos cruzan la escena como parte de la composición. El agua no es un adorno: es el espejo donde la arquitectura se mira.

Regla que dejó aquí: el muro es el evento, nunca el fondo.

Casa Luis Barragán

Tacubaya, Ciudad de México, 1948

Su propia casa y taller en Tacubaya, hoy Patrimonio Mundial de la UNESCO. Ventanas que miden la luz, una escalera de madera sin barandal, cuartos que se revelan de a poco, en secuencia, como esta página.

Regla que dejó aquí: la casa se recorre, no se ve de golpe.

La estructura es la tesis

Las etiquetas grises que ves en cada cuarto son las cotas de este plano: los elementos reales del documento. Para quien navega con un lector de pantalla no son decoración, son el edificio mismo: header, nav, main, section, footer.

  • El foco del teclado siempre es visible: cobalto de día, ámbar de noche.
  • El texto de cuerpo mantiene contraste AAA en las cuatro horas de luz.
  • Si tu sistema pide menos movimiento, la casa obedece: la luz cambia de golpe, sin transiciones.
  • Los cuartos son regiones de verdad: un lector de pantalla salta de uno a otro como quien cruza puertas.
  • El idioma del documento cambia con el interruptor ES EN, también para las voces sintéticas.

Glosario de la casa

zaguán
el paso techado entre la puerta de la calle y el patio; la casa recibe a media luz
cuarto
cada habitación; aquí, cada sección del documento
cota
la medida anotada en un plano; aquí, la etiqueta HTML expuesta
cal
la pintura mineral blanca de los muros mexicanos; aquí, el color del fondo
alberca
así llamamos en México a la piscina; la de Gilardi es interior y azul cobalto