::before,
::after
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

input[type="number"]
{
    -moz-appearance: textfield;
    text-align: start;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button
{
    -webkit-appearance: none;
    margin: 0;
}

input:focus, select:focus, select, input.form-control:focus, select.form-select:focus
{
    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

.btn:focus
{
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

body
{
    --x-0: 0%;
    --y-0: 5%;
    --c-0: hsla(225.00000000000003, 56%, 60%, 0.7);
    --y-1: 3%;
    --x-1: 23%;
    --c-1: hsla(210.4411764705882, 96%, 48%, 0.37);
    --x-2: 100%;
    --y-2: 93%;
    --c-2: hsla(186.61764705882354, 70%, 55%, 0.21);
    --y-3: 103%;
    --c-3: hsla(120.44117647058823, 76%, 39%, 0.1);
    --x-3: 96%;
    --y-4: 0%;
    --x-4: 80%;
    --c-4: hsla(158.82352941176472, 80%, 48%, 0.23);
    ;
    width: 100%;
    min-height: 600px;
    background-color: hsla(220.9090909090909, 30%, 14%, 1);
    background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4));
    animation: hero-gradient-animation 10s linear infinite alternate;
    background-blend-mode: normal, normal, normal, normal, normal;
    background-attachment: fixed;
}

@keyframes hero-gradient-animation {
    0% {
        --y-0: 93%;
        --s-start-0: 14.489998991212337%;
        --s-end-0: 72%;
        --x-0: 93%;
        --c-0: hsla(212, 0%, 0%, 1);
        --s-start-1: 0%;
        --s-end-1: 45%;
        --y-1: 9%;
        --x-1: 26%;
        --c-1: hsla(212, 0%, 0%, 1);
        --s-start-2: 2.9253667596993065%;
        --s-end-2: 22.388851682060018%;
        --x-2: 15%;
        --c-2: hsla(257.14285714285717, 91%, 27%, 0.35);
        --y-2: 79%;
        --c-3: hsla(212.47058823529412, 100%, 50%, 0.5);
        --x-3: 40%;
        --s-start-3: 3.985353824694249%;
        --s-end-3: 47.580278608924694%;
        --y-3: 104%;
        --c-4: hsla(224.44444444444443, 72%, 36%, 1);
        --x-4: 0%;
        --y-4: 60%;
        --s-start-4: 2.391200382592061%;
        --s-end-4: 29.307684556768592%;
        --y-5: 37%;
        --s-start-5: 2.9253667596993065%;
        --s-end-5: 22.388851682060018%;
        --x-5: 92%;
        --c-5: hsla(248.30769230769235, 52%, 24%, 1);
        --s-start-6: 13.173642363290591%;
        --s-end-6: 31.747336520355095%;
        --y-6: 16%;
        --x-6: 101%;
        --c-6: hsla(212.47058823529412, 100%, 50%, 0.19);
        --x-7: 90%;
        --y-7: 13%;
        --s-start-7: 1%;
        --s-end-7: 31%;
        --c-7: hsla(227.6470588235294, 98%, 53%, 1);
        --y-8: 56%;
        --x-8: 104%;
        --s-start-8: 3.985353824694249%;
        --s-end-8: 13.103042116379756%;
        --c-8: hsla(166.53061224489795, 71%, 60%, 0.32);
        --c-9: hsla(219.2079207920792, 83%, 23%, 0.18);
        --y-9: 19%;
        --x-9: 97%;
        --s-start-9: 18.597054544690312%;
        --s-end-9: 31%;
    }

    100% {
        --y-0: 9%;
        --s-start-0: 2.391200382592061%;
        --s-end-0: 43.902064173373226%;
        --x-0: 7%;
        --c-0: hsla(306, 0%, 0%, 1);
        --s-start-1: 9%;
        --s-end-1: 54.805582404585024%;
        --y-1: 93%;
        --x-1: 96%;
        --c-1: hsla(306, 0%, 0%, 1);
        --s-start-2: 3%;
        --s-end-2: 26.722813338714598%;
        --x-2: -2%;
        --c-2: hsla(166.53061224489795, 72%, 60%, 1);
        --y-2: 103%;
        --c-3: hsla(180, 100%, 50%, 0.26);
        --x-3: 33%;
        --s-start-3: 2.391200382592061%;
        --s-end-3: 32.0689540200964%;
        --y-3: 82%;
        --c-4: hsla(212.43243243243245, 88%, 26%, 0.58);
        --x-4: 37%;
        --y-4: 81%;
        --s-start-4: 4.40642490323111%;
        --s-end-4: 37.23528104246256%;
        --y-5: 99%;
        --s-start-5: 3%;
        --s-end-5: 32.537089799783296%;
        --x-5: 54%;
        --c-5: hsla(271.9148936170212, 98%, 53%, 0.31);
        --s-start-6: 6%;
        --s-end-6: 42.501105312974815%;
        --y-6: 43%;
        --x-6: 104%;
        --c-6: hsla(262.82352941176475, 100%, 50%, 0.15);
        --x-7: 104%;
        --y-7: -16%;
        --s-start-7: 5%;
        --s-end-7: 13.10107024898374%;
        --c-7: hsla(298.60465116279073, 36%, 23%, 1);
        --y-8: 30%;
        --x-8: 97%;
        --s-start-8: 2.391200382592061%;
        --s-end-8: 27.141813016850573%;
        --c-8: hsla(180, 100%, 50%, 0.11);
        --c-9: hsla(219.2079207920792, 83%, 23%, 0.59);
        --y-9: 4%;
        --x-9: 78%;
        --s-start-9: 5%;
        --s-end-9: 21.32164536610654%;
    }
}

@property --y-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 93%
}

