/* ==========================================================================
   XPlay Nin Store — Sobre nosotros (nosotros.html)
   · Portada estilo "elige tu personaje": mascota flotando, anillos y piso de luz
   · Promociones del mes (se suben desde el panel) como cartas de botín con
     cuenta regresiva y cupón para copiar
   · Precios rebajados del catálogo, lo que hace la tienda y contacto
   Los botones son los de css/botones.css (se carga después de este archivo).
   ========================================================================== */
:root.page-nosotros {
  --hud: "Chakra Petch", "Barlow Condensed", ui-monospace, sans-serif;
  --hh: var(--nav-h);
}
.about { overflow: clip; }

/* ==========================================================================
   1. Portada
   ========================================================================== */
.ahero {
  position: relative; isolation: isolate; overflow: clip;
  display: flex; align-items: center;
  min-height: clamp(620px, 92svh, 900px);
  padding: calc(var(--top) + 30px) 0 clamp(40px, 6vh, 70px);
}
.ahero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, #05070a, var(--bg)); }
.ahero__glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.ahero__glow--1 { width: 46vw; height: 46vw; right: -6vw; top: 4%; background: radial-gradient(closest-side, rgba(155, 226, 47, .5), transparent); animation: ah-breathe 9s ease-in-out infinite alternate; }
.ahero__glow--2 { width: 36vw; height: 36vw; right: 22vw; bottom: -10%; background: radial-gradient(closest-side, rgba(3, 172, 232, .42), transparent); animation: ah-breathe 11s ease-in-out infinite alternate-reverse; }
@keyframes ah-breathe { to { transform: scale(1.15) translate3d(-2%, 3%, 0); opacity: .75; } }
/* piso de cuadrícula en perspectiva, como un menú de juego */
.ahero__grid {
  position: absolute; left: -20%; right: -20%; bottom: -8%; height: 46%;
  background:
    linear-gradient(rgba(155, 226, 47, .22) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(155, 226, 47, .22) 1px, transparent 1px) 0 0 / 64px 64px;
  transform: perspective(600px) rotateX(62deg); transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 60%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 60%, transparent);
  animation: ah-grid 3.2s linear infinite;
}
@keyframes ah-grid { to { background-position: 0 64px, 0 0; } }
.ahero__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 70px); align-items: center; }
.ahero__t { margin-top: 16px; font: 900 clamp(48px, 6.4vw, 100px)/.88 var(--display); text-transform: uppercase; letter-spacing: -.01em; text-wrap: balance; }
.ahero__t em {
  display: block; font-style: italic;
  background: linear-gradient(92deg, var(--lime-hi), var(--lime) 45%, #46d9ff); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 30px rgba(155, 226, 47, .35));
}
.ahero__lema {
  position: relative; margin-top: 20px; padding-left: 20px; max-width: 600px;
  font: 700 italic clamp(22px, 2.2vw, 30px)/1.15 var(--display); color: #eaf3dc;
}
.ahero__lema::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 4px; background: linear-gradient(180deg, var(--lime), var(--blue)); box-shadow: 0 0 14px rgba(155, 226, 47, .6); }
.ahero__txt { margin-top: 18px; max-width: 600px; font-size: clamp(16px, 1.2vw, 18.5px); line-height: 1.6; color: #c9d2de; }
.avals { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 10px 12px; margin-top: 26px; }
.avals li {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 14px;
  font: 700 14.5px/1.2 var(--font); color: #e9eef5;
  background: rgba(13, 18, 25, .7); border: 1px solid var(--line-2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.avals .ico { width: 34px; height: 34px; padding: 7px; flex: none; border-radius: 10px; color: #0b1300; background: linear-gradient(180deg, var(--lime-hi), var(--lime)); box-shadow: 0 0 18px -4px rgba(155, 226, 47, .8); }
.ahero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.ahero__visual { position: relative; display: grid; place-items: center; min-height: clamp(420px, 60vh, 640px); }
.ahero__ring {
  position: absolute; width: min(78%, 440px); aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 20%, rgba(155, 226, 47, .7) 30%, transparent 42% 62%, rgba(3, 172, 232, .7) 72%, transparent 84%);
  -webkit-mask: radial-gradient(closest-side, transparent 93%, #000 94%); mask: radial-gradient(closest-side, transparent 93%, #000 94%);
  animation: ah-spin 14s linear infinite;
}
.ahero__ring--2 { width: min(96%, 540px); opacity: .45; animation-duration: 24s; animation-direction: reverse; }
@keyframes ah-spin { to { transform: rotate(1turn); } }
.ahero__mascot { position: relative; z-index: 1; width: auto; height: clamp(380px, 56vh, 600px); filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .6)); animation: ah-float 5s ease-in-out infinite; }
@keyframes ah-float { 50% { transform: translateY(-14px); } }
.ahero__floor { position: absolute; bottom: 4%; width: 62%; height: 34px; border-radius: 50%; background: radial-gradient(closest-side, rgba(155, 226, 47, .55), transparent); filter: blur(6px); animation: ah-floor 5s ease-in-out infinite; }
@keyframes ah-floor { 50% { transform: scale(.85); opacity: .7; } }
.ahero__chip {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px;
  font: 700 13px/1 var(--hud); letter-spacing: .08em; text-transform: uppercase; color: #fff;
  background: rgba(9, 13, 19, .82); border: 1px solid rgba(155, 226, 47, .4);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 34px -18px #000; animation: ah-float 6s ease-in-out infinite;
}
.ahero__chip .ico { width: 18px; height: 18px; color: var(--lime); }
.ahero__chip--1 { left: 0; top: 18%; }
.ahero__chip--2 { right: 0; top: 42%; animation-delay: -2s; border-color: rgba(3, 172, 232, .45); }
.ahero__chip--2 .ico { color: var(--blue); }
.ahero__chip--3 { left: 6%; bottom: 16%; animation-delay: -4s; border-color: rgba(252, 206, 25, .45); }
.ahero__chip--3 .ico { color: var(--yellow); }

/* ==========================================================================
   2. Promociones del mes
   ========================================================================== */
.promos { position: relative; isolation: isolate; }
.promos::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 40% at 15% 20%, rgba(255, 79, 163, .14), transparent 70%), radial-gradient(ellipse 45% 40% at 90% 70%, rgba(252, 206, 25, .1), transparent 70%);
}
.promos__kicker { color: var(--pink); }
.promos .section__title em { color: var(--pink); }
.promos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 22px; margin-top: 40px; }
.promos__grid:empty { display: none; }

