Crea una «Sección simple (texto centrado)» responsive y accesible. Una sección con `.wrap` (max-width ~760px), eyebrow en mayúsculas, h2 grande, párrafo y hasta 2 CTAs; todo centrado. HTML + CSS nativo (sin dependencias). Contenedor con ancho máximo ~1200px, espaciado vertical generoso, tipografía clara y buen contraste. Funciona en móvil (una columna) y en desktop. Respeta prefers-reduced-motion si incluye animación.

<section class="s">
  <div class="wrap">
    <p class="eb">Eyebrow</p>
    <h2>Un titular claro y directo</h2>
    <p class="lead">Una o dos frases que explican el valor sin rodeos.</p>
    <a class="btn" href="#">Empezar</a>
  </div>
</section>
<style>
.s{padding:96px 20px}
.s .wrap{max-width:760px;margin:0 auto;text-align:center}
.s .eb{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8a9099;font-weight:700;margin:0 0 12px}
.s h2{font-size:clamp(30px,5vw,56px);line-height:1.05;margin:0 0 16px}
.s .lead{font-size:18px;color:#555;margin:0 0 26px}
.s .btn{display:inline-block;background:#111;color:#fff;padding:14px 28px;border-radius:999px;font-weight:600;text-decoration:none}
</style>

Crea una «Sección de cards» responsive y accesible. Un grid `repeat(auto-fit,minmax(240px,1fr))` con tarjetas; cada una con icono, h3 y párrafo; hover suave. HTML + CSS nativo (sin dependencias). Contenedor con ancho máximo ~1200px, espaciado vertical generoso, tipografía clara y buen contraste. Funciona en móvil (una columna) y en desktop. Respeta prefers-reduced-motion si incluye animación.

<section class="s">
  <div class="wrap">
    <h2>Lo que hacemos</h2>
    <div class="cards">
      <article class="card"><span class="ic">✦</span><h3>Diseño</h3><p>Interfaces claras y cuidadas.</p></article>
      <article class="card"><span class="ic">⚡</span><h3>Velocidad</h3><p>Webs que cargan al instante.</p></article>
      <article class="card"><span class="ic">◎</span><h3>Medición</h3><p>Decisiones con datos reales.</p></article>
    </div>
  </div>
</section>
<style>
.s{padding:96px 20px}
.s .wrap{max-width:1200px;margin:0 auto}
.s h2{font-size:clamp(26px,3.5vw,40px);margin:0 0 32px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{border:1px solid #e6e6e8;border-radius:18px;padding:26px;background:#fff;transition:transform .4s cubic-bezier(.25,1,.5,1),box-shadow .4s}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(0,0,0,.1)}
.card .ic{font-size:26px}
.card h3{margin:14px 0 6px}
.card p{margin:0;color:#666}
</style>

Crea una «Sección con video de fondo» responsive y accesible. Una sección a sangre con `<video autoplay muted loop playsinline>` en `object-fit:cover`, un degradado encima y el contenido alineado abajo/centro. HTML + CSS nativo (sin dependencias). Contenedor con ancho máximo ~1200px, espaciado vertical generoso, tipografía clara y buen contraste. Funciona en móvil (una columna) y en desktop. Respeta prefers-reduced-motion si incluye animación.

<section class="vsec">
  <video autoplay muted loop playsinline poster="foto.jpg"><source src="video.mp4" type="video/mp4"></video>
  <div class="vsec-in"><p class="eb">Eyebrow</p><h2>Título sobre video</h2><a class="btn" href="#">Ver más</a></div>
</section>
<style>
.vsec{position:relative;min-height:70vh;display:flex;align-items:flex-end;overflow:hidden;border-radius:18px}
.vsec video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vsec::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.65),transparent 70%)}
.vsec-in{position:relative;z-index:1;color:#fff;padding:48px}
.vsec-in h2{font-size:clamp(28px,5vw,52px);margin:8px 0 18px}
.vsec-in .btn{display:inline-block;background:#fff;color:#111;padding:13px 26px;border-radius:999px;font-weight:600}
@media (prefers-reduced-motion: reduce){.vsec video{display:none}}
</style>

Crea una «Cápsulas de valores» responsive y accesible. Una fila flexible que envuelve: cada cápsula con un check ✔ y un texto en pill con borde; se apilan en móvil. HTML + CSS nativo (sin dependencias). Contenedor con ancho máximo ~1200px, espaciado vertical generoso, tipografía clara y buen contraste. Funciona en móvil (una columna) y en desktop. Respeta prefers-reduced-motion si incluye animación.

<section class="s">
  <div class="wrap">
    <div class="caps">
      <span class="cap"><b>✔</b> Sin permanencia</span>
      <span class="cap"><b>✔</b> Soporte en español</span>
      <span class="cap"><b>✔</b> Precio transparente</span>
      <span class="cap"><b>✔</b> Listo en 48 h</span>
    </div>
  </div>
</section>
<style>
.s{padding:64px 20px}
.s .wrap{max-width:1000px;margin:0 auto}
.caps{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.cap{display:inline-flex;align-items:center;gap:8px;border:1px solid #e6e6e8;border-radius:999px;padding:10px 18px;font-weight:600;color:#333;background:#fff}
.cap b{color:#19c37d}
</style>

Crea una «Sección 50/50 (imagen + texto)» responsive y accesible. Grid de 2 columnas; la imagen `object-fit:cover` con radio; el texto con jerarquía y CTA. En móvil, una columna. HTML + CSS nativo (sin dependencias). Contenedor con ancho máximo ~1200px, espaciado vertical generoso, tipografía clara y buen contraste. Funciona en móvil (una columna) y en desktop. Respeta prefers-reduced-motion si incluye animación.

<section class="s">
  <div class="wrap">
    <div class="media"><img src="foto.jpg" alt=""></div>
    <div class="txt"><p class="eb">Eyebrow</p><h2>Imagen y texto, juntos.</h2>
      <p>Explica el beneficio con una imagen de apoyo.</p><a class="btn" href="#">Conocer más</a></div>
  </div>
</section>
<style>
.s{padding:96px 20px}
.s .wrap{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.s .media img{width:100%;height:100%;min-height:280px;object-fit:cover;border-radius:18px}
.s .eb{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8a9099;font-weight:700;margin:0 0 10px}
.s h2{font-size:clamp(26px,3.6vw,42px);line-height:1.08;margin:0 0 14px}
.s .btn{display:inline-block;margin-top:16px;background:#111;color:#fff;padding:13px 26px;border-radius:999px;font-weight:600;text-decoration:none}
@media (max-width:760px){.s .wrap{grid-template-columns:1fr;gap:24px}}
</style>

Crea una «Banda de CTA» responsive y accesible. Un bloque con fondo de marca (degradado), texto claro, título grande y botón; padding generoso y radio. HTML + CSS nativo (sin dependencias). Contenedor con ancho máximo ~1200px, espaciado vertical generoso, tipografía clara y buen contraste. Funciona en móvil (una columna) y en desktop. Respeta prefers-reduced-motion si incluye animación.

<section class="cta">
  <h2>¿Listo para empezar?</h2>
  <p>Te mostramos cómo en 20 minutos.</p>
  <a class="btn" href="#">Agendar →</a>
</section>
<style>
.cta{margin:48px 20px;padding:64px 24px;border-radius:24px;text-align:center;color:#fff;
  background:linear-gradient(135deg,#34d3a3,#7c6cff 55%,#ffb3d1)}
.cta h2{font-size:clamp(26px,4vw,44px);margin:0 0 10px}
.cta p{margin:0 0 22px;opacity:.92}
.cta .btn{display:inline-block;background:#08131a;color:#fff;padding:15px 32px;border-radius:999px;font-weight:700;text-decoration:none}
</style>

Crea una «Banda de métricas» responsive y accesible. Grid flexible con 3–4 métricas: número grande y etiqueta pequeña; apila en móvil. HTML + CSS nativo (sin dependencias). Contenedor con ancho máximo ~1200px, espaciado vertical generoso, tipografía clara y buen contraste. Funciona en móvil (una columna) y en desktop. Respeta prefers-reduced-motion si incluye animación.

<section class="s">
  <div class="wrap">
    <div class="stat"><b>+320</b><span>proyectos entregados</span></div>
    <div class="stat"><b>48 h</b><span>tiempo de entrega</span></div>
    <div class="stat"><b>98 %</b><span>satisfacción</span></div>
  </div>
</section>
<style>
.s{padding:64px 20px;border-top:1px solid #eee;border-bottom:1px solid #eee}
.s .wrap{max-width:1000px;margin:0 auto;display:flex;flex-wrap:wrap;gap:32px;justify-content:space-around;text-align:center}
.stat b{display:block;font-size:clamp(34px,5vw,60px);font-weight:800;line-height:1}
.stat span{color:#8a9099;font-size:14px}
</style>

Crea una «Sección Cómo funciona (sticky + resaltado)» responsive y accesible. Una sección con un carril alto; el bloque de pasos queda sticky al centro. Al hacer scroll, una **línea de progreso** se llena y una **bolita** viaja sobre ella; el paso **activo** sube de opacidad/`scale` y recibe un anillo `pulse`. reduced-motion muestra todo estático. HTML + CSS nativo (sin dependencias). Contenedor con ancho máximo ~1200px, espaciado vertical generoso, tipografía clara y buen contraste. Funciona en móvil (una columna) y en desktop. Respeta prefers-reduced-motion si incluye animación.

<section class="kf" id="kf">
  <header class="kf-head">
    <p class="kf-eb">Cómo funciona</p>
    <h2>De la primera llamada a un departamento trabajando.</h2>
  </header>
  <div class="kf-scroll" tabindex="0" aria-label="Pasos (desplázate)">
    <div class="kf-tall">
      <div class="kf-sticky">
        <ol class="kf-steps">
          <li><span class="kf-num">1</span><h3>Diagnóstico</h3><p>Entendemos tu negocio y dónde duele.</p></li>
          <li><span class="kf-num">2</span><h3>Diseño</h3><p>Definimos qué agentes y qué tareas.</p></li>
          <li><span class="kf-num">3</span><h3>Montaje</h3><p>Construimos y conectamos tu departamento.</p></li>
          <li><span class="kf-num">4</span><h3>Operación</h3><p>Tu equipo de IA trabaja y mejora solo.</p></li>
        </ol>
        <span class="kf-fill" aria-hidden="true"></span>
      </div>
    </div>
  </div>
</section>
<style>
.kf{padding:72px 20px}
.kf-head{max-width:760px;margin:0 auto 28px}
.kf-eb{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8a9099;font-weight:700;margin:0 0 10px}
.kf h2{font-size:clamp(26px,5vw,46px);line-height:1.02;margin:0}
.kf-scroll{max-width:1000px;margin:0 auto;height:72vh;min-height:360px;overflow:auto;border-radius:18px;
  border:1px solid #e6e6e8;background:linear-gradient(180deg,#fafafb,#fff)}
.kf-tall{position:relative;height:260vh}
.kf-sticky{position:sticky;top:0;display:flex;align-items:center;justify-content:center;height:72vh;min-height:360px;padding:32px}
.kf-steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;width:100%;margin:0;padding:0;list-style:none}
.kf-steps li{position:relative;text-align:center;opacity:.3;transition:opacity .2s ease}
.kf-num{display:flex;width:52px;height:52px;margin:0 auto 14px;align-items:center;justify-content:center;
  border-radius:999px;background:#fff;border:1px solid #e6e6e8;font-weight:800;font-size:20px;color:#6655f5}
.kf-steps h3{font-size:19px;margin:0 0 6px;transform-origin:50% 50%}
.kf-steps p{margin:0;color:#666;font-size:14px}
.kf-fill{position:absolute;left:0;top:26px;height:4px;width:0;border-radius:999px;
  background:linear-gradient(90deg,#34d3a3,#7c6cff 55%,#ffb3d1);box-shadow:0 0 16px rgba(124,108,255,.8)}
.kf-fill::after{content:"";position:absolute;right:-7px;top:50%;width:14px;height:14px;margin-top:-9px;
  border-radius:999px;background:#fff;box-shadow:0 0 20px 6px rgba(124,108,255,.95)}
.kf-steps li.active .kf-num{border-color:#7c6cff}
@media (prefers-reduced-motion: reduce){.kf-tall{height:auto}.kf-sticky{position:static;height:auto}.kf-steps li{opacity:1}.kf-fill{width:100%}}
</style>
<script>
(function(){
  var sec=document.querySelector('.kf'); if(!sec) return;
  var box=sec.querySelector('.kf-scroll'), tall=sec.querySelector('.kf-tall'),
      sticky=sec.querySelector('.kf-sticky'), ol=sec.querySelector('.kf-steps'),
      fill=sec.querySelector('.kf-fill'), items=[].slice.call(ol.children), n=items.length;
  function update(){
    var max=tall.offsetHeight-sticky.offsetHeight;
    var p=max>0?(box.scrollTop)/max:0; p=Math.max(0,Math.min(1,p));
    var pos=p*(n-1);
    if(fill) fill.style.width=(p*100)+'%';
    for(var i=0;i<n;i++){ var f=Math.max(0,1-Math.abs(i-pos)), li=items[i],
        h=li.querySelector('h3'), num=li.querySelector('.kf-num');
      li.style.opacity=(0.30+0.70*f);
      if(h) h.style.transform='scale('+(1+0.06*f)+')';
      if(num) num.style.boxShadow='0 0 '+(10+26*f)+'px rgba(124,108,255,'+(0.15+0.65*f)+')';
      li.classList.toggle('active', i===Math.round(pos));
    }
  }
  box.addEventListener('scroll', update, {passive:true});
  window.addEventListener('resize', update);
  update();
})();
</script>

Crea una sección «Hero AIgenzi (aurora + título degradado)» responsive y accesible, con el estilo de AIgenzi (fondo oscuro #0a0c14, texto claro y acentos en degradado aurora mint→sky→violet→rose). Un bloque oscuro con un `::before` de tres `radial-gradient` desenfocados (auroras), badge con punto, h1 grande con un span en `background-clip:text` animado y dos botones. HTML + CSS nativo (sin dependencias). Contenedor claro, jerarquía tipográfica y buen contraste. Funciona en móvil y desktop. Respeta prefers-reduced-motion si hay animación.

<section class="ag-hero">
  <p class="ag-badge"><span class="ag-dot"></span>Departamentos de IA para cualquier empresa</p>
  <h1 class="ag-hero-h1">Tu próximo departamento<br><span class="ag-grad">no necesita selección.</span></h1>
  <p class="ag-hero-lead">Aigenzi monta departamentos de IA completos que trabajan desde el primer día.</p>
  <div class="ag-cta"><a class="ag-b1" href="#">Agenda una llamada gratis</a><a class="ag-b2" href="#">Ver los departamentos</a></div>
</section>
<style>
.ag-hero{position:relative;overflow:hidden;padding:64px 28px;border-radius:20px;background:#0a0c14;color:#eef0ff;text-align:center}
.ag-hero::before{content:"";position:absolute;inset:-30% -10% auto -10%;height:80%;pointer-events:none;filter:blur(40px);
  background:radial-gradient(40% 60% at 18% 30%,rgba(52,211,163,.4),transparent 60%),radial-gradient(40% 60% at 82% 22%,rgba(124,108,255,.4),transparent 60%),radial-gradient(40% 60% at 60% 74%,rgba(255,179,209,.3),transparent 60%)}
.ag-badge{position:relative;display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:6px 14px;font-size:12.5px;color:#c9cfe6}
.ag-dot{width:6px;height:6px;border-radius:50%;background:#34d3a3}
.ag-hero-h1{position:relative;margin:22px 0 0;font-size:clamp(30px,6vw,58px);line-height:.98;letter-spacing:-.02em}
.ag-hero-lead{position:relative;margin:18px auto 0;max-width:34rem;color:#b8bfd6;font-size:17px}
.ag-cta{position:relative;margin-top:26px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
</style>
<style>
:root{--mint:#5eead4;--sky:#7dd3fc;--violet:#a99dff;--rose:#f9a8d4;--ag-bg:#0a0c14;--ag-ink:#eef0ff;--ag-mut:#aeb6cc;--ag-line:rgba(255,255,255,.1)}
.ag-sec{padding:56px 28px;background:var(--ag-bg);color:var(--ag-ink);border-radius:20px}
.ag-eb{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8a93ad;font-weight:700;margin:0 0 12px}
.ag-h2{font-size:clamp(26px,4.4vw,44px);line-height:1.03;margin:0 0 28px;letter-spacing:-.01em}
.ag-grad{background:linear-gradient(95deg,var(--mint),var(--sky) 30%,var(--violet) 60%,var(--rose));background-size:230% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;animation:ag-slide 10s linear infinite}
@keyframes ag-slide{0%{background-position:0% 50%}100%{background-position:230% 50%}}
@media (prefers-reduced-motion: reduce){.ag-grad{animation:none}}
.ag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.ag-card{border:1px solid var(--ag-line);border-radius:22px;padding:22px;background:rgba(255,255,255,.03);transition:transform .4s cubic-bezier(.25,1,.5,1)}
.ag-card:hover{transform:translateY(-4px)}
.ag-ic{display:flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:14px;background:rgba(255,255,255,.06);font-size:20px}
.ag-card h3{margin:16px 0 6px;font-size:21px;letter-spacing:-.01em}
.ag-card p{margin:0;color:var(--ag-mut);font-size:14px;line-height:1.5}
.ag-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:14px 0 0;padding:0}
.ag-tags li{font-size:11.5px;color:var(--ag-mut);background:rgba(255,255,255,.06);border-radius:999px;padding:4px 10px}
.ag-b1{display:inline-block;background:#34d3a3;color:#04121a;border-radius:999px;padding:14px 26px;font-weight:700;text-decoration:none}
.ag-b2{display:inline-block;border:1px solid rgba(255,255,255,.2);color:var(--ag-ink);border-radius:999px;padding:14px 26px;font-weight:600;text-decoration:none}
</style>

Crea una sección «Áreas de negocio (grilla de cards)» responsive y accesible, con el estilo de AIgenzi (fondo oscuro #0a0c14, texto claro y acentos en degradado aurora mint→sky→violet→rose). Un `.ag-grid` `repeat(auto-fit,minmax(220px,1fr))` con cards de borde tenue y hover que eleva; cada card con chip de icono, h3 y párrafo. HTML + CSS nativo (sin dependencias). Contenedor claro, jerarquía tipográfica y buen contraste. Funciona en móvil y desktop. Respeta prefers-reduced-motion si hay animación.

<section class="ag-sec">
  <p class="ag-eb">Áreas de negocio</p>
  <h2 class="ag-h2">Porque el mundo cambió <span class="ag-grad">y tu empresa aún no.</span></h2>
  <div class="ag-grid">
    <article class="ag-card"><span class="ag-ic">📊</span><h3>Contabilidad</h3><p>Conciliaciones, facturación y cobranza al día, sin sumar personal.</p></article>
    <article class="ag-card"><span class="ag-ic">🖥️</span><h3>Diseño Web</h3><p>Sitios impresionantes para tu empresa.</p></article>
    <article class="ag-card"><span class="ag-ic">👥</span><h3>Recursos Humanos</h3><p>Reclutamiento y onboarding siempre a tiempo.</p></article>
    <article class="ag-card"><span class="ag-ic">🌱</span><h3>Agricultura</h3><p>Predios, clima e insumos ordenados.</p></article>
    <article class="ag-card"><span class="ag-ic">🏠</span><h3>Inmobiliaria</h3><p>Captación y visitas agendadas solas.</p></article>
    <article class="ag-card"><span class="ag-ic">🏗️</span><h3>Construcción</h3><p>Cotizaciones y obra coordinadas.</p></article>
  </div>
</section>
<style>
:root{--mint:#5eead4;--sky:#7dd3fc;--violet:#a99dff;--rose:#f9a8d4;--ag-bg:#0a0c14;--ag-ink:#eef0ff;--ag-mut:#aeb6cc;--ag-line:rgba(255,255,255,.1)}
.ag-sec{padding:56px 28px;background:var(--ag-bg);color:var(--ag-ink);border-radius:20px}
.ag-eb{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8a93ad;font-weight:700;margin:0 0 12px}
.ag-h2{font-size:clamp(26px,4.4vw,44px);line-height:1.03;margin:0 0 28px;letter-spacing:-.01em}
.ag-grad{background:linear-gradient(95deg,var(--mint),var(--sky) 30%,var(--violet) 60%,var(--rose));background-size:230% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;animation:ag-slide 10s linear infinite}
@keyframes ag-slide{0%{background-position:0% 50%}100%{background-position:230% 50%}}
@media (prefers-reduced-motion: reduce){.ag-grad{animation:none}}
.ag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.ag-card{border:1px solid var(--ag-line);border-radius:22px;padding:22px;background:rgba(255,255,255,.03);transition:transform .4s cubic-bezier(.25,1,.5,1)}
.ag-card:hover{transform:translateY(-4px)}
.ag-ic{display:flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:14px;background:rgba(255,255,255,.06);font-size:20px}
.ag-card h3{margin:16px 0 6px;font-size:21px;letter-spacing:-.01em}
.ag-card p{margin:0;color:var(--ag-mut);font-size:14px;line-height:1.5}
.ag-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:14px 0 0;padding:0}
.ag-tags li{font-size:11.5px;color:var(--ag-mut);background:rgba(255,255,255,.06);border-radius:999px;padding:4px 10px}
.ag-b1{display:inline-block;background:#34d3a3;color:#04121a;border-radius:999px;padding:14px 26px;font-weight:700;text-decoration:none}
.ag-b2{display:inline-block;border:1px solid rgba(255,255,255,.2);color:var(--ag-ink);border-radius:999px;padding:14px 26px;font-weight:600;text-decoration:none}
</style>

Crea una sección «Departamentos (cards con tags)» responsive y accesible, con el estilo de AIgenzi (fondo oscuro #0a0c14, texto claro y acentos en degradado aurora mint→sky→violet→rose). Igual que las cards de áreas, con una lista `.ag-tags` de pills al pie para enumerar herramientas o integraciones. HTML + CSS nativo (sin dependencias). Contenedor claro, jerarquía tipográfica y buen contraste. Funciona en móvil y desktop. Respeta prefers-reduced-motion si hay animación.

<section class="ag-sec">
  <p class="ag-eb">Lo que construimos</p>
  <h2 class="ag-h2">Departamentos de IA, <span class="ag-grad">no más herramientas.</span></h2>
  <div class="ag-grid">
    <article class="ag-card"><span class="ag-ic">🤖</span><h3>Atención al cliente</h3><p>Responde en segundos, 24/7, con tu tono de marca.</p><ul class="ag-tags"><li>WhatsApp</li><li>Web</li><li>Correo</li></ul></article>
    <article class="ag-card"><span class="ag-ic">🧾</span><h3>Back office</h3><p>Factura, concilia y reporta sin sumar gente.</p><ul class="ag-tags"><li>ERP</li><li>DTE</li><li>Reportes</li></ul></article>
    <article class="ag-card"><span class="ag-ic">📈</span><h3>Ventas</h3><p>Califica interesados y agenda por ti.</p><ul class="ag-tags"><li>CRM</li><li>Ads</li></ul></article>
  </div>
</section>
<style>
:root{--mint:#5eead4;--sky:#7dd3fc;--violet:#a99dff;--rose:#f9a8d4;--ag-bg:#0a0c14;--ag-ink:#eef0ff;--ag-mut:#aeb6cc;--ag-line:rgba(255,255,255,.1)}
.ag-sec{padding:56px 28px;background:var(--ag-bg);color:var(--ag-ink);border-radius:20px}
.ag-eb{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8a93ad;font-weight:700;margin:0 0 12px}
.ag-h2{font-size:clamp(26px,4.4vw,44px);line-height:1.03;margin:0 0 28px;letter-spacing:-.01em}
.ag-grad{background:linear-gradient(95deg,var(--mint),var(--sky) 30%,var(--violet) 60%,var(--rose));background-size:230% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;animation:ag-slide 10s linear infinite}
@keyframes ag-slide{0%{background-position:0% 50%}100%{background-position:230% 50%}}
@media (prefers-reduced-motion: reduce){.ag-grad{animation:none}}
.ag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.ag-card{border:1px solid var(--ag-line);border-radius:22px;padding:22px;background:rgba(255,255,255,.03);transition:transform .4s cubic-bezier(.25,1,.5,1)}
.ag-card:hover{transform:translateY(-4px)}
.ag-ic{display:flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:14px;background:rgba(255,255,255,.06);font-size:20px}
.ag-card h3{margin:16px 0 6px;font-size:21px;letter-spacing:-.01em}
.ag-card p{margin:0;color:var(--ag-mut);font-size:14px;line-height:1.5}
.ag-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:14px 0 0;padding:0}
.ag-tags li{font-size:11.5px;color:var(--ag-mut);background:rgba(255,255,255,.06);border-radius:999px;padding:4px 10px}
.ag-b1{display:inline-block;background:#34d3a3;color:#04121a;border-radius:999px;padding:14px 26px;font-weight:700;text-decoration:none}
.ag-b2{display:inline-block;border:1px solid rgba(255,255,255,.2);color:var(--ag-ink);border-radius:999px;padding:14px 26px;font-weight:600;text-decoration:none}
</style>

Crea una sección «Para quién (audiencias)» responsive y accesible, con el estilo de AIgenzi (fondo oscuro #0a0c14, texto claro y acentos en degradado aurora mint→sky→violet→rose). Un grid de 4 cards con chip de icono, título y una línea; útil para segmentar audiencias sin barreras. HTML + CSS nativo (sin dependencias). Contenedor claro, jerarquía tipográfica y buen contraste. Funciona en móvil y desktop. Respeta prefers-reduced-motion si hay animación.

<section class="ag-sec">
  <p class="ag-eb">Para quién</p>
  <h2 class="ag-h2">De emprendedores que trabajan solos <span class="ag-grad">a grandes empresas.</span></h2>
  <div class="ag-grid">
    <div class="ag-card"><span class="ag-ic">🧑&zwj;💻</span><h3>Emprendedores</h3><p>Multiplica tu capacidad sin contratar.</p></div>
    <div class="ag-card"><span class="ag-ic">🏬</span><h3>Pymes</h3><p>Haz de 5 personas un equipo de 15.</p></div>
    <div class="ag-card"><span class="ag-ic">🏢</span><h3>Corporativos</h3><p>Automatiza procesos repetitivos a escala.</p></div>
    <div class="ag-card"><span class="ag-ic">🤝</span><h3>Equipos</h3><p>Que cada área tenga su propio agente.</p></div>
  </div>
</section>
<style>
:root{--mint:#5eead4;--sky:#7dd3fc;--violet:#a99dff;--rose:#f9a8d4;--ag-bg:#0a0c14;--ag-ink:#eef0ff;--ag-mut:#aeb6cc;--ag-line:rgba(255,255,255,.1)}
.ag-sec{padding:56px 28px;background:var(--ag-bg);color:var(--ag-ink);border-radius:20px}
.ag-eb{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8a93ad;font-weight:700;margin:0 0 12px}
.ag-h2{font-size:clamp(26px,4.4vw,44px);line-height:1.03;margin:0 0 28px;letter-spacing:-.01em}
.ag-grad{background:linear-gradient(95deg,var(--mint),var(--sky) 30%,var(--violet) 60%,var(--rose));background-size:230% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;animation:ag-slide 10s linear infinite}
@keyframes ag-slide{0%{background-position:0% 50%}100%{background-position:230% 50%}}
@media (prefers-reduced-motion: reduce){.ag-grad{animation:none}}
.ag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.ag-card{border:1px solid var(--ag-line);border-radius:22px;padding:22px;background:rgba(255,255,255,.03);transition:transform .4s cubic-bezier(.25,1,.5,1)}
.ag-card:hover{transform:translateY(-4px)}
.ag-ic{display:flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:14px;background:rgba(255,255,255,.06);font-size:20px}
.ag-card h3{margin:16px 0 6px;font-size:21px;letter-spacing:-.01em}
.ag-card p{margin:0;color:var(--ag-mut);font-size:14px;line-height:1.5}
.ag-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:14px 0 0;padding:0}
.ag-tags li{font-size:11.5px;color:var(--ag-mut);background:rgba(255,255,255,.06);border-radius:999px;padding:4px 10px}
.ag-b1{display:inline-block;background:#34d3a3;color:#04121a;border-radius:999px;padding:14px 26px;font-weight:700;text-decoration:none}
.ag-b2{display:inline-block;border:1px solid rgba(255,255,255,.2);color:var(--ag-ink);border-radius:999px;padding:14px 26px;font-weight:600;text-decoration:none}
</style>

Crea una sección «Modelos (3 columnas)» responsive y accesible, con el estilo de AIgenzi (fondo oscuro #0a0c14, texto claro y acentos en degradado aurora mint→sky→violet→rose). Grid de 3 cards (`.ag-grid3`); cada una con chip, título y una línea; cierra con una nota al pie tenue. HTML + CSS nativo (sin dependencias). Contenedor claro, jerarquía tipográfica y buen contraste. Funciona en móvil y desktop. Respeta prefers-reduced-motion si hay animación.

<section class="ag-sec">
  <p class="ag-eb">Modelos</p>
  <h2 class="ag-h2">ChatGPT, Claude, Gemini. <span class="ag-grad">La mejor para cada tarea.</span></h2>
  <div class="ag-grid3">
    <div class="ag-card"><span class="ag-ic">🟢</span><h3>ChatGPT</h3><p>Conversación, código y acciones.</p></div>
    <div class="ag-card"><span class="ag-ic">🟣</span><h3>Claude</h3><p>Textos largos y análisis fino.</p></div>
    <div class="ag-card"><span class="ag-ic">🔵</span><h3>Gemini</h3><p>Datos, multimodal y Google Workspace.</p></div>
  </div>
</section>
<style>
.ag-grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
</style>
<style>
:root{--mint:#5eead4;--sky:#7dd3fc;--violet:#a99dff;--rose:#f9a8d4;--ag-bg:#0a0c14;--ag-ink:#eef0ff;--ag-mut:#aeb6cc;--ag-line:rgba(255,255,255,.1)}
.ag-sec{padding:56px 28px;background:var(--ag-bg);color:var(--ag-ink);border-radius:20px}
.ag-eb{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8a93ad;font-weight:700;margin:0 0 12px}
.ag-h2{font-size:clamp(26px,4.4vw,44px);line-height:1.03;margin:0 0 28px;letter-spacing:-.01em}
.ag-grad{background:linear-gradient(95deg,var(--mint),var(--sky) 30%,var(--violet) 60%,var(--rose));background-size:230% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;animation:ag-slide 10s linear infinite}
@keyframes ag-slide{0%{background-position:0% 50%}100%{background-position:230% 50%}}
@media (prefers-reduced-motion: reduce){.ag-grad{animation:none}}
.ag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.ag-card{border:1px solid var(--ag-line);border-radius:22px;padding:22px;background:rgba(255,255,255,.03);transition:transform .4s cubic-bezier(.25,1,.5,1)}
.ag-card:hover{transform:translateY(-4px)}
.ag-ic{display:flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:14px;background:rgba(255,255,255,.06);font-size:20px}
.ag-card h3{margin:16px 0 6px;font-size:21px;letter-spacing:-.01em}
.ag-card p{margin:0;color:var(--ag-mut);font-size:14px;line-height:1.5}
.ag-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:14px 0 0;padding:0}
.ag-tags li{font-size:11.5px;color:var(--ag-mut);background:rgba(255,255,255,.06);border-radius:999px;padding:4px 10px}
.ag-b1{display:inline-block;background:#34d3a3;color:#04121a;border-radius:999px;padding:14px 26px;font-weight:700;text-decoration:none}
.ag-b2{display:inline-block;border:1px solid rgba(255,255,255,.2);color:var(--ag-ink);border-radius:999px;padding:14px 26px;font-weight:600;text-decoration:none}
</style>

Crea una sección «Precios por pasos» responsive y accesible, con el estilo de AIgenzi (fondo oscuro #0a0c14, texto claro y acentos en degradado aurora mint→sky→violet→rose). Un `<ol>` en grid de 3 con círculo numerado y texto; comunica el modelo de cobro sin tablas. HTML + CSS nativo (sin dependencias). Contenedor claro, jerarquía tipográfica y buen contraste. Funciona en móvil y desktop. Respeta prefers-reduced-motion si hay animación.

<section class="ag-sec">
  <p class="ag-eb">Precios</p>
  <h2 class="ag-h2">IA por tokens. <span class="ag-grad">Pagas por el trabajo hecho.</span></h2>
  <ol class="ag-steps">
    <li><span class="ag-num">1</span><h3>Diagnóstico</h3><p>Sin costo. Vemos dónde duele.</p></li>
    <li><span class="ag-num">2</span><h3>Montaje</h3><p>Precio fijo por implementación.</p></li>
    <li><span class="ag-num">3</span><h3>Operación</h3><p>Pagas solo los tokens usados.</p></li>
  </ol>
</section>
<style>
.ag-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.ag-steps li{border:1px solid var(--ag-line);border-radius:22px;padding:22px;background:rgba(255,255,255,.03)}
.ag-num{display:flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:999px;background:#fff;color:#0a0c14;font-weight:800;font-size:20px}
.ag-steps h3{margin:14px 0 6px;font-size:19px}
.ag-steps p{margin:0;color:var(--ag-mut);font-size:14px}
</style>
<style>
:root{--mint:#5eead4;--sky:#7dd3fc;--violet:#a99dff;--rose:#f9a8d4;--ag-bg:#0a0c14;--ag-ink:#eef0ff;--ag-mut:#aeb6cc;--ag-line:rgba(255,255,255,.1)}
.ag-sec{padding:56px 28px;background:var(--ag-bg);color:var(--ag-ink);border-radius:20px}
.ag-eb{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8a93ad;font-weight:700;margin:0 0 12px}
.ag-h2{font-size:clamp(26px,4.4vw,44px);line-height:1.03;margin:0 0 28px;letter-spacing:-.01em}
.ag-grad{background:linear-gradient(95deg,var(--mint),var(--sky) 30%,var(--violet) 60%,var(--rose));background-size:230% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;animation:ag-slide 10s linear infinite}
@keyframes ag-slide{0%{background-position:0% 50%}100%{background-position:230% 50%}}
@media (prefers-reduced-motion: reduce){.ag-grad{animation:none}}
.ag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.ag-card{border:1px solid var(--ag-line);border-radius:22px;padding:22px;background:rgba(255,255,255,.03);transition:transform .4s cubic-bezier(.25,1,.5,1)}
.ag-card:hover{transform:translateY(-4px)}
.ag-ic{display:flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:14px;background:rgba(255,255,255,.06);font-size:20px}
.ag-card h3{margin:16px 0 6px;font-size:21px;letter-spacing:-.01em}
.ag-card p{margin:0;color:var(--ag-mut);font-size:14px;line-height:1.5}
.ag-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:14px 0 0;padding:0}
.ag-tags li{font-size:11.5px;color:var(--ag-mut);background:rgba(255,255,255,.06);border-radius:999px;padding:4px 10px}
.ag-b1{display:inline-block;background:#34d3a3;color:#04121a;border-radius:999px;padding:14px 26px;font-weight:700;text-decoration:none}
.ag-b2{display:inline-block;border:1px solid rgba(255,255,255,.2);color:var(--ag-ink);border-radius:999px;padding:14px 26px;font-weight:600;text-decoration:none}
</style>

Crea una sección «Resultados / métricas» responsive y accesible, con el estilo de AIgenzi (fondo oscuro #0a0c14, texto claro y acentos en degradado aurora mint→sky→violet→rose). Un grid de 4 métricas con número en degradado y etiqueta tenue. HTML + CSS nativo (sin dependencias). Contenedor claro, jerarquía tipográfica y buen contraste. Funciona en móvil y desktop. Respeta prefers-reduced-motion si hay animación.

<section class="ag-sec">
  <p class="ag-eb">Resultados</p>
  <h2 class="ag-h2">Funciona con sus propios <span class="ag-grad">agentes.</span></h2>
  <div class="ag-stats">
    <div><b>+320</b><span>tareas por día</span></div>
    <div><b>98&nbsp;%</b><span>satisfacción</span></div>
    <div><b>24/7</b><span>disponible</span></div>
    <div><b>&lt;&nbsp;1&nbsp;s</b><span>de respuesta</span></div>
  </div>
</section>
<style>
.ag-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;text-align:center}
.ag-stats div{border:1px solid var(--ag-line);border-radius:22px;padding:22px;background:rgba(255,255,255,.03)}
.ag-stats b{display:block;font-size:clamp(30px,4.4vw,48px);line-height:1;background:linear-gradient(95deg,var(--mint),var(--sky) 40%,var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.ag-stats span{display:block;margin-top:8px;color:var(--ag-mut);font-size:13px}
</style>
<style>
:root{--mint:#5eead4;--sky:#7dd3fc;--violet:#a99dff;--rose:#f9a8d4;--ag-bg:#0a0c14;--ag-ink:#eef0ff;--ag-mut:#aeb6cc;--ag-line:rgba(255,255,255,.1)}
.ag-sec{padding:56px 28px;background:var(--ag-bg);color:var(--ag-ink);border-radius:20px}
.ag-eb{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8a93ad;font-weight:700;margin:0 0 12px}
.ag-h2{font-size:clamp(26px,4.4vw,44px);line-height:1.03;margin:0 0 28px;letter-spacing:-.01em}
.ag-grad{background:linear-gradient(95deg,var(--mint),var(--sky) 30%,var(--violet) 60%,var(--rose));background-size:230% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;animation:ag-slide 10s linear infinite}
@keyframes ag-slide{0%{background-position:0% 50%}100%{background-position:230% 50%}}
@media (prefers-reduced-motion: reduce){.ag-grad{animation:none}}
.ag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.ag-card{border:1px solid var(--ag-line);border-radius:22px;padding:22px;background:rgba(255,255,255,.03);transition:transform .4s cubic-bezier(.25,1,.5,1)}
.ag-card:hover{transform:translateY(-4px)}
.ag-ic{display:flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:14px;background:rgba(255,255,255,.06);font-size:20px}
.ag-card h3{margin:16px 0 6px;font-size:21px;letter-spacing:-.01em}
.ag-card p{margin:0;color:var(--ag-mut);font-size:14px;line-height:1.5}
.ag-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:14px 0 0;padding:0}
.ag-tags li{font-size:11.5px;color:var(--ag-mut);background:rgba(255,255,255,.06);border-radius:999px;padding:4px 10px}
.ag-b1{display:inline-block;background:#34d3a3;color:#04121a;border-radius:999px;padding:14px 26px;font-weight:700;text-decoration:none}
.ag-b2{display:inline-block;border:1px solid rgba(255,255,255,.2);color:var(--ag-ink);border-radius:999px;padding:14px 26px;font-weight:600;text-decoration:none}
</style>

Crea una sección «Principios (lista 2 columnas)» responsive y accesible, con el estilo de AIgenzi (fondo oscuro #0a0c14, texto claro y acentos en degradado aurora mint→sky→violet→rose). Un grid de 2 columnas con filas `icono + texto`, para comunicar criterio y valores. HTML + CSS nativo (sin dependencias). Contenedor claro, jerarquía tipográfica y buen contraste. Funciona en móvil y desktop. Respeta prefers-reduced-motion si hay animación.

<section class="ag-sec">
  <p class="ag-eb">Principios</p>
  <h2 class="ag-h2">Agentes potentes. <span class="ag-grad">Criterio humano.</span></h2>
  <div class="ag-prin">
    <div class="ag-prow"><span class="ag-ic">🎯</span><div><h3>Resultado, no juguetes</h3><p>Montamos lo que mueve la aguja de tu negocio.</p></div></div>
    <div class="ag-prow"><span class="ag-ic">🔒</span><div><h3>Tus datos, tuyos</h3><p>Todo bajo tu control y con permisos claros.</p></div></div>
    <div class="ag-prow"><span class="ag-ic">🧠</span><div><h3>El mejor modelo, siempre</h3><p>Elegimos por tarea, sin casarnos con uno.</p></div></div>
    <div class="ag-prow"><span class="ag-ic">📊</span><div><h3>Se mide</h3><p>Si no se mide, no se opera.</p></div></div>
  </div>
</section>
<style>
.ag-prin{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.ag-prow{display:flex;gap:16px;border:1px solid var(--ag-line);border-radius:22px;padding:20px;background:rgba(255,255,255,.03)}
.ag-prow h3{margin:0 0 4px;font-size:17px}
.ag-prow p{margin:0;color:var(--ag-mut);font-size:14px}
</style>
<style>
:root{--mint:#5eead4;--sky:#7dd3fc;--violet:#a99dff;--rose:#f9a8d4;--ag-bg:#0a0c14;--ag-ink:#eef0ff;--ag-mut:#aeb6cc;--ag-line:rgba(255,255,255,.1)}
.ag-sec{padding:56px 28px;background:var(--ag-bg);color:var(--ag-ink);border-radius:20px}
.ag-eb{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8a93ad;font-weight:700;margin:0 0 12px}
.ag-h2{font-size:clamp(26px,4.4vw,44px);line-height:1.03;margin:0 0 28px;letter-spacing:-.01em}
.ag-grad{background:linear-gradient(95deg,var(--mint),var(--sky) 30%,var(--violet) 60%,var(--rose));background-size:230% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;animation:ag-slide 10s linear infinite}
@keyframes ag-slide{0%{background-position:0% 50%}100%{background-position:230% 50%}}
@media (prefers-reduced-motion: reduce){.ag-grad{animation:none}}
.ag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.ag-card{border:1px solid var(--ag-line);border-radius:22px;padding:22px;background:rgba(255,255,255,.03);transition:transform .4s cubic-bezier(.25,1,.5,1)}
.ag-card:hover{transform:translateY(-4px)}
.ag-ic{display:flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:14px;background:rgba(255,255,255,.06);font-size:20px}
.ag-card h3{margin:16px 0 6px;font-size:21px;letter-spacing:-.01em}
.ag-card p{margin:0;color:var(--ag-mut);font-size:14px;line-height:1.5}
.ag-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:14px 0 0;padding:0}
.ag-tags li{font-size:11.5px;color:var(--ag-mut);background:rgba(255,255,255,.06);border-radius:999px;padding:4px 10px}
.ag-b1{display:inline-block;background:#34d3a3;color:#04121a;border-radius:999px;padding:14px 26px;font-weight:700;text-decoration:none}
.ag-b2{display:inline-block;border:1px solid rgba(255,255,255,.2);color:var(--ag-ink);border-radius:999px;padding:14px 26px;font-weight:600;text-decoration:none}
</style>

Crea una sección «Banda de CTA (degradado)» responsive y accesible, con el estilo de AIgenzi (fondo oscuro #0a0c14, texto claro y acentos en degradado aurora mint→sky→violet→rose). Un bloque con `background:linear-gradient(...)` de la paleta, texto oscuro y botón contrastado. HTML + CSS nativo (sin dependencias). Contenedor claro, jerarquía tipográfica y buen contraste. Funciona en móvil y desktop. Respeta prefers-reduced-motion si hay animación.

<section class="ag-cta2">
  <h2>¿Listo para montar tu departamento?</h2>
  <p>Te mostramos cómo en 20 minutos.</p>
  <a class="ag-cta2-b" href="#">Agendar →</a>
</section>
<style>
.ag-cta2{padding:56px 28px;border-radius:20px;text-align:center;color:#04121a;
  background:linear-gradient(135deg,#5eead4,#a99dff 55%,#f9a8d4)}
.ag-cta2 h2{font-size:clamp(26px,4.2vw,42px);margin:0 0 8px;letter-spacing:-.01em}
.ag-cta2 p{margin:0 0 20px;opacity:.85}
.ag-cta2-b{display:inline-block;background:#08131a;color:#fff;border-radius:999px;padding:15px 32px;font-weight:700;text-decoration:none}
</style>
<style>
:root{--mint:#5eead4;--sky:#7dd3fc;--violet:#a99dff;--rose:#f9a8d4;--ag-bg:#0a0c14;--ag-ink:#eef0ff;--ag-mut:#aeb6cc;--ag-line:rgba(255,255,255,.1)}
.ag-sec{padding:56px 28px;background:var(--ag-bg);color:var(--ag-ink);border-radius:20px}
.ag-eb{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8a93ad;font-weight:700;margin:0 0 12px}
.ag-h2{font-size:clamp(26px,4.4vw,44px);line-height:1.03;margin:0 0 28px;letter-spacing:-.01em}
.ag-grad{background:linear-gradient(95deg,var(--mint),var(--sky) 30%,var(--violet) 60%,var(--rose));background-size:230% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;animation:ag-slide 10s linear infinite}
@keyframes ag-slide{0%{background-position:0% 50%}100%{background-position:230% 50%}}
@media (prefers-reduced-motion: reduce){.ag-grad{animation:none}}
.ag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.ag-card{border:1px solid var(--ag-line);border-radius:22px;padding:22px;background:rgba(255,255,255,.03);transition:transform .4s cubic-bezier(.25,1,.5,1)}
.ag-card:hover{transform:translateY(-4px)}
.ag-ic{display:flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:14px;background:rgba(255,255,255,.06);font-size:20px}
.ag-card h3{margin:16px 0 6px;font-size:21px;letter-spacing:-.01em}
.ag-card p{margin:0;color:var(--ag-mut);font-size:14px;line-height:1.5}
.ag-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:14px 0 0;padding:0}
.ag-tags li{font-size:11.5px;color:var(--ag-mut);background:rgba(255,255,255,.06);border-radius:999px;padding:4px 10px}
.ag-b1{display:inline-block;background:#34d3a3;color:#04121a;border-radius:999px;padding:14px 26px;font-weight:700;text-decoration:none}
.ag-b2{display:inline-block;border:1px solid rgba(255,255,255,.2);color:var(--ag-ink);border-radius:999px;padding:14px 26px;font-weight:600;text-decoration:none}
</style>

Crea un «Menú sticky (barra superior)» responsive y accesible. Una barra `position:sticky;top:0` con `backdrop-filter:blur`, logo, lista de enlaces y un botón CTA; en móvil colapsa a hamburguesa. HTML + CSS nativo (sin dependencias). Fondo translúcido con desenfoque, foco visible y buen contraste. Funciona en móvil y en desktop. Respeta prefers-reduced-motion si incluye animación.

<nav class="mnav">
  <a class="mnav-logo" href="#">Estudio</a>
  <ul class="mnav-links">
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Casos</a></li>
    <li><a href="#">Precios</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
  <a class="mnav-cta" href="#">Agendar</a>
</nav>
<style>
.mnav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px 22px;border-bottom:1px solid rgba(17,18,20,.1);
  background:rgba(255,255,255,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.mnav-logo{font-weight:800;letter-spacing:-.01em}
.mnav-links{display:flex;gap:22px;list-style:none;margin:0;padding:0;font-weight:600;font-size:14.5px}
.mnav-links a{color:#3c4046;transition:color .2s ease}
.mnav-links a:hover{color:#111214}
.mnav-cta{background:#111214;color:#fff;border-radius:999px;padding:9px 18px;font-weight:600;font-size:14px}
@media (max-width:720px){.mnav-links{display:none}.mnav{padding:12px 16px}}
</style>

Crea un «Menú móvil (hamburguesa)» responsive y accesible. Un botón con 3 barras que rota a X al abrir; un panel `position:fixed` que se desliza con `clip-path` o `transform`. Bloquea el scroll del fondo y cierra al elegir un enlace. HTML + CSS nativo (sin dependencias). Fondo translúcido con desenfoque, foco visible y buen contraste. Funciona en móvil y en desktop. Respeta prefers-reduced-motion si incluye animación.

<header class="mm">
  <a class="mm-logo" href="#">Estudio</a>
  <button class="mm-burger" type="button" aria-expanded="false" aria-controls="mm-panel" aria-label="Abrir menú">
    <span></span><span></span><span></span>
  </button>
  <nav class="mm-panel" id="mm-panel">
    <a href="#">Servicios</a><a href="#">Casos</a><a href="#">Precios</a><a href="#">Blog</a><a href="#">Contacto</a>
  </nav>
</header>
<style>
.mm{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;position:relative}
.mm-logo{font-weight:800}
.mm-burger{width:44px;height:44px;border:0;background:none;display:grid;place-content:center;gap:5px;cursor:pointer}
.mm-burger span{display:block;width:24px;height:2px;background:#111214;border-radius:2px;transition:transform .35s cubic-bezier(.25,1,.5,1),opacity .25s}
.mm.open .mm-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mm.open .mm-burger span:nth-child(2){opacity:0}
.mm.open .mm-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mm-panel{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;gap:6px;justify-content:center;
  padding:0 34px;background:rgba(255,255,255,.97);backdrop-filter:blur(14px);
  transform:translateY(-100%);transition:transform .5s cubic-bezier(.76,0,.24,1)}
.mm.open .mm-panel{transform:none}
.mm-panel a{font-size:clamp(24px,7vw,44px);font-weight:800;padding:8px 0}
@media (prefers-reduced-motion: reduce){.mm-panel,.mm-burger span{transition:none}}
</style>
<script>
document.querySelectorAll('.mm-burger').forEach(function(b){
  b.addEventListener('click',function(){
    var h=b.closest('.mm'), open=h.classList.toggle('open');
    b.setAttribute('aria-expanded', open?'true':'false');
    document.documentElement.style.overflow = open?'hidden':'';
  });
});
</script>

Crea un «Mega menú (paneles)» responsive y accesible. Un `li` con `position:relative`; al `:hover`/`:focus-within` aparece un panel `position:absolute` con columnas y una entrada escalonada suave. HTML + CSS nativo (sin dependencias). Fondo translúcido con desenfoque, foco visible y buen contraste. Funciona en móvil y en desktop. Respeta prefers-reduced-motion si incluye animación.

<nav class="mg">
  <a href="#">Inicio</a>
  <div class="mg-item">
    <button type="button" aria-haspopup="true" aria-expanded="false">Servicios ▾</button>
    <div class="mg-panel">
      <a href="#"><b>Diseño</b><span>Webs, marca e identidad.</span></a>
      <a href="#"><b>IA</b><span>Agentes y automatización.</span></a>
      <a href="#"><b>Captación</b><span>Leads y campañas.</span></a>
    </div>
  </div>
  <a href="#">Casos</a>
  <a href="#">Precios</a>
</nav>
<style>
.mg{display:flex;align-items:center;gap:22px;padding:14px 20px;font-weight:600}
.mg-item{position:relative}
.mg-item>button{border:0;background:none;font:inherit;cursor:pointer;padding:0}
.mg-panel{position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,8px);
  display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:8px;padding:12px;
  border:1px solid rgba(17,18,20,.12);border-radius:16px;background:#fff;box-shadow:0 24px 50px rgba(0,0,0,.12);
  opacity:0;pointer-events:none;transition:opacity .28s ease,transform .28s cubic-bezier(.25,1,.5,1)}
.mg-item:hover .mg-panel,.mg-item:focus-within .mg-panel{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.mg-panel a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px}
.mg-panel a:hover{background:#f5f5f6}
.mg-panel b{font-size:15px}
.mg-panel span{font-size:12.5px;color:#8a9099;font-weight:500}
@media (prefers-reduced-motion: reduce){.mg-panel{transition:none}}
</style>

Crea un efecto web «Hero Mesh (plexus)». Un <canvas> a pantalla completa dibuja ~80 partículas blancas que derivan (velocidad baja); dos partículas a menos de ~150px se unen con una línea de opacidad = 1 − d/150. El puntero (lerp suave) las REPELE dentro de 150px. Se pausa fuera de viewport (IntersectionObserver), escala por devicePixelRatio (≤2) y respeta prefers-reduced-motion. Datos configurables: densidad, color, distancia de enlace, velocidad, interacción (repel/attract/constellation). Sin dependencias externas (solo HTML/CSS/JS nativo). Respeta prefers-reduced-motion (sin animación si el usuario lo pide) y funciona en móvil. Devuelve el HTML, el CSS y el JS listos para pegar en cualquier proyecto.

<div class="plexus"><canvas></canvas>
  <div class="plexus-in"><h1>Design the Future</h1></div>
</div>
<style>
.plexus{position:relative;min-height:80vh;background:#0d0f12;overflow:hidden}
.plexus canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.plexus-in{position:relative;z-index:1;color:#fff;text-align:center;padding-top:22vh}
</style>
<script>
(function(){
  var host=document.querySelector('.plexus'); if(!host) return;
  if(matchMedia('(prefers-reduced-motion: reduce)').matches) return;
  var cv=host.querySelector('canvas'), x=cv.getContext('2d');
  var dpr=window.innerWidth<=768?1:Math.min(devicePixelRatio||1,2);
  var DENS=80, DIST=150, COL='#ffffff', SPEED=1, W, H, on=true;
  var m={x:0,y:0}, y={x:0,y:0}, P=[];
  function size(){ var r=host.getBoundingClientRect(); W=r.width; H=r.height;
    cv.width=W*dpr; cv.height=H*dpr; x.setTransform(dpr,0,0,dpr,0,0);
    m.x=W/2; m.y=H/2; y.x=W/2; y.y=H/2; }
  addEventListener('resize',size); size();
  var n=window.innerWidth<=768?Math.min(DENS,40):DENS;
  for(var i=0;i<n;i++) P.push({x:Math.random()*W,y:Math.random()*H,
    vx:(Math.random()-.5)*SPEED, vy:(Math.random()-.5)*SPEED});
  host.addEventListener('mousemove',function(e){ var r=host.getBoundingClientRect();
    m.x=e.clientX-r.left; m.y=e.clientY-r.top; },{passive:true});
  host.addEventListener('mouseleave',function(){ m.x=W/2; m.y=H/2; });
  new IntersectionObserver(function(e){ on=e[0].isIntersecting; },{rootMargin:'50px 0px'}).observe(host);
  (function loop(){
    if(on){
      y.x+=(m.x-y.x)*.1; y.y+=(m.y-y.y)*.1;
      x.clearRect(0,0,W,H);
      P.forEach(function(p){
        p.x+=p.vx; p.y+=p.vy;
        if(p.x<0||p.x>W) p.vx*=-1; if(p.y<0||p.y>H) p.vy*=-1;
        var dx=y.x-p.x, dy=y.y-p.y, d=Math.sqrt(dx*dx+dy*dy);
        if(d<150 && d>0){ var f=(150-d)/150; p.x-=dx/d*f*2; p.y-=dy/d*f*2; }
        x.fillStyle=COL; x.beginPath(); x.arc(p.x,p.y,1.5,0,6.2832); x.fill();
      });
      x.strokeStyle=COL; x.lineWidth=1;
      for(var a=0;a<P.length;a++) for(var b=a+1;b<P.length;b++){
        var ex=P[a].x-P[b].x, ey=P[a].y-P[b].y, dd=Math.sqrt(ex*ex+ey*ey);
        if(dd<DIST){ x.globalAlpha=1-dd/DIST; x.beginPath();
          x.moveTo(P[a].x,P[a].y); x.lineTo(P[b].x,P[b].y); x.stroke(); }
      }
      x.globalAlpha=1;
    }
    requestAnimationFrame(loop);
  })();
})();
</script>

Crea un efecto web «Image Hero (composiciones)». Un hero con composiciones conmutables: Single (1 imagen a sangre), Split Duo (2 imágenes mitad y mitad) y Offset Duo (2 imágenes asimétricas). El contenido (eyebrow, título, texto, 2 CTAs) va sobre la imagen con degradado de legibilidad; las imágenes entran con reveal y se mueven con profundidad por puntero (--px/--py × --dep). Cambiar de layout anima geometría con cubic-bezier(.25,1,.5,1). reduced-motion deja todo estático. Sin dependencias externas (solo HTML/CSS/JS nativo). Respeta prefers-reduced-motion (sin animación si el usuario lo pide) y funciona en móvil. Devuelve el HTML, el CSS y el JS listos para pegar en cualquier proyecto.

<div class="ihp" data-layout="single">
  <div class="ihp-tabs"><button data-l="single">Single</button><button data-l="split">Split Duo</button><button data-l="offset">Offset Duo</button></div>
  <div class="ihp-stage">
    <span class="ihp-img i1"></span><span class="ihp-img i2"></span>
    <div class="ihp-content"><p class="eb">Eyebrow</p><h1>Título</h1>
      <p>Descripción breve.</p><a class="btn" href="#">Primario</a></div>
  </div>
</div>
<style>
.ihp{position:relative;overflow:hidden;color:#fff;background:#0d0f12}
.ihp-stage{position:relative;height:64vh}
.ihp-img{position:absolute;opacity:0;width:0;height:0;background-size:cover;
  transform:translate3d(calc(var(--px,0)*var(--dep,20)*1px),calc(var(--py,0)*var(--dep,20)*1px),0);
  transition:transform .15s ease-out,opacity .6s ease,left .5s cubic-bezier(.25,1,.5,1),
    top .5s cubic-bezier(.25,1,.5,1),width .5s cubic-bezier(.25,1,.5,1),height .5s cubic-bezier(.25,1,.5,1)}
.ihp.in .ihp-img{opacity:1}
.ihp[data-layout="split"] .i1{left:0;top:0;width:50%;height:100%}
.ihp[data-layout="split"] .i2{left:50%;top:0;width:50%;height:100%}
.ihp-content{position:absolute;left:0;bottom:0;padding:32px;width:100%;
  background:linear-gradient(0deg,rgba(0,0,0,.65),transparent 72%)}
@media (prefers-reduced-motion: reduce){.ihp-img{transform:none}}
</style>
<script>
(function(){
  var ihp=document.querySelector('.ihp'); if(!ihp) return;
  var t=ihp.querySelectorAll('.ihp-tabs button');
  t.forEach(function(b){ b.onclick=function(){ t.forEach(function(x){x.classList.remove('on')}); b.classList.add('on');
    ihp.setAttribute('data-layout', b.dataset.l); }; });
  new IntersectionObserver(function(e,o){ if(e[0].isIntersecting){ ihp.classList.add('in'); o.disconnect(); } },{threshold:.3}).observe(ihp);
  if(!matchMedia('(hover:hover) and (pointer:fine)').matches) return;
  ihp.addEventListener('mousemove',function(e){ var r=ihp.getBoundingClientRect();
    ihp.style.setProperty('--px',((e.clientX-r.left)/r.width-.5).toFixed(3));
    ihp.style.setProperty('--py',((e.clientY-r.top)/r.height-.5).toFixed(3)); });
})();
</script>

Crea un efecto web «Hero Blinds (PowerPoint)». Igual que el comb (imagen por slices) pero cada franja **escala** desde 0 (scaleY o scaleX según orientación) con origen en el centro, escalonada — efecto persiana. El contenido entra después con fade-up. Sin dependencias externas (solo HTML/CSS/JS nativo). Respeta prefers-reduced-motion (sin animación si el usuario lo pide) y funciona en móvil. Devuelve el HTML, el CSS y el JS listos para pegar en cualquier proyecto.

// blinds-h: scaleY(0) -> 1 (origen centro), stagger por franja
.cb[data-fx="blinds"][data-orient="h"] .cb-strip{transform:scaleY(0);transform-origin:center}
.cb[data-fx="blinds"][data-orient="h"] .cb-strips.run .cb-strip{animation:blindsH .65s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i)*40ms)}
@keyframes blindsH { to { transform: scaleY(1); } }
// vertical: scaleX(0) -> 1

Crea un efecto web «Kinetic Typography (Reveal / Blur In / Pop In)». El texto se divide en palabras (o caracteres). Con un IntersectionObserver se dispara al entrar: Reveal = cada palabra va dentro de una máscara (overflow:hidden) y su span sube de translateY(115%) a 0 con cubic-bezier(.23,1,.32,1) y stagger; Blur In = opacidad 0 + blur(10px) → nítido; Pop In = scale(.6) → 1 con rebote cubic-bezier(.68,-.6,.32,1.6). reduced-motion muestra el texto sin animación. Sin dependencias externas (solo HTML/CSS/JS nativo). Respeta prefers-reduced-motion (sin animación si el usuario lo pide) y funciona en móvil. Devuelve el HTML, el CSS y el JS listos para pegar en cualquier proyecto.

<h2 class="kty reveal">Build motion into meaning</h2>
<style>
.kty .w{display:inline-block}
.kty .w>span{display:inline-block}
.kty.reveal .w{overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.kty.reveal .w>span{transform:translateY(115%);transition:transform .8s cubic-bezier(.23,1,.32,1);transition-delay:calc(var(--i)*.06s)}
.kty.reveal.in .w>span{transform:none}
.kty.blur .w>span{opacity:0;filter:blur(10px);transition:opacity .7s ease,filter .7s ease;transition-delay:calc(var(--i)*.07s)}
.kty.blur.in .w>span{opacity:1;filter:blur(0)}
.kty.pop .w>span{opacity:0;transform:scale(.6);transition:opacity .5s ease,transform .5s cubic-bezier(.68,-.6,.32,1.6);transition-delay:calc(var(--i)*.05s)}
.kty.pop.in .w>span{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.kty .w>span{opacity:1;filter:none;transform:none;transition:none}}
</style>
<script>
document.querySelectorAll('.kty').forEach(function(h){
  h.innerHTML=(h.textContent.trim().split(/\s+/)).map(function(w,i){
    return '<span class="w" style="--i:'+i+'"><span>'+w+'</span></span>'; }).join(' ');
  new IntersectionObserver(function(e,o){ if(e[0].isIntersecting){ h.classList.add('in'); o.disconnect(); } },{threshold:.4}).observe(h);
});
</script>

Crea un efecto web «Titular máquina de escribir». Un `span` con `data-words` (palabras separadas por `|`) cicla: borra letra a letra (rápido), pausa y escribe la siguiente; un **caret** (`::after`/span) parpadea con `steps(1)`. Reserva ancho para no saltar y en bucle; reduced-motion muestra una palabra fija. Sin dependencias externas (solo HTML/CSS/JS nativo). Respeta prefers-reduced-motion (sin animación si el usuario lo pide) y funciona en móvil. Devuelve el HTML, el CSS y el JS listos para pegar en cualquier proyecto.

<h1 class="tw">Diseña tu <span class="tw-w" data-words="próximo producto|nueva idea|futuro">próximo producto</span><span class="tw-c"></span></h1>
<style>
.tw{font-size:clamp(28px,5vw,54px);line-height:1.05;margin:0}
.tw-w{background:linear-gradient(95deg,#5eead4,#7dd3fc 30%,#a99dff 60%,#f9a8d4);-webkit-background-clip:text;background-clip:text;color:transparent}
.tw-c{display:inline-block;width:.07em;height:.92em;margin-left:.06em;background:currentColor;vertical-align:-.06em;animation:tw-caret .8s steps(1) infinite}
@keyframes tw-caret{50%{opacity:0}}
@media (prefers-reduced-motion: reduce){.tw-c{animation:none}}
</style>
<script>
document.querySelectorAll('.tw-w').forEach(function(el){
  var words=el.getAttribute('data-words').split('|');
  if(matchMedia('(prefers-reduced-motion: reduce)').matches) return;
  var wi=0, ch=words[0].length, del=false; el.textContent=words[0];
  (function tick(){
    var w=words[wi];
    if(del){ ch--; el.textContent=w.slice(0,Math.max(0,ch)); if(ch<=0){ del=false; wi=(wi+1)%words.length; } }
    else { ch++; el.textContent=w.slice(0,ch); if(ch>=w.length){ del=true; setTimeout(tick,1400); return; } }
    setTimeout(tick, del?36:66);
  })();
});
</script>

Crea un efecto web «Degradado aurora». Una banda `linear-gradient(95deg, mint, sky, violet, rose)` con `background-size:230% 100%` se anima con `background-position` 0%→230% en bucle. Para texto se recorta con `-webkit-background-clip:text;color:transparent;padding-bottom:.12em`; para objetos se usa como `background`. reduced-motion detiene la animación. Sin dependencias externas (solo HTML/CSS/JS nativo). Respeta prefers-reduced-motion (sin animación si el usuario lo pide) y funciona en móvil. Devuelve el HTML, el CSS y el JS listos para pegar en cualquier proyecto.

<h1 class="au-t">Departamentos de <span class="au-g">inteligencia</span> para tu empresa</h1>
<div class="au-obj"></div>
<style>
:root{--mint:#5eead4;--sky:#7dd3fc;--violet:#a99dff;--rose:#f9a8d4}
.au-g{background:linear-gradient(95deg,var(--mint) 0%,var(--sky) 30%,var(--violet) 60%,var(--rose) 100%);
  background-size:230% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.12em;padding-right:.08em;animation:au-slide 10s linear infinite}
.au-obj{height:120px;border-radius:18px;
  background:linear-gradient(95deg,var(--mint),var(--sky) 30%,var(--violet) 60%,var(--rose));
  background-size:230% 100%;animation:au-slide 10s linear infinite}
@keyframes au-slide{0%{background-position:0% 50%}100%{background-position:230% 50%}}
@media (prefers-reduced-motion: reduce){.au-g,.au-obj{animation:none}}
</style>

Crea un efecto web «Botón magnético (CTA)». El botón sigue al cursor: en mousemove se traslada hacia él (hasta ~16px) con transición cubic-bezier(.25,1,.5,1); al salir vuelve. Incluye variantes Primary/Glass/Outline/Neon, un barrido de brillo (::after que cruza en hover), el ícono se desplaza unos px y un status badge con un punto que emite un pulso (keyframe scale 1→3.4 con fade). Solo puntero fino; fallback estático en táctil; reduced-motion desactiva. Sin dependencias externas (solo HTML/CSS/JS nativo). Respeta prefers-reduced-motion (sin animación si el usuario lo pide) y funciona en móvil. Devuelve el HTML, el CSS y el JS listos para pegar en cualquier proyecto.

<a class="mb mb-primary" href="#">Descubrir <span class="mb-ico">→</span></a>
<a class="mb mb-badge" href="#"><span class="mb-dot"></span> New · Live</a>
<style>
.mb{position:relative;display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:999px;font-weight:700;
  color:#fff;overflow:hidden;transition:transform .4s cubic-bezier(.25,1,.5,1),box-shadow .4s cubic-bezier(.25,1,.5,1)}
.mb-primary{background:#fff;color:#111}
.mb::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);
  transform:translateX(-130%);transition:transform .7s cubic-bezier(.25,1,.5,1)}
.mb:hover::after{transform:translateX(130%)}
.mb-ico{transition:transform .4s cubic-bezier(.25,1,.5,1)}
.mb:hover .mb-ico{transform:translateX(5px)}
.mb-dot{position:relative;width:9px;height:9px;border-radius:50%;background:#19c37d}
.mb-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#19c37d;animation:khmbRadarPulse 1.8s ease-out infinite}
@keyframes khmbRadarPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.4);opacity:0}}
@media (prefers-reduced-motion: reduce){.mb,.mb::after,.mb-ico{transition:none}.mb-dot::after{animation:none}}
</style>
<script>
(function(){
  if(!matchMedia('(hover:hover) and (pointer:fine)').matches) return;
  if(matchMedia('(prefers-reduced-motion: reduce)').matches) return;
  document.querySelectorAll('.mb').forEach(function(el){
    el.addEventListener('mousemove',function(e){ var r=el.getBoundingClientRect();
      var x=(e.clientX-r.left-r.width/2)/r.width, y=(e.clientY-r.top-r.height/2)/r.height;
      el.style.transform='translate('+(x*16)+'px,'+(y*16)+'px)'; });
    el.addEventListener('mouseleave',function(){ el.style.transform=''; });
  });
})();
</script>

Crea un efecto web «Antes/Después». Dos imágenes superpuestas; la de arriba se recorta con `clip-path: inset(0 calc(100% - p) 0 0)` donde p = posición %. Modos conmutables: (a) arrastrar (pointerdown/move) y (b) hover (mousemove sobre el stage; al salir vuelve a 50%). Etiquetas Antes/Después y zoom suave en hover. Sin dependencias externas (solo HTML/CSS/JS nativo). Respeta prefers-reduced-motion (sin animación si el usuario lo pide) y funciona en móvil. Devuelve el HTML, el CSS y el JS listos para pegar en cualquier proyecto.

<div class="ba2"><div class="ba2-stage">
  <img class="after" src="despues.jpg"><div class="before"><img src="antes.jpg"></div><span class="handle"></span>
</div></div>
<style>
.ba2-stage{position:relative;height:300px;overflow:hidden;border-radius:14px;cursor:ew-resize}
.ba2-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p,50%)) 0 0)}
.before img{filter:grayscale(1)}
.handle{position:absolute;top:0;left:var(--p,50%);height:100%;width:2px;background:#fff}
</style>
<script>
var st=document.querySelector('.ba2-stage'), mode='drag';
function set(v){ st.style.setProperty('--p', Math.max(0,Math.min(100,v))+'%'); }
function pos(e){ var r=st.getBoundingClientRect(); return (e.clientX-r.left)/r.width*100; }
st.addEventListener('pointerdown', function(e){ if(mode==='drag'){ st.setPointerCapture(e.pointerId); set(pos(e)); } });
st.addEventListener('pointermove', function(e){ if(mode==='hover'||e.buttons) set(pos(e)); });
st.addEventListener('pointerleave', function(){ if(mode==='hover') set(50); });
</script>

Crea un efecto web «Video modal». Una miniatura con botón de play abre un <dialog>/overlay con el video (iframe o <video>), que solo se carga al abrir (lazy); se cierra con Escape, botón y clic en el fondo. Foco atrapado mientras está abierto. Sin dependencias externas (solo HTML/CSS/JS nativo). Respeta prefers-reduced-motion (sin animación si el usuario lo pide) y funciona en móvil. Devuelve el HTML, el CSS y el JS listos para pegar en cualquier proyecto.

<button class="vm-btn" data-video="https://www.youtube.com/embed/VIDEO">▶ Ver video</button>
<div class="vm" hidden><button class="vm-x" aria-label="Cerrar">✕</button><div class="vm-body"></div></div>
<style>
.vm{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;animation:vmIn .4s ease both}
.vm[hidden]{display:none}
.vm-body{width:min(80vw,640px);aspect-ratio:16/9;background:#000;border-radius:12px;animation:vmPop .5s cubic-bezier(.33,1,.68,1) both}
@keyframes vmIn{from{opacity:0}to{opacity:1}}
@keyframes vmPop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.vm,.vm-body{animation:none}}
</style>
<script>
document.querySelectorAll('.vm-btn').forEach(function(b){
  b.addEventListener('click',function(){
    var m=b.nextElementSibling; var body=m.querySelector('.vm-body');
    var f=document.createElement('iframe'); f.src=b.dataset.video; f.allow='autoplay; fullscreen'; f.allowFullscreen=true;
    body.appendChild(f); m.hidden=false;
    m.querySelector('.vm-x').onclick=function(){ m.hidden=true; body.innerHTML=''; };
  });
});
</script>

Crea un efecto web «Reproductor de audio». Barras (waveform) que representan el audio; se colorean según el progreso. Play/pausa con <audio>, actualización por timeupdate; accesible con teclado y aria. Sin dependencias externas (solo HTML/CSS/JS nativo). Respeta prefers-reduced-motion (sin animación si el usuario lo pide) y funciona en móvil. Devuelve el HTML, el CSS y el JS listos para pegar en cualquier proyecto.

<div class="ap"><button class="ap-play" aria-label="Reproducir">▶</button>
  <div class="ap-wave"></div><audio class="ap-a" src="audio.mp3" preload="none"></audio></div>
<style>
.ap-wave{display:flex;gap:3px;align-items:center;height:40px}
.ap-wave i{display:block;width:3px;background:#ccc;border-radius:2px;transform-origin:center;
  transition:background-color .3s ease}
.ap.on .ap-wave i{background:#111;animation:apw .7s ease-in-out infinite alternate;animation-delay:calc(var(--d) * -0.6s)}
@keyframes apw{from{transform:scaleY(.35)}to{transform:scaleY(1.1)}}
@media (prefers-reduced-motion: reduce){.ap.on .ap-wave i{animation:none}}
</style>
<script>
document.querySelectorAll('.ap').forEach(function(p){
  var wave=p.querySelector('.ap-wave'), a=p.querySelector('.ap-a'), b=p.querySelector('.ap-play');
  for(var i=0;i<40;i++){ var s=document.createElement('i'); s.style.height=(8+Math.random()*28)+'px';
    s.style.setProperty('--d',i); wave.appendChild(s); }
  b.onclick=function(){ var on=a.paused; on?a.play():a.pause(); b.textContent=on?'❚❚':'▶'; p.classList.toggle('on',on); };
});
</script>

Crea un efecto web «Marquee infinito (loop perfecto)». La pista contiene DOS grupos idénticos (cada uno con su gap incluyendo un padding-right igual al gap) y se anima translateX(0 → -50%) en linear infinito: al llegar a -50% el segundo grupo queda exactamente donde empezó el primero → loop sin salto. Overflow oculto + máscara de degradado en los extremos (edge fade) y pausa en :hover. Extra opcional (sibling blur): en cada frame se mide la distancia de cada ítem al centro del contenedor y se aplica blur/opacidad/scale proporcional (centro nítido, laterales borrosos). Sin dependencias externas (solo HTML/CSS/JS nativo). Respeta prefers-reduced-motion (sin animación si el usuario lo pide) y funciona en móvil. Devuelve el HTML, el CSS y el JS listos para pegar en cualquier proyecto.

<div class="mq2"><div class="mq2-track">
  <div class="mq2-group"><img src="a.jpg"><img src="b.jpg"><img src="c.jpg"></div>
  <div class="mq2-group" aria-hidden="true"><img src="a.jpg"><img src="b.jpg"><img src="c.jpg"></div>
</div></div>
<style>
.mq2{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq2-track{display:flex;width:max-content;animation:mq 30s linear infinite}
.mq2-group{display:flex;gap:16px;padding-right:16px}          /* el padding = gap ⇒ loop perfecto */
.mq2:hover .mq2-track{animation-play-state:paused}
.mq2-item{width:180px;height:112px;border-radius:12px;overflow:hidden}
.mq2-item img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.mq2-track{animation:none}}
</style>
<script>
// Sibling blur opcional: centro nítido, laterales desenfocados.
(function(){
  var mq=document.querySelector('.mq2'); if(!mq) return;
  if(matchMedia('(prefers-reduced-motion: reduce)').matches) return;
  var track=mq.querySelector('.mq2-track'), items=mq.querySelectorAll('.mq2-item'), base=[];
  var tl0=track.getBoundingClientRect().left;
  items.forEach(function(el,i){ var r=el.getBoundingClientRect(); base[i]=(r.left-tl0)+r.width/2; });
  (function frame(){
    var r=mq.getBoundingClientRect(), cx=r.left+r.width/2, half=r.width/2, tl=track.getBoundingClientRect().left;
    items.forEach(function(el,i){ var d=Math.min(1,Math.abs((tl+base[i])-cx)/half);
      el.style.filter='blur('+(d*4).toFixed(2)+'px) saturate('+(1-d*.3).toFixed(2)+')';
      el.style.opacity=(1-d*.5).toFixed(2); el.style.transform='scale('+(1-d*.08).toFixed(3)+')'; });
    requestAnimationFrame(frame);
  })();
})();
</script>

Crea un efecto web «Carrusel Coverflow 3D». Stage con perspective:1500px; cada tarjeta por distancia d a la activa: translateX(d·ancho·.55) translateZ(−|d|·120) rotateY(−d·32°) scale(max(.6,1−|d|·.14)); autoplay/puntos/flechas/swipe. Cada tarjeta es una card con dos caras (flip en Y); clic en la activa la gira para ver el reverso. Sin dependencias externas (solo HTML/CSS/JS nativo). Respeta prefers-reduced-motion (sin animación si el usuario lo pide) y funciona en móvil. Devuelve el HTML, el CSS y el JS listos para pegar en cualquier proyecto.

// posicionar por distancia d a la activa
c.style.transform='translateX('+(d*w*.55)+'px) translateZ('+(-ad*120)+'px) rotateY('+(-d*32)+'deg) scale('+Math.max(.6,1-ad*.14)+')';
// flip de la card activa
.cf-card{perspective:1500px}
.cf-flip{transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.cf-card.flipped .cf-flip{transform:rotateY(180deg)}
.cf-face{position:absolute;inset:0;backface-visibility:hidden}
.cf-face.back{transform:rotateY(180deg)}
// clic activa -> flip; clic otra -> traer al frente

Crea un efecto web «Reveal duotono». Media con filter:grayscale(1); dos pseudo-elementos: uno con la sombra (mix-blend-mode:lighten) y otro con el realce (mix-blend-mode:multiply). Al :hover, filter:none y opacidad 0 de los overlays → aparece el color real, con transición suave. Compatible con Safari (no usa filter:url sobre <video>). Sin dependencias externas (solo HTML/CSS/JS nativo). Respeta prefers-reduced-motion (sin animación si el usuario lo pide) y funciona en móvil. Devuelve el HTML, el CSS y el JS listos para pegar en cualquier proyecto.

<div class="duo"><img src="foto.jpg" alt="">
  <span class="duo-hint">Pasa el cursor</span></div>
<style>
.duo{position:relative;border-radius:18px;overflow:hidden;isolation:isolate;cursor:pointer;--sombra:#0a0d1a;--realce:#6f66b8}
.duo img{width:100%;height:220px;object-fit:cover;display:block;filter:grayscale(1) contrast(1.02);transition:filter .55s ease}
.duo::before{content:"";position:absolute;inset:0;z-index:1;background:var(--sombra);mix-blend-mode:lighten;transition:opacity .5s ease}
.duo::after{content:"";position:absolute;inset:0;z-index:2;background:var(--realce);mix-blend-mode:multiply;transition:opacity .5s ease}
.duo:hover img{filter:none}
.duo:hover::before,.duo:hover::after{opacity:0}
.duo-hint{position:absolute;left:12px;bottom:12px;z-index:3;color:#fff;font-size:12px;font-weight:600;background:rgba(0,0,0,.4);padding:4px 10px;border-radius:999px}
</style>

Crea un efecto web «Carrusel sticky horizontal con cards». Contenedor con encabezado sticky y un track flex; el scroll vertical traslada el track (translateX = progreso·recorrido) con snap. Cada tarjeta es un flip-card (front imagen / back contenido) que se gira al hacer clic. Sin dependencias externas (solo HTML/CSS/JS nativo). Respeta prefers-reduced-motion (sin animación si el usuario lo pide) y funciona en móvil. Devuelve el HTML, el CSS y el JS listos para pegar en cualquier proyecto.

.hs-sticky{position:sticky;top:14px}
.hs-track{display:flex;gap:14px;will-change:transform}    /* track.style.transform = translateX(-p*travel) */
.hscard{width:240px;height:230px;perspective:800px}
.hs-flip{width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.hscard.flipped .hs-flip{transform:rotateY(180deg)}
.hs-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:14px;overflow:hidden}
.hs-face.back{transform:rotateY(180deg)}
// clic en una card -> classList.toggle('flipped')

Crea un efecto web «Divisor animado al scroll». Una línea (o degradado) que se dibuja de 0 a 100% cuando su sección entra en viewport, usando IntersectionObserver + transición/animation; distintos estilos (sólido, guiones, glow). Sin dependencias externas (solo HTML/CSS/JS nativo). Respeta prefers-reduced-motion (sin animación si el usuario lo pide) y funciona en móvil. Devuelve el HTML, el CSS y el JS listos para pegar en cualquier proyecto.

<div class="sd2" data-anim="left" data-style="solid"><span class="sd2-l"></span></div>
<div class="sd2" data-anim="center" data-style="dashed"><span class="sd2-l"></span></div>
<div class="sd2" data-anim="right" data-style="dotted"><span class="sd2-l"></span></div>
<div class="sd2" data-anim="center" data-style="glow"><span class="sd2-l"></span></div>
<style>
.sd2-l{display:block;height:2px;width:72%;border-radius:2px;background:#111;transform:scaleX(0);
  transition:transform 1.2s cubic-bezier(.165,.84,.44,1)}
.sd2[data-anim="left"] .sd2-l{transform-origin:left}
.sd2[data-anim="center"] .sd2-l{transform-origin:center;margin:0 auto}
.sd2[data-anim="right"] .sd2-l{transform-origin:right;margin-left:auto}
.sd2[data-style="dashed"] .sd2-l{background:none;height:0;border-top:2px dashed #111}
.sd2[data-style="dotted"] .sd2-l{background:none;height:0;border-top:2px dotted #111}
.sd2[data-style="glow"] .sd2-l{background:linear-gradient(90deg,#111,#f15a24,#111);box-shadow:0 0 16px rgba(241,90,36,.6)}
.sd2.in .sd2-l{transform:scaleX(1)}
@media (prefers-reduced-motion: reduce){.sd2-l{transition:none;transform:none}}
</style>
<script>
document.querySelectorAll('.sd2').forEach(function(el){
  new IntersectionObserver(function(e){ e.forEach(function(x){ el.classList.toggle('in', x.isIntersecting); }); },{threshold:.4}).observe(el);
});
</script>

Crea un efecto web «Split Scroll (media fija + pasos)». Contenedor con scroll propio a dos columnas: la izquierda con la media en position:sticky (se queda fija), la derecha con N pasos. Un IntersectionObserver (root = contenedor) marca el paso activo → la media hace crossfade (smart swap) y el texto activo sube con fade. Una línea vertical muestra el progreso. En móvil se apila. Sin dependencias externas (solo HTML/CSS/JS nativo). Respeta prefers-reduced-motion (sin animación si el usuario lo pide) y funciona en móvil. Devuelve el HTML, el CSS y el JS listos para pegar en cualquier proyecto.

<div class="ss2"><div class="ss2-media">
    <img class="ss2-img on" src="1.jpg"><img class="ss2-img" src="2.jpg"><img class="ss2-img" src="3.jpg">
    <span class="ss2-prog"><i></i></span>
  </div>
  <div class="ss2-steps">
    <section class="ss2-step on" data-i="0">Paso 1</section>
    <section class="ss2-step" data-i="1">Paso 2</section>
    <section class="ss2-step" data-i="2">Paso 3</section>
  </div>
</div>
<style>
.ss2{display:grid;grid-template-columns:1fr 1fr;height:380px;overflow:auto}
.ss2-media{position:sticky;top:0;height:380px;overflow:hidden}
.ss2-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.ss2-img.on{opacity:1}
.ss2-prog{position:absolute;right:12px;top:16px;bottom:16px;width:3px;background:rgba(255,255,255,.35)}
.ss2-prog i{display:block;width:100%;height:0;background:#fff;transition:height .35s ease}
.ss2-step{min-height:380px;display:flex;align-items:center;opacity:.35;transform:translateY(12px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.25,1,.5,1)}
.ss2-step.on{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.ss2-img,.ss2-step{transition:none}}
</style>
<script>
(function(){
  var wrap=document.querySelector('.ss2'); if(!wrap) return;
  var steps=wrap.querySelectorAll('.ss2-step'), imgs=wrap.querySelectorAll('.ss2-img'), prog=wrap.querySelector('.ss2-prog i');
  function act(i){ steps.forEach(function(s,k){ s.classList.toggle('on',k===i); imgs[k]&&imgs[k].classList.toggle('on',k===i); });
    if(prog) prog.style.height=((i+1)/steps.length*100)+'%'; }
  var io=new IntersectionObserver(function(es){ es.forEach(function(e){ if(e.isIntersecting) act(+e.target.dataset.i); }); },
    {root:wrap,threshold:.6});
  steps.forEach(function(s){ io.observe(s); }); act(0);
})();
</script>

Crea un efecto web «Progreso de scroll lateral con dos estilos (Hitos / Kinetic)». Una línea fija vertical a un costado (derecha por defecto, conmutable a izquierda) cuyo tramo relleno = scrollY/(alto−viewport). En la variante Hitos van hitos (uno por sección/heading); con IntersectionObserver o por offsets se marca el hito activo y se muestra su etiqueta; clic en un hito → scroll suave. La variante Kinetic es un riel con etiqueta de porcentaje, relleno (scaleY), punto que baja y anillo que rota (rotate = progreso·360°); transiciones suaves y se oculta al 100%. Muestra el % numérico. reduced-motion: sin animación. Sin dependencias externas (solo HTML/CSS/JS nativo). Respeta prefers-reduced-motion (sin animación si el usuario lo pide) y funciona en móvil. Devuelve el HTML, el CSS y el JS listos para pegar en cualquier proyecto.

<aside class="sp">
  <span class="sp-track"><i></i></span>
  <a class="sp-ms" href="#sec-1"><span>Intro</span></a>
  <a class="sp-ms" href="#sec-2"><span>Proceso</span></a>
  <a class="sp-ms" href="#sec-3"><span>Cierre</span></a>
</aside>
<style>
.sp{position:fixed;right:18px;top:50%;transform:translateY(-50%);height:60vh;display:flex;flex-direction:column;
  justify-content:space-between;align-items:flex-start;z-index:100}
.sp-track{position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:rgba(17,18,20,.2)}
.sp-track i{display:block;width:100%;height:0;background:#111;transition:height .2s linear}
.sp-ms{position:relative;display:flex;align-items:center;gap:8px;text-decoration:none}
.sp-ms::before{content:"";width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid rgba(17,18,20,.25);
  transition:transform .3s cubic-bezier(.25,1,.5,1),background .3s ease,border-color .3s ease}
.sp-ms span{font-size:12px;color:#8a9099;opacity:0;transform:translateX(-4px);transition:.3s}
.sp:hover .sp-ms span{opacity:1;transform:none}
.sp-ms.on::before{background:#111;border-color:#111;transform:scale(1.35)}
.sp-ms.on span{opacity:1;color:#111;font-weight:700}
@media (prefers-reduced-motion: reduce){.sp-track i,.sp-ms::before,.sp-ms span{transition:none}}
</style>
<script>
(function(){
  var sp=document.querySelector('.sp'); if(!sp) return;
  var fill=sp.querySelector('.sp-track i'), ms=sp.querySelectorAll('.sp-ms');
  function upd(){
    var h=document.documentElement, p=h.scrollTop/(h.scrollHeight-h.clientHeight||1);
    fill.style.height=(p*100)+'%';
    var mid=h.scrollTop+h.clientHeight*.4, idx=0;
    ms.forEach(function(m,k){ var t=document.querySelector(m.getAttribute('href')); if(t && t.offsetTop<=mid) idx=k; });
    ms.forEach(function(m,k){ m.classList.toggle('on',k===idx); });
  }
  addEventListener('scroll',upd,{passive:true}); addEventListener('resize',upd); upd();
})();
</script>

<aside class="kprogress is-visible" id="kprogress" role="progressbar" aria-label="Progreso de la página" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
  <span class="kprogress__label" aria-hidden="true">00</span>
  <span class="kprogress__track" aria-hidden="true">
    <span class="kprogress__fill"></span>
    <span class="kprogress__dot"><i aria-hidden="true"></i></span>
  </span>
  <span class="kprogress__unit" aria-hidden="true">%</span>
</aside>
<style>
.kprogress{position:fixed;right:28px;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s}
.kprogress.is-visible{opacity:1;visibility:visible}
.kprogress__label{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:9px;line-height:1;letter-spacing:.16em;color:#111;opacity:.55;min-width:2ch;text-align:center}
.kprogress__track{position:relative;width:1px;height:160px;background:rgba(17,18,20,.2);border-radius:1px}
.kprogress__fill{position:absolute;left:0;top:0;width:1px;height:100%;background:#111;border-radius:1px;transform:scaleY(var(--kp,0));transform-origin:top;transition:transform .32s cubic-bezier(.16,1,.3,1)}
.kprogress__dot{position:absolute;left:50%;top:calc(var(--kp,0)*100%);width:7px;height:7px;border-radius:50%;background:#111;transform:translate(-50%,-50%);transition:top .32s cubic-bezier(.16,1,.3,1);box-shadow:0 0 0 5px rgba(255,255,255,.55);z-index:2;pointer-events:auto;cursor:grab;touch-action:none}
.kprogress__dot::before{content:"";position:absolute;inset:-12px;border-radius:50%}
.kprogress__dot:active{cursor:grabbing}
.kprogress__dot i{position:absolute;inset:-7px;display:block;border:1px solid rgba(17,18,20,.25);border-radius:50%;transform:rotate(calc(var(--kp,0)*360deg));transition:transform .55s cubic-bezier(.16,1,.3,1)}
.kprogress__unit{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:8px;line-height:1;letter-spacing:.12em;color:#8a9099;opacity:.8}
.kprogress.is-dragging .kprogress__fill,.kprogress.is-dragging .kprogress__dot,.kprogress.is-dragging .kprogress__dot i{transition:none}
@media(max-width:640px){.kprogress{right:14px;gap:8px}.kprogress__track{height:130px}.kprogress__label{font-size:8px}.kprogress__unit{font-size:7px}}
@media(prefers-reduced-motion:reduce){.kprogress__fill,.kprogress__dot,.kprogress__dot i{transition:none}}
</style>
<script>
(function(){
  var el=document.getElementById('kprogress'); if(!el) return;
  var label=el.querySelector('.kprogress__label');
  var dot=el.querySelector('.kprogress__dot'), track=el.querySelector('.kprogress__track');
  function update(){
    var max=document.documentElement.scrollHeight-innerHeight;
    var p=max>0?Math.min(1,Math.max(0,scrollY/max)):0;
    el.style.setProperty('--kp',p);
    el.setAttribute('aria-valuenow',String(Math.round(p*100)));
    if(label) label.textContent=String(Math.round(p*100)).padStart(2,'0');
  }
  function setFromY(y){
    if(!track) return;
    var r=track.getBoundingClientRect();
    var p=Math.max(0,Math.min(1,(y-r.top)/r.height));
    el.style.setProperty('--kp',p);
    var max=document.documentElement.scrollHeight-innerHeight;
    scrollTo(0,p*max);
  }
  if(dot&&track){
    var dragging=false, prevBehavior='';
    dot.addEventListener('pointerdown',function(e){
      dragging=true; el.classList.add('is-dragging');
      prevBehavior=document.documentElement.style.scrollBehavior;
      document.documentElement.style.scrollBehavior='auto';
      try{dot.setPointerCapture(e.pointerId)}catch(x){}
      e.preventDefault(); setFromY(e.clientY);
    });
    dot.addEventListener('pointermove',function(e){ if(!dragging) return; e.preventDefault(); setFromY(e.clientY); });
    function endDrag(e){ if(!dragging) return; dragging=false; el.classList.remove('is-dragging'); document.documentElement.style.scrollBehavior=prevBehavior; try{dot.releasePointerCapture(e.pointerId)}catch(x){} }
    dot.addEventListener('pointerup',endDrag); dot.addEventListener('pointercancel',endDrag);
  }
  addEventListener('scroll',update,{passive:true}); addEventListener('resize',update); update();
})();
</script>

Crea un efecto web «Cursor reveal (lista)». Una lista de filas; una imagen flotante sigue al cursor mostrando el medio de la fila bajo el puntero. Solo con puntero fino; se oculta al salir. Sin dependencias externas (solo HTML/CSS/JS nativo). Respeta prefers-reduced-motion (sin animación si el usuario lo pide) y funciona en móvil. Devuelve el HTML, el CSS y el JS listos para pegar en cualquier proyecto.

<ul class="cr">
  <li data-img="a.jpg">Proyecto A</li><li data-img="b.jpg">Proyecto B</li><li data-img="c.jpg">Proyecto C</li>
</ul>
<style>
.cr{list-style:none;padding:0;position:relative}
.cr li{padding:16px 0;border-bottom:1px solid #ddd;font-weight:600;cursor:pointer}
.cr-prev{position:fixed;left:0;top:0;width:180px;height:120px;border-radius:10px;background:#111;background-size:cover;
  opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.85);
  transition:opacity .4s ease,transform .6s cubic-bezier(.19,1,.22,1);z-index:50;will-change:left,top}
.cr-prev.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
</style>
<script>
(function(){
  if(!matchMedia('(hover:hover) and (pointer:fine)').matches) return;
  var list=document.querySelector('.cr'); if(!list) return;
  var p=document.createElement('div'); p.className='cr-prev'; document.body.appendChild(p);
  var cx=innerWidth/2,cy=innerHeight/2,tx=cx,ty=cy,raf=null;
  function track(){ cx+=(tx-cx)*.15; cy+=(ty-cy)*.15; p.style.left=cx+'px'; p.style.top=cy+'px'; raf=requestAnimationFrame(track); }
  list.addEventListener('mousemove',function(e){ tx=e.clientX; ty=e.clientY; if(!raf) track(); });
  list.querySelectorAll('li').forEach(function(li){
    li.addEventListener('mouseenter',function(){ p.style.backgroundImage='url('+li.dataset.img+')'; p.classList.add('on'); });
  });
  list.addEventListener('mouseleave',function(){ p.classList.remove('on'); cancelAnimationFrame(raf); raf=null; });
})();
</script>

Crea un efecto web «Aura ambiental». Un contenedor con varias manchas de color (radial-gradients o blobs con blur) en esquinas, animadas con desplazamiento/scale lentos y alternos; opacidad baja para no competir con el contenido. Sin dependencias externas (solo HTML/CSS/JS nativo). Respeta prefers-reduced-motion (sin animación si el usuario lo pide) y funciona en móvil. Devuelve el HTML, el CSS y el JS listos para pegar en cualquier proyecto.

<div class="aura" aria-hidden="true"><span></span><span></span><span></span></div>
<style>
.aura{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.aura span{position:absolute;width:42vmax;height:42vmax;border-radius:50%;filter:blur(60px);opacity:.35}
.aura span:nth-child(1){background:#f15a24;top:-16%;left:-10%;animation:aura 18s ease-in-out infinite}
.aura span:nth-child(2){background:#5b7cfa;bottom:-18%;right:-8%;animation:aura 22s ease-in-out infinite reverse}
.aura span:nth-child(3){background:#19c37d;top:20%;right:20%;animation:aura 26s ease-in-out infinite}
@keyframes aura{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6%,4%,0) scale(1.15)}}
@media (prefers-reduced-motion: reduce){.aura span{animation:none}}
</style>

Crea un efecto web «Box con tilt suave». En mousemove se calcula la posición relativa del cursor; un bucle con requestAnimationFrame interpola (lerp ~0.12) el tilt (rotateX/rotateY ≤8°) y la posición del spotlight (--mx/--my), evitando saltos. El box usa perspective + preserve-3d y una capa ::before con radial-gradient tenue que sigue el cursor. Suave al salir (vuelve a 0). Sin dependencias externas (solo HTML/CSS/JS nativo). Respeta prefers-reduced-motion (sin animación si el usuario lo pide) y funciona en móvil. Devuelve el HTML, el CSS y el JS listos para pegar en cualquier proyecto.

<div class="mbox"><h3>Título</h3><p>Contenido.</p></div>
<style>
.mbox{position:relative;border-radius:16px;padding:24px;background:#fff;border:1px solid #e6e6e8;
  transform-style:preserve-3d;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:box-shadow .5s cubic-bezier(.25,1,.5,1)}
.mbox::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;pointer-events:none;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(124,108,255,.22),transparent 62%)}
.mbox:hover::before{opacity:1}
</style>
<script>
var b=document.querySelector('.mbox'), trx=0,try_=0,crx=0,cry=0,tmx=50,tmy=50,cmx=50,cmy=50,run=false;
function loop(){ crx+=(trx-crx)*.12; cry+=(try_-cry)*.12; cmx+=(tmx-cmx)*.12; cmy+=(tmy-cmy)*.12;
  b.style.setProperty('--rx',crx+'deg'); b.style.setProperty('--ry',cry+'deg');
  b.style.setProperty('--mx',cmx+'%'); b.style.setProperty('--my',cmy+'%');
  if(Math.abs(trx-crx)>.01||Math.abs(try_-cry)>.01||Math.abs(tmx-cmx)>.05) requestAnimationFrame(loop); else run=false; }
function kick(){ if(!run){ run=true; requestAnimationFrame(loop); } }
b.addEventListener('mousemove',function(e){ var r=b.getBoundingClientRect(),px=(e.clientX-r.left)/r.width,py=(e.clientY-r.top)/r.height;
  try_=(px-.5)*8; trx=(.5-py)*8; tmx=px*100; tmy=py*100; kick(); });
b.addEventListener('mouseleave',function(){ trx=try_=0; tmx=tmy=50; kick(); });
</script>

Crea un efecto web «Acordeón FAQ». Cada pregunta es un botón accesible (aria-expanded). El panel se abre animando `grid-template-rows` de 0fr a 1fr con cubic-bezier(.25,1,.5,1) (~.45s), con el interior en overflow:hidden; el párrafo entra con opacity/translate. El icono rota de + a ×. Nada de height fijo ni saltos. Sin dependencias externas (solo HTML/CSS/JS nativo). Respeta prefers-reduced-motion (sin animación si el usuario lo pide) y funciona en móvil. Devuelve el HTML, el CSS y el JS listos para pegar en cualquier proyecto.

<div class="faq">
  <div class="faq-i">
    <button class="faq-q" aria-expanded="false">¿Pregunta? <span class="faq-ico">+</span></button>
    <div class="faq-a"><div><p>Respuesta…</p></div></div>
  </div>
</div>
<style>
.faq-i{border-bottom:1px solid var(--line,#e5e5e5)}
.faq-q{width:100%;display:flex;justify-content:space-between;gap:12px;align-items:center;background:none;border:0;
  padding:18px 0;font:inherit;font-weight:700;cursor:pointer;text-align:left}
.faq-ico{transition:transform .4s cubic-bezier(.25,1,.5,1)}
.faq-i.open .faq-ico{transform:rotate(45deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.25,1,.5,1)}
.faq-i.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{margin:0 0 18px;opacity:0;transform:translateY(-4px);transition:opacity .4s ease .05s,transform .4s ease .05s}
.faq-i.open .faq-a p{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.faq-a,.faq-ico,.faq-a p{transition:none}}
</style>
<script>
document.querySelectorAll('.faq-q').forEach(function(b){
  b.addEventListener('click',function(){
    var it=b.parentElement, open=it.classList.toggle('open');
    b.setAttribute('aria-expanded', open?'true':'false');
  });
});
</script>

Crea un efecto web «Cards apiladas → abanico + flip». Mazo de N cartas apiladas; al clic se abren en abanico (tx=c·74, ty=−|c|·16, rot=c·13°, stagger) con un scrim `backdrop-filter: blur`. Con el abanico abierto, mousemove inclina cada carta hacia el puntero con fuerza ∝ cercanía (lerp). Cada carta es arrastrable (pointer events) y, si el pinch no arrastra, se VOLTEA (flip en Y) para mostrar su reverso. Sin dependencias externas (solo HTML/CSS/JS nativo). Respeta prefers-reduced-motion (sin animación si el usuario lo pide) y funciona en móvil. Devuelve el HTML, el CSS y el JS listos para pegar en cualquier proyecto.

// abanico (al clic)
card.style.transform = open ? 'translate('+(c*74)+'px,'+(-Math.abs(c)*16-6)+'px) rotate('+(c*13)+'deg)' : 'translate('+(c*7)+'px,'+(-i*3)+'px) rotate('+(c*2)+'deg)';
// flip al tocar (si no se arrastró)
if (moved < 5) card.classList.toggle('flipped');
.fan-card-i{perspective:900px}
.fan-flip{transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.fan-card.flipped .fan-flip{transform:rotateY(180deg)}
.fan-face{position:absolute;inset:0;backface-visibility:hidden}
.fan-face.back{transform:rotateY(180deg)}

Crea un efecto web «Flow field (estelas)». Cada partícula calcula un ángulo a partir de un campo de ruido (sin/cos o Perlin) y avanza; el lienzo se aclara un poco por frame (rgba con alfa bajo) para dejar estelas. Se recicla la partícula al salir. Implementación 100% local (HTML/CSS/JS o canvas), sin dependencias. Respeta prefers-reduced-motion (sin animación si el usuario lo pide), usa devicePixelRatio (≤2) y se pausa fuera de viewport (IntersectionObserver).

// campo de flujo + estelas
for(p of P){
  var a = Math.sin(p.y*0.006+t*0.2)*3.1 + Math.cos(p.x*0.007-t*0.15)*2.0;
  p.px=p.x; p.py=p.y;
  p.x+=Math.cos(a)*1.2; p.y+=Math.sin(a)*1.2;
  if(out(p)) reset(p);
  stroke(p.px,p.py,p.x,p.y);
}
ctx.fillStyle='rgba(10,12,16,.08)'; ctx.fillRect(0,0,w,h);  // estela

Crea un efecto web «Atractor caótico (Clifford)». Se iteran las ecuaciones de Clifford (o de Jong/Lorenz) y se grafican los puntos con alfa bajo; los parámetros a,b,c,d definen la forma. Implementación 100% local (HTML/CSS/JS o canvas), sin dependencias. Respeta prefers-reduced-motion (sin animación si el usuario lo pide), usa devicePixelRatio (≤2) y se pausa fuera de viewport (IntersectionObserver).

nx = sin(a*y) + c*cos(a*x);
ny = sin(b*x) + d*cos(b*y);
x=nx; y=ny; plot(center + scale*(x,y));

Crea un efecto web «Boids (bandada)». Para cada boid, mirar vecinos dentro de un radio: separación (evitar choques), alineación (promediar velocidad) y cohesión (ir al centro); limitar velocidad y envolver en los bordes. Implementación 100% local (HTML/CSS/JS o canvas), sin dependencias. Respeta prefers-reduced-motion (sin animación si el usuario lo pide), usa devicePixelRatio (≤2) y se pausa fuera de viewport (IntersectionObserver).

ax += sep + (centro - b)*c1 + (vMedia - b.v)*c2;
limitarVelocidad(b); b += b.v; envolver(b, w, h);

Crea un efecto web «Phyllotaxis (espiral áurea)». Cada punto i va a ángulo `i·137.5°` y radio `√i·k`; el ángulo áureo produce empaquetamiento natural. Se colorea por índice y gira lento. Implementación 100% local (HTML/CSS/JS o canvas), sin dependencias. Respeta prefers-reduced-motion (sin animación si el usuario lo pide), usa devicePixelRatio (≤2) y se pausa fuera de viewport (IntersectionObserver).

var a = i * Math.PI * (3 - Math.sqrt(5));  // ángulo áureo
var r = Math.sqrt(i) * k;
point(cos(a)*r, sin(a)*r);

Crea un efecto web «Interferencia / moiré». Dos capas con `repeating-linear-gradient` de líneas finas, una rotada/desplazada lentamente respecto de la otra; el patrón de interferencia emerge al moverse. Implementación 100% local (HTML/CSS/JS o canvas), sin dependencias. Respeta prefers-reduced-motion (sin animación si el usuario lo pide), usa devicePixelRatio (≤2) y se pausa fuera de viewport (IntersectionObserver).

.moire{position:relative}
.moire::before,.moire::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,#111 0 1px,transparent 1px 8px);}
.moire::after{transform:rotate(6deg) translateX(var(--p));}

Crea un efecto web «Texto en partículas». Se dibuja el texto en un canvas oculto, se muestrean los píxeles opacos como objetivos y cada partícula se mueve con lerp hacia su objetivo. Implementación 100% local (HTML/CSS/JS o canvas), sin dependencias. Respeta prefers-reduced-motion (sin animación si el usuario lo pide), usa devicePixelRatio (≤2) y se pausa fuera de viewport (IntersectionObserver).

// muestrear texto -> objetivos
fx = offctx.getImageData(...);    // alpha>128 => punto
// cada frame
p.x += (p.tx - p.x) * 0.08;  p.y += (p.ty - p.y) * 0.08;

Crea un efecto web «Logo en partículas». Se dibuja el logo SVG en un canvas oculto, se muestrean sus píxeles opacos como objetivos y cada partícula viaja con lerp hacia ellos (ciclo formar/dispersar). Implementación 100% local (HTML/CSS/JS o canvas), sin dependencias. Respeta prefers-reduced-motion (sin animación si el usuario lo pide), usa devicePixelRatio (≤2) y se pausa fuera de viewport (IntersectionObserver).

img.src='/img/logoestandar.svg';
offctx.drawImage(img, ...);       // muestrear alpha>120 => objetivo
p.cx += (p.x - p.cx) * 0.06;      // formar
// ciclo: cada 7s se dispersa y vuelve

Crea un efecto web «Campo ASCII». Grilla de celdas; la “densidad” de cada celda sale de un ruido animado y elige un carácter de la rampa; se colorea según el valor. Implementación 100% local (HTML/CSS/JS o canvas), sin dependencias. Respeta prefers-reduced-motion (sin animación si el usuario lo pide), usa devicePixelRatio (≤2) y se pausa fuera de viewport (IntersectionObserver).

var v = (sin(c*.3+t) + cos(r*.3-t) + 1)/4;
var gi = floor(v * (glyphs.length-1));
fillText(glyphs[gi], c*cw, r*ch);

Crea un efecto web «Page loaders». Overlay a pantalla completa que se desvanece al terminar. Variantes: Contador (0→100 + barra), Cortina (N paneles que suben escalonados), Wordmark (palabra que se rellena izq→der), Logo (el logo SVG se revela lateralmente con cadencia levemente discontinua, sin números), Anillo (stroke-dashoffset + %), Logo zoom (revelado lateral del logo y, al completar, scale(34) que cubre y revela). Respeta reduced-motion. Sin dependencias externas (solo HTML/CSS/JS nativo). Respeta prefers-reduced-motion (sin animación si el usuario lo pide) y funciona en móvil. Devuelve el HTML, el CSS y el JS listos para pegar en cualquier proyecto.

// Logo (revelado lateral discontinuo, sin números)
var im=el.querySelector('.ldr-logo.lat'), v=0;
var t=setInterval(function(){ v=Math.min(100, v + (Math.random()<.28 ? 0 : (Math.random()*16|0)));
  im.style.clipPath='inset(0 '+(100-v)+'% 0 0)'; if(v>=100){ clearInterval(t); fade(el); } }, 70);
// Logo zoom: igual + al terminar  im.style.transform='scale(34)';  -> cubre y revela
// Cortina: N paneles .ldr-cur i { transform:translateY(-102%) } con stagger

Crea un efecto web «Volver arriba (arrastrable + progreso)». Botón circular fijo cuyo contorno (SVG stroke-dashoffset) = % de scroll; aparece al pasar cierto umbral. Es ARRASTRABLE con pointer events (pointerdown/move/up cambian su translate); si el pointerup ocurre sin haber movido (umbral), hace scrollTo({top:0,behavior:'smooth'}). Sin dependencias externas (solo HTML/CSS/JS nativo). Respeta prefers-reduced-motion (sin animación si el usuario lo pide) y funciona en móvil. Devuelve el HTML, el CSS y el JS listos para pegar en cualquier proyecto.

<button class="stt"><svg viewBox="0 0 64 64"><circle class="trk" cx="32" cy="32" r="28"/><circle class="bar" cx="32" cy="32" r="28"/></svg><b>0%</b><span>↑</span></button>
<style>
.stt{position:fixed;right:18px;bottom:18px;width:60px;height:60px;border-radius:50%;border:0;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.18);cursor:grab;display:grid;place-items:center}
.stt svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.trk{fill:none;stroke:#ececee;stroke-width:4}.bar{fill:none;stroke:#111;stroke-width:4;stroke-linecap:round}
</style>
<script>
var b=document.querySelector('.stt'), bar=b.querySelector('.bar'), C=2*Math.PI*28;
bar.style.strokeDasharray=C;
addEventListener('scroll', function(){ var h=document.documentElement, p=h.scrollTop/(h.scrollHeight-h.clientHeight||1);
  bar.style.strokeDashoffset=C*(1-p); b.querySelector('b').textContent=Math.round(p*100)+'%'; });
var dg=false,sx,sy,ox=0,oy=0,mv=0;
b.addEventListener('pointerdown',function(e){ dg=true;mv=0;sx=e.clientX-ox;sy=e.clientY-oy;b.setPointerCapture(e.pointerId);e.preventDefault(); });
b.addEventListener('pointermove',function(e){ if(!dg)return; var nx=e.clientX-sx,ny=e.clientY-sy; mv=Math.max(mv,Math.abs(nx-ox)+Math.abs(ny-oy)); ox=nx;oy=ny; b.style.transform='translate('+ox+'px,'+oy+'px)'; });
b.addEventListener('pointerup',function(){ dg=false; if(mv<6) scrollTo({top:0,behavior:'smooth'}); });
</script>

Crea un efecto web «Auditor de frontend». Un panel dev-only que inspecciona la página: peso transferido por tipo (doc/css/js/img/video), nº de recursos, animaciones activas y long tasks; se abre con un botón flotante y es read-only. Sin dependencias externas (solo HTML/CSS/JS nativo). Respeta prefers-reduced-motion (sin animación si el usuario lo pide) y funciona en móvil. Devuelve el HTML, el CSS y el JS listos para pegar en cualquier proyecto.

// Auditor mínimo (dev-only): peso por tipo + recursos + long tasks.
(function(){
  if(!location.search.includes('debug')) return;
  var r=performance.getEntriesByType('resource');
  var byType={}; r.forEach(function(x){ var t=x.initiatorType||'other'; byType[t]=(byType[t]||0)+(x.transferSize||0); });
  var lt=performance.getEntriesByType('longtask');
  var box=document.createElement('pre');
  box.style.cssText='position:fixed;left:12px;bottom:12px;z-index:99999;background:#111;color:#0f0;padding:12px;font:12px monospace;max-width:340px;white-space:pre-wrap';
  box.textContent='Recursos: '+r.length+'\n'+Object.keys(byType).map(function(k){return k+': '+Math.round(byType[k]/1024)+'KB';}).join('\n')
    +'\nlong tasks: '+lt.length;
  document.body.appendChild(box);
})();

Crea «Chatbox embebible (cómo se cuelga)». Se define `window.AGENTE = { mode, endpoint, title, subtitle, welcome, placeholder, accent, position }` **antes** de incluir `agente.js` (defer). El widget se monta solo; en modo inline se puede montar a mano con `window.Agente.mount({ mode:'inline', after:'#seccion' })`. Un solo archivo, reutilizable en cualquier página. Sin dependencias externas si es posible. Cuida contraste, foco visible y aria. Funciona en móvil y desktop. Respeta prefers-reduced-motion si hay animación.

<!-- 1) Configura el agente ANTES del script -->
<script>
window.AGENTE = {
  mode: 'floating',                     // 'floating' (burbuja) | 'inline' (embebido)
  endpoint: '/agente/chat.php',         // backend que responde
  title: 'Asistente', subtitle: 'Departamentos de IA',
  welcome: 'Hola 👋 ¿En qué te ayudo?',
  placeholder: 'Escribe tu mensaje…',
  accent: '#34d3a3', position: 'right'  // burbuja abajo-derecha
};
</script>
<!-- 2) Incluye el widget UNA vez -->
<script src="/agente.js" defer></script>
<!-- (Opcional) Montaje inline dentro de la página -->
<div id="chat-inline"></div>
<script>
  addEventListener('load', function () {
    window.Agente.mount({ mode: 'inline', target: '#chat-inline', endpoint: '/agente/chat.php' });
  });
</script>

Crea «Burbujas de chatbot». Contenedor en columna; las burbujas usan `align-self` y `border-radius` asimétrico (esquina inferior del lado correspondiente a 4px) para señalar el emisor; el usuario lleva el degradado de marca y texto oscuro. Sin dependencias externas si es posible. Cuida contraste, foco visible y aria. Funciona en móvil y desktop. Respeta prefers-reduced-motion si hay animación.

<div class="chat">
  <div class="chat-body">
    <div class="msg a">Hola 👋 ¿En qué te ayudo?</div>
    <div class="msg u">Necesito facturar a un cliente.</div>
    <div class="msg a">Perfecto, ¿me pasas su RUT y el detalle?</div>
    <div class="typing">escribiendo…</div>
  </div>
</div>
<style>
.chat{background:#0c0e18;border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:16px;color:#eef0ff;font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
.chat-body{display:flex;flex-direction:column;gap:10px}
.msg{max-width:82%;padding:10px 13px;border-radius:14px;white-space:normal;word-wrap:break-word}
.msg.a{align-self:flex-start;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);border-bottom-left-radius:4px}
.msg.u{align-self:flex-end;background:linear-gradient(135deg,#34d3a3,#7c6cff 55%,#ffb3d1);color:#04121a;border-bottom-right-radius:4px}
.typing{align-self:flex-start;color:#9aa7b6;font-size:13px;padding:4px 6px}
</style>

Crea «Accesibilidad base (checklist)». Un enlace «saltar al contenido» que aparece al enfocar, `:focus-visible` con outline notorio, `prefers-reduced-motion` que anula animaciones/scroll suave, y una clase `.sr-only` para texto solo de lectores. Contraste AA en todo par texto/fondo. Sin dependencias externas si es posible. Cuida contraste, foco visible y aria. Funciona en móvil y desktop. Respeta prefers-reduced-motion si hay animación.

<a class="skip" href="#main">Saltar al contenido</a>
<main id="main" tabindex="-1"> … </main>
<style>
/* 1) Skip link: oculto hasta recibir foco por teclado */
.skip{position:absolute;left:12px;top:-56px;z-index:100;background:#111214;color:#fff;
  padding:10px 16px;border-radius:10px;transition:top .2s ease}
.skip:focus{top:12px}
/* 2) Foco visible SIEMPRE (no lo elimines) */
:focus-visible{outline:2px solid #6655f5;outline-offset:2px;border-radius:4px}
/* 3) Texto solo para lectores de pantalla */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* 4) Respetar el movimiento reducido */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
/* 5) Contraste: texto principal sobre fondo claro/oscuro con ratio AA (>=4.5:1) */
</style>