/* templates/core/clases_esqui.html */

.hero-clases {
        background-repeat: no-repeat;
    }

    .hero-clases h1 {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    }

    .hero-clases h2 {
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
    }

    .hero-clases .lead {
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
        font-size: 1.1rem;
    }

    .btn-success:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35) !important;
    }

    .btn-outline-light:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    @media (max-width: 767.98px) {
        .hero-clases {
            min-height: 65vh;
            padding: 40px 0 !important;
        }

        .hero-clases h1 {
            font-size: 2rem;
        }

        .hero-clases h2 {
            font-size: 1.1rem;
        }

        .hero-clases .lead {
            font-size: 0.95rem;
        }
    }

.booking-btn {
                                position: relative;
                                overflow: hidden;
                                font-weight: 700;
                                letter-spacing: 0.5px;
                                transition: all 0.2s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
                                border: none;
                                padding: 1rem 2rem !important;
                                border-radius: 0.5rem;
                            }

                            .booking-btn-danger {
                                background-color: var(--brand-primary, #800020);
                                color: white;
                                box-shadow: 0 4px 12px rgba(128, 0, 32, 0.2);
                            }

                            .booking-btn-danger:hover {
                                background-color: #a0002a;
                                transform: translateY(-2px);
                                box-shadow: 0 6px 18px rgba(128, 0, 32, 0.3);
                                color: white;
                            }

                            .booking-btn-primary {
                                background-color: #0d6efd;
                                color: white;
                                box-shadow: 0 4px 12px rgba(13, 110, 253, 0.2);
                            }

                            .booking-btn-primary:hover {
                                background-color: #0b5ed7;
                                transform: translateY(-2px);
                                box-shadow: 0 6px 18px rgba(13, 110, 253, 0.3);
                                color: white;
                            }

                            .card-booking {
                                transition: transform 0.2s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), box-shadow 0.2s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
                                position: relative;
                            }

                            .card-booking:hover {
                                transform: translateY(-4px);
                                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
                            }

                            @media (max-width: 767.98px) {
                                .booking-btn {
                                    padding: 0.875rem 1.5rem !important;
                                    font-size: 0.95rem;
                                }
                            }