:root {
    --primario: #007ACC;
    --azul_claro: #F1F9FF;
    --secundario: #FF8C00;
    --blanco: #ffffff;
    --gris: #707070;
    --gris_circulos: #70707028;
    --gris_fondo: #e8e9eb;
    --fuentePrincipal: 'Montserrat', cursive;
}

html {
    box-sizing: border-box;
    font-size: 62.5%;
    /* 1rem = 10px 
    En pantallas 1920x1080  1vh = 10.8px = 1.08rem */
    overflow-x: hidden;
    /* Previene scroll horizontal */
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    font-family: var(--fuentePrincipal);
    font-size: 1.6rem;
    line-height: 2;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    /* Asegura que el cuerpo se ajuste al contenido */
    height: auto;
    /* Permite que crezca según el contenido */
}

/* Globales */
a {
    text-decoration: none;
    font-size: 2.4rem;
}

h1,
h2,
h3,
h4 {
    font-family: var(--fuentePrincipal);
    line-height: 1.2;
}

h1 {
    font-size: 3.6rem
}

h2 {
    font-size: 3rem;
}

h3 {
    font-size: 2rem;
}

p {
    font-size: 1.8rem;
}

img {
    max-width: 100%;
}

/* NavBar */

li,
a,
button {
    color: var(--primario);
    text-decoration: none;
    font-weight: 400;
}

ul {
    list-style: none;
}


/* Header */
.main-header {
    display: flex;
    width: 100%;
    position: fixed;
    z-index: 1000;
    background-color: var(--blanco);
    align-items: center;
    padding: 0.5rem 2%;
    height: 8.5rem;
    box-shadow: 0rem 0.3rem 0.6rem #00000029;
    border: 0.1rem solid var(--gris_circulos);
    transform: none !important;
    /* Desactiva cualquier transformación heredada */

}

.ubicacion1,
.ubicacion2,
.ubicacion3 {
    color: var(--secundario);
}

.ubicacion4 button {
    background-color: #FF8C0066;
    color: var(--primario);
}

.logo_header img {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 100%;
    max-width: 21rem;
    height: 100%;
    max-height: 8.1rem;

}


.navbar-items {
    margin-left: auto;
}

.navbar-items li {
    display: inline-block;
    padding: 0rem 2rem;
}

.navbar-items li a {
    font-weight: normal;
    font-size: 2rem;
}

.navbar-items li a:hover {
    color: var(--secundario)
}

button {
    padding: 1rem 2.5rem;
    background-color: var(--azul_claro);
    border-width: 0.1rem;
    border-style: solid;
    border-color: var(--gris);
    border-radius: 5rem;
    cursor: pointer;
    transition: all 0.3s ease 0s;
    color: var(--secundario);
    font-size: 1.8rem;
}

button:hover {
    background-color: #69BEF7;
    color: var(--blanco);

}

/* header 768px */
@media (min-width: 481px) and (max-width: 768px) {
    .logo_header img {
        width: 20rem;
        height: auto;
    }

    .navbar-items ul {
        padding: 0;
        padding-right: 1rem;
    }

    .navbar-items ul li {
        padding: 1rem;
    }

}

/* header 480px*/
@media (max-width: 480px) {
    .main-header {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        width: 100%;
        height: auto;
        position: fixed;
        z-index: 1000;
        background-color: var(--blanco);


    }

    .logo_header {
        margin: 0 auto;
    }

    .logo_header img {
        content: url(/img/solo_LOGO.png);
        width: auto;
        object-fit: contain;

    }

    .navbar-items {
        margin-left: initial;
        width: 10rem;
        margin-right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        ;
        margin: 0 auto;
    }

    .navbar-items ul {
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;

    }

    .navbar-items ul li {
        padding: 0;
        margin: 0;
    }
}

.flecha-arriba {
    position: fixed;
    /* Fija la flecha en la pantalla */
    right: 20px;
    /* Apilada a la derecha */
    top: 50%;
    /* Centrada verticalmente */
    transform: translateY(-50%);
    /* Centrado exacto */
    width: 60px;
    /* Tamaño del contenedor */
    height: 60px;
    background-color: var(--blanco);
    /* Color de fondo del contenedor */
    border-radius: 50%;
    /* Hace la flecha circular */
    display: none;
    /* Oculta la flecha por defecto */
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Sombra */
    cursor: pointer;
    opacity: 0.8;
    /* Transparencia */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    z-index: 1000;
    /* Asegura que esté por encima de otros elementos */
    overflow: hidden;
    /* Previene desbordamientos */

}

@media (min-width: 480px) and (max-width: 768px) {
    .flecha-arriba {
        display: none;
    }
}


.flecha-arriba img {
    width: 100%;
    /* Tamaño del SVG */
    height: 100%;
}

.flecha-arriba:hover {
    opacity: 1;
    /* Totalmente visible al pasar el mouse */
    transform: scale(1.1);
    /* Agranda la flecha al pasar el mouse */
}

.flecha-arriba:active {
    transform: scale(0.95);
    /* Reduce el tamaño al hacer clic */
}


/* Footer */

.footer {
    max-width: 100%;
    max-height: 24.1rem;
    bottom: 0;
}

