/* Estilos para la página */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #EEEEEE; /* Fondo total */
}

header {
    text-align: center;
    /*margin: 20px auto;*/
    padding:20px;



}

header img {
    max-width: 90%;
    height: auto;
}

h1 {
    margin-top: 20px; /* Añadir espacio debajo de la imagen */
}

.container {
    max-width: 600px;
    margin: 50px auto;
    text-align: center;
    color: #ffffff;
    padding: 20px;
    background-color: #222831; /* Cuadro al centro */
    border-radius: 10px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    padding-bottom: 20px;
}

h3 {
    text-align: left;
}

.input-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.input-group {
    flex: 1;
    margin-right: 10px;
}

.input-group label, .input-group input, .input-group select {
    width: 100%;
    display: block;
    margin-bottom: 10px;
}

.button-row {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.button-row .whatsapp-button, .button-row .telegram-button, .button-row .signal-button, .button-row .sms-button {
    flex: 1;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin: 0 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-size: 20px auto;
    background-repeat: no-repeat;
    background-position: center right 10px;
    font-weight: bold;
    transition: opacity 0.3s;
}

.button-row .whatsapp-button {
    background-color: #25D366; /* Botón WhatsApp */
    background-image: url("https://direct.osvicstudios.com/images/whatsapp-100.png");
}

.button-row .telegram-button {
    background-color: #2AABEE; /* Botón Telegram */
    background-image: url("https://direct.osvicstudios.com/images/telegram-100.png");
}

.button-row .signal-button {
    background-color: #3A76F0; /* Botón Signal */
    background-image: url("https://direct.osvicstudios.com/images/signal-app-100.png");
}

.button-row .sms-button {
    background-color: #F79327; /* Botón SMS */
    background-image: url("https://direct.osvicstudios.com/images/sms-100.png");
}

.button-row button:hover {
    opacity: 0.9; /* Cambiar la opacidad en hover para resaltar */
}

.ques .textoques {
    text-align: center;
}

/* Estilos para la casilla de número */
#phoneNumber {
    text-align: center;
    width: 80%; /* Ancho reducido para centrar */
    margin: 0 auto; /* Centrar horizontalmente */
    border: none;
    padding: 10px;
    border-radius: 20px; /* Bordes curvos */
    background-color: #fff; /* Fondo blanco */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    outline: none;
}

#phoneNumber::placeholder {
    color: #999; /* Color de texto para el placeholder */

}

/* Estilos para el pie de página */

/* Estilos para el pie de página */
footer {
    line-height:35px;
    background-color: #393E46;
    text-align: center;
    color: #fff;
    padding: 20px;
    margin-top: 20px; /* Agrega margen superior igual al alto del pie de página */
    clear: both; /* Limpiar flotantes si es necesario */
    box-sizing: border-box;
    color: rgba(255, 255, 255, 0.7); /* Color de texto con opacidad */

}

.dis {
    text-align: justify;
}


.footer-content {
    max-width: 600px;
    margin: 0 auto;
}



/* Estilos responsivos */
@media (max-width: 768px) {
    /* Ajustar estilos para dispositivos móviles */
    /* Por ejemplo, reducir el tamaño de fuente o el margen */
}

/* Estilos para el texto de SnapMess */
.snapmess-explanation {
    max-width: 600px;
    margin: 20px auto;
    text-align: center;
    padding: 20px;
  
}

/* Estilos para el icono principal de Instagram */
.instagram-icon {
    width: 30px; /* Ajusta el tamaño según tus preferencias */
    height: 30px;
    background-image: url('https://direct.osvicstudios.com/images/snapmess_instagram_priority.png');
    background-size: cover;
    transition: transform 0.3s;
}

/* Estilos para el enlace de Instagram */

.footer-social {
    padding-top:45PX;
}
.instagram-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none; /* Quita la decoración del enlace */
}

/* Estilos para el icono de Instagram al pasar el mouse */
.instagram-link:hover .instagram-icon {
    background-image: url('https://direct.osvicstudios.com/images/snapmess_instagram_secondary.png');
    transform: scale(1.2);
}

/* Estilos para el icono de Instagram al hacer clic */
.instagram-link:active .instagram-icon {
    /* Puedes aplicar estilos adicionales al hacer clic si es necesario */
}