/* ══════════════════════════════════════════════════════
   4X25.CSS — Pack Builder · Layout fijo, grid con scroll
   O-Vié · Mayo 2026 · Prefijo: x25-
══════════════════════════════════════════════════════ */

/* ── Reset global de página ── */
#bubbles      { display: none !important; }
#footer-block { position: relative; z-index: 10; margin-top: 72px; }
#header       { z-index: 500 !important; }
#cintillo     { z-index: 501 !important; }
#search-bar   { z-index: 499 !important; }

/* Canvas WebGL fijo detrás de todo */
#j-ocean {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  pointer-events: none;
}

/* Fondo base */
html, body {
  background: #000;
}

/* ── Sistema de idioma autónomo ── */
.x25-lang-es,
.x25-lang-en          { display: none; }
html[lang="en"]       .x25-lang-en { display: inline; }
html:not([lang="en"]) .x25-lang-es { display: inline; }

/* ── Variables ── */
:root {
  --x25-gold:    #c9aa72;
  --x25-gold-gl: rgba(201,170,114,0.55);
  --x25-cream:   #f0e6d2;
  --x25-bal:     #C9A870;
  --x25-gra:     #5CA88A;
  --x25-sec:     #D4C5A0;
  --x25-sen:     #C8959A;
  --x25-panel-w: 310px;
  --x25-top:     calc(38px + 70px);  /* cintillo + header */
}

/* ══════════════════════════════════════════════════════
   MAIN — columna flex, altura exacta del viewport
══════════════════════════════════════════════════════ */
#x25-main {
  position: relative;
  z-index: 2;
  height: 100vh;
  padding-top: var(--x25-top);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════
   TOP BAR — título izquierda, progreso derecha
══════════════════════════════════════════════════════ */
.x25-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 40px 14px;
  border-bottom: 1px solid rgba(201,170,114,0.08);
}

/* Título */
.x25-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 300;
  color: var(--x25-cream);
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.x25-title-sep { color: rgba(240,230,210,0.35); margin: 0 4px; }

.x25-title-price {
  font-style: normal;
  color: var(--x25-gold);
}

.x25-subtitle {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.14em;
  color: rgba(240,230,210,0.42);
  text-transform: uppercase;
}

/* Progreso — pips circulares */
.x25-topbar-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.x25-pips {
  display: flex;
  align-items: center;
}

.x25-pip {
  position: relative;
}

.x25-pip-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(201,170,114,0.25);
  background: rgba(0,6,20,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.35s, background 0.35s, box-shadow 0.35s;
}

.x25-pip-circle svg {
  opacity: 0;
  transition: opacity 0.28s;
  stroke: #09090b;
  width: 13px;
  height: 13px;
}

.x25-pip.filled .x25-pip-circle {
  border-color: var(--x25-gold);
  background: var(--x25-gold);
  box-shadow: 0 0 16px var(--x25-gold-gl);
}

.x25-pip.filled .x25-pip-circle svg {
  opacity: 1;
}

.x25-pip-line {
  width: 44px;
  height: 2px;
  background: rgba(201,170,114,0.15);
  transition: background 0.35s;
}

.x25-pip-line.filled {
  background: var(--x25-gold);
}

.x25-counter-label {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(240,230,210,0.55);
}

/* ══════════════════════════════════════════════════════
   FILA FILTROS — search corto + pills inline
══════════════════════════════════════════════════════ */
.x25-filters-row {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 40px;
  border-bottom: 1px solid rgba(201,170,114,0.07);
}

/* Search — compacto, no interrumpe */
.x25-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 196px;
}

.x25-search-ico {
  position: absolute;
  left: 12px;
  width: 13px;
  height: 13px;
  color: rgba(240,230,210,0.28);
  stroke-width: 1.5;
  pointer-events: none;
  transition: color 0.25s;
}

.x25-search-wrap:focus-within .x25-search-ico {
  color: rgba(201,170,114,0.65);
}

.x25-search {
  width: 100%;
  height: 34px;
  background: rgba(0,8,24,0.50);
  border: 1px solid rgba(240,230,210,0.10);
  border-radius: 999px;
  padding: 0 34px 0 34px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: var(--x25-cream);
  outline: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.25s;
  -webkit-appearance: none;
  appearance: none;
}

