@font-face {
    font-family: 'Inter';
    src: url("./fonts/Inter.ttf") format("opentype");
}

@font-face {
    font-family: 'ClashDisplay';
    src: url("./fonts/ClashDisplay-Variable.ttf") format("opentype");
}

@font-face {
    font-family: 'MartianMono';
    src: url("./fonts/MartianMono.ttf") format("opentype");
}

:root {
    --white: #fff;
    --black: #000000;
    --green: #66f21b;
    --gray: #d9d9d9;
    --fs-base: clamp(0.875rem, 0.85rem + 0.1vw, 0.937a5rem); /*15px - 14px*/
    --fs6: clamp(1.125rem, 1.075rem + 0.2vw, 1.25rem); /*20px - 18px*/
    --fs5: clamp(1.125rem, 0.8894230769230769rem + 0.8974358974358974vw, 1.5625rem); /*25px - 18px*/
    --fs4: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); /*40px - 24px*/
    --fs3: clamp(2rem, 1.5499999999999998rem + 1.8000000000000003vw, 3.125rem); /*50px - 32px*/;
    --fs2: clamp(2.5rem, 1.1607142857142856rem + 5.9523809523809526vw, 5.625rem); /*40px - 90px*/
    --fs1: clamp(2.5rem, 0.8928571428571426rem + 7.142857142857144vw, 6.25rem);  /*40px - 100px*/
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

body {
    min-height: 100dvh;
    max-width: 100dvw !important;
    overflow-x: hidden;
    margin-inline: auto;
    font-family: 'MartianMono';
    color: var(--white);
    background-size: 128px;
    background-repeat: repeat;
    background-image: url("../img/banners/01.png");
    font-size: 0.875rem;
    font-size: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem); /*15px - 14px*/
}

h1, h2, h3, h4, h5 {
    font-family: 'ClashDisplay';
}

h1 {
    font-size: var(--fs-b-xxl);
    font-size: var(--fs-xxl);
    color: var(--white);
    font-weight: 300;
    margin-top: 3rem;
}

h2 {
    font-weight: 700;
    letter-spacing: 1px;
}

p {
    text-wrap: pretty;
    margin: 0;
    margin-inline: auto;
}

ul {
    text-decoration: none;
    padding: 0;
}

a {
    text-decoration: none;
}

#copete {
    height: 175px;
}

.ck-editor {
    width: 100% !important;
    padding-inline: 12px !important;
    margin-left: 4px !important;
}

.ck-editor__editable_inline {
    width: 100%;
    height: 450px;
    border-color: transparent !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--white);

    &:focus {
        border: 1px solid #66f21b !important;
        border-top: none !important;
        background-color: transparent !important;
        color: var(--white) !important;
    }
}

/*Generales*/
.container-fluid {
    margin-inline: 20px;
}

.img-flotante {
    animation: flotar 3s ease-in-out infinite;
}

@keyframes flotar {
    0% {
        transform: translateY(0); /* Posición inicial */
    }
    50% {
        transform: translateY(30px); /* Mueve hacia abajo */
    }
    100% {
        transform: translateY(0); /* Regresa a la posición inicial */
    }
}

/*Negrita*/

.fw-300{
    font-weight: 300;
}


