/* Película analógica: textura ligera, sin interceptar clics ni cubrir diálogos. */
body::before,
body::after {
 content: "";
 position: fixed;
 pointer-events: none;
 z-index: 20;
}
body::before {
 inset: -24px;
 opacity: .16;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23grain)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
 background-repeat: repeat;
 animation: film-grain 1.2s steps(1,end) infinite;
}
body::after {
 inset: 0;
 background: repeating-linear-gradient(to bottom, transparent 0px, transparent 3px, rgba(0,0,0,.16) 3px, rgba(0,0,0,.16) 4px), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.18) 100%);
}
@keyframes film-grain {
 0%,100% { transform: translate(0,0); }
 25% { transform: translate(-7px,5px); }
 50% { transform: translate(6px,-8px); }
 75% { transform: translate(-4px,-3px); }
}
@media (prefers-reduced-motion: reduce) {
 body::before { animation: none; }
}
@media (max-width: 650px) {
 body::before { opacity: .12; }
 body::after { background: repeating-linear-gradient(to bottom, transparent 0px, transparent 3px, rgba(0,0,0,.10) 3px, rgba(0,0,0,.10) 4px), radial-gradient(ellipse at center, transparent 65%, rgba(0,0,0,.12) 100%); }
}
@media print {
 body::before,body::after { display: none; }
}

/* Barrido de tracking: distorsión óptica localizada, sin mover el contenido. */
.tv-tracking {
 position: fixed;
 top: -150px;
 left: 0;
 width: 100%;
 height: 190px;
 z-index: 21;
 pointer-events: none;
 contain: layout paint;
 opacity: 0;
 backdrop-filter: blur(1.2px) contrast(1.35) saturate(1.4);
 -webkit-backdrop-filter: blur(1.2px) contrast(1.35) saturate(1.4);
 background:
  linear-gradient(to bottom, transparent, rgba(180,220,210,.12) 20%, rgba(220,240,230,.30) 43%, rgba(220,240,230,.38) 48%, rgba(0,0,0,.58) 51%, rgba(0,0,0,.35) 67%, transparent 100%),
  repeating-linear-gradient(to bottom, transparent 0 5px, rgba(220,240,235,.08) 5px 6px, transparent 6px 9px);
 animation: tv-sweep 6s linear infinite;
}
.tv-tracking::after {
 content: "";
 position: absolute;
 inset: 40% 0 auto;
 height: 24px;
 border-top: 1px solid rgba(255,100,130,.25);
 border-bottom: 1px solid rgba(90,225,220,.22);
 background: repeating-linear-gradient(90deg, transparent 0 17%, rgba(220,240,235,.10) 18% 24%, transparent 25% 43%);
 animation: tv-interference .45s steps(2,end) infinite;
}
@keyframes tv-sweep {
 0% { top: -190px; opacity: .9; }
 48% { top: 43vh; opacity: .9; }
 50% { top: 41vh; opacity: .9; }
 53% { top: 49vh; opacity: .9; }
 100% { top: 100vh; opacity: .9; }
}@keyframes tv-interference {
 0%,100% { transform: translateX(-4px); opacity: .5; }
 50% { transform: translateX(5px); opacity: 1; }
}
@media (max-width:650px) {
 .tv-tracking { height: 130px; }
}
@media (prefers-reduced-motion:reduce), print {
 .tv-tracking { display: none; animation: none; }
 .tv-tracking::after { animation: none; }
}

/* Tracking inclinado con deformación real del fondo y separación RGB. */
.tv-tracking {
 left: -5%;
 width: 110%;
 height: 150px;
 transform: skewY(-3deg);
 backdrop-filter: url("#tv-warp");
 -webkit-backdrop-filter: url("#tv-warp");
 background:
  repeating-linear-gradient(0deg, rgba(220,240,235,.22) 0 2px, rgba(0,0,0,.26) 2px 5px, transparent 5px 9px),
  linear-gradient(0deg, transparent, rgba(220,240,235,.12) 45%, rgba(0,0,0,.25) 55%, transparent);
 border-top: 3px solid rgba(200,240,225,.32);
 border-bottom: 5px solid rgba(0,0,0,.45);
}
.tv-tracking::after {
 height: 25px;
 background: repeating-linear-gradient(0deg, rgba(180,255,240,.24) 0 2px, rgba(0,0,0,.35) 2px 6px);
}
@media(max-width:650px) { .tv-tracking { height:100px; } }

