:root {
    --pokedex-red: #cc0000;
    --pokedex-dark: #8b0000;
    --screen-bg: #121212;
    --text-neon: #00ff41;
    --pokedex-blue: #00aaff;
    --uciron-dark: #0a0a0a;
}

body {
    background-color: #0d0d0d;
    margin: 0;
    font-family: 'Chakra Petch', sans-serif;
    color: white;
    min-height: 100vh;
    display: flex;
    flex-direction: column; 
    overflow-x: hidden;
}

/* =========================================
1. BARRA DE NAVEGACIÓN Y MENÚ HAMBURGUESA
   ========================================= */
.navbar { background-color: #050505; border-bottom: 2px solid var(--pokedex-red); display: flex; justify-content: space-between; align-items: center; padding: 15px 40px; position: relative; z-index: 100; }
.nav-logo a { display: inline-block; background: #ffffff; padding: 6px 12px; border-radius: 8px; box-shadow: 0 0 10px rgba(204, 0, 0, 0.5); }
.nav-logo img { height: 40px; display: block; filter: none; }
.nav-links { list-style: none; display: flex; gap: 30px; margin: 0; padding: 0; transition: 0.3s ease; }
.nav-links li a, .nav-links li span { color: #fff; text-decoration: none; font-weight: 600; text-transform: uppercase; font-size: 14px; transition: 0.2s; }
.nav-links li a.active { color: var(--pokedex-red); border-bottom: 2px solid var(--pokedex-red); padding-bottom: 4px; }
.nav-links li span.disabled { color: #555; cursor: not-allowed; }
.nav-links li span.disabled small { font-size: 10px; color: var(--pokedex-blue); display: block; margin-top: 2px; }
.nav-social img { height: 30px; filter: invert(1); transition: transform 0.2s ease; }
.nav-social a:hover img { transform: scale(1.15); }

.hamburger { display: none; flex-direction: column; gap: 6px; cursor: pointer; z-index: 101; }
.hamburger span { width: 30px; height: 3px; background-color: white; border-radius: 2px; transition: 0.3s; }

@media (max-width: 850px) {
    .hamburger { display: flex; }
    .nav-links { position: absolute; top: 75px; right: -100%; flex-direction: column; background-color: #050505; width: 100%; text-align: center; padding: 30px 0; border-bottom: 2px solid var(--pokedex-red); box-shadow: 0 10px 20px rgba(0,0,0,0.8); }
    .nav-links.active { right: 0; }
    .nav-links li { margin: 15px 0; }
    .hamburger.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); background-color: var(--pokedex-red); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); background-color: var(--pokedex-red); }
    .nav-social { display: none; } 
}

/* =========================================
   2. PÁGINA DE INICIO (PORTADA Y TARJETAS)
   ========================================= */
.hero-section { width: 100%; height: 45vh; background-image: url('assets/fondo_inicio.jpg'); background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; border-bottom: 4px solid var(--pokedex-red); }
.hero-overlay { background: rgba(0, 0, 0, 0.7); padding: 30px 50px; border-radius: 12px; text-align: center; border: 1px solid var(--pokedex-red); box-shadow: 0 0 30px rgba(0,0,0,0.8); }
.hero-overlay h1 { font-size: 28px; margin: 0 0 10px 0; }
.hero-overlay p { color: #ccc; font-size: 16px; margin: 0; font-family: 'Open Sans', sans-serif;}

.home-cards-container { display: flex; gap: 40px; flex-wrap: wrap; justify-content: center; max-width: 900px; margin: -40px auto 40px; position: relative; z-index: 10; }
.home-card { background: var(--uciron-dark); border: 2px solid #333; border-radius: 12px; padding: 40px 30px; width: 300px; text-align: center; text-decoration: none; color: white; box-shadow: 0 10px 20px rgba(0,0,0,0.5); transition: 0.3s ease; display: flex; flex-direction: column; }
.card-icon { font-size: 50px; margin-bottom: 20px; }
.home-card h3 { color: var(--pokedex-red); margin-top: 0; font-size: 18px; text-transform: uppercase;}
.home-card p { color: #aaa; font-size: 14px; line-height: 1.5; margin-bottom: 30px; flex-grow: 1;}
.card-btn { background: #222; padding: 12px; border-radius: 6px; font-weight: bold; border: 1px solid var(--pokedex-red); transition: 0.3s; }
.interactive-card:hover { transform: translateY(-10px); border-color: var(--pokedex-red); box-shadow: 0 15px 30px rgba(204,0,0,0.3); }
.interactive-card:hover .card-btn { background: var(--pokedex-red); color: white; }
.disabled-card { opacity: 0.7; cursor: not-allowed; }
.disabled-card .card-icon { filter: grayscale(100%); }
.locked { border-color: #444; color: #666; background: #111; }

/* =========================================
   3. ESTILO REDISEÑADO "SOBRE NOSOTROS"
   ========================================= */
.about-container { max-width: 700px; margin: 0 auto; background: var(--uciron-dark); border: 1px solid #222; border-top: 5px solid var(--pokedex-red); border-radius: 12px; padding: 50px; box-shadow: 0 10px 40px rgba(0,0,0,0.6); text-align: center; }
.about-container h2 { color: var(--pokedex-red); font-size: 26px; margin-top: 0; margin-bottom: 10px; letter-spacing: 2px; }
.about-divider { width: 60px; height: 4px; background: var(--text-neon); margin: 25px auto; border-radius: 2px; }
.about-container p { color: #ccc; font-size: 16px; line-height: 1.8; margin-bottom: 25px; }
.about-container p strong { color: white; font-size: 18px;}
.about-footer-text { font-family: 'Press Start 2P', cursive; font-size: 10px !important; color: var(--pokedex-blue) !important; margin-top: 40px; line-height: 1.6 !important;}

/* =========================================
   BOTÓN COMUNIDAD WHATSAPP (Sobre Nosotros)
   ========================================= */
.btn-community {
    display: inline-block;
    background: #111;
    color: var(--text-neon); /* Verde neón para simular WhatsApp */
    border: 2px solid var(--text-neon);
    padding: 15px 30px;
    border-radius: 6px;
    font-family: 'Press Start 2P', cursive;
    font-size: 11px;
    text-decoration: none;
    margin-top: 25px;
    box-shadow: 4px 4px 0 #000;
    transition: 0.3s ease;
}

.btn-community:hover {
    background: var(--text-neon);
    color: #000;
    box-shadow: 4px 4px 15px rgba(0, 255, 65, 0.4); /* Resplandor verde */
}

.btn-community:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #000;
}


/* =========================================
   4. POKÉDEX Y TABLA (DISEÑO COMPACTO Y LIMPIO)
   ========================================= */
.main-content { flex: 1; display: flex; justify-content: center; padding: 40px 15px; }
.app-wrapper { display: flex; flex-wrap: wrap; gap: 40px; max-width: 1050px; width: 100%; justify-content: center; }
@media (max-width: 900px) { .price-board { order: 1; } .pokedex-frame { order: 2; } }

.price-board { background: var(--uciron-dark); border: 2px solid #222; border-radius: 12px; padding: 30px; flex: 1; min-width: 320px; }
.price-board h2 { color: var(--pokedex-red); margin-top: 0; font-size: 24px; }
.board-subtitle { color: #666; font-size: 14px; margin-bottom: 25px; }
.uciron-table { width: 100%; border-collapse: collapse; margin-bottom: 25px; }
.uciron-table th, .uciron-table td { padding: 15px; text-align: left; border-bottom: 1px solid #1a1a1a; }
.uciron-table th { background: #111; color: #888; font-size: 13px; text-transform: uppercase; }
.uciron-table td { font-size: 15px; }
.price-cell { color: var(--text-neon); font-weight: bold; text-align: right; }
.special-alert { background: rgba(0, 170, 255, 0.1); border: 1px solid var(--pokedex-blue); padding: 15px; border-radius: 6px; margin-bottom: 20px; font-size: 14px; line-height: 1.5; }
.board-footer { background: #111; border-left: 4px solid var(--pokedex-red); padding: 15px; font-size: 13px; color: #999; }

/* --- POKÉDEX FÍSICA --- */
.pokedex-frame {
    background: linear-gradient(145deg, var(--pokedex-red), var(--pokedex-dark));
    width: 100%;
    max-width: 420px;
    padding: 35px 25px; /* Recuperamos un poco el margen para que respire */
    border-radius: 15px 15px 15px 50px;
    border: 4px solid #333;
    box-shadow: 10px 10px 30px rgba(0,0,0,0.8);
    box-sizing: border-box;
}

.pokedex-camera {
    width: 50px; /* Volvió al tamaño original */
    height: 50px;
    background: radial-gradient(circle, var(--pokedex-blue), #004466); /* Volvió el azul */
    border: 5px solid white;
    border-radius: 50%;
    margin-bottom: 25px;
    box-shadow: 0 0 15px var(--pokedex-blue); /* Resplandor azul */
}

.pokedex-screen {
    background-color: var(--screen-bg);
    border: 15px solid #e0e0e0; /* Marco grueso restaurado */
    border-radius: 8px;
    padding: 15px;
    border-bottom-left-radius: 35px;
}

h1 {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    text-align: center;
    color: #fff; /* Blanco en vez de amarillo */
    margin-top: 0;
    margin-bottom: 15px;
}

/* Cuadro de pagos compacto */
.payment-info {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 10px;
    text-align: center;
    margin-bottom: 15px;
}

.payment-info p { margin: 0; font-size: 11px; color: #ccc; font-weight: bold; }
.payment-info span { color: var(--text-neon); } /* Solo el verde acá */

/* Alerta de bulk limpia */
.bulk-definition {
    background: rgba(255, 0, 0, 0.2);
    border: 1px solid var(--pokedex-red);
    padding: 10px;
    font-size: 11px;
    margin-bottom: 15px;
    color: #ddd;
    border-radius: 4px;
}

.bulk-definition strong { 
    color: #ff5555; 
}

.calculator-box { background: #000; padding: 15px; border-radius: 6px; border: 1px solid #222; }
.input-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.input-row label { font-size: 11px; font-weight: bold; color: #888; }

input {
    width: 80px;
    background: #151515;
    border: 1px solid var(--text-neon);
    color: var(--text-neon);
    text-align: center;
    padding: 8px;
    font-family: 'Chakra Petch';
    font-size: 16px;
    border-radius: 4px;
}

/* Área de notas más chica */
.notes-container { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.notes-container label { font-size: 10px; font-weight: bold; color: #888; }

textarea {
    width: 100%;
    background: #151515;
    border: 1px solid #444; /* Borde gris en lugar de verde */
    color: #fff;
    padding: 8px;
    font-family: 'Chakra Petch', sans-serif;
    font-size: 12px;
    border-radius: 4px;
    resize: none;
    height: 40px; /* Reducida la altura */
    box-sizing: border-box;
}

textarea:focus { border-color: var(--text-neon); outline: none; }

.screen-results { margin-top: 15px; border-top: 1px dashed #333; padding-top: 10px; }
.res { font-family: 'Press Start 2P', cursive; font-size: 10px; margin-bottom: 8px; color: #888; }
.res span { color: var(--text-neon); }

.pokedex-controls { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; }
.action-zone { flex: 1; margin-right: 15px; }

.btn-action {
    background: #222;
    color: white;
    border: 3px solid #000;
    padding: 12px; /* Reducido para ahorrar espacio */
    width: 100%;
    border-radius: 6px;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    cursor: pointer;
    box-shadow: 4px 4px 0 #000;
}

.wa-notice {
    background: #000;
    color: #ffcc00;
    border: 1px solid #333;
    padding: 8px;
    font-size: 9px;
    margin-top: 8px;
    text-align: center;
    font-weight: bold;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.d-pad-wrapper { filter: drop-shadow(3px 4px 4px rgba(0,0,0,0.7)); cursor: pointer; }
.d-pad-wrapper:active .d-pad { transform: translate(2px, 2px); background: linear-gradient(135deg, #111 0%, #000 100%); }
.d-pad { width: 55px; height: 55px; background: linear-gradient(135deg, #3a3a3a 0%, #111 100%); clip-path: polygon(33% 0%, 66% 0%, 66% 33%, 100% 33%, 100% 66%, 66% 66%, 66% 100%, 33% 100%, 33% 66%, 0% 66%, 0% 33%, 33% 33%); transition: all 0.1s ease; }

/* =========================================
   5. FOOTER
   ========================================= */
.footer { background-color: #050505; border-top: 2px solid #222; padding: 40px 20px 20px; margin-top: auto; }
.footer-content { max-width: 1050px; margin: 0 auto; display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer-section { flex: 1; min-width: 280px; }
.footer-section h4 { font-family: 'Press Start 2P', cursive; color: var(--pokedex-red); font-size: 10px; margin-bottom: 20px; line-height: 1.5; }
.footer-section p { color: #aaa; font-size: 14px; margin: 10px 0; line-height: 1.6; }
.footer-section p strong { color: #fff; }
.footer-section a { color: var(--text-neon); text-decoration: none; font-weight: bold; }
.footer-bottom { text-align: center; border-top: 1px solid #1a1a1a; margin-top: 40px; padding-top: 20px; color: #555; font-size: 12px; }


/* =========================================
   EFECTO VERDE PARA TARJETA DE WHATSAPP (Inicio)
   ========================================= */
.whatsapp-card:hover {
    border-color: var(--text-neon);
    box-shadow: 0 15px 30px rgba(0, 255, 65, 0.2);
}

.whatsapp-card:hover .whatsapp-btn {
    background: var(--text-neon);
    color: #000;
    border-color: var(--text-neon);
}