/* Carta de promoción */
.pm {
  --c: #ff4fa3;
  position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px;
  background: linear-gradient(180deg, #121821, #0b0f15);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--c) 80%, transparent);
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .55s var(--ease), box-shadow .45s var(--ease), border-color .3s;
  animation: pm-in .7s var(--ease-expo) backwards; animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes pm-in { from { opacity: 0; transform: translateY(30px) scale(.96); } }
.pm.is-tilt { transition: transform .1s linear, box-shadow .45s var(--ease), border-color .3s; }
.pm:hover { border-color: var(--c); box-shadow: 0 34px 70px -30px color-mix(in srgb, var(--c) 90%, transparent); }
/* brillo holográfico que sigue al cursor (js/catalogo-fx.js) */
.pm::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at var(--px, 50%) var(--py, 0%), rgba(255, 255, 255, .14), transparent 45%);
  opacity: 0; transition: opacity .35s;
}
.pm.is-tilt::after { opacity: 1; }
.pm__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--c) 28%, #0b0f15), #090c11 70%); }
.pm__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.pm__media img.is-prod { object-fit: contain; padding: 18px; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .6)); }
.pm:hover .pm__media img { transform: scale(1.06); }
.pm__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #0e131b, transparent 50%); }
.pm__logo { display: grid; place-items: center; width: 100%; height: 100%; }
.pm__logo img { width: 58%; height: auto; object-fit: contain; }
.pm__badge {
  position: absolute; left: 14px; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 9px;
  font: 700 12px/1 var(--hud); letter-spacing: .16em; text-transform: uppercase; color: #fff;
  background: rgba(6, 8, 12, .72); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 70%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pm__badge .ico { width: 15px; height: 15px; color: var(--c); }
/* etiqueta grande tipo "explosión" (-15 %, 2x1…) */
.pm__tag {
  position: absolute; right: 14px; top: 12px; z-index: 2; display: grid; place-items: center; min-width: 74px; height: 74px; padding: 0 10px;
  font: 900 italic 25px/1 var(--display); text-transform: uppercase; color: #170f00; text-align: center;
  background: radial-gradient(circle at 35% 30%, #fff5b8, var(--yellow) 60%, #e0a800);
  clip-path: polygon(50% 0, 61% 12%, 77% 6%, 80% 22%, 96% 26%, 89% 41%, 100% 54%, 86% 63%, 90% 80%, 73% 81%, 65% 96%, 50% 88%, 35% 96%, 27% 81%, 10% 80%, 14% 63%, 0 54%, 11% 41%, 4% 26%, 20% 22%, 23% 6%, 39% 12%);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5));
  animation: pm-tag 2.6s ease-in-out infinite;
}
@keyframes pm-tag { 50% { transform: rotate(-6deg) scale(1.06); } }
.pm__body { position: relative; z-index: 1; display: grid; align-content: start; gap: 12px; flex: 1; padding: 6px 22px 22px; }
.pm__t { font: 900 clamp(26px, 2vw, 32px)/.98 var(--display); text-transform: uppercase; text-wrap: balance; }
.pm__txt { font-size: 15.5px; line-height: 1.55; color: #c3ccd8; }
.pm__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font: 700 22px/1 var(--hud); color: #fff; }
.pm__price s { font-size: 14px; color: var(--muted-2); }
.pm__price small { font-size: 12px; color: var(--muted); }
.pm__save { padding: 4px 8px; border-radius: 6px; font: 700 12px/1 var(--hud); letter-spacing: .04em; color: #0b1300; background: var(--lime); }
/* cuenta regresiva */
.pm__time {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
  font: 600 12px/1 var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.pm__time .ico { width: 16px; height: 16px; color: var(--c); }
.pm__clock { font: 700 18px/1 var(--hud); letter-spacing: .04em; font-variant-numeric: tabular-nums; color: #fff; text-transform: none; }
.pm__time.is-last { border-color: rgba(250, 57, 53, .5); background: rgba(250, 57, 53, .1); color: #ffb4b2; }
.pm__time.is-last .ico { color: var(--red); animation: live-dot 1.2s ease-in-out infinite; }
@keyframes live-dot { 50% { opacity: .3; } }
.pm__until { font: 600 12.5px/1.3 var(--hud); letter-spacing: .06em; color: var(--muted); }
.pm__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 4px; }
.pm__ctas .btn { min-height: 48px; padding: 0 18px; font-size: 15px; }
/* cupón: un tiquete para copiar */
.pm__code {
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border-radius: 12px;
  font: 600 13px/1 var(--hud); letter-spacing: .1em; text-transform: uppercase; color: #fff7d1;
  background: rgba(252, 206, 25, .08); border: 2px dashed rgba(252, 206, 25, .6);
  transition: background-color .3s, border-color .3s, transform .3s var(--ease);
}
.pm__code b { font-size: 17px; letter-spacing: .12em; color: var(--yellow); }
.pm__code .ico { width: 18px; height: 18px; color: var(--yellow); }
.pm__code:hover { background: rgba(252, 206, 25, .16); border-color: var(--yellow); transform: translateY(-2px); }
.pm__code.is-copied { border-style: solid; border-color: var(--lime); background: rgba(155, 226, 47, .14); color: #e6ffc2; }
.pm__code.is-copied b, .pm__code.is-copied .ico { color: var(--lime-hi); }
/* la promoción principal del mes: ancha y con la foto al lado */
.pm--main { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); --c: var(--lime); }
.pm--main .pm__media { aspect-ratio: auto; min-height: 360px; }
.pm--main .pm__media::after { background: linear-gradient(90deg, transparent 55%, #0e131b); }
.pm--main .pm__body { align-content: center; padding: 30px 32px; gap: 14px; }
.pm--main .pm__t { font-size: clamp(32px, 3vw, 48px); }

.promos__empty {
  display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); align-items: end; margin-top: 40px;
  padding: 30px clamp(20px, 3vw, 44px) 0; border-radius: 26px; overflow: hidden;
  background: radial-gradient(ellipse 60% 90% at 0% 100%, rgba(255, 79, 163, .2), transparent 60%), linear-gradient(180deg, #10151d, #0b0f15);
  border: 1px dashed rgba(255, 79, 163, .45);
}
.promos__empty img { width: 100%; height: auto; margin-bottom: -2px; }
.promos__empty > div { padding-bottom: 30px; }
.promos__empty h3 { margin-top: 12px; font: 900 clamp(26px, 2.6vw, 38px)/1 var(--display); text-transform: uppercase; }
.promos__empty p:not(.kicker) { margin-top: 12px; max-width: 620px; color: #c3ccd8; }
.promos__empty-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* ==========================================================================
   3. Precios rebajados
   ========================================================================== */
.deals__kicker { color: var(--yellow); }
.deals .section__title em { color: var(--yellow); }
.deals__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 18px; margin-top: 36px; }
.deal {
  --c: var(--yellow);
  position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 18px;
  background: linear-gradient(180deg, #11161f, #0b0f15); border: 1px solid var(--line);
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .55s var(--ease), border-color .3s, box-shadow .45s var(--ease);
  animation: pm-in .6s var(--ease-expo) backwards; animation-delay: calc(var(--i, 0) * 60ms);
}
.deal.is-tilt { transition: transform .1s linear, border-color .3s, box-shadow .45s var(--ease); }
.deal:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 26px 50px -30px color-mix(in srgb, var(--c) 85%, transparent); }
.deal__media { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 18px; background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--c) 22%, #0c1016), #0a0d12 70%); }
.deal__media img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .55)); transition: transform .7s var(--ease); }
.deal:hover .deal__media img { transform: scale(1.06) translateY(-4px); }
.deal__off { position: absolute; left: 12px; top: 12px; padding: 7px 10px; border-radius: 9px; font: 900 italic 20px/1 var(--display); color: #fff; background: #d81f26; box-shadow: 0 8px 20px -8px rgba(216, 31, 38, .9); }
.deal__body { display: grid; gap: 8px; flex: 1; padding: 14px 16px 16px; }
.deal__k { font: 600 11.5px/1 var(--hud); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.deal__t { font: 800 20px/1.05 var(--display); text-transform: uppercase; }
.deal__t a::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.deal:has(.deal__t a:focus-visible) { outline: 2px solid var(--c); outline-offset: 3px; }
.deal__t a:focus-visible { outline: none; }
.deal__p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: auto; font: 700 19px/1 var(--hud); color: #fff; }
.deal__p s { font-size: 13px; color: var(--muted-2); }
.deal__save { font: 700 12px/1 var(--hud); letter-spacing: .04em; color: var(--lime-hi); }

/* ==========================================================================
   4. Lo que hacemos
   ========================================================================== */
.what__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.wcard {
  --c: var(--lime);
  position: relative; display: grid; align-content: start; gap: 12px; height: 100%; padding: 24px; border-radius: 20px; overflow: hidden;
  background: linear-gradient(180deg, #11161f, #0b0f15); border: 1px solid var(--line);
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .55s var(--ease), border-color .3s, box-shadow .45s var(--ease);
}
.wcard.is-tilt { transition: transform .1s linear, border-color .3s, box-shadow .45s var(--ease); }
.wcard::before { content: ""; position: absolute; right: -30%; top: -40%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 30%, transparent), transparent); opacity: .5; transition: opacity .4s; }
.wcard:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 26px 50px -30px color-mix(in srgb, var(--c) 85%, transparent); }
.wcard:hover::before { opacity: 1; }
.wcard__ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 15px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, #0b0f15); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent), 0 0 26px -10px var(--c); }
.wcard__ico .ico { width: 26px; height: 26px; }
.wcard__t { font: 800 24px/1.02 var(--display); text-transform: uppercase; color: #fff; }
.wcard__txt { font-size: 15px; line-height: 1.55; color: #b9c3d0; }
.wcard__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font: 700 13px/1 var(--hud); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 80%, #fff); }
.wcard__go .ico { width: 17px; height: 17px; transition: transform .35s var(--ease); }
.wcard:hover .wcard__go .ico { transform: translateX(5px); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1099px) {
  .ahero { min-height: 0; }
  .ahero__in { grid-template-columns: 1fr; }
  .ahero__visual { order: -1; min-height: 0; margin-top: 6px; }
  .ahero__mascot { height: clamp(300px, 46vh, 440px); }
  .pm--main { grid-template-columns: 1fr; }
  .pm--main .pm__media { min-height: 0; aspect-ratio: 16 / 9; }
  .pm--main .pm__media::after { background: linear-gradient(0deg, #0e131b, transparent 50%); }
  .what__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ahero { padding-top: calc(var(--top) + 14px); }
  .ahero__mascot { height: 300px; }
  .ahero__chip { padding: 8px 10px; font-size: 11px; }
  .ahero__chip--1 { top: 8%; }
  .ahero__chip--3 { left: 0; bottom: 8%; }
  .avals { grid-template-columns: 1fr 1fr; }
  .avals li { padding: 8px 10px 8px 8px; font-size: 13.5px; }
  .avals .ico { width: 30px; height: 30px; padding: 6px; }
  .ahero__ctas .btn { flex: 1 1 100%; }
  .pm__body, .pm--main .pm__body { padding: 6px 18px 20px; }
  .pm__ctas .btn, .pm__code { flex: 1 1 100%; justify-content: center; }
  .promos__empty { grid-template-columns: 1fr; padding-top: 24px; }
  .promos__empty img { order: 2; width: 150px; margin-inline: auto; }
  .promos__empty > div { padding-bottom: 0; }
  .promos__empty-ctas .btn { flex: 1 1 100%; }
  .deals__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .deal__t { font-size: 17px; }
  .deal__p { font-size: 16px; }
  .what__grid { grid-template-columns: 1fr; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .ahero__glow, .ahero__grid, .ahero__ring, .ahero__mascot, .ahero__floor, .ahero__chip, .pm__tag { animation: none !important; }
}