.fw-500{
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

.fw-900 {
    font-weight: 900;
}

/*Tamaños*/
.ft-9 {
    font-size: 9px;
}

.ft-10 {
    font-size: 10px !important;
}

.ft-12 {
    font-size: 12px !important;
}

.ft-14 {
    font-size: 14px !important;
}


/*Colores*/

.text-black {
    color: var(--black) !important;
}

.active {
    color: #ffe8b3 !important;
}

/*Distribuciones*/

.start-x, .start-y, .center-x, .center-y, 
.between-x, .between-y, .end-y, .end-x, .around-x {
    display: flex;
    flex-wrap: wrap;
}

.start-y, .center-y, .between-y, .end-y {
    flex-direction: column;
}

.start-x, .start-y {
    justify-content: start;
    align-items: start;
}

.center-x, .center-y {
    justify-content: center;
    align-items: center;
}

.between-x, .between-y {
    justify-content: space-between;
    align-items: center;
}

.around-x {
    justify-content: space-around;
    align-items: start;
}

.end-y, .end-x {
    justify-content: end;
}

/*Imagen de fondo*/

.imagen-fondo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/*Estilos*/
.text-sub {
    position: relative;
    display: inline-flex;
}

button {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-family: inherit;
}

.text-sub::after {
    content: "";
    height: 2px;
    width: 130%;
    left: 0;
    bottom: 0px;
    background-color: #ED8F22;
    position: absolute;
}

/* section {
    padding: 4rem 0;
} */

.btn-base {
    display: inline-flex;
    padding: 15px 40px;
    font-size: 15px;
    text-transform: uppercase;
    border-radius: 0px 50px 50px 0px;
    background-color: var(--black);
    border: 3px var(--black) solid;
    color: var(--green);
    transition: all 0.5s ease;

    &:hover {
        background-color: var(--gray);
        color: var(--black);
    }
}

.btn-base2 {
    display: inline-flex;
    padding: 15px 40px;
    font-size: 15px;
    text-transform: uppercase;
    border-radius: 0px 50px 50px 0px;
    background-color: rgba(0, 0, 0, 1);
    color: var(--white);
    transition: all 0.5s ease;

    &:hover {
        background-color: rgba(0, 0, 0, 0.75);
    }
}

.btn-base3 {
    display: inline-flex;
    padding: 15px 40px;
    font-size: 15px;
    text-transform: uppercase;
    border-radius: 0px 50px 50px 0px;
    background-color: var(--gray);
    border: 1px var(--gray) solid;
    color: rgb(17, 17, 17);
    transition: all 0.5s ease;
    font-weight: 700;

    &:hover {
        background-color: transparent;
        color: var(--gray);
    }
}



/*Header*/
/* Nav */

nav {
    position: fixed;
    width: 100%;
    transition: all 0.5s ease-in;
    z-index: 100;
}


.navbar {
    font-size: 15px;
    color: var(--white);
    font-weight: 500;
    height: 80px;
    background-color: transparent;
    padding: 0 !important;

    & li a {
        transition: all 0.5s ease;
    }


    & li:hover a {
        font-size: 30px;
    }

    & .btn-base {
        color: var(--white);
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    & li:last-child {
        border-bottom: 3px solid;
        border-color: #66f21b !important;

        & a {
            padding-left: 40px;
            color: #66f21b !important;
        }
    }

    .logo {
        height: 80px;
    }

    & .categorias {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: end;
        padding-top: 50px;
        max-height: 75vh;
    }
    
    & .categorias li:not(.close) {
        margin-inline: 1rem;
        transition: 0.2s all ease;
        font-weight: 700;
        font-size: 22px;
        text-transform: uppercase;
        border-right: 3px solid var(--white);
        padding: 8px 20px 8px 0;
    
        & a {
            color: var(--white);
            position: relative;
        }
    }
}

.navbar.active {
    background-size: 400px;
    background-repeat: repeat;
    background-image: url("../img/banners/fondo.gif");
}

/* Estado inicial del menú */
.offcanvas-top {
    top: 80px !important;
    height: 0;
    background-size: 400px;
    background-repeat: repeat;
    background-image: url("../img/banners/fondo.gif");
}


/* Animación para expandir el menú */
@keyframes expandMenu {
    from {
        height: 0;
    }
    to {
        height: 100dvh;
    }
}

/* Animación para colapsar el menú */
@keyframes collapseMenu {
    from {
        height: 100dvh;
    }
    to {
        height: 0;
    }
}

/* Cuando el menú esté visible */
.offcanvas-top.show {
    animation: expandMenu 0.5s ease-in-out forwards;
}

/* Cuando el menú se oculta */
.offcanvas-top:not(.show) {
    animation: collapseMenu 0.5s ease-in-out forwards;
}

.offcanvas-backdrop.show {
    display: none;
}

.navbar-nav::-webkit-scrollbar{
    width: 0px;
}


/* From Uiverse.io by JulanDeAlb */ 
.navbar-toggler {
    border: none;
}

/* From Uiverse.io by vinodjangid07 */ 
#checkbox {
    display: none;
}

.hamburger {
    position: relative;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0;
}

.hamburger:focus {
    box-shadow: none;
}

.offcanvas-top:not(.show) + .hamburger:hover .bars {
    animation: rotateIn 1s forwards; /* Animación al hacer hover */
}

.offcanvas-top:not(.show) + .hamburger:not(:hover) .bars {
    animation: rotateOut 1s forwards; /* Animación al salir del hover */
}


@keyframes rotateIn {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(180deg);
    }
}

@keyframes rotateOut {
    from {
        transform: rotate(180deg);
    }
    to {
        transform: rotate(0deg);
    }
}

.bars {
    width: 100%;
    height: 4px;
    background-color: var(--white);
    border-radius: 4px;
}


.offcanvas-top.show + .hamburger .bars {
    position: absolute;
    transition-duration: .5s;
}

.offcanvas-top.show + .hamburger #bar1 {
    width: 100%;
    transform: rotate(45deg);
    transition-duration: .5s;
}

.offcanvas-top.show + .hamburger #bar3 {
    width: 100%;
    transform: rotate(-45deg);
    transition-duration: .5s;
}

.offcanvas-top.show + .hamburger {
    transition-duration: .5s;
    transform: rotate(180deg);
}

.offcanvas-top {
    background-color: rgba(0, 0, 0, 0.8);
}


.isotipo {
    width: 48px;
    height: 48px;

    &:hover {
        animation: rotateIn 1s forwards; /* Animación al hacer hover */
    }
    
    &:not(:hover) {
        animation: rotateOut 1s forwards; /* Animación al salir del hover */
    }
}

/*Footer*/
footer {
    position: relative;
    background: linear-gradient(to bottom, transparent 41px, var(--gray) 20px);

    & .elemento {
        position: absolute;
        top: 30%;
        z-index: 1;
        width: 250px;
    }
}

.ct-footer {
    width: 90%;
    position: relative;

    & h2 {
        font-size: 2.5rem;
        font-size: var(--fs2); /*40px - 90px*/
        line-height: 0.9;
        text-transform: uppercase;
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px  1px 0 #000, 1px  1px 0 #000;
        color: var(--gray);
        padding-left: 0.5rem !important;
    }

    & h4 {
        color: var(--black);
        font-size: 1.25rem;
        font-size: clamp(1.25rem, 0.6944444444444444rem + 1.1574074074074074vw, 1.5625rem); /*25px -20px*/
        line-height: 1.2;
        font-weight: 600;
        text-transform: uppercase;
    }

    & .suscripcion {
        display: flex;
        justify-content: space-between;

        & input[type="email"] {
            margin-right: 20px;
            max-width: 74%;
            border-radius: 0 50px 50px 0;
            background-color: var(--black);
            border: 1px solid var(--black);
            color: var(--white);
            height: 60px;

            &:focus {
                border-color: var(--black);
                box-shadow: none;
            }

            &::placeholder {
                color: var(--gray);
            }
        }
    }

    & .btn-base {
        width: 250px;
        justify-content: center;
    }

    & .center-y {
        align-items: end;
    }

    & .section {
        border-bottom: 1px solid var(--black);
        padding: 2.5rem 0;

        & .row {
            max-width: 1000px;
            width: 100%;
        }
    }

    & ul {
        list-style: none;

        & li {
            font-size: 15px;
            font-weight: 400;
            color: var(--black);
            text-transform: uppercase;
            padding-top: 1rem;

            &:not(:last-child) {
                padding-bottom: 1rem;
            }

        }
    }

    & a:not(.btn-base) {
        color: var(--black);

        &:hover {
            border-bottom: 1.6px solid var(--black);
        }
    }

    & .section:last-child {
        padding: 0.5rem 0 2rem 0;

        & p {
            color: rgb(17, 17, 17);
            font-size: 12px;
            text-transform: uppercase;
        }
    }

    & .redes {
        font-size: 30px;
        color: rgb(17, 17, 17);
        max-width: 50%;
        display: flex;
        justify-content: space-between;
        padding: 1rem;
        margin-inline: auto;

        & a {

            &:hover {
                border-bottom: none;
            }
        }
    }

    & .copyright {
        max-width: 95%;
        margin-inline: auto;
        text-align: center;
    }

}

