/* ============ TOKENS ============ */
:root {
  --ink: #33200F;
  --ink-soft: #5A3A1C;
  --cream: #FFFAEA;
  --butter: #FFF1BF;
  --sun: #FFCE3D;
  --gold: #F2A20C;
  --terra: #C8622B;
  --night: #21130A;
  --serif: "Young Serif", Georgia, serif;
  --ital: "Instrument Serif", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.22, .9, .3, 1);
  --gutter: clamp(20px, 5vw, 80px);
}

/* ============ RESET ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); background: #FFDA5E;
  font: 500 clamp(1rem, .96rem + .2vw, 1.125rem)/1.55 var(--sans);
  overflow-x: clip; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, ul, dl, dd, figure, fieldset { margin: 0; padding: 0; border: 0; }
ol, ul { list-style: none; }
a { color: inherit; }
svg { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.final :focus-visible { outline-color: var(--sun); }

.skip { position: fixed; left: 12px; top: -60px; z-index: 300; background: var(--ink); color: var(--cream); padding: 10px 16px; border-radius: 10px; }
.skip:focus { top: 12px; }

/* ============ TYPE ============ */
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }
h1 em, h2 em { font-family: var(--ital); font-style: italic; letter-spacing: -.01em; font-size: 1.1em; line-height: .9; }
h2 { font-size: clamp(2.5rem, 5.8vw, 5.8rem); line-height: 1.02; max-width: 16ch; }
h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 1.1rem + .9vw, 1.9rem); line-height: 1.15; }
.eyebrow { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: .95rem; margin-bottom: clamp(16px, 2vw, 26px); }
.stamp { display: inline-block; padding: 3px 11px; border-radius: 99px; background: var(--ink); color: var(--sun); font-variant-numeric: tabular-nums; font-size: .85rem; }
.eyebrow-night .stamp { background: var(--sun); color: var(--ink); }
.lede { font-size: clamp(1.08rem, 1rem + .4vw, 1.35rem); line-height: 1.45; max-width: 34ch; }
.note { font-size: .86rem; color: var(--ink-soft); font-weight: 500; }
.wrap { padding-inline: var(--gutter); max-width: 1560px; margin-inline: auto; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 28px; border-radius: 99px; font-weight: 700; text-decoration: none;
  transition: background .35s var(--ease-out), color .35s var(--ease-out), box-shadow .35s var(--ease-out), transform .35s var(--ease-out);
}
.btn-wa { background: var(--ink); color: var(--butter); box-shadow: 0 10px 26px -10px rgba(51, 32, 15, .7); }
.btn-wa:hover { background: var(--terra); color: var(--cream); box-shadow: 0 16px 34px -10px rgba(200, 98, 43, .75); }
.btn-ghost { box-shadow: inset 0 0 0 2px var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--butter); }
.btn-sun { background: var(--sun); color: var(--ink); box-shadow: 0 0 60px -6px rgba(255, 206, 61, .55); font-size: 1.15rem; padding: 20px 34px; }
.btn-sun:hover { background: var(--cream); box-shadow: 0 0 80px 0 rgba(255, 206, 61, .75); }
.btn-full { width: 100%; }
.wa-ico { width: 22px; height: 22px; flex: none; }
.has-magnetic { position: relative; }
.magnetic-inner { display: inline-flex; align-items: center; gap: inherit; will-change: transform; }

