/* Portada de la tienda: mas fresca, sencilla y limpia (22/10).
   Ideas: fondo calmado sin manchas de color, bordes finos y neutros (el tema de fiesta solo pinta acentos),
   tarjetas planas y blancas, un solo bloque de bienvenida, nada de etiquetitas ni textos repetidos. Solo afecta a la portada. */
body[data-page="tienda.inicio"] .fondo { background: linear-gradient(180deg, #F8F9FC 0%, #F1F3F9 100%) !important; }
html.dark body[data-page="tienda.inicio"] .fondo { background: linear-gradient(180deg, #0C1222 0%, #0A0F19 100%) !important; }
body[data-page="tienda.inicio"] .blob { display: none !important; }

/* ===== Liquid glass: fondo con luz suave detras del cristal, tarjetas de vidrio con imagen de color, cabecera y barra flotantes ===== */
body[data-page="tienda.inicio"] { --lg-a: 91, 108, 255; --lg-b: 255, 140, 170; --lg-c: 60, 200, 190; }
body[data-page="tienda.inicio"] .fondo { background: linear-gradient(180deg, #EEF1FC 0%, #F4F1FA 55%, #F8F2F4 100%) !important; }
html.dark body[data-page="tienda.inicio"] .fondo { background: linear-gradient(180deg, #0B1020 0%, #0A0F19 100%) !important; }
body[data-page="tienda.inicio"] .blob { display: block !important; animation: none !important; filter: blur(70px); }
body[data-page="tienda.inicio"] .b1 { background: rgb(var(--lg-a)); opacity: .30; }
body[data-page="tienda.inicio"] .b2 { background: rgb(var(--lg-b)); opacity: .24; }
body[data-page="tienda.inicio"] .b3 { background: rgb(var(--lg-c)); opacity: .20; display: block !important; }
html.dark body[data-page="tienda.inicio"] .blob { opacity: .22; }

body[data-page="tienda.inicio"] :is(.header-in, .cat-nav-in, .nav-m) {
  background: linear-gradient(135deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .42)) !important; border: 1px solid rgba(255, 255, 255, .85) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .25), 0 12px 30px -14px rgba(60, 70, 150, .35) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8);
}
html.dark body[data-page="tienda.inicio"] :is(.header-in, .cat-nav-in, .nav-m) { background: linear-gradient(135deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05)) !important; border-color: rgba(255, 255, 255, .16) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 14px 32px -14px rgba(0, 0, 0, .6) !important; }
body[data-page="tienda.inicio"] .nav-m { border-radius: 26px; }

/* Tarjeta: panel de vidrio + imagen sobre un degradado de color (un tono distinto por producto) */
body[data-page="tienda.inicio"] :is(.hero2 .main, .card) {
  background: linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .46)) !important; border: 1px solid rgba(255, 255, 255, .9) !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255, 255, 255, .3), 0 18px 34px -18px rgba(60, 70, 150, .35) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
}
html.dark body[data-page="tienda.inicio"] :is(.hero2 .main, .card) { background: linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)) !important; border-color: rgba(255, 255, 255, .16) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 18px 34px -18px rgba(0, 0, 0, .65) !important; }
body[data-page="tienda.inicio"] .card:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 #fff, 0 24px 40px -18px rgba(60, 70, 150, .45) !important; }
body[data-page="tienda.inicio"] .card-img { position: relative; overflow: hidden; border: 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7) !important; background: linear-gradient(150deg, rgba(var(--lg-a), .30), rgba(var(--lg-b), .22)) !important; }
body[data-page="tienda.inicio"] .card-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 38%); pointer-events: none; }
body[data-page="tienda.inicio"] .grid > .card:nth-child(4n+2) .card-img { background: linear-gradient(150deg, rgba(var(--lg-b), .32), rgba(255, 190, 110, .26)) !important; }
body[data-page="tienda.inicio"] .grid > .card:nth-child(4n+3) .card-img { background: linear-gradient(150deg, rgba(var(--lg-c), .30), rgba(var(--lg-a), .22)) !important; }
body[data-page="tienda.inicio"] .grid > .card:nth-child(4n+4) .card-img { background: linear-gradient(150deg, rgba(170, 120, 255, .30), rgba(var(--lg-b), .22)) !important; }
html.dark body[data-page="tienda.inicio"] .card-img { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14) !important; }
body[data-page="tienda.inicio"] .card-img img { filter: drop-shadow(0 12px 14px rgba(40, 40, 110, .30)); position: relative; z-index: 1; }

