:root{
  --bg:#fcf8fc; --surface:#fff; --ink:#2a1230; --muted:#75687a;
  --line:#eadcec; --accent:#aa0060; --accent-2:#7b2a96; --accent-ink:#fff; --chip:#f4e9f5;
  --shadow:0 1px 2px rgba(60,10,60,.05),0 8px 24px rgba(123,42,150,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg) radial-gradient(60% 100% at 15% 0,rgba(123,42,150,.14),transparent 70%) top/100% 760px no-repeat,radial-gradient(60% 100% at 85% 0,rgba(170,0,96,.12),transparent 70%) top/100% 760px no-repeat;color:var(--ink);font:16px/1.55 Inter,system-ui,sans-serif}
a{color:inherit}
.announce{background:linear-gradient(90deg,var(--accent-2),var(--accent));color:#fff;text-align:center;padding:9px 16px;font:600 .85rem Inter,sans-serif;letter-spacing:.02em;min-height:38px;display:grid;place-items:center;overflow:hidden}
.announce-msg{margin:0;transition:opacity .35s,transform .35s}
.announce-msg.out{opacity:0;transform:translateY(-8px)}
.announce{background:linear-gradient(90deg,var(--accent-2),var(--accent));color:#fff;text-align:center;padding:9px 16px;font:600 .85rem Inter,sans-serif;letter-spacing:.02em;min-height:38px;display:grid;place-items:center;overflow:hidden}
.announce-msg{margin:0;transition:opacity .35s,transform .35s}
.announce-msg.out{opacity:0;transform:translateY(-8px)}
@media (max-width:600px){.announce{font-size:.8rem}}
@media (prefers-reduced-motion:reduce){.announce-msg{transition:none}}
.top-wrap{position:sticky;top:0;height:0;z-index:10}
.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:22px max(16px,5vw);background:transparent;border-bottom:1px solid transparent;transition:padding .3s,background .3s,box-shadow .3s,border-color .3s}
.top.scrolled{padding:8px max(16px,5vw);background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(123,42,150,.08)}
.logo{display:block}
.logo img{width:min(360px,40vw);height:auto;display:block;transition:width .3s}
.top.scrolled .logo img{width:min(150px,40vw)}
nav{display:flex;gap:26px;align-items:center}
.nav-right{justify-content:flex-end}
nav a{text-decoration:none;color:var(--ink);font-size:.95rem;font-weight:500;position:relative;padding:4px 0}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent-2),var(--accent));transform:scaleX(0);transition:transform .2s}
nav a:hover::after{transform:scaleX(1)}
.icon-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--chip);color:var(--accent-2)}
.icon-btn::after{display:none}
/* El menú de categorías vive en el botón flotante (abanico): el header solo lleva logo y lupa */
.nav-left{display:none}
.nav-right a:not(.icon-btn){display:none}
.logo{grid-column:2}
.nav-right{grid-column:3}
body{padding-bottom:90px}
@media (max-width:820px){
  .top{grid-template-columns:1fr auto 1fr;padding:8px 16px 6px;background:rgba(255,255,255,.88);backdrop-filter:blur(10px)}
  .logo{justify-self:center;grid-column:2}
  .nav-right{grid-column:3;justify-self:end}
  .logo img{width:175px}
  .top.scrolled .logo img{width:130px}
}
main{max-width:1180px;margin:0 auto;padding:0 16px}
.hero{padding:250px 0 40px;max-width:760px;margin:0 auto;text-align:center}
.eyebrow{color:var(--accent-2);font-weight:600;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;margin:0 0 14px}
h1{font:700 clamp(1.9rem,4.5vw,3rem)/1.08 Fraunces,serif;margin:0 0 18px;letter-spacing:-.02em}
h1 em{font-style:italic;background:linear-gradient(90deg,var(--accent-2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:1.15rem;color:var(--muted);margin:0}
button,.btn{cursor:pointer;border:0;border-radius:12px;padding:14px 20px;background:linear-gradient(135deg,var(--accent-2),var(--accent));color:var(--accent-ink);font:600 .95rem Inter,sans-serif}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.niches{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:8px 0 32px}
.chip{background:var(--chip);color:var(--ink);padding:10px 16px;border-radius:999px;border:1px solid transparent;font-weight:500}
.chip[aria-pressed="true"]{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:var(--accent-ink)}
.catalog-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}
h2{font:700 1.7rem Fraunces,serif;margin:0}
select{padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .2s}
.card:hover{transform:translateY(-3px)}
.thumb{aspect-ratio:4/3;display:grid;place-items:center;font-size:3.6rem}
.card-body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.tag{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.card h3{margin:0;font-size:1.05rem;line-height:1.3}
.card p{margin:0;color:var(--muted);font-size:.9rem}
.card-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding-top:10px}
.price{font:700 1.2rem Fraunces,serif}
.card .btn{padding:9px 14px;text-decoration:none;font-size:.88rem}
.empty{color:var(--muted);text-align:center;padding:40px}
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;padding:72px 0;margin-top:56px;border-top:1px solid var(--line)}
.why h3{font:700 1.2rem Fraunces,serif;margin:0 0 6px}
.why p{margin:0;color:var(--muted)}
footer{border-top:1px solid var(--line);padding:28px max(16px,5vw);color:var(--muted);font-size:.85rem}
footer p{max-width:1180px;margin:0 auto}

