@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700;800&display=swap');

/* ============================================
   GAMISE V3 — Custom CSS
   Editorial soft UI, light-first pastel palette
   ============================================ */

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

html.transitioning,
html.transitioning *,
html.transitioning *::before,
html.transitioning *::after {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, fill 0.35s ease, stroke 0.35s ease !important;
}

[data-cloak] {
  display: none !important;
}

::-webkit-scrollbar {
  width: 7px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(141, 177, 210, 0.48);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(125, 159, 191, 0.8);
}

body {
  font-family: 'Raleway', sans-serif;
  overflow-x: clip;
  background:
    radial-gradient(circle at top left, rgba(200, 222, 240, 0.82), transparent 26%),
    radial-gradient(circle at bottom right, rgba(252, 239, 233, 0.86), transparent 22%),
    linear-gradient(180deg, #fffdfb 0%, #f8fbfe 42%, #f2f6f9 100%);
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-display {
  font-family: 'Raleway', sans-serif;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p,
li,
a,
span,
label,
input,
textarea,
select,
button {
  font-family: 'Raleway', sans-serif;
}

body {
  transition: opacity 0.35s ease;
}

body.loading {
  opacity: 0 !important;
  pointer-events: none;
}

.hero-slide .hero-content {
  z-index: 2;
}

.hero-slide .hero-content h1 {
  text-shadow: 0 10px 30px rgba(27, 41, 56, 0.18);
}

.hero-slide video,
.hero-slide img {
  transform: scale(1.02);
}

.swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.65) !important;
  opacity: 1 !important;
  width: 8px !important;
  height: 8px !important;
  transition: all 0.3s ease !important;
}

.swiper-pagination-bullet-active {
  background: #8db1d2 !important;
  width: 30px !important;
  border-radius: 999px !important;
}

.noise-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

.brand-logo {
  opacity: 0.42;
  filter: grayscale(1);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease, filter 0.45s ease;
}

.brand-logo:hover {
  opacity: 1;
  filter: grayscale(0);
  transform: translateY(-2px) scale(1.03);
}

.product-card {
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.42s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.28s ease;
  box-shadow: 0 12px 28px rgba(123, 151, 176, 0.08);
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 60px rgba(123, 151, 176, 0.16);
}

.product-card img {
  transform: translate3d(var(--product-image-shift-x, 0), 0, 0);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

.product-card:hover img {
  transform: translate3d(var(--product-image-shift-x, 0), 0, 0) scale(1.045);
}

.category-card,
.cat-cinema-card {
  will-change: transform;
  transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.48s ease, border-color 0.28s ease;
}

.category-card:hover,
.cat-cinema-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 32px 80px rgba(103, 131, 157, 0.18);
}

.category-card img,
.cat-cinema-card img {
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
}

.category-card:hover img,
.cat-cinema-card:hover img {
  transform: scale(1.08);
}

.category-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  align-self: flex-start;
  padding: 0.82rem 1.2rem 0.82rem 1.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  backdrop-filter: blur(16px);
  box-shadow: 0 14px 30px rgba(15, 23, 32, 0.22);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.cat-cinema-card:hover .category-cta {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.36);
  box-shadow: 0 18px 36px rgba(15, 23, 32, 0.26);
}

.category-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.categories-swiper {
  overflow: visible !important;
}

.categories-swiper .swiper-wrapper {
  align-items: stretch;
}

.menu-panel,
.menu-subpanel {
  will-change: transform;
  backdrop-filter: blur(14px);
}

.menu-panel {
  background: rgba(255, 253, 251, 0.96) !important;
}

.menu-subpanel {
  background: rgba(246, 251, 255, 0.98) !important;
}

@media (max-width: 1023px) {
  #menu-subpanel {
    backdrop-filter: blur(18px);
  }
}