@property --s-start-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 14.489998991212337%
}

@property --s-end-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 72%
}

@property --x-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 93%
}

@property --c-0 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(212, 0%, 0%, 1)
}

@property --s-start-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%
}

@property --s-end-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 45%
}

@property --y-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 9%
}

@property --x-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 26%
}

@property --c-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(212, 0%, 0%, 1)
}

@property --s-start-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 2.9253667596993065%
}

@property --s-end-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 22.388851682060018%
}

@property --x-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 15%
}

@property --c-2 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(257.14285714285717, 91%, 27%, 0.35)
}

@property --y-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 79%
}

@property --c-3 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(212.47058823529412, 100%, 50%, 0.5)
}

@property --x-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 40%
}

@property --s-start-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 3.985353824694249%
}

@property --s-end-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 47.580278608924694%
}

@property --y-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 104%
}

@property --c-4 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(224.44444444444443, 72%, 36%, 1)
}

@property --x-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%
}

@property --y-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 60%
}

@property --s-start-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 2.391200382592061%
}

@property --s-end-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 29.307684556768592%
}

@property --y-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 37%
}

@property --s-start-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 2.9253667596993065%
}

@property --s-end-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 22.388851682060018%
}

@property --x-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 92%
}

@property --c-5 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(248.30769230769235, 52%, 24%, 1)
}

@property --s-start-6 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 13.173642363290591%
}

@property --s-end-6 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 31.747336520355095%
}

@property --y-6 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 16%
}

@property --x-6 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 101%
}

@property --c-6 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(212.47058823529412, 100%, 50%, 0.19)
}

@property --x-7 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 90%
}

@property --y-7 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 13%
}

@property --s-start-7 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 1%
}

@property --s-end-7 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 31%
}

@property --c-7 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(227.6470588235294, 98%, 53%, 1)
}

@property --y-8 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 56%
}

@property --x-8 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 104%
}

@property --s-start-8 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 3.985353824694249%
}

@property --s-end-8 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 13.103042116379756%
}

@property --c-8 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(166.53061224489795, 71%, 60%, 0.32)
}

@property --c-9 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(219.2079207920792, 83%, 23%, 0.18)
}

@property --y-9 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 19%
}

@property --x-9 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 97%
}

@property --s-start-9 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 18.597054544690312%
}

@property --s-end-9 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 31%
}

