Plantilla web de reformas en HTML y CSS para captar consultas

Plantilla web de reformas en HTML y CSS: servicios, proceso, proyectos y consultas con información clara y sin formularios ficticios.

Una web que reduce dudas antes de una visita

Esta plantilla web reformas HTML está pensada para explicar servicios y preparar consultas útiles. En una reforma, el visitante necesita saber qué hace la empresa, dónde trabaja y cómo se define el presupuesto. El diseño organiza esa información en servicios, proceso, proyectos y contacto. No utiliza cifras de experiencia, garantías ni opiniones inventadas. Puedes adaptar la base a un profesional independiente o a un equipo, siempre que los textos describan su operativa real.

Definir servicios con límites comprensibles

Cocinas o Reforma integral son títulos que necesitan una explicación. Indica qué trabajos coordinas, qué partidas incluyes y qué situaciones requieren una valoración adicional. No prometas resolver cualquier instalación si depende de otros profesionales. Puedes añadir una lista de exclusiones habituales cuando ayude a evitar malentendidos. El objetivo no es redactar un contrato dentro de cada tarjeta, sino permitir que una persona identifique si su necesidad encaja antes de solicitar una visita.

Código completo para probar en tu navegador

Copia este documento en un archivo index.html, guarda los cambios y ábrelo en el navegador. Los nombres y datos de demostración se deben sustituir antes de publicarlo.

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Habita — Espacios para vivir mejor</title>
<style>