.x25-search::placeholder { color: rgba(240,230,210,0.22); }
.x25-search::-webkit-search-cancel-button { display: none; }
.x25-search:focus { border-color: rgba(201,170,114,0.35); }

.x25-search-clear {
  position: absolute;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(240,230,210,0.07);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(240,230,210,0.40);
  transition: color 0.2s, background 0.2s;
}
.x25-search-clear svg { width: 10px; height: 10px; stroke-width: 2; }
.x25-search-clear:hover { color: var(--x25-cream); background: rgba(240,230,210,0.13); }

/* Separador visual entre search y pills */
.x25-filters-row::after {
  content: '';
  width: 1px;
  height: 20px;
  background: rgba(240,230,210,0.10);
  flex-shrink: 0;
  order: 1; /* después del search-wrap */
}

/* Pills de categoría */
.x25-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  order: 2;
}
.x25-filters::-webkit-scrollbar { display: none; }

.x25-filter-btn {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 8.5px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(240,230,210,0.45);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(240,230,210,0.09);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.22s, border-color 0.22s, background 0.22s;
}

.x25-filter-btn:hover {
  color: rgba(240,230,210,0.85);
  border-color: rgba(240,230,210,0.22);
}

.x25-filter-btn.is-active {
  color: var(--x25-gold);
  border-color: rgba(201,170,114,0.42);
  background: rgba(201,170,114,0.08);
}

/* ══════════════════════════════════════════════════════
   CONTENIDO — grid + panel, ocupa el espacio restante
══════════════════════════════════════════════════════ */
.x25-content-wrap {
  flex: 1;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr var(--x25-panel-w);
  gap: 0;
  min-height: 0;  /* crítico para que flex funcione */
}

/* ══════════════════════════════════════════════════════
   GRID SCROLLABLE
══════════════════════════════════════════════════════ */
.x25-grid-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 20px 16px 40px;
  min-height: 0;
}

/* Scrollbar fina, dorada */
.x25-grid-scroll::-webkit-scrollbar { width: 3px; }
.x25-grid-scroll::-webkit-scrollbar-track { background: transparent; }
.x25-grid-scroll::-webkit-scrollbar-thumb { background: rgba(201,170,114,0.22); border-radius: 2px; }

.x25-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
}

/* ── Tarjeta compacta ── */
.x25-card {
  position: relative;
  background: rgba(0,6,18,0.55);
  border: 1px solid rgba(240,230,210,0.08);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.28s, box-shadow 0.28s, transform 0.20s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  outline: none;
}

.x25-card:hover {
  border-color: rgba(240,230,210,0.18);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.40);
}

.x25-card:focus-visible {
  box-shadow: 0 0 0 2px var(--x25-gold);
}

/* Seleccionada */
.x25-card.is-selected {
  border-color: rgba(201,170,114,0.65);
  box-shadow:
    0 0 0 1px rgba(201,170,114,0.22),
    0 0 22px rgba(201,170,114,0.16),
    0 8px 28px rgba(0,0,0,0.38);
  background: rgba(201,170,114,0.06);
}

.x25-card.is-selected:hover { transform: translateY(-1px); }

/* Número de selección */
.x25-card-num {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--x25-gold);
  color: #09090b;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.22s, transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: none;
}

.x25-card.is-selected .x25-card-num {
  opacity: 1;
  transform: scale(1);
}

/* Imagen — cuadrada */
.x25-card-img-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: rgba(0,4,12,0.55);
}

.x25-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.40s ease;
}

.x25-card:hover .x25-card-img { transform: scale(1.04); }

