:root{--amarillo:#F7C600;--negro:#000;--azul:#1D4ED8;--azul-osc:#0E2A7A;--papel:#FFFFFF;--gris:#5B6170;--linea:#E3E5EA}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Archivo,system-ui,sans-serif;color:var(--negro);background:var(--papel);line-height:1.55}
a{color:inherit}
a:focus-visible{outline:3px solid var(--azul);outline-offset:3px}
.top{display:flex;justify-content:space-between;align-items:center;padding:1rem clamp(1rem,4vw,3rem);background:var(--negro);color:#fff}
.marca{font-weight:900;font-stretch:125%;font-size:1.4rem;text-decoration:none;color:var(--amarillo);letter-spacing:.02em}
.top nav a{margin-left:1.25rem;text-decoration:none;font-weight:600}
.top nav a:hover{color:var(--amarillo)}
.cinta{height:14px;background:repeating-linear-gradient(-45deg,var(--amarillo) 0 18px,var(--negro) 18px 36px)}
.pie{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;padding:2rem clamp(1rem,4vw,3rem);background:var(--negro);color:#bbb;font-size:.9rem}

/* Índice de creaciones */
.intro{padding:clamp(3rem,8vw,6rem) clamp(1rem,4vw,3rem) 2rem;max-width:72rem;margin:auto}
.intro h1{font-size:clamp(2.6rem,7vw,5rem);font-weight:900;font-stretch:115%;line-height:1}
.intro p{max-width:40rem;margin-top:1rem;font-size:1.15rem;color:var(--gris)}
.grupo{max-width:72rem;margin:auto;padding:2.5rem clamp(1rem,4vw,3rem)}
.grupo>h2{font-size:1.9rem;font-weight:800;font-stretch:110%;padding-bottom:.4rem;border-bottom:4px solid var(--negro)}
.grupo>p{color:var(--gris);margin:.6rem 0 1.5rem}
.lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea)}
.bloque{background:var(--papel);padding:1.6rem;display:flex;flex-direction:column;gap:.75rem}
.bloque h3{font-size:1.3rem;font-weight:800}
.bloque p{color:var(--gris);flex:1}
.cat-web .bloque{border-top:6px solid var(--amarillo)}
.cat-apps .bloque{border-top:6px solid var(--azul)}
.cat-plugins .bloque{border-top:6px solid var(--negro)}
.btn{align-self:flex-start;display:inline-block;padding:.65rem 1.2rem;background:var(--negro);color:#fff;text-decoration:none;font-weight:700}
.btn:hover{background:var(--azul)}

/* Landing "muy pronto disponible" */
.pronto{min-height:70vh;display:grid;place-content:center;padding:4rem clamp(1rem,4vw,3rem);background:var(--amarillo);text-align:left}
.pronto .nombre{font-size:clamp(1.3rem,3vw,1.9rem);font-weight:800;font-stretch:110%}
.pronto h1{font-size:clamp(3rem,11vw,8.5rem);font-weight:900;font-stretch:125%;line-height:.92;max-width:12ch;margin:.5rem 0 1.5rem}
.pronto .resumen{max-width:38rem;font-size:1.15rem}
.pronto .volver{margin-top:2rem}
@media (prefers-reduced-motion:no-preference){.pronto h1{animation:entra .7s ease-out both}}
@keyframes entra{from{opacity:0;transform:translateY(.3em)}to{opacity:1;transform:none}}