/* ===================================================================== TEMAS POR CELEBRACIÓN — colores y fondo de cada tema. El tema lo activa js/tema.js (atributo data-tema en ). El tema "patria" (septiembre) está dentro de cada página; aquí van los nuevos. Estructura que usan las páginas: .aura (fondo), .aura path (líneas de luz), .confeti i (partículas), .tema-pill (etiqueta arriba del título). ===================================================================== */ /* piezas comunes a los temas con dibujos (rosa, halloween) */ [data-tema="rosa"] .confeti,[data-tema="halloween"] .confeti{display:block;position:absolute;inset:0} [data-tema="rosa"] .tema-pill,[data-tema="halloween"] .tema-pill{display:flex;width:fit-content;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-size:.8rem;font-weight:700;margin-bottom:16px} [data-tema="rosa"] .confeti i,[data-tema="halloween"] .confeti i{background:none !important;width:30px;height:30px;opacity:.95;border-radius:0;filter:drop-shadow(0 3px 6px rgba(120,0,60,.2))} /* los dibujos no heredan el estilo de las líneas de luz del fondo */ .aura .deco svg,.aura .confeti svg{position:static;left:auto;top:auto;width:100%;height:100%;opacity:1;animation:none;display:block;overflow:visible} .deco{position:absolute;inset:0} .deco .d-vuela{position:absolute;left:-180px;animation:volarTema 30s linear infinite} @keyframes volarTema{0%{transform:translate3d(0,0,0)}25%{transform:translate3d(35vw,-5vh,0)}50%{transform:translate3d(70vw,3vh,0)}75%{transform:translate3d(105vw,-3vh,0)}100%{transform:translate3d(135vw,0,0)}} /* nitidez: sin desenfoque en las líneas de luz de estos temas */ [data-tema="rosa"] .aura .blur,[data-tema="halloween"] .aura .blur{display:none} /* ============ OCTUBRE ROSA (1–24 de octubre): rosa y blanco ============ */ [data-tema="rosa"]{--glow:236,72,153;--brand-soft:#ffe4f1;--dim:#ffe4f1;--muted:#fff0f7} html[data-tema="rosa"],[data-tema="rosa"] body{background:#e0529b} [data-tema="rosa"] .aura{background:linear-gradient(180deg,#ffb3d6 0%,#f98bbf 25%,#f06aa8 55%,#e7589f 80%,#e0529b 100%)} [data-tema="rosa"] .aura::before{background: radial-gradient(50% 38% at 72% 14%, rgba(255,255,255,.45), transparent 70%), radial-gradient(45% 40% at 8% 85%, rgba(255,255,255,.22), transparent 70%)} [data-tema="rosa"] .aura svg:not(.d-lazo){opacity:.9} [data-tema="rosa"] .aura path{stroke:#ffffff;stroke-width:1.6} [data-tema="rosa"] .deco .d-lazo{position:absolute;right:4vw;top:9vh;width:min(22vw,230px);height:auto;aspect-ratio:100/140;opacity:.55;animation:lazoMece 7s ease-in-out infinite;filter:drop-shadow(0 12px 22px rgba(160,20,90,.35))} [data-tema="rosa"] .deco .d-lazo2{right:auto;left:-3vw;top:auto;bottom:6vh;width:min(14vw,140px);opacity:.35;animation-duration:9s} @keyframes lazoMece{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(6deg) translateY(-12px)}} [data-tema="rosa"] .deco .d-mariposa{top:24vh;width:70px;height:56px;animation-duration:26s} [data-tema="rosa"] .deco .d-mariposa svg{animation:mariposaVuelo 1.6s ease-in-out infinite} @keyframes mariposaVuelo{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-14px) rotate(6deg)}} [data-tema="rosa"] .tema-pill{background:#ffffff;color:#be185d;border:1px solid #fff;box-shadow:0 8px 24px rgba(160,20,90,.3)} [data-tema="rosa"] .hero h1,[data-tema="rosa"] .ph h1{background-image:none;color:#ffffff;-webkit-text-fill-color:#ffffff;animation:none;filter:drop-shadow(0 3px 14px rgba(150,10,80,.35))} [data-tema="rosa"] .hero h1 em,[data-tema="rosa"] .ph h1 em{color:#fff;-webkit-text-fill-color:#fff} [data-tema="rosa"] h2,[data-tema="rosa"] h3,[data-tema="rosa"] .name,[data-tema="rosa"] .usd,[data-tema="rosa"] .from b{text-shadow:0 1px 10px rgba(150,10,80,.28)} [data-tema="rosa"] .hero p,[data-tema="rosa"] .lead,[data-tema="rosa"] .sec-h p{color:#fff} [data-tema="rosa"] .eyebrow{color:#fff} [data-tema="rosa"] .btn.p{background:#fff;color:#be185d;box-shadow:0 8px 22px rgba(150,10,80,.3)} [data-tema="rosa"] .btn.p:hover{background:#fff4f9} [data-tema="rosa"] .hbtn.cart{background:#fff;border-color:#fff;color:#be185d} [data-tema="rosa"] .hbtn.cart .n{background:#ec4899;color:#fff} [data-tema="rosa"] .hdr{background:rgba(236,72,153,.62)} [data-tema="rosa"] .tools{background:rgba(236,72,153,.66)} [data-tema="rosa"] .topnav{background:rgba(157,23,77,.35)} [data-tema="rosa"] .ft{background:rgba(157,23,77,.25)} [data-tema="rosa"] .card{background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.14));border-color:rgba(255,255,255,.4)} [data-tema="rosa"] .tab.on::after{background:#fff;box-shadow:none} [data-tema="rosa"] .live{background:#fff;color:#137a43;border-color:#fff} [data-tema="rosa"] .lainez-promo{background:rgba(219,39,119,.94);box-shadow:0 24px 60px rgba(120,0,60,.4)} [data-tema="rosa"] .lainez-promo .lp-badge{background:#fff;color:#be185d} [data-tema="rosa"] .lainez-promo .lp-tagline{color:#fff} /* ============ HALLOWEEN (25–31 de octubre) ============ */ [data-tema="halloween"]{--glow:255,122,26;--brand-soft:#ffb877;--dim:#cdb8da;--muted:#e2d4ea} html[data-tema="halloween"],[data-tema="halloween"] body{background:#1a0b33} [data-tema="halloween"] .aura{background:linear-gradient(180deg,#3b1d6e 0%,#2d1558 35%,#221044 70%,#1a0b33 100%)} [data-tema="halloween"] .aura::before{background: radial-gradient(45% 35% at 20% 90%, rgba(255,122,26,.25), transparent 70%), radial-gradient(40% 35% at 80% 70%, rgba(150,80,255,.22), transparent 70%)} [data-tema="halloween"] .aura path{stroke:rgba(255,190,120,.55)} [data-tema="halloween"] .deco .d-luna{position:absolute;right:8vw;top:10vh;width:min(16vw,170px);aspect-ratio:1;border-radius:50%; background:radial-gradient(circle at 38% 36%,#fffaf0 0%,#fff1c7 55%,#f7dc8f 100%);box-shadow:0 0 60px 18px rgba(255,236,170,.35),0 0 160px 50px rgba(255,200,120,.18)} [data-tema="halloween"] .deco .d-calabaza{position:absolute;right:110px;bottom:3vh;width:min(12vw,130px);height:auto;aspect-ratio:120/110;opacity:.85;animation:calabazaBrilla 3s ease-in-out infinite;filter:drop-shadow(0 0 22px rgba(255,140,40,.55))} @keyframes calabazaBrilla{0%,100%{filter:drop-shadow(0 0 16px rgba(255,140,40,.45))}50%{filter:drop-shadow(0 0 32px rgba(255,170,60,.8))}} [data-tema="halloween"] .deco .d-bat{width:90px;height:45px} [data-tema="halloween"] .deco .d-bat svg{animation:aleteoBat .35s ease-in-out infinite alternate} @keyframes aleteoBat{from{transform:scaleY(1)}to{transform:scaleY(.55)}} [data-tema="halloween"] .deco .d-bat1{top:18vh;animation-duration:22s} [data-tema="halloween"] .deco .d-bat2{top:30vh;width:60px;height:30px;animation-duration:27s;animation-delay:-9s} [data-tema="halloween"] .deco .d-bat3{top:12vh;width:48px;height:24px;animation-duration:31s;animation-delay:-18s} [data-tema="halloween"] .confeti i{opacity:.8;width:24px;height:24px;filter:none} [data-tema="halloween"] .tema-pill{background:linear-gradient(90deg,#ff7a1a,#9b4dff);color:#fff;border:1px solid rgba(255,255,255,.3);box-shadow:0 8px 24px rgba(255,122,26,.35)} [data-tema="halloween"] .hero h1,[data-tema="halloween"] .ph h1{background-image:linear-gradient(100deg,#ffffff 0%,#ffe2c4 35%,#ffae5c 65%,#ff7a1a 100%)} [data-tema="halloween"] .btn.p{background:linear-gradient(180deg,#ff9a3d,#ff7a1a 55%,#d9600a);color:#1a0b00;box-shadow:0 8px 22px rgba(255,122,26,.35)} [data-tema="halloween"] .hbtn.cart{background:#ff7a1a;border-color:#ff7a1a;color:#1a0b00} [data-tema="halloween"] .hdr{background:rgba(45,21,88,.66)} [data-tema="halloween"] .tools{background:rgba(45,21,88,.72)} [data-tema="halloween"] .tab.on::after{background:#ff7a1a;box-shadow:0 0 12px rgba(255,122,26,.9)} [data-tema="halloween"] .lainez-promo{background:rgba(45,21,88,.94);box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 50px rgba(255,122,26,.3)} [data-tema="halloween"] .lainez-promo .lp-badge{background:linear-gradient(90deg,#ff7a1a,#9b4dff)} @media(max-width:640px){ [data-tema="rosa"] .deco .d-lazo{width:34vw;right:-6vw;top:12vh;opacity:.4} [data-tema="rosa"] .deco .d-lazo2{display:none} [data-tema="halloween"] .deco .d-luna{width:28vw;right:-4vw;top:12vh} [data-tema="halloween"] .deco .d-calabaza{width:22vw;right:76px;opacity:.6} } /* píldora centrada en celular y en el catálogo (título centrado) */ .hero.container .tema-pill{margin-left:auto;margin-right:auto} @media(max-width:860px){.tema-pill{margin-left:auto !important;margin-right:auto !important}} @media (prefers-reduced-motion:reduce){.confeti{display:none !important}} /* ============ MES DE LA PATRIA: azul más vivo (2026-09-23, David lo veía apagado) ============ Más cerca del azul de la bandera (#0067C6). Sobrescribe el azul marino que traen las páginas. */ html[data-tema="patria"],[data-tema="patria"] body{background:#1f6fd0} [data-tema="patria"] .aura{background:linear-gradient(180deg,#5aa8f5 0%,#3d93ee 28%,#2d84e6 55%,#2477da 80%,#1f6fd0 100%)} [data-tema="patria"] .aura::before{background: radial-gradient(50% 38% at 72% 16%, rgba(200,232,255,.55), transparent 70%), radial-gradient(45% 40% at 8% 85%, rgba(170,215,255,.40), transparent 70%), radial-gradient(40% 30% at 50% 42%, rgba(255,255,255,.16), transparent 70%)} [data-tema="patria"] .aura path{stroke:rgba(255,255,255,.7)} [data-tema="patria"] .flag-svg{opacity:.3} [data-tema="patria"] .hdr{background:rgba(40,120,215,.6)} [data-tema="patria"] .tools{background:rgba(40,120,215,.66)} [data-tema="patria"] .topnav{background:rgba(0,30,80,.35)} [data-tema="patria"] .ft{background:rgba(0,30,80,.3)} [data-tema="patria"] .card{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.07));border-color:rgba(255,255,255,.2)} [data-tema="patria"] .hero h1,[data-tema="patria"] .ph h1{background-image:linear-gradient(100deg,#ffffff 0%,#ffffff 45%,#d6ebff 70%,#9fd0ff 100%)} [data-tema="patria"]{--dim:#c9dcf3;--muted:#dbe8f7} [data-tema="patria"] .hbtn.cart{background:#fff;border-color:#fff;color:#0a4a9a} [data-tema="patria"] .hbtn.cart .n{background:#0067c6;color:#fff} [data-tema="patria"] .lainez-promo{background:rgba(30,105,200,.93)} [data-tema="patria"] .card{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.1));border-color:rgba(255,255,255,.28)} [data-tema="patria"] h1,[data-tema="patria"] h2,[data-tema="patria"] h3,[data-tema="patria"] .name,[data-tema="patria"] .usd,[data-tema="patria"] .from b{text-shadow:0 1px 10px rgba(0,40,100,.28)} [data-tema="patria"] .hero h1,[data-tema="patria"] .ph h1{text-shadow:none;filter:drop-shadow(0 2px 12px rgba(0,40,110,.35))} [data-tema="patria"] .hero p,[data-tema="patria"] .lead,[data-tema="patria"] .sec-h p{color:#eef5ff} [data-tema="patria"]{--dim:#e1ecfa;--muted:#eef5ff} [data-tema="patria"] .live{background:#fff;color:#137a43;border-color:#fff;text-shadow:none} /* ============ MES DE LA PATRIA: símbolos patrios en el fondo del inicio (2026-09-23) ============ Escudo girando lento, sacuanjoches cayendo y un guardabarranco volando. Solo con el tema "patria". */ .sim-fondo{display:none} [data-tema="patria"] .sim-fondo{display:block;position:absolute;inset:0} .aura .sim-fondo svg{left:auto;top:auto;animation:none;opacity:1} .aura .sim-fondo .escudo{position:absolute;right:-5vw;top:6vh;width:min(44vw,500px);height:min(44vw,500px);opacity:.16;animation:girar 120s linear infinite} @keyframes girar{to{transform:rotate(360deg)}} .aura .sim-fondo .flor{position:absolute;top:-8%;opacity:.8;animation:florCae linear infinite;filter:drop-shadow(0 4px 8px rgba(0,40,100,.25))} @keyframes florCae{0%{transform:translate3d(0,-5vh,0) rotate(0)}100%{transform:translate3d(-8vw,112vh,0) rotate(420deg)}} .aura .sim-fondo .ave{position:absolute;top:22vh;left:-160px;width:130px;height:82px;opacity:.85;animation:volar 28s linear infinite;filter:drop-shadow(0 8px 12px rgba(0,40,100,.3))} @keyframes volar{0%{transform:translate3d(0,0,0)}25%{transform:translate3d(35vw,-4vh,0)}50%{transform:translate3d(70vw,3vh,0)}75%{transform:translate3d(105vw,-2vh,0)}100%{transform:translate3d(130vw,0,0)}} .aura .sim-fondo .ave svg{position:static;width:130px;height:82px;animation:aleteo .6s ease-in-out infinite alternate} @keyframes aleteo{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-4px) rotate(2deg)}} @media(max-width:640px){.aura .sim-fondo .escudo{width:70vw;height:70vw;right:-22vw;top:10vh;opacity:.12}.aura .sim-fondo .ave{width:96px}.aura .sim-fondo .ave svg{width:96px;height:60px}} @media (prefers-reduced-motion:reduce){.sim-fondo{display:none !important}} [data-tema="rosa"] .cookie{background:rgba(190,24,93,.94);border-color:rgba(255,255,255,.3)} [data-tema="rosa"] .cookie p{color:#fff} [data-tema="halloween"] .cookie{background:rgba(45,21,88,.95)} /* ============ PANELES (2026-09-23): vidrio blanco como antes, solo un poco menos transparente ============ */ :root{--vidrio1:rgba(255,255,255,.15);--vidrio2:rgba(255,255,255,.08)} [data-tema="patria"]{--vidrio1:rgba(255,255,255,.27);--vidrio2:rgba(255,255,255,.16)} [data-tema="rosa"]{--vidrio1:rgba(255,255,255,.32);--vidrio2:rgba(255,255,255,.2)} [data-tema="halloween"]{--vidrio1:rgba(255,255,255,.12);--vidrio2:rgba(255,255,255,.07)} .card,.vit,.cat,.step,.sv,.brc,.cmp,.ft-card,.price-box,.bn.white,.cta-band{ background:linear-gradient(180deg,var(--vidrio1),var(--vidrio2)) !important; backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} /* portada del tema (saludo más largo que el normal): titular un poco más chico */ [data-tema="patria"] #inicio.hero h1,[data-tema="rosa"] #inicio.hero h1,[data-tema="halloween"] #inicio.hero h1{font-size:clamp(2.3rem,5vw,4.3rem)} /* ============ CABECERA MEJORADA (2026-09-23) ============ Barra de enlaces: pastillas separadas y deslizables en celular (antes se cortaban a los lados). Botones: íconos SVG nítidos en vez de emojis; en celular el carrito es redondo con burbuja de cantidad. */ .topnav-links a{position:relative} @media(min-width:981px){ .topnav-links{gap:0 !important} .topnav-links a{padding:0 14px} .topnav-links a+a::before{content:"";position:absolute;left:0;top:50%;width:1px;height:12px;transform:translateY(-50%);background:rgba(255,255,255,.28)} } @media(max-width:980px){ .topnav-msg{display:none !important} .topnav{padding:0} .topnav-in{height:auto !important;justify-content:flex-start !important;overflow:visible !important;padding:0 !important;max-width:none} .topnav-links{width:100%;gap:8px !important;padding:8px 14px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch; -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent)} .topnav-links::-webkit-scrollbar{display:none} .topnav-links a{flex:none;padding:6px 13px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);font-size:.78rem;font-weight:600;opacity:1 !important;color:#fff} .topnav-links a:last-child{margin-right:20px} } .search .ic{width:18px;height:18px;flex:none;opacity:.75} .hbtn .ic{width:19px;height:19px;flex:none} .ic{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .hbtn{gap:8px} .hbtn .n2:empty{display:none} .hbtn .n2{background:#ff4d7d;color:#fff;border-radius:999px;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;padding:0 6px} @media(max-width:640px){ .hbtn{width:40px;height:40px !important;padding:0 !important;border-radius:50% !important;justify-content:center;position:relative;flex:none} .hbtn .t{display:none} .hbtn.cart .n,.hbtn .n2{position:absolute;top:-5px;right:-6px;min-width:19px;height:19px;font-size:.66rem;padding:0 5px;border:2px solid rgba(10,30,60,.9);box-sizing:border-box} .hbtn.cart .n{background:#ff4d7d !important;color:#fff !important} } .logo{flex:none} .logo img{flex:none;width:34px !important;height:34px !important;object-fit:cover} .search{min-width:0} @media(max-width:640px){.hdr-in{gap:8px !important}.logo img{width:32px !important;height:32px !important}} /* pantallas medianas: el mensaje de envíos no cabe junto a todos los enlaces → se oculta y los enlaces van centrados */ /* el mensaje de envíos nunca cabía completo junto a los 9 enlaces (salía cortado con "…"): se oculta siempre; ya está en la portada */ .topnav-msg{display:none !important} @media(min-width:981px){.topnav-in{justify-content:center !important}} .topnav-links a{white-space:nowrap}