/* ============================================================
   BOTONES LATERALES ESTADÍSTICAS (CRISTAL OSCURO)
   ============================================================ */
.pestana-stats {
    position: absolute;
    top: 0;
    width: 80px;
    height: 100%; /* Ocupa todo el alto del contenedor de stats */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1000;
    opacity: 0; /* Ocultos por defecto */
    transition: all 0.4s ease;
    border: none; /* Quitamos el borde de mierda de antes */
    
    /* Efecto Cristal Oscuro */
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: white;
    font-size: 35px;
    user-select: none;
}

/* Área de detección invisible para que sea fácil atinar con el ratón */
.pestana-stats::after {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    width: 130px; 
}

.pestana-stats.prev { 
    left: 0; 
    border-radius: 0; /* Ya no son pestañas redondeadas, son barras laterales */
}

.pestana-stats.prev::after {
    left: 0;
}

.pestana-stats.next { 
    right: 0; 
    border-radius: 0;
}

.pestana-stats.next::after {
    right: 0;
}

/* Aparecen al hacer hover en el área o el botón */
.pestana-stats:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
}

.pestana-stats span {
    font-size: 35px; /* Flecha grande */
    transition: transform 0.2s ease;
}

.pestana-stats:active span {
    transform: scale(0.85);
}

/* CONTENEDOR DE STATS (Ajustado para que los botones floten dentro) */
.contenedor-stats-secciones {
    max-width: 1280px;
    margin: 0 auto 40px auto !important;
    position: relative;
    padding: 0 !important;
    overflow: hidden; /* Para que el cristal no se salga de las esquinas si hay border-radius */
    border-radius: 15px; /* CORRECCIÓN 1: Añadido para que el recorte del cristal sea redondeado */
}

/* Aseguramos que el slider ocupe el espacio para que el botón de alto 100% funcione */
.slider-stats-relativo {
    position: relative;
    width: 100%;
    min-height: 200px; /* Ajusta según la altura real de tus stats */
}

/* ============================================================
EFECTO TARJETAS
============================================================ */
.seccion-metricas-tux {
    width: 100%; /* CORRECCIÓN 2: Ajustado a 100% para que encaje exacto en el contenedor padre */
    margin: 0 auto; /* CORRECCIÓN 3: Quitamos el margen de 40px que hacía que el botón se viera más grande que la tarjeta */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    font-family: 'Open Sans', sans-serif;
}

.card-metrica {
    background: #ffffff; 
    border-radius: 15px;
    padding: 25px;
    border: 1px solid #eee;
    box-shadow: 
    inset 0 1px 1px rgba(255, 255, 255, 0.5), 
    0 10px 30px rgba(0, 0, 0, 0.15);
}

.card-metrica h3 {
    color: #1a1a1a;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    padding-left: 0;
    border-left: none;
}

.info-progreso {
    display: flex;
    justify-content: space-between;
    color: #444;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
}

.barra-fondo {
    width: 100%;
    height: 10px;
    background: #f0f0f0;
    border-radius: 5px;
    margin-bottom: 18px;
    overflow: hidden;
}

.barra-llena {
    height: 100%;
    border-radius: 5px;
    width: 0;
    transition: width 1.5s cubic-bezier(0.1, 0.42, 0.41, 1);
}