/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 31 2025 | 01:09:49 */
/* --- VARIABLES GLOBALES (Asegúrate de que existan o defínelas) --- */
:root {
    --text-dark: #000000; /* Color de texto para el header */
    --white: #FFFFFF;
    /* Colores del degradado del botón */
    --brand-green-start: #9EFF03;
    --brand-green-end: #0CDD04;
}

/* -------------------- HEADER GENERAL -------------------- */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* 🟢 CORRECCIÓN: Fondo BLANCO. */
    background-color: #FFFFFF; 
    /* 🟢 CORRECCIÓN: Z-index alto para asegurar la superposición */
    z-index: 1000; 
    padding: 0.75rem 0; 
    transition: background-color 0.3s, box-shadow 0.3s, padding 0.3s;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.main-header .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Crucial para centrar verticalmente */
    /* Añadimos un min-height para asegurar que el contenido esté bien espaciado */
    min-height: 48px; 
}

/* El efecto al hacer scroll ahora es más simple, ya que el fondo es blanco por defecto */
body.scrolled .main-header {
    background-color: var(--white);
    /* Eliminar el blur si no es necesario */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 0.75rem 0;
}


/* 1. Hide the button by default (for desktop/large screens) */
.menu-toggle {
    /* Hides the element and removes it from the document flow */
    display: none; 
}

/* 2. Media Query to show the button on mobile screens */
/* This example targets screens up to 767px wide */
@media screen and (max-width: 767px) {
    .menu-toggle {
        /* Makes the button visible on mobile screens */
        display: block; 
        /* Or use 'flex', 'inline-block', etc., depending on desired layout */
    }
}


/* -------------------- LOGO -------------------- */
.logo {
    /* CAMBIO: Eliminar estilos de texto ya que ahora será principalmente una imagen */
    display: flex;
    align-items: center;
    font-size: 0; /* Oculta el texto "Sorteo seguro" si se mantiene */
    font-weight: 800;
    color: var(--text-dark);
    gap: 0;
}
.logo-icon-wrapper img {
    /* CAMBIO: Reemplaza la imagen del logo antiguo por la nueva */
    content: url('https://ganaseguro.cl/wp-content/uploads/2025/10/Image.png');
    height: auto;
    width: auto;
    /* CAMBIO: Ajustar el tamaño del logo para que coincida con el diseño */
    max-height: 40px; 
}
.logo-icon-wrapper {
    /* Asegurar que el contenedor del logo sea flexible si solo contiene la imagen */
    display: flex;
    align-items: center;
}

/* -------------------- NAVEGACIÓN -------------------- */
/* -------------------- NAVEGACIÓN -------------------- */
.main-nav {
    display: flex;
    align-items: center;
    /* CAMBIO CLAVE: Usa flex-grow: 1 para que la navegación ocupe el espacio central */
    flex-grow: 1; 
    /* CAMBIO CLAVE: Centra la navegación en ese espacio */
    justify-content: center; 
    margin-left: 0; /* Eliminamos el margin-left que pusimos antes */
}

/* -------------------- Submenu Styles (Alineación corregida) -------------------- */

/* Esto se mantiene igual para que el <li> sea el punto de referencia */
.main-nav .has-submenu {
    position: relative;
}

