/* ==========================================================================
   EL PALO — CAPA DE ACABADO PREMIUM
   Refinamiento visual sobre design-system / home-premium / store-premium.
   Paleta corporativa intacta: oro #f4c20d, oro suave #ffd24a,
   espresso #2b1a12, tinta #16100c, crema #f7f1e4, papel #fffefa.
   Ninguna imagen se sustituye.
   ========================================================================== */

/* ==========================================================================
   A. BASE
   ========================================================================== */

.home-page,
.store-page,
.content-page {
  --hairline: rgba(22, 16, 12, 0.09);
  --hairline-strong: rgba(22, 16, 12, 0.16);
  --hairline-inverse: rgba(255, 255, 255, 0.11);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

.home-page ::selection,
.store-page ::selection,
.content-page ::selection {
  color: #16100c;
  background: #ffd24a;
}

/* Barra de scroll discreta y de marca */
.home-page,
.store-page {
  scrollbar-color: rgba(244, 194, 13, 0.7) transparent;
  scrollbar-width: thin;
}

.home-page ::-webkit-scrollbar,
.store-page ::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

.home-page ::-webkit-scrollbar-track,
.store-page ::-webkit-scrollbar-track {
  background: rgba(22, 16, 12, 0.05);
}

.home-page ::-webkit-scrollbar-thumb,
.store-page ::-webkit-scrollbar-thumb {
  background: rgba(244, 194, 13, 0.8);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

.home-page ::-webkit-scrollbar-thumb:hover,
.store-page ::-webkit-scrollbar-thumb:hover {
  background: #f4c20d;
  background-clip: padding-box;
}

/* Titulares con corte optico mas fino */
.home-page :where(.section-title, .how__title, .prizes__headline, .download__headline),
.store-page :where(.section-title, .hero__title) {
  font-kerning: normal;
  text-wrap: balance;
}

/* Foco visible pero elegante */
.home-page :where(a, button, input, select, summary):focus-visible,
.store-page :where(a, button, input, select, summary):focus-visible {
  outline: 2px solid #f4c20d;
  outline-offset: 3px;
  border-radius: 6px;
  box-shadow: 0 0 0 6px rgba(244, 194, 13, 0.2);
}

/* ==========================================================================
   B. CABECERA
   ========================================================================== */

.home-page .topbar,
.store-page .topbar {
  background: rgba(16, 11, 8, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(16px) saturate(140%);
}

.store-page .topbar {
  background: rgba(16, 11, 8, 0.92);
}

.home-page .brand__dot,
.store-page .brand__dot {
  position: relative;
  background: linear-gradient(140deg, #ffd24a, #f4c20d);
  box-shadow: 0 0 0 5px rgba(244, 194, 13, 0.14), 0 0 16px rgba(244, 194, 13, 0.55);
  transition: transform var(--dur-md) var(--ease-out-back), box-shadow var(--dur-md) ease;
}

.home-page .brand:hover .brand__dot,
.store-page .brand:hover .brand__dot {
  transform: rotate(135deg) scale(1.14);
  box-shadow: 0 0 0 7px rgba(244, 194, 13, 0.16), 0 0 24px rgba(244, 194, 13, 0.75);
}

.home-page .brand__name,
.store-page .brand__name {
  transition: letter-spacing var(--dur-md) var(--ease-out-expo);
}

.home-page .brand:hover .brand__name,
.store-page .brand:hover .brand__name {
  letter-spacing: 0.1em;
}

/* Carrito con contador tipo tienda real */
.store-page .topbar__cart {
  position: relative;
  padding-inline: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 18px rgba(244, 194, 13, 0.26);
}

.store-page .topbar__cart::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, #ffd24a, #f4c20d);
}

.store-page .topbar__cart:hover {
  box-shadow: 0 10px 26px rgba(244, 194, 13, 0.4);
}

.store-page .topbar__cart.is-bumped {
  animation: popConfirm 520ms var(--ease-out-back);
}

/* ==========================================================================
   C. INICIO — HERO
   ========================================================================== */

.home-page .hero__media {
  animation:
    heroSettle 1200ms var(--ease-out) both,
    heroDrift 26s var(--ease-in-out-soft) 1200ms infinite alternate;
}

/* Aurora dorada sobre la imagen (no la tapa: la calienta) */
.home-page .hero__overlay::before {
  content: "";
  position: absolute;
  width: 78vw;
  height: 78vw;
  max-width: 1000px;
  max-height: 1000px;
  top: -22%;
  right: -14%;
  border-radius: 50%;
  mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(244, 194, 13, 0.24), rgba(244, 194, 13, 0.06) 42%, transparent 68%);
  animation: auroraDrift 22s var(--ease-in-out-soft) infinite;
}

/* Grano de pelicula: quita el aspecto "plano digital" */
.home-page .hero__overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: var(--grain);
}

.home-page .hero::before {
  animation: fadeSlideDown 900ms var(--ease-out-expo) 700ms both;
}

@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-18px); }
  to { opacity: 0.46; transform: none; }
}

.home-page .hero__kicker {
  position: relative;
  align-items: center;
  gap: 12px;
  padding-left: 46px;
}

/* Linea dorada que se dibuja delante del kicker */
.home-page .hero__kicker::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 34px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #f4c20d);
  transform-origin: 0 50%;
  animation: drawLine 900ms var(--ease-out-expo) 500ms both;
}

@keyframes drawLine {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* El cronometro: nucleo de la marca */
.home-page .hero__timer-mark {
  position: relative;
  background: linear-gradient(178deg, #ffffff 22%, #f6ead0 62%, #e8cf9a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 22px 60px rgba(0, 0, 0, 0.45));
  animation: timerReveal 1200ms var(--ease-out-expo) 250ms both;
}

.home-page .hero__timer-mark::after {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: 8%;
  height: 46%;
  z-index: -1;
  border-radius: 50%;
  filter: blur(46px);
  background: radial-gradient(ellipse, rgba(244, 194, 13, 0.4), transparent 70%);
  animation: goldPulse 5.5s var(--ease-in-out-soft) infinite;
}

/* Las dos listas de filtros deben tener las mismas funciones en el mismo
   orden; si no, el navegador salta de golpe en vez de interpolar. */
@keyframes timerReveal {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.96);
    filter: blur(16px) drop-shadow(0 22px 60px rgba(0, 0, 0, 0.45));
  }

  to {
    opacity: 1;
    transform: none;
    filter: blur(0) drop-shadow(0 22px 60px rgba(0, 0, 0, 0.45));
  }
}

