:root { --aslan-bg: rgb(20, 18, 39); --aslan-bg2: rgb(12, 45, 112); --aslan-bg3: rgb(39, 169, 245); --aslan-white: #ffffff; --aslan-orange-1: rgb(240, 129, 50); --aslan-orange-2: rgb(247, 162, 56); --aslan-orange-3: rgb(255, 193, 63); } .light { font-weight: 300; } .normal { font-weight: 400; } .bold { font-weight: 700; } .black { font-weight: 900; } /* No pongas background al ni a otras secciones aún */ body { font-family: 'Montserrat', sans-serif; } hr { all: unset; display: block; height: 1.5px; /* más delgada */ width: 100%; background: rgb(255, 102, 0); /* núcleo sólido */ margin: 20px 0; box-shadow: 0 0 3px rgb(255, 102, 0), 0 0 6px rgb(255, 102, 0), 0 0 9px rgb(255, 140, 50), 0 0 15px rgb(255, 180, 90); } .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 1s ease, transform 1s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } /* Solo el hero tiene fondo azul y relámpagos */ #hero { position: relative; background: linear-gradient(75deg, var(--aslan-bg2), var(--aslan-bg)); /* background-color: var(--aslan-bg); */ z-index: 0; overflow: hidden; min-height: 100vh; /* Cuadrícula tipo panel solar background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 100px 100px; tamaño de celdas tipo panel */ } #energia-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } #hero > *:not(#energia-bg) { position: relative; z-index: 1; } /* El canvas se queda dentro de hero y se posiciona ABSOLUTO #relampagos-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } Todos los elementos encima del canvas #hero>*:not(#relampagos-bg) { position: relative; z-index: 1; }*/ /* Letras brillantes */ .glow-char { display: inline-block; color: white; text-shadow: 0 0 5px rgb(240, 129, 50), 0 0 10px rgb(247, 162, 56), 0 0 20px rgb(252, 193, 63), 0 0 30px rgba(255, 140, 50, 0.7); /*animation: flash 1.5s infinite alternate;*/ } @keyframes flash { 0% { opacity: 1; text-shadow: 0 0 5px rgb(240, 129, 50), 0 0 10px rgb(247, 162, 56), 0 0 20px rgb(252, 193, 63), 0 0 30px rgba(255, 140, 50, 0.7); } 100% { opacity: 0.75; text-shadow: 0 0 2px rgba(240, 129, 50, 0.2), 0 0 5px rgba(247, 162, 56, 0.2), 0 0 10px rgba(252, 193, 63, 0.2); } } /* Otros estilos sin modificar otras secciones */ .btn-primary { background: linear-gradient(90deg, var(--aslan-orange-1), var(--aslan-orange-3)); border: none; color: var(--aslan-bg); font-weight: bold; transition: all .25s ease-in-out; } .btn-primary:hover { background: linear-gradient(90deg, var(--aslan-orange-3), var(--aslan-orange-1)); color: var(--aslan-bg); } .bg-aslan { background-color: var(--aslan-bg); } .text-aslan { color: var(--aslan-orange-1) !important; } .text-aslan-blue { color: var(--aslan-bg) !important; } .bg-image { background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; min-height: 50vh; } /* footer */ .footer { background: linear-gradient(90deg, var(--aslan-orange-1), var(--aslan-orange-3)); color: var(--aslan-bg); } .footer .social-icon { color: var(--aslan-bg); transition: transform 0.2s ease, color 0.2s ease; } .footer .social-icon:hover { transform: scale(1.2); color: white; } .footer a { color: var(--aslan-bg); } .footer a:hover { color: white; } #nosotros{ background-color: rgb(255,255,255); background-size: cover; background-position: center bottom; background-repeat: no-repeat; padding-top:50px; padding-bottom:50px; } .item-icon { background-color: rgb(0, 5, 150); color: #FFFFFF; border-radius: 3px; padding: 15px; margin: 5px; font-size: 22px; cursor: pointer; transition: all 0.25s ease-in-out; /* Efecto chicle / 3D */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); display: inline-flex; align-items: center; justify-content: center; } .item-icon:hover { background-color: rgb(250, 185, 90); color: rgb(30, 60, 200); /* Azul más claro en hover */ /* Sombra más pronunciada */ box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 8px 16px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3); }