@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');



body {
    background-size: cover;
    background-repeat: no-repeat;
    overflow-x: hidden;
    background-color: white;
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
    text-decoration: none;
}





/* Estilos del menú */
nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se ajusten en múltiples filas si es necesario */
    padding: 0;
    margin: 0;
}

nav ul li {
    margin-right: 30px; /* Ajusta este valor para dar más espacio entre los ítems del menú */
}

nav ul li:last-child {
    margin-right: 0;
}

nav ul li a  {
    text-decoration: none;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    transition: color 0.3s;
}


nav ul li a:hover {
    color: #d47b0d;
}



nav ul li ul.submenu {
    display: none;
    position: absolute;
    background-color:black;
    box-shadow: 0 0 10px rgba(70, 69, 69, 0.7);
    z-index: 1;
    border-radius: 10px;
    font-weight: bold;
    padding-left: 30px;
    padding-top: 10px;
}

nav ul li:hover ul.submenu {
    display: block;
}

nav ul li ul.submenu li {
    align-items: center;
    justify-content: space-between;
    padding: 5px 0px;
    display: block;
}

/* Estilo del enlace en el submenu */
nav ul li ul.submenu li a {
    width: 100%;
    color: white;
    font-size: 1rem;
    padding: 10px 10px;
    box-sizing: border-box;
    transition: background-color 0.3s ease; 
    display: block; /* Asegura que el enlace cubra el elemento li */
}

/* Estilo del efecto hover en el submenu */
nav ul li ul.submenu li a:hover {
    background-color: white;
    color: black;
    padding: 10px; /* Ajusta la altura del efecto hover aquí */
 
}



/* Opcional: añadir un margen entre los elementos del submenu */
nav ul li ul.submenu li:not(:last-child) {
    border-bottom: 3px solid rgba(70, 69, 69, 0.5);
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 20px;
    background-color: black;
    z-index: 1000;
    border-image-slice: 1;
    border-image-source: linear-gradient(90deg, #4e2b00, orange, #4e2b00);
    box-shadow: 0 10px 10px rgba(248, 246, 246, 0.377);
}

.language img {
    height: 50px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.logo img {
    height: 80px;
    border-radius: 5px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.logo img:hover, .language img:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px #d47b0d;
}

.language img {
    margin-right: 20px;
}

nav ul .contact {
    margin-left: auto; /* Empuja el ítem de contacto a la derecha */
}

nav ul .contact a {
    background: rgb(255, 255, 255);
    color: black;
    border-radius: 5px;
    padding: 10px 15px;
    transition: background 1.5s ease-out;
}

nav ul .contact a:hover {
    background: orange;
    color: black;
}


/* Estilos para el menú tipo hamburguesa */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 10px;
}


.menu-toggle div {
    background: white;
    height: 3px;
    margin: 4px;
    width: 25px;
    transition: 0.3s;
}

.navbar {
    display: flex;
}

@media (max-width: 768px) {
    header {
        flex-direction: column;
        align-items: flex-start;
    }

    .menu-toggle {
        display: flex;
    }

    nav ul {
        display: none;
        flex-direction: column;
        width: 100%;
    }

    nav ul.active {
        display: flex;
    }

    nav ul li {
        margin-right: 0;
        margin-bottom: 10px;
        text-align: center;
    }

    .contact {
        margin-left: 0;
    }
}











/* Diseño pagina principal */
.fondo-imagen {
    position: relative;
    background-image: url('imagenes/Mision.jpg');
    background-size: cover;
    background-position: center;
    height: 60vh;
    display: flex;
    align-items: center;
    padding-left: 2rem;
    animation: zoom 15s infinite;
}

/* Animación de zoom para el fondo */
@keyframes zoom {
    0% {
        background-size: 100%;
    }
    50% {
        background-size: 105%;
    }
    100% {
        background-size: 100%;
    }
}

.texto-izquierda {
    color: green;
    position: absolute;
    top: 25%; /* Ajustado para pegar al header */
    left: 2%;
    text-align: left;
    width: 90%; /* Para hacer el contenido responsivo */
    font-weight: bold;
}

.texto-izquierda h1 {
    font-size: 3rem;
}

.texto-izquierda h2 {
    font-size: 2rem;
    margin-top: 0.5rem;
}



.parrafos {
    color: orange;
    position: relative;
    max-width: 100%;
    margin-top: 3rem; /* Añadido para separar los párrafos de los títulos */
    font-size: 2rem;
}

.parrafos p {
    color: black;
    margin: 1rem 0;
    opacity: 0;
    position: absolute;
    transform: translateX(100%);
    animation: slideIn 20s infinite;
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.24);
    border-radius: 10px;
    padding: 10px;
    border-bottom: none;
}



@keyframes slideIn {
    0%, 25% {
        opacity: 0;
        transform: translateX(100%);
    }
    30%, 45% {
        opacity: 1;
        transform: translateX(0);
    }
    50%, 75% {
        opacity: 0;
        transform: translateX(-100%);
    }
    80%, 100% {
        opacity: 0;
        transform: translateX(100%);
    }
}

.parrafos .frase1 {
    animation-delay: 0;
}

.parrafos .frase2 {
    animation-delay: 5s;
}

.parrafos .frase3 {
    animation-delay: 10s;
}

.parrafos .frase4 {
    animation-delay: 15s;
}

/* Responsivo */
@media (max-width: 768px) {
    .texto-izquierda h1 {
        font-size: 2rem;
    }

    .texto-izquierda h2 {
        font-size: 1.5rem;
    }

    .parrafos p {
        font-size: 1rem;
    }
}












/*Etiquetas nuestros servicios*/
.servicios h2{
    color: white;
    text-align: center;
    font-size: 2rem;
    margin-top: 0rem;
    background-color: green;
    padding: 8px;
    margin-bottom: 0px;
}


.etiqueta1 div{
    color: black;
    font-weight: bold;
    text-align: center;
    margin-top: 1rem;
}


.etiquetas-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-image: url('imagenes/FondoPrincip.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    box-sizing: border-box;
    height: 1%;
    min-height: 100%;
    padding: 25vh;
    padding-left: 0;
    padding-right: 0;
}


.etiqueta1 {
    background-color: rgba(255, 166, 0, 0.336);
    margin: 20px;
    padding: 20px;
    box-shadow: 0 4px 8px black;
    transition: box-shadow 0.3s;
    width: 20%;
    height: 100%;
    transition: transform 0.3s, box-shadow 0.3s;
}


.etiqueta1:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 25px white;
}

.etiqueta1 img{
    width: 100%;
    height: auto;
    display: block; 
}

.etiqueta1 button {
    margin-top: 10px;
    background-color: black;
    color: white;
    font-weight: bold;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    text-align: center;
    width: 100%; /* Hace que el botón sea del ancho completo */
    box-sizing: border-box; /
}

.etiqueta1 button:hover {
    background-color: orange;
    color: white;
}

/* Responsivo */
@media (max-width: 768px) {
    .etiquetas-container, .etiquetas-boletines, .etiquetas-empresas {
        flex-direction: column;
        align-items: center;
    }

    .etiqueta1 {
        width: 100%; /* Hace que cada etiqueta ocupe el ancho completo en pantallas pequeñas */
    }
}






/*Etiquetas boletines*/
.boletines h2{
    color: white;
    text-align: center;
    font-size: 2rem;
    margin-top: 0rem;
    background-color: rgb(0, 0, 0);
    padding: 8px;
    margin-bottom: 0px;
}

.etiqueta2 div{
    color: white;
    text-align: center;
    margin-top: 1rem;
    font-weight: bold; 
}



