body { font-family: "DM Sans", sans-serif; }
[hidden] { display: none !important; }
.shell { width: min(100% - 2rem, 76rem); margin-inline: auto; }
.brand, h1, h2 { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 800; }
.brand { font-size: 1.55rem; letter-spacing: .025em; line-height: 1; }
.brand-icon { display: grid; place-items: center; border-radius: .5rem; width: 2.2rem; height: 2.2rem; background: #facc15; color: #0f172a; font-size: 2rem; }
.search-icon { position: absolute; top: .82rem; left: .9rem; width: .8rem; height: .8rem; border: 2px solid #cbd5e1; border-radius: 50%; pointer-events: none; }
.search-icon::after { content: ""; position: absolute; width: .35rem; height: 2px; background: #cbd5e1; top: .59rem; left: .52rem; rotate: 45deg; }
#categorias button { border: 1px solid #475569; color: #e2e8f0; border-radius: 999px; padding: .4rem .8rem; font-size: .81rem; font-weight: 700; cursor: pointer; }
#categorias button:hover { border-color: #facc15; }
#categorias button[aria-pressed="true"] { color: #0f172a; background: #facc15; border-color: #facc15; }
.hero { position: relative; isolation: isolate; background-image: linear-gradient(115deg,#0f172a 25%,#1b2943); }
.hero-copy { position: relative; z-index: 1; padding: clamp(1.6rem,5vw,4rem); }
h1 { max-width: 16ch; font-size: clamp(2.65rem,6.5vw,5.35rem); line-height: .95; text-wrap: balance; }
h1 em { font-style: normal; color: #facc15; }
h2 { font-size: clamp(1.9rem,4vw,2.5rem); line-height: 1.05; }
.hero-art { position: absolute; inset: 0 0 0 57%; display: grid; place-items: center; background: repeating-linear-gradient(135deg, transparent 0 18px,#94a3b81b 18px 19px); mask-image: linear-gradient(90deg,transparent,#000 35%); }
.hero-art span { display: grid; place-items: center; width: clamp(8rem,18vw,16rem); aspect-ratio: 1; color: #facc15; border: 2px solid #facc1560; border-radius: 30%; background: #facc1514; font: 800 clamp(7rem,16vw,14rem)/.8 "Barlow Condensed",sans-serif; rotate: -14deg; }
.cta { align-items: center; justify-content: center; gap: .55rem; background: #facc15; color: #0f172a; padding: .65rem .85rem; border-radius: .55rem; font-weight: 800; cursor: pointer; }
.cta:hover { background: #fde047; }
:focus-visible { outline: 3px solid #0284c7; outline-offset: 3px; }
.product-photo { aspect-ratio: 4 / 3; background: white; }
.product-photo img { width: 100%; height: 100%; object-fit: contain; padding: 1.25rem; }
.stars { display: inline-block; color: transparent; background: linear-gradient(90deg,#a16207 var(--fill),#cbd5e1 var(--fill)); background-clip: text; letter-spacing: .08em; }
@media (max-width: 700px) { .hero-art { opacity: .27; inset-inline-start: 38%; } }