/* --- Estilos para la Sección de Cursos --- */
.courses-section {
    padding: 0.3125rem 0 7.5rem; /* 5px 0 120px - Reducido aún más el padding superior */
    background-color: transparent;
}

.course-main-title {
    position: absolute;
    top: -5.9375rem; /* -95px - Sube el título por encima de la tarjeta (ajustado para fuente más grande) */
    left: 50%;
    transform: translateX(-50%);
    font-size: 5.5rem; /* Aumentamos el tamaño de la fuente */
    font-family: 'Neulis Sans', sans-serif;
    font-weight: 900;
    color: var(--color-background-alt); /* Color del texto blanco para efecto de "vacío" */
    -webkit-text-stroke: 0.125rem var(--color-dark); /* 2px - Borde negro para las letras */
    z-index: 1; /* Detrás de otros elementos como el badge */
    white-space: nowrap; /* Evita que el título se rompa en dos líneas */
}

.shadow-blue {
    text-shadow: 0.1875rem 0.1875rem 0px var(--color-primary); /* 3px */
}

.shadow-red {
    text-shadow: 0.1875rem 0.1875rem 0px var(--color-accent); /* 3px */
}

.shadow-orange {
    text-shadow: 0.1875rem 0.1875rem 0px var(--color-secondary); /* 3px */
}

.courses-container {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Alinea las tarjetas desde la parte superior */
    gap: 3.25rem; /* 52px */
    margin-top: 5.625rem; /* 90px - Reducimos el espacio para subir las tarjetas */
    flex-wrap: wrap; 
}

.course-card {
    background-color: var(--color-dark);
    color: white;
    border-radius: 1.25rem; /* 20px */
    padding: 0.8125rem; /* 13px - Padding reducido para acercar el contenido a los bordes */
    text-align: center;
    position: relative;
    border: 0.25rem solid var(--color-dark); /* 4px */
    display: flex;
    flex-direction: column;
    width: 18.75rem; /* 300px - Ancho aumentado */
    height: 42rem; /* 672px - Altura restaurada a su valor original */
}

/* --- Desplazamiento vertical para efecto escalonado --- */
.course-card.autodidacta {
    top: 3.75rem; /* 60px - Distancia reducida */
    box-shadow: 0.5rem 0.5rem 0px var(--color-primary); /* 8px */
}

.course-card.completo {
    box-shadow: 0.5rem 0.5rem 0px var(--color-accent); /* 8px */
}

.course-card.ninja {
    top: 1.875rem; /* 30px - Desplazamiento para posición intermedia */
    box-shadow: 0.5rem 0.5rem 0px var(--color-secondary); /* 8px */
}

.course-image-container {
    background-color: var(--color-background-alt);
    border-radius: 0.9375rem; /* 15px */
    height: 11.25rem; /* 180px - Altura reducida */
    position: relative;
    margin-bottom: 0.625rem; /* 10px - Espacio reducido entre imagen y precio */
    flex-shrink: 0; /* Evita que el contenedor se encoja en el layout flex */
}

.course-title-line {
    width: 100%;
    position: absolute;
    top: 1.875rem; /* 30px - Posición vertical dentro del contenedor */
    left: 0;
    color: var(--color-dark);
    font-weight: 900;
    padding: 0; /* Padding vertical eliminado para una línea más delgada */
    z-index: 1; /* Detrás de las mascotas */
    text-align: center; /* Centra el h3 */
}

.course-card.autodidacta .course-title-line {
    top: 1rem; /* 16px - Sube un poco */
}

.course-card.completo .course-title-line {
    top: auto; /* Anulamos la posición superior */
    bottom: 1rem; /* 16px - Lo posicionamos más abajo en la parte inferior */
    text-align: left;
    padding-left: 0.4375rem; /* 7px */
}

.course-card.ninja .course-title-line {
    top: 2.8125rem; /* 45px - Baja un poco */
    text-align: right;
    padding-right: 0.9375rem; /* 15px */
}

.course-title-line h3 {
    margin: 0;
    font-size: 1.5rem; /* Ligeramente más pequeño */
    color: white;
}