/* Botones: vidrio con reflejo (el principal con el color de la tienda) */
body[data-page="tienda.inicio"] .btn-pri, body[data-page="tienda.inicio"] .tv-add button { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -8px 14px -10px rgba(0, 0, 0, .25), 0 8px 18px -8px rgba(var(--lg-a), .6) !important; }

/* Bienvenida: un solo bloque, sin tarjetas laterales, sin garantias ni etiquetas */
body[data-page="tienda.inicio"] .trust2 { display: none; }
body[data-page="tienda.inicio"] .hero2 { grid-template-columns: 1fr; margin-top: 16px; }
body[data-page="tienda.inicio"] .hero2 .side { display: none; }
body[data-page="tienda.inicio"] .hero2 .main { padding: 34px 38px; min-height: 0; }
body[data-page="tienda.inicio"] .hero2 .main .badge { display: none; }
body[data-page="tienda.inicio"] .hero2 .main h1 { font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -.025em; line-height: 1.08; max-width: 14ch; }
body[data-page="tienda.inicio"] .hero2 .main > p { max-width: 38ch; color: var(--tx2); }
body[data-page="tienda.inicio"] .hero2 .main .art { max-height: 250px; width: auto; }

/* Las categorias ya estan en la barra de secciones: la cuadricula de mosaicos sobra (queda el ancla #productos) */
body[data-page="tienda.inicio"] #productos { height: 0; padding: 0; margin: 0; overflow: hidden; }
body[data-page="tienda.inicio"] #productos > * { display: none; }

