/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 29 2025 | 01:01:00 */
:root {
    /* ... Tus otras variables ... */
    
    /* 🟢 Degradado de Fondo del Hero/Pasos (Auto) */
    --auto-hero-bg-start: #0ABC04; /* 0% (Izquierda) */
    --auto-hero-bg-end: #000000;   /* 100% (Derecha) */
    
    /* 🟢 Color de texto principal para contraste */
    --auto-text-light: #FFFFFF;
    --auto-text-dark: #000000;
	--winner-card-bg-start: #F2BC09; /* 0% (Abajo) */
    --winner-card-bg-end: #FAEEC5;   /* 100% (Arriba) */
}


/* 🟢 NUEVO: Contenedor de Ancho Completo para Elementos Específicos */
.container-fluid {
    /* Anula la restricción de ancho máximo de 1280px */
    max-width: 100% !important; 
    /* Aseguramos el padding lateral para que el contenido no se pegue a los bordes */
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin: 0 auto;
}

/* 🟢 AJUSTE: Hero Content (Alineación Forzada) */
.auto-hero-content {
    /* Si el auto-hero-content tenía el max-width, lo quitamos */
	margin-top: 5rem
    max-width: 100% !important; 
    
    /* Aseguramos que la columna de texto (izquierda) tenga suficiente espacio */
    justify-content: flex-start; 
	padding-bottom: 20rem;
}

.buscador-tickets{
	display: none !important;
}



/* --- HERO AUTO: Estilos de Fondo y Contenedor --- */

/* --- HERO AUTO: Contenedor Principal --- */
.auto-hero-section {
    position: relative;
    /* 🔴 CRUCIAL: Aseguramos que el overflow sea visible */
    overflow: visible; 
    padding-top: 3rem; /* Quitamos el padding-bottom del Hero aquí */
    z-index: 10;
}

/* 🟢 FONDO DEGRADADO DOBLE ESPACIO (La solución definitiva) */
.auto-hero-background-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    
    /* 🔴 AJUSTE CLAVE 1: Eliminamos la altura fija (height) */
    /* 🔴 AJUSTE CLAVE 2: Usamos 'bottom' para que se extienda hasta el final de la sección de pasos */
    
    /* Le decimos que empiece en el top del Hero (0) */
    top: 0;
    /* Le decimos que termine en un punto más abajo de la página, por ejemplo, 50px DESPUÉS del final de la sección de Pasos */
    /* El truco es calcular la altura total del Hero + Pasos, o usar un valor muy grande */
    
    /* Probamos con la altura combinada del Hero y la sección de pasos + un extra */
    min-height: 2500px; /* Valor seguro para cubrir ambas secciones */
    
    /* Degradado de Verde Oscuro a Negro (se mantiene) */
    background: linear-gradient(180deg, var(--auto-hero-bg-start) 0%, var(--auto-hero-bg-end) 100%);
    z-index: 1; /* Detrás del contenido */
}



/* --- Columna de Texto (Izquierda) --- */

.hero-text-content {
    max-width: 550px;
    padding-top: 2rem;
}

.auto-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.auto-subtitle {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    line-height: 1.5;
}

