/* 
Archivo: estilos-sombras-destellos.css
Descripción: Estilos personalizados para "Sombras destellos".
Autor: Nexbu
Fecha: 01 Agostro 2025
*/
/*** Sección Hero Bordes ***/
.hero-sombra {
    border-radius: 50px;
    position: relative;
    display: inline-block;
}
/* Hero Sombra color */
.hero-sombra::before {
    background:
        radial-gradient(circle at bottom left, #0095CD 0%, transparent 80%) no-repeat,
        radial-gradient(circle at top right, #F15A2E 0%, transparent 80%) no-repeat;
        pointer-events: none;
    background-size: 300px 300px, 300px 300px;
    background-position: bottom left, top right;
    border-radius: inherit;
    content: "";
    filter: blur(13px);
    inset: 0;
    position: absolute;
    z-index: 0;
}
/* Borde Destellos */
.hero-sombra::after {
    background:
    radial-gradient(circle at bottom left,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.1) 60%,
        rgba(255, 255, 255, 0.0) 100%) no-repeat,
    radial-gradient(circle at top right,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.1) 60%,
        rgba(255, 255, 255, 0.0) 100%) no-repeat;
    background-size: 300px 300px, 300px 300px;
    background-position: bottom left, top right;
    border-radius: inherit;
    box-sizing: border-box;
    content: "";
    inset: 0;
    mask-composite: exclude;
    pointer-events: none;
    padding: 3px;
    position: absolute;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    z-index: 1;
}
/*** Fin: Sección Hero Bordes ***/

/*** Sección Footer Demo IA ***/
.box-demo-ia-sombras {
    border-radius: 20px;
    box-shadow: 0px 0px 8px #a4724b4d;
    display: inline-block;
    position: relative;
    z-index: 0;
}
.box-demo-ia {
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(0.5px);
    border: 1px solid rgba(255, 255, 255, 0.20);
    box-shadow: inset 0px 0px 8px #d1ae9342!important;
    position: relative;
}
.box-demo-ia {
    cursor: pointer;
    -webkit-transition: background-color .4s linear;
    -ms-transition: background-color .4s linear;
    transition: background-color .4s linear;
}
.box-demo-ia:hover {
    background: rgb(255 255 255 / 14%);
}
/* Capa de brillo de colores */
.box-demo-ia-sombras::before {
    background:
        radial-gradient(circle at bottom left, #0095CD 0%, transparent 80%) no-repeat,
        radial-gradient(circle at top right, #F15A2E 0%, transparent 80%) no-repeat;
    background-size: 80px 80px, 80px 80px;
    background-position: bottom left, top right;
    border-radius: inherit;
    content: "";
    filter: blur(12px);
    inset: 0;
    pointer-events: none;
    position: absolute;
    transform: scale(1.1);
    z-index: 0;
}
/* Capa borde destello blanco */
.box-demo-ia-sombras::after {
    border-radius: inherit;
    box-sizing: border-box;
    content: "";
    inset: 0;
    padding: 1.5px;
    pointer-events: none;
    position: absolute;
    z-index: 1;
        
    background:
        /* Esquina inferior izquierda */
        linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 60%) no-repeat,
        linear-gradient(to top,   rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 60%) no-repeat,
        /* Esquina superior derecha */
        linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 60%) no-repeat,
        linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 60%) no-repeat;
        
    /* Tamaño de los brillos */
    background-size: 
    30% 7px, 7px 30%,   /* abajo izquierda */
    30% 7px, 7px 30%;   /* arriba derecha */
        
    /* Posición de cada uno */
    background-position: 
    bottom left, bottom left, 
    top right, top right;
        
    /* Máscara que deja visibles solo los bordes */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
/*** Fin: Sección Footer Demo IA ***/

/*** Responsive ***/
/* Mobile */
@media only screen and (max-width: 667px) {
    /* Sección Hero Bordes */
    .hero-sombra {
        border-radius: 30px;
    }
}
/*** Fin: Responsive ***/