/* ============================================
   ESTILOS SECCION GANADOR AHORRADOR FELIZ
   ============================================
   
   INDICE:
   1. Variables CSS (colores, espaciados, etc.)
   2. Estilos base de la seccion
   3. Contenedor Grid principal
   4. Estilos del contenido (izquierda)
   5. Animacion del nombre del ganador
   6. Estilos del boton
   7. Estilos de los logos
   8. Estilos de la imagen (derecha)
   9. Elementos decorativos
   10. Media Queries (responsive)
   
============================================ */

/* ============================================
   1. VARIABLES CSS
   ============================================
   PARA CAMBIAR COLORES: Modifica los valores aqui
   PARA CAMBIAR ESPACIADOS: Ajusta los valores de spacing
============================================ */
:root {
    /* Colores principales */
    --color-verde-primario: #388e3c;      /* Verde Cooindegabo */
    --color-verde-oscuro: #2e7d32;        /* Verde mas oscuro para hover */
    --color-verde-claro: #e8f5e9;         /* Verde muy claro para fondos */
    --color-dorado: #ffc107;              /* Dorado para destacar ganador */
    --color-dorado-oscuro: #ff8f00;       /* Dorado oscuro */
    --color-naranja: #ff6f00;             /* Naranja para acentos */
    
    /* Colores de texto */
    --color-texto-oscuro: #1a1a1a;
    --color-texto-gris: #555555;
    --color-texto-claro: #ffffff;
    
    /* Fondos */
    --color-fondo-seccion: linear-gradient(135deg, #f8f9fa 0%, #e8f5e9 50%, #fff8e1 100%);
    --color-fondo-blanco: #ffffff;
    
    /* Espaciados */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-xxl: 4rem;
    
    /* Bordes */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --border-radius-xl: 30px;
    
    /* Sombras */
    --sombra-suave: 0 4px 15px rgba(0, 0, 0, 0.1);
    --sombra-media: 0 8px 30px rgba(0, 0, 0, 0.15);
    --sombra-fuerte: 0 15px 50px rgba(0, 0, 0, 0.2);
    --sombra-dorada: 0 8px 30px rgba(255, 193, 7, 0.4);
    
    /* Transiciones */
    --transicion-rapida: 0.2s ease;
    --transicion-normal: 0.3s ease;
    --transicion-lenta: 0.5s ease;
    
    /* Fuentes */
    --fuente-principal: 'Poppins', sans-serif;
}

/* ============================================
   2. ESTILOS BASE DE LA SECCION
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--fuente-principal);
    color: var(--color-texto-oscuro);
    line-height: 1.6;
}

.ganador-section {
    /* Fondo con gradiente suave */
    background: var(--color-fondo-seccion);
    
    /* Espaciado interno */
    /* PARA CAMBIAR ALTURA: Modifica padding-top y padding-bottom */
    padding: var(--spacing-xxl) var(--spacing-lg);
    
    /* Altura minima */
    min-height: 100vh;
    
    /* Centrar contenido verticalmente */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Posicion relativa para elementos decorativos */
    position: relative;
    overflow: hidden;
}

/* Fondo decorativo con patron */
.ganador-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Patron de puntos sutiles */
    background-image: radial-gradient(circle, rgba(56, 142, 60, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
    z-index: 0;
}

/* ============================================
   3. CONTENEDOR GRID PRINCIPAL
   ============================================
   PARA CAMBIAR DISTRIBUCION DE COLUMNAS:
   - Modifica grid-template-columns
   - 1fr 1fr = 50% cada columna
   - 1fr 1.2fr = contenido mas pequeno, imagen mas grande
   - 1.2fr 1fr = contenido mas grande, imagen mas pequena
============================================ */
.ganador-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    
    /* Grid de 2 columnas */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: center;
    
    position: relative;
    z-index: 1;
}

/* Clases auxiliares para cambiar orden */
/* PARA INVERTIR POSICIONES: Agrega estas clases en el HTML */
.orden-1 {
    order: 1;
}

.orden-2 {
    order: 2;
}

/* ============================================
   4. ESTILOS DEL CONTENIDO (IZQUIERDA)
   ============================================ */
.ganador-contenido {
    /* Espaciado interno */
    padding: var(--spacing-lg);
}