.hero-actions-auto {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* 🟢 Estilos del Botón CTA (Reutilizamos la clase .btn-tickets) */
.btn-tickets-auto {
    /* ... (Asegúrate de que tus estilos de botón verde/lima están importados) ... */
    background: var(--brand-accent-green); /* Color sólido verde para simplicidad */
    color: var(--auto-text-dark);
    padding: 0.8rem 1.75rem;
    border-radius: 999px;
    font-weight: 500;
    text-decoration: none;
}

.link-cta-auto {
    color: var(--auto-text-light);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.hero-bottom-bar-auto {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
    opacity: 0.7;
}

/* --- Imágenes (Derecha - Posicionamiento Absoluto) --- */

.hero-image-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    width: 60%; 
    height: 90%;
    z-index: 3;
    pointer-events: none; /* Ignora clics en esta capa */
}

.hero-image-wrapper-2 {
    position: absolute;
    right: 0;
    top: 0;
    width: 30%; 
    height: 60%;
    z-index: 3;
    pointer-events: none; /* Ignora clics en esta capa */
}

.hero-main-car {
    position: absolute;
    bottom: 10;
    right: 0;
    width: 100%;
    max-width: 900px; 
    height: auto;
    object-fit: contain;
}

/* Tarjeta del Ganador (La imagen que contiene el mensaje) */
.hero-winner-card {
    position: absolute;
    top: 65%; 
    right: 100%;
    width: 350px; 
    height: auto;
    
    /* 🟢 APLICAMOS EL DEGRADADO AL FONDO Y LO POSICIONAMOS */
    /* Este degradado DEBE ser aplicado al contenedor que tiene el texto (el mensaje.png) */
    
    border-radius: 10px; /* Borde suave */
    
    /* Sombra para que destaque */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); 
    
    color: var(--auto-text-dark); /* Texto oscuro para que se vea */
    padding: 1rem;
}

/* 🟢 Badge de Garantía */
.hero-guarantee-badge {
    position: absolute;
    bottom: 15%;
    right: 10%;
    text-align: center;
    color: var(--auto-text-light);
    z-index: 4;
    font-size: 0.8rem;

}
.hero-guarantee-badge img {
    width: 150px;
    margin-bottom: 0.5rem;
    right: 0%;
}
.hero-guarantee-badge .stars {
    color: var(--star-color);
}



@media (max-width: 767px) {
    /* 🔴 SOLUCIÓN DE FONDO E IMAGEN CON MEZCLA */
    
    /* Nota: Si el degradado está en un wrapper exterior, moveremos la imagen allí.
       Asumo que el fondo ya tiene un degradado y es '.auto-hero-background-gradient' */
       
    .auto-hero-background-gradient {
        /* Reemplaza la URL con tu imagen real */
        background-image: linear-gradient(180deg, var(--auto-hero-bg-start) 0%, var(--auto-hero-bg-end) 100%);
        
/* 2. Propiedades de la Imagen */
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        
        /* 3. Modo de Mezcla (CRUCIAL) */
        background-blend-mode: multiply !important;
    }
    
    /* 🔴 CORRECCIÓN CLAVE: Reducir padding-bottom para mostrar el auto */
    .auto-hero-content {
        padding-bottom: 2rem; 
        /* Quita cualquier margen innecesario que pueda empujar el contenido */
        margin: 0;
    }
	
	.hero-text-content {
        order: 1;
        width: 100%;
        max-width: 100%;
        padding: 2rem !important;
    }
	
	.auto-hero-background-gradient:not([data-desktop-bg="true"]) {
         /* Si existía una regla más simple, la anulamos aquí */
         background-image: none; /* Esto podría ser necesario si la imagen de escritorio es diferente */
    }
    
    /* 🔴 AJUSTE DE ALTURA */
    /* Aseguramos que la altura no sea demasiado pequeña para ocultar el fondo */
    .auto-hero-section {
        min-height: 800px; /* Asegura que la sección sea lo suficientemente alta para mostrar el fondo */
    }
	
}

/* --- HERO AUTO Y HOW IT WORKS: Contenedor Principal con Degradado --- */
.auto-hero-section {
    position: relative;
    overflow: hidden; 
    z-index: 1; 
	display: flow-root;
    /* 🟢 REGLA GLOBAL: Degradado con Imagen de Fondo y Modo de Mezcla */
background: 
        /* 1. Degradado (se aplica primero) */
        linear-gradient(180deg, var(--auto-hero-bg-start) 0%, var(--auto-hero-bg-end) 100%), 
        /* 2. Imagen de Fondo (Se mezcla con el degradado) */
        url('https://ganaseguro.cl/wp-content/uploads/2025/10/xjeep-avenger-overview-banner.jpg'); 
    
    /* 🔴 AJUSTE CLAVE 1: background-size para AMBOS fondos */
    /* La primera "cover" es para el degradado, la segunda "cover" es para la imagen.
       Esto permite que ambos se estiren y cubran el contenedor. */
    background-size: cover, cover; 
    
    background-position: center center;
    background-repeat: no-repeat;
    background-blend-mode: multiply; /* Aplica el efecto de multiplicación */
}

