@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
    font-family: Calibri, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Estilo para h2 y a con fuente Calibri */
h2, a {
    font-family: Calibri, sans-serif;
    color: #333; /* Color del texto */
    line-height: 1.2; /* Espaciado entre líneas */
}

/* h2 en negrita y con tamaño más grande */
h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 28px; /* Tamaño mayor para h2 */
    font-weight: 300; /* Mantener en negrita */
    text-align: left;
}

a {
    font-size: 20px; /* Tamaño menor para enlaces */
    font-weight: 300; /* Aspecto más delgado */
    text-decoration: none; /* Quitar subrayado */
    color: #666; /* Color de enlaces */
    display: block; /* Cambiar a block para que cada enlace ocupe toda la línea */
    margin-bottom: 5px; /* Reducir espacio vertical entre enlaces */
    position: relative; /* Necesario para el posicionamiento del pseudo-elemento */
    padding-left: 20px; /* Espacio para el punto */
    text-align: left;
    line-height: 1.4;
}

    /* Pseudo-elemento para el punto antes del enlace */
    a::before {
        content: "•"; /* Este es el punto que se añadirá */
        position: absolute; /* Posiciona el punto */
        left: 0; /* Coloca el punto al principio del enlace */
        color: #666; /* Color del punto, puede ser el mismo que el del enlace */
        font-size: 20px; /* Ajusta el tamaño del punto */
    }

    /* Efecto hover en enlaces */
    a:hover {
        color: green; /* Color verde al pasar el ratón */
    }

/* Estilos específicos para etiquetas de contacto */
.contact-label {
    font-weight: bold; /* Negrita para "Teléfono de contacto:" y "Correo electrónico:" */
    color: #333;
}

.contact-detail {
    font-weight: 300; /* Ligero para el número de teléfono y correo electrónico */
    color: #666; /* Gris claro para los detalles de contacto */
}

.header {
    background-color: rgb(0, 120, 192);
    color: white;
    padding: 10px;
    text-align: left;
    /*width: 60%;*/ /* Igualar el ancho del header al de .content */
    /*margin: 0 auto;*/ /* Centrar el header en la página */
    /*box-sizing: border-box;*/ /* Incluye el padding en el cálculo del ancho */
    width: 100%; /* Asegura que ocupe el 100% del ancho */
    margin: 0; /* Eliminar márgenes */
}

.columns-inline {
    display: flex;
    align-items: flex-start; /* Para alinear elementos en la parte superior */
    gap: 20px; /* Espaciado entre el logo y el texto */
}

.logoEmpresa {
    width: 150px;
    height: auto;
    /*margin-top: 15px;*/
}

.logoKommerling {
    width: 150px;
    margin-right: 50px;
}

    .logoKommerling img {
        width: 100%;
        height: auto;
        padding: 0;
    }

.container-logo-app {
    display: flex;
    justify-content: center;
    margin: 30px;
}

.centroAyuda {
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 300;
    border-bottom: 2px solid rgb(0, 120, 192);
    padding-bottom: 10px;
    width: 60%;
    margin: 0;
}

.centroAyudaSoporte {
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 300;
    border-bottom: 2px solid rgb(0, 120, 192);
    padding-bottom: 10px;
    width: 100%;
    margin: 0;
    margin-bottom: 40px; /* Agregar margen inferior para separación */
    margin-top: 40px;
}

.lineaInferior {
    border-top: 2px solid rgb(0, 120, 192);
    margin-bottom: 40px;
    margin-top: 40px;
}

.main {
    background-color: white;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.content {
    /*width: 50%;*/ /* Si lo dejas asi no se ajusta bien al redimensionar  */
    width: 100vh;
    text-align: left;
}

.footer {
    background-color: rgb(246, 159, 15);
    color: white;
    padding: 10px;
    text-align: center;
    /*width: 60%;*/ /* Igualar el ancho del footer al de .content */
    /*margin: 0 auto;*/ /* Centrar el footer en la página */
    /*box-sizing: border-box;*/ /* Incluye el padding en el cálculo del ancho */
    width: 100%; /* Asegura que ocupe el 100% del ancho */
    margin: 0; /* Eliminar márgenes */
}

p {
    margin-top: 0;
    line-height: 1.6;
}

@media(max-width: 767px) {
    .content, .banner, .app-ios, .imagenes-title, .table-container, .logoKommerling {
        width: 90%;
    }

    .footer, .header {
        width: 100%;
    }

    /* Estilo para que se apile el logo en pantalla móvil */
    .columns-inline {
        flex-direction: column; /* Cambiar a columna para apilar el logo encima del texto */
        align-items: center; /* Centrar los elementos en el eje horizontal */
        text-align: center; /* Alinear texto al centro */
    }

    .logoEmpresa {
        width: 150px; /* Mantener el ancho del logo */
        margin-bottom: 15px; /* Agregar margen debajo del logo */
    }

    .texto-info {
        width: 100%; /* Asegurar que el texto ocupe todo el ancho disponible */
        text-align:left;
    }


}