.footer_contenedor {
    background: transparent linear-gradient(90deg, var(--primario) 0%, #007ACB 27%, #0069AF 73%, #003D66 100%) 0% 0% no-repeat padding-box;
    display: grid;
    grid-template-columns: 2fr 2fr 2fr 2fr 1fr;
    padding: 3rem;
    height: auto;
    width: 100%;
}

.logo_contenedor {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.redes {
    margin-top: 0;
    padding-left: 0;
    margin-bottom: 0;
    display: flex;
    justify-content: space-evenly;
    width: 100%;
}

.footer_contenedor_contenido--espaciador2 {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
}

.footer_contenedor_contenido h4 {
    color: var(--blanco);
    font-size: 1.6rem;
    display: flex;
    align-items: center;
}

.footer_contenedor_contenido p {
    color: var(--azul_claro);
    margin-top: 0;
    /* Elimina el margen superior */
    margin-bottom: 0;
    /* Elimina el margen inferior */
}

.parrafo--italic {
    font-style: italic;
}

.logo-footer {
    width: 18rem;
    height: auto;
}

.boton_footer {
    background: var(--blanco) 0% 0% no-repeat padding-box;
    box-shadow: inset 0px 3px 6px #70707066;
    border-radius: 0px 4px 4px 0px;
    margin-left: -0.8rem;
}

.footer_contenedor_contenido input {
    color: var(--gris);
    height: 3.8rem;
    font-style: italic;
    text-align: center;
    border-radius: 0.5rem;
}

.footer_contenedor_contenido--espaciador {
    width: 100%;
    display: flex;
    align-items: center;

}

/* footer 768px */
@media (min-width: 481px) and (max-width: 768px) {
    .footer_contenedor {
        background: transparent linear-gradient(180deg, var(--primario) 0%, #007ACB 27%, #0069AF 73%, #003D66 100%) 0% 0% no-repeat padding-box;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        padding: 3rem;
        height: auto;
        width: 100%;
        z-index: 1000;
    }

    .logo-footer {
        width: 18rem;
        height: auto;
    }

    .logo_contenedor {
        width: 100%;
        margin: 0 auto;
        margin-top: 2rem;
        display: flex;
        justify-content: center;
        flex-direction: unset;
    }

    .redes {
        padding: 0;
        max-width: 30rem;
    }

    .footer_contenedor_contenido--centro {
        grid-column: 1 / span 2;
    }

    body {
        overflow-x: hidden;
    }

}

/* footer 480px */
@media (max-width: 480px) {
    .footer_contenedor {
        background: transparent linear-gradient(180deg, var(--primario) 0%, #007ACB 27%, #0069AF 73%, #003D66 100%) 0% 0% no-repeat padding-box;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
        padding: 3rem;
        height: auto;
        width: 100%;
        z-index: 1000;
    }

    .footer_newsletter {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .footer_contenedor_contenido--espaciador {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .logo-footer {
        content: url(/img/LOGO_completo_sin_fondo.png);
        width: 32rem;
        height: auto;
    }
}


/* //////////////////////////////////////// Pagina: Index ///////////////////////////////////////////// */

/* Contenedor de la imagen */
.imagen-contenedor {
    perspective: 400px;
    /* Necesario para el efecto 3D */
    position: relative;
    width: 82.6rem;
    /* Ajusta según tu diseño */
    height: 82.6rem;
    border-radius: 50%;
    /* Redondea los bordes */
    overflow: hidden;
    /* Oculta cualquier sombra fuera del borde circular */
}


/* Imagen animada al entrar */
/* Efecto 3D cuando el cursor está encima */
.imagen-contenedor:hover .imagen-circular {
    transform: translate(-50%, -50%) rotateX(15deg) rotateY(15deg);
    /* Rotación 3D */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    /* Más grande y oscura */
    /* Sombra para mayor profundidad */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Seccion0 Presentación */
.contenedor1 {
    display: grid;
    margin-top: 7%;
    margin-bottom: 12%;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column;
    position: relative;
}

.espaciador_imagen {
    /* Permite centrar la imagen circular en su contenedor */
    display: grid;
    place-items: start end;
}

.imagen-contenedor {
    position: relative;
    width: 82.6rem;
    height: 82.6rem;

}

.circulo1 {
    width: 104.3rem;
    height: 104.3rem;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid var(--gris_circulos);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Centra el círculo */

}

.circulo2 {
    width: 104.3rem;
    height: 104.3rem;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid var(--gris_circulos);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    position: absolute;
    top: 50%;
    /* Coloca el centro del círculo en el 50% de la altura del contenedor */
    left: 30%;
    /* Coloca el centro del círculo en el 50% del ancho del contenedor */
    transform: translate(-50%, -50%);
    /* Centra el círculo */
}


.imagen-circular {
    border: 1rem solid var(--gris_circulos);
    position: absolute;
    top: 50%;
    left: -150%;
    /* Inicia fuera del contenedor */
    transform: translateY(-50%);
    width: 100%;
    /* Se ajusta al tamaño del contenedor */
    height: 100%;
    /* Se ajusta al tamaño del contenedor */
    border-radius: 50%;
    /* Forma circular */
    object-fit: cover;
    /* Escala la imagen dentro del contenedor */
    opacity: 0;
    /* Comienza invisible */
    z-index: 2;
    /* Asegura que esté sobre otros elementos */
    transition: left 1.5s ease, opacity 1.5s ease;
    /* Suaviza la animación */
}

.imagen-circular.visible {
    left: 50%;
    /* Se centra en el contenedor */
    opacity: 1;
    /* Aparece */
    transform: translate(-50%, -50%);
    /* Centrada */
}


.contenido {
    display: grid;
    width: 100%;
    align-content: center;

}

.cilindro-contenedor {
    margin-left: -23rem;
    max-width: 110rem;
    height: 43.7rem;
    background-color: var(--azul_claro);
    border-radius: 21.9rem;

}

.contenido-cilindro {
    display: grid;
    align-content: center;
}


.espaciador_titulo {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 1fr 1fr 1fr;

}

.titulo-cilindro {
    color: var(--secundario);
    text-align: left;
    grid-column: 3 / span 5;
    grid-row: 2 / span 2;
    font-weight: 400;
}

.espaciador_parrafo {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.parrafo-cilindro {
    color: var(--primario);
    font-weight: 400;
    font-size: 3.6rem;
    grid-column: 3 / span 7;
}


.espaciador_boton--abajo {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 1fr 1fr 1fr;

}

.boton {
    width: 20.9rem;
    height: 6.3rem;
    background-color: var(--blanco);
    border-radius: 5rem;
    border-color: var(--gris);
    border-style: solid;
    font-size: 1.8rem;
}

.boton_mas {
    color: var(--secundario);
    font-size: 1.8rem;
    grid-column: 3 / span 3;
    grid-row: 2 / span 2;

}

.boton_mas:hover {
    color: var(--blanco);
}

/* contenedor1 768px */
@media (min-width: 481px) and (max-width: 768px) {
    .contenedor1 {
        display: grid;
        margin-top: 15rem;
        margin-bottom: 12%;
        grid-template-columns: 1fr 1fr;
        position: relative;
    }

    .espaciador_imagen {
        /* Permite centrar la imagen circular en su contenedor */
        display: grid;
        place-items: start end;
        grid-column: 1 / span 1;
    }

    .imagen-contenedor {
        position: relative;
        width: 35rem;
        height: 35rem;
    }

    .circulo1,
    .circulo2 {
        display: none;
    }

    .contenido {
        grid-column: 2 / span 2;
        width: 35rem;
    }

    .titulo-cilindro {
        font-size: 2.6rem;
        grid-column: 4 / span 7;
    }

    .parrafo-cilindro {
        font-size: 2rem;
    }

    .boton_mas {
        grid-column: 4 / span 7;
    }

    .boton {
        height: 5.2rem;
        width: 17.2rem;
    }

    .cilindro-contenedor {
        height: 35rem;
        width: 60rem;
    }

    .parrafo-cilindro {
        grid-column: 4 / span 7;
    }


}


/* contenedor1 480px */
@media (max-width: 480px) {
    .contenedor1 {
        max-width: 100%;
        margin-top: 20rem;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .imagen-contenedor {
        position: relative;
        width: 35rem;
        height: 35rem;

    }

    .circulo1,
    .circulo2 {
        display: none;
    }

    .espaciador_titulo {
        display: flex;

    }

    .contenido {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-top: -12rem;
    }

    .contenido-cilindro {
        width: 100%;
        max-width: 39rem;
        display: flex;
        margin-top: 7rem;
        flex-direction: column;
        align-items: center;
        justify-content: center;

    }

    .cilindro-contenedor {
        max-width: 30rem;
        display: flex;
        height: 40rem;
        background-color: var(--azul_claro);
        border-radius: 0rem 0rem 17rem 17rem;

    }

    .titulo-cilindro {
        color: var(--secundario);
        font-weight: 400;
        font-size: 2.4rem;
        margin: 0;
    }

    .parrafo-cilindro {
        font-weight: 400;
        font-size: 1.6rem;
        height: 7rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .cilindro-contenedor {
        margin-left: 0;
    }

    .espaciador_boton--abajo {
        display: flex;

    }

    .espaciador_parrafo h2 {
        display: flex;
        text-align: center;
        grid-column: 2 / span 5;

    }

    .boton {
        height: 5rem;
        width: 17rem;
    }
}



/* Seccion1 tipos_desarrollo */

.tipos_desarrollo {
    width: 100%;
    margin-bottom: 7%;
    text-align: center;

}

.imagen_desarrollo {
    width: 22rem;
    height: 22rem;
    border-radius: 50%;
    border: 1rem solid var(--gris_circulos);
}


.titulo--espaciador {
    display: flex;
    align-items: center;
}

.titulo_tipos {

    font-size: 3.6rem;
    font-weight: bold;
    color: var(--primario);

}

.salto--linea {
    display: block;
    font-weight: lighter;
    color: var(--secundario);

}

.desarrollo_lista {
    list-style: disc;
    text-align: justify;

}

.lista--espaciador {
    display: flex;
    align-items: center;
}

.desarrollo_lista li::marker {
    color: var(--secundario);
}

.espaciador_boton {
    display: flex;
    justify-content: center;
    align-items: end;
}


/* tipos_desarrollo: desarrollo web */

.desarrollo_web {
    width: 100%;
    max-width: 100rem;
    height: 30rem;
    margin: 0 auto;
    background: transparent linear-gradient(90deg, #007ACC33 0%, #FFFFFF1A 100%) 0% 0% no-repeat padding-box;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 18rem;

}

.desarrollo_web--espaciador {
    display: flex;
    width: 93%;
    justify-content: space-between;
}

.linea_abajo {
    background: #007ACC6E 0% 0% no-repeat padding-box;
    width: 36.46%;
    max-width: 70rem;
    height: 0.9rem;
    margin: 0 auto;
}



/* tipos_desarrollo: desarrollo móvil */

.desarrollo_movil {
    width: 100%;
    max-width: 100rem;
    height: 30rem;
    margin: 0 auto;
    background: transparent linear-gradient(270deg, #007ACC33 0%, #FFFFFF1A 100%) 0% 0% no-repeat padding-box;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 18rem;
}

.desarrollo_movil--espaciador {
    display: flex;
    width: 93%;
    justify-content: space-between;
}

.desarrollo_lista--izquierda {
    list-style: disc;
    text-align: right;
    direction: rtl;
    /* Cambia la dirección de texto a derecha a izquierda */
}

.desarrollo_lista--izquierda li::marker {
    color: var(--secundario);
}


/* tipos_desarrollo: Desarrollo científico */

.desarrollo_cientifico {
    width: 100%;
    max-width: 100rem;
    height: 30rem;
    margin: 0 auto;
    background: transparent linear-gradient(90deg, #007ACC33 0%, #FFFFFF1A 100%) 0% 0% no-repeat padding-box;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 18rem;
}

.desarrollo_cientifico--espaciador {
    display: flex;
    width: 93%;
    justify-content: space-between;
}

/* tipos_desarrollo 768px */
@media (max-width: 768px) {

    .imagen_desarrollo {
        width: 19rem;
        height: 19rem;
    }

    .titulo_tipos {
        font-size: 2.6rem;
    }

    .boton_480--d {
        font-size: 1.7rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .boton_480--i {
        font-size: 1.7rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .linea_abajo {
        width: 48rem;
        height: 0.9rem;
        margin: 0 auto;
    }
}

/* tipos_desarrollo 480px */
/* tipos_desarrollo: desarrollo web */
@media (max-width: 480px) {
    .tipos_desarrollo {
        width: 100%;
        margin-bottom: 7rem;
    }

    .imagen_desarrollo {
        width: 15rem;
        height: 15rem;
        border: 1rem solid var(--gris_circulos);
        grid-column: 1 / span 1;
        display: flex;
        align-self: center;
        justify-self: center;
    }

    .titulo--espaciador {
        display: flex;
        align-items: center;
        grid-column: 1 / span 1;
        grid-row: 2 / span 2;
    }

    .titulo_tipos {
        margin: 0;
        font-size: 2.8rem;
        font-weight: bold;
        color: var(--primario);
        display: block;
        margin-left: auto;
        margin-right: auto;

    }

    .espaciador_boton {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .desarrollo_web {
        border-radius: 14rem;
        background: var(--blanco)
    }

    .desarrollo_web--espaciador {
        display: grid;
        height: 30rem;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .boton_480--d {
        font-size: 1.6rem;
        width: 19rem;
    }

    .linea_abajo {
        background: #007ACC6E 0% 0% no-repeat padding-box;
        width: 80%;
        height: 0.9rem;
        margin: 0 auto;
        border-radius: 5rem;
    }

    /* tipos_desarrollo: desarrollo móvil */
    .desarrollo_movil {
        border-radius: 14rem;
        background: var(--blanco)
    }

    .desarrollo_movil--espaciador {
        display: grid;
        height: 30rem;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .lista--espaciador--i {
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;

    }

    .boton_480--i {
        font-size: 1.6rem;
        width: 19rem;
        grid-column: 1 / span 1;
        grid-row: 2 / span 2;
    }

    .imagen_desarrollo--d {
        grid-column: 2 / span 2;
        grid-row: 1 / span 1;
    }

    .titulo--espaciador--d {
        grid-column: 2 / span 2;
        grid-row: 2 / span 2;
    }

    /* tipos_desarrollo: desarrollo cientifico */
    .desarrollo_cientifico {
        border-radius: 14rem;
        background: var(--blanco);
        width: 93%;
    }

    .desarrollo_cientifico--espaciador {
        display: grid;
        height: 30rem;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .desarrollo_lista {
        text-align: left;
    }

    .imagen_desarrollo--centrar {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .imagen_desarrollo--centrar--reparador {
        grid-column: 2 / span 3;
        grid-row: 1;
    }
}

/* Seccion2 devweb */
.devweb--espaciador {
    margin-bottom: 10%;
}

.devweb {
    display: flex;
    text-align: center;
    width: 100%;
    max-width: 111.1rem;
    justify-content: center;
    margin: 0 auto;

}


.titulo_web--azul {
    color: var(--primario);
    font-weight: normal;
}

.titulo_web--naranja {
    color: var(--secundario);
}

.parrafos {
    margin-top: 5%;
    display: flex;
    column-count: 2;
    column-gap: 5rem;
    text-align: left;
    color: var(--primario);
    font-size: 2.4rem;
}

/* Tarjetas */

.tarjetas {
    margin-top: 8%;
    margin-bottom: 12%;
    position: relative;
}

.tarjetas_personalizado {
    max-width: 130rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr
}

/* Tarjeta1 */

.tarjeta1 {
    width: 45rem;
    height: 50rem;
    background-color: var(--primario);
    margin: 0 auto;
    border-radius: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateX(0) scale(1);
}

.tarjetas_personalizado_imagen1 {
    width: 100%;
    max-width: 22rem;
    margin: 0 auto;
    opacity: 70%;
}

.tarjetas_personalizado_titulo1 {
    color: var(--blanco);
    font-size: 2.4rem;
    font-weight: bold
}

.tarjetas_personalizado_parrafo1 {
    text-align: center;
    max-width: 36rem;
    margin: 0 auto;
    color: var(--blanco);
    font-style: italic;
}

/* Tarjeta0 */

.tarjeta0 {

    width: 45rem;
    height: 50rem;
    background-color: var(--azul_claro);
    border-radius: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateX(-10px) scale(0.9);
    transform: translatey(-10px) scale(0.9);

}

.tarjeta0--espaciador {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}

.tarjetas_personalizado_imagen0 {
    width: 100%;
    max-width: 12.7rem;
    margin: 0 auto;
    opacity: 50%;
}

.tarjetas_personalizado_titulo0 {
    color: var(--primario);
    font-size: 2rem;
    font-weight: bold
}

.tarjetas_personalizado_parrafo0 {
    text-align: center;
    max-width: 26rem;
    margin: 0 auto;
    color: var(--primario);
    font-style: italic;
}

/* Tarjeta2 */

.tarjeta2 {
    width: 45rem;
    height: 50rem;
    background-color: var(--azul_claro);
    border-radius: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateX(10px) scale(0.9);
    transform: translatey(-10px) scale(0.9);

}

.tarjeta2--espaciador {
    display: flex;
    align-items: center;
    height: 100%;
}

.tarjetas_personalizado_imagen2 {
    width: 100%;
    max-width: 12.7rem;
    margin: 0 auto;
    opacity: 50%;
}

.tarjetas_personalizado_titulo2 {
    color: var(--primario);
    font-size: 2rem;
    font-weight: bold
}

.tarjetas_personalizado_parrafo2 {
    text-align: center;
    max-width: 26rem;
    margin: 0 auto;
    color: var(--primario);
    font-style: italic;
}

.circulo3 {
    width: 75rem;
    height: 75rem;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid var(--gris_circulos);
    bottom: 0;
    left: 0;
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 85%;
    transform: translate(-50%, -50%);
    /* Centra el círculo */

}

.circulo4 {
    width: 75rem;
    height: 75rem;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid var(--gris_circulos);
    bottom: 0;
    left: 0;
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 15%;
    transform: translate(-50%, -50%);
    /* Centra el círculo */

}

/* devweb 480px */
@media (max-width: 480px) {
    .devweb {
        width: 39rem;
    }

    .circulo3,
    .circulo4 {
        display: none;
    }

    .devweb--espaciador {
        display: flex;
        flex-direction: column;
    }

    .titulo_web {
        max-width: 39rem;
        display: flex;
        margin: 0 auto;
    }

    .titulo_web--naranja,
    .titulo_web--azul {
        font-size: 3.2rem;
        text-align: center;
    }

    .parrafos {
        display: flex;
        flex-direction: column;
        max-width: 34rem;
        margin: 0 auto;
        text-align: justify;
    }

    /* tarjetas */
    .tarjetas_personalizado {
        max-width: 130rem;
        display: flex;
        flex-direction: column;
    }

    /* tarjeta1 */
    .tarjeta1 {
        width: 36rem;
        height: 40rem;
    }

    .tarjetas_personalizado_imagen1 {
        width: 10rem;
        margin-bottom: 2rem;
        width: 10rem;
        margin-bottom: 2rem;
    }

    .tarjetas_personalizado_titulo1 {
        margin: 0;
        margin-bottom: 2rem;
    }

    .tarjetas_personalizado_parrafo1 {
        max-width: 30rem;
    }

    /* tarjeta0 */
    .tarjeta0 {
        width: 32rem;
        height: 40rem;
        margin: 0 auto;
    }

    .tarjetas_personalizado_imagen0 {
        width: 100%;
        max-width: 8rem;
        margin: 0 auto;
    }

    .tarjetas_personalizado_titulo0 {
        margin: 0;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .tarjetas_personalizado_parrafo1 {
        max-width: 26rem;
    }

    /* tarjeta2 */
    .tarjeta2 {
        width: 32rem;
        height: 40rem;
        margin: 0 auto;
    }

    .tarjetas_personalizado_imagen2 {
        width: 100%;
        max-width: 8rem;
        margin: 0 auto;
    }

    .tarjetas_personalizado_titulo2 {
        margin: 0;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .tarjetas_personalizado_parrafo2 {
        max-width: 26rem;
    }
}

/* Seccion3 devmovil */

/* Desarrollo movil */
.devmovil {
    width: 80%;
    height: 110rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 0 auto;
    position: relative;
    margin-bottom: 10%;
}

.contenedor_movil {
    background-color: var(--azul_claro);
    max-width: 120rem;
    max-height: 110rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 4rem;

}

.titulo_movil {
    max-width: 61rem;

}

.titulo_movil--naranja {
    font-size: 3.6rem;
    color: var(--secundario);
    font-weight: normal;
    text-align: center;
}

.titulo_movil--azul {
    font-size: 3.6rem;
    color: var(--primario);
    font-weight: normal;
    margin: 0 auto;
}

.parrafo_movil {
    max-width: 61rem;
    font-size: 1.8rem;
    color: var(--gris);
}

.enfoques h2 {
    max-width: 61rem;
    font-weight: normal;
    color: var(--secundario);
    font-style: italic;
}

/* Enfoques */

.contenedor_desarrollo {
    max-width: 80%;
    max-height: 110rem;
    display: flex;
    align-items: center;
    margin: 0;
}

.contenedor_desarrollo--espaciador {
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.multiplataforma {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    justify-items: center;
}

.img_movil {
    width: 17rem;
    height: 17rem;
    opacity: 0.6;
}

.movil_titulo1 {
    font-size: 1.8rem;
    color: var(--secundario);
}

.movil_titulo2 {
    font-size: 1.8rem;
    font-weight: normal;
    color: var(--secundario);
}

.movil_parrafo {
    font-size: 1.8rem;
    color: var(--primario);
    font-style: italic;
}

.imagenes_movil {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    opacity: 0.6;
}

.imagenes_movil--size {
    width: 10rem;
    height: 10rem;
}

.nativo {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    justify-items: center;
}

.nativo_titulo1 {
    font-size: 1.8rem;
    color: var(--secundario);
}

.nativo_titulo2 {
    font-size: 1.8rem;
    font-weight: normal;
    color: var(--secundario);
}

.nativo_parrafo {
    font-size: 1.8rem;
    color: var(--primario);
    font-style: italic;
}

.circulo5 {
    width: 84rem;
    height: 80rem;
    border-radius: 50%;
    border: 2px solid var(--gris_circulos);
    z-index: -1;
    position: absolute;
    left: 50%;
    top: 25%;
    transform: translate(-50%, -26%);
    /* Centra el círculo */

}

.circulo6 {
    width: 84rem;
    height: 80rem;
    border-radius: 50%;
    border: 2px solid var(--gris_circulos);
    z-index: -1;
    position: absolute;
    left: 65%;
    top: 25%;
    transform: translate(-50%, -26%);
    /* Centra el círculo */

}

/* devmovil 480px */
@media (max-width: 480px) {
    .devmovil {
        width: 36rem;
        height: 294rem;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        justify-content: flex-start;
        align-items: center;
    }

    .circulo5,
    .circulo6 {
        display: none;
    }

    /* contenedor_movil */
    .contenedor_movil {
        background-color: var(--azul_claro);
        display: flex;
        max-height: 100%;
        padding: 2rem;

    }

    .titulo_movil--naranja,
    .titulo_movil--azul {
        font-size: 2.6rem;
    }

    .parrafo_movil {
        text-align: justify;
        max-width: 32rem;
    }

    .enfoques {
        font-size: 2.8rem;
    }

    /* contenedor_desarrollo */
    .contenedor_desarrollo {
        height: 150rem;
    }

    .contenedor_desarrollo--espaciador {
        height: auto;
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
    }

    /* multiplataforma */
    .multiplataforma {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 5rem;
        ;
    }

    .multiplataforma img {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .movil_titulo1,
    .movil_titulo2,
    .nativo_titulo1,
    .nativo_titulo2 {
        font-size: 2.4rem;
        text-align: center;
        width: 100%;
        margin: 0 auto;
        padding: 1rem;
    }

    .movil_titulo2 h2 {
        display: flex;
        width: 28rem;
        width: 80%;
    }

    .movil_parrafo,
    .nativo_parrafo {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: justify;
        width: 32rem;
        margin: 0 auto;
        padding-top: 1rem;
    }

    /* nativo */
    .nativo {
        margin-top: 5rem;
        display: flex;
        flex-direction: column;
    }

    .nativo_titulo2 {
        width: 90%;
    }

    .imagenes_movil {
        margin-bottom: 2rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 2rem;

    }
}

/* seccion4 devscientist*/

.devscientist {
    max-width: 80%;
    height: 80%;
    display: grid;
    grid-template-columns: 4fr 1fr;
    background-color: var(--azul_claro);
    border-radius: 4rem;
    position: relative;
    margin: 0 auto;
    margin-bottom: 10rem;

}

.devscientist_contenedor {
    padding: 3rem 6rem;

}

.devscientist_contenedor_titulo {
    width: 100%;
    max-width: 107rem;
    color: var(--primario);
    font-weight: normal;

}

.devscientist_contenedor_titulo span {
    color: var(--secundario)
}

.devscientist_contenedor_columnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 5rem;
}

.devscientist_parrafo {
    color: var(--gris);
    width: 100%;
}

.devscientist_columna1 {
    display: flex;
    max-width: 100%;
    flex-direction: column;
    row-gap: 5rem;

}

.devscientist_imagen1_contenedor {
    width: 100%;

    display: flex;
    align-items: center;

}

.devscientist_imagen1 {
    width: 100%;
    height: 38rem;
    max-height: 100%;
    border-radius: 4rem;
    object-fit: cover;
}

.devscientist_columna2 {
    display: block;
    max-width: 57.6rem;
}

.devscientist_contenedor_imagen2 {
    width: 36rem;
    height: 100%;
    display: flex;
    align-items: center;
    position: absolute;
    left: 82%;
    z-index: 1;

}

.devscientist_imagen2 {
    width: 100%;
    max-width: 48rem;
    height: 78rem;
    object-fit: cover;
    border-radius: 4rem;

}

.circulo7 {
    width: 84rem;
    height: 80rem;
    border-radius: 50%;
    border: 2px solid var(--gris_circulos);
    z-index: -1;
    position: absolute;
    left: 20%;
    top: 75%;
    transform: translate(-50%, -50%);
    /* Centra el círculo */

}

.circulo8 {
    width: 84rem;
    height: 84rem;
    border-radius: 50%;
    border: 2px solid var(--gris_circulos);
    z-index: -1;
    position: absolute;
    left: 95%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* Centra el círculo */

}

/* devscientist 480px */
@media (max-width: 480px) {

    .circulo7,
    .circulo8 {
        display: none;
    }

    .devscientist--espaciador {
        width: 100%;
    }

    .devscientist {
        display: flex;
        flex-direction: column;
        width: 36rem;
        height: 260rem;
        display: flex;
        margin: 0 auto;
        padding: 2rem;
        margin-bottom: 30rem;
    }

    .devscientist_contenedor {
        width: 100%;
        padding-top: 8rem;
        padding-bottom: 2rem;
        padding-left: 0;
        padding-right: 0;
        margin: 0 auto;
        margin-top: -6rem;
    }

    .devscientist_contenedor_titulo {
        font-size: 2.6rem;
        margin: 0 0;
        text-align: center;
    }

    .devscientist_contenedor_columnas {
        display: flex;
        flex-direction: column;
        margin: 0 auto;
    }

    .devscientist_columna2 {
        margin-top: 1.8rem;
    }

    .devscientist_columna1 {
        width: 36rem;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }

    .devscientist_parrafo {
        display: flex;
        margin: 0 auto;
        width: 100%;
        text-align: justify;
        margin-right: 0;
        margin-left: 0;
        margin-top: 1.8rem;
    }

    .devscientist_imagen1_contenedor {
        width: 36rem;
        height: 36rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;

    }

    .devscientist_imagen1_contenedor picture {
        display: flex;
        margin: 0 auto;
        align-items: center;
        justify-content: center;
    }

    .devscientist_imagen1 {
        width: 36rem;
        height: 36rem;
        object-fit: cover;
        position: relative;
        margin: 0 auto;
        border-radius: 50%;
        border: 10px solid var(--gris_circulos);
    }

    .devscientist_contenedor_imagen2 {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        top: 0;
        left: 0;
    }

    .devscientist_imagen2 {
        max-width: 36rem;
        max-height: 36rem;
        object-fit: cover;
        position: relative;
        margin: 0 auto;
        border-radius: 50%;
        border: 10px solid var(--gris_circulos);
        left: 0rem;
        top: 250rem;
    }

    .devscientist_imagen1_contenedor source {
        display: none;
    }
}

/* devscientist 306px */
@media (max-width: 480px) {
    .devscientist {
        margin-bottom: 37rem;
    }

    .devscientist_imagen2 {
        top: 255rem;
    }
}


/* //////////////////////////////////////// Pagina: Nosotros ///////////////////////////////////////////// */

/* Seccion5: Nuestro equipo detras del codigo */

.seccion5 {
    margin: 0 auto;
    width: 85%;
    max-width: 169rem;
    margin-top: 10%;
    margin-bottom: 7%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10rem;
    position: relative;
}

.contenedor_equipo {
    background-color: var(--azul_claro);
    top: 10%;
    width: 80%;
    height: 80%;
    z-index: -1;
    position: absolute;
    border-radius: 4rem;
    margin-left: -7rem;

}

.circulo9 {
    width: 96rem;
    height: 96rem;
    border-radius: 50%;
    border: 2px solid var(--gris_circulos);
    z-index: -2;
    position: absolute;
    left: 40%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* Centra el círculo */

}

.circulo10 {
    width: 96rem;
    height: 96rem;
    border-radius: 50%;
    border: 2px solid var(--gris_circulos);
    z-index: -2;
    position: absolute;
    left: 60%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* Centra el círculo */

}

/* Columna 1 */

.equipo_contenedor_columna1 {
    display: flex;
    flex-direction: column;
    row-gap: 5rem;

}

.equipo_titulo--azul {
    color: var(--primario);
}

.equipo_titulo--naranja {
    margin-top: 0;
    color: var(--secundario);
}

.equipo_titulo--naranja,
.equipo_titulo--azul {
    font-weight: normal;
}

.equipo_contenedor_parrafo {
    color: var(--gris);
}

.ver_equipo_titulo {
    color: var(--secundario);
    font-weight: normal;
    font-size: 2.4rem;
}

.equipo_contenedor_ver {
    display: flex;
    justify-content: space-between;
}

.imagen_equipo1 {
    width: auto;
    height: 36rem;
    object-fit: cover;
    border-radius: 4rem;
}

.boton_ver_equipo a {
    color: var(--secundario);
}

.boton_ver_equipo a:hover {
    color: var(--blanco);
}

/* Columna 2 */

.equipo_contenedor_columna2 {
    display: flex;
    flex-direction: column;

}

.imagen_equipo2 {
    width: auto;
    height: 48rem;
    object-fit: cover;
    border-radius: 4rem;
}

.equipo_tarjeta {
    height: 100%;
    background: #7FC4FD 0% 0% no-repeat padding-box;
    border-radius: 4rem;
    display: grid;
    grid-template-columns: 2fr 5fr;
}

.imagen_integrante1 {
    width: 18rem;
    height: 18rem;
    object-fit: cover;
    border: 0.7rem solid var(--blanco);
    border-radius: 50%;

}

.imagen_integrante1_contenedor {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;

}

.leyenda_tarjeta {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: 2.4rem 2rem 7rem;
    /* Define tamaños diferentes para las filas */
    grid-auto-flow: column;
    /* Coloca los elementos en columnas */
    grid-auto-rows: auto;
    /* Altura automática para las filas */
    grid-gap: 2rem;
    padding-top: 12%;
}

.leyenda_tarjeta h2 {
    text-align: center;
    grid-column: 1/ span 8;
    margin-top: 0rem;
    color: var(--blanco);
    font-weight: normal;
}

.leyenda_tarjeta h3 {
    text-align: center;
    grid-column: 1 / span 8;
    color: var(--blanco);
    font-weight: lighter;
}

.leyenda_tarjeta p {
    text-align: center;
    grid-column: 1 / span 8;
    padding-top: 6rem;
    color: var(--blanco);
    font-style: italic;
}

.leyenda_tarjeta p span {
    color: var(--secundario);
}

/* seccion5 480px */
@media (max-width: 480px) {
    main {
        height: auto;
    }

    .seccion5 {
        display: flex;
        flex-direction: column;
        width: 90%;
        height: auto;
    }

    .circulo9,
    .circulo10 {
        display: none;
    }

    .contenedor_equipo {
        width: 100%;
        margin: 0 auto;
        top: 30rem;
    }

    .equipo_contenedor_columna1 {
        margin-top: 18rem;
    }

    .equipo_contenedor_parrafo {
        margin: 0 auto;
        padding-left: 1rem;
        padding-right: 2rem;
        text-align: justify;
        width: 34rem;
    }

    .equipo_contenedor_ver {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .boton_verequipo--centro {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ver_equipo_titulo {
        text-align: center;
        max-width: 33.2rem;
        margin-top: 0;
        object-fit: cover;
    }

    .imagen_equipo1 {
        max-width: 32rem;
        max-height: 32rem;
        border-radius: 50%;
        border: 10px solid var(--gris_circulos);
        margin: 0 auto;

    }

    .imagen_equipo2 {
        display: none;
    }

    .equipo_titulo--azul,
    .equipo_titulo--naranja {
        font-size: 3.2rem;
    }

    .equipo_contenedor_columna2 {
        display: flex;
    }

    .equipo_tarjeta {
        display: flex;
        flex-direction: column;
        margin-top: 5rem;
        height: 48rem;
        border-radius: 1rem 1rem 5rem 5rem;
    }

    .imagen_integrante1_contenedor {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .leyenda_tarjeta {
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .leyenda_tarjeta h2,
    h3 {
        margin: 0;
    }

    .leyenda_tarjeta h2 {
        font-size: 2.4rem;
        font-weight: 600;
    }

    .leyenda_tarjeta p {
        margin: 0;
        padding: 0;
        width: 35rem;
        padding-right: 1rem;
        padding-left: 1rem;
        text-align: center;
    }
}

/* //////////////////////////////////////// Pagina: Contacto ///////////////////////////////////////////// */

.seccion6 {
    margin-top: 10%;
    margin-bottom: 7%;
}

.contenedor_form {
    background-color: var(--azul_claro);
    width: 115rem;
    height: auto;
    margin: 0 auto;
    border-radius: 4rem;
    position: relative;
    padding-top: 10rem;
}

.contenedor_logo {
    width: 100%;
    display: flex;
    align-items: center;
    position: absolute;
    justify-content: center;
    top: -5%;
}

.circulo_fondo {
    background-color: var(--azul_claro);
    margin: 0 auto;
    top: -20%;
    width: 20.2rem;
    height: 18.2rem;
    border-radius: 50%;
    z-index: -1;
    margin-bottom: -5%;
}

.contenedor_logo img {
    width: 18.2rem;
    height: 12.1rem;
}

.bloque_info {

    width: 80%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 auto;
    column-gap: 5rem;
}

.formulario_info {
    margin-top: 5%;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;

}

.formulario_info label {
    color: var(--secundario);
}

.formulario_info input {
    border: 2px solid #BCE0FD;
    border-radius: 1rem;
    height: 6rem;
}

.formulario_info select {
    border: 2px solid var(--secundario);
    border-radius: 1rem;
    height: 6rem;
    background-color: var(--blanco);
    opacity: 0.5;
}

.formulario_info select option {
    color: var(--primario);
}

.leyenda_contenedor {
    width: 55%;
    margin: 0 auto;
    background-color: var(--blanco);
    border-radius: 4rem;
    border: 3px solid #7FC4FD;
    padding: 2rem;
    margin-top: 5%;
}

.leyenda_contenedor p {
    margin-top: 0;
    margin-bottom: 0;
    color: var(--primario);
    font-style: italic;
    font-size: 1.8rem;
}

.bloque_info2 {

    width: 55%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    margin-top: 3%;

}

.formulario_info--texto textarea {
    border: 2px solid #7FC4FD;
    /* Borde del textarea */
    border-radius: 1rem;
    /* Borde redondeado */
    resize: none;
    /* Evitar que el usuario pueda redimensionar el textarea */
    padding: 2.5rem;
}

.formulario_info--texto textarea:focus {
    border-color: var(--secundario);
    /* Cambiar el color del borde cuando el textarea está enfocado */
    outline: none;
    /* Eliminar el contorno predeterminado */
}

.boton_formulario {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 5%;
}

.boton_formulario button {
    margin: 0 auto;
    padding-top: 2rem;
    padding-bottom: 2rem;
    margin-bottom: 5%;
}

.circulo11 {
    width: 96rem;
    height: 96rem;
    border-radius: 50%;
    border: 2px solid var(--gris_circulos);
    z-index: -2;
    position: absolute;
    left: 74%;
    top: 70%;
    transform: translate(-50%, -50%);
    /* Centra el círculo */
}

.circulo12 {
    width: 96rem;
    height: 96rem;
    border-radius: 50%;
    border: 2px solid var(--gris_circulos);
    z-index: -2;
    position: absolute;
    left: 26%;
    top: 30%;
    transform: translate(-50%, 50%);
    /* Centra el círculo */
}



/* contacto 480px */
@media (max-width: 480px) {

    .circulo11,
    .circulo12 {
        display: none;
    }

    .seccion6 {
        height: auto;
        margin-top: 20rem;
    }


    .contenedor_form {
        display: flex;
        flex-direction: column;
        width: 39rem;
    }

    .contenedor_form form {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .bloque_info {
        display: flex;
        flex-direction: column;
        padding: 0;
        width: 36rem;
        margin: 0 auto;
    }

    .bloque_info2 {
        display: flex;
        width: 33.15rem;
        margin: 0 auto;
        flex-direction: initial;
    }

    .leyenda_contenedor {
        width: 85%;
        margin: 3rem;
    }

    .formulario_info--texto {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 35rem;
    }

    .circulo_fondo {
        background-color: var(--azul_claro);
        margin: 0 auto;
        width: 18.2rem;
        height: 18.2rem;
        border-radius: 50%;
        margin-bottom: -20%;
    }

}

/* //////////////////////////////////////// Pagina: Cotizar ///////////////////////////////////////////// */

.color_fondo {
    background-color: var(--gris_fondo);
}

.seccion7 {
    margin-top: 10%;
    margin-bottom: 10%;
    display: flex;
    justify-content: center;
}

.contenido_cotizar {
    width: 80%;
    display: grid;
    grid-template-columns: 1fr 1fr;

}

.circulo_info {
    background-color: var(--azul_claro);
    width: 86.7rem;
    height: 86.7rem;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.titulos {
    width: 80%;
}

.titulo_circulo h1 {
    color: var(--primario);
    font-weight: normal;
}

.titulo_circulo h1 span {
    color: var(--secundario);
    font-weight: normal;
}

.subtitulo_circulo h4 {
    color: var(--primario);
    font-weight: normal;
    width: 40rem;
}

.leyenda_circulo {
    width: 47rem;
    height: auto;
    color: var(--secundario);
}

.leyenda_circulo h3 {
    font-weight: normal;
    margin-top: 5rem;
    font-style: italic;
}

.info_contacto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.red {
    color: var(--blanco);
    font-weight: 600;
    width: 14.1rem;
    display: flex;
    justify-content: center;
}

.red--primario {
    width: 14.1rem;
    color: var(--primario);
    font-weight: 600;
    display: flex;
    justify-content: center;
}

.whatsapp {
    background-color: var(--primario);
    width: 49rem;
    height: 12rem;
    border-radius: 4rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    opacity: 0.6;


}

.correo {
    background-color: var(--azul_claro);
    width: 49rem;
    height: 12rem;
    border-radius: 4rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    opacity: 0.6;
}


.enlinea {
    background-color: var(--primario);
    width: 49rem;
    height: 12rem;
    border-radius: 4rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    opacity: 0.6;
}

.red--italic {
    font-style: italic;
    color: var(--blanco);
}

.red--italic--naranja {
    color: var(--secundario);
}

.separador {
    width: 41.5rem;
    height: 13px;
    background: #007ACC 0% 0% no-repeat padding-box;
    opacity: 1;
}

/* cotizar 480px */
@media (max-width: 480px) {
    .seccion7 {
        margin-top: 21rem;
        height: auto;
    }

    .contenido_cotizar {
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        width: 100%;
    }

    .circulo_info {
        border-radius: 50rem 50rem 0rem 0rem;
        width: 38rem;
        height: 66rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        margin: 0 auto;
        padding-bottom: 3rem;
    }

    .titulos {
        width: 100%;
    }

    .titulo_circulo {
        width: 30.4rem;
        font-size: 2.2rem;
        margin: 0 auto;
    }

    .titulo_circulo h1 {
        font-size: 3.2rem;
        margin: 0 auto;
    }


    .subtitulo_circulo {
        width: 36rem;
        font-size: 1.8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }

    .subtitulo_circulo h4 {
        margin: 0 auto;
        width: 30.4rem;
        height: auto;
        text-align: left;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .leyenda_circulo {
        width: 30.4rem;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .leyenda_circulo h3 {
        padding: 0;
        margin: 0;
    }

    .info_contacto {
        width: 38rem;
        margin: 0 auto;
    }

    .whatsapp {
        width: 100%;
        border-radius: 0rem 0rem 4rem 4rem;
    }

    .separador {
        width: 30rem;
    }

    .correo {
        width: 100%;
    }

    .enlinea {
        width: 100%;
    }

}


@media screen and (max-width: 1366px) {
    html {
        transform: scale(0.8);
        /* Escala la página al 80% */
        transform-origin: top left;
        /* Establece el punto de origen de la transformación */
        width: 125%;
        /* Compensa el escalado para evitar scroll horizontal */
        height: 125%;
        /* Compensa verticalmente si es necesario */
        overflow-x: hidden;
        /* Previene barras de desplazamiento horizontales */
    }
}

@media screen and (max-width: 1024px) {
    html {
        transform: scale(0.7);
        /* Ajusta a 70% para pantallas más pequeñas */
        transform-origin: top left;
        width: 143%;
        /* Compensa aún más el ancho */
        height: 143%;
        overflow-x: hidden;
    }
}

/* //////////////////////////////////////// Animaciones //////////////////////////////////////////// */
/* Estilo para las imágenes pulsando */
.pulsing {
    animation: pulse-animation 4s infinite;
}

@keyframes pulse-animation {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }

    100% {
        transform: scale(1);
    }
}


/* Estilo para el desvanecimiento */
/* Estilo para el contenido que se desvanece */
.tarjeta0 img,
.tarjeta1 img,
.tarjeta2 img,
.tarjeta0 h4,
.tarjeta1 h4,
.tarjeta2 h4,
.tarjeta0 p,
.tarjeta1 p,
.tarjeta2 p {
    opacity: 1;
    /* Visible por defecto */
    transition: opacity 0.9s ease-in-out;
    /* Transición suave del contenido */
}

/* Estado desvanecido para el contenido */
.tarjeta0 .desvanecer,
.tarjeta1 .desvanecer,
.tarjeta2 .desvanecer {
    opacity: 0.1;
    /* El contenido se desvanece */
}

/* Animación de pulso en los círculos*/

.circulo1,
.circulo2,
.circulo3,
.circulo4,
.circulo5,
.circulo6,
.circulo7,
.circulo8,
.circulo9,
.circulo10,
.circulo11,
.circulo12 {
    animation: pulseEffect 4s infinite;
    /* Aplica la animación */
    animation-fill-mode: forwards;
    /* Mantiene el estado final */
    pointer-events: none;
    /* Desactiva la interacción con el mouse */
    position: absolute;
    /* Asegura que los círculos estén fuera del flujo del documento */
    z-index: -2000;
    /* Mantén los círculos en el fondo */
}


@keyframes pulseEffect {
    0% {
        transform: translate(-50%, -50%) scale(1);
        /* Tamaño original */
        opacity: 1;
        /* Totalmente visible */
    }

    100% {
        transform: translate(-50%, -50%) scale(1.3);
        /* Tamaño máximo */
        opacity: 0;
        /* Totalmente invisible */
    }
}

@media screen and (min-width: 1024px) and (max-width: 1536px) {

    .navbar-items,
    .cta {
        transform: scale(0.8);

    }

    .logo_header {
        transform: scale(0.8);
    }

    .main-header {
        height: 7rem;
    }

    .contenedor1,
    .tipos_desarrollo {
        transform: scale(0.8);
        /* Escala la página al 80% */
        transform-origin: left;
        /* Establece el punto de origen de la transformación */
        width: 125%;
        /* Compensa el ancho para evitar scroll horizontal */
        margin: 0;
    }

    .contenedor1 {
        margin-top: 2%;
    }

    .devweb,
    .devmovil {
        transform: scale(0.8);
        /* Escala la página al 80% */
        transform-origin: center;
        width: 105%;
        /* Compensa el ancho para evitar scroll horizontal */
        height: 125%;
        /* Compensa el alto si es necesario */
        margin: 0 auto;
        margin-top: -5%;
    }

    .devscientist {
        transform: scale(0.8);
        /* Escala la página al 80% */
        transform-origin: center;
        width: 125%;
        /* Compensa el ancho para evitar scroll horizontal */
        height: 125%;
        /* Compensa el alto si es necesario */
        margin: 0 auto;
    }

    .devweb--espaciador,
    .devscientist--espaciador {
        margin: 0 auto;

    }

    .seccion5 {
        transform: scale(0.8);
        /* Escala la página al 80% */
        transform-origin: center;
        /* Establece el punto de origen de la transformación */
        width: 125%;
        /* Compensa el ancho para evitar scroll horizontal */
        margin-top: 3%;
        margin-left: -3%;
        margin-bottom: 1%;
    }

    .seccion7 {
        transform: scale(0.8);
        /* Escala la página al 80% */
        transform-origin: left;
        /* Establece el punto de origen de la transformación */
        width: 125%;
        /* Compensa el ancho para evitar scroll horizontal */
        margin-top: 2%;
        margin-bottom: 2%;
    }

    .footer {
        max-height: 19.28rem;
    }

    .footer_contenedor {
        padding: 2.4rem;
    }

    .logo-footer {
        width: 14.4rem;
    }

    .footer_contenedor_contenido h4 {
        font-size: 1.2rem;
        line-height: 1.6;
    }

    .footer_contenedor_contenido p {
        font-size: 1.4rem;
        line-height: 1.6;
    }

    .footer_contenedor_contenido input {
        height: 3.04rem;
        font-size: 1.6rem;
    }

    .footer_newsletter {
        width: 100%;
        display: flex;
        align-items: center;
    }

}



/*Breakpoint*/
/* Animación para entrar de izquierda a derecha */
@keyframes slideInLeft {
    0% {
        transform: translateX(-100%);
        /* Comienza fuera de la pantalla */
        opacity: 0;
        /* Invisible al inicio */
    }

    100% {
        transform: translateX(0);
        /* Llega a su posición original */
        opacity: 1;
        /* Totalmente visible */
    }
}

/* Aplica la animación al contenedor */
@keyframes slideInLeft {
    0% {
        transform: translateX(-100%);
        /* Comienza fuera de la pantalla por la izquierda */
        opacity: 0;
        /* Invisible */
    }

    100% {
        transform: translateX(0);
        /* Posición original */
        opacity: 1;
        /* Totalmente visible */
    }
}

@keyframes slideInRight {
    0% {
        transform: translateX(100%);
        /* Comienza fuera de la pantalla por la derecha */
        opacity: 0;
        /* Invisible */
    }

    100% {
        transform: translateX(0);
        /* Posición original */
        opacity: 1;
        /* Totalmente visible */
    }
}

/* Estilo inicial (antes de que se activen las animaciones) */
.desarrollo_web,
.desarrollo_movil,
.desarrollo_cientifico {
    opacity: 0;
    /* Comienza invisible */
}

/* Animación desde la izquierda */
.desarrollo_web.active {
    animation: slideInLeft 1s ease-out forwards;
}

/* Animación desde la derecha */
.desarrollo_movil.active {
    animation: slideInRight 1s ease-out forwards;
}

.desarrollo_cientifico.active {
    animation: slideInLeft 1s ease-out forwards;
    /* También puede ser slideInRight si lo prefieres */
}