/* ========================================
   NAVBAR
   ======================================== */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fafafa;
    padding: 10px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    z-index: 1000;
}

.navbar-name {
    font-weight: 700;
    color: #666;
    font-size: 0.95em;
}

.navbar-links {
    display: flex;
    gap: 30px;
}

.navbar-links a {
    color: #999;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.8em;
    transition: color 0.3s ease;
}

.navbar-links a:hover {
    color: #333;
}

/* Eliminar márgenes por defecto del navegador */
body {
    margin: 0;
    padding: 0;
    background: radial-gradient(ellipse 800px 600px at center, 
        rgba(11, 99, 128, 0.20) 0%, 
        #f5f5f5 60%);
    font-family: 'Manrope', -apple-system, sans-serif;
    min-height: 100vh;
}


/* ===================================
   SECCIÓN HERO (TÍTULO GRANDE)
   =================================== */

.top-label {
    position: relative;
    font-size: 0.7rem;
    letter-spacing: 3px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    display: inline-flex;  /* Cambio: inline-flex en lugar de flex */
    align-items: center;
    gap: 8px;
    margin-top: -50px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06),
                0 1px 2px rgba(0, 0, 0, 0.04);
    
    /* NUEVO: Estilo pill/badge */
    background: rgba(255, 255, 255, 0.8);  /* Fondo blanco semi-transparente */
    padding: 12px 24px;  /* Padding interno */
    border-radius: 50px;  /* Bordes muy redondeados */
    border: 1px solid rgba(0, 0, 0, 0.08);  /* Borde sutil */
    backdrop-filter: blur(10px);  /* Efecto de blur (glassmorphism) */
}

.red-dot {
    width: 8px;
    height: 8px;
    background: #FF5020;
    border-radius: 50%;
}


   /* Contenedor del hero: ocupa toda la pantalla, centra el contenido */
.hero {
    min-height: 80vh;
    display: flex;      
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 80px; /* Asegúrate de que no haya padding extra */
}

/* Título principal */
h1 {
    font-size: 6rem;         /* Tamaño muy grande (80px) */
    font-weight: 700;        /* Negrita */
    line-height: 1;
    margin: 0;        /* Espacio entre líneas */
}

/* Primera línea: "Coding" en negro */
.line1 {
    color: black;
}

/* Segunda línea: "Challenges" en rojo (después cambiaremos a gradiente) */
.line2 {
    background: linear-gradient(90deg, #0b6380 0%, #FF5020 50%, #e1fc2c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 20px;
}

.intro-text {
    font-size: 1.2em;
    line-height: 1.6;
    color: #666;
    text-align: center;
    max-width: 750px;
    margin: -120px auto 0;
    padding: 0 20px;
    font-weight: 500;
}

/* ========================================
   SECCIÓN DE CHALLENGES
   ======================================== */

.challenges-section {
    max-width: 1400px;          /* Ancho máximo del contenedor */
    margin: 0 auto;             /* Centrar horizontalmente */
    padding: 100px 40px;        /* Espacio arriba/abajo y lados */
}

/* ========================================
   CADA CHALLENGE (contenedor principal)
   ======================================== */

.challenge {
    display: grid;                          /* Usamos CSS Grid */
    grid-template-columns: 1fr 3fr;         /* Texto ocupa 1 parte, gráficas 2 partes */
    gap: 60px;                              /* Espacio entre columnas */
    align-items: center;                    /* Centrar verticalmente */
    padding: 60px 0;                        /* Espacio arriba y abajo */
    border-bottom: 1px solid #e0e0e0;       /* Línea separadora */
}

/* Challenge con texto a la DERECHA (invertido) */
.challenge-right {
    grid-template-columns: 3fr 1fr;         /* Invertir: gráficas primero */
}

.challenge-right .challenge-text {
    order: 2;                               /* Mover texto al final */
}

.challenge-right .challenge-charts {
    order: 1;                               /* Mover gráficas al inicio */
}

/* ========================================
   COLUMNA DE TEXTO
   ======================================== */

.challenge-header {
    display: flex;                /* Poner número y dificultad en línea */
    align-items: center;
    gap: 15px;                    /* Espacio entre número y badge */
    margin-bottom: 15px;
}

.challenge-number {
    font-size: 0.9rem;
    font-weight: 600;
    color: #999;                  /* Gris suave */
}


.challenge-title {
    font-size: 2rem;
    font-weight: 700;
    color: #000000;               /* Negro */
    margin: 0 0 15px 0;
    line-height: 1.2;
}

.challenge-description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #666;
    margin: 0 0 20px 0;
}



/* Tags/etiquetas */
.challenge-tags {
    display: flex;
    flex-wrap: wrap;              /* Permitir que se envuelvan */
    gap: 10px;
}

.tag {
    font-size: 0.8rem;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 50px;
    font-family: 'IBM Plex Mono', monospace;
    border: none;
    background: #0b6380;
    color: white;
}

/* Variaciones de color para tags */
.tag:nth-child(2) {
    background: #FF5020;
    color: white;
}

.tag:nth-child(3) {
    background: #e1fc2c;
    color: white;
}

/* ========================================
   COLUMNA DE GRÁFICAS
   ======================================== */

