:root {
    /* Paleta de Colores ArkadM "Neo-Arcade" */
    --color-base: #1C1C1C;      /* Negro Noche (Fondo principal) */
    --color-neon-cyan: #00FFFF;  /* Cian Eléctrico (Acento primario) */
    --color-neon-magenta: #FF00FF; /* Magenta Retro (Acento secundario) */
    --color-text-light: #FFFFFF; /* Blanco Puro */
}

/* Estilos Globales */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--color-base);
    color: var(--color-text-light);
    line-height: 1.6;
}

a {
    color: var(--color-neon-cyan);
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: var(--color-neon-magenta);
}

/* Encabezado (Header) */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparente para un toque moderno */
    border-bottom: 2px solid var(--color-neon-cyan);
}
nav {
    flex-grow: 1; /* Esto hace que el NAV ocupe todo el espacio disponible */
    text-align: center; /* Esto centra el contenido (el <ul>) horizontalmente */
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center; /* Centra los enlaces de la navegación */
}

.cart-icon {
    /* Esto es importante: Asigna un ancho fijo al ícono del carrito */
    /* para que el espacio ocupado por el logo (o .logo) sea balanceado. */
    width: 60px; /* Ajusta este valor al ancho del logo o del contenedor del logo */
    text-align: right;
    font-size: 1.5em; 
}

.logo {
    width: 60px; /* Asegura que el contenedor del logo tenga el mismo ancho que el .cart-icon */
}

/* Estilos para el Logo (Ajuste del tamaño) */
.logo-header {
    /* Aquí puedes probar 75px, 80px, etc. */
    height: 60px; /* Tamaño actual en el encabezado */
    width: auto;
}

.logo-footer {
    height: 60px; /* Tamaño actual en el pie de página */
    width: auto;
    margin-bottom: 15px;
}
nav ul li {
    margin-left: 30px;
}

nav ul li a {
    color: var(--color-text-light);
    padding-bottom: 5px;
}

nav ul li a:hover {
    border-bottom: 2px solid var(--color-neon-magenta);
    color: var(--color-neon-magenta);
}

/* Banner Principal (Hero) */
.hero-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 600px;
    background: linear-gradient(rgba(28, 28, 28, 0.7), rgba(28, 28, 28, 0.7)), url('placeholder-arcade.jpg') center / cover no-repeat;
    text-align: center;
    padding: 0 5%;
}

.hero-content h2 {
    font-size: 3.5em;
    margin-bottom: 15px;
    /* Efecto Neón en el texto */
    text-shadow: 0 0 10px var(--color-neon-cyan), 0 0 20px var(--color-neon-cyan);
}

.hero-content p {
    font-size: 1.2em;
    margin-bottom: 40px;
}

.cta-button {
    display: inline-block;
    background-color: var(--color-neon-magenta);
    color: var(--color-base); 
    padding: 15px 40px;
    border-radius: 5px;
    font-weight: bold;
    letter-spacing: 1px;
    /* Efecto 'lujoso' al pasar el ratón */
    transition: background-color 0.3s, transform 0.1s;
}

.cta-button:hover {
    background-color: var(--color-neon-cyan); 
    transform: translateY(-2px);
}

/* Sección de Pasos (How-It-Works) */
.how-it-works {
    padding: 80px 5%;
    text-align: center;
}

.how-it-works h3 {
    font-size: 2em;
    margin-bottom: 50px;
    color: var(--color-neon-magenta);
}

.steps-container {
    display: flex;
    justify-content: space-around;
    gap: 30px;
}

.step {
    max-width: 300px;
    padding: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.2);
    transition: border-color 0.3s;
}

.step:hover {
    border-color: var(--color-neon-cyan);
}

.step-number {
    display: block;
    font-size: 2em;
    font-family: 'Press Start 2P', cursive;
    color: var(--color-neon-cyan);
    margin-bottom: 15px;
}

.step h4 {
    font-size: 1.3em;
    margin-bottom: 10px;
}

/* Pie de Página (Footer) */
footer {
    text-align: center;
    padding: 20px;
    background-color: #111;
    border-top: 1px solid var(--color-neon-magenta);
    font-size: 0.8em;
}

/* --- ESTILOS PARA GALERÍA --- */

.gallery-hero {
    text-align: center;
    padding: 80px 5%;
}