/* 🔴 ELIMINAMOS O HACEMOS DISPLAY:NONE AL .auto-hero-background-gradient */
/* Como hemos movido el fondo al wrapper, esta regla ya no es necesaria y podría causar problemas */
.auto-hero-background-gradient { 
    display: none; 
}

@media (max-width: 767px) {
    
    /* ------------------------------------------- */
    /* === HERO TEXTO Y LAYOUT MÓVIL === */
    /* ------------------------------------------- */
    
    /* 🔴 Contenedor de Texto: Elimina padding duplicado y asegura el 100% de ancho */
    .hero-text-content {
        order: 1;
        width: 100%;
        max-width: 100%;
        /* Usamos padding-inline para aplicar el espacio lateral sin conflictos */
        padding-inline: 1.5rem; 
        padding-top: 1rem; 
        padding-bottom: 2rem;
        box-sizing: border-box;
    }

    /* 🔴 Título (Ajuste Tipográfico) */
    .auto-title {
        font-size: 2.2rem; /* Reducción de 3.5rem a un tamaño legible en móvil */
        line-height: 1.15;
    }
    
    /* 🔴 Botones (Apilamiento) */
    .hero-actions-auto {
        flex-direction: column; 
        align-items: flex-start; 
        gap: 0.75rem;
    }

    /* ------------------------------------------- */
    /* === HOW-TO (Pasos) REESTRUCTURACIÓN MÓVIL === */
    /* ------------------------------------------- */
    
    /* 🔴 GRID DE PASOS: De 3 columnas a Pila (1 columna) */
    .auto-how-it-works-grid {
        display: flex; /* Cambiamos de Grid a Flex para apilamiento */
        flex-direction: column; 
        gap: 2rem; 
        
        /* Asegura el padding lateral, ya que está fuera del container normal */
        padding: 0 1.5rem; 
        margin-bottom: 2rem;
    }
    
    /* 🔴 PASO INDIVIDUAL: Eliminar la barra vertical y asegurar el flujo */
    .auto-how-step {
        width: 100%;
        padding-left: 0; 
    }
    .auto-how-step::after {
        content: none; /* Desactiva la barra vertical decorativa de escritorio */
    }

    /* 🔴 AJUSTE DE LISTA INTERNA */
    .auto-how-step ul {
        padding-left: 0;
    }
    
    .auto-how-step li {
        padding-left: 1.5rem; /* Ajusta la sangría para el punto de lista */
        /* La alineación es vertical y limpia ahora */
    }
}










/* --- SECCIÓN: CÓMO PARTICIPAR (AUTOS) --- */

/* 🟢 ESTILOS PARA LA SECCIÓN DE PASOS (QUE RECIBE EL FONDO EXTENDIDO) */
.auto-how-it-works-section {
    background-color: transparent; 
    position: relative;
    z-index: 5; 
    /* 🔴 CRUCIAL: Subimos esta sección para que se pegue al Hero y el degradado la envuelva */
    margin-top: -100px; 
    padding-top: 5rem; 
    padding-bottom: 5rem;
}

.auto-how-it-works-header {
    text-align: center;
    margin-bottom: 4rem;
}
.auto-how-it-works-header .tagline {
    font-weight: 600;
    color: var(--winner-card-bg-end); /* Color verde de acento */
    margin-bottom: 1rem;
}
.auto-how-it-works-header .section-title {
    color: var(--auto-text-light); /* Título BLANCO */
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 1rem;
}

/* 🟢 CUADRÍCULA Y PASOS (Oscuros) */
.auto-how-it-works-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin-bottom: 3rem;
    padding: 0 2rem; /* Padding lateral */
}

