Experiencias rápidas, seguras y elegantes

<!-- Dialog accesible + foco -->
<button id="openDialog" class="btn">Abrir</button>
<dialog id="dlg" aria-labelledby="dlgTitle">
  <h3 id="dlgTitle">Suscripción</h3>
  <form method="dialog">
    <input type="email" required placeholder="email" />
    <menu>
      <button value="cancel">Cancelar</button>
      <button value="ok" class="btn">Guardar</button>
    </menu>
  </form>
</dialog>

<!-- Tabs semánticos -->
<div role="tablist" aria-label="Lenguajes">
  <button role="tab" aria-controls="p-html" aria-selected="true">HTML</button>
  <button role="tab" aria-controls="p-css">CSS</button>
</div>

/* Variables + contenedor + CQ */
:root{--space:12px}
.card{container-type:inline-size}
@container (min-width: 420px){ .card{ padding:24px } }

/* Tipografía fluida */
.title{ font-size:clamp(28px, 6vw, 56px) }

/* Animaciones eficientes */
.btn:hover{ transform: translateY(-2px) }

/* Accesibilidad: foco visible */
:focus-visible{outline:2px solid deepskyblue; outline-offset:3px}

// Dialog + debounce + lazy images
const dlg = document.getElementById('dlg');
const openBtn = document.getElementById('openDialog');
openBtn?.addEventListener('click', ()=> dlg.showModal());

// Debounce util
const debounce = (fn,ms=200)=>{ let t; return(...a)=>{ clearTimeout(t); t=setTimeout(()=>fn(...a),ms); } };

// Lazy load ejemplo
const io = new IntersectionObserver(es=>es.forEach(e=>{
  if(e.isIntersecting){ const img=e.target; img.src=img.dataset.src; io.unobserve(img); }
}),{threshold:.1});
document.querySelectorAll('img[data-src]').forEach(i=>io.observe(i));