.etiquetas-boletines{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-image: url('imagenes/GestionRiesgos.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    box-sizing: border-box;
    height: 1%;
    min-height: 100%;
    padding: 25vh;
    padding-left: 0;
    padding-right: 0;
}




.etiqueta2 {
    background-color: rgba(48, 47, 47, 0.548);
    margin: 20px;
    padding: 20px;
    box-shadow: 0 4px 8px black;
    transition: box-shadow 0.3s;
    width: 30%;
    height: 100%;
    border-radius: 40%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.etiqueta2:hover{
    transform: scale(1.1);
    box-shadow: 0 15px 25px white;
}

.etiqueta2 img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 50%;
}



.etiqueta2 button {
    display: block; /* Hace que el botón se comporte como un bloque */
    margin: 10px auto 0 auto; /* Centra el botón horizontalmente y añade un margen superior */
    background-color: black;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    text-align: center;
    width: 35%; /* Ajusta el ancho del botón al 50% del contenedor */
    box-sizing: border-box;
    border-radius: 40%;
    font-size: 1rem;

}

.etiqueta2 button:hover {
    background-color: orange;
    color: black;
}



/* Responsivo */
@media (max-width: 768px) {
    .etiquetas-boletines {
        flex-direction: column;
        align-items: center;
    }

    .etiqueta2 {
        width: 100%; /* Hace que cada etiqueta ocupe el ancho completo en pantallas pequeñas */
    }
}






/*Etiquetas empresas*/
.clientes h2{
    color: white;
    text-align: center;
    font-size: 2rem;
    margin-top: 0rem;
    background-color: orange;
    padding: 8px;
}


.etiquetas-empresas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 80px; /* Espacio entre las tarjetas */
    padding: 35px; /* Espacio alrededor del contenedor */
    box-sizing: border-box;
}

.empresa {
    background-color: orange;
    padding: 5px; /* Ajustado para mejor apariencia */
    border-radius: 10px;
    box-shadow: 0 4px 8px black;
    transition: box-shadow 0.3s;
    width: calc(10% - 25px); /* Aproximadamente un tercio del contenedor menos el espacio entre tarjetas */
    box-sizing: border-box;
    text-align: center; /* Centrar contenido dentro de la tarjeta */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.empresa:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 20px orange;
}

.empresa img {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    display: block;
}

/* Responsivo */
@media (max-width: 768px) {
    .etiquetas-empresas {
        flex-direction: column;
        align-items: center;
    }

    .empresa {
        width: 100%; /* Hace que cada etiqueta ocupe el ancho completo en pantallas pequeñas */
    }
}






.boton-whatsapp {
    position: fixed;
    bottom: 2rem;
    margin-left: 2rem;
    z-index: 1000;
    background-color: green;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px green;
    transition: background-color 0.3s, box-shadow 0.3s;
}



.boton-whatsapp a {
    color: white;
    font-size: 2rem;
    display: flex;
    align-items: center;
    text-decoration: none;
    position: relative;
}

.boton-whatsapp i {
    font-size: 3.5rem;
}

.boton-whatsapp span {
    position: absolute;
    top: 4rem; /* Ajusta este valor para colocar el texto en la posición deseada */
    left: 50%;
    transform: translateX(-50%);
    background-color: green;
    color: green;
    padding: 0.3rem  1rem;
    border-radius: 50px;
    font-size: 1.8rem;
    transition: background-color 0.3s, box-shadow 0.3s;
}


.boton-whatsapp span:hover {
    background-color: #25d366;
    box-shadow: 0 8px 16px rgba(255, 255, 255, 0.5), 0 8px 16px rgba(0, 0, 0, 0.3);

}

.boton-whatsapp:hover {
    background-color: #25d366;
    box-shadow: 0 8px 16px rgba(255, 255, 255, 0.5), 0 8px 16px rgba(0, 0, 0, 0.3);
  
}





/* Diseño de los inconos del submenu */
nav ul li ul.submenu li:last-child a i {
    color: white; /* Cambia el color de los iconos */
    transition: all 0.10ms;
    font-size: 20px;
    border-radius: 5px;
}

nav ul li ul.submenu li.social-icons a:hover {
    background-color: black;
}


nav ul li ul.submenu li:last-child a i:hover{
    color: rgb(107, 107, 175); /* Cambia el color de los iconos a azul */
}


.social-icons {
    text-align: flex;
}









/* Estilo para quienes somos */
.quienes_somos h2 {
    margin-top: 0rem;
    text-align: center;
    padding: 0; /* Ajuste del padding para mayor flexibilidad en dispositivos más pequeños */
}

.quienes-somos-body main {
    padding-top: 5rem; /* Margen para dejar espacio para el header */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}


.quienes-somos-body {
    background-color: #000;
}





/* Estilo para la sección "¿Quiénes somos?" */
.contenido-quienes-somos {
    background-image: url(imagenes/fondo1.png);
    background-repeat: no-repeat;
    background-size: contain; /* Asegura que la imagen se ajuste dentro del contenedor sin distorsionarse */
    background-position: center center; /* Centra la imagen tanto vertical como horizontalmente */
    background-attachment: fixed; /* Fija la imagen de fondo para que no se desplace con el contenido */
    height: 160vh; /* La altura cubre toda la ventana */
    padding: 15rem;
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: center; /* Alinea los elementos al centro verticalmente */
    font-family: 'Poppins', sans-serif;
    animation: zoom 40s infinite;
}


/* Media Query para dispositivos pequeños */
@media (max-width: 768px) {
    .body#revisoria-fiscal-y-auditoria-body main  {
        background-size: cover; /* Asegura que la imagen cubra todo el fondo en pantallas pequeñas */
        padding-top: 200px; /* Ajusta el padding superior */
    }

}



/* Contenedor para cada párrafo con imagen de fondo */
.parrafo-container {
    background-size: cover; /* Asegura que la imagen cubra todo el fondo */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita la repetición de la imagen */
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s, box-shadow 0.3s;
    padding: 15px;
    width: calc(50% - 20px); /* Ancho calculado para 2 columnas con espacio entre ellas */
    max-width: 100%; /* Limita el ancho máximo */
    min-width: 100%; /* Asegura que el contenedor ocupe todo el ancho */
    background-color: black;
    margin-top: 5rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.884);
}

/* Efecto de hover para alto relieve */
.parrafo-container:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 10px 10px rgba(240, 237, 237, 0.884);
}

/* Contenedor interno para el texto */
.parrafo-content {
    background-image: url(imagenes/fondo1.png);
    background-repeat: no-repeat;
    background-size: cover; /* Asegura que la imagen cubra toda la etiqueta */
    background-position: center; /* Centra la imagen */
    padding: 35px;
    border-radius: 10px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    box-shadow: 0px 15px 15px #000;
    width: 100%; /* Asegura que el contenedor interno ocupe todo el ancho del parrafo-container */
    height: 100%; /* Asegura que el contenedor interno ocupe toda la altura del parrafo-container */
    margin: 0; /* Elimina el margen superior para ajustar el contenido */
}


/* Responsivo */
@media (max-width: 768px) {
    .parrafo-container {
        width: 100%; /* Hace que las etiquetas ocupen el ancho completo en pantallas pequeñas */
    }
    .quienes_somos h2 {
        padding: 2rem; /* Ajuste del padding para dispositivos más pequeños */
        margin-top: 3rem; /* Ajuste del margin-top para dispositivos más pequeños */
    }
    .contenido-quienes-somos {
        padding: 5%; /* Ajuste del padding para dispositivos más pequeños */
        flex-direction: column; /* Cambia a columna en pantallas pequeñas */
    }
}


















/* Estilos para la página nuestro_equipo.html*/

/* Estilo para el cuerpo (body) con imagen de fondo */
#nuestro-equipo-body main {
    background-size: cover; /* Asegura que la imagen cubra todo el fondo */
    background-position: center; /* Centra la imagen en el fondo */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-color: rgba(255, 166, 0, 0.336);
    min-height: 100vh; /* Asegura que la altura mínima sea igual a la altura de la ventana */
    padding-top: 600px; /* Ajusta el espacio superior del contenido principal para evitar que se pegue a la cabecera */
    display: flex; /* Utiliza flexbox para el diseño */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en varias líneas */
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: flex-start; /* Alinea los elementos al principio del eje vertical */
    font-family: 'Poppins', sans-serif;
    padding: 1rem;
    margin-top: 8rem;
}

/* Estilos para asegurar que la imagen de fondo se centre correctamente */
@media (max-width: 1024px) {
    #nuestro-equipo-body main {
        background-size: contain; /* Asegura que la imagen se ajuste dentro del contenedor sin cortarse */
    }
}


/* Estilos para el título */
.main-titulo {
    text-align: center;
    color: black;
    margin-top: 1rem;
    transition: color 0.3s ease; /* Transición para efecto hover */
    font-size: 3rem; /* Tamaño de fuente */
}

.main-titulo:hover {
    color: #d47b0d; /* Cambio de color al pasar el cursor */
}