.x25-card-ph {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(0,0,0,0.50), var(--pc,#333) 220%);
}

.x25-card-ph span {
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px;
  font-style: italic;
  color: rgba(240,230,210,0.60);
  text-align: center;
  padding: 8px;
}

/* Info bajo la imagen */
.x25-card-info {
  padding: 9px 11px 11px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.x25-card-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(12px, 1.2vw, 15px);
  font-weight: 300;
  color: var(--x25-cream);
  letter-spacing: 0.03em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.x25-card-cat {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 8px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.x25-cat-balanceada { color: var(--x25-bal); opacity: 0.80; }
.x25-cat-grasa      { color: var(--x25-gra); opacity: 0.80; }
.x25-cat-seca       { color: var(--x25-sec); opacity: 0.80; }
.x25-cat-sensible   { color: var(--x25-sen); opacity: 0.80; }

.x25-card-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  font-weight: 300;
  color: rgba(240,230,210,0.75);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* Sin resultados */
.x25-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 0;
  color: rgba(240,230,210,0.20);
}

.x25-no-results svg { width: 26px; height: 26px; stroke-width: 1.2; }

.x25-no-results p {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════
   PANEL LATERAL
══════════════════════════════════════════════════════ */
.x25-panel-aside {
  overflow-y: auto;
  border-left: 1px solid rgba(201,170,114,0.10);
  background: rgba(0,5,15,0.65);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  min-height: 0;
}

.x25-panel-aside::-webkit-scrollbar { width: 2px; }
.x25-panel-aside::-webkit-scrollbar-thumb { background: rgba(201,170,114,0.18); }

.x25-panel-inner {
  padding: 22px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
}

/* Header del panel */
.x25-panel-hd { margin-bottom: 14px; }

.x25-panel-title {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(240,230,210,0.65);
  margin-bottom: 4px;
}

.x25-panel-count-wrap {
  color: var(--x25-gold);
  margin-left: 4px;
}

.x25-panel-sub {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.10em;
  color: rgba(240,230,210,0.38);
  margin-bottom: 12px;
}

.x25-panel-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(201,170,114,0.28), transparent);
}

/* Slots */
.x25-slots {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 14px 0;
  flex: 1;
}

.x25-slot {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 5px;
  border: 1px solid rgba(240,230,210,0.06);
  background: rgba(240,230,210,0.02);
  min-height: 52px;
  transition: border-color 0.22s;
}

.x25-slot--filled {
  border-color: rgba(201,170,114,0.18);
  background: rgba(201,170,114,0.04);
}

.x25-slot-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--x25-gold);
  color: #09090b;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 9px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.x25-slot-num--empty {
  background: rgba(240,230,210,0.07);
  color: rgba(240,230,210,0.25);
}

.x25-slot-img {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(0,4,14,0.60);
}

.x25-slot-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.x25-slot-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.x25-slot-name {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.10em;
  color: rgba(240,230,210,0.85);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.x25-slot-cat {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 8px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: rgba(240,230,210,0.32);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.x25-slot-empty-text {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.14em;
  color: rgba(240,230,210,0.20);
  text-transform: uppercase;
}

.x25-slot-remove {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: none;
  border: 1px solid rgba(240,230,210,0.10);
  color: rgba(240,230,210,0.30);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}

.x25-slot-remove:hover {
  color: var(--x25-cream);
  border-color: rgba(240,230,210,0.30);
  background: rgba(240,230,210,0.07);
}

/* Total */
.x25-panel-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid rgba(240,230,210,0.07);
  margin-bottom: 12px;
}

.x25-total-label {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(240,230,210,0.45);
}

.x25-total-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 300;
  color: var(--x25-cream);
  letter-spacing: 0.04em;
}

/* CTA */
.x25-cta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(240,230,210,0.28);
  background: rgba(201,170,114,0.06);
  border: 1px solid rgba(201,170,114,0.12);
  border-radius: 4px;
  padding: 15px 16px;
  cursor: not-allowed;
  transition: color 0.30s, background 0.30s, border-color 0.30s, box-shadow 0.30s, transform 0.18s;
  margin-bottom: 10px;
}

/* Add to Cart — botón secundario */
.x25-add-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(240,230,210,0.22);
  background: transparent;
  border: 1px solid rgba(201,170,114,0.10);
  border-radius: 4px;
  padding: 13px 16px;
  cursor: not-allowed;
  transition: color 0.28s, background 0.28s, border-color 0.28s;
  margin-bottom: 8px;
}

.x25-add-btn.is-ready {
  color: rgba(240,230,210,0.82);
  border-color: rgba(201,170,114,0.55);
  cursor: pointer;
}

.x25-add-btn.is-ready:hover {
  background: rgba(201,170,114,0.10);
  border-color: rgba(201,170,114,0.88);
  color: rgba(240,230,210,1);
}

/* Tarjetas deshabilitadas cuando pack está lleno */
.x25-card.is-disabled {
  opacity: 0.32;
  cursor: not-allowed;
  pointer-events: none;
}

