commit b7c579849304ca83be9e5e07fcbe1249237ae029
Author: Tatiana Villa <tatiana@villaema.es>
Date:   Fri Aug 21 12:59:17 2026 +0200

    first commit

diff --git a/css/estilos.css b/css/estilos.css
new file mode 100644
index 0000000..323c25a
--- /dev/null
+++ b/css/estilos.css
@@ -0,0 +1,801 @@
+:root {
+  /* COLORES PRINCIPALES */
+  --bg: #f4f7fa;
+  --surface: #ffffff;
+
+  --text: #111827;
+  --muted: #5f6b76;
+
+  /* AZUL DE MARCA */
+  --accent: #0054a4;
+  --accent-dark: #003f7d;
+  --accent-light: #e7f1fa;
+
+  --white: #ffffff;
+
+  /* BORDES */
+  --border: #d8e0e8;
+
+  /* ESTRUCTURA */
+  --max: 1180px;
+}
+
+
+/* =========================================================
+   RESET
+========================================================= */
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif;
+
+  background: var(--bg);
+  color: var(--text);
+
+  line-height: 1.6;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.container {
+  width: min(92%, var(--max));
+  margin: 0 auto;
+}
+
+
+/* =========================================================
+   HEADER / NAV
+========================================================= */
+
+header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+
+  background: rgba(244, 247, 250, 0.94);
+
+  backdrop-filter: blur(10px);
+
+  border-bottom: 1px solid var(--border);
+}
+
+nav {
+  min-height: 76px;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  gap: 30px;
+}
+
+
+/* LOGO */
+
+.logo {
+  font-size: 1.25rem;
+  font-weight: 750;
+  letter-spacing: -0.03em;
+}
+
+.logo span {
+  color: var(--accent);
+}
+
+
+/* NAV LINKS */
+
+nav ul {
+  display: flex;
+
+  list-style: none;
+
+  gap: 28px;
+
+  font-size: 0.94rem;
+}
+
+nav a {
+  transition: color 0.2s ease;
+}
+
+nav a:hover {
+  color: var(--accent);
+}
+
+
+/* NAV BUTTON */
+
+.nav-button {
+  background: var(--accent);
+  color: var(--white);
+
+  padding: 11px 18px;
+
+  border-radius: 999px;
+
+  font-size: 0.9rem;
+  font-weight: 650;
+
+  transition:
+    background 0.2s ease,
+    transform 0.2s ease;
+}
+
+.nav-button:hover {
+  background: var(--accent-dark);
+
+  transform: translateY(-1px);
+}
+
+
+/* =========================================================
+   HERO
+========================================================= */
+
+.hero {
+  padding: 90px 0 80px;
+}
+
+.hero-grid {
+  display: grid;
+
+  grid-template-columns: 1fr 1fr;
+
+  gap: 70px;
+
+  align-items: center;
+}
+
+
+/* EYEBROW */
+
+.eyebrow {
+  color: var(--accent-dark);
+
+  text-transform: uppercase;
+
+  letter-spacing: 0.14em;
+
+  font-size: 0.75rem;
+
+  font-weight: 750;
+
+  margin-bottom: 18px;
+}
+
+
+/* H1 */
+
+h1 {
+  font-size: clamp(3rem, 6vw, 5.5rem);
+
+  line-height: 0.98;
+
+  letter-spacing: -0.055em;
+
+  max-width: 700px;
+}
+
+
+/* HERO TEXT */
+
+.hero p {
+  color: var(--muted);
+
+  font-size: 1.15rem;
+
+  max-width: 590px;
+
+  margin: 28px 0;
+}
+
+
+/* HERO BUTTONS */
+
+.buttons {
+  display: flex;
+
+  gap: 12px;
+
+  flex-wrap: wrap;
+}
+
+.button {
+  display: inline-flex;
+
+  align-items: center;
+  justify-content: center;
+
+  padding: 14px 22px;
+
+  border-radius: 999px;
+
+  font-weight: 700;
+
+  transition:
+    background 0.2s ease,
+    color 0.2s ease,
+    border-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+
+/* PRIMARY BUTTON */
+
+.button-primary {
+  background: var(--accent);
+
+  color: var(--white);
+}
+
+.button-primary:hover {
+  background: var(--accent-dark);
+
+  transform: translateY(-2px);
+}
+
+
+/* SECONDARY BUTTON */
+
+.button-secondary {
+  border: 1px solid var(--border);
+
+  background: var(--surface);
+
+  color: var(--text);
+}
+
+.button-secondary:hover {
+  border-color: var(--accent);
+
+  color: var(--accent);
+}
+
+
+/* HERO IMAGE */
+
+.hero-image {
+  min-height: 520px;
+
+  border-radius: 28px;
+
+  background:
+    linear-gradient(
+      rgba(0, 0, 0, 0.08),
+      rgba(0, 0, 0, 0.08)
+    ),
+    url("images/hero.jpg") center / cover;
+
+  box-shadow:
+    0 25px 70px rgba(17, 24, 39, 0.12);
+}
+
+
+/* =========================================================
+   SECTIONS
+========================================================= */
+
+.section {
+  padding: 100px 0;
+}
+
+
+/* SECCIONES SOBRE BLANCO */
+
+.section-light {
+  background: var(--surface);
+}
+
+
+/* SECTION TITLE */
+
+.section-title {
+  max-width: 700px;
+
+  margin-bottom: 55px;
+}
+
+.section-title h2 {
+  font-size: clamp(2.2rem, 4vw, 3.5rem);
+
+  line-height: 1.05;
+
+  letter-spacing: -0.04em;
+
+  margin-bottom: 18px;
+}
+
+.section-title p {
+  color: var(--muted);
+
+  font-size: 1.08rem;
+}
+
+
+/* =========================================================
+   SERVICES
+========================================================= */
+
+.services {
+  display: grid;
+
+  grid-template-columns: repeat(4, 1fr);
+
+  gap: 1px;
+
+  background: var(--border);
+
+  border: 1px solid var(--border);
+}
+
+.service {
+  background: var(--surface);
+
+  padding: 35px 28px;
+
+  min-height: 230px;
+}
+
+
+/* SERVICE NUMBER */
+
+.service-number {
+  color: var(--accent);
+
+  font-weight: 800;
+
+  font-size: 0.8rem;
+
+  margin-bottom: 45px;
+}
+
+
+/* SERVICE TITLE */
+
+.service h3 {
+  font-size: 1.25rem;
+
+  margin-bottom: 10px;
+}
+
+
+/* SERVICE TEXT */
+
+.service p {
+  color: var(--muted);
+
+  font-size: 0.95rem;
+}
+
+
+/* =========================================================
+   PROCESS
+========================================================= */
+
+.process {
+  display: grid;
+
+  grid-template-columns: repeat(4, 1fr);
+
+  gap: 30px;
+}
+
+.step {
+  border-top: 2px solid var(--accent);
+
+  padding-top: 20px;
+}
+
+.step strong {
+  display: block;
+
+  margin-bottom: 12px;
+
+  font-size: 1.1rem;
+}
+
+.step p {
+  color: var(--muted);
+
+  font-size: 0.95rem;
+}
+
+
+/* =========================================================
+   BEFORE / AFTER
+========================================================= */
+
+.before-after {
+  display: grid;
+
+  grid-template-columns: 1fr 1fr;
+
+  gap: 20px;
+}
+
+.photo-card {
+  min-height: 500px;
+
+  border-radius: 20px;
+
+  overflow: hidden;
+
+  background-size: cover;
+
+  background-position: center;
+
+  display: flex;
+
+  align-items: flex-end;
+}
+
+
+/* BEFORE */
+
+.photo-before {
+  background-image:
+    linear-gradient(
+      transparent 60%,
+      rgba(0, 0, 0, 0.55)
+    ),
+    url("images/antes.jpg");
+}
+
+
+/* AFTER */
+
+.photo-after {
+  background-image:
+    linear-gradient(
+      transparent 60%,
+      rgba(0, 0, 0, 0.35)
+    ),
+    url("images/despues.jpg");
+}
+
+
+/* PHOTO LABEL */
+
+.photo-label {
+  color: var(--white);
+
+  padding: 25px;
+
+  font-weight: 750;
+
+  text-transform: uppercase;
+
+  letter-spacing: 0.1em;
+
+  font-size: 0.75rem;
+}
+
+
+/* =========================================================
+   WHY / SOBRE NOSOTROS
+========================================================= */
+
+.why-grid {
+  display: grid;
+
+  grid-template-columns: 1fr 1fr;
+
+  gap: 80px;
+
+  align-items: center;
+}
+
+.why-list {
+  display: grid;
+
+  gap: 22px;
+}
+
+.why-item {
+  display: grid;
+
+  grid-template-columns: 35px 1fr;
+
+  gap: 15px;
+}
+
+
+/* CHECK */
+
+.check {
+  width: 28px;
+  height: 28px;
+
+  border-radius: 50%;
+
+  background: var(--accent);
+
+  color: var(--white);
+
+  display: grid;
+
+  place-items: center;
+
+  font-size: 0.8rem;
+
+  font-weight: bold;
+}
+
+
+/* WHY TITLE */
+
+.why-item h3 {
+  margin-bottom: 5px;
+}
+
+
+/* WHY TEXT */
+
+.why-item p {
+  color: var(--muted);
+}
+
+
+/* =========================================================
+   CTA
+========================================================= */
+
+.cta {
+  background: var(--accent);
+
+  color: var(--white);
+
+  border-radius: 30px;
+
+  padding: 70px;
+
+  text-align: center;
+}
+
+.cta h2 {
+  font-size: clamp(2.2rem, 4vw, 4rem);
+
+  line-height: 1;
+
+  letter-spacing: -0.045em;
+
+  margin-bottom: 20px;
+}
+
+.cta p {
+  color: rgba(255, 255, 255, 0.86);
+
+  max-width: 600px;
+
+  margin: 0 auto 30px;
+}
+
+
+/* CTA BUTTON */
+
+.cta .button-primary {
+  background: var(--white);
+
+  color: var(--accent);
+}
+
+.cta .button-primary:hover {
+  background: var(--accent-light);
+
+  color: var(--accent-dark);
+}
+
+
+/* =========================================================
+   CONTACT
+========================================================= */
+
+.contact-grid {
+  display: grid;
+
+  grid-template-columns: 1fr 1fr;
+
+  gap: 70px;
+}
+
+
+/* CONTACT INFO */
+
+.contact-info p {
+  color: var(--muted);
+
+  margin: 15px 0 25px;
+}
+
+.contact-detail {
+  margin: 12px 0;
+
+  font-weight: 650;
+}
+
+
+/* FORM */
+
+form {
+  display: grid;
+
+  gap: 14px;
+}
+
+
+/* INPUTS */
+
+input,
+textarea {
+  width: 100%;
+
+  border: 1px solid var(--border);
+
+  background: var(--surface);
+
+  color: var(--text);
+
+  padding: 15px 16px;
+
+  border-radius: 10px;
+
+  font: inherit;
+
+  outline: none;
+
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+
+/* INPUT FOCUS */
+
+input:focus,
+textarea:focus {
+  border-color: var(--accent);
+
+  box-shadow:
+    0 0 0 3px var(--accent-light);
+}
+
+
+/* PLACEHOLDER */
+
+input::placeholder,
+textarea::placeholder {
+  color: #8a95a0;
+}
+
+
+/* TEXTAREA */
+
+textarea {
+  min-height: 150px;
+
+  resize: vertical;
+}
+
+
+/* BUTTON RESET */
+
+button {
+  border: 0;
+
+  cursor: pointer;
+
+  font: inherit;
+}
+
+
+/* =========================================================
+   FOOTER
+========================================================= */
+
+footer {
+  padding: 40px 0;
+
+  border-top: 1px solid var(--border);
+
+  color: var(--muted);
+
+  font-size: 0.9rem;
+
+  background: var(--bg);
+}
+
+.footer-inner {
+  display: flex;
+
+  justify-content: space-between;
+
+  gap: 20px;
+}
+
+
+/* =========================================================
+   MOBILE
+========================================================= */
+
+@media (max-width: 900px) {
+
+  nav ul {
+    display: none;
+  }
+
+  .hero-grid,
+  .why-grid,
+  .contact-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .hero {
+    padding-top: 55px;
+  }
+
+  .hero-image {
+    min-height: 400px;
+  }
+
+  .services,
+  .process {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .before-after {
+    grid-template-columns: 1fr;
+  }
+
+  .cta {
+    padding: 45px 25px;
+  }
+}
+
+
+/* =========================================================
+   MOBILE PEQUEÑO
+========================================================= */
+
+@media (max-width: 600px) {
+
+  .services,
+  .process {
+    grid-template-columns: 1fr;
+  }
+
+  .hero-image {
+    min-height: 330px;
+  }
+
+  .section {
+    padding: 70px 0;
+  }
+
+  .footer-inner {
+    flex-direction: column;
+  }
+
+  h1 {
+    font-size: clamp(2.7rem, 13vw, 4rem);
+  }
+}
\ No newline at end of file
diff --git a/images/antes.png b/images/antes.png
new file mode 100644
index 0000000..ce3f65c
Binary files /dev/null and b/images/antes.png differ
diff --git a/images/despues.png b/images/despues.png
new file mode 100644
index 0000000..7aea792
Binary files /dev/null and b/images/despues.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a2a6e22
--- /dev/null
+++ b/index.html
@@ -0,0 +1,440 @@
+```html
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <title>Alquiler Fácil | Preparamos tu vivienda para alquilarla</title>
+  <meta name="description"
+        content="Alquiler Fácil prepara viviendas en Las Rozas y alrededores para salir al mercado: puesta a punto, pequeñas mejoras, decoración y fotografía.">
+    <link rel="stylesheet" href="css/estilos.css">
+</head>
+
+<body>
+
+<header>
+  <div class="container">
+    <nav>
+      <a href="#" class="logo">Alquiler <span>Fácil</span></a>
+
+      <ul>
+        <li><a href="#servicios">Qué hacemos</a></li>
+        <li><a href="#proceso">Cómo funciona</a></li>
+        <li><a href="#sobre-mi">Sobre mí</a></li>
+        <li><a href="#contacto">Contacto</a></li>
+      </ul>
+
+      <a href="#contacto" class="nav-button">
+        Valorar mi vivienda
+      </a>
+    </nav>
+  </div>
+</header>
+
+
+<main>
+
+  <!-- HERO -->
+
+  <section class="hero">
+    <div class="container hero-grid">
+
+      <div>
+        <div class="eyebrow">
+          Las Rozas y alrededores
+        </div>
+
+        <h1>
+          Preparamos tu vivienda para alquilarla.
+        </h1>
+
+        <p>
+          Ponemos tu vivienda a punto, coordinamos las mejoras que realmente
+          necesita y hacemos que se presente de la mejor manera posible
+          cuando salga al mercado.
+        </p>
+
+        <div class="buttons">
+          <a href="#contacto" class="button button-primary">
+            Solicitar valoración gratuita
+          </a>
+
+          <a href="#servicios" class="button button-secondary">
+            Ver qué hacemos
+          </a>
+        </div>
+      </div>
+
+      <div class="hero-image"></div>
+
+    </div>
+  </section>
+
+
+  <!-- INTRO -->
+
+  <section class="section section-light">
+    <div class="container">
+
+      <div class="section-title">
+        <div class="eyebrow">Una vivienda preparada</div>
+
+        <h2>
+          No hace falta reformarla entera.
+        </h2>
+
+        <p>
+          Analizamos la vivienda y te recomendamos dónde merece la pena
+          invertir y dónde no. Nuestro objetivo es que salga al mercado
+          cuidada, atractiva y lista para alquilar.
+        </p>
+      </div>
+
+    </div>
+  </section>
+
+
+  <!-- SERVICES -->
+
+  <section class="section" id="servicios">
+    <div class="container">
+
+      <div class="section-title">
+        <div class="eyebrow">Qué hacemos</div>
+
+        <h2>
+          Nos ocupamos de la puesta a punto.
+        </h2>
+
+        <p>
+          Tú decides cuánto quieres invertir. Nosotros coordinamos el
+          proceso y nos ocupamos de que la vivienda quede preparada.
+        </p>
+      </div>
+
+      <div class="services">
+
+        <article class="service">
+          <div class="service-number">01</div>
+          <h3>Valoración</h3>
+          <p>
+            Visitamos la vivienda y detectamos qué merece la pena mejorar
+            antes de ponerla en alquiler.
+          </p>
+        </article>
+
+        <article class="service">
+          <div class="service-number">02</div>
+          <h3>Puesta a punto</h3>
+          <p>
+            Coordinamos pintura, pequeñas reparaciones, iluminación,
+            persianas, toldos, aire acondicionado y otros trabajos.
+          </p>
+        </article>
+
+        <article class="service">
+          <div class="service-number">03</div>
+          <h3>Presentación</h3>
+          <p>
+            Organizamos la vivienda, cuidamos los detalles y mejoramos
+            su presentación para el mercado.
+          </p>
+        </article>
+
+        <article class="service">
+          <div class="service-number">04</div>
+          <h3>Fotografía</h3>
+          <p>
+            Realizamos fotografías pensadas para que la vivienda destaque
+            desde el primer vistazo.
+          </p>
+        </article>
+
+      </div>
+
+    </div>
+  </section>
+
+
+  <!-- BEFORE / AFTER -->
+
+  <section class="section section-light">
+  <div class="container">
+
+    <div class="section-title">
+      <div class="eyebrow">El resultado</div>
+
+      <h2>
+        Una buena presentación cambia la percepción de una vivienda.
+      </h2>
+
+      <p>
+        No se trata de reformar por reformar. Se trata de saber qué merece
+        la pena mejorar y cómo presentar después la vivienda.
+      </p>
+    </div>
+
+    <div class="before-after">
+
+    <div class="photo-card photo-before">
+        <img src="images/antes.png" alt="Antes de preparar la vivienda">
+    </div>
+
+    <div class="photo-card photo-after">
+        <img src="images/despues.png" alt="Después de preparar la vivienda">
+    </div>
+
+    </div>
+
+  </div>
+</section>
+
+
+  <!-- PROCESS -->
+
+  <section class="section" id="proceso">
+    <div class="container">
+
+      <div class="section-title">
+        <div class="eyebrow">Cómo funciona</div>
+
+        <h2>
+          Sencillo para ti.
+        </h2>
+
+        <p>
+          Tú nos cuentas qué quieres conseguir. Nosotros te proponemos
+          cómo llegar hasta allí.
+        </p>
+      </div>
+
+      <div class="process">
+
+        <div class="step">
+          <strong>01. Nos conocemos</strong>
+          <p>
+            Hablamos sobre la vivienda y tus objetivos.
+          </p>
+        </div>
+
+        <div class="step">
+          <strong>02. La visitamos</strong>
+          <p>
+            Analizamos el estado y detectamos oportunidades de mejora.
+          </p>
+        </div>
+
+        <div class="step">
+          <strong>03. Te proponemos</strong>
+          <p>
+            Recibes una propuesta clara con lo que haríamos y lo que no.
+          </p>
+        </div>
+
+        <div class="step">
+          <strong>04. La preparamos</strong>
+          <p>
+            Coordinamos los trabajos y dejamos la vivienda lista para salir
+            al mercado.
+          </p>
+        </div>
+
+      </div>
+
+    </div>
+  </section>
+
+
+  <!-- WHY -->
+
+  <section class="section section-light" id="sobre-mi">
+    <div class="container why-grid">
+
+      <div class="section-title">
+        <div class="eyebrow">Alquiler Fácil</div>
+
+        <h2>
+          Una persona para coordinarlo todo.
+        </h2>
+
+        <p>
+          Una vivienda puede necesitar varias pequeñas mejoras antes de
+          alquilarse. En lugar de que tengas que buscar y coordinar a
+          diferentes profesionales, nosotros nos ocupamos del proceso.
+        </p>
+      </div>
+
+      <div class="why-list">
+
+        <div class="why-item">
+          <div class="check">✓</div>
+          <div>
+            <h3>Solo lo que necesita</h3>
+            <p>
+              No buscamos hacer reformas innecesarias. Priorizamos las
+              mejoras que realmente aportan valor.
+            </p>
+          </div>
+        </div>
+
+        <div class="why-item">
+          <div class="check">✓</div>
+          <div>
+            <h3>Profesionales coordinados</h3>
+            <p>
+              Contamos con profesionales para los distintos trabajos
+              necesarios.
+            </p>
+          </div>
+        </div>
+
+        <div class="why-item">
+          <div class="check">✓</div>
+          <div>
+            <h3>Fotografía cuidada</h3>
+            <p>
+              Una vivienda preparada necesita fotografías que estén a la
+              altura.
+            </p>
+          </div>
+        </div>
+
+        <div class="why-item">
+          <div class="check">✓</div>
+          <div>
+            <h3>Trato personal</h3>
+            <p>
+              Hablas directamente con la persona que coordina tu vivienda.
+            </p>
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+  </section>
+
+
+  <!-- CTA -->
+
+  <section class="section">
+    <div class="container">
+
+      <div class="cta">
+
+        <h2>
+          ¿Quieres saber qué haríamos con tu vivienda?
+        </h2>
+
+        <p>
+          Solicita una valoración inicial sin compromiso. Visitamos la
+          vivienda y te indicamos qué mejoraríamos y qué dejaríamos tal cual.
+        </p>
+
+        <a href="#contacto" class="button button-primary">
+          Solicitar valoración
+        </a>
+
+      </div>
+
+    </div>
+  </section>
+
+
+  <!-- CONTACT -->
+
+  <section class="section section-light" id="contacto">
+    <div class="container contact-grid">
+
+      <div class="contact-info">
+
+        <div class="eyebrow">Contacto</div>
+
+        <h2>
+          Hablemos de tu vivienda.
+        </h2>
+
+        <p>
+          Cuéntame brevemente qué vivienda tienes y qué quieres conseguir.
+          Me pondré en contacto contigo para valorar el proyecto.
+        </p>
+
+        <!-- Sustituir estos datos -->
+        <div class="contact-detail">
+          📍 Las Rozas de Madrid y alrededores
+        </div>
+
+        <div class="contact-detail">
+          📱 624 42 78 02
+        </div>
+
+        <div class="contact-detail">
+          ✉️ hola@alquiler-facil.es
+        </div>
+
+      </div>
+
+
+      <form action="#" method="post">
+
+        <input
+          type="text"
+          name="nombre"
+          placeholder="Tu nombre"
+          required
+        >
+
+        <input
+          type="tel"
+          name="telefono"
+          placeholder="Teléfono"
+          required
+        >
+
+        <input
+          type="email"
+          name="email"
+          placeholder="Email"
+        >
+
+        <input
+          type="text"
+          name="zona"
+          placeholder="Zona de la vivienda"
+        >
+
+        <textarea
+          name="mensaje"
+          placeholder="Cuéntame brevemente cómo es la vivienda y qué necesitas"
+        ></textarea>
+
+        <button
+          type="submit"
+          class="button button-primary"
+        >
+          Solicitar valoración
+        </button>
+
+      </form>
+
+    </div>
+  </section>
+
+</main>
+
+
+<footer>
+  <div class="container footer-inner">
+    <div id="copyright">
+      © año Alquiler Fácil
+    </div>
+
+    <div id="location">
+      Las Rozas de Madrid · Madrid
+    </div>
+  </div>
+</footer>
+
+</body>
+</html>
\ No newline at end of file