/* Estilos para card y footer */
@keyframes hero-gradient-animation_2 {
    0% {
        --c-0: hsla(97, 2%, 11%, 1);
        --s-start-0: 1%;
        --s-end-0: 61%;
        --y-0: 90%;
        --x-0: 91%;
        --c-1: hsla(75, 0%, 0%, 1);
        --y-1: 24%;
        --x-1: 17%;
        --s-start-1: 0%;
        --s-end-1: 55%;
        --y-2: 32%;
        --s-start-2: 19%;
        --s-end-2: 54%;
        --x-2: 11%;
        --c-2: hsla(248, 37%, 20%, 1);
        --s-start-3: 0%;
        --s-end-3: 67%;
        --c-3: hsla(212, 72%, 58%, 1);
        --x-3: 2%;
        --y-3: 31%;
        --y-4: 93%;
        --x-4: 74%;
        --s-start-4: 12%;
        --s-end-4: 82%;
        --c-4: hsla(349, 0%, 0%, 1);
    }

    100% {
        --c-0: hsla(313, 0%, 0%, 1);
        --s-start-0: 19%;
        --s-end-0: 69%;
        --y-0: 25%;
        --x-0: 49%;
        --c-1: hsla(360, 0%, 0%, 1);
        --y-1: 41%;
        --x-1: 1%;
        --s-start-1: 3%;
        --s-end-1: 77%;
        --y-2: 93%;
        --s-start-2: 6%;
        --s-end-2: 73%;
        --x-2: 44%;
        --c-2: hsla(321, 0%, 0%, 1);
        --s-start-3: 8%;
        --s-end-3: 86%;
        --c-3: hsla(212.3684210526316, 72%, 58%, 1);
        --x-3: 97%;
        --y-3: 51%;
        --y-4: 69%;
        --x-4: 10%;
        --s-start-4: 20%;
        --s-end-4: 75%;
        --c-4: hsla(109, 0%, 0%, 1);
    }
}

@property --c-0 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(97, 2%, 11%, 1)
}

@property --s-start-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 1%
}

@property --s-end-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 61%
}

@property --y-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 90%
}

@property --x-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 91%
}

@property --c-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(75, 0%, 0%, 1)
}

@property --y-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 24%
}

@property --x-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 17%
}

@property --s-start-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%
}

@property --s-end-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 55%
}

@property --y-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 32%
}

@property --s-start-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 19%
}

@property --s-end-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 54%
}

@property --x-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 11%
}

@property --c-2 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(248, 37%, 20%, 1)
}

@property --s-start-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%
}

@property --s-end-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 67%
}

@property --c-3 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(212, 72%, 58%, 1)
}

@property --x-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 2%
}

@property --y-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 31%
}

@property --y-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 93%
}

@property --x-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 74%
}

@property --s-start-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 12%
}

@property --s-end-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 82%
}

@property --c-4 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(349, 0%, 0%, 1)
}

.bg_nav, footer {
    --c-0: hsla(97, 2%, 11%, 1);
    --y-0: 90%;
    --x-0: 91%;
    --c-1: hsla(75, 0%, 0%, 1);
    --y-1: 24%;
    --x-1: 17%;
    --y-2: 32%;
    --x-2: 11%;
    --c-2: hsla(248, 37%, 20%, 1);
    --c-3: hsla(212, 72%, 58%, 1);
    --x-3: 2%;
    --y-3: 31%;
    --y-4: 93%;
    --x-4: 74%;
    --c-4: hsla(349, 0%, 0%, 1);
    ;
    background-color: hsla(356, 0%, 0%, 1);
    background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4));
    animation: hero-gradient-animation_2 10s linear infinite alternate;
    background-blend-mode: normal, normal, normal, normal, normal;
}

.img-home
{
    width: 150px;
    height: auto;
}

.active-item
{
    color: #fc9c04 !important;
}

