Webs que no estorban

                    01 <!-- Portada: la imagen es lo primero que se pinta. -->01 <!-- Portada: la imagen es lo primero que se pinta. -->02 <section class="hero grid gap-6 py-24">02 <section class="hero grid gap-6 py-24">03-  <img src="portada.jpg" class="w-full rounded-xl">03+  <img src="portada.avif" class="w-full rounded-xl"04+       width="1600" height="900" decoding="async"05+       fetchpriority="high" alt="Cocina en Chamberí">04   <h1 class="text-5xl font-semibold tracking-tight">06   <h1 class="text-5xl font-semibold tracking-tight">05     Reformas integrales en Madrid, sin sorpresas07     Reformas integrales en Madrid, sin sorpresas06   </h1>08   </h1>07   <p class="max-w-prose text-lg text-neutral-400">09   <p class="max-w-prose text-lg text-neutral-400">08     Presupuesto cerrado en 48 horas laborables.10     Presupuesto cerrado en 48 horas laborables.09   </p>11   </p>10   <a href="/contacto" class="btn">Pedir presupuesto</a>12   <a href="/contacto" class="btn">Pedir presupuesto</a>11 </section>13 </section>
                  

                    01 .listado { display: grid; gap: 1rem; }01 .listado { display: grid; gap: 1rem; }02 02 03-/* Tres saltos, y ninguno sabe cuánto sitio hay. */03+/* La tarjeta mide su hueco, no la ventana. */04-.tarjeta { padding: 16px; font-size: 18px; }04+.listado { container-type: inline-size; }05-05+06-@media (max-width: 900px) {06+.tarjeta {07-  .tarjeta { padding: 12px; font-size: 16px; }07+  padding: clamp(0.5rem, 2cqi, 1rem);08-}08+  font-size: clamp(0.875rem, 1.6cqi, 1.125rem);09-09+  border-radius: clamp(0.25rem, 1cqi, 0.75rem);10-@media (max-width: 600px) {10+}11-  .tarjeta { padding: 8px; font-size: 14px; }11+12-}12+@container (min-width: 30rem) {13+  .tarjeta { grid-template-columns: 8rem 1fr; }14+}
                  

                    01 export async function cargarListado() {01 export async function cargarListado() {02   const items = await db.producto.findMany({02   const items = await db.producto.findMany({03     where: { activo: true },03     where: { activo: true },04+    // La categoría entra en la misma ida.05+    include: { categoria: true },04   });06   });05 07 06-  // Una consulta, y luego otra por item.07-  for (const item of items) {08-    item.categoria = await db.categoria09-      .findUnique({ id: item.categoriaId });10-  }11 08   return items;12   return items;09 }13 }
                  

                    01-<div class="menu__abrir"01+<button class="menu__abrir"02-     onclick="abrirMenu()">02+        type="button"03+        aria-expanded="false"04+        aria-controls="menu">05+  <span class="sr-only">Abrir el menú</span>03   <span></span>06   <span></span>04   <span></span>07   <span></span>05-</div>08+</button>06 09 07 <nav id="menu" class="menu">10 <nav id="menu" class="menu">08   <a href="/servicios">Servicios</a>11   <a href="/servicios">Servicios</a>09   <a href="/proyectos">Proyectos</a>12   <a href="/proyectos">Proyectos</a>10   <a href="/precios">Precios</a>13   <a href="/precios">Precios</a>11   <a href="/contacto">Contacto</a>14   <a href="/contacto">Contacto</a>12 </nav>15 </nav>
                  

                    01 <form method="post" action="/contacto">01 <form method="post" action="/contacto">02   <label for="email">Correo</label>02   <label for="email">Correo</label>03-  <input id="email" type="email"03+  <input id="email" type="email"04-         name="email">04+         name="email"05+         aria-invalid="true"06+         aria-describedby="email-error">05 07 06-  <span class="error">08+  <span class="error" id="email-error"09+        role="alert">07     Escribe un correo válido10     Escribe un correo válido08   </span>11   </span>09 12 10   <button type="submit">Enviar</button>13   <button type="submit">Enviar</button>11 </form>14 </form>
                  

                    01 <section class="listado">01 <section class="listado">02 <?php foreach ( $productos as $p ) : ?>02 <?php foreach ( $productos as $p ) : ?>03 <article class="tarjeta">03 <article class="tarjeta">04-  <img src="<?php echo $p['imagen']; ?>" alt="">04+  <img src="<?php echo esc_url( $p['imagen'] ); ?>"05-  <h2><?php echo $p['nombre']; ?></h2>05+       alt="<?php echo esc_attr( $p['nombre'] ); ?>">06-  <p><?php echo $p['descripcion']; ?></p>06+  <h2><?php echo esc_html( $p['nombre'] ); ?></h2>07-  <a href="<?php echo $p['url']; ?>">07+  <p><?php echo wp_kses_post( $p['descripcion'] ); ?></p>08-    Ver ficha de <?php echo $p['nombre']; ?>08+  <a href="<?php echo esc_url( $p['url'] ); ?>">09-  </a>09+    Ver ficha de <?php echo esc_html( $p['nombre'] ); ?>10+  </a>10 </article>11 </article>11 <?php endforeach; ?>12 <?php endforeach; ?>12 </section>13 </section>
                  

                    01 // El esquema estaba escrito y no lo miraba nadie.01 // El esquema estaba escrito y no lo miraba nadie.02 const Lead = z.object({02 const Lead = z.object({03   nombre: z.string().min(2).max(80),03   nombre: z.string().min(2).max(80),04   email: z.email(),04   email: z.email(),05   mensaje: z.string().min(10).max(2000),05   mensaje: z.string().min(10).max(2000),06 });06 });07 07 08 export async function POST({ request }) {08 export async function POST({ request }) {09-  const datos = await request.json();09+  const lead = Lead.safeParse(await request.json());10-  await guardarLead(datos);10+  if (!lead.success) {11+    return new Response(null, { status: 422 });12+  }13+  await guardarLead(lead.data);11   return new Response(null, { status: 204 });14   return new Response(null, { status: 204 });12 }15 }