:root {
    --c1: #260116;
    --c2: #A6034F;
    --c3: #F24194;    
    --c4: #f2f2f2;
    --c5: #261C14;
    --c6: #A6634B;
}

html,
* {
    margin: 0;
}

header {
    /*position: fixed;
    z-index: 100;*/
    font-family: 'Titillium';

    /*width: 1519px;*/
    margin-left: auto;
    margin-right: auto;

    background-color: white;

}

body {
    background-color: var(--c1);
    overflow-x: hidden;
    width: 100%;
}



.linea_menu {
    height: 10px;
    border-width: 0;
    background: linear-gradient(to bottom, #f2f2f2, #ffffff);
    /*opacity: 0.9;*/
}


header,
.container,
.pie {
    width: calc(var(--window-width) - 0px);
}


/* ------------------------------------------------------------
Add a black background color to the top navigation */
.topnav {
    background-color: white;
    overflow: hidden;
    padding-top: 1%;
    padding-bottom: 1%;
    margin-left: auto;
    margin-right: auto;
}

/* Style the link inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: var(--c2);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    /*border: 3px solid var(--c3);*/
    border-radius: 15px;
    width: auto;
}

.logo-menu {
    display: flex;
    width: 60px;
}

/* Add an active class to highlight the current page */
.active {
    background-color: white;
    margin-right: calc(var(--window-width) - 40%);

}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
    color: var(--c3);
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
    float: left;
    overflow: hidden;
}

.border {
    /*border: 3px solid var(--c3);*/
    border-radius: 15px;
    width: auto;
    margin-left: 1%;
}


/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
    font-size: 17px;
    border: none;
    outline: none;
    color: var(--c2);
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    font: white;
    min-width: 160px;
    z-index: 1;
    padding-top: 1%;
}

/* Style the link inside the dropdown */
.dropdown-content a {
    float: none;
    color: var(--c2);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;

    margin-bottom: 5%;

    background-color: var(--c4);
}

/* Add a dark background on topnav link and the dropdown button on hover */
.topnav a:hover,
.dropdown:hover .dropbtn {
    background-color: var(--c2);
    color: var(--c4);
}

/* Add a grey background to dropdown link on hover */
.dropdown-content a:hover {
    background-color: var(--c3);
    color: white;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
    display: block;
}

.mobile {
    display: none;
}

.desktop {
    display: block;
}

/* When the screen is less than 600 pixels wide, hide all link, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 1000px) {



    .topnav a:not(:first-child),
    .dropdown .dropbtn {
        display: none;
        margin-bottom: 5%;
    }

    .topnav a.icon {
        float: right;
        display: block;
        background-color: white;
        color: var(--c3);
    }

    .active {
        margin-right: 0;
        margin-bottom: 5%;
    }


    .desktop {
        display: none;
    }

    .mobile {
        display: block;
    }

    .box .pie {
        display: block;
        width: 90%;
        margin-left: 0;
        margin-right: 0;

    }

    .pie {
        display: block;
        width: 90%;
        /*height: 40vh;*/
        margin-left: 0;
        margin-right: 0;
    }
}



/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the link vertically instead of horizontally) */
@media screen and (max-width: 1000px) {

    body {
        background-color: #f2f2f2;
    }

    header {
        width: 100%;
        max-width: auto;
        padding-top: 5%;
        height: 10%;

        width: 100%;
    }

    .topnav.responsive {
        position: relative;
    }

    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
        background-color: var(--c2);
        color: var(--c4);
    }

    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }

    .topnav.responsive .dropdown {
        float: none;
    }

    .topnav.responsive .dropdown-content {
        position: relative;
    }

    .dropdown-content a {
        color: var(--c3);
    }

    .topnav.responsive .dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: left;
    }

    .topnav.responsive .active {
        width: fit-content;
    }
}

/*------------------------------


/* set the height of the container so that the sticky elements know how far they are meant to scroll  */
.container {
    min-height: 100vh;
    /*width: 100%;*/

    /*width: 1519px;*/
    margin-left: auto;
    margin-right: auto;

}