.challenge-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* Dos gráficas lado a lado */
    gap: 20px;
}

.chart-box {
    background: white;
    border-radius: 16px;              /* Bordes redondeados */
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06),
                0 1px 2px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.chart-box figure {
    margin: 0;
    width: 100%;
    height: 300px;          /* Altura fija para que Vega sepa el tamaño */
}
/* Placeholder temporal para las gráficas */
.chart-placeholder {
    height: 350px;
    background: #f5f5f5;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 0.9rem;
}

/* ========================================
   NAVEGACIÓN LATERAL (DOTS)
   ======================================== */

.challenge-nav {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 999;
}

.nav-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid #ccc;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    text-decoration: none;
}

/* Estado activo - punto relleno con tu color naranja */
.nav-dot.active {
    background: #FF5020;
    border-color: #FF5020;
}

/* Hover - muestra el número */
.nav-dot:hover {
    border-color: #0b6380;
}

/* Label del número (oculto por defecto) */
.nav-label {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 600;
    color: #666;
    opacity: 0;
    transition: opacity 0.3s ease;
    white-space: nowrap;
    font-family: 'Manrope', sans-serif;
}

/* Mostrar label en hover */
.nav-dot:hover .nav-label {
    opacity: 1;
}

/* Grilla de 6 gráficas pequeñas (3 columnas x 2 filas) */
.charts-grid-small {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.charts-grid-small figure {
    margin: 0;
    background: white;
    border-radius: 12px;
    padding: 15px 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 240px;
    overflow: hidden;
}

.charts-grid-small figure > div {
    width: 100% !important;
}

/* Layout especial para challenge con 6 gráficas */
.challenge.challenge-six {
    grid-template-columns: 1fr 2fr;
}

/* Estilo para el link de Colab */
.colab-link {
    color: #0b6380;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.colab-link:hover {
    color: #FF5020;
}

/* Layout vertical para challenge con mucho texto 4 */
.challenge.challenge-vertical {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.challenge.challenge-vertical .challenge-text {
    max-width: 100%;
}

.challenge.challenge-vertical .challenge-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
}

/* Grid de 3 columnas para challenge con 3 gráficas */
.challenge.challenge-vertical .challenge-charts.three-charts {
    grid-template-columns: repeat(3, 1fr);
}

/* Cajas iguales para las 3 gráficas */
.challenge-charts.three-charts .chart-box {
    height: 450px;           /* Altura fija */
    min-height: 450px;       /* Mínimo igual a la altura */
    max-height: 450px;       /* Máximo igual a la altura */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    overflow: hidden;        /* Oculta contenido que se salga */
}

/* Imagen del chart original */
.challenge-charts.three-charts .chart-box img {
    max-height: 420px;
    width: 100%;
    object-fit: contain;
    margin-top: auto;
    margin-bottom: auto;
}

/* Figure ocupa todo el espacio disponible */
.challenge-charts.three-charts .chart-box figure {
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

/* El div de Vega ocupa todo el figure */
.challenge-charts.three-charts .chart-box figure > div {
    width: 100% !important;
    height: 100% !important;
}

/* Etiqueta arriba de cada chart */
.chart-label {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    text-align: center;
}

/* Organización challenge 5a */
.challenge#challenge-5 {
    grid-template-columns: 1fr 1fr;
}
.challenge#challenge-5 .chart-box {
    min-height: 350px;
    min-width: 525px;
}

/* ========================================
   FOOTER
   ======================================== */

.site-footer {
    border-top: 1px solid #e0e0e0;
    padding: 40px 5%;
    background-color: #f5f5f5;
    background-image: radial-gradient(#ccc 1px, transparent 1px);
    background-size: 20px 20px;
}

.footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: #555;
}

.footer-divider {
    color: #aaa;
}

.footer-content a {
    color: #247D7E;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.footer-content a:hover {
    color: #1a5a5b;
    text-decoration: underline;
}

.word-count {
    font-family: 'Manrope', sans-serif;
    font-size: 0.85rem;
    color: #247D7E !important;
    margin-top: 30px;
    font-weight: 700 !important;
}




/* Mapas grandes en challenge 9 con layout vertical */
#challenge-9.challenge-vertical .challenge-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;  /* Dos mapas lado a lado */
    gap: 20px;
    width: 100%;
}

#challenge-9 .chart-box {
    min-height: 500px;
    height: 500px;
}

#challenge-9 .chart-box figure {
    height: 480px;
}

/* Challenge 10 - Subsecciones apiladas verticalmente */
.challenge-ten {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.challenge-subsection-stacked {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: rgba(255, 255, 255, 0.5);
    padding: 30px;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.subsection-header-inline {
    display: flex;
    flex-direction: column;
}

.subsection-left {
    width: 100%;
}

.subsection-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0b6380;
    margin: 0 0 15px 0;
}

#challenge-10 .chart-box-full {
    width: 80%;
    max-width: 900px;
    margin: 0 auto;
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06),
                0 1px 2px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    justify-content: center;
}

#challenge-10 .chart-box-full figure {
    margin: 0;
    width: auto;  /* Cambiar de 100% a auto */
    height: 400px;
}