.shape {
    width: 100%;
    height: 250px;
    background-size: 128px;
    background-repeat: repeat;
    background-image: url("../img/banners/01.png");
    clip-path: polygon( 100% 0, 0 0, 100% 100%);
    position: absolute;
    top: 40px;
    z-index: 0;
}

.shape2 {
    width: 100%;
    height: 250px;
    background-size: 128px;
    background-repeat: repeat;
    background-image: url("../img/banners/01.png");
    clip-path: polygon( 0 0, 0 100%, 100% 0);
    position: absolute;
    top: -1px;
    z-index: 0;
}

.shape3 {
    width: 100%;
    height: 250px;
    background-size: 128px;
    background-repeat: repeat;
    background-image: url("../img/banners/01.png");
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
    position: absolute;
    top: -1px;
    z-index: 0;
}

/*Main*/
main {
    padding-top: 60px;
}

.content {
    max-width: 90%;
    margin-left: 10%;
}

.portada-section {
    max-width: 100dvw;
    position: relative;;

    & .img-flotante {
        position: absolute;
        left: 70%;
        top: 40px;
        max-height: 750px;
        z-index: -1;
    }

    & h2 {
        font-size: 30px;
        line-height: 36px;
        margin-right: 1rem;
    }

    & .titulo {
        max-width: 60%;
        
        & h1 {
            font-size: 2.3rem;
            font-size: var(--fs1);  /*40px - 100px*/
            font-weight: 700;
            line-height: 0.9;
            color: var(--gray);
            text-transform: uppercase;
            & span {
                text-shadow: -1px -1px 0  var(--gray), 1px -1px 0 var(--gray), -1px  1px 0 var(--gray), 1px  1px 0 var(--gray);
                color: rgb(17, 17, 17);
            }
        }

        & p {
            line-height: 1.5;
            padding: 3rem 0 6rem 0;
            text-transform: uppercase;
            margin-right: 10%;
             font-size: 17px;
        line-height: 30px;
        }
    }

    & .info {
        border-radius: 0  0 0 150px;
        border-left: 1px solid var(--white);
        border-bottom: 1px solid var(--white);
        padding: 5% 8%;
        position: relative;
        overflow: hidden;

        & .imagenes {
            position: relative;
        
            & .emoticon {
                max-width: 150px;
                position: absolute;
                top: 35%;
                left: 65%;
            }
        }

        & .notebook-container {
            position: relative;
            width: 100%;
        }

        & .video-wrapper {
            position: absolute;
            top: 30%;
            left: 3%;
            width: 43.5%;
            height: 41%;
            background-color: var(--black);
            overflow: hidden;
            clip-path: polygon(0% 0%, 99% 3%, 97.8% 98%, 0% 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            transform: rotate(-14deg) skewX(1.5deg) skewY(-1.5deg);
            transform-origin: top left;
        }
        
        & .video-screen {
            width: 100%;
            height: 100%;
            object-fit: cover;
            pointer-events: none;
        }

        & .ct-buttom {
            position: absolute;
            top: 0;
            left: 0;

            & .btn-base3 {
                font-size: 1.125rem;
                font-size: var(--fs5);
                line-height: 1.2;
            }
    
            & .brillo {
                width: 80px;
                position: absolute;
                top: -10px;
                right: -30px;
            }
        }

        & .positon-relative {
            display: inline-flex;
            background-color: red !important;
            border: 1px solid red !important;
            width: 100%;
            height: 200px;
        }
    }

    & .caracteristica {
        border-radius: 50px;
        border: 1px var(--gray) solid;
        padding: 0.5rem 1rem;
        margin-inline: 1rem;
    }

    & .form-contacto {
        max-width: 50%;
        padding-bottom: 100px;

        & input[type="text"]:focus, & input[type="tel"]:focus, & input[type="number"]:focus, 
        & input[type="email"]:focus, & input[type="password"]:focus, & #mensaje:focus{
            border: 1px solid #66f21b !important;
            box-shadow: 0 0 6px #66f21b !important;
            color: var(--white) !important;
        }

        & input, & textarea {
            padding: 20px 25px;
            height: 60px;
            border-radius: 30px;
            border-color: transparent;
            background-color: rgba(255, 255, 255, 0.1);
            color: var(--white);

            &::placeholder {
                color: var(--gray);
            }
        }

        & textarea {
            height: 175px;
            resize: none;
        }

        & .btn-base2 {
            border-radius: 30px;
            width: 100%;
            justify-content: center;
            background-color: rgb(240, 240, 240);
            color: var(--black);
            font-weight: 600;

            &:hover {
                background-color: var(--gray);
            }
        }
    }
}

.portada-section.nosotros {
    padding-top: 50px;
    padding-bottom: 150px;

    & .img-flotante {
        left: 60%;
        max-width: 700px;
        z-index: -1;
    }

    & h1 {
        margin-bottom: 2rem;
    }

    & p {
        padding: 0.5rem 0;
        max-width: 75%;
        margin: 0;
        font-size: 18px;
        line-height: 32px;
    }
}

