/* =========================================================
LatinAd · Presentaciones comerciales — sistema de diseño
Stage fijo 1920x1080 escalado a la ventana (igual que OOH Summit 2026).
Componentes documentados en docs/COMPONENTES.md
========================================================= */
:root {
--grad-text: linear-gradient(100deg, #8fc1ea 0%, #29ebff 32%, #1488ea 68%, #1f6bff 100%);
--navy-950: #030624;
--navy-900: #060b36;
--navy-800: #0a1255;
--navy-700: #111c7a;
--royal: #1f2fe0;
--blue: #2f63ff;
--latinad: #2196f3;
--sky: #5fb8ff;
--cyan: #7fe3ff;
--violet: #6b4dff;
--lilac: #b69cff;
--white: #ffffff;
--ink-2: rgba(226, 234, 255, .78);
--ink-3: rgba(200, 214, 255, .5);
--line: rgba(140, 170, 255, .18);
--line-2: rgba(140, 170, 255, .32);
--glass: rgba(20, 34, 120, .38);
--danger: #ff5b73;
--warn: #ffcc66;
--ok: #40e0a0;
--accent: var(--cyan);
--accent-2: var(--latinad);
--f-display: 'Montserrat', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
--f-body: 'Poppins', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
--f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
--ease: cubic-bezier(.2, .8, .2, 1);
--ease-io: cubic-bezier(.65, 0, .35, 1);
--ease-back: cubic-bezier(.34, 1.56, .64, 1);
}
body[data-theme="violet"] { --accent: #b69cff; --accent-2: #6b4dff; }
body[data-theme="green"] { --accent: #6ff5c2; --accent-2: #19c48a; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
background: var(--navy-950);
color: var(--white);
font-family: var(--f-body);
overflow: hidden;
-webkit-font-smoothing: antialiased;
cursor: default;
}
body.idle { cursor: none; }
img, video { display: block; }
a { color: inherit; }
/* ---------- Stage ---------- */
#stage {
/* fixed: el lienzo de 1920 px sin escalar no cuenta para el ancho de la página. Con absolute, el navegador
del celular agrandaba la página a ~975 px para que entrara, y todo (3D incluido) se dibujaba en resolución de escritorio. */
position: fixed;
width: 1920px; height: 1080px;
left: 50%; top: 50%;
transform-origin: 0 0;
overflow: hidden;
background: var(--navy-900);
isolation: isolate;
}
/* ---------- Fondo global ---------- */
.bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bg-base {
background:
radial-gradient(1200px 800px at 78% 30%, rgba(47, 99, 255, .55), transparent 60%),
radial-gradient(900px 700px at 12% 85%, rgba(107, 77, 255, .35), transparent 60%),
radial-gradient(1400px 900px at 50% 120%, rgba(31, 47, 224, .6), transparent 60%),
linear-gradient(160deg, #0b1566 0%, #070d45 45%, #040831 100%);
transition: filter 1.2s var(--ease);
}
.bg-streaks { overflow: hidden; }
.bg-streaks i {
position: absolute; width: 2600px; height: 180px; left: -300px;
background: linear-gradient(90deg, transparent, rgba(120, 150, 255, .22) 40%, rgba(170, 140, 255, .28) 55%, transparent);
filter: blur(38px); transform: rotate(-24deg);
animation: streak 16s var(--ease-io) infinite alternate; mix-blend-mode: screen;
}
.bg-streaks i:nth-child(1) { top: 60px; }
.bg-streaks i:nth-child(2) { top: 300px; height: 90px; animation-duration: 21s; animation-delay: -6s; opacity: .7; }
.bg-streaks i:nth-child(3) { top: 520px; height: 260px; animation-duration: 25s; animation-delay: -12s; opacity: .45; }
@keyframes streak {
0% { transform: rotate(-24deg) translateX(-140px); opacity: .25; }
100% { transform: rotate(-22deg) translateX(160px); opacity: .9; }
}
.bg-grid {
background-image:
linear-gradient(rgba(130, 160, 255, .07) 1px, transparent 1px),
linear-gradient(90deg, rgba(130, 160, 255, .07) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: radial-gradient(900px 600px at 50% 50%, #000 0%, transparent 75%);
-webkit-mask-image: radial-gradient(900px 600px at 50% 50%, #000 0%, transparent 75%);
animation: gridDrift 40s linear infinite;
}
@keyframes gridDrift { to { background-position: 80px 80px, 80px 80px; } }
#particles { position: absolute; inset: 0; width: 1920px; height: 1080px; }
.bg-grain {
opacity: .09; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
.bg-vignette { background: radial-gradient(1400px 900px at 50% 50%, transparent 55%, rgba(2, 4, 26, .75) 100%); }
/* Celulares y tablets: fondo liviano. En WebKit (Safari y Chrome de iPhone) las capas animadas, con máscara, blur o
mix-blend-mode dentro del stage escalado se dibujan a 1920×1080 × la densidad de pantalla, sin importar la escala:
el fondo completo sumaba ~600 MB de memoria gráfica y el navegador cerraba la página. Aquí la viñeta va dentro del
fondo base, la grilla queda fija y sin máscara, y se quitan las franjas desenfocadas y el grano. */
@media (pointer: coarse), (max-width: 900px) {
.bg-streaks, .bg-grain, .bg-vignette { display: none; }
.slide { filter: none; } /* transición sin blur: cada slide desenfocada pedía otro búfer de pantalla completa */
.bg-grid { animation: none; -webkit-mask-image: none; mask-image: none; opacity: .6; }
.bg-base {
background:
radial-gradient(1400px 900px at 50% 50%, transparent 55%, rgba(2, 4, 26, .75) 100%),
radial-gradient(1200px 800px at 78% 30%, rgba(47, 99, 255, .55), transparent 60%),
radial-gradient(900px 700px at 12% 85%, rgba(107, 77, 255, .35), transparent 60%),
radial-gradient(1400px 900px at 50% 120%, rgba(31, 47, 224, .6), transparent 60%),
linear-gradient(160deg, #0b1566 0%, #070d45 45%, #040831 100%);
}
}
/* Foto de fondo por slide: 