/* Estilos para cada miembro del equipo */
.equipo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2rem;
}


.miembro {
    background-size: cover; /* Asegura que la imagen cubra todo el fondo */
    background-position: center; /* Centra la imagen en el fondo */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-image: url(imagenes/fondo1.png);
    cursor: pointer;
    margin: 1.5rem;
    text-align: center;
    box-shadow: 0 15px 20px rgba(146, 141, 141, 0.226); /* Sombra suave */
    transition: transform 0.3s, box-shadow 0.3s;
    margin-top: 2rem;
    border-radius: 10px;
    padding: 2rem;
    height: 100%;
    width: 10rem;
}

.miembro:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px black; /* Sombra más pronunciada */
    background-color: rgba(128, 128, 128, 0.158);
}

/* Estilos para el título de cada miembro */
.miembro h3 {
    color: black;
    font-size: 1.5rem;
    transition: transform 0.10s ease;
    cursor: pointer;
    margin-top: 1rem;
}

.miembro h3:hover {
    color: white;
}

/* Estilos para el párrafo de cada miembro */
.miembro p {
    color: black;
    text-align: justify;
    font-size: 1rem;
    margin-top: 2rem;
}

.miembro p:hover {
    color: white;
}

.miembro img{
    width: 70%;
    border-radius: 10px;
}

/* Media Queries para responsividad */

/* Estilos para pantallas pequeñas (móviles) */
@media (max-width: 600px) {
    #nuestro-equipo-body main {
        padding-top: 300px; /* Ajusta el espacio superior */
    }

    .main-titulo {
        font-size: 2rem; /* Tamaño de fuente reducido para móviles */
    }

    .miembro {
        width: 90%; /* Ocupa casi todo el ancho de la pantalla */
        margin: 1rem 0.5rem; /* Márgenes más pequeños */
        padding: 1rem; /* Reducción del padding */
    }

    .miembro img {
        height: 20rem; /* Reduce la altura de las imágenes */
    }

    .miembro h3 {
        font-size: 1.2rem; /* Tamaño de fuente reducido para el título */
    }

    .miembro p {
        font-size: 0.9rem; /* Tamaño de fuente reducido para el párrafo */
    }
}

/* Estilos para pantallas medianas (tabletas) */
@media (min-width: 601px) and (max-width: 1024px) {
    .main-titulo {
        font-size: 2.5rem; /* Tamaño de fuente ajustado para tabletas */
    }

    .miembro {
        width: 80%; /* Ancho adaptado para tabletas */
        margin: 1.5rem; /* Márgenes ajustados */
    }

    .miembro img {
        height: 25rem; /* Ajusta la altura de las imágenes */
    }

    .miembro h3 {
        font-size: 1.4rem; /* Tamaño de fuente ajustado */
    }

    .miembro p {
        font-size: 1rem; /* Mantén el tamaño de fuente */
    }
}

/* Estilos para pantallas grandes (desktops) */
@media (min-width: 1025px) {
    .main-titulo {
        font-size: 3rem; /* Tamaño de fuente original */
    }

    .miembro {
        width: 35rem; /* Ancho original para pantallas grandes */
    }

    .miembro img {
        height: 30rem; /* Altura original de las imágenes */
    }
}









/* Estilos para el menu principal misión */

/* Estilos para el contenedor de la misión */
.mision-container {
    background-image: url(imagenes/fondo1.png);
    background-repeat: no-repeat;
    background-size: contain; /* Asegura que la imagen se ajuste dentro del contenedor sin distorsionarse */
    background-position: center center; /* Centra la imagen tanto vertical como horizontalmente */
    background-attachment: fixed; /* Fija la imagen de fondo para que no se desplace con el contenido */
    height: 120vh; /* La altura cubre toda la ventana */
    display: flex; /* Utiliza flexbox para el diseño */
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: center; /* Alinea los elementos al centro verticalmente */
    font-family: 'Poppins', sans-serif;
    animation: zoom 40s infinite;
}

/* Media Query para dispositivos pequeños */
@media (max-width: 768px) {
    .mision-container {
        background-size: cover; /* Asegura que la imagen cubra todo el fondo en pantallas pequeñas */
        padding-top: 200px; /* Ajusta el padding superior */
    }
}

/* Animación de zoom para el fondo */
@keyframes zoom {
    0% {
        background-size: 100%;
    }
    50% {
        background-size: 105%;
    }
    100% {
        background-size: 100%;
    }
}


/* Estilos para el contenido de la misión */
.mision-content {
    max-width: 50rem;
    padding: 4rem;
    background-image: url(imagenes/fondo1.png);
    background-repeat: no-repeat;
    background-size: contain; /* Asegura que la imagen se ajuste dentro del contenedor sin distorsionarse */
    background-position: center center; /* Centra la imagen tanto vertical como horizontalmente */
    background-attachment: fixed; /* Fija la imagen de fondo para que no se desplace con el contenido */
    text-align: center;
    border-radius: 10px;  
}

/* Estilos para el título h2 */
.mision-content h2 {
    color: black;
    font-size: 4rem; /* Tamaño de fuente */
}

/* Estilos para los subtítulos h4 */
.mision-content h4 {
    color:   black;
    font-size: 2rem;
    text-align: justify;
    margin-top: 40px;
}

/* Estilos para el párrafo */
.mision-content p {
    color:  black;
    font-size: 1rem;
    text-align: justify;
    margin-top: 40px;
}


#mision-body main{
    background-color: black;
    height: 100%;

}











/* Estilos específicos para la página vision.html */
/* Estilos para el contenedor de la visión */
.vision-container {
    background-image: url(imagenes/fondo1.png);
    background-repeat: no-repeat;
    background-size: contain; /* Asegura que la imagen se ajuste dentro del contenedor sin distorsionarse */
    background-position: center center; /* Centra la imagen tanto vertical como horizontalmente */
    background-attachment: fixed; /* Fija la imagen de fondo para que no se desplace con el contenido */
    height: 120vh; /* La altura cubre toda la ventana */
    display: flex; /* Utiliza flexbox para el diseño */
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: center; /* Alinea los elementos al centro verticalmente */
    font-family: 'Poppins', sans-serif;
    animation: zoom 40s infinite;
}

/* Media Query para dispositivos pequeños */
@media (max-width: 768px) {
    .mision-container {
        background-size: cover; /* Asegura que la imagen cubra todo el fondo en pantallas pequeñas */
        padding-top: 200px; /* Ajusta el padding superior */
    }

}



/* Estilos para el contenedor de la visión */
.vision-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 130vh;
}

/* Estilos para el contenido de la visión */
.vision-content {
    max-width: 50rem;
    padding: 4rem;
    background-image: url(imagenes/fondo1.png);
    background-repeat: no-repeat;
    background-size: contain; /* Asegura que la imagen se ajuste dentro del contenedor sin distorsionarse */
    background-position: center center; /* Centra la imagen tanto vertical como horizontalmente */
    background-attachment: fixed; /* Fija la imagen de fondo para que no se desplace con el contenido */
    text-align: center;
    border-radius: 10px;  
}

/* Estilos para el título h2 */
.vision-content h2 {
    font-size: 4rem;
    color: black;
}

/* Estilos para el subtítulo h4 */
.vision-content h4 {
    font-size: 2rem;
    color:black;
    text-align: justify;
    margin-top: 40px;
}



/* Estilos para los párrafos */
.vision-content p {
    font-size: 1rem;
    color:black;
    text-align: justify;
    margin: 30px 0;
    display:flex;
    align-items: center;
  
}

/* Estilos para los íconos */
.vision-content i {
    color: black;
    margin-right: 9px;
    margin-top: -71px;
}



.vision-content i.espetial {
    color: black;
    margin-top: -21px;
}

.vision-content i.espetial1 {
    color: black;
    margin-top: -45px;
}



#vision-body main{
    background-color: black;
    height: 100%;
}


.vision-content ul {
    list-style-type: none; /* Elimina los puntos de las listas */
    padding-left: 0; /* Elimina el padding predeterminado de la lista */
}









/* Estilos pagina Revisoria fiscal y auditoria */
.contenido-previo {
    text-align: justify;
    margin-bottom: 3rem;
}

.contenido-previo h2 {
    color: black;
    font-size: 3rem;
    margin-bottom: 5rem;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    margin-top: 2rem;
}

