/* Estilos para el nuevo banner-capy */
#banner-capy {
    position: relative;
    width: 100%; /* Asegura que el banner ocupe todo el ancho */
    height: 100vh; /* Asegura que el banner ocupe toda la altura de la ventana */
    overflow: hidden; /* Evita que la imagen se desborde */
}

/* Contenido dentro del banner (subtítulo y demás) */
#banner-capy .inner {
    position: absolute;
    top: 0; /* Alineación vertical inicial */
    left: 50%; /* Centra el contenido horizontalmente */
    transform: translateX(-50%); /* Centra el contenido */
    z-index: 5; /* Asegura que el texto esté por encima de la imagen de fondo */
}

/* Contenedor del logo */
.logo-container2 {
    position: relative;
    top: 0;
    left: 0;
    width: 100%; /* Asegura que ocupe todo el ancho del banner */
    height: 100%; /* Asegura que ocupe toda la altura del banner */
    background-size: cover; /* Hace que la imagen de fondo cubra todo el contenedor */
    background-position: center; /* Centra la imagen de fondo */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    z-index: -1; /* Asegura que la imagen quede detrás del logo */
}

/* Logo centrado horizontalmente y con posición fija desde arriba */
.logo-container2 img {
    position: absolute;
    width: 350px; /* Ajusta el tamaño del logo */
    height: auto; /* Mantiene la proporción */
    left: 50%; /* Centra el logo horizontalmente */
    transform: translateX(-50%); /* Centra el logo de forma precisa */
    top: 100px; /* Distancia fija desde la parte superior del banner */
    z-index: 10; /* Asegura que el logo esté por encima de la imagen de fondo */
}

.subtitle {
    font-size: 2.5em;
    margin: 0;
    line-height: 1.5;
    font-weight: bold;
    color: white;
    text-align: center;
    position: relative; /* Ahora se posiciona con respecto al contenedor del logo */
    top: 500px; /* Distancia fija desde el logo */
    max-width: 800px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.main-capy {
    padding: 4em 0 2em 0;
    background: linear-gradient(to bottom, #E1F5FE , #E1F5FE ); /* Degradado de ejemplo, puedes cambiar los colores */
}

.main-capy-variant-1 {
    padding: 4em 0 2em 0;
    background: linear-gradient(to bottom, #FFF9C4  , #FFF9C4); /* Degradado de ejemplo, puedes cambiar los colores */
}

.main-capy-variant-2 {
    padding: 4em 0 2em 0;
    background: linear-gradient(to bottom, #C8E6C9 , #C8E6C9 ); /* Degradado de ejemplo, puedes cambiar los colores */
}

.main-capy-variant-3 {
    padding: 4em 0 2em 0;
    background: linear-gradient(to bottom, #D1C4E9   , #D1C4E9   ); /* Degradado de ejemplo, puedes cambiar los colores */
}

.main-capy .inner {
    max-width: 60em;
    margin: 0 auto;
}

.main-capy .inner header p {
    font-size: 1.2em;
    font-style: italic;
    border-top: 1px solid rgba(144, 144, 144, 0.25);
    border-bottom: 1px solid rgba(144, 144, 144, 0.25);
    padding: .5em 0;
}

@media screen and (max-width: 980px) {
    .main-capy {
        padding: 3em 0 1em 0;
    }

    .main-capy .inner {
        width: 90%;
    }
}

.main-capy-image {
    padding: 4em 0 2em 0;
    /*background-image: url('path/to/your/image.jpg'); /* Cambia la ruta por la imagen que desees */
    background-size: cover; /* Asegura que la imagen cubra todo el fondo */
    background-position: center center; /* Centra la imagen */
    background-attachment: fixed; /* Fija la imagen al fondo, no se desplaza */
}

.main-capy-image .inner {
    max-width: 60em;
    margin: 0 auto;
}

.main-capy-image .inner header p {
    font-size: 1em;
    font-style: italic;
    border-top: 1px solid rgba(144, 144, 144, 0.25);
    border-bottom: 1px solid rgba(144, 144, 144, 0.25);
    padding: .5em 0;
}

@media screen and (max-width: 980px) {
    .main-capy-image {
        padding: 3em 0 1em 0;
    }

    .main-capy-image .inner {
        width: 90%;
    }
}


/* Estilos para la imagen */
.printable-image {
    text-align: center; /* Centra la imagen */
    margin-top: 2em; /* Espaciado superior */
}

.printable-image img {
    max-width: 100%; /* Asegura que la imagen no se desborde */
    height: auto; /* Mantiene la proporción */
    border-radius: 8px; /* Redondea las esquinas de la imagen */
}

/* Estilos para el botón */
.download-button {
    text-align: center; /* Centra el botón */
    margin-top: 2em; /* Espaciado superior */
}

.download-button .button {
    display: inline-block;
    background-color: #4CAF50; /* Color de fondo del botón */
    color: white; /* Color del texto */
    text-decoration: none; /* Elimina el subrayado del enlace */
    border-radius: 5px; /* Bordes redondeados */
    font-size: 1em; /* Tamaño de fuente */
    transition: background-color 0.3s ease; /* Transición suave para el cambio de color */
}

.download-button .button:hover {
    background-color: #45a049; /* Color de fondo al pasar el ratón */
}