.gallery-hero h1 {
    font-size: 3em;
    color: var(--color-neon-magenta);
    text-shadow: 0 0 8px var(--color-neon-magenta);
    margin-bottom: 10px;
}

.filter-bar {
    text-align: center;
    padding: 20px 5%;
    background-color: #252525;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 40px;
}

.filter-btn {
    background: transparent;
    border: 2px solid var(--color-neon-cyan);
    color: var(--color-neon-cyan);
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    font-weight: bold;
    letter-spacing: 1px;
    transition: all 0.3s;
    border-radius: 5px;
}

.filter-btn:hover, .filter-btn.active {
    background-color: var(--color-neon-magenta);
    border-color: var(--color-neon-magenta);
    color: var(--color-base);
}

.gallery-grid-section {
    padding: 0 5% 80px;
}

.gallery-grid {
    display: grid;
    /* Cuadrícula adaptable: 3 columnas, ajustándose al tamaño de pantalla */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
    gap: 30px;
}


.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    cursor: pointer;
	height: 490px;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform 0.4s;
	object-fit: cover;
}

.gallery-item:hover img {
    transform: scale(1.05); /* Efecto zoom al pasar el ratón */
}

/* Overlay (Capa oscura al pasar el ratón) */
.item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(28, 28, 28, 0.8); /* Oscuro semi-transparente */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Oculto por defecto */
    transition: opacity 0.4s;
    text-align: center;
}

.gallery-item:hover .item-overlay {
    opacity: 1;
}

.item-overlay h4 {
    color: var(--color-neon-cyan);
    font-size: 1.5em;
    margin-bottom: 5px;
}

.item-overlay p {
    color: var(--color-text-light);
    margin-bottom: 20px;
}

.view-details-btn {
    background-color: var(--color-neon-magenta);
    color: var(--color-base);
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.9em;
}

.view-details-btn:hover {
    background-color: var(--color-neon-cyan);
    color: var(--color-base);
    text-shadow: none;
}

.cta-gallery-section {
    text-align: center;
    padding: 60px 5%;
}

.cta-gallery-section h2 {
    font-size: 2.5em;
    margin-bottom: 30px;
    color: var(--color-neon-cyan);
    text-shadow: 0 0 10px var(--color-neon-cyan);
}

/* --- ESTILOS PARA CONTACTO --- */

.contact-hero {
    text-align: center;
    padding: 100px 5%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-hero h1 {
    font-size: 3em;
    color: var(--color-neon-cyan);
    text-shadow: 0 0 8px var(--color-neon-cyan);
    margin-bottom: 10px;
}

.contact-hero p {
    font-size: 1.1em;
    color: #ccc;
}

.contact-form-section {
    padding: 80px 5%;
}

.contact-container {
    display: flex;
    justify-content: center;
    gap: 40px; /* Espacio entre las dos columnas */
    max-width: 1200px;
    margin: 0 auto;
}

.form-card {
    flex: 1; /* Para que ambos divs ocupen el mismo ancho */
    padding: 40px;
    border-radius: 10px;
    background-color: #252525;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.form-card h3 {
    font-size: 1.8em;
    margin-bottom: 25px;
    color: var(--color-text-light);
}

/* Estilos de los campos del formulario */
label {
    display: block;
    margin-top: 15px;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--color-neon-cyan); /* Color de acento para las etiquetas */
}

input[type="text"], 
input[type="email"], 
textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-neon-magenta); /* Borde magenta para input */
    border-radius: 5px;
    background-color: var(--color-base); /* Fondo oscuro */
    color: var(--color-text-light);
    font-size: 1em;
    transition: border-color 0.3s, box-shadow 0.3s;
}

input:focus, 
textarea:focus {
    outline: none;
    border-color: var(--color-neon-cyan); /* Borde cyan al enfocar */
    box-shadow: 0 0 5px var(--color-neon-cyan);
}

/* Estilo específico para la sección Ultra-Personalización */
.ultra-customize-card {
    background: #3a153a; /* Un tono más morado/magenta para destacarse */
    border: 2px solid var(--color-neon-magenta);
}

.ultra-customize-card h3 {
    color: var(--color-neon-magenta);
}

.neon-text {
    color: var(--color-neon-cyan);
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
    margin-bottom: 20px;
}

/* Botón Secundario (para el formulario Ultra) */
.secondary-button {
    background-color: var(--color-neon-cyan);
}