.menu-cat-item {
  transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-cat-item:hover,
.menu-cat-item.is-active {
  padding-left: 1.4rem;
}

.menu-subcat-enter {
  animation: subcatIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes subcatIn {
  from {
    opacity: 0;
    transform: translateX(14px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.btn-hover {
  position: relative;
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, background-color 0.28s ease;
}

.btn-hover:active {
  transform: scale(0.98);
}

.btn-hover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 28%, rgba(255, 255, 255, 0.26) 50%, transparent 72%);
  transform: translateX(-120%);
  transition: transform 0.55s ease;
}

.btn-hover:hover::after {
  transform: translateX(120%);
}

.choice-card.is-selected {
  background-color: rgba(246, 251, 255, 0.3);
  border-color: #8db1d2;
}

.product-shipping-card {
  background-color: rgba(141, 177, 210, 0.12);
  border-color: rgba(141, 177, 210, 0.24);
}

.product-shipping-icon {
  background-color: #ffffff;
  color: #8db1d2;
}

.quantity-stepper {
  background-color: rgba(255, 255, 255, 0.94);
}

.quantity-stepper-btn {
  color: #2e3944;
}

.quantity-stepper-btn:hover {
  background-color: rgba(141, 177, 210, 0.14);
  color: #8db1d2;
}

.quantity-stepper-input {
  background-color: #ffffff;
  color: #1f252b;
}

.quantity-stepper-input::-webkit-outer-spin-button,
.quantity-stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity-stepper-input {
  -moz-appearance: textfield;
}

.surface-item {
  animation: slideIn 0.28s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

:focus-visible {
  outline: 2px solid #8db1d2;
  outline-offset: 3px;
  border-radius: 6px;
}

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media print {
  header,
  footer,
  .no-print,
  [aria-label='Contactar por WhatsApp'] {
    display: none !important;
  }

  main {
    padding: 0 !important;
  }

  body {
    font-size: 12px;
    color: #000;
    background: #fff !important;
  }
}

.dark body,
.dark .bg-neutral-50 {
  background-color: #171b1f !important;
  background-image: none !important;
}

.dark .bg-brand-100\/80 {
  background-color: rgba(24, 31, 37, 0.9) !important;
}

.dark .bg-white {
  background-color: #20262c !important;
}

.dark .bg-white\/90 {
  background-color: rgba(24, 31, 37, 0.92) !important;
}

.dark .bg-white\/80 {
  background-color: rgba(31, 39, 47, 0.88) !important;
}

.dark .bg-white\/70 {
  background-color: rgba(31, 39, 47, 0.8) !important;
}

.dark .bg-white\/95 {
  background-color: rgba(32, 38, 44, 0.94) !important;
}

.dark .bg-brand-50 {
  background-color: rgba(141, 177, 210, 0.12) !important;
}

.dark .bg-brand-50\/70 {
  background-color: rgba(141, 177, 210, 0.14) !important;
}

.dark .bg-neutral-50\/90 {
  background-color: rgba(31, 37, 43, 0.96) !important;
}

.dark .bg-neutral-50\/60 {
  background-color: rgba(36, 44, 52, 0.74) !important;
}

.dark .text-neutral-900 {
  color: #f5f3ee !important;
}

.dark .text-neutral-800 {
  color: #ece7e0 !important;
}

.dark .text-neutral-700 {
  color: #d9d0c6 !important;
}

.dark .text-neutral-600 {
  color: #bdaea1 !important;
}

.dark .text-neutral-500 {
  color: #9d8f84 !important;
}

.dark .text-neutral-400 {
  color: #85786d !important;
}

.dark .text-neutral-300 {
  color: #cfc2b6 !important;
}

.dark .border-neutral-100 {
  border-color: #2e363d !important;
}

.dark .border-white {
  border-color: rgba(67, 78, 88, 0.88) !important;
}

.dark .border-white\/60 {
  border-color: rgba(67, 78, 88, 0.6) !important;
}

.dark .border-white\/70 {
  border-color: rgba(67, 78, 88, 0.72) !important;
}

.dark .border-neutral-200 {
  border-color: #3a444c !important;
}

.dark .border-neutral-300 {
  border-color: #46515a !important;
}

.dark .border-brand-100 {
  border-color: rgba(141, 177, 210, 0.26) !important;
}

.dark .bg-neutral-100 {
  background-color: #2b3238 !important;
}

.dark .hover\:bg-neutral-50:hover {
  background-color: #2b3238 !important;
}

.dark .hover\:bg-brand-50:hover,
.dark .hover\:bg-brand-50\/70:hover {
  background-color: rgba(141, 177, 210, 0.16) !important;
}

.dark .hover\:bg-brand-50\/60:hover {
  background-color: rgba(141, 177, 210, 0.14) !important;
}

.dark .choice-card.is-selected {
  background-color: rgba(141, 177, 210, 0.12) !important;
  border-color: #8db1d2 !important;
}

.dark .product-shipping-card {
  background-color: rgba(141, 177, 210, 0.12) !important;
  border-color: rgba(141, 177, 210, 0.26) !important;
}

.dark .product-shipping-icon {
  background-color: #253039 !important;
  color: #9fc0df !important;
  box-shadow: none !important;
}

.dark .product-shipping-title {
  color: #f5f3ee !important;
}

.dark .product-shipping-copy {
  color: #c8b8aa !important;
}

.dark .quantity-stepper {
  background-color: #20272e !important;
  border-color: #46515a !important;
}

.dark .quantity-stepper-btn {
  color: #ddd2c7 !important;
}

.dark .quantity-stepper-btn:hover {
  background-color: rgba(141, 177, 210, 0.14) !important;
  color: #9fc0df !important;
}

.dark .quantity-stepper-input {
  background-color: #29313a !important;
  color: #f5f3ee !important;
  border-color: #46515a !important;
}

.dark .bg-neutral-900 {
  background-color: #13181d !important;
}

.dark .product-card:hover {
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.32);
}

.dark .menu-panel {
  background-color: rgba(28, 34, 39, 0.96) !important;
}

.dark .menu-subpanel {
  background-color: rgba(22, 28, 33, 0.98) !important;
}

.dark #main-header {
  color: #e7ded5;
}

.dark #main-header .text-neutral-700,
.dark #main-header .text-neutral-600 {
  color: #ddd2c7 !important;
}

.dark #main-header .text-neutral-500,
.dark #main-header .text-neutral-400 {
  color: #bfaea1 !important;
}

