/* --- Paleta de Colores y Variables (Versión Minimalista) --- */
:root {
    --color-fondo: #161616;
    --color-tarjeta: #212121;
    --color-dorado-principal: #C0B283; /* Oro sobrio y elegante */
    --color-dorado-secundario: #D1C59A; /* Tono más claro para hover */
    --color-texto-principal: #EAEAEA;
    --color-texto-secundario: #9E9E9E;
    --borde-dorado-suave: rgba(192, 178, 131, 0.25);
    --sombra-tarjeta: 0 8px 25px rgba(0, 0, 0, 0.4);
    --sombra-texto-dorado: 0 0 8px rgba(192, 178, 131, 0.2);
}

/* --- Estilos Globales --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-fondo);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23C0B283' fill-opacity='0.02'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    color: var(--color-texto-principal);
    font-family: 'Lato', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- HEADER --- */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--borde-dorado-suave);
}

.top-bar .logo-small {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    color: var(--color-texto-principal);
    text-decoration: none;
    font-size: 1.1em;
    transition: color 0.3s;
}
.top-bar .logo-small:hover { color: var(--color-dorado-principal); }
.top-bar .logo-small i {
    color: var(--color-dorado-principal);
    margin-right: 8px;
}

.top-bar-nav a {
    color: var(--color-texto-secundario);
    text-decoration: none;
    margin: 0 15px;
    font-size: 0.85em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    transition: color 0.3s;
}
.top-bar-nav a:hover { color: var(--color-dorado-principal); }

.top-bar-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}
.top-bar-actions .action-link {
     color: var(--color-texto-secundario);
     text-decoration: none;
     font-size: 0.85em;
     transition: color 0.3s;
}
.top-bar-actions .action-link:hover { color: var(--color-dorado-principal); }
.top-bar-actions .action-link i { margin-right: 6px; }

.action-button {
    background-color: var(--color-dorado-principal);
    color: #111;
    padding: 8px 18px;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.8em;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.action-button:hover {
    background-color: var(--color-dorado-secundario);
    transform: translateY(-2px);
}
.search-icon {
    color: var(--color-texto-secundario);
    font-size: 1.7em;
    cursor: pointer;
    transition: color 0.3s;
}
.search-icon:hover { color: var(--color-dorado-principal); }

/* --- LOGO CENTRAL --- */
.hero-logo {
    padding: 45px 0;
    text-align: center;
    font-family: 'Cinzel', serif;
    color: var(--color-dorado-principal);
}
.hero-logo .crown {
    font-size: 2em;
    margin-bottom: -5px;
    opacity: 0.9;
    text-shadow: var(--sombra-texto-dorado);
}
.hero-logo h1 {
    font-size: 1.8em;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1;
    text-shadow: var(--sombra-texto-dorado);
}

/* --- SUB-NAVEGACIÓN --- */
.sub-nav {
    text-align: center;
    padding-bottom: 40px;
}
.sub-nav a {
    color: var(--color-texto-secundario);
    text-decoration: none;
    margin: 0 20px;
    font-size: 1em;
    font-weight: 700;
    padding-bottom: 6px;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}
.sub-nav a.active, .sub-nav a:hover {
    color: var(--color-dorado-principal);
    border-bottom-color: var(--color-dorado-principal);
}

/* --- CUADRÍCULA DE RIFAS --- */
.raffle-grid {
    display: grid;
    /* Por defecto, muestra varias columnas en pantallas grandes */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    padding-bottom: 50px;
}

/* --- TARJETA DE RIFA --- */
.raffle-card {
    background-color: var(--color-tarjeta);
    border: 1px solid var(--borde-dorado-suave);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.raffle-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sombra-tarjeta);
    border-color: var(--borde-dorado-suave);
}

.raffle-card .image-container {
    width: 100%;
    height: 220px;
    overflow: hidden;
}
.raffle-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.raffle-card:hover img {
    transform: scale(1.05);
}