.secondary-button:hover {
    background-color: var(--color-neon-magenta);
}

/* Asegúrate de que los botones CTA ya definidos en index.html se apliquen aquí */
/* El estilo .cta-button es usado para ambos botones de envío */

/* --- ESTILOS PARA MODELOS --- */

.models-hero {
    text-align: center;
    padding: 80px 5%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.models-hero h1 {
    font-size: 3em;
    color: var(--color-neon-cyan);
    text-shadow: 0 0 8px var(--color-neon-cyan);
    margin-bottom: 10px;
}

.models-grid-section {
    padding: 80px 5%;
}

.models-grid {
    display: grid;
    /* Cuadrícula de 3 columnas para escritorio */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
}

.model-card {
    background-color: #252525;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.7);
    transition: transform 0.3s, box-shadow 0.3s;
    text-align: center;
    border: 1px solid #333; /* Borde sutil */
}

.model-card:hover {
    transform: translateY(-5px); /* Pequeño levante al pasar el ratón */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 15px var(--color-neon-magenta); /* Sombra neón */
}

.model-card img {
    width: 100%;
    /* Aseguramos que la imagen cubra el área sin estirarse */
    height: 310px; 
    object-fit: cover;
    display: block;
}

.model-info {
    padding: 20px;
}

.model-info h2 {
    font-size: 1.8em;
    color: var(--color-neon-cyan);
    margin-bottom: 5px;
}

.model-info p {
    color: #ccc;
    margin-bottom: 20px;
    min-height: 40px; /* Para mantener la altura uniforme si el texto es corto */
}

/* Estilo para la tarjeta CUSTOM */
.custom-card {
    /* Destacamos la tarjeta Custom con colores inversos o más intensos */
    background-color: #3a153a; /* Magenta oscuro */
    border: 2px solid var(--color-neon-magenta);
}

.custom-card h2 {
    color: var(--color-neon-magenta);
    text-shadow: 0 0 5px var(--color-neon-magenta);
}

/* Reutilizamos los estilos de botones definidos en index.css: .cta-button y .secondary-button */
.model-cta {
    font-size: 1em;
    padding: 10px 30px;
}

/* --- ESTILOS PARA EL CONFIGURADOR (DISEÑA TU ARCADE) --- */

.configurator-main {
    padding: 40px 5%;
}

.configurator-container {
    display: flex;
    gap: 30px;
    max-width: 1500px; /* Ancho máximo para el configurador */
    margin: 0 auto;
}

/* Columna Izquierda: Visualizador */
.arcade-viewer-panel {
    flex-grow: 1; /* Ocupa el máximo espacio posible */
    background-color: #0d0d0d;
    border: 2px solid var(--color-neon-cyan);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
}

.viewer-header h1 {
    font-size: 2.5em;
    color: var(--color-neon-magenta);
    text-shadow: 0 0 5px var(--color-neon-magenta);
    margin-bottom: 5px;
}

.model-name-display {
    color: #ccc;
    font-size: 1.1em;
    margin-bottom: 20px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

#arcade-3d-viewer {
    height: 60vh; /* Altura basada en la vista de la ventana */
    min-height: 500px;
    background-color: #1a1a1a;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}

.placeholder-viewer img {
    max-width: 100%;
    max-height: 100%;
    opacity: 0.5;
}

.viewer-controls {
    text-align: center;
    padding: 15px 0;
}

.control-btn {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--color-neon-cyan);
    color: var(--color-neon-cyan);
    padding: 8px 15px;
    margin: 0 5px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.control-btn:hover {
    background-color: rgba(0, 255, 255, 0.2);
}


/* Columna Derecha: Panel de Control */
.control-panel {
    width: 380px; /* Ancho fijo para el panel de control */
    background-color: #252525;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.config-step {
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.config-step:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.config-step h3 {
    color: var(--color-neon-cyan);
    font-size: 1.5em;
    margin-bottom: 20px;
}

.config-group {
    margin-bottom: 15px;
}

.config-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #ccc;
}

/* Estilos de inputs (reutilizados y mejorados) */
input[type="file"], select {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--color-neon-magenta);
    border-radius: 5px;
    background-color: var(--color-base);
    color: var(--color-text-light);
    font-size: 1em;
    cursor: pointer;
}

.file-upload::file-selector-button {
    background-color: var(--color-neon-magenta);
    color: var(--color-base);
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    margin-right: 10px;
    cursor: pointer;
}

/* Estilos para el Resumen del Pedido */
.order-summary {
    padding-top: 20px;
}

.order-summary p {
    font-size: 1.1em;
    margin-bottom: 8px;
}

.price-box {
    margin: 20px 0;
    padding: 15px;
    background-color: var(--color-base);
    border: 2px solid var(--color-neon-magenta);
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#final-price {
    font-family: 'Press Start 2P', cursive;
    font-size: 1.8em;
    color: var(--color-neon-cyan);
    text-shadow: 0 0 5px var(--color-neon-cyan);
}

.final-cta {
    width: 100%;
    padding: 15px;
}

/* --- ESTILOS PARA LOS BOTONES DE NAVEGACIÓN DE PASOS --- */

.step-navigation-btns {
    display: flex;
    justify-content: space-between; /* Espacia los botones */
    gap: 15px;
    margin-top: 30px; /* Separación del contenido superior */
}

/* Asegura que ambos botones ocupen el mismo ancho */
.step-navigation-btns button {
    flex: 1; 
}

/* Estilo para el botón ANTERIOR (menos llamativo) */
.prev-step-btn {
    /* Reutiliza los estilos de un botón secundario para darle un toque diferente */
    background-color: #333;
    border: 2px solid var(--color-neon-magenta);
    color: var(--color-neon-magenta);
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.prev-step-btn:hover {
    background-color: var(--color-neon-magenta);
    color: var(--color-base);
}

/* --- ESTILOS PARA LOS BOTONES DE SELECCIÓN DE MODELO --- */

.model-options-grid {
    display: grid;
    /* 2 columnas para el listado de modelos */
    grid-template-columns: repeat(2, 1fr); 
    gap: 15px;
    margin-bottom: 25px;
}

.model-select-btn {
    background-color: #333;
    border: 2px solid var(--color-neon-cyan);
    color: var(--color-neon-cyan);
    padding: 12px 10px;
    border-radius: 5px;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

/* Estilo al pasar el ratón */
.model-select-btn:hover {
    background-color: rgba(0, 255, 255, 0.2);
}

/* [CLAVE]: Estilo cuando el botón está seleccionado */
.model-select-btn.selected {
    background-color: var(--color-neon-magenta);
    border-color: var(--color-neon-magenta);
    color: var(--color-base);
    box-shadow: 0 0 10px var(--color-neon-magenta);
}

/* --- ESTILOS PARA LA SELECCIÓN DE TEMAS EN PASO 2 --- */

.theme-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dos columnas para los temas */
    gap: 10px;
}

.theme-select-btn {
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Texto en la parte inferior */
    height: 80px; /* Altura de la vista previa del tema */
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: bold;
    border: 2px solid #333;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.theme-name {
    padding: 3px 5px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    width: 100%;
    text-align: center;
    z-index: 2;
}

/* Estilos de fondo simulado para los temas (reemplazar con imágenes reales si es posible) */
.theme-select-btn[data-theme="neon-arcade"] {
    background: linear-gradient(to bottom right, var(--color-neon-cyan), var(--color-neon-magenta));
}
.theme-select-btn[data-theme="pixel-retro"] {
    background-image: repeating-linear-gradient(45deg, #1f1f1f, #1f1f1f 10px, #2a2a2a 10px, #2a2a2a 20px);
}
.theme-select-btn[data-theme="wood"] {
    background: #5D4037; /* Color base de madera oscura */
    background-image: linear-gradient(0deg, rgba(0,0,0,0.1) 50%, transparent 50%), linear-gradient(90deg, rgba(0,0,0,0.1) 50%, transparent 50%);
    background-size: 5px 5px;
}
.theme-select-btn[data-theme="black-out"] {
    background-color: #000;
}

/* Estilo de selección (importante) */
.theme-select-btn.selected {
    border-color: var(--color-neon-cyan);
    box-shadow: 0 0 10px var(--color-neon-cyan);
    transform: scale(1.02);
}
/* --- ESTILOS PARA LOS JOYSTICKS EN PASO 3 --- */

.joystick-options-grid {
    display: flex;
    gap: 15px;
}

.joystick-select-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 90px;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    border: 2px solid var(--color-neon-cyan);
    background-color: #333;
    transition: all 0.2s;
}

.joystick-name {
    font-weight: bold;
    margin-bottom: 5px;
    color: var(--color-neon-cyan);
}

.price-mod {
    font-size: 0.8em;
    color: #999;
}

/* Estilo de selección (reutilizamos la clase selected) */
.joystick-select-btn.selected {
    background-color: var(--color-neon-magenta);
    border-color: var(--color-neon-magenta);
    color: var(--color-base);
    box-shadow: 0 0 10px var(--color-neon-magenta);
}
.joystick-select-btn.selected .price-mod,
.joystick-select-btn.selected .joystick-name {
    color: var(--color-base); /* Asegura que el texto se vea bien */
}

/* --- ESTILOS PARA EL SELECTOR DE COLOR --- */

.color-picker-group {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 0;
}

/* Ocultar el input de color por defecto y estilizarlo */
#button-color-picker {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 50px;
    height: 50px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

#button-color-picker::-webkit-color-swatch {
    border-radius: 50%;
    border: 3px solid var(--color-neon-cyan);
}
#button-color-picker::-moz-color-swatch {
    border-radius: 50%;
    border: 3px solid var(--color-neon-cyan);
}

