#lang-toggle{
        color:#fff;
        font-family: gabarito, sans-serif !important;
        font-size: 15px;
    }

    .navbar a, .navbar a:focus{
        font-family: gabarito, sans-serif !important;
    }

    .justify-content-between{
        align-items: center;
    }

    /*--------------------------------------------------------------
    # scroll bar
    --------------------------------------------------------------*/
    /*definimos el ancho del scroll */
    ::-webkit-scrollbar {
        width: auto;
    }

    /*definimos el color de fondo de de la barra de scroll */
    ::-webkit-scrollbar-track {
        background: #ffffff;
    }

    /*personalizamos el scroll*/
    ::-webkit-scrollbar-thumb {
        border-radius: auto;
        background: linear-gradient(180deg, rgba(57, 100, 229, 1) 0%, rgba(57, 100, 229, 1) 35%, rgba(57, 100, 229, 1) 100%);
    }

    .desliza {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: rgb(255 255 255 / 79%);
        width: 80px;
        border-radius: 10px;
        height: 100px;
        margin: 0 auto;
        color: black;
        font-size: 16px;
        position: absolute;
        bottom: 30px;
        left: 47%;
    }

    .desliza img {
        width: 18px !important;
        transform: rotate(90deg);
        filter: brightness(0);
        margin-top: 15px;
        margin-bottom: 10px;
        animation: bounce 1.5s infinite;
    }

    @keyframes bounce {
        0%, 100% {
        transform: translateY(0) rotate(90deg);
        }
        50% {
        transform: translateY(-10px) rotate(90deg);
        }
    }

    @media(max-width:575px) {
        
        .desliza {
            left: 40%;
            right: 40%;
        }
    }

    #header.header-scrolled {
        background: #002164;
        height: 64px;
    }
    
    /* Hero general */
    #hero {
    height: 100vh;
    }

    .slide-1 {
    background-image: url('res/Pixtor26-Banner-Hero-1.webp');
    }

    .slide-2 {
    background-image: url('res/Pixtor26-Banner-Hero-2.webp');
    }

    /* Cada slide */
    .hero-slide {
    height: 100vh;
    background-size: cover;
    background-position: center;
    position: relative;
    }

    /* Contenido encima */
    .hero-content {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    z-index: 2;
    width: 100%;
    }

    /* Título hero */
    .hero-content h2{
    color: white;
    }

    /* Responsive for mobile */
    @media (max-width: 576px) {
        .slide-1 {
            background-image: url('res/Pixtor26-Banner-Hero-Movil.webp');
        }

        .slide-2 {
            background-image: url('res/Pixtor26-Banner-Hero-2-Movil.webp');
        }

        .hero-slide {
            height: 640px;
        }

        #hero {
        height: 640px;
        }
    }