.portada-section.totem {
    padding-top: 50px;
    padding-bottom: 150px;

    & .img-flotante {
        left: 60%;
        max-height: 600px;
        z-index: 1;
    }

    & h1 {
        margin-bottom: 2rem;
    }

    & p {
        padding: 0.5rem 0;
        max-width: 75%;
        margin: 1rem 0 2rem 0;
    }
}


.comentario-section {
    color: var(--gray);
    padding-top: 3rem;
    position: relative;

    & h3 {
        font-size: 1.5rem;
        font-size: clamp(1.5rem, 0.5999999999999999rem + 3.6000000000000005vw, 3.75rem);
        line-height: 1.2;
        font-weight: 700;
        text-transform: uppercase;
        max-width: 80%;
        letter-spacing: 1px;
    }

    & p {
        text-transform: uppercase;
        padding: 1rem 0 2rem 0;
    }

    & .btn-base3 {
        font-size: 1.125rem;
        font-size: var(--fs6) !important; /*20px - 18px*/
        line-height: 1.2;
        justify-content: center;
        padding-inline: 6rem;
        margin-bottom: 300px;
    }
    

    & .shape {
        width: 100%;
        height: 250px;
        background-color: var(--gray);
        background-image: none;
        clip-path: polygon(0 0, 100% 100%, 0 100%);
        position: absolute;
        z-index: -1;
        left: 0;
        top: auto;
        bottom: -1px;
    }

    & .elemento {
        position: absolute;
        bottom: -100px;
        left: calc(50% - 200px);
        z-index: -2;
        width: 400px;
    }
}

.caracteristicas-section {
    background-color: var(--gray);
    position: relative;
    padding-bottom: 40px;

    & h2 {
        font-size: 2.4rem;
        font-size: var(--fs2); /*40px - 90px*/
        line-height: 0.9;
        text-transform: uppercase;
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px  1px 0 #000, 1px  1px 0 #000;
        color: var(--gray);
        margin-top: -50px;
        position: absolute;
        top: -80px;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    & .subtitulo {
        padding-top: 60px;
        text-transform: uppercase;
        color: var(--black);
    }

    & .caracteristica {
        width: 100%;
        background-size: 128px;
        background-repeat: repeat;
        background-image: url("../img/banners/01.png");
        border-radius: 100px 0 0 100px;
        color: var(--white);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 3rem 2rem;
        text-transform: uppercase;
        margin: 2rem 0;


        & h3 {
            padding-right: 2rem;
            font-size: 2rem;
            font-size: var(--fs3); /*50px - 32px*/
            text-align: end;
            width: 500px;
        }

        & p {
            color: var(--gray);
            max-width: 50%;
            padding-top: 0;
            margin: 0;
            border-left: 2px solid var(--white);
            padding-left: 2rem;
        }
    }
}

.soluciones-section, .mision-section {
    position: relative;

    & .content {
        padding-top: 150px;
    }

    .shape-letras {
        width: 100%;
        height: 250px;
        background-color: var(--gray);
        clip-path: polygon( 100% 0, 0 0, 100% 100%);
        position: absolute;
        top: -1px;
        left: 0;
        z-index: 0;
    }

    & .carrusel-titulos {
        padding-top: 60px;
    }

    & h2 {
        font-size: 70px;
        line-height: 84px;
        text-transform: uppercase;
        color: var(--black);
    }

    & h4 {
        font-size: 1.5rem;
        font-size: var(--fs4); /*40px - 24px*/
        line-height: 1.2;
        font-weight: 600;
        margin-bottom: 1.5rem;
        color: var(--gray);
        max-width: 900px;
        letter-spacing: 1px;
    }

    & .btn-base2 {
        margin-top: 2rem;
        background-color: transparent;
        border: 1px solid var(--gray);
        font-size: 1.125rem;
        font-size: var(--fs6) !important; /*20px - 18px*/
        line-height: 1.2;
        font-weight: 600;
        width: 98%;
        max-width: 400px;
        justify-content: center;

        &:hover {
            background-color: var(--gray);
            color: var(--black);
        }
    }

    & .carrusel-soluciones {
        display: flex;
        padding-bottom: 1rem;
    }

    & .slick-track {
        display: flex;
        height: 100%;
    }

    & .solucion {
        border-radius: 0 100px 0 0;
        background-color: #d9d9d9;
        padding: 30px 40px;
        position: relative;
        overflow: hidden;
        height: 100%;

        & .text-repeat {
            color: #4d4d4d;
            font-size: 60px;
            line-height: 70px;
            font-weight: 700;
            text-transform: uppercase;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%) rotate(10deg);
            z-index: 0;
        }

        & .img-fluid {
            max-width: 250px;
            padding-top: 100px;
            padding-bottom: 50px;
            position: relative;
            box-sizing: content-box;
        }

        & p {
            position: relative;
            text-transform: uppercase;
            color: rgb(17, 17, 17);
        }
    }
}

.next i, .prev i {
    font-size: 28px;
    color: var(--white);

}

.next, .prev {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.6);
    top: calc(50% - 50px);
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 1;
    cursor: pointer;
}

.prev {
    left: 30px;
}

.next {
    right: 30px;
}

.line {
    height: 1px;
    width: 100%;
    background-color: var(--white);
    margin: 2rem 0;
}

.equipo-section {
    & .equipo {
        flex-wrap: nowrap;
        justify-content: start;
        text-transform: uppercase;
        color: var(--gray);
        padding: 2rem 0 3rem 0;
        border-bottom: 1px solid var(--white);
        margin-bottom: 2rem;


        & .img-fluid {
            max-width: 125px;
            background-color: var(--gray);
            border-radius: 50%;
            margin-right: 3rem;
        }

        & h3 {
            font-weight: 700;
            font-size: 1.5rem;
            font-size: var(--fs4); /*40px - 24px*/
            letter-spacing: 1px;
        }

        & p {
            max-width: 90%;
            margin: 0;
        }
    }
}