.color-display {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--color-neon-magenta);  /*Color por defecto */
}

/* --- ESTILOS PARA LA CONFIGURACIÓN DE COLORES DE BOTONES --- */

.color-mode-select {
    display: flex;
    gap: 10px;
}

.mode-select-btn {
    flex: 1;
    padding: 8px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    border: 1px solid var(--color-text-light);
    background-color: #333;
    color: var(--color-text-light);
    transition: all 0.2s;
}

.mode-select-btn.selected {
    background-color: var(--color-neon-cyan);
    border-color: var(--color-neon-cyan);
    color: var(--color-base);
}

.color-selector-item {
    margin-bottom: 10px;
}

.color-scheme {
    display: none; /* Ocultar esquemas por defecto */
    padding: 10px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 5px;
}

.color-scheme.active-scheme {
    display: block; /* Mostrar esquema activo */
}

/* --- ESTILOS PARA LA SELECCIÓN DE TIPO DE BOTÓN (LED/STANDARD) --- */

.type-select-btn {
    flex: 1;
    padding: 12px 10px;
    border-radius: 5px;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    
    /* Estilo base */
    background-color: #333;
    border: 2px solid var(--color-neon-cyan);
    color: var(--color-neon-cyan);
}

.type-select-btn:hover {
    background-color: rgba(0, 255, 255, 0.2);
}