.dark #main-header input,
.dark #main-header input::placeholder {
  color: #e7ded5 !important;
}

.dark #main-header nav {
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.34) !important;
}

.dark input:not([type='checkbox']):not([type='radio']),
.dark textarea,
.dark select {
  background-color: rgba(31, 37, 43, 0.96) !important;
  color: #e7ded5 !important;
}

.dark input:not([type='checkbox']):not([type='radio'])::placeholder,
.dark textarea::placeholder,
.dark select::placeholder {
  color: #bfaea1 !important;
}

.dark label[class*='border']:has(input[type='radio']:checked),
.dark label[class*='border']:has(input[type='checkbox']:checked) {
  background-color: rgba(141, 177, 210, 0.12) !important;
  border-color: #8db1d2 !important;
}

.dark fieldset label:has(input[type='radio']:checked),
.dark fieldset label:has(input[type='checkbox']:checked) {
  background-color: rgba(141, 177, 210, 0.12) !important;
  border-color: #8db1d2 !important;
}

.dark [class*='has-[:checked]:bg-brand-50/30']:has(input:checked) {
  background-color: rgba(141, 177, 210, 0.12) !important;
}

.dark [class*='has-[:checked]:border-brand-500']:has(input:checked) {
  border-color: #8db1d2 !important;
}

.dark input[type='checkbox'],
.dark input[type='radio'] {
  border-color: #4b5660;
  background-color: #1d252c;
}

.dark #menu-panel .h-px.bg-neutral-100 {
  background-color: #313a42 !important;
}

.dark #menu-panel .menu-cat-item {
  color: #ded4c8 !important;
}

.dark #menu-panel .menu-cat-item:hover,
.dark #menu-panel .menu-cat-item.is-active {
  color: #9fc0df !important;
}

.dark #menu-panel .menu-cat-item .bg-white,
.dark #menu-panel .hover\:bg-white:hover,
.dark #menu-subpanel .hover\:bg-white:hover {
  background-color: #253039 !important;
}

