:root {
    --primary-color: #3b7bbf;
    --secondary-color: #f8f9fa;
    --accent-color: #25d366;
    --text-color: #333;
    --light-bg: #f8f9fa;
    --dark-bg: #0f1a3d;
    --white: #ffffff;
    --container-width: 1200px;
}

/* Estilos base */
body {
    background-color: var(--secondary-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    padding-top: 80px; /* Ajuste para el navbar fijo */
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
}

.container, 
.container-cambiar, 
.container-recargar, 
.container-nosotros, 
.container-terminos {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Estilos comunes para headers */
.header-common {
    background: linear-gradient(135deg, var(--primary-color), var(--dark-bg));
    color: white;
    padding: 3rem 1rem;
    margin-bottom: 2rem;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.header-common h1 {
    color: white;
    text-shadow: 
        0 1px 0 #0a1a4a,
        0 2px 0 #091845,
        0 3px 0 #081740,
        0 4px 0 #07153b,
        0 5px 0 #061436,
        0 6px 1px rgba(0,0,0,.1),
        0 0 5px rgba(0,0,0,.1),
        0 1px 3px rgba(0,0,0,.3),
        0 3px 5px rgba(0,0,0,.2),
        0 5px 10px rgba(0,0,0,.25),
        0 10px 10px rgba(0,0,0,.2),
        0 20px 20px rgba(0,0,0,.15);
    font-weight: 700;
    letter-spacing: 0.5px;
    margin: 0 0 20px 0;
    position: relative;
    z-index: 1;
    text-align: center;
}

/* Navbar */
.navbar {
    background-color: var(--primary-color);
    padding: 15px 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar-brand img {
    height: 50px;
    margin-right: 10px;
}

.navbar-brand .neon-text {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--white);
    text-shadow: 0 0 5px #fff, 0 0 10px #00bfff, 0 0 20px #00bfff, 0 0 40px #ff0000, 0 0 80px #ff0000;
}

.navbar-nav .nav-link {
    margin: 0 10px;
    padding: 10px 15px;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
    color: var(--white) !important;
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
}

.navbar-nav .nav-link:hover {
    color: var(--primary-color) !important;
    background-color: var(--white);
}


/* ===== INICIO DE CÓDIGO PROBLEMÁTICO ELIMINADO ===== */
/* Se eliminaron las reglas para .carousel-caption que entraban en conflicto
   y todo el bloque de .slide-container, .slide, .caption y .controls 
   porque la regla .slide { display: none; } ocultaba el carrusel.
   Ahora los estilos del carrusel se controlarán desde el HTML o con los 
   estilos que ya probamos en el archivo test.html. */
/* ===== FIN DE CÓDIGO PROBLEMÁTICO ELIMINADO ===== */


/* Pestañas */
.nav-tabs .nav-link {
    color: var(--primary-color);
    font-weight: bold;
}

.nav-tabs .nav-link.active {
    background-color: var(--primary-color);
    color: var(--white);
}

.tab-content {
    padding: 20px;
    border: 1px solid #ddd;
    border-top: none;
    box-sizing: border-box;
}

/* Estilos de la calculadora (se mantienen) */
.calculator {
    max-width: 500px;
    margin: 0 auto;
    padding: 25px;
    background: #f8f9fa;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.calculator label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 16px;
    color: #333;
}
.input-group {
    position: relative;
    margin-bottom: 5px;
}
.input-symbol {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    color: #666;
}
.calculator input[type="number"],
.calculator input[type="text"],
.calculator input[type="email"],
.large-input {
    width: 100%;
    padding: 12px 15px 12px 30px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.3s;
}
.calculator input:focus {
    border-color: #4a90e2;
    outline: none;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}
.result-box {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    background-color: #f1f3f5;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
}
.error-message {
    color: #dc3545;
    font-size: 14px;
    margin-bottom: 15px;
    height: 18px;
    transition: all 0.3s ease;
}
input.invalid {
    border-color: #dc3545;
    background-color: #fff8f8;
}
input.valid {
    border-color: #28a745;
}
#cambiar-ahora {
    width: 100%;
    padding: 12px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
}
#cambiar-ahora:hover {
    background-color: #218838;
}
#cambiar-ahora:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
}
.large-label {
    font-size: 15px;
}
.form-check-input {
    width: 18px;
    height: 18px;
    margin-top: 3px;
}