.contenido-previo p {
    color: black;
    font-size: 1.5rem;
    line-height: 2;
    text-align: justify;
    font-family: 'Poppins', sans-serif;
}




/* Contenedor del pie de pagina */
body#revisoria-fiscal-y-auditoria-body main {
    background-image: url(imagenes/fondo1.png);
    background-repeat: no-repeat;
    background-size: contain; /* Asegura que la imagen se ajuste dentro del contenedor sin distorsionarse */
    background-position: center center; /* Centra la imagen tanto vertical como horizontalmente */
    background-attachment: fixed; /* Fija la imagen de fondo para que no se desplace con el contenido */
    height: 200vh; /* La altura cubre toda la ventana */
    padding: 15rem;
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: center; /* Alinea los elementos al centro verticalmente */
    font-family: 'Poppins', sans-serif;
    animation: zoom 40s infinite;
}


/* Media Query para dispositivos pequeños */
@media (max-width: 768px) {
    .body#revisoria-fiscal-y-auditoria-body main  {
        background-size: cover; /* Asegura que la imagen cubra todo el fondo en pantallas pequeñas */
        padding-top: 200px; /* Ajusta el padding superior */
    }

}



.image-container {
    height: 100%;
    background-image: url('imagenes/RevisoriaFiscal.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

body#revisoria-fiscal-y-auditoria-body .contenido-previo {
    margin-bottom: 100px;
}

body#revisoria-fiscal-y-auditoria-body .imagen-formulario {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    border-radius: 20px;
}

body#revisoria-fiscal-y-auditoria-body .imagen-formulario img {
    width: 4%;
    border-radius: 10px;
    margin-right: 20px;
}

body#revisoria-fiscal-y-auditoria-body .imagen-formulario form {
    background-image: url(imagenes/fondo1.png);
    background-repeat: no-repeat;
    background-size: contain; /* Asegura que la imagen se ajuste dentro del contenedor sin distorsionarse */
    background-position: center center; /* Centra la imagen tanto vertical como horizontalmente */
    background-attachment: fixed; /* Fija la imagen de fondo para que no se desplace con el contenido */
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    margin-top: 1px;
    box-shadow: 0px 15px 15px #000;
    width: 53vw; /* Ajusta el tamaño del formulario a un porcentaje del ancho de la vista */
    max-width: 53rem; /* Limita el ancho máximo del formulario */
    margin: 0 auto; /* Centra el formulario horizontalmente */
}



body#revisoria-fiscal-y-auditoria-body .imagen-formulario form textarea:focus {
    background-color: white;
}


body#revisoria-fiscal-y-auditoria-body .input-container {
    margin-bottom: 20px;
}

body#revisoria-fiscal-y-auditoria-body .input-container input[type="text"],
body#revisoria-fiscal-y-auditoria-body .input-container input[type="email"],
body#revisoria-fiscal-y-auditoria-body .input-container input[type="tel"],
body#revisoria-fiscal-y-auditoria-body .input-container textarea,
body#revisoria-fiscal-y-auditoria-body .input-container label {
    display: block;
}

body#revisoria-fiscal-y-auditoria-body .input-container label {
    margin-bottom: 5px;
}

body#revisoria-fiscal-y-auditoria-body .input-container input[type="text"],
body#revisoria-fiscal-y-auditoria-body .input-container input[type="email"],
body#revisoria-fiscal-y-auditoria-body .input-container input[type="tel"],
body#revisoria-fiscal-y-auditoria-body .input-container textarea {
    width: 100%; /* Asegura que los elementos ocupen el ancho completo del contenedor */
    padding: 15px;
    border: none;
    border-radius: 5px;
    box-sizing: border-box;
    margin-top: 15px;
    background-color: rgba(0, 0, 0, 0.281);
    font-size: 1rem;
}

body#revisoria-fiscal-y-auditoria-body .input-container textarea {
    resize: vertical;
}

body#revisoria-fiscal-y-auditoria-body .input-container input[type="checkbox"] {
    margin-bottom: 1rem; /* Espacio entre el checkbox y el texto */
    height: 20px;
    width: 20px;
    display: inline-flex; /* Alinea el checkbox dentro de su contenedor */
    align-items: center; /* Centra el checkbox verticalmente */
}

.imagen-formulario button {
    background-color: #016666;
    color: #ffffff;
}

/* Media Queries para hacer el diseño responsivo */
@media only screen and (max-width: 1200px) {
    .contenido-previo h2 {
        font-size: 3rem;
    }
    
    .contenido-previo p {
        font-size: 1.5rem;
    }
    
    body#revisoria-fiscal-y-auditoria-body main {
        padding: 10%;
    }

    body#revisoria-fiscal-y-auditoria-body .imagen-formulario img {
        width: 10%;
        height: auto;
    }
    
    body#revisoria-fiscal-y-auditoria-body .imagen-formulario form {
        width: 80%;
    }
}

@media only screen and (max-width: 768px) {
    .contenido-previo h2 {
        font-size: 2.5rem;
    }
    
    .contenido-previo p {
        font-size: 1.2rem;
    }

    body#revisoria-fiscal-y-auditoria-body main {
        padding: 5%;
    }

    body#revisoria-fiscal-y-auditoria-body .imagen-formulario {
        flex-direction: column;
        align-items: center;
    }

    body#revisoria-fiscal-y-auditoria-body .imagen-formulario img {
        width: 80%;
        height: auto;
        margin-right: 0;
        margin-bottom: 20px;
    }
    
    body#revisoria-fiscal-y-auditoria-body .imagen-formulario form {
        width: 90%;
    }
}

@media only screen and (max-width: 480px) {
    .contenido-previo h2 {
        font-size: 2rem;
    }
    
    .contenido-previo p {
        font-size: 1rem;
    }

    body#revisoria-fiscal-y-auditoria-body .imagen-formulario form {
        font-size: 20px;
        padding: 20px;
    }

    body#revisoria-fiscal-y-auditoria-body .input-container input[type="text"],
    body#revisoria-fiscal-y-auditoria-body .input-container input[type="email"],
    body#revisoria-fiscal-y-auditoria-body .input-container input[type="tel"],
    body#revisoria-fiscal-y-auditoria-body .input-container textarea {
        font-size: 20px;
        padding: 15px;
    }

    body#revisoria-fiscal-y-auditoria-body .input-container input[type="checkbox"] {
        height: 50px;
        width: 20px;
    }
}









/* Estilos para la página Outsourcing Contable */
/* Estilos generales para el contenido previo */
body#Outsourcing-Contable-body .contenido-previo {
    text-align: justify; /* Alineación del texto */
    margin-bottom: 3rem; /* Espacio inferior */
}

/* Tamaño de fuente del título */
body#Outsourcing-Contable-body .contenido-previo h2 {
    color: black;
    font-size: 3rem;
    margin-bottom: 5rem;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    margin-top: 2rem;
}

/* Tamaño de fuente del texto */
body#Outsourcing-Contable-body .contenido-previo p {
    color: black;
    font-size: 1.5rem;
    line-height: 2;
    text-align: justify;
    font-family: 'Poppins', sans-serif;
}

/* Estilos para el cuerpo principal */
body#Outsourcing-Contable-body main {
    background-image: url(imagenes/fondo1.png);
    background-repeat: no-repeat;
    background-size: cover; /* Ajuste de la imagen de fondo */
    background-position: center center;
    background-attachment: fixed; /* Fija la imagen de fondo */
    height: 200vh; /* Ajusta la altura para pantallas */
    padding: 15rem;
    justify-content: center;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    animation: zoom 40s infinite;
}

