/* Terxo Mobile — estilos de juegos.html (extraídos del <style> inline; mismo punto de la cascada). */

        :root {

            --brand-blue: #425df5;

            --brand-blue-dark: #123cb8;

            --brand-blue-light: #6fa9ff;

            --text-dark: #102a43;

        }



        * {

            box-sizing: border-box;

            margin: 0;

            padding: 0;

        }



        body {

            font-family: 'Montserrat', sans-serif;

            background: linear-gradient(180deg, #f4f8ff 0%, #ffffff 60%);

            color: #000000;

            -webkit-font-smoothing: antialiased;

        }



        /* Header en escala de azules, sin animaciones de movimiento */

        .menu-superior {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 76px;

            background: linear-gradient(90deg, var(--brand-blue-dark) 0%, var(--brand-blue) 100%);

            z-index: 1000;

            display: flex;

            align-items: center;

            padding: 0 22px;

            gap: 18px;

            box-shadow: 0 6px 18px rgba(18, 60, 184, 0.08);

            border-bottom: 1px solid rgba(255, 255, 255, 0.04);

        }



        .logo-circle {

            width: 56px;

            height: 56px;

            border-radius: 50%;

            background-color: rgba(255, 255, 255, 0.12);

            background-image: url('../images/terxo-logo.png');

            background-size: cover;

            background-position: center;

            background-repeat: no-repeat;

            display: inline-flex;

            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);

            flex-shrink: 0;

        }



        .titulo-menu {

            font-size: 22px;

            font-weight: 900;

            letter-spacing: 1px;

            text-transform: uppercase;

            text-decoration: none;

            background: linear-gradient(90deg, #ffffff, #dbe9ff 60%);

            -webkit-background-clip: text;

            background-clip: text;

            color: transparent;

            margin-left: 8px;

        }



        /* Menú derecho: pills azules, sin movimiento; hover: fondo blanco y texto azul del encabezado */

        .menu-superior ul {

            list-style: none;

            margin: 0;

            padding: 0;

            display: flex;

            gap: 10px;

            margin-left: auto;

            align-items: center;

        }



        .menu-superior ul li {

            display: block;

        }



        .btn-marcas {

            display: inline-block;

            padding: 8px 14px;

            border-radius: 999px;

            background: rgba(255, 255, 255, 0.12);

            color: #fff;

            border: 1px solid rgba(255, 255, 255, 0.09);

            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: 0.4px;

            text-decoration: none;

            transition: background .15s ease, color .15s ease;

            /* Se quitan transform y demás animaciones de movimiento */

            box-shadow: none;

        }



        /* Hover: fondo blanco y texto del color principal (brand-blue-dark) */

        .btn-marcas:hover {

            background: #ffffff;

            color: var(--brand-blue-dark);

            border-color: rgba(18, 60, 184, 0.08);

            text-decoration: none;

        }
/* Contenido principal */

        .main-container {

            margin: 120px auto 0;

            padding: 40px 60px;

            width: 100%;

            min-height: calc(100vh - 80px);

            background: linear-gradient(135deg, #f3f4ff 0%, #ffffff 100%);

            display: flex;

            flex-direction: column;

            gap: 24px;

        }



        /* Sección de selección */

        .selection-section {

            background: linear-gradient(180deg, #ffffff, #f1f8ff);

            padding: 28px;

            border-radius: 12px;

            box-shadow: 0 6px 14px rgba(34, 65, 95, 0.04);

            margin-bottom: 30px;

            overflow: visible;

            position: relative;

        }



        .selection-section:has(.search-suggestions.active) {

            z-index: 50;

        }



        .section-title {

            font-size: 18px;

            margin-bottom: 8px;

            color: #000000;

            font-weight: 800;

            display: flex;

            align-items: center;

            gap: 10px;

            text-transform: uppercase;

        }



        .search-box {

            position: relative;

            margin-bottom: 20px;

            overflow: visible;

        }



        .search-input {

            width: 100%;

            padding: 12px 18px;

            border: 1px solid rgba(18, 60, 184, 0.08);

            border-radius: 12px;

            font-size: 16px;

            font-family: 'Montserrat', sans-serif;

            background: #ffffff;

            color: #000000;

        }



        .search-input:focus {

            border-color: var(--brand-blue);

            box-shadow: 0 0 0 3px rgba(66, 93, 245, 0.1);

        }



        .search-suggestions {

            position: absolute;

            top: 100%;

            left: 0;

            right: 0;

            background: #ffffff;

            border: 1px solid rgba(18, 60, 184, 0.08);

            border-radius: 12px;

            max-height: min(320px, 50vh);

            overflow-y: auto;

            z-index: 1000;

            display: none;

        }



        .search-suggestions.active {

            display: block;

        }



        .suggestion-item {

            padding: 12px 18px;

            cursor: pointer;

            display: flex;

            align-items: center;

            gap: 12px;

            border-bottom: 1px solid rgba(18, 60, 184, 0.04);

            transition: background .15s ease;

        }



        .suggestion-item:hover {

            background: linear-gradient(90deg, #e6f0ff 0%, #dbe9ff 100%);

        }



        .suggestion-item:last-child {

            border-bottom: none;

        }



        .suggestion-icon {

            width: 40px;

            height: 40px;

            border-radius: 8px;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 20px;

            flex-shrink: 0;

        }



        .suggestion-info {

            flex: 1;

        }



        .suggestion-name {

            font-weight: 800;

            color: #000000;

            margin-bottom: 4px;

        }



        .suggestion-details {

            font-size: 14px;

            color: #23415f;

        }



        /* Selección actual */

        .selected-item {

            padding: 16px 18px;

            background: linear-gradient(90deg, #e6f0ff 0%, #dbe9ff 100%);

            border-radius: 12px;

            display: none;

        }



        .selected-item.active {

            display: block;

        }



        .selected-name {

            font-weight: 800;

            color: #000000;

            margin-bottom: 4px;

            font-size: 16px;

        }



        .selected-details {

            font-size: 14px;

            color: #23415f;

        }



        /* Botón comparar */

        .compare-button {

            width: auto;

            padding: 16px 32px;

            background: #555;

            color: #ffffff;

            border: none;

            border-radius: 12px;

            font-size: 18px;

            font-weight: 900;

            font-family: 'Montserrat', sans-serif;

            cursor: pointer;

            transition: background .15s ease;

            box-shadow: none;

            text-transform: uppercase;

            margin: 0;

        }



        .compare-button:hover:not(:disabled) {

            background: #444;

        }



        .compare-button:disabled {

            background: #777;

            cursor: not-allowed;

        }

        /* Responsive */

        @media (max-width: 768px) {
.menu-superior ul {

                display: none;

            }



            .selection-section {

                padding: 20px;

            }

        }
/* Language Selector Dropdown */

        .custom-select-wrapper {

            position: relative;

            user-select: none;

            width: 100%;

        }



        .custom-select {

            position: relative;

            display: flex;

            flex-direction: column;

        }



        .custom-select-trigger {

            position: relative;

            display: flex;

            align-items: center;

            justify-content: space-between;

            padding: 12px 16px;

            font-size: 14px;

            font-weight: 500;

            color: #333;

            background: #f8f9fa;

            border: 2px solid #eef2f6;

            border-radius: 12px;

            cursor: pointer;

            transition: all 0.2s;

        }



        .custom-select-trigger:hover {

            border-color: #ddd;

        }



        .custom-select.open .custom-select-trigger {

            border-color: var(--brand-blue);

            background: white;

            border-bottom-left-radius: 0;

            border-bottom-right-radius: 0;

        }



        .custom-select-trigger span {

            display: flex;

            align-items: center;

            gap: 10px;

        }



        .custom-select-trigger img {

            width: 20px;

            height: 20px;

            border-radius: 2px;

        }



        .custom-select-trigger .arrow {

            width: 10px;

            height: 10px;

            border-right: 2px solid #888;

            border-bottom: 2px solid #888;

            transform: rotate(45deg);

            margin-top: -5px;

            transition: transform 0.2s;

        }



        .custom-select.open .arrow {

            transform: rotate(-135deg);

            margin-top: 5px;

        }



        .custom-options {

            position: absolute;

            display: block;

            top: 100%;

            left: 0;

            right: 0;

            background: white;

            border: 2px solid var(--brand-blue);

            border-top: none;

            border-bottom-left-radius: 12px;

            border-bottom-right-radius: 12px;

            opacity: 0;

            visibility: hidden;

            pointer-events: none;

            transform: translateY(-10px);

            transition: all 0.2s;

            z-index: 10;

            margin-top: -2px;

        }



        .custom-select.open .custom-options {

            opacity: 1;

            visibility: visible;

            pointer-events: all;

            transform: translateY(0);

        }



        .custom-option {

            position: relative;

            display: flex;

            align-items: center;

            padding: 12px 16px;

            font-size: 14px;

            font-weight: 500;

            color: #666;

            cursor: pointer;

            transition: all 0.2s;

        }



        .custom-option:hover {

            background: #f8f9fa;

            color: #333;

        }



        .custom-option.selected {

            background: #f0f7ff;

            color: var(--brand-blue);

            font-weight: 700;

        }



        .custom-option img {

            width: 20px;

            height: 20px;

            margin-right: 10px;

            border-radius: 2px;

        }