.dark #menu-panel #menu-close-btn,
.dark #menu-panel #theme-toggle,
.dark #menu-panel a.text-sm,
.dark #menu-subpanel .menu-subcat-trigger,
.dark #menu-subpanel .menu-subcat-enter,
.dark #menu-subpanel a.text-\[14px\],
.dark #menu-subpanel .menu-subcat-child {
  color: #dacfc4 !important;
}

.dark #menu-panel #menu-close-btn:hover,
.dark #menu-panel #theme-toggle:hover,
.dark #menu-panel a.text-sm:hover,
.dark #menu-subpanel a.text-\[14px\]:hover,
.dark #menu-subpanel .menu-subcat-trigger:hover,
.dark #menu-subpanel .menu-subcat-child:hover {
  color: #f4eee6 !important;
}

.dark #menu-panel [aria-label='Instagram'],
.dark #menu-panel [aria-label='Facebook'] {
  background-color: #253039 !important;
  color: #d5c7bb !important;
}

.dark #menu-panel [aria-label='Instagram']:hover,
.dark #menu-panel [aria-label='Facebook']:hover {
  color: #9fc0df !important;
}

.dark #search-results,
.dark #mobile-search-results {
  background-color: #1f272f !important;
  border-color: rgba(67, 78, 88, 0.82) !important;
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.34) !important;
}

.dark #search-results .border-neutral-50,
.dark #mobile-search-results .border-neutral-50 {
  border-color: #303941 !important;
}

.dark #search-results a:hover,
.dark #mobile-search-results a:hover {
  background-color: rgba(141, 177, 210, 0.12) !important;
}

.dark #cart-drawer-panel {
  background-color: #1f262d !important;
  color: #e6ddd2;
}

.dark #cart-drawer-panel .cart-tab.bg-white {
  background-color: #1f262d !important;
  color: #f4eee6 !important;
}

.dark #cart-drawer-panel .cart-tab.bg-neutral-50 {
  background-color: #171d23 !important;
  color: #cab9ab !important;
}

.dark #cart-drawer-panel .cart-tab.bg-neutral-50:hover {
  color: #efe7dc !important;
}

.dark #cart-drawer-panel .bg-brand-50\/20 {
  background-color: rgba(141, 177, 210, 0.08) !important;
}

.dark #cart-drawer-panel .bg-white {
  background-color: #1f262d !important;
}

.dark #cart-drawer-panel .bg-neutral-50 {
  background-color: #283038 !important;
}

.dark #cart-drawer-panel .border-neutral-100,
.dark #cart-drawer-panel .border-neutral-200 {
  border-color: #303941 !important;
}

.dark #cart-drawer-panel .divide-neutral-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: #303941 !important;
}

.dark #cart-drawer-panel .text-neutral-500,
.dark #cart-drawer-panel .text-neutral-400 {
  color: #c2b3a6 !important;
}

.dark #cart-drawer-panel .text-neutral-300,
.dark #cart-drawer-panel #cart-drawer-close {
  color: #b19f92 !important;
}

.dark #cart-drawer-panel #cart-drawer-close:hover,
.dark #cart-drawer-panel [data-cart-remove]:hover,
.dark #cart-drawer-panel [data-wish-remove]:hover {
  color: #f3ece4 !important;
}

/* Talles seleccionables — shake de validación */
@keyframes sizeShake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

.size-shake {
  animation: sizeShake 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hero: altura adaptativa en mobile pequeño
   Evita que 680px fijo supere el viewport en teléfonos cortos.
   clamp(520px, 88svh, 680px) = mín 520, ideal 88% del viewport, máx 680. */
@media (max-width: 639px) {
  .hero-slide {
    height: clamp(520px, 88svh, 680px);
  }
}

/* Dark mode: search input en el header
   El nav oscuro es ~rgba(24,31,37). Con el override genérico de input
   el fondo queda casi indistinguible. Usamos un tono cálido traslúcido
   que mantiene coherencia con el cream (#f7f1ea) del light mode. */
.dark #main-header input[type="search"] {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #e7ded5 !important;
}

.dark #main-header input[type="search"]:focus {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(141, 177, 210, 0.48) !important;
}

.dark #main-header input[type="search"]::placeholder {
  color: #9d8f84 !important;
}