.home-page .hero__lede,
.home-page .hero__actions,
.home-page .hero__microcopy {
  animation: fadeUpSoft 900ms var(--ease-out-expo) both;
}

.home-page .hero__lede { animation-delay: 900ms; }
.home-page .hero__actions { animation-delay: 1020ms; }
.home-page .hero__microcopy { animation-delay: 1140ms; }

@keyframes fadeUpSoft {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

.home-page .hero .btnPrimary {
  background: linear-gradient(135deg, #ffd24a, #f4c20d);
  border-color: transparent;
  box-shadow: 0 12px 34px rgba(244, 194, 13, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.home-page .hero .btnPrimary:hover {
  box-shadow: 0 18px 46px rgba(244, 194, 13, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.home-page .hero .btnSecondary {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
}

.home-page .hero .btnSecondary:hover {
  background: rgba(255, 255, 255, 0.96);
  border-color: transparent;
}

.home-page .drag-indicator {
  animation: fadeUpSoft 900ms var(--ease-out-expo) 1400ms both;
}

.home-page .drag-indicator__icon {
  animation: bounceDown 2.4s var(--ease-in-out-soft) infinite;
}

/* ==========================================================================
   D. INICIO — COMO FUNCIONA
   ========================================================================== */

.home-page .how {
  position: relative;
  background:
    radial-gradient(1000px 520px at 82% -6%, rgba(244, 194, 13, 0.13), transparent 62%),
    var(--surface-section);
}

.home-page .how__step {
  border-top-color: var(--hairline);
}

.home-page .how__step:last-child {
  border-bottom-color: var(--hairline);
}

.home-page .how__media {
  box-shadow: var(--elev-4);
  transition: transform var(--dur-lg) var(--ease-out-expo), box-shadow var(--dur-lg) ease;
}

.home-page .how__step:hover .how__media {
  transform: translateY(-8px);
  box-shadow: 0 30px 70px rgba(22, 16, 12, 0.24);
}

.home-page .how__media::after {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 -80px 90px -60px rgba(0, 0, 0, 0.6);
}

/* La hoja antigua dejaba esta etiqueta como una pastilla de 46px que se
   expandia al entrar en pantalla: aplastaba el numero a ~11px y ocultaba
   el texto. Se normaliza a una fila limpia "(1) PASO 1". */
.home-page .how__step-label,
.home-page .how__step.is-visible .how__step-label {
  width: auto;
  height: auto;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  justify-content: flex-start;
}

.home-page .how__step-label-text,
.home-page .how__step.is-visible .how__step-label-text {
  opacity: 1;
  transform: none;
}

.home-page .how__step-number {
  flex: 0 0 auto;
}

/* Numero de paso con anillo dorado giratorio */
.home-page .how__step-number {
  position: relative;
  background: linear-gradient(140deg, #ffd24a, #f4c20d);
  box-shadow: 0 8px 22px rgba(244, 194, 13, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  font-family: "Archivo Black", sans-serif;
  font-weight: 400;
  font-size: 15px;
}

.home-page .how__step-number::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px dashed rgba(244, 194, 13, 0.5);
  animation: ringSpin 14s linear infinite;
}

.home-page .how__step-label-text {
  position: relative;
  padding-left: 14px;
}

.home-page .how__step-label-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.home-page .how__step-title {
  background: linear-gradient(120deg, #16100c 40%, #4a3626);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   E. INICIO — PREMIOS
   ========================================================================== */

.home-page .prizes {
  background:
    radial-gradient(760px 520px at 10% 0%, rgba(244, 194, 13, 0.1), transparent 60%),
    var(--surface-inverse);
}

.home-page .prizes::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: var(--grain);
}

.home-page .prizes__inner {
  z-index: 1;
}

.home-page .prizes::before {
  animation: goldPulse 9s var(--ease-in-out-soft) infinite;
}

.home-page .prizes__headline .ink {
  background: linear-gradient(100deg, #f4c20d, #ffd24a 45%, #fff0bd);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Tarjetas de premio: borde de degradado en hover */
.home-page .prize-card {
  overflow: hidden;
  background: linear-gradient(178deg, #fffefa, #f7f1e4);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: var(--elev-dark-2);
  transition:
    transform var(--dur-lg) var(--ease-out-expo),
    box-shadow var(--dur-lg) ease,
    border-color var(--dur-md) ease;
}

.home-page .prize-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(244, 194, 13, 0.22), transparent 60%);
  transition: opacity var(--dur-md) ease;
}

.home-page .prize-card:hover {
  transform: translateY(-10px);
  border-color: rgba(244, 194, 13, 0.7);
  box-shadow: var(--elev-dark-3), 0 0 0 1px rgba(244, 194, 13, 0.28);
}

.home-page .prize-card:hover::before {
  opacity: 1;
}

.home-page .prize-card > * {
  position: relative;
  z-index: 1;
}

.home-page .prize-card__badge {
  background: linear-gradient(135deg, #ffd24a, #f4c20d);
  box-shadow: 0 4px 14px rgba(244, 194, 13, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.home-page .prize-card__image {
  transition: transform var(--dur-lg) var(--ease-out-expo), filter var(--dur-lg) ease;
}

.home-page .prize-card:hover .prize-card__image {
  transform: translateY(-8px) scale(1.05);
}

/* El premio bloqueado se ve, pero se nota que aun no esta disponible */
.home-page .prize-card:not(.prize-card--active) .prize-card__image {
  filter: grayscale(0.42) contrast(0.96) drop-shadow(0 22px 24px rgba(22, 16, 12, 0.14));
  opacity: 0.86;
}

.home-page .prize-card:not(.prize-card--active):hover .prize-card__image {
  filter: grayscale(0) drop-shadow(0 22px 26px rgba(22, 16, 12, 0.18));
  opacity: 1;
}

.home-page .prize-card__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  background: rgba(22, 16, 12, 0.06);
  border-radius: 999px;
}

.home-page .prize-card__status--unlocked {
  color: #2f6d45;
  background: rgba(47, 109, 69, 0.1);
}

.home-page .prize-card .status-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}

.home-page .prize-card__status--unlocked .status-dot {
  animation: dotPulse 2.4s var(--ease-in-out-soft) infinite;
}

/* Barra de progreso de premios */
.home-page .progress-bar {
  height: 10px;
  overflow: visible;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}

.home-page .progress-bar__fill {
  overflow: hidden;
  background: linear-gradient(90deg, #f4c20d, #ffd24a);
  box-shadow: 0 0 20px rgba(244, 194, 13, 0.55);
  transition: width 1.6s var(--ease-out-expo);
}

.home-page .progress-bar__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, 0.65) 50%, transparent 66%);
  animation: shimmerSweep 2.8s var(--ease-in-out-soft) 1.2s infinite;
}

.home-page .progress-bar__marker {
  background: #16100c;
  border-color: rgba(255, 255, 255, 0.2);
}

.home-page .progress-tracker__hint {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 34px;
  padding: 11px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline-inverse);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

/* ==========================================================================
   F. INICIO — DESCARGA
   ========================================================================== */

.home-page .download {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #ffd24a 0%, #f4c20d 52%, #e8b405 100%);
}

/* Trama de puntos: textura sin coste de imagen */
.home-page .download::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image: radial-gradient(rgba(22, 16, 12, 0.16) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at 30% 50%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 50%, #000, transparent 78%);
}

.home-page .download__inner {
  position: relative;
  z-index: 1;
}

.home-page .download__headline {
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.22);
}

.home-page .playstore-button {
  display: inline-flex;
  border-radius: 14px;
  transition: transform var(--dur-md) var(--ease-out-back), filter var(--dur-md) ease;
  filter: drop-shadow(0 10px 24px rgba(22, 16, 12, 0.26));
}

.home-page .playstore-button:hover {
  transform: translateY(-4px) scale(1.03);
  filter: drop-shadow(0 18px 34px rgba(22, 16, 12, 0.34));
}

.home-page .download__mockup {
  animation: floatSoft 8s var(--ease-in-out-soft) infinite;
}

/* ==========================================================================
   G. INICIO — BANNER DE TIENDA
   ========================================================================== */

.home-page .shop-banner__inner {
  position: relative;
  isolation: isolate;
  background: linear-gradient(150deg, #221610, #16100c 62%);
  box-shadow: var(--elev-4);
  transition: box-shadow var(--dur-lg) ease, transform var(--dur-lg) var(--ease-out-expo);
}

.home-page .shop-banner__inner:hover {
  transform: translateY(-6px);
  box-shadow: 0 44px 100px rgba(22, 16, 12, 0.28);
}

.home-page .shop-banner__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}

.home-page .shop-banner__link {
  position: relative;
  overflow: hidden;
}

.home-page .shop-banner__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(105deg, transparent 38%, rgba(244, 194, 13, 0.28) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 1000ms var(--ease-out-expo);
}

.home-page .shop-banner__inner:hover .shop-banner__link::after {
  transform: translateX(120%);
}

.home-page .shop-banner__title {
  background: linear-gradient(110deg, #ffffff 46%, #ffd24a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.home-page .shop-banner__cta {
  gap: 8px;
}

.home-page .shop-banner__cta:hover {
  letter-spacing: 0.04em;
}

/* ==========================================================================
   H. PIE COMUN
   ========================================================================== */

.home-page .site-footer {
  position: relative;
  background:
    radial-gradient(700px 300px at 12% 0%, rgba(244, 194, 13, 0.08), transparent 62%),
    var(--surface-inverse);
}

.home-page .site-footer__links a {
  position: relative;
  transition: color var(--dur-sm) ease;
}

.home-page .site-footer__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: #f4c20d;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-md) var(--ease-out-expo);
}

.home-page .site-footer__links a:hover {
  color: #ffd24a;
}

.home-page .site-footer__links a:hover::after {
  transform: scaleX(1);
}

/* ==========================================================================
   I. TIENDA — CINTA SUPERIOR
   ========================================================================== */

.store-page .promo-strip {
  color: rgba(255, 255, 255, 0.7);
  background: linear-gradient(90deg, #0b0806, #191009 50%, #0b0806);
}

.store-page .promo-strip.is-marquee {
  display: block;
  padding-inline: 0;
  overflow: hidden;
}

.store-page .promo-strip .marquee__track > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}

/* Rombo dorado como separador entre mensajes */
.store-page .promo-strip .marquee__track > span::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  background: #f4c20d;
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(244, 194, 13, 0.8);
}

/* ==========================================================================
   J. TIENDA — HERO
   ========================================================================== */

.store-page .hero {
  background:
    radial-gradient(900px 640px at 76% 38%, rgba(244, 194, 13, 0.17), transparent 58%),
    radial-gradient(700px 500px at 4% 100%, rgba(244, 194, 13, 0.07), transparent 60%),
    var(--surface-inverse);
}

.store-page .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: var(--grain);
}

.store-page .hero__inner {
  position: relative;
  z-index: 1;
}

.store-page .hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  background: rgba(244, 194, 13, 0.11);
  border: 1px solid rgba(244, 194, 13, 0.3);
  border-radius: 999px;
  margin-bottom: 26px;
}

.store-page .hero__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f4c20d;
  box-shadow: 0 0 10px rgba(244, 194, 13, 0.9);
  animation: goldPulse 2.6s var(--ease-in-out-soft) infinite;
}

.store-page .hero__title {
  background: linear-gradient(168deg, #ffffff 44%, #f0dcae);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Entrada del hero de tienda: el titular lleva degradado, asi que se
   anima en bloque (partirlo en palabras romperia el background-clip). */
.js-motion .store-page :where(.hero__eyebrow, .hero__title, .hero__subtitle, .hero__actions, .hero__trustline, .hero__proof, .hero__stats) {
  animation: fadeUpSoft 860ms var(--ease-out-expo) both;
}

.js-motion .store-page .hero__eyebrow { animation-delay: 80ms; }
.js-motion .store-page .hero__title { animation-name: heroTitleIn; animation-delay: 180ms; animation-duration: 1000ms; }
.js-motion .store-page .hero__subtitle { animation-delay: 340ms; }
.js-motion .store-page .hero__actions { animation-delay: 440ms; }
.js-motion .store-page .hero__trustline { animation-delay: 520ms; }
.js-motion .store-page .hero__proof { animation-delay: 590ms; }
.js-motion .store-page .hero__stats { animation-delay: 660ms; }

.js-motion .store-page .hero__media {
  animation: fadeUpSoft 1100ms var(--ease-out-expo) 260ms both;
}

@keyframes heroTitleIn {
  from { opacity: 0; transform: translateY(30px) scale(0.985); filter: blur(12px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .js-motion .store-page :where(.hero__eyebrow, .hero__title, .hero__subtitle, .hero__actions, .hero__trustline, .hero__proof, .hero__stats, .hero__media),
  .home-page :where(.hero__lede, .hero__actions, .hero__microcopy, .hero__timer-mark, .drag-indicator) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

.store-page .hero .btn--primary {
  background: linear-gradient(135deg, #ffd24a, #f4c20d);
  border-color: transparent;
  box-shadow: 0 12px 32px rgba(244, 194, 13, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.store-page .hero .btn--primary:hover {
  box-shadow: 0 18px 44px rgba(244, 194, 13, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.store-page .hero .btn--ghost {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(10px);
}

.store-page .hero__proof span {
  transition: color var(--dur-sm) ease, border-color var(--dur-sm) ease, background var(--dur-sm) ease;
}

.store-page .hero__proof span:hover {
  color: #ffd24a;
  background: rgba(244, 194, 13, 0.1);
  border-color: rgba(244, 194, 13, 0.34);
}

.store-page .stat__value {
  background: linear-gradient(160deg, #ffffff, #e9d5a6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Tarjetas flotantes del hero */
.store-page .hero__media::before {
  animation: goldPulse 8s var(--ease-in-out-soft) infinite;
}

.store-page .hero-card {
  background: linear-gradient(178deg, #fffefa, #f0e9da);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: var(--elev-dark-3);
  transition: box-shadow var(--dur-lg) ease;
}

.store-page .hero-card--main {
  --float-rot: -3deg;
  animation: floatTilt 9s var(--ease-in-out-soft) infinite;
}

.store-page .hero-card--stack {
  --float-rot: 6deg;
  animation: floatTilt 7.5s var(--ease-in-out-soft) 0.7s infinite;
}

.store-page .hero-card--stack-alt {
  --float-rot: -7deg;
  animation: floatTilt 8.4s var(--ease-in-out-soft) 1.4s infinite;
}

.store-page .hero-card:hover {
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(244, 194, 13, 0.36);
}

.store-page .hero-card img {
  transition: transform var(--dur-lg) var(--ease-out-expo);
}

.store-page .hero-card:hover img {
  transform: scale(1.05);
}

.store-page .hero-card__caption,
.store-page .hero-card__meta {
  background: linear-gradient(180deg, #fffefa, #f7f1e4);
  border-top: 1px solid rgba(22, 16, 12, 0.07);
}

.store-page .hero__media-label {
  background: linear-gradient(135deg, #ffd24a, #f4c20d);
  box-shadow: 0 12px 30px rgba(244, 194, 13, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  animation: floatSoft 6s var(--ease-in-out-soft) infinite;
}

/* ==========================================================================
   K. TIENDA — BARRA DE CONFIANZA
   ========================================================================== */

.store-page .trustbar {
  background: linear-gradient(90deg, #f4c20d, #ffd24a 50%, #f4c20d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -1px 0 rgba(22, 16, 12, 0.1);
}

.store-page .trust-item {
  position: relative;
  transition: background var(--dur-md) ease;
}

.store-page .trust-item:hover {
  background: rgba(255, 255, 255, 0.24);
}

.store-page .trust-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: rgba(22, 16, 12, 0.07);
  border-color: rgba(22, 16, 12, 0.2);
  transition: transform var(--dur-md) var(--ease-out-back), background var(--dur-md) ease;
}

.store-page .trust-item:hover .trust-icon {
  transform: translateY(-2px) scale(1.08);
  background: rgba(22, 16, 12, 0.92);
  color: #f4c20d;
}

.store-page .trust-icon svg {
  width: 16px;
  height: 16px;
}

.store-page .trust-item strong {
  font-size: 12.5px;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   L. TIENDA — SECCIONES DE CONTENIDO
   ========================================================================== */

.store-page .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.store-page .section-eyebrow::before {
  content: "";
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #f4c20d;
}

.store-page .merch-context {
  background:
    radial-gradient(900px 480px at 92% 0%, rgba(244, 194, 13, 0.1), transparent 62%),
    var(--surface-canvas);
}

.store-page .merch-context__benefits article,
.store-page .official-trust__cards article {
  position: relative;
  padding-inline: 4px;
  border-bottom-color: var(--hairline);
  transition: padding-inline var(--dur-md) var(--ease-out-expo), background var(--dur-md) ease;
}

.store-page .merch-context__benefits article::before,
.store-page .official-trust__cards article::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 100%;
  background: #f4c20d;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-lg) var(--ease-out-expo);
}

.store-page .merch-context__benefits article:hover::before,
.store-page .official-trust__cards article:hover::before {
  transform: scaleX(1);
}

.store-page .merch-context__benefits article:hover,
.store-page .official-trust__cards article:hover {
  padding-inline: 14px 4px;
}

.store-page .merch-context__benefits strong,
.store-page .official-trust__cards strong {
  font-size: 14px;
  letter-spacing: -0.015em;
}

.store-page .official-trust {
  background: var(--surface-canvas);
}

/* ==========================================================================
   M. TIENDA — COLECCION Y FILTROS
   ========================================================================== */

.store-page .collection {
  background:
    radial-gradient(760px 420px at 8% 4%, rgba(244, 194, 13, 0.1), transparent 60%),
    var(--surface-section);
}

.store-page .collection__meta span {
  background: linear-gradient(135deg, #ffd24a, #f4c20d);
  box-shadow: 0 6px 16px rgba(244, 194, 13, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.store-page .filter-bar {
  background: rgba(255, 254, 250, 0.82);
  border-color: rgba(22, 16, 12, 0.08);
  box-shadow: var(--elev-2);
  backdrop-filter: blur(18px) saturate(150%);
  transition: box-shadow var(--dur-md) ease, background var(--dur-md) ease;
}

.store-page .filter-bar.is-stuck {
  background: rgba(255, 254, 250, 0.95);
  box-shadow: var(--elev-3), 0 0 0 1px rgba(244, 194, 13, 0.22);
}

.store-page .tab {
  position: relative;
  overflow: hidden;
  transition:
    color var(--dur-sm) ease,
    background var(--dur-sm) ease,
    border-color var(--dur-sm) ease,
    transform var(--dur-sm) var(--ease-out-back),
    box-shadow var(--dur-sm) ease;
}

.store-page .tab:hover {
  color: #16100c;
  background: rgba(244, 194, 13, 0.16);
  border-color: rgba(244, 194, 13, 0.34);
  transform: translateY(-1px);
}

.store-page .tab.is-active {
  color: #16100c;
  background: linear-gradient(135deg, #ffd24a, #f4c20d);
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(244, 194, 13, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.store-page .filter input,
.store-page .filter select {
  transition: border-color var(--dur-sm) ease, box-shadow var(--dur-sm) ease, background var(--dur-sm) ease;
}

.store-page .filter input:hover,
.store-page .filter select:hover {
  border-color: rgba(244, 194, 13, 0.5);
}

.store-page .filter input:focus,
.store-page .filter select:focus {
  outline: none;
  border-color: #f4c20d;
  box-shadow: 0 0 0 4px rgba(244, 194, 13, 0.18);
}

/* Lupa dentro del buscador */
/* Si el navegador no soporta :has(), no se dibuja el icono ni se
   reserva el hueco: el buscador simplemente queda normal. */
.store-page .filter:has(#search-input) {
  position: relative;
}

.store-page .filter:has(#search-input) #search-input {
  padding-left: 36px;
}

.store-page .filter:has(#search-input)::after {
  content: "";
  position: absolute;
  left: 13px;
  bottom: 14px;
  width: 15px;
  height: 15px;
  pointer-events: none;
  background: rgba(22, 16, 12, 0.45);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 2a8 8 0 1 0 4.9 14.32l5.39 5.39 1.42-1.42-5.39-5.39A8 8 0 0 0 10 2m0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 2a8 8 0 1 0 4.9 14.32l5.39 5.39 1.42-1.42-5.39-5.39A8 8 0 0 0 10 2m0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   N. TIENDA — PANEL DE COLECCIONES
   ========================================================================== */

.store-page .category-panel,
.store-page .category-products {
  background: rgba(255, 254, 250, 0.9);
  border-color: var(--hairline);
  box-shadow: var(--elev-2);
  backdrop-filter: blur(8px);
}

.store-page .category-panel__header span,
.store-page .category-products__price {
  background: linear-gradient(135deg, #ffd24a, #f4c20d);
  box-shadow: 0 6px 16px rgba(244, 194, 13, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.store-page .category-card__button {
  background: linear-gradient(178deg, #fffefa, #faf6ed);
  border-color: var(--hairline);
  transition:
    transform var(--dur-md) var(--ease-out-expo),
    border-color var(--dur-md) ease,
    box-shadow var(--dur-md) ease,
    background var(--dur-md) ease;
}

.store-page .category-card__button:hover {
  transform: translateY(-3px);
  border-color: rgba(244, 194, 13, 0.7);
  box-shadow: var(--elev-2);
}

.store-page .category-card.is-active .category-card__button {
  background: linear-gradient(178deg, #fffefa, #fff3cf);
  border-color: #f4c20d;
  box-shadow: 0 10px 26px rgba(244, 194, 13, 0.22), inset 0 0 0 1px rgba(244, 194, 13, 0.36);
}

.store-page .category-card.is-active .category-card__button::after {
  background: #f4c20d;
  box-shadow: 0 0 0 4px rgba(244, 194, 13, 0.2), 0 0 12px rgba(244, 194, 13, 0.8);
  animation: goldPulse 2.4s var(--ease-in-out-soft) infinite;
}

.store-page .category-card__media {
  background: linear-gradient(165deg, #f7f1e4, #ece3d2);
}

.store-page .category-card__media img {
  transition: transform var(--dur-lg) var(--ease-out-expo);
}

.store-page .category-card__button:hover .category-card__media img {
  transform: scale(1.09);
}

.store-page .category-card__cta {
  background: rgba(244, 194, 13, 0.18);
  border-radius: 999px;
  transition: background var(--dur-sm) ease;
}

.store-page .category-card__button:hover .category-card__cta {
  background: rgba(244, 194, 13, 0.42);
}

/* ==========================================================================
   O. TIENDA — FICHA DE PRODUCTO
   El bloque mas importante: es donde se decide la compra.
   ========================================================================== */

.store-page .product-card {
  position: relative;
  overflow: hidden;
  background: #fffefa;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  box-shadow: var(--elev-1);
  transition:
    transform var(--dur-lg) var(--ease-out-expo),
    box-shadow var(--dur-lg) ease,
    border-color var(--dur-md) ease;
}

.store-page .product-card:hover {
  transform: translateY(-7px);
  border-color: rgba(244, 194, 13, 0.75);
  box-shadow: var(--elev-3), 0 0 0 3px rgba(244, 194, 13, 0.11);
}

/* Fondo de foto: foco suave centrado en la prenda */
.store-page .product-card__media {
  position: relative;
  background:
    radial-gradient(120% 78% at 50% 12%, #ffffff 0%, #f7f3ea 46%, #ece5d6 100%);
}

.store-page .product-card__media::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 62%;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 50%;
  filter: blur(10px);
  background: rgba(22, 16, 12, 0.16);
  transition: transform var(--dur-lg) var(--ease-out-expo), opacity var(--dur-lg) ease;
}

.store-page .product-card:hover .product-card__media::after {
  transform: translateX(-50%) scale(0.88);
  opacity: 0.7;
}

.store-page .product-card__image {
  position: relative;
  z-index: 1;
  transition: transform var(--dur-lg) var(--ease-out-expo);
}

.store-page .product-card:hover .product-card__image {
  transform: translateY(-6px) scale(1.055);
}

.store-page .product-card__badge {
  background: linear-gradient(135deg, #ffd24a, #f4c20d);
  box-shadow: 0 5px 14px rgba(244, 194, 13, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  letter-spacing: 0.015em;
}

.store-page .product-card__meta {
  color: rgba(22, 16, 12, 0.5);
  font-size: 9.5px;
  letter-spacing: 0.1em;
}

.store-page .product-card__title {
  color: #16100c;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

/* Sello de "oficial" con marca de verificacion */
.store-page .product-card__official {
  align-items: center;
  color: rgba(22, 16, 12, 0.6);
  font-size: 10px;
  font-weight: 800;
}

.store-page .product-card__official::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  background: #2f6d45;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1.6 3.6 5.1v6.2c0 5.2 3.6 9.6 8.4 11.1 4.8-1.5 8.4-5.9 8.4-11.1V5.1zm-1.1 14.9-3.6-3.6 1.5-1.5 2.1 2.1 4.7-4.7 1.5 1.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1.6 3.6 5.1v6.2c0 5.2 3.6 9.6 8.4 11.1 4.8-1.5 8.4-5.9 8.4-11.1V5.1zm-1.1 14.9-3.6-3.6 1.5-1.5 2.1 2.1 4.7-4.7 1.5 1.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.store-page .product-card__buyline {
  align-items: flex-end;
  padding-top: 3px;
}

.store-page .product-card__price {
  color: #16100c;
  font-family: "Archivo Black", "Manrope", sans-serif;
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1;
}

.store-page .product-card__microcopy {
  margin-top: 5px;
  color: rgba(22, 16, 12, 0.52);
  font-size: 10px;
}

/* Disponibilidad con punto verde: senal de confianza estandar en e-commerce */
.store-page .product-card__stock-note {
  gap: 6px;
  color: #2f6d45;
  font-size: 10px;
}

.store-page .product-card__stock-note::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
  animation: dotPulse 2.8s var(--ease-in-out-soft) infinite;
}

.store-page .product-card__swatch {
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(22, 16, 12, 0.16), 0 3px 8px rgba(22, 16, 12, 0.16);
}

/* Selector de talla */
.store-page .product-card__sizes {
  gap: 6px;
  margin-top: 2px;
}

.store-page .product-card__size {
  min-height: 36px;
  border: 1px solid rgba(22, 16, 12, 0.13);
  border-radius: 10px;
  background: #fff;
  font-size: 11.5px;
  transition:
    border-color var(--dur-xs) ease,
    background var(--dur-xs) ease,
    color var(--dur-xs) ease,
    transform var(--dur-xs) var(--ease-out-back),
    box-shadow var(--dur-xs) ease;
}

.store-page .product-card__size:hover {
  border-color: rgba(244, 194, 13, 0.72);
  background: rgba(244, 194, 13, 0.08);
  transform: translateY(-1px);
}

.store-page .product-card__size.is-active {
  color: #16100c;
  background: linear-gradient(160deg, #ffd24a, #f4c20d);
  border-color: transparent;
  box-shadow: 0 6px 14px rgba(244, 194, 13, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.store-page .product-card__size-note {
  color: rgba(22, 16, 12, 0.62);
  font-size: 10px;
}

.store-page .product-card__size-guide-link {
  color: rgba(22, 16, 12, 0.62);
  text-decoration-color: rgba(22, 16, 12, 0.28);
  transition: color var(--dur-sm) ease, text-decoration-color var(--dur-sm) ease;
}

.store-page .product-card__size-guide-link:hover {
  color: #16100c;
  text-decoration-color: #f4c20d;
}

/* Boton de compra */
.store-page .product-card__actions .btn--primary,
.store-page .product-card__actions [data-add-to-cart] {
  min-height: 44px;
  color: #16100c;
  background: linear-gradient(135deg, #ffd24a, #f4c20d);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(244, 194, 13, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  font-size: 13px;
  letter-spacing: 0.01em;
}

.store-page .product-card__actions .btn--primary:hover {
  box-shadow: 0 14px 30px rgba(244, 194, 13, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
}

.store-page .product-card__actions .btn--ghost {
  justify-self: center;
  color: rgba(22, 16, 12, 0.62);
  text-decoration-color: rgba(22, 16, 12, 0.26);
  transition: color var(--dur-sm) ease;
}

.store-page .product-card__actions .btn--ghost:hover {
  color: #16100c;
  background: transparent;
  box-shadow: none;
}

/* Nota de compra segura con candado */
.store-page .product-card__checkout-note {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 9px;
  border-top: 1px solid rgba(22, 16, 12, 0.07);
  color: rgba(22, 16, 12, 0.55);
  font-size: 9.5px;
}

.store-page .product-card__checkout-note::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  background: rgba(22, 16, 12, 0.5);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17 9V7A5 5 0 0 0 7 7v2H5v12h14V9zM9 7a3 3 0 0 1 6 0v2H9zm4 9.7V19h-2v-2.3a2 2 0 1 1 2 0'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17 9V7A5 5 0 0 0 7 7v2H5v12h14V9zM9 7a3 3 0 0 1 6 0v2H9zm4 9.7V19h-2v-2.3a2 2 0 1 1 2 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Entrada escalonada de las fichas al renderizarse */
.js-motion .store-page .product-card.is-entering,
.js-motion .store-page .category-card.is-entering {
  animation: cardIn 620ms var(--ease-out-expo) var(--enter-delay, 0ms) both;
}

.store-page .empty-products {
  background: linear-gradient(160deg, #fffefa, #fff5d6);
  border: 1px dashed rgba(22, 16, 12, 0.22);
  border-radius: 18px;
  box-shadow: var(--elev-1);
}

/* ==========================================================================
   P. TIENDA — TALLAS, PAGO Y FAQ
   ========================================================================== */

.store-page .size-guide {
  background:
    radial-gradient(800px 520px at 88% 20%, rgba(244, 194, 13, 0.12), transparent 60%),
    var(--surface-inverse);
}

.store-page .size-guide__help {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--hairline-inverse);
  backdrop-filter: blur(8px);
}

.store-page .size-guide__table {
  box-shadow: var(--elev-dark-3);
}

.store-page .size-guide tbody tr {
  transition: background var(--dur-sm) ease;
}

.store-page .size-guide tbody tr:hover {
  background: rgba(244, 194, 13, 0.12);
}

.store-page .size-guide tbody tr:last-child td {
  border-bottom: 0;
}

.store-page .size-guide thead {
  background: linear-gradient(180deg, #f7f1e4, #f0e9da);
}

.store-page .payment {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #ffd24a, #f4c20d 55%, #e8b405);
}

.store-page .payment::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.36;
  background-image: radial-gradient(rgba(22, 16, 12, 0.15) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at 24% 50%, #000, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse at 24% 50%, #000, transparent 76%);
}

.store-page .payment__inner {
  position: relative;
  z-index: 1;
}

.store-page .payment__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 26px;
}

.store-page .payment__badges span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 15px;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(22, 16, 12, 0.14);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform var(--dur-sm) var(--ease-out-back), background var(--dur-sm) ease;
}

.store-page .payment__badges span:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.72);
}

.store-page .payment__badges span::before {
  content: "";
  width: 14px;
  height: 14px;
  background: rgba(22, 16, 12, 0.7);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 6h18a2 2 0 0 1 2 2v1H1V8a2 2 0 0 1 2-2m-2 5h22v5a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2zm4 3h6v2H5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 6h18a2 2 0 0 1 2 2v1H1V8a2 2 0 0 1 2-2m-2 5h22v5a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2zm4 3h6v2H5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.store-page .payment__card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, #221610, #16100c 60%);
  box-shadow: var(--elev-4);
}

.store-page .payment__card::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  top: -160px;
  right: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 194, 13, 0.2), transparent 68%);
}

.store-page .payment__card > * {
  position: relative;
}

.store-page .payment__card ul {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}

.store-page .payment__card li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hairline-inverse);
  color: rgba(255, 255, 255, 0.76);
  font-size: 13.5px;
}

.store-page .payment__card li:last-child {
  border-bottom: 0;
}

.store-page .payment__card li::before {
  content: "";
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  background: #f4c20d;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20m-1.2 14.6-4-4 1.5-1.5 2.5 2.5 5.4-5.4 1.5 1.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20m-1.2 14.6-4-4 1.5-1.5 2.5 2.5 5.4-5.4 1.5 1.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* FAQ */
.store-page .faq {
  background:
    radial-gradient(700px 420px at 92% 8%, rgba(244, 194, 13, 0.1), transparent 62%),
    var(--surface-section);
}

.store-page .faq details {
  border-bottom-color: var(--hairline);
  transition: background var(--dur-md) ease;
}

.store-page .faq summary {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-sm) ease, padding-left var(--dur-md) var(--ease-out-expo);
}

.store-page .faq summary::-webkit-details-marker {
  display: none;
}

.store-page .faq summary:hover {
  color: #16100c;
  padding-left: 8px;
}

/* Signo + que gira a x */
.store-page .faq summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  background: rgba(244, 194, 13, 0.16);
  transition: background var(--dur-md) ease, transform var(--dur-md) var(--ease-out-back);
}

.store-page .faq summary::before {
  content: "";
  position: absolute;
  right: 11px;
  top: 50%;
  z-index: 1;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background: #16100c;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 5h2v14h-2z'/%3E%3Cpath fill='%23000' d='M5 11h14v2H5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 5h2v14h-2z'/%3E%3Cpath fill='%23000' d='M5 11h14v2H5z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur-md) var(--ease-out-back);
}

.store-page .faq details[open] summary::after {
  background: #f4c20d;
}

.store-page .faq details[open] summary::before {
  transform: rotate(135deg);
}

.store-page .faq details[open] p {
  animation: itemIn 420ms var(--ease-out-expo) both;
}

/* ==========================================================================
   Q. TIENDA — PIE
   ========================================================================== */

.store-page .footer {
  position: relative;
  background:
    radial-gradient(760px 340px at 10% 0%, rgba(244, 194, 13, 0.09), transparent 62%),
    var(--surface-inverse);
}

.store-page .footer__links a {
  position: relative;
  display: inline-block;
  transition: color var(--dur-sm) ease, transform var(--dur-sm) var(--ease-out-expo);
}

.store-page .footer__links a:hover {
  color: #ffd24a;
  transform: translateX(4px);
}

.store-page .footer__payments {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline-inverse);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.store-page .footer__payments::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background: #f4c20d;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17 9V7A5 5 0 0 0 7 7v2H5v12h14V9zM9 7a3 3 0 0 1 6 0v2H9zm4 9.7V19h-2v-2.3a2 2 0 1 1 2 0'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17 9V7A5 5 0 0 0 7 7v2H5v12h14V9zM9 7a3 3 0 0 1 6 0v2H9zm4 9.7V19h-2v-2.3a2 2 0 1 1 2 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

.store-page .footer__top-link {
  transition: transform var(--dur-md) var(--ease-out-expo), color var(--dur-sm) ease;
}

.store-page .footer__top-link:hover {
  color: #ffd24a;
  transform: translateY(-3px);
}

/* ==========================================================================
   R. TIENDA — CARRITO Y FICHA AMPLIADA
   ========================================================================== */

.store-page .modal-overlay,
.store-page .cart-overlay {
  background: rgba(9, 6, 4, 0.66);
  backdrop-filter: blur(10px) saturate(120%);
  animation: overlayIn 260ms ease both;
}

.store-page .modal-content {
  border: 1px solid var(--hairline);
  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.45);
  animation: modalIn 480ms var(--ease-out-expo) both;
}

.store-page .modal-image-col {
  background: radial-gradient(120% 80% at 50% 16%, #ffffff, #f7f1e4 52%, #ebe3d3);
}

.store-page .cart-drawer {
  border-left: 1px solid var(--hairline);
  box-shadow: -30px 0 90px rgba(0, 0, 0, 0.42);
  animation: drawerIn 480ms var(--ease-out-expo) both;
}

.store-page .cart-header {
  padding: 22px 26px;
  border-bottom: 1px solid var(--hairline);
  background: linear-gradient(180deg, #fffefa, #f9f4e9);
}

.store-page .cart-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Archivo Black", "Manrope", sans-serif;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.03em;
}

.store-page .cart-title::before {
  content: "";
  width: 18px;
  height: 18px;
  background: #f4c20d;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 4h14l-1.6 9H8.4L7 4M6 2H2v2h2.3l2.5 12.2A2 2 0 0 0 8.8 18H20v-2H9.1l-.4-2h11L22 2H6zM9 19a2 2 0 1 0 0 4 2 2 0 0 0 0-4m9 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 4h14l-1.6 9H8.4L7 4M6 2H2v2h2.3l2.5 12.2A2 2 0 0 0 8.8 18H20v-2H9.1l-.4-2h11L22 2H6zM9 19a2 2 0 1 0 0 4 2 2 0 0 0 0-4m9 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.store-page .close-modal,
.store-page .close-cart {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: #f7f1e4;
  border: 1px solid var(--hairline);
  transition: transform var(--dur-md) var(--ease-out-back), background var(--dur-sm) ease, color var(--dur-sm) ease;
}

.store-page .close-modal:hover,
.store-page .close-cart:hover {
  color: #16100c;
  background: #f4c20d;
  transform: rotate(90deg) scale(1.06);
}

.store-page .cart-items {
  padding: 20px 26px;
  scrollbar-width: thin;
}

.js-motion .store-page .cart-item {
  animation: itemIn 420ms var(--ease-out-expo) var(--enter-delay, 0ms) both;
}

.store-page .cart-item {
  padding: 14px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: #fffefa;
  box-shadow: var(--elev-1);
  transition: border-color var(--dur-sm) ease, box-shadow var(--dur-sm) ease;
}

.store-page .cart-item:hover {
  border-color: rgba(244, 194, 13, 0.55);
  box-shadow: var(--elev-2);
}

.store-page .cart-item-img {
  background: linear-gradient(165deg, #f7f1e4, #ebe3d3);
  border: 1px solid var(--hairline);
}

.store-page .cart-item-details h4 {
  letter-spacing: -0.02em;
}

.store-page .qty-btn,
.store-page .qty-control button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid rgba(22, 16, 12, 0.16);
  background: #fff;
  font-weight: 800;
  transition: background var(--dur-xs) ease, border-color var(--dur-xs) ease, transform var(--dur-xs) var(--ease-out-back);
}

.store-page .qty-btn:hover,
.store-page .qty-control button:hover {
  background: #f4c20d;
  border-color: transparent;
  transform: scale(1.1);
}

.store-page .cart-item-remove {
  font-weight: 800;
  transition: color var(--dur-sm) ease, transform var(--dur-sm) ease;
}

.store-page .cart-item-remove:hover {
  transform: translateX(2px);
}

.store-page .cart-footer {
  padding: 20px 26px 24px;
  border-top: 1px solid var(--hairline);
  background: linear-gradient(180deg, #fffefa, #f9f4e9);
  box-shadow: 0 -14px 30px rgba(22, 16, 12, 0.05);
}

.store-page .cart-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(22, 16, 12, 0.62);
  font-size: 12.5px;
  font-weight: 700;
}

.store-page .cart-total {
  align-items: baseline;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
}

.store-page #cart-total-value {
  font-family: "Archivo Black", "Manrope", sans-serif;
  font-size: 25px;
  font-weight: 400;
  letter-spacing: -0.04em;
}

.store-page .cart-note {
  margin: 0;
  color: rgba(22, 16, 12, 0.55);
  font-size: 11px;
  line-height: 1.5;
}

/* Fila de confianza inyectada por motion.js */
.store-page .cart-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.store-page .cart-trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  background: rgba(22, 16, 12, 0.045);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: rgba(22, 16, 12, 0.68);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.store-page .cart-trust span::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  background: #2f6d45;
  -webkit-mask: var(--chip-icon) center / contain no-repeat;
  mask: var(--chip-icon) center / contain no-repeat;
}

.store-page .cart-trust span:nth-child(1) {
  --chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17 9V7A5 5 0 0 0 7 7v2H5v12h14V9zM9 7a3 3 0 0 1 6 0v2H9zm4 9.7V19h-2v-2.3a2 2 0 1 1 2 0'/%3E%3C/svg%3E");
}

.store-page .cart-trust span:nth-child(2) {
  --chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 7h11v8H3zm11 3h4l3 3v2h-7zM7 17a2 2 0 1 0 0 4 2 2 0 0 0 0-4m10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4'/%3E%3C/svg%3E");
}

.store-page .cart-trust span:nth-child(3) {
  --chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 5V2L7 6l5 4V7a5 5 0 1 1-5 5H5a7 7 0 1 0 7-7'/%3E%3C/svg%3E");
}

.store-page #paypal-checkout {
  width: 100%;
  min-height: 52px;
  color: #16100c;
  background: linear-gradient(135deg, #ffd24a, #f4c20d);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(244, 194, 13, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.store-page #paypal-checkout:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(244, 194, 13, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Aviso flotante */
.store-page .shop-toast {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  color: #16100c;
  background: linear-gradient(135deg, #ffd24a, #f4c20d);
  border: 1px solid rgba(22, 16, 12, 0.12);
  box-shadow: 0 18px 44px rgba(244, 194, 13, 0.4), 0 4px 14px rgba(22, 16, 12, 0.2);
  font-size: 13px;
  font-weight: 800;
}

.store-page .shop-toast::before {
  content: "";
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  background: #16100c;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20m-1.2 14.6-4-4 1.5-1.5 2.5 2.5 5.4-5.4 1.5 1.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20m-1.2 14.6-4-4 1.5-1.5 2.5 2.5 5.4-5.4 1.5 1.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.store-page .shop-toast.is-visible {
  animation: toastIn 420ms var(--ease-out-back) both;
}

/* Miniaturas de la ficha ampliada */
.store-page .modal-thumb {
  overflow: hidden;
  transition: border-color var(--dur-sm) ease, transform var(--dur-sm) var(--ease-out-back), box-shadow var(--dur-sm) ease;
}

.store-page .modal-thumb:hover {
  transform: translateY(-2px);
  border-color: rgba(244, 194, 13, 0.7);
}

.store-page .modal-thumb.is-active {
  border-color: #f4c20d;
  box-shadow: 0 0 0 2px rgba(244, 194, 13, 0.3), 0 6px 16px rgba(244, 194, 13, 0.22);
}

.store-page .size-opt {
  transition: border-color var(--dur-xs) ease, background var(--dur-xs) ease, transform var(--dur-xs) var(--ease-out-back);
}

.store-page .size-opt:hover {
  border-color: rgba(244, 194, 13, 0.7);
  transform: translateY(-1px);
}

.store-page .size-opt.active {
  color: #16100c;
  background: linear-gradient(160deg, #ffd24a, #f4c20d);
  border-color: transparent;
}

/* ==========================================================================
   S. PAGINAS DE CONTENIDO (legal / checkout)
   ========================================================================== */

.content-page .topbar {
  background: rgba(16, 11, 8, 0.92);
}

.content-page .btn,
.content-page .btn--primary {
  background: linear-gradient(135deg, #ffd24a, #f4c20d);
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(244, 194, 13, 0.28);
}

/* ==========================================================================
   T. RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
  .home-page .hero__overlay::before {
    width: 130vw;
    height: 130vw;
    top: -18%;
    right: -30%;
  }

  .home-page .prize-card:hover {
    transform: none;
  }
}

@media (max-width: 720px) {
  .store-page .product-card:hover {
    transform: none;
  }

  .store-page .cart-drawer {
    animation-duration: 380ms;
  }

  .store-page .cart-items,
  .store-page .cart-footer,
  .store-page .cart-header {
    padding-inline: 18px;
  }

  .store-page .payment__badges span {
    font-size: 10.5px;
  }
}

@media (hover: none) {
  .home-page .prize-card:hover,
  .store-page .product-card:hover,
  .store-page .hero-card:hover {
    transform: none;
  }
}