html {
    box-sizing: border-box;
   
}
body {
    margin: 0;
}
nav {
    font-family: 'Istok Web', sans-serif;
}


*, *:before, *:after {
    box-sizing: inherit;
}
/* tablets */
@media(min-width: 768px){

}
/* desktops */
@media(min-width: 992px){
    /* NAVBAR */
    .navbar {
        background-color: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 40px;
        border-bottom: 1px solid #eaeaea;
        font-family: 'Istok Web', sans-serif;
    }

    /* LOGO */
    .nav-logo img {
        height: 40px;
    }

    /* LINKS */
    .nav-links {
        display: flex;
        gap: 28px;
    }

    .nav-links a {
        text-decoration: none;
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 0.04em;
        color: #2c2c2c;
        position: relative;
        transition: color 0.2s ease;
    }

    /* EFECTO SUBRAYADO SUAVE */
    .nav-links a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -6px;
        width: 0;
        height: 2px;
        background-color: #715DF2; /* acento */
        transition: width 0.25s ease;
    }

    .nav-links a:hover {
        color: #715DF2;
    }

    .nav-links a:hover::after {
        width: 100%;
    }

    header {
        font-family: 'Istok Web', sans-serif;
        font-size: 30px;
        height: 350px;
        width: 100%;
        background-image: url("../imagenes/inicio.svg");
        background-size: cover;
        background-repeat: no-repeat;
        
    }
    h2{
        font-family: 'Istok Web', sans-serif;
        font-size: 20px;
        color: #2c2c2c;
    }
    h3{
        font-family: 'Istok Web', sans-serif;
        font-size: 18px;
        color: #2c2c2c;
    }

    .carousel-section {
        padding: 40px;
        background: #fff;
        font-family: 'Istok Web', sans-serif;
    }

    .carousel-section h2 {
        margin-bottom: 20px;
        font-size: 24px;
        color: #2c2c2c;
    }

    .carousel-container {
        position: relative;
        display: flex;
        align-items: center;
    }

    .carousel-track-container {
        overflow: hidden;
        width: 100%;
    }

    .carousel-track {
        display: flex;
        gap: 20px;
        transition: transform 0.4s ease;
    }

    /* TARJETAS */
    .course-card {
        min-width: calc(25% - 15px); /* 4 visibles */
        background: #f9f9f9;
        border: 1px solid #eaeaea;
        border-radius: 10px;
        padding: 20px;
    }

    .course-card h3 {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .course-card p {
        font-size: 14px;
        color: #555;
        margin-bottom: 12px;
    }

    .course-card a {
        text-decoration: none;
        font-weight: 600;
        color: #4bbfbe;
    }

    /* BOTONES */
    .carousel-btn {
        background: white;
        border: 1px solid #ddd;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        cursor: pointer;
        font-size: 22px;
        line-height: 1;
    }

    .carousel-btn:hover {
        background: #4bbfbe;
        color: white;
    }

    .site-footer {
        background: #f9f9f9;
        border-top: 1px solid #eaeaea;
        font-family: 'Istok Web', sans-serif;
        margin-top: 60px;
    }

    .footer-container {
        max-width: 1100px;
        margin: auto;
        padding: 40px 20px;
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        gap: 40px;
    }

    .footer-brand img {
        height: 40px;
        margin-bottom: 10px;
    }

    .footer-brand p {
        font-size: 14px;
        color: #555;
    }

    .footer-links h4 {
        font-size: 15px;
        margin-bottom: 10px;
    }

    .footer-links a {
        display: block;
        text-decoration: none;
        color: #444;
        margin-bottom: 6px;
        font-size: 14px;
    }

    .footer-links a:hover {
        color: #715DF2;
    }

    .footer-bottom {
        text-align: center;
        padding: 15px;
        font-size: 13px;
        color: #777;
        border-top: 1px solid #eaeaea;
    }

    .lesson-wrapper {
        max-width: 1100px;
        margin: 40px auto;
        padding: 0 40px;
        font-family: 'Istok Web', sans-serif;
    }

    .lesson-header h1 {
        font-size: 30px;
        margin-bottom: 10px;
    }

    .lesson-header p {
        font-size: 17px;
        color: #555;
        margin-bottom: 30px;
    }
    p{
      color: #555;  
    }

    .lesson-content h2 {
        margin-top: 30px;
    }

    .lesson-content p,
    .lesson-content li {
        font-size: 18px;
        line-height: 1.7;
    }

    .lesson-content pre {
        background: #f5f7f9;
        padding: 16px;
        border-radius: 8px;
        overflow-x: auto;
    }

    .ad {
        margin: 30px 0;
    }


    .lesson-index {
        margin: 0 auto;
        width: 80%;
        background: #f9f9f9;
        border: 1px solid #eaeaea;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 30px;
    }

    .lesson-index h3 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .lesson-index ul {
        list-style: none;
        padding-left: 0;
    }

    .lesson-index li {
        margin-bottom: 8px;
    }

    .lesson-index a {
        text-decoration: none;
        font-size: 17px;
        color: #3f29c8;
    }

    .lesson-index a:hover {
        text-decoration: underline;
    }

    .bloque-codigo {
        margin-bottom: 20px;
        padding: 0;
    }

    .codigo {
        position: relative;
        width: 100%;
        background-color: #202123;
        border-radius: 12px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        overflow: hidden;           /* evita que el contenido saque scroll a la página */
        box-sizing: border-box;
        padding: 0px;              /* espacio interior (deja sitio para el botón) */
    }

    /* Estilos específicos para <pre> (área de código con su propio scroll) */
    .codigo pre {
        margin: 0;
        padding: 16px;
        background-color: #2a2b2e;
        color: #e9c46b;
        font-family: var(--font-code);
        font-size: 0.95rem;
        border-radius: 8px;
        box-sizing: border-box;

        /* clave: limitar la altura dentro de .codigo y permitir scroll solo en este elemento */
        max-height: calc(100% - 8px); /* deja un pequeño margen dentro de .codigo */
        width: 100%;

        overflow: auto;      /* muestra barras de desplazamiento solo dentro del <pre> */
        white-space: pre;    /* conserva espacios y saltos; permite scroll horizontal */
        word-break: normal;  /* evita romper palabras largas, fuerza scroll horizontal */
    }
    
    .pantalla {
        width: 100%;
        background-color: #f8f9fa;
        border-left: 4px solid #d1d5da;
        border-radius: 0 0 12px 12px;
        padding: 5px 5px;
        overflow: auto; /* ✅ scroll si se desborda */
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    .pantalla p{
        font-family: var(--font-code);
        font-size: 0.95rem;
        color: #202123;
    }

    /* Scrollbars más discretas (WebKit) — opcional */
    .codigo pre::-webkit-scrollbar {
    height: 10px; /* para scrollbar horizontal */
    width: 10px;  /* para scrollbar vertical */
    }
    .codigo pre::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.10);
    border-radius: 6px;
    }
    .codigo pre::-webkit-scrollbar-track {
    background: transparent;
    }

    /* Botón copiar colocado en esquina superior derecha dentro de .codigo */
    .buton-copi {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
    background-color: #4285f4;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: box-shadow 0.18s ease, transform 0.08s ease, background-color 0.18s;
    }

    /* Efecto de iluminación al hover del botón */
    .buton-copi:hover {
    box-shadow: 0 0 16px 6px rgba(66,133,244,0.12);
    transform: translateY(-2px);
    }

    /* tamaño del icono material */
    .buton-copi .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 18px;
    line-height: 1;
    }

    .mensaje-copiado {
    position: absolute;
    top: 10px;
    right: 60px; /* un poco a la izquierda del botón */
    background-color: rgba(52, 168, 83, 0.9); /* verde suave */
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
    transform: translateY(-5px);
    }

    /* cuando se activa */
    .mensaje-copiado.mostrar {
    opacity: 1;
    transform: translateY(0);
    }


}