/* Contenido de la tarjeta (título y botón) */
.raffle-card .card-content {
    /* CAMBIO CLAVE AQUÍ: Reducir el padding-top para acercar el contenido a la imagen */
    padding: 5px 15px 15px 15px; /* Ejemplo: 5px arriba, 15px derecha, 15px abajo, 15px izquierda */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.raffle-card h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.4em;
    /* Resetear el margin-top a 0, ya que el padding del padre controlará el espacio */
    margin: 0 0 10px 0; /* Asegúrate que el margin-top sea 0 para que no empuje */
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.raffle-card .description {
    font-size: 0.9em;
    color: var(--color-texto-secundario);
    margin-bottom: 15px;
    flex-grow: 1;
    line-height: 1.5;
}

.raffle-card .price {
    font-size: 1.6em;
    font-weight: 700;
    color: var(--color-dorado-principal);
    margin-bottom: 15px;
}

.raffle-card .buy-btn {
    background-color: var(--color-dorado-principal);
    color: #111;
    border: none;
    padding: 12px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9em;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.3s;
}
.raffle-card .buy-btn:hover {
    background-color: var(--color-dorado-secundario);
}

/* --- DISEÑO ADAPTABLE (MEDIA QUERIES) --- */

/* Ocultar menú en tablets */
@media (max-width: 992px) {
    .top-bar-nav { display: none; }
}

/* Ajustes para tabletas y móviles más grandes */
@media (max-width: 768px) {
    .top-bar { 
        flex-direction: column; 
        gap: 15px; 
    }
    .hero-logo h1 { font-size: 3em; }
    .sub-nav a { margin: 0 10px; font-size: 0.9em; }

    /* Mantenemos varias columnas si hay espacio */
    .raffle-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

/* === CAMBIOS PARA CELULARES === */
@media (max-width: 576px) {
    body {
        /* Reduce el tamaño del contenedor principal en móviles */
        width: 100%; 
    }
    .container {
        width: 95%; /* Un poco más de espacio en los bordes */
    }
    .hero-logo {
        padding: 30px 0;
    }
    .hero-logo h1 { font-size: 2.2em; }

    /* --- LA MAGIA OCURRE AQUÍ --- */
    .raffle-grid {
        /* Crea una cuadrícula de 2 columnas iguales con un espacio entre ellas */
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px; /* Un poco menos de espacio entre tarjetas */
    }

    .raffle-card h3 {
        font-size: 1.1em; /* Títulos más pequeños para que no se corten */
    }
    .raffle-card .description {
        font-size: 0.85em; /* Descripción ligeramente más pequeña */
    }
    .raffle-card .price {
        font-size: 1.4em;
    }
    .raffle-card .buy-btn {
        font-size: 0.8em;
        padding: 10px;
    }
}
/* Estilos modernos para el footer */
.site-footer {
    background-color: #222;
    color: #ddd;
    padding: 40px 20px;
    margin-top: 60px; /* separa del contenido anterior */
    font-family: 'Helvetica Neue', sans-serif;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.footer-section {
    flex: 1 1 250px;
}

.footer-section h3,
.footer-section h4 {
    color: #fff;
    margin-bottom: 15px;
}

.footer-section p,
.footer-section li {
    font-size: 0.9rem;
    line-height: 1.6;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section ul li a {
    color: #ddd;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: #fff;
}

.footer-socials a {
    color: #ddd;
    margin-right: 10px;
    font-size: 1.2rem;
    transition: color 0.3s ease;
}

.footer-socials a:hover {
    color: #fff;
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid #444;
    padding-top: 15px;
    font-size: 0.85rem;
}
/* --- Estilos para Raffle Card y sus elementos --- */

/* Contenedor principal de la tarjeta de rifa */
/* --- Precios --- */
.raffle-card .price {
    font-size: 1.3em;
    font-weight: bold;
    color: #DAA520; /* Precio en dorado */
    margin-top: 10px;
    margin-bottom: 15px;
    text-align: center;
}

.raffle-card .price .original-price {
    text-decoration: line-through; /* This keeps the strikethrough */
    color: #888888; /* Changed to a medium gray for better visibility */
    font-size: 0.8em;
    margin-right: 8px;
}

/* Contenedor de la imagen */
.raffle-card .image-container {
    position: relative;
    overflow: hidden;
}

.raffle-card .image-container img {
    width: 100%;
    height: 200px; /* Altura fija para las imágenes */
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse */
    display: block;
    transition: filter 0.3s ease; /* Transición para el oscurecimiento en hover */
}

.raffle-card:hover .image-container img {
    filter: brightness(0.7); /* Oscurece sutilmente la imagen en hover */
}

/* --- Etiqueta de Oferta --- */
.offer-tag {
    position: absolute;
    top: 10px;  /* Posición por defecto cuando existe la oferta */
    right: 10px;
    background-color: #DAA520;
    color: #2c2c2c;
    padding: 5px 12px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.85em;
    z-index: 5; /* Asegura que esté por encima del precio */
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
    text-transform: uppercase;
}

/* --- Overlay de Agotado --- */
.sold-out-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(44, 44, 44, 0.7); /* Gris oscuro semitransparente */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 4; /* Para estar por encima de todo */
    border-radius: 12px; /* Asegura que el overlay también tenga bordes redondeados */
}

.sold-out-text {
    color: #DAA520; /* Texto "Agotado" en dorado */
    font-family: 'Cinzel', serif; /* O la fuente que uses para los títulos */
    font-size: 1.8em;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para resaltar */
    margin-bottom: 5px;
}

.sold-out-icon {
    color: #DAA520; /* Icono en dorado */
    font-size: 2.5em;
    opacity: 0.8;
}

/* --- Estilos para Raffle Card y sus elementos --- */
.raffle-card .image-container {
    position: relative; /* Esencial para el posicionamiento de elementos internos */
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background-color: #DAA520; /* Tu color dorado */
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.7em; /* Mantén este tamaño si la barra es delgada */
    transition: width 1s ease-out;
    color: #000; /* CAMBIO CLAVE: Texto negro para alto contraste con el dorado */
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); 
}


.progress-percentage {
    color: #000; /* CAMBIO CLAVE: Asegúrate de que aquí también sea negro si esta clase lo sobrescribe */
    /* font-family: 'Lato', sans-serif; */
    /* text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); */ /* Opcional: Sombra blanca sutil */
 }


.raffle-card:hover .progress-bar-container .progress-bar {
    filter: brightness(1.2);
}

/* --- Estilos para el nuevo price-overlay dentro de la imagen --- */
.price-overlay {
    position: absolute;
    top: 15px; /* POSICIÓN POR DEFECTO DEL PRECIO (cuando NO hay oferta) */
    right: 10px;
    left: auto;
    background-color: rgba(44, 44, 44, 0.8);
    padding: 8px 15px;
    border-radius: 8px;
    z-index: 3; /* Estará debajo de la offer-tag */
    display: flex;
    flex-direction: column; /* Esto apila el bloque .price (y otros elementos si los hubiera) */
    align-items: flex-end;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    transition: top 0.3s ease-out; /* Añade una transición para el movimiento suave */
}

.price-overlay .price {
    margin: 0; /* Elimina márgenes por defecto del p */
    padding: 0;
    display: flex;
    flex-direction: column; /* <--- CAMBIO CLAVE AQUÍ: Esto apila original-price y current-price */
    align-items: flex-end; /* <--- Asegura que los items se alineen a la derecha dentro de .price */
    font-size: 1.3em; /* Tamaño general del precio */
    font-weight: bold;
    color: #DAA520; /* Color principal del precio actual (dorado) */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Sombra para resaltar */
}

.price-overlay .original-price {
    text-decoration: line-through; /* Tachado */
    color: #a0a0a0; /* Un gris un poco más claro para mejor visibilidad */
    font-size: 0.8em; /* Más pequeño que el precio actual */
    margin-right: 0; /* No necesitas margin-right si están apilados */
    margin-bottom: 3px; /* Pequeño margen entre el precio tachado y el nuevo */
    font-weight: normal; /* Menos negrita */
    opacity: 0.8; /* Añade opacidad para un efecto de "segundo plano" */
    text-shadow: none; /* Sin sombra para el tachado */
    order: 2; /* <--- NUEVO: Ordena para que el original-price vaya DESPUÉS del current-price */
}

.price-overlay .current-price {
    color: #DAA520; /* Asegura que el precio actual sea dorado, explícitamente */
    font-size: 1em; /* Mismo tamaño base que el .price principal */
    order: 1; /* <--- NUEVO: Ordena para que el current-price vaya PRIMERO */
}
/* Ocultar en pantallas pequeñas */
@media (max-width: 768px) { /* Puedes ajustar este valor si lo necesitas */
    .purchase-form-container .form-steps {
        display: none;
    }
}

/* Opcional: Mostrar en pantallas más grandes (por si hay alguna regla que lo oculte por defecto) */
@media (min-width: 769px) { /* Debe ser 1px más grande que el max-width anterior */
    .purchase-form-container .form-steps {
        display: flex; /* O 'block', 'grid', dependiendo de cómo lo tengas diseñado para desktop */
    }
}
/* Ocultar el elemento por defecto en todas las pantallas */
.selected-numbers-display-area {
    display: none;
}

/* Mostrar el elemento solo en pantallas pequeñas (consideradas móviles) */
@media (max-width: 768px) { /* Puedes ajustar este valor si lo necesitas */
    .selected-numbers-display-area {
        display: block; /* O 'flex', 'grid', dependiendo de cómo esté diseñado el contenido dentro */
    }
}  #whatsapp-float {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background-color: #28a745; /* verde WhatsApp */
    color: white;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 1000;
    transition: background-color 0.3s ease;
    text-decoration: none;
  }
  #whatsapp-float:hover {
    background-color: #25d366;
  }
