:root { --rojo:#b50d0d; --rojo-claro:#d41414; --amarillo:#FCD116; --negro:#0D0D0D; --gris:#6B7280; --fondo:#F8F6F1; --blanco:#FFFFFF; --crema:#FFFBF0; }
        * { margin:0; padding:0; box-sizing:border-box; }
        body { font-family:'DM Sans',sans-serif; background:var(--fondo); color:var(--negro); overflow-x:hidden; }

        nav { position:fixed; top:0; left:0; right:0; z-index:100; padding:18px 60px; display:flex; justify-content:space-between; align-items:center; background:rgba(248,246,241,.92); backdrop-filter:blur(12px); border-bottom:1px solid rgba(181,13,13,.1); }
        .logo { font-family:'Playfair Display',serif; font-size:1.6rem; font-weight:900; color:var(--rojo); text-decoration:none; }
        .logo span { color:var(--negro); background:var(--amarillo); padding:0 6px; border-radius:3px; }
        .nav-right { display:flex; align-items:center; gap:16px; }
        .btn-back { background:none; border:2px solid var(--rojo); color:var(--rojo); padding:8px 20px; border-radius:6px; font-weight:600; font-size:.9rem; cursor:pointer; text-decoration:none; transition:all .2s; }
        .btn-back:hover { background:var(--rojo); color:var(--blanco); }
        .nav-user-info { display:flex; align-items:center; gap:10px; }
        .nav-user-info img { width:32px; height:32px; border-radius:50%; border:2px solid var(--rojo); }
        .nav-user-info span { font-weight:600; font-size:.9rem; max-width:120px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

        /* HERO de página */
        .page-hero { padding:120px 60px 60px; background:linear-gradient(135deg,var(--rojo) 0%,#7a0909 100%); color:var(--blanco); }
        .page-hero-inner { max-width:1200px; margin:0 auto; }
        .breadcrumb { font-size:.85rem; opacity:.7; margin-bottom:16px; }
        .breadcrumb a { color:var(--blanco); text-decoration:none; }
        .breadcrumb a:hover { text-decoration:underline; }
        .page-hero h1 { font-family:'Playfair Display',serif; font-size:clamp(2rem,4vw,3rem); font-weight:900; margin-bottom:16px; }
        .page-hero p { opacity:.85; font-size:1.05rem; max-width:600px; line-height:1.7; }

        /* CONTENIDO */
        .main { max-width:1200px; margin:0 auto; padding:60px; }

        /* Aviso sin sesión */
        .auth-banner { background:var(--amarillo); border-radius:12px; padding:16px 24px; margin-bottom:40px; display:flex; align-items:center; gap:14px; font-weight:600; font-size:.95rem; }
        .auth-banner button { margin-left:auto; background:var(--negro); color:var(--blanco); border:none; padding:8px 20px; border-radius:6px; font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif; transition:all .2s; }
        .auth-banner button:hover { background:#333; }

        /* Filtros */
        .filters { display:flex; gap:10px; margin-bottom:40px; flex-wrap:wrap; }
        .filter-btn { background:var(--blanco); border:2px solid rgba(0,0,0,.1); color:var(--gris); padding:8px 20px; border-radius:100px; font-size:.85rem; font-weight:600; cursor:pointer; transition:all .2s; font-family:'DM Sans',sans-serif; }
        .filter-btn.active, .filter-btn:hover { background:var(--rojo); border-color:var(--rojo); color:var(--blanco); }

        /* Grid de exámenes */
        .exams-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:24px; }

        .exam-card { background:var(--blanco); border-radius:16px; overflow:hidden; border:1px solid rgba(0,0,0,.06); transition:all .3s; }
        .exam-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.1); }

        .exam-card-img { height:140px; display:flex; align-items:center; justify-content:center; font-size:3.5rem; position:relative; }
        .exam-card-img.unal { background:linear-gradient(135deg,#b50d0d,#7a0909); }
        .exam-card-img.icfes { background:linear-gradient(135deg,#1A1A2E,#0f0f23); }

        .exam-badge { position:absolute; top:12px; right:12px; padding:4px 10px; border-radius:100px; font-size:.7rem; font-weight:700; letter-spacing:.5px; }
        .badge-free { background:var(--amarillo); color:var(--negro); }
        .badge-premium { background:var(--rojo); color:var(--blanco); }
        .badge-nuevo { background:#7c3aed; color:var(--blanco); }

        .exam-card-body { padding:24px; }
        .exam-type { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--rojo); margin-bottom:8px; }
        .exam-card-body h3 { font-family:'Playfair Display',serif; font-size:1.2rem; font-weight:700; margin-bottom:8px; }
        .exam-card-body p { font-size:.85rem; color:var(--gris); line-height:1.6; margin-bottom:16px; }

        .exam-meta { display:flex; gap:16px; margin-bottom:20px; }
        .meta-item { display:flex; align-items:center; gap:6px; font-size:.8rem; color:var(--gris); }

        .btn-exam { width:100%; padding:12px; border-radius:8px; font-size:.9rem; font-weight:600; border:none; cursor:pointer; transition:all .3s; font-family:'DM Sans',sans-serif; }
        .btn-exam-primary { background:var(--rojo); color:var(--blanco); }
        .btn-exam-primary:hover { background:var(--rojo-claro); }
        .btn-exam-locked { background:var(--fondo); color:var(--gris); cursor:not-allowed; border:2px solid rgba(0,0,0,.1); }

        /* Modal de confirmación / compra */
        .modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:200; backdrop-filter:blur(6px); align-items:center; justify-content:center; }
        .modal-overlay.active { display:flex; }
        .modal-box { background:var(--blanco); border-radius:24px; padding:40px; width:100%; max-width:480px; position:relative; animation:modalIn .3s ease; }
        @keyframes modalIn { from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)} }
        .modal-close { position:absolute; top:16px; right:20px; background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--gris); }
        .modal-exam-icon { font-size:3rem; margin-bottom:16px; }
        .modal-exam-title { font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:900; margin-bottom:8px; }
        .modal-exam-desc { color:var(--gris); font-size:.9rem; line-height:1.6; margin-bottom:24px; }
        .modal-details { background:var(--fondo); border-radius:12px; padding:16px 20px; margin-bottom:24px; display:flex; flex-direction:column; gap:10px; }
        .detail-row { display:flex; justify-content:space-between; font-size:.9rem; }
        .detail-row span:first-child { color:var(--gris); }
        .detail-row span:last-child { font-weight:600; }
        .btn-start { width:100%; background:var(--rojo); color:var(--blanco); padding:14px; border-radius:10px; font-size:1rem; font-weight:600; border:none; cursor:pointer; transition:all .3s; font-family:'DM Sans',sans-serif; }
        .btn-start:hover { background:var(--rojo-claro); }
        .btn-cancel { width:100%; background:none; color:var(--gris); padding:10px; border-radius:10px; font-size:.9rem; font-weight:600; border:none; cursor:pointer; margin-top:8px; font-family:'DM Sans',sans-serif; }
        .btn-cancel:hover { color:var(--negro); }

        /* Próximamente */
        .coming-soon { text-align:center; padding:60px 40px; background:var(--blanco); border-radius:16px; border:2px dashed rgba(0,0,0,.1); grid-column:1/-1; }
        .coming-soon h3 { font-family:'Playfair Display',serif; font-size:1.4rem; margin:16px 0 8px; }
        .coming-soon p { color:var(--gris); font-size:.9rem; }

        /* ── Hamburger base (hidden on desktop) ── */
        .nav-hamburger {
            display: none;
            flex-direction: column;
            gap: 5px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px;
            min-width: 44px;
            min-height: 44px;
            align-items: center;
            justify-content: center;
        }
        .nav-hamburger span {
            display: block;
            width: 22px;
            height: 2px;
            background: var(--negro);
            border-radius: 2px;
            transition: all 0.3s;
        }
        .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
        .nav-hamburger.open span:nth-child(2) { opacity: 0; }
        .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

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

        /* Tablet (768px – 1023px) */
        @media (max-width: 1023px) {
            nav { padding: 16px 32px; }
            .main { padding: 40px 32px; }
            .page-hero { padding: 100px 32px 40px; }
        }

        /* Mobile (<768px) */
        @media (max-width: 767px) {
            nav { padding: 14px 20px; }

            /* Hamburger shown on mobile */
            .nav-hamburger { display: flex; }

            /* Nav links hidden by default on mobile */
            .nav-menu {
                display: none;
                position: fixed;
                top: 60px; left: 0; right: 0;
                background: rgba(248,246,241,0.98);
                backdrop-filter: blur(12px);
                flex-direction: column;
                padding: 16px 24px 24px;
                border-bottom: 1px solid rgba(181,13,13,0.15);
                z-index: 99;
                gap: 4px;
            }
            .nav-menu.open { display: flex; }
            .nav-menu > a, .nav-menu > button { display: flex !important; }
            .nav-menu > a, .nav-menu > button, .nav-menu > div > a, .nav-menu > div > button {
                padding: 12px 8px;
                font-size: 1rem;
                min-height: 44px;
            }

            .page-hero { padding: 100px 24px 40px; }
            .main { padding: 40px 16px; }

            .exams-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

            .auth-banner { flex-direction: column; align-items: flex-start; gap: 10px; }
            .auth-banner button { margin-left: 0; }
        }