Webs que se sienten.
Procesos que se hacen solos.

<!-- altamar.example · portada -->
<header class="nav">
  <a class="logo">Altamar</a>
  <nav>Flota · Chárter · Contacto</nav>
</header>
<section class="hero">
  <img src="yate-42m.webp" alt="Yate al atardecer">
  <h1>ALTAMAR</h1>
  <p>Yates de autor</p>
  <a class="btn" href="/visita">Solicitar visita</a>
</section>
<style>
.hero{height:100svh;display:grid;place-items:end center}
h1{font-weight:200;letter-spacing:.28em}
.btn{border:1px solid #fff;border-radius:99px}
</style>

<!-- villanorte.example · ficha -->
<main class="ficha">
  <img src="villa-ladera.webp" alt="Fachada y piscina">
  <h1>Vivir con luz.</h1>
  <ul class="chips">
    <li>4 hab.</li><li>380 m²</li><li>Piscina</li>
  </ul>
  <a class="btn" href="/visita">Agendar visita</a>
</main>
<script>
calendario.abrir({ duracion: 30 })
</script>
<style>
h1{font-size:clamp(3rem,8vw,7rem)}
.btn{background:#2a56c8;color:#fff}
</style>

<!-- roble.example -->
<div class="split">
  <aside>
    <small>Interiorismo</small>
    <h1>Espacios que se habitan.</h1>
    <a href="/proyectos">Ver proyectos</a>
  </aside>
  <img src="salon-roble.webp" alt="Salón">
</div>
<style>
.split{display:grid;grid-template-columns:47% 1fr}
aside{background:#efe8de;color:#231c14}
h1{font-weight:300;letter-spacing:-.03em}
</style>

<!-- islaresort.example · reservas -->
<section class="hero">
  <img src="isla-terraza.webp" alt="Terraza">
  <h1>El tiempo, a otro ritmo.</h1>
  <form class="book">
    <input type="date" name="llegada">
    <input type="date" name="salida">
    <select name="huespedes">2 adultos</select>
    <button>Reservar</button>
  </form>
</section>
<style>
.book{display:grid;grid-template-columns:1fr 1fr 1fr auto}
button{background:#14110c;color:#fff}
</style>

<!-- marea.example -->
<header class="nav">
  <a class="logo">Marea</a>
  <nav>Carta · Reservas · Contacto</nav>
</header>
<section class="hero">
  <img src="terraza-puerto.webp" alt="Terraza">
  <h1>Cocina de mar, sin prisa.</h1>
  <p>Pescado del día y arroces junto al puerto.</p>
  <a class="btn" href="/reservar">Reservar mesa</a>
</section>
<style>
h1{font-size:clamp(2.6rem,6vw,5.4rem)}
.btn{background:#e8b46a;color:#1d1207}
</style>

<!-- nimbo.example · automatización -->
<section class="hero">
  <h1>Facturas que se hacen solas.</h1>
  <a class="btn" href="/probar">Probar Nimbo</a>
</section>
<script>
pedidos.on("completado", async (pedido) => {
  const factura = await crearFactura(pedido)
  await enviar(factura, pedido.cliente.email)
  recordatorio(factura, { dias: 7 })
})
</script>
<style>
.hero{display:grid;grid-template-columns:1fr 42%}
</style>