/* Estilos específicos para el bloque de métodos de pago en metodopago.php */
/* Estos son los estilos que aseguraremos que se apliquen */

.form-step {
    max-width: 600px;
    margin: 30px auto;
    font-family: 'Lato', sans-serif;
    color: #ccc; /* Texto principal más claro */
    padding: 20px;
    background-color: #2a2a2a; /* Gris oscuro para el fondo del contenedor principal */
    border: 1px solid #444; /* Borde más oscuro */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Sombra más pronunciada */
}
.form-step h3 {
    margin-bottom: 1.5rem;
    font-size: 1.5rem; /* <-- Cambiado de 1.8rem a 1.5rem o el valor que prefieras */
    color: var(--color-dorado-principal);
    text-align: center;
}
/* Tus estilos existentes para .payment-methods y .payment-method-card */
.payment-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-bottom: 30px;
}
.payment-method-card {
    width: 140px;
    background: #3a3a3a; /* Gris un poco más claro que el fondo del form-step */
    border: 2px solid #555; /* Borde para las tarjetas de método de pago */
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    padding: 20px;
    transition: all 0.3s ease;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.payment-method-card:hover {
    border-color: var(--color-dorado-principal);
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.6); /* Sombra más oscura al pasar el ratón */
}
.payment-method-card.selected {
    background-color: var(--color-dorado-principal);
    border-color: var(--color-dorado-principal);
    color: #111; /* Texto oscuro para la tarjeta seleccionada */
}
.payment-method-card img {
    max-width: 80px;
    height: auto;
    margin-bottom: 10px;
    filter: grayscale(100%);
    transition: filter 0.3s;
}
.payment-method-card.selected img {
    filter: grayscale(0%);
}
.payment-method-card p {
    margin: 0;
    font-weight: bold;
    font-size: 1.1em;
    color: #ccc; /* Texto claro para las tarjetas no seleccionadas */
}
.payment-method-card.selected p {
    color: #111; /* Texto oscuro para la tarjeta seleccionada */
}