/* Media Queries para dispositivos pequeños */
@media (max-width: 768px) {
    body#Outsourcing-Contable-body main {
        padding: 2rem; /* Ajusta el padding para pantallas pequeñas */
    }

    body#Outsourcing-Contable-body .contenido-previo h2 {
        font-size: 2rem; /* Ajusta el tamaño del título en pantallas pequeñas */
        margin-bottom: 3rem;
    }

    body#Outsourcing-Contable-body .contenido-previo p {
        font-size: 1.2rem; /* Ajusta el tamaño del texto en pantallas pequeñas */
        line-height: 1.5;
    }

    body#Outsourcing-Contable-body .imagen-formulario img {
        width: 50%; /* Ajusta el tamaño de la imagen en pantallas pequeñas */
        height: auto;
    }

    body#Outsourcing-Contable-body .imagen-formulario form {
        font-size: 0.8rem; /* Ajusta el tamaño de fuente en pantallas pequeñas */
        padding: 20px;
    }

    body#Outsourcing-Contable-body .input-container input[type="text"],
    body#Outsourcing-Contable-body .input-container input[type="email"],
    body#Outsourcing-Contable-body .input-container input[type="tel"],
    body#Outsourcing-Contable-body .input-container textarea {
        font-size: 0.8rem; /* Ajusta el tamaño de los inputs en pantallas pequeñas */
        padding: 10px;
    }
}


/* Estilos para el contenedor de la imagen y el formulario */
body#Outsourcing-Contable-body .imagen-formulario {
    display: flex;
    flex-direction: column; /* Cambia a columna en pantallas pequeñas */
    justify-content: center;
    align-items: center;
    width: 100%;
    border-radius: 20px;
}

/* Estilos para la imagen */
body#Outsourcing-Contable-body .imagen-formulario img {
    width: 100%; /* Ajuste del ancho de la imagen */
    height: auto;
    border-radius: 10px;
    margin-bottom: 20px; /* Espacio entre la imagen y el formulario */
}

/* Estilos para el formulario */
body#Outsourcing-Contable-body .imagen-formulario form {
    background-image: url(imagenes/fondo1.png);
    background-repeat: no-repeat;
    background-size: contain; /* Asegura que la imagen se ajuste dentro del contenedor sin distorsionarse */
    background-position: center center; /* Centra la imagen tanto vertical como horizontalmente */
    background-attachment: fixed; /* Fija la imagen de fondo para que no se desplace con el contenido */
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    margin-top: 1px;
    box-shadow: 0px 15px 15px #000;
    width: 53vw; /* Ajusta el tamaño del formulario a un porcentaje del ancho de la vista */
    max-width: 53rem; /* Limita el ancho máximo del formulario */
    margin: 0 auto; /* Centra el formulario horizontalmente */
}



body#Outsourcing-Contable-body .imagen-formulario form textarea:focus {
    background-color: white;
}

/* Estilos para los inputs y labels */
body#Outsourcing-Contable-body .input-container {
    margin-bottom: 20px;
}



body#Outsourcing-Contable-body .input-container input[type="text"],
body#Outsourcing-Contable-body .input-container input[type="email"],
body#Outsourcing-Contable-body .input-container input[type="tel"],
body#Outsourcing-Contable-body .input-container textarea,
body#Outsourcing-Contable-body .input-container label {
    display: block;
    margin-bottom: 5px;
}



body#Outsourcing-Contable-body .input-container input[type="text"],
body#Outsourcing-Contable-body .input-container input[type="email"],
body#Outsourcing-Contable-body .input-container input[type="tel"],
body#Outsourcing-Contable-body .input-container textarea {
    width: 100%; /* Asegura que los elementos ocupen el ancho completo del contenedor */
    padding: 15px;
    border: none;
    border-radius: 5px;
    box-sizing: border-box;
    margin-top: 15px;
    background-color: rgba(0, 0, 0, 0.281);
    font-size: 1rem;
}

body#Outsourcing-Contable-body .input-container textarea {
    resize: vertical;
}

body#Outsourcing-Contable-body .input-container input[type="checkbox"] {
    margin-bottom: 0rem; /* Espacio entre el checkbox y el texto */
    height: 20px;
    width: 20px;
    display: inline-flex; /* Alinea el checkbox dentro de su contenedor */
    align-items: center; /* Centra el checkbox verticalmente */
}

/* Estilos para el botón */
.imagen-formulario button {
    background-color: #016666;
    color: #ffffff;
}
















/* Estilos pestaña NIIF para PIMES */

/* Estilos generales para el contenido previo */
body#NIIF-body .contenido-previo {
    text-align: justify; /* Alineación del texto */
    margin-bottom: 3rem;
}

/* Diseño del título */
body#NIIF-body .contenido-previo h2 {
    color: black;
    font-size: 3rem;
    margin-bottom: 5rem;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    margin-top: 2rem;
}

/* Diseño del texto */
body#NIIF-body .contenido-previo p {
    color: black;
    font-size: 1.5rem;
    line-height: 2;
    text-align: justify;
    font-family: 'Poppins', sans-serif;
}

/* Estilos para el cuerpo principal */
body#NIIF-body main {
    background-image: url(imagenes/fondo1.png);
    background-repeat: no-repeat;
    background-size: contain; /* Asegura que la imagen se ajuste dentro del contenedor sin distorsionarse */
    background-position: center center; /* Centra la imagen tanto vertical como horizontalmente */
    background-attachment: fixed; /* Fija la imagen de fondo para que no se desplace con el contenido */
    height: 200vh; /* La altura cubre toda la ventana */
    padding: 15rem;
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: center; /* Alinea los elementos al centro verticalmente */
    font-family: 'Poppins', sans-serif;
    animation: zoom 40s infinite;
}

/* Media Query para dispositivos pequeños */
@media (max-width: 768px) {
    body#NIIF-body main  {
        background-size: cover; /* Asegura que la imagen cubra todo el fondo en pantallas pequeñas */
        padding-top: 200px; /* Ajusta el padding superior */
    }

}


/* Contenedor de la imagen */
.image-container {
    width: 100%; /* Cubre el ancho completo */
    height: 40vh; /* Altura ajustable */
    background-image: url('imagenes/RevisoriaFiscal.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* Espaciado del formulario con el texto */
body#NIIF-body .contenido-previo {
    margin-bottom: 100px;
}

/* Estilos para el contenedor de la imagen y el formulario */
body#NIIF-body .imagen-formulario {
    display: flex;
    flex-direction: row; /* Cambia a columna en pantallas pequeñas */
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    border-radius: 20px;
}

/* Estilos para la imagen */
body#NIIF-body .imagen-formulario img {
    width: 30%; /* Ajuste del ancho de la imagen */
    height: auto; /* Mantén la proporción */
    border-radius: 10px;
    margin-right: 20px; /* Espacio entre la imagen y el formulario */
}

/* Estilos para el formulario */
body#NIIF-body .imagen-formulario form {
    background-image: url(imagenes/fondo1.png);
    background-repeat: no-repeat;
    background-size: contain; /* Asegura que la imagen se ajuste dentro del contenedor sin distorsionarse */
    background-position: center center; /* Centra la imagen tanto vertical como horizontalmente */
    background-attachment: fixed; /* Fija la imagen de fondo para que no se desplace con el contenido */
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    margin-top: 1px;
    box-shadow: 0px 15px 15px #000;
    width: 53vw; /* Ajusta el tamaño del formulario a un porcentaje del ancho de la vista */
    max-width: 53rem; /* Limita el ancho máximo del formulario */
    margin: 0 auto; /* Centra el formulario horizontalmente */
}


body#NIIF-body .imagen-formulario form textarea:focus {
    background-color: white;
}


/* Estilos para los inputs y labels */
body#NIIF-body .input-container {
    margin-bottom: 20px;
}

body#NIIF-body .input-container input[type="text"],
body#NIIF-body .input-container input[type="email"],
body#NIIF-body .input-container input[type="tel"],
body#NIIF-body .input-container textarea,
body#NIIF-body .input-container label {
    display: block;
    margin-bottom: 5px;
}


body#NIIF-body .input-container input[type="text"],
body#NIIF-body .input-container input[type="email"],
body#NIIF-body .input-container input[type="tel"],
body#NIIF-body .input-container textarea {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 10px;
    box-sizing: border-box;
    margin-top: 15px;
    background-color: rgba(0, 0, 0, 0.281);
    font-size: 1rem;
}

body#NIIF-body .input-container textarea {
    resize: vertical;
}

body#NIIF-body .input-container input[type="checkbox"] {
    margin-bottom: 1rem; /* Espacio entre el checkbox y el texto */
    height: 20px;
    width: 20px;
    display: inline-flex; /* Alinea el checkbox dentro de su contenedor */
    align-items: center; /* Centra el checkbox verticalmente */
}

/* Estilos para el botón */
.imagen-formulario button {
    background-color: #016666;
    color: #ffffff;
}

