html,
body {
    margin: 0;
    padding: 0;
    /* ojo con overflow-x: hidden; aquí, puede generar comportamientos raros en mobile */
    /* overflow-x: hidden;  <-- pruébalo comentado */
    background-color: #000;
}

textarea {
    resize: none;
    overflow: auto;
    /* Opcional: Maneja el desbordamiento del contenido */
}

.mob-ok {
    display: none !important;
}

body {
    margin: 0;
    padding: 0;
}

.mb-200 {
    margin-bottom: 160.00px !important;
}

h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1,
p {
    z-index: 1;
    color: #f9f9f9;
}

section h1 {
    font-family: 'PP Telegraf';
    font-weight: 400;
    font-size: 48.00px;
    line-height: 65.60px;
    color: #f9f9f9;
    margin: 0;
}

.montserrat {
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.main-bg {
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    position: fixed;
    background: linear-gradient(180deg, #222 0%, #000 100%), #222;
    z-index: -1;
}

.bg {
    position: absolute;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    /* display: flex; */
    z-index: -1;
}

.bg img {
    position: absolute;
}

/** HEADER **/
header {
    height: 48.80px;
    background: linear-gradient(284.59deg, #f9f9f91a 0%, #11111100 100%);
    filter: drop-shadow(0.00px 3.20px 8.00px #00000040);
    backdrop-filter: blur(14.44px);
}

.navbar.navbar-stuck {
    z-index: 111111111;
    background-color: unset
}

header.navbar.navbar-stuck {
    background-color: #22222200 !important;
    transition: background-color 0.3s ease;
}

header.navbar.navbar-stuck.bg-white {
    background-color: #22222280 !important;
}


header .navbar-brand {
    position: absolute;
    width: 93.39px;
    left: 58.20px;
}

header .navbar-brand img {
    width: 100%;
}

header #navbarNav {
    align-items: center;
}

.offcanvas-body {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    padding: 0.00px !important;
}

header #navbarNav .offcanvas-body ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0;
    gap: 19.20px;
    margin: 0 auto;
    height: 32.00px;
}

header #navbarNav .offcanvas-body ul li a {
    font-family: 'Montserrat';
    font-weight: 500;
    font-size: 11.20px;
    line-height: 13.60px;
    text-align: center;
    color: #f9f9f9;
    padding: 8.00px 16.00px;
    position: relative;
    transition: all .2s ease-in-out;
}

header #navbarNav .offcanvas-body ul li a.active {
    color: #f9f9f9 !important;
}

header #navbarNav .offcanvas-body ul li a:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    padding: 0.80px;
    border-radius: 40.00px;
    background: linear-gradient(130deg, #ffe7e7aa -7%, #f9f9f9aa 0%, #22222200 24%, #f9f9f922 65%, #7381ff50 88%, #00074900 111%);
    mask: linear-gradient(#f9f9f9 0 0) content-box, linear-gradient(#f9f9f9 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    z-index: 111;
    transform: scale(.95);
    transition: all .2s ease-in-out;
}

header #navbarNav .offcanvas-body ul li a:focus:before {
    opacity: 0;
}

header #navbarNav .offcanvas-body ul li a.active:before,
header #navbarNav .offcanvas-body ul li a:hover:before {
    opacity: 1;
    transform: scale(1);
    transition: all .2s ease-in-out;
}

.nav-link.active:not([data-bs-toggle=dropdown]) {
    pointer-events: inherit;
    cursor: pointer;
}


/* STYLES */

section {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
}

h3 {
    color: #f9f9f9 !important;
}

.style-content:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.00px;
    background: linear-gradient(130deg, #ffe7e7aa -7%, #f9f9f9aa 0%, #22222200 24%, #f9f9f922 65%, #7381ff50 88%, #00074900 111%);
    mask: linear-gradient(#f9f9f9 0 0) content-box, linear-gradient(#f9f9f9 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    z-index: 2;
}

.style-content:hover,
.style-content:active {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.style-content:hover:before,
.style-content:active:before {
    background: linear-gradient(130deg, #ffe7e7aa -7%, #f9f9f9aa 0%, #22222200 24%, #f9f9f922 65%, #7381ff50 88%, #00074900 111%);
    z-index: 5;
}

.style-fill {
    position: absolute;
    background: linear-gradient(284.59deg,
            #f9f9f907 0%,
            #11111100 100%);
    opacity: 1 !important;
    /* background-color: #222 !important; */
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: 8.00px;
    backdrop-filter: blur(12.56px);
    transition: all .3s ease-in-out;
}

.style-hover {
    background: linear-gradient(284.59deg,
            #f9f9f933 0%,
            #f9f9f900 100%);
    opacity: 0 !important;
    z-index: 1;
    transition: all .35s ease-in-out;
}

.style-content:hover .style-fill {
    opacity: 0;
}

.style-content:hover .style-fill.style-hover {
    opacity: 1 !important;
}

.style-content:hover .style-fill.style-hover.bs {
    box-shadow: 0 0 17.60px #f9f9f955;
}

.style-bg {
    background: linear-gradient(284.59deg,
            #f9f9f907 0%,
            #11111100 40%);
    z-index: 1;
    border-radius: 8.00px;
    position: relative;
}

.style-bg:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.00px;
    background: linear-gradient(130deg, #ffe7e7aa -7%, #f9f9f9aa 0%, #22222200 24%, #f9f9f922 65%, #7381ff50 88%, #00074900 111%);
    mask: linear-gradient(#f9f9f9 0 0) content-box, linear-gradient(#f9f9f9 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    z-index: 2;
    border-radius: 8.00px;
}

.style-bg .style-bg {
    background: linear-gradient(160deg,
            #22222200 60%,
            #f9f9f908 100%);
    backdrop-filter: unset !important;
}


/** ANIM **/
.scroll-animate {
    opacity: 0;
    transform: translateY(-16.00px);
    transition: opacity 0.5s ease-out var(--delay, 0s), transform 0.5s ease-out var(--delay, 0s), box-shadow 0.5s ease-in-out;
}

.scroll-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

.scroll-animate.fade-in {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.5s ease-out var(--delay, 0.05s);
}

.scroll-animate.fade-in.visible {
    opacity: 1;
    transform: scale(1);
}

.scroll-animate.fade-in.delayed {
    transform: scale(0.9);
    transition: all 0.5s ease-out var(--delay, 0.5s);
}

.scroll-animate.fade-in.delayed.visible {
    opacity: 1;
    transform: scale(1);
}

/* * {
    outline: 1px solid yellow;
} */