.main-nav .submenu {
    position: absolute;
    top: 100%;
    /* ✅ CORRECCIÓN CLAVE 1: Alineamos al borde izquierdo del elemento padre (el enlace 'Sorteos') */
    left: 0; 
    /* ✅ CORRECCIÓN CLAVE 2: Eliminamos TODAS las transformaciones que afectaban la posición horizontal */
    transform: translateY(10px); 
    
    background-color: var(--white);
    border-radius: 0.75rem;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    list-style: none;
    padding: 0.5rem;
    margin: 0;
    min-width: 180px;
    opacity: 0;
    visibility: hidden; 
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    z-index: 100;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Aseguramos que el submenú se muestre sin desplazamiento horizontal */
.main-nav .has-submenu:hover .submenu {
    opacity: 1;
    visibility: visible;
    /* Transformación de entrada sólo vertical */
    transform: translateY(0); 
}

/* NAVEGACIÓN - Centrada */
.main-nav {
    display: flex; /* Asegura que la navegación es flexible */
    align-items: center;
    justify-content: center; 
    flex-grow: 1; /* Ocupa el espacio central */
}

.main-nav ul {
    display: flex; /* Asegura que los ítems del menú son flexibles */
    gap: 2.5rem; 
    font-weight: 900;
}
/* ... resto de estilos de navegación ... */

.main-nav a {
    transition: color 0.2s;
    padding: 5.5rem 0;
    /* CAMBIO: Color del texto de navegación */
    color: var(--text-dark); 
}
.main-nav a:hover { 
    /* CAMBIO: Color al pasar el ratón más sutil */
    color: --brand-green-start; 
}

/* ACCIONES DE BOTONES */
.header-actions {
    display: flex;
    align-items: center;
    /* Ajustamos el gap para mantener la separación */
    gap: 0.75rem; 
    /* Aseguramos que no se encoja para mantener sus dimensiones */
    flex-shrink: 0; 
}

/* CAMBIO: Estilos del botón de "Comprar tickets" */
.btn-tickets {
    /* Estilos base del botón */
    text-decoration: none;
    font-weight: 700;
    color: var(--text-dark); /* Color de texto negro */
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    transition: transform 0.2s ease;
    white-space: nowrap; /* Evita que el texto se rompa */

    /* Degradado de Verde (usando los colores proporcionados) */
    background: linear-gradient(90deg, var(--brand-green-start) 0%, var(--brand-green-end) 100%);
    border: none;
    box-shadow: 0 4px 10px rgba(158, 255, 3, 0.4); /* Sombra para resaltar */
}
.btn-tickets:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(158, 255, 3, 0.5);
}



/* CAMBIO: Aseguramos que el ícono-botón es un contenedor flexible para su contenido */
.header-actions .icon-btn {
    font-size: 1.5rem;
    color: var(--text-dark);
    position: relative; /* ¡Mantener! */
    width: 40px; 
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
    border: 1px solid rgba(0, 0, 0, 0.2) !important; 
    background-color: var(--white);
   /* ✅ ADICIONAL: Esconder cualquier texto plano o contenido extra que no sea el ícono o el badge */
}

/* Corrección Final para el Badge de Carrito */
.cart-badge {
    position: absolute;
    /* Ajustamos posición para que quede en la esquina superior derecha del ícono */
    top: -5px; 
    right: -5px; 
    
    /* Colores del badge */
    background-color: var(--brand-green-end); 
    /* ✅ CRUCIAL: Forzamos el color del texto a NEGRO */
    color: #000000; 
    
    font-size: 0.7rem;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    
    /* Aseguramos que se muestre como un flex para centrar el '0' */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Borde blanco para que 'flote' */
    outline: 2px solid var(--white);
    z-index: 10;
    
    /* ✅ ADICIONAL: Aseguramos que el contenido (el '0') no se rompa */
    line-height: 1; 
}

/* ⚠️ ADVERTENCIA: Si agregaste 'overflow: hidden' a .icon-btn, quítalo. */
/* Si lo agregaste antes, asegúrate de que tu .icon-btn se vea así: */
.header-actions .icon-btn {
    /* ... otros estilos ... */
    position: relative; 
    width: 40px; 
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.2) !important; 
    /* ✅ Asegúrate de NO tener 'overflow: hidden;' aquí. */
}

/* -------------------- SUBMENÚS Y OTROS AJUSTES -------------------- */

/* Ajustar el color de las flechas del menú desplegable */
.main-nav .has-submenu > a .bx {
    color: var(--text-dark);
}

/* El resto del código de submenu y media queries se mantiene igual, 
    asegurando que los colores se hereden correctamente de --text-dark */
.submenu li a {
    color: var(--text-dark) !important; /* Asegura el color negro */
}
.submenu li a:hover {
    /* Puedes ajustar estos colores si tienes variables para el hover */
    background-color: #f0f0f0; 
    color: var(--text-dark);
}