.linea2 {
    transform: rotate(180deg);

    & .slick-slide {
        transform: rotate(180deg);
    }
}

.cifras-section {
    padding: 150px 0;

    & h2 {
        font-size: 2rem;
        font-size: var(--fs3);
        line-height: 1.18;
        color: var(--gray);
        margin-bottom: 2rem;
        text-transform: uppercase;
    }
}

.ct-cifras {
    background-color: var(--gray);
    border-radius: 200px 0 0 200px;
    color: var(--black);
    overflow: hidden;
    text-align: center;
    max-height: 250px;

    & .dato {
        padding: 1rem 0;

        & .digit {
            font-family: 'ClashDisplay';
            font-weight: 700;
            font-size: 2.5rem;
            font-size: var(--fs1);  /*40px - 100px*/
            margin-bottom: 0;
            line-height: 1.01;
        }
    
        & .description {
            text-transform: uppercase;
        }

        & .titulo {
            font-size: var(--fs5);
            font-weight: 700;
            text-align: start;
            text-transform: uppercase;
        }
    }
}

.testimonios-section {
    background-color: var(--gray);
    padding: 50px 0 300px 0;
    position: relative;

    & h2 {
        font-size: 2.5rem;
        font-size: var(--fs2); /*40px - 90px*/
        line-height: 0.9;
        text-transform: uppercase;
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px  1px 0 #000, 1px  1px 0 #000;
        color: var(--gray);
        position: absolute;
        top: 100px;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    & .grafico {
        max-width: 700px;
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 0;
    }

    & .shape2 {
        top: -1px;
    }

    & .shape3 {
        top: auto;
        bottom: -3px;
        z-index: 1;
    }

    & .carrusel-casos {
        margin-top: 250px;
        padding-top: 100px;
        max-width: 90%;
        display: flex;
        position: relative;
        z-index: 1;
    }

    & .slick-track {
        display: flex;
        height: 100%;
    }

    & .caso {
        padding: 3rem;
        border-radius: 3rem;
        background-color: var(--gray);
        text-transform: uppercase;
        position: relative;
        border: 1px solid var(--black);
        color: var(--black);



        & p {
            margin-bottom: 1rem;
        }

        & .autor {
            font-family: 'ClashDisplay';
            font-size: 1.125rem;
            font-size: var(--fs5);
            font-weight: 600;
            &::before {
                content: "●";
                margin-right: 1rem;
            }
        }
    }

    & .next i, & .prev i {
        font-size: 20px;
        color: var(--white);
    }

    & .prev, & .next {
        background-color: var(--black);
        width: 40px;
        height: 40px;
        top: 0;
    }

    & .prev {
        left: 10px;
    }
    
    & .next {
        left: 60px;
    }
}


.section-precios {
    padding: 50px 0;

    text-transform: uppercase;

    & h2 {
        font-size: 2.5rem;
        font-size: var(--fs1);  /*40px - 100px*/
        line-height: 0.9;
        color: var(--gray);
    }

    & h3 {
        font-size: 1.5rem;
        font-size: var(--fs4); /*40px - 24px*/
        line-height: 1.2;
        font-weight: 700;
        margin-bottom: 3rem;
    }

    li {
        margin: 2rem 0;
        margin-left: 1rem;
    }

    .basico {
        border-radius: 100px 0 0 0;
        border: 1px solid var(--white);
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        & .info {
            padding: 3rem;
        }
    }

    & .precio {
        font-size: 1.125rem;
        font-size: 1.5rem;
        font-size: var(--fs4); /*40px - 24px*/
        line-height: 1.2;
        font-weight: 700;
        font-family: 'ClashDisplay';


        &::before {
            content: "•";
            margin-right: 2rem;
        }
    }

    & a {
        border-top: 1px solid var(--white);
        color: var(--white);
        display: flex;
        justify-content: start;
        align-items: center;
        font-size: 1.125rem;
        font-size: clamp(1.125rem, 0.7749999999999999rem + 1.4000000000000001vw, 2rem); /*32px - 18px*/
        font-family: 'ClashDisplay';
        font-weight: 600;
        transition: all 0.5s ease;
        text-align: center;
        padding-inline: 3rem;
        height: 80px;
        cursor: pointer;
        margin-bottom: 0 !important;

        &:hover {
            font-size: 1.5rem;
            font-size: var(--fs4); /*40px - 24px*/
        }
    }

    & .premium {
        position: relative !important;
    }
    
    & .premium .ms-xl-2 {
        position: relative !important;
        border: 1px solid var(--white);
        color: var(--black);
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        & .elemento {
            max-width: 250px;
            position: absolute;
            top: -100px;
            left: 70%;
        }

        & .info {
            padding: 3rem;
            background-color: var(--white);
        }

        & a {
            background: transparent;
        }
    }
}

.preguntas-section {
    margin-top: 50px;
    padding-bottom: 150px;

    & .elemento {
        position: absolute;
        top: 0;
        z-index: 1;
        width: 200px;
        left: 70%;
    }
    
    & .titulo {
        font-size: 2.5rem;
        font-size: var(--fs2); /*40px - 90px*/
        line-height: 0.9;
        font-weight: 600;
        text-transform: uppercase;
        text-shadow: -1px -1px 0 var(--gray), 1px -1px 0 var(--gray), -1px  1px 0 var(--gray), 1px  1px 0 var(--gray);
        color: var(--black);
        margin-bottom: 1rem;
    }

    & .cta {
        padding-top: 2rem;

        & p {
            margin-bottom: 1rem;
            text-transform: uppercase;
            color: var(--gray);
        }

        & .btn-base3 {
            font-size: 1.125rem;
            font-size: var(--fs6) !important; /*20px - 18px*/
            line-height: 1.2;
            justify-content: center;
            padding-inline: 8rem;
            padding: 15px;
            width: 90%;
            max-width: 350px;
        }
    }
}

.preguntas-section .accordion .accordion-button.collapsed {
    border-radius: 50px 0 0 50px;
    padding-left: 50px;
    padding-bottom: 16px;
    background-color: var(--gray);
    color: var(--black);
}

.preguntas-section .accordion .accordion-button {
    font-size: 1.125rem;
    font-size: var(--fs6) !important; /*20px - 18px*/
    text-transform: uppercase;
    font-weight: 500;
    line-height: 1;
    color: var(--gray);
    background-color: transparent;
    padding-top: 24px;
    padding-bottom: 0;
    padding-inline-start: 0;
    padding-inline-end: 0;

    box-shadow: none;
    text-align: start;
    border-radius: 100px 0 0 100px;
    padding-left: 50px;

    &::before {
        content: "+";
        font-weight: 100;
        color: var(--black);
        background-image: none;
        line-height: 1;
        width: auto;
        height: auto;
        font-size: 2.5rem;
        font-size: clamp(2.5rem, 2rem + 2vw, 3.75rem);
        margin-right: 1rem;
    }

    &::after {
        display: none;
    }

    &:not(.collapsed) {
        pointer-events: none;

        &::before {
            transform: rotate(45deg);
            color: #66f21b;
        }
        
    }
    
}

.preguntas-section .accordion .accordion-item {
    border: 1px solid var(--gray);
    background-color: transparent;
    border-radius: 50px 0 0 50px;
    border-right: none;
    margin: 1rem 0;
}

.preguntas-section .accordion .accordion-body {
    font-size: 0.75rem;
    font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem); /*14px a 12px*/
    padding-inline-start: 0px;
    padding-inline-end: 0px;
    padding-bottom: 24px;
    padding-top: 0;
    color: rgb(214, 214, 214);
    /* padding-left: 82px; */
    padding-left: 90px;
}