.blue-line { background-color: var(--color-primary); }
.red-line { background-color: #FF4F6A; }
.orange-line { background-color: #FCA11F; }

.course-pet {
    position: absolute;
    bottom: 0; /* Alineado al fondo del contenedor crema */
    max-width: 10.625rem; /* 170px - Hacemos las mascotas más grandes */
    max-height: 100%; /* Asegura que no se salga por arriba */
    height: auto;
    z-index: 2; /* Asegura que la mascota esté sobre la línea de título */
}
.tanuki-pet {
    left: 50%;
    transform: translateX(-50%);
}
.princesa-pet { right: 0; max-width: 11.25rem; bottom: 0.4375rem; } /* 180px, 7px - Ajuste específico para la princesa */
.ninja-pet { left: 0.625rem; max-width: 9.6875rem; bottom: 0.125rem; } /* 10px, 155px, 2px - Ajuste específico para el ninja */


.course-price {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 0; /* Espacio inferior reducido */
    color: white;
    font-family: 'Neulis Sans', sans-serif; /* Aplicando la fuente Neulis Sans */
    font-style: italic;
}

.course-price::after {
    content: "USD/mes";
    font-size: 1rem; /* Tamaño de fuente más pequeño */
    font-weight: 500; /* Peso de fuente normal */
    font-style: normal; /* Quita el itálico para este texto */
    color: rgba(255, 255, 255, 0.85); /* Blanco un poco más tenue */
    margin-left: 0.3125rem; /* 5px - Espacio entre el precio y "USD/mes" */
    position: relative; /* Para poder ajustar la posición vertical */
    top: -0.25rem; /* -4px - Ajusta la posición vertical para que esté más abajo */
}

.course-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.btn-join {
    width: 100%;
    padding: 0.75rem; /* 12px */
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    border: 0.1875rem solid var(--color-dark); /* 3px */
    box-shadow: 0.25rem 0.25rem 0 var(--color-dark); /* 4px */
    border-radius: 0.625rem; /* 10px */
    margin-bottom: 0.625rem; /* 10px - Espacio reducido, similar al de arriba del precio */
    text-transform: uppercase;
}
.btn-join:hover {
    transform: translateY(0.125rem); /* 2px */
    box-shadow: 0.125rem 0.125rem 0 var(--color-dark); /* 2px */
}

.course-ideal-for {
    font-size: 0.9rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 0.3125rem; /* 5px */
    margin-bottom: 0.3125rem; /* 5px */
    padding: 0 0.3125rem; /* 0 5px */
    min-height: 4.0625rem; /* 65px - Asegura altura consistente para alinear las listas de abajo */
    display: flex;
    align-items: center;
    justify-content: center;
}

.blue-btn { background-color: var(--color-primary); }
.red-btn { background-color: #FF4F6A; }
.orange-btn { background-color: #FCA11F; }

.course-body ul {
    text-align: left;
    padding-left: 1.25rem; /* 20px */
    margin-top: 0; /* Reducido para acercarlo al texto superior */
}

.course-card.autodidacta .course-body ul {
    /* Agrega un espacio extra entre el botón y la lista solo para esta tarjeta */
    margin-top: 0.9375rem; /* 15px */
}

.includes-previous-text {
    font-size: 0.9rem;
    font-weight: 700; /* Bold */
    font-style: italic;
    color: #ffffff; /* Blanco puro para máxima visibilidad */
    text-align: center;
    margin-bottom: 0.625rem; /* 10px - Espacio antes de la lista */
    margin-top: 0.3125rem; /* 5px - Pequeño espacio después del botón */
}

.course-body li {
    margin-bottom: 0.9375rem; /* 15px */
    line-height: 1.4;
    font-size: 1rem; /* Aumentado el tamaño de la fuente */
    list-style-type: disc;
    color: #f0f0f0;
}

/* --- Distintivo de Recomendado --- */
.course-card.completo {
    position: relative;
}

.recommended-badge {
    position: absolute;
    top: 10.9375rem; /* 175px - Ajustado para que se superponga en la parte inferior del panel de imagen */
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-background);
    color: var(--color-accent);
    padding: 0.375rem 0.9375rem; /* 6px 15px */
    border-radius: 1.25rem; /* 20px */
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 8px */
    border: 0.1875rem solid var(--color-dark); /* 3px */
    z-index: 10;
    display: none; /* Ocultado temporalmente a petición */
}
.recommended-badge img {
    height: 1.125rem; /* 18px */
}

/* --- Estilos para Nubes Animadas --- */
@keyframes moveClouds {
    from { background-position: -1536px 0; }
    to { background-position: 0 0; }
}

.background-clouds {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../assets/images/nubes.svg');
    background-repeat: repeat;
    background-size: 1280px auto;
    z-index: -1;
    opacity: 0.08;
    animation: moveClouds 150s linear infinite;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, black 30%, rgba(0,0,0,0.5) 60%, transparent 85%);
    -webkit-mask-image: linear-gradient(to bottom, black 30%, rgba(0,0,0,0.5) 60%, transparent 85%);
}


/* --- Estilos para la Sección de Suscriptores --- */
.subscribers-section {
    margin: 0.5rem 0;
    padding: 0.5rem 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.subscribers-avatars {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin: 0;
    position: relative;
    height: 2.5rem; /* 40px */
    width: 100%;
}

.avatar-placeholder {
    width: 2rem; /* 32px */
    height: 2rem; /* 32px */
    border-radius: 50%;
    border: 0.12rem solid white;
    background-color: rgba(255, 255, 255, 0.2);
    background-size: cover;
    background-position: center;
    position: relative;
    margin-left: -0.6rem; /* Solapamiento */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.6);
    overflow: hidden;
}

.avatar-placeholder:first-child {
    margin-left: 0; /* El primer avatar no tiene margen negativo */
}

.avatar-placeholder.fourth-avatar {
    background-color: rgba(0, 0, 0, 0.5);
    position: relative;
}

.count-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.75rem;
    color: white;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    z-index: 10;
}

.subscribers-text {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    font-weight: 500;
    line-height: 1.2;
    padding: 0 0.5rem;
}

/* Media Queries para responsividad */
@media (max-width: 1100px) {
    .courses-container {
        flex-direction: column;
        align-items: center;
        gap: 7.5rem; /* 120px - Aumentamos el gap para dar espacio a los títulos superiores */
    }
    .course-card {
        width: 100%;
        max-width: 20rem; /* 350px - Reducido para mejor ajuste en móviles */
        height: auto; /* Altura automática en móvil */
    }
     .course-card.completo,
    .course-card.autodidacta {
        top: 0; /* En móvil, reseteamos el desplazamiento vertical */
    }
    .recommended-badge {
        top: 10.9375rem; /* 175px - Mantenemos la misma posición relativa en móvil */
    }

    .course-main-title {
        -webkit-text-stroke: 0; /* Eliminamos el contorno negro */
        color: var(--color-background-alt); /* Mantenemos el color del texto en blanco */
    }

    /* Hacemos que la sombra simule un contorno en móvil */
    .shadow-blue {
        text-shadow: 2px 2px 0 var(--color-primary), -2px -2px 0 var(--color-primary), 2px -2px 0 var(--color-primary), -2px 2px 0 var(--color-primary),
                     2px 0 0 var(--color-primary), -2px 0 0 var(--color-primary), 0 2px 0 var(--color-primary), 0 -2px 0 var(--color-primary);
    }
    .shadow-red {
        text-shadow: 2px 2px 0 var(--color-accent), -2px -2px 0 var(--color-accent), 2px -2px 0 var(--color-accent), -2px 2px 0 var(--color-accent),
                     2px 0 0 var(--color-accent), -2px 0 0 var(--color-accent), 0 2px 0 var(--color-accent), 0 -2px 0 var(--color-accent);
    }
    .shadow-orange {
        text-shadow: 2px 2px 0 var(--color-secondary), -2px -2px 0 var(--color-secondary), 2px -2px 0 var(--color-secondary), -2px 2px 0 var(--color-secondary),
                     2px 0 0 var(--color-secondary), -2px 0 0 var(--color-secondary), 0 2px 0 var(--color-secondary), 0 -2px 0 var(--color-secondary);
    }
}