@font-face {
    font-family: 'UbuntuBold';
    src: url('/fonts/Ubuntu-bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'UbuntuRegular';
    src: url('/fonts/Ubuntu-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Heavitas';
    src: url('/fonts/Heavitas.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
.alert-info {
    background-color: #cce5ff;  /* Azul más suave */
    border-color: #b8daff;      /* Azul más claro para el borde */
    color: #004085;             /* Azul más oscuro para el texto */
}

/* Personalización del texto */
.alert-info p {
    font-size: 16px;
    font-weight: normal;
}

/* Personalización del ícono (si usas iconos) */
.alert-info i {
    margin-right: 10px;
}

/* Hacer que la alerta sea más pequeña */
.alert-info.sm {
    font-size: 14px;
    padding: 10px;
}
.intro {
    width: 100%;
    height: 550px;
}
.titulares {
    margin-left: 10%;
    width: 30%;
    height: 500px;
    user-select: none;
    float: left;
}
.titulares h1{
    font-size:62px;
    color:#000;
    text-align:left;
    margin-bottom:30px;
    padding-top:50px;
}
.titulares h2{
    font-size:26px;
    color:#555555;
    text-align:left;
}
.accion {
    border: 2px solid #f3a30a;
    color: #000;
    background-color: #f3a30a;
    width: 40%;
    text-align: center;
    display: table;
    height: 40px;
    border-radius: 10px;
    font-family: 'UbuntuBold';
    cursor: pointer;
    transition: all ease 0.2s;
    margin-top:40px;
}
.accion a{
    display:table-cell;
    vertical-align:middle;
    color:#000;
    text-decoration:none;
}
.accion:hover {
    border: 2px solid #972929;
    color: #fff;
    background-color: #972929;
    transition: all ease 0.2s;
}
.accion a:hover{
    color:#fff;
}
.presentacion {
    width: 47%;
    float: right;
    margin-right:10%;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.presentacion img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.clientes{
    width:100%;
    height:400px;
    background-color:#fff;
}
.titulo_clientes {
    width: 80%;
    margin-left: 10%;
    text-align: center;
    padding-top: 100px;
    font-size: 28px;
    color: #555555;
}
.titulo_clientes a{
    font-family:'UbuntuRegular';
}
.titulo_clientes a span{
    font-family:'UbuntuBold';
}
.carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 50px;
}
.carousel-track {
    display: flex;
    transition: transform 0.8s ease;
    will-change: transform;
}
.carousel-slide {
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    width: 100%;
}
.carousel-slide img {
    height: 100px;
    margin: 0 5%;  
    
}
.funcionalidades{
    width:100%;
    position:relative;
    height:100vh;
    margin-top:0px;
}
.func-carousel-container {
    position: relative;
    max-width: 80%;
    margin: auto;
    overflow: hidden;
}
.func-carousel-track-container {
    overflow: hidden;
}
.func-carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}
.func-carousel-slide {
    min-width: 100%;
    text-align: center;
}
    .func-carousel-slide img {
        width: 90%;
        height: auto;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
        border-radius:20px;
    }
.func-carousel-btn {
    position: absolute;
    top: 50%;
    background-color: transparent;
    transform: translateY(-50%);
    color: #972929;
    font-size: 32px;
    font-family: Arial;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 10;
    font-family: 'Heavitas';
}
.func-prev-btn {
    margin-left: 0px;
    display:none;
}
.func-next-btn {
    right: 0px;
}
.func-carousel-nav {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
.func-carousel-indicator {
    width: 20px;
    height: 20px;
    margin: 15px;
    background-color: transparent;
    border-radius: 50%;
    border: 4px solid #808080;
    cursor: pointer;
    box-sizing: border-box;
    transition: all ease 0.2s;
}
.func-carousel-indicator:hover{
    border: 4px solid #972929;
    background-color: #c45858;
    transition:all ease 0.2s;
}
.func-current-indicator {
    border: 4px solid #972929;
}
titulo_imagen{
    position:relative;
    top:30px;
    color:#000;
}
.titulo_imagen a {
    font-size: 20px;
    font-family: 'UbuntuRegular';
    color: #000;
}
.titulo_imagen span {
    font-size: 32px;
    font-family: 'UbuntuBold';
    color: #c71818;
}
.titulo_funcionalidades {
    width: 60%;
    margin-left:20%;
    height: 200px;
    text-align: center;
    background-color: #f2f2f2;
    margin-top:150px;
    padding-top:40px;
}
.titulo_funcionalidades a{
    font-size:42px;
    margin-top:40px;
    font-family:'UbuntuBold';
}
.titulo_funcionalidades span{
    font-size:18px;
}
.precios{
    width:100%;
    height:600px;
}
.contenedor_propuesta {
    width: 80%;
    height: 500px;
    margin-top: 50px;
    margin-left: 10%;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
    background-color: #fff;
}
.precios_imagen {
    width: 52.5%;
    float: left;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-top-left-radius:10px;
    border-bottom-left-radius:10px;
}
.precios_imagen img {
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: contain;
}
.precios_propuesta{
    width:40%;
    margin-left:2.5%;
    float:left;
    max-height:500px;
    overflow-y:auto;
}
.precios_propuesta h1{
    font-size:28px;
    color:#972929;
    font-family:'UbuntuBold'
}
.precios_propuesta h2{
    font-size:36px;
    font-family:'UbuntuBold'
}
.precios_propuesta h2 span{
    font-size:14px;
}
.precios_propuesta h3{
    color:#555555;
    font-size:18px;
    background-color:#ebebeb;
    border-radius:5px;
    padding:3px;
    font-family:'UbuntuRegular'
}
.precios_propuesta h4{
    color:#972929;
    font-size:18px;
    font-family:'UbuntuBold'
}
.precios_propuesta h5{
    font-size:14px;
}
.opiniones {
        width: 100%;
        background-color: #fff;
        height: 600px;
        padding-top: 100px;
        position: relative;
    }

.opinion-container {
    width: 80%;
    margin-left: 10%;
    height: 500px;
    border-radius: 10px;
    background-color: #972929;
    max-height: 500px;
    overflow: hidden;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}

    .opinion-track {
        display: flex;
        transition: transform 1s ease-in-out;
    }

    .opinion {
        width: 100%;
        height: 500px;
        flex-shrink: 0;
    }

    .opinion-left {
        float: left;
        margin-left: 2.5%;
        width: 45%;
        height: 400px;
        margin-top: 50px;
    }

    .opinion-left img {
        float: left;
        width: 70px;
        height: 70px;
        border-radius: 100px;
        background-color: #fff;
    }

    .opinion-left h3 {
        float: left;
        color: #fff;
        width: 30%;
        height: 70px;
        margin-left: 15px;
    }

    .opinion-left p {
        float: left;
        color: #fff;
        width: 95%;
    }

    .opinion-right {
        float: left;
        width: 50%;
        height: 500px;
    }

    .opinion-right img {
        height: 100%;
        width: auto;
        max-width: 105%;
        object-fit: cover;
    }

    .navbar {
        position: absolute;
        bottom: 50px;
        width: 100%;
        text-align: center;
    }

.navbar-btn {
    width: 20px;
    height: 20px;
    margin: 15px;
    background-color: #f2f2f2;
    border-radius: 50%;
    border: 4px solid #808080;
    cursor: pointer;
    box-sizing: border-box;
    transition: all ease 0.2s;
}

    .navbar-btn:hover {
        border: 4px solid #972929;
        background-color: #c45858;
        transition: all ease 0.2s;
    }

    .navbar-btn.button-current {
        border: 4px solid #972929;
        background-color: #f2f2f2;
        transition: all ease 0.2s;
    }

.contacto{
    width:100%;
}
.contacto form{
    width:30%;
    margin-right:10%;
    float:right;
    margin-top:50px;
    border:1px solid #d8d8d8;
    background-color:#fff;
    border-radius:10px;
    padding:2%;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
    margin-bottom:50px;
}
/* Estilo de los campos de entrada */
.contacto label {
    display: block;
    font-size: 16px;
    color: #555;
    margin-bottom: 5px;
}

.contacto input[type="text"],
.contacto input[type="email"],
.contacto input[type="tel"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
}

.contacto input[type="text"]:focus,
.contacto input[type="email"]:focus,
.contacto input[type="tel"]:focus {
    border-color: #5c9dfd;
    outline: none;
}

/* Estilo para el botón de envío */
.contacto button {
    width: 100%;
    padding: 12px;
    background-color: #972929;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.contacto button:hover {
    background-color: #831b1b;
}

/* Espaciado adicional para los inputs */
.contacto input {
    margin-bottom: 10px;
}
.info_contacto{
    width:40%;
    margin-left:10%;
    float:left;
    margin-top:50px;
}
.info_contacto h1{
    font-size:42px;
}
.info_contacto h2{
    font-size:22px;
    color:#555555;
}
.info_contacto h3{
    font-size:22px;
    color:#972929;
    font-family:'UbuntuBold';
}
.info_contacto h4{
    font-size:16px;
}
.info_contacto h5{
    font-size:14px;
    background-color:#555555;
    padding:10px;
    border-radius:10px;
    color:#fff;
    font-family:'UbuntuRegular';
}


@media screen and (max-width: 480px) {
    .intro {
        width: 100%;
        height: auto;
        height:500px;
    }

    .titulares {
        margin-left: 2.5%;
        width: 95%;
        height: auto;
        user-select: none;
        float: left;
    }

        .titulares h1 {
            font-size: 52px;
            color: #000;
            text-align: left;
            margin-bottom: 30px;
            padding-top: 0px;
        }

        .titulares h2 {
            font-size: 22px;
            color: #555555;
            text-align: left;
        }

    .accion {
        border: 2px solid #f3a30a;
        color: #000;
        background-color: #f3a30a;
        width: 100%;
        text-align: center;
        display: table;
        height: 40px;
        border-radius: 10px;
        font-family: 'UbuntuBold';
        cursor: pointer;
        transition: all ease 0.2s;
        margin-top: 40px;
    }

        .accion a {
            display: table-cell;
            vertical-align: middle;
            color: #000;
            text-decoration: none;
        }

        .accion:hover {
            border: 2px solid #972929;
            color: #fff;
            background-color: #972929;
            transition: all ease 0.2s;
        }

        .accion a:hover {
            color: #fff;
        }

    .presentacion {
        width: 90%;
        height: auto;
        margin-top:20px;        
    }

        .presentacion img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            margin-left: 10%;
        }

    .clientes {
        width: 100%;
        height: 400px;
        background-color: #fff;
        margin-top:30px;
    }

    .titulo_clientes {
        width: 90%;
        margin-left: 2.5%;
        text-align: center;
        padding-top: 100px;
        font-size: 22px;
        color: #555555;
    }

        .titulo_clientes a {
            font-family: 'UbuntuRegular';
        }

            .titulo_clientes a span {
                font-family: 'UbuntuBold';
            }

    .carousel {
        width: 100%;
        overflow: hidden;
        position: relative;
        margin-top: 50px;
    }

    .carousel-track {
        display: flex;
        transition: transform 0.8s ease;
        will-change: transform;
    }

    .carousel-slide {
        display: flex;
        justify-content: center;
        flex-shrink: 0;
        width: 100%;
    }

        .carousel-slide img {
            height: 80px;
            margin: 0 2%;
        }

    .funcionalidades {
        width: 100%;
        position: relative;
        height: 350px;
        margin-top: 0px;
    }

    .func-carousel-container {
        position: relative;
        max-width: 90%;
        margin: auto;
        overflow: hidden;
        margin-top:100px;
        margin-left:5%;
    }

    .func-carousel-track-container {
        overflow: hidden;
    }

    .func-carousel-track {
        display: flex;
        transition: transform 0.5s ease-in-out;
    }

    .func-carousel-slide {
        min-width: 100%;
        text-align: center;
    }

        .func-carousel-slide img {
            width: 95%;
            height: auto;
            box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
            border-radius: 20px;
        }

    .func-carousel-btn {
        position: absolute;
        top: 25%;
        background-color: transparent;
        transform: translateY(-50%);
        color: #972929;
        font-size: 18px;
        font-family: Arial;
        border: none;
        cursor: pointer;
        padding: 0px;
        z-index: 10;
        font-family: 'Heavitas';
    }

    .func-prev-btn {
        margin-left: 0px;
        display: none;
    }

    .func-next-btn {
        right: 0px;
    }

    .func-carousel-nav {
        display: flex;
        justify-content: center;
        margin-top: 30px;
    }

    .func-carousel-indicator {
        width: 10px;
        height: 20px;
        margin: 5px;
        background-color: transparent;
        border-radius: 50%;
        border: 4px solid #808080;
        cursor: pointer;
        box-sizing: border-box;
        transition: all ease 0.2s;
    }

        .func-carousel-indicator:hover {
            border: 4px solid #972929;
            background-color: #c45858;
            transition: all ease 0.2s;
        }

    .func-current-indicator {
        border: 4px solid #972929;
    }

    titulo_imagen {
        position: relative;
        top: 30px;
        color: #000;
    }

    .titulo_imagen a {
        font-size: 20px;
        font-family: 'UbuntuRegular';
        color: #000;
    }

    .titulo_imagen span {
        font-size: 22px;
        font-family: 'UbuntuBold';
        color: #c71818;
    }

    .titulo_funcionalidades {
        width: 90%;
        margin-left: 2.5%;
        height: 200px;
        text-align: center;
        background-color: #f2f2f2;
        margin-top: 150px;
        padding-top: 40px;
    }

        .titulo_funcionalidades a {
            font-size: 32px;
            margin-top: 40px;
            font-family: 'UbuntuBold';
        }

        .titulo_funcionalidades span {
            font-size: 18px;
        }

    .precios {
        width: 100%;
        height: 700px;
    }

    .contenedor_propuesta {
        width: 95%;
        height: 1000px;
        margin-top: 50px;
        margin-left: 2.5%;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
        background-color: #fff;
    }

    .precios_imagen {
        width: 100%;
        float: left;
        height: 250px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

        .precios_imagen img {
            height: 100%;
            width: auto;
            max-width: none;
            object-fit: contain;
        }

    .precios_propuesta {
        width: 95%;
        margin-left: 2.5%;
        float: left;
    }

        .precios_propuesta h1 {
            font-size: 22px;
            color: #972929;
            font-family: 'UbuntuBold'
        }

        .precios_propuesta h2 {
            font-size: 22px;
            font-family: 'UbuntuBold'
        }

            .precios_propuesta h2 span {
                font-size: 12px;
            }

        .precios_propuesta h3 {
            color: #555555;
            font-size: 16px;
            background-color: #ebebeb;
            border-radius: 5px;
            padding: 3px;
            font-family: 'UbuntuRegular'
        }

        .precios_propuesta h4 {
            color: #972929;
            font-size: 12px;
            font-family: 'UbuntuBold'
        }

        .precios_propuesta h5 {
            font-size: 14px;
        }

    .opiniones {
        width: 95%;
        background-color: #fff;
        height: 600px;
        padding-top: 50px;
        position: relative;
        margin-left:2.5%;
    }

    .opinion-container {
        width: 90%;
        margin-left: 5%;
        height: 500px;
        border-radius: 10px;
        background-color: #972929;
        max-height: 500px;
        overflow: hidden;
        position: relative;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
    }

    .opinion-track {
        display: flex;
        transition: transform 1s ease-in-out;
    }

    .opinion {
        width: 100%;
        height: 500px;
        margin-left:0;
        flex-shrink: 0;
    }

    .opinion-left {
        float: left;
        margin-left: 10%;
        width: 80%;
        height: 400px;
        max-height:400px;
        overflow-y:auto;
        margin-top: 50px;
    }

        .opinion-left img {
            float: left;
            width: 70px;
            height: 70px;
            border-radius: 100px;
            background-color: #fff;
        }

        .opinion-left h3 {
            float: left;
            color: #fff;
            width: 30%;
            height: 70px;
            margin-left: 15px;
            font-size:18px;
        }

        .opinion-left p {
            float: left;
            color: #fff;
            width: 95%;
            font-size:14px;
        }

    .opinion-right {
        display:none;
    }
        

    .navbar {
        position: absolute;
        bottom: 40px;
        width: 100%;
        text-align: center;
    }

    .navbar-btn {
        width: 10px;
        height: 20px;
        margin: 15px;
        background-color: #f2f2f2;
        border-radius: 50%;
        border: 4px solid #808080;
        cursor: pointer;
        box-sizing: border-box;
        transition: all ease 0.2s;
    }

        .navbar-btn:hover {
            border: 4px solid #972929;
            background-color: #c45858;
            transition: all ease 0.2s;
        }

        .navbar-btn.button-current {
            border: 4px solid #972929;
            background-color: #f2f2f2;
            transition: all ease 0.2s;
        }

    .contacto {
        width: 100%;
    }

        .contacto form {
            width: 90%;
            margin-left: 2.5%;
            float:left;
            margin-top: 50px;
            border: 1px solid #d8d8d8;
            background-color: #fff;
            border-radius: 10px;
            padding: 2%;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
            margin-bottom: 50px;
        }
        /* Estilo de los campos de entrada */
        .contacto label {
            display: block;
            font-size: 16px;
            color: #555;
            margin-bottom: 5px;
        }

        .contacto input[type="text"],
        .contacto input[type="email"],
        .contacto input[type="tel"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 8px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
            box-sizing: border-box;
        }

            .contacto input[type="text"]:focus,
            .contacto input[type="email"]:focus,
            .contacto input[type="tel"]:focus {
                border-color: #5c9dfd;
                outline: none;
            }

        /* Estilo para el botón de envío */
        .contacto button {
            width: 100%;
            padding: 12px;
            background-color: #972929;
            color: #fff;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

            .contacto button:hover {
                background-color: #831b1b;
            }

        /* Espaciado adicional para los inputs */
        .contacto input {
            margin-bottom: 10px;
        }

    .info_contacto {
        width: 95%;
        margin-left: 2.5%;
        float: left;
        margin-top: 50px;
    }

        .info_contacto h1 {
            font-size: 32px;
        }

        .info_contacto h2 {
            font-size: 18px;
            color: #555555;
        }

        .info_contacto h3 {
            font-size: 18px;
            color: #972929;
            font-family: 'UbuntuBold';
        }

        .info_contacto h4 {
            font-size: 14px;
        }

        .info_contacto h5 {
            font-size: 14px;
            background-color: #555555;
            padding: 10px;
            border-radius: 10px;
            color: #fff;
            font-family: 'UbuntuRegular';
        }
}