/* Media Queries para dispositivos pequeños */
@media (max-width: 768px) {
    body#NIIF-body .contenido-previo h2 {
        font-size: 2.5rem; /* Ajusta el tamaño del título en pantallas pequeñas */
        margin-bottom: 4rem;
    }

    body#NIIF-body .contenido-previo p {
        font-size: 1.5rem; /* Ajusta el tamaño del texto en pantallas pequeñas */
        line-height: 1.5;
    }

    body#NIIF-body .imagen-formulario {
        flex-direction: column; /* Cambia la dirección a columna en pantallas pequeñas */
    }

    body#NIIF-body .imagen-formulario img {
        width: 80%; /* Ajusta el tamaño de la imagen en pantallas pequeñas */
        margin-bottom: 20px; /* Espacio inferior */
    }

    body#NIIF-body .imagen-formulario form {
        width: 100%; /* Ajusta el ancho del formulario */
        font-size: 1.2rem; /* Tamaño de fuente ajustado para pantallas pequeñas */
    }

    body#NIIF-body .input-container input[type="text"],
    body#NIIF-body .input-container input[type="email"],
    body#NIIF-body .input-container input[type="tel"],
    body#NIIF-body .input-container textarea {
        font-size: 1rem; /* Ajusta el tamaño de los inputs */
        padding: 10px;
    }
}













/* Estilos Devolucion de saldos a favor de la DIAN */
body#Devolucion-saldos-body .contenido-previo {
    text-align: justify; 
    margin-bottom: 3rem;
}

/* Estilos Para el titulo */
body#Devolucion-saldos-body .contenido-previo h2 {
    color: black;
    font-size: 3rem;
    margin-bottom: 5rem;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    margin-top: 2rem;
}

body#Devolucion-saldos-body .contenido-previo h3 {
    color: black;
    font-size: 3rem;
    margin-bottom: 5rem;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    margin-top: 2rem;
}

/* Estilos Para el texto */
body#Devolucion-saldos-body .contenido-previo p {
    color: black;
    font-size: 1.5rem;
    line-height: 2;
    text-align: justify;
    font-family: 'Poppins', sans-serif;
}

/* Estilos para el contenedor pie de pagina principal */
body#Devolucion-saldos-body main {
    background-image: url(imagenes/fondo1.png);
    background-repeat: no-repeat;
    background-size: contain; /* Asegura que la imagen se ajuste dentro del contenedor sin distorsionarse */
    background-position: center center; /* Centra la imagen tanto vertical como horizontalmente */
    background-attachment: fixed; /* Fija la imagen de fondo para que no se desplace con el contenido */
    height: 200vh; /* La altura cubre toda la ventana */
    padding: 15rem;
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: center; /* Alinea los elementos al centro verticalmente */
    font-family: 'Poppins', sans-serif;
    animation: zoom 40s infinite;
}



/* Media Query para dispositivos pequeños */
@media (max-width: 768px) {
    body#Devolucion-saldos-body main  {
        background-size: cover; /* Asegura que la imagen cubra todo el fondo en pantallas pequeñas */
        padding-top: 200px; /* Ajusta el padding superior */
    }

}

/* Espaciado entre el formulario y el texto */
body#Devolucion-saldos-body .contenido-previo {
    margin-bottom: 100px;
}

/* Estilos para la imagen */
.image-container {
    width: 100%;
    height: 40vh;
    background-image: url('imagenes/RevisoriaFiscal.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* Estilos para el contenedor de la imagen y el formulario */
body#Devolucion-saldos-body .imagen-formulario {
    display: flex; 
    flex-direction: column; /* Cambiamos a columna por defecto */
    justify-content: center;
    align-items: center;
    width: 100%;
    border-radius: 20px;
}

/* Estilos para la imagen */
body#Devolucion-saldos-body .imagen-formulario img {
    width: 100%; /* Ajustamos el ancho de la imagen */
    max-width: 200px; /* Limita el tamaño máximo */
    height: auto; /* Mantiene la proporción */
    border-radius: 10px;
    margin-bottom: 20px;
}

/* Estilos para el formulario */
body#Devolucion-saldos-body .imagen-formulario form {
    background-image: url(imagenes/fondo1.png);
    background-repeat: no-repeat;
    background-size: contain; /* Asegura que la imagen se ajuste dentro del contenedor sin distorsionarse */
    background-position: center center; /* Centra la imagen tanto vertical como horizontalmente */
    background-attachment: fixed; /* Fija la imagen de fondo para que no se desplace con el contenido */
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    margin-top: 1px;
    box-shadow: 0px 15px 15px #000;
    width: 53vw; /* Ajusta el tamaño del formulario a un porcentaje del ancho de la vista */
    max-width: 53rem; /* Limita el ancho máximo del formulario */
    margin: 0 auto; /* Centra el formulario horizontalmente */
}

body#Devolucion-saldos-body .imagen-formulario form  textarea:focus {
    background-color: white;
}


/* Espaciado entre los contenedores */
body#Devolucion-saldos-body .input-container {
    margin-bottom: 20px;
}


/* Diseño de los contenedores del formulario */
body#Devolucion-saldos-body .input-container input[type="text"],
body#Devolucion-saldos-body .input-container input[type="email"],
body#Devolucion-saldos-body .input-container input[type="tel"],
body#Devolucion-saldos-body .input-container textarea,
body#Devolucion-saldos-body .input-container label {
    display: block;
    margin-bottom: 5px;

}

/* Diseño de los contenedores del formulario */
body#Devolucion-saldos-body .input-container input[type="text"],
body#Devolucion-saldos-body .input-container input[type="email"],
body#Devolucion-saldos-body .input-container input[type="tel"],
body#Devolucion-saldos-body .input-container textarea {
    width: 100%; /* Asegura que los elementos ocupen el ancho completo del contenedor */
    padding: 15px;
    border: none;
    border-radius: 5px;
    box-sizing: border-box;
    margin-top: 15px;
    background-color: rgba(0, 0, 0, 0.281);
    font-size: 1rem;
}

body#Devolucion-saldos-body .input-container textarea {
    resize: vertical;
}

body#Devolucion-saldos-body .input-container input[type="checkbox"] {
    margin-bottom: 1rem; /* Espacio entre el checkbox y el texto */
    height: 20px;
    width: 20px;
    display: inline-flex; /* Alinea el checkbox dentro de su contenedor */
    align-items: center; /* Centra el checkbox verticalmente */
}


/* Estilos para el botón */
.imagen-formulario button {
    background-color: #016666;
    color: white;
    border: solid black 1px;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
}



/* Media Queries para pantallas pequeñas */
@media (max-width: 768px) {
    body#Devolucion-saldos-body .contenido-previo h2,
    body#Devolucion-saldos-body .contenido-previo h3 {
        font-size: 2.5rem; /* Reduce el tamaño del título */
    }

    body#Devolucion-saldos-body .contenido-previo p {
        font-size: 1.5rem; /* Reduce el tamaño del texto */
    }

    body#Devolucion-saldos-body .imagen-formulario form {
        padding: 20px; /* Reduce el padding del formulario */
        font-size: 0.9rem; /* Reduce el tamaño de la fuente */
    }

    body#Devolucion-saldos-body .imagen-formulario img {
        max-width: 100px; /* Reduce el tamaño de la imagen */
    }
}

/* Media Queries para pantallas muy pequeñas */
@media (max-width: 480px) {
    body#Devolucion-saldos-body .contenido-previo h2,
    body#Devolucion-saldos-body .contenido-previo h3 {
        font-size: 2rem; /* Ajuste adicional para títulos */
    }

    body#Devolucion-saldos-body .contenido-previo p {
        font-size: 1.2rem; /* Ajuste adicional para texto */
    }

    body#Devolucion-saldos-body .imagen-formulario form {
        padding: 15px;
        font-size: 0.8rem;
    }

    body#Devolucion-saldos-body .imagen-formulario img {
        max-width: 80px; /* Ajuste adicional para imagen */
    }
}












/* Boletines */
.contenido-boletines {
    background-image: url(imagenes/fondo1.png);
    background-repeat: no-repeat;
    background-size: contain; /* Asegura que la imagen se ajuste dentro del contenedor sin distorsionarse */
    background-position: center center; /* Centra la imagen tanto vertical como horizontalmente */
    background-attachment: fixed; /* Fija la imagen de fondo para que no se desplace con el contenido */
    padding: 3rem;
    position: relative;
}

