/* ============================================================ Tema «disco» · Inolvidia — demo cumple-40-disco («Fiesta Disco 70s», Santa Cruz de la Sierra) Póster retro de los 70: papel crema, tinta café y franjas naranja-mostaza-rosa, con secciones «pista» en morado noche donde brillan la bola de espejos y sus reflejos. Tipos: Monoton (letrero de neón, solo grande) + Righteous (títulos) + DM Sans (texto). Todo acotado bajo html[data-theme="disco"] y solo con clases públicas del motor. Las secciones «pista» (countdown, playlist y pie) redefinen las variables del contrato en su propio ámbito para invertir el esquema de color sin tocar el motor. ============================================================ */ :root { /* — contrato §5 — */ --bg: #FFF1D6; --bg-alt: #FAE3BD; --surface: #FFF8EA; --ink: #3B1E10; --ink-soft: #6D3B1E; --accent: #A8440F; --accent-2: #E1B12C; --accent-ink: #FFF1D6; --line: rgba(59, 30, 16, .16); --font-display: 'Righteous', 'DM Sans', system-ui, sans-serif; --font-script: 'Monoton', 'Righteous', system-ui, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --radius: 22px; --shadow: 0 18px 34px -20px rgba(59, 30, 16, .5); --hero-overlay: linear-gradient(180deg, rgba(42, 16, 54, .4) 0%, rgba(42, 16, 54, .06) 24%, rgba(42, 16, 54, .5) 46%, rgba(42, 16, 54, .8) 68%, rgba(42, 16, 54, .95) 100%); --hero-ink: #FFF1D6; --intro-bg: #2A1036; --intro-ink: #FFF1D6; --seal: #E86A92; /* destellos y teselas de espejo sueltas */ --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cpath d='M46,46.5c0,5.25 2.1,7.5 6.45,7.5c-4.35,0 -6.45,2.25 -6.45,7.5c0,-5.25 -2.1,-7.5 -6.45,-7.5c4.35,0 6.45,-2.25 6.45,-7.5z' fill='%23E1B12C' fill-opacity='0.55'/%3E%3Cpath d='M214,145c0,3.5 1.4,5 4.3,5c-2.9,0 -4.3,1.5 -4.3,5c0,-3.5 -1.4,-5 -4.3,-5c2.9,0 4.3,-1.5 4.3,-5z' fill='%23E86A92' fill-opacity='0.5'/%3E%3Cpath d='M120,252c0,4.2 1.68,6 5.16,6c-3.48,0 -5.16,1.8 -5.16,6c0,-4.2 -1.68,-6 -5.16,-6c3.48,0 5.16,-1.8 5.16,-6z' fill='%23F28C28' fill-opacity='0.5'/%3E%3Cpath d='M262,35.8c0,2.94 1.18,4.2 3.61,4.2c-2.44,0 -3.61,1.26 -3.61,4.2c0,-2.94 -1.18,-4.2 -3.61,-4.2c2.44,0 3.61,-1.26 3.61,-4.2z' fill='%23FFF1D6' fill-opacity='0.55'/%3E%3Cpath d='M80,172.4c0,2.52 1.01,3.6 3.1,3.6c-2.09,0 -3.1,1.08 -3.1,3.6c0,-2.52 -1.01,-3.6 -3.1,-3.6c2.09,0 3.1,-1.08 3.1,-3.6z' fill='%23E1B12C' fill-opacity='0.5'/%3E%3Cpath d='M168,89c0,2.1 0.84,3 2.58,3c-1.74,0 -2.58,0.9 -2.58,3c0,-2.1 -0.84,-3 -2.58,-3c1.74,0 2.58,-0.9 2.58,-3z' fill='%23FFF1D6' fill-opacity='0.6'/%3E%3Cpath d='M282,242.8c0,2.24 0.9,3.2 2.75,3.2c-1.86,0 -2.75,0.96 -2.75,3.2c0,-2.24 -0.9,-3.2 -2.75,-3.2c1.86,0 2.75,-0.96 2.75,-3.2z' fill='%23E1B12C' fill-opacity='0.45'/%3E%3Crect x='97' y='19' width='6' height='6' transform='rotate(45 100 22)' fill='%23FFF1D6' fill-opacity='0.45'/%3E%3Crect x='289.6' y='115.6' width='4.8' height='4.8' transform='rotate(45 292 118)' fill='%23E86A92' fill-opacity='0.5'/%3E%3Crect x='21' y='229' width='6' height='6' transform='rotate(45 24 232)' fill='%23F28C28' fill-opacity='0.45'/%3E%3Crect x='151.8' y='201.8' width='4.4' height='4.4' transform='rotate(45 154 204)' fill='%23FFF1D6' fill-opacity='0.5'/%3E%3Crect x='235.4' y='269.4' width='5.2' height='5.2' transform='rotate(45 238 272)' fill='%23E1B12C' fill-opacity='0.45'/%3E%3Crect x='60' y='116' width='4' height='4' transform='rotate(45 62 118)' fill='%23FFF1D6' fill-opacity='0.5'/%3E%3Crect x='194' y='284' width='4' height='4' transform='rotate(45 196 286)' fill='%23E86A92' fill-opacity='0.4'/%3E%3Crect x='241.8' y='81.8' width='4.4' height='4.4' transform='rotate(45 244 84)' fill='%23FFF1D6' fill-opacity='0.4'/%3E%3C/svg%3E"); /* onda «groovy» de cuatro franjas */ --ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 56'%3E%3Cpath d='M8 18c28 0 28 -12 56 -12s28 12 56 12 28 -12 56 -12 28 12 56 12 28 -12 40 -12' fill='none' stroke='%236D3B1E' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M8 24.4c28 0 28 -12 56 -12s28 12 56 12 28 -12 56 -12 28 12 56 12 28 -12 40 -12' fill='none' stroke='%23F28C28' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M8 30.8c28 0 28 -12 56 -12s28 12 56 12 28 -12 56 -12 28 12 56 12 28 -12 40 -12' fill='none' stroke='%23E1B12C' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M8 37.2c28 0 28 -12 56 -12s28 12 56 12 28 -12 56 -12 28 12 56 12 28 -12 40 -12' fill='none' stroke='%23E86A92' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E"); /* — internas del tema — */ --dc-orange: #F28C28; --dc-mustard: #E1B12C; --dc-brown: #6D3B1E; --dc-cream: #FFF1D6; --dc-pink: #E86A92; --dc-night: #2A1036; --dc-night-2: #3B1B4B; --dc-stripes: linear-gradient(180deg, var(--dc-brown) 0 25%, var(--dc-orange) 25% 50%, var(--dc-mustard) 50% 75%, var(--dc-pink) 75% 100%); --dc-stripes-v: linear-gradient(90deg, var(--dc-brown) 0 25%, var(--dc-orange) 25% 50%, var(--dc-mustard) 50% 75%, var(--dc-pink) 75% 100%); --dc-ball: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 150'%3E%3Cpath d='M60 0v28' stroke='%238E84A6' stroke-width='1.6'/%3E%3Crect x='53' y='27' width='14' height='8' rx='2' fill='%236F6488'/%3E%3Cdefs%3E%3CclipPath id='b'%3E%3Ccircle cx='60' cy='90' r='56'/%3E%3C/clipPath%3E%3CradialGradient id='g' cx='.3' cy='.28' r='.9'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.5'/%3E%3Cstop offset='.35' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.75' stop-color='%231B0A24' stop-opacity='.25'/%3E%3Cstop offset='1' stop-color='%231B0A24' stop-opacity='.7'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='60' cy='90' r='56' fill='%23241A34'/%3E%3Cg clip-path='url(%23b)'%3E%3Cpath fill='%23F3EEF8' d='M39.4 34.5h0.7v7.3h-0.7zM45.6 34.5h5.9v7.3h-5.9zM60.5 34.5h7.1v7.3h-7.1zM40.6 42.7h6.6v7.3h-6.6zM48 42.7h7.3v7.3h-7.3zM72.9 42.7h6.6v7.3h-6.6zM56.5 50.9h7.1v7.3h-7.1zM21.9 59.1h4.6v7.3h-4.6zM13.5 67.3h3.4v7.3h-3.4zM6.1 75.5h0.9v7.3h-0.9zM11 75.5h3.2v7.3h-3.2zM15.1 75.5h4.2v7.3h-4.2zM25.6 83.7h6v7.3h-6zM25.7 91.9h6v7.3h-6zM72.9 91.9h7.1v7.3h-7.1z'/%3E%3Cpath fill='%23F7B26A' d='M41 34.5h3.7v7.3h-3.7zM68.5 34.5h5.9v7.3h-5.9zM8.5 67.3h1v7.3h-1zM68.7 67.3h7.1v7.3h-7.1zM109.9 75.5h2.1v7.3h-2.1zM32.6 91.9h6.6v7.3h-6.6zM9.5 108.3h1v7.3h-1zM18.8 108.3h4.4v7.3h-4.4zM30.2 108.3h6v7.3h-6zM52.4 132.9h7.2v7.3h-7.2zM68.5 132.9h6.6v7.3h-6.6z'/%3E%3Cpath fill='%23FFE7B8' d='M52.4 34.5h7.1v7.3h-7.1zM79.9 34.5h0.7v7.3h-0.7zM20.1 50.9h2.7v7.3h-2.7zM80.5 75.5h6.5v7.3h-6.5zM26.6 100.1h5.8v7.3h-5.8zM87.5 132.9h2.2v7.3h-2.2z'/%3E%3Cpath fill='%239C90B6' d='M75.3 34.5h3.7v7.3h-3.7zM56.2 42.7h7.5v7.3h-7.5zM64.7 42.7h7.3v7.3h-7.3zM86.7 42.7h3.9v7.3h-3.9zM97.3 50.9h2.7v7.3h-2.7zM100.8 50.9h1.3v7.3h-1.3zM17.4 59.1h3.5v7.3h-3.5zM56.4 59.1h7.2v7.3h-7.2zM87.2 59.1h5.5v7.3h-5.5zM99 59.1h3.5v7.3h-3.5zM103.5 59.1h2.3v7.3h-2.3zM106.7 59.1h1.1v7.3h-1.1zM60.5 67.3h7.3v7.3h-7.3zM76.7 67.3h6.7v7.3h-6.7zM84.3 67.3h6.1v7.3h-6.1zM110.5 67.3h1v7.3h-1zM26.2 75.5h5.9v7.3h-5.9zM48.2 75.5h7.2v7.3h-7.2zM87.9 75.5h5.9v7.3h-5.9zM7 83.7h2.2v7.3h-2.2zM32.5 83.7h6.6v7.3h-6.6zM48 83.7h7.4v7.3h-7.4zM48 91.9h7.3v7.3h-7.3zM95.2 91.9h5.2v7.3h-5.2zM11.5 100.1h3.2v7.3h-3.2zM33.3 100.1h6.4v7.3h-6.4zM40.6 100.1h6.9v7.3h-6.9zM87.6 100.1h5.8v7.3h-5.8zM24 108.3h5.2v7.3h-5.2zM83.8 108.3h6v7.3h-6zM24.3 116.5h4.9v7.3h-4.9zM31.6 124.7h5.3v7.3h-5.3zM37.8 124.7h6.2v7.3h-6.2zM44.8 124.7h6.8v7.3h-6.8zM76.1 124.7h6.2v7.3h-6.2z'/%3E%3Cpath fill='%23DCD4E8' d='M26.4 42.7h2.1v7.3h-2.1zM34.2 42.7h5.4v7.3h-5.4zM23.6 50.9h3.9v7.3h-3.9zM34.3 50.9h5.9v7.3h-5.9zM41.1 50.9h6.6v7.3h-6.6zM40.8 59.1h6.7v7.3h-6.7zM36.6 67.3h6.7v7.3h-6.7zM44.2 67.3h7.1v7.3h-7.1zM56.3 75.5h7.3v7.3h-7.3zM64.6 75.5h7.2v7.3h-7.2zM10.1 83.7h3.3v7.3h-3.3zM19.4 83.7h5.2v7.3h-5.2zM72.9 83.7h7.1v7.3h-7.1zM5.3 91.9h1v7.3h-1zM15.6 100.1h4.2v7.3h-4.2zM20.6 100.1h5v7.3h-5zM11.4 108.3h2.2v7.3h-2.2zM13.9 116.5h1.2v7.3h-1.2zM16.1 116.5h2.6v7.3h-2.6zM76.6 116.5h6.6v7.3h-6.6z'/%3E%3Cpath fill='%23FFFFFF' d='M29.4 42.7h3.9v7.3h-3.9zM17.9 50.9h1.3v7.3h-1.3zM14.2 59.1h2.3v7.3h-2.3zM33.7 59.1h6.2v7.3h-6.2zM23.2 67.3h5.4v7.3h-5.4zM40 83.7h7.1v7.3h-7.1z'/%3E%3Cpath fill='%23BFB4D2' d='M80.3 42.7h5.4v7.3h-5.4zM91.5 42.7h2.1v7.3h-2.1zM28.4 50.9h5v7.3h-5zM48.6 50.9h7v7.3h-7zM72.3 50.9h6.6v7.3h-6.6zM79.8 50.9h5.9v7.3h-5.9zM86.6 50.9h5v7.3h-5zM27.3 59.1h5.5v7.3h-5.5zM64.5 59.1h7.1v7.3h-7.1zM10.4 67.3h2.3v7.3h-2.3zM52.2 67.3h7.3v7.3h-7.3zM91.4 67.3h5.4v7.3h-5.4zM8 75.5h2.1v7.3h-2.1zM20.2 75.5h5.1v7.3h-5.1zM33 75.5h6.5v7.3h-6.5zM105.8 75.5h3.2v7.3h-3.2zM7.2 91.9h2.1v7.3h-2.1zM14.4 91.9h4.3v7.3h-4.3zM19.6 91.9h5.2v7.3h-5.2zM40.1 91.9h7.1v7.3h-7.1zM80.8 91.9h6.6v7.3h-6.6zM110.7 91.9h2.1v7.3h-2.1zM8.6 100.1h2.1v7.3h-2.1zM48.4 100.1h7.1v7.3h-7.1zM56.4 100.1h7.2v7.3h-7.2zM37.1 108.3h6.6v7.3h-6.6z'/%3E%3Cpath fill='%23F29BB8' d='M64.4 50.9h7v7.3h-7zM64.5 100.1h7.1v7.3h-7.1zM80.3 100.1h6.4v7.3h-6.4zM52.2 116.5h7.3v7.3h-7.3zM96.6 116.5h3.8v7.3h-3.8z'/%3E%3Cpath fill='%235C5178' d='M92.5 50.9h3.9v7.3h-3.9zM93.6 59.1h4.6v7.3h-4.6zM97.7 67.3h4.5v7.3h-4.5zM72.7 75.5h6.9v7.3h-6.9zM80.9 83.7h6.6v7.3h-6.6zM95.3 83.7h5.2v7.3h-5.2zM109.4 100.1h2.1v7.3h-2.1zM60.5 108.3h7.2v7.3h-7.2zM76.4 108.3h6.6v7.3h-6.6zM96.9 108.3h4.4v7.3h-4.4zM68.7 116.5h7.1v7.3h-7.1zM84.1 116.5h5.8v7.3h-5.8zM104.8 116.5h1.2v7.3h-1.2zM83.1 124.7h5.3v7.3h-5.3zM38.4 132.9h5.6v7.3h-5.6zM44.8 132.9h6.6v7.3h-6.6zM48.5 141.1h1.4v7.3h-1.4z'/%3E%3Cpath fill='%23F6D56E' d='M12.2 59.1h1.1v7.3h-1.1zM48.4 59.1h7.1v7.3h-7.1zM17.9 67.3h4.5v7.3h-4.5zM29.5 67.3h6.1v7.3h-6.1zM14.2 83.7h4.3v7.3h-4.3zM64.6 83.7h7.4v7.3h-7.4zM94.3 100.1h5v7.3h-5zM105.3 100.1h3.2v7.3h-3.2zM68.5 108.3h7v7.3h-7zM33.4 132.9h4.1v7.3h-4.1z'/%3E%3Cpath fill='%237B6F98' d='M72.5 59.1h6.7v7.3h-6.7zM80.1 59.1h6.2v7.3h-6.2zM40.4 75.5h6.9v7.3h-6.9zM94.7 75.5h5.1v7.3h-5.1zM5.1 83.7h1v7.3h-1zM88.4 83.7h6v7.3h-6zM101.5 83.7h4.3v7.3h-4.3zM110.8 83.7h2.2v7.3h-2.2zM10.2 91.9h3.3v7.3h-3.3zM64.6 91.9h7.3v7.3h-7.3zM88.3 91.9h6v7.3h-6zM101.3 91.9h4.3v7.3h-4.3zM6.8 100.1h0.9v7.3h-0.9zM14.5 108.3h3.3v7.3h-3.3zM44.5 108.3h7v7.3h-7zM52.4 108.3h7.2v7.3h-7.2zM90.7 108.3h5.2v7.3h-5.2zM102.1 108.3h3.3v7.3h-3.3zM19.6 116.5h3.8v7.3h-3.8zM30.1 116.5h5.8v7.3h-5.8zM60.5 116.5h7.3v7.3h-7.3zM20.4 124.7h1.4v7.3h-1.4zM22.7 124.7h2.9v7.3h-2.9zM26.5 124.7h4.2v7.3h-4.2zM89.3 124.7h4.2v7.3h-4.2zM30.3 132.9h2.2v7.3h-2.2zM76.1 132.9h5.6v7.3h-5.6zM82.5 132.9h4.1v7.3h-4.1zM64.2 141.1h5.1v7.3h-5.1z'/%3E%3Cpath fill='%232E2442' d='M103 67.3h3.4v7.3h-3.4zM106.5 91.9h3.3v7.3h-3.3zM113.7 91.9h1v7.3h-1zM36.8 116.5h6.6v7.3h-6.6zM44.3 116.5h7.1v7.3h-7.1zM101.3 116.5h2.6v7.3h-2.6zM52.5 124.7h7.1v7.3h-7.1zM60.5 124.7h7.1v7.3h-7.1zM68.4 124.7h6.8v7.3h-6.8zM94.4 124.7h2.9v7.3h-2.9zM98.2 124.7h1.4v7.3h-1.4zM56.7 141.1h6.5v7.3h-6.5zM70.2 141.1h1.4v7.3h-1.4z'/%3E%3Cpath fill='%2343385C' d='M107.4 67.3h2.3v7.3h-2.3zM100.7 75.5h4.2v7.3h-4.2zM112.9 75.5h0.9v7.3h-0.9zM56.3 83.7h7.5v7.3h-7.5zM106.7 83.7h3.3v7.3h-3.3zM113.9 83.7h1v7.3h-1zM56.3 91.9h7.4v7.3h-7.4zM72.5 100.1h6.9v7.3h-6.9zM100.3 100.1h4.2v7.3h-4.2zM112.3 100.1h0.9v7.3h-0.9zM106.4 108.3h2.2v7.3h-2.2zM109.5 108.3h1v7.3h-1zM90.8 116.5h4.9v7.3h-4.9zM60.5 132.9h7.2v7.3h-7.2zM50.7 141.1h5.1v7.3h-5.1z'/%3E%3Ccircle cx='60' cy='90' r='56' fill='url(%23g)'/%3E%3C/g%3E%3Cpath d='M38,51c0,9.1 3.64,13 11,13c-7.36,0 -11,3.9 -11,13c0,-9.1 -3.64,-13 -11,-13c7.36,0 11,-3.9 11,-13z' fill='%23fff'/%3E%3Cpath d='M84,106c0,4.2 1.68,6 5,6c-3.32,0 -5,1.8 -5,6c0,-4.2 -1.68,-6 -5,-6c3.32,0 5,-1.8 5,-6z' fill='%23FFF1D6' fill-opacity='.9'/%3E%3C/svg%3E"); /* haces de luz desde el techo */ --dc-beams: conic-gradient(from 180deg at 50% -8%, transparent 148deg, rgba(242, 140, 40, .17) 156deg, transparent 164deg, transparent 172deg, rgba(255, 241, 214, .13) 179deg, transparent 186deg, transparent 193deg, rgba(232, 106, 146, .17) 201deg, transparent 209deg); /* reflejos de la bola: puntitos cálidos */ --dc-glints: radial-gradient(2.4px 2.4px at 10% 14%, #FFF1D6 60%, transparent 70%), radial-gradient(2px 2px at 28% 62%, #F6D56E 60%, transparent 70%), radial-gradient(3px 2.2px at 44% 30%, #FFF1D6 60%, transparent 70%), radial-gradient(2px 2px at 61% 84%, #F29BB8 60%, transparent 70%), radial-gradient(2.6px 2.6px at 72% 20%, #F7B26A 60%, transparent 70%), radial-gradient(2px 2px at 86% 56%, #FFF1D6 60%, transparent 70%), radial-gradient(2.2px 2.2px at 94% 92%, #F6D56E 60%, transparent 70%), radial-gradient(1.8px 1.8px at 18% 90%, #F29BB8 60%, transparent 70%), radial-gradient(2px 2px at 54% 6%, #FFF1D6 60%, transparent 70%); } /* ---------- fondo general (escritorio: la pista a los lados) ---------- */ html[data-theme="disco"] { background-color: var(--dc-night); background-image: var(--dc-beams), radial-gradient(50vw 50vh at 0% 100%, rgba(242, 140, 40, .22), transparent 70%), radial-gradient(50vw 50vh at 100% 100%, rgba(232, 106, 146, .22), transparent 70%), var(--pattern), var(--pattern); background-size: auto, auto, auto, 300px, 460px; background-position: 0 0, 0 0, 0 0, 0 0, 150px 120px; } html[data-theme="disco"] body.inv::before, html[data-theme="disco"] body.inv::after { content: ''; position: fixed; z-index: -1; top: -8px; pointer-events: none; aspect-ratio: 120 / 150; background: var(--dc-ball) top center / contain no-repeat; transform-origin: 50% 0; filter: drop-shadow(0 0 30px rgba(242, 140, 40, .35)); animation: dcSwing 6s ease-in-out infinite; } html[data-theme="disco"] body.inv::before { width: 190px; left: calc(50% - 280px - 250px); } html[data-theme="disco"] body.inv::after { width: 120px; right: calc(50% - 280px - 190px); top: -40px; animation-delay: -2.5s; } @keyframes dcSwing { 0%, 100% { rotate: -2.5deg; } 50% { rotate: 2.5deg; } } /* ---------- capa de efectos: reflejos de la bola de espejos ---------- */ /* «screen»: brillan sobre la pista morada y casi desaparecen sobre el papel crema */ html[data-theme="disco"] .inv-fx { mix-blend-mode: screen; } html[data-theme="disco"] .inv-fx::before { content: ''; position: absolute; left: 0; top: 0; width: calc(100% + 260px); height: calc(100% + 260px); background-image: var(--dc-glints); background-size: 260px 260px; opacity: .8; animation: dcGlints 16s linear infinite; } @keyframes dcGlints { from { transform: translate(-260px, -260px); } to { transform: translate(0, 0); } } html[data-theme="disco"] .inv-fx::after { content: ''; position: absolute; left: -30%; right: -30%; top: -12%; height: 120%; background: var(--dc-beams); transform-origin: 50% 0; opacity: .7; animation: dcBeams 9s ease-in-out infinite alternate; } @keyframes dcBeams { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } } /* ---------- tipografía ---------- */ html[data-theme="disco"] .inv-eyebrow { font-weight: 700; letter-spacing: .26em; } html[data-theme="disco"] .inv-title { font-weight: 400; letter-spacing: .005em; line-height: 1.06; } html[data-theme="disco"] ::selection { background: var(--dc-orange); color: var(--dc-night); } /* ---------- secciones «pista»: el esquema se invierte ---------- */ html[data-theme="disco"] .inv-section--countdown, html[data-theme="disco"] .inv-section--playlist, html[data-theme="disco"] .inv-footer { --bg: var(--dc-night); --bg-alt: var(--dc-night); --surface: var(--dc-night-2); --ink: #FFF1D6; --ink-soft: #E7D2E2; --accent: var(--dc-orange); --accent-ink: var(--dc-night); --line: rgba(255, 241, 214, .17); --shadow: 0 20px 38px -18px rgba(0, 0, 0, .75); color: var(--ink); background-color: var(--dc-night); background-image: var(--dc-beams), radial-gradient(70% 36% at 50% 0%, rgba(232, 106, 146, .22), transparent 70%), radial-gradient(60% 30% at 50% 100%, rgba(242, 140, 40, .16), transparent 70%), var(--pattern), var(--pattern); background-size: auto, auto, auto, 300px, 460px; background-position: 0 0, 0 0, 0 0, 0 0, 130px 90px; isolation: isolate; } /* franjas setenteras en el borde superior de cada pista */ html[data-theme="disco"] .inv-section--countdown::before, html[data-theme="disco"] .inv-section--playlist::before, html[data-theme="disco"] .inv-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22px; pointer-events: none; background: var(--dc-stripes); } /* la bola de espejos cuelga sobre la cuenta regresiva y el pie */ html[data-theme="disco"] .inv-section--countdown::after, html[data-theme="disco"] .inv-footer::after { content: ''; position: absolute; z-index: -1; top: 8px; right: 7%; width: 78px; aspect-ratio: 120 / 150; pointer-events: none; background: var(--dc-ball) top center / contain no-repeat; transform-origin: 50% 0; filter: drop-shadow(0 0 22px rgba(242, 140, 40, .4)); animation: dcSwing 5s ease-in-out infinite; } html[data-theme="disco"] .inv-footer::after { right: auto; left: 8%; width: 58px; animation-delay: -2s; } /* ============================================================ HERO — foto cálida + letrero de neón (Monoton) ============================================================ */ html[data-theme="disco"] .inv-hero { background-color: var(--dc-night); color: var(--dc-cream); } html[data-theme="disco"] .inv-hero--split .inv-hero__content { background: var(--dc-night-2); border-color: rgba(255, 241, 214, .14); } html[data-theme="disco"] .inv-hero__art-spark { color: var(--dc-mustard); } html[data-theme="disco"] .inv-hero__media { background: radial-gradient(80% 60% at 50% 30%, #8A3B1C, var(--dc-night) 75%); } html[data-theme="disco"] .inv-hero__img { object-position: 50% 28%; filter: saturate(1.08) contrast(1.04); } html[data-theme="disco"] .inv-hero__img.is-broken { opacity: 0; } /* franjas en el borde inferior: el paso del hero al papel crema */ html[data-theme="disco"] .inv-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; z-index: 0; pointer-events: none; background: linear-gradient(0deg, var(--dc-brown) 0 25%, var(--dc-orange) 25% 50%, var(--dc-mustard) 50% 75%, var(--dc-pink) 75% 100%); } html[data-theme="disco"] .inv-hero__content { padding-bottom: calc(104px + env(safe-area-inset-bottom)); } html[data-theme="disco"] .inv-hero__eyebrow { color: var(--dc-mustard); opacity: 1; letter-spacing: .3em; font-size: .7rem; margin-bottom: .2rem; text-shadow: 0 1px 12px rgba(42, 16, 54, .8); } html[data-theme="disco"] .inv-hero__title { /* Monoton es muy ancha: a este tamaño caben nombres de ~10 letras sin partirse */ font-size: clamp(2.9rem, 13.2vw, 3.9rem); line-height: 1.08; letter-spacing: .02em; overflow-wrap: normal; color: #FFF4DC; text-shadow: 0 0 4px rgba(255, 241, 214, .75), 0 0 14px rgba(242, 140, 40, .95), 0 0 34px rgba(242, 140, 40, .7), 0 0 64px rgba(232, 106, 146, .6); margin: .06em 0 .22em; animation-name: invUp, dcNeon; animation-duration: 1.15s, 7s; animation-timing-function: var(--ease), linear; animation-iteration-count: 1, infinite; animation-fill-mode: both, none; animation-delay: calc(.12s + var(--i, 0) * .11s), 2.6s; } html[data-theme="disco"]:not(.is-revealed) .inv-hero__title { animation: none; } @keyframes dcNeon { 0%, 18%, 22%, 64%, 67%, 100% { opacity: 1; } 20% { opacity: .55; } 65.5% { opacity: .7; } } html[data-theme="disco"] .inv-hero--photo .inv-hero__title { text-shadow: 0 0 4px rgba(255, 241, 214, .75), 0 0 14px rgba(242, 140, 40, .95), 0 0 34px rgba(242, 140, 40, .7), 0 0 64px rgba(232, 106, 146, .6); } html[data-theme="disco"] .inv-hero__subtitle { font-family: var(--font-body); font-style: normal; font-weight: 500; font-size: 1.04rem; line-height: 1.5; max-width: 20rem; opacity: .95; text-shadow: 0 1px 14px rgba(42, 16, 54, .8); } html[data-theme="disco"] .inv-hero__date { margin-top: 1.25rem; font-weight: 700; } html[data-theme="disco"] .inv-hero__date-side { border-color: rgba(225, 177, 44, .6); } html[data-theme="disco"] .inv-hero__date-day { font-family: var(--font-display); font-size: 3.2rem; color: var(--dc-mustard); } html[data-theme="disco"] .inv-hero__time { color: var(--dc-cream); opacity: .9; } html[data-theme="disco"] .inv-hero__place { opacity: 1; font-weight: 500; } html[data-theme="disco"] .inv-hero__place .inv-icon { color: var(--dc-pink); } html[data-theme="disco"] .inv-hero .inv-guest { background: rgba(42, 16, 54, .5); color: var(--dc-cream); border: 1.5px solid rgba(225, 177, 44, .65); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); } html[data-theme="disco"] .inv-guest__label { color: var(--accent); opacity: 1; } html[data-theme="disco"] .inv-hero .inv-guest__label { color: var(--dc-mustard); } html[data-theme="disco"] .inv-guest__name { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; } /* ============================================================ SECCIONES ============================================================ */ /* botones: píldora con sombra setentera desplazada */ html[data-theme="disco"] .inv-btn { font-weight: 700; letter-spacing: .02em; } html[data-theme="disco"] .inv-btn:not(.inv-btn--ghost):not(.is-draft):not(.inv-btn--wa) { box-shadow: 3px 4px 0 var(--dc-mustard); } @media (hover: hover) { html[data-theme="disco"] .inv-btn:not(.inv-btn--ghost):not(.is-draft):not(.inv-btn--wa):hover { box-shadow: 5px 6px 0 var(--dc-mustard); transform: translate(-1px, -2px); } } html[data-theme="disco"] .inv-btn--ghost { border-width: 2px; } /* cita con sol de franjas detrás */ html[data-theme="disco"] .inv-section--quote { overflow: hidden; isolation: isolate; padding-top: clamp(84px, 20vw, 112px); } html[data-theme="disco"] .inv-section--quote::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 170%; aspect-ratio: 1; pointer-events: none; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, rgba(242, 140, 40, .13) 0 6deg, transparent 6deg 12deg); -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 70%); mask: radial-gradient(closest-side, #000 20%, transparent 70%); animation: dcSun 80s linear infinite; } @keyframes dcSun { to { transform: translate(-50%, -50%) rotate(360deg); } } html[data-theme="disco"] .inv-quote__mark { font-family: var(--font-display); color: var(--dc-pink); opacity: .9; font-size: 6rem; top: -.3em; } html[data-theme="disco"] .inv-quote__text p { font-family: var(--font-display); font-style: normal; font-size: clamp(1.9rem, 8.6vw, 2.5rem); line-height: 1.16; color: var(--ink); } html[data-theme="disco"] .inv-quote__author { color: var(--ink-soft); } html[data-theme="disco"] .inv-quote__author::before { height: 6px; width: 64px; border-radius: 3px; background: var(--dc-stripes-v); } /* cuenta regresiva: baldosas de pista iluminada */ html[data-theme="disco"] .inv-section--countdown { padding-top: clamp(96px, 24vw, 124px); } html[data-theme="disco"] .inv-countdown { gap: 8px; } html[data-theme="disco"] .inv-countdown__unit { --t: var(--dc-orange); padding: 18px 2px 14px; border: 0; border-radius: 12px; background: radial-gradient(120% 95% at 50% 18%, color-mix(in srgb, var(--t), #fff 38%), var(--t) 58%, color-mix(in srgb, var(--t), #000 16%)); box-shadow: 0 0 0 2px rgba(0, 0, 0, .28), 0 0 26px color-mix(in srgb, var(--t) 55%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .35); animation: dcTile 2.2s ease-in-out infinite alternate; } html[data-theme="disco"] .inv-countdown__unit:nth-child(2) { --t: var(--dc-mustard); animation-delay: -.6s; } html[data-theme="disco"] .inv-countdown__unit:nth-child(3) { --t: var(--dc-pink); animation-delay: -1.3s; } html[data-theme="disco"] .inv-countdown__unit:nth-child(4) { --t: var(--dc-cream); animation-delay: -1.9s; } @keyframes dcTile { from { filter: brightness(1); } to { filter: brightness(1.14) saturate(1.1); } } html[data-theme="disco"] .inv-countdown__unit::before { display: none; } html[data-theme="disco"] .inv-countdown__num { font-family: var(--font-display); font-weight: 400; color: var(--dc-night); font-size: clamp(2rem, 9.4vw, 2.6rem); } html[data-theme="disco"] .inv-countdown__lbl { color: rgba(42, 16, 54, .82); font-weight: 700; } html[data-theme="disco"] .inv-countdown__date { color: var(--ink-soft); } html[data-theme="disco"] .inv-countdown__done { font-family: var(--font-display); font-style: normal; color: var(--dc-mustard); } /* lugares */ html[data-theme="disco"] .inv-event { border: 1.5px solid rgba(59, 30, 16, .14); } html[data-theme="disco"] .inv-event__media::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: linear-gradient(0deg, var(--dc-brown) 0 25%, var(--dc-orange) 25% 50%, var(--dc-mustard) 50% 75%, var(--dc-pink) 75% 100%); } html[data-theme="disco"] .inv-event__media img { filter: saturate(1.1) contrast(1.04) sepia(.1); } html[data-theme="disco"] .inv-event__icon { color: var(--dc-night); background: var(--dc-orange); border: 0; box-shadow: 0 0 0 5px var(--surface), 0 0 0 7px var(--dc-mustard); } html[data-theme="disco"] .inv-event.has-img .inv-event__icon { background: var(--dc-orange); box-shadow: 0 0 0 5px var(--surface), 0 0 0 7px var(--dc-mustard); } html[data-theme="disco"] .inv-event__name { font-size: 1.75rem; font-weight: 400; } html[data-theme="disco"] .inv-event__meta .inv-icon { color: var(--accent); } /* itinerario: cada momento es un disco */ html[data-theme="disco"] .inv-timeline::before { left: 24px; width: 8px; border-radius: 4px; background: var(--dc-stripes-v); } html[data-theme="disco"] .inv-timeline__dot { --lab: var(--dc-orange); border: 0; color: var(--dc-night); background: radial-gradient(circle, var(--lab) 0 15px, #12090E 15.6px 16.4px, transparent 17px), conic-gradient(from 30deg, transparent 0 9%, rgba(255, 255, 255, .16) 13%, transparent 19% 54%, rgba(255, 255, 255, .11) 61%, transparent 68%), repeating-radial-gradient(circle, #1C1016 0 1.4px, #2C1D25 1.4px 2.8px); box-shadow: 0 0 0 5px var(--bg), 0 10px 18px -8px rgba(42, 16, 54, .7); } html[data-theme="disco"] .inv-section.is-alt .inv-timeline__dot { box-shadow: 0 0 0 5px var(--bg-alt), 0 10px 18px -8px rgba(42, 16, 54, .7); } html[data-theme="disco"] .inv-timeline__dot .inv-icon { width: 17px; height: 17px; } html[data-theme="disco"] .inv-timeline__item:nth-child(4n + 2) .inv-timeline__dot { --lab: var(--dc-mustard); } html[data-theme="disco"] .inv-timeline__item:nth-child(4n + 3) .inv-timeline__dot { --lab: var(--dc-pink); } html[data-theme="disco"] .inv-timeline__item:nth-child(4n) .inv-timeline__dot { --lab: var(--dc-cream); } html[data-theme="disco"] .inv-timeline__time { letter-spacing: .18em; } html[data-theme="disco"] .inv-timeline__title { font-weight: 400; font-size: 1.36rem; } /* código de vestimenta: sol de franjas y letrero de neón */ html[data-theme="disco"] .inv-dress { position: relative; isolation: isolate; overflow: hidden; padding: 36px 22px 32px; border-radius: 28px; background: var(--surface); border: 1.5px solid rgba(59, 30, 16, .14); box-shadow: var(--shadow); } html[data-theme="disco"] .inv-dress::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 0; width: 190%; aspect-ratio: 1; pointer-events: none; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, rgba(225, 177, 44, .2) 0 7deg, transparent 7deg 14deg); -webkit-mask: radial-gradient(closest-side, #000 10%, transparent 62%); mask: radial-gradient(closest-side, #000 10%, transparent 62%); } html[data-theme="disco"] .inv-dress__icon { color: var(--dc-night); background: var(--dc-mustard); border: 0; box-shadow: 0 0 0 6px rgba(225, 177, 44, .22); } html[data-theme="disco"] .inv-dress__code { font-family: var(--font-script); font-size: clamp(2.1rem, 10.4vw, 2.9rem); line-height: 1.12; /* rosa disco oscurecido: #E86A92 daba 2,88:1 sobre la tarjeta; #B8355F da 5,3:1 (Monoton es de trazo fino) */ color: #B8355F; letter-spacing: .02em; margin-bottom: .8rem; } html[data-theme="disco"] .inv-dress__label { color: var(--accent); } html[data-theme="disco"] .inv-chip { background: #FFFDF7; } /* playlist en la pista */ html[data-theme="disco"] .inv-playlist__poster { background: linear-gradient(135deg, #4A2159, var(--dc-night)); box-shadow: 0 0 0 1px rgba(255, 241, 214, .14), var(--shadow); } html[data-theme="disco"] .inv-playlist__label { background: radial-gradient(circle, var(--dc-cream) 0 18%, var(--dc-orange) 20% 45%, var(--dc-pink) 47% 70%, var(--dc-mustard) 72%); } html[data-theme="disco"] .inv-playlist__play { background: var(--dc-orange); color: var(--dc-night); } html[data-theme="disco"] .inv-playlist__form { border-color: rgba(255, 241, 214, .16); } html[data-theme="disco"] .inv-section--playlist .inv-input { background: rgba(20, 6, 26, .5); border-color: rgba(255, 241, 214, .22); } html[data-theme="disco"] .inv-section--playlist .inv-input:focus { background: #2F1240; } html[data-theme="disco"] .inv-section--playlist .inv-chip { background: rgba(20, 6, 26, .5); color: var(--ink); } /* galería: recuerdos a lo largo de los años, con tono de revelado */ html[data-theme="disco"] .inv-gallery__item { background: #E9CFA6; } html[data-theme="disco"] .inv-gallery__item img { filter: sepia(.2) saturate(1.1) contrast(1.04); } html[data-theme="disco"] .inv-gallery--polaroids .inv-gallery__item { background: linear-gradient(135deg, #E9CFA6, #DDB98A) 8px 8px / calc(100% - 16px) calc(100% - 52px) no-repeat, #FFFCF4; padding: 8px 8px 44px; box-shadow: 0 18px 28px -14px rgba(59, 30, 16, .6), 0 0 0 1px rgba(59, 30, 16, .07); } html[data-theme="disco"] .inv-gallery__cap { font-family: var(--font-display); font-size: 1rem; line-height: 1.15; color: var(--ink); bottom: 8px; min-height: 2.3em; display: flex; align-items: center; justify-content: center; white-space: normal; text-wrap: balance; } html[data-theme="disco"] .inv-gallery__dots span.is-on { background: var(--accent); } /* aviso de sorpresa */ html[data-theme="disco"] .inv-note { background: linear-gradient(135deg, rgba(232, 106, 146, .18), rgba(225, 177, 44, .16)), var(--surface); border: 2px dashed rgba(232, 106, 146, .85); box-shadow: none; padding: 24px 20px 24px 18px; } html[data-theme="disco"] .inv-note__icon { background: var(--dc-pink); color: #fff; box-shadow: 0 0 0 6px rgba(232, 106, 146, .18); } html[data-theme="disco"] .inv-note__title { font-weight: 400; font-size: 1.5rem; } html[data-theme="disco"] .inv-note .inv-eyebrow { color: #B5305F; } /* muro de mensajes */ html[data-theme="disco"] .inv-wish { background: #FFFBF2; } html[data-theme="disco"] .inv-wish:nth-child(3n + 1) { background: color-mix(in srgb, var(--dc-orange) 12%, #FFFBF2); } html[data-theme="disco"] .inv-wish:nth-child(3n + 2) { background: color-mix(in srgb, var(--dc-mustard) 16%, #FFFBF2); } html[data-theme="disco"] .inv-wish:nth-child(3n) { background: color-mix(in srgb, var(--dc-pink) 13%, #FFFBF2); } html[data-theme="disco"] .inv-wish::before { color: var(--dc-pink); } html[data-theme="disco"] .inv-wish__msg p { font-family: var(--font-body); font-size: 1.05rem; } /* formularios */ html[data-theme="disco"] .inv-input { background: #FFFBF2; } html[data-theme="disco"] .inv-rsvp__face, html[data-theme="disco"] .inv-stepper { background: #FFFBF2; } html[data-theme="disco"] .inv-section.inv-rsvp { background-image: radial-gradient(90% 40% at 50% 0%, rgba(242, 140, 40, .16), transparent 70%); } /* pie en la pista */ html[data-theme="disco"] .inv-footer { padding-top: 96px; } html[data-theme="disco"] .inv-footer__orn { color: var(--dc-mustard); } html[data-theme="disco"] .inv-footer__text { font-family: var(--font-display); font-size: clamp(2rem, 9vw, 2.5rem); line-height: 1.1; color: var(--dc-cream); text-shadow: 0 0 12px rgba(242, 140, 40, .75), 0 0 30px rgba(232, 106, 146, .45); } html[data-theme="disco"] .inv-footer__date { color: var(--dc-mustard); } html[data-theme="disco"] .inv-footer__brand { color: var(--dc-cream); } html[data-theme="disco"] .inv-wishes__spark, html[data-theme="disco"] .inv-divider__spark { color: var(--dc-mustard); } /* barra de acciones */ html[data-theme="disco"] .inv-actionbar { background: rgba(42, 16, 54, .88); color: var(--dc-cream); border-color: rgba(255, 241, 214, .14); } html[data-theme="disco"] .inv-actionbar__btn { color: var(--dc-cream); } html[data-theme="disco"] .inv-actionbar__btn.is-primary { background: var(--dc-orange); color: var(--dc-night); } html[data-theme="disco"] .inv-actionbar__btn:not(.is-primary) .inv-icon { color: var(--dc-mustard); } /* ============================================================ INTRO «vinyl» — un LP de portada setentera en plena pista: bola de espejos, haces de luz, reflejos que giran y piso iluminado. ============================================================ */ html[data-theme="disco"] .inv-intro--vinyl { background: var(--dc-night); } html[data-theme="disco"] .inv-intro--vinyl .inv-intro__bg { background-image: radial-gradient(60% 34% at 50% 44%, rgba(242, 140, 40, .22), transparent 70%), radial-gradient(60% 40% at 0% 60%, rgba(232, 106, 146, .22), transparent 70%), radial-gradient(60% 40% at 100% 30%, rgba(225, 177, 44, .16), transparent 70%), conic-gradient(from 180deg at 82% -4%, transparent 150deg, rgba(255, 241, 214, .13) 160deg, transparent 168deg, transparent 184deg, rgba(242, 140, 40, .16) 194deg, transparent 204deg, transparent 214deg, rgba(232, 106, 146, .15) 224deg, transparent 234deg), radial-gradient(130% 90% at 50% 40%, transparent 55%, rgba(10, 2, 14, .7) 100%), var(--pattern), var(--pattern); background-size: auto, auto, auto, auto, auto, 300px, 460px; background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 150px 110px; } /* bola de espejos colgando */ html[data-theme="disco"] .inv-intro--vinyl .inv-intro__bg::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 170px; background: var(--dc-ball) left 3% top -40px / 62px auto no-repeat, var(--dc-ball) right 3% top 18px / 76px auto no-repeat; filter: drop-shadow(0 0 22px rgba(242, 140, 40, .5)); animation: dcBob 5s ease-in-out infinite; } @keyframes dcBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 5px; } } /* reflejos que giran alrededor de la bola (reemplaza el grano de papel) */ html[data-theme="disco"] .inv-intro--vinyl .inv-intro__bg::after { inset: -60% -60% -60% -60%; opacity: .85; mix-blend-mode: normal; background-image: var(--dc-glints); background-size: 240px 240px; transform-origin: 62% 42%; animation: dcSpinGlints 26s linear infinite; } @keyframes dcSpinGlints { to { transform: rotate(360deg); } } /* piso iluminado en perspectiva (dos capas que alternan colores) */ html[data-theme="disco"] .inv-intro--vinyl::before, html[data-theme="disco"] .inv-intro--vinyl::after { content: ''; position: absolute; z-index: -1; left: -30%; right: -30%; bottom: -4%; height: 44%; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(20, 5, 26, .9) 0 3px, transparent 3px 25%), repeating-linear-gradient(0deg, rgba(20, 5, 26, .9) 0 3px, transparent 3px 50%), conic-gradient(var(--dc-orange) 0 25%, var(--dc-pink) 0 50%, var(--dc-mustard) 0 75%, #7A3A8C 0) 0 0 / 25% 50%; transform: perspective(460px) rotateX(60deg); transform-origin: 50% 100%; -webkit-mask: linear-gradient(0deg, #000 35%, transparent 98%); mask: linear-gradient(0deg, #000 35%, transparent 98%); opacity: .6; } html[data-theme="disco"] .inv-intro--vinyl::after { background: repeating-linear-gradient(90deg, rgba(20, 5, 26, .9) 0 3px, transparent 3px 25%), repeating-linear-gradient(0deg, rgba(20, 5, 26, .9) 0 3px, transparent 3px 50%), conic-gradient(#7A3A8C 0 25%, var(--dc-mustard) 0 50%, var(--dc-orange) 0 75%, var(--dc-pink) 0) 0 0 / 25% 50%; animation: dcFloor 1.8s steps(1) infinite; } @keyframes dcFloor { 0%, 49% { opacity: 0; } 50%, 100% { opacity: .6; } } html[data-theme="disco"] .inv-intro--vinyl .inv-intro__eyebrow { color: var(--dc-mustard); } /* portada del LP: amanecer de franjas setenteras */ html[data-theme="disco"] .vin { --w: min(80vw, 340px, 45vh); } html[data-theme="disco"] .vin__sleeve { color: var(--dc-brown); align-content: start; padding: 17% 9% 9%; background: radial-gradient(64% 64% at 50% 116%, #FFF6E2 0 22%, var(--dc-pink) 22.5% 40%, var(--dc-mustard) 40.5% 58%, var(--dc-orange) 58.5% 76%, var(--dc-brown) 76.5% 94%, transparent 94.5%), radial-gradient(130% 90% at 30% 0%, #FFF8E8, #F4D9A8); box-shadow: 0 30px 50px -22px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(59, 30, 16, .12), inset 0 1px 0 rgba(255, 255, 255, .7); } html[data-theme="disco"] .vin__sleeve::after { background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 45%, transparent 58%) 0 0 / 260% 100% no-repeat; } html[data-theme="disco"] .vin__sleeve-ring, html[data-theme="disco"] .vin__sleeve-art { display: none; } html[data-theme="disco"] .vin__sleeve-mono { font-size: calc(var(--w) * .27); line-height: .95; color: var(--dc-orange); text-shadow: 3px 3px 0 rgba(232, 106, 146, .55); } html[data-theme="disco"] .vin__sleeve-title { margin-top: 6px; font-family: var(--font-display); font-size: calc(var(--w) * .074); letter-spacing: .14em; color: var(--dc-brown); /* una sola línea: una segunda quedaría sobre las franjas del amanecer (el motor achica la letra si no cabe) */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme="disco"] .vin__sleeve-foot { top: 6%; bottom: auto; color: var(--dc-brown); opacity: .85; } html[data-theme="disco"] .vin__label { background: radial-gradient(circle, #FFF1D6 0 16%, var(--dc-orange) 17% 42%, var(--dc-pink) 43% 64%, var(--dc-mustard) 65%); color: var(--dc-night); } html[data-theme="disco"] .vin__label-mono { font-size: calc(var(--w) * .07); } html[data-theme="disco"] .vin__notes { color: var(--dc-mustard); } /* saludo y botón */ html[data-theme="disco"] .inv-intro--vinyl .inv-intro__guest { background: rgba(42, 16, 54, .72); color: var(--dc-cream); border: 1.5px solid rgba(225, 177, 44, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } html[data-theme="disco"] .inv-intro--vinyl .inv-intro__guest .inv-guest__label { color: var(--dc-mustard); opacity: 1; } html[data-theme="disco"] .inv-intro--vinyl .inv-intro__guest .inv-guest__name { font-family: var(--font-display); font-size: 1.3rem; } html[data-theme="disco"] .inv-intro--vinyl .inv-intro__cta { background: var(--dc-orange); color: var(--dc-night); font-weight: 700; box-shadow: 3px 4px 0 var(--dc-mustard), 0 16px 34px -10px rgba(242, 140, 40, .6); } html[data-theme="disco"] .inv-intro--vinyl .inv-intro__cta:focus-visible { outline-color: var(--dc-mustard); } /* escritorio: las bolas bajan hacia el centro y la pista crece */ @media (min-width: 700px) { html[data-theme="disco"] .vin { --w: min(60vw, 380px, 46vh); } html[data-theme="disco"] .inv-intro--vinyl .inv-intro__bg::before { height: 260px; background: var(--dc-ball) left 20% top -20px / 104px auto no-repeat, var(--dc-ball) right 18% top 6px / 136px auto no-repeat; } html[data-theme="disco"] .inv-intro--vinyl::before, html[data-theme="disco"] .inv-intro--vinyl::after { height: 40%; transform: perspective(700px) rotateX(60deg); } } /* ---------- intros alternativas (?intro=…) ---------- El «papel» de sobre, pase, nubes y placa del telón pasa a crema con tinta café (variables del motor) y los nombres pequeños dejan Monoton por Righteous. */ html[data-theme="disco"] .inv-intro { --paper: #FFF6E4; --paper-2: #F8E4C2; --paper-3: #E9C99A; --paper-ink: #3B1E10; } html[data-theme="disco"] .cnf { --cloud: #FFF1D6; } html[data-theme="disco"] .cnf__date { background: var(--dc-orange); color: var(--dc-night); } html[data-theme="disco"] .cur__plaque-in { color: var(--dc-brown); background: radial-gradient(120% 90% at 50% 0%, #fff, transparent 60%), linear-gradient(160deg, #FFF6E4, #F6DDB0); } html[data-theme="disco"] :is(.env__to-name, .gift__tag-name, .brd__cell strong) { font-family: var(--font-display); } html[data-theme="disco"] .gift__tag { background: linear-gradient(160deg, #FFFDF7, #FBE3BD); } html[data-theme="disco"] .gift__tag-name { overflow-wrap: normal; font-size: calc(var(--w) * .078); line-height: 1.1; }