Casa Sol y Luna
Una villa con piscina privada en Costa Calma, Fuerteventura, con 4,98★ y más de 80 reseñas en Airbnb — y ninguna presencia propia fuera de esa plataforma. Le construí una web que respira lo mismo que la casa: calma, sal y cero prisa. Esto no es una galería de pantallazos: es el porqué de cada decisión.
El encargo
Una casa que ya lo hacía todo bien — solo le faltaba un sitio propio donde demostrarlo.
Inma alquila su villa en primera línea de Costa Calma desde hace cuatro años. Tiene el estatus Superhost, un 4,98★ sobre más de 80 reseñas y una tasa de respuesta del 100% — pero todo eso vivía encerrado dentro de Airbnb, pagando comisión por cada reserva y sin ninguna identidad fuera de la plataforma. El reto no era "hacer una web bonita": era construir un destino propio que capturase la reputación ya ganada y la convirtiera en reservas directas, sin perder ni un gramo del nivel de detalle que se espera de una villa de este precio.
La identidad, leída a fondo
No hay marca previa que respetar aquí — hay una casa real que fotografiar con la verdad por delante. La paleta la construí a partir de la propia arquitectura: blanco de cal, agua turquesa y la piedra oscura del atardecer. Nada de azules de piscina genéricos ni naranjas de folleto turístico: los mismos tres colores que verías de pie en la terraza.
El detalle que no se ve a la primera: entre el crema y el pino hay tres tonos de piedra intermedios (#F4EFE6, #F3EDE2, #E9E2D6) que absorben la transición de sección en sección — cosidos con costuras de onda en SVG en vez de líneas rectas, para que la página entera se sienta tallada a mano, nunca troceada en bloques.
Dos familias tipográficas, un solo trabajo cada una. Cormorant Garamond en peso 300 — fina, editorial, casi susurrada — para todo lo que es sensación: titulares, citas de la anfitriona, los números romanos de la galería. Instrument Sans para todo lo que es información: navegación, precios, formularios. La primera vende la casa; la segunda gestiona la reserva. Ninguna hace el trabajo de la otra.
Y como la marca no venía cerrada de fábrica, la construí configurable: el color de acento es una sola variable con tres presets listos — turquesa, terracota, azul noche. Cambiar el ánimo entero de la web es una decisión, no un rediseño.
Por qué la web está ordenada así
Once tramos, una sola página, scroll vertical. Nadie decide alquilar una villa mirando un menú: decide dejándose llevar. El orden no es cronológico, es una escalera de deseo — cada bloque construye sobre el anterior hasta que reservar es la conclusión obvia, no una petición de fe.
-
01
Hero — "a hand-sculpted white house above a turquoise sea"Titular en máscara ascendente, imagen que hace zoom-out al cargar y una cinta de méritos en bucle (4,98★ · piscina todo el año · playa a 5 min) antes de que el visitante decida quedarse.
-
02
La Colección — seis salas numeradas en romanoLa galería se cuelga como un salón de museo, no como un carrusel de anuncio: cada foto tiene su propio marco y su propio peso visual.
-
03
About — la casa entera, casa por casaMarcos circulares deformados (radios asimétricos, nunca un círculo perfecto) y placas de cifras — casa completa, 3 huéspedes, 2 habitaciones, 2 baños — a modo de sello, no de tabla.
-
04
Amenities — 45 detalles, ninguno gritandoIconos de línea uniformes en una rejilla que se pliega sola en móvil, con un botón "ver todas" para no enterrar la piscina privada bajo el secador de pelo.
-
05
Sleeping — dos habitaciones, sin adornosJusto después de las comodidades, cuando la duda ya es "¿dónde duermo?" y no "¿esto es serio?".
-
06
Nearby — "days that plan themselves"El tramo más largo de la web (seis veces la altura de pantalla) y el único con scroll-hijack: aquí es donde el scroll deja de ser vertical y empieza a contar una historia.
-
07
Host — Inma, no "el anfitrión"Fondo verde pino, foto redonda con el sello Superhost cosido en la esquina. Cuatro años de experiencia contados en primera persona, a un minuto a pie de la villa.
-
08
Reviews — 4,98★ importadas, no inventadasDesglose por categoría (limpieza, precisión, ubicación...) y tres reseñas reales de Airbnb, cada una en su idioma original — la prueba social ya existía, aquí solo se le da un escaparate.
-
09
FAQ + Contacto — las siete preguntas que sí importanPiscina sin vallar, dónde aparcar, si aceptan perros — dichas con la misma franqueza que un anfitrión real, seguidas de un formulario directo para lo que no está cubierto.
-
10
Reserva — calendario de tres meses en vivoEl corazón funcional de la web: precios y disponibilidad reales día a día, con un total estimado antes de pedir un solo dato — sin pago, sin plataforma de por medio.
-
11
Cierre + Footer — la misma marea, otra vezLa foto de la playa vuelve para el CTA final con su propio parallax, y el pie deja el número de registro turístico de Canarias a la vista — nada que esconder.
Cuatro trucos de scroll, ninguno gratuito
Una web de villa vive o muere en cómo se siente al desplazarse por ella. Nada de esto es decoración: cada efecto está resolviendo un problema concreto de percepción o de rendimiento.
Detalle de fontanero: el requestAnimationFrame que mueve todo esto se pausa solo cuando el navegador oculta la pestaña — así que al volver, la web fuerza una resincronización inmediata de cabecera y parallax antes de dejar que el bucle normal retome. Sin ese parche, quien vuelve de cambiar de app se encontraría la cabecera congelada con el color de la sección equivocada.
El motor: nada de plantillas
Aquí no hay WordPress ni Webflow. La web corre sobre un motor de componentes propio — HTML declarativo con variables {{ así }}, condicionales y bucles, compilado a una app reactiva real — y un backend hecho a medida para el negocio concreto de Inma, no genérico.
El panel de Inma
Detrás de la web pública hay otra capa que casi nadie ve: un panel privado (en /admin, bloqueado a buscadores) donde Inma gestiona el negocio real — mensajes, reservas y precios — sin escribir una línea de código ni depender de mí para el día a día. Tres pestañas, cada una resolviendo un problema distinto de gestionar una villa a mano.
Antes de seguir: los nombres, emails, teléfonos y reservas de las capturas de abajo son completamente inventados — los generé solo para poder enseñar el panel funcionando con datos de ejemplo. No son huéspedes reales de Inma ni de nadie; es una simulación de cómo se ve el panel en uso normal, sin exponer la privacidad de ningún cliente.
Las tres pestañas comparten la misma cabecera de estado — ocupación de los próximos 30 días, próxima entrada y salida, y el hueco de noches libres entre una reserva y la siguiente — así que Inma nunca pierde el contexto general al saltar de una tarea a otra.
Cada consulta del formulario de contacto aterriza aquí, no en una bandeja de email donde se pierde entre spam. Tres estados — Nuevos, Leídos, Respondidos — con su contador en la propia pestaña, y las acciones cambian solas según el estado: "Marcar leído" desaparece en cuanto el mensaje ya está respondido. Nombre, email, teléfono y cuánto hace que llegó ("hace 3 h", "hace 2 días") están a la vista sin abrir nada.
Las solicitudes se agrupan en Pendientes, Aprobadas, Rechazadas y Canceladas. Ante una pendiente, Inma solo ve dos botones — Aprobar o Rechazar — y en el instante en que aprueba, esas noches se bloquean solas en el calendario público: no hay un segundo paso manual, no hay riesgo de overbooking por despiste. Noches, huéspedes y precio total ya vienen calculados en la fila.
Un precio por defecto que se aplica a cualquier noche sin tarifa especial, y siete meses editables por delante con una leyenda de color — normal, tarifa alta, en proceso, reservado, bloqueado. Cada casilla es clicable y edita ese día en concreto, así que una fecha de puente o de temporada alta sube de precio con un clic, sin tocar el resto del calendario. El botón "Añadir mes +" extiende la ventana de reservas hacia delante en cuanto hace falta.
Lo que Inma cambia aquí, el huésped lo ve al instante en casasolyluna.es — en tiempo real, sin recargar la página, sin publicar nada ni esperar un despliegue.
Reserva directa, sin fricción
El calendario no pide un dato hasta que el huésped ya sabe cuánto le va a costar.
El calendario de tres meses distingue de un vistazo noche estándar, fecha especial y noche ya reservada, y calcula un total estimado en cuanto se marcan las fechas — antes de pedir nombre, email o teléfono. Al enviar la solicitud no se cobra nada: Inma confirma por email con la política de cancelación exacta, igual que haría en persona. Es la misma lógica de "quita objeciones antes de que se formulen" que ya funcionaba en Airbnb, trasladada a un formulario que no le cuesta comisión a nadie.
Todo incluido. Sin letra pequeña.
Casa Sol y Luna recibió un sistema completo, no una landing page con una foto bonita.
- Diseño web inmersivo one-page
- Motor de plantillas propio
- Backend a medida en tiempo real
- Panel de administración a medida
- Calendario de precios en tiempo real
- Formulario de contacto y reserva
- Multi-idioma: ES · EN · DE · FR
- Prerenderizado SEO por idioma
- Cumplimiento legal (registro turístico)
- Hosting y despliegue continuo
¿Tu negocio también merece existir online de verdad?
Hablemos de tu proyecto