.payment-details {
    background-color: #333; /* Fondo gris para los detalles del pago */
    border: 1px solid #555; /* Borde más oscuro */
    border-radius: 8px;
    padding: 20px;
    display: none;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.15); /* Sombra interior más oscura */
    color: #ccc; /* Texto general de los detalles claro */
}
.payment-details.active {
    display: block;
}
.payment-details h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.5rem;
    color: var(--color-dorado-principal);
    text-align: center;
}
.payment-details p {
    margin: 8px 0;
    font-size: 0.95rem;
    color: #ccc; /* Texto de detalles claro */
}
.payment-details p strong {
    color: var(--color-dorado-principal); /* Dorado para las etiquetas importantes */
}
.payment-details .text-muted {
    margin-top: 20px;
    font-size: 0.85rem;
    color: #aaa; /* Un gris un poco más claro para el texto "muted" */
    text-align: center;
    font-style: italic;
}

/* --- Responsive adjustments --- */
@media (max-width: 768px) {
    .form-step {
        max-width: 90%;
        padding: 15px;
    }
    .payment-methods {
        /* Para 3 columnas: (100% - 2*gap) / 3 */
        /* Si gap es 15px, entonces width = calc( (100% - 30px) / 3 ) */
        gap: 10px; /* Reducimos el gap para que quepan mejor */
        justify-content: space-around; /* Distribuye espacio equitativamente */
    }
    .payment-method-card {
        /* Ajustamos el ancho para que quepan 3 en fila. */
        /* Restamos los gaps entre ellos. 100% / 3 = 33.33% */
        /* Con gap de 10px, serían 20px de gap total entre 3 items. */
        /* (100% - (2 * 10px)) / 3 = (100% - 20px) / 3 */
        width: calc((100% - 20px) / 3); /* Tres columnas con 10px de gap entre ellas */
        min-width: 90px; /* Establece un ancho mínimo para que no se hagan demasiado pequeños */
        padding: 5px; /* Reducimos el padding */
    }
    .payment-method-card img {
        max-width: 60px; /* Achicamos las imágenes para que quepan */
        height: auto;
        margin-bottom: 5px; /* Reducimos el margen inferior */
    }
    .payment-method-card p {
        font-size: 0.75rem; /* Achicamos el texto */
    }
    .payment-details {
        padding: 15px;
    }
    .payment-details h3 {
        font-size: 1.3rem;
    }
    .payment-details p {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .form-step {
        max-width: 95%;
        padding: 10px;
    }
    .payment-methods {
        /* Mantenemos 3 columnas para pantallas aún más pequeñas, ajustando el gap */
        gap: 5px; /* Gap más pequeño */
    }
    .payment-method-card {
        /* Recalculamos el ancho con el nuevo gap */
        width: calc((100% - 10px) / 3); /* (100% - 2*5px) / 3 */
        min-width: 70px; /* Ancho mínimo un poco menor */
        padding: 3px; /* Padding aún más pequeño */
    }
    .payment-method-card img {
        max-width: 50px; /* Imágenes más pequeñas */
        margin-bottom: 3px;
    }
    .payment-method-card p {
        font-size: 0.65rem; /* Texto más pequeño */
    }
    .payment-details {
        padding: 10px;
    }
    .payment-details h3 {
        font-size: 1.2rem;
    }
    .payment-details p {
        font-size: 0.85rem;
    }
}
/* Estilo para los enlaces del footer */
#main-footer a {
  color: #FFD700; /* Color dorado */
  text-decoration: none; /* Opcional: Para quitar el subrayado */
}

