/* === BASE / RESET === */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; overscroll-behavior-x: none; touch-action: pan-y; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 16px; line-height: 1.65; color: #000000; background: #FAFAFA; -webkit-font-smoothing: antialiased; overflow-x: hidden; overscroll-behavior-x: none; touch-action: pan-y; }
img { max-width: 100%; height: auto; display: block; }
a { color: #2196F3; text-decoration: none; transition: color 0.2s ease; }
a:hover { color: #E63946; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.2; }
p { margin: 0 0 16px 0; }
table { border-collapse: collapse; width: 100%; }

/* === WRAPPER === */
.wrapper { overflow-x: hidden; }

/* === JUMP NAV (sticky) === */
.jumpnav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: #ffffff; border-bottom: 1px solid #E5E5E5; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transform: translateY(-100%); transition: transform 0.3s ease; }
.jumpnav.is-visible { transform: translateY(0); }
.jumpnav-scroll { display: flex; gap: 6px; overflow-x: auto; padding: 10px 14px; scrollbar-width: none; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
.jumpnav-scroll::-webkit-scrollbar { display: none; }
.jumpnav-item { flex-shrink: 0; font-size: 13px; font-weight: 500; color: #0039A6; background: #EAF1FB; padding: 8px 14px; border-radius: 999px; text-decoration: none; white-space: nowrap; transition: background 0.2s ease, color 0.2s ease; }
.jumpnav-item:hover { background: #D52B1E; color: #ffffff; }
body.jumpnav-visible { padding-top: 0; }
body.jumpnav-visible .site-header { top: 44px; }

/* === SECTION COMMON === */
.section-inner { max-width: 1200px; margin: 0 auto; padding: 60px 20px; }
.section-badge { display: inline-block; background: #E63946; color: #ffffff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; padding: 6px 16px; border-radius: 4px; margin-bottom: 16px; }
.section-inner h2 { font-size: 28px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #000000; margin-bottom: 16px; text-align: center; }
.section-intro { font-size: 17px; color: #6B7280; max-width: 800px; margin-bottom: 40px; line-height: 1.7; }
.section-outro { font-size: 17px; color: #6B7280; max-width: 800px; margin: 32px 0 0 0; line-height: 1.7; }

/* === REVEAL ANIMATION === */
.casino-card, .casino-card-v2, .slot-card, .method-card, .theme-card, .type-item, .software-item, .tematica-tile, .bonus-type-card, .strategy-tip, .faq-item, .eeat-card { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.5s ease; }
.casino-card.revealed, .casino-card-v2.revealed, .slot-card.revealed, .method-card.revealed, .theme-card.revealed, .type-item.revealed, .software-item.revealed, .tematica-tile.revealed, .bonus-type-card.revealed, .strategy-tip.revealed, .faq-item.revealed, .eeat-card.revealed { opacity: 1; transform: translateY(0); }

/* === HEADER === */
.site-header { position: sticky; top: 0; z-index: 100; background: #ffffff; border-bottom: 1px solid #F0F0F0; transition: box-shadow 0.3s ease; }
.site-header.header-scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.08); }
.header-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #000000; }
.logo .logo-icon { flex-shrink: 0; }
.logo .logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.logo .logo-top { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #000000; }
.logo .logo-bottom { font-size: 15px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.logo .logo-cl-red { color: #D52B1E; }
.logo .logo-cl-blue { color: #0039A6; }
.main-nav .nav-list { display: flex; gap: 28px; align-items: center; }
.main-nav .nav-item { position: relative; }
.main-nav .nav-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #000000; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; transition: color 0.2s ease; padding: 4px 0; border-bottom: 2px solid transparent; cursor: pointer; background: none; border-left: 0; border-right: 0; border-top: 0; font-family: inherit; }
button.nav-link { line-height: inherit; }
.main-nav .nav-link:hover { color: #E63946; border-bottom-color: #E63946; }
.main-nav .nav-caret { transition: transform 0.2s ease; }
.main-nav .nav-sub { position: absolute; top: 100%; left: -14px; min-width: 200px; background: #ffffff; border: 1px solid #F0F0F0; border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,0.12); padding: 8px 0; margin-top: 10px; display: none; flex-direction: column; gap: 0; z-index: 110; }
.main-nav .nav-sub::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; background: transparent; }
/* El submenú se muestra cuando el item tiene .is-open (añadida por JS).
   En desktop se activa con hover; en mobile, con click. */
.main-nav .nav-has-sub.is-open .nav-sub { display: flex; }
.main-nav .nav-has-sub.is-open .nav-caret { transform: rotate(180deg); }
.main-nav .nav-sub li { margin: 0; }
.main-nav .nav-sub a { display: block; padding: 10px 18px; font-size: 13px; font-weight: 500; color: #000000; text-transform: none; letter-spacing: 0; border-bottom: 0; transition: background 0.15s ease, color 0.15s ease; }
.main-nav .nav-sub a:hover { background: #EAF1FB; color: #0039A6; }
.header-right { display: flex; align-items: center; gap: 14px; }
.nav-toggle { display: none; cursor: pointer; padding: 4px; }
.badge-18 { background: #1A1A2E; color: #ffffff; font-size: 11px; font-weight: 800; padding: 4px 8px; border-radius: 4px; letter-spacing: 0.5px; }

/* Animación slot-machine del logo al hacer clic */
.logo { -webkit-tap-highlight-color: transparent; }
.logo-icon text { transform-box: fill-box; transform-origin: 50% 50%; }

@keyframes logoReelSpin {
    0%     { transform: translateY(0);    opacity: 1; }
    10%    { transform: translateY(9px);  opacity: 0; }
    10.01% { transform: translateY(-9px); opacity: 0; }
    25%    { transform: translateY(0);    opacity: 1; }
    35%    { transform: translateY(9px);  opacity: 0; }
    35.01% { transform: translateY(-9px); opacity: 0; }
    50%    { transform: translateY(0);    opacity: 1; }
    62%    { transform: translateY(9px);  opacity: 0; }
    62.01% { transform: translateY(-9px); opacity: 0; }
    88%    { transform: translateY(0);    opacity: 1; }
    100%   { transform: translateY(0);    opacity: 1; }
}

@keyframes logoLeverPull {
    0%   { transform: translateY(0); }
    18%  { transform: translateY(8px); }
    50%  { transform: translateY(8px); }
    72%  { transform: translateY(-2px); }
    100% { transform: translateY(0); }
}

.logo.is-spinning .logo-icon text { animation: logoReelSpin 0.9s cubic-bezier(0.25, 0.1, 0.25, 1.2) both; }
.logo.is-spinning .logo-icon text:nth-of-type(2) { animation-delay: 0.1s; }
.logo.is-spinning .logo-icon text:nth-of-type(3) { animation-delay: 0.2s; }
.logo.is-spinning .logo-icon line:nth-of-type(3),
.logo.is-spinning .logo-icon circle { animation: logoLeverPull 0.85s cubic-bezier(0.4, 0.0, 0.25, 1) both; }

/* Icono neón por cada opción del menú (rojo + azul). Brilla más al pasar el ratón. */
.main-nav .nav-neon { display: inline-flex; align-items: center; justify-content: center; filter: drop-shadow(0 0 2px rgba(213,43,30,0.35)) drop-shadow(0 0 4px rgba(0,57,166,0.28)); transition: filter 0.25s ease, transform 0.25s ease; }
.main-nav .nav-neon svg { display: block; }
.main-nav .nav-link:hover .nav-neon { filter: drop-shadow(0 0 4px rgba(213,43,30,0.65)) drop-shadow(0 0 8px rgba(0,57,166,0.5)); transform: scale(1.06); }

/* === HERO === */
.hero { background: linear-gradient(180deg, #ffffff 0%, #F0F0F0 100%); }
.hero-inner { max-width: 1200px; margin: 0 auto; padding: 24px 20px 0 20px; }
.hero h1 { font-size: 32px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.2; color: #000000; margin-bottom: 10px; text-align: center; }
.hero .hero-subtitle { font-size: 15px; color: #000000; line-height: 1.6; margin: 0 auto 20px auto; max-width: 700px; text-align: center; }
.hero-stats { display: flex; gap: 12px; margin-bottom: 0; justify-content: center; }
.hero-stat { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; background: #FAFAFA; border: 1px solid #F0F0F0; border-radius: 8px; padding: 10px 8px; justify-content: center; max-width: 120px; }
.hero-stat svg { flex-shrink: 0; width: 20px; height: 20px; }
.hero-stat-number { display: block; font-size: 18px; font-weight: 800; color: #000000; line-height: 1; }
.hero-stat-label { display: block; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #6B7280; line-height: 1.2; }
.hero-author { display: flex; align-items: center; gap: 8px; justify-content: center; margin-bottom: 12px; }
.author-avatar { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; }
.author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hero-author .author-name { font-size: 13px; font-weight: 700; color: #000000; display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.verified-badge { flex-shrink: 0; }
.author-divider { width: 1px; height: 14px; background: #BDBDBD; flex-shrink: 0; }
.hero-author .author-role { font-size: 12px; color: #6B7280; white-space: nowrap; }
.cta-primary { display: inline-block; background: #E63946; color: #ffffff; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 14px 28px; border-radius: 6px; text-decoration: none; transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; box-shadow: 0 4px 14px rgba(230,57,70,0.3); }
.cta-primary:hover { background: #c5303b; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(230,57,70,0.4); color: #ffffff; }


/* === SLOTS DIVIDER === */
.slots-divider { background: linear-gradient(180deg, #F0F0F0 0%, #ffffff 100%); padding: 6px 0; overflow: hidden; width: 100%; }
.slots-divider-runner { display: flex; width: max-content; animation: scroll-slots 90s linear infinite; }
.slots-divider-track { display: flex; align-items: center; gap: 14px; opacity: 0.4; flex-shrink: 0; padding-right: 14px; }
.slots-divider .divider-symbol { font-size: 14px; font-weight: 800; color: #D52B1E; letter-spacing: 1px; white-space: nowrap; flex-shrink: 0; }
.slots-divider .divider-dot { width: 4px; height: 4px; border-radius: 50%; background: #BDBDBD; flex-shrink: 0; }
.slots-divider .divider-symbol-svg { flex-shrink: 0; display: block; }

@keyframes scroll-slots { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* === RANKING CASINOS === */
.ranking { background: #F0F0F0; }
.ranking .section-inner { padding-top: 6px; }
.ranking .section-inner h2 { margin-bottom: 10px; }

/* === CASINO CARD V2 === */
.casino-card-v2 { position: relative; background: #ffffff; border-radius: 12px; padding: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.04); border: 1px solid #F0F0F0; transition: box-shadow 0.3s ease; }
.casino-card-v2:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.1); }
.card-top-row { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; gap: 8px; position: relative; min-height: 50px; }
.card-position { background: #F0F0F0; color: #333333; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 4px; flex-shrink: 0; }
.card-position-gold { background: linear-gradient(135deg, #FFD700 0%, #D4A017 100%); color: #3a2a00; box-shadow: 0 2px 6px rgba(212, 160, 23, 0.4); }
.card-position-silver { background: linear-gradient(135deg, #E8E8E8 0%, #A8A8A8 100%); color: #333333; box-shadow: 0 2px 6px rgba(150, 150, 150, 0.35); }
.card-position-bronze { background: linear-gradient(135deg, #E6A664 0%, #8B4513 100%); color: #ffffff; box-shadow: 0 2px 6px rgba(139, 69, 19, 0.4); }
.card-top-row .card-logo { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.card-top-row .card-logo img, .card-top-row .card-logo > svg { display: block; max-height: 50px; width: auto; }
.card-top-rating { display: flex; align-items: center; gap: 4px; flex-shrink: 0; cursor: pointer; user-select: none; }
.card-score { font-size: 15px; font-weight: 700; color: #FFB703; }
.card-rating-toggle { font-size: 11px; color: #2196F3; cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.card-rating-toggle:hover { text-decoration: underline; }
.card-rating-toggle svg { transition: transform 0.2s ease; }
.card-rating-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.card-rating-detail { display: none; padding: 12px 0; margin: 0 -20px 8px -20px; padding-left: 20px; padding-right: 20px; background: #FAFAFA; border-top: 1px solid #F0F0F0; border-bottom: 1px solid #F0F0F0; }
.card-rating-detail.detail-open { display: block; }
.rating-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; color: #000000; }
.rating-row:last-child { margin-bottom: 0; }
.rating-row span:first-child { width: 120px; flex-shrink: 0; }
.rating-row span:last-child { width: 28px; flex-shrink: 0; text-align: right; font-weight: 700; }
.rating-bar { flex: 1; height: 6px; background: #e8e8e8; border-radius: 3px; overflow: hidden; }
.rating-fill { display: block; height: 100%; background: #FFB703; border-radius: 3px; }
.card-bonus { background: linear-gradient(135deg, #0039A6, #0052e0); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; text-align: center; }
.card-bonus-label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,0.7); margin-bottom: 4px; }
.card-bonus-value { display: block; font-size: 20px; font-weight: 800; color: #ffffff; line-height: 1.2; }
.card-bonus-extra { display: inline-block; background: #FFB703; color: #000000; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; margin-top: 6px; }
.card-stats-row { display: flex; gap: 8px; margin-bottom: 12px; }
.card-stat-item { flex: 1; text-align: center; background: #FAFAFA; border-radius: 6px; padding: 8px 4px; }
.card-stat-item .stat-label { display: block; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #6B7280; margin-bottom: 2px; }
.card-stat-item .stat-value { display: block; font-size: 13px; font-weight: 700; color: #000000; }
.card-top-slot { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin-bottom: 12px; }
.card-top-slot .detail-label { margin-bottom: 0; }
.top-slot-name { font-size: 13px; font-weight: 700; color: #000000; }
.casino-card-v2 .detail-label { display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #6B7280; margin-bottom: 6px; }
.card-icons-row { display: flex; gap: 12px; margin-bottom: 12px; align-items: flex-start; }
.card-icons-row .card-providers, .card-icons-row .card-payments { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; align-content: flex-start; }
.card-icons-row .detail-label { flex-basis: 100%; margin: 0; }
.card-icons-row .provider-icons, .card-icons-row .payment-icons { display: contents; }
.casino-card-v2 .card-icons-row .detail-dropdown-icons { display: none; }
.casino-card-v2 .card-icons-row .detail-dropdown-icons.dropdown-open { display: contents; background: none; padding: 0; margin: 0; }
.card-providers { margin-bottom: 0; }
.provider-icons { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.provider-icon { display: block; border-radius: 4px; overflow: hidden; }
.provider-icon img { display: block; width: 34px; height: 22px; object-fit: contain; }
.provider-icon svg { display: block; }
.providers-more { display: flex; align-items: center; justify-content: center; width: 34px; height: 22px; background: #F0F0F0; border-radius: 4px; font-size: 16px; font-weight: 700; line-height: 1; color: #6B7280; cursor: pointer; padding: 0; }
.providers-more:hover { background: #e0e0e0; }
.detail-toggle[aria-expanded="true"] { display: none !important; }
.detail-close { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 22px; background: #F0F0F0; color: #6B7280; border-radius: 4px; font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; user-select: none; transition: background 0.15s ease; }
.detail-close:hover { background: #e0e0e0; }
.card-payments { margin-bottom: 0; }
.payment-icons { display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap; }
.payment-icon { display: block; border-radius: 4px; overflow: hidden; }
.payment-icon img { display: block; width: 34px; height: 22px; object-fit: contain; }
.payments-more { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 22px; background: #F0F0F0; border-radius: 4px; font-size: 16px; font-weight: 700; line-height: 1; color: #6B7280; cursor: pointer; vertical-align: top; }
.payments-more:hover { background: #e0e0e0; }
.casino-card-v2 .detail-dropdown { display: none; font-size: 11px; color: #000000; line-height: 1.6; margin-top: 8px; padding: 8px 10px; background: #FAFAFA; border-radius: 6px; }
.casino-card-v2 .detail-dropdown.dropdown-open { display: block; }
.casino-card-v2 .detail-dropdown-icons { background: none; padding: 0; margin-top: 6px; border-radius: 0; }
.casino-card-v2 .detail-dropdown-icons.dropdown-open { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.card-cta { text-align: center; }
.cta-blue { display: inline-block; background: #D52B1E; color: #ffffff; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 12px 40px; border-radius: 6px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 0 10px rgba(213,43,30,0.4), 0 0 30px rgba(213,43,30,0.15); animation: neon-pulse 2s ease-in-out infinite; }
.cta-blue:hover { background: #e8332a; transform: translateY(-2px); box-shadow: 0 0 16px rgba(213,43,30,0.6), 0 0 40px rgba(213,43,30,0.3); color: #ffffff; }
.card-cta .casino-tc { display: block; margin-top: 6px; }
.casino-list { display: flex; flex-direction: column; gap: 16px; }
.ranking-trust-note { margin-top: 24px; font-size: 14px; color: #1a1a1a; line-height: 1.7; }
.casino-card { display: flex; align-items: center; gap: 20px; background: #ffffff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.04); border: 1px solid #F0F0F0; transition: box-shadow 0.3s ease, transform 0.2s ease; }
.casino-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.1); transform: translateY(-2px); }
.casino-card[data-position="1"] { border-left: 4px solid #FFB703; }
.casino-card[data-position="2"] { border-left: 4px solid #C0C0C0; }
.casino-card[data-position="3"] { border-left: 4px solid #CD7F32; }
.casino-position { flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
.casino-position span { font-size: 24px; font-weight: 800; color: #FFB703; }
.casino-card[data-position="1"] .casino-position span { font-size: 28px; }
.casino-info { flex: 1; min-width: 0; }
.casino-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.casino-name { font-size: 20px; font-weight: 800; color: #000000; }
.casino-rating { display: flex; align-items: center; gap: 8px; }
.casino-rating .stars { display: flex; gap: 2px; }
.casino-rating .rating-score { font-size: 14px; font-weight: 700; color: #FFB703; }
.casino-bonus { background: rgba(230,57,70,0.05); border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; }
.casino-bonus .bonus-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #6B7280; margin-bottom: 2px; }
.casino-bonus .bonus-value { font-size: 15px; font-weight: 700; color: #E63946; }
.casino-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { display: inline-block; background: #F0F0F0; color: #6B7280; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 4px; }
.casino-action { flex-shrink: 0; text-align: center; }
.casino-action .cta-primary { display: block; white-space: nowrap; font-size: 13px; padding: 12px 24px; }
.casino-tc { display: block; font-size: 11px; color: #6B7280; margin-top: 6px; }

/* === E-E-A-T SECTION === */
.eeat-section { background: #ffffff; }
.eeat-section .section-inner { padding-bottom: 10px; }
.eeat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 700px; margin: 0 auto; }
.eeat-card { perspective: 600px; cursor: pointer; height: 160px; }
.eeat-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s ease; transform-style: preserve-3d; }
.eeat-card.flipped .eeat-card-inner { transform: rotateY(180deg); }
.eeat-face { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; }
.eeat-front { background: #FAFAFA; border: 1px solid #F0F0F0; }
.eeat-front h3 { font-size: 14px; font-weight: 700; color: #000000; margin-top: 10px; text-align: center; }
.eeat-front .flip-hint { font-size: 10px; color: #6B7280; margin-top: 8px; display: flex; align-items: center; gap: 4px; }
.eeat-card { animation: hint-wobble 3s ease-in-out infinite; animation-delay: var(--wobble-delay, 0s); }
.eeat-card.flipped { animation: none; }
@keyframes hint-wobble { 0%, 90%, 100% { transform: rotateY(0deg); } 93% { transform: rotateY(8deg); } 96% { transform: rotateY(-5deg); } }
.eeat-back { transform: rotateY(180deg); }
.eeat-back-blue { background: rgba(0,57,166,0.8); }
.eeat-back-red { background: rgba(213,43,30,0.8); }
.eeat-back-logo { margin-bottom: 8px; opacity: 0.9; }
.eeat-back p { font-size: 12px; color: #ffffff; line-height: 1.6; margin: 0; text-align: center; }

/* === SLOTS GRID === */
.slots-section { background: #ffffff; }
.slots-section .section-inner { padding-top: 20px; }
.slots-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.slot-card { background: #ffffff; border-radius: 12px; overflow: hidden; border: 1px solid #F0F0F0; transition: transform 0.2s ease, box-shadow 0.3s ease; }
.slot-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.12); }
.slot-card-visual { position: relative; }
.slot-placeholder { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 8px; background: linear-gradient(135deg, #1a1a2e 0%, #0b0b20 100%); }
.slot-placeholder img { width: 100%; height: 100%; object-fit: contain; display: block; }
.slot-provider { position: absolute; bottom: 8px; left: 8px; background: rgba(0,0,0,0.6); color: #ffffff; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 4px; letter-spacing: 0.5px; }
.slot-card-info { padding: 16px; }
.slot-card-name { font-size: 16px; font-weight: 700; color: #000000; margin-bottom: 10px; }
.slot-card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.slot-card-stats .stat { font-size: 12px; color: #6B7280; }
.slot-card-stats .stat strong { color: #000000; }
.slot-card-experience { background: #FAFAFA; border: 1px solid #F0F0F0; border-radius: 8px; padding: 12px; margin-top: 12px; }
.slot-card-experience .experience-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; font-weight: 700; color: #000000; }
.slot-card-experience .experience-header svg { flex-shrink: 0; }
.slot-card-experience .exp-visible { font-size: 12px; color: #000000; line-height: 1.6; }
.slot-card-experience .exp-hidden { font-size: 12px; color: #000000; line-height: 1.6; display: none; }
.slot-card-experience .exp-hidden.exp-show { display: inline; }
.slot-card-experience .exp-ellipsis { font-size: 12px; color: #000000; }
.slot-card-experience .exp-toggle { font-size: 12px; color: #2196F3; font-weight: 600; cursor: pointer; }
.slot-card-experience .exp-toggle:hover { text-decoration: underline; }
.slot-card-experience .exp-body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--exp-lines, 4); line-clamp: var(--exp-lines, 4); overflow: hidden; }
.slot-card-experience.is-expanded .exp-body { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.slot-card-cta { display: block; text-align: center; background: #D52B1E; color: #ffffff; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 10px 20px; border-radius: 6px; text-decoration: none; margin-top: 12px; transition: all 0.3s ease; box-shadow: 0 0 10px rgba(213,43,30,0.4), 0 0 30px rgba(213,43,30,0.15); animation: neon-pulse 2s ease-in-out infinite; }
.slot-card-cta:hover { background: #e8332a; color: #ffffff; box-shadow: 0 0 16px rgba(213,43,30,0.6), 0 0 40px rgba(213,43,30,0.3); transform: translateY(-1px); }

@keyframes neon-pulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(213,43,30,0.4), 0 0 30px rgba(213,43,30,0.15);
    }
    50% {
        box-shadow: 0 0 16px rgba(213,43,30,0.6), 0 0 40px rgba(213,43,30,0.25);
    }
}

/* === METHODOLOGY === */
.methodology { background: #F0F0F0; }
.methodology-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.method-card { background: #ffffff; border-radius: 12px; padding: 28px; text-align: center; border: 1px solid transparent; border-top: 3px solid #E63946; transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease; }
.method-card:hover { border-color: #E63946; box-shadow: 0 8px 24px rgba(230,57,70,0.08); transform: translateY(-3px); }
.method-card .method-icon { margin-bottom: 16px; }
.method-card h3 { font-size: 16px; font-weight: 700; color: #000000; margin-bottom: 10px; }
.method-card p { font-size: 14px; color: #6B7280; line-height: 1.6; margin: 0; }

/* === EXPERT BOX === */
.expert-section { background: #ffffff; }
.expert-section .section-inner { padding-top: 8px; padding-bottom: 0; }
.expert-box { position: relative; background: #FAFAFA; border: 1px solid #F0F0F0; border-left: 4px solid #0039A6; border-radius: 12px; padding: 36px 24px 20px 24px; }
.expert-quote { position: absolute; top: -22px; left: 16px; pointer-events: none; }
.expert-content { margin-bottom: 14px; }
.expert-title { font-size: 18px; font-weight: 800; color: #000000; margin-bottom: 8px; text-align: center; }
.expert-text { font-size: 14px; color: #6B7280; line-height: 1.7; margin: 0; }
.expert-author { display: flex; align-items: center; gap: 10px; }
.expert-photo { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; }
.expert-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.expert-meta { display: flex; flex-direction: column; gap: 1px; }
.expert-name { font-size: 13px; font-weight: 700; color: #000000; display: inline-flex; align-items: center; gap: 3px; }
.expert-role { font-size: 11px; color: #6B7280; }

/* === SLOT TYPES === */
.themes-section { background: #ffffff; }
.slot-types-list { display: flex; flex-direction: column; gap: 40px; }
.slot-type-block h3 { font-size: 20px; font-weight: 800; color: #000000; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; padding-left: 14px; border-left: 4px solid #D52B1E; }
.slot-type-block p { font-size: 15px; color: #6B7280; line-height: 1.7; margin: 0 0 16px 0; }
.slot-type-carousel { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; scrollbar-width: none; touch-action: pan-x pan-y; overscroll-behavior-x: contain; }
.slot-type-carousel::-webkit-scrollbar { display: none; }
.slot-type-game { flex: 0 0 148px; scroll-snap-align: start; text-align: center; position: relative; outline: none; padding-left: 20px; }
.slot-type-rank { position: absolute; top: 50%; left: -8px; transform: translateY(-65%); z-index: 0; font-size: 100px; font-weight: 800; line-height: 1; color: rgba(0,57,166,0.18); pointer-events: none; }
.slot-type-img { width: 148px; height: 148px; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; z-index: 1; transition: transform 0.2s ease, box-shadow 0.3s ease; background: linear-gradient(135deg, #1a1a2e 0%, #0b0b20 100%); }
.slot-type-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.slot-type-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; color: #FFB703; letter-spacing: 0.05em; text-align: center; padding: 8px; line-height: 1.1; }
.slot-type-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; border-radius: 10px; opacity: 0; transition: opacity 0.25s ease; pointer-events: none; }
.slot-type-game:hover .slot-type-overlay, .slot-type-game.active .slot-type-overlay { opacity: 1; pointer-events: auto; }
.slot-type-cta { display: inline-block; background: #D52B1E; color: #ffffff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 12px; border-radius: 6px; text-decoration: none; white-space: nowrap; transition: background 0.2s ease; box-shadow: 0 0 10px rgba(213,43,30,0.5); }
.slot-type-cta:hover { background: #e8332a; color: #ffffff; }
.slot-type-game:hover .slot-type-img { transform: scale(1.03); box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
.slot-type-name { display: block; font-size: 11px; font-weight: 600; color: #000000; margin-top: 8px; line-height: 1.3; }

/* === TYPES === */
.types-section { background: #F0F0F0; }
.types-list { display: flex; flex-direction: column; gap: 16px; }
.type-item { background: #ffffff; border-radius: 12px; padding: 24px; border-left: 4px solid #2196F3; transition: box-shadow 0.3s ease, transform 0.2s ease; }
.type-item:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); transform: translateX(4px); }
.type-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.type-title { display: flex; align-items: center; gap: 10px; }
.type-icon { flex-shrink: 0; }
.type-header h3 { font-size: 18px; font-weight: 700; color: #000000; }
.type-tag { font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px; }
.type-tag.tag-low { background: rgba(33,150,243,0.1); color: #2196F3; }
.type-tag.tag-med { background: rgba(255,183,3,0.15); color: #c98f00; }
.type-tag.tag-high { background: rgba(230,57,70,0.1); color: #E63946; }
.type-item p { font-size: 15px; color: #6B7280; line-height: 1.7; margin: 0; }

/* === TEMATICAS MOSAIC === */
.tematicas-section { background: #F0F0F0; }
.tematicas-section .section-inner { padding-top: 24px; padding-bottom: 24px; }
.tematicas-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-items: start; }
.tematica-tile { border-radius: 12px; display: flex; flex-direction: column; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.3s ease; position: relative; overflow: hidden; }
.tematica-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.tematica-tile.tema-open { transform: none; box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.tematica-header { padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 120px; position: relative; background-size: cover; background-position: center; }
.tematica-header::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.45) 100%); pointer-events: none; }
.tematica-header-content { position: relative; margin: 0 8px; padding: 8px 12px; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); border-radius: 8px; }
.tematica-name { font-size: 15px; font-weight: 800; color: #ffffff; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 2px 6px rgba(0,0,0,0.5); display: block; }
.tematica-hint { font-size: 10px; color: rgba(255,255,255,0.7); display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 4px; }
.tematica-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; background: #ffffff; }
.tematica-tile.tema-open .tematica-body { border-top: 1px solid #F0F0F0; }
.tematica-body-inner { padding: 10px 12px; }
.tematica-top-slot { display: flex; align-items: center; gap: 5px; margin-bottom: 8px; }
.tematica-top-star { flex-shrink: 0; }
.tematica-top-name { font-size: 13px; font-weight: 700; color: #000000; }
.tematica-traits { display: flex; flex-direction: column; gap: 3px; margin-bottom: 0; }
.tematica-trait { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #000000; }
.tematica-trait::before { content: ''; flex-shrink: 0; width: 14px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5 4.5l-7 7L3 8' fill='none' stroke='%232d8a2d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; }
.tematica-desc { font-size: 12px; color: #6B7280; line-height: 1.6; margin: 0; }

/* === STEPS CAROUSEL === */
.steps-section { background: #ffffff; }
.steps-section .section-inner { padding-top: 24px; padding-bottom: 30px; }
.steps-carousel { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 10px; scrollbar-width: none; touch-action: pan-x pan-y; overscroll-behavior-x: contain; }
.steps-carousel::-webkit-scrollbar { display: none; }
.step-card { flex: 0 0 220px; scroll-snap-align: center; text-align: center; position: relative; }
.step-number { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #0039A6; color: #ffffff; font-size: 14px; font-weight: 800; margin-bottom: 12px; }
.step-phone { display: flex; justify-content: center; margin-bottom: 14px; }
.step-phone-frame { width: 180px; background: transparent; position: relative; }
.step-phone-notch { display: none; }
.step-phone-screen { width: 100%; background: transparent; border-radius: 0; }
.step-phone-screen img { width: 100%; height: auto; display: block; }
.step-phone-placeholder { width: 100%; display: flex; align-items: center; justify-content: center; }
.step-text { padding: 0 4px; }
.step-title { display: block; font-size: 14px; font-weight: 800; color: #000000; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.step-card p { font-size: 12px; color: #6B7280; line-height: 1.6; margin: 0; }
.steps-progress { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.steps-progress-track { flex: 1; height: 4px; background: #E0E0E0; border-radius: 2px; overflow: hidden; }
.steps-progress-fill { height: 100%; width: 20%; background: #0039A6; border-radius: 2px; transition: width 0.3s ease; }
.steps-progress-label { flex-shrink: 0; font-size: 12px; font-weight: 700; color: #6B7280; }

/* === SOFTWARE ACCORDION === */
.software-section { background: #ffffff; }
.software-section .section-inner { padding-top: 0; padding-bottom: 10px; }
.software-list { display: flex; flex-direction: column; gap: 0; }
.software-item { border-bottom: 1px solid #F0F0F0; }
.software-item:first-child { border-top: 1px solid #F0F0F0; }
.software-header { display: flex; align-items: center; gap: 14px; padding: 16px 0; cursor: pointer; user-select: none; transition: background 0.2s ease; }
.software-header:hover { padding-left: 6px; }
.software-logo { flex-shrink: 0; width: 48px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.software-logo img { width: 100%; height: 100%; object-fit: contain; }
.software-info { flex: 1; min-width: 0; }
.software-name { display: block; font-size: 16px; font-weight: 700; color: #000000; }
.software-count { display: block; font-size: 12px; font-weight: 600; color: #6B7280; }
.software-arrow { flex-shrink: 0; transition: transform 0.3s ease; }
.software-header[aria-expanded="true"] .software-arrow { transform: rotate(180deg); }
.software-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; padding: 0; }
.software-body.sw-open { padding: 0 0 20px 0; }
.software-body p { font-size: 14px; color: #6B7280; line-height: 1.7; margin: 0 0 16px 0; }

/* === BONUSES PODIUM === */
.bonuses-section { background: #F0F0F0; }
.bonuses-section .section-inner { padding-top: 24px; }
.bonuses-section .section-intro { margin-bottom: 20px; }
.podium { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; align-items: end; margin-bottom: 20px; }
.podium-card { background: #ffffff; border-radius: 12px; text-align: center; padding: 20px 14px 0 14px; position: relative; overflow: hidden; }
.podium-position { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: 14px; font-weight: 800; color: #ffffff; margin-bottom: 10px; }
.podium-gold { background: #FFB703; }
.podium-silver { background: #C0C0C0; }
.podium-bronze { background: #CD7F32; }
.podium-1 .podium-position { width: 36px; height: 36px; font-size: 16px; box-shadow: 0 0 12px rgba(255,183,3,0.4); }
.podium-logo { margin-bottom: 10px; }
.podium-logo img { max-height: 36px; width: auto; margin: 0 auto; display: block; }
.podium-bonus { margin-bottom: 12px; }
.podium-bonus-value { display: block; font-size: 14px; font-weight: 800; color: #000000; line-height: 1.3; }
.podium-1 .podium-bonus-value { font-size: 16px; }
.podium-bonus-extra { display: inline-block; background: #FFB703; color: #000000; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 12px; margin-top: 4px; }
.podium-checks { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; margin-bottom: 14px; padding: 0 2px; }
.podium-check { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: #000000; text-align: left; }
.podium-cta { display: block; background: #D52B1E; color: #ffffff; font-size: 11px; font-weight: 800; text-align: center; padding: 7px 8px; border-radius: 6px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.2px; margin: 0 -2px 12px; white-space: nowrap; transition: background 0.2s ease, transform 0.2s ease; }
.podium-cta:hover { background: #b52217; transform: translateY(-1px); color: #ffffff; }
.podium-1 .podium-cta { font-size: 12px; padding: 8px 8px; }
.podium-step { height: 8px; margin: 0 -14px; }
.podium-step-gold { background: linear-gradient(90deg, #FFB703, #e6a500); height: 12px; }
.podium-step-silver { background: linear-gradient(90deg, #C0C0C0, #a8a8a8); }
.podium-step-bronze { background: linear-gradient(90deg, #CD7F32, #b06a28); }
.podium-1 { order: 2; }
.podium-2 { order: 1; }
.podium-3 { order: 3; }
.bonus-extra-text { font-size: 15px; color: #6B7280; line-height: 1.7; margin: 20px 0; }
.bonus-buy-card { background: #ffffff; border: 2px solid #D52B1E; border-radius: 14px; padding: 24px 20px; margin-top: 20px; position: relative; overflow: hidden; }
.bonus-buy-card::before { content: ''; position: absolute; top: -50px; right: -50px; width: 140px; height: 140px; background: radial-gradient(circle, rgba(213,43,30,0.06) 0%, transparent 70%); pointer-events: none; }
.bonus-buy-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(213,43,30,0.08); padding: 5px 12px; border-radius: 20px; margin-bottom: 12px; }
.bonus-buy-badge span { font-size: 11px; font-weight: 700; color: #D52B1E; text-transform: uppercase; letter-spacing: 0.5px; }
.bonus-buy-card h3 { font-size: 18px; font-weight: 800; color: #000000; margin-bottom: 8px; }
.bonus-buy-intro { font-size: 14px; color: #6B7280; line-height: 1.7; margin: 0 0 20px 0; }
.bonus-buy-how { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.bonus-buy-step { display: flex; align-items: flex-start; gap: 12px; }
.bonus-buy-step-num { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #D52B1E; color: #ffffff; font-size: 13px; font-weight: 800; }
.bonus-buy-step-text { flex: 1; }
.bonus-buy-step-title { display: block; font-size: 14px; font-weight: 700; color: #000000; margin-bottom: 2px; }
.bonus-buy-step-desc { display: block; font-size: 12px; color: #6B7280; line-height: 1.5; }
.bonus-buy-warn { display: flex; align-items: flex-start; gap: 8px; background: rgba(255,183,3,0.08); border: 1px solid rgba(255,183,3,0.25); border-radius: 8px; padding: 10px 12px; }
.bonus-buy-warn span { font-size: 11px; color: #6B7280; line-height: 1.5; }
.bonuses-section .expert-box { margin-top: 0; }
.bonus-warning { display: flex; align-items: flex-start; gap: 14px; background: rgba(230,57,70,0.05); border: 1px solid rgba(230,57,70,0.15); border-radius: 10px; padding: 16px; }
.bonus-warning svg { flex-shrink: 0; margin-top: 2px; }
.bonus-warning p { font-size: 13px; color: #6B7280; margin: 0; line-height: 1.6; }

/* === DEMOS === */
.demos-section { background: #ffffff; }
.demos-section .section-inner { padding-top: 24px; }
.demo-player { border-radius: 14px; overflow: hidden; border: 1px solid #F0F0F0; }
.demo-player-screen { width: 100%; aspect-ratio: 16 / 10; overflow: hidden; position: relative; }
.demo-player-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.demo-player-placeholder { width: 100%; height: 100%; background: linear-gradient(160deg, #2c0a3e, #4a1259, #1a0a2e, #0d2140); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.demo-player-game { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 1px; }
.demo-slot-machine { display: flex; gap: 6px; margin-bottom: 12px; }
.demo-reel-frame { width: 70px; height: 80px; overflow: hidden; background: rgba(0,0,0,0.3); border-radius: 8px; border: 2px solid rgba(255,255,255,0.1); position: relative; }
.demo-reel-frame::before, .demo-reel-frame::after { content: ''; position: absolute; left: 0; right: 0; height: 20px; z-index: 1; pointer-events: none; }
.demo-reel-frame::before { top: 0; background: linear-gradient(180deg, rgba(44,10,62,0.9) 0%, transparent 100%); }
.demo-reel-frame::after { bottom: 0; background: linear-gradient(0deg, rgba(44,10,62,0.9) 0%, transparent 100%); }
.demo-reel { display: flex; flex-direction: column; animation: reel-spin 2.5s ease-in-out infinite; }
#demoReel2 { animation-delay: 0.3s; animation-duration: 3s; }
#demoReel3 { animation-delay: 0.6s; animation-duration: 3.5s; }
.demo-sym { display: flex; align-items: center; justify-content: center; height: 40px; flex-shrink: 0; font-size: 22px; font-weight: 800; }
.demo-sym-7 { color: #D52B1E; text-shadow: 0 0 8px rgba(213,43,30,0.5); }
.demo-sym-bar { color: #FFB703; font-size: 14px; letter-spacing: 2px; text-shadow: 0 0 8px rgba(255,183,3,0.5); }
@keyframes reel-spin {
    0%, 15% { transform: translateY(0); }
    25%, 40% { transform: translateY(-40px); }
    50%, 65% { transform: translateY(-80px); }
    75%, 90% { transform: translateY(-120px); }
    100% { transform: translateY(0); }
}
.demo-player-info { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #1a1a2e; }
.demo-player-name { font-size: 14px; font-weight: 800; color: #ffffff; text-transform: uppercase; letter-spacing: 0.5px; }
.demo-player-rtp { font-size: 12px; font-weight: 700; color: #FFB703; }
.demo-player-actions { display: flex; gap: 10px; padding: 14px 16px; background: #ffffff; }
.demo-btn { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 12px 10px; border-radius: 8px; text-decoration: none; transition: all 0.2s ease; line-height: 1.4; min-height: 52px; }
.demo-btn-real { background: #D52B1E; color: #ffffff; box-shadow: 0 0 10px rgba(213,43,30,0.4); }
.demo-btn-real:hover { background: #e8332a; color: #ffffff; box-shadow: 0 0 16px rgba(213,43,30,0.6); }
.demo-btn-free { background: #ffffff; color: #000000; border: 1px solid #E0E0E0; cursor: pointer; font-family: inherit; }
.demo-btn-free:hover { background: #F0F0F0; color: #000000; }
.demo-unavailable-note { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 11px; font-weight: 500; color: #6B7280; padding: 12px 10px; border-radius: 8px; background: #FAFAFA; border: 1px dashed #E0E0E0; line-height: 1.4; min-height: 52px; }
.demo-player-gif { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Demo modal */
.demo-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 16px; }
.demo-modal.is-open { display: flex; }
.demo-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(4px); cursor: pointer; }
.demo-modal-dialog { position: relative; width: 100%; max-width: 960px; background: #1a1a2e; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.5); animation: demoModalIn 0.25s ease; }
.demo-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 52px 14px 20px; background: linear-gradient(90deg, #D52B1E, #0039A6); color: #ffffff; }
.demo-modal-title { font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }
.demo-modal-meta { font-size: 12px; font-weight: 600; opacity: 0.85; }
.demo-modal-body { position: relative; width: 100%; aspect-ratio: 16 / 10; background: #000000; }
.demo-modal-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.demo-modal-close { position: absolute; top: 10px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.15); color: #ffffff; border: 0; font-size: 24px; font-weight: 400; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; }
.demo-modal-close:hover { background: rgba(255,255,255,0.3); }
@keyframes demoModalIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
body.demo-modal-open { overflow: hidden; }
@media (max-width: 640px) {
    .demo-modal { padding: 0; }
    .demo-modal-dialog { max-width: 100%; height: 100%; border-radius: 0; display: flex; flex-direction: column; }
    .demo-modal-body { flex: 1; aspect-ratio: auto; }
}
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.pros-col, .cons-col { background: #FAFAFA; border-radius: 10px; padding: 16px; border: 1px solid #F0F0F0; }
.pros-title { display: block; font-size: 14px; font-weight: 800; color: #2d8a2d; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #2d8a2d; }
.cons-title { display: block; font-size: 14px; font-weight: 800; color: #6B7280; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #6B7280; }
.pros-list, .cons-list { display: flex; flex-direction: column; gap: 8px; }
.pros-item, .cons-item { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; font-weight: 600; color: #000000; line-height: 1.4; }
.pros-item svg, .cons-item svg { flex-shrink: 0; margin-top: 1px; }

/* === MOBILE / APP === */
.mobile-section { background: #F0F0F0; }
.app-pick { background: #ffffff; border-radius: 12px; border: 1px solid #F0F0F0; overflow: hidden; }
.app-pick-header { background: linear-gradient(135deg, #0039A6, #001d5e); padding: 10px 16px; }
.app-pick-badge { display: flex; align-items: center; gap: 6px; }
.app-pick-badge span { font-size: 12px; font-weight: 700; color: #ffffff; text-transform: uppercase; letter-spacing: 0.5px; }
.app-pick-body { display: flex; align-items: center; gap: 14px; padding: 16px; }
.app-pick-logo { flex-shrink: 0; }
.app-pick-logo img { max-height: 36px; width: auto; display: block; }
.app-pick-info { flex: 1; }
.app-pick-name { display: block; font-size: 18px; font-weight: 800; color: #000000; margin-bottom: 4px; }
.app-pick-rating { display: flex; align-items: center; gap: 2px; }
.app-pick-score { font-size: 14px; font-weight: 700; color: #FFB703; margin-left: 6px; }
.app-pick-highlights { display: flex; flex-direction: column; gap: 6px; padding: 0 16px 16px 16px; }
.app-pick-check { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #000000; }
.app-pick-cta { text-align: center; padding: 0 16px 16px 16px; }
.app-pick-cta .casino-tc { display: block; margin-top: 6px; }

/* === PAYMENTS === */
.payments-section { background: #ffffff; }
.payments-section .section-inner { padding-top: 24px; padding-bottom: 24px; }
.payments-section .section-intro { margin-bottom: 16px; }
.pay-list { display: flex; flex-direction: column; gap: 0; }
.pay-header-row { display: flex; align-items: center; gap: 12px; padding: 0 0 8px 0; }
.pay-header-spacer { flex-shrink: 0; width: 60px; }
.pay-header-labels { flex: 1; display: flex; gap: 6px; }
.pay-header-label { flex: 1; text-align: center; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #6B7280; }
.pay-header-spacer-cta { flex-shrink: 0; width: 62px; }
.pay-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid #F0F0F0; }
.pay-row:first-child { border-top: 1px solid #F0F0F0; }
.pay-logo { flex-shrink: 0; }
.pay-logo img { width: 60px; height: 28px; object-fit: contain; display: block; }
.pay-stats { flex: 1; display: flex; gap: 6px; min-width: 0; }
.pay-stat { flex: 1; text-align: center; }
.pay-label { display: block; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: #6B7280; margin-bottom: 2px; }
.pay-value { display: block; font-size: 12px; font-weight: 700; color: #000000; }
.pay-free { color: #2d8a2d; }
.pay-cta { flex-shrink: 0; display: inline-block; background: #D52B1E; color: #ffffff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 14px; border-radius: 6px; text-decoration: none; transition: all 0.2s ease; box-shadow: 0 0 8px rgba(213,43,30,0.3); }
.pay-cta:hover { background: #e8332a; color: #ffffff; box-shadow: 0 0 14px rgba(213,43,30,0.5); }

/* === STRATEGIES === */
.strategies-section { background: #F0F0F0; }
.strategies-section .section-inner { padding-top: 24px; }
.strategy-tips { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; scrollbar-width: none; touch-action: pan-x pan-y; overscroll-behavior-x: contain; }
.strategy-tips::-webkit-scrollbar { display: none; }
.strategy-tip { flex: 0 0 280px; scroll-snap-align: start; background: #ffffff; border-radius: 12px; padding: 20px; position: relative; }
.strategy-tip-quote { position: absolute; top: 10px; right: 12px; pointer-events: none; opacity: 0.15; }
.strategy-tip h3 { font-size: 15px; font-weight: 800; color: #000000; margin-bottom: 8px; padding-right: 24px; }
.strategy-tip p { font-size: 13px; color: #6B7280; line-height: 1.7; margin: 0 0 10px 0; }
.strategy-tip-user { display: flex; align-items: baseline; gap: 4px; font-size: 11px; color: #6B7280; }
.strategy-tip-user .tip-user-name { font-weight: 700; color: #000000; }
.strategy-tip-user .tip-user-name::after { content: ','; }
.strategy-tip-user .tip-user-city { color: #6B7280; }

/* === HIGHLIGHT SECTIONS === */
.highlight-section { background: #ffffff; }
.highlight-section .section-inner { padding-top: 10px; padding-bottom: 10px; }

/* === SECURITY === */
.security-section { background: #ffffff; }
.security-section .section-inner { padding-top: 24px; padding-bottom: 24px; }
.security-section h3 { font-size: 20px; font-weight: 800; color: #000000; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.5px; }
.security-section p { font-size: 15px; color: #6B7280; line-height: 1.7; margin: 0 0 14px 0; }
.scj-card { display: flex; align-items: center; gap: 14px; background: #FAFAFA; border: 1px solid #F0F0F0; border-radius: 10px; padding: 14px; margin: 16px 0; }
.scj-logo-link { flex-shrink: 0; display: block; }
.scj-logo { flex-shrink: 0; }
.scj-logo img { width: 140px; height: auto; display: block; }
.scj-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.scj-name { font-size: 13px; font-weight: 700; color: #000000; }
.scj-desc { font-size: 11px; color: #6B7280; }
.scj-contact { font-size: 12px; color: #2196F3; font-weight: 600; text-decoration: none; }
.scj-contact:hover { text-decoration: underline; }

/* === AUTHOR HERO === */
.author-section { background: #ffffff; padding: 0; }
.author-section .section-inner { padding-top: 4px; padding-bottom: 16px; }
.author-hero { position: relative; max-width: 820px; margin: 0 auto; border-radius: 20px; overflow: hidden; background: #ffffff; box-shadow: 0 12px 40px -12px rgba(0, 57, 166, 0.22), 0 4px 12px rgba(0, 0, 0, 0.06); border: 1px solid #ECECEC; isolation: isolate; }
.author-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 56px; background: linear-gradient(90deg, #D52B1E 0%, #E63946 50%, #0039A6 100%); z-index: 0; }
.author-hero::after { content: ''; position: absolute; top: 0; right: 0; width: 140px; height: 140px; background: radial-gradient(circle at top right, rgba(255, 183, 3, 0.18) 0%, transparent 70%); z-index: 0; pointer-events: none; }
.author-hero-label { position: absolute; top: 16px; left: 0; right: 0; text-align: center; font-size: 15px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: #ffffff; z-index: 2; }
.author-hero-bg { display: none; }
.author-hero-grid { position: relative; padding: 72px 24px 20px 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; z-index: 1; }
.author-hero-photo { position: relative; width: 128px; height: 128px; flex-shrink: 0; margin-top: 6px; }
.author-hero-ring { position: absolute; inset: -5px; border-radius: 50%; background: conic-gradient(from 0deg, #FFB703, #D52B1E, #0039A6, #FFB703, #D52B1E, #FFB703); animation: authorSpin 14s linear infinite; z-index: 0; }
.author-hero-ring::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #ffffff; }
.author-hero-avatar { position: relative; width: 100%; height: 100%; border-radius: 50%; z-index: 1; display: block; object-fit: cover; background: #ffffff; }
.author-hero-photo img { position: relative; width: 100%; height: 100%; border-radius: 50%; z-index: 1; display: block; object-fit: cover; }
.author-hero-flag { position: absolute; bottom: -2px; right: -2px; z-index: 2; width: 38px; height: 26px; border-radius: 4px; background: #ffffff; padding: 2px; box-shadow: 0 4px 12px rgba(0,0,0,0.18); display: flex; align-items: center; justify-content: center; border: 2px solid #ffffff; }
.author-hero-flag svg { width: 100%; height: 100%; border-radius: 2px; }
.author-hero-info { max-width: 560px; }
.author-hero-name { font-size: 26px; font-weight: 800; color: #000000; margin: 0 0 4px 0; display: inline-flex; align-items: center; gap: 8px; letter-spacing: -0.02em; text-transform: none; line-height: 1.15; }
.author-hero-role { display: block; font-size: 11px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: #D52B1E; margin-bottom: 14px; }
.author-hero-bio { font-size: 15px; line-height: 1.7; color: #1a1a1a; margin: 0; }
.author-hero-stats { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: #ffffff; border-top: 1px solid #ECECEC; padding: 0; z-index: 1; }
.author-stat { padding: 18px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; }
.author-stat + .author-stat::before { content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px; background: #E0E0E0; }
.author-stat-num { font-size: 26px; font-weight: 800; color: #D52B1E; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.author-stat-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #6B7280; text-align: center; line-height: 1.3; }
@keyframes authorSpin { to { transform: rotate(360deg); } }
@media (min-width: 640px) {
    .author-hero-grid { flex-direction: row; text-align: left; gap: 28px; padding: 80px 32px 28px 32px; align-items: center; }
    .author-hero-name { font-size: 30px; }
    .author-stat-num { font-size: 30px; }
}
@media (max-width: 380px) {
    .author-hero-photo { width: 112px; height: 112px; }
    .author-hero-name { font-size: 22px; }
    .author-hero-bio { font-size: 14px; }
    .author-stat-num { font-size: 22px; }
    .author-stat-label { font-size: 9.5px; }
}

/* === FAQ === */
.faq-section { background: #ffffff; }
.faq-section .section-inner { padding-top: 24px; }
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid #F0F0F0; }
.faq-question { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; font-size: 16px; font-weight: 700; color: #000000; cursor: pointer; user-select: none; gap: 16px; transition: color 0.2s ease, padding-left 0.2s ease; }
.faq-question:hover { color: #E63946; padding-left: 8px; }
.faq-question .faq-icon { flex-shrink: 0; transition: transform 0.3s ease; }
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; padding: 0 0; transition: max-height 0.35s ease, padding 0.35s ease; }
.faq-answer p { font-size: 15px; color: #6B7280; line-height: 1.7; margin: 0; }

/* === FOOTER === */
.site-footer { background: #1A1A2E; color: rgba(255,255,255,0.7); }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 40px; padding: 48px 0 32px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 14px; }
.footer-logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.footer-logo-text .logo-top { font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.footer-logo-text .logo-bottom { font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.footer-logo-text .logo-cl-red { color: #D52B1E; }
.footer-logo-text .logo-cl-blue { color: #4a8fe7; }
.footer-desc { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.5); }
.footer-links .footer-heading { display: block; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #ffffff; margin-bottom: 16px; }
.footer-links ul li { margin-bottom: 8px; }
.footer-links ul li a { font-size: 14px; color: rgba(255,255,255,0.5); text-decoration: none; transition: color 0.2s ease; }
.footer-links ul li a:hover { color: #FFB703; }
.footer-responsible .footer-heading { display: block; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #ffffff; margin-bottom: 16px; }
.footer-responsible p { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.5); margin-bottom: 14px; }
.responsible-badges { display: flex; gap: 10px; }
.responsible-badge { display: inline-block; border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.7); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 4px; }
.footer-bottom { padding: 20px 0; text-align: center; }
.footer-bottom p { font-size: 12px; color: rgba(255,255,255,0.3); margin: 0; }

/* === RESPONSIVE: TABLET (768px) === */
@media (max-width: 768px) {
    .nav-toggle {
        display: block;
    }
    .main-nav .nav-list {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: #ffffff;
        flex-direction: column;
        padding: 20px;
        gap: 0;
        box-shadow: 0 8px 24px rgba(0,0,0,0.1);
        border-top: 1px solid #F0F0F0;
    }
    .main-nav .nav-list.nav-open {
        display: flex;
    }
    .main-nav .nav-list {
        align-items: flex-start;
    }
    .main-nav .nav-item {
        width: 100%;
    }
    .main-nav .nav-list li .nav-link {
        display: flex;
        width: 100%;
        justify-content: flex-start;
        align-items: center;
        gap: 20px;
        min-height: 56px;
        padding: 8px 0;
        border-bottom: 1px solid #F0F0F0;
        text-align: left;
        background: none;
        color: #000000;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-size: 14px;
        font-weight: 600;
        font-family: inherit;
        text-decoration: none;
        cursor: pointer;
    }
    .main-nav .nav-list li button.nav-link {
        border: 0;
        margin: 0;
    }
    .main-nav .nav-neon {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
    }
    .main-nav .nav-neon svg {
        display: block;
    }
    .main-nav .nav-caret {
        margin-left: auto;
    }
    .main-nav .nav-sub {
        display: none;
        position: static;
        box-shadow: none;
        border: 0;
        background: #FAFAFA;
        border-radius: 0;
        padding: 0;
        margin: 0 -20px;
        min-width: auto;
    }
    .main-nav .nav-item.is-open .nav-sub { display: flex; }
    .main-nav .nav-item.is-open .nav-caret { transform: rotate(180deg); }
    .main-nav .nav-list li .nav-sub a {
        display: block;
        padding: 12px 20px 12px 64px;
        font-size: 14px;
        border-bottom: 1px solid #F0F0F0;
        color: #000000;
    }
    .main-nav .nav-sub a:hover { background: #EAF1FB; color: #0039A6; }
    .slots-divider-runner {
        animation-duration: 60s;
    }
    .hero-inner {
        padding: 24px 20px 10px 20px;
    }
    .hero h1 {
        font-size: 22px;
    }
    .hero-stats {
        justify-content: center;
    }
    .section-inner h2 {
        font-size: 24px;
    }
    .casino-card {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .casino-header {
        justify-content: center;
    }
    .casino-tags {
        justify-content: center;
    }
    .casino-position {
        width: auto;
        height: auto;
    }
    .slots-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .methodology-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .expert-box {
        padding: 32px 16px 16px 16px;
    }
    .slot-types-list {
        gap: 32px;
    }
    .tematicas-grid {
        gap: 10px;
    }
    .tematica-header {
        min-height: 100px;
        padding: 16px 10px;
    }
    .strategy-tip {
        flex: 0 0 260px;
    }
    .podium-bonus-value {
        font-size: 12px;
    }
    .podium-1 .podium-bonus-value {
        font-size: 14px;
    }
    .podium-card {
        padding: 16px 8px 0 8px;
    }
    .podium-check {
        font-size: 10px;
    }
    .podium-bonus-extra {
        font-size: 9px;
    }
    .pros-cons {
        gap: 8px;
    }
    .pros-item, .cons-item {
        font-size: 11px;
    }
    .app-pick-name {
        font-size: 16px;
    }
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

/* === RESPONSIVE: MOBILE (480px) === */
@media (max-width: 480px) {
    .hero h1 {
        font-size: 20px;
    }
    .hero .hero-subtitle {
        font-size: 13px;
    }
    .hero-stat {
        padding: 12px 10px;
        max-width: 110px;
    }
    .hero-stat-number {
        font-size: 18px;
    }
    .section-inner {
        padding: 40px 16px;
    }
    .section-inner h2 {
        font-size: 20px;
    }
    .slots-grid {
        grid-template-columns: 1fr;
    }
    .methodology-grid {
        grid-template-columns: 1fr;
    }
    .slot-type-block h3 {
        font-size: 18px;
    }
    .slot-type-game {
        flex: 0 0 132px;
    }
    .slot-type-img {
        width: 132px;
        height: 132px;
    }
    .slot-type-rank {
        font-size: 84px;
    }
    .software-name {
        font-size: 14px;
    }
    .strategy-tip {
        flex: 0 0 240px;
    }
    .strategy-tip h3 {
        font-size: 14px;
    }
    .strategy-tip p {
        font-size: 12px;
    }
    .footer-top {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .casino-card {
        padding: 16px;
    }
    .pay-stats {
        gap: 4px;
    }
    .pay-value {
        font-size: 11px;
    }
    .pay-cta {
        padding: 8px 10px;
        font-size: 10px;
    }
}

/* Steps nav + carousel arrows: ocultos por defecto (solo visibles en desktop) */
.steps-nav-btn,
.carousel-arrow { display: none; }

/* =========================================================================
   DESKTOP (>= 1024px) — solo añadidos. NO tocar reglas móviles existentes.
   ========================================================================= */
@media (min-width: 1024px) {
    /* --- Main ranking card — layout horizontal (test en primera caja) --- */
    .casino-list .casino-card-v2 {
        display: grid;
        grid-template-columns: 150px repeat(3, auto) auto auto 1fr 220px;
        grid-template-rows: auto auto auto;
        column-gap: 18px;
        row-gap: 14px;
        padding: 22px 28px 22px 28px;
        align-items: center;
        position: relative;
    }
    .casino-list .casino-card-v2 .card-top-row,
    .casino-list .casino-card-v2 .card-stats-row,
    .casino-list .casino-card-v2 .card-icons-row {
        display: contents;
    }
    /* Ocultos en desktop */
    .casino-list .casino-card-v2 .card-top-slot {
        display: none;
    }
    /* Badge #1 absoluto arriba-izquierda */
    .casino-list .casino-card-v2 .card-position {
        position: absolute;
        top: 10px;
        left: 12px;
        margin: 0;
        z-index: 2;
    }
    /* Logo: col 1, abarca filas 1-2 (info + bono) */
    .casino-list .casino-card-v2 .card-logo {
        position: static;
        transform: none;
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: center;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 0;
    }
    .casino-list .casino-card-v2 .card-logo img {
        max-height: 72px;
        max-width: 140px;
        width: auto;
    }
    /* 3 stats (depósito/slots/licencia): cols 2-4, row 1, sin fondo gris */
    .casino-list .casino-card-v2 .card-stat-item {
        grid-row: 1;
        background: transparent;
        padding: 0;
        text-align: center;
        min-width: 78px;
    }
    .casino-list .casino-card-v2 .card-stat-item .stat-label {
        font-size: 10px;
        margin-bottom: 4px;
    }
    .casino-list .casino-card-v2 .card-stat-item .stat-value {
        font-size: 14px;
    }
    /* Softwares y Pagos: cols 5-6, row 1, grid 5 cols (4 iconos + "+") */
    .casino-list .casino-card-v2 .card-providers,
    .casino-list .casino-card-v2 .card-payments {
        grid-row: 1;
        display: grid;
        grid-template-columns: repeat(5, 34px);
        column-gap: 4px;
        row-gap: 4px;
        align-items: center;
        justify-items: start;
        min-width: 0;
    }
    .casino-list .casino-card-v2 .card-providers .detail-label,
    .casino-list .casino-card-v2 .card-payments .detail-label {
        grid-column: 1 / -1;
        margin: 0 0 2px 0;
    }
    /* Aplanar contenedores internos: todos los iconos pasan a ser flex items del grupo */
    .casino-list .casino-card-v2 .card-providers .provider-icons,
    .casino-list .casino-card-v2 .card-payments .payment-icons,
    .casino-list .casino-card-v2 .card-providers .detail-dropdown-icons,
    .casino-list .casino-card-v2 .card-payments .detail-dropdown-icons {
        display: contents;
    }
    /* Mostrar 4 logos por grupo: 3 visibles + 1er icono del dropdown siempre visible */
    .casino-list .casino-card-v2 .card-providers .detail-dropdown-icons > .provider-icon:not(:first-child),
    .casino-list .casino-card-v2 .card-providers .detail-dropdown-icons > .detail-close,
    .casino-list .casino-card-v2 .card-payments .detail-dropdown-icons > .payment-icon:not(:first-child),
    .casino-list .casino-card-v2 .card-payments .detail-dropdown-icons > .detail-close {
        display: none;
    }
    /* Al abrir el "+": mostrar el resto. Como flex-wrap está activo en el grupo, envuelven debajo */
    .casino-list .casino-card-v2 .card-providers .detail-dropdown-icons.dropdown-open > .provider-icon,
    .casino-list .casino-card-v2 .card-payments .detail-dropdown-icons.dropdown-open > .payment-icon {
        display: block;
    }
    .casino-list .casino-card-v2 .card-providers .detail-dropdown-icons.dropdown-open > .detail-close,
    .casino-list .casino-card-v2 .card-payments .detail-dropdown-icons.dropdown-open > .detail-close {
        display: inline-flex;
    }
    /* Empujar "+" al final de la fila de 4 iconos */
    .casino-list .casino-card-v2 .providers-more,
    .casino-list .casino-card-v2 .payments-more {
        order: 1;
    }
    /* Bono: row 2, ocupa cols 2..7 (logo en col 1 abarca ambas filas) */
    .casino-list .casino-card-v2 .card-bonus {
        grid-column: 2 / 8;
        grid-row: 2;
        background: transparent;
        padding: 0;
        margin: 0;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px 14px;
    }
    .casino-list .casino-card-v2 .card-bonus-label {
        margin: 0;
        flex-shrink: 0;
        color: #6B7280;
        background: transparent;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1.5px;
    }
    .casino-list .casino-card-v2 .card-bonus-value {
        background: linear-gradient(135deg, #0039A6, #0052e0);
        color: #ffffff;
        padding: 10px 18px;
        border-radius: 10px;
        font-size: 18px;
        line-height: 1.2;
    }
    .casino-list .casino-card-v2 .card-bonus-extra {
        margin: 0;
        padding: 6px 14px;
    }
    /* Columna derecha (rating + CTA + T&C): col 8, spans rows 1-2 */
    .casino-list .casino-card-v2 .card-top-rating {
        grid-column: 8;
        grid-row: 1;
        justify-content: center;
        justify-self: stretch;
        cursor: pointer;
    }
    .casino-list .casino-card-v2 .card-top-rating .card-score {
        font-size: 18px;
    }
    /* Toggle del rating VISIBLE en desktop (para expandir subscores) */
    .casino-list .casino-card-v2 .card-rating-toggle {
        display: inline-flex;
    }
    .casino-list .casino-card-v2 .card-cta {
        grid-column: 8;
        grid-row: 2;
        align-self: center;
        justify-self: stretch;
    }
    .casino-list .casino-card-v2 .card-cta .cta-blue {
        display: block;
        width: 100%;
        padding: 14px 24px;
    }
    /* Rating detail expandible — row 3, span ancho completo cuando abierto */
    .casino-list .casino-card-v2 .card-rating-detail {
        grid-column: 1 / -1;
        grid-row: 3;
        margin: 6px -28px 0 -28px;
        padding: 14px 28px;
    }

    /* --- Párrafos de contenido: aumentar tamaño en desktop --- */
    .hero .hero-subtitle { font-size: 17px; line-height: 1.65; }
    .section-intro { font-size: 18px; line-height: 1.7; }
    .ranking-trust-note { font-size: 16px; line-height: 1.75; }
    .expert-text { font-size: 16px; line-height: 1.75; }
    .bonus-extra-text { font-size: 17px; line-height: 1.75; }
    .bonus-buy-intro { font-size: 16px; line-height: 1.75; }
    .strategy-tip p { font-size: 15px; line-height: 1.75; }
    .author-hero-bio { font-size: 17px; line-height: 1.75; }
    .faq-answer p { font-size: 17px; line-height: 1.75; }
    .section-inner > p,
    .type-item p,
    .software-item p { font-size: 17px; line-height: 1.75; }
    .steps-list .steps-text p { font-size: 16px; line-height: 1.7; }

    /* --- Hero stats más grandes y con más espacio debajo --- */
    .hero-inner { padding: 32px 20px 24px 20px; }
    .hero-stats { gap: 20px; }
    .hero-stat {
        max-width: 180px;
        padding: 18px 16px;
        gap: 6px;
    }
    .hero-stat svg { width: 26px; height: 26px; }
    .hero-stat-number { font-size: 26px; }
    .hero-stat-label { font-size: 11px; letter-spacing: 0.8px; }

    /* --- Ranking: más aire arriba y debajo del título --- */
    .ranking .section-inner { padding-top: 6px; }
    .ranking .section-inner h2 { margin-bottom: 36px; }

    /* --- Slots section: intro full width, centrado con h2 y grid --- */
    .slots-section .section-intro {
        max-width: none;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    /* --- Expert author (foto + nombre + rol) centrado en la caja --- */
    .expert-author {
        justify-content: center;
    }

    /* --- Slot type rank numbers: un pelín más visibles por detrás de las cajas --- */
    .slot-type-rank {
        left: -14px;
        font-size: 115px;
        color: rgba(0, 57, 166, 0.25);
    }
    .slot-type-game {
        padding-left: 26px;
    }
    /* Cursor grab en carruseles arrastrables */
    .slot-type-carousel,
    .strategy-tips {
        cursor: grab;
    }

    /* --- Podium de bonos rediseñado (desktop) --- */
    .podium-card {
        padding: 24px 20px 0 20px;
        position: relative;
    }
    .podium-position {
        position: absolute;
        top: 14px;
        left: 14px;
        margin-bottom: 0;
        z-index: 2;
    }
    .podium-1 .podium-position {
        top: 14px;
        left: 14px;
    }
    .podium-logo {
        margin-top: 4px;
        margin-bottom: 18px;
    }
    .podium-logo img {
        max-height: 60px;
    }
    .podium-1 .podium-logo img {
        max-height: 68px;
    }
    .podium-bonus {
        margin-bottom: 18px;
    }
    .podium-bonus-value {
        font-size: 18px;
    }
    .podium-1 .podium-bonus-value {
        font-size: 20px;
    }
    .podium-bonus-extra {
        font-size: 12px;
        padding: 4px 12px;
        margin-top: 8px;
    }
    .podium-checks {
        align-items: center;
        gap: 6px;
        padding: 0;
    }
    .podium-check {
        font-size: 13px;
    }
    .podium-cta {
        font-size: 13px;
        padding: 9px 14px;
        margin: 0 0 16px;
    }
    .podium-1 .podium-cta {
        font-size: 14px;
        padding: 10px 14px;
    }

    /* --- Jumpnav centrado en desktop --- */
    .jumpnav-scroll {
        justify-content: center;
    }

    /* --- Anchura unificada en párrafos y elementos de autor --- */
    .section-intro,
    .section-outro,
    .hero .hero-subtitle,
    .author-hero,
    .author-hero-info,
    .faq-list {
        max-width: none;
    }
    .section-outro { font-size: 18px; line-height: 1.7; color: #000000; }

    /* --- Tematicas: tiles más altos y contenido centrado --- */
    .tematica-header { min-height: 200px; }
    .tematica-body-inner {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .tematica-top-slot {
        justify-content: center;
    }
    .tematica-traits {
        align-items: center;
    }

    /* --- Strategy tips: quitar reveal animation (evita movimiento al scrollear) --- */
    .strategy-tip {
        opacity: 1 !important;
        transform: none !important;
        transition: box-shadow 0.2s ease;
    }

    /* --- Todos los headings dentro de section-inner centrados --- */
    .section-inner h3,
    .security-section h3 {
        text-align: center;
    }
    .slot-type-block h3 {
        padding-left: 0;
        border-left: 0;
    }

    /* --- Color negro en párrafos + textos pequeños ampliados (desktop) --- */
    .section-intro,
    .ranking-trust-note,
    .expert-text,
    .bonus-buy-intro,
    .bonus-extra-text,
    .bonus-buy-step-desc,
    .type-item p,
    .slot-type-block p,
    .software-body p,
    .strategy-tip p,
    .security-section p,
    .faq-answer p,
    .section-inner > p {
        color: #000000;
    }
    .hero-author .author-role { color: #3a3a3a; }
    .slot-card-experience .experience-header { font-size: 14px; }
    .slot-card-experience .exp-visible,
    .slot-card-experience .exp-hidden,
    .slot-card-experience .exp-toggle { font-size: 14px; }
    .slot-card-stats .stat { font-size: 14px; color: #000000; }
    .slot-card-stats .stat strong { color: #000000; }
    .slot-provider { font-size: 13px; }
    .podium-check { font-size: 14px; }
    .pros-item, .cons-item { font-size: 14px; }
    .pros-title, .cons-title { font-size: 16px; }
    .bonus-buy-step-title { color: #000000; }
    .strategy-tip-user { font-size: 13px; }

    /* --- Bonus-buy-card steps: texto más grande en desktop --- */
    .bonus-buy-step-num {
        width: 32px;
        height: 32px;
        font-size: 15px;
    }
    .bonus-buy-step-title {
        font-size: 16px;
        margin-bottom: 4px;
    }
    .bonus-buy-step-desc {
        font-size: 15px;
        line-height: 1.65;
    }
    .bonus-buy-warn span {
        font-size: 13px;
    }

    /* --- SCJ card centrada y más compacta --- */
    .scj-card {
        max-width: 560px;
        margin: 16px auto;
        justify-content: center;
    }
    .scj-info {
        flex: 0 1 auto;
    }

    /* --- Strategy tip: card más ancha en desktop (carrusel horizontal) --- */
    .strategy-tip {
        flex: 0 0 340px;
    }

    /* --- Flechas de carrusel (slot-type-carousel y strategy-tips) --- */
    .carousel-wrap {
        position: relative;
    }
    .carousel-arrow {
        display: inline-flex;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #ffffff;
        border: 1px solid #E0E0E0;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        color: #0039A6;
        font-size: 24px;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        z-index: 5;
        transition: all 0.2s ease;
        padding: 0;
    }
    .carousel-arrow:hover {
        background: #0039A6;
        color: #ffffff;
        border-color: #0039A6;
    }
    .carousel-arrow:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }
    .carousel-arrow:disabled:hover {
        background: #ffffff;
        color: #0039A6;
        border-color: #E0E0E0;
    }
    .carousel-arrow-prev { left: -20px; }
    .carousel-arrow-next { right: -20px; }

    /* --- Demo player más compacto; section ancho normal --- */
    .demo-player {
        max-width: 720px;
        margin: 0 auto;
    }
    .demo-player-info {
        justify-content: center;
        gap: 14px;
        padding: 12px 16px;
    }
    .demo-player-name {
        font-size: 16px;
    }
    .demo-player-rtp {
        font-size: 13px;
    }

    /* --- Software section: intro centrada (ancho normal) --- */
    .software-section .section-intro {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .software-logo {
        width: 80px;
        height: 44px;
    }
    .software-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .software-name { font-size: 18px; }
    .software-count { font-size: 13px; }

    /* --- Cómo empezar: stepper de 1 paso a la vez, móvil centrado --- */
    .steps-carousel {
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        overflow-x: auto;
        scrollbar-width: none;
        gap: 0;
        padding-bottom: 0;
    }
    .steps-carousel::-webkit-scrollbar { display: none; }
    .step-card {
        flex: 0 0 100%;
        scroll-snap-align: start;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: center;
        justify-items: start;
        padding: 36px 60px;
        text-align: left;
    }
    .step-card .step-number {
        display: none;
    }
    .step-card .step-phone {
        grid-column: 1;
        grid-row: 1;
        justify-self: center;
        margin-bottom: 0;
        cursor: grab;
        user-select: none;
        -webkit-user-drag: none;
    }
    .step-card .step-phone:active {
        cursor: grabbing;
    }
    .step-card .step-phone img {
        pointer-events: none;
    }
    .step-card .step-phone-frame {
        width: 320px;
    }
    .step-card .step-text {
        grid-column: 2;
        grid-row: 1;
        padding: 0;
        max-width: 520px;
    }
    .step-card .step-title {
        font-size: 26px;
        margin-bottom: 18px;
    }
    .step-card p {
        font-size: 17px;
        line-height: 1.75;
    }
    .steps-progress {
        gap: 16px;
        margin-top: 28px;
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }
    .steps-nav-btn {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        border: 1px solid #E0E0E0;
        background: #ffffff;
        border-radius: 50%;
        font-size: 22px;
        font-weight: 700;
        color: #0039A6;
        cursor: pointer;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }
    .steps-nav-btn:hover {
        background: #0039A6;
        color: #ffffff;
        border-color: #0039A6;
    }
    .steps-nav-btn:disabled {
        opacity: 0.35;
        cursor: not-allowed;
    }
    .steps-nav-btn:disabled:hover {
        background: #ffffff;
        color: #0039A6;
        border-color: #E0E0E0;
    }
    .steps-progress-label {
        font-size: 14px;
    }

    /* --- Payments: logos grandes, texto legible, filas compactas --- */
    .pay-list { max-width: 900px; margin: 0 auto; }
    .pay-header-spacer { width: 100px; }
    .pay-header-spacer-cta { width: 90px; }
    .pay-header-label { font-size: 12px; }
    .pay-row { padding: 10px 8px; gap: 14px; }
    .pay-logo img { width: 100px; height: 42px; }
    .pay-stats { gap: 10px; }
    .pay-label { font-size: 11px; margin-bottom: 2px; }
    .pay-value { font-size: 15px; }
    .pay-cta { font-size: 13px; padding: 9px 22px; }
}

/* =================== LOGO LINK WRAPPERS =================== */
.card-logo > a,
.convcard-logo > a,
.podium-logo > a,
.pay-logo > a,
.slot-placeholder > a,
.slot-type-img > a.slot-type-img-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.slot-type-img > a.slot-type-img-link { line-height: 0; }
.slot-type-img > a.slot-type-img-link img { display: block; width: 100%; height: 100%; object-fit: contain; }
.slot-placeholder > a { line-height: 0; display: flex; align-items: center; justify-content: center; }
.slot-placeholder > a img { width: 100%; height: 100%; object-fit: contain; }
.card-logo > a img,
.convcard-logo > a img,
.podium-logo > a img,
.pay-logo > a img { display: block; margin: 0 auto; }