/* ═══════════════════════════════════════════════════════════════════════════ TEMA — editá solo este archivo para cambiar la estética de la invitación. styles.css contiene el layout y no debe modificarse entre proyectos. ─────────────────────────────────────────────────────────────────────────── Versión TEEN — "más show": · Azul noche más vivo (menos negro) con degradado cósmico + nebulosas. · Más estrellas de 4 puntas decorativas, con titileo escalonado. · Estrellas fugaces con cabeza dorada de 4 puntas y cola luminosa. · Brillos dorados reforzados (con mesura). · Respeta prefers-reduced-motion. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Tipografías ── */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Montserrat:wght@200;300;400;500&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Lato:wght@300;400;700&display=swap'); :root { /* Paleta — Noche estrellada mágica y lujosa (Teen: azul noche más vivo) */ --bg: #0d1a40; /* Azul noche profundo, ya no casi-negro */ --bg-soft: #142457; /* Azul noche suave para capas superiores */ --surface: #1a2a5f; /* Azul marino cósmico para contenedores */ --text: #fdfbf7; /* Blanco cálido / crema de alto contraste */ --text-soft: #e0d9cc; /* Crema suave para textos secundarios */ --text-faint: #b8a878; /* Bronce-oro tenue para metadatos */ --accent: #e6b85c; /* Oro clásico (un toque más cálido y vivo) */ --accent-light: #f8dca0; /* Destellos dorados brillantes / oro claro */ --accent-dark: #9e772d; /* Oro viejo / bronce profundo */ --border: #243463; /* Borde azul marino oscuro */ --border-soft: #3b4d83; /* Borde más visible para enfoque o separación */ /* Tipografías sugeridas y ampliadas */ --font-display: 'Cinzel', 'Playfair Display', 'Cormorant Garamond', Georgia, serif; --font-body: 'Montserrat', 'Lato', system-ui, sans-serif; /* Radios y transiciones */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); /* Nuevos tokens para el cielo cósmico (Teen) */ --sky-deep: #0a163a; /* zona inferior del cielo, más profunda */ --sky-mid: #1a2a66; /* azul noche medio */ --sky-indigo: #2a1f5e; /* índigo / violeta profundo */ --sky-glow: #3a4a8a; /* resplandor lejano frío-cálido */ --sky-warm: #5a4a7a; /* toque cálido / amanecer remoto */ /* Fondos para secciones de contraste (portada, gate, footer) */ --bg-emphasis: var(--bg); /* Hero semi-transparente para que se vea el fondo estrellado */ --hero-bg: rgba(13, 26, 64, 0.42); /* Botones primarios */ --btn-primary-bg: var(--accent); --btn-primary-text: var(--bg); } /* Pulso sutil en la portada de entrada */ @keyframes gatePulse { 0%, 100% { box-shadow: inset 0 0 60px rgba(230, 184, 92, 0); } 50% { box-shadow: inset 0 0 90px rgba(230, 184, 92, 0.10); } } /* ═══════════════════════════════════════════════════════════════════════════ FONDO COSMICO — capa base (degradado vertical/diagonal con resplandor) ═══════════════════════════════════════════════════════════════════════════ */ .starry-bg { position: fixed; inset: 0; z-index: -3; /* Stack del cielo cósmico (orden = de adelante hacia atrás): 1) ESTRELLAS GRANDES de 5 puntas (capa dominante) 2) Micro estrellas (capa profunda) 3) Resplandores cálido + frío 4) Nebulosas violeta/índigo + velo central 5) Degradado base azul noche → índigo Se separa en background-image / size / repeat / position por compatibilidad. */ background-color: var(--bg); /* Fallback sólido si los gradientes/oklch fallan */ background-image: /* Tile con ~35 ESTRELLAS GRANDES de 5 puntas (dominantes) */ url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20900%20700%27%20width=%27900%27%20height=%27700%27%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(53.96412037037037%20187.77281950160037)%20scale(5.532)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.95%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(116.72935956790123%20126.85099451303154)%20scale(1.873)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.81%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(27.63599537037037%20145.1231710105167)%20scale(1.228)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.91%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(392.02613811728395%20148.70458962048468)%20scale(3.323)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.96%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(302.9571759259259%20183.8050125743027)%20scale(2.142)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.94%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(537.0426311728395%2092.60286636945588)%20scale(4.202)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.97%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(461.09085648148147%20159.29240969364426)%20scale(2.034)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.78%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(519.6826774691358%20172.2833790580704)%20scale(1.873)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.73%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(809.5606674382716%20113.60836762688615)%20scale(4.670)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.99%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(677.295524691358%2024.08250457247371)%20scale(1.374)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.93%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(787.0447530864197%20208.2325960219479)%20scale(1.860)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.84%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(151.41319444444443%20381.0121885002286)%20scale(5.092)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.87%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(75.38676697530865%20357.6397462277092)%20scale(1.443)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.92%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(66.84895833333334%20373.0312642889803)%20scale(1.970)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.92%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(400.03076774691357%20333.87811499771374)%20scale(4.957)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.93%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(242.17013888888889%20463.5649577046182)%20scale(1.773)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.84%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(362.5675154320988%20454.2308241883859)%20scale(1.701)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.91%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(599.5106095679013%20322.9983281893004)%20scale(3.312)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.90%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(631.117862654321%20284.9651348879744)%20scale(1.529)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.79%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(619.339313271605%20308.51851851851853)%20scale(1.400)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.79%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(845.6166087962963%20387.1897005029721)%20scale(4.425)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.91%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(787.3688271604938%20300.7497427983539)%20scale(1.726)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.91%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(898.9699074074074%20380.2359110653864)%20scale(2.158)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.93%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(48.27932098765432%20538.4789809099223)%20scale(4.454)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.90%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(22.728587962962962%20644.1492341106539)%20scale(2.120)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.75%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(179.93152006172838%20508.78629401005946)%20scale(1.360)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.92%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(301.5959683641975%20572.8435356652949)%20scale(4.113)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.94%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(390.66936728395063%20610.1224565614998)%20scale(1.764)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.79%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(382.3630401234568%20524.9309842249658)%20scale(1.910)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.77%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(626.3304398148148%20526.507644604481)%20scale(5.335)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.99%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(586.3300540123457%20651.6529492455419)%20scale(1.229)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.75%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(643.0700231481482%20535.9745084590763)%20scale(2.121)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.84%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(762.4132908950618%20541.1276863283036)%20scale(3.945)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.94%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(796.5162037037037%20564.9341278006402)%20scale(1.493)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.86%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(740.5246913580247%20666.5053440786465)%20scale(1.266)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.85%27/%3E%3C/svg%3E"), /* Tile con ~90 micro estrellas (capa profunda) */ url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%201200%20600%27%20width=%271200%27%20height=%27600%27%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(301.43004115226336%20327.1990740740741)%20scale(0.353)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.69%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(152.0730452674897%20542.4897119341564)%20scale(0.462)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.58%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(939.4444444444443%20413.1815843621399)%20scale(0.314)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.48%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(489.4701646090535%207.79320987654321)%20scale(0.256)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.80%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(316.9650205761317%20572.6208847736625)%20scale(0.487)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.41%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(958.9660493827159%20598.4053497942386)%20scale(0.397)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.49%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(508.06584362139915%2086.99845679012346)%20scale(0.500)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.49%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1145.7458847736625%20418.02983539094646)%20scale(0.361)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.74%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(875.7098765432098%20415.5735596707819)%20scale(0.338)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.41%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(457.2170781893004%2014.814814814814813)%20scale(0.510)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.71%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(338.4156378600823%20128.71656378600824)%20scale(0.410)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.71%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(789.675925925926%20514.6862139917696)%20scale(0.462)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.73%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(436.92386831275724%20441.24228395061726)%20scale(0.311)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.58%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(394.974279835391%20354.6810699588478)%20scale(0.358)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.80%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(800.8641975308642%20345.74331275720164)%20scale(0.493)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.59%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(547.1862139917696%20216.28086419753086)%20scale(0.528)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.61%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(215.4218106995885%20545.923353909465)%20scale(0.530)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.60%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1009.2746913580247%20558.7448559670781)%20scale(0.456)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.47%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(888.0041152263374%20589.9305555555555)%20scale(0.285)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.37%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1099.758230452675%20152.44341563786008)%20scale(0.352)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.60%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(314.9074074074074%203.690843621399177)%20scale(0.378)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.41%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(359.3775720164609%20412.19135802469134)%20scale(0.509)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.36%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(747.9835390946503%20424.24125514403295)%20scale(0.447)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.38%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(17.762345679012345%20530.5812757201646)%20scale(0.282)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.45%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(261.3065843621399%20333.0632716049382)%20scale(0.324)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.61%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(460.09773662551436%20211.31687242798353)%20scale(0.543)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.44%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(217.8395061728395%20389.4161522633745)%20scale(0.493)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.63%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(693.7911522633744%20402.5462962962963)%20scale(0.355)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.70%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(336.1008230452675%20163.67026748971193)%20scale(0.362)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.36%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1015.1388888888889%20230.1954732510288)%20scale(0.437)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.53%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(556.8312757201646%2070.64043209876543)%20scale(0.327)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.69%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(475.99279835390945%20331.3014403292181)%20scale(0.531)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.64%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(109.6604938271605%20102.91923868312757)%20scale(0.439)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.64%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1150.4269547325102%20587.3456790123457)%20scale(0.264)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.59%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(979.7736625514403%20164.21039094650206)%20scale(0.474)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.39%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1.404320987654321%2057.58744855967078)%20scale(0.524)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.55%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(174.57818930041154%20202.66203703703704)%20scale(0.493)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.46%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(747.4434156378601%20312.3971193415638)%20scale(0.516)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.57%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(790.3703703703704%20144.20010288065842)%20scale(0.416)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.75%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(129.28497942386832%20166.58950617283952)%20scale(0.438)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.78%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1079.0020576131687%20225.86162551440327)%20scale(0.383)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.77%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(176.55864197530863%20412.7572016460905)%20scale(0.441)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.37%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1114.5473251028807%20529.1280864197531)%20scale(0.424)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.69%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(874.4495884773662%20554.6039094650206)%20scale(0.399)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.56%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(659.9691358024692%20313.2587448559671)%20scale(0.323)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.80%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(830.3652263374486%20140.27777777777777)%20scale(0.475)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.66%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(233.7860082304527%20148.62397119341566)%20scale(0.289)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.43%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1140.601851851852%20495.70473251028807)%20scale(0.388)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.73%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(576.738683127572%20250.03858024691357)%20scale(0.318)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.75%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(457.011316872428%20257.9218106995885)%20scale(0.379)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.44%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(518.4567901234568%20410.0951646090535)%20scale(0.361)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.65%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(453.66769547325106%20308.4104938271605)%20scale(0.276)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.54%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(444.1255144032922%20332.49742798353907)%20scale(0.393)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.60%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(93.53395061728395%20106.43004115226339)%20scale(0.266)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.59%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(561.1522633744855%20365.39351851851853)%20scale(0.376)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.52%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(295.12860082304525%20422.35082304526753)%20scale(0.356)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.51%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1165.8333333333333%20234.70936213991772)%20scale(0.429)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.59%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(999.1923868312757%20470.98765432098764)%20scale(0.341)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.72%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(110.02057613168725%20577.4819958847737)%20scale(0.293)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.66%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(235.35493827160494%20244.93312757201647)%20scale(0.275)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.70%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(667.7880658436214%2075.1929012345679)%20scale(0.498)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.73%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1188.8014403292182%20247.8909465020576)%20scale(0.530)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.63%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1002.0987654320987%20187.1013374485597)%20scale(0.428)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.49%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(866.9393004115226%20428.0092592592593)%20scale(0.270)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.59%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(31.47119341563786%2083.57767489711934)%20scale(0.491)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.47%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1166.0648148148148%20111.21399176954733)%20scale(0.314)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.45%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(496.6460905349794%20379.4367283950618)%20scale(0.284)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.78%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(338.02983539094646%20134.54218106995884)%20scale(0.502)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.65%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(827.253086419753%2067.27109053497942)%20scale(0.258)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.62%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(856.9084362139918%20579.4753086419753)%20scale(0.263)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.45%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1008.4773662551439%20450.78446502057614)%20scale(0.287)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.77%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(85.66358024691358%20105.27263374485597)%20scale(0.284)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.60%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(847.7263374485597%20478.125)%20scale(0.534)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.53%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(942.8137860082304%20482.30452674897117)%20scale(0.471)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.41%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(241.2962962962963%20275.218621399177)%20scale(0.418)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.41%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(569.0997942386831%20125.38580246913581)%20scale(0.520)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.61%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(241.03909465020575%20279.10236625514403)%20scale(0.479)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.52%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(194.15123456790124%2027.109053497942387)%20scale(0.384)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.54%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(121.02880658436214%20171.25771604938274)%20scale(0.547)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.73%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(203.15329218106996%20491.17798353909467)%20scale(0.337)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.67%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(44.22839506172839%2010.943930041152264)%20scale(0.508)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.59%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(803.5133744855967%2065.74074074074075)%20scale(0.341)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.47%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(929.156378600823%20568.531378600823)%20scale(0.369)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.46%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1091.5277777777778%20276.7232510288066)%20scale(0.515)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.58%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(316.55349794238685%20458.8348765432099)%20scale(0.525)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.77%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(119.04835390946502%20561.1625514403293)%20scale(0.300)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.38%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1036.0493827160494%20274.44701646090533)%20scale(0.429)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.56%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1160.1491769547324%20200.54012345679013)%20scale(0.525)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.77%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(272.8292181069959%20519.0715020576131)%20scale(0.455)%27%20fill=%27rgb(245,240,232)%27%20opacity=%270.45%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1177.7932098765432%2054.11522633744856)%20scale(0.276)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.56%27/%3E%3C/svg%3E"), /* Resplandor cálido lejano (arriba-derecha) */ radial-gradient(ellipse 70% 50% at 78% 18%, oklch(58% 0.09 70 / 0.22) 0%, transparent 60%), /* Resplandor frío azul (centro-superior) */ radial-gradient(ellipse 80% 60% at 50% 30%, oklch(55% 0.12 250 / 0.28) 0%, transparent 65%), /* Nebulosa violeta/índigo (izquierda) */ radial-gradient(ellipse 60% 70% at 12% 55%, oklch(38% 0.13 285 / 0.45) 0%, transparent 70%), /* Nebulosa azul profundo (derecha-baja) */ radial-gradient(ellipse 65% 55% at 88% 78%, oklch(30% 0.11 260 / 0.50) 0%, transparent 70%), /* Velo central oscuro */ radial-gradient(circle at 50% 50%, oklch(22% 0.06 255 / 0.35) 0%, transparent 75%), /* Degradado cósmico base diagonal */ linear-gradient(165deg, var(--sky-deep) 0%, var(--sky-mid) 28%, var(--sky-indigo) 58%, var(--sky-mid) 82%, var(--sky-deep) 100% ); background-size: 900px 700px, 1200px 600px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%; background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; filter: drop-shadow(0 0 5px rgba(248, 220, 160, 0.35)); animation: starDriftSlow 240s linear infinite; } /* Capa media de Parallax: ~55 estrellas medianas (5–10px) de 5 puntas */ .starry-bg::before { content: ''; position: absolute; inset: 0; z-index: -2; background: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%201200%20600%27%20width=%271200%27%20height=%27600%27%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1063.0606995884773%20490.5761316872428)%20scale(0.979)%27%20fill=%27rgb(253,251,247)%27%20opacity=%270.77%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(865.2469135802469%20357.5643004115226)%20scale(0.527)%27%20fill=%27rgb(253,251,247)%27%20opacity=%270.86%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(852.3096707818929%20192.91666666666669)%20scale(0.871)%27%20fill=%27rgb(253,251,247)%27%20opacity=%270.95%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1072.3971193415637%20109.59619341563787)%20scale(0.567)%27%20fill=%27rgb(253,251,247)%27%20opacity=%270.88%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(195.87962962962965%20265.0102880658436)%20scale(0.656)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.82%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(48.68312757201646%20327.6774691358025)%20scale(0.879)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.84%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(145.6224279835391%20543.8940329218107)%20scale(0.738)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.90%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(223.73456790123458%20204.40072016460906)%20scale(0.882)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.56%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1175.6121399176955%20111.0493827160494)%20scale(0.831)%27%20fill=%27rgb(253,251,247)%27%20opacity=%270.67%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(782.7366255144033%2043.46965020576132)%20scale(0.532)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.86%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1048.8117283950617%20225.73559670781893)%20scale(0.745)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.93%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(733.0967078189301%20193.03240740740742)%20scale(0.768)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.87%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(683.7397119341564%20458.3230452674897)%20scale(0.991)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.80%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(371.1111111111111%20379.0149176954733)%20scale(0.787)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.75%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(21.136831275720166%2023.626543209876544)%20scale(0.731)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.66%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1148.6316872427983%2038.45421810699589)%20scale(0.658)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.75%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(690.6327160493827%20114.23868312757202)%20scale(0.551)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.85%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(339.73251028806584%20252.8317901234568)%20scale(0.763)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.89%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1077.4125514403293%2033.86316872427984)%20scale(0.573)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.74%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(907.3765432098766%2081.40689300411522)%20scale(0.577)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.88%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(588.883744855967%20330.64814814814815)%20scale(0.904)%27%20fill=%27rgb(253,251,247)%27%20opacity=%270.78%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(570.082304526749%20494.54989711934155)%20scale(0.779)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.81%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1121.3425925925926%20330.51954732510285)%20scale(0.908)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.87%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(868.5905349794239%20307.07561728395063)%20scale(0.698)%27%20fill=%27rgb(253,251,247)%27%20opacity=%270.77%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(926.6409465020577%20270.51440329218104)%20scale(0.818)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.59%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(232.53086419753086%20311.57664609053495)%20scale(0.584)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.84%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(78.85288065843622%20232.1141975308642)%20scale(0.684)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.89%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1047.0884773662551%2011.756687242798353)%20scale(0.730)%27%20fill=%27rgb(253,251,247)%27%20opacity=%270.91%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(740.9413580246913%2074.57818930041152)%20scale(0.649)%27%20fill=%27rgb(253,251,247)%27%20opacity=%270.83%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(719.6707818930041%20155.76388888888889)%20scale(0.906)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.78%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1031.4248971193415%20368.27674897119346)%20scale(0.557)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.61%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(346.5740740740741%20269.5241769547325)%20scale(0.643)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.88%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(491.04423868312756%20128.02469135802468)%20scale(0.904)%27%20fill=%27rgb(253,251,247)%27%20opacity=%270.87%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(979.6502057613169%20190.07458847736623)%20scale(0.842)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.92%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(349.42901234567904%20346.41460905349794)%20scale(0.608)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.62%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(692.9732510288067%20198.8966049382716)%20scale(0.720)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.79%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(991.764403292181%20127.15020576131687)%20scale(0.626)%27%20fill=%27rgb(253,251,247)%27%20opacity=%270.68%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(849.5061728395062%20355.2494855967078)%20scale(0.585)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.87%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(225.45781893004116%20418.3796296296296)%20scale(0.896)%27%20fill=%27rgb(253,251,247)%27%20opacity=%270.58%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1167.767489711934%20229.50360082304528)%20scale(0.950)%27%20fill=%27rgb(253,251,247)%27%20opacity=%270.71%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(746.8055555555555%20346.02880658436214)%20scale(0.617)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.88%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(388.49794238683126%20236.47376543209876)%20scale(0.974)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.66%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(407.6594650205761%20547.1347736625514)%20scale(0.856)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.65%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(141.32716049382717%20368.7525720164609)%20scale(0.745)%27%20fill=%27rgb(253,251,247)%27%20opacity=%270.68%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(82.09362139917695%20303.179012345679)%20scale(0.996)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.68%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(11.440329218106996%20530.0437242798354)%20scale(0.886)%27%20fill=%27rgb(253,251,247)%27%20opacity=%270.93%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(333.070987654321%20473.4207818930041)%20scale(0.511)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.70%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(606.2448559670781%2068.49537037037037)%20scale(0.502)%27%20fill=%27rgb(253,251,247)%27%20opacity=%270.66%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(79.11008230452674%20228.23045267489712)%20scale(0.582)%27%20fill=%27rgb(253,251,247)%27%20opacity=%270.79%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(222.03703703703704%20110.03343621399176)%20scale(0.956)%27%20fill=%27rgb(253,251,247)%27%20opacity=%270.58%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(860.951646090535%20182.42283950617286)%20scale(0.535)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.64%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(710.6687242798354%20291.69495884773664)%20scale(0.985)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.66%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1108.2253086419753%20528.5905349794239)%20scale(0.623)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.74%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(946.2139917695473%2094.96141975308642)%20scale(0.636)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.66%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(806.1162551440328%20170.4372427983539)%20scale(0.636)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.58%27/%3E%3C/svg%3E"); background-size: 1200px 600px; background-repeat: repeat; animation: starDriftMedium 160s linear infinite, twinkleMedium 8s ease-in-out infinite alternate; opacity: 0.9; } /* Capa cercana de Parallax: ~28 estrellas grandes brillantes (10–18px) de 5 puntas */ .starry-bg::after { content: ''; position: absolute; inset: 0; z-index: -1; background: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%201200%20600%27%20width=%271200%27%20height=%27600%27%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(808.3024691358024%20137.42541152263374)%20scale(1.381)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.86%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(878.698559670782%20514.4444444444445)%20scale(1.762)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.77%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(182.119341563786%20472.7906378600823)%20scale(1.129)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.87%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(988.9351851851852%20169.87139917695475)%20scale(1.351)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.76%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(325.07201646090533%20474.2052469135802)%20scale(1.065)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.75%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(105.34465020576131%20432.0884773662552)%20scale(1.173)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.81%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(66.79012345679013%20534.2618312757202)%20scale(1.044)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.91%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1102.0010288065844%20382.5771604938272)%20scale(1.615)%27%20fill=%27rgb(253,251,247)%27%20opacity=%270.83%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(992.4588477366254%20356.6640946502058)%20scale(0.989)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.84%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(541.8672839506173%2080.59670781893004)%20scale(1.435)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.81%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(909.4855967078189%20289.56018518518516)%20scale(1.689)%27%20fill=%27rgb(248,220,160)%27%20opacity=%271.00%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(543.4619341563787%20296.51748971193416)%20scale(1.554)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.98%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(114.16666666666666%2058.87602880658436)%20scale(1.699)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.75%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1047.525720164609%20245.15432098765433)%20scale(1.361)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.80%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(58.35390946502057%20301.64866255144034)%20scale(1.142)%27%20fill=%27rgb(248,220,160)%27%20opacity=%271.00%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(83.68827160493827%20519.0997942386831)%20scale(1.011)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.99%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(416.12139917695475%20299.3595679012346)%20scale(1.605)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.99%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(837.1347736625514%20422.05761316872423)%20scale(1.627)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.92%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(550.4320987654321%20311.2680041152263)%20scale(1.246)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.81%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(315.27263374485597%20502.1759259259259)%20scale(1.598)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.85%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(579.8045267489712%20107.74434156378601)%20scale(1.285)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.76%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(414.39814814814815%2085.38065843621399)%20scale(1.578)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.98%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(844.9794238683128%20303.6033950617284)%20scale(1.413)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.90%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(586.3631687242798%208.708847736625515)%20scale(1.092)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.80%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(975.5864197530864%20491.43775720164604)%20scale(1.184)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.77%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(905.2417695473251%20353.6419753086419)%20scale(1.126)%27%20fill=%27rgb(253,251,247)%27%20opacity=%270.90%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(956.8106995884774%20174.9511316872428)%20scale(1.121)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.81%27/%3E%3Cpolygon%20points=%275,0.5%206.2,3.8%209.7,3.8%206.85,5.95%207.95,9.25%205,7.15%202.05,9.25%203.15,5.95%200.3,3.8%203.8,3.8%27%20transform=%27translate(1133.9969135802469%20379.43930041152265)%20scale(1.038)%27%20fill=%27rgb(248,220,160)%27%20opacity=%270.94%27/%3E%3C/svg%3E"); background-size: 1200px 600px; background-repeat: repeat; filter: drop-shadow(0 0 4px rgba(248,220,160,0.6)); animation: starDriftFast 100s linear infinite, twinkleFast 5s ease-in-out infinite alternate; opacity: 1; } @keyframes starDriftSlow { /* Capas: 2 tiles de estrellas con drift + 6 capas fijas (5 nebulosas + base) */ from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } to { background-position: -900px 700px, -1200px 600px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } } @keyframes starDriftMedium { from { background-position: 0 0; } to { background-position: -1200px 600px; } } @keyframes starDriftFast { from { background-position: 0 0; } to { background-position: -1200px 700px; } } @keyframes twinkleMedium { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } } @keyframes twinkleFast { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } /* ═══════════════════════════════════════════════════════════════════════════ ESTRELLAS DE 4 PUNTAS — campo decorativo en el cielo Se monta sobre .starry-bg (sin tocar HTML) usando un wrapper de sombras puntuales. La idea: pequeñas estrellas-destello fijas distribuidas por la pantalla, con titileo escalonado. ═══════════════════════════════════════════════════════════════════════════ */ .starry-bg { /* Refuerza una capa de "polvo de cuatro puntas" sobre el degradado base usando un único pseudo-elemento extra mediante mask-image no es posible en un mismo selector — para varias estrellas usamos el sistema de clases utilitarias .sky-sparkle y el campo aleatorio en body::before (más abajo). */ } /* Utilitaria opcional: el HTML puede agregar en cualquier parte para sembrar una estrella de 4 puntas con titileo. */ .sky-sparkle { position: absolute; width: 10px; height: 10px; background: var(--accent-light); clip-path: polygon(50% 5%, 61% 38%, 96% 38%, 68% 59%, 79% 92%, 50% 72%, 21% 92%, 32% 59%, 4% 38%, 39% 38%); filter: drop-shadow(0 0 4px rgba(248, 220, 160, 0.7)); animation: skySparkleTwinkle 4.5s ease-in-out infinite; pointer-events: none; z-index: -1; } .sky-sparkle.sm { width: 6px; height: 6px; animation-duration: 3.8s; } .sky-sparkle.md { width: 10px; height: 10px; animation-duration: 4.5s; } .sky-sparkle.lg { width: 14px; height: 14px; animation-duration: 5.5s; } .sky-sparkle.d1 { animation-delay: 0.4s; } .sky-sparkle.d2 { animation-delay: 1.1s; } .sky-sparkle.d3 { animation-delay: 1.8s; } .sky-sparkle.d4 { animation-delay: 2.6s; } .sky-sparkle.d5 { animation-delay: 3.3s; } @keyframes skySparkleTwinkle { 0%, 100% { transform: scale(0.7); opacity: 0.35; filter: drop-shadow(0 0 2px rgba(248, 220, 160, 0.3)); } 50% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 8px var(--accent-light)); } } /* ═══════════════════════════════════════════════════════════════════════════ CAMPO DE ESTRELLAS DE 4 PUNTAS — sembrado automático sobre Usamos body::before como contenedor adicional (no toca el HTML). Sembramos múltiples estrellitas con box-shadow + clip-path. ═══════════════════════════════════════════════════════════════════════════ */ body::before { /* Removido — el campo de estrellas grandes vive ahora en .starry-bg::before */ content: none; } @keyframes skyFieldDrift { from { background-position: 0 0; } to { background-position: -900px 700px; } } @keyframes skyFieldTwinkle { 0%, 100% { opacity: 0.85; transform: scale(0.98); } 50% { opacity: 1; transform: scale(1.02); } } /* ═══════════════════════════════════════════════════════════════════════════ ESTRELLAS FUGACES — cabeza dorada de 4 puntas + cola luminosa Implementadas en body::after (sin tocar HTML). La "cola" se dibuja con un ::before del propio body::after (no se puede), entonces la simulamos con un gradiente lineal proyectado vía filter + un trail con box-shadow alargado. Estrategia real: · body::after = la cabeza (estrella 4 puntas dorada). · La cola = pseudo-elemento extra no disponible. Por eso la cola se consigue con drop-shadow MÚLTIPLE + un fondo lineal de la propia "cabeza" extendido. Para producir varias estrellas fugaces alternadas usamos un keyframe con varios "tramos" (cada estrella aparece en un porcentaje distinto del ciclo). Para una cola más realista, ofrecemos además las clases utilitarias .shooting-star y .shooting-star-2 (más abajo) por si el HTML las usa. ═══════════════════════════════════════════════════════════════════════════ */ body::after { content: ''; position: fixed; top: 0; left: 0; width: 16px; height: 16px; background: var(--accent-light); clip-path: polygon(50% 5%, 61% 38%, 96% 38%, 68% 59%, 79% 92%, 50% 72%, 21% 92%, 32% 59%, 4% 38%, 39% 38%); filter: drop-shadow(0 0 6px var(--accent-light)) drop-shadow(0 0 14px rgba(230, 184, 92, 0.55)); pointer-events: none; z-index: 0; opacity: 0; /* Ciclo de 12s con 5 trayectorias distintas — más frecuentes y variadas. */ animation: shootingStarCycle 12s ease-in infinite; will-change: transform, opacity; } /* Cabeza dorada de 5 puntas que cruza la pantalla en diagonal. 5 trayectorias dentro del mismo ciclo → la vista percibe estrellas fugaces intermitentes y "aleatorias" en distintos ángulos y zonas del cielo. */ @keyframes shootingStarCycle { /* Estrella 1 — arriba-izquierda → centro-derecha (descendiendo suave) */ 0% { transform: translate(-8vw, 6vh) rotate(-22deg) scale(0.6); opacity: 0; } 1.5% { opacity: 1; } 9% { transform: translate(65vw, 42vh) rotate(-22deg) scale(1); opacity: 0; } 9.01%, 19% { transform: translate(-50vw, -50vh) rotate(0) scale(0); opacity: 0; } /* Estrella 2 — centro-arriba → derecha-baja (más pronunciada) */ 19% { transform: translate(30vw, 4vh) rotate(32deg) scale(0.6); opacity: 0; } 20.5% { opacity: 1; } 29% { transform: translate(102vw, 62vh) rotate(32deg) scale(1); opacity: 0; } 29.01%, 38% { transform: translate(-50vw, -50vh) rotate(0) scale(0); opacity: 0; } /* Estrella 3 — izquierda-media → centro-baja (casi horizontal) */ 38% { transform: translate(-8vw, 28vh) rotate(-8deg) scale(0.6); opacity: 0; } 39.5% { opacity: 1; } 48% { transform: translate(72vw, 78vh) rotate(-8deg) scale(1); opacity: 0; } 48.01%, 58% { transform: translate(-50vw, -50vh) rotate(0) scale(0); opacity: 0; } /* Estrella 4 — arriba-derecha → izquierda-media (atraviesa hacia el otro lado) */ 58% { transform: translate(95vw, 8vh) rotate(160deg) scale(0.6); opacity: 0; } 59.5% { opacity: 1; } 68% { transform: translate(20vw, 55vh) rotate(160deg) scale(1); opacity: 0; } 68.01%, 78% { transform: translate(-50vw, -50vh) rotate(0) scale(0); opacity: 0; } /* Estrella 5 — alta-izquierda → derecha-media (diagonal larga) */ 78% { transform: translate(-5vw, 18vh) rotate(-14deg) scale(0.6); opacity: 0; } 79.5% { opacity: 1; } 89% { transform: translate(108vw, 70vh) rotate(-14deg) scale(1); opacity: 0; } 89.01%, 100% { transform: translate(-50vw, -50vh) rotate(0) scale(0); opacity: 0; } } /* ── Estrellas fugaces EXTRA via html::before / html::after ──────────────── Sumamos 2 trayectorias más, con su propio ciclo y desfasaje, así el cielo tiene "lluvia" continua de fugaces sin saturar. Estas TIENEN cola luminosa (mediante un gradiente lineal aplicado como background del propio pseudo-elemento, alineado con el ángulo del recorrido). */ html::before, html::after { content: ''; position: fixed; top: 0; left: 0; width: 14px; height: 14px; background: /* Cola luminosa horizontal que termina en la cabeza */ linear-gradient(90deg, transparent 0%, rgba(230, 184, 92, 0.0) 40%, rgba(248, 220, 160, 0.55) 75%, rgba(248, 220, 160, 0.95) 100%); /* La cola se proyecta a la izquierda con box-shadow alargado */ box-shadow: -10px 0 0 0 rgba(248, 220, 160, 0.0), -120px 0 0 -6px rgba(248, 220, 160, 0.5); pointer-events: none; z-index: 0; opacity: 0; filter: drop-shadow(0 0 6px var(--accent-light)) drop-shadow(0 0 14px rgba(230, 184, 92, 0.55)); will-change: transform, opacity; } html::before { /* Recorrido A — diagonal media, desfasada 4s */ animation: shootingStarA 10s ease-in 4s infinite; } html::after { /* Recorrido B — diagonal opuesta, desfasada 7s */ animation: shootingStarB 11s ease-in 7s infinite; } @keyframes shootingStarA { 0% { transform: translate(-10vw, 20vh) rotate(-16deg); opacity: 0; } 4% { opacity: 1; } 18% { transform: translate(85vw, 65vh) rotate(-16deg); opacity: 0; } 100% { transform: translate(85vw, 65vh) rotate(-16deg); opacity: 0; } } @keyframes shootingStarB { 0% { transform: translate(60vw, -10vh) rotate(40deg); opacity: 0; } 4% { opacity: 1; } 18% { transform: translate(110vw, 70vh) rotate(40deg); opacity: 0; } 100% { transform: translate(110vw, 70vh) rotate(40deg); opacity: 0; } } /* ── Clases utilitarias por si el HTML quiere instanciar estrellas fugaces adicionales en cualquier sección. Estas SÍ tienen cola real (porque tienen su propio ::before/::after disponibles). ── */ .shooting-star, .shooting-star-2, .shooting-star-3 { position: fixed; top: 0; left: 0; width: 14px; height: 14px; background: var(--accent-light); clip-path: polygon(50% 5%, 61% 38%, 96% 38%, 68% 59%, 79% 92%, 50% 72%, 21% 92%, 32% 59%, 4% 38%, 39% 38%); filter: drop-shadow(0 0 6px var(--accent-light)) drop-shadow(0 0 14px rgba(230, 184, 92, 0.55)); pointer-events: none; z-index: -1; opacity: 0; will-change: transform, opacity; } /* Cola luminosa que se desvanece (se proyecta a la izquierda de la cabeza) */ .shooting-star::before, .shooting-star-2::before, .shooting-star-3::before { content: ''; position: absolute; top: 50%; right: 100%; /* nace en el borde izquierdo de la cabeza y se extiende */ width: 140px; height: 2px; transform: translateY(-50%); background: linear-gradient( 270deg, rgba(248, 220, 160, 0.95) 0%, rgba(230, 184, 92, 0.6) 30%, rgba(230, 184, 92, 0.2) 70%, transparent 100% ); border-radius: 2px; filter: blur(0.5px); pointer-events: none; } .shooting-star { animation: shootingStar1 9s ease-in 1.2s infinite; } .shooting-star-2 { animation: shootingStar2 11s ease-in 4.8s infinite; } .shooting-star-3 { animation: shootingStar3 13s ease-in 8.4s infinite; } @keyframes shootingStar1 { 0% { transform: translate(-10vw, 12vh) rotate(-22deg); opacity: 0; } 3% { opacity: 1; } 14% { transform: translate(75vw, 52vh) rotate(-22deg); opacity: 0; } 100% { transform: translate(75vw, 52vh) rotate(-22deg); opacity: 0; } } @keyframes shootingStar2 { 0% { transform: translate(40vw, -8vh) rotate(32deg); opacity: 0; } 3% { opacity: 1; } 16% { transform: translate(105vw, 60vh) rotate(32deg); opacity: 0; } 100% { transform: translate(105vw, 60vh) rotate(32deg); opacity: 0; } } @keyframes shootingStar3 { 0% { transform: translate(-10vw, 38vh) rotate(-10deg); opacity: 0; } 3% { opacity: 1; } 18% { transform: translate(85vw, 92vh) rotate(-10deg); opacity: 0; } 100% { transform: translate(85vw, 92vh) rotate(-10deg); opacity: 0; } } /* ═══════════════════════════════════════════════════════════════════════════ POLVO DE ESTRELLAS DORADO — un poco más vivo ═══════════════════════════════════════════════════════════════════════════ */ .gold-particles { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .gold-particles::before, .gold-particles::after { content: ''; position: absolute; border-radius: 50%; } /* Polvo de estrellas mediano (flotación super lenta) */ .gold-particles::before { width: 4px; height: 4px; background: var(--accent); box-shadow: 150px 80px 0 -1px rgba(230, 184, 92, 0.6), 320px 240px 0 0px rgba(248, 220, 160, 0.55), 580px 140px 0 -2px rgba(230, 184, 92, 0.4), 740px 320px 0 1px rgba(248, 220, 160, 0.7), 220px 450px 0 0px rgba(230, 184, 92, 0.5), 480px 520px 0 -1px rgba(230, 184, 92, 0.8), 680px 410px 0 1px rgba(248, 220, 160, 0.4), 890px 360px 0 0px rgba(230, 184, 92, 0.5), 90px 380px 0 -1px rgba(248, 220, 160, 0.6), 1080px 200px 0 0px rgba(230, 184, 92, 0.45), 1260px 460px 0 -1px rgba(248, 220, 160, 0.55); animation: goldFloatSlow 48s ease-in-out infinite; filter: blur(0.5px) drop-shadow(0 0 3px rgba(230, 184, 92, 0.35)); } /* Polvo de estrellas fino (flotación aún más lenta con retraso) */ .gold-particles::after { width: 2px; height: 2px; background: var(--accent-light); box-shadow: 90px 160px 0 0px rgba(230, 184, 92, 0.5), 270px 60px 0 -1px rgba(248, 220, 160, 0.4), 490px 290px 0 1px rgba(230, 184, 92, 0.4), 640px 190px 0 0px rgba(248, 220, 160, 0.6), 810px 440px 0 -1px rgba(230, 184, 92, 0.7), 170px 310px 0 1px rgba(248, 220, 160, 0.3), 390px 490px 0 0px rgba(230, 184, 92, 0.6), 590px 370px 0 -1px rgba(230, 184, 92, 0.5), 910px 270px 0 1px rgba(248, 220, 160, 0.4), 1140px 380px 0 0px rgba(230, 184, 92, 0.45), 1320px 150px 0 -1px rgba(248, 220, 160, 0.4); animation: goldFloatSlower 64s ease-in-out 8s infinite; filter: blur(0.2px) drop-shadow(0 0 2px rgba(248, 220, 160, 0.4)); } @keyframes goldFloatSlow { 0% { transform: translateY(105vh) translateX(0) scale(0.8); opacity: 0; } 10% { opacity: 0.8; } 50% { transform: translateY(50vh) translateX(25px) scale(1.1); opacity: 1; } 90% { opacity: 0.65; } 100% { transform: translateY(-5vh) translateX(-15px) scale(0.8); opacity: 0; } } @keyframes goldFloatSlower { 0% { transform: translateY(105vh) translateX(0) scale(1); opacity: 0; } 15% { opacity: 0.65; } 60% { transform: translateY(40vh) translateX(-30px) scale(0.9); opacity: 0.9; } 85% { opacity: 0.55; } 100% { transform: translateY(-5vh) translateX(20px) scale(1.2); opacity: 0; } } /* ── Brillo y Titileo (Twinkling) individual ── */ @keyframes twinkle { 0%, 100% { opacity: 0.35; filter: drop-shadow(0 0 1px rgba(248, 220, 160, 0.25)); } 50% { opacity: 1; filter: drop-shadow(0 0 8px var(--accent-light)); } } .star-twinkle { animation: twinkle 4s ease-in-out infinite; } /* Brillo dorado celestial — un punto más vivo */ .gold-glow { box-shadow: 0 0 30px rgba(230, 184, 92, 0.28), 0 0 60px rgba(230, 184, 92, 0.12); } /* ═══════════════════════════════════════════════════════════════════════════ ELEMENTOS ORNAMENTALES EXCLUSIVOS (estilo invitación de gala) ═══════════════════════════════════════════════════════════════════════════ */ /* Línea decorativa con destello dorado */ .gold-rule { position: relative; height: 1px; max-width: 240px; background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent); margin: 1.75rem auto; } .gold-rule::before { content: '✦'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--accent-light); font-size: 0.85rem; background: var(--bg-soft); padding: 0 8px; font-family: var(--font-display); text-shadow: 0 0 8px rgba(248, 220, 160, 0.6); } /* Divisor Celestial con estrella de 4 puntas */ .celestial-divider { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin: 2.5rem auto; max-width: 350px; } .celestial-divider::before, .celestial-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent); } .celestial-divider-star { width: 14px; height: 14px; background: var(--accent-light); clip-path: polygon(50% 5%, 61% 38%, 96% 38%, 68% 59%, 79% 92%, 50% 72%, 21% 92%, 32% 59%, 4% 38%, 39% 38%); animation: pulseTwinkle 3.5s ease-in-out infinite; filter: drop-shadow(0 0 4px rgba(248, 220, 160, 0.7)); } @keyframes pulseTwinkle { 0%, 100% { transform: scale(0.85); opacity: 0.7; filter: drop-shadow(0 0 2px var(--accent-light)); } 50% { transform: scale(1.18); opacity: 1; filter: drop-shadow(0 0 10px var(--accent-light)); } } /* Contenedor tipo Tarjeta de Gala — brillo dorado sutilmente reforzado */ .celestial-card { position: relative; background: rgba(20, 36, 87, 0.62); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(230, 184, 92, 0.30); border-radius: var(--radius-md); padding: 2.5rem 2rem; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 35px rgba(230, 184, 92, 0.10); transition: var(--transition-smooth); } .celestial-card:hover { border-color: rgba(230, 184, 92, 0.5); box-shadow: 0 24px 55px rgba(0, 0, 0, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 0 50px rgba(230, 184, 92, 0.18); } /* Marco decorativo interno clásico */ .celestial-border { position: relative; } .celestial-border::before { content: ''; position: absolute; inset: -12px; border: 1px solid rgba(230, 184, 92, 0.16); border-radius: calc(var(--radius-md) - 4px); pointer-events: none; } /* Título o texto con efecto oro metálico brillante — un toque más luminoso */ .gold-text { background: linear-gradient(135deg, #fefdfb 0%, #f4dba8 35%, #e6b85c 75%, #a47b31 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: var(--accent); /* Fallback */ font-weight: 600; letter-spacing: 0.08em; text-shadow: 0 0 18px rgba(230, 184, 92, 0.12); } /* Medalla o badge celestial (para iconos o iniciales) */ .celestial-badge { width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(230, 184, 92, 0.40); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; background: rgba(26, 42, 95, 0.6); box-shadow: 0 0 24px rgba(230, 184, 92, 0.20), inset 0 0 10px rgba(230, 184, 92, 0.08); position: relative; transition: var(--transition-smooth); } .celestial-badge:hover { border-color: var(--accent-light); box-shadow: 0 0 30px rgba(230, 184, 92, 0.38); } .celestial-badge-icon { width: 12px; height: 12px; background: var(--accent-light); clip-path: polygon(50% 5%, 61% 38%, 96% 38%, 68% 59%, 79% 92%, 50% 72%, 21% 92%, 32% 59%, 4% 38%, 39% 38%); animation: pulseTwinkle 3s ease-in-out infinite; filter: drop-shadow(0 0 3px rgba(248, 220, 160, 0.6)); } /* Crescent Moon dibujada en puro CSS para uso ornamental */ .crescent-moon-icon { width: 18px; height: 18px; border-radius: 50%; box-shadow: 4px 4px 0 0 var(--accent-light); transform: rotate(-25deg) scale(0.9); margin-top: -6px; margin-left: -6px; } /* Estrella decorativa al costado de encabezados */ .heading-sparkle { position: relative; display: inline-block; } .heading-sparkle::before, .heading-sparkle::after { content: ''; position: absolute; width: 9px; height: 9px; background: var(--accent-light); clip-path: polygon(50% 5%, 61% 38%, 96% 38%, 68% 59%, 79% 92%, 50% 72%, 21% 92%, 32% 59%, 4% 38%, 39% 38%); animation: pulseTwinkle 4s ease-in-out infinite; filter: drop-shadow(0 0 4px rgba(248, 220, 160, 0.6)); } .heading-sparkle::before { left: -22px; top: 52%; transform: translateY(-50%); animation-delay: 0.5s; } .heading-sparkle::after { right: -22px; top: 52%; transform: translateY(-50%); animation-delay: 2s; } /* Botón Lujoso de Gala — brillo sutilmente reforzado */ .celestial-btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--bg); background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 50%, var(--accent-light) 100%); border: none; border-radius: var(--radius-sm); padding: 0.95rem 2.25rem; box-shadow: 0 4px 22px rgba(230, 184, 92, 0.32), 0 0 0 1px rgba(248, 220, 160, 0.25) inset; cursor: pointer; transition: var(--transition-smooth); position: relative; overflow: hidden; text-decoration: none; } .celestial-btn::after { content: ''; position: absolute; top: -50%; left: -60%; width: 20%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: rotate(30deg); transition: none; } .celestial-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(230, 184, 92, 0.48), 0 0 0 1px rgba(248, 220, 160, 0.35) inset; } .celestial-btn:hover::after { left: 140%; transition: left 1.2s cubic-bezier(0.19, 1, 0.22, 1); } .celestial-btn:active { transform: translateY(1px); box-shadow: 0 2px 10px rgba(230, 184, 92, 0.25); } /* ── Mejoras de Tipografía y Espaciado para Modo Oscuro Fino ── */ p, span, li { font-weight: 300; /* Peso ligero y elegante */ letter-spacing: 0.03em; line-height: 1.65; } h1, h2, h3, h4 { letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; } /* ═══════════════════════════════════════════════════════════════════════════ ACCESIBILIDAD — prefers-reduced-motion Pausa estrellas fugaces y suaviza titileos / drifts para usuarios que prefieran menos movimiento. ═══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .starry-bg, .starry-bg::before, .starry-bg::after, .gold-particles::before, .gold-particles::after, html::before, html::after, body::before, body::after, .shooting-star, .shooting-star-2, .shooting-star-3, .star-twinkle, .celestial-divider-star, .celestial-badge-icon, .heading-sparkle::before, .heading-sparkle::after, .sky-sparkle { animation: none !important; } /* Mantenemos opacidad visible para que no desaparezcan los elementos */ body::after, html::before, html::after, .shooting-star, .shooting-star-2, .shooting-star-3 { opacity: 0; /* las estrellas fugaces no son esenciales: las ocultamos */ } body::before { opacity: 0.7; } } /* ═══════════════════════════════════════════════════════════════════════════ VIAJE POR LAS ESTRELLAS — "warp / hyperspace" Efecto de cabina de nave espacial: estrellas que estallan desde el centro y se alargan en estelas al acelerar. Se activa agregando la clase `.warp-active` al (lo hace theme-warp.js cuando se clickea el botón de "Ingresar"). El overlay y los streaks se generan dinámicamente desde JS. ═══════════════════════════════════════════════════════════════════════════ */ /* Contenedor full-screen del viaje. Lo crea el JS y vive sobre todo el resto. Empieza visible (no usamos transition de opacity para evitar conflictos); los streaks aparecen desde el centro animados por su propia keyframe. */ .warp-overlay { position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: hidden; opacity: 1; /* Túnel oscuro: viñeta hacia los bordes que enfatiza el punto de fuga central */ background: radial-gradient(ellipse at center, transparent 0%, rgba(10, 22, 58, 0.35) 45%, rgba(10, 22, 58, 0.85) 85%, rgba(5, 8, 28, 0.95) 100%); /* Pequeño fade-in via animation (más confiable que transition recién agregada) */ animation: warpOverlayFade 0.35s ease-out; } @keyframes warpOverlayFade { from { opacity: 0; } to { opacity: 1; } } /* Cada streak es una línea fina dorada con gradiente que va de transparente (cola, junto al centro) a brillante (cabeza, hacia afuera). El anclaje en transform-origin: 0% 50% permite rotar y trasladar hacia afuera de forma radial desde el centro. */ .warp-streak { position: absolute; top: 50%; left: 50%; width: 90px; height: 2px; background: linear-gradient( 90deg, transparent 0%, rgba(248, 220, 160, 0.0) 10%, rgba(248, 220, 160, 0.55) 55%, rgba(255, 245, 210, 0.95) 90%, #ffffff 100% ); border-radius: 2px; transform-origin: 0% 50%; filter: drop-shadow(0 0 4px rgba(248, 220, 160, 0.65)); /* Variables que setea el JS por streak — angle, delay, duration, depth */ --angle: 0deg; --delay: 0s; --duration: 1.6s; --depth: 1; --max-dist: 90vmax; animation: warpStreak var(--duration) cubic-bezier(0.45, 0, 0.85, 1) var(--delay) infinite; will-change: transform, opacity; } /* Algunas estrellas más brillantes (head bigger) y blancas para variar el cielo */ .warp-streak.bright { background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.0) 10%, rgba(255, 245, 210, 0.7) 55%, #ffffff 100% ); filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9)); height: 3px; } /* Animación del streak: · 0%: punto invisible en el centro · 8%: aparece pequeño y empieza a moverse · 100%: alcanza el borde, alargado y a máxima intensidad La traslación se hace en el eje X local (que es radial gracias al rotate). */ @keyframes warpStreak { 0% { transform: rotate(var(--angle)) translateX(0) scaleX(0.15); opacity: 0; } 8% { opacity: calc(0.35 * var(--depth)); transform: rotate(var(--angle)) translateX(4vmax) scaleX(0.25); } 60% { opacity: calc(0.85 * var(--depth)); } 100% { transform: rotate(var(--angle)) translateX(var(--max-dist)) scaleX(2.6); opacity: 1; } } /* Punto de fuga: pequeño halo dorado pulsando en el centro mientras dura el viaje */ .warp-core { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: radial-gradient(circle, #ffffff 0%, rgba(248, 220, 160, 0.9) 30%, rgba(248, 220, 160, 0.3) 60%, transparent 80%); filter: blur(0.5px) drop-shadow(0 0 20px rgba(248, 220, 160, 0.8)); animation: warpCorePulse 1.4s ease-in-out infinite; } @keyframes warpCorePulse { 0%, 100% { transform: scale(0.6); opacity: 0.7; } 50% { transform: scale(1.3); opacity: 1; } } /* Flash blanco al final del viaje (salir del warp). Se activa cuando JS pone `.warp-ending` sobre el body durante el último ~250ms del efecto. */ .warp-flash { position: absolute; inset: 0; background: #ffffff; opacity: 0; pointer-events: none; } body.warp-ending .warp-flash { animation: warpFlash 0.45s ease-out forwards; } @keyframes warpFlash { 0% { opacity: 0; } 40% { opacity: 0.92; } 100% { opacity: 0; } } /* Mientras el warp está activo, el contenido detrás se oscurece levemente y se le aplica un sutil zoom para reforzar la sensación de aceleración. */ body.warp-active > :not(.warp-overlay) { animation: warpContentPush 1.6s cubic-bezier(0.5, 0, 0.9, 1) forwards; pointer-events: none; } @keyframes warpContentPush { 0% { transform: scale(1); filter: blur(0) brightness(1); } 60% { transform: scale(1.08); filter: blur(2px) brightness(0.6); } 100% { transform: scale(1.2); filter: blur(6px) brightness(0.3); opacity: 0; } } /* Reveal suave del contenido después del viaje — se activa con `.warp-reveal` en body. Más rápido y con opacidad como protagonista (la magia del fade-in). */ body.warp-reveal > :not(.warp-overlay) { animation: warpReveal 0.55s ease-out forwards; } /* Excepción: el `.entry-gate` NO debe re-animarse durante el reveal. Nota: el ocultamiento real lo hace theme-warp.js vía inline style (display:none), ya que las CSS animations tienen mayor prioridad de cascade que !important y no se pueden bloquear solo con CSS. */ body.warp-reveal .entry-gate { display: none !important; } @keyframes warpReveal { 0% { transform: scale(1.04); filter: blur(3px); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); filter: blur(0); opacity: 1; } } /* Accesibilidad: reduced motion → desactivar viaje, dejar solo un fade rápido */ @media (prefers-reduced-motion: reduce) { .warp-streak, .warp-core { animation: none !important; display: none !important; } body.warp-active > :not(.warp-overlay) { animation: none !important; opacity: 0; transition: opacity 0.4s ease-out; } } /* ═══════════════════════════════════════════════════════════════════════════ OPTIMIZACIONES PARA MOBILE (especialmente Android) Los `filter: drop-shadow()`, los box-shadow múltiples y los gradientes animados son MUY costosos en GPU de teléfonos. En pantallas chicas simplificamos sin perder la estética: menos efectos, animaciones más livianas, y un puñado de capas en lugar de todas a la vez. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 820px) { /* ── Fondo: sacar drop-shadow y desactivar los drifts de las capas secundarias (la profundidad principal del cielo se mantiene). ── */ .starry-bg { filter: none; animation: none; /* sin drift en la capa principal en mobile */ } .starry-bg::before { animation: twinkleMedium 8s ease-in-out infinite alternate; /* solo titileo, no drift */ } .starry-bg::after { filter: none; animation: twinkleFast 5s ease-in-out infinite alternate; } /* ── Polvo dorado: una sola capa, sin drop-shadow ── */ .gold-particles::before { filter: none; } .gold-particles::after { display: none; /* segunda capa fuera para aliviar */ } /* ── Campo de estrellas grandes (body::before): sin drop-shadow + sin drift, solo titileo suave. ── */ body::before { filter: none; animation: skyFieldTwinkle 6s ease-in-out infinite; } /* ── Estrellas fugaces: dejamos solo body::after, sacamos las extra (html::before/::after con cola dorada que llevan box-shadow + filtros). ── */ html::before, html::after { display: none; } body::after { filter: none; /* sin doble drop-shadow */ } /* ── Warp / viaje espacial: versión SUPER liviana para mobile ── Cambios clave para Android: · Overlay con color sólido (no radial-gradient — el browser repinta el gradiente full-screen cada frame y se le cae el FPS). · Streaks con background sólido en vez de linear-gradient (cada streak es solo una línea fina dorada). · Sin filter: drop-shadow ni blur (los más caros en GPU móvil). · El contenido detrás del warp solo se hace fade (sin scale/blur del page entero, que fuerza re-composición de capas grandes). · Cada streak con translateZ(0) → capa GPU dedicada, animaciones más fluidas y sin pintar en CPU. */ .warp-overlay { background: rgba(8, 12, 32, 0.88); /* sólido en vez de radial-gradient */ } .warp-streak { width: 70px; height: 1.5px; background: rgba(248, 220, 160, 0.95); /* sólido en vez de gradient */ filter: none; border-radius: 0; will-change: transform; } .warp-streak.bright { height: 2px; background: #ffffff; filter: none; } .warp-core { /* Halo más simple */ background: radial-gradient(circle, #fff 0%, rgba(248, 220, 160, 0.7) 60%, transparent 90%); filter: none; box-shadow: 0 0 12px rgba(248, 220, 160, 0.8); } /* Animación del streak: usa translate3d para forzar capa GPU ── */ .warp-streak { animation: warpStreakMobile var(--duration) cubic-bezier(0.45, 0, 0.85, 1) var(--delay) infinite; } @keyframes warpStreakMobile { 0% { transform: rotate(var(--angle)) translate3d(0, 0, 0) scaleX(0.2); opacity: 0; } 10% { transform: rotate(var(--angle)) translate3d(3vmax, 0, 0) scaleX(0.3); opacity: calc(0.5 * var(--depth)); } 100% { transform: rotate(var(--angle)) translate3d(var(--max-dist), 0, 0) scaleX(2.2); opacity: 1; } } /* Contenido detrás del warp: solo fade-out (sin scale ni blur ni brightness) */ body.warp-active > :not(.warp-overlay) { animation: warpFadeOutMobile 1.4s ease-in forwards; } @keyframes warpFadeOutMobile { 0% { opacity: 1; } 60% { opacity: 0.4; } 100% { opacity: 0; } } /* Reveal: solo fade-in (sin scale ni blur) */ body.warp-reveal > :not(.warp-overlay) { animation: warpFadeInMobile 0.45s ease-out forwards; } /* Mismo override del entry-gate en mobile */ body.warp-reveal .entry-gate { display: none !important; } @keyframes warpFadeInMobile { from { opacity: 0; } to { opacity: 1; } } } /* ═══════════════════════════════════════════════════════════════════════════ ITINERARIO — Sendero de estrellas en zig-zag Las 5 filas del cronograma se posicionan alternando lado (derecha / izquierda) y se conectan por una polilínea dorada punteada que zigzaguea entre ellas. Override decorativo del .schedule base (styles.css define el layout neutral). ═══════════════════════════════════════════════════════════════════════════ */ .schedule { position: relative; width: min(96vw, 380px); aspect-ratio: 380 / 780; margin: 2.2rem auto 1.2rem; display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 780' preserveAspectRatio='none'%3E%3Cpolyline points='248,46 132,162 248,278 132,394 248,510 132,626 248,742' fill='none' stroke='%23e6b85c' stroke-width='2.2' stroke-dasharray='2 8' stroke-linecap='round' stroke-linejoin='round' opacity='0.75'/%3E%3C/svg%3E"); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; filter: drop-shadow(0 0 6px rgba(248, 220, 160, 0.35)); } .schedule-row { position: absolute; width: 60%; padding: 0 !important; border-bottom: none !important; display: flex; flex-direction: column; gap: 0.15rem; transform: translateY(-50%); } /* Vértices alternados — coinciden con la polilínea SVG (7 nodos) */ .schedule-row:nth-child(1) { top: 5.9%; right: 35%; align-items: flex-end; text-align: right; } .schedule-row:nth-child(2) { top: 20.8%; left: 35%; align-items: flex-start; text-align: left; } .schedule-row:nth-child(3) { top: 35.6%; right: 35%; align-items: flex-end; text-align: right; } .schedule-row:nth-child(4) { top: 50.5%; left: 35%; align-items: flex-start; text-align: left; } .schedule-row:nth-child(5) { top: 65.4%; right: 35%; align-items: flex-end; text-align: right; } .schedule-row:nth-child(6) { top: 80.3%; left: 35%; align-items: flex-start; text-align: left; } .schedule-row:nth-child(7) { top: 95.1%; right: 35%; align-items: flex-end; text-align: right; } /* Estrella dorada de 4 puntas en cada vértice */ .schedule-row::before { content: ""; position: absolute; top: 50%; width: 1.4rem; height: 1.4rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpolygon points='10,0 12,8 20,10 12,12 10,20 8,12 0,10 8,8' fill='%23e6b85c'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; filter: drop-shadow(0 0 4px rgba(248, 220, 160, 0.8)) drop-shadow(0 0 10px rgba(230, 184, 92, 0.45)); transform: translateY(-50%); animation: scheduleZigStarTwinkle 3.4s ease-in-out infinite; } .schedule-row:nth-child(odd)::before { right: -1.8rem; } .schedule-row:nth-child(even)::before { left: -1.8rem; } .schedule-row:nth-child(2)::before { animation-delay: 0.6s; } .schedule-row:nth-child(3)::before { animation-delay: 1.2s; } .schedule-row:nth-child(4)::before { animation-delay: 1.8s; } .schedule-row:nth-child(5)::before { animation-delay: 2.4s; } .schedule-row:nth-child(6)::before { animation-delay: 3.0s; } .schedule-row:nth-child(7)::before { animation-delay: 3.6s; } @keyframes scheduleZigStarTwinkle { 0%, 100% { opacity: 1; transform: translateY(-50%) scale(1) rotate(0deg); } 50% { opacity: 0.85; transform: translateY(-50%) scale(1.18) rotate(12deg); } } /* Tipografía dentro de cada nodo */ .schedule-time { min-width: 0 !important; font-size: 1.5rem; letter-spacing: 0.06em; color: var(--accent-light); text-shadow: 0 0 6px rgba(230, 184, 92, 0.35); } .schedule-event { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2; color: var(--text); letter-spacing: 0.02em; padding: 0 0.4rem; } .schedule-row:nth-child(odd) .schedule-event { padding-right: 0; } .schedule-row:nth-child(even) .schedule-event { padding-left: 0; } @media (max-width: 420px) { .schedule-time { font-size: 1.35rem; } .schedule-event { font-size: 1.1rem; } } @media (prefers-reduced-motion: reduce) { .schedule-row::before { animation: none !important; } } /* Confirmación cerrada — fecha límite pasada */ .rsvp-closed { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.5; color: var(--text); text-align: center; max-width: 32ch; margin: 0 auto; }