.auto-how-step {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* 🟢 BARRA SEPARADORA (Verde) */
.auto-how-step::after {
    content: '';
    position: absolute;
    top: 0;
    left: -2rem; 
    width: 3px;
    height: 100%;
    /* Degradado de Verde/Lima (de arriba a abajo) */
    background: linear-gradient(to bottom, var(--winner-card-bg-start) 0%, var(--winner-card-bg-end) 100%);
    border-radius: 999px;
}

.auto-how-step .step-number {
    color: var(--winner-card-bg-end); 
    font-weight: 700;
    margin-bottom: 1rem;
}

.auto-how-step h3 {
    color: var(--auto-text-light); /* Títulos de paso BLANCOS */
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.auto-how-step ul { list-style: none; padding-left: 0; }
.auto-how-step li {
    color: var(--auto-text-light); /* Texto de descripción BLANCO */
    opacity: 0.8;
    line-height: 1.6;
    padding-left: 1.5rem;
    position: relative;
}

.auto-how-step li::before {
    /* 🟢 Reemplazamos el polígono con un círculo blanco/verde */
    content: ''; 
    position: absolute;
    left: 0;
    top: 0.5rem; 
    width: 8px; 
    height: 8px;
    border-radius: 50%;
    background-color: var(--winner-card-bg-end); 
}

/* 🟢 CTA (Centrado) */
.auto-how-it-works-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem;
}



@media (max-width: 767px) {
    
    /* 🔴 AJUSTE DEL CONTENEDOR DE PASOS: De Grid a Pila Vertical */
    .auto-how-it-works-grid {
        display: flex;
        flex-direction: column; /* Apila los pasos verticalmente */
        gap: 2rem; /* Reduce el espacio vertical entre los pasos */
        padding: 0 1.5rem; /* Ajusta el padding lateral a la medida estándar */
    }

    /* 🔴 AJUSTE DE PASO INDIVIDUAL (Eliminar barra separadora horizontal) */
    .auto-how-step {
        position: relative;
        padding-left: 0; /* Asegura que el contenido comience al inicio */
    }

    /* 🔴 DESACTIVAR LA BARRA VERTICAL DEL ESCRITORIO (No necesaria en móvil) */
    .auto-how-step::after {
        content: none; 
    }

    /* 🔴 CORRECCIÓN DE LA LISTA INTERNA (Para la sangría) */
    .auto-how-step ul {
        padding-left: 0;
    }
    
    /* 🔴 CORRECCIÓN DE POSICIONAMIENTO DE ELEMENTOS (para alineación) */
    .auto-how-step li {
        padding-left: 1rem; /* Sangría necesaria para el círculo 'before' */
        /* Asegura que los pasos de la lista interna no se vean desordenados */
    }
    
    /* 🔴 AJUSTE DE LA CABECERA DE LA SECCIÓN */
    .auto-how-it-works-header {
        text-align: center;
        margin-bottom: 2rem;
    }
    .auto-how-it-works-header .section-title {
        font-size: 2rem; /* Reduce el tamaño del título de la sección */
    }
}






/* --- HERO AUTO Y HOW IT WORKS: Contenedor Principal con Degradado --- */
.auto-hero-and-how-it-works-wrapper {
    /* 🟢 APLICAMOS EL DEGRADADO DIRECTAMENTE A ESTE CONTENEDOR */
    background: linear-gradient(180deg, var(--auto-hero-bg-start) 0%, var(--auto-hero-bg-end) 100%);
    position: relative;
    overflow: hidden; /* Aseguramos que nada se salga del wrapper */
    z-index: 1; /* Esto es el fondo principal */
}

/* 🔴 ELIMINAR O REEMPLAZAR ESTA REGLA si usas el nuevo wrapper */
/* .auto-hero-background-gradient { display: none; } */ 
/* Si lo necesitas para algún efecto sutil, puedes darle un z-index bajo y opacidad */

/* --- HERO AUTO: Estilos de la Sección --- */
.auto-hero-section {
    position: relative;
    overflow: visible; /* Permitimos que las imágenes se salgan */
    padding-top: 3rem; 
    padding-bottom: 3rem; /* Padding para separar del how-it-works */
    color: var(--auto-text-light); 
    z-index: 2; /* Contenido del Hero sobre el fondo */
    min-height: 550px; /* Altura mínima del hero */
}

/* --- SECCIÓN: CÓMO PARTICIPAR (AUTOS) --- */
.auto-how-it-works-section {
    position: relative;
    /* 🔴 Ya no necesitamos background-color: transparent ni margin-top negativo, */
    /* ya que el degradado ya está en el padre. */
    color: var(--auto-text-light); 
    padding: 5rem 0 6rem 0; 
    z-index: 2; /* Contenido de How It Works sobre el fondo */
}

.auto-how-it-work-header{
	text-align: center;
}



@media (max-width: 767px) {
    /* 🔴 AJUSTE HERO PRINCIPAL */
    .auto-hero-content {
        /* Fuerza la columna de texto a ocupar el 100% y a ir arriba */
        padding-bottom: 2rem; /* Reduce el padding para que el contenido suba */
        width: 100%;
        box-sizing: border-box;
    }

    /* 🔴 AJUSTE DEL TÍTULO */
    .auto-title {
        font-size: 2.5rem; /* Reduce el tamaño del título para que quepa */
        margin-bottom: 1rem;
    }
    
    /* 🔴 AJUSTE DE ALTURA DE FONDO (Opcional, si el contenido se ve cortado) */
    .auto-hero-and-how-it-works-wrapper {
        padding-bottom: 0;
        /* Puedes asegurar una altura mínima si el contenido es muy corto */
        /* min-height: 80vh; */ 
    }
    
    /* 🔴 OCULTAR ELEMENTOS INNECESARIOS */
    .hero-actions-auto {
        /* Apila los botones de acción si no caben */
        flex-direction: column; 
        align-items: flex-start;
        gap: 0.75rem;
    }
}

@media (max-width: 767px) {
    
    /* 🔴 IMAGEN PRINCIPAL (El Camaro) */
    .hero-image-wrapper {
        position: relative; /* CRUCIAL: Lo devuelve al flujo normal */
        width: 100%; /* Ocupa todo el ancho */
        height: auto; /* Altura automática */
        order: 2; /* Lo colocamos debajo del texto */
        top: auto; 
        right: auto;
        margin-top: 2rem; /* Espacio de separación del texto */
        
        /* Oculta la imagen completamente en móvil si el diseño lo requiere */
        /* display: none; */ 
    }
    
    /* El segundo wrapper, si existe */
    .hero-image-wrapper-2 {
        display: none; /* Generalmente se oculta el fondo extra */
    }

    .hero-main-car {
        position: relative; /* Asegura que la imagen sea relativa al wrapper */
        width: 100%;
        max-width: 100%;
        bottom: auto; 
    }

    /* 🔴 TARJETA DEL GANADOR (El Elemento más Problemático) */
    .hero-winner-card {
        position: static; /* CRUCIAL: Lo devuelve al flujo normal del documento */
        width: 90%; /* Ancho apropiado para la vista móvil */
        max-width: 350px;
        margin: 1rem auto; /* Centrarlo y separarlo */
        right: auto;
        top: auto;
        
        /* Ajustar el tamaño del texto para que no se desborde */
        font-size: 0.9em; 
        padding: 1rem;
        
        order: 3; /* Colocamos la tarjeta debajo del auto, si el auto está visible */
    }
    
    /* 🔴 BADGE DE GARANTÍA */
    .hero-guarantee-badge {
        display: none; /* Ocultar en móvil para reducir el desorden visual */
    }
    
    /* 🔴 MOVEMOS LA COLUMNA DE TEXTO AL FRENTE */
    .hero-text-content {
        order: 1;
        width: 100%;
        max-width: 100%;
        padding-top: 0;
    }
}