.parrafo_5
{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

.parrafo_1
{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.parrafo_2
{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.parrafo_3
{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.active-item span
{
    border-bottom: 3.1px solid #fc9c04;
}

.img-proyecto {
    width: 100%;
    height: 220px; /* Ajusta la altura según tu diseño */
    object-fit: cover;
    border-radius: 12px; /* Opcional, para bordes redondeados */
}

.banner_index
{
    width: 100%;
    height: 100vh;
}

.banner_section
{
    width: 100%;
    height: 50vh;
}

.banner_article
{
    width: 100%;
    height: 90vh;
}

.section
{
    width: 100%;
    min-height: 600px;
} 

.btn-facebook {
    border-color: #036CE4;
}

.btn-facebook:hover {
    border-color: #036CE4;
    opacity: 0.8;
}

.btn-google {
    border-color: #EA4335;
}

.btn-google:hover {
    border-color: #EA4335;
    opacity: 0.8;
}

.img_recomendados
{
    width: 100%;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    background-color: #ffffff;
}

.img_article
{
    width: 100%;
    height: 150px;
    object-fit: cover;
    transition: transform 0.3s ease;
    border-radius: 15px;
}

.contenido_cl
{
    /* width: 100%; */
    min-height: 250px;
}

.contenedor .logo .logoBX img{
    filter: grayscale(1);
    transition: 0.5s;
    cursor: pointer;
    transform: scale(0.8);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.contenedor .logo .logoBX:hover img{
    filter: grayscale(0);
    transition: 0.5s;
    cursor: pointer;
    transform: scale(1);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

.content
{
    position: relative;
    overflow: hidden;
}

.content .contentBX
{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(0);
    transition: 0.5s;
    opacity: 0;
}

.content .contentBX.active
{
    transform: scale(1);
    opacity: 1;
}

.texto_frase
{
    padding-left: 120px;
}

/* buttons-share */
.bg_facebook
{
    background-color: #3B5998;
    padding: 10px 12px;
}

.bg_whatsapp
{
   background-color: #56CD52;
   padding: 10px 12px;
}

.bg_telegram
{
   background-color: #0088CC;
   padding: 10px 12px;
}

.bg_linkedin
{
   background-color: #0E76A8;
   padding: 10px 12px;
}

.bg_twitter
{
   background-color: #00ACEE;
   padding: 10px 12px;
}

.bg_twitter_x
{
    background-color: #000000;
    padding: 10px 12px;
}

.bg_mail
{
   background-color: #4f4f4f;
   padding: 10px 12px;
}

.bg_download
{
   background-color: #768070;
   padding: 10px 12px;
}

.bg_tiktok
{
   background-color: #000000;
   padding: 10px 12px;
}

.bg_youtube
{
   background-color: #FF0000;
   padding: 10px 12px;
}

.bg_instagram
{
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  padding: 10px 12px;

}

.bg_facebook:hover,
.bg_whatsapp:hover,
.bg_telegram:hover,
.bg_linkedin:hover,
.bg_twitter:hover,
.bg_download:hover,
.bg_tiktok:hover,
.bg_youtube:hover,
.bg_instagram:hover,
.bg_twitter_x:hover
{
    filter: brightness(1.2);
    transition: 0.3s;
}

/* Whatsapp chatbot */
.whatsapp-float-btn 
{
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    background: #25d366;
    color: #fff;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    cursor: pointer;
    animation: bounceIn 1s;
    transition: box-shadow 0.3s;
}

.whatsapp-float-btn:hover
{
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

@keyframes bounceIn
{
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); }
}

.whatsapp-chatbot
{
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 320px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    z-index: 9999;
    display: none;
    flex-direction: column;
    animation: fadeInUp 0.5s;
}

@keyframes fadeInUp
{
    from { transform: translateY(40px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.chatbot-header
{
    background: #25d366;
    color: #fff;
    padding: 12px 16px;
    border-radius: 16px 16px 0 0;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chatbot-body
{
    padding: 16px;
    font-size: 1rem;
    color: #222;
    min-height: 80px;
    animation: fadeIn 1s;
}

@keyframes fadeIn
{
    from { opacity: 0; }
    to { opacity: 1; }
}

.chatbot-footer
{
    padding: 12px 16px;
    text-align: right;
    display: flex;
    gap: 8px;
    align-items: center;
}

.chatbot-input
{
    flex: 1;
    border: 1px solid #25d366;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 1rem;
    outline: none;
    margin-right: 8px;
}

.chatbot-btn
{
    background: #25d366;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}

.chatbot-btn:hover
{
    background: #128c7e;
}

.chatbot-close
{
    background: none;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
}

/*=============== CARD ===============*/ 
.card__article {
  position: relative;
  overflow: hidden;
}

.card__img {
    width: 100%;
    height: 450px;
    object-position: top;
    object-fit: cover;
    border-radius: 1.5rem;
}

.card__data {
  width: 280px;
  background-color: #fff;
  padding: 1.5rem 2rem;
  box-shadow: 0 8px 24px hsla(0, 0%, 0%, .15);
  border-radius: 1rem;
  position: absolute;
  bottom: -9rem;
  left: 0;
  right: 0;
  margin-inline: auto;
  opacity: 0;
  transition: opacity 1s 1s;
}

/* Naming animations in hover */
.card__article:hover .card__data {
  animation: show-data 1s forwards;
  opacity: 1;
  transition: opacity .3s;
}

.card__article:hover {
  animation: remove-overflow 2s forwards;
}

.card__article:not(:hover) {
  animation: show-overflow 2s forwards;
}

.card__article:not(:hover) .card__data {
  animation: remove-data 1s forwards;
}

/* Card animation */
@keyframes show-data {
  50% {
    transform: translateY(-10rem);
  }
  100% {
    transform: translateY(-7rem);
  }
}

@keyframes remove-overflow {
  to {
    overflow: initial;
  }
}

@keyframes remove-data {
  0% {
    transform: translateY(-7rem);
  }
  50% {
    transform: translateY(-10rem);
  }
  100% {
    transform: translateY(.5rem);
  }
}

@keyframes show-overflow {
  0% {
    overflow: initial;
    pointer-events: none;
  }
  50% {
    overflow: hidden;
  }
}

.image_clippy
{
    clip-path: polygon(8% 0, 100% 0, 100% 100%, 0% 100%);
}

.img_equipo
{
    width: 100%;
    height: 180px;
    object-fit: cover;
}

    .card_glass
    {
        position: relative;
        z-index: 1;
        padding: 1rem;
        border-radius: 20px;
        background-color: #fafafa10;
        backdrop-filter: blur(1rem);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .user 
    {
        position: relative;
        z-index: 1;
        /* width: 250px; */
        /* height: 350px; */
        /* 350/250 = 1.4 */
        /* aspect-ratio: 1 / 1.4; */
        padding: 1rem;
        border-radius: 20px;
        background-color: #fafafa20;
        backdrop-filter: blur(1rem);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

.user-img-wrap {
  position: relative;
  width: 117px;
  aspect-ratio: 1;
  padding: 7px;
  border-radius: 100%;
}

.user-img-wrap::after {
  position: absolute;
  z-index: -1;
  content: "";
  inset: 0;
  border-radius: 100%;

  background: linear-gradient(
    #4cd964,
    #5ac8fa,
    #007aff,
    #7dc8e8,
    #5856d6,
    #ff2d55
  );

  opacity: 0;
  transition: opacity 1s;

  animation: rotate 4s linear infinite;
  animation-play-state: paused;
  filter: saturate(2) blur(10px);
}

.user:hover .user-img-wrap::after {
  opacity: 1;
  animation-play-state: running;
}

@keyframes rotate {
  to {
    rotate: 360deg;
  }
}

.user-img {
  aspect-ratio: 1;
  border-radius: 100%;
  overflow: hidden;
  object-fit: cover;
}

.user-meta {
  text-align: center;
}

.user-name {
  font-size: 20px;
  font-size: 1.25rem;
  font-weight: 500;
  color: #fff;
}

.user-location {
  font-size: 14px;
  font-size: 0.875rem;
  color: #b9babe;
  margin-bottom: 1rem;
}

.user-profiles {
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 340px) {
  .card__data {
    width: 250px;
    padding: 1rem;
  }
}

@media only screen and (min-width:320px) and (max-width:1199px)
{
    .offcanvas
    {
        background-color: hsla(210, 43%, 11%, 1);
        background-image: radial-gradient(circle at 1% 2%, hsla(205.16129032258067, 68%, 8%, 0.57) 7%, transparent 84%), radial-gradient(circle at 86% 75%, hsla(194.1818181818182, 0%, 100%, 1) 7%, transparent 72%), radial-gradient(circle at 2% 98%, hsla(205.47945205479454, 83%, 17%, 0.48) 7%, transparent 84%);
        background-blend-mode: normal, overlay, normal;
    }
   .texto_frase
    {
        padding-left: 0px;
    }

    .image_clippy
    {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }

    .content
    {
        min-height: 300px;
    }
}