html,
        body {
            height: 100%;
            overflow-x: hidden; /* CLAVE: Oculta la barra de desplazamiento horizontal */
             width: 100%;       /* Asegura que el cuerpo ocupe exactamente el 100% */
            /* El html y body deben ocupar el 100% de la ventana */
            margin: 0;
        }
 :root {
            --color-principal: #D50000; /* Rojo principal */
            --color-fondo: #F5F5F5; /* Fondo claro */
            --color-texto: #333333; /* Texto oscuro */
            --color-cta: #FFD700; /* Amarillo/Oro para CTA */
            --color-dark: #1E1E1E; /* Sección superior */
            --color-card-background: #FFFFFF; /* Nuevo: Fondo blanco para la tarjeta */
            --color-card-text: #333333; /* Nuevo: Texto oscuro para la tarjeta */
        }
        body {
            display: flex;
            /* Habilitar Flexbox en el body */
            flex-direction: column;
            /* Organizar los elementos verticalmente (header, main, footer) */
        }

         /* --- ESTILOS DE LA TARJETA (ALTO CONTRASTE) --- */
        .raffle-card {
            background-color: var(--color-card-background);
            /* Fondo BLANCO */
            border-radius: 12px;
            padding: 30px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            /* Sombra para que destaque */
            margin: 30px auto;
            /* Centrar la tarjeta dentro del slide */
            color: var(--color-card-text);
            /* Si tienes imágenes dentro del card que causan problemas de altura, añade: */
            height: auto;
        }

        /* ESTILO CRÍTICO PARA EL CONTENIDO */
        #contenido {
            flex-grow: 1;
            /* Permite que esta sección crezca para ocupar TODO el espacio restante */
            display: flex;
            /* Añadir display flex interno para centrar el contenido verticalmente si se desea (opcional) */
            align-items: center;
            /* Centrar verticalmente el contenido dentro de la sección (opcional) */
        }
        /* 💥 ESTILO CRÍTICO PARA STICKY FOOTER 💥 */
        /* Estilos de Color para Header y Footer (ROJO) */
        .header-rojo {
            background-color: #f8f8f8 !important;
        }

        .footer-rojo {
            background-color: #d01414 !important;
        }

        /* 💥 CAMBIOS CLAVE PARA EL DESPLIEGUE DEL MENÚ (MOBILE) 💥 */

        /* 1. Fondo Desplegado Negro Oscuro y Transición Suave (Más Moderno) */
        .navbar-collapse {
            /* Asegura una transición suave al mostrar/ocultar */
            transition: height 0.4s ease-in-out, background-color 0.4s ease-in-out;
        }

        .navbar-collapse.show {
            background-color: #343a40 !important;
            /* Gris Oscuro / Negro de Bootstrap */
            padding: 10px 0;
            /* La letra ya será blanca gracias a navbar-dark */
        }

        /* 2. Efecto HOVER Llamativo: Rojo sutil sobre el fondo oscuro */
        .navbar-collapse.show .nav-link {
            /* Transición en hover */
            transition: background-color 0.3s;
        }

        .navbar-collapse.show .nav-link:hover {
            background-color: rgba(220, 53, 69, 0.2);
            /* Rojo Transparente */
            border-radius: 5px;
        }

        /* Estilos de la sección Hero y otros */
        .hero-section {
            /* background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('imagen_fondo_simulada.jpg') no-repeat center center;*/
            /* background-color: #ededed;*/
            background-color: #202020;
            background-size: cover;
            color: white;
            padding: 30px 0;
            text-align: center;
        }

        .hero-section .social-icons a {
            color: white;
            font-size: 1.5rem;
            margin: 0 10px;
        }


        .social-icons a {
            font-size: 1.5rem;
            margin: 0 10px;
            color: #ffc107;
        }

        .social-icons2 a {
            font-size: 1.5rem;
            color: red;
            margin: 0 8px;
        }

        .social-icons2 a:hover {
            font-size: 1.5rem;
            color: black;
            margin: 0 8px;
        }

  

         /* Estilo Base para todos los botones de acción */
        .btn-accion-joys {
            display: block;
            width: 100%;
            padding: 12px 10px;
            margin-top: 15px;
            /* Espacio entre botones */

            font-size: 1.25rem;
            font-weight: bold;
            text-align: center;
            text-decoration: none;

            border: none;
            border-radius: 8px;
            /* Redondeado sutil */
            transition: background-color 0.3s ease, transform 0.1s ease;
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            text-decoration: none;
            cursor: pointer;

        }

        /* 💚 Comprar Tickets (Éxito/Verde) */
        .btn-comprar {
            background-color: #28a745;
            /* Verde Bootstrap */
            color: white !important;
            text-decoration: none;
        }

        .btn-comprar:hover {
            background-color: #1e7e34;
            transform: translateY(-1px);
            text-decoration: none;

        }

        /* 💛 Verificar Tickets (Advertencia/Amarillo) */
        .btn-verificar {
            background-color: #ffc107;
            /* Amarillo Bootstrap */
            color: #343a40 !important;
            /* Texto oscuro para mejor contraste */
        }

        .btn-verificar:hover {
            background-color: #e0a800;
            transform: translateY(-1px);
            text-decoration: none;
        }

        .btn-estilo-joys-gris-sm {
            /* 1. Apariencia general de botón */
            display: block;
            /* Ocupa el 100% del ancho del contenedor (como btn-block) */
            width: 20%;
            padding: 15px 10px;
            /* Un padding generoso para que sea un botón grande */
            margin-top: 10px;
            /* Para separarlo del elemento anterior (simula mt-2) */

            /* 2. Colores y borde redondeado */
            background-color: #202020;
            /* Color verde de Bootstrap (btn-success) */
            border: none;
            /* Quitar cualquier borde predeterminado */
            border-radius: 5px;
            /* Bordes ligeramente redondeados */
            cursor: pointer;
            /* Indicar que es un elemento interactivo */

            /* 3. Tipografía */
            color: white !important;
            /* El color del texto debe ser blanco */
            font-size: 0.99rem;
            /* Un tamaño de letra grande (simula btn-lg) */
            font-weight: bold;
            /* Texto en negrita */
            text-align: center;
            /* Centrar el texto */
            text-decoration: none;
            /* Quitar el subrayado si es un <a> */

            /* 4. Transición (Opcional, pero recomendado) */
            transition: background-color 0.3s ease;
        }

        /* 5. Efecto Hover (Para mejor interactividad) */
        .btn-estilo-joys:hover {
            background-color: #1e7e34;
            /* Un verde un poco más oscuro al pasar el ratón */
        }

        /* Estilo del Contenedor Principal (La Tarjeta/Botón) */
        .tarjeta-rifa {
            display: flex;
            /* Habilitar Flexbox para colocar los lados en línea */
            justify-content: space-between;
            /* Espaciar uniformemente los lados */
            align-items: stretch;
            /* Asegurar que ambos lados tengan la misma altura */

            width: 100%;
            /* Ocupa el ancho completo */
            max-width: 300px;
            /* Limitar el ancho máximo para mejor visualización */
            margin: 10px auto;
            /* Centrar y agregar margen */

            /* Apariencia de botón */
            border: 2px solid #dc3545;
            /* Borde rojo */
            border-radius: 12px;
            /* Esquinas redondeadas */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            /* Sombra sutil */
            overflow: hidden;
            /* Asegura que el contenido interno respete el border-radius */
            cursor: pointer;
            background-color: white;
        }

        /* Estilos de los Lados Izquierdo y Derecho */
        .lado-izquierdo,
        .lado-derecho {
            flex-grow: 1;
            /* Permite que cada lado ocupe el mismo espacio */
            text-align: center;
            padding: 5px 8px;
            display: flex;
            flex-direction: column;
            /* Organizar los elementos verticalmente (Etiqueta arriba, Detalle abajo) */
            justify-content: space-around;
        }

        /* Estilo para la etiqueta superior (Sorteo / Premio) */
        .etiqueta-superior {
            font-size: 0.8em;
            font-weight: bold;
            color: #202020;
            /* Gris sutil */
            text-transform: uppercase;
            margin-bottom: 5px;
        }

        /* Estilo para el contenido principal (Fecha / Monto) */
        .detalle-principal {
            font-size: 1.00rem;
            font-weight: bolder;
            margin-top: 5px;
        }

        /* Estilo específico para el Lado Derecho (Monto/Premio) */
        .lado-derecho {
            background-color: #dc3545;
            /* Fondo rojo (similar a tu header) */
            color: white;
            /* Texto blanco para contrastar */
            /* Dar un poco de énfasis al Monto */
        }

        .lado-derecho .etiqueta-superior {
            color: #ffffff;
            /* Texto amarillo para la etiqueta superior del premio */
        }

        /* Iconos */
        .detalle-principal i {
            margin-right: 5px;
            font-size: 1.1em;
        }

        /* Separador visual (si se incluye) */
        .separador {
            width: 2px;
            background-color: #dc3545;
            /* Mismo color del borde */
        }

        /* Efecto Hover para interactividad */
        .tarjeta-rifa:hover {
            box-shadow: 0 8px 16px rgba(220, 53, 69, 0.4);
            transform: translateY(-2px);
            transition: all 0.3s ease;
        }


        #scrollToTopBtn {
            /* Nueva línea para el borde blanco */
            border: 3px solid white;

            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 99;
            width: 50px;
            height: 50px;
            background-color: var(--color-principal);
            color: white;

            border-radius: 50%;
            outline: none;
            cursor: pointer;
            padding: 0;

            /* === CAMBIOS CLAVE PARA EL CENTRADO FLEXBOX === */
            display: flex;
            /* Habilitar Flexbox */
            justify-content: center;
            /* Centrado Horizontal (eje principal) */
            align-items: center;
            /* Centrado Vertical (eje cruzado) */
            /* ============================================== */

            /* Eliminamos line-height y text-align ya que Flexbox se encarga */
            /* font-size: 24px;  (Lo dejamos, controla el tamaño del ícono) */
            font-size: 24px;

            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: opacity 0.3s, background-color 0.3s;
        }

        #scrollToTopBtn:hover {
            background-color: #A00000;
        }

        /* Opcional: Ajustar el ícono si aún hay un desfase mínimo */
        #scrollToTopBtn i {
            /* Asegura que el ícono se comporte bien dentro de Flexbox */
            line-height: 1;
        }

        /* Ajuste para pantallas pequeñas */
        @media (max-width: 600px) {
            #scrollToTopBtn {
                width: 40px;
                height: 40px;
                bottom: 20px;
                right: 20px;
                font-size: 20px;
                line-height: 40px;
            }
        }