nav a[aria-current]{color:var(--accent-2)}
nav a[aria-current]::after{transform:scaleX(1)}
.title-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.clear{padding:7px 14px;border-radius:999px;background:var(--chip);color:var(--accent-2);font:600 .85rem Inter,sans-serif}
.clear:hover{background:var(--accent-2);color:#fff}
.clear[hidden]{display:none}

@media (max-width:820px){.hero{padding-top:128px}}
@media (max-width:480px){h2{font-size:1.4rem}select{max-width:100%}}

/* ===== Móvil: botón flotante + menú círculo expansivo ===== */
.fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:60;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--accent-2),var(--accent));box-shadow:0 10px 26px rgba(123,42,150,.45);transition:transform .25s}
  .fab:active{transform:scale(.92)}
  .fab svg{grid-area:1/1;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s,opacity .25s}
  .fab .ic-x{opacity:0;transform:rotate(-90deg) scale(.6)}
  .fab[aria-expanded="true"]{background:#fff;color:var(--accent-2)}
  .fab[aria-expanded="true"] .ic-grid{opacity:0;transform:rotate(90deg) scale(.6)}
  .fab[aria-expanded="true"] .ic-x{opacity:1;transform:none}
  .mmenu{--ox:50%;--oy:100%;display:block;position:fixed;inset:0;z-index:50;color:#fff;background:radial-gradient(80% 60% at 90% 5%,rgba(170,0,96,.95),transparent 70%),linear-gradient(160deg,#5a1c70,#7b2a96 55%,#aa0060);clip-path:circle(0 at var(--ox) var(--oy));visibility:hidden;transition:clip-path .5s cubic-bezier(.7,0,.2,1),visibility 0s .5s;overflow:hidden}
  .mmenu.open{clip-path:circle(160% at var(--ox) var(--oy));visibility:visible;transition:clip-path .65s cubic-bezier(.7,0,.2,1),visibility 0s}
  .mmenu-head{position:absolute;top:56px;left:22px;right:22px;display:grid;gap:6px;opacity:0;transform:translateY(14px);transition:opacity .4s,transform .5s}
  .mmenu.open .mmenu-head{opacity:1;transform:none;transition-delay:.18s}
  .mmenu-title{margin:0;font:600 .75rem Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
  .mmenu-big{margin:0;font:700 2.2rem/1.05 Fraunces,serif}
  .mmenu-all{justify-self:start;margin-top:6px;color:#fff;font-weight:600;font-size:.95rem;text-decoration:none;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.16)}
  .fan{position:absolute;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));width:62px;height:62px}
  .bubble{--s:80px;position:absolute;left:50%;top:50%;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:50%;background:var(--c);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;text-decoration:none;color:#2a1230;box-shadow:0 10px 24px rgba(0,0,0,.25);transform:translate(0,0) scale(.3);opacity:0;transition:transform .3s,opacity .2s}
  .mmenu.open .bubble{transform:translate(calc(var(--x) * var(--k,1)),calc(var(--y) * var(--k,1)));opacity:1;transition:transform .55s cubic-bezier(.34,1.56,.64,1) var(--d),opacity .25s var(--d)}
  .bubble:active{filter:brightness(.95)}
  .bubble[aria-current]{outline:3px solid #fff;outline-offset:2px}
  .bubble .em{font-size:1.7rem;line-height:1}
  .bubble .nm{font:700 .68rem/1.1 Inter,sans-serif;letter-spacing:-.01em;white-space:nowrap}
body.menu-open{overflow:hidden}
@media (min-width:821px){
  .mmenu-head{top:12vh;left:8vw}
  .mmenu-title{font-size:.85rem}
  .mmenu-big{font-size:clamp(3rem,6vw,5.2rem)}
  .mmenu-all{font-size:1.05rem;padding:11px 20px}
  .fan{right:32px;bottom:32px}
  .fab{right:32px;bottom:32px;width:68px;height:68px}
  .bubble{--s:92px;--k:1.35}
  .bubble .em{font-size:2.6rem}
  .bubble:hover{filter:brightness(1.05)}
  .fab:hover{transform:scale(1.06)}
}
@media (prefers-reduced-motion:reduce){.mmenu,.mmenu.open,.mmenu-head,.bubble,.fab svg{transition:none!important}}

/* ===== Escritorio: mega panel por categoría ===== */
.mega{display:none}
@media (min-width:821px){
  .fab,.mmenu{display:none!important}
  body{padding-bottom:0}
  .top{position:relative}
  .nav-left{display:flex}
  .nav-right a:not(.icon-btn){display:inline}
  .nav-right{gap:14px}
  .nav-left{gap:18px;justify-content:flex-start;transition:transform .3s}
  .nav-right{justify-content:flex-end;transition:transform .3s}
  .logo img{width:min(320px,26vw)}
  .top.scrolled .logo img{width:min(150px,30vw)}
  nav a[aria-current]::after{transform:scaleX(1)}

  /* A: panel que se abre con círculo desde el enlace */
  .mega{--ox:50%;--oy:0;display:block;position:absolute;left:0;right:0;top:100%;z-index:5;color:#fff;background:radial-gradient(70% 120% at 90% 0,rgba(170,0,96,.9),transparent 70%),linear-gradient(135deg,#5a1c70,#7b2a96 60%,#8e1f78);border-radius:0 0 28px 28px;box-shadow:0 30px 60px rgba(90,28,112,.35);clip-path:circle(0 at var(--ox) var(--oy));visibility:hidden;transition:clip-path .45s cubic-bezier(.7,0,.2,1),visibility 0s .45s}
  .mega.open{clip-path:circle(160% at var(--ox) var(--oy));visibility:visible;transition:clip-path .6s cubic-bezier(.7,0,.2,1),visibility 0s}
  .mega-in{max-width:1180px;margin:0 auto;padding:32px max(16px,4vw) 36px;display:grid;grid-template-columns:minmax(220px,1fr) 2.4fr;gap:44px;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .4s}
  .mega.open .mega-in{opacity:1;transform:none;transition-delay:.15s}
  .mega-l p{margin:0 0 6px;font:600 .72rem Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
  .mega-l h3{margin:0 0 14px;font:700 2.4rem/1 Fraunces,serif}
  .mega-l ul{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:2px}
  .mega-l li a{display:block;padding:7px 0;color:#fff;text-decoration:none;opacity:.88;font-weight:500}
  .mega-l li a:hover{opacity:1;text-decoration:underline}
  .mega-all{display:inline-block;color:#fff;font-weight:600;text-decoration:none;padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.18)}
  .mega-all:hover{background:#fff;color:var(--accent-2)}
  .mega-prods{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .mega-card{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:20px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;text-decoration:none;transition:transform .25s,background .25s}
  .mega-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.22)}
  .mega-card .mt{aspect-ratio:4/3;border-radius:14px;display:grid;place-items:center;font-size:3rem}
  .mega-card b{font-size:.95rem;line-height:1.3}
  .mega-card span{font:700 1.05rem Fraunces,serif}
}
@media (prefers-reduced-motion:reduce){.mega,.mega.open,.mega-in{transition:none!important}}

/* ===== Buscador estilo Spotlight ===== */
.icon-btn{border:0;cursor:pointer;padding:0;line-height:0}
.icon-btn svg{display:block;width:20px;height:20px}
.spot{position:fixed;inset:0;z-index:80;display:flex;justify-content:center;align-items:flex-start;padding:16vh 16px 16px;background:rgba(42,18,48,.38);backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
.spot.open{opacity:1;visibility:visible;transition:opacity .2s}
.spot-wrap{position:relative;width:min(660px,100%)}
.spot-box{position:relative;z-index:1;width:100%;max-height:min(560px,72vh);display:flex;flex-direction:column;background:rgba(255,255,255,.98);border:1px solid rgba(255,255,255,.7);border-radius:22px;box-shadow:0 40px 90px rgba(42,18,48,.38),0 0 0 1px rgba(123,42,150,.08);overflow:hidden;transform:translateY(-14px) scale(.96);transition:transform .35s cubic-bezier(.34,1.4,.64,1)}
.spot.open .spot-box{transform:none}
.spot-bar{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid var(--line)}
.spot-bar svg{width:26px;height:26px;flex:none;fill:none;stroke:var(--accent-2);stroke-width:2;stroke-linecap:round}
.spot-bar input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 1.45rem Inter,sans-serif;color:var(--ink)}
.spot-bar input::placeholder{color:#b3a6b8}
kbd{font:600 .7rem Inter,sans-serif;padding:3px 7px;border-radius:6px;background:var(--chip);color:var(--muted);border:1px solid var(--line)}
.spot-list{list-style:none;margin:0;padding:8px;overflow-y:auto;overscroll-behavior:contain}
.spot-group{padding:10px 14px 6px;font:600 .7rem Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.spot-item{display:flex;align-items:center;gap:14px;padding:10px 14px;border-radius:14px;cursor:pointer}
.spot-item[aria-selected="true"]{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#fff}
.si{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:1.4rem;flex:none}
.st{flex:1;min-width:0;display:grid;line-height:1.25}
.st b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st small{color:var(--muted);font-size:.82rem}
.spot-item[aria-selected="true"] small{color:rgba(255,255,255,.8)}
.spot-item mark{background:none;color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.spot-item:not([aria-selected="true"]) mark{color:var(--accent)}
.sk{opacity:0;font-weight:700}
.spot-item[aria-selected="true"] .sk{opacity:.85}
.spot-empty{padding:34px 20px;text-align:center;color:var(--ink)}
.spot-empty small{color:var(--muted)}
.spot-foot{display:flex;gap:18px;margin:0;padding:10px 20px;border-top:1px solid var(--line);color:var(--muted);font-size:.76rem;background:rgba(244,233,245,.5)}
.spot-foot kbd{margin-right:4px}
@media (max-width:820px){.spot{padding-top:10vh}.spot-bar input{font-size:1.15rem}.spot-foot{display:none}.spot-box{max-height:68vh}}
@media (prefers-reduced-motion:reduce){.spot,.spot-box{transition:none!important}}

/* ===== Mascota ===== */
.hero-cta{display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:15px 24px;font-size:1rem;box-shadow:0 10px 24px rgba(123,42,150,.28);transition:transform .2s,box-shadow .2s}
.hero-cta svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.hero-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(123,42,150,.36)}
.hero-mascot{position:relative;margin:28px auto 0;width:min(190px,52vw);perspective:900px;transform:translateX(-24px)}
.mascot-float{animation:mascotFloat 3.6s ease-in-out infinite alternate}
.mascot-jump{transform-origin:50% 100%;aspect-ratio:744/900}
.mascot-jump.jump{animation:mascotJump .75s cubic-bezier(.3,.7,.4,1)}
.mascot{width:100%;height:100%;object-fit:contain;object-position:50% 100%;display:block;user-select:none;transform-origin:50% 100%;-webkit-user-drag:none;transform:rotateY(calc(var(--rx,0) * 16deg)) rotateX(calc(var(--ry,0) * -9deg)) translateX(calc(var(--rx,0) * 6px));transition:transform .18s ease-out;filter:drop-shadow(0 18px 22px rgba(90,28,112,.28))}
.hero-mascot::after{content:"";position:absolute;left:18%;right:18%;bottom:-8px;height:16px;border-radius:50%;background:radial-gradient(closest-side,rgba(90,28,112,.28),transparent);animation:mascotShadow 3.6s ease-in-out infinite alternate;pointer-events:none}
.mascot-hit{position:absolute;inset:0;border-radius:40px;background:none;padding:0;cursor:pointer}
.mascot-hit:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@keyframes mascotFloat{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-12px) rotate(1.2deg)}}
@keyframes mascotShadow{from{transform:scale(1);opacity:1}to{transform:scale(.82);opacity:.6}}
@keyframes mascotJump{0%{transform:scale(1,1)}18%{transform:scale(1.1,.86)}45%{transform:translateY(-34px) scale(.94,1.1)}70%{transform:translateY(0) scale(1.08,.92)}85%{transform:scale(.98,1.03)}100%{transform:scale(1,1)}}
/* El globo va a la derecha, en el hueco libre junto a la gorra: nunca tapa la mano */
.mascot-bubble{position:absolute;z-index:2;margin:0;top:4%;left:80%;width:max-content;max-width:132px;padding:9px 13px;border-radius:16px 16px 16px 4px;background:#fff;color:var(--ink);font:600 .8rem/1.3 Inter,sans-serif;box-shadow:0 10px 26px rgba(123,42,150,.22);pointer-events:none;transform-origin:0 100%}
.mascot-bubble::before{content:"";position:absolute;left:-7px;bottom:7px;width:14px;height:14px;background:#fff;border-radius:3px 0 8px 0;transform:rotate(45deg)}
.mascot-bubble.pop{animation:bubblePop .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes bubblePop{from{opacity:0;transform:scale(.5) translateY(8px)}to{opacity:1;transform:none}}
@media (min-width:900px){
  .hero{max-width:1120px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:20px;text-align:left;padding-top:230px}
  .hero-mascot{width:min(300px,78%);margin:0 auto 0 4%;transform:none}
  .mascot-bubble{left:79%;font-size:.92rem;max-width:160px;top:2%}
  .hero-text{padding-right:10px}
}
.empty{display:grid;justify-items:center;gap:10px}
.empty img{width:90px;height:auto;filter:drop-shadow(0 8px 10px rgba(90,28,112,.25))}
.empty[hidden]{display:none}
.spot-empty img{width:74px;height:auto;display:block;margin:0 auto 10px}
@media (prefers-reduced-motion:reduce){.mascot-float,.mascot-jump,.hero-mascot::after,.mascot-bubble,.spot-mascot{animation:none!important;transition:none!important}.mascot{transform:none!important}}

.spot-mascot{position:absolute;z-index:0;right:34px;top:-70px;width:92px;height:auto;pointer-events:none;transform:translateY(46px) scale(.9);opacity:0;transition:transform .5s cubic-bezier(.34,1.7,.64,1) .12s,opacity .25s .12s;filter:drop-shadow(0 6px 10px rgba(0,0,0,.2))}
.spot.open .spot-mascot{transform:none;opacity:1}
.spot-mascot.hop{animation:spotHop .4s ease-out}
@keyframes spotHop{0%{transform:none}40%{transform:translateY(-14px) rotate(-4deg)}100%{transform:none}}
.spot-mascot.sad{transform:translateY(10px) rotate(6deg)!important}
@media (max-width:820px){.spot-mascot{width:70px;top:-54px;right:22px}}
@media (max-width:820px){.hero-cta{display:none}}

/* Mascota pensando dentro del menú móvil */
.mmenu-pet{position:absolute;left:14px;top:30%;width:min(190px,52vw);pointer-events:none;opacity:0;transform:translateY(24px) scale(.9);transform-origin:50% 100%;transition:opacity .3s,transform .3s}
.mmenu.open .mmenu-pet{opacity:1;transform:none;transition:opacity .4s .45s,transform .6s cubic-bezier(.34,1.5,.64,1) .45s}
.mmenu-pet img{width:100%;height:auto;display:block;animation:petBob 3.4s ease-in-out infinite alternate;filter:drop-shadow(0 14px 18px rgba(0,0,0,.3))}
.pet-think{position:absolute;margin:0;left:96%;top:6px;width:max-content;max-width:140px;padding:8px 12px;border-radius:16px 16px 16px 4px;background:#fff;color:var(--ink);font:600 .8rem/1.3 Inter,sans-serif;box-shadow:0 8px 20px rgba(0,0,0,.22);opacity:0;transform:scale(.6);transform-origin:0 100%}
.mmenu.open .pet-think{animation:bubblePop .5s 1s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes petBob{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-6px) rotate(1deg)}}
@media (min-width:821px){.mmenu-pet{display:none}}
@media (prefers-reduced-motion:reduce){.mmenu-pet,.mmenu.open .mmenu-pet,.mmenu-pet img,.pet-think{animation:none!important;transition:none!important}.pet-think{opacity:1;transform:none}}

.mega-sub{margin:4px 0 6px!important}

/* Poses de Prixio en la portada */
.mascot{transition:transform .18s ease-out,opacity .16s,scale .3s}
.mascot.swap{opacity:0}
.mascot[data-pose="celebra"]{scale:1.5}
.mascot[data-pose="corre"],.mascot[data-pose="oferta"]{scale:1.06}

/* Banda del carrito */
.cart-band{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:20px;margin:72px 0 0;padding:34px 40px;border-radius:36px;color:#fff;background:radial-gradient(70% 120% at 100% 0,rgba(170,0,96,.9),transparent 70%),linear-gradient(135deg,#5a1c70,#7b2a96);box-shadow:0 24px 50px rgba(90,28,112,.25);overflow:visible}
.cart-mascot{width:100%;max-width:440px;height:auto;display:block;margin:-60px 0 -30px;justify-self:center;filter:drop-shadow(0 20px 24px rgba(0,0,0,.28));opacity:0;transform:translateX(-70px) rotate(-3deg);transition:opacity .5s,transform .9s cubic-bezier(.2,.9,.3,1.1)}
.cart-band.in .cart-mascot{opacity:1;transform:none}
.cart-copy .eyebrow{color:#fff;opacity:.8;margin:0 0 8px}
.cart-copy h2{font:700 clamp(1.8rem,3.4vw,2.8rem)/1.05 Fraunces,serif;margin:0 0 12px;letter-spacing:-.01em}
.cart-copy p{margin:0 0 20px;opacity:.92;max-width:44ch}
.cart-copy .eyebrow{font-size:.8rem}
.cart-cta{display:inline-block;padding:13px 24px;border-radius:999px;background:#fff;color:var(--accent-2);font-weight:700;text-decoration:none;transition:transform .2s,box-shadow .2s}
.cart-cta:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(0,0,0,.25)}
@media (max-width:820px){.cart-band{grid-template-columns:1fr;margin-top:96px;padding:24px 22px 28px;text-align:center}.cart-mascot{max-width:300px;margin:-90px auto -10px}.cart-copy p{margin-left:auto;margin-right:auto}}
@media (prefers-reduced-motion:reduce){.cart-mascot{opacity:1;transform:none;transition:none}.mascot{transition:none}}

/* Banner de categoría con Prixio */
.cat-banner{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px 28px;margin:0 0 28px;padding:22px 34px 22px 26px;border-radius:30px;background:radial-gradient(70% 140% at 0 0,color-mix(in srgb,var(--c) 70%,#fff),transparent 70%),color-mix(in srgb,var(--c) 55%,#fff);border:1px solid color-mix(in srgb,var(--c) 70%,#fff);overflow:visible}
.cat-banner[hidden]{display:none}
.cat-banner img{width:min(210px,34vw);height:auto;display:block;margin:-46px 0 -26px;filter:drop-shadow(0 16px 18px rgba(90,28,112,.22));opacity:0;transform:translateY(24px) scale(.92);transition:opacity .4s,transform .6s cubic-bezier(.34,1.5,.64,1)}
.cat-banner.in img{opacity:1;transform:none}
.cat-banner h3{margin:0 0 6px;font:700 clamp(1.4rem,2.6vw,2rem)/1.1 Fraunces,serif;color:var(--ink)}
.cat-banner p{margin:0;color:var(--muted);max-width:46ch}
@media (max-width:560px){.cat-banner{grid-template-columns:1fr;text-align:center;margin-top:44px;padding:0 20px 22px}.cat-banner img{margin:-48px auto 0;width:170px}}
@media (prefers-reduced-motion:reduce){.cat-banner img{opacity:1;transform:none;transition:none}}

.cat-banner img{max-height:230px;width:auto;max-width:min(300px,38vw)}
@media (max-width:560px){.cat-banner img{max-height:210px}}

/* Hero que se oculta al abrir una categoría */
:root{--hero-gap:205px}
@media (max-width:820px){:root{--hero-gap:122px}}
.hero{transition:max-height .75s cubic-bezier(.7,0,.2,1),padding .75s cubic-bezier(.7,0,.2,1)}
.hero>*{transition:opacity .4s,transform .6s cubic-bezier(.7,0,.2,1)}
.hero.collapsed{max-height:var(--hero-gap)!important;padding-top:var(--hero-gap)!important;padding-bottom:0!important;overflow:hidden}
.hero.collapsed>*{opacity:0;transform:translateY(-26px) scale(.97);pointer-events:none}
#catalogo{scroll-margin-top:86px}
@media (prefers-reduced-motion:reduce){.hero,.hero>*{transition:none!important}}

/* Banner de categoría en móvil: deja sitio para que Prixio asome sin pisar el selector de orden */
@media (max-width:820px){
  .cat-banner{grid-template-columns:1fr;text-align:center;margin:96px 0 28px;padding:0 20px 24px}
  .cat-banner img{max-width:none;max-height:190px;width:auto;margin:-72px auto 8px}
}

/* Escritorio estrecho (tablet horizontal / ventanas chicas): menú más compacto para no pegarse al logo */
@media (min-width:821px) and (max-width:1000px){
  .top{padding-left:24px;padding-right:24px;column-gap:20px}
  .nav-left{gap:12px}
  .nav-left a,.nav-right a{font-size:.88rem}
}

.ver{display:inline-block;margin-left:6px;opacity:.55;font-size:.75rem}

/* Cada grupo del menú mide solo lo que ocupan sus enlaces. Si la caja ocupara toda la columna,
   al desplazarla hacia el logo en pantallas muy anchas taparía los enlaces del otro lado. */
@media (min-width:821px){
  .nav-left{justify-self:start}
  .nav-right{justify-self:end}
}

/* Móvil: sin cuadro oscuro al tocar la mascota (resaltado de toque del navegador) ni parpadeos del cambio de imagen */
*{-webkit-tap-highlight-color:transparent}
.mascot-hit{-webkit-appearance:none;appearance:none;background:transparent!important;border:0;outline:none;box-shadow:none;touch-action:manipulation;-webkit-touch-callout:none;user-select:none}
.mascot-hit:focus:not(:focus-visible){outline:none}
.mascot-hit:active,.mascot-hit:focus{background:transparent!important}
@media (hover:none),(pointer:coarse){
  .hero-mascot{perspective:none}
  .mascot{transform:none!important;transition:opacity .16s,scale .3s;will-change:auto}
}

/* Panel del menú de escritorio: aparece y desaparece al instante, sin animación de apertura/cierre */
@media (min-width:821px){
  .mega,.mega.open{transition:none!important;clip-path:none!important}
  .mega-in,.mega.open .mega-in{transition:none!important;opacity:1!important;transform:none!important}
}

.card .thumb{text-decoration:none}
.card-title{color:inherit;text-decoration:none}.card-title:hover{text-decoration:underline}