.neon {
    padding-left: 30%;
    height: auto;
    width: 40%;
    object-fit: contain;
}



/* set your position sticky and a attribute that tells it when it should become sticky, in this case right at the top */
.box {
    position: sticky;
    top: 0px;
    display: flex;
    flex-direction: row;
    height: 100vh;
    padding-top: 5vh;

    padding-left: 10%;
    padding-right: 10%;


}

.division {
    position: sticky;
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.division img {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

/*------------------------*/

/* Float four columns side by side */
.column {
    /*float: left;*/
    display: inline-block;
    width: 50%;
    vertical-align: top;
}

.card img {
    height: 100%;
    width: 100%;
    /*padding-top: 9%;*/
}

.servicios-height {
    height: 30vh;
}

.planes-height {
    height: 650px;
}

.planes-height:hover {
    transform: scale(1.03);
}

.row {

    width: 96%;
    margin-left: 4%;
    margin-right: 4%;
    height: 100%;
}

.grid {
    width: 29%;
    height: 100%;
    border-radius: 25px;
    background-color: var(--c4);
    border: 2px solid var(--c4);
    padding-bottom: 1%;
    margin: 1%;

}

.grid2 {
    width: 92%;
    height: 60vh;
}

.fandq {
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.212);
}

.fandq2 {
    width: 48%;
    margin: 1%;
    background-color: inherit;
}

.card.service-icons {
    margin-left: 5%;
    margin-right: 5%;
    text-align: center;
}


.card.service-icons img {
    width: 12%;
    height: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin-left: 39%;
    margin-right: 39%;
    margin-top: 5%;
    margin-bottom: 5%;
    padding: 5%;
    background-color: rgba(0, 0, 0, 0.074);
    border-radius: 25%;
}

.hizq {
    float: left;
    width: 35%;
    padding-top: 10%;
}

.hder {
    float: left;
    width: 65%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}




.form-planes {
    background-color: rgba(242, 65, 148, 0.7);
    width: 90%;
    height: 50px;
    border-radius: 10px;
    border: 3px  rgba(242, 65, 148, 0.7);
    margin: 3%;
    cursor: pointer;
    font-family: 'Titillium';
    font-size: large;
    color: var(--c4);
}

.form-planes2 {
    width: 45%;
    margin-left: 10%;
    line-height: 1;
}

.form-planes3 {
    background-color: var(--c4);
    border: 3px  var(--c4);
    color: var(--c2);
    margin: 5%;
}

.form-planes3:hover {
    background-color: var(--c4);
    border: 3px solid var(--c4);
}

.form-planes:hover {
    background-color: rgb(242, 65, 148);
    border: 3px solid rgb(242, 65, 148);
}

.ahorro {
    background-color: rgba(242, 65, 148, 0.2);
    border-radius: 20px;
    padding: 2%;
    font-weight: bold;
    color: var(--c2);
}




@media screen and (max-width: 1000px) {

    .container {
        width: 100%;
        min-height: 100vh;
        max-width: auto;

    }


    .box {
        height: 100vh;
        width: 100%;
        flex-direction: column;
        /* Cambiamos a dirección de columna para dispositivos más pequeños */
        padding-left: 0;
        padding-right: 0;
    }

    .box-hijo {
        width: 90%;
        padding-left: 5%;
        padding-right: 5%;
    }

    .neon {
        padding-left: 0;
        /* Ajustamos el padding izquierdo de .neon para dispositivos más pequeños */
        width: 100%;
        /* Ajustamos el ancho de .neon para ocupar todo el ancho */
    }

    /*--------------aqui--------*/
    .column {
        width: 85%;
        padding-left: 5%;
        padding-right: 5%;
        display: block;
        height: 40vh;
        font-size: medium;
    }

    .column2 {
        padding-left: 10%;
    }

    .hder {
        padding-top: 28%;
    }

    .row {
        position: sticky;
        top: 0;
        margin: 0;
    }


    .sub-pie {
        padding-bottom: 5%;
    }

    .division img {
        width: auto;
        height: 500px;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }

    .rrss-icons {
        width: 100%;
        /* Ajusta el ancho según tus necesidades */
        display: flex;
        justify-content: center;
    }

    .rrss-icons a {
        padding-left: 3%;
        padding-right: 3%;
    }

    .grid {
        width: 81%;
        height: auto;
        padding-bottom: 5%;
        margin: 6%;
    }

    .servicios {
        margin-left: 7%;
        margin-right: 7%;
        padding-bottom: 5%;
    }

    .servicios-height,
    .planes-height {
        height: 100%;
    }

    .anim {
    
        width: 100vw;
    }

    .fandq2 {
        width: 100%;
    }

}






@font-face {
    font-family: 'Titillium';
    src: url('TitilliumWeb-Regular.woff') format('woff'),
        /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
        url('TitilliumWeb-Regular.ttf') format('truetype');
    /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

@font-face {
    font-family: 'Titillium-bold';
    src: url('TitilliumWeb-Bold.woff') format('woff'),
        /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
        url('TitilliumWeb-Bold.ttf') format('truetype');
    /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

@font-face {
    font-family: 'Titillium-black';
    src: url('TitilliumWeb-Black.woff') format('woff'),
        /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
        url('TitilliumWeb-Black.ttf') format('truetype');
    /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

@font-face {
    font-family: 'Titillium-semibold';
    src: url('TitilliumWeb-SemiBold.woff') format('woff'),
        /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
        url('TitilliumWeb-SemiBold.ttf') format('truetype');
    /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

h1 {
    color: var(--c5);
    font-family: 'Titillium-bold';
}

h2 {
    color: var(--c5);
    font-family: 'Titillium-semibold';
}

h3 {
    color: var(--c5);
    font-family: 'Titillium-semibold';
}

p {
    color: var(--c5);
    font-family: 'Titillium';
}

ul {
    color: var(--c5);
    font-family: 'Titillium';
    list-style: none;
}

ul li {
    position: relative;
    padding-left: 20px;
}

ul li:before {
    content: '';
    /* Contenido antes de cada elemento de la lista */
    position: absolute;
    /* Posicionamiento absoluto */
    top: 50%;
    /* Alineación vertical centrada */
    left: 0;
    /* Posicionamiento a la izquierda */
    transform: translateY(-50%);
    /* Ajuste para centrar verticalmente */
    width: 15px;
    /* Ancho de la viñeta */
    height: 15px;
    /* Altura de la viñeta */
    background-size: contain;
    /* Ajuste el tamaño del logo */
}

ul li.check:before {
    background-image: url("check.svg");
    /* URL del logo */

}

ul li.incluye:before {
    background-image: url("incluye.svg");
    /* URL del logo */

}

ul li.incluye2:before {
    background-image: url("incluye-white.svg");
    /* URL del logo */

}

ul li.no_incluye:before {
    background-image: url("no_incluye.svg");
    /* URL del logo */
}


/* icono de dudas */

.question {
    float: right;
    background-color: var(--c4);
    cursor: pointer;
}

.question .tooltiptext {
    visibility: hidden;
    width: 80%;
    background-color: var(--c5);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5%;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
}

.question .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 80%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.question:hover .tooltiptext {
    visibility: visible;
}

/* ------------------------- */

.blanco {
    background-color: var(--c4);
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: 90%;
    border-radius: 50px;


    display: flex;
    align-items: center;
    justify-content: center;
}


.animacion {
    width: fit-content;
    right: 0;
    left: 0;
    margin: 0 auto;
}





.credits {
    width: 100%;

}

footer {
    text-align: center;
    background-color: var(--c1);
    color: var(--c4);
    height: 8vh;
    padding-bottom: 2vh;
    font-family: 'Titillium';
}


.pie {
    /*width: 1519px;*/
    display: flex;
    /*height: 40vh;*/
    margin-left: auto;
    margin-right: auto;
}

.sub-pie {
    margin: 5%;
}

.pie .sub-pie {
    width: 100%;
    color: var(--c4);
    font-family: 'Titillium';
}



.about p a {
    color: var(--c4);
    text-decoration: none;
}

.about p a:hover {
    color: var(--c3);
}



.rrss-icons a {
    fill: var(--c4);
    text-decoration: none;
}

.rrss-icons a svg:hover {
    fill: var(--c3);
}

.linea_planes {
    height: 2px;
    border-width: 0;
    background: var(--c3);
    margin: 5%;
    opacity: 0.2;
}







/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');



.wrapper {
    width: 715px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.wrapper header {
    font-size: 22px;
    font-weight: 600;
    padding: 20px 30px;
    border-bottom: 1px solid #ccc;
}

.wrapper form {
    margin: 35px 30px;
}

.wrapper form.disabled {
    pointer-events: none;
    opacity: 0.7;
}

form .dbl-field {
    display: flex;
    margin-bottom: 25px;
    justify-content: space-between;
}

.dbl-field .field {
    height: 50px;
    display: flex;
    position: relative;
    width: 99%;
    padding-left: 1%;
    padding-right: 1%;
}

.wrapper form i {
    position: absolute;
    top: 50%;
    left: 18px;
    color: #ccc;
    font-size: 17px;
    pointer-events: none;
    transform: translateY(-50%);
}

form .field input,
form .message textarea {
    width: 100%;
    height: 100%;
    outline: none;
    padding: 0 18px 0 48px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.field input::placeholder,
.message textarea::placeholder {
    color: #ccc;
}

.field input:focus,
.message textarea:focus {
    padding-left: 47px;
    border: 2px solid var(--c2);
}

.field input:focus~i,
.message textarea:focus~i {
    color: var(--c2);
}

form .message {
    position: relative;
}

form .message i {
    top: 30px;
    font-size: 20px;
}

form .message textarea {
    min-height: 130px;
    max-height: 230px;
    width: 89%;
    padding: 15px 20px 0 48px;
}

form .message textarea::-webkit-scrollbar {
    width: 0px;
}

.message textarea:focus {
    padding-top: 14px;
}

form .button-area {
    margin: 25px 0;
    display: flex;
    align-items: center;
}

.button-area button {
    color: #fff;
    border: none;
    outline: none;
    font-size: 18px;
    cursor: pointer;
    border-radius: 5px;
    padding: 13px 25px;
    background: var(--c2);
    transition: background 0.3s ease;
}

.button-area button:hover {
    background: var(--c3);
}

.button-area span {
    font-size: 17px;
    margin-left: 30px;
    display: none;
}

@media (max-width: 1000px) {
    .wrapper header {
        text-align: center;
    }

    .wrapper form {
        margin: 35px 20px;
    }

    form .dbl-field {
        flex-direction: column;
        margin-bottom: 0px;
    }

    form .dbl-field .field {
        width: 100%;
        height: 45px;
        margin-bottom: 20px;
    }

    form .message textarea {
        width: 82%;
    }

    form .button-area {
        margin-top: 20px;
        flex-direction: column;
    }

    .button-area button {
        width: 100%;
        padding: 11px 0;
        font-size: 16px;
    }

    .button-area span {
        margin: 20px 0 0;
        text-align: center;
    }
}











.msg-error {
    color: #c65848;
}

.g-recaptcha.error {
    border: solid 2px #c64848;
    padding: .2em;
    width: 19em;
}



.grecaptcha-badge { 
    visibility: hidden;
}




.translucido {
    opacity: 0.2; /* Ajusta el valor entre 0 (completamente transparente) y 1 (completamente opaco) */
    color: rgba(0, 0, 0, 0.8); /* Asegúrate de que el color también tenga cierta transparencia si lo necesitas */
}