/* Barra de secciones: fichas sencillas, tambien en el celular */
body[data-page="tienda.inicio"] .cat-nav { display: block; margin: 14px 0 4px; }
body[data-page="tienda.inicio"] .cat-nav-in { padding: 6px; border-radius: 16px; }
body[data-page="tienda.inicio"] .cat-nav a { padding: 8px 14px; border-radius: 10px; font-size: 14px; }
body[data-page="tienda.inicio"] .cat-nav a.on { background: var(--rf-btn, #3B49E8); color: #fff; box-shadow: none; }

/* Secciones: solo el titulo */
body[data-page="tienda.inicio"] .blq { padding-block: 28px 8px; }
body[data-page="tienda.inicio"] .blq-h { margin-bottom: 14px; }
body[data-page="tienda.inicio"] .blq-h .kick, body[data-page="tienda.inicio"] .blq-h p, body[data-page="tienda.inicio"] .blq-n { display: none; }
body[data-page="tienda.inicio"] .blq-h h2 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }

/* Tarjetas de producto: nombre, precio y comprar */
body[data-page="tienda.inicio"] .producto-card .desc { display: none; }
body[data-page="tienda.inicio"] .producto-card h3 { font-size: 15.5px; font-weight: 700; margin: 2px 0 0; }
body[data-page="tienda.inicio"] .producto-precios .pr-gen strong { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
body[data-page="tienda.inicio"] .producto-puntos { font-size: 12px; opacity: .8; }

@media (max-width: 900px) {
  body[data-page="tienda.inicio"] .hero2 { display: none; }
  body[data-page="tienda.inicio"] .cat-nav { top: 78px; }
  body[data-page="tienda.inicio"] .blq-h h2 { font-size: 22px; }
}

body[data-page="tienda.inicio"] .hero2 .main .cta .btn-gl { display: none; }
body[data-page="tienda.inicio"] .hero2 .main .art { right: 56px; top: 50%; bottom: auto; transform: translateY(-50%); max-height: 230px; max-width: 38%; }
body[data-page="tienda.inicio"] .hero2 .main .coin { display: none; }
body[data-page="tienda.inicio"] .blq, body[data-page="tienda.inicio"] #reservas, body[data-page="tienda.inicio"] #destacados { scroll-margin-top: 150px; }

/* Ajustes finos: imagen del bloque de bienvenida mas contenida; la ficha activa solo se marca al navegar (no por defecto) */
body[data-page="tienda.inicio"] .hero2 .main { overflow: hidden; }
body[data-page="tienda.inicio"] .hero2 .main .art { right: 90px; max-height: 210px; width: auto; max-width: 30%; filter: drop-shadow(0 18px 18px rgba(40, 40, 110, .22)); }
body[data-page="tienda.inicio"] .tema-franja { margin-top: 10px; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 4px 0; font-weight: 600; color: var(--tx2); }
body[data-page="tienda.inicio"] .tema-franja::before { display: none; }
@media (max-width: 900px) {
  body[data-page="tienda.inicio"] .cat-nav a.on { background: transparent; color: var(--rf-accent, #3B49E8); box-shadow: inset 0 -2px 0 var(--rf-accent, #3B49E8); border-radius: 0; }
  body[data-page="tienda.inicio"] .cat-nav-in { padding: 4px 6px; }
}

/* Celular: el cristal de las tarjetas se imita con degradado y reflejo (sin desenfoque por tarjeta: en iOS hace trabarse el desplazamiento).
   Solo la cabecera, la barra de secciones y la barra inferior llevan desenfoque real. */
@media (max-width: 900px) {
  body[data-page="tienda.inicio"] :is(.card, .hero2 .main) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .7)) !important; }
  html.dark body[data-page="tienda.inicio"] :is(.card, .hero2 .main) { background: linear-gradient(145deg, rgba(34, 44, 70, .9), rgba(22, 30, 50, .85)) !important; }
  body[data-page="tienda.inicio"] .blob { filter: blur(50px); }
}

/* Bonus de monedas (separar_bonus en mejoras_publicas.py): sello dorado sobre la foto + desglose bajo el nombre */
.producto-card .card-img { position: relative; }
.producto-card .producto-bonus-sello {
    position: absolute; top: 8px; right: 8px; z-index: 1;
    padding: 5px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 800; line-height: 1.1; white-space: nowrap;
    color: #4a2a00;
    background: linear-gradient(160deg, #ffe58a 0%, #ffc531 55%, #f2a81d 100%);
    box-shadow: 0 2px 8px rgba(166, 98, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .65);
}
.producto-card .producto-bonus { margin: -2px 0 8px; font-size: 13.5px; font-weight: 600; color: var(--tx2, #5b6b73); }
.producto-card .producto-bonus b { color: #a35a00; font-weight: 800; }
html.dark .producto-card .producto-bonus b { color: #ffc94a; }

/* Limite por cliente (productos.uno_por_cuenta = N) */
.producto-card .producto-limite { display: flex; align-items: center; gap: 5px; margin: -4px 0 8px; font-size: 12.5px; font-weight: 650; color: var(--tx2, #5b6b73); }
.producto-card .producto-limite svg { flex: none; opacity: .8; }

/* Categoria destacada: sale segunda y con un marco dorado suave */
.blq.blq-destacada { position: relative; padding: 18px 16px 20px; border-radius: 26px;
    background: linear-gradient(160deg, rgba(255, 229, 138, .32), rgba(255, 197, 49, .10) 45%, rgba(255, 255, 255, 0) 80%);
    box-shadow: inset 0 0 0 1.5px rgba(242, 168, 29, .45); }
.blq.blq-destacada .kick { color: #a35a00; }
html.dark .blq.blq-destacada { background: linear-gradient(160deg, rgba(255, 197, 49, .16), rgba(255, 197, 49, .04) 50%, transparent 80%); box-shadow: inset 0 0 0 1.5px rgba(255, 201, 74, .35); }
html.dark .blq.blq-destacada .kick { color: #ffc94a; }
@media (min-width: 900px) { .blq.blq-destacada { padding: 26px 24px 28px; } }