/* ============ FALLBACK SECTION COLOURS (sin JS) ============ */
.sec-hero { background: #FFDA5E; } .sec-combos { background: #FFE27A; } .sec-plato { background: #FFEFB2; } .sec-precio { background: #FFCE3D; }
.sec-bolsas { background: #FFE9A0; } .sec-confianza { background: #FBBB33; } .sec-album { background: #FBD27C; } .sec-envios { background: #F9C05A; } .sec-faq { background: #F6AE3E; }
.js .sec-hero, .js .sec-combos, .js .sec-plato, .js .sec-precio, .js .sec-bolsas, .js .sec-confianza, .js .sec-album, .js .sec-envios, .js .sec-faq { background: transparent; }
main { position: relative; z-index: 1; }
main > section { position: relative; }

/* ============ REVEALS ============ */
.js [data-reveal] {
  opacity: 0; transform: translateY(34px);
  transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft);
  animation: revealSafety .01s 6s forwards;
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; animation: none; }
@keyframes revealSafety { to { opacity: 1; transform: none; } }

/* ============ GOBO: LUZ DE VENTANA ============ */
.gobo { display: none; }
.js .gobo { display: block; position: fixed; inset: -10vh -10vw; z-index: 0; pointer-events: none; will-change: transform; }
.gobo-panes {
  position: absolute; top: 2vh; left: 16vw; width: 64vw; height: 92vh;
  display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3.4vw;
  transform: skewX(-20deg) rotate(4deg); filter: blur(16px);
}
.gobo-panes i { background: rgba(255, 255, 255, .3); border-radius: 6px; }
.gobo-leaves {
  position: absolute; top: 4vh; left: 40vw; width: 58vh; height: 58vh; opacity: .13;
  filter: blur(9px); transform-origin: 20% 0; will-change: transform;
  animation: sway 9s ease-in-out infinite alternate;
}
@keyframes sway { from { transform: rotate(-3deg) translateX(-8px); } to { transform: rotate(4deg) translateX(14px); } }

/* ============ SPLASH ============ */
.splash { display: none; }
.js .splash {
  position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; overflow: hidden;
  background: var(--butter); animation: splashSafety .6s 4.5s forwards;
}
@keyframes splashSafety { to { opacity: 0; visibility: hidden; } }
.splash-sun { grid-area: 1 / 1; width: 34vmin; height: 34vmin; border-radius: 50%; background: var(--sun); box-shadow: 0 0 90px 20px rgba(255, 206, 61, .55); }
.splash-word { grid-area: 1 / 1; position: relative; width: min(70vw, 460px); height: auto; }

/* ============ NAV ============ */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.nav {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 100;
  width: min(1240px, calc(100% - 24px));
  display: flex; align-items: center; gap: clamp(10px, 2vw, 26px);
  padding: 5px 10px 5px 14px; border-radius: 99px;
  background: rgba(255, 250, 234, .86); box-shadow: 0 10px 30px -18px rgba(51, 32, 15, .6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.logo { display: flex; align-items: center; gap: 8px; font: 400 1.35rem var(--serif); text-decoration: none; }
.logo img { display: block; height: 52px; width: auto; }
.nav-links { display: flex; gap: clamp(10px, 1.7vw, 26px); margin-left: auto; }
.nav-links a { text-decoration: none; font-weight: 600; font-size: .95rem; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 2px no-repeat; transition: background-size .4s var(--ease-out); padding-bottom: 2px; }
.nav-links a:hover { background-size: 100% 2px; }
.dial { display: flex; align-items: center; gap: 6px; }
.dial svg { width: 50px; height: 24px; overflow: visible; }
.dial-time { font-weight: 700; font-size: .88rem; font-variant-numeric: tabular-nums; min-width: 3em; }
.world { display: flex; padding: 3px; border-radius: 99px; background: rgba(51, 32, 15, .1); flex: none; }
.world a { padding: 7px 13px; border-radius: 99px; text-decoration: none; font-weight: 700; font-size: .88rem; transition: background .3s, color .3s; }
.world a[aria-current="page"] { background: var(--ink); color: var(--butter); }
.world a:not([aria-current]):hover { background: rgba(51, 32, 15, .14); }
.wipe { position: fixed; z-index: 600; width: 24px; height: 24px; margin: -12px; border-radius: 50%; transform: scale(0); transition: transform .55s cubic-bezier(.6, 0, .3, 1); pointer-events: none; }
.wipe.is-on { transform: scale(180); }
.nav-wa { background: var(--ink); color: var(--butter); text-decoration: none; font-weight: 700; font-size: .92rem; padding: 10px 18px; border-radius: 99px; transition: background .3s; }
.nav-wa:hover { background: var(--terra); }
.burger { display: none; width: 42px; height: 42px; border-radius: 50%; background: var(--sun); position: relative; }
.burger i { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--ink); transition: transform .3s var(--ease-out), top .3s var(--ease-out); }
.burger i:first-child { top: 17px; } .burger i:last-child { top: 24px; }
.burger[aria-expanded="true"] i:first-child { top: 20px; transform: rotate(45deg); }
.burger[aria-expanded="true"] i:last-child { top: 20px; transform: rotate(-45deg); }

/* ============ HERO ============ */
.hero { min-height: max(100svh, 740px); overflow: clip; display: flex; flex-direction: column; justify-content: flex-start; }
.hero-copy { position: relative; z-index: 3; padding: clamp(92px, 12svh, 130px) var(--gutter) 0; max-width: 1560px; width: 100%; margin-inline: auto; pointer-events: none; }
.hero-copy a { pointer-events: auto; }
h1 { font-size: clamp(3.3rem, min(7.4vw, 12svh), 9rem); line-height: .98; margin-bottom: clamp(18px, 2.6svh, 28px); }
.line { display: block; overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; }
.line > span { display: block; }
.hero .lede { margin-bottom: clamp(18px, 2.8svh, 28px); max-width: 44ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

.room { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.room-window {
  position: absolute; right: clamp(40px, 8vw, 150px); bottom: 20svh;
  width: min(29vw, 54svh); aspect-ratio: 3 / 4; will-change: transform;
}
.room-window .ph-arch { position: absolute; inset: 0; border: clamp(8px, .9vw, 14px) solid var(--cream); border-bottom-width: 0; }
.sill { position: absolute; left: -7%; right: -7%; bottom: -14px; height: 16px; background: var(--cream); border-radius: 5px; box-shadow: 0 8px 14px -6px rgba(51, 32, 15, .4); }
.room-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 20svh;
  background: linear-gradient(#E9A022, #D98D1B);
  box-shadow: inset 0 9px 0 var(--butter), inset 0 11px 0 rgba(51, 32, 15, .15);
}
.room-light {
  position: absolute; bottom: 0; right: 3vw; width: 62vw; height: calc(20svh - 11px);
  background: linear-gradient(rgba(255, 244, 196, .75), rgba(255, 244, 196, .35));
  clip-path: polygon(62% 0, 92% 0, 66% 100%, 2% 100%);
  will-change: transform; filter: blur(3px);
}
.room-rug { position: absolute; bottom: 1.5svh; right: 15vw; width: min(36vw, 600px); height: 9svh; border-radius: 50%; background: radial-gradient(closest-side, #C8622B 0 62%, #FFD95A 62% 66%, #C8622B 66% 100%); opacity: .9; will-change: transform; }
.room-bowl { position: absolute; right: 3vw; bottom: 5svh; width: min(9vw, 130px); will-change: transform; }
.dog {
  position: absolute; right: 17vw; bottom: 3.4svh; width: min(30vw, 27svh * 2.25); pointer-events: auto;
  will-change: transform; background: none; border-radius: 40px;
}
.dog svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 8px 8px rgba(120, 60, 10, .3)); }
.dog-body { transform-box: fill-box; transform-origin: 50% 100%; animation: breathe 4.2s ease-in-out infinite; }
.dog-head { transform-box: fill-box; transform-origin: 80% 90%; animation: headBreath 4.2s ease-in-out infinite; transition: rotate .5s var(--ease-out); }
@keyframes breathe { 50% { transform: scaleY(1.045) scaleX(1.006); } }
@keyframes headBreath { 50% { transform: translateY(-2px) rotate(.8deg); } }
.dog-tail { transform-box: fill-box; transform-origin: 0% 100%; transition: stroke .2s; }
.eye-open { opacity: 0; transition: opacity .15s; }
.eye-shut { transition: opacity .15s; }
.dog.is-awake .eye-open { opacity: 1; }
.dog.is-awake .eye-shut { opacity: 0; }
.dog.is-awake .dog-head { rotate: 3deg; }
.dog.is-awake .dog-tail { animation: wag .34s ease-in-out infinite alternate; }
.dog-ear { transform-box: fill-box; transform-origin: 20% 0; transition: transform .4s var(--ease-out); }
.dog.is-awake .dog-ear { transform: rotate(-7deg); }
.dog.is-pet .dog-tail { animation-duration: .15s; }
@keyframes wag { from { transform: rotate(-12deg); } to { transform: rotate(16deg); } }

/* ============ PLACEHOLDERS ============ */
.ph {
  position: relative; overflow: hidden; display: grid; place-items: center; text-align: center;
  background: repeating-linear-gradient(-45deg, #FFEDB0 0 14px, #FFE394 14px 28px);
  color: var(--ink-soft); font-size: .86rem; font-weight: 600;
}
.ph::after { content: ""; position: absolute; inset: 10px; border: 1.5px dashed rgba(90, 58, 28, .4); border-radius: inherit; pointer-events: none; }
.ph figcaption { padding: 14px; max-width: 24ch; line-height: 1.25; position: relative; z-index: 1; }
.ph small { display: block; font-weight: 500; opacity: .8; margin-top: 3px; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.ph-arch { border-radius: 999px 999px 0 0; }
.ph:has(> img)::after { display: none; }
.ph:has(> img)::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: rgba(255, 190, 70, .2); mix-blend-mode: soft-light; }
.foot-links { display: block; margin-top: 4px; font-size: .84rem; }
.sign { display: grid; place-items: center; overflow: hidden; background: var(--cream); margin: 0; }
.sign img { width: 92%; height: auto; }

/* ============ COMBOS ============ */
.combos { padding-block: clamp(70px, 8vw, 120px) clamp(50px, 6vw, 90px); }
.combos-head { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(16px, 4vw, 60px); align-items: end; margin-bottom: clamp(26px, 3.6vw, 50px); }
.combos h2 { max-width: 19ch; }
.combo-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: clamp(12px, 1.5vw, 22px); }
.combo { position: relative; display: flex; flex-direction: column; background: var(--cream); border-radius: 26px; padding: clamp(16px, 1.6vw, 22px); box-shadow: 0 26px 46px -30px rgba(90, 50, 10, .85); }
.js .combo[data-reveal] { transition-delay: calc(var(--i, 0) * 70ms); }
.combo-main { grid-row: span 2; background: var(--ink); color: var(--cream); padding: clamp(20px, 2.2vw, 32px); }
.combo-save { position: absolute; z-index: 3; right: 12px; top: 12px; width: 74px; height: 74px; display: grid; place-content: center; text-align: center; border-radius: 50%; background: var(--terra); color: var(--cream); font: 400 1.05rem/1 var(--serif); rotate: 8deg; box-shadow: 0 10px 18px -8px rgba(51, 32, 15, .7); transition: rotate .5s var(--ease-out), scale .5s var(--ease-out); }
.combo-save small { font: 700 .62rem var(--sans); letter-spacing: .02em; margin-bottom: 2px; }
.combo:hover .combo-save { rotate: -8deg; scale: 1.1; }
.combo-main .combo-save { width: 112px; height: 112px; font-size: 1.7rem; right: 18px; top: 18px; background: var(--sun); color: var(--ink); }
.combo-main .combo-save small { font-size: .8rem; }
.combo-bags { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 0; height: clamp(116px, 10vw, 150px); margin-bottom: 14px; }
.combo-main .combo-bags { height: clamp(230px, 22vw, 340px); margin-bottom: 20px; }
.combo-bags .ph { border-radius: 14px 14px 6px 6px; font-size: .78rem; transition: transform .6s var(--ease-out); box-shadow: 0 16px 18px -14px rgba(90, 50, 10, .7); }
.combo-bags figcaption { padding: 6px; }
.c-a { width: 56%; height: 100%; z-index: 1; transform: translateX(8%) rotate(-3deg); }
.c-b { width: 42%; height: 68%; z-index: 2; transform: translateX(-8%) rotate(4deg); }
.combo:hover .c-a { transform: translateX(-2%) rotate(-5deg); }
.combo:hover .c-b { transform: translateX(2%) rotate(6deg); }
.c-plus { position: absolute; z-index: 3; left: 53%; bottom: 40%; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--sun); font: 400 1.2rem/1 var(--sans); box-shadow: 0 0 0 3px var(--cream); }
.combo-main .c-plus { background: var(--sun); color: var(--ink); box-shadow: 0 0 0 3px var(--ink); width: 42px; height: 42px; font-size: 1.6rem; }
.combo-main h3 { font-size: clamp(1.9rem, 3vw, 2.9rem); }
.combo-kg { font-weight: 600; font-size: .95rem; color: var(--ink-soft); margin-bottom: 6px; }
.combo-main .combo-kg { color: #F5E6C4; font-size: 1.1rem; }
.combo-price { font: 400 clamp(1.9rem, 2.7vw, 2.6rem)/1.05 var(--serif); letter-spacing: -.02em; margin-top: auto; }
.combo-main .combo-price { font-size: clamp(3.4rem, 6vw, 5.6rem); }
.combo-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; justify-content: space-between; font-size: .84rem; font-weight: 600; margin-block: 6px 12px; }
.combo-main .combo-meta { font-size: 1rem; color: #F5E6C4; margin-block: 8px 16px; }
.combo .btn { padding: 11px 16px; font-size: .93rem; }
.combo-main .btn { background: var(--sun); color: var(--ink); padding: 15px 22px; font-size: 1.02rem; }
.combo-main .btn:hover { background: var(--cream); color: var(--ink); }
.combo-note { margin-top: 18px; max-width: 80ch; }

.more { margin-top: clamp(16px, 2vw, 26px); }
.more h3 { font-size: 1.15rem; margin-bottom: 8px; }
.more ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.more a { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; align-items: baseline; padding: 10px 14px; border-radius: 14px; text-decoration: none; box-shadow: inset 0 0 0 1.5px rgba(51, 32, 15, .3); font-size: .92rem; transition: background .3s, box-shadow .3s; }
.more a:hover { background: var(--cream); box-shadow: inset 0 0 0 1.5px var(--ink); }
.more-name { font-weight: 700; }
.more b { font-variant-numeric: tabular-nums; }
.more-kg, .more small { font-size: .8rem; color: var(--ink-soft); font-weight: 600; }
.more small { text-align: right; }
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.8vw, 26px); }
.feat { display: flex; flex-direction: column; background: var(--ink); color: var(--cream); border-radius: 28px; padding: clamp(18px, 2vw, 28px); box-shadow: 0 30px 50px -32px rgba(18, 40, 61, .9); }
.feat-bag { height: clamp(170px, 17vw, 250px); border-radius: 16px 16px 6px 6px; margin-bottom: 18px; transition: transform .6s var(--ease-out); }
.feat:hover .feat-bag { transform: translateY(-5px) rotate(-1deg); }
.feat h3 { font-size: clamp(2.1rem, 3.6vw, 3.4rem); margin-bottom: 10px; color: var(--sun); }
.feat ul { margin-bottom: 14px; }
.feat .r-link i { border-bottom-color: rgba(217, 240, 250, .35); }
.feat a.r-link:hover { background: rgba(217, 240, 250, .12); }
.feat-all { margin-top: auto; font-weight: 700; color: var(--sun); text-underline-offset: 3px; }

.bag-cut { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 12px rgba(40, 25, 10, .35)); transition: transform .6s var(--ease-out); }
.combo:hover .bag-cut, .feat:hover .bag-cut { transform: translateY(-5px) scale(1.03); }
.combo-bags .ph.c-a:only-child { transform: rotate(-2deg); width: 58%; }
.row-title { font-size: clamp(1.3rem, 2vw, 1.7rem); margin-top: clamp(22px, 3vw, 36px); margin-bottom: 12px; }
.combo-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.5vw, 22px); }
.combo-row-3 { grid-template-columns: repeat(3, 1fr); }
.feat-cut { position: relative; }
.feat-cut .bag-cut { position: absolute; inset: 0; }