/* Titulo principal */
.ganador-titulo {
    /* Tamano de fuente */
    /* PARA CAMBIAR TAMANO: Modifica font-size */
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-verde-primario);
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    
    /* Mostrar en bloque para el span */
    display: flex;
    flex-direction: column;
}

/* Periodo del sorteo (Noviembre - Diciembre) */
.ganador-periodo {
    /* PARA CAMBIAR COLOR: Modifica color */
    color: var(--color-dorado-oscuro);
    font-size: 1.8rem;
    font-weight: 600;
    margin-top: var(--spacing-xs);
}

/* ============================================
   5. ANIMACION DEL NOMBRE DEL GANADOR
   ============================================
   PARA CAMBIAR ANIMACION:
   - Modifica @keyframes brilloNombre
   - Cambia animation-duration para velocidad
   - Cambia los colores en el gradiente
============================================ */
.ganador-nombre {
    /* Tamano grande y destacado */
    font-size: 2.2rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: var(--spacing-sm);
    
    /* Gradiente animado en el texto */
    background: linear-gradient(
        90deg,
        var(--color-dorado) 0%,
        var(--color-naranja) 25%,
        var(--color-dorado) 50%,
        var(--color-naranja) 75%,
        var(--color-dorado) 100%
    );
    background-size: 200% auto;
    
    /* Aplicar gradiente al texto */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Animacion de brillo */
    animation: brilloNombre 3s linear infinite;
    
    /* Sombra de texto para profundidad */
    filter: drop-shadow(2px 2px 4px rgba(255, 152, 0, 0.3));
    
    /* Efecto de resplandor */
    position: relative;
}

/* Resplandor detras del nombre */
.ganador-nombre::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--color-dorado), var(--color-naranja));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: blur(8px);
    opacity: 0.5;
    z-index: -1;
    animation: pulsoResplandor 2s ease-in-out infinite;
}

/* Animacion de brillo del nombre */
@keyframes brilloNombre {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* Animacion de pulso del resplandor */
@keyframes pulsoResplandor {
    0%, 100% {
        opacity: 0.3;
        filter: blur(8px);
    }
    50% {
        opacity: 0.6;
        filter: blur(12px);
    }
}

/* Agencia del ganador */
.ganador-agencia {
    font-size: 1.3rem;
    color: var(--color-texto-gris);
    margin-bottom: var(--spacing-md);
}

.ganador-agencia strong {
    color: var(--color-verde-primario);
    font-weight: 600;
}

/* Mensaje motivacional */
.ganador-mensaje {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-texto-oscuro);
    margin-bottom: var(--spacing-lg);
    
    /* Estilo cursiva elegante */
    font-style: italic;
}

/* ============================================
   6. ESTILOS DEL BOTON
   ============================================
   PARA CAMBIAR COLOR DEL BOTON:
   - Modifica background en .ganador-boton
   - Modifica background en .ganador-boton:hover
============================================ */
.ganador-boton {
    /* Mostrar como inline-flex */
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    
    /* Espaciado interno */
    padding: var(--spacing-md) var(--spacing-xl);
    
    /* Color de fondo verde */
    background: linear-gradient(135deg, var(--color-verde-primario) 0%, var(--color-verde-oscuro) 100%);
    color: var(--color-texto-claro);
    
    /* Bordes redondeados */
    border-radius: var(--border-radius-xl);
    
    /* Sin subrayado */
    text-decoration: none;
    
    /* Fuente */
    font-size: 1.1rem;
    font-weight: 600;
    
    /* Sombra */
    box-shadow: var(--sombra-media);
    
    /* Transicion suave */
    transition: all var(--transicion-normal);
    
    /* Cursor pointer */
    cursor: pointer;
    
    margin-bottom: var(--spacing-md);
}

/* Hover del boton */
.ganador-boton:hover {
    /* Elevar el boton */
    transform: translateY(-3px);
    
    /* Sombra mas pronunciada */
    box-shadow: var(--sombra-fuerte);
    
    /* Color mas claro */
    background: linear-gradient(135deg, var(--color-verde-oscuro) 0%, var(--color-verde-primario) 100%);
}

/* Icono del boton */
.boton-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: transform var(--transicion-normal);
}

