* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4; /* Fondo claro */
    color: #333; /* Color del texto */
}

header {
    margin: 0; /* Elimina el margen por defecto del header */
    padding: 0; /* Elimina el padding por defecto del header */
    background-color: #001f3f; /* Azul marino */
    color: white;
    text-align: center;
    padding: 20px 0;
}

.banner {
    width: 100%; /* Asegura que el contenedor ocupe el 100% del ancho */
    overflow: hidden; /* Evita que el contenido se desborde */
}

.banner img {
    width: 100%; /* La imagen ocupará el 100% del ancho del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block; /* Elimina el espacio debajo de la imagen */
}

main {
    display: flex;
    flex-direction: column; /* Cambiado a columna para apilar elementos */
    justify-content: center;
    align-items: center;
    height: calc(100vh - 120px); /* Ajusta la altura según el banner y el footer */
}

.titulo {
    margin-bottom: 20px; /* Espacio entre el título y el contenedor */
}

.titulo h2 {
    color: #001f3f; /* Color azul marino para el título */
}

.container {
    text-align: center;
    background-color: white; /* Fondo blanco para el contenedor */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.container p {
    margin-bottom: 15px;
}

input[type="email"] {
    padding: 10px;
    width: 80%;
    max-width: 300px;
    border: 1px solid #ccc; /* Borde gris claro */
    border-radius: 4px;
    margin-bottom: 10px;
}

button {
    padding: 10px 20px;
    background-color: #001f3f; /* Azul marino */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #003366; /* Un tono más claro de azul marino para el hover */
}

.resultado {
    margin-top: 15px;
    font-size: 1.1em;
}

.resultado.success {
    color: green; /* Color para mensajes de éxito */
}

.resultado.error {
    color: red; /* Color para mensajes de error */
}

footer {
    text-align: center;
    padding: 10px 0;
    background-color: #001f3f; /* Azul marino */
    color: white;
    position: relative;
    bottom: 0;
    width: 100%;
}

.success {
    color: #155724; /* Color de texto verde oscuro */
    background-color: #d4edda; /* Fondo verde claro */
    border: 1px solid #c3e6cb; /* Borde verde */
}

.error {
    color: #721c24; /* Color de texto rojo oscuro */
    background-color: #f8d7da; /* Fondo rojo claro */
    border: 1px solid #f5c6cb; /* Borde rojo */
}

/* Animación para el spinner */
@keyframes modern-loading {
    0% {
        stroke-dasharray: 0, 283; /* Comienza vacío */
        stroke-dashoffset: 0; /* Comienza desde el inicio */
    }
    50% {
        stroke-dasharray: 141, 283; /* 50% del círculo */
        stroke-dashoffset: -70; /* Mueve el inicio del trazo */
    }
    100% {
        stroke-dasharray: 0, 283; /* Vuelve a vacío */
        stroke-dashoffset: -283; /* Completa el círculo */
    }
}

.circle {
    animation: modern-loading 1.5s ease-in-out infinite; /* Aplica la nueva animación al círculo */
    stroke-dasharray: 283; /* Longitud total del círculo */
    stroke-dashoffset: 0; /* Comienza desde el inicio */
}