/* El botón hamburguesa se mantiene con el color que tenías */
button.menu-toggle{
	color: #4F46E5;
}

/* Asegurar que las flechas del header-actions se vean bien */
.header-actions .arrow-btn-header {
    /* Si aún usas esta clase para el botón con flecha, ajusta su borde */
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: var(--text-dark);
    background-color: var(--white);
}


.main-header .header-container {
	display: flex;
	justify-content: space-between;
	margin-top: 2rem;
	align-items: center;
	min-height: 48px;
	/* Altura mínima para centrado */
}
/* LOGO - Adaptado a la nueva imagen de 'gana seguro' */
.logo {
	display: flex;
	align-items: center;
	font-size: 0;
	/* Oculta el texto antiguo */
	font-weight: 800;
	color: var(--text-dark);
	gap: 0;
}
.logo-icon-wrapper img {
	/* Carga la nueva imagen de logo */
	content: url('https://ganaseguro.cl/wp-content/uploads/2025/10/Image.png');
	height: auto;
	max-height: 6rem;
	max-width: 10rem;
	/* Tamaño del logo */
	width: auto;
	margin-left: 2rem;
}
/* NAVEGACIÓN - Centrada */
.main-nav {
	display: flex;
	/* Asegura que la navegación es flexible */
	align-items: center;
	justify-content: center;
	flex-grow: 1;
	/* Ocupa el espacio central */
}
.main-nav ul {
	display: flex;
	gap: 2.5rem !important;
	font-weight: 500;
}
/* ... resto de estilos de navegación ... */
.main-nav a {
	color: var(--brand-dark-blue);
	/* Color de texto negro */
	padding: 0.5rem 0;
}
.main-nav a:hover {
	color: rgba(0, 0, 0, 0.7);
}
/* SUBMENÚ - CORRECCIÓN DE POSICIÓN */
.main-nav .has-submenu {
	position: relative;
}
.main-nav .submenu {
	position: absolute;
	top: 100%;
	left: 0;
	/* ✅ ALINEADO AL INICIO DEL PADRE */
	transform: translateY(10px);
	/* Separación inicial */
	background-color: var(--white);
	/* El resto de estilos se mantienen */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
	z-index: 100;
	/* ... el resto de estilos del submenu ... */
}
.main-nav .has-submenu:hover .submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	/* ✅ SOLO TRANSFORMACIÓN VERTICAL */
}
/* ACCIONES DE BOTONES */
.header-actions {
	display: flex;
	align-items: center;
	/* Ajustamos el gap para mantener la separación */
	gap: 0.75rem;
	/* Aseguramos que no se encoja para mantener sus dimensiones */
	flex-shrink: 0;
}
/* Estilos de botones de iconos (Carrito/Perfil) */
.header-actions .icon-btn {
	font-size: 1.5rem;
	color: var(--text-dark);
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.2) !important;
	/* Borde sutil */
	background-color: var(--white);
	/* ... el resto de estilos ... */
}
.header-actions .icon-btn:hover {
	background-color: rgba(0, 0, 0, 0.05);
}

/* ==================================== */
/* === ESTILOS PARA VISTA MÓVIL (< 992px) === */
/* ==================================== */

/* Ocultar el botón de menú (hamburguesa) por defecto en escritorio */
/* ================================================= */
/* === AJUSTES DE ESCRITORIO (Para el Menu Toggle) === */
/* ================================================= */

/* 1. Ocultar el botón de menú (hamburguesa) por defecto en escritorio */
.menu-toggle {
    display: none;
    /* Ajustes visuales si quieres que se vea mejor en escritorio si lo activas */
    font-size: 2rem; 
    color: var(--brand-dark-blue);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 1001;
}

