:root{color-scheme:light;font-family:system-ui,sans-serif;color:#2a2118;background:#fffbf7;line-height:1.5}
body{margin:0;--accent:#24584e;--tint:#e4f3ef;--edge:#cde1d9}
body.perro{--accent:#624526;--tint:#f7ead7;--edge:#ead8bc}
a{color:inherit}
.wrap{width:min(1080px,calc(100% - 36px));margin-inline:auto}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:20px}
.logo img{border-radius:50%}
.logo{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:1.2rem;text-decoration:none}
.masthead nav,.filters{display:flex;gap:12px;flex-wrap:wrap}
.hero{background:var(--tint);border-radius:28px;padding:clamp(25px,6vw,80px);margin-block:10px 40px}
.hero-brand{display:flow-root}
.hero-mascot{float:right;border-radius:50%;width:clamp(100px,25vw,240px);height:auto;margin-inline-start:16px}
@media(max-width:460px){.hero-mascot{float:none;display:block;margin:0 auto 12px;width:136px}}
.eyebrow{color:var(--accent);font-size:.83rem;font-weight:700}
h1{font-size:clamp(2rem,6vw,4.4rem);line-height:1.04;max-width:18ch;margin:.35em 0}
.hero p{font-size:1.1rem;max-width:48ch}
.button,.shop,.filters a{display:inline-block;text-decoration:none;border-radius:999px;padding:.65rem 1rem;font-weight:650}
.button,.shop{background:var(--accent);color:white}
.filters{margin-bottom:20px}
.filters a{border:1px solid var(--edge);background:white}
.filters a[aria-current]{background:var(--accent);color:white}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:14px}
article{padding:22px;background:white;border:1px solid var(--edge);border-radius:18px}
article h3{font-size:1rem;margin-block:.5em}
.price{font-weight:800;font-size:1.5rem;margin-block:.5rem}
.checked,footer{font-size:.88rem;color:#514c58}
footer{border-top:1px solid var(--edge);margin-top:44px!important;padding-block:16px}
a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}