/*Footer*/
        footer {
            padding: 40px;
            background-color: #002164;
        }

        footer p {
            color: #fff;
            text-align: center;
            margin: 0;
            font-size: 16px;
        }

        footer a {
            color: #00ffff;
        }

        footer .whatsapp {
            width: 60px;
            position: fixed;
            right: 40px;
            bottom: 40px;
        }

        a.a-whatsapp {
            position: relative;
        }

        /*add footer*/
        .footer {
            padding: 2% 0%;
            background-color: #002164;
            text-align: center;
            background-repeat: no-repeat;
            background-position: center top;
            height: auto;
            position: relative;
        }

        .footer p {
            color: #ffffff;
            font-size: 0.9rem;
            margin: 0%
        }

        .footer-redes {
            height: 25px;
            width: 25px;
            margin-right: 2px;
            margin-left: 2px;
        }

        .tel {
            display: flex;
        }

        .tel1 {
            width: 50%;
        }

        .tel1 {
            width: 50%;
        }

        .tel2 {
            width: 50%;
        }

        .tel1 p {
            text-align: right;
            padding-right: 1%;
        }

        .tel2 p {
            text-align: left;
            padding-left: 1%;
        }

        a.avisop {
            text-decoration: none;
            color: #ffffff !important;
        }

        .privmov {
            display: none;
        }

        .tel2 {
            width: 50%;
            display: flex;
            padding-left: 2%;
        }

        .tel1 {
            width: 50%;
            display: flex;
            justify-content: end;
            padding-right: 2%;
            align-items: center;
        }

        .tel1 a {
            display: contents;
        }

        .tel2 a {
            display: contents;
        }

        .tel1 img {
            width: 1.5em;
        }

        .tel2 img {
            width: 1.5em;
        }

        .redes {
            padding-top: 1%;
            text-align: center;
        }

        .back-to-top {
            position: fixed;
            visibility: hidden;
            opacity: 0;
            right: 3%;
            bottom: 5%;
            z-index: 996;
            background: #3ec1d500;
            width: 60px;
            height: 60px;
            transition: all 0.4s;
        }

        .back-to-top.active {
            visibility: visible;
            opacity: 1;
        }

        img.whatsapp {
            position: fixed;
            width: 60px;
            height: 60px;
            right: 40px;
            z-index: 99;
        }

    /*Registro*/
    #registro h2{
        font-size: 64px;
        font-weight: bold;
        color: white !important;
    }

    #registro p{
        color: white;
    }

    #registro {
        min-height: 377px;
        background-image: url(res/Pixtor26-Registro-Fondo.webp);
        background-size: cover;
        background-position: center;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0px 100px 0px 100px;
    }

    #registro-gif {
        max-width: 50%;
        align-self: flex-end;
    }

    #registro-textos {
        max-width: 487px;
    }

    /* Tablet responsivo */
    @media (max-width: 1024px) {
        #registro {
            padding: 30px 50px 0px 50px;
            min-height: auto;
        }

        #registro h2 {
            font-size: 48px;
        }

        #registro-gif {
            max-width: 45%;
        }

        #registro-textos {
            max-width: 400px;
            margin-bottom: 30px;
        }
    }

    /* Tablet pequeño */
    @media (max-width: 768px) {
        #registro {
            flex-direction: column;
            padding: 30px 25px 0px 25px;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        #registro h2 {
            font-size: 36px;
        }

        #registro p {
            font-size: 14px;
        }

        #registro-gif {
            max-width: 100%;
        }

        #registro-textos {
            max-width: 100%;
        }
    }

    /* Mobile */
    @media (max-width: 576px) {
        #registro {
            min-height: auto;
            padding: 20px 15px 0px 15px;
        }

        #registro h2 {
            font-size: 28px;
            margin-bottom: 10px;
        }

        #registro p {
            font-size: 12px;
            line-height: 1.4;
        }

        #registro-textos {
            max-width: 100%;
        }
    }

    /* Mobile muy pequeño */
    @media (max-width: 375px) {
        #registro {
            padding: 15px 10px 0px 10px;
        }

        #registro h2 {
            font-size: 24px;
        }

        #registro p {
            font-size: 11px;
        }

        #registro-gif {
            max-width: 100%;
        }
    }

