/* Estilo General */
html, body {
    overflow-x: hidden;  /* Evita desplazamiento horizontal accidental */
}
body {
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    box-sizing: border-box;  /* Incluir padding en los cálculos de ancho */
    font-family: 'Ubuntu', Arial, sans-serif;
}
h1, h2, h3 {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;  /* Negrita */
}
p, .card, .btn-primary {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 400;  /* Normal */
}
.card, .card h2, .card p, .card .percentage, .card .dates {
    font-family: 'Ubuntu', Arial, sans-serif;
}

.main-container {
    display: flex;
    justify-content: center;  /* Centra horizontalmente */
    align-items: flex-start;  /* Alinea desde el top */
    width: 100%;
    padding: 0 10px;  /* Espaciado horizontal */
    box-sizing: border-box;
}

/* Header */
header {
    background-color: #ffffff;
    padding: 10px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.header-container {
    display: flex;
    align-items: center;
    max-width: 84%;
    margin: 0 auto;
}

.logo {
    max-width: 120px;
    height: auto;
}

/* Título Principal */
.title-container {
    text-align: center;
    margin: 20px auto;
}

.title-container h1 {
    color: rgb(58, 58, 58);
    font-size: 2.5rem;
}
.banner-container {
    width: 100%;               /* Ocupa todo el ancho disponible */
    display: flex;
    justify-content: center;   /* Centra el banner horizontalmente */
    margin-bottom: 20px;       /* Espacio entre el banner y las tarjetas */
}

.banner-image {
    width: 100%;               /* Hace que la imagen sea responsiva */
    max-width: 1200px;         /* Limita el ancho máximo del banner */
    height: auto;              /* Mantiene la proporción original de la imagen */
    border-radius: 10px;       /* Bordes redondeados (opcional) */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil para que resalte */
}

/* Contenedor Principal */
.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));  /* Asegura que las tarjetas se ajusten bien */
    gap: 20px;
    justify-content: center;  /* Centra el grid completo */
    align-items: start;
    padding: 20px;
    max-width: 1200px;  /* Controlar el ancho máximo */
    margin: 0 auto;  /* Centrar horizontalmente */
    box-sizing: border-box;
}

/* Tarjetas */
.card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 100%;
    max-width: 320px;  /* Limita el ancho máximo para que no "empuje" */
    box-sizing: border-box;
    margin: 0 auto;  /* Asegura que la tarjeta esté centrada dentro del grid */
    font-family: inherit !important;
}

.card:hover {
    transform: translateY(-5px); /* Efecto hover */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Incrementar sombra */
}

.card h2 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 10px;
    text-align: center;
}

.card .percentage {
    font-size: 1.2rem;
    font-weight: bold;
    color: rgb(58, 58, 58);
}

.card .dates {
    font-size: 0.8em;
    margin-top: 10px;
    color: #555;
    font-weight: bold;
    text-align: center;
}

.card-image {
    width: 100%;
    max-width: 700px;
    height: auto;
    aspect-ratio: 700 / 320;
    margin: 10px 0;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Tarjetas Vencidas */
/*
.card.expired {
    background-color: #ffe5e5; /* Fondo rojo claro */
    border-color: #e60000; /* Borde rojo */
    color: #e60000; /* Texto rojo */
}
*/

.card.expired h2 {
    color: #e60000; /* Título en rojo */
}

.card.expired .percentage {
    color: rgb(58, 58, 58); /* Destacar el porcentaje en rojo */
}
.expired-text {
    margin-top: 10px;
    font-size: 1rem;
    font-weight: bold;
    color: #e60000; /* Rojo para destacar */
    text-align: center; /* Centrado debajo de la tarjeta */
}
/* Estilo para las Alertas */
.alert {
    padding: 10px 15px; /* Espaciado interno */
    border-radius: 5px; /* Esquinas redondeadas */
    font-size: 1rem; /* Tamaño del texto */
    font-weight: bold; /* Texto en negrita */
    margin-top: 15px; /* Separación superior */
    text-align: center; /* Centrado */
}

/* Alerta de Descuento Expirado */
.expired-alert {
    background-color: #ffe5e5; /* Fondo rojo claro */
    color: #e60000; /* Texto rojo */
    border: 1px solid #e60000; /* Borde rojo */
}
/* Footer */
footer {
    background-color: #ffffff; /* Fondo blanco */
    padding: 15px 0; /* Espaciado interno */
    text-align: center; /* Centrar el texto */
    font-size: 0.9rem; /* Tamaño de fuente más pequeño */
    color: #555; /* Color gris suave */
    border-top: 1px solid #ddd; /* Línea separadora en la parte superior */
    margin-top: 20px; /* Separación del contenido principal */
}

footer a {
    color: #E2001A; /* Color rojo Edenred */
    text-decoration: none; /* Sin subrayado */
    font-weight: bold; /* Texto en negrita */
}

footer a:hover {
    text-decoration: underline; /* Subrayar al pasar el mouse */
}
/* Botón de Ver Legales */
.legal-button {
    display: block;
    background-color: #E2001A; /* Color rojo Edenred */
    color: #fff;
    border: none;
    padding: 10px 20px; 
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    margin: 20px auto 0 auto;
    text-align: center; 
}


.legal-button:hover {
    background-color: #b30015; /* Oscurecer el rojo al pasar el mouse */
}

/* Modal (Oculto por defecto) */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Contenido del Modal */
/* Contenido del Modal con Scroll Interno */
.modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;  /* Clave para mantener la 'X' dentro del modal */
}

/* Ajuste para el título del modal */
.modal-content h3 {
    font-size: 1.5rem;         /* Tamaño de fuente adaptable */
    margin-bottom: 15px;
    word-break: break-word;    /* Permite que títulos largos se ajusten en múltiples líneas */
    text-align: center;        /* Centra el título en el modal */
}



/* Botón de Cerrar */
.close {
    position: absolute;  /* Fija la "X" dentro del modal */
    top: 10px;           /* Espaciado desde el borde superior del modal */
    right: 10px;         /* Espaciado desde el borde derecho del modal */
    background-color: transparent;
    border: none;
    font-size: 24px;
    font-weight: bold;
    color: #000;
    cursor: pointer;
    z-index: 10;         /* Asegura que esté por encima del contenido del modal */
}

.close:hover {
    color: #333;
}

/* Estilo del Contenedor de Filtros */
.filter-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;  /* Centra los botones en todos los dispositivos */
    gap: 10px;
    padding: 10px;
}

/* Estilo de los Botones de Filtro */
.filter-button {
    padding: 10px 20px;
    background-color: #C8102E;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
}

.filter-button:hover {
    background-color: #A60C24;
}

/* Media Query para Responsividad */
@media (max-width: 768px) {
    .card-container {
        grid-template-columns: 1fr;  /* Solo una tarjeta por fila en móviles */
        padding: 10px;
    }

    .card {
        max-width: 100%;  /* Ocupará todo el ancho disponible en móviles */
    }

    .title-container h1 {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .card-container {
        grid-template-columns: 1fr;  /* Solo una tarjeta por fila */
        padding: 0 15px;  /* Asegura espacio igual en ambos lados */
    }

    .card {
        margin: 0 auto;  /* Centra cada tarjeta */
    }
     .modal-content {
        max-height: 90vh;     /* Más alto en pantallas pequeñas */
        padding: 15px;
    }
     .modal-content h3 {
        font-size: 1.2rem;    /* Ajuste del tamaño del título para móviles */
    }
}
@media (max-width: 600px) {
    .modal-content {
        max-width: 90%;
        max-height: 90vh;
    }

    .close {
        top: 8px;
        right: 8px;
    }
}