/* ============ EL OTRO LADO ============ */
.band { position: relative; overflow: clip; padding-block: clamp(60px, 8vw, 110px); }
.band-cold { background: linear-gradient(135deg, #0E2238, #1E4A70 60%, #5FA3CC); color: #F4FBFF; }
.band-warm { background: linear-gradient(135deg, #FFE27A, #FFCE3D 60%, #F2A20C); color: #33200F; }
.band-in { position: relative; display: grid; grid-template-columns: auto 1fr; gap: clamp(26px, 6vw, 90px); align-items: center; }
.band-disc { width: clamp(120px, 20vw, 280px); aspect-ratio: 1; border-radius: 50%; }
.band-cold .band-disc { background: radial-gradient(circle at 36% 34%, #F4FBFF, #BFE2F2 62%, #8FC9E6); box-shadow: 0 0 90px 20px rgba(191, 226, 242, .35); }
.band-warm .band-disc { background: radial-gradient(circle, #FFF1BF, #FFC21F 70%); box-shadow: 0 0 90px 20px rgba(255, 200, 60, .55); }
.band-eyebrow { font-weight: 700; margin-bottom: 8px; }
.band h2 { max-width: 20ch; }
.band-txt { margin-block: 12px 20px; max-width: 46ch; }
.band-cold .band-btn { background: #BFE2F2; color: #12283D; }
.band-cold .band-btn:hover { background: #F4FBFF; }
.band-warm .band-btn { background: #33200F; color: #FFF1BF; }
.band-warm .band-btn:hover { background: #C8622B; color: #FFFAEA; }

/* ============ EL PLATO ============ */
.plato { padding-block: clamp(90px, 12vw, 170px) clamp(50px, 6vw, 90px); }
.plato-head { margin-bottom: clamp(30px, 5vw, 70px); }
.plato-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(30px, 6vw, 110px); align-items: start; }
.stage { position: sticky; top: 13vh; height: 72vh; min-height: 460px; }
.stage-sun { position: absolute; left: 50%; top: 4%; width: min(78%, 62vh); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle, var(--sun) 0 60%, rgba(255, 206, 61, 0) 72%); }
.stage-count { position: absolute; left: 50%; top: 13%; translate: -50% 0; text-align: center; white-space: nowrap; }
.stage-count b { display: block; font: 400 clamp(4.4rem, 10vw, 9rem)/1 var(--serif); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stage-count span { font-weight: 700; }
.stage-bowl { position: absolute; left: 50%; bottom: 0; translate: -50% 0; width: min(90%, 620px); overflow: visible; filter: drop-shadow(0 26px 22px rgba(120, 60, 10, .3)); }
.kibbles { position: absolute; inset: 0; pointer-events: none; }
.kib {
  position: absolute; left: 50%; bottom: 0; width: 22px; height: 18px; margin: -9px -11px; will-change: transform;
  border-radius: 54% 46% 50% 50% / 58% 52% 48% 42%;
  background: radial-gradient(circle at 34% 28%, #C98743, #8F4E1E 62%, #6E3A14);
  box-shadow: 0 2px 2px rgba(51, 32, 15, .35);
}
.chapters { display: grid; gap: clamp(48px, 14vh, 150px); padding-block: 6vh 10vh; }
.chapter { display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; opacity: .42; transition: opacity .5s var(--ease-out); max-width: 560px; }
.chapter.is-on { opacity: 1; }
html:not(.js) .chapter { opacity: 1; }
.chapter .ph-round { grid-row: span 2; width: clamp(88px, 9vw, 132px); aspect-ratio: 1; border-radius: 50%; font-size: .72rem; transition: transform .7s var(--ease-out); }
.chapter.is-on .ph-round { transform: scale(1.06) rotate(-3deg); }
.ph-round::after { inset: 6px; }
.ph-round figcaption { padding: 8px; }
.plato > .note { margin-top: 18px; }

/* ============ PRECIO ============ */
.precio { padding-block: clamp(70px, 9vw, 130px); }
.precio-title { max-width: 19ch; margin-bottom: clamp(30px, 4vw, 60px); }
.calc { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(20px, 4vw, 60px); align-items: stretch; }
.calc-scene { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 520px; padding: 24px 0 0; }
.calc-dog { width: 100%; max-width: 620px; align-self: center; transform-origin: 50% 100%; transform: scale(var(--s, .67)); transition: transform .5s var(--ease-out); overflow: visible; }
.calc-ground { height: 6px; background: var(--ink); border-radius: 6px; margin-bottom: 22px; }
.calc-weight { position: absolute; left: 0; top: 0; display: grid; font-weight: 600; }
.calc-weight output { font: 400 clamp(3.6rem, 8vw, 7rem)/1 var(--serif); letter-spacing: -.03em; }
.calc-weight b { font-weight: 400; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 40px; background: none; cursor: grab; margin: 0; --p: 17%; }
.range:active { cursor: grabbing; }
.range::-webkit-slider-runnable-track { height: 10px; border-radius: 10px; background: linear-gradient(90deg, var(--ink) var(--p), rgba(51, 32, 15, .18) var(--p)); }
.range::-moz-range-track { height: 10px; border-radius: 10px; background: rgba(51, 32, 15, .18); }
.range::-moz-range-progress { height: 10px; border-radius: 10px; background: var(--ink); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 38px; height: 38px; margin-top: -14px; border-radius: 50%; background: var(--cream); border: 3px solid var(--ink); box-shadow: 0 6px 12px -4px rgba(51, 32, 15, .55), inset 0 0 0 7px var(--sun); transition: scale .25s var(--ease-out); }
.range::-moz-range-thumb { width: 32px; height: 32px; border-radius: 50%; background: var(--cream); border: 3px solid var(--ink); box-shadow: inset 0 0 0 7px var(--sun); }
.range:hover::-webkit-slider-thumb { scale: 1.12; }
.ruler { display: flex; justify-content: space-between; font-size: .85rem; font-weight: 600; margin-top: 2px; }
.pick { display: grid; gap: 7px; font-weight: 700; font-size: .9rem; }
.pick select { font: 600 1rem var(--sans); color: var(--ink); width: 100%; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--cream); box-shadow: inset 0 0 0 2px var(--ink); cursor: pointer; }
.calc-side { display: grid; gap: 16px; align-content: start; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chips legend { font-weight: 700; font-size: .9rem; margin-bottom: 7px; padding: 0; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span { display: block; padding: 9px 16px; border-radius: 99px; box-shadow: inset 0 0 0 2px var(--ink); font-weight: 600; font-size: .95rem; cursor: pointer; transition: background .3s, color .3s; }
.chips label:hover span { background: rgba(51, 32, 15, .1); }
.chips input:checked + span { background: var(--ink); color: var(--sun); }
.chips input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.ticket {
  position: relative; background: var(--cream); padding: clamp(20px, 2.4vw, 32px); border-radius: 22px;
  box-shadow: 0 28px 50px -30px rgba(90, 50, 10, .8);
}
.ticket-big { display: flex; align-items: baseline; gap: 10px; font: 400 clamp(3.6rem, 7vw, 6.2rem)/1 var(--serif); letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-bottom: 14px; }
.ticket-big small { font: italic 400 clamp(1.5rem, 2.4vw, 2.2rem) var(--ital); letter-spacing: 0; }
.ticket dl { margin-bottom: 18px; }
.ticket dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1.5px dashed rgba(90, 58, 28, .3); font-size: .98rem; }
.ticket dt { color: var(--ink-soft); }
.ticket dd { font-weight: 700; text-align: right; }

/* ============ BOLSAS ============ */
.bolsas { padding-block: clamp(70px, 9vw, 130px); overflow: clip; }
.bolsas h2 { margin-bottom: clamp(30px, 4vw, 60px); }
.shelf { position: relative; }
.shelf-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 4vw, 70px); padding-inline: var(--gutter); max-width: 1560px; margin-inline: auto; align-items: end; perspective: 1200px; }
.bag { position: relative; display: grid; grid-template-rows: auto auto auto; transform-style: preserve-3d; transition: transform .5s var(--ease-out); }
.bag .ph-bag { order: 0; border-radius: 28px 28px 8px 8px; box-shadow: 0 26px 26px -22px rgba(90, 50, 10, .75); margin-bottom: 0; }
.bag-a .ph-bag { aspect-ratio: 4 / 4.6; }
.bag-b .ph-bag { aspect-ratio: 4 / 5.8; }
.bag-c .ph-bag { aspect-ratio: 4 / 5.2; }
.plank { display: none; }
.bag h3 { margin-top: 44px; }
.bag p { margin-top: 8px; max-width: 34ch; }
.bag::before { content: ""; order: 1; display: block; height: 18px; margin-inline: calc(-1 * clamp(10px, 2vw, 35px)); background: linear-gradient(#B9652A, #8F4E1E); border-radius: 3px; box-shadow: 0 16px 16px -10px rgba(90, 50, 10, .5); }
.bag .ph-bag { grid-row: 1; } .bag::before { grid-row: 2; }
.tag {
  position: absolute; right: 8%; top: 18px; z-index: 3; display: grid; text-decoration: none;
  padding: 11px 15px 11px 28px; background: var(--cream); border-radius: 8px 22px 22px 8px; box-shadow: 0 10px 18px -8px rgba(51, 32, 15, .55);
  transform-origin: 0 50%; transform: rotate(4deg) translateZ(34px); transition: transform .6s var(--ease-out), background .3s;
  line-height: 1.2;
}
.tag::before { content: ""; position: absolute; left: 11px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--ink); }
.tag b { font: 400 1.14rem var(--serif); }
.tag span { font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.tag:hover, .bag:hover .tag { transform: rotate(-3deg) translateZ(34px); background: var(--sun); }
.tag:hover span, .bag:hover .tag span { color: var(--ink); }

/* ============ ETIQUETAS DE PRECIO ============ */
.rail { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.4vw, 36px); padding-top: 54px; }
.rail::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 12px; border-radius: 8px; background: linear-gradient(var(--terra), var(--ink)); box-shadow: 0 12px 16px -8px rgba(40, 25, 10, .45); }
.ptag { position: relative; display: flex; flex-direction: column; padding: clamp(26px, 3vw, 42px) clamp(20px, 2.4vw, 34px) clamp(20px, 2.4vw, 30px); text-decoration: none; border-radius: 26px 26px 22px 22px; background: var(--cream); box-shadow: 0 28px 44px -28px rgba(70, 40, 10, .85); transform-origin: 50% -54px; transition: opacity .9s var(--ease-soft), rotate .7s var(--ease-out), box-shadow .5s var(--ease-out); }
.js .ptag[data-reveal] { transform: none; transition-delay: calc(var(--i, 0) * 90ms), 0s, 0s; }
.ptag::before { content: ""; position: absolute; left: 50%; top: -48px; width: 2px; height: 58px; background: var(--ink); }
.ptag::after { content: ""; position: absolute; left: 50%; top: 4px; width: 16px; height: 16px; margin-left: -7px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--sun); }
.ptag-2 { background: var(--ink); color: var(--cream); }
.ptag-2::before { background: var(--ink); }
.ptag-2::after { background: var(--cream); }
.ptag-3 { background: var(--sun); }
.ptag:nth-child(odd):hover { rotate: 2.5deg; }
.ptag:nth-child(even):hover { rotate: -2.5deg; }
.ptag-name { font: 400 clamp(1.3rem, 2vw, 1.8rem)/1.1 var(--serif); }
.ptag-num { font: 400 clamp(4.6rem, 10vw, 9.5rem)/.95 var(--serif); letter-spacing: -.04em; margin-top: 8px; }
.ptag-unit { font: italic 400 clamp(1.5rem, 2.4vw, 2.2rem)/1 var(--ital); margin-bottom: 16px; }
.ptag-txt { font-size: .98rem; font-weight: 500; line-height: 1.45; margin-bottom: 16px; }
.ptag-txt strong { font-weight: 700; }
.ptag-go { margin-top: auto; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ptag-2 .ptag-num { color: var(--sun); }

/* ============ LISTA DE PRECIOS ============ */
.lista { padding-top: clamp(70px, 9vw, 130px); scroll-margin-top: 80px; }
.lista-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 4vw, 60px); align-items: end; margin-bottom: clamp(22px, 3vw, 40px); }
.bolsas .lista-head h2 { margin-bottom: 0; }
.lista-head .note { display: block; margin-top: 6px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.f { padding: 9px 16px; border-radius: 99px; box-shadow: inset 0 0 0 2px var(--ink); font-weight: 600; font-size: .95rem; transition: background .3s, color .3s; }
.f:hover { background: rgba(51, 32, 15, .1); }
.f.is-on { background: var(--ink); color: var(--sun); }
.search { margin-left: auto; }
.search input { font: inherit; font-weight: 600; font-size: .95rem; color: var(--ink); width: 190px; padding: 9px 16px; border: 0; border-radius: 99px; background: var(--cream); box-shadow: inset 0 0 0 2px var(--ink); }
.search input::placeholder { color: var(--ink-soft); opacity: 1; }
.suggest { margin-top: 16px; padding: 12px 18px; border-radius: 16px; background: var(--cream); font-weight: 600; box-shadow: 0 14px 26px -18px rgba(90, 50, 10, .8); }
.suggest[hidden] { display: none; }
.count { font-size: .92rem; font-weight: 600; margin-block: 16px clamp(16px, 2vw, 26px); }
.brands { columns: 3; column-gap: clamp(24px, 3.4vw, 56px); }
.brand { break-inside: avoid; margin-bottom: 22px; }
.brand::details-content { transition: none; }
.brand:last-child { border-bottom: 0; }
.brand[hidden], .row[hidden], .empty[hidden] { display: none; }
.brand summary { padding: 13px 2px 9px; align-items: baseline; }
.brand summary > span { flex: 1; }
.brand summary small { font: 600 .84rem var(--sans); color: var(--ink-soft); white-space: nowrap; }
.brand summary::after { width: 13px; height: 13px; align-self: center; }
.r-link { display: flex; align-items: baseline; gap: 8px; padding: 6px 2px; text-decoration: none; font-size: .97rem; transition: padding .3s var(--ease-out), background .3s; border-radius: 6px; }
a.r-link:hover { background: var(--cream); padding-inline: 8px; }
.r-link i { flex: 1; min-width: 12px; border-bottom: 2px dotted rgba(90, 58, 28, .4); translate: 0 -4px; }
.r-link b { font-weight: 700; font-variant-numeric: tabular-nums; }
.r-link small { font-size: .78rem; color: var(--ink-soft); width: 4.3em; text-align: right; font-variant-numeric: tabular-nums; }
.is-out .r-link b { font-weight: 700; font-size: .86rem; padding: 2px 10px; border-radius: 99px; background: var(--ink); color: var(--sun); }
.empty { font-weight: 600; padding-block: 20px; }

/* ============ CONFIANZA ============ */
.confianza { padding-block: clamp(80px, 11vw, 160px); }
.statement { font: 400 clamp(2.1rem, 5vw, 5.1rem)/1.1 var(--serif); letter-spacing: -.015em; max-width: 24ch; margin-bottom: clamp(50px, 7vw, 100px); }
.statement .w { display: inline-block; }
.trust { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 6vw, 100px); align-items: start; }
.promises { display: grid; gap: 34px; }
.promises p { margin-top: 6px; max-width: 38ch; }
.week { background: var(--cream); border-radius: 26px; padding: clamp(22px, 3vw, 40px); box-shadow: 0 28px 50px -30px rgba(90, 50, 10, .8); rotate: -1.2deg; }
.week > p { margin-top: 6px; }
.bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(6px, 1vw, 14px); height: 170px; margin-block: 22px 12px; }
.bars li { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.bars li::before { content: ""; position: absolute; inset: 0 0 28px; border-radius: 10px; background: #F4DFAE; }
.bars i { position: relative; display: block; width: 100%; height: calc((100% - 28px) * var(--f, 1)); --f: calc(var(--pct, 1)); border-radius: 10px; background: var(--gold); margin-bottom: 0; transition: height 1.1s var(--ease-out); }
.bars li:nth-child(1) i, .bars li:nth-child(2) i { --pct: .25; } .bars li:nth-child(3) i, .bars li:nth-child(4) i { --pct: .5; } .bars li:nth-child(5) i, .bars li:nth-child(6) i { --pct: .75; } .bars li:nth-child(7) i { --pct: 1; }
.js .week:not(.is-revealed) .bars i { height: 0; }
.bars li:nth-child(2) i { transition-delay: .08s; } .bars li:nth-child(3) i { transition-delay: .16s; } .bars li:nth-child(4) i { transition-delay: .24s; } .bars li:nth-child(5) i { transition-delay: .32s; } .bars li:nth-child(6) i { transition-delay: .4s; } .bars li:nth-child(7) i { transition-delay: .48s; }
.bars span { position: relative; font-weight: 700; font-size: .85rem; line-height: 22px; }
.legend { font-size: .86rem; font-weight: 600; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.legend span { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.k-new { background: var(--gold); } .k-old { background: #F4DFAE; margin-left: 10px; }

/* ============ ALBUM ============ */
.album { padding-block: clamp(70px, 9vw, 130px) clamp(90px, 12vw, 170px); overflow: clip; }
.album-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 2vw, 26px); }
.album-head { grid-column: 1 / span 5; grid-row: 1; align-self: center; }
.snap { background: var(--cream); padding: 12px 12px 8px; border-radius: 5px; box-shadow: 0 26px 36px -24px rgba(90, 50, 10, .8); transition: rotate .6s var(--ease-out), box-shadow .6s var(--ease-out); will-change: transform; }
.snap:hover { rotate: 0deg !important; box-shadow: 0 36px 46px -24px rgba(90, 50, 10, .9); }
.snap .ph { aspect-ratio: 4 / 5; }
.snap p { font: italic 400 1.3rem var(--ital); padding-top: 6px; text-align: center; }
.s1 { grid-column: 7 / span 4; grid-row: 1; rotate: 3deg; }
.s2 { grid-column: 2 / span 3; grid-row: 2; rotate: -4deg; margin-top: -30px; }
.s3 { grid-column: 5 / span 3; grid-row: 2; rotate: 2deg; margin-top: 30px; }
.s4 { grid-column: 9 / span 4; grid-row: 2; rotate: -2deg; margin-top: 10px; }
.s4 .ph { aspect-ratio: 5 / 4; }

/* ============ ENVIOS ============ */
.envios { padding-block: clamp(50px, 7vw, 100px) clamp(40px, 5vw, 70px); }
.envios h2 { max-width: none; margin-bottom: clamp(30px, 5vw, 64px); }
.barrios { position: relative; display: flex; justify-content: space-between; margin-bottom: clamp(34px, 5vw, 64px); }
.barrios::before { content: ""; position: absolute; left: 6%; right: 6%; top: 11px; border-top: 3px dashed var(--ink); opacity: .55; }
.barrios li { position: relative; flex: 1; display: grid; justify-items: center; gap: 10px; text-align: center; font: 400 clamp(1.1rem, 1.9vw, 1.75rem)/1.1 var(--serif); }
.barrios i { width: 25px; height: 25px; border-radius: 50%; background: var(--cream); box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 6px var(--sun); }
.envio-cards { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: clamp(14px, 2vw, 26px); align-items: stretch; }
.envio-card { background: var(--cream); border-radius: 24px; padding: clamp(20px, 2.6vw, 34px); box-shadow: 0 26px 46px -30px rgba(90, 50, 10, .85); }
.envio-card:nth-child(1) { rotate: -1deg; } .envio-card:nth-child(2) { rotate: .8deg; }
.envio-big { font: 400 clamp(3rem, 5.6vw, 5.2rem)/1 var(--serif); letter-spacing: -.03em; margin-bottom: 10px; }
.envio-dark { background: var(--ink); color: var(--cream); }
.envio-dark p { margin-block: 8px 16px; color: #F5E6C4; }
.envio-dark a { display: inline-block; background: var(--sun); color: var(--ink); text-decoration: none; font-weight: 700; padding: 11px 18px; border-radius: 99px; transition: background .3s; }
.envio-dark a:hover { background: var(--cream); }

.horarios { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(14px, 2vw, 26px); margin-top: clamp(14px, 2vw, 26px); }
.horario { padding: clamp(18px, 2.2vw, 28px); border-radius: 24px; box-shadow: inset 0 0 0 2px var(--ink); }
.horario h3 { font-size: 1.1rem; }
.horario-big { font: 400 clamp(2rem, 3.6vw, 3.4rem)/1.05 var(--serif); letter-spacing: -.02em; margin-block: 6px 8px; }
.pagos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: clamp(20px, 3vw, 36px); }
.pagos ul { display: flex; flex-wrap: wrap; gap: 10px; }
.pagos li { display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border-radius: 99px; background: var(--cream); font-weight: 700; box-shadow: 0 14px 24px -18px rgba(90, 50, 10, .85); }
.pagos svg { width: 26px; height: 26px; flex: none; }
.wa-pay, .wa-place { margin-top: 4px; font-size: .92rem; color: #F5E6C4; }
.wa-place a { font-weight: 700; color: inherit; text-underline-offset: 3px; }
.envio-dark strong { color: var(--sun); }
.combo-one .c-a { width: 58%; transform: rotate(-2deg); }
.combo-one:hover .c-a { transform: rotate(2deg) scale(1.03); }

/* ============ FAQ ============ */
.faq { padding-block: clamp(60px, 8vw, 110px) clamp(100px, 12vw, 170px); }
.faq-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(30px, 6vw, 100px); align-items: start; }
details { border-top: 2px solid var(--ink); interpolate-size: allow-keywords; }
details:last-child { border-bottom: 2px solid var(--ink); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 2px; font: 400 clamp(1.15rem, 1rem + .6vw, 1.55rem)/1.2 var(--serif); }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; flex: none; width: 20px; height: 20px; background: linear-gradient(var(--ink), var(--ink)) center / 100% 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2px 100% no-repeat; transition: rotate .45s var(--ease-out); }
details[open] summary::after { rotate: 135deg; }
details::details-content { height: 0; overflow: clip; transition: height .5s var(--ease-out), content-visibility .5s allow-discrete; }
details[open]::details-content { height: auto; }
details p { padding: 0 40px 22px 2px; max-width: 58ch; }

/* ============ FINAL ============ */
.final { color: var(--cream); }
.dusk { position: relative; height: 78vh; min-height: 460px; overflow: clip; background: linear-gradient(rgba(150, 70, 22, 0) 0, #A9501D 45%, #5E2C12 85%, #3A1C0D 100%); }
.dusk-sun { position: absolute; left: 50%; top: 18%; width: min(46vmin, 480px); aspect-ratio: 1; margin-left: calc(min(46vmin, 480px) / -2); border-radius: 50%; background: radial-gradient(circle, #FFE27A, #FFC21F 70%); box-shadow: 0 0 120px 30px rgba(255, 200, 60, .55); will-change: transform; }
.hill { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 44%; }
.dusk-dog { position: absolute; left: 36%; bottom: 31%; width: clamp(130px, 15vw, 240px); filter: brightness(0); overflow: visible; }
.stars { position: absolute; inset: 0 0 30% 0; opacity: .75; }
.stars i { position: absolute; left: 0; top: 0; width: 2px; height: 2px; border-radius: 50%; color: #FFF3C4; animation: twinkle 4s ease-in-out infinite alternate; }
.stars i:first-child { box-shadow: 8vw 8vh, 16vw 26vh, 27vw 13vh, 38vw 32vh, 66vw 10vh, 78vw 28vh, 88vw 12vh, 94vw 36vh, 58vw 38vh, 12vw 44vh; }
.stars i:last-child { animation-delay: -2s; box-shadow: 4vw 26vh, 21vw 6vh, 33vw 24vh, 72vw 18vh, 84vw 42vh, 91vw 22vh, 62vw 26vh, 48vw 6vh, 28vw 40vh; }
@keyframes twinkle { from { opacity: .35; } to { opacity: 1; } }
.final-body { background: var(--night); padding-top: clamp(30px, 5vw, 70px); position: relative; }
.final-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(40px, 6vw, 110px); align-items: center; padding-bottom: clamp(70px, 9vw, 130px); }
.final .lede { margin-block: 20px 28px; max-width: 40ch; color: #F5E6C4; }
.wa-number { margin-top: 16px; font-weight: 600; color: #F5E6C4; font-variant-numeric: tabular-nums; }
.final h2 em { color: var(--sun); }
.chat { background: #33200F; border-radius: 28px; padding: clamp(20px, 2.6vw, 34px); box-shadow: 0 0 0 1px rgba(255, 206, 61, .18), 0 0 90px -20px rgba(255, 206, 61, .3); }
.chat-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .92rem; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid rgba(255, 241, 191, .16); }
.chat-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sun); animation: twinkle 1.6s ease-in-out infinite alternate; }
.bubble { display: inline-block; background: var(--cream); color: var(--ink); padding: 11px 17px; border-radius: 18px 18px 18px 5px; font-weight: 600; margin-bottom: 16px; }
.chat-hint { font-size: .9rem; margin-bottom: 12px; color: #F5E6C4; }
.quick { display: grid; gap: 8px; justify-items: end; }
.quick a { background: var(--sun); color: var(--ink); text-decoration: none; font-weight: 700; padding: 12px 18px; border-radius: 18px 18px 5px 18px; transition: transform .35s var(--ease-out), background .3s; }
.quick a:hover { transform: translateX(-6px); background: var(--cream); }
.quick-ai { background: var(--cream); color: var(--ink); font-weight: 700; padding: 12px 18px; border-radius: 18px 18px 5px 18px; transition: transform .35s var(--ease-out), background .3s; }
.quick-ai:hover { transform: translateX(-6px); background: var(--sun); }
html:not(.js) .quick-ai { display: none; }
.foot { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; padding-block: 0 26px; }
.foot-logo { width: clamp(180px, 22vw, 320px); height: auto; }
.foot p { color: #F5E6C4; font-size: .92rem; padding-bottom: 8px; }

/* ============ FAB ============ */
.fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%;
  background: var(--ink); color: var(--sun); box-shadow: 0 14px 26px -8px rgba(51, 32, 15, .7);
  transition: transform .5s var(--ease-out), opacity .4s, background .3s;
}
.fab svg { width: 30px; height: 30px; }
.fab:hover { background: var(--terra); color: var(--cream); transform: scale(1.08); }
.js .fab { opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none; }
.js .fab.is-on { opacity: 1; transform: none; pointer-events: auto; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1200px) { .brands { columns: 2; } }
@media (max-width: 1320px) { .combo-row { grid-template-columns: repeat(2, 1fr); }  .dial { display: none; } .combo-grid { grid-template-columns: repeat(3, 1fr); } .combo-main { grid-row: auto; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; align-content: center; } .combo-main .combo-bags { grid-row: span 6; margin: 0; } }
@media (max-width: 1100px) {
  .dial { display: none; }
  .nav-wa { margin-left: auto; }
  .burger { display: block; }
  .nav-links {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin: 0; flex-direction: column; gap: 4px;
    padding: 14px 20px; background: var(--cream); border-radius: 22px; box-shadow: 0 20px 40px -20px rgba(51, 32, 15, .6);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s, transform .3s var(--ease-out), visibility .3s;
  }
  .nav-links a { font: 400 1.35rem var(--serif); padding: 7px 0; }
  .nav.is-open .nav-links { opacity: 1; visibility: visible; transform: none; }
  html:not(.js) .nav-links { position: static; display: none; }
}
@media (max-width: 860px) {
  .hero { min-height: 0; }
  .hero-copy { padding-top: 100px; }
  h1 { font-size: clamp(3.1rem, 15.5vw, 6rem); }
  .room { position: relative; inset: auto; height: 74vw; min-height: 280px; margin-top: 18px; }
  .room-window { right: 7vw; bottom: 26%; width: 34vw; }
  .room-floor, .room-light { height: 26%; }
  .room-light { width: 92vw; right: 0; }
  .room-rug { right: 10vw; bottom: 3%; width: 70vw; height: 13%; }
  .room-bowl { right: 4vw; bottom: 3%; width: 16vw; }
  .dog { right: 18vw; bottom: 5%; width: 62vw; }
  .barrios { flex-direction: column; gap: 14px; }
  .barrios::before { left: 11px; right: auto; top: 12px; bottom: 12px; border-top: 0; border-left: 3px dashed var(--ink); }
  .barrios li { display: flex; justify-content: flex-start; gap: 14px; text-align: left; font-size: 1.4rem; }
  .envio-cards, .horarios { grid-template-columns: 1fr; }
  .combos-head { grid-template-columns: 1fr; }
  .combo-grid { grid-template-columns: repeat(2, 1fr); }
  .combo-main { display: flex; }
  .combo-main .combo-bags { margin-bottom: 16px; }
  .combo-main .combo-save { width: 88px; height: 88px; font-size: 1.3rem; }
  .band-in { grid-template-columns: 1fr; }
  .feats { grid-template-columns: 1fr; }
  .combo-row, .combo-row-3 { grid-template-columns: repeat(2, 1fr); }
  .rail { grid-template-columns: 1fr; gap: 58px; }
  .rail::before { display: none; }
  .ptag::before { display: none; }
  .ptag { transform-origin: 50% 0; }
  .lista-head { grid-template-columns: 1fr; }
  .brands { columns: 1; }
  .brand { margin-bottom: 0; }
  .search { margin-left: 0; width: 100%; }
  .search input { width: 100%; }
  .plato-grid, .calc, .trust, .faq-grid, .final-grid { grid-template-columns: 1fr; }
  .stage { position: relative; top: 0; height: 88vw; max-height: 560px; min-height: 340px; }
  .chapters { gap: 34px; padding-block: 10px 0; }
  .chapter { opacity: 1; }
  .calc-scene { min-height: 340px; }
  .calc-weight { position: static; margin-bottom: 8px; }
  .shelf-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; align-items: flex-end; padding-bottom: 10px; scrollbar-width: none; overflow-y: visible; }
  .shelf-row::-webkit-scrollbar { display: none; }
  .bag { flex: 0 0 74vw; scroll-snap-align: center; }
  .bag::before { margin-inline: -12px; }
  .album-head { grid-column: 1 / -1; }
  .s1 { grid-column: 3 / span 8; grid-row: 2; }
  .s2 { grid-column: 1 / span 6; grid-row: 3; margin-top: 10px; }
  .s3 { grid-column: 7 / span 6; grid-row: 3; margin-top: 40px; }
  .s4 { grid-column: 2 / span 10; grid-row: 4; margin-top: 0; }
  .dusk { height: 62vh; }
  .dusk-dog { left: 30%; bottom: 31%; }
  .gobo-panes { left: -10vw; width: 110vw; }
  .gobo-leaves { left: 20vw; width: 80vw; height: 80vw; }
  .foot { padding-bottom: 96px; }
}
@media (max-width: 480px) {
  .nav-wa { display: none; }
  .world { margin-left: auto; }
  .combo-grid { gap: 10px; }
  .combo .btn { width: 100%; }
  .nav { padding-left: 10px; }
  .logo img { height: 46px; }
  .btn { width: 100%; }
  .cta-row { flex-direction: column; }
  .nav-wa { padding: 10px 14px; }
}

/* ============================================================
   LADO GATOS: el mismo diseño, en frío
   ============================================================ */
[data-world="gato"] {
  --ink: #12283D; --ink-soft: #2B4660; --cream: #F4FBFF; --butter: #D9F0FA;
  --sun: #7FC8EE; --gold: #3E9BD0; --terra: #2A6E9E; --night: #0B1A2B;
}
[data-world="gato"] body { background: #BFE2F2; }
[data-world="gato"] .sec-hero { background: #BFE2F2; } [data-world="gato"] .sec-combos { background: #CDE9F5; } [data-world="gato"] .sec-plato { background: #E6F5FB; } [data-world="gato"] .sec-precio { background: #A9D8EE; }
[data-world="gato"] .sec-bolsas { background: #D5EEF8; } [data-world="gato"] .sec-confianza { background: #8FC9E6; } [data-world="gato"] .sec-album { background: #B7DDF0; }
[data-world="gato"] .sec-envios { background: #9CCFE8; } [data-world="gato"] .sec-faq { background: #7DBCDD; }
[data-world="gato"].js .sec-combos, [data-world="gato"].js .sec-hero, [data-world="gato"].js .sec-plato, [data-world="gato"].js .sec-precio, [data-world="gato"].js .sec-bolsas, [data-world="gato"].js .sec-confianza, [data-world="gato"].js .sec-album, [data-world="gato"].js .sec-envios, [data-world="gato"].js .sec-faq { background: transparent; }
[data-world="gato"] .btn-wa { box-shadow: 0 10px 26px -10px rgba(18, 40, 61, .7); }
[data-world="gato"] .btn-wa:hover { box-shadow: 0 16px 34px -10px rgba(42, 110, 158, .75); }
[data-world="gato"] .btn-sun { box-shadow: 0 0 60px -6px rgba(127, 200, 238, .55); }
[data-world="gato"] .btn-sun:hover { box-shadow: 0 0 80px 0 rgba(127, 200, 238, .75); }
[data-world="gato"] .gobo-panes i { background: rgba(255, 255, 255, .34); }
[data-world="gato"] .gobo-leaves { opacity: .16; }
[data-world="gato"] .splash-sun { box-shadow: 0 0 90px 20px rgba(127, 200, 238, .55); }
[data-world="gato"] .nav { background: rgba(244, 251, 255, .86); box-shadow: 0 10px 30px -18px rgba(18, 40, 61, .6); }
[data-world="gato"] .world { background: rgba(18, 40, 61, .1); }
[data-world="gato"] .world a:not([aria-current]):hover { background: rgba(18, 40, 61, .14); }
[data-world="gato"] .sill { box-shadow: 0 8px 14px -6px rgba(18, 40, 61, .4); }
[data-world="gato"] .room-floor { background: linear-gradient(#5E9CC4, #4A86AF); box-shadow: inset 0 9px 0 var(--butter), inset 0 11px 0 rgba(18, 40, 61, .15); }
[data-world="gato"] .room-light { background: linear-gradient(rgba(232, 247, 255, .72), rgba(232, 247, 255, .32)); }
[data-world="gato"] .room-rug { background: radial-gradient(closest-side, #2A6E9E 0 62%, #BFE9FF 62% 66%, #2A6E9E 66% 100%); }
[data-world="gato"] .dog svg { filter: drop-shadow(0 8px 8px rgba(18, 40, 61, .3)); }
[data-world="gato"] .ph { background: repeating-linear-gradient(-45deg, #E2F3FB 0 14px, #CFE9F6 14px 28px); }
[data-world="gato"] .ph::after { border-color: rgba(43, 70, 96, .4); }
[data-world="gato"] .stage-bowl { filter: drop-shadow(0 26px 22px rgba(18, 40, 61, .3)); }
[data-world="gato"] .stage-sun { background: radial-gradient(circle, #A9D8EE 0 60%, rgba(169, 216, 238, 0) 72%); }
[data-world="gato"] .kib { background: radial-gradient(circle at 34% 28%, #8FA9BF, #3A5A78 62%, #24405C); box-shadow: 0 2px 2px rgba(18, 40, 61, .35); }
[data-world="gato"] .range::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--ink) var(--p), rgba(18, 40, 61, .18) var(--p)); }
[data-world="gato"] .range::-moz-range-track { background: rgba(18, 40, 61, .18); }
[data-world="gato"] .chips label:hover span, [data-world="gato"] .f:hover { background: rgba(18, 40, 61, .1); }
[data-world="gato"] .f.is-on { background: var(--ink); }
[data-world="gato"] .combo, [data-world="gato"] .ticket, [data-world="gato"] .week, [data-world="gato"] .envio-card, [data-world="gato"] .snap, [data-world="gato"] .suggest, [data-world="gato"] .pagos li { box-shadow: 0 26px 46px -30px rgba(18, 40, 61, .8); }
[data-world="gato"] .ticket dl > div { border-top-color: rgba(43, 70, 96, .3); }
[data-world="gato"] .r-link i { border-bottom-color: rgba(43, 70, 96, .4); }
[data-world="gato"] .bag::before { background: linear-gradient(#5E8AAD, #3A5A78); box-shadow: 0 16px 16px -10px rgba(18, 40, 61, .5); }
[data-world="gato"] .bag .ph-bag { box-shadow: 0 26px 26px -22px rgba(18, 40, 61, .75); }
[data-world="gato"] .tag { box-shadow: 0 10px 18px -8px rgba(18, 40, 61, .55); }
[data-world="gato"] .bars li::before, [data-world="gato"] .k-old { background: #D5EEF8; }
[data-world="gato"] .dusk { background: linear-gradient(rgba(60, 120, 170, 0) 0, #33628A 45%, #16324E 85%, #0F243B 100%); }
[data-world="gato"] .dusk-sun { background: radial-gradient(circle at 38% 36%, #FFFFFF, #D9F0FA 62%, #A9D8EE); box-shadow: 0 0 120px 30px rgba(191, 226, 242, .5); }
[data-world="gato"] .stars i { color: #E6F5FB; }
[data-world="gato"] .combo-main .combo-kg, [data-world="gato"] .combo-main .combo-meta, [data-world="gato"] .final .lede, [data-world="gato"] .wa-number, [data-world="gato"] .wa-pay, [data-world="gato"] .wa-place, [data-world="gato"] .chat-hint, [data-world="gato"] .foot p, [data-world="gato"] .envio-dark p { color: #CFE6F4; }
[data-world="gato"] .chat { background: #12283D; box-shadow: 0 0 0 1px rgba(127, 200, 238, .2), 0 0 90px -20px rgba(127, 200, 238, .35); }
[data-world="gato"] .chat-head { border-bottom-color: rgba(217, 240, 250, .18); }
[data-world="gato"] .fab { box-shadow: 0 14px 26px -8px rgba(18, 40, 61, .7); }
@media (max-width: 860px) { [data-world="gato"] h1 { font-size: clamp(2.7rem, 13.2vw, 6rem); } }
[data-world="gato"] .combo-bags .ph { box-shadow: 0 16px 18px -14px rgba(18, 40, 61, .7); }
[data-world="gato"] .ph:has(> img)::before { background: rgba(90, 165, 225, .28); }
[data-world="gato"] .more a { box-shadow: inset 0 0 0 1.5px rgba(18, 40, 61, .3); }
[data-world="gato"] .more a:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.page-credits { background: #FFE9A0; }
.credits-wrap { max-width: 860px; margin-inline: auto; padding: clamp(40px, 7vw, 90px) var(--gutter); }
.credits-wrap img { width: 150px; height: auto; margin-bottom: 24px; }
.credits-wrap h1 { font-size: clamp(2.4rem, 6vw, 4rem); margin-bottom: 10px; }
.credits-list { margin-top: 28px; display: grid; gap: 14px; }
.credits-list li { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; padding-top: 14px; border-top: 2px dotted rgba(90, 58, 28, .4); font-size: .93rem; }
.credits-list img { width: 76px; height: 76px; object-fit: cover; border-radius: 12px; margin: 0; }
[data-world="gato"] .bag-cut { filter: drop-shadow(0 14px 12px rgba(18, 40, 61, .35)); }
@media (max-width: 480px) { .combo:not(.combo-main) .combo-save { width: 56px; height: 56px; right: 6px; top: 6px; font-size: .82rem; } .combo:not(.combo-main) .combo-save small { font-size: .55rem; } }
[data-world="gato"] .rail::before { box-shadow: 0 12px 16px -8px rgba(18, 40, 61, .45); }
[data-world="gato"] .ptag { box-shadow: 0 28px 44px -28px rgba(18, 40, 61, .85); }

/* ============ ASISTENTE (página de gatos) ============ */
.ai-launch { position: fixed; right: 22px; bottom: 90px; z-index: 90; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--sun); color: var(--ink); box-shadow: 0 12px 22px -8px rgba(18, 40, 61, .7); opacity: 0; pointer-events: none; transform: translateY(16px) scale(.8); transition: transform .5s var(--ease-out), opacity .4s, background .3s; }
.ai-launch svg { width: 28px; height: 28px; }
.ai-launch.is-on { opacity: 1; pointer-events: auto; transform: none; }
.ai-launch:hover { background: var(--cream); transform: scale(1.08); }
.ai-is-open .ai-launch { opacity: 0; pointer-events: none; }
.ai-chat { position: fixed; right: 18px; bottom: 90px; z-index: 95; display: flex; flex-direction: column; width: min(390px, calc(100vw - 36px)); height: min(560px, calc(100svh - 190px)); min-height: 300px; overflow: hidden; border-radius: 24px; background: var(--cream); color: var(--ink); box-shadow: 0 30px 60px -22px rgba(11, 26, 43, .75), 0 0 0 1px rgba(18, 40, 61, .12); animation: aiIn .35s var(--ease-out); }
.ai-chat[hidden] { display: none; }
@keyframes aiIn { from { opacity: 0; transform: translateY(14px); } }
.ai-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; background: var(--ink); color: var(--cream); }
.ai-head svg { width: 30px; height: 30px; flex: none; color: var(--sun); }
.ai-title { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.ai-title b { font: 400 1.15rem var(--serif); }
.ai-title small { font-size: .74rem; opacity: .85; }
.ai-close { width: 36px; height: 36px; border-radius: 50%; font-size: 1.5rem; line-height: 1; color: var(--cream); transition: background .3s; }
.ai-close:hover { background: rgba(244, 251, 255, .16); }
.ai-close:focus-visible, .ai-chat :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ai-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--butter); }
.ai-msg { max-width: 86%; display: grid; gap: 8px; justify-items: start; font-size: .95rem; line-height: 1.4; }
.ai-msg p { padding: 9px 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-assistant { align-self: flex-start; }
.ai-assistant p { background: var(--cream); border-radius: 16px 16px 16px 5px; }
.ai-user { align-self: flex-end; }
.ai-user p { background: var(--ink); color: var(--cream); border-radius: 16px 16px 5px 16px; }
.ai-typing p { font: italic 400 1.05rem var(--ital); color: var(--ink-soft); }
.ai-wa { padding: 9px 14px; border-radius: 99px; background: var(--ink); color: var(--cream); font-size: .88rem; font-weight: 700; text-decoration: none; transition: background .3s; }
.ai-wa:hover { background: var(--terra); }
.ai-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px; background: var(--cream); border-top: 1px solid rgba(18, 40, 61, .12); }
.ai-input { flex: 1; min-width: 0; resize: none; max-height: 110px; padding: 10px 13px; border: 0; border-radius: 16px; font: 500 16px/1.3 var(--sans); color: var(--ink); background: var(--butter); }
.ai-input::placeholder { color: var(--ink-soft); opacity: 1; }
.ai-send { padding: 10px 15px; border-radius: 99px; background: var(--ink); color: var(--cream); font-weight: 700; font-size: .92rem; transition: background .3s, opacity .3s; }
.ai-send:hover { background: var(--terra); }
.ai-send:disabled { opacity: .5; cursor: default; }
@media (max-width: 480px) {
  .ai-chat { right: 8px; left: 8px; width: auto; bottom: 86px; top: 72px; height: auto; min-height: 0; }
}