.boton-icono svg {
    width: 100%;
    height: 100%;
}

/* Animacion del icono en hover */
.ganador-boton:hover .boton-icono {
    transform: translateX(5px);
}

/* Texto legal */
.ganador-legal {
    font-size: 0.95rem;
    color: var(--color-texto-gris);
    margin-bottom: var(--spacing-lg);
    
    /* Estilo sutil */
    font-style: italic;
    opacity: 0.8;
}

/* ============================================
   7. ESTILOS DE LOS LOGOS
   ============================================
   PARA CAMBIAR TAMANO DE LOGOS:
   - Modifica max-width en .logo-imagen
   PARA AGREGAR MAS LOGOS:
   - Duplica el div .logo-item en el HTML
============================================ */
.ganador-logos {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.logo-item {
    /* Contenedor del logo */
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-imagen {
    /* Tamano maximo del logo */
    /* PARA CAMBIAR TAMANO: Modifica max-width y max-height */
    max-width: 120px;
    max-height: 60px;
    width: auto;
    height: auto;
    
    /* Filtro para mantener contraste */
    filter: grayscale(0%);
    opacity: 0.9;
    
    /* Transicion suave */
    transition: all var(--transicion-normal);
}

/* Hover en logos */
.logo-imagen:hover {
    opacity: 1;
    transform: scale(1.05);
}

/* ============================================
   8. ESTILOS DE LA IMAGEN (DERECHA)
   ============================================
   PARA CAMBIAR TAMANO DE IMAGEN:
   - Modifica max-width en .ganador-imagen
   PARA CAMBIAR FORMA DEL MARCO:
   - Modifica border-radius en .imagen-marco
============================================ */
.ganador-imagen-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-lg);
}

.imagen-marco {
    /* Posicion relativa para decoraciones */
    position: relative;
    
    /* Borde decorativo dorado */
    border: 5px solid var(--color-dorado);
    
    /* Bordes redondeados */
    /* PARA CAMBIAR FORMA: Modifica border-radius */
    /* 50% = circulo, 20px = rectangulo redondeado */
    border-radius: var(--border-radius-lg);
    
    /* Sombra dorada */
    box-shadow: var(--sombra-dorada);
    
    /* Fondo blanco */
    background: var(--color-fondo-blanco);
    
    /* Padding interno */
    padding: 8px;
    
    /* Animacion de flotacion */
    animation: flotarImagen 4s ease-in-out infinite;
}

/* Animacion de flotacion de la imagen */
@keyframes flotarImagen {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

/* Imagen del ganador */
.ganador-imagen {
    /* Tamano de la imagen */
    /* PARA CAMBIAR TAMANO: Modifica width y max-width */
    width: 100%;
    max-width: 450px;
    height: auto;
    
    /* Bordes redondeados */
    border-radius: calc(var(--border-radius-lg) - 5px);
    
    /* Asegurar que no se deforme */
    object-fit: cover;
    
    /* Mostrar como bloque */
    display: block;
}

/* ============================================
   9. ELEMENTOS DECORATIVOS
   ============================================
   PARA OCULTAR DECORACIONES:
   - Agrega display: none; a la clase correspondiente
============================================ */

/* Circulos decorativos */
.decoracion-circulo {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.decoracion-1 {
    /* Circulo grande verde */
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--color-verde-claro), rgba(56, 142, 60, 0.3));
    top: -20px;
    right: -20px;
    animation: pulsoCirculo 3s ease-in-out infinite;
}

.decoracion-2 {
    /* Circulo pequeno dorado */
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--color-dorado), rgba(255, 193, 7, 0.5));
    bottom: -15px;
    left: -15px;
    animation: pulsoCirculo 3s ease-in-out infinite 1s;
}