/* Interferencia difuminada: la deformación se concentra en el centro. */
.tv-tracking {
 height: 145px;
 border: 0;
 transform: skewY(-1.5deg);
 mask-image: linear-gradient(to bottom, transparent, #000 32%, #000 62%, transparent);
 -webkit-mask-image: linear-gradient(to bottom, transparent, #000 32%, #000 62%, transparent);
 background:
  repeating-linear-gradient(0deg, transparent 0 7px, rgba(210,235,228,.09) 7px 8px, transparent 8px 12px),
  linear-gradient(0deg, transparent 25%, rgba(0,0,0,.12) 48%, rgba(220,240,230,.08) 52%, transparent 75%);
}
.tv-tracking::after {
 inset: 12% 0;
 height: auto;
 border: 0;
 background: linear-gradient(to bottom,
  transparent 0 9%, rgba(190,235,225,.20) 9% 10%, transparent 10% 23%,
  rgba(0,0,0,.22) 23% 25%, transparent 25% 49%,
  rgba(200,240,230,.23) 49% 50%, transparent 50% 74%,
  rgba(180,230,225,.15) 74% 75%, transparent 75% 90%,
  rgba(0,0,0,.20) 90% 92%, transparent 92%);
}
@media(max-width:650px) { .tv-tracking { height:110px; } }

/* Líneas satélite que acompañan el barrido lento. */
.tv-tracking {
 height: 260px;
 animation-duration: 14s;
}
.tv-tracking::after {
 inset: 5% 0;
 background: repeating-linear-gradient(to bottom,
  transparent 0 13px, rgba(190,235,225,.20) 13px 14px,
  transparent 14px 24px, rgba(0,0,0,.24) 24px 26px,
  transparent 26px 39px, rgba(210,240,235,.12) 39px 40px);
}
.tv-sound {
 position: fixed; right: 16px; bottom: 16px; z-index: 22;
 padding: 8px 12px; font-size: 12px; background: #171319ed;
 border: 1px solid #68404d; border-radius: 6px;
}
@media(max-width:650px) { .tv-tracking { height:190px; } }

/* Franjas de señal anchas, consecutivas y de grosor irregular. */
.tv-tracking {
 height: 340px;
 background: linear-gradient(to bottom,
  transparent 0 7%,
  rgba(160,210,200,.09) 7% 18%,
  rgba(0,0,0,.19) 18% 30%,
  rgba(190,220,215,.13) 30% 39%,
  rgba(0,0,0,.23) 39% 55%,
  rgba(165,195,205,.10) 55% 67%,
  rgba(0,0,0,.16) 67% 81%,
  rgba(195,225,215,.08) 81% 92%,
  transparent 92%);
 mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
 -webkit-mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
}
.tv-tracking::after {
 inset: 0;
 background: linear-gradient(to bottom,
  transparent 0 18%,
  rgba(110,190,190,.09) 18% 22%,
  transparent 22% 39%,
  rgba(190,95,115,.08) 39% 44%,
  transparent 44% 67%,
  rgba(140,190,175,.10) 67% 72%,
  transparent 72%);
 animation: none;
 opacity: .7;
}
@media(max-width:650px) { .tv-tracking { height:250px; } }

/* Franja principal sobre las bandas secundarias. */
.tv-tracking {
 background: linear-gradient(to bottom,
  transparent 0 7%, rgba(160,210,200,.16) 7% 18%,
  rgba(0,0,0,.32) 18% 30%, rgba(190,220,215,.22) 30% 39%,
  rgba(0,0,0,.36) 39% 55%, rgba(165,195,205,.18) 55% 67%,
  rgba(0,0,0,.28) 67% 81%, rgba(195,225,215,.14) 81% 92%, transparent 92%);
}
.tv-tracking::before {
 content: ""; position:absolute; inset:35% 0 auto; height:70px;
 background: linear-gradient(to bottom, transparent, rgba(200,200,205,.23) 35%, rgba(0,0,0,.38) 52%, transparent),
 repeating-linear-gradient(to bottom, transparent 0 7px, rgba(195,195,200,.15) 7px 9px, transparent 9px 13px);
}
.tv-effects {
 position:fixed;right:16px;bottom:60px;z-index:22;padding:8px 12px;
 font-size:12px;background:#171319ed;border:1px solid #68404d;border-radius:6px;
}
html.effects-off body::before,html.effects-off body::after,
html.effects-off .tv-tracking { display:none!important;animation:none!important; }
html.effects-off .promo-slide,html.effects-off .promo-art,
html.effects-off .product img { transition:none!important;transform:none!important; }

/* Solo la banda principal deforma; las secundarias son franjas de luminosidad. */
.tv-tracking { height:90px; background:linear-gradient(transparent,rgba(195,195,200,.12),rgba(0,0,0,.20),transparent); }
.tv-tracking::before { inset:20% 0; height:auto; }
.tv-tracking::after { display:none; }
.tv-secondary {
 position:fixed;left:-5%;width:110%;top:-190px;height:110px;
 z-index:20;pointer-events:none;transform:skewY(-1.5deg);
 background:rgba(0,0,0,.28);
 box-shadow:0 340px 0 15px rgba(185,185,190,.12),0 700px 0 5px rgba(0,0,0,.30);
 animation:tv-sweep 24s linear infinite;
 animation-delay:-12s;
}
.tv-effects { bottom:16px; }
html.effects-off .tv-secondary { display:none!important; }
@media(prefers-reduced-motion:reduce),print { .tv-secondary {display:none;animation:none;} }

.tv-effects{color:#f6efed;cursor:pointer;font-family:inherit;}

/* Modo ligero: sin filtros sobre el contenido ni ruido animado. */
body::before {animation:none;}
.tv-tracking {
 top:0;backdrop-filter:none;-webkit-backdrop-filter:none;
 animation:light-tracking 18s linear infinite;contain:strict;
}
.tv-secondary {top:0;animation:light-secondary 28s linear infinite;}
@keyframes light-tracking {
 from {transform:translateY(-360px) skewY(-1.5deg);}
 to {transform:translateY(calc(100vh + 360px)) skewY(-1.5deg);}
}
@keyframes light-secondary {
 from {transform:translateY(-900px) skewY(-1.5deg);}
 to {transform:translateY(calc(100vh + 150px)) skewY(-1.5deg);}
}
html.effects-paused .tv-tracking,html.effects-paused .tv-secondary {animation-play-state:paused;}
@media(prefers-reduced-motion:reduce){.tv-tracking,.tv-secondary{display:none;animation:none;}}

button.tv-effects{left:16px;right:auto;bottom:16px;display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 12px;color:#d7cbd0;background:#19161bed;border:1px solid #60414b;border-radius:24px}
body:has(#floating-cart:not([hidden])) button.tv-effects{bottom:100px}
button.tv-effects svg{width:22px;height:22px;fill:none;stroke:currentColor}
.fx-switch{display:block;width:30px;height:17px;background:#625b61;border-radius:12px;padding:3px;box-sizing:border-box}
.fx-switch::after{content:"";display:block;width:11px;height:11px;border-radius:50%;background:#fff}
[aria-checked=true] .fx-switch{background:#ac394f}
[aria-checked=true] .fx-switch::after{transform:translateX(13px)}
@media(max-width:650px){body:has(#floating-cart:not([hidden])) button.tv-effects{bottom:150px}}
footer.global-footer{display:flex;align-items:center;gap:18px;max-width:none;width:100%;margin:45px 0 0;padding:28px max(24px,calc((100% - 1200px)/2)) 90px;background:#141215;border-top:1px solid #493039;box-sizing:border-box;font:12px/1.6 Barlow,Arial,sans-serif;color:#c5b9bd}
.global-footer .footer-logo{flex-shrink:0}
.global-footer .footer-logo img{width:48px;height:48px;object-fit:contain}
.global-footer p{font:11px/1.6 Barlow,Arial,sans-serif;margin:6px 0;color:#9e9398}
.global-footer .design-credit{margin-left:auto;white-space:nowrap}
@media(max-width:700px){footer.global-footer{flex-wrap:wrap;padding:24px 20px 170px}.global-footer>div{flex:1;min-width:200px}.global-footer .design-credit{margin-left:66px}}
.shop-support{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 30px 45px}
.shop-support article{padding:25px;background:#1a151b;border:1px solid #493039;border-radius:7px}
.shop-support .support-wide{grid-column:1/-1}
.shop-support h2{font-size:22px;margin:0 0 12px;color:#ee9aa7}
.shop-support p{font-size:14px;color:#c9bcc2;line-height:1.7}
.shop-support a{display:inline-block;padding:10px 16px;background:#59303e;border-radius:5px;font-size:13px;color:#fff}
.shop-support .support-wide a{background:#334964}
@media(max-width:650px){.shop-support{grid-template-columns:1fr;margin:0 18px 30px}}

/* Pie compacto; reserva para controles flotantes fuera de la barra. */
footer.global-footer{padding-top:18px;padding-bottom:18px;gap:14px;margin-top:30px}
.global-footer .footer-logo img{width:40px;height:40px}
body:has(.global-footer){padding-bottom:100px}
@media(max-width:700px){footer.global-footer{padding:18px 20px}.global-footer .design-credit{margin-left:54px}body:has(.global-footer){padding-bottom:160px}}