.contenedor {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}



.etiqueta {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px 10px rgba(0, 0, 0, 0.911);
    padding: 20px;
    width: 100%;
    max-width: 30%;
    text-align: center;
    margin-top: 15rem;
    margin-bottom: 10rem;
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
    border: solid 4px #000;
}

.etiqueta:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 25px 10px rgba(199, 199, 199, 0.911);
}




.etiqueta img {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
    border-radius: 10px;
}

.etiqueta h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.etiqueta p {
    text-align: justify;
    margin-bottom: 15px;
}

.etiqueta button {
    padding: 10px 20px;
    background-color: black;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.etiqueta button:hover {
    background-color: orange;
}


@media (max-width: 768px) {
    .etiqueta {
        max-width: 100%;
    }
}

.etiqueta:hover ~ .contenido-boletines {
    background-image: url('imagenes/RegimenTributario.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 0.3s ease;
}













/* Estilos para PQR */
/* Asegurar que el main cubra toda la pantalla */
#pqrs-body main {
    background-image: url(imagenes/fondo1.png);
    background-repeat: no-repeat;
    background-size: contain; /* Asegura que la imagen se ajuste dentro del contenedor sin distorsionarse */
    background-position: center center; /* Centra la imagen tanto vertical como horizontalmente */
    background-attachment: fixed; /* Fija la imagen de fondo para que no se desplace con el contenido */
    height: 150vh; /* La altura cubre toda la ventana */
    padding: 1rem;
    display: flex;
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: center; /* Alinea los elementos al centro verticalmente */
    font-family: 'Poppins', sans-serif;
    animation: zoom 40s infinite;
}

/* Media Query para dispositivos pequeños */
@media (max-width: 768px) {
    #pqrs-body main {
        background-size: cover; /* Asegura que la imagen cubra todo el fondo en pantallas pequeñas */
        padding-top: 200px; /* Ajusta el padding superior */
    }
}

#PQRS-title h2 {
    color: black;
    font-size: 3rem;
    margin-bottom: 5rem;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    margin-top: 2rem;
}

/* Diseño básico para el formulario */
#PQRS-form {
    background-image: url(imagenes/fondo1.png);
    background-repeat: no-repeat;
    background-size: contain; /* Asegura que la imagen se ajuste dentro del contenedor sin distorsionarse */
    background-position: center center; /* Centra la imagen tanto vertical como horizontalmente */
    background-attachment: fixed; /* Fija la imagen de fondo para que no se desplace con el contenido */
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    box-shadow: 0px 15px 15px #000;
    width: 53vw; /* Ajusta el tamaño del formulario a un porcentaje del ancho de la vista */
    max-width: 53rem; /* Limita el ancho máximo del formulario */
    margin: 0 auto; /* Centra el formulario horizontalmente */
}

/* Ajusta el tamaño del formulario a la imagen de fondo */
#PQRS-form {
    height: auto; /* Permite que el formulario ajuste su altura automáticamente */
    max-height: 100vh; /* Limita la altura máxima del formulario a la altura de la vista */
}

#PQRS-form label {
    display: block;
    margin-bottom: -1rem;
    font-weight: bold;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    text-align: justify;
    margin-top: 1rem;
}


.PoliticasTitulo {
    display: flex;
    flex-direction: column; /* Apila el checkbox y el texto en una columna */
    align-items: center; /* Centra el contenido horizontalmente */
    margin-bottom: 2rem; /* Espacio debajo del contenedor */
    margin-top: 2rem;

}



#PQRS-form input,
#PQRS-form select,
#PQRS-form textarea {
    width: 100%; /* Asegura que los elementos ocupen el ancho completo del contenedor */
    padding: 15px;
    border: none;
    border-radius: 5px;
    box-sizing: border-box;
    margin-top: 15px;
    background-color: rgba(255, 255, 255, 0.568);
    font-size: 1rem;
}

#PQRS-form textarea {
    height: 8rem; /* Altura para el área de texto */
}



#PQRS-form textarea:focus {
    background-color: white;
}

.PoliticasTitulo input[type="checkbox"] {
    margin-bottom: 0rem; /* Espacio entre el checkbox y el texto */
    height: 20px;
    width: 20px;
    display: inline-flex; /* Alinea el checkbox dentro de su contenedor */
    align-items: center; /* Centra el checkbox verticalmente */
}




/* Alinear el texto y el enlace de las políticas */
#PQRS-form p {
    color: red;
    display: none;
}

#tipo-pqrs, #tipo-persona {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem; /* Cambia el tamaño de la fuente según tu gusto */
    color: black; /* Cambia el color del texto según tu gusto */
}

#PQRS-form .button-container {
    display: flex;
    justify-content: center; /* Centra el botón dentro del contenedor */
    width: 100%;
}

#PQRS-form button {
    width: 100%; /* Ajusta el botón para ocupar el ancho completo en pantallas pequeñas */
    max-width: 100px; /* Limita el ancho máximo del botón */
    padding: 10px 0;
    background-color: blue;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1rem;
}

#PQRS-form button:hover {
    background-color: white;
    color: black;
}

/* Media Queries para pantallas pequeñas */
@media (max-width: 768px) {
    #PQRS-title h2 {
        font-size: 2.5rem; /* Reduce el tamaño del título */
    }

    #PQRS-form {
        padding: 1.5rem; /* Reduce el padding del formulario */
    }

    #PQRS-form input,
    #PQRS-form select,
    #PQRS-form textarea {
        font-size: 0.9rem; /* Reduce el tamaño de la fuente */
    }

    #PQRS-form button {
        font-size: 0.9rem; /* Ajusta el tamaño de la fuente del botón */
    }
}

/* Media Queries para pantallas muy pequeñas */
@media (max-width: 480px) {
    #PQRS-title h2 {
        font-size: 1.8rem; /* Ajuste adicional para títulos */
    }

    #PQRS-form {
        padding: 1rem; /* Ajusta el padding del formulario */
    }

    #PQRS-form input,
    #PQRS-form select,
    #PQRS-form textarea {
        font-size: 0.8rem; /* Ajusta el tamaño de la fuente */
    }

    #PQRS-form button {
        font-size: 0.8rem; /* Ajusta el tamaño de la fuente del botón */
    }
}












/* Estilos Contáctenos */
body#contacto-body main {
    background-image: url(imagenes/fondo1.png);
    background-repeat: no-repeat;
    background-size: contain; /* Asegura que la imagen se ajuste dentro del contenedor sin distorsionarse */
    background-position: center center; /* Centra la imagen tanto vertical como horizontalmente */
    background-attachment: fixed; /* Fija la imagen de fondo para que no se desplace con el contenido */
    height: 200vh; /* La altura cubre toda la ventana */
    padding: 15rem;
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: center; /* Alinea los elementos al centro verticalmente */
    font-family: 'Poppins', sans-serif;
    animation: zoom 40s infinite;
}



/* Media Query para dispositivos pequeños */
@media (max-width: 768px) {
    body#contacto-body main  {
        background-size: cover; /* Asegura que la imagen cubra todo el fondo en pantallas pequeñas */
        padding-top: 200px; /* Ajusta el padding superior */
    }

}



::placeholder{
    color: black;
}


.logo-container p{
    color: black;
    font-size: 3rem;
    margin-bottom: 5rem;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    margin-top: 2rem;
}


/* Estilos para el contenedor de la imagen y el formulario */
body#contacto-body .imagen-formulario {
    display: flex; 
    flex-direction: row; /* Cambiamos la dirección del flexbox a fila */
    justify-content: center; /* Centramos horizontalmente los elementos */
    align-items: flex-start; /* Alineamos los elementos al inicio del contenedor */
    width: 100%;
    border-radius: 20px;
}

body#contacto-body .imagen-formulario img {
    width: 4%; /* Ajustamos el ancho de la imagen */
    height: 380px; /* Altura automática para mantener la proporción */
    border-radius: 10px; /* Bordes redondeados */
    margin-right: 20px; /* Espacio entre la imagen y el formulario */
}


body#contacto-body .imagen-formulario form.loaded {
    transform: rotate(0); /* Lleva el formulario a su rotación original */
}


