diff --git a/carrito.html b/carrito.html
new file mode 100644
index 00000000..92f6068b
--- /dev/null
+++ b/carrito.html
@@ -0,0 +1,246 @@
+<!doctype html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Carrito | ARCA Studio</title>
+    <meta
+      name="description"
+      content="Revisa tu carrito de compras en ARCA Studio con detalle de productos, cantidades y totalizacion completa."
+    />
+    <meta
+      name="keywords"
+      content="carrito de compras, checkout, subtotal, impuestos, tienda online moda, ARCA Studio"
+    />
+    <meta name="robots" content="index, follow" />
+    <meta name="author" content="ARCA Studio" />
+    <meta property="og:title" content="Carrito | ARCA Studio" />
+    <meta
+      property="og:description"
+      content="Confirma tus productos, cantidades y total antes de comprar en ARCA Studio."
+    />
+    <meta property="og:type" content="website" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Syne:wght@600;700;800&display=swap"
+      rel="stylesheet"
+    />
+
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+
+    <style>
+      :root {
+        --sand: #f7f2eb;
+        --ink: #111111;
+        --brick: #c85a3f;
+        --forest: #2f5a45;
+      }
+
+      body {
+        font-family: "Space Grotesk", sans-serif;
+        background: radial-gradient(circle at 85% 0%, #f3e3d6 0%, #f7f2eb 42%, #efe7dd 100%);
+        color: var(--ink);
+      }
+
+      h1,
+      h2,
+      h3,
+      .brand-font {
+        font-family: "Syne", sans-serif;
+      }
+    </style>
+
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "CheckoutPage",
+        "name": "Carrito ARCA Studio",
+        "description": "Vista completa del carrito con productos, cantidades y totalizacion.",
+        "url": "carrito.html"
+      }
+    </script>
+  </head>
+
+  <body class="min-h-screen antialiased">
+    <a
+      href="#contenido-principal"
+      class="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-50 focus:rounded-md focus:bg-black focus:px-4 focus:py-2 focus:text-white"
+      >Saltar al contenido principal</a
+    >
+
+    <header class="sticky top-0 z-40 border-b border-black/10 bg-[#f7f2eb]/95 backdrop-blur">
+      <div
+        class="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-3 px-4 py-3 sm:px-6 lg:grid lg:grid-cols-[auto_1fr_auto] lg:gap-8"
+      >
+        <a href="index.html" class="brand-font text-2xl font-extrabold tracking-tight text-[var(--ink)]"
+          >ARCA<span class="text-[var(--brick)]">Studio</span></a
+        >
+
+        <nav aria-label="Cuenta de usuario y navegacion">
+          <ul class="flex items-center gap-2 sm:gap-3">
+            <li>
+              <a
+                href="index.html"
+                class="rounded-full border border-black/20 px-4 py-2 text-sm font-medium transition hover:border-[var(--brick)] hover:text-[var(--brick)]"
+                >Home</a
+              >
+            </li>
+            <li>
+              <a
+                href="catalogo.html"
+                class="rounded-full border border-black/20 px-4 py-2 text-sm font-medium transition hover:border-[var(--brick)] hover:text-[var(--brick)]"
+                >Catalogo</a
+              >
+            </li>
+            <li>
+              <a
+                href="carrito.html"
+                class="rounded-full bg-[var(--forest)] px-4 py-2 text-sm font-semibold text-white transition hover:brightness-110"
+                >Mi carrito</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+
+    <main id="contenido-principal" class="mx-auto max-w-7xl px-4 pb-16 pt-8 sm:px-6 lg:px-8 lg:pt-10">
+      <section class="mb-8 rounded-3xl border border-black/10 bg-white/60 p-6 sm:p-8" aria-labelledby="carrito-titulo">
+        <p class="text-xs font-semibold uppercase tracking-wide text-[var(--brick)]">Resumen de compra</p>
+        <h1 id="carrito-titulo" class="mt-2 text-3xl font-extrabold sm:text-4xl">Carrito</h1>
+        <p class="mt-3 max-w-3xl text-sm text-black/70 sm:text-base">
+          Revisa tus productos antes de finalizar la compra. Puedes ajustar cantidades y confirmar el total.
+        </p>
+      </section>
+
+      <section class="grid gap-6 lg:grid-cols-[1.45fr_0.55fr] lg:items-start" aria-label="Detalle del carrito y totalizacion">
+        <article class="rounded-3xl border border-black/10 bg-white p-4 sm:p-6">
+          <h2 class="text-xl font-bold sm:text-2xl">Productos agregados</h2>
+
+          <div class="mt-5 space-y-4">
+            <article class="grid grid-cols-[84px_1fr] gap-4 rounded-2xl border border-black/10 p-3 sm:grid-cols-[100px_1fr] sm:p-4">
+              <img
+                src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=500&q=80"
+                alt="Runner Nova rojo"
+                class="h-20 w-20 rounded-xl object-cover sm:h-24 sm:w-24"
+                loading="lazy"
+              />
+              <div>
+                <h3 class="text-base font-bold">Runner Nova</h3>
+                <div class="mt-2 grid gap-2 text-sm text-black/80 sm:grid-cols-3">
+                  <p><span class="font-semibold">Precio unitario:</span> $129.00</p>
+                  <p><span class="font-semibold">Cantidad:</span> 1</p>
+                  <p><span class="font-semibold">Total:</span> $129.00</p>
+                </div>
+              </div>
+            </article>
+
+            <article class="grid grid-cols-[84px_1fr] gap-4 rounded-2xl border border-black/10 p-3 sm:grid-cols-[100px_1fr] sm:p-4">
+              <img
+                src="https://images.unsplash.com/photo-1523381210434-271e8be1f52b?auto=format&fit=crop&w=500&q=80"
+                alt="Overshirt Terra"
+                class="h-20 w-20 rounded-xl object-cover sm:h-24 sm:w-24"
+                loading="lazy"
+              />
+              <div>
+                <h3 class="text-base font-bold">Overshirt Terra</h3>
+                <div class="mt-2 grid gap-2 text-sm text-black/80 sm:grid-cols-3">
+                  <p><span class="font-semibold">Precio unitario:</span> $89.90</p>
+                  <p><span class="font-semibold">Cantidad:</span> 2</p>
+                  <p><span class="font-semibold">Total:</span> $179.80</p>
+                </div>
+              </div>
+            </article>
+
+            <article class="grid grid-cols-[84px_1fr] gap-4 rounded-2xl border border-black/10 p-3 sm:grid-cols-[100px_1fr] sm:p-4">
+              <img
+                src="https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?auto=format&fit=crop&w=500&q=80"
+                alt="Crossline Bag negra"
+                class="h-20 w-20 rounded-xl object-cover sm:h-24 sm:w-24"
+                loading="lazy"
+              />
+              <div>
+                <h3 class="text-base font-bold">Crossline Bag</h3>
+                <div class="mt-2 grid gap-2 text-sm text-black/80 sm:grid-cols-3">
+                  <p><span class="font-semibold">Precio unitario:</span> $54.00</p>
+                  <p><span class="font-semibold">Cantidad:</span> 1</p>
+                  <p><span class="font-semibold">Total:</span> $54.00</p>
+                </div>
+              </div>
+            </article>
+          </div>
+        </article>
+
+        <aside class="rounded-3xl border border-black/10 bg-white p-5 sm:p-6 lg:sticky lg:top-24" aria-label="Totalizacion">
+          <h2 class="text-xl font-bold">Totalizacion</h2>
+
+          <dl class="mt-4 space-y-3 text-sm">
+            <div class="flex items-center justify-between gap-3">
+              <dt class="text-black/70">Subtotal</dt>
+              <dd class="font-semibold">$362.80</dd>
+            </div>
+            <div class="flex items-center justify-between gap-3">
+              <dt class="text-black/70">Impuestos</dt>
+              <dd class="font-semibold">$76.19</dd>
+            </div>
+            <div class="border-t border-black/10 pt-3">
+              <div class="flex items-center justify-between gap-3">
+                <dt class="text-base font-bold">Total</dt>
+                <dd class="text-xl font-extrabold">$438.99</dd>
+              </div>
+            </div>
+          </dl>
+
+          <button
+            type="button"
+            class="mt-5 w-full rounded-xl bg-[var(--ink)] px-6 py-3 text-sm font-semibold text-white transition hover:bg-black"
+          >
+            Comprar
+          </button>
+        </aside>
+      </section>
+    </main>
+
+    <footer class="border-t border-black/10 bg-[#17120f] text-white">
+      <div class="mx-auto grid max-w-7xl gap-10 px-4 py-12 sm:px-6 md:grid-cols-2 lg:grid-cols-4 lg:px-8">
+        <section aria-labelledby="footer-brand">
+          <h2 id="footer-brand" class="brand-font text-xl font-extrabold">ARCA Studio</h2>
+          <p class="mt-3 text-sm text-white/75">
+            Moda esencial con foco en silueta, textura y durabilidad para uso diario.
+          </p>
+        </section>
+
+        <nav aria-labelledby="footer-categorias">
+          <h2 id="footer-categorias" class="text-sm font-semibold uppercase tracking-wide text-white/85">Categorias</h2>
+          <ul class="mt-4 space-y-2 text-sm text-white/80">
+            <li><a href="#" class="hover:text-white">Calzado</a></li>
+            <li><a href="#" class="hover:text-white">Camisas</a></li>
+            <li><a href="#" class="hover:text-white">Pantalones</a></li>
+            <li><a href="#" class="hover:text-white">Accesorios</a></li>
+          </ul>
+        </nav>
+
+        <nav aria-labelledby="footer-legal">
+          <h2 id="footer-legal" class="text-sm font-semibold uppercase tracking-wide text-white/85">Legal</h2>
+          <ul class="mt-4 space-y-2 text-sm text-white/80">
+            <li><a href="#" class="hover:text-white">Terminos y condiciones</a></li>
+            <li><a href="#" class="hover:text-white">Politica de privacidad</a></li>
+            <li><a href="#" class="hover:text-white">Sobre la marca</a></li>
+          </ul>
+        </nav>
+
+        <section aria-labelledby="footer-contacto">
+          <h2 id="footer-contacto" class="text-sm font-semibold uppercase tracking-wide text-white/85">Contacto</h2>
+          <ul class="mt-4 space-y-2 text-sm text-white/80">
+            <li>soporte@arcastudio.com</li>
+            <li>+34 900 000 123</li>
+            <li>Calle Gran Via 100, Madrid</li>
+            <li>Lun - Vie: 9:00 a 18:00</li>
+          </ul>
+        </section>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/catalogo.html b/catalogo.html
new file mode 100644
index 00000000..865d7805
--- /dev/null
+++ b/catalogo.html
@@ -0,0 +1,429 @@
+<!doctype html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Catalogo | ARCA Studio</title>
+    <meta
+      name="description"
+      content="Explora el catalogo de ARCA Studio con calzado, camisas, pantalones y accesorios. Filtra por categoria y talla en una experiencia responsive."
+    />
+    <meta
+      name="keywords"
+      content="catalogo ropa, tienda online moda, filtro por talla, filtro por categoria, ARCA Studio"
+    />
+    <meta name="robots" content="index, follow" />
+    <meta name="author" content="ARCA Studio" />
+    <meta property="og:title" content="Catalogo | ARCA Studio" />
+    <meta
+      property="og:description"
+      content="20 productos de referencia en una grilla moderna con filtros por categoria y talla."
+    />
+    <meta property="og:type" content="website" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Syne:wght@600;700;800&display=swap"
+      rel="stylesheet"
+    />
+
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+
+    <style>
+      :root {
+        --sand: #f7f2eb;
+        --ink: #111111;
+        --brick: #c85a3f;
+        --forest: #2f5a45;
+      }
+
+      body {
+        font-family: "Space Grotesk", sans-serif;
+        background: radial-gradient(circle at 85% 0%, #f3e3d6 0%, #f7f2eb 42%, #efe7dd 100%);
+        color: var(--ink);
+      }
+
+      h1,
+      h2,
+      h3,
+      .brand-font {
+        font-family: "Syne", sans-serif;
+      }
+
+      .card-lift {
+        transition: transform 220ms ease, box-shadow 220ms ease;
+      }
+
+      .card-lift:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 16px 36px rgba(17, 17, 17, 0.1);
+      }
+    </style>
+
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "CollectionPage",
+        "name": "Catalogo ARCA Studio",
+        "description": "Listado de productos de ARCA Studio con filtros por categoria y talla.",
+        "url": "catalogo.html"
+      }
+    </script>
+  </head>
+
+  <body class="min-h-screen antialiased">
+    <a
+      href="#contenido-principal"
+      class="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-50 focus:rounded-md focus:bg-black focus:px-4 focus:py-2 focus:text-white"
+      >Saltar al contenido principal</a
+    >
+
+    <header class="sticky top-0 z-40 border-b border-black/10 bg-[#f7f2eb]/95 backdrop-blur">
+      <div
+        class="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-3 px-4 py-3 sm:px-6 lg:grid lg:grid-cols-[auto_1fr_auto] lg:gap-8"
+      >
+        <a href="index.html" class="brand-font text-2xl font-extrabold tracking-tight text-[var(--ink)]"
+          >ARCA<span class="text-[var(--brick)]">Studio</span></a
+        >
+
+        <form class="order-3 w-full lg:order-none" role="search" aria-label="Buscar productos">
+          <label for="search" class="sr-only">Buscar</label>
+          <div class="relative">
+            <input
+              id="search"
+              name="search"
+              type="search"
+              placeholder="Buscar productos, colecciones o categoria"
+              class="w-full rounded-full border border-black/20 bg-white px-5 py-3 text-sm shadow-sm outline-none ring-[var(--brick)]/30 transition focus:ring-4"
+            />
+            <button
+              type="submit"
+              class="absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-[var(--ink)] px-4 py-2 text-xs font-semibold text-white"
+            >
+              Buscar
+            </button>
+          </div>
+        </form>
+
+        <nav aria-label="Cuenta de usuario y navegacion">
+          <ul class="flex items-center gap-2 sm:gap-3">
+            <li>
+              <a
+                href="index.html"
+                class="rounded-full border border-black/20 px-4 py-2 text-sm font-medium transition hover:border-[var(--brick)] hover:text-[var(--brick)]"
+                >Home</a
+              >
+            </li>
+            <li>
+              <a
+                href="catalogo.html"
+                class="rounded-full border border-black/20 bg-black/5 px-4 py-2 text-sm font-semibold"
+                aria-current="page"
+                >Catalogo</a
+              >
+            </li>
+            <li>
+              <a
+                href="#"
+                class="rounded-full border border-black/20 px-4 py-2 text-sm font-medium transition hover:border-[var(--brick)] hover:text-[var(--brick)]"
+                >Ingresar</a
+              >
+            </li>
+            <li>
+              <a
+                href="#"
+                class="rounded-full bg-[var(--forest)] px-4 py-2 text-sm font-semibold text-white transition hover:brightness-110"
+                >Mi cuenta</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+
+    <main id="contenido-principal" class="mx-auto max-w-7xl px-4 pb-16 pt-8 sm:px-6 lg:px-8 lg:pt-10">
+      <section aria-labelledby="catalogo-titulo" class="mb-8 rounded-3xl border border-black/10 bg-white/60 p-6 sm:p-8">
+        <p class="text-xs font-semibold uppercase tracking-wide text-[var(--brick)]">Coleccion completa</p>
+        <h1 id="catalogo-titulo" class="mt-2 text-3xl font-extrabold sm:text-4xl">Catalogo ARCA Studio</h1>
+        <p class="mt-3 max-w-3xl text-sm text-black/70 sm:text-base">
+          Encuentra prendas y accesorios para uso diario, trabajo y estilo urbano. Usa los filtros para explorar por categoria y talla.
+        </p>
+      </section>
+
+      <section aria-labelledby="filtros-titulo" class="mb-8">
+        <h2 id="filtros-titulo" class="mb-3 text-lg font-bold">Filtros</h2>
+        <form class="grid gap-3 rounded-2xl border border-black/10 bg-white p-4 sm:grid-cols-2 lg:grid-cols-[1fr_1fr_auto] lg:items-end">
+          <div>
+            <label for="categoria" class="mb-1 block text-sm font-medium">Categoria</label>
+            <select
+              id="categoria"
+              name="categoria"
+              class="w-full rounded-xl border border-black/15 bg-white px-4 py-3 text-sm outline-none ring-[var(--brick)]/30 focus:ring-4"
+            >
+              <option value="">Todas las categorias</option>
+              <option value="calzado">Calzado</option>
+              <option value="camisas">Camisas</option>
+              <option value="pantalones">Pantalones</option>
+              <option value="accesorios">Accesorios</option>
+            </select>
+          </div>
+
+          <div>
+            <label for="talla" class="mb-1 block text-sm font-medium">Talla</label>
+            <select
+              id="talla"
+              name="talla"
+              class="w-full rounded-xl border border-black/15 bg-white px-4 py-3 text-sm outline-none ring-[var(--brick)]/30 focus:ring-4"
+            >
+              <option value="">Todas las tallas</option>
+              <option value="xs">XS</option>
+              <option value="s">S</option>
+              <option value="m">M</option>
+              <option value="l">L</option>
+              <option value="xl">XL</option>
+              <option value="42">42</option>
+            </select>
+          </div>
+
+          <button
+            type="submit"
+            class="rounded-xl bg-[var(--ink)] px-6 py-3 text-sm font-semibold text-white transition hover:bg-black"
+          >
+            Aplicar filtros
+          </button>
+        </form>
+      </section>
+
+      <section aria-labelledby="listado-titulo">
+        <div class="mb-4 flex items-center justify-between gap-3">
+          <h2 id="listado-titulo" class="text-xl font-bold sm:text-2xl">Productos</h2>
+          <p class="text-sm text-black/70">20 resultados</p>
+        </div>
+
+        <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
+          <article class="card-lift rounded-2xl border border-black/10 bg-white p-3">
+            <a href="producto.html#runner-nova" class="block rounded-xl focus:outline-none focus-visible:ring-4 focus-visible:ring-[var(--brick)]/30">
+              <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=800&q=80" alt="Runner Nova rojo" class="h-48 w-full rounded-xl object-cover" loading="lazy" />
+              <h3 class="mt-3 text-sm font-bold sm:text-base">Runner Nova</h3>
+              <p class="text-xs text-black/65 sm:text-sm">Calzado · Tallas 39-44</p>
+              <p class="mt-1 text-sm font-semibold">$129.00</p>
+            </a>
+          </article>
+
+          <article class="card-lift rounded-2xl border border-black/10 bg-white p-3">
+            <a href="producto.html#overshirt-terra" class="block rounded-xl focus:outline-none focus-visible:ring-4 focus-visible:ring-[var(--brick)]/30">
+              <img src="https://images.unsplash.com/photo-1523381210434-271e8be1f52b?auto=format&fit=crop&w=800&q=80" alt="Overshirt Terra" class="h-48 w-full rounded-xl object-cover" loading="lazy" />
+              <h3 class="mt-3 text-sm font-bold sm:text-base">Overshirt Terra</h3>
+              <p class="text-xs text-black/65 sm:text-sm">Camisas · S a XL</p>
+              <p class="mt-1 text-sm font-semibold">$89.90</p>
+            </a>
+          </article>
+
+          <article class="card-lift rounded-2xl border border-black/10 bg-white p-3">
+            <a href="producto.html#cargo-atlas" class="block rounded-xl focus:outline-none focus-visible:ring-4 focus-visible:ring-[var(--brick)]/30">
+              <img src="https://images.unsplash.com/photo-1529139574466-a303027c1d8b?auto=format&fit=crop&w=800&q=80" alt="Cargo Atlas oliva" class="h-48 w-full rounded-xl object-cover" loading="lazy" />
+              <h3 class="mt-3 text-sm font-bold sm:text-base">Cargo Atlas</h3>
+              <p class="text-xs text-black/65 sm:text-sm">Pantalones · 30 a 38</p>
+              <p class="mt-1 text-sm font-semibold">$99.00</p>
+            </a>
+          </article>
+
+          <article class="card-lift rounded-2xl border border-black/10 bg-white p-3">
+            <a href="producto.html#cap-stride" class="block rounded-xl focus:outline-none focus-visible:ring-4 focus-visible:ring-[var(--brick)]/30">
+              <img src="https://images.pexels.com/photos/1124465/pexels-photo-1124465.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="Cap Stride beige" class="h-48 w-full rounded-xl object-cover" loading="lazy" />
+              <h3 class="mt-3 text-sm font-bold sm:text-base">Cap Stride</h3>
+              <p class="text-xs text-black/65 sm:text-sm">Accesorios · Talla unica</p>
+              <p class="mt-1 text-sm font-semibold">$34.00</p>
+            </a>
+          </article>
+
+          <article class="card-lift rounded-2xl border border-black/10 bg-white p-3">
+            <a href="producto.html#shell-night" class="block rounded-xl focus:outline-none focus-visible:ring-4 focus-visible:ring-[var(--brick)]/30">
+              <img src="https://images.unsplash.com/photo-1521223890158-f9f7c3d5d504?auto=format&fit=crop&w=800&q=80" alt="Shell Night negra" class="h-48 w-full rounded-xl object-cover" loading="lazy" />
+              <h3 class="mt-3 text-sm font-bold sm:text-base">Shell Night</h3>
+              <p class="text-xs text-black/65 sm:text-sm">Camisas · S a XL</p>
+              <p class="mt-1 text-sm font-semibold">$149.00</p>
+            </a>
+          </article>
+
+          <article class="card-lift rounded-2xl border border-black/10 bg-white p-3">
+            <a href="producto.html#hood-core" class="block rounded-xl focus:outline-none focus-visible:ring-4 focus-visible:ring-[var(--brick)]/30">
+              <img src="https://images.unsplash.com/photo-1548883354-94bcfe321cbb?auto=format&fit=crop&w=800&q=80" alt="Hood Core crema" class="h-48 w-full rounded-xl object-cover" loading="lazy" />
+              <h3 class="mt-3 text-sm font-bold sm:text-base">Hood Core</h3>
+              <p class="text-xs text-black/65 sm:text-sm">Camisas · S a XL</p>
+              <p class="mt-1 text-sm font-semibold">$79.00</p>
+            </a>
+          </article>
+
+          <article class="card-lift rounded-2xl border border-black/10 bg-white p-3">
+            <a href="producto.html#mono-white" class="block rounded-xl focus:outline-none focus-visible:ring-4 focus-visible:ring-[var(--brick)]/30">
+              <img src="https://images.unsplash.com/photo-1473966968600-fa801b869a1a?auto=format&fit=crop&w=800&q=80" alt="Mono White blanco" class="h-48 w-full rounded-xl object-cover" loading="lazy" />
+              <h3 class="mt-3 text-sm font-bold sm:text-base">Mono White</h3>
+              <p class="text-xs text-black/65 sm:text-sm">Calzado · Tallas 39-44</p>
+              <p class="mt-1 text-sm font-semibold">$115.00</p>
+            </a>
+          </article>
+
+          <article class="card-lift rounded-2xl border border-black/10 bg-white p-3">
+            <a href="producto.html#straight-graphite" class="block rounded-xl focus:outline-none focus-visible:ring-4 focus-visible:ring-[var(--brick)]/30">
+              <img src="https://images.unsplash.com/photo-1460353581641-37baddab0fa2?auto=format&fit=crop&w=800&q=80" alt="Straight Graphite" class="h-48 w-full rounded-xl object-cover" loading="lazy" />
+              <h3 class="mt-3 text-sm font-bold sm:text-base">Straight Graphite</h3>
+              <p class="text-xs text-black/65 sm:text-sm">Pantalones · 30 a 38</p>
+              <p class="mt-1 text-sm font-semibold">$84.00</p>
+            </a>
+          </article>
+
+          <article class="card-lift rounded-2xl border border-black/10 bg-white p-3">
+            <a href="producto.html#crossline-bag" class="block rounded-xl focus:outline-none focus-visible:ring-4 focus-visible:ring-[var(--brick)]/30">
+              <img src="https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?auto=format&fit=crop&w=800&q=80" alt="Crossline Bag negra" class="h-48 w-full rounded-xl object-cover" loading="lazy" />
+              <h3 class="mt-3 text-sm font-bold sm:text-base">Crossline Bag</h3>
+              <p class="text-xs text-black/65 sm:text-sm">Accesorios · Talla unica</p>
+              <p class="mt-1 text-sm font-semibold">$54.00</p>
+            </a>
+          </article>
+
+          <article class="card-lift rounded-2xl border border-black/10 bg-white p-3">
+            <a href="producto.html#linen-sand" class="block rounded-xl focus:outline-none focus-visible:ring-4 focus-visible:ring-[var(--brick)]/30">
+              <img src="https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=800&q=80" alt="Linen Sand" class="h-48 w-full rounded-xl object-cover" loading="lazy" />
+              <h3 class="mt-3 text-sm font-bold sm:text-base">Linen Sand</h3>
+              <p class="text-xs text-black/65 sm:text-sm">Camisas · S a XL</p>
+              <p class="mt-1 text-sm font-semibold">$68.00</p>
+            </a>
+          </article>
+
+          <article class="card-lift rounded-2xl border border-black/10 bg-white p-3">
+            <a href="producto.html#trail-dust" class="block rounded-xl focus:outline-none focus-visible:ring-4 focus-visible:ring-[var(--brick)]/30">
+              <img src="https://images.unsplash.com/photo-1514996937319-344454492b37?auto=format&fit=crop&w=800&q=80" alt="Trail Dust botas" class="h-48 w-full rounded-xl object-cover" loading="lazy" />
+              <h3 class="mt-3 text-sm font-bold sm:text-base">Trail Dust</h3>
+              <p class="text-xs text-black/65 sm:text-sm">Calzado · Tallas 39-44</p>
+              <p class="mt-1 text-sm font-semibold">$139.00</p>
+            </a>
+          </article>
+
+          <article class="card-lift rounded-2xl border border-black/10 bg-white p-3">
+            <a href="producto.html#urban-chino" class="block rounded-xl focus:outline-none focus-visible:ring-4 focus-visible:ring-[var(--brick)]/30">
+              <img src="https://images.unsplash.com/photo-1503341504253-dff4815485f1?auto=format&fit=crop&w=800&q=80" alt="Urban Chino beige" class="h-48 w-full rounded-xl object-cover" loading="lazy" />
+              <h3 class="mt-3 text-sm font-bold sm:text-base">Urban Chino</h3>
+              <p class="text-xs text-black/65 sm:text-sm">Pantalones · 30 a 38</p>
+              <p class="mt-1 text-sm font-semibold">$76.00</p>
+            </a>
+          </article>
+
+          <article class="card-lift rounded-2xl border border-black/10 bg-white p-3">
+            <a href="producto.html#blazer-motion" class="block rounded-xl focus:outline-none focus-visible:ring-4 focus-visible:ring-[var(--brick)]/30">
+              <img src="https://images.unsplash.com/photo-1560243563-062bfc001d68?auto=format&fit=crop&w=800&q=80" alt="Blazer Motion azul" class="h-48 w-full rounded-xl object-cover" loading="lazy" />
+              <h3 class="mt-3 text-sm font-bold sm:text-base">Blazer Motion</h3>
+              <p class="text-xs text-black/65 sm:text-sm">Camisas · S a XL</p>
+              <p class="mt-1 text-sm font-semibold">$159.00</p>
+            </a>
+          </article>
+
+          <article class="card-lift rounded-2xl border border-black/10 bg-white p-3">
+            <a href="producto.html#belt-terra" class="block rounded-xl focus:outline-none focus-visible:ring-4 focus-visible:ring-[var(--brick)]/30">
+              <img src="https://images.pexels.com/photos/45055/pexels-photo-45055.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="Belt Terra marron" class="h-48 w-full rounded-xl object-cover" loading="lazy" />
+              <h3 class="mt-3 text-sm font-bold sm:text-base">Belt Terra</h3>
+              <p class="text-xs text-black/65 sm:text-sm">Accesorios · Talla unica</p>
+              <p class="mt-1 text-sm font-semibold">$42.00</p>
+            </a>
+          </article>
+
+          <article class="card-lift rounded-2xl border border-black/10 bg-white p-3">
+            <a href="producto.html#pulse-runner" class="block rounded-xl focus:outline-none focus-visible:ring-4 focus-visible:ring-[var(--brick)]/30">
+              <img src="https://images.unsplash.com/photo-1491553895911-0055eca6402d?auto=format&fit=crop&w=800&q=80" alt="Pulse Runner negras" class="h-48 w-full rounded-xl object-cover" loading="lazy" />
+              <h3 class="mt-3 text-sm font-bold sm:text-base">Pulse Runner</h3>
+              <p class="text-xs text-black/65 sm:text-sm">Calzado · Tallas 39-44</p>
+              <p class="mt-1 text-sm font-semibold">$119.00</p>
+            </a>
+          </article>
+
+          <article class="card-lift rounded-2xl border border-black/10 bg-white p-3">
+            <a href="producto.html#transit-bomber" class="block rounded-xl focus:outline-none focus-visible:ring-4 focus-visible:ring-[var(--brick)]/30">
+              <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?auto=format&fit=crop&w=800&q=80" alt="Transit Bomber grafito" class="h-48 w-full rounded-xl object-cover" loading="lazy" />
+              <h3 class="mt-3 text-sm font-bold sm:text-base">Transit Bomber</h3>
+              <p class="text-xs text-black/65 sm:text-sm">Camisas · S a XL</p>
+              <p class="mt-1 text-sm font-semibold">$152.00</p>
+            </a>
+          </article>
+
+          <article class="card-lift rounded-2xl border border-black/10 bg-white p-3">
+            <a href="producto.html#office-pleat" class="block rounded-xl focus:outline-none focus-visible:ring-4 focus-visible:ring-[var(--brick)]/30">
+              <img src="https://images.unsplash.com/photo-1512436991641-6745cdb1723f?auto=format&fit=crop&w=800&q=80" alt="Office Pleat negro" class="h-48 w-full rounded-xl object-cover" loading="lazy" />
+              <h3 class="mt-3 text-sm font-bold sm:text-base">Office Pleat</h3>
+              <p class="text-xs text-black/65 sm:text-sm">Pantalones · 30 a 38</p>
+              <p class="mt-1 text-sm font-semibold">$82.00</p>
+            </a>
+          </article>
+
+          <article class="card-lift rounded-2xl border border-black/10 bg-white p-3">
+            <a href="producto.html#classic-tote" class="block rounded-xl focus:outline-none focus-visible:ring-4 focus-visible:ring-[var(--brick)]/30">
+              <img src="https://images.unsplash.com/photo-1584917865442-de89df76afd3?auto=format&fit=crop&w=800&q=80" alt="Classic Tote cuero" class="h-48 w-full rounded-xl object-cover" loading="lazy" />
+              <h3 class="mt-3 text-sm font-bold sm:text-base">Classic Tote</h3>
+              <p class="text-xs text-black/65 sm:text-sm">Accesorios · Talla unica</p>
+              <p class="mt-1 text-sm font-semibold">$88.00</p>
+            </a>
+          </article>
+
+          <article class="card-lift rounded-2xl border border-black/10 bg-white p-3">
+            <a href="producto.html#cloud-step" class="block rounded-xl focus:outline-none focus-visible:ring-4 focus-visible:ring-[var(--brick)]/30">
+              <img src="https://images.unsplash.com/photo-1511556532299-8f662fc26c06?auto=format&fit=crop&w=800&q=80" alt="Cloud Step blancas" class="h-48 w-full rounded-xl object-cover" loading="lazy" />
+              <h3 class="mt-3 text-sm font-bold sm:text-base">Cloud Step</h3>
+              <p class="text-xs text-black/65 sm:text-sm">Calzado · Tallas 39-44</p>
+              <p class="mt-1 text-sm font-semibold">$124.00</p>
+            </a>
+          </article>
+
+          <article class="card-lift rounded-2xl border border-black/10 bg-white p-3">
+            <a href="producto.html#daily-layer" class="block rounded-xl focus:outline-none focus-visible:ring-4 focus-visible:ring-[var(--brick)]/30">
+              <img src="https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?auto=format&fit=crop&w=800&q=80" alt="Daily Layer crudo" class="h-48 w-full rounded-xl object-cover" loading="lazy" />
+              <h3 class="mt-3 text-sm font-bold sm:text-base">Daily Layer</h3>
+              <p class="text-xs text-black/65 sm:text-sm">Camisas · S a XL</p>
+              <p class="mt-1 text-sm font-semibold">$74.00</p>
+            </a>
+          </article>
+        </div>
+      </section>
+    </main>
+
+    <footer class="border-t border-black/10 bg-[#17120f] text-white">
+      <div class="mx-auto grid max-w-7xl gap-10 px-4 py-12 sm:px-6 md:grid-cols-2 lg:grid-cols-4 lg:px-8">
+        <section aria-labelledby="footer-brand">
+          <h2 id="footer-brand" class="brand-font text-xl font-extrabold">ARCA Studio</h2>
+          <p class="mt-3 text-sm text-white/75">
+            Moda esencial con foco en silueta, textura y durabilidad para uso diario.
+          </p>
+        </section>
+
+        <nav aria-labelledby="footer-categorias">
+          <h2 id="footer-categorias" class="text-sm font-semibold uppercase tracking-wide text-white/85">Categorias</h2>
+          <ul class="mt-4 space-y-2 text-sm text-white/80">
+            <li><a href="#" class="hover:text-white">Calzado</a></li>
+            <li><a href="#" class="hover:text-white">Camisas</a></li>
+            <li><a href="#" class="hover:text-white">Pantalones</a></li>
+            <li><a href="#" class="hover:text-white">Accesorios</a></li>
+          </ul>
+        </nav>
+
+        <nav aria-labelledby="footer-legal">
+          <h2 id="footer-legal" class="text-sm font-semibold uppercase tracking-wide text-white/85">Legal</h2>
+          <ul class="mt-4 space-y-2 text-sm text-white/80">
+            <li><a href="#" class="hover:text-white">Terminos y condiciones</a></li>
+            <li><a href="#" class="hover:text-white">Politica de privacidad</a></li>
+            <li><a href="#" class="hover:text-white">Sobre la marca</a></li>
+          </ul>
+        </nav>
+
+        <section aria-labelledby="footer-contacto">
+          <h2 id="footer-contacto" class="text-sm font-semibold uppercase tracking-wide text-white/85">Contacto</h2>
+          <ul class="mt-4 space-y-2 text-sm text-white/80">
+            <li>soporte@arcastudio.com</li>
+            <li>+34 900 000 123</li>
+            <li>Calle Gran Via 100, Madrid</li>
+            <li>Lun - Vie: 9:00 a 18:00</li>
+          </ul>
+        </section>
+      </div>
+    </footer>
+
+  </body>
+</html>
diff --git a/checkout.html b/checkout.html
new file mode 100644
index 00000000..f98fd6d1
--- /dev/null
+++ b/checkout.html
@@ -0,0 +1,277 @@
+<!doctype html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Checkout | ARCA Studio</title>
+    <meta
+      name="description"
+      content="Completa tu compra en ARCA Studio con un formulario de pago en 3 pasos: datos personales, direccion de entrega y pago con tarjeta."
+    />
+    <meta
+      name="keywords"
+      content="checkout, formulario de pago, datos personales, direccion de entrega, pago con tarjeta"
+    />
+    <meta name="robots" content="index, follow" />
+    <meta name="author" content="ARCA Studio" />
+    <meta property="og:title" content="Checkout | ARCA Studio" />
+    <meta
+      property="og:description"
+      content="Finaliza tu compra en 3 pasos con una experiencia clara y responsive."
+    />
+    <meta property="og:type" content="website" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Syne:wght@600;700;800&display=swap"
+      rel="stylesheet"
+    />
+
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+
+    <style>
+      :root {
+        --sand: #f7f2eb;
+        --ink: #111111;
+        --brick: #c85a3f;
+        --forest: #2f5a45;
+      }
+
+      body {
+        font-family: "Space Grotesk", sans-serif;
+        background: radial-gradient(circle at 85% 0%, #f3e3d6 0%, #f7f2eb 42%, #efe7dd 100%);
+        color: var(--ink);
+      }
+
+      h1,
+      h2,
+      h3,
+      .brand-font {
+        font-family: "Syne", sans-serif;
+      }
+    </style>
+
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "CheckoutPage",
+        "name": "Checkout ARCA Studio",
+        "description": "Flujo de pago en 3 pasos: datos personales, direccion y tarjeta.",
+        "url": "checkout.html"
+      }
+    </script>
+  </head>
+
+  <body class="min-h-screen antialiased">
+    <a
+      href="#contenido-principal"
+      class="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-50 focus:rounded-md focus:bg-black focus:px-4 focus:py-2 focus:text-white"
+      >Saltar al contenido principal</a
+    >
+
+    <header class="sticky top-0 z-40 border-b border-black/10 bg-[#f7f2eb]/95 backdrop-blur">
+      <div
+        class="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-3 px-4 py-3 sm:px-6 lg:grid lg:grid-cols-[auto_1fr_auto] lg:gap-8"
+      >
+        <a href="index.html" class="brand-font text-2xl font-extrabold tracking-tight text-[var(--ink)]"
+          >ARCA<span class="text-[var(--brick)]">Studio</span></a
+        >
+
+        <form class="order-3 w-full lg:order-none" role="search" aria-label="Buscar productos">
+          <label for="search" class="sr-only">Buscar</label>
+          <div class="relative">
+            <input
+              id="search"
+              name="search"
+              type="search"
+              placeholder="Buscar productos, colecciones o categoria"
+              class="w-full rounded-full border border-black/20 bg-white px-5 py-3 text-sm shadow-sm outline-none ring-[var(--brick)]/30 transition focus:ring-4"
+            />
+            <button
+              type="submit"
+              class="absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-[var(--ink)] px-4 py-2 text-xs font-semibold text-white"
+            >
+              Buscar
+            </button>
+          </div>
+        </form>
+
+        <nav aria-label="Cuenta de usuario y navegacion">
+          <ul class="flex items-center gap-2 sm:gap-3">
+            <li>
+              <a
+                href="index.html"
+                class="rounded-full border border-black/20 px-4 py-2 text-sm font-medium transition hover:border-[var(--brick)] hover:text-[var(--brick)]"
+                >Home</a
+              >
+            </li>
+            <li>
+              <a
+                href="catalogo.html"
+                class="rounded-full border border-black/20 px-4 py-2 text-sm font-medium transition hover:border-[var(--brick)] hover:text-[var(--brick)]"
+                >Catalogo</a
+              >
+            </li>
+            <li>
+              <a
+                href="carrito.html"
+                class="rounded-full bg-[var(--forest)] px-4 py-2 text-sm font-semibold text-white transition hover:brightness-110"
+                >Mi carrito</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+
+    <main id="contenido-principal" class="mx-auto max-w-7xl px-4 pb-16 pt-8 sm:px-6 lg:px-8 lg:pt-10">
+      <section class="mb-8 rounded-3xl border border-black/10 bg-white/60 p-6 sm:p-8" aria-labelledby="checkout-titulo">
+        <p class="text-xs font-semibold uppercase tracking-wide text-[var(--brick)]">Finalizar compra</p>
+        <h1 id="checkout-titulo" class="mt-2 text-3xl font-extrabold sm:text-4xl">Checkout</h1>
+        <p class="mt-3 max-w-3xl text-sm text-black/70 sm:text-base">
+          Completa el formulario en 3 pasos para confirmar tu pedido de forma segura.
+        </p>
+      </section>
+
+      <section class="mb-6 grid gap-3 rounded-2xl border border-black/10 bg-white p-4 sm:grid-cols-3" aria-label="Pasos de checkout">
+        <div class="rounded-xl border border-black/15 bg-black/[0.03] p-3">
+          <p class="text-xs font-semibold uppercase tracking-wide text-[var(--brick)]">Paso 1</p>
+          <p class="mt-1 text-sm font-bold">Datos personales</p>
+        </div>
+        <div class="rounded-xl border border-black/15 bg-black/[0.03] p-3">
+          <p class="text-xs font-semibold uppercase tracking-wide text-[var(--brick)]">Paso 2</p>
+          <p class="mt-1 text-sm font-bold">Direccion de entrega</p>
+        </div>
+        <div class="rounded-xl border border-black/15 bg-black/[0.03] p-3">
+          <p class="text-xs font-semibold uppercase tracking-wide text-[var(--brick)]">Paso 3</p>
+          <p class="mt-1 text-sm font-bold">Pago con tarjeta</p>
+        </div>
+      </section>
+
+      <form class="space-y-6" action="#" method="post">
+        <fieldset class="rounded-3xl border border-black/10 bg-white p-5 sm:p-6">
+          <legend class="px-2 text-lg font-bold">1. Datos personales</legend>
+          <div class="mt-3 grid gap-4 sm:grid-cols-2">
+            <div>
+              <label for="nombre" class="mb-1 block text-sm font-medium">Nombre</label>
+              <input id="nombre" name="nombre" type="text" required class="w-full rounded-xl border border-black/20 bg-white px-4 py-3 text-sm outline-none ring-[var(--brick)]/30 focus:ring-4" />
+            </div>
+            <div>
+              <label for="apellido" class="mb-1 block text-sm font-medium">Apellido</label>
+              <input id="apellido" name="apellido" type="text" required class="w-full rounded-xl border border-black/20 bg-white px-4 py-3 text-sm outline-none ring-[var(--brick)]/30 focus:ring-4" />
+            </div>
+            <div>
+              <label for="email" class="mb-1 block text-sm font-medium">Correo electronico</label>
+              <input id="email" name="email" type="email" required class="w-full rounded-xl border border-black/20 bg-white px-4 py-3 text-sm outline-none ring-[var(--brick)]/30 focus:ring-4" />
+            </div>
+            <div>
+              <label for="telefono" class="mb-1 block text-sm font-medium">Telefono</label>
+              <input id="telefono" name="telefono" type="tel" required class="w-full rounded-xl border border-black/20 bg-white px-4 py-3 text-sm outline-none ring-[var(--brick)]/30 focus:ring-4" />
+            </div>
+          </div>
+        </fieldset>
+
+        <fieldset class="rounded-3xl border border-black/10 bg-white p-5 sm:p-6">
+          <legend class="px-2 text-lg font-bold">2. Direccion de entrega</legend>
+          <div class="mt-3 grid gap-4 sm:grid-cols-2">
+            <div class="sm:col-span-2">
+              <label for="direccion" class="mb-1 block text-sm font-medium">Direccion</label>
+              <input id="direccion" name="direccion" type="text" required class="w-full rounded-xl border border-black/20 bg-white px-4 py-3 text-sm outline-none ring-[var(--brick)]/30 focus:ring-4" />
+            </div>
+            <div>
+              <label for="ciudad" class="mb-1 block text-sm font-medium">Ciudad</label>
+              <input id="ciudad" name="ciudad" type="text" required class="w-full rounded-xl border border-black/20 bg-white px-4 py-3 text-sm outline-none ring-[var(--brick)]/30 focus:ring-4" />
+            </div>
+            <div>
+              <label for="codigo-postal" class="mb-1 block text-sm font-medium">Codigo postal</label>
+              <input id="codigo-postal" name="codigo-postal" type="text" required class="w-full rounded-xl border border-black/20 bg-white px-4 py-3 text-sm outline-none ring-[var(--brick)]/30 focus:ring-4" />
+            </div>
+            <div>
+              <label for="pais" class="mb-1 block text-sm font-medium">Pais</label>
+              <input id="pais" name="pais" type="text" required class="w-full rounded-xl border border-black/20 bg-white px-4 py-3 text-sm outline-none ring-[var(--brick)]/30 focus:ring-4" />
+            </div>
+            <div>
+              <label for="provincia" class="mb-1 block text-sm font-medium">Provincia / Estado</label>
+              <input id="provincia" name="provincia" type="text" required class="w-full rounded-xl border border-black/20 bg-white px-4 py-3 text-sm outline-none ring-[var(--brick)]/30 focus:ring-4" />
+            </div>
+          </div>
+        </fieldset>
+
+        <fieldset class="rounded-3xl border border-black/10 bg-white p-5 sm:p-6">
+          <legend class="px-2 text-lg font-bold">3. Pago con tarjeta</legend>
+          <div class="mt-3 grid gap-4 sm:grid-cols-2">
+            <div class="sm:col-span-2">
+              <label for="tarjeta" class="mb-1 block text-sm font-medium">Numero de tarjeta</label>
+              <input id="tarjeta" name="tarjeta" type="text" inputmode="numeric" placeholder="1234 5678 9012 3456" required class="w-full rounded-xl border border-black/20 bg-white px-4 py-3 text-sm outline-none ring-[var(--brick)]/30 focus:ring-4" />
+            </div>
+            <div>
+              <label for="titular" class="mb-1 block text-sm font-medium">Nombre del titular</label>
+              <input id="titular" name="titular" type="text" required class="w-full rounded-xl border border-black/20 bg-white px-4 py-3 text-sm outline-none ring-[var(--brick)]/30 focus:ring-4" />
+            </div>
+            <div>
+              <label for="cvv" class="mb-1 block text-sm font-medium">CVV</label>
+              <input id="cvv" name="cvv" type="password" inputmode="numeric" required class="w-full rounded-xl border border-black/20 bg-white px-4 py-3 text-sm outline-none ring-[var(--brick)]/30 focus:ring-4" />
+            </div>
+            <div>
+              <label for="exp" class="mb-1 block text-sm font-medium">Fecha de vencimiento</label>
+              <input id="exp" name="exp" type="text" placeholder="MM/AA" required class="w-full rounded-xl border border-black/20 bg-white px-4 py-3 text-sm outline-none ring-[var(--brick)]/30 focus:ring-4" />
+            </div>
+          </div>
+        </fieldset>
+
+        <div class="flex flex-wrap items-center gap-3">
+          <button
+            type="submit"
+            class="rounded-xl bg-[var(--ink)] px-6 py-3 text-sm font-semibold text-white transition hover:bg-black"
+          >
+            Confirmar compra
+          </button>
+          <a href="carrito.html" class="rounded-xl border border-black/20 bg-white px-6 py-3 text-sm font-semibold transition hover:border-black">
+            Volver al carrito
+          </a>
+        </div>
+      </form>
+    </main>
+
+    <footer class="border-t border-black/10 bg-[#17120f] text-white">
+      <div class="mx-auto grid max-w-7xl gap-10 px-4 py-12 sm:px-6 md:grid-cols-2 lg:grid-cols-4 lg:px-8">
+        <section aria-labelledby="footer-brand">
+          <h2 id="footer-brand" class="brand-font text-xl font-extrabold">ARCA Studio</h2>
+          <p class="mt-3 text-sm text-white/75">
+            Moda esencial con foco en silueta, textura y durabilidad para uso diario.
+          </p>
+        </section>
+
+        <nav aria-labelledby="footer-categorias">
+          <h2 id="footer-categorias" class="text-sm font-semibold uppercase tracking-wide text-white/85">Categorias</h2>
+          <ul class="mt-4 space-y-2 text-sm text-white/80">
+            <li><a href="#" class="hover:text-white">Calzado</a></li>
+            <li><a href="#" class="hover:text-white">Camisas</a></li>
+            <li><a href="#" class="hover:text-white">Pantalones</a></li>
+            <li><a href="#" class="hover:text-white">Accesorios</a></li>
+          </ul>
+        </nav>
+
+        <nav aria-labelledby="footer-legal">
+          <h2 id="footer-legal" class="text-sm font-semibold uppercase tracking-wide text-white/85">Legal</h2>
+          <ul class="mt-4 space-y-2 text-sm text-white/80">
+            <li><a href="#" class="hover:text-white">Terminos y condiciones</a></li>
+            <li><a href="#" class="hover:text-white">Politica de privacidad</a></li>
+            <li><a href="#" class="hover:text-white">Sobre la marca</a></li>
+          </ul>
+        </nav>
+
+        <section aria-labelledby="footer-contacto">
+          <h2 id="footer-contacto" class="text-sm font-semibold uppercase tracking-wide text-white/85">Contacto</h2>
+          <ul class="mt-4 space-y-2 text-sm text-white/80">
+            <li>soporte@arcastudio.com</li>
+            <li>+34 900 000 123</li>
+            <li>Calle Gran Via 100, Madrid</li>
+            <li>Lun - Vie: 9:00 a 18:00</li>
+          </ul>
+        </section>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..25681454
--- /dev/null
+++ b/index.html
@@ -0,0 +1,389 @@
+<!doctype html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ARCA Studio | Tienda Oficial de Ropa</title>
+    <meta
+      name="description"
+      content="Descubre nuevos lanzamientos y mas vendidos de ARCA Studio. Compra ropa, calzado y accesorios con una experiencia moderna y responsive."
+    />
+    <meta
+      name="keywords"
+      content="tienda online ropa, moda, calzado, camisas, pantalones, accesorios, nuevos lanzamientos"
+    />
+    <meta name="robots" content="index, follow" />
+    <meta name="author" content="ARCA Studio" />
+    <meta property="og:title" content="ARCA Studio | Tienda Oficial de Ropa" />
+    <meta
+      property="og:description"
+      content="Campanas destacadas, nuevos lanzamientos y mas vendidos en una tienda online moderna."
+    />
+    <meta property="og:type" content="website" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Syne:wght@600;700;800&display=swap"
+      rel="stylesheet"
+    />
+
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+
+    <style>
+      :root {
+        --sand: #f7f2eb;
+        --ink: #111111;
+        --brick: #c85a3f;
+        --forest: #2f5a45;
+        --coffee: #5b4534;
+      }
+
+      body {
+        font-family: "Space Grotesk", sans-serif;
+        background: radial-gradient(circle at 85% 0%, #f3e3d6 0%, #f7f2eb 42%, #efe7dd 100%);
+        color: var(--ink);
+      }
+
+      h1,
+      h2,
+      h3,
+      .brand-font {
+        font-family: "Syne", sans-serif;
+      }
+
+      .hero-glow {
+        background: linear-gradient(130deg, rgba(200, 90, 63, 0.14), rgba(47, 90, 69, 0.12));
+      }
+
+      .card-lift {
+        transition: transform 220ms ease, box-shadow 220ms ease;
+      }
+
+      .card-lift:hover {
+        transform: translateY(-6px);
+        box-shadow: 0 18px 45px rgba(17, 17, 17, 0.12);
+      }
+
+      .fade-up {
+        animation: fadeUp 520ms ease both;
+      }
+
+      @keyframes fadeUp {
+        from {
+          opacity: 0;
+          transform: translateY(12px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+    </style>
+
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "Organization",
+        "name": "ARCA Studio",
+        "url": "https://example.com",
+        "description": "Marca de ropa con colecciones urbanas y esenciales premium.",
+        "contactPoint": {
+          "@type": "ContactPoint",
+          "contactType": "customer service",
+          "email": "soporte@arcastudio.com"
+        }
+      }
+    </script>
+  </head>
+
+  <body class="min-h-screen antialiased">
+    <a
+      href="#contenido-principal"
+      class="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-50 focus:rounded-md focus:bg-black focus:px-4 focus:py-2 focus:text-white"
+      >Saltar al contenido principal</a
+    >
+
+    <header class="sticky top-0 z-40 border-b border-black/10 bg-[#f7f2eb]/95 backdrop-blur">
+      <div
+        class="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-3 px-4 py-3 sm:px-6 lg:grid lg:grid-cols-[auto_1fr_auto] lg:gap-8"
+      >
+        <a href="index.html" class="brand-font text-2xl font-extrabold tracking-tight text-[var(--ink)]"
+          >ARCA<span class="text-[var(--brick)]">Studio</span></a
+        >
+
+        <form class="order-3 w-full lg:order-none" role="search" aria-label="Buscar productos">
+          <label for="search" class="sr-only">Buscar</label>
+          <div class="relative">
+            <input
+              id="search"
+              name="search"
+              type="search"
+              placeholder="Buscar productos, colecciones o categoria"
+              class="w-full rounded-full border border-black/20 bg-white px-5 py-3 text-sm shadow-sm outline-none ring-[var(--brick)]/30 transition focus:ring-4"
+            />
+            <button
+              type="submit"
+              class="absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-[var(--ink)] px-4 py-2 text-xs font-semibold text-white"
+            >
+              Buscar
+            </button>
+          </div>
+        </form>
+
+        <nav aria-label="Cuenta de usuario y navegacion">
+          <ul class="flex items-center gap-2 sm:gap-3">
+            <li>
+              <a
+                href="index.html"
+                class="rounded-full border border-black/20 bg-black/5 px-4 py-2 text-sm font-semibold"
+                aria-current="page"
+                >Home</a
+              >
+            </li>
+            <li>
+              <a
+                href="catalogo.html"
+                class="rounded-full border border-black/20 px-4 py-2 text-sm font-medium transition hover:border-[var(--brick)] hover:text-[var(--brick)]"
+                >Catalogo</a
+              >
+            </li>
+            <li>
+              <a
+                href="#"
+                class="rounded-full border border-black/20 px-4 py-2 text-sm font-medium transition hover:border-[var(--brick)] hover:text-[var(--brick)]"
+                >Ingresar</a
+              >
+            </li>
+            <li>
+              <a
+                href="#"
+                class="rounded-full bg-[var(--forest)] px-4 py-2 text-sm font-semibold text-white transition hover:brightness-110"
+                >Mi cuenta</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+
+    <main id="contenido-principal" class="mx-auto max-w-7xl px-4 pb-16 pt-8 sm:px-6 lg:px-8 lg:pt-10">
+      <section
+        class="hero-glow fade-up grid overflow-hidden rounded-3xl border border-black/10 bg-white/60 md:grid-cols-2"
+        aria-labelledby="hero-title"
+      >
+        <div class="p-6 sm:p-10 lg:p-12">
+          <p class="mb-3 inline-block rounded-full bg-[var(--ink)] px-3 py-1 text-xs font-semibold uppercase tracking-wide text-white">
+            Campana Invierno Urbano
+          </p>
+          <h1 id="hero-title" class="text-3xl font-extrabold leading-tight sm:text-4xl lg:text-5xl">
+            Ropa de alto impacto para ritmo diario
+          </h1>
+          <p class="mt-4 max-w-xl text-sm text-black/70 sm:text-base">
+            Descubre piezas construidas para ciudad, trabajo y escapadas de fin de semana. Siluetas limpias,
+            materiales premium y colorimetrias atemporales.
+          </p>
+          <div class="mt-7 flex flex-wrap items-center gap-3">
+            <a
+              href="#nuevos-lanzamientos"
+              class="rounded-full bg-[var(--brick)] px-6 py-3 text-sm font-semibold text-white transition hover:brightness-110"
+              >Explorar lanzamientos</a
+            >
+            <a
+              href="#mas-vendidos"
+              class="rounded-full border border-black/20 bg-white px-6 py-3 text-sm font-semibold transition hover:border-[var(--ink)]"
+              >Ver mas vendidos</a
+            >
+          </div>
+        </div>
+
+        <div class="relative min-h-[280px] md:min-h-full">
+          <img
+            src="https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?auto=format&fit=crop&w=1200&q=80"
+            alt="Modelo vistiendo una chaqueta urbana en un estudio"
+            class="h-full w-full object-cover"
+            loading="eager"
+          />
+        </div>
+      </section>
+
+      <section id="nuevos-lanzamientos" class="mt-12" aria-labelledby="nuevos-title">
+        <div class="mb-5 flex items-end justify-between gap-4">
+          <h2 id="nuevos-title" class="text-2xl font-extrabold sm:text-3xl">Nuevos lanzamientos</h2>
+          <a href="#" class="text-sm font-semibold text-[var(--brick)]">Ver todo</a>
+        </div>
+
+        <div class="-mx-1 flex snap-x gap-4 overflow-x-auto px-1 pb-3">
+          <article class="card-lift min-w-[230px] snap-start rounded-2xl border border-black/10 bg-white p-3 sm:min-w-[250px]">
+            <img
+              src="https://images.unsplash.com/photo-1523381210434-271e8be1f52b?auto=format&fit=crop&w=600&q=80"
+              alt="Camisa overshirt color tierra"
+              class="h-56 w-full rounded-xl object-cover"
+              loading="lazy"
+            />
+            <h3 class="mt-3 text-base font-bold">Overshirt Terra</h3>
+            <p class="text-sm text-black/65">Camisas</p>
+            <p class="mt-2 text-sm font-semibold">$89.90</p>
+          </article>
+
+          <article class="card-lift min-w-[230px] snap-start rounded-2xl border border-black/10 bg-white p-3 sm:min-w-[250px]">
+            <img
+              src="https://images.unsplash.com/photo-1529139574466-a303027c1d8b?auto=format&fit=crop&w=600&q=80"
+              alt="Pantalon cargo premium en color oliva"
+              class="h-56 w-full rounded-xl object-cover"
+              loading="lazy"
+            />
+            <h3 class="mt-3 text-base font-bold">Cargo Atlas</h3>
+            <p class="text-sm text-black/65">Pantalones</p>
+            <p class="mt-2 text-sm font-semibold">$99.00</p>
+          </article>
+
+          <article class="card-lift min-w-[230px] snap-start rounded-2xl border border-black/10 bg-white p-3 sm:min-w-[250px]">
+            <img
+              src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=600&q=80"
+              alt="Zapatillas deportivas modernas en color rojo"
+              class="h-56 w-full rounded-xl object-cover"
+              loading="lazy"
+            />
+            <h3 class="mt-3 text-base font-bold">Runner Nova</h3>
+            <p class="text-sm text-black/65">Calzado</p>
+            <p class="mt-2 text-sm font-semibold">$129.00</p>
+          </article>
+
+          <article class="card-lift min-w-[230px] snap-start rounded-2xl border border-black/10 bg-white p-3 sm:min-w-[250px]">
+            <img
+              src="https://images.pexels.com/photos/1124465/pexels-photo-1124465.jpeg?auto=compress&cs=tinysrgb&w=1200"
+              alt="Gorra urbana color beige"
+              class="h-56 w-full rounded-xl object-cover"
+              loading="lazy"
+            />
+            <h3 class="mt-3 text-base font-bold">Cap Stride</h3>
+            <p class="text-sm text-black/65">Accesorios</p>
+            <p class="mt-2 text-sm font-semibold">$34.00</p>
+          </article>
+
+          <article class="card-lift min-w-[230px] snap-start rounded-2xl border border-black/10 bg-white p-3 sm:min-w-[250px]">
+            <img
+              src="https://images.unsplash.com/photo-1521223890158-f9f7c3d5d504?auto=format&fit=crop&w=600&q=80"
+              alt="Chaqueta tecnica negra"
+              class="h-56 w-full rounded-xl object-cover"
+              loading="lazy"
+            />
+            <h3 class="mt-3 text-base font-bold">Shell Night</h3>
+            <p class="text-sm text-black/65">Camisas</p>
+            <p class="mt-2 text-sm font-semibold">$149.00</p>
+          </article>
+        </div>
+      </section>
+
+      <section id="mas-vendidos" class="mt-12" aria-labelledby="vendidos-title">
+        <div class="mb-5 flex items-end justify-between gap-4">
+          <h2 id="vendidos-title" class="text-2xl font-extrabold sm:text-3xl">Mas vendidos</h2>
+          <a href="#" class="text-sm font-semibold text-[var(--brick)]">Ver todo</a>
+        </div>
+
+        <div class="-mx-1 flex snap-x gap-4 overflow-x-auto px-1 pb-3">
+          <article class="card-lift min-w-[230px] snap-start rounded-2xl border border-black/10 bg-white p-3 sm:min-w-[250px]">
+            <img
+              src="https://images.unsplash.com/photo-1548883354-94bcfe321cbb?auto=format&fit=crop&w=600&q=80"
+              alt="Sudadera con capucha color crema"
+              class="h-56 w-full rounded-xl object-cover"
+              loading="lazy"
+            />
+            <h3 class="mt-3 text-base font-bold">Hood Core</h3>
+            <p class="text-sm text-black/65">Camisas</p>
+            <p class="mt-2 text-sm font-semibold">$79.00</p>
+          </article>
+
+          <article class="card-lift min-w-[230px] snap-start rounded-2xl border border-black/10 bg-white p-3 sm:min-w-[250px]">
+            <img
+              src="https://images.unsplash.com/photo-1473966968600-fa801b869a1a?auto=format&fit=crop&w=600&q=80"
+              alt="Tenis blancos minimalistas"
+              class="h-56 w-full rounded-xl object-cover"
+              loading="lazy"
+            />
+            <h3 class="mt-3 text-base font-bold">Mono White</h3>
+            <p class="text-sm text-black/65">Calzado</p>
+            <p class="mt-2 text-sm font-semibold">$115.00</p>
+          </article>
+
+          <article class="card-lift min-w-[230px] snap-start rounded-2xl border border-black/10 bg-white p-3 sm:min-w-[250px]">
+            <img
+              src="https://images.unsplash.com/photo-1460353581641-37baddab0fa2?auto=format&fit=crop&w=600&q=80"
+              alt="Pantalon recto color gris grafito"
+              class="h-56 w-full rounded-xl object-cover"
+              loading="lazy"
+            />
+            <h3 class="mt-3 text-base font-bold">Straight Graphite</h3>
+            <p class="text-sm text-black/65">Pantalones</p>
+            <p class="mt-2 text-sm font-semibold">$84.00</p>
+          </article>
+
+          <article class="card-lift min-w-[230px] snap-start rounded-2xl border border-black/10 bg-white p-3 sm:min-w-[250px]">
+            <img
+              src="https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?auto=format&fit=crop&w=600&q=80"
+              alt="Bolso tipo crossbody negro"
+              class="h-56 w-full rounded-xl object-cover"
+              loading="lazy"
+            />
+            <h3 class="mt-3 text-base font-bold">Crossline Bag</h3>
+            <p class="text-sm text-black/65">Accesorios</p>
+            <p class="mt-2 text-sm font-semibold">$54.00</p>
+          </article>
+
+          <article class="card-lift min-w-[230px] snap-start rounded-2xl border border-black/10 bg-white p-3 sm:min-w-[250px]">
+            <img
+              src="https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=600&q=80"
+              alt="Camisa de lino arena"
+              class="h-56 w-full rounded-xl object-cover"
+              loading="lazy"
+            />
+            <h3 class="mt-3 text-base font-bold">Linen Sand</h3>
+            <p class="text-sm text-black/65">Camisas</p>
+            <p class="mt-2 text-sm font-semibold">$68.00</p>
+          </article>
+        </div>
+      </section>
+    </main>
+
+    <footer class="border-t border-black/10 bg-[#17120f] text-white">
+      <div class="mx-auto grid max-w-7xl gap-10 px-4 py-12 sm:px-6 md:grid-cols-2 lg:grid-cols-4 lg:px-8">
+        <section aria-labelledby="footer-brand">
+          <h2 id="footer-brand" class="brand-font text-xl font-extrabold">ARCA Studio</h2>
+          <p class="mt-3 text-sm text-white/75">
+            Moda esencial con foco en silueta, textura y durabilidad para uso diario.
+          </p>
+        </section>
+
+        <nav aria-labelledby="footer-categorias">
+          <h2 id="footer-categorias" class="text-sm font-semibold uppercase tracking-wide text-white/85">Categorias</h2>
+          <ul class="mt-4 space-y-2 text-sm text-white/80">
+            <li><a href="#" class="hover:text-white">Calzado</a></li>
+            <li><a href="#" class="hover:text-white">Camisas</a></li>
+            <li><a href="#" class="hover:text-white">Pantalones</a></li>
+            <li><a href="#" class="hover:text-white">Accesorios</a></li>
+          </ul>
+        </nav>
+
+        <nav aria-labelledby="footer-legal">
+          <h2 id="footer-legal" class="text-sm font-semibold uppercase tracking-wide text-white/85">Legal</h2>
+          <ul class="mt-4 space-y-2 text-sm text-white/80">
+            <li><a href="#" class="hover:text-white">Terminos y condiciones</a></li>
+            <li><a href="#" class="hover:text-white">Politica de privacidad</a></li>
+            <li><a href="#" class="hover:text-white">Sobre la marca</a></li>
+          </ul>
+        </nav>
+
+        <section aria-labelledby="footer-contacto">
+          <h2 id="footer-contacto" class="text-sm font-semibold uppercase tracking-wide text-white/85">Contacto</h2>
+          <ul class="mt-4 space-y-2 text-sm text-white/80">
+            <li>soporte@arcastudio.com</li>
+            <li>+34 900 000 123</li>
+            <li>Calle Gran Via 100, Madrid</li>
+            <li>Lun - Vie: 9:00 a 18:00</li>
+          </ul>
+        </section>
+      </div>
+    </footer>
+  </body>
+</html>