/* [CLAVE]: Estilo cuando está seleccionado */
.type-select-btn.selected {
    background-color: var(--color-neon-magenta);
    border-color: var(--color-neon-magenta);
    color: var(--color-base);
    box-shadow: 0 0 10px var(--color-neon-magenta);
}

/* --- AJUSTE DE ESTILOS PARA LA DISTRIBUCIÓN DE COLORES (HILERAS/JUGADORES) --- */

.color-mode-select {
    display: flex;
    gap: 10px;
    margin-bottom: 20px; /* Asegura un espacio adecuado */
}

.mode-select-btn {
    flex: 1;
    padding: 12px 8px; /* Aumentamos el padding para que sean más grandes */
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    transition: all 0.2s;

    /* Estilo base */
    border: 2px solid var(--color-neon-cyan);
    background-color: #333;
    color: var(--color-neon-cyan);
}

.mode-select-btn:hover {
    background-color: rgba(0, 255, 255, 0.2);
}

/* [CLAVE]: Estilo cuando está seleccionado */
.mode-select-btn.selected {
    background-color: var(--color-neon-cyan);
    border-color: var(--color-neon-cyan);
    color: var(--color-base);
    box-shadow: 0 0 10px var(--color-neon-cyan);
}

/* --- AJUSTES DE ESTILO PARA EL RESUMEN DEL PEDIDO --- */

.order-summary {
    padding-top: 20px;
    /* Añadimos un borde neón sutil alrededor de todo el resumen */
    border: 1px solid var(--color-neon-magenta); 
    border-radius: 8px;
    padding: 20px;
    background-color: #1a1a1a; /* Un fondo ligeramente más oscuro */
}

.order-summary h3 {
    /* Mantenemos el estilo neón pero aseguramos que resalte */
    color: var(--color-neon-magenta);
    text-shadow: 0 0 5px var(--color-neon-magenta);
    border-bottom: 2px solid var(--color-neon-magenta); /* Línea divisoria destacada */
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-size: 1.6em; /* Un poco más grande */
}