/* Tarjeta seleccionada — mantiene visibilidad aunque pack esté lleno */
.x25-card.is-selected.is-disabled {
  opacity: 0.75;
}

.x25-cta svg { opacity: 0.30; transition: opacity 0.30s, transform 0.22s; }

.x25-cta.is-ready {
  color: #09090b;
  background: var(--x25-gold);
  border-color: var(--x25-gold);
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(201,170,114,0.32);
}

.x25-cta.is-ready svg { opacity: 1; }

.x25-cta.is-ready:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(201,170,114,0.48);
}

.x25-cta.is-ready:hover svg { transform: translateX(3px); }

/* Secure */
.x25-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 8.5px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240,230,210,0.28);
  margin-bottom: 14px;
}

.x25-secure svg { opacity: 0.45; }

/* Trust badges */
.x25-trust {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(240,230,210,0.06);
}

.x25-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  flex: 1;
}

.x25-trust-item svg {
  color: rgba(201,170,114,0.55);
}

.x25-trust-item span {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 7.5px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(240,230,210,0.30);
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════════ */
.x25-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  z-index: 600;
  background: rgba(0,6,20,0.92);
  border: 1px solid rgba(201,170,114,0.25);
  border-radius: 4px;
  padding: 10px 20px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(240,230,210,0.72);
  backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.26s, transform 0.26s;
  white-space: nowrap;
}

.x25-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ══════════════════════════════════════════════════════
   BARRA MOBILE — oculta en desktop
══════════════════════════════════════════════════════ */
.x25-mob-bar { display: none; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE — TABLET (max-width: 1024px)
══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  :root { --x25-panel-w: 280px; }
  .x25-topbar { padding: 14px 24px 12px; }
  .x25-filters-row { padding: 8px 24px; }
  .x25-grid-scroll { padding: 14px 16px 14px 24px; }
  .x25-pip-line { width: 32px; }
  .x25-pip-circle { width: 30px; height: 30px; }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (max-width: 768px)
   En mobile: página hace scroll, grid 2 col, panel abajo
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html, body { overflow: auto; }

  #x25-main {
    height: auto;
    overflow: visible;
    padding-top: calc(38px + 60px);
    padding-bottom: 72px;
  }

  .x25-topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px 12px;
  }

  .x25-topbar-right {
    align-self: stretch;
    align-items: center;
  }

  .x25-pip-line { width: 36px; }

  .x25-filters-row {
    padding: 8px 16px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .x25-filters-row::-webkit-scrollbar { display: none; }
  .x25-search-wrap { width: 160px; }

  .x25-content-wrap {
    display: flex;
    flex-direction: column;
    overflow: visible;
    height: auto;
  }

  .x25-grid-scroll {
    overflow: visible;
    padding: 12px 16px;
    height: auto;
  }

  .x25-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  .x25-panel-aside {
    overflow: visible;
    border-left: none;
    border-top: 1px solid rgba(201,170,114,0.10);
    background: rgba(0,5,15,0.78);
    height: auto;
  }

  .x25-panel-inner { height: auto; }
  .x25-slots { flex: none; }

  /* Barra inferior mobile */
  .x25-mob-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 490;
    background: rgba(0,4,14,0.94);
    border-top: 1px solid rgba(201,170,114,0.12);
    backdrop-filter: blur(18px);
    padding: 10px 16px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

  .x25-mob-bar-left { display: flex; align-items: center; gap: 6px; }

  .x25-mob-count {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 300;
    color: var(--x25-cream);
  }

  .x25-mob-label {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 8px;
    font-weight: 300;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(240,230,210,0.35);
  }

  .x25-mob-cta {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 8.5px;
    font-weight: 400;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: rgba(240,230,210,0.28);
    background: rgba(201,170,114,0.07);
    border: 1px solid rgba(201,170,114,0.14);
    border-radius: 3px;
    padding: 11px 18px;
    cursor: not-allowed;
    transition: color 0.28s, background 0.28s, border-color 0.28s;
    white-space: nowrap;
  }

  .x25-mob-cta.is-ready {
    color: #09090b;
    background: var(--x25-gold);
    border-color: var(--x25-gold);
    cursor: pointer;
  }

  .x25-toast { bottom: 68px; white-space: normal; max-width: 78vw; text-align: center; }
}

@media (max-width: 480px) {
  .x25-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .x25-grid-scroll { padding: 10px 12px; }
}