.team-section {
    position: relative;
    background-color: var(--gray);

    & .shape {
        top: -1px;
    }

    & h2 {
        font-size: 2.5rem;
        font-size: var(--fs2); /*40px - 90px*/
        line-height: 0.9;
        text-transform: uppercase;
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px  1px 0 #000, 1px  1px 0 #000;
        color: var(--gray);
        margin-top: -50px;
        position: absolute;
        top: 40px;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    & .subtitulo {
        padding-top: 180px;
        text-transform: uppercase;
        color: var(--black);
    }

    & .ct-equipo {
        padding: 80px 0;
    }

    & .equipo {
        flex-wrap: nowrap;
        justify-content: start;
        text-transform: uppercase;
        color: var(--gray);
        padding: 1rem 0 1rem 3rem;
        margin-bottom: 2rem;
        background-size: 128px;
        background-repeat: repeat;
        background-image: url("../img/banners/01.png");
        border-radius: 100px 0 0 100px;

        & .nombre {
            display: flex;
            align-items: center;
            justify-content: end;
            text-align: end;
            width: 550px;
        }

        & .bio {
            max-width: 550px;
            padding: 0.7rem 0 0.7rem 3rem;
            border-left: 2px solid var(--white);
        }

        & .img-fluid {
            max-width: 180px;
            margin: 0 1rem 0 0;
        }

        & h3 {
            font-weight: 700;
            font-size: 2rem;
            font-size: var(--fs3); /*50px - 32px*/
        }

    }
}

.portfolio-section {
    padding-bottom: 150px;

    & h2 {
        font-size: 2.5rem;
        font-size: var(--fs1);  /*40px - 100px*/
        line-height: 0.9;
        color: var(--gray);
    }

    & .subtitulo {
        padding: 2rem 0;
        text-transform: uppercase;
    }


    & .carrusel-eventos {
        display: flex;
        padding-right: 50px;
    }

    & .slick-track {
        display: flex;
        height: 100%;
    }

    & .next i, & .prev i {
        font-size: 20px;
        color: var(--white);
    
    }

    & .prev,  & .next {
        top: -65px;
        background-color: transparent;
    }

    & .prev {
        left: auto;
        right: 100px;
    }
    
    & .next {
        right: 50px;
    }
    
}



.noticia {
    display: flex;
    flex-direction: column;
    background-color: var(--gray);
    color: var(--black);
    overflow: hidden;
    padding: 1.5rem;
    height: 100%;
    
    & h4 {
        font-size: 1.125rem;
        font-size: var(--fs5);
        line-height: 1.2;
        text-transform: uppercase;
        font-weight: 700;
        text-align: start;
        width: 100%;
        word-break: break-word;
        overflow-wrap: break-word; 
    }

    & .miniatura {
        width: 100%;
        height: 250px;
        flex-shrink: 0;
        margin-bottom: 1rem;
    }

    & .img-fluid {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
    }

    & .info {
        margin-right: 1rem;
        width: 100%;
        height: 100%;
    }

    & p {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    & .btn-base {
        margin-top: 1rem;
        color: var(--gray);
        border-radius: 0px;
        padding: 0.5rem;
        width: 100%;

        &:hover {
            color: var(--green);
            background-color: var(--black);
        }
    }
}

.interna-noticia-section {
    color: var(--gray);

    & .content {
        padding-top: 50px;
        max-width: 70%;
    }
    
    & .portada {
        border-radius: 1rem;
        border: 1px solid var(--white);
        width: 100%;
    }

    & .contenido {
        & h2 {
            font-size: 0.1.125rem;
            font-size: var(--fs4);
            line-height: 1.2;
            font-weight: 600;
            margin: 2rem 0 1rem 0;
            font-family: 'MartianMono';
            color: var(--green);
        }

        & h3 {
            font-size: 0.9375rem;
            font-size: var(--fs5);
            line-height: 1.2;
            font-weight: 600;
            margin: 1rem 0;
            font-family: 'MartianMono';
            color: var(--green);
        }

        & h4 {
            font-size: 0.9375rem;
            font-size: clamp(0.9375rem, 0.8625rem + 0.3vw, 1.125rem); /*18px - 15px*/
            line-height: 1.2;
            font-weight: 600;
            margin: 0.7rem 0;
            font-family: 'MartianMono';
            color: var(--green);
            text-transform: uppercase;
        }

        & p {
            margin-bottom: 0.5rem;
        }

        & img {
            max-width: 100%;
        }
    }

    & .encabezado {
        padding-bottom: 1rem;
        margin-bottom: 2rem;
        border-bottom: 1px solid var(--white);

        .start-x {
            margin: 1.5rem 0;
            font-size: 11px;
            color: #66f21b;
        }

        & h2 {
            padding-right: 2rem;
            font-size: 2rem;
            font-size: var(--fs3); /*50px - 32px*/
            text-transform: uppercase;
        }

        & p {
            text-transform: uppercase;
            margin: 1rem 0;
        }

        & p:last-of-type {
            text-transform: uppercase;
            font-size: 11px;

            & span {
                color: #66f21b;
            }
        }
    }

    & .content .container-fluid > p:last-child {
        margin-bottom: 50px;
        padding-bottom: 50px;
        border-bottom: 1px solid var(--white);
    }
}

.ultimas-portfolio-section {
    & .content {
        max-width: 70%;
    }

    & h3 {
        font-size: 1.625rem;
        font-size: var(--fs4);
        font-weight: 700;
        text-transform: capitalize;
    }

    & .noticia {
        margin: 2rem 0;
    }
}

.politicas-section {
    padding-bottom: 50px;

    & .content {
        max-width: 70%;
    }

    & .encabezado {
        padding: 50px 0;
    }

    & h1 {
        font-size: 2.5rem;
        font-size: var(--fs1);  /*40px - 100px*/
        font-weight: 700;
        line-height: 0.9;
        color: var(--gray);
        margin-bottom: 2rem;
        text-transform: uppercase;

        & span {
            text-shadow: -1px -1px 0  var(--gray), 1px -1px 0 var(--gray), -1px  1px 0 var(--gray), 1px  1px 0 var(--gray);
            color: rgb(17, 17, 17);
            
        }
    }

    & h3 {
        font-size: 1.25rem;
        font-size: clamp(1.25rem, 1.125rem + 0.5vw, 1.5625rem);/*25px - 20px*/
        font-weight: 700;
    }

    & .politica {
        margin-bottom: 2rem;
    }
}

.efecto-pincel {
    position: relative;
    display: inline-block;
    z-index: -1;

    & img {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: auto;
        clip-path: inset(0 0 0 100%);
        transition: clip-path 1.5s ease-in-out;
        -webkit-transform: rotate(175.29deg);
        transform: rotate(175.29deg);
        z-index: -1;
    }

    & + img {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: auto;
        clip-path: inset(0 100% 0 0);
        transition: clip-path 1.5s ease-in-out;
    }
}

.totem-section {
    position: relative;
    background-color: var(--gray);
    padding-bottom: 20px;

    & .shape {
        top: -1px;
    }

    & h2 {
        font-size: 1.5rem;
        font-size: clamp(2rem, 0.5999999999999999rem + 3.6000000000000005vw, 3.75rem);
        line-height: 1.2;
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
        color: var(--gray);
        word-break: break-word;
        overflow-wrap: break-word;
        position: relative;
        padding-top: 50px;
        padding-bottom: 1.5rem;
        text-transform: uppercase;
    }

    & p {
        font-size: var(--fs-base);
        color: var(--black);
        max-width: 80%;
        margin: 0;
        text-transform: uppercase;
    }

    & .carrusel-ventajas {
        padding: 2rem 0;

        & span {
            font-family: 'ClashDisplay';
            font-weight: 600;
            font-size: 38px;
            line-height: 1;
            color: var(--black);
            text-wrap: nowrap;
            text-align: center;
        }
    }

    & .caracteristica {
        width: 100%;
        background-size: 128px;
        background-repeat: repeat;
        background-image: url("../img/banners/01.png");
        border-radius: 100px 0 0 100px;
        color: var(--white);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 3rem 2rem;
        text-transform: uppercase;
        margin: 1rem 0 2rem 0;


        & h3 {
            padding-right: 2rem;
            font-size: 2rem;
            font-size: var(--fs4);
            text-align: end;
            width: 600px;
            border-right: 2px solid var(--white);
        }

        & p {
            color: var(--gray);
            max-width: 50%;
            padding-top: 0;
            margin: 0;
            padding-left: 2rem;
            font-size: var(--fs-base);
        }
    }

}

.comercial-section {
    position: relative;

    & .content {
        padding-top: 100px;
    }


    & .carrusel-titulos {
        padding-top: 60px;
    }

    & h4 {
        font-size: 1.5rem;
        font-size: var(--fs4);
        /*40px - 24px*/
        line-height: 1.2;
        font-weight: 700;
        margin-bottom: 1.5rem;
        color: var(--gray);
        max-width: 900px;
        text-transform: uppercase;
    }

    & p {
        color: var(--gray);
        padding-top: 0;
        margin: 0;
        padding-left: 2rem;
        font-size: var(--fs-base);
        text-transform: uppercase;
    }

    & .img-totem {
        margin-left: -25%;
    }

}

.carrusel-razones {
    margin-top: 250px;
    padding-top: 100px;
    max-width: 90%;
    display: flex;
    position: relative;
    z-index: 1;
}

.razon {
    position: relative;
    min-height: 400px;
    background-image: url(../img/totem/cubo.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    text-transform: uppercase;
    padding: 30px 0;

    & .contenido {
        width: 400px;
        margin-inline: auto;
        transform: translateX(-10%);
    }

    & h3 {
        font-weight: 700;
        margin-bottom: 1rem;
        max-width: 90%;
        margin-inline: auto;
        color: #0e2d0e;
    }

    & p {
        font-size: var(--fs6);
        max-width: 90%;
        color: var(--black);
    }
}

.pasos {

    display: flex;
    justify-content: space-between;
    max-width: 90%;

    & .paso {
        border: 1px solid var(--green);
        width: 300px;
        height: 200px;
        border-radius: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        text-transform: uppercase;
        cursor: pointer;
        padding: 0.5rem;

        &:hover {
            box-shadow: 0 0 6px #66f21b !important;
        }
    }

    & .flecha {
        width: 100%;
        max-width: 150px;
        height: 75px;
    }

    & .end-y .flecha {
        transform: rotateX(180deg);
    }
}

.form-agendar {
    max-width: 100% !important;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 6px #f0ffe9 !important;
    border-radius: 30px;
    margin-top: 2rem;

    &.bn {
        box-shadow: none !important;
        border: none !important;
        padding: 0;
        max-width: 50%;
    }

    & input[type="text"]:focus,
    & input[type="tel"]:focus,
    & input[type="number"]:focus,
    & input[type="email"]:focus,
    & input[type="password"]:focus,
    & #mensaje:focus {
        border: 1px solid #66f21b !important;
        box-shadow: 0 0 6px #66f21b !important;
        background-color: transparent;
        color: var(--white) !important;
    }

    & input,
    & textarea {
        padding: 20px 25px;
        height: 60px;
        border-radius: 30px;
        border-color: transparent;
        background-color: rgba(255, 255, 255, 0.1);
        color: var(--white);

        &::placeholder {
            color: var(--gray);
        }
    }

    & textarea {
        height: 175px;
        resize: none;
    }

    & .btn-base2 {
        border-radius: 30px;
        justify-content: center;
        background-color: rgb(240, 240, 240);
        color: var(--black);
        font-weight: 600;

        &:hover {
            background-color: var(--gray);
        }
    }
}

/* Select personalizado */
.bootstrap-select {
    width: 100% !important;

}

.bootstrap-select .dropdown-menu {
    background-size: 128px;
    background-repeat: repeat;
    background-image: url("../img/banners/01.png");
    filter: brightness(1.15);
    border-radius: 1rem;

    box-shadow: 0 0 6px rgba(255, 255, 255, 0.05) !important;
    margin-top: 5px;

}

.bootstrap-select .dropdown-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--white);
}