.order-summary p {
    font-size: 1.1em;
    margin-bottom: 10px;
    color: #E0E0E0; /* Texto claro para las etiquetas */
    display: flex; /* Para alinear el texto de la etiqueta y el valor */
    justify-content: space-between;
}

.order-summary span {
    /* Estilo para los valores seleccionados */
    color: var(--color-neon-cyan); /* Color de acento para los valores */
    font-weight: bold;
    text-align: right;
    max-width: 60%; /* Permite que el valor sea largo pero se vea bien */
}

.placeholder-viewer {
    position: relative;
    /* Asegúrate de que tenga un tamaño definido, por ejemplo, el tamaño de tu imagen base */
}

#joystick-img {
    position: absolute;
    width: 15%; /* Ajusta el tamaño relativo */
    top: 60%; /* Ajusta la posición vertical */
    left: 20%; /* Ajusta la posición horizontal */
    z-index: 10; /* Asegura que se vea por encima de la imagen base */
}

/* --- ESTILOS PARA EL VISUALIZADOR --- */

#arcade-3d-viewer {
    /* Establece un tamaño máximo para el contenedor del visualizador */
    max-width: 100%;
    height: 350px; /* Define una altura fija o máxima para el contenedor */
    display: flex; /* Habilita Flexbox para centrar contenido */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    overflow: hidden; /* Oculta cualquier parte de la imagen que se salga */
    padding: 10px; /* Opcional: añade un poco de espacio alrededor */
}

/* Contenedor de la imagen (puede ser opcional, pero ayuda a la gestión) */
.placeholder-viewer {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* La imagen real: la clave está en max-width y max-height */
#base-arcade-image {
    max-width: 100%;  /* La imagen nunca será más ancha que su contenedor */
    max-height: 100%; /* La imagen nunca será más alta que su contenedor */
    width: auto;      /* Mantiene la proporción */
    height: auto;     /* Mantiene la proporción */
    display: block;   /* Evita problemas de espacio en blanco */
}

/* --- ESTILOS CRÍTICOS PARA EL VISUALIZADOR --- */

/* 1. Contenedor Principal: Define el espacio y usa Flexbox para centrar */
#arcade-3d-viewer {
    /* Define la altura máxima que quieres que ocupe el visualizador en la columna */
    height: 350px; 
    max-width: 100%;
    
    /* Propiedades de centrado con Flexbox */
    display: flex; 
    justify-content: center; /* Centra horizontalmente */
    align-items: center;    /* Centra verticalmente */
    
    /* Opcional: Asegura que nada se desborde */
    overflow: hidden; 
}

/* 2. Contenedor Intermedio (si lo usas, como .placeholder-viewer) */
.placeholder-viewer {
    /* Es clave que esta capa también use Flexbox si contiene más elementos */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 3. La Imagen Base: Asegura que se adapte al contenedor */
#base-arcade-image {
    /* max-width/max-height son claves para el escalado proporcional */
    max-width: 100%;  
    max-height: 100%; 
    
    /* Mantiene las proporciones de la imagen (evita estiramiento) */
    width: auto;      
    height: auto;     
    
    /* Asegura que el centrado funcione en todos los navegadores */
    display: block;   
}

/* ================================================================= */
/* === AJUSTES RESPONSIVOS PARA PANTALLAS PEQUEÑAS (MÓVIL / TABLET) === */
/* ================================================================= */

