/* Basic reset */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Glass tint presets (rÃ¡pidos de activar) Para usarlos, aÃ±ade una clase al : , "tint-green", "tint-amber", "tint-rose" o "tint-none" */ .tint-none { --glass-tint-alpha: 0; } .tint-blue { --glass-tint-h: 200; --glass-tint-s: 65%; --glass-tint-l: 60%; --glass-tint-alpha: 0.22; } .tint-green { /* Verde intenso para verificar funcionamiento del color */ --glass-tint-h: 150; --glass-tint-s: 60%; --glass-tint-l: 50%; --glass-tint-alpha: 0.65; /* muy alto para prueba */ /* Opcional: reduce el blanco de fondo para que el color destaque mÃ¡s en la prueba */ --glass-bg-alpha: 0.08; } .tint-amber { --glass-tint-h: 30; --glass-tint-s: 70%; --glass-tint-l: 60%; --glass-tint-alpha: 0.25; } .tint-rose { --glass-tint-h: 340; --glass-tint-s: 60%; --glass-tint-l: 62%; --glass-tint-alpha: 0.22; } /* Sparkle/Trail color presets (rï¿½pidos de activar) - Aplica una clase al para cambiar colores de chispas (sparkles) y cola (trail) - Ejemplo: o - Tambiï¿½n puedes combinar con los tintes del vidrio: */ .sparkles-blue { /* Azul: chispas y cola azules (alto contraste en blanco) */ --sparkle-color: 0,122,255; --trail-color: 0,64,168; /* Contorno (borde) de chispas y cola */ --sparkle-stroke: 1.2px; /* grosor borde chispas */ --sparkle-stroke-color: rgba(255,255,255,0.95); --trail-stroke: 1.2px; /* grosor borde cola */ --trail-stroke-color: rgba(255,255,255,0.95); --sparkle-alpha-mid: 1; --trail-alpha-mid: 1; } .sparkles-gold { /* Dorado: chispas doradas, cola dorada con acento ï¿½mbar */ --sparkle-color: 255,215,0; --trail-color: 255,215,0; /* Contorno (borde) de chispas y cola */ --sparkle-stroke: 1.2px; /* grosor borde chispas */ --sparkle-stroke-color: rgba(255,255,255,0.95); --trail-stroke: 1.2px; /* grosor borde cola */ --trail-stroke-color: rgba(255,255,255,0.95); } .sparkles-magenta { /* Magenta: chispas y cola magenta */ --sparkle-color: 214,36,159; --trail-color: 214,36,159; /* Contorno (borde) de chispas y cola */ --sparkle-stroke: 1.2px; /* grosor borde chispas */ --sparkle-stroke-color: rgba(255,255,255,0.95); --trail-stroke: 1.2px; /* grosor borde cola */ --trail-stroke-color: rgba(255,255,255,0.95); } .sparkles-whatsapp { /* WhatsApp green preset - Sparkles: brand green #25D366 (RGB 37,211,102) - Trail core: darker green #128C7E (RGB 18,140,126) for contrast on white You can swap or tweak both to taste. */ --sparkle-color: 18,140,126; /* Mismo color para ambos - #128C7E */ --trail-color: 18,140,126; /* #128C7E */ /* Contorno (borde) de chispas y cola */ --sparkle-stroke: 1.2px; /* grosor borde chispas */ --sparkle-stroke-color: rgba(255,255,255,0.95); --trail-stroke: 1.2px; /* grosor borde cola */ --trail-stroke-color: rgba(255,255,255,0.95); /* #25D366 */ --sparkle-alpha-mid: 1; --trail-alpha-mid: 1; } /* Body styles */ body { font-family: 'Arial', sans-serif; height: 100vh; /* Fondo de pÃ¡gina con imagen personalizada Ruta apuntando al mismo directorio raÃz que el HTML (welcome.html) Cambia 'backgroud.jpg' si renombras tu imagen */ /* Fondo + velo de color (el velo es la primera capa) Personaliza el velo con las variables --bg-veil-* en :root */ background: linear-gradient(var(--bg-veil)), var(--bg-url) center center / cover no-repeat fixed; display: flex; flex-direction: column; justify-content: center; align-items: center; /* Color de fuentes global (cambia aquÃ o en :root) */ color: var(--text-color); text-align: center; position: relative; overflow: hidden; /* Parallax variable used by JS */ --parallax: 0px; } /* Mobile fixes: avoid background-attachment: fixed issues and ensure full height */ @media (max-width: 768px) { body { background-attachment: scroll; /* iOS/Safari better behavior */ min-height: 100svh; /* small viewport height to include browser UI */ /* Mobile background: use movil.jpg from the same folder as HTML */ --bg-url: url('movil.jpg'); /* Make the mobile image fit the screen width without cropping; the remaining height shows the page background/tint */ background-position: center top, center top; /* veil, image */ background-repeat: no-repeat, no-repeat; /* veil, image */ background-size: auto, 100% auto; /* veil (auto), image (fit width) */ } } /* WhatsApp + Sparkle shadow customization - Adjust these variables to personalize shadow colors/intensity */ /* Sparkle color controls: edita estas variables para cambiar color de chispas y cola - Chispas (fijas): --sparkle-color (RGB) y --sparkle-alpha-mid (0ï¿½1) - Cola (drag): --trail-color (RGB), --trail-accent (RGB) y --trail-alpha-mid (0ï¿½1) Nota: si usas un preset (.sparkles-blue, .sparkles-gold, etc.), estos valores se sobreescriben. */ :root { /* Shadow for the WhatsApp logo image */ --wa-shadow-color: rgba(0, 0, 0, 0.55); /* Shadow/glow for static sparkles over the logo */ --sparkle-shadow-color: rgba(0, 0, 0, 0.40); /* Shadow/glow for the drag trail particles */ --trail-shadow-color: rgba(0, 0, 0, 0.35); /* --bg-url: Ruta de fondo en el mismo directorio del HTML */ --bg-url: url('background.jpg'); /* Velo de color sobre la imagen de fondo (personalizable) - Ajusta H, S, L para el tono del velo - Sube/baja --bg-veil-alpha (0 a 1) para la intensidad - Pon --bg-veil-alpha: 0 para desactivarlo */ --bg-veil-h: 210; /* Tono azul por defecto */ --bg-veil-s: 60%; /* Saturacion */ --bg-veil-l: 52%; /* Luminosidad */ --bg-veil-alpha: 0.45; /* maneja la intensidad del color del velo 0=apagado, 0.15 sutil, 0.35 notable */ --bg-veil: hsla(var(--bg-veil-h), var(--bg-veil-s), var(--bg-veil-l), var(--bg-veil-alpha)); /* Control Ãºnico del efecto (0 a 100). Sube/baja este nÃºmero y todo el vidrio se ajusta. */ --glass-intensity: 25; /* porcentaje de borroso del efecto vidrio*/ /* Derivados AUTOMÃTICOS a partir de --glass-intensity */ --glass-blur: calc((var(--glass-intensity) / 100) * 24px); /* 0-24px */ --glass-sat: calc(1 + (var(--glass-intensity) / 100) * 0.4); /* 1â€“1.4 */ --glass-bg-alpha: calc(0.10 + (var(--glass-intensity) / 100) * 0.20); /* 0.10â€“0.30 */ --glass-bg: rgba(255,255,255, var(--glass-bg-alpha)); /* tinte escarchado */ /* Valores adicionales del bevel */ --glass-border: rgb(255, 255, 255); /*modifoica el color del borde de la ventana o marco*/ --glass-highlight: rgba(255,255,255,0.55); /*modifica el color del borde de la ventana o marco*/ --glass-shadow: rgba(0,0,0,0.22); --fg-text-shadow: 0 2px 8px rgba(0,0,0,0.55); /* foreground text shadow */ --fg-drop-shadow: 0 6px 24px rgba(0,0,0,0.28); /* foreground element shadow */ /* Colores personalizables de tipografÃa y aro (cÃrculo) */ /* Colores independientes para labels del reloj (modificalos a tu gusto) */ --label-days-color: #ffffff; /* color para days */ --label-hours-color: #ffffff; /* color para hours */ --label-minutes-color: #ffffff; /* color para minutes */ --label-seconds-color: #ffffff; /* color para seconds */ /* color global de las fuentes */ --circle-bg: rgba(255,255,255,0.10); /* fondo traslÃºcido del aro */ --circle-border: rgba(255,255,255,0.20); /* borde del aro */ --circle-text-color: #ffffff; /* color del texto dentro del aro */ /* Colores personalizables de chispas (sparkles) y cola (trail) del botï¿½n WhatsApp - Cambia los valores RGB (sin alfa) para ajustar el color - Ajusta las alfas para mï¿½s/menos brillo */ --sparkle-color: 255,255,255; /* chispas fijas sobre el logo (RGB) */ --sparkle-alpha-mid: 0.85; /* brillo medio de chispa (0ï¿½1) */ --trail-color: 255,255,255; /* color base del nï¿½cleo de la cola (RGB) */ /* Cobertura del color en chispas fijas */ --sparkle-stop-mid: 60%; /* hasta dónde llega el color fuerte */ --sparkle-stop-fade: 88%; /* hasta dónde se desvanece */ /* Contorno (borde) de chispas y cola */ --sparkle-stroke: 1.2px; /* grosor borde chispas */ --sparkle-stroke-color: rgba(255,255,255,0.95); --trail-stroke: 1.2px; /* grosor borde cola */ --trail-stroke-color: rgba(255,255,255,0.95); /* acento de la cola (verde WhatsApp por defecto, RGB) */ /* Brand colors (ajusta aquÃ los colores oficiales cuando quieras) */ --brand-fb: #1877F2; /* Facebook blue */ --brand-x: #000000; /* X (Twitter) black */ --brand-li: #0A66C2; /* LinkedIn blue */ /* Instagram gradient stops */ --brand-ig-1: #F58529; --brand-ig-2: #DD2A7B; --brand-ig-3: #8134AF; --brand-ig-4: #515BD4; /* Suaves fondos y bordes en reposo (con transparencia) */ --brand-fb-bg: rgba(24, 119, 242, 0.12); --brand-fb-border: rgba(24, 119, 242, 0.5); --brand-x-bg: rgba(0, 0, 0, 0.12); --brand-x-border: rgba(0, 0, 0, 0.5); --brand-li-bg: rgba(10, 102, 194, 0.12); --brand-li-border: rgba(10, 102, 194, 0.5); /* Fondo IG en reposo (gradiente con transparencia) */ --brand-ig-bg: radial-gradient(circle at 30% 107%, rgba(253,244,151,0.20) 0%, rgba(253,244,151,0.20) 5%, rgba(253,89,72,0.20) 45%, rgba(214,36,159,0.20) 60%, rgba(40,90,235,0.20) 90%); /* Shine/Reflection controls for social icons (personaliza aquÃ) */ --shine-angle: 25deg; /* Ã¡ngulo diagonal del reflejo */ --shine-width: 45%; /* ancho relativo de la franja */ --shine-height: 260%; /* altura para cubrir el cÃrculo */ --shine-offset-x: -160%; /* punto de partida (a la izquierda) */ --shine-distance: 360%; /* cuÃ¡nto cruza hacia la derecha */ --shine-duration: 360ms; /* duraciÃ³n del barrido total (mÃ¡s rÃ¡pido) */ --shine-opacity: 0.95; /* opacidad mÃ¡xima durante el barrido */ --shine-color: rgba(255,255,255,0.85); /* color central del reflejo */ /* Colored glass tint (opcional) Ajusta estos valores para dar un color traslÃºcido al vidrio. - Sube solo --glass-tint-alpha (0 a 1) para activar el tinte. - Cambia H, S, L para tono/saturaciÃ³n/luminosidad del color. */ --glass-tint-h: 200; /* tono (0-360). Ej: 200=azulado, 140=verdoso, 15=Ã¡mbar */ --glass-tint-s: 70%; /* saturaciÃ³n (0%-100%) */ --glass-tint-l: 60%; /* luminosidad (0%-100%) */ --glass-tint-alpha: 0; /* 0 desactiva el color. Prueba 0.15â€“0.35 para efecto sutil */ --glass-tint: hsla(var(--glass-tint-h), var(--glass-tint-s), var(--glass-tint-l), var(--glass-tint-alpha)); /* Modo de mezcla del tinte con la base del vidrio */ --glass-tint-blend: color; /* opciones Ãºtiles: color, multiply, overlay */ } /* Full-screen beveled glass overlay This sits above the background image to create the glass look and blurs/saturates whatâ€™s behind it. Customize via the :root vars. */ body::before { content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none; /* keep UI interactive */ background: /* soft bevel highlight and shade */ linear-gradient(145deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.06) 40%, rgba(0,0,0,0.10) 100%), /* opcional: tinte de color para el vidrio */ var(--glass-tint), /* base escarchada */ var(--glass-bg); /* Mezcla el tinte con la base para un color mÃ¡s notorio */ background-blend-mode: normal, var(--glass-tint-blend), normal; border: 1px solid var(--glass-border); box-shadow: inset 1px 1px 0 var(--glass-highlight), /* top-left bevel highlight */ inset -2px -2px 0 rgba(0,0,0,0.16), /* bottom-right bevel shade */ 0 24px 60px rgba(0,0,0,0.18); /* ambient depth */ -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); } /* Fallback universal: si el navegador no soporta backdrop-filter, duplicamos el fondo en la capa de vidrio y aplicamos filter: blur(). */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { body::before { -webkit-backdrop-filter: none; backdrop-filter: none; filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); background: var(--bg-url) center center / cover no-repeat fixed, var(--glass-tint), var(--glass-bg); background-blend-mode: normal, var(--glass-tint-blend), normal; } } /* Visually hidden text for accessibility */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 1px, 1px); white-space: nowrap; border: 0; } /* Main container */ .container { z-index: 10; position: relative; /* Ensure foreground readability on bright backgrounds */ text-shadow: var(--fg-text-shadow); filter: drop-shadow(var(--fg-drop-shadow)); } /* Logo */ .logo { font-size: 2.5rem; font-weight: 300; letter-spacing: 8px; margin-bottom: 1rem; position: relative; } /* Decorative line under logo */ .logo::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 150px; height: 3px; background: linear-gradient(90deg, #4ecdc4, #44a08d); border-radius: 2px; } /* Decorative circle */ .circle { width: 300px; height: 300px; border-radius: 50%; /* Colores del aro controlados por variables */ background: var(--circle-bg); display: flex; justify-content: center; align-items: center; margin: 2rem auto; backdrop-filter: blur(10px); border: 1px solid var(--circle-border); } .circle-text { font-size: 1.2rem; font-weight: 300; opacity: 0.9; /* Color del texto del aro */ color: var(--circle-text-color); } /* Add foreground shadows to footer as well for readability */ footer { position: relative; z-index: 10; text-shadow: var(--fg-text-shadow); filter: drop-shadow(var(--fg-drop-shadow)); } /* Footer credits */ .credits { margin-top: 1rem; font-size: 0.9rem; opacity: 0.9; color: var(--text-color); } /* Countdown */ .countdown { display: flex; justify-content: center; gap: 3rem; /* Lower the clock a bit more */ margin: 4.5rem 0; flex-wrap: wrap; } .time-unit { text-align: center; } .time-number { font-size: 4rem; font-weight: bold; line-height: 1; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } .time-label { font-size: 1rem; /* Make labels stand out on mixed/dark backgrounds */ opacity: 1; margin-top: 0.5rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 0 2px rgba(0,0,0,0.7); } /* Notify section */ .notify-section { margin-top: 3rem; } .notify-text { font-size: 1.1rem; margin-bottom: 2rem; letter-spacing: 2px; opacity: 0.9; } /* Email form */ .email-form { display: flex; justify-content: center; gap: 0; max-width: 500px; margin: 0 auto; } .email-input { flex: 1; padding: 15px 20px; border: 2px solid rgba(255, 255, 255, 0.3); border-right: none; background: rgba(255, 255, 255, 0.1); color: white; font-size: 1rem; outline: none; border-radius: 5px 0 0 5px; backdrop-filter: blur(10px); } .email-input::placeholder { color: rgba(255, 255, 255, 0.7); } .email-input:focus { border-color: #4ecdc4; background: rgba(255, 255, 255, 0.15); } .send-button { padding: 15px 30px; background: linear-gradient(135deg, #4ecdc4, #44a08d); border: none; color: white; font-size: 1rem; font-weight: bold; cursor: pointer; border-radius: 0 5px 5px 0; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; } .send-button:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(78, 205, 196, 0.4); } /* Social links */ .social-icons { display: flex; justify-content: center; gap: 2rem; margin-top: 1.75rem; /* raised a bit to sit closer to content */ } .social-icon { position: relative; width: 50px; height: 50px; background: rgba(255, 255, 255, 0.08); border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; text-decoration: none; color: #ffffff; /* icon color (currentColor) */ transition: transform 140ms ease-out, box-shadow 140ms ease-out, background 140ms ease-out; border: 1px solid rgba(255, 255, 255, 0.18); overflow: hidden; /* clip the reflection */ filter: drop-shadow(var(--fg-drop-shadow)); } .social-icon svg { width: 24px; height: 24px; fill: currentColor; } /* Hover zoom + shine reflection (diagonal, ida y regreso) */ .social-icon::after { content: ''; position: absolute; top: -80%; left: -60%; width: var(--shine-width); height: var(--shine-height); background: linear-gradient(var(--shine-angle), rgba(255,255,255,0) 0%, var(--shine-color) 50%, rgba(255,255,255,0) 100%); transform: rotate(var(--shine-angle)) translateX(var(--shine-offset-x)); pointer-events: none; opacity: 0; will-change: transform, opacity; } @keyframes shineSweep { to { transform: rotate(var(--shine-angle)) translateX(var(--shine-distance)); } } .social-icon:hover { transform: translateY(-2px) scale(1.08); box-shadow: 0 10px 24px rgba(0,0,0,0.25); } .social-icon:hover::after { opacity: var(--shine-opacity); /* ActivaciÃ³n inmediata y barrido rÃ¡pido, ida y regreso */ animation: shineSweep var(--shine-duration) cubic-bezier(0.2,0.6,0.2,1) 2 alternate both; } /* Brand tints (optional). Adjust or remove to preference */ /* Colores de marca + estados hover Personaliza los valores en :root si cambian tus colores de marca */ .social-icon--facebook { color: #ffffff; background: var(--brand-fb-bg); border-color: var(--brand-fb-border); } .social-icon--facebook:hover { background: var(--brand-fb); box-shadow: 0 12px 28px rgba(24,119,242,0.45); } .social-icon--x { color: #ffffff; background: var(--brand-x-bg); border-color: var(--brand-x-border); } .social-icon--x:hover { background: var(--brand-x); box-shadow: 0 12px 28px rgba(0,0,0,0.45); } .social-icon--linkedin { color: #ffffff; background: var(--brand-li-bg); border-color: var(--brand-li-border); } .social-icon--linkedin:hover { background: var(--brand-li); box-shadow: 0 12px 28px rgba(10,102,194,0.45); } .social-icon--instagram { color: #ffffff; background: var(--brand-ig-bg); border-color: rgba(255,255,255,0.35); } .social-icon--instagram:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5948 45%, #d6249f 60%, #285AEB 90%); box-shadow: 0 12px 28px rgba(214,36,159,0.45); } /* Messages */ .success-message { background: rgba(76, 175, 80, 0.2); border: 1px solid rgba(76, 175, 80, 0.5); color: #4caf50; padding: 15px 20px; border-radius: 5px; margin-top: 1rem; backdrop-filter: blur(10px); } .success-message[hidden] { display: none; } .error-message { background: rgba(244, 67, 54, 0.2); border: 1px solid rgba(244, 67, 54, 0.5); color: #ffebee; padding: 10px 14px; border-radius: 5px; margin-top: 0.75rem; } /* Floating WhatsApp button */ .whatsapp-float { position: fixed; bottom: 20px; right: 20px; width: 100px; height: 100px; border-radius: 50%; background: transparent; color: #ffffff; display: inline-flex; align-items: center; justify-content: center; cursor: grab; cursor: -webkit-grab; transition: transform 0.2s ease; overflow: visible; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; user-select: none; touch-action: none; filter: drop-shadow(var(--fg-drop-shadow)); pointer-events: auto; z-index: 1000; } /* WhatsApp image */ .whatsapp-icon { /* Increased logo size */ width: 72px; height: 72px; display: block; -webkit-tap-highlight-color: rgba(0,0,0,0); pointer-events: none; /* ensure dragging uses the anchor */ /* Logo shadow: customize color via --wa-shadow-color in :root Example: rgba(0,0,0,0.7) for stronger, or a colored glow. */ filter: drop-shadow(0 6px 14px var(--wa-shadow-color)); } /* Forcefully remove any UA highlight/ripple on tap/drag */ .whatsapp-float, .whatsapp-float:active, .whatsapp-float:focus { -webkit-tap-highlight-color: rgba(0,0,0,0) !important; outline: none !important; } .whatsapp-float.dragging { cursor: grabbing; cursor: -webkit-grabbing; transform: scale(1.1); } /* Sparkles for elegant glitter effect */ /* Static glitter sparkles overlaying the logo. Tip: width/height and timing are set via JS per sparkle. If you want a fixed size from CSS instead, set width/height here and remove the width/height assignment in createSparkles(). */ /* Static glitter sparkles overlaying the logo. Tip: width/height and timing are set via JS per sparkle. If you want a fixed size from CSS instead, set width/height here and remove the width/height assignment in createSparkles(). */ .whatsapp-float .sparkle { position: absolute; width: 8px; height: 8px; pointer-events: none; opacity: 0; background: radial-gradient( circle, rgba(var(--trail-color), 1) 0%, rgba(var(--trail-color), var(--trail-alpha-mid)) 45%, rgba(var(--trail-color), 0) 70% ); z-index: 10; animation-name: sparkleTwinkle; animation-iteration-count: infinite; animation-fill-mode: both; /* Star shape using clip-path (5-point) */ clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% ); } @keyframes sparkleTwinkle { 0%, 70% { opacity: 0; transform: rotate(var(--rot, 0deg)) scale(0); } 75% { opacity: 0.8; transform: rotate(var(--rot, 0deg)) scale(1.2); } 80% { opacity: 1; transform: rotate(var(--rot, 0deg)) scale(1); } 85%, 100% { opacity: 0; transform: rotate(var(--rot, 0deg)) scale(0); } } @media (prefers-reduced-motion: reduce) { .whatsapp-float .sparkle { animation: none; opacity: 0.6; } } /* Trail sparkles while dragging */ .sparkle-trail { position: fixed; width: 6px; height: 6px; pointer-events: none; background: radial-gradient( circle, rgba(var(--trail-color), 1) 0%, rgba(var(--trail-color), var(--trail-alpha-mid)) 45%, rgba(var(--trail-color), 0) 70% ); /* Trail shadow: customize using --trail-shadow-color in :root Keep the green accent; add a soft drop-shadow for depth. */ box-shadow: 0 0 8px rgba(var(--trail-color), var(--trail-alpha-mid)), 0 0 14px rgba(var(--trail-color), 0.95); filter: drop-shadow(0 2px 8px var(--trail-shadow-color)); mix-blend-mode: normal; z-index: 998; /* sobre el vidrio (z=1) y bajo el botÃ³n (z=999) */ /* Tail speed: increase duration for a slower, longer tail */ animation: trailFade 2600ms ease-out forwards; /* Star shape */ clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% ); } @keyframes trailFade { 0% { opacity: 0.3; transform: rotate(var(--rot, 0deg)) scale(0.6); } 10% { opacity: 0.95; transform: rotate(var(--rot, 0deg)) scale(1); } 100% { opacity: 0; transform: rotate(var(--rot, 0deg)) scale(0.4); } } @media (max-width: 768px) { } /* Mobile icon size tweak to match larger button */ @media (max-width: 768px) { .whatsapp-icon { width: 60px; height: 60px; } } /* Responsive */ @media (max-width: 768px) { .logo { font-size: 2rem; letter-spacing: 4px; } .circle { width: 250px; height: 250px; } .countdown { gap: 1.5rem; } .time-number { font-size: 2.5rem; } .email-form { flex-direction: column; gap: 1rem; padding: 0 2rem; } .email-input { border-radius: 5px; border-right: 2px solid rgba(255, 255, 255, 0.3); } .send-button { border-radius: 5px; } .social-icons { gap: 1rem; } } /* /* Star outlines for better contrast on bright backgrounds */ /* Asegura que las chispas queden arriba del icono */ /* Borde blanco alrededor de cada chispa fija */ /* TEMPORALMENTE DESHABILITADO - .whatsapp-float .sparkle::before { content: ''; position: absolute; inset: calc(var(--sparkle-stroke) * -1); background: var(--sparkle-stroke-color); clip-path: inherit; /* usa la misma forma de estrella */ z-index: -1; } */ /* Borde blanco alrededor de cada chispa de la cola */ .sparkle-trail::before { content: ''; position: absolute; inset: calc(var(--trail-stroke) * -1); background: var(--trail-stroke-color); clip-path: inherit; z-index: -1; } /* Colores por label del reloj */ .countdown .time-unit:nth-child(1) .time-label { color: var(--label-days-color); } .countdown .time-unit:nth-child(2) .time-label { color: var(--label-hours-color); } .countdown .time-unit:nth-child(3) .time-label { color: var(--label-minutes-color); } .countdown .time-unit:nth-child(4) .time-label { color: var(--label-seconds-color); }