/* Formulario */
    #formulario-contenedor {
        padding: 80px 0px 80px 0px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #form-container{
    padding-bottom: 90px;
    text-align: center;
    margin: 0;
    }

    .contact-form {
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: center;
        width: 558px;
    }

    .form-input, .form-textarea {
        width: 100%;
        padding: 15px;
        border: 1px solid #9c9c9c;
        border-radius: 5px;
        font-size: 16px;
        outline: none;
    }

    .checkbox-container {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
    }

    .submit-btn {
        background-color: #e4c11c;
        color: #002164;
        padding-left: 55px;
        padding-right: 55px;
        padding-top: 10px;
        padding-bottom: 10px;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
    }

    /* Responsive Formulario */
    /* Tablet */
    @media (max-width: 1024px) {
        #formulario-contenedor {
            padding: 80px 20px 80px 20px;
        }

        .contact-form {
            width: 80%;
            max-width: 500px;
        }

        .form-input, .form-textarea {
            padding: 12px;
            font-size: 15px;
        }

        .submit-btn {
            padding-left: 40px;
            padding-right: 40px;
            padding-top: 8px;
            padding-bottom: 8px;
            font-size: 15px;
        }
    }

    /* Tablet pequeño */
    @media (max-width: 768px) {
        #formulario-contenedor {
            padding: 60px 15px 60px 15px;
        }

        .contact-form {
            width: 90%;
            max-width: 450px;
            gap: 12px;
        }

        .form-input, .form-textarea {
            padding: 10px;
            font-size: 14px;
        }

        .checkbox-container {
            font-size: 13px;
            gap: 8px;
        }

        .submit-btn {
            padding-left: 30px;
            padding-right: 30px;
            padding-top: 8px;
            padding-bottom: 8px;
            font-size: 14px;
        }
    }

    /* Mobile */
    @media (max-width: 576px) {
        #formulario-contenedor {
            padding: 40px 40px 40px 40px;
        }

        #form-container {
            padding-bottom: 60px;
        }

        .contact-form {
            width: 100%;
            max-width: none;
            gap: 10px;
        }

        .form-input, .form-textarea {
            padding: 8px;
            font-size: 13px;
        }

        .checkbox-container {
            font-size: 12px;
            gap: 6px;
        }

        .submit-btn {
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 6px;
            padding-bottom: 6px;
            font-size: 13px;
        }
    }

    /* Mobile muy pequeño */
    @media (max-width: 375px) {
        #formulario-contenedor {
            padding: 30px 30px 30px 30px;
        }

        #form-container {
            padding-bottom: 40px;
        }

        .contact-form {
            gap: 8px;
        }

        .form-input, .form-textarea {
            padding: 6px;
            font-size: 12px;
        }

        .checkbox-container {
            font-size: 11px;
        }

        .submit-btn {
            padding-left: 15px;
            padding-right: 15px;
            padding-top: 5px;
            padding-bottom: 5px;
            font-size: 12px;
        }
    }

    /* Usar personaje */
    #usar-personaje {
        padding: 100px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 50px;
    }

    #usar-personaje-textos {
        width: 80%;
    }

    .custom-card{
        border: none !important;
        margin-bottom: 20px;
    }

    /* Responsive Usar personaje */
    /* Tablet */
    @media (max-width: 1024px) {
        #usar-personaje {
            padding: 80px 40px;
        }

        #usar-personaje-textos {
            width: 90%;
        }
    }

    /* Tablet pequeño */
    @media (max-width: 768px) {
        #usar-personaje {
            padding: 60px 30px;
        }

        #usar-personaje-textos {
            width: 95%;
        }
    }

    /* Mobile */
    @media (max-width: 576px) {
        #usar-personaje {
            padding: 40px 20px;
        }

        #usar-personaje-textos {
            width: 100%;
        }
    }

    /* Mobile muy pequeño */
    @media (max-width: 375px) {
        #usar-personaje {
            padding: 30px 15px;
        }
    }

    #proceso {
        width: 100%;
    }

    #info {
        padding: 50px 100px 100px 100px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 80px;
    }

    #titulo-principal {
        width: 70%;
        height: 200px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 15px;
    }

    #titulo-principal a{
        background-color: #DFA327;
        padding: 13px 20px;
        border-radius: 5px;
        color: #002164;
    }

    #etapas-dos-tres {
        display: flex;
        width: 100%;
        justify-content: center;
        margin-top: 100px;
        justify-content: space-between;
    }

    #etapas-dos-tres img{
        width: 90%;
    }

    #etapa-uno{
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }

    #proceso-titulo {
        padding-bottom: 100px !important;
    }

    #proceso h2 {
        padding-bottom: 30px;
    }

    /* Texto */
        #etapa-uno-info {
        width: 40%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        }

        #etapa-uno-titulo{
            text-align: left;
        }

        /* Texto */
        #etapa-uno-info p, li{
        text-align: left;
        }

        /* Carrusel */
        #etapa-uno-carrusel {
        width: 48%;
        }
        
        #etapa-uno-carrusel img {
        width: 100%;
        border-radius: 16px;
        }

        #etapa-dos p, #etapa-tres p{
            padding-bottom: 50px;
        }

        .carousel-indicators {
        position: static !important;
        margin-top: 15px !important;
        display: flex !important;
        justify-content: center !important;
        }

        .carousel-indicators button {
        width: 40px !important;
        height: 6px !important;
        background-color: #99A6C1 !important;
        border: none !important;
        margin: 0 5px !important;
        }

        .carousel-indicators .active {
        background-color: #002164 !important;
        }

    /* Responsive para tablet */
    @media (max-width: 1024px) {
        #proceso-titulo {
        padding-bottom: 60px !important;
        }
        #info {
            padding: 40px 40px 70px 40px;
        }
        #titulo-principal {
            width: 85%;
            height: auto;
        }
        #etapas-dos-tres {
            flex-direction: column;
            gap: 35px;
            margin-top: 60px;
        }
        #etapa-uno {
            flex-direction: column;
            align-items: center;
            gap: 25px;
        }
        #etapa-uno-info,
        #etapa-uno-carrusel {
            width: 100%;
        }
        #etapa-dos p,
        #etapa-tres p {
            padding-bottom: 30px;
        }
    }

    /* Responsive para tablet pequeño / móvil grande */
    @media (max-width: 768px) {
        #info {
            padding: 30px 25px 60px 25px;
            gap: 60px;
        }
        #titulo-principal {
            width: 100%;
            padding: 0 10px;
            gap: 10px;
        }
        #titulo-principal a {
            padding: 10px 15px;
        }
        #etapa-uno-info p,
        #etapa-uno-info li {
            font-size: 0.95rem;
        }
        .carousel-indicators button {
            width: 30px !important;
            height: 5px !important;
            margin: 0 4px !important;
        }
    }

    /* Responsive para móvil */
    @media (max-width: 576px) {
        #proceso-titulo {
        padding-bottom: 10px !important;
        }
        #info {
            padding: 20px 15px 40px 15px;
            gap: 50px;
        }
        #titulo-principal {
            width: 100%;
            height: auto;
        }
        #etapas-dos-tres,
        #etapa-uno {
            flex-direction: column;
            align-items: center;
        }
        #etapa-uno-info,
        #etapa-uno-carrusel {
            width: 100%;
        }
        #etapa-uno-info p,
        #etapa-uno-info li {
            font-size: 0.9rem;
        }
        #etapa-dos p,
        #etapa-tres p {
            padding-bottom: 20px;
        }
        .carousel-indicators {
            margin-top: 10px !important;
        }
    }

    #rediseño {
        background-image: url(res/Pixtor26-Evolucion-Fondo.webp);
        background-position: center top;
        background-size: cover;
        background-repeat: no-repeat;
        padding: 130px 100px 100px 100px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        min-height: 830px;
    }

    #rediseño h2, #rediseño p {
        color: white;
        max-width:1312px;
    }

    /* Contenedor */
    .timeline {
    padding: 60px 20px;
    background: #ffffff;
    }

    /* Grid 
    .timeline-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    text-align: center;
    }
*/
.timeline-grid{
        display: flex;
    align-items: flex-end;
    text-align: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 20px;
}
div.item.top, div.item.bottom{
    width:33%;
}
.item.bottom hr{
    color:#fff;
    opacity:1;
    border-top:4px solid;
}
.item.bottom hr.line1{
    margin:0 0 -9px 50%;
}
.item.bottom hr.line2{
    margin:0 0 -9px 0;
}
.item.bottom hr.line3{
    margin:0 50% -9px 0;
}
    /* Imágenes */
    .item.top img {
    max-width: 285px;
    }

    /* Parte inferior */
    .item.bottom {
    position: relative;
    margin-top: 20px;
    }

    /* Línea */
    .line {
    position: absolute;
    top: 10px;
    left: -50%;
    width: 200%;
    height: 4px;
    background: #ffffff;
    z-index: 1;
    }

    /* Quitar exceso en extremos */
    .item.bottom:first-child .line {
    left: 50%;
    width: 50%;
    }

    .item.bottom:last-child .line {
    width: 50%;
    }

    /* Punto */
    .dot {
    width: 14px;
    height: 14px;
    background: white;
    border-radius: 50%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    }

    /* Texto */
    .item.bottom p {
    margin-top: 10px;
    color: white;
    }
    
    /*Rediseño*/
    @media(max-width:1024px){
        #rediseño{
        min-height:565px;
        padding:90px 60px 80px 60px;
        } 
        .item.top img {
    max-width: 180px;
}
.item.bottom {
    margin-top: 15px;
}
.timeline-grid{
    row-gap: 15px;
}

        
    }
    @media(max-width: 768px){
        #rediseño{
            min-height:440px;
            padding:60px 25px 80px 25px;
        }
        #rediseño h2{
            margin:0px;
        }
        .item.top img {
    max-width: 145px;
}
.timeline-grid{
    row-gap: 10px;
}
.item.bottom{
    margin-top: 10px;
}
    }
    @media(max-width:666px){
        div.item.top {
            width: 80%;
        padding-top: 20px;
}
 .item.top img {
    max-width: 150px;
}
div.item.bottom{
    width:15%;
    position: relative;
    display: flex;
    flex-direction: column;
     height: 100%; 
     height: stretch;
     justify-content: center;
}
.item.bottom hr.line1 {
            position: absolute;
        background: #fff;
        height: 100%;
        width: 4px;
        margin: 200px auto 0 auto;
        left: 0;
        right: 0;
}
.item.bottom hr.line2 {
            position: absolute;
        background: #fff;
        height: 100%;
        width: 4px;
        margin: 200px auto 0 auto;
        left: 0;
        right: 0;
}
.item.bottom hr.line3 {
            position: absolute;
        background: #fff;
        height: 20%;
        width: 4px;
        margin:  0 auto;
        left: 0;
        right: 0;
}
div.item.bottom p{
    order:1;
    margin-left: -50px;
}
div.item.bottom .dot{
    order:2;
}
.item.bottom{
    margin-top:0px;
}
    .timeline-grid {
        row-gap: 0px;
    }
.pixi4{
    order:1;
}
.pixi1{
    order:2;
}
.pixi5{
    order:3;
}
.pixi2{
    order:4;
}
.pixi6{
    order:5;
}
.pixi3{
    order:6;
}
    }