@media (max-width: 768px) {
    
    /* A. Contenedor Principal: Asegura que las columnas se apilen */
    /* (Reemplaza .main-content con el selector de tu contenedor principal de dos columnas) */
    .main-content {
        flex-direction: column; /* Apila las columnas verticalmente */
    }

    /* B. Columna del Visualizador */
    /* La imagen del arcade debe ocupar todo el ancho superior */
    .visualizer-column {
        width: 100%; /* Ocupa todo el ancho */
        order: 1;    /* Colócala en la parte superior (opcional si ya está arriba) */
        padding: 10px; /* Reduce el padding si es necesario */
    }
    
    /* Ajustes específicos del Visualizador */
    #arcade-3d-viewer {
        height: 250px; /* Reduce la altura en móvil para ahorrar espacio vertical */
    }

    /* C. Columna del Panel de Control (Opciones) */
    /* El panel de control debe ocupar todo el ancho inferior */
    .control-panel {
        width: 100%; /* Ocupa todo el ancho */
        order: 2;    /* Colócala debajo del visualizador */
        height: auto; /* Permite que la altura crezca según el contenido */
        overflow-y: visible; /* Elimina el scroll interno si existía */
        padding: 20px 10px; /* Asegura un padding adecuado para tocar */
    }

    /* D. Botones de Navegación y Opciones */
    /* Asegura que los botones ocupen todo el ancho y no se desborden */
    .next-step-btn, 
    .prev-step-btn, 
    .add-to-cart-btn,
    .model-select-btn,
    .joystick-select-btn,
    .type-select-btn {
        width: 100%; /* Los botones deben ser anchos para ser fáciles de presionar */
        margin: 5px 0;
        box-sizing: border-box; /* Crucial para incluir padding y borde en el ancho */
    }
    
    /* Si usas un grid para opciones (como .joystick-options-grid), haz que se apilen */
    .joystick-options-grid {
        display: flex; /* Asegura que se mantenga como flex */
        flex-direction: column; /* Apila los botones de selección */
    }

    /* E. Cabeceras y Resumen */
    h2, h3 {
        font-size: 1.2em;
    }
    
    /* Asegura que la tabla de resumen se muestre bien */
    .summary-table {
        width: 100%;
        font-size: 0.9em;
    }
}

/* ================================================================= */
/* === AJUSTES RESPONSIVOS GLOBALES (Aplicable a todas las páginas) === */
/* ================================================================= */

@media (max-width: 768px) {
    
    /* A. Contenedor Principal y Layouts (Si usas Flexbox o Grid) */
    .page-content, 
    .main-content,
    .two-column-layout,
    .gallery-grid {
        /* Fuerza a que los elementos internos se apilen */
        flex-direction: column; 
    }
	.main-header {
    /* Si el header usa flexbox, apila el logo y el menú */
    flex-direction: column; 
    align-items: center; /* Centra el contenido apilado */
    padding: 10px;
	}
	
	.logo-container { /* Reemplaza .logo-container con el selector de tu logo/marca */
    display: flex; /* Asegura que el ícono y el texto estén juntos */
    align-items: center;
    width: 100%; /* Ocupa todo el ancho si lo deseas, o ajusta el tamaño */
    justify-content: center; /* Centra el logo/marca */
    margin-bottom: 10px; /* Agrega espacio entre el logo y el menú */
	}
	
	/* El elemento <img> del logo */
	.logo-container img { /* O el selector que uses para la imagen del logo (p. ej., .logo-img) */
    max-width: 40px; /* Reduce el tamaño máximo del icono del joystick */
    height: auto;
    /* Si el logo es un fondo, ajusta background-size */
	}
	
	.main-header nav {
    width: 100%;
    margin-top: 0;
	}
	
    /* B. Menú de Navegación (Típico ajuste en móvil) */
    .main-header nav ul {
        flex-direction: column;
        width: 100%; /* Ocupa todo el ancho si se despliega */
    }
    .main-header nav ul li {
        width: 100%;
        text-align: center;
        margin: 5px 0;
    }
    
    /* C. Columnas y Secciones Laterales (Asegura ancho completo) */
    .sidebar,
    .main-section,
    .contacto-form-column,
    .visualizer-column,
    .control-panel {
        width: 100% !important; /* !important solo si hay conflictos, sino 100% */
        padding: 10px; /* Asegura un padding adecuado */
        margin: 0;
    }

    /* D. Imágenes y Media */
    /* Evita desbordamiento de imágenes */
    img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    /* E. Tablas (como las de precios o resumen) */
    table {
        width: 100%;
        display: block; /* Permite desplazamiento horizontal si es muy ancha */
        overflow-x: auto;
    }

    /* F. Botones y Formularios */
    button, input[type="submit"] {
        width: 100%;
        box-sizing: border-box;
    }

    /* G. Galería (si usa un grid, fuerza una columna) */
    .gallery-grid {
        grid-template-columns: 1fr; /* Una sola columna para fotos */
        gap: 15px;
    }
	
	
}



/* El estilo de .price-box, #final-price y .final-cta ya es fuerte y se mantiene. */
/* --- Fin del CSS --- */