/* Refinado visual de la tienda (22/10): menos efecto, mas oficio. Se carga al final. Principios: superficies solidas con borde fino, un solo color de accion sin degradados, radios contenidos, sombras minimas, tipografia con peso y ritmo consistentes. */ :root { --rf-surface: #fff; --rf-sunken: #F3F4F9; --rf-hair: #E2E5EE; --rf-hair-2: #CDD2E2; --rf-btn: #3B49E8; --rf-btn-h: #2E3BD0; --rf-accent: #3B49E8; --rf-sh: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .05); --rf-sh-h: 0 2px 4px rgba(16, 24, 40, .06), 0 8px 20px rgba(16, 24, 40, .07); --rf-r: 14px; --rf-r-l: 20px; --rf-glass: rgba(255, 255, 255, .58); --rf-glass-edge: rgba(255, 255, 255, .85); --rf-glass-sh: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(16, 24, 40, .04), 0 12px 30px -12px rgba(var(--tema-rgb, 55, 65, 140), .26); --rf-well: rgba(255, 255, 255, .6); --bg: #EEF0FA; --bg2: #F3F1F8; } html.dark { --rf-surface: #121A2B; --rf-sunken: #1A2338; --rf-hair: rgba(255, 255, 255, .11); --rf-hair-2: rgba(255, 255, 255, .22); --rf-btn: #4452EE; --rf-btn-h: #3643D8; --rf-accent: #A9B7FF; --rf-sh: 0 1px 2px rgba(0, 0, 0, .35); --rf-sh-h: 0 8px 22px rgba(0, 0, 0, .4); --rf-glass: rgba(255, 255, 255, .06); --rf-glass-edge: rgba(255, 255, 255, .14); --rf-glass-sh: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 30px -12px rgba(0, 0, 0, .55); --rf-well: rgba(255, 255, 255, .05); --bg: #0A0F19; --bg2: #0E1522; } /* Fondo: plano. Sin aurora ni manchas flotantes. */ body.tv2 .fondo { background: linear-gradient(180deg, #ECEFFB 0%, #F2F0F9 55%, #F6F1F3 100%); } html.dark body.tv2 .fondo { background: linear-gradient(180deg, #0B1020 0%, #0A0F19 100%); } body.tv2 .fondo::before { content: none; } body.tv2 .blob { animation: none; filter: blur(120px); } body.tv2 .b1 { background: rgb(var(--tema-claro-rgb, 169, 182, 255)); opacity: .5; } body.tv2 .b2 { background: rgb(var(--tema-rgb, 255, 214, 196)); opacity: .22; } body.tv2 .b3 { display: none; } html.dark body.tv2 .b1 { background: #3B49E8; opacity: .2; } html.dark body.tv2 .b2 { background: #1F6F8B; opacity: .16; } /* Superficies: opacas, borde fino, sin desenfoque */ body.tv2 .glass, body.tv2 .glass-soft, body.tv2 .header-in, body.tv2 .cat-nav-in, body.tv2 .nav-m { background: var(--rf-glass); border: 1px solid var(--rf-glass-edge); box-shadow: var(--rf-glass-sh); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); } body.tv2 .header.sc .header-in { background: var(--rf-glass); } html:not(.dark) body.tv2 .header.sc .header-in { background: rgba(255, 255, 255, .72); } body.tv2 .glass { border-radius: var(--rf-r-l); } body.tv2 .header-in, body.tv2 .cat-nav-in { border-radius: var(--rf-r); } /* Tipografia: un peso para titulos, interlineado y rastreo coherentes */ body.tv2 h1, body.tv2 h2, body.tv2 h3, body.tv2 h4 { font-weight: 700; letter-spacing: -.022em; } body.tv2 .hero2 h1 { font-weight: 700; letter-spacing: -.03em; line-height: 1.06; } body.tv2 .hero2 h1 em, body.tv2 h1 em { background: none; -webkit-text-fill-color: currentColor; color: var(--rf-accent); font-style: normal; } body.tv2 .kick { font-size: 12px; letter-spacing: .12em; color: var(--rf-accent); font-weight: 700; } body.tv2 .blq-h h2 { font-size: clamp(24px, 2.6vw, 30px); } body.tv2 .blq-h p, body.tv2 .sh p { color: var(--tx2); font-size: 15px; } /* Cabecera y navegacion */ body.tv2 .logo b { background: var(--rf-btn); box-shadow: none; border-radius: 9px; } body.tv2 .nav a, body.tv2 .cat-nav a { border-radius: 10px; font-weight: 600; } body.tv2 .nav a:hover, body.tv2 .cat-nav a:hover { background: rgba(255, 255, 255, .55); } html.dark body.tv2 .nav a:hover, html.dark body.tv2 .cat-nav a:hover { background: rgba(255, 255, 255, .08); } body.tv2 .nav a[aria-current="page"], body.tv2 .cat-nav a.on { background: rgba(255, 255, 255, .85); box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(16, 24, 40, .1); color: var(--tx); } html.dark body.tv2 .nav a[aria-current="page"], html.dark body.tv2 .cat-nav a.on { background: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); } body.tv2 .ic-btn { border-radius: 12px; background: var(--rf-glass); border: 1px solid var(--rf-glass-edge); } body.tv2 .cnt { background: var(--rf-btn); color: var(--rf-btn-ink, #fff); } /* Botones: un solo color de accion, sin degradado ni brillo */ body.tv2 .btn { border-radius: 10px; font-weight: 600; letter-spacing: 0; } body.tv2 .btn-pri, body.tv2 .btn-pri:hover { background: var(--rf-btn); color: var(--rf-btn-ink, #fff); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 2px rgba(20, 30, 120, .25); filter: none; } body.tv2 .btn-pri:hover { background: var(--rf-btn-h); transform: none; } body.tv2 .btn-gl { background: var(--rf-glass); border: 1px solid var(--rf-glass-edge); box-shadow: var(--rf-glass-sh); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); color: var(--tx); } body.tv2 .btn-gl:hover { background: rgba(255, 255, 255, .8); } html.dark body.tv2 .btn-gl:hover { background: rgba(255, 255, 255, .12); } body.tv2 .btn-lg { min-height: 48px; } body.tv2 .chip { border-radius: 10px; background: var(--rf-glass); border: 1px solid var(--rf-glass-edge); } body.tv2 .chip[aria-pressed="true"] { background: var(--rf-btn); color: var(--rf-btn-ink, #fff); } /* Portada: sin orbes ni insignias de efecto */ body.tv2 .hero2 .main { border-radius: 20px; } body.tv2 .hero2 .coin { display: none; } body.tv2 .hero2 .badge { background: none; border: 0; padding: 0; box-shadow: none; color: var(--rf-accent); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; } body.tv2 .hero2 .badge svg { display: none; } body.tv2 .hero2 .sc .go { font-weight: 600; } body.tv2 .hero2 .pm .cr { background: var(--rf-btn); box-shadow: none; border-radius: 10px; } body.tv2 .nov-i { background: var(--rf-btn); border-radius: 10px; } body.tv2 .nov-ev { background: var(--rf-glass); border: 1px solid var(--rf-glass-edge); border-radius: var(--rf-r-l); box-shadow: var(--rf-glass-sh); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); } body.tv2 .nov-go { background: var(--rf-btn); box-shadow: none; border-radius: 10px; } body.tv2 .bene a { border-radius: var(--rf-r-l); } body.tv2 .bene a:hover { transform: none; border-color: var(--rf-hair-2); } /* Tarjetas de producto: planas, ordenadas, precio como protagonista */ body.tv2 .card { border-radius: var(--rf-r-l); padding: 12px 12px 16px; background: var(--rf-glass); border: 1px solid var(--rf-glass-edge); box-shadow: var(--rf-glass-sh); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); transition: box-shadow .25s, background .25s; } body.tv2 .card::before { content: none; } body.tv2 .card:hover { transform: none; background: rgba(255, 255, 255, .72); box-shadow: var(--rf-glass-sh), 0 18px 36px -14px rgba(55, 65, 140, .3); } html.dark body.tv2 .card:hover { background: rgba(255, 255, 255, .09); } body.tv2 .card-img { background: var(--rf-well); border-radius: var(--rf-r); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); } html.dark body.tv2 .card-img { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } body.tv2 .card-img img { filter: drop-shadow(0 6px 8px rgba(16, 24, 40, .16)); } body.tv2 .card:hover .card-img img { transform: scale(1.03); } body.tv2 .card h3 { font-size: 16px; font-weight: 700; } body.tv2 .card .desc { font-size: 13.5px; } body.tv2 .price strong, body.tv2 .card .pm-row strong { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } /* Precio GO Premium y puntos: informacion secundaria, sin pildoras de color */ body.tv2 .prem { background: none; border: 0; padding: 0; margin-top: 4px; border-radius: 0; font-size: 13px; font-weight: 600; color: var(--tx2); } body.tv2 .pts, body.tv2 .card .pts { font-size: 12.5px; font-weight: 600; opacity: .9; } body.tv2 .card .btn { margin-top: 12px; min-height: 42px; } body.tv2 .tag { border-radius: 6px; letter-spacing: .06em; box-shadow: none; } /* Botones flotantes: sin brillo */ body.tv2 .boton-whatsapp-flotante { background: var(--rf-btn); border: 0; box-shadow: var(--rf-sh-h); border-radius: 14px; width: 52px; height: 52px; } body.tv2 .boton-whatsapp-flotante:hover { transform: none; background: var(--rf-btn-h); box-shadow: var(--rf-sh-h); } /* Pasos, ayuda y secciones informativas */ body.tv2 .paso-tarjeta, body.tv2 .ayuda, body.tv2 .esp-sub { border-radius: var(--rf-r-l); } body.tv2 .aviso-tienda { border-radius: var(--rf-r); } /* --- Segundo pase: neutraliza las capas antiguas de la tienda (mas especificas) --- */ body.tv2 .btn-pri, body.tv2 a.btn-pri, body.tv2 .producto-card .tv-add button, body.tv2 .gp-acceso-acc .btn-pri { background: var(--rf-btn); color: var(--rf-btn-ink, #fff); box-shadow: none; border-color: transparent; filter: none; } body.tv2 .btn-pri:hover, body.tv2 a.btn-pri:hover, body.tv2 .producto-card .tv-add button:hover { background: var(--rf-btn-h); transform: none; filter: none; } body.tv2 .hd-more { background: var(--rf-btn); box-shadow: none; border-radius: 10px; width: 40px; height: 40px; } body.tv2 .hd-more.on { box-shadow: 0 0 0 3px rgba(59, 73, 232, .22); } body.tv2 .hd-cart, body.tv2 .hd-theme { box-shadow: none; } body.tv2 .producto-card { border-radius: var(--rf-r-l); padding: 12px 12px 16px; } body.tv2 .producto-card .card-img { background: var(--rf-well); border: 0; border-radius: var(--rf-r); height: 170px; } html.dark body.tv2 .producto-card .card-img { background: var(--rf-well); } body.tv2 .producto-card .card-img img { filter: drop-shadow(0 6px 8px rgba(16, 24, 40, .18)); } body.tv2 .producto-card:hover .card-img img { transform: scale(1.03); } body.tv2 .producto-card h3 { font-size: 16px; } /* Precio GO Premium: linea de texto, sin pildora amarilla */ body.tv2 .producto-precios .pr-prem, html.dark body.tv2 .producto-precios .pr-prem { background: none; border: 0; border-radius: 0; padding: 0; margin-top: 4px; gap: 8px; } body.tv2 .producto-precios .pr-prem .bdg { background: none; font: 700 11px/1 "DM Sans", sans-serif; letter-spacing: .06em; color: var(--tx3); padding: 0; } html:not(.dark) body.tv2 .producto-precios .pr-prem, html:not(.dark) body.tv2 .producto-precios .pr-prem * { color: var(--tx2) !important; } html:not(.dark) body.tv2 .producto-precios .pr-prem b { color: var(--rf-accent) !important; } body.tv2 .producto-precios .pr-prem b { font: 700 14px "DM Sans", sans-serif; font-variant-numeric: tabular-nums; } html.dark body.tv2 .producto-precios .pr-prem b { color: var(--rf-accent); } body.tv2 .producto-puntos { color: var(--tx3); font-weight: 600; } html:not(.dark) body.tv2 .producto-puntos { color: var(--tx3) !important; } /* Portada: paneles sin brillos de color */ body.tv2 .hero2 .main, body.tv2 .hero2 .sc { background: var(--rf-glass); } body.tv2 .hero2 .main::before, body.tv2 .hero2 .main::after, body.tv2 .hero2 .sc::before, body.tv2 .hero2 .sc::after { display: none; } body.tv2 .hero2 .art { filter: drop-shadow(0 14px 18px rgba(16, 24, 40, .22)); } /* Tercer pase: movil, insignia en oscuro, barra inferior */ html.dark body.tv2 .hero2 .badge, body.tv2 .hero2 .main > .badge { background: none; border: 0; padding: 0; color: var(--rf-accent); } body.tv2 .nav-m a[aria-current="page"] { background: var(--rf-btn); color: var(--rf-btn-ink, #fff); box-shadow: none; border-radius: 12px; } body.tv2 .nav-m { border-radius: var(--rf-r-l); } @media (max-width: 640px) { body.tv2 .producto-precios .pr-prem .bdg { font-size: 0; } body.tv2 .producto-precios .pr-prem .bdg::before { font: 700 10px/1 "DM Sans", sans-serif; letter-spacing: .06em; color: var(--tx3); text-transform: uppercase; } } /* Cuarto pase: resto de degradados de las demas pantallas */ body.tv2 .gp-ico, body.tv2 .paso-ico, body.tv2 .nov-go, body.tv2 .cr, body.tv2 .cartbar.on, body.tv2 .info-boton, body.tv2 .boton-confirmar, body.tv2 .boton-confirmar.checkout-next, body.tv2 .tv-qty button, body.tv2 .qty-s button, body.tv2 .carrito-cantidad { background: var(--rf-btn); color: var(--rf-btn-ink, #fff); box-shadow: none; filter: none; } body.tv2 .boton-confirmar:hover, body.tv2 .info-boton:hover { background: var(--rf-btn-h); transform: none; } body.tv2 .boton-confirmar, body.tv2 .info-boton { border-radius: 10px; } body.tv2 .paso-ico, body.tv2 .gp-ico { border-radius: 10px; } body.tv2 .hero-info { background: var(--rf-btn); box-shadow: none; border-radius: 20px; } body.tv2 .hero-info::before, body.tv2 .hero-info::after { display: none; } body.tv2 .hero-info-icono { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); box-shadow: none; } body.tv2 .tag.lim { background: var(--rf-btn); color: var(--rf-btn-ink, #fff); } body.tv2 .puntos-recompensa-imagen { background: var(--rf-sunken); } body.tv2 .footer { background: var(--rf-glass); border-top: 1px solid var(--rf-glass-edge); } body.tv2 .carrito-item, body.tv2 .carrito-resumen { box-shadow: var(--rf-glass-sh); } /* Cuadricula: evita que quede un producto solo en la ultima fila */ @media (min-width: 1101px) { body.tv2 .grid:has(> :nth-child(6):last-child), body.tv2 .grid:has(> :nth-child(9):last-child) { grid-template-columns: repeat(3, 1fr); } body.tv2 .grid:has(> :nth-child(4):last-child), body.tv2 .grid:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, 1fr); } } /* --- Temas de temporada en vidrio: el tema tine el acento, el reflejo y el fondo; los adornos viven detras del cristal --- */ body.tv2 .fondo { z-index: -2; } body.tv2 .tema-efectos { z-index: 60; } body.tv2 .tema-particula { opacity: .7; } body.tv2 .header { border-bottom: 0; } body.tv2 .tema-web-capa { opacity: .7; } /* Franja: capsula de vidrio tintada con el color del tema, sin icono suelto */ body.tv2 .tema-franja { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; text-align: center; background: linear-gradient(0deg, rgba(var(--tema-rgb, 59, 73, 232), .08), rgba(var(--tema-rgb, 59, 73, 232), .08)), var(--rf-glass); border: 1px solid rgba(var(--tema-claro-rgb, 255, 255, 255), .55); border-radius: var(--rf-r); box-shadow: var(--rf-glass-sh); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); color: var(--tx); font-weight: 600; } body.tv2 .tema-franja::before { width: 26px; height: 26px; margin: 0; flex: none; vertical-align: 0; filter: none; border-radius: 8px; background-color: rgba(var(--tema-claro-rgb, 255, 255, 255), .28); background-size: 76%; background-position: center; background-repeat: no-repeat; } html.dark body.tv2 .tema-franja { border-color: rgba(var(--tema-claro-rgb, 255, 255, 255), .28); } /* Logo: el motivo de la fecha como sello discreto */ body.tv2 .logo::after { width: 22px; height: 22px; margin-left: 8px; opacity: .9; } /* El reflejo del vidrio toma el color del tema */ body.tv2 .header-in, body.tv2 .hero2 .main, body.tv2 .hero2 .sc, body.tv2 .card, body.tv2 .nov-ev { border-color: rgba(var(--tema-claro-rgb, 255, 255, 255), .5); } html.dark body.tv2 .header-in, html.dark body.tv2 .hero2 .main, html.dark body.tv2 .hero2 .sc, html.dark body.tv2 .card { border-color: rgba(var(--tema-claro-rgb, 255, 255, 255), .2); } /* ===== Menos recarga visual (22/10) ===== */ /* Los adornos de fiesta no se pintan encima de las tarjetas ni junto al logo: el tema tine el color y la franja, nada mas */ body.tv2 .tema-franja { padding: 8px 14px; font-size: 13.5px; } /* Movil: superficies solidas (el desenfoque en decenas de capas hace que iOS se trabe al desplazar) y solo lo esencial a la vista */ @media (max-width: 900px) { body.tv2 .blob { display: none; } body.tv2 .glass, body.tv2 .glass-soft, body.tv2 .card, body.tv2 .btn-gl, body.tv2 .chip, body.tv2 .ic-btn, body.tv2 .nov-ev, body.tv2 .footer, body.tv2 .hero2 .main, body.tv2 .hero2 .sc, body.tv2 .cat-nav-in, body.tv2 .tema-franja, body.tv2 .carrito-item, body.tv2 .carrito-resumen { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .9); box-shadow: 0 1px 2px rgba(16, 24, 40, .06); } html.dark body.tv2 .glass, html.dark body.tv2 .glass-soft, html.dark body.tv2 .card, html.dark body.tv2 .btn-gl, html.dark body.tv2 .chip, html.dark body.tv2 .ic-btn, html.dark body.tv2 .nov-ev, html.dark body.tv2 .footer, html.dark body.tv2 .hero2 .main, html.dark body.tv2 .hero2 .sc, html.dark body.tv2 .cat-nav-in, html.dark body.tv2 .tema-franja { background: rgba(18, 26, 43, .92); } body.tv2 .trust2, body.tv2 #beneficios-tienda, body.tv2 .hero2 .side .pm { display: none; } body.tv2 .hero2 .side { grid-template-columns: 1fr; } body.tv2 .hero2 .sc { min-height: 0; } body.tv2 .hero2 .main .art { opacity: .95; } body.tv2 .tema-franja { margin-top: 8px; padding: 6px 12px; font-size: 12.5px; line-height: 1.35; } body.tv2 .tema-franja::before { display: none; } body.tv2 .boton-whatsapp-flotante { width: 44px; height: 44px; } body[data-page="tienda.ver_carrito"] .boton-whatsapp-flotante { display: none; } } /* Carrito en el celular: titulo corto y el boton de continuar siempre a la vista, encima de la barra inferior */ .cart-fija { display: none; } @media (max-width: 900px) { body[data-page="tienda.ver_carrito"] .page-h > p:not(.crumb) { display: none; } body[data-page="tienda.ver_carrito"] .page-h h1 { font-size: 26px; margin: 4px 0 0; } body[data-page="tienda.ver_carrito"] .page-h { padding-top: 6px; } body[data-page="tienda.ver_carrito"] .two { margin-top: 10px !important; } body[data-page="tienda.ver_carrito"] main { padding-bottom: 150px; } body[data-page="tienda.ver_carrito"] .panel.stick { position: static; } body[data-page="tienda.ver_carrito"] .panel .btn-pri.btn-lg { display: none; } .cart-fija { position: fixed; left: 12px; right: 12px; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 105; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 16px; background: rgba(255, 255, 255, .96); border: 1px solid var(--rf-hair); box-shadow: 0 10px 28px -10px rgba(16, 24, 40, .35); } html.dark .cart-fija { background: rgba(18, 26, 43, .97); } .cart-fija > span { display: grid; line-height: 1.15; flex: none; } .cart-fija small { font-size: 12px; color: var(--tx3); } .cart-fija b { font-size: 18px; font-variant-numeric: tabular-nums; } .cart-fija .btn { flex: 1; min-height: 46px; } } /* Invitacion a instalar: solo en la portada y con calma (antes tapaba el carrito y el contenido) */ body:not([data-page="tienda.inicio"]) .pwa-banner { display: none !important; } .pwa-flecha { position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 401; display: grid; justify-items: center; gap: 4px; color: #fff; font: 700 13px/1.2 system-ui, sans-serif; text-align: center; pointer-events: none; animation: pwa-rebote 1.3s ease-in-out infinite; } .pwa-flecha svg { width: 34px; height: 34px; stroke: #fff; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .pwa-flecha[hidden] { display: none; } .pwa-flecha.arriba { bottom: auto; top: calc(10px + env(safe-area-inset-top)); right: 14px; left: auto; transform: none; animation-name: pwa-rebote-arriba; } @keyframes pwa-rebote { 50% { transform: translate(-50%, 8px); } } @keyframes pwa-rebote-arriba { 50% { transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .pwa-flecha { animation: none; } } .pwa-ayuda-c .btn + .btn { margin-top: -4px; } .cart-seguir { display: none; margin-top: 12px; } @media (max-width: 900px) { body[data-page="tienda.ver_carrito"] .panel.stick { display: none; } .cart-seguir { display: flex; } } /* ===== App instalada: sin ampliar con los dedos ===== */ html.app-sin-zoom, html.app-sin-zoom body { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; } html.app-sin-zoom input, html.app-sin-zoom select, html.app-sin-zoom textarea { font-size: 16px; } /* iOS amplia la pantalla al enfocar campos menores a 16 px */ /* ===== Portada: del encabezado a los productos, lo minimo (22/10) ===== Antes: franja de fiesta + garantias + tarjeta grande con imagen + evento + membresia + categorias + banner (casi 3 pantallas). Ahora en el celular: encabezado, un titulo con su boton, las categorias y el banner. */ @media (max-width: 900px) { body.tv2 .tema-franja { display: none; } body[data-page="tienda.inicio"] .hero2 { margin-top: 10px; } body[data-page="tienda.inicio"] .hero2 .side { display: none; } body[data-page="tienda.inicio"] .hero2 .main { padding: 18px 18px 18px; min-height: 0; } body[data-page="tienda.inicio"] .hero2 .main .art, body[data-page="tienda.inicio"] .hero2 .main .coin, body[data-page="tienda.inicio"] .hero2 .main .badge, body[data-page="tienda.inicio"] .hero2 .main > p, body[data-page="tienda.inicio"] .hero2 .main .cta .btn-gl { display: none; } body[data-page="tienda.inicio"] .hero2 .main h1 { font-size: 26px; margin: 0 0 14px; max-width: none; } body[data-page="tienda.inicio"] .hero2 .main .cta { display: block; } body[data-page="tienda.inicio"] .hero2 .main .cta .btn-pri { width: 100%; } body[data-page="tienda.inicio"] #productos { padding-block: 14px 6px; } body[data-page="tienda.inicio"] #productos .sh p { display: none; } body[data-page="tienda.inicio"] .nov { margin: 4px 0 10px; } body[data-page="tienda.inicio"] .nov-c, body[data-page="tienda.inicio"] .nov .nov-ev { display: none; } } /* Celular: la portada arranca con el banner y los productos (sin el titular «PokéCoins desde…» ni «¿Qué quieres recargar?»). #productos queda como ancla vacia: los enlaces que apuntan a /#productos siguen funcionando. */ @media (max-width: 900px) { body[data-page="tienda.inicio"] .hero2 { display: none; } body[data-page="tienda.inicio"] #productos { height: 0; padding: 0; margin: 0; overflow: hidden; } body[data-page="tienda.inicio"] #productos > * { display: none; } body[data-page="tienda.inicio"] .nov { margin-top: 12px; } } /* ===== Efectos de fiesta de vuelta (telaranas, particulas, cinta, adornos en tarjetas y logo), tambien en el celular ===== */ @media (max-width: 760px) { body.tv2 .tema-web-capa, body.tv2 .tema-efectos, body.tv2 .tema-arana, body.tv2 .tema-cinta { display: block !important; } body.tv2 .tema-web-capa .tema-web { width: 84px; height: 84px; } } @media (prefers-reduced-motion: reduce) { body.tv2 .tema-particula { animation: none !important; } } /* ===== Texto no seleccionable (tipo app); se pueden copiar los datos de pago con su boton ===== */ body.tv2 { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } body.tv2 input, body.tv2 textarea, body.tv2 select, body.tv2 [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } body.tv2 img { -webkit-user-drag: none; user-drag: none; } .btn-copiar { display: inline-flex; align-items: center; justify-content: center; margin-left: 8px; min-height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--rf-hair-2, rgba(0,0,0,.18)); background: var(--rf-glass, rgba(255,255,255,.7)); color: var(--rf-accent, #3B49E8); font: 700 12px/1 "DM Sans", sans-serif; cursor: pointer; vertical-align: middle; } .btn-copiar.ok { color: #0C8F6A; border-color: #0C8F6A; } .cuenta-destino-grid > div, .pedido-cuenta-destino > div { position: relative; } /* ===== Boton de modo noche/dia: icono centrado ===== */ .hd-theme .t-moon, .hd-theme .t-sun { display: grid; place-items: center; width: 100%; height: 100%; line-height: 0; } .hd-theme .t-sun { display: none; } html.dark .hd-theme .t-sun { display: grid; } html.dark .hd-theme .t-moon { display: none; } .hd-theme svg { display: block; margin: auto; } .hd-theme { padding: 0; } /* ===== Menu «Mas»: abre al instante (sin desenfoque en la hoja ni en los mosaicos, solo transform/opacity, ya maquetado) ===== */ .mm[hidden] { display: block !important; visibility: hidden; pointer-events: none; } body.tv2 .mm-b { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .98); transition: transform .24s var(--ease), opacity .2s; will-change: transform; contain: layout paint; } html.dark body.tv2 .mm-b { background: rgba(16, 22, 38, .98); } body.tv2 .mm-t { -webkit-backdrop-filter: none; backdrop-filter: none; transition: none; box-shadow: none; background: rgba(120, 130, 190, .1); } body.tv2 .mm-s { transition: opacity .2s; } /* ===== App instalada: sin pie de pagina con datos de la tienda ni enlaces (eso vive en «Mas») ===== */ html.pwa-app .footer { display: none; } html.pwa-app main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } @media (max-width: 900px) { body.tv2 .header-in { background: rgba(255, 255, 255, .94); } html.dark body.tv2 .header-in { background: rgba(16, 22, 38, .95); } } /* ===== Checkout: el total final aparece al elegir el metodo de pago; canal de avisos ===== */ body.tv2 .checkout-total.sin-metodo > span { display: none !important; } body.tv2 .checkout-total.sin-metodo > strong { font-size: 0 !important; line-height: 0; } body.tv2 .checkout-total.sin-metodo > strong::after { content: "Elige un método de pago para ver el total"; font-size: 14px !important; line-height: 1.4; font-weight: 600; color: var(--tx2); } .checkout-aviso-canal { border: 0; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; } .checkout-aviso-canal legend { padding: 0; margin-bottom: 8px; font-weight: 700; font-size: 15px; } .checkout-aviso-canal label { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1px solid var(--rf-hair-2, rgba(0,0,0,.15)); border-radius: 12px; background: var(--rf-glass, rgba(255,255,255,.6)); cursor: pointer; } .checkout-aviso-canal label:has(input:checked) { border-color: var(--rf-accent, #3B49E8); box-shadow: 0 0 0 2px rgba(59, 73, 232, .15); } .checkout-aviso-canal input { margin-top: 3px; accent-color: var(--rf-btn, #3B49E8); } .checkout-aviso-canal span { display: grid; gap: 1px; } .checkout-aviso-canal small { color: var(--tx2); font-size: 12.5px; } .checkout-aviso-nota { margin-top: 2px; color: var(--tx3); } .pedido-avisos-elegido { border-color: var(--rf-accent, #3B49E8); } /* ===== Seccion marcada «No disponible en este momento» ===== */ body.tv2 .seccion-no-disp .blq-h { position: relative; } body.tv2 .seccion-no-disp .blq-h::after { content: "No disponible en este momento"; display: inline-block; margin-top: 8px; padding: 6px 12px; border-radius: 10px; background: rgba(180, 83, 9, .12); color: #92400E; font: 700 13px/1.2 "DM Sans", sans-serif; } html.dark body.tv2 .seccion-no-disp .blq-h::after { background: rgba(252, 211, 77, .14); color: #FCD34D; } body.tv2 .seccion-no-disp .grid { opacity: .5; filter: grayscale(.5); pointer-events: none; } body.tv2 .seccion-no-disp .tv-add button, body.tv2 .seccion-no-disp .card .btn { font-size: 0 !important; } body.tv2 .seccion-no-disp .tv-add button::after, body.tv2 .seccion-no-disp .card .btn::after { content: "No disponible"; font-size: 14px; } /* Sin murcielagos (se quedan las telaranas, calabazas y la cinta) */ .tema-p-murcielago { display: none !important; } /* Contraste AA: el texto blanco del encabezado informativo se apoya en un fondo siempre oscurecido, sea cual sea el tema de fiesta */ .hero-info, body.tv2 .hero-info { background: linear-gradient(125deg, color-mix(in srgb, var(--color-primary) 52%, #000) 0%, color-mix(in srgb, var(--color-primary) 66%, #000) 62%, color-mix(in srgb, var(--color-primary) 78%, #000) 130%); } /* Contraste AA de la barra inferior: el vidrio es algo mas opaco para que el texto no dependa de lo que pase por detras (hero naranja de los temas de fiesta) */ body.tv2 .nav-m { background: rgba(255, 255, 255, .84); } html.dark body.tv2 .nav-m { background: rgba(14, 20, 44, .9); } html:not(.dark) body.tv2 .nav-m a:not([aria-current="page"]) { color: #4a527a; } /* Menu de escritorio con mas accesos: sin saltos de linea y compacto antes de desbordar */ .nav a { white-space: nowrap; } @media (min-width: 761px) { .header-in { gap: 10px; } .nav { gap: 0; } .nav a { padding: 8px 11px; font-size: 14px; } } @media (min-width: 761px) and (max-width: 1400px) { .hd-cart span:not(.cnt) { display: none; } } @media (max-width: 1100px) { .nav .nav-x { display: none; } } /* con poco ancho esos accesos quedan en el menu + */ /* Barra inferior del celular con la pestana Evento (6 accesos): un poco mas compacta */ @media (max-width: 900px) { .nav-m.con-evento { grid-template-columns: repeat(6, 1fr); padding: 6px; gap: 2px; } .nav-m.con-evento a, .nav-m.con-evento .nm-more { font-size: 11px; letter-spacing: -.02em; padding-inline: 0; } .nav-m.con-evento .cnt { right: calc(50% - 20px); } } /* Packs en PC: la caja arriba y los items debajo (igual que en el celular) */ @media (min-width: 521px) { body.tv2 .card .card-img .pack-arte, body.tv2 .productos-grid-compacto .pack-arte { flex-direction: column; justify-content: center; align-items: center; gap: 8px; padding: 8px; } body.tv2 .card .card-img .pack-arte .pack-caja-img, body.tv2 .productos-grid-compacto .pack-arte .pack-caja-img { width: 72px; flex: 0 0 auto; } body.tv2 .card .card-img .pack-items, body.tv2 .productos-grid-compacto .pack-items { max-width: none; justify-content: center; gap: 8px 12px; } body.tv2 .card .card-img:has(.pack-arte) { height: auto; min-height: 170px; aspect-ratio: auto; } /* si los items no caben, la imagen crece en vez de pisar el titulo */ } /* ===================================================================================================== T8 - accesibilidad y detalles de la tienda (auditoria 2026-10) ===================================================================================================== */ /* A11Y-005: borde de los campos con contraste >= 3:1 contra el fondo (antes rgba(78,92,170,.24) = 1,4:1 sobre blanco). Claro: #7a83b0 = 3,68:1 sobre blanco y 3,24:1 sobre #edf0fb. Oscuro: #6f78a8 = 4,5:1 sobre #0a0d24 y 3,63:1 sobre el campo. */ :root { --campo-borde: #7A83B0; } html.dark { --campo-borde: #6F78A8; } html body.tv2 .campo input:not([type=checkbox]):not([type=radio]):not([type=file]), html body.tv2 .campo select, html body.tv2 .campo textarea, html body.tv2 .inp, html body.tv2 .seguimiento-formulario input, html body.tv2 .seguimiento-formulario-campo input, html body.tv2 input[type=text], html body.tv2 input[type=tel], html body.tv2 input[type=email], html body.tv2 input[type=number], html body.tv2 input[type=password], html body.tv2 input[type=search], html body.tv2 select, html body.tv2 textarea { border-color: var(--campo-borde); } html body.tv2 .campo input:focus-visible, html body.tv2 .inp:focus-visible, html body.tv2 select:focus-visible, html body.tv2 textarea:focus-visible { box-shadow: 0 0 0 3px rgba(74, 92, 255, .45); } /* A11Y-004 / DIS-06: objetivos tactiles. Enlaces sueltos y controles de fila de 24 px como minimo, 44 px en lo principal. */ .crumb a { display: inline-flex; align-items: center; min-height: 24px; padding: 0 2px; } .line .rm { min-height: 44px; min-width: 44px; padding: 0 6px; display: inline-flex; align-items: center; } .premium-mas-beneficios > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; } /* A11Y-001: el boton flotante de WhatsApp vive en un