/* 2. Asegurar que los elementos del escritorio no se rompan */
.main-header .header-container {
    /* Mantenemos el display flex de escritorio */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ======================================= */
/* === ESTILOS PARA VISTA MÓVIL (< 992px) === */
/* ======================================= */

@media (max-width: 991px) {
/* ================================================= */
/* === AJUSTES DE ESCRITORIO (Para el Menu Toggle) === */
/* ================================================= */

/* 1. Ocultar el botón de menú (hamburguesa) por defecto en escritorio */
.menu-toggle {
    display: none;
    /* Ajustes visuales si quieres que se vea mejor en escritorio si lo activas */
    font-size: 2rem; 
    color: var(--brand-dark-blue);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 1001;
}

/* 2. Asegurar que los elementos del escritorio no se rompan */
.main-header .header-container {
    /* Mantenemos el display flex de escritorio */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ======================================= */
/* === ESTILOS PARA VISTA MÓVIL (< 992px) === */
/* ======================================= */

@media (max-width: 991px) {
    
    /* 🔴 Mostrar el botón de hamburguesa */
    .menu-toggle {
        display: block;
    }
	
	button.menu-toggle{
		color: #0ABC04;
		margin-left: 0.5rem;
	}

    /* 🔴 Ocultar los elementos de escritorio para móvil */
    .main-nav,
    /*.header-actions {
        display: none; 
        flex-grow: unset; 
    }*/
	
	.header-actions {
		margin-right: 0.5rem;
	}
	
	.icon-btn.arrow-btn-header{
		display: none;
	}

    /* 🔴 REESTRUCTURACIÓN DEL MENÚ MÓVIL (CUANDO ESTÁ ABIERTO) */
    .main-header.toggled .main-nav {
        /* Despliega el menú cuando la clase 'toggled' está activa (via JS) */
        display: block;
        
        position: fixed;
        top: 0; 
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--white);
        overflow-y: auto;
        z-index: 999;
        
        /* Efecto deslizable: se desliza desde el lateral */
        transform: translateX(0) !important; 
        transition: transform 0.3s ease-in-out;
        
        padding-top: 80px; /* Espacio para que el menú no tape el logo/hamburguesa */
    }
    
    /* 🔴 ESTILOS DE LISTA VERTICAL */
    .main-nav ul {
        display: block; /* Vuelve a formato de lista vertical */
        gap: 0 !important; 
        margin: 0;
        padding: 0 20px; /* Padding a los lados */
        list-style: none;
    }
    
    .main-nav ul li {
        width: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    
    .main-nav a {
        display: block;
        padding: 15px 0;
        font-weight: 600;
    }
    
    /* 🔴 CORRECCIÓN CLAVE: Submenú (Sorteos) */
    .main-nav .has-submenu {
        position: static; /* Desactiva el posicionamiento absoluto */
    }
    .main-nav .submenu {
        /* Muestra el submenú en línea, sin animaciones de escritorio */
        position: static; 
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        padding-left: 20px; /* Sangría */
        background-color: transparent; /* Fondo transparente */
    }
}
	
/* --- RESALTADO DE MENÚ ACTIVO (VERDE FORZADO) --- */

/* Usamos las clases más altas del header para dar máxima especificidad */
header.main-header nav.main-nav ul li.current-menu-item > a,
header.main-header nav.main-nav ul li.current-menu-ancestor > a {
    /* 🟢 ¡APLICACIÓN FORZADA DEL COLOR! */
    color: var(--brand-green-end) !important; 
    font-weight: 700 !important; /* También hacemos la fuente más gruesa */
}

/* 2. Resaltar el ícono de flecha del submenú */
header.main-header nav.main-nav ul li.current-menu-ancestor > a .bx {
    color: var(--brand-green-end) !important;
}

/* 3. Estilo de hover para los enlaces activos */
header.main-header nav.main-nav ul li.current-menu-item > a:hover,
header.main-header nav.main-nav ul li.current-menu-ancestor > a:hover {
    /* Usamos el color de inicio del degradado para el hover */
    color: var(--brand-green-start) !important; 
}

/* 4. Resaltar el enlace con la clase has-submenu si es el ancestro */
header.main-header nav.main-nav ul li.has-submenu.current-menu-ancestor > a {
    color: var(--brand-green-end) !important;
}