/* El resto de tus estilos (proceso, resumen, social, footer, etc.) se mantienen igual */
/* ... (pega aquí el resto de tus estilos desde .proceso-pasos hasta el final) ... */
.proceso-pasos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 40px 0;
    position: relative;
}
.paso {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
    text-align: center;
}
.circulo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.azul {
    background-color: #3498db;
    color: white;
    border: 3px solid #2980b9;
}
.blanco {
    background-color: white;
    color: #333;
    border: 3px solid #ecf0f1;
}
.negro {
    background-color: #2c3e50;
    color: white;
    border: 3px solid #1a252f;
}
.linea-punteada {
    flex-grow: 1;
    height: 3px;
    background: repeating-linear-gradient( to right, #3498db, #3498db 10px, transparent 10px, transparent 20px );
    margin: 0 10px;
    position: relative;
    top: -30px;
}
.texto-paso {
    font-size: 16px;
    color: #333;
    font-weight: 500;
}
#social-share-plugin {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.share-btn {
    width: 50px;
    height: 50px;
    background-color: #3b7bbf;
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}
.share-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}
#share-facebook { background-color: #1877f2; }
#share-twitter { background-color: #1da1f2; }
#share-whatsapp { background-color: #25d366; }
footer {
    background: linear-gradient(to right, #1a2a6c, #0f1a3d);
    color: var(--white);
    padding: 20px 0;
    margin-top: 40px;
    text-align: center;
}
footer a {
    color: var(--white);
    text-decoration: none;
    margin: 0 10px;
    padding: 5px 10px;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
    display: inline-block;
}
footer a:hover {
    color: var(--primary-color);
    background-color: var(--white);
}

/* Media Queries */
@media (max-width: 992px) { /* etc... */ }
@media (max-width: 768px) { /* etc... */ }
@media (max-width: 576px) { /* etc... */ }

/* --- Estilos para el nuevo Header Moderno --- */

/* Transición suave para los enlaces de la barra de navegación */
.navbar .nav-link {
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

/* Mejora visual para el enlace activo */
.navbar .nav-link.active {
    font-weight: bold;
    color: #ffffff !important;
}

/* Estilos para el submenú (dropdown) */
.dropdown-menu {
    border-radius: 0.5rem;
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.dropdown-item {
    transition: background-color 0.2s ease-in-out;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Estilo para el enlace principal dentro del submenú */
.dropdown-item.fw-bold {
    color: #1e90ff !important; /* Un azul brillante para destacar */
}

.dropdown-item.fw-bold:hover {
    color: #ffffff !important;
    background-color: #1e90ff;
}

/* Estilos Base (para dispositivos pequeños primero - mobile-first) */
.comment {
    border-left: 3px solid #eee;
    padding-left: 15px; /* Puede ser un valor fijo o relativo, 15px está bien para padding */
    margin-bottom: 20px; /* Mantener fijo para espaciado vertical */
    display: flex; /* Asegura que el avatar y el contenido estén en línea */
    align-items: flex-start; /* Alinea el avatar con la parte superior del texto */
    gap: 10px; /* Espacio entre el avatar y el contenido del comentario */
}

.comment-avatar {
    width: 50px; /* Reducir un poco el tamaño para móviles */
    height: 50px;
    border-radius: 50%;
    flex-shrink: 0; /* Evita que el avatar se encoja */
}

.comment-form {
    background-color: #f8f9fa;
    padding: 1.5rem; /* Usar 'rem' para un padding responsivo */
    border-radius: 8px;
    margin-left: auto; /* Centrar el formulario si es necesario en un contenedor flexible */
    margin-right: auto;
    max-width: 100%; /* Asegura que no se desborde */
}

/* --- Media Queries para Dispositivos Más Grandes --- */

/* Pequeñas pantallas (ej. tabletas, landscape phones) */
@media (min-width: 576px) {
    .comment {
        padding-left: 20px; /* Aumentar un poco el padding en pantallas más grandes */
        gap: 15px;
    }

    .comment-avatar {
        width: 60px; /* Restaurar el tamaño original del avatar para tabletas */
        height: 60px;
    }

    .comment-form {
        padding: 2rem; /* Restaurar el padding original para pantallas más grandes */
    }
}

/* Dispositivos medianos (ej. laptops pequeñas, tabletas grandes) */
@media (min-width: 768px) {
    /* No hay cambios drásticos, los estilos de 576px suelen ser suficientes */
    /* Puedes añadir aquí ajustes si realmente lo necesitas para este breakpoint */
}

/* Dispositivos grandes (ej. escritorios) */
@media (min-width: 992px) {
    /* No hay cambios drásticos, los estilos de 576px suelen ser suficientes */
}

/* Dispositivos extra grandes */
@media (min-width: 1200px) {
    /* Si tienes diseños específicos para pantallas muy grandes, añádelos aquí */
}
 

/* --- Estilos Base (GIFTCARDS) --- */

/* Contenedor general para las tarjetas, si usas Bootstrap Grid (ej. row) */
.product-grid-container {
    display: grid;
    /* Para móviles, una columna por defecto, o ajustar según necesidad */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem; /* Espaciado entre tarjetas usando unidades relativas */
    padding: 1rem; /* Padding general del contenedor */
}

.product-card {
    /* Asegura que la tarjeta use todo el ancho disponible en la columna */
    width: 100%;
    /* Altura mínima para asegurar consistencia, ajusta según el contenido real */
    min-height: 280px;
    border: 1px solid #e0e0e0; /* Un borde sutil */
    border-radius: 0.5rem; /* Bordes ligeramente redondeados */
    overflow: hidden; /* Asegura que el contenido no se desborde */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Sombra suave para profundidad */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex; /* Usar flexbox para el contenido interno de la tarjeta */
    flex-direction: column; /* Apilar elementos verticalmente */
}

.product-card:hover {
    transform: translateY(-8px); /* Aumento del efecto de elevación */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important; /* Sombra más pronunciada al pasar el ratón */
}

.product-card .card-img-top {
    height: 120px; /* Un poco más pequeña para móviles */
    width: 100%; /* Asegura que la imagen ocupe el ancho del contenedor */
    object-fit: contain;
    padding: 0.8rem; /* Padding ajustado */
    background-color: #f8f9fa; /* Un fondo suave para las imágenes */
    border-bottom: 1px solid #eee; /* Separador sutil bajo la imagen */
}

.product-card .card-body {
    padding: 1rem; /* Padding interno del cuerpo de la tarjeta */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Empuja el precio y el botón hacia abajo */
    flex-grow: 1; /* Permite que el cuerpo ocupe el espacio restante */
}

.product-card .card-title {
    font-size: 1.1rem; /* Tamaño de fuente para el título */
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.price-display {
    font-size: 1.8rem; /* Tamaño de fuente ligeramente reducido para móviles */
    font-weight: bold;
    color: var(--bs-primary, #007bff); /* Usar variable CSS de Bootstrap, con fallback */
    margin-top: auto; /* Empuja el precio hacia abajo si usas flex-grow en card-body */
    margin-bottom: 0.5rem;
}

.form-select.fw-bold {
    font-size: 1rem; /* Tamaño de fuente ajustado para select en móviles */
    margin-bottom: 1rem; /* Espaciado antes del botón/otro elemento */
}

/* --- Media Queries para Dispositivos Más Grandes --- */

/* Pequeñas pantallas (ej. tabletas en vertical, ~576px y más) */
@media (min-width: 576px) {
    .product-grid-container {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 2-3 columnas */
        gap: 2rem;
    }
    .product-card .card-img-top {
        height: 140px; /* Volver al tamaño original de la imagen */
        padding: 1rem;
    }
    .price-display {
        font-size: 2.2rem; /* Volver al tamaño original del precio */
    }
    .form-select.fw-bold {
        font-size: 1.1rem; /* Volver al tamaño original del select */
    }
}

/* Dispositivos medianos (ej. laptops pequeñas, tabletas grandes ~768px y más) */
@media (min-width: 768px) {
    .product-grid-container {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* 3-4 columnas */
    }
}

/* Dispositivos grandes (ej. escritorios ~992px y más) */
@media (min-width: 992px) {
    .product-grid-container {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* 4-5 columnas */
    }
}

/* Dispositivos extra grandes (ej. monitores anchos ~1200px y más) */
@media (min-width: 1200px) {
    .product-grid-container {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Más columnas para pantallas muy grandes */
    }
}