/* Capa visual de la propuesta local: profundidad, movimiento y controles flotantes. */
:root {
  --lift-shadow: 0 9px 24px -10px #5c32ab55, 0 2px 5px #3922680a;
  --spring: cubic-bezier(.22, 1, .36, 1);
}
body { background: #fffdf9; }
.site-header {
  background: #fffdf9e8;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-color: transparent;
  transition: box-shadow .3s, background .3s;
}
.site-header.is-scrolled {
  background: #fffdf9ed;
  box-shadow: 0 8px 32px -14px #39226838;
}
.desktop-nav {
  gap: 5px;
  padding: 6px;
  border: 1px solid #eee6fa;
  background: #f5f0fc99;
  border-radius: 40px;
}
.desktop-nav a { padding: 11px 16px; border: 0; border-radius: 28px; transition: background .2s, box-shadow .2s, transform .2s; }
.desktop-nav a:hover, .desktop-nav a:focus-visible { background: white; box-shadow: 0 4px 12px #39226810; transform: translateY(-1px); }
.header-actions { gap: 9px; }
.icon-button {
  border-radius: 15px;
  background: #fff;
  border: 1px solid #f1ebf9;
  box-shadow: 0 5px 15px -7px #39226838;
  transition: transform .24s var(--spring), box-shadow .24s, background .24s;
}
.icon-button:hover { transform: translateY(-3px); box-shadow: 0 9px 21px -8px #7446d84d; background: #faf7ff; }
.button, .hero-buttons .button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 54px;
  border-radius: 19px;
  border: 1px solid #ffffff33;
  background: linear-gradient(135deg, #8d5be9 0%, #7446d8 48%, #6232c4 100%);
  box-shadow: 0 12px 24px -8px #7446d877, 0 4px 8px -4px #39226850, inset 0 1px 0 #ffffff40;
  transition: transform .32s var(--spring), box-shadow .32s var(--spring), filter .25s;
}
.button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 15%, #ffffff22 48%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .65s var(--spring);
  pointer-events: none;
}
.button:hover, .hero-buttons .button:hover {
  background: linear-gradient(135deg, #9665f1, #7446d8 52%, #6232c4);
  transform: translateY(-4px);
  box-shadow: 0 19px 32px -11px #7446d88a, 0 6px 12px -6px #39226855, inset 0 1px 0 #ffffff40;
}
.button:hover::before { transform: translateX(120%); }
.button > span { transition: transform .3s var(--spring); }
.button:hover > span { transform: translate(3px, -3px); }
.button:active, .hero-buttons .button:active { transform: translateY(-1px) scale(.98); }
.button.light {
  background: linear-gradient(135deg, #ffe8a0, #ffdb6c);
  border-color: #fff3c180;
  box-shadow: 0 12px 28px -10px #28105388, inset 0 1px 0 #fff9db;
}
.button.light:hover { background: linear-gradient(135deg, #ffecb2, #ffdf7c); box-shadow: 0 19px 32px -11px #281053aa; }
.hero-buttons .text-link, .section-head > .text-link {
  padding: 14px 18px;
  border: 1px solid #eee5fa;
  border-radius: 17px;
  background: #fff;
  box-shadow: var(--lift-shadow);
  transition: transform .3s var(--spring), box-shadow .3s;
}
.hero-buttons .text-link:hover, .section-head > .text-link:hover { transform: translateY(-3px); box-shadow: 0 13px 25px -11px #7446d855; }
.hero { position: relative; padding-top: 45px; padding-bottom: 68px; }
.hero .eyebrow { width: fit-content; padding: 8px 13px; background: #f1e9ff; border: 1px solid #e7d9fc; border-radius: 20px; font-size: 9px; }
.hero h1 { letter-spacing: -3px; }
.hero-orbit { background: radial-gradient(ellipse at 35% 30%, #f4dfff, #e3d8ff 65%, #d5c9f9); box-shadow: inset 0 0 60px #ffffff77, 0 24px 65px -30px #9b79d64d; }
.hero-product-label { border: 1px solid #ffffffc9; background: #ffffffed; backdrop-filter: blur(12px); box-shadow: 0 16px 35px -15px #7446d85c, inset 0 1px 0 #fff; border-radius: 17px; }
.floating-product { border-color: #ffffff; box-shadow: 0 18px 35px -15px #b368536b, 0 3px 10px #39226810; border-radius: 19px; transition: translate .3s var(--spring), box-shadow .3s; }
.floating-product:hover { translate: 0 -7px; box-shadow: 0 25px 40px -14px #b368537a; }
.round-stamp { background: linear-gradient(140deg, #ffe998, #ffdc72); box-shadow: 0 12px 22px -10px #a8771e66; border: 3px solid #fff7d2; }
.round-arrow, .image-link-arrow { box-shadow: 0 5px 12px #39226812; transition: transform .3s var(--spring); }
.hero-main:hover .round-arrow, .product-card:hover .image-link-arrow { transform: rotate(-8deg) scale(1.08); }
.benefit-strip { background: #f6f1ff; border-color: #eee6fb; }
.section { padding-block: 78px; }
.collection-grid { gap: 25px; }
.collection-card { border: 1px solid #ffffff; border-radius: 28px; box-shadow: 0 10px 28px -18px #3922684d, inset 0 1px 0 #fff; transition: transform .4s var(--spring), box-shadow .4s; }
.collection-card:hover { transform: translateY(-8px); box-shadow: 0 24px 40px -20px #39226861; }
.collection-card.pets { background: linear-gradient(140deg, #fff5d1, #ffeaa6); }
.collection-card.fantasy { background: linear-gradient(140deg, #f5eaff, #e8d5fc); }
.collection-card.stage { background: linear-gradient(140deg, #e2f5ff, #c9e8fb); }
.collection-card.stage .collection-copy { background: transparent; }
.collection-cta { border: 0; background: #ffffffb5; padding: 10px 13px; border-radius: 13px; box-shadow: 0 4px 12px -7px #39226838; }
.selection { padding-top: 20px; }
.product-grid { gap: 32px 24px; }
.product-card { border-radius: 23px; padding: 9px 9px 4px; margin: -9px; transition: transform .35s var(--spring), box-shadow .35s, background .35s; }
.product-card:hover { background: white; box-shadow: 0 20px 40px -22px #39226859; transform: translateY(-6px); }
.product-image { border-radius: 23px; border-color: transparent; box-shadow: inset 0 0 0 1px #ffffff88; }
.product-image img { transition: transform .6s var(--spring); }
.product-card:hover img { transform: scale(1.065); }
.product-tag { background: #ffffffdf; backdrop-filter: blur(8px); padding: 7px 10px; box-shadow: 0 3px 9px #39226808; }
.product-info { padding: 17px 4px 12px; }
.detail-link { border-radius: 11px; background: #f4eefb; color: #6941b2; padding: 8px 10px; font-weight: 700; transition: background .2s; }
.detail-link:hover { background: #eaddfd; }
.stage-story { padding-top: 35px; }
.stage-image { border-radius: 28px; box-shadow: 0 24px 45px -30px #3922685c; }
.custom-section { margin: 28px 18px 0; border-radius: 32px; overflow: hidden; background: radial-gradient(ellipse at 95% 10%, #a77aee 0%, transparent 50%), #7446d8; box-shadow: 0 24px 45px -30px #7446d88a; }
.custom-inner { padding-block: 65px; }
.faq-list details { background: white; border: 1px solid #eee7f7; border-radius: 17px; padding: 0 20px; margin-bottom: 12px; box-shadow: 0 5px 18px -14px #39226830; }
.faq-list summary { padding-block: 20px; }
.faq-list details[open] { border-color: #d8c4f7; }
.faq-list details > p { padding-bottom: 21px; }
.category-tabs a { box-shadow: 0 5px 12px -9px #39226840; transition: transform .25s var(--spring), box-shadow .25s; }
.category-tabs a:hover { transform: translateY(-3px); box-shadow: var(--lift-shadow); }
.category-tabs a[aria-current=true] { background: linear-gradient(130deg, #8d5be9, #7446d8); box-shadow: 0 8px 17px -9px #7446d888; }
.catalog-tools form, .sort-control select { border-color: #eee6f8; box-shadow: var(--lift-shadow); }
.catalog-tools form .icon-button { border: 0; box-shadow: none; margin: 3px; }
.detail-image { border-radius: 28px; box-shadow: 0 22px 45px -30px #7446d85c; }
.purchase-note { border-radius: 17px; background: #fff3ce; }
.site-footer { background: #f4effb; border-top: 0; }
.footer-top { padding-block: 65px; }
.reveal-ready { opacity: 0; translate: 0 26px; transition: opacity .7s var(--spring), translate .8s var(--spring); transition-delay: var(--reveal-delay, 0ms); }
.reveal-ready.is-visible { opacity: 1; translate: 0 0; }
.product-card.reveal-ready { transition: opacity .6s var(--spring), translate .7s var(--spring), transform .35s var(--spring), box-shadow .35s, background .35s; transition-delay: var(--reveal-delay, 0ms); }
.hero-copy { animation: hero-entrance .85s var(--spring) both; }
.hero-art { animation: hero-entrance 1s .12s var(--spring) backwards; }
@keyframes hero-entrance { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@media (max-width:1100px) {
  .desktop-nav a { padding: 10px 11px; }
  .section { padding-block: 60px; }
  .selection { padding-top: 15px; }
  .stage-story { padding-top: 25px; }
  .collection-grid { gap: 18px; }
}
@media (max-width:820px) {
  .hero { padding-top: 35px; padding-bottom: 48px; }
  .hero .eyebrow { font-size: 7px; letter-spacing: 1px; padding: 7px 9px; }
  .hero h1 { letter-spacing: -1.8px; }
  .section { padding-block: 50px; }
  .section-head > .text-link { padding: 11px 13px; }
  .collection-grid { gap: 13px; }
  .collection-cta { padding: 8px 10px; }
  .product-grid { gap: 28px 20px; }
  .custom-inner { padding-block: 45px; }
  .before-buy { gap: 30px; }
}
@media (max-width:600px) {
  .header-actions { gap: 5px; }
  .icon-button { border-radius: 12px; min-width: 34px; min-height: 37px; }
  .site-header { padding-inline: 16px; }
  .brand { font-size: 18px; gap: 8px; }
  .hero { padding-top: 30px; padding-bottom: 32px; }
  .hero .eyebrow { font-size: 7px; letter-spacing: .7px; padding: 8px 9px; }
  .hero-buttons .button { border-radius: 17px; min-height: 49px; padding: 14px 15px; gap: 10px; }
  .hero-buttons { gap: 11px; }
  .hero-buttons .text-link { padding: 12px 11px; border-radius: 15px; min-height: 46px; font-size: 8px; gap: 5px; }
  .hero-product-label { border-radius: 15px; }
  .floating-product { border-radius: 17px; }
  .round-stamp { border-width: 2px; }
  .section { padding-block: 43px; }
  .section-head { align-items: flex-start; gap: 12px; }
  .section-head > .text-link { border-radius: 13px; padding: 10px 12px; max-width: 92px; line-height: 1.5; }
  .collection-grid { gap: 19px; }
  .collection-card { border-radius: 24px; }
  .collection-cta { font-size: 9px; padding: 9px 11px; gap: 8px; }
  .product-grid { gap: 26px 17px; }
  .product-card { padding: 6px 6px 2px; margin: -6px; border-radius: 19px; }
  .product-image { border-radius: 19px; }
  .product-info { padding: 13px 1px 8px; }
  .product-info-bottom { flex-wrap: wrap; gap: 7px; }
  .detail-link { padding: 7px 8px; font-size: 8px; }
  .product-tag { font-size: 6px; padding: 6px 7px; }
  .selection { padding-top: 10px; }
  .stage-story { padding-top: 20px; }
  .custom-section { margin-inline: 10px; border-radius: 25px; }
  .custom-inner { width: calc(100% - 36px); padding-block: 38px; }
  .before-buy { gap: 20px; }
  .faq-list details { padding-inline: 16px; border-radius: 15px; }
  .faq-list summary { font-size: 11px; padding-right: 20px; }
  .footer-top { padding-block: 40px; }
  .detail-actions .button { border-radius: 19px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal-ready { opacity: 1; translate: none; }
}