.bootstrap-select .dropdown-menu li.selected a {
    background-color: transparent !important;
    color: var(--green) !important;
}

.bootstrap-select .btn.dropdown-toggle {
    display: flex;
    width: 100%;
    border-radius: 30px;
    border-color: transparent;
    background-color: rgba(255, 255, 255, 0.1);
    height: 60px !important;
    color: var(--white) !important;
    padding: 15px 25px !important;
}

.bootstrap-select .btn.dropdown-toggle:focus {
    outline: none !important;
    border: 1px solid #66f21b !important;
    box-shadow: 0 0 6px #66f21b !important;
    background-color: transparent;
}

.robot-animation {
    position: absolute;
    left: 70%;
    top: 40px;
    height: 500px;
    min-width: 350px;
}

.mensaje-exito {
    max-width: 600px;
    width: 90%;
    height: 300px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: stretch !important;
    box-sizing: border-box;
    position: fixed;
    z-index: 9999;
    border-radius: 25px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.contenedor-mensaje {
    border: 4px solid var(--green);
    background-color: rgba(0, 0, 0, 0.9);
    ;
    height: 260px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 400;
}

.contenedor-mensaje .titulo {
    text-transform: uppercase;
    margin-bottom: 1rem;
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--green);
    text-align: center;
}

