:root {
     --primary-color: #1d7bff;
     --primary-dark: #1553aa;
     --dark-bg: #10131a;
 }

 * {
     box-sizing: border-box;
 }

 body {
     font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     background-color: #f5f6fa;
     color: #1b1e24;
 }

 html {
     scroll-behavior: smooth;
 }

 section {
     scroll-margin-top: 90px;
 }


 .navbar-brand span {
     font-weight: 700;
     letter-spacing: 0.5px;
 }

 .navbar {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     background: #060917;
 }

 .navbar-nav .nav-link {
     font-weight: 500;
 }

 .navbar-nav .nav-link:hover {
     color: var(--primary-color);
 }


 #inicio {
     background: radial-gradient(circle at top left, #233A63 0, #060917 45%, #020308 100%);
     color: #ffffff;
     padding-top: 7rem;
     padding-bottom: 5rem;
 }

 .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     border-radius: 999px;
     padding: 0.35rem 0.9rem;
     background: rgba(255, 255, 255, 0.06);
     font-size: 0.85rem;
 }

 .hero-title {
     font-size: clamp(2rem, 3vw + 1rem, 3.3rem);
     font-weight: 700;
     line-height: 1.2;
 }

 .hero-list i {
     color: #ffcc00;
 }

 .btn-primary {
     background-color: var(--primary-color);
     border-color: var(--primary-color);
     font-weight: 600;
     border-radius: 999px;
     padding-inline: 1.5rem;
 }

 .btn-primary:hover {
     background-color: var(--primary-dark);
     border-color: var(--primary-dark);
 }

 .hero-card {
     background: radial-gradient(circle at top, rgba(255, 255, 255, 0.14), rgba(9, 9, 16, 0.98));
     border-radius: 1.5rem;
     border: 1px solid rgba(255, 255, 255, 0.05);
     box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
 }

 .rating-stars i {
     color: #ffcc00;
 }

 .text-soft {
     color: rgba(255, 255, 255, 0.7);
 }

 .disclaimer-text {
     font-size: 0.8rem;
     opacity: 0.8;
 }


 .section-title {
     font-weight: 700;
     font-size: 1.8rem;
 }

 .section-subtitle {
     max-width: 640px;
     margin: 0.25rem auto 0;
     color: #6c757d;
 }

 .section-divider {
     width: 56px;
     height: 3px;
     border-radius: 999px;
     background: linear-gradient(90deg, var(--primary-color), #00c3ff);
     margin: 0.75rem auto 0;
 }

 .icon-circle {
     width: 40px;
     height: 40px;
     border-radius: 999px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background-color: rgba(29, 123, 255, 0.08);
     color: var(--primary-color);
 }


 .casino-card {
     border-radius: 1rem;
     border: 1px solid rgba(0, 0, 0, 0.06);
     box-shadow: 0 12px 24px rgba(15, 23, 42, 0.10);
 }

 .badge-rating {
     background-color: #111827;
     color: #f9fafb;
     border-radius: 999px;
     padding: 0.15rem 0.75rem;
     font-size: 0.8rem;
 }

 .list-icon-check i {
     color: #16a34a;
 }


 .table thead th {
     background-color: #f1f3f9;
     border-bottom: 2px solid #dee2e6;
     font-size: 0.9rem;
 }

 .table td,
 .table th {
     vertical-align: middle;
     font-size: 0.9rem;
 }

 .badge-pill {
     border-radius: 999px;
 }


 .criteria-card {
     border-radius: 1rem;
     border: 1px solid rgba(15, 23, 42, 0.06);
     transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
     background: #ffffff;
 }

 .criteria-card:hover {
     transform: translateY(-3px);
     box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
     border-color: rgba(29, 123, 255, 0.4);
 }


 .guide-card {
     border-radius: 1rem;
     border: 1px solid rgba(148, 163, 184, 0.3);
     background: #ffffff;
     height: 100%;
 }

 .guide-icon {
     width: 40px;
     height: 40px;
     border-radius: 999px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: rgba(29, 123, 255, 0.08);
     color: var(--primary-color);
 }


 .accordion-button::after {
     filter: invert(37%) sepia(79%) saturate(2629%) hue-rotate(208deg) brightness(93%) contrast(97%);
 }

 .accordion-button:not(.collapsed) {
     background-color: rgba(29, 123, 255, 0.06);
     color: #111827;
 }


 .responsible-box {
     border-radius: 1rem;
     border: 1px dashed rgba(148, 163, 184, 0.7);
     background: #f9fafb;
 }

 .age-badge {
     display: inline-flex;
     align-items: center;
     gap: 0.4rem;
     padding: 0.35rem 0.8rem;
     border-radius: 999px;
     border: 1px solid rgba(220, 38, 38, 0.4);
     color: #b91c1c;
     font-weight: 600;
     font-size: 0.82rem;
     background: #fff1f2;
 }

 .age-badge i {
     color: #ef4444;
 }


 .contact-info i {
     color: var(--primary-color);
 }

 .form-check-input:checked {
     background-color: var(--primary-color);
     border-color: var(--primary-color);
 }


 footer {
     background: radial-gradient(circle at top left, #1f2937 0, #020617 48%, #000000 100%);
     color: #e5e7eb;
 }

 .footer-logo {
     font-weight: 700;
     letter-spacing: 0.06em;
 }

 .footer-link {
     color: #9ca3af;
     text-decoration: none;
     font-size: 0.9rem;
 }

 .footer-link:hover {
     color: #ffffff;
 }

 .footer-bottom {
     border-top: 1px solid rgba(55, 65, 81, 0.9);
 }

 .footer-18-badge {
     display: inline-flex;
     align-items: center;
     gap: 0.25rem;
     border-radius: 999px;
     border: 1px solid rgba(248, 250, 252, 0.35);
     padding: 0.2rem 0.6rem;
     font-size: 0.78rem;
 }


 .text-small {
     font-size: 0.85rem;
 }

 .text-xs {
     font-size: 0.78rem;
 }

 @media (max-width: 575.98px) {
     #inicio {
         padding-top: 6.5rem;
         padding-bottom: 3.5rem;
     }
 }

 .logo-footer {
     display: flex;
     flex-wrap: wrap;
     gap: 15px;
     width: 100%;
     max-width: 1120px;
     margin: 25px auto;
     justify-content: center;
 }

 .logo-footer a {
     height: 48px;

 }

 .logo-footer a img {
     height: 100%;
     object-fit: contain;
 }.page-header {
            background: radial-gradient(circle at top left, #233A63 0, #060917 45%, #020308 100%);
            color: #ffffff;
            padding: 4rem 0 3rem;
        }
        .page-header h1 {
            font-weight: 700;
        }
        .page-header p {
            max-width: 680px;
        }
        .content-wrapper {
            padding: 3rem 0 4rem;
        }