:root {
            --verde: #39c937;
            --verde-hover: #2eaa2d;
            --negro: #111111;
            --gris-fondo: #f5f7f6;
            --gris-texto: #555;
            --blanco: #ffffff;
            --borde: #e5e7eb;
            --footer-height: 55px;
        }

        * {
            box-sizing: border-box;
        }

        html,
        body {
            margin: 0;
            padding: 0;
            min-height: 100%;
            font-family: Arial, Helvetica, sans-serif;
            background: var(--gris-fondo);
            color: var(--negro);
        }

        body {
            padding-bottom: var(--footer-height);
        }

        /* =====================================================
           BARRA SUPERIOR
           ===================================================== */

        .top-bar {
            height: 34px;
            background: var(--negro);
            color: white;
            display: flex;
            align-items: center;
            padding: 0 30px;
            font-size: 13px;
            font-weight: 600;
            padding-left: 42px;
        }

        /* =====================================================
           HEADER
           ===================================================== */

        .header {
            min-height: 105px;
            background: var(--verde);
            display: flex;
            align-items: center;
            padding: 15px 40px;
            gap: 35px;
        }

        .header-logo {
            width: 210px;
            max-width: 35%;
            height: auto;
        }

        .header-title {
            color: white;
            font-size: 24px;
            font-weight: 600;
            border-left: 1px solid rgba(255,255,255,.5);
            padding-left: 30px;
        }


        /* =====================================================
           CONTENEDOR
           ===================================================== */

        .page-container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 25px;
        }

        /* =====================================================
           ADHESIÓN
           ===================================================== */

        .requirements-card {
            background: white;
            border-radius: 10px;
            border: 1px solid var(--borde);
            box-shadow: 0 3px 12px rgba(0,0,0,.06);
            padding: 30px;
            max-width: 700px;
            margin: 0 auto 35px;
        }

        .requirements-card h2 {
            margin: 0 0 20px;
            font-size: 21px;
        }

        .requirements-list {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .requirements-list li {
            position: relative;
            padding: 12px 0 12px 32px;
            border-bottom: 1px solid #eeeeee;
            color: var(--gris-texto);
        }

        .requirements-list li:last-child {
            border-bottom: none;
        }

        .requirements-list li::before {
            content: "✓";
            position: absolute;
            left: 0;
            top: 10px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--verde);
            color: white;
            font-size: 13px;
            font-weight: bold;
            text-align: center;
            line-height: 22px;
        }

        .requirements-list a {
            color: var(--verde-hover);
            font-weight: 600;
            text-decoration: none;
        }

        .requirements-list a:hover {
            text-decoration: underline;
        }

        /* =====================================================
           BOTÓN INGRESAR
           ===================================================== */

        .access-container {
            text-align: center;
            margin-bottom: 50px;
        }

        .btn-access {
            display: inline-block;
            background: var(--verde);
            color: white;
            padding: 14px 30px;
            border-radius: 7px;
            font-size: 16px;
            font-weight: 600;
            text-decoration: none;
            box-shadow: 0 3px 8px rgba(57,201,55,.25);
            transition: .2s ease;
        }

        .btn-access:hover {
            background: var(--verde-hover);
            color: white;
            text-decoration: none;
            transform: translateY(-1px);
        }

        /* =====================================================
           TUTORIALES
           ===================================================== */

        .tutorial-section {
            margin-top: 20px;
        }

        .section-title {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 25px;
        }

        .section-title h2 {
            margin: 0;
            font-size: 24px;
            white-space: nowrap;
        }

        .section-title::after {
            content: "";
            height: 2px;
            background: var(--verde);
            flex: 1;
        }

        .tutorial-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 18px;
        }

        .tutorial-card {
            background: white;
            border: 1px solid var(--borde);
            border-radius: 9px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,.05);
            transition: .2s ease;
        }

        .tutorial-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 18px rgba(0,0,0,.10);
        }

        .tutorial-card-header {
            min-height: 65px;
            padding: 15px;
            display: flex;
            align-items: center;
            background: #fafafa;
            border-bottom: 1px solid var(--borde);
        }

        .tutorial-card-header a {
            color: var(--negro);
            font-weight: 600;
            font-size: 14px;
            line-height: 1.3;
            text-decoration: none;
        }

        .tutorial-card-header a:hover {
            color: var(--verde-hover);
        }

        .tutorial-number {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 30px;
            height: 30px;
            margin-right: 10px;
            border-radius: 50%;
            background: var(--verde);
            color: white;
            font-weight: bold;
            font-size: 14px;
        }

        .tutorial-video {
            width: 100%;
            display: block;
            background: #000;
        }

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

        .footer {
            position: fixed;
            z-index: 1000;
            left: 0;
            right: 0;
            bottom: 0;
            height: var(--footer-height);
            background: var(--verde);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 10px 20px;
            font-size: 14px;
        }

        .footer a {
            color: white;
            font-weight: 600;
            text-decoration: none;
        }

        .footer a:hover {
            text-decoration: underline;
        }

        /* =====================================================
           RESPONSIVE
           ===================================================== */

        @media (max-width: 1000px) {

            .tutorial-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .header-title {
                font-size: 20px;
            }
        }

        @media (max-width: 700px) {

            .top-bar {
                padding: 0 15px;
            }

            .header {
                min-height: 90px;
                padding: 15px 20px;
                gap: 20px;
            }

            .header-logo {
                width: 150px;
            }

            .header-title {
                font-size: 17px;
                padding-left: 15px;                
                text-align: center;
            }

/* =====================================================
   PAGE HEADER - CENTRADO
   ===================================================== */

.page-title {
    width: 100%;
    margin: 0 !important;
    padding: 30px 20px 25px !important;

    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;

    text-align: center !important;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.page-title h1 {
    width: 100%;
    margin: 0 0 8px !important;

    color: #111111;
    font-size: 28px;
    font-weight: 700;

    text-align: center !important;
}

.page-title p {
    width: 100%;
    margin: 0 !important;

    color: #666666;
    font-size: 16px;

    text-align: center !important;
}


            .page-container {
                padding: 25px 15px;
            }

            .requirements-card {
                padding: 22px;
            }

            .tutorial-grid {
                grid-template-columns: 1fr;
            }

            .tutorial-card-header {
                min-height: auto;
            }
        }

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

@media (max-width: 576px) {

    body {
        padding-bottom: 0;
    }

    .footer {
        position: static;
        height: auto;
        min-height: 95px;

        padding: 16px 15px;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        gap: 5px;

        font-size: 11px;        
        line-height: 1.4;
        text-align: center;
    }

    .footer b {
        display: block;
        line-height: 1.4;
        font-size: 11px;
    }

    .footer a {
        display: block;
        color: white;
        font-size: 11px;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

}