/* Estilo para los enlaces del footer al pasar el ratón (hover) */
#main-footer a:hover {
  color: #DAA520; /* Un tono de dorado un poco más oscuro o diferente para el hover */
  text-decoration: underline; /* Opcional: Para que aparezca el subrayado al pasar el ratón */
}

/* Estilo para los enlaces del footer ya visitados */
#main-footer a:visited {
  color: #DAA520; /* Para mantener el color dorado incluso después de haber sido visitados */
}

/* Contenedor principal que se superpone a la imagen */
.progress-display {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 8px 15px 12px 15px; /* Espaciado interior */
    background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.4) 70%, transparent); /* Degradado para legibilidad */
    box-sizing: border-box;
    z-index: 2; /* Asegura que esté por encima de la imagen */
}

/* Contenedor para la fila de textos ("VENDIDOS" y el %) */
.progress-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px; /* Espacio entre el texto y la barra */
    color: white;
}

/* Estilo para el texto "VENDIDOS" a la izquierda */
.progress-label-left {
    font-size: 0.9em;
    font-weight: 700;
    color: #FFD700; /* Tono dorado para el texto */
    text-shadow: 0 0 5px rgba(0,0,0,0.7);
    text-transform: uppercase;
}
.progress-label-left i {
    margin-right: 5px;
    color: #FF8C00; /* Color anaranjado para el icono de fuego */
}

/* Estilo para el porcentaje a la derecha */
.progress-label-right {
    font-size: 1.5em; /* Más grande y llamativo */
    font-weight: 700;
    color: #FFD700; /* Tono dorado */
    text-shadow: 1px 1px 4px rgba(0,0,0,0.8);
}

/* La barra exterior (el borde dorado grueso) */
.progress-bar-container {
    width: 100%;
    height: 20px; /* Altura de la barra */
    background-color: #1a1a1a; /* Fondo oscuro interior */
    border: 2px solid #C0B283; /* Borde dorado */
    border-radius: 50px; /* Bordes totalmente redondeados */
    overflow: hidden; /* Oculta lo que se salga del borde redondeado */
    padding: 2px; /* Pequeño espacio para que el relleno no toque el borde */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); /* Sombra interior */
}

/* La barra interior (el relleno de progreso que crece) */
.progress-bar {
    height: 100%;
    border-radius: 50px; /* También redondeada para que encaje */
    background: linear-gradient(90deg, #FFD700, #DAA520); /* Degradado dorado */
    transition: width 0.8s ease-out;
    position: relative;
    overflow: hidden;
}

/* Efecto de brillo en la punta de la barra */
.progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 100%;
    background: radial-gradient(circle at left center, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50px;
}
/* === AJUSTES PARA VISTA MÓVIL - ARREGLO DE TEXTOS JUNTOS === */
@media (max-width: 480px) { /* Aplica estos estilos en pantallas de 480px de ancho o menos */

    /* 1. Reducimos el padding lateral del contenedor de la barra para dar más espacio */
    .progress-display {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* 2. Hacemos un poco más pequeño el texto "VENDIDOS" */
    .progress-label-left {
        font-size: 0.8em; 
    }

    /* 3. Reducimos el tamaño del porcentaje, que es el que más espacio ocupa */
    .progress-label-right {
        font-size: 1.2em; /* Reducción importante para que no choque */
    }

    /* Opcional: Si el título de la rifa también se ve muy grande en móvil */
    .raffle-card h3 {
        font-size: 1.2em;
    }
}