/* Variables para facilitar cambios de color */
:root {
    --button-bg-color: #636260; /* Color azul grisáceo ajustado al de la imagen */
    --button-text-color: white; 
    --cta-text-color: #555555; /* Color oscuro para el texto de la llamada a la acción */
}

body {
    /* *** CLAVE: Usamos la imagen completa como fondo y la cubrimos *** */
    background: url('../img/background.jpg') no-repeat center center/cover;
    
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Alineamos al inicio para que el contenido empiece arriba */
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    /* Evita el scroll si la imagen es muy grande, pero la hace 'responsive' */
    /* background-attachment: fixed;  */
}

.container {
    text-align: center;
    width: 100%;
    max-width: 400px; /* Ancho máximo para el contenido (teléfono) */
    /* El contenedor no necesita fondo, la imagen ya lo tiene */
    padding-top: 20px; /* Separación de la parte superior, si es necesario */
}

/* Contenedor de botones para gestionar el espacio entre ellos */
.buttons-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Espacio entre botones */
    
    /* *** CLAVE: Margen superior para colocar los botones justo debajo del logo en la imagen de fondo *** */
    margin-top: 43vh; /* Ajusta este valor (vh) para alinear los botones verticalmente */
    
    padding: 0 20px; /* Espacio a los lados del contenedor de botones */
}

/* Estilo de los Botones */
.btn {
    /* text-decoration: none;
    display: flex; 
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 44px;
    padding: 0;
    background: var(--button-bg-color); 
    color: var(--button-text-color);
    border-radius: 25px;
    font-size: 18px; 
    font-weight: bold; 
    text-transform: uppercase; 
    cursor: pointer;
    transition: background-color 0.3s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
}

.btn img {
    width: 100%;
}

.btn:hover {
    background-color: #be9927; /* Oscurece un poco al pasar el ratón */
}

/* Estilo de la Llamada a la Acción */
.call-to-action {
    color: var(--cta-text-color);
    font-size: 24px;
    font-weight: 600;
    margin-top: 30px; /* Espacio después de los botones */
}

/* CUSTOM */
.shareon {
    font-size: 0 !important;
    margin-top: 20;
}
.shareon>* {
    background-color: #be9927!important;
    border-radius: 10px!important;
}

/* Social Icons */
.social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
    padding: 0 20px;
}

.social-btn {
    width: 60px;
    height: 60px;
    /* background-color: #4CAF50; */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); */
}

.social-btn:hover {
    transform: scale(1.1);
}

.social-btn img {
    width: 100%;
    /* filter: brightness(0) invert(1); */
}

.footer-buttons{
    margin-top: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.vcf-download {
    background-color: #be9927 !important;
    padding: 9px;
    border-radius: 10px;
    color: #ffffff;
    text-decoration: none;
}