/* Animacion de pulso para circulos */
@keyframes pulsoCirculo {
    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

/* Confeti decorativo */
.decoracion-confeti {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='20' cy='20' r='5' fill='%23ffc107'/%3E%3Ccircle cx='80' cy='30' r='4' fill='%23388e3c'/%3E%3Ccircle cx='50' cy='10' r='3' fill='%23ff6f00'/%3E%3Ccircle cx='30' cy='40' r='4' fill='%232196f3'/%3E%3Ccircle cx='70' cy='50' r='3' fill='%23e91e63'/%3E%3C/svg%3E");
    background-size: contain;
    animation: caerConfeti 2s ease-in-out infinite;
}

@keyframes caerConfeti {
    0%, 100% {
        transform: translateX(-50%) translateY(0) rotate(0deg);
    }
    50% {
        transform: translateX(-50%) translateY(10px) rotate(10deg);
    }
}

/* ============================================
   10. MEDIA QUERIES (RESPONSIVE)
   ============================================
   BREAKPOINTS:
   - 1200px: Tablets grandes y laptops pequenas
   - 992px: Tablets
   - 768px: Tablets pequenas
   - 576px: Moviles grandes
   - 480px: Moviles pequenos
============================================ */

/* Tablets grandes y laptops pequenas */
@media (max-width: 1200px) {
    .ganador-titulo {
        font-size: 2.2rem;
    }
    
    .ganador-periodo {
        font-size: 1.6rem;
    }
    
    .ganador-nombre {
        font-size: 1.9rem;
    }
    
    .ganador-imagen {
        max-width: 380px;
    }
}

/* Tablets */
@media (max-width: 992px) {
    .ganador-container {
        /* Cambiar a una columna */
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    /* Imagen arriba en tablet/movil */
    .ganador-imagen-container {
        order: 1;
    }
    
    /* Contenido abajo en tablet/movil */
    .ganador-contenido {
        order: 2;
        text-align: center;
    }
    
    .ganador-titulo {
        font-size: 2rem;
    }
    
    .ganador-nombre {
        font-size: 1.7rem;
    }
    
    .ganador-logos {
        justify-content: center;
    }
    
    .ganador-imagen {
        max-width: 350px;
    }
}

/* Tablets pequenas */
@media (max-width: 768px) {
    .ganador-section {
        padding: var(--spacing-xl) var(--spacing-md);
    }
    
    .ganador-titulo {
        font-size: 1.8rem;
    }
    
    .ganador-periodo {
        font-size: 1.4rem;
    }
    
    .ganador-nombre {
        font-size: 1.5rem;
        letter-spacing: 1px;
    }
    
    .ganador-agencia {
        font-size: 1.1rem;
    }
    
    .ganador-mensaje {
        font-size: 1.2rem;
    }
    
    .ganador-boton {
        padding: var(--spacing-sm) var(--spacing-lg);
        font-size: 1rem;
    }
    
    .ganador-imagen {
        max-width: 300px;
    }
    
    .decoracion-1 {
        width: 60px;
        height: 60px;
    }
    
    .decoracion-2 {
        width: 40px;
        height: 40px;
    }
}

/* Moviles grandes */
@media (max-width: 576px) {
    .ganador-section {
        padding: var(--spacing-lg) var(--spacing-sm);
        min-height: auto;
    }
    
    .ganador-contenido {
        padding: var(--spacing-sm);
    }
    
    .ganador-titulo {
        font-size: 1.5rem;
    }
    
    .ganador-periodo {
        font-size: 1.2rem;
    }
    
    .ganador-nombre {
        font-size: 1.3rem;
        letter-spacing: 0.5px;
    }
    
    .ganador-agencia {
        font-size: 1rem;
    }
    
    .ganador-mensaje {
        font-size: 1.1rem;
    }
    
    .ganador-boton {
        /* Boton de ancho completo en movil */
        width: 100%;
        justify-content: center;
    }
    
    .ganador-imagen {
        max-width: 260px;
    }
    
    .imagen-marco {
        border-width: 3px;
        padding: 5px;
    }
    
    .logo-imagen {
        max-width: 100px;
        max-height: 50px;
    }
    
    .ganador-logos {
        gap: var(--spacing-md);
    }
}

/* Moviles pequenos */
@media (max-width: 480px) {
    .ganador-titulo {
        font-size: 1.3rem;
    }
    
    .ganador-periodo {
        font-size: 1rem;
    }
    
    .ganador-nombre {
        font-size: 1.1rem;
    }
    
    .ganador-imagen {
        max-width: 220px;
    }
    
    .decoracion-1,
    .decoracion-2 {
        /* Ocultar decoraciones en moviles muy pequenos */
        display: none;
    }
}
#header-container {
    position: sticky;
    top: 0;
    z-index: 1000;
}