*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;line-height:1.65}button,input,select,textarea{font:inherit}button,a,input{touch-action:manipulation}a{color:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid currentColor;outline-offset:5px}img,svg{max-width:100%}button{color:inherit}.wrap{width:min(1180px,calc(100% - 48px));margin:auto}.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0}.links{display:flex;gap:24px;flex-wrap:wrap}.links a{text-decoration:none;font-size:.88rem}.brand{font-weight:900;letter-spacing:-.06em;font-size:1.65rem;text-decoration:none}.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase}.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:14px 23px;border:1px solid currentColor;text-decoration:none;font-weight:700;border-radius:999px;transition:transform .2s,background .2s}.button:hover{transform:translateY(-3px)}h1,h2,h3,p{margin-top:0}h1,h2{line-height:1.04;letter-spacing:-.055em}h1{font-size:clamp(3rem,7.5vw,6.5rem)}h2{font-size:clamp(2rem,4vw,3.7rem)}h3{line-height:1.2}p{max-width:64ch}.section{padding:88px 0}footer{padding:32px 0;font-size:.8rem}.demo{font-size:.72rem;opacity:.75}details{border-top:1px solid #8885;padding:18px 0}summary{cursor:pointer;font-weight:700}summary+p{margin:16px 0 0}dialog{border:0;border-radius:20px;width:min(760px,calc(100% - 32px));padding:24px}dialog::backdrop{background:#000b}.close{float:right;border:1px solid #8885;border-radius:50%;background:transparent;width:40px;height:40px}section[id]{scroll-margin-top:24px}[hidden]{display:none!important}.reveal{animation:arrive .6s both}@keyframes arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media(max-width:700px){.wrap{width:calc(100% - 32px)}.nav{align-items:flex-start}.links{gap:14px}.section{padding:56px 0}h1{font-size:clamp(2.6rem,13vw,4.5rem)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

body{background:#f2f0e9;color:#28332d}.brand{font-size:2rem}.brand span{font-size:.65rem;vertical-align:top;margin-left:3px}.hero{padding:55px 0}.hero h1{font:clamp(3.7rem,7.5vw,6.7rem)/1 Georgia;margin:30px 0}.hero em{color:#b45834;font-weight:400}.hero-bottom{display:flex;justify-content:space-between;align-items:center;gap:40px;margin-bottom:45px}.hero-bottom p{max-width:550px;color:#6b7167}.button{background:#b45834;border-color:#b45834;color:#fff;border-radius:6px;flex-shrink:0}.compare{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:#ded7c9}.room-after,.room-before{position:absolute;inset:0}.compare svg{width:100%;height:100%;object-fit:cover}.room-before{clip-path:inset(0 calc(100% - var(--split)) 0 0);filter:grayscale(1) brightness(.65)}.divider{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:white}.divider span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:white;color:#28332d;display:grid;place-items:center;font-size:1.5rem;box-shadow:0 5px 25px #0003}.before-label,.after-label{position:absolute;bottom:20px;font-size:.58rem;letter-spacing:.12em;padding:8px 12px;background:#f2f0e9}.before-label{left:20px}.after-label{right:20px}.range-label{display:block;font-size:.7rem;color:#6b7167;margin-top:15px}#comparison{display:block;width:100%;accent-color:#b45834;margin-top:12px}.heading-row{display:grid;grid-template-columns:1fr 2fr;gap:40px}.heading-row h2{font-family:Georgia;font-weight:400}.services{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin-top:40px}.services article{border-top:1px solid #28332d50;padding-top:24px}.services span{font-size:.75rem;color:#b45834}.services h3{font:2rem/1.1 Georgia;margin:25px 0}.services p{font-size:.9rem;color:#6b7167}.process{background:#28332d;color:#f2f0e9;padding:80px 0}.process-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}.process h2{font:clamp(2.5rem,4.5vw,4rem)/1.08 Georgia;margin:30px 0}.process em{font-weight:400;color:#d8b48a}.process ol{counter-reset:step;list-style:none;padding:0;margin:0}.process li{counter-increment:step;padding:22px 0 22px 45px;border-bottom:1px solid #ffffff30;position:relative}.process li:before{content:'0' counter(step);position:absolute;left:0;color:#d8b48a;font-size:.7rem}.process b{font-size:1.15rem}.process li p{color:#c6cfc4;font-size:.85rem;margin:10px 0 0}.consultation{padding:100px 0}.consultation h2{font-family:Georgia;font-weight:400}.consultation>div{display:flex;justify-content:space-between;gap:40px}.consultation p{max-width:530px;color:#6b7167}.consult-note{border-left:2px solid #b45834;padding-left:20px;font-size:.8rem;align-self:start}footer{border-top:1px solid #28332d30;color:#6b7167}@media(max-width:700px){.hero-bottom,.consultation>div{display:block}.hero-bottom .button{margin-top:10px}.heading-row,.services,.process-grid{grid-template-columns:1fr;gap:25px}.compare{aspect-ratio:4/3}.before-label,.after-label{font-size:.45rem;bottom:12px;padding:5px}.before-label{left:10px}.after-label{right:10px}.consult-note{display:block;margin-top:25px}}

</style>
</head>
<body>

<header class="wrap nav"><a class="brand" href="#">habita<span>®</span></a><nav class="links" aria-label="Principal"><a href="#servicios">Qué hacemos</a><a href="#proceso">Cómo trabajamos</a><a href="#consulta">Tu proyecto ↗</a></nav></header>
<main><section class="wrap hero reveal"><div><p class="eyebrow">Reformas con una idea clara</p><h1>Hay otra forma<br>de <em>habitar.</em></h1></div><div class="hero-bottom"><p>Transformamos espacios pensando en las personas que los viven. Una base visual para presentar tu empresa y su manera real de trabajar.</p><a class="button" href="#consulta">Cuéntanos tu idea ↗</a></div><div class="compare" style="--split:50%"><div class="room-after"><svg viewBox="0 0 760 560" aria-hidden="true"><rect width="760" height="560" fill="#ded7c9"/><path d="M0 0 180 130H600L760 0" fill="#faf7ef"/><path d="M0 560 180 390H600L760 560" fill="#c4b495"/><rect x="180" y="130" width="420" height="260" fill="#f6f0e2"/><rect x="218" y="155" width="125" height="140" fill="#a1b5b2"/><path d="M280 155V295M218 225H343" stroke="#f6f0e2" stroke-width="9"/><rect x="400" y="250" width="160" height="130" rx="5" fill="#a77854"/><rect x="390" y="238" width="180" height="20" rx="3" fill="#e2dac6"/><rect x="440" y="178" width="35" height="60" rx="15" fill="#788d71"/><path d="M458 187Q420 120 444 110Q475 147 458 187M458 187Q500 120 510 140Q500 173 458 187" fill="#477352"/><ellipse cx="325" cy="400" rx="100" ry="22" fill="#29332a18"/><path d="M280 353H365L350 450H290Z" fill="#e3c9a2"/><rect x="270" y="340" width="100" height="18" rx="8" fill="#36493e"/><path d="M285 342V285H355V342" fill="#36493e"/></svg></div><div class="room-before"><svg viewBox="0 0 760 560" aria-hidden="true"><rect width="760" height="560" fill="#ded7c9"/><path d="M0 0 180 130H600L760 0" fill="#faf7ef"/><path d="M0 560 180 390H600L760 560" fill="#c4b495"/><rect x="180" y="130" width="420" height="260" fill="#f6f0e2"/><rect x="218" y="155" width="125" height="140" fill="#a1b5b2"/><path d="M280 155V295M218 225H343" stroke="#f6f0e2" stroke-width="9"/><rect x="400" y="250" width="160" height="130" rx="5" fill="#a77854"/><rect x="390" y="238" width="180" height="20" rx="3" fill="#e2dac6"/><rect x="440" y="178" width="35" height="60" rx="15" fill="#788d71"/><path d="M458 187Q420 120 444 110Q475 147 458 187M458 187Q500 120 510 140Q500 173 458 187" fill="#477352"/><ellipse cx="325" cy="400" rx="100" ry="22" fill="#29332a18"/><path d="M280 353H365L350 450H290Z" fill="#e3c9a2"/><rect x="270" y="340" width="100" height="18" rx="8" fill="#36493e"/><path d="M285 342V285H355V342" fill="#36493e"/></svg></div><span class="before-label">ANTES / ILUSTRACIÓN</span><span class="after-label">DESPUÉS / ILUSTRACIÓN</span><div class="divider" aria-hidden="true"><span>↔</span></div></div><label class="range-label" for="comparison">Desliza para comparar las dos versiones de muestra</label><input id="comparison" type="range" min="0" max="100" value="50" aria-label="Comparar antes y después"></section>
<section id="servicios" class="wrap section"><div class="heading-row"><p class="eyebrow">Cada espacio, una oportunidad</p><h2>Lo que cambia tu casa.<br>Y tu día a día.</h2></div><div class="services"><article><span>01</span><h3>Cocinas<br>para compartir.</h3><p>Describe distribución, instalaciones y acabados que realmente ofreces.</p></article><article><span>02</span><h3>Baños<br>para desconectar.</h3><p>Explica el tipo de intervención y las condiciones de cada reforma.</p></article><article><span>03</span><h3>Espacios<br>que encajan.</h3><p>Delimita coordinación, alcance y trabajos excluidos de una reforma integral.</p></article></div></section>
<section id="proceso" class="process"><div class="wrap process-grid"><div><p class="eyebrow">Sin pasos a ciegas</p><h2>Todo empieza<br>con entender<br><em>lo que necesitas.</em></h2></div><ol><li><b>Escuchamos</b><p>Ubicación, necesidades y prioridades del proyecto.</p></li><li><b>Revisamos</b><p>Medidas y estado real antes de cerrar una propuesta.</p></li><li><b>Definimos</b><p>Alcance, materiales, plazos y condiciones.</p></li><li><b>Acompañamos</b><p>Decisiones y cambios documentados durante el proceso.</p></li></ol></div></section><section id="consulta" class="wrap consultation"><p class="eyebrow">Hablemos de ese espacio</p><h2>El siguiente cambio<br>puede empezar hoy.</h2><div><p>Prepara municipio, tipo de vivienda, prioridades y fecha aproximada. Configura aquí tu teléfono o correo profesional real.</p><span class="consult-note">Una consulta inicial<br>no es un presupuesto cerrado.</span></div></section></main><footer class="wrap">Habita · Empresa de muestra · Sustituye datos, cobertura y condiciones.</footer>

<script>

document.querySelector('#comparison').addEventListener('input',e=>document.querySelector('.compare').style.setProperty('--split',e.target.value+'%'));

</script>
</body>
</html>

Explicar el proceso sin asegurar fechas imposibles

La secuencia del ejemplo pasa por conversación, visita, propuesta y seguimiento. Cambia esos pasos según tu forma de trabajar. Los plazos deben apoyarse en el alcance y en la disponibilidad real, no en un eslogan fijo para cualquier vivienda. Si una obra necesita permisos o comprobaciones técnicas, explica cómo se valoran sin presentar una respuesta universal. Mostrar un proceso claro ayuda al cliente a entender por qué un precio cerrado no siempre puede darse a partir de una fotografía.

Casos reales y fotografías autorizadas

Un caso de proyecto debe contar qué problema existía, qué se hizo y qué decisiones fueron relevantes. Las fotografías de antes y después necesitan encuadres comparables para que la mejora se entienda. No uses imágenes ajenas como si fueran obras de la empresa. Evita publicar direcciones, planos o pertenencias del cliente sin autorización. Si todavía no tienes casos publicables, conserva una explicación del proceso y elimina el bloque de proyectos en lugar de inventar un historial.

Contacto que prepara una conversación

La lista final pide municipio, tipo de vivienda, espacio y prioridades. Esa información orienta la primera respuesta sin convertir el contacto en un interrogatorio. Añade un teléfono y un correo reales, con horarios o expectativas de respuesta que puedas cumplir. No pidas documentación completa antes de explicar para qué se necesita. Si incorporas un formulario, conéctalo a un servicio funcional y prueba la recepción. Una alerta de consulta enviada no demuestra que alguien vaya a recibir el mensaje.

Diferenciar orientación y presupuesto

La plantilla incluye un aviso sobre el alcance de la consulta inicial. Ajusta la redacción para que coincida con tus condiciones. Una estimación aproximada, una visita de valoración y un presupuesto aceptado son etapas distintas. Evita botones que prometan un precio definitivo cuando solamente abren un chat. Si publicas precios desde, especifica a qué trabajo corresponden y qué puede modificar el importe. La claridad comercial debe mantenerse también en móvil, donde no conviene relegar condiciones esenciales a un texto ilegible.

Diseño adaptable para información técnica

Las tarjetas pasan a una columna cuando el ancho disponible se reduce. Los párrafos no utilizan alturas fijas, así que puedes añadir detalles sin recortarlos. Si incorporas tablas de partidas, comprueba cómo se consultan desde un teléfono. Un plano o documento puede necesitar un enlace de descarga con un nombre claro. No conviertas todo el contenido en una imagen de folleto: el texto HTML facilita la lectura, la ampliación y el mantenimiento de servicios o zonas de cobertura.

Una revisión basada en consultas reales

Pide a alguien que identifique qué reformas realizas, dónde trabajas y qué debe enviar para empezar. Si faltan respuestas, corrige el contenido antes de añadir efectos. Después comprueba navegación, foco, contraste y enlaces de contacto. Revisa fotografías, datos de proyectos y cualquier afirmación comercial con la persona responsable. Publicar una web de reformas útil consiste en presentar información verificable y un siguiente paso claro, además de una composición visual ordenada.

Presentar la zona de servicio con precisión

Una lista de municipios debe corresponder al área que el negocio puede atender de verdad. Si los desplazamientos tienen condiciones distintas, explícalo antes de que la persona prepare una solicitud larga. Evita crear afirmaciones idénticas para decenas de localidades sin aportar información específica. En una web pequeña, una descripción clara de cobertura puede ser suficiente. También conviene indicar si se realizan visitas a viviendas ocupadas, locales o comunidades, siempre que esos servicios formen parte de la actividad y puedan prestarse con los recursos disponibles.

Presupuestos comparables y cambios documentados

La página puede explicar que una propuesta detalla partidas y condiciones, pero ese compromiso debe reflejarse después en el trabajo real. Si el cliente cambia materiales o alcance, establece cómo se revisa la propuesta. No presentes un botón de presupuesto como una calculadora exacta si todavía faltan medidas y comprobaciones. Puedes ofrecer orientación inicial dejando claro su carácter provisional. Una comunicación ordenada reduce la diferencia entre lo que se imaginó al visitar la web y lo que finalmente se puede contratar.

Distinguir prueba visual de prueba comercial

Un diseño cuidado no demuestra antigüedad, solvencia ni satisfacción de clientes. Si añades reseñas, utiliza testimonios auténticos con autorización y contexto suficiente. Si indicas pertenencia a una organización o una certificación, verifica que esté vigente y que la descripción sea exacta. No rellenes esos espacios con sellos decorativos que parecen oficiales. Puedes crear una página convincente mostrando proceso, servicios y casos documentados, sin recurrir a afirmaciones que el negocio no pueda sostener cuando una persona solicite más información.

Una llamada a consulta coherente en toda la web

Utiliza el mismo criterio para nombrar el primer contacto en encabezado, servicios y final de página. Si el botón dice Solicitar visita, el siguiente paso debe explicar cómo se acuerda esa visita. Si solamente abre un correo, puede ser más claro Iniciar consulta. No presentes una acción más avanzada de lo que realmente sucede. Comprueba el recorrido desde un teléfono y asegúrate de que el número o dirección se puede copiar. Una persona interesada no debería perder su consulta por un enlace mal configurado después de entender correctamente los servicios de la empresa.

Guías relacionadas para seguir practicando

Puedes ampliar esta práctica con Organizar el contenido semántico y Adaptar la página a móvil.