.contenedor-mensaje .btn-base3 {
    border-radius: 30px;
    margin-top: 1rem;
    zoom: 0.9;
}

.logo-back {
    height: 150px;
}

#login, .back {

    & input, & textarea {
        border-color: transparent;
        background-color: rgba(255, 255, 255, 0.1);
        color: var(--white);

        &::placeholder {
            color: var(--gray);
        }
    }

    & input[type="text"]:focus,
    & input[type="password"]:focus,
    & textarea:focus {
        border: 1px solid #66f21b !important;
        box-shadow: 0 0 6px #66f21b !important;
        background-color: transparent;
        color: var(--white) !important;
    }
}

.logout {
    position: absolute;
    top: -10px;
    right: 0;
    width: 160px;
    font-size: 13px;
    padding: 0;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
}

.logout2 {
    height: 35px;
    width: 150px;
    font-size: 13px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.admin {
    padding-bottom: 20px;
}

.admin h2,.admin label, .admin td, .admin th {
    color: white !important;
}

.admin form td, .admin form th {
    color: black !important;
}

.table {
    background-color: transparent; /* Fondo blanco semitransparente */
    border-radius: 8px; /* Esquinas redondeadas opcionales */

    .nombrep {
        width: 75%;
    }
}

.table th,
.table td {
    background-color: transparent; /* Fondo transparente para las celdas */
}

.table thead th {
    background-color: var(--blue); /* Fondo ligeramente menos transparente para el encabezado */
    color: #333; /* Color del texto para buena legibilidad */
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.2); /* Fondo semitransparente para las filas impares */
}

#login {
    label {
        font-family: var(--ft-bold);
        color: var(--white);
    }
}

.acciones-panel {
    display: flex;
    justify-content: center;
    min-width: 140px;
}

.accion {
    border-radius: 8px;
    display: flex;
    padding: 6px;
    align-items: flex-start;
    border: none;
    transition: all 0.5s ease;
    min-width: 30px;
    margin-inline: 0.5rem;

    &.editar {
        background: #4ba51b;
    }

    &.eliminar {
        background: #ae0b0b;
    }

    &:hover {
        filter: brightness(1.3);
    }

}

.grecaptcha-badge {
    left: 0 !important;
    right: auto;
}

html {
    width: 100dvw !important;
    overflow-x: hidden !important;
}