/* Estilos para el formulario */
body#contacto-body .imagen-formulario form {
    background-image: url(imagenes/fondo1.png);
    background-repeat: no-repeat;
    background-size: contain; /* Asegura que la imagen se ajuste dentro del contenedor sin distorsionarse */
    background-position: center center; /* Centra la imagen tanto vertical como horizontalmente */
    background-attachment: fixed; /* Fija la imagen de fondo para que no se desplace con el contenido */
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    margin-top: 1px;
    box-shadow: 0px 15px 15px #000;
    width: 53vw; /* Ajusta el tamaño del formulario a un porcentaje del ancho de la vista */
    max-width: 53rem; /* Limita el ancho máximo del formulario */
    margin: 0 auto; /* Centra el formulario horizontalmente */

}


body#contacto-body .input-container {
    margin-bottom: 20px;
}

body#contacto-body .input-container input[type="text"],
body#contacto-body .input-container input[type="email"],
body#contacto-body .input-container input[type="tel"],
body#contacto-body .input-container textarea,
body#contacto-body .input-container label {
    display: block;
    
}

body#contacto-body .input-container label {
    font-weight: bold;
    margin-bottom: 5px;
}


body#contacto-body .input-container input[type="text"],
body#contacto-body .input-container input[type="email"],
body#contacto-body .input-container input[type="tel"],
body#contacto-body .input-container textarea {
    width: 100%;
    padding: 20px;
    border: none;
    border-radius: 10px;
    box-sizing: border-box;
    margin-top: 10px;
    background-color: rgba(0, 0, 0, 0.37);
    font-size: 1rem;
}


body#contacto-body .input-container textarea {
    resize: vertical;
    height: 10rem;
}



body#contacto-body .input-container textarea:focus {
    background-color: white;
}

body#contacto-body .input-container input[type="checkbox"] {
    margin-bottom: 1rem; /* Espacio entre el checkbox y el texto */
    height: 20px;
    width: 20px;
    display: inline-flex; /* Alinea el checkbox dentro de su contenedor */
    align-items: center; /* Centra el checkbox verticalmente */
}







/* Estilos para el botón */
body#contacto-body .imagen-formulario button {
    background: rgba(0, 0, 0, 0.479);
    color: white; /* Color del texto en el botón */
    font-family: 'Poppins', sans-serif;
    border: none;
    font-size: 1rem;
    border-radius: 10px;
    padding: 0.5rem 1rem; /* Ajusta el padding para que el botón tenga el tamaño del párrafo interno */
    display: inline-flex; /* Asegura que el botón se ajuste al contenido */
    align-items: center; /* Centra verticalmente el texto dentro del botón */
    justify-content: center; /* Centra horizontalmente el texto dentro del botón */
    transition: background 0.9s ease, color 0.9s ease; /* Transición suave para el efecto hover */
    text-align: center; /* Alinea el texto al centro del botón */
    font-weight: normal; /* Elimina el texto en negrilla */
}

/* Efecto hover para el botón */
body#contacto-body .imagen-formulario button:hover {
    background: orange;
    color: black;
}








/* Footer */
footer {
    position: 100%; /* Fija el footer al fondo */
    bottom: 0;
    width: 100%;
    background-color: #000;
    color: #fff;
    padding: 10px 0;
    z-index: 10; /* Asegura que el footer esté sobre otros elementos */
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 2rem;
    border-top: 15px solid transparent;
    border-image-slice: 1;
    border-image-source: linear-gradient(90deg, #4e2b00, orange, #4e2b00);
    font-family: 'Poppins', sans-serif;
}

.footer-container > div {
    flex: 1;
    padding: 1rem;
    border-right: 5px solid transparent;
    border-image-source: linear-gradient(to top, black, orange, black);
    border-image-slice: 1;
}

.footer-container > div:last-child {
    border-right: none;
}

.informacion-contacto a {
    color: white;
    text-decoration: none;
}

.informacion-contacto i,
.redes-sociales i {
    color: white;
    font-weight: bold;
}

.redes-sociales a {
    color: white;
    font-size: 20px;
    margin-right: 10px;
}

.mapa iframe {
    width: 100%;
    height: 50%;
    border: none;
    margin-top: 3rem;
}

.mapa a,
.mapa span,
.mapa p,
.mapa h6,
.mapa h7 {
    color: white;
    transition: color 0.3s ease;
}


.mapa h7,
.mapa h6 {
    color: white;
    font-size: 1rem;
    transition: color 0.3s ease;
    margin-top: 1vh;
}

.mapa a{
    color: white;
    font-size: 2rem;
    transition: color 0.3s ease;
    margin-top: 1vh;
}



.mapa h7:hover,
.mapa a:hover {
    color: blue;
    transition: color 0.3s ease;
}

.mapa a{
    color: white;
    font-size: 2rem;
    transition: color 0.3s ease;
    margin-top: 1vh;
}







.mapa span:hover,
.mapa h6:hover {
    color: #d47b0d;
}

footer h3,
footer p,
footer span,
footer h6 {
    position: relative;
    overflow: hidden;
}

footer h3:hover,
footer p:hover,
footer span:hover,
footer h6:hover {
  color: orange;
}

footer h3::after,
footer p::after,
footer span::after,
footer h6::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #d47b0d;
    transition: width 0.7s ease-in-out;
}

footer h3:hover::after,
footer p:hover::after,
footer span:hover::after,
footer h6:hover::after {
    width: 100%;
}

.redes-sociales i:hover,
.informacion-contacto a:hover {
    color: #d47b0d;
}

.informacion-contacto p {
    margin-top: 1rem;
    font-size: 1rem;
    color: white;
    margin-bottom: 3rem;
}



.informacion-contact p{
    margin-bottom: 2rem;
}



.imagen-formulario form {
    background-image: url(imagenes/fondo1.png);
    background-repeat: no-repeat;
    background-size: cover; /* Cubre todo el formulario con la imagen */
    background-position: center center; /* Centra la imagen tanto vertical como horizontalmente */
    padding: 1rem;
    font-family: 'Poppins', sans-serif;
    color: black;
    margin: 2rem auto;
    text-align: center;
    border-radius: 10px;
    margin-top: 3rem;
    width: 100%; /* Asegura que el formulario ocupe todo el ancho del contenedor */
    max-width: 1200px; /* Limita el ancho máximo del formulario */
    box-sizing: border-box; /* Asegura que el padding no afecte el tamaño total */
}



.imagen-formulario input,
.imagen-formulario textarea {
    width: 100%; /* Asegura que los elementos ocupen el ancho completo del contenedor */
    padding: 15px;
    border: none;
    border-radius: 5px;
    box-sizing: border-box;
    margin-top: 15px;
    background-color: rgba(68, 67, 67, 0.568);
    font-size: 1rem;
}

.imagen-formulario{
    margin-top: 4rem;
}

.imagen-formulario label {
    margin-bottom: 5px;
    display: block;
}


.imagen-formulario textarea {
    height: 8rem; /* Altura para el área de texto */
}


.imagen-formulario input[type="checkbox"] {
    margin-bottom: 0rem; /* Espacio entre el checkbox y el texto */
    height: 20px;
    width: 20px;
    display: inline-flex; /* Alinea el checkbox dentro de su contenedor */
    align-items: center; /* Centra el checkbox verticalmente */
}


.imagen-formulario button {
    background: rgba(0, 0, 0, 0.479);
    color: white; /* Color del texto en el botón */
    font-family: 'Poppins', sans-serif;
    border: none;
    font-size: 0.8rem;
    border-radius: 10px;
    padding: 0.5rem 1rem; /* Ajusta el padding para que el botón tenga el tamaño del párrafo interno */
    display: inline-flex; /* Asegura que el botón se ajuste al contenido */
    align-items: center; /* Centra verticalmente el texto dentro del botón */
    justify-content: center; /* Centra horizontalmente el texto dentro del botón */
    transition: background 0.9s ease, color 0.9s ease; /* Transición suave para el efecto hover */
    text-align: center; /* Alinea el texto al centro del botón */
    font-weight: normal; /* Elimina el texto en negrilla */
}

.imagen-formulario button:hover {
    background: orange;
    color: black;
}


.imagen-formulario textarea:focus {
    background-color: white;
}



/* Responsivo */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
    }

    .footer-container > div {
        border-right: none;
        margin-bottom: 1rem;
    }
}