/* ================================================================ Async Academy — Cinematic 3D Redesign v60 Inspirado en Awwwards 2026: profundidad por capas, tilt 3D, spotlight cursor, parallax, transiciones cinemáticas. ================================================================ */ /* ── 1. Variables ──────────────────────────────────────────────── */ :root { --bg: #05060D; --bg2: #080B16; --glass: rgba(255,255,255,.04); --glass2: rgba(255,255,255,.07); --glass3: rgba(255,255,255,.11); --violet: #7C5CFC; --violet2: #A78BFA; --violet-glow: rgba(124,92,252,.45); --cyan: #22D3EE; --cyan2: #67E8F9; --cyan-glow: rgba(34,211,238,.35); --pink: #F472B6; --grad: linear-gradient(135deg,#7C5CFC 0%,#22D3EE 100%); --grad-3: linear-gradient(135deg,#F472B6,#7C5CFC 50%,#22D3EE); --good: #34D399; --good-bg: rgba(52,211,153,.13); --bad: #FB7185; --bad-bg: rgba(251,113,133,.12); --text: #F0F3FF; --text2: #93A2CC; --text3: #7A87B5; --border: rgba(255,255,255,.08); --border2: rgba(255,255,255,.15); --sidebar-w: 320px; --r: 24px; --r-sm: 14px; --r-btn: 999px; --tr: 200ms cubic-bezier(.4,0,.2,1); --spring: 450ms cubic-bezier(.34,1.56,.64,1); --sh-card: 0 10px 40px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3); --sh-glow: 0 0 40px var(--violet-glow); --app-height: 100vh; --mx: 0.5; /* mouse x normalizado 0..1, lo setea JS */ --my: 0.5; /* Superficies translúcidas (paneles flotantes) */ --surface: rgba(4,5,11,.85); --surface2: rgba(9,11,20,.85); --surface-nav: rgba(7,9,18,.82); --hero-dark: linear-gradient(135deg,#06080F 0%,#0C1226 55%,#11152E 100%); --dot: rgba(255,255,255,.05); } /* ── Tema CLARO (día) ─────────────────────────────────────────── Se activa con data-theme="light" en . JS decide día/noche según la hora local del dispositivo. Mantiene violeta + cyan de marca; invierte fondos y cristales para legibilidad sobre blanco. */ :root[data-theme="light"] { --bg: #F4F6FF; --bg2: #EAEEFB; --glass: rgba(20,28,70,.035); --glass2: rgba(20,28,70,.06); --glass3: rgba(20,28,70,.09); --violet: #6D3BF5; --violet2: #7C3AED; --violet-glow: rgba(109,59,245,.28); --cyan: #0891B2; --cyan2: #0E7490; --cyan-glow: rgba(8,145,178,.22); --pink: #DB2777; --grad: linear-gradient(135deg,#6D3BF5 0%,#0891B2 100%); --grad-3: linear-gradient(135deg,#DB2777,#6D3BF5 50%,#0891B2); --good: #059669; --good-bg: rgba(5,150,105,.12); --bad: #E11D48; --bad-bg: rgba(225,29,72,.10); --text: #0B1020; --text2: #46527A; --text3: #5E6A92; --border: rgba(20,28,70,.10); --border2: rgba(20,28,70,.16); --sh-card: 0 10px 40px rgba(40,52,120,.12), 0 2px 8px rgba(40,52,120,.06); --sh-glow: 0 0 40px var(--violet-glow); /* Superficies translúcidas en claro: blancas semitransparentes */ --surface: rgba(255,255,255,.82); --surface2: rgba(255,255,255,.88); --surface-nav: rgba(255,255,255,.78); --hero-dark: linear-gradient(135deg,#EEF1FE 0%,#E4E9FA 55%,#EAE6FB 100%); --dot: rgba(40,52,120,.06); } /* Transición suave del fondo al cambiar de tema en vivo */ body { transition: background-color .4s ease, color .4s ease; } /* Selección de texto en violeta de marca con texto en blanco */ ::selection { background: #6D3BF5; color: #fff; text-shadow: none; } ::-moz-selection { background: #6D3BF5; color: #fff; text-shadow: none; } /* ── 2. Reset ──────────────────────────────────────────────────── */ *,*::before,*::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* ── 3. Body + fondo animado ───────────────────────────────────── */ body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter,"Segoe UI",Roboto,Arial,sans-serif; font-size: 16px; line-height: 1.5; display: flex; min-height: var(--app-height); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Capa 1: dot grid con parallax sutil */ body::before { content:""; position: fixed; inset: -40px; background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 30px 30px; pointer-events: none; z-index: 0; transform: translate(calc((var(--mx) - .5) * -16px), calc((var(--my) - .5) * -16px)); transition: transform .4s ease-out; } /* Capa 2: aurora mesh que reacciona al cursor */ body::after { content:""; position: fixed; inset: -20%; background: radial-gradient(ellipse 50% 45% at calc(20% + (var(--mx) - .5) * 60px) calc(70% + (var(--my) - .5) * 60px), rgba(124,92,252,.16), transparent), radial-gradient(ellipse 45% 40% at calc(85% + (var(--mx) - .5) * -50px) calc(15% + (var(--my) - .5) * -40px), rgba(34,211,238,.11), transparent), radial-gradient(ellipse 40% 35% at 60% 90%, rgba(244,114,182,.06), transparent); pointer-events: none; z-index: 0; animation: auroraPulse 14s ease-in-out infinite alternate; transition: background .5s ease-out; } @keyframes auroraPulse { 0% { opacity: 1; } 100% { opacity: .65; transform: scale(1.05); } } /* ── 4. Sidebar ────────────────────────────────────────────────── */ .sidebar { width: var(--sidebar-w); position: fixed; inset: 0 auto 0 0; background: var(--surface); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border-right: 1px solid var(--border); z-index: 30; display: flex; flex-direction: column; padding: 22px 18px; overflow-y: auto; overflow-x: hidden; } .brand { display: flex; gap: 12px; align-items: center; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--border); } .logo { width: 50px; height: 50px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 0 12px var(--violet-glow)); transition: transform var(--spring); } .logo:hover { transform: rotate(-8deg) scale(1.08); } .brandText { min-width: 0; } .brandName { margin: 0; font-size: 20px; letter-spacing: -.04em; line-height: 1.1; } .brandAsync { font-weight: 900; text-transform: uppercase; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .brandAcademy { font-weight: 200; text-transform: uppercase; color: var(--text2); } .brandSub { margin: 4px 0 0; font-size: 11px; color: var(--text3); letter-spacing: .04em; } .mobileIconBtn { display: none; } .userBox { background: var(--glass); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 14px; } .userBox span { display: block; color: var(--text2); font-size: 12px; word-break: break-word; margin-bottom: 8px; } .userBox button { width: 100%; border: 1px solid var(--border2); background: var(--glass2); color: var(--text); border-radius: var(--r-btn); padding: 8px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background var(--tr), border-color var(--tr); } .userBox button:hover { background: var(--grad); border-color: transparent; } .progressBox { margin-bottom: 16px; padding: 14px; background: var(--glass); border: 1px solid var(--border); border-radius: var(--r-sm); } .progressTop { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 10px; color: var(--text2); } .progressTop strong { color: var(--text); font-weight: 800; } .bar { height: 6px; background: rgba(255,255,255,.07); border-radius: 99px; } .bar div { height: 100%; width: 0; background: var(--grad); border-radius: 99px; transition: width .6s cubic-bezier(.34,1.56,.64,1); box-shadow: 0 0 16px var(--violet-glow); position: relative; } .bar div::after { content:""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); width: 11px; height: 11px; background: #fff; border-radius: 50%; box-shadow: 0 0 10px var(--violet-glow), 0 0 18px var(--cyan-glow); } .extraMenu { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 16px; } .extraBtn { border: 1px solid var(--border); background: transparent; color: var(--text3); border-radius: var(--r-btn); padding: 9px 6px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all var(--tr); position: relative; overflow: hidden; } .extraBtn:hover { background: var(--glass2); color: var(--text); transform: translateY(-1px); } .extraBtn.active { background: var(--glass2); border-color: transparent; color: var(--violet2); box-shadow: 0 0 0 1px var(--violet), 0 0 14px rgba(124,92,252,.30); } .mobileLessonsToggle { display: none; } .search { width: 100%; padding: 10px 14px; border-radius: var(--r-btn); border: 1px solid var(--border); background: var(--glass); color: var(--text); font-size: 13px; font-family: inherit; outline: none; margin-bottom: 10px; transition: border-color var(--tr), box-shadow var(--tr); } .search::placeholder { color: var(--text3); } .search:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124,92,252,.18); } .moduleTitle { width: 100%; display: flex; align-items: center; justify-content: space-between; border: 0; background: transparent; color: var(--text3); text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; padding: 4px; margin: 18px 0 6px; cursor: pointer; font-family: inherit; } .moduleTitle em { font-style: normal; font-size: 11px; color: var(--text3); transition: transform .2s; } .moduleGroup.open .moduleTitle em { transform: rotate(180deg); } .moduleLessons { display: none; } .moduleGroup.open .moduleLessons { display: block; } .lessonBtn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--text2); text-align: left; cursor: pointer; font-family: inherit; margin-bottom: 2px; transition: background var(--tr), border-color var(--tr), color var(--tr), transform var(--tr); } .lessonBtn:hover { background: var(--glass); color: var(--text); transform: translateX(3px); } .lessonBtn.active { background: rgba(124,92,252,.11); border-color: rgba(124,92,252,.30); color: var(--text); box-shadow: inset 3px 0 0 var(--violet); } .lessonBtn span { width: 26px; height: 26px; border-radius: 8px; background: var(--glass); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; flex-shrink: 0; color: var(--text3); transition: all var(--tr); } .lessonBtn.done span { background: var(--grad); color: #fff; box-shadow: 0 0 10px var(--violet-glow); } .lessonBtn.active span { background: rgba(124,92,252,.30); color: var(--violet2); } .lessonBtn strong { font-size: 12px; font-weight: 600; line-height: 1.35; } .classWeekBlock { margin-bottom: 6px; } .classWeekTitle { font-size: 9px; text-transform: uppercase; letter-spacing: .10em; font-weight: 800; color: var(--text3); margin: 10px 4px 4px; } .classBtn strong { display: flex; flex-direction: column; gap: 2px; } .classBtn small { font-size: 10px; color: var(--text3); font-weight: 600; } .classBtn span { font-size: 9px; min-width: 34px; border-radius: 8px; } .reinforcementNavBtn { background: var(--glass2); border: 1px solid var(--border2); color: var(--text); border-radius: var(--r-btn); padding: 10px 16px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; margin-top: 8px; transition: background var(--tr), border-color var(--tr); } .reinforcementNavBtn:hover { background: var(--grad); border-color: transparent; } .sidebarCollapseBtn { display: none; } /* ── 5. Main ────────────────────────────────────────────────────── */ .main { margin-left: var(--sidebar-w); width: calc(100% - var(--sidebar-w)); padding: 28px 32px; position: relative; z-index: 1; min-height: 100vh; perspective: 1400px; } .view { display: none; } .view.active { display: block; } body.sidebarCollapsed .sidebar { width: 70px; padding: 18px 10px; overflow: visible; } body.sidebarCollapsed .main { margin-left: 70px; width: calc(100% - 70px); } body.sidebarCollapsed .brand { justify-content: center; } body.sidebarCollapsed .logo { width: 44px; height: 44px; } body.sidebarCollapsed .brandText, body.sidebarCollapsed .userBox, body.sidebarCollapsed .extraMenu, body.sidebarCollapsed .search, body.sidebarCollapsed .progressBox, body.sidebarCollapsed #lessonList, body.sidebarCollapsed .mobileLessonsToggle { display: none; } .sidebar, .main { transition: width .25s cubic-bezier(.4,0,.2,1), margin-left .25s cubic-bezier(.4,0,.2,1), padding .25s ease; } /* ── 6. Hero 3D con parallax ────────────────────────────────────── */ .hero { position: relative; overflow: hidden; border-radius: var(--r); padding: 44px 42px; margin-bottom: 22px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; isolation: isolate; background: linear-gradient(135deg, rgba(124,92,252,.18), rgba(34,211,238,.07) 60%, transparent); border: 1px solid rgba(124,92,252,.22); transform-style: preserve-3d; box-shadow: var(--sh-card), inset 0 1px 0 rgba(255,255,255,.06); } /* Glow blob que sigue al cursor dentro del hero */ .hero::after { content:""; position: absolute; width: 420px; height: 420px; left: calc(var(--mx) * 100%); top: calc(var(--my) * 100%); transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(124,92,252,.22), transparent 65%); pointer-events: none; z-index: 0; transition: left .25s ease-out, top .25s ease-out; } /* Número gigante 3D flotante */ .heroBgNum { position: absolute; right: 36px; top: 50%; font-size: clamp(120px, 14vw, 200px); font-weight: 900; letter-spacing: -.07em; line-height: .82; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.08); user-select: none; pointer-events: none; z-index: 0; white-space: nowrap; transform: translateY(-50%) translateX(calc((var(--mx) - .5) * 20px)) translateZ(40px); transition: transform .3s ease-out; animation: numFloat 6s ease-in-out infinite; } @keyframes numFloat { 0%,100% { transform: translateY(-50%) translateX(calc((var(--mx) - .5) * 20px)); } 50% { transform: translateY(-53%) translateX(calc((var(--mx) - .5) * 20px)); } } .heroContent { position: relative; z-index: 1; transform: translateZ(50px); } .heroContent h2 { font-size: clamp(28px, 3.6vw, 46px); font-weight: 800; margin: 10px 0 8px; letter-spacing: -.045em; line-height: 1.08; max-width: 760px; text-wrap: balance; } .heroContent p { color: var(--text2); margin: 0; font-size: 14px; } .hero.slim .heroContent h2 { font-size: clamp(24px, 2.6vw, 36px); } .hero.slim { padding: 30px 34px; } #resetBtn { position: relative; z-index: 1; transform: translateZ(30px); } .eyebrow { display: block; color: var(--text3); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 10px; } .pill { display: inline-flex; background: var(--glass2); border: 1px solid rgba(124,92,252,.32); color: var(--violet2); padding: 5px 12px; border-radius: var(--r-btn); font-weight: 800; font-size: 11px; letter-spacing: .03em; margin-bottom: 4px; backdrop-filter: blur(8px); } /* ── 7. Cards con tilt 3D + spotlight ──────────────────────────── */ .card { background: var(--glass); border: 1px solid var(--border); border-radius: var(--r); padding: 26px; margin-bottom: 18px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); position: relative; overflow: hidden; transform-style: preserve-3d; transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr); will-change: transform; } /* Borde gradiente */ .card::before { content:""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(124,92,252,.30), rgba(34,211,238,.12), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 2; } /* Spotlight que sigue al cursor (lo activa JS con --cx/--cy) */ .card::after { content:""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle 240px at var(--cx,50%) var(--cy,50%), rgba(124,92,252,.14), transparent 70%); opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 1; } .card:hover { border-color: rgba(124,92,252,.30); box-shadow: var(--sh-card), 0 0 30px rgba(124,92,252,.10); } .card:hover::after { opacity: 1; } .card > * { position: relative; z-index: 3; } .cardLabel { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--text3); margin-bottom: 16px; } /* ── 8. Lesson ──────────────────────────────────────────────────── */ .lessonLayout { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(240px,.6fr); gap: 18px; align-items: start; } .lessonText { font-size: 17px; line-height: 1.78; margin: 0 0 20px; color: var(--text); font-weight: 400; } .keyIdeas { display: grid; gap: 8px; } .keyIdea { padding: 13px 16px 13px 16px; border-radius: 14px; background: var(--glass2); border: 1px solid var(--border2); border-left: 3px solid var(--violet); font-weight: 600; color: var(--text); font-size: 14px; line-height: 1.45; transition: transform var(--tr), border-color var(--tr); } .keyIdea:hover { transform: translateX(4px); border-left-color: var(--cyan); } .visualCard img { width: 100%; border-radius: 14px; border: 1px solid var(--border); display: block; cursor: zoom-in; transition: transform var(--spring), box-shadow var(--tr); } .visualCard img:hover { transform: translateY(-3px) scale(1.01) rotate(-.5deg); box-shadow: 0 18px 50px rgba(0,0,0,.55), var(--sh-glow); } .visualCard.hidden { display: none; } .lessonLayout.noVisual { grid-template-columns: 1fr; } .lessonLayout.noVisual .lessonCard { grid-column: 1/-1; } .caption { font-size: 12px; color: var(--text3); line-height: 1.5; margin: 10px 0 0; } /* ── 9. Quiz ────────────────────────────────────────────────────── */ .exerciseGrid { display: grid; grid-template-columns: 1fr; gap: 18px; } .exerciseCard { background: linear-gradient(135deg, rgba(34,211,238,.06), var(--glass) 55%); border-color: rgba(34,211,238,.16); } .tag { display: inline-flex; font-size: 10px; text-transform: uppercase; letter-spacing: .10em; font-weight: 800; color: #fff; background: var(--grad); border-radius: var(--r-btn); padding: 6px 12px; margin-bottom: 14px; box-shadow: 0 6px 18px rgba(34,211,238,.25); } .question { font-weight: 700; font-size: 18px; line-height: 1.45; color: var(--text); margin: 0 0 18px; } .answers { display: grid; gap: 9px; } .answerBtn { padding: 15px 18px; border-radius: 14px; border: 1px solid var(--border2); background: var(--glass); text-align: left; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text2); font-family: inherit; line-height: 1.4; transition: all var(--tr); position: relative; overflow: hidden; } .answerBtn::before { content:""; position: absolute; left: -100%; top: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent); transition: left .4s ease; } .answerBtn:hover::before { left: 100%; } .answerBtn:hover { background: var(--glass2); border-color: rgba(124,92,252,.42); color: var(--text); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 14px rgba(124,92,252,.14); } .answerBtn:active { transform: scale(.98); } .answerBtn.correct { border-color: rgba(52,211,153,.5); background: var(--good-bg); color: var(--good); box-shadow: 0 0 20px rgba(52,211,153,.22); animation: correctPop var(--spring); } @keyframes correctPop { 0%{transform:scale(1)} 40%{transform:scale(1.03)} 100%{transform:scale(1)} } .answerBtn.wrong { border-color: rgba(251,113,133,.42); background: var(--bad-bg); color: var(--bad); animation: shake .4s; } @keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} } .feedback { padding: 12px 16px; border-radius: 12px; font-weight: 700; font-size: 14px; margin-top: 14px; line-height: 1.45; } .feedNeutral { background: rgba(124,92,252,.08); color: var(--text2); border: 1px solid rgba(124,92,252,.14); } .good { background: var(--good-bg); color: var(--good); border: 1px solid rgba(52,211,153,.26); } .bad { background: var(--bad-bg); color: var(--bad); border: 1px solid rgba(251,113,133,.22); } /* ── 10. Nav buttons ────────────────────────────────────────────── */ .navButtons { display: flex; justify-content: space-between; gap: 12px; margin: 18px 0 28px; } .navBtn { flex: 1; background: var(--glass2); border: 1px solid var(--border2); color: var(--text); border-radius: var(--r-btn); padding: 15px 22px; font-weight: 700; cursor: pointer; font-family: inherit; font-size: 14px; transition: all var(--tr); } .navBtn:hover:not(:disabled) { background: var(--glass3); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.4); } .navBtn:active:not(:disabled) { transform: scale(.98); } .navBtn:disabled { opacity: .3; cursor: not-allowed; } .navBtnNext { background: var(--grad); border-color: transparent; box-shadow: 0 8px 24px rgba(124,92,252,.3); } .navBtnNext:hover:not(:disabled) { filter: brightness(1.12) saturate(1.1); box-shadow: 0 14px 36px rgba(124,92,252,.42), var(--sh-glow); } /* ── 11. Buttons ────────────────────────────────────────────────── */ .btnPrimary { background: var(--grad); color: #fff; border: 0; border-radius: var(--r-btn); padding: 15px 26px; font-weight: 800; cursor: pointer; font-family: inherit; font-size: 15px; box-shadow: 0 8px 24px rgba(124,92,252,.32); transition: all var(--tr); position: relative; overflow: hidden; } .btnPrimary::before { content:""; position: absolute; left: -100%; top: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); transition: left .5s ease; } .btnPrimary:hover::before { left: 100%; } .btnPrimary:hover { filter: brightness(1.1) saturate(1.1); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(124,92,252,.42), var(--sh-glow); } .btnPrimary:active { transform: scale(.97); } .btnGhost { background: var(--glass); color: var(--text2); border: 1px solid var(--border2); border-radius: var(--r-btn); padding: 12px 18px; font-weight: 700; cursor: pointer; font-family: inherit; font-size: 14px; transition: all var(--tr); } .btnGhost:hover { background: var(--glass2); color: var(--text); transform: translateY(-1px); } .btnSmall { padding: 10px 16px; font-size: 12px; white-space: nowrap; align-self: flex-start; } /* ── 12. Checklist / Glossary / Tools ──────────────────────────── */ .checkItem { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 15px; color: var(--text); transition: padding-left var(--tr); } .checkItem:last-child { border-bottom: 0; } .checkItem:hover { padding-left: 6px; } .checkItem input { margin-top: 3px; accent-color: var(--violet); flex-shrink: 0; width: 18px; height: 18px; } .glossary { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; } .glossary details { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 14px; background: var(--glass); backdrop-filter: blur(8px); transition: border-color var(--tr), box-shadow var(--tr), transform var(--tr); } .glossary details:hover { transform: translateY(-2px); } .glossary details[open] { border-color: rgba(124,92,252,.3); box-shadow: 0 0 20px rgba(124,92,252,.1); } .glossary summary { font-weight: 700; cursor: pointer; font-size: 14px; color: var(--text); } .glossary p { color: var(--text2); line-height: 1.55; margin: 8px 0 0; font-size: 13px; } .toolGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .toolGrid input { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-btn); margin: 6px 0 10px; font-size: 14px; background: var(--glass); color: var(--text); font-family: inherit; outline: none; transition: border-color var(--tr), box-shadow var(--tr); } .toolGrid input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124,92,252,.18); } .toolGrid input::placeholder { color: var(--text3); } .toolGrid .btnPrimary { width: 100%; margin-top: 2px; } .result { background: var(--glass); border: 1px dashed var(--border2); border-radius: var(--r-sm); padding: 14px; margin-top: 12px; line-height: 1.55; font-size: 14px; color: var(--text2); } .result strong { display: block; margin-bottom: 4px; font-weight: 800; color: var(--text); } .result ul { margin: 6px 0 0; padding-left: 16px; } .result li { margin-bottom: 4px; } /* ── 13. Auth ───────────────────────────────────────────────────── */ .authScreen { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); background: var(--bg); isolation: isolate; perspective: 1200px; overflow-y: auto; } .authScreen.hidden { display: none; } .authNoise { position: fixed; inset: 0; background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 30px 30px; pointer-events: none; z-index: 0; } .authOrbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; } .orb { position: absolute; border-radius: 50%; filter: blur(90px); animation: orbFloat 13s ease-in-out infinite alternate; } .orb1 { width: 540px; height: 540px; left: -120px; top: -120px; background: radial-gradient(circle, rgba(124,92,252,.32), transparent 70%); } .orb2 { width: 440px; height: 440px; right: -100px; bottom: -100px; background: radial-gradient(circle, rgba(34,211,238,.24), transparent 70%); animation-delay: -6s; } @keyframes orbFloat { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(40px,30px) scale(1.1)} } .authCard { width: min(94vw, 440px); background: var(--surface2); backdrop-filter: blur(34px) saturate(180%); -webkit-backdrop-filter: blur(34px) saturate(180%); border: 1px solid rgba(124,92,252,.28); border-radius: 30px; padding: 38px; box-shadow: 0 40px 100px rgba(0,0,0,.65), 0 0 70px rgba(124,92,252,.14), inset 0 1px 0 rgba(255,255,255,.08); position: relative; z-index: 1; overflow: hidden; transform-style: preserve-3d; transform: rotateX(calc((var(--my) - .5) * -6deg)) rotateY(calc((var(--mx) - .5) * 6deg)); transition: transform .3s ease-out; } .authCardGlow { position: absolute; inset: -80px -80px auto auto; width: 320px; height: 320px; background: radial-gradient(circle, rgba(124,92,252,.22), transparent 68%); pointer-events: none; } .authLogo { width: 60px; height: 60px; display: block; margin-bottom: 18px; position: relative; z-index: 1; filter: drop-shadow(0 0 16px var(--violet-glow)); } .authCard .eyebrow { display: inline-flex; color: var(--violet2); background: rgba(124,92,252,.15); border: 1px solid rgba(124,92,252,.3); border-radius: var(--r-btn); padding: 6px 12px; margin-bottom: 14px; font-size: 11px; position: relative; z-index: 1; } .authCard h1 { margin: 0 0 4px; font-size: 44px; font-weight: 900; letter-spacing: -.05em; line-height: .95; position: relative; z-index: 1; } .authCard h1 .brandAsync { display: block; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .authCard h1 .brandAcademy { display: block; color: var(--text2); font-weight: 200; font-size: .72em; } .authIntro { margin: 14px 0 24px; color: var(--text2); line-height: 1.58; font-size: 14px; position: relative; z-index: 1; } .authForm { position: relative; z-index: 1; } .fieldLabel { display: block; font-weight: 700; font-size: 13px; color: var(--text2); margin-bottom: 14px; } .fieldLabel input { display: block; width: 100%; margin-top: 6px; padding: 14px 16px; border: 1px solid var(--border2); border-radius: var(--r-btn); font-size: 15px; font-family: inherit; background: rgba(255,255,255,.05); color: var(--text); outline: none; transition: border-color var(--tr), box-shadow var(--tr); } .fieldLabel input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124,92,252,.2); } .fieldLabel input::placeholder { color: var(--text3); } .authForm .btnPrimary { width: 100%; margin-top: 4px; font-size: 16px; padding: 16px; } .authActions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; flex-wrap: wrap; position: relative; z-index: 1; } .authActions button { border: 0; background: transparent; color: var(--violet2); font-weight: 700; cursor: pointer; padding: 6px 0; font-size: 13px; font-family: inherit; transition: color var(--tr); } .authActions button:hover { color: var(--cyan2); text-decoration: underline; text-underline-offset: 3px; } .hiddenSoft { display: none !important; } .authMessage { margin: 14px 0 0; padding: 11px 14px; border-radius: var(--r-sm); font-weight: 600; font-size: 13px; line-height: 1.45; position: relative; z-index: 1; } .neutral { background: rgba(124,92,252,.08); color: var(--text2); border: 1px solid rgba(124,92,252,.14); } /* ── 14. Lightboxes ─────────────────────────────────────────────── */ .imageLightbox { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background: rgba(5,6,13,.9); backdrop-filter: blur(20px); padding: 20px; } .imageLightbox.open { display: flex; animation: fadeIn .3s; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } .imageLightbox img { max-width: min(96vw,1400px); max-height: 92vh; border-radius: 18px; box-shadow: 0 24px 80px rgba(0,0,0,.7), var(--sh-glow); object-fit: contain; animation: zoomIn var(--spring); } @keyframes zoomIn { from{transform:scale(.92);opacity:0} to{transform:scale(1);opacity:1} } .lightboxClose { position: fixed; top: 16px; right: 16px; width: 44px; height: 44px; border: 1px solid var(--border2); border-radius: 50%; background: var(--glass2); color: var(--text); font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; font-family: inherit; transition: all var(--tr); } .lightboxClose:hover { background: var(--bad); border-color: transparent; transform: scale(1.1) rotate(90deg); } .installLightbox { position: fixed; inset: 0; z-index: 9998; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(5,6,13,.65); backdrop-filter: blur(20px); } .installLightbox.open { display: flex; animation: fadeIn .3s; } .installCard { width: min(94vw,460px); background: var(--surface2); backdrop-filter: blur(26px); border: 1px solid rgba(124,92,252,.3); border-radius: 28px; padding: 30px; box-shadow: 0 30px 80px rgba(0,0,0,.6), var(--sh-glow); position: relative; overflow: hidden; animation: zoomIn var(--spring); } .installCard::before { content:""; position: absolute; inset: -40% -20% auto auto; width: 260px; height: 260px; background: radial-gradient(circle, rgba(124,92,252,.18), transparent 68%); pointer-events: none; } .installCard > * { position: relative; z-index: 1; } .installLogo { width: 56px; height: 56px; display: block; margin-bottom: 14px; } .installCard .eyebrow { display: inline-flex; color: var(--violet2); background: rgba(124,92,252,.12); border: 1px solid rgba(124,92,252,.24); border-radius: var(--r-btn); padding: 5px 10px; margin-bottom: 10px; } .installCard h2 { margin: 6px 0; font-size: 28px; font-weight: 800; letter-spacing: -.04em; } .installCard p { margin: 0 0 14px; color: var(--text2); line-height: 1.55; font-size: 14px; } .installHint { font-size: 13px; color: var(--text2); background: var(--glass); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 14px; } .installActions { display: flex; gap: 10px; } .installActions .btnPrimary, .installActions .btnGhost { flex: 1; text-align: center; } .installClose { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--glass2); color: var(--text); font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; font-family: inherit; transition: all var(--tr); } .installClose:hover { background: var(--bad); transform: rotate(90deg); } /* ── 15. Install banner ──────────────────────────────────────────── */ .installBanner { display: none; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding: 11px 16px; border-radius: var(--r-btn); background: rgba(124,92,252,.08); border: 1px solid rgba(124,92,252,.18); color: var(--text2); font-size: 14px; font-weight: 600; } .installBanner.visible { display: flex; } .installBanner button { border: 0; border-radius: var(--r-btn); padding: 8px 14px; background: var(--grad); color: #fff; font-weight: 800; cursor: pointer; font-size: 12px; font-family: inherit; white-space: nowrap; box-shadow: 0 4px 14px rgba(124,92,252,.28); transition: all var(--tr); } .installBanner button:hover { filter: brightness(1.1); transform: translateY(-1px); } /* ── 16. Classes ────────────────────────────────────────────────── */ .classLanding { display: grid; gap: 24px; } .classLandingHero { position: relative; min-height: 500px; border-radius: 28px; overflow: hidden; padding: 46px; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(280px,.8fr); gap: 30px; align-items: center; color: var(--text); background: var(--hero-dark); border: 1px solid rgba(124,92,252,.2); box-shadow: var(--sh-card); isolation: isolate; transform-style: preserve-3d; perspective: 1000px; } .classLandingHero::before { content:""; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 55% at calc(80% + (var(--mx) - .5) * 40px) 15%, rgba(34,211,238,.18), transparent), radial-gradient(ellipse 40% 50% at 10% 90%, rgba(124,92,252,.22), transparent); pointer-events: none; z-index: 0; transition: background .4s ease-out; } .classLandingHero > * { position: relative; z-index: 1; } .classHeroContent h2 { font-size: clamp(40px,5vw,72px); line-height: .98; letter-spacing: -.05em; margin: 12px 0 18px; background: var(--grad-3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .classHeroContent p { font-size: clamp(15px,1.4vw,21px); line-height: 1.55; color: var(--text2); max-width: 780px; margin: 0; } .classHeroMetrics { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .classMetric { min-width: 120px; padding: 14px 16px; border-radius: 18px; background: var(--glass2); border: 1px solid var(--border2); backdrop-filter: blur(10px); transition: transform var(--tr); } .classMetric:hover { transform: translateY(-3px); } .classMetric strong { display: block; font-size: 24px; font-weight: 900; line-height: 1; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .classMetric span { display: block; margin-top: 4px; color: var(--text3); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; } .classHeroVisual { position: relative; min-height: 300px; display: grid; place-items: center; transform: translateZ(40px); } .classHeroVisual img { width: min(280px,85%); border-radius: 28px; filter: drop-shadow(0 26px 40px rgba(0,0,0,.5)); transform: rotate(-2deg); border: 1px solid var(--border); } .classOrbit { position: absolute; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; } .classOrbit.orb1 { width: 270px; height: 270px; animation: slowSpin 22s linear infinite; } .classOrbit.orb2 { width: 370px; height: 180px; transform: rotate(-18deg); animation: pulseSoft 8s ease-in-out infinite; } .classLandingNav { position: sticky; top: 14px; z-index: 8; display: flex; gap: 7px; overflow-x: auto; padding: 8px; border-radius: 22px; background: var(--surface-nav); border: 1px solid var(--border); backdrop-filter: blur(20px); box-shadow: var(--sh-card); scrollbar-width: none; } .classLandingNav::-webkit-scrollbar { display: none; } .classLandingNav a { white-space: nowrap; text-decoration: none; color: var(--text2); font-weight: 700; font-size: 12px; padding: 9px 14px; border-radius: var(--r-btn); background: var(--glass); border: 1px solid var(--border); transition: all var(--tr); } .classLandingNav a:hover { background: var(--glass2); color: var(--text); transform: translateY(-1px); } .classLandingNav span { color: var(--violet); margin-right: 5px; } .classSections { display: grid; gap: 22px; } .classLandingSection { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.85fr); gap: 30px; align-items: center; min-height: 420px; padding: 44px; border-radius: 28px; background: linear-gradient(140deg, var(--glass2) 0%, var(--glass) 100%); border: 1px solid var(--border); box-shadow: var(--sh-card); overflow: hidden; isolation: isolate; opacity: 0; transform: translateY(40px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); } .classLandingSection.revealed { opacity: 1; transform: translateY(0); } .classLandingSection::before { content:""; position: absolute; inset: auto -10% -50% 50%; height: 70%; background: radial-gradient(circle, rgba(124,92,252,.1), transparent 62%); pointer-events: none; } .classSectionCopy, .classSectionVisual { position: relative; z-index: 1; } .sectionNumber { display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; background: var(--grad); color: #fff; font-weight: 900; font-size: 17px; margin-bottom: 18px; box-shadow: 0 12px 28px rgba(124,92,252,.3); } .classSectionCopy h3 { font-size: clamp(28px,3vw,50px); line-height: 1.04; letter-spacing: -.04em; margin: 8px 0 14px; color: var(--text); } .classSectionCopy p { font-size: clamp(15px,1.2vw,19px); line-height: 1.62; color: var(--text2); margin: 0; } .classBulletList { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; } .classBulletList li { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 14px; background: var(--glass2); border: 1px solid var(--border2); font-weight: 600; color: var(--text); font-size: 14px; transition: transform var(--tr); } .classBulletList li:hover { transform: translateX(4px); } .classBulletList li span { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: var(--grad); box-shadow: 0 0 8px var(--violet-glow); } .browserMock { height: 280px; border-radius: 20px; background: var(--surface2); border: 1px solid var(--border); box-shadow: var(--sh-card); padding: 16px; } .browserMock > div { display: flex; gap: 6px; margin-bottom: 16px; } .browserMock > div span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.12); } .browserMock section { height: 44px; border-radius: 12px; background: var(--glass); margin: 10px 0; } .browserMock section:nth-child(2){width:80%} .browserMock section:nth-child(3){width:95%} .browserMock section:nth-child(4){width:65%} .contrastCards, .ecosystemGrid { display: grid; gap: 10px; } .contrastCards { grid-template-columns: 1fr 1fr; } .contrastCards article, .ecosystemGrid article { padding: 18px; border-radius: 18px; background: var(--glass); border: 1px solid var(--border); transition: all var(--tr); } .contrastCards article:hover, .ecosystemGrid article:hover { border-color: rgba(124,92,252,.3); box-shadow: 0 0 16px rgba(124,92,252,.1); transform: translateY(-2px); } .contrastCards strong, .ecosystemGrid strong { font-size: 16px; display: block; color: var(--text); margin-bottom: 6px; font-weight: 800; } .contrastCards p, .ecosystemGrid p { font-size: 13px; line-height: 1.5; color: var(--text2); margin: 0; } .ecosystemGrid { grid-template-columns: repeat(2,1fr); } .processRail { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; } .processRail div, .questionStack div { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 18px; background: var(--glass); border: 1px solid var(--border); font-weight: 700; font-size: 14px; color: var(--text); transition: all var(--tr); } .processRail div:hover, .questionStack div:hover { border-color: rgba(34,211,238,.3); transform: translateX(3px); } .processRail span, .questionStack span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--grad); color: #fff; font-size: 11px; font-weight: 900; flex-shrink: 0; box-shadow: 0 4px 12px rgba(124,92,252,.25); } .questionStack { display: grid; gap: 10px; } .visualImageFrame { border-radius: 22px; padding: 8px; background: var(--glass2); border: 1px solid var(--border); box-shadow: var(--sh-card); } .visualImageFrame img { width: 100%; display: block; border-radius: 16px; max-height: 320px; object-fit: cover; } .principleWheel { position: relative; min-height: 320px; border-radius: 24px; background: var(--glass); border: 1px solid var(--border); display: grid; place-items: center; overflow: hidden; } .principleWheel > div { width: 130px; height: 130px; border-radius: 36px; background: var(--grad); color: #fff; display: grid; place-items: center; text-align: center; font-weight: 900; font-size: 18px; line-height: 1.1; box-shadow: 0 0 36px var(--violet-glow); animation: pulseGlow 4s ease-in-out infinite; } @keyframes pulseGlow { 50%{box-shadow:0 0 52px var(--violet-glow)} } .principleWheel span { position: absolute; left: 50%; top: 50%; width: 140px; padding: 8px; border-radius: 12px; background: var(--glass2); border: 1px solid var(--border2); font-size: 11px; font-weight: 700; color: var(--text); text-align: center; transform: rotate(calc(var(--i)*60deg)) translate(130px) rotate(calc(var(--i)*-60deg)); } .classType-closing { background: linear-gradient(140deg, rgba(34,211,238,.06), rgba(124,92,252,.08)); border-color: rgba(34,211,238,.18); } body.classesMode .main { max-width: none; width: calc(100vw - var(--sidebar-w)); padding: 24px clamp(20px,3vw,52px); } body.sidebarCollapsed.classesMode .main { width: calc(100vw - 70px); } body.classesMode footer { display: none; } body.classesMode .classLandingHero { min-height: min(720px,calc(100vh - 140px)); padding: clamp(36px,5vw,80px); } body.classesMode .classHeroContent h2 { font-size: clamp(48px,6vw,100px); } body.classesMode .classHeroContent p { font-size: clamp(17px,1.4vw,26px); } body.classesMode .classLandingSection { min-height: min(680px,calc(100vh - 120px)); padding: clamp(32px,4vw,70px); } body.classesMode .classSectionCopy h3 { font-size: clamp(34px,4vw,68px); } body.classesMode .classSectionCopy p { font-size: clamp(16px,1.3vw,24px); } body.classesMode .classBulletList { grid-template-columns: repeat(2,1fr); } /* ── 17. Desktop collapse ───────────────────────────────────────── */ @media(min-width:981px){ .sidebarCollapseBtn { display: flex; position: fixed; top: 50%; left: calc(var(--sidebar-w) - 14px); width: 28px; height: 54px; align-items: center; justify-content: center; border: 1px solid var(--border2); border-radius: 9px; background: rgba(20,24,44,.98); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; z-index: 60; box-shadow: 0 4px 20px rgba(0,0,0,.5); transition: left .25s cubic-bezier(.4,0,.2,1), background var(--tr), box-shadow var(--tr), transform var(--tr); transform: translateY(-50%); } .sidebarCollapseBtn::before { content:""; width: 8px; height: 8px; border-left: 2px solid var(--violet2); border-bottom: 2px solid var(--violet2); transform: rotate(45deg); margin-left: 3px; transition: border-color var(--tr); } .sidebarCollapseBtn:hover { background: var(--violet); box-shadow: var(--sh-glow); transform: translateY(-50%) scale(1.06); } .sidebarCollapseBtn:hover::before { border-color: #fff; } body.sidebarCollapsed .sidebarCollapseBtn { left: 56px; } body.sidebarCollapsed .sidebarCollapseBtn::before { transform: rotate(225deg); margin-left: -3px; } .moduleLessons { display: block; } .moduleTitle { pointer-events: none; cursor: default; } .moduleTitle em { display: none; } } /* ── 18. Animations ─────────────────────────────────────────────── */ @keyframes slowSpin { to{transform:rotate(360deg)} } @keyframes pulseSoft { 50%{opacity:.38;transform:rotate(-18deg) scale(1.05)} } @keyframes cardIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} } .view.active .hero { animation: cardIn .4s cubic-bezier(.16,1,.3,1) both; } .view.active .lessonLayout > *, .view.active .exerciseGrid > * { animation: cardIn .5s cubic-bezier(.16,1,.3,1) both; } .view.active .lessonLayout > *:nth-child(2) { animation-delay: .08s; } .view.active .exerciseGrid > * { animation-delay: .14s; } footer { color: var(--text3); font-size: 12px; text-align: center; padding: 24px 0 10px; border-top: 1px solid var(--border); margin-top: 32px; } .authLocked .sidebar, .authLocked .main { filter: blur(6px); pointer-events: none; user-select: none; } /* ── 19. Reduced motion ─────────────────────────────────────────── */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } body::after, .heroBgNum { animation: none; } .hero, .card, .authCard { transform: none !important; } .classLandingSection { opacity: 1; transform: none; } } /* ── 20. Tablet (≤980px) ────────────────────────────────────────── */ @media(max-width:980px){ body { display: block; } /* En táctil desactivamos efectos 3D dependientes del cursor */ .hero, .card, .authCard { transform: none !important; } .heroBgNum { animation: none; } .sidebar { position: sticky; top: 0; width: 100%; height: auto; padding: calc(12px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 12px max(14px, env(safe-area-inset-left)); border-right: 0; border-bottom: 1px solid var(--border); overflow: visible; } .brand { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; margin: 0; padding: 0; border: 0; } .logo { width: 40px; height: 40px; } .brandName { font-size: 17px; } .brandSub { display: none; } .mobileIconBtn { display: flex; width: 38px; height: 38px; border: 1px solid var(--border2); background: var(--glass); color: var(--text); border-radius: 12px; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; font-family: inherit; transition: all var(--tr); } .mobileIconBtn:hover { background: var(--violet); border-color: transparent; } .iconUser,.iconMenu { display: block; position: relative; width: 18px; height: 18px; } .iconUser::before { content:""; position: absolute; left: 50%; top: 1px; width: 7px; height: 7px; background: currentColor; border-radius: 50%; transform: translateX(-50%); } .iconUser::after { content:""; position: absolute; left: 50%; bottom: 1px; width: 17px; height: 9px; background: currentColor; border-radius: 9px 9px 4px 4px; transform: translateX(-50%); } .iconMenu::before { content:""; position: absolute; left: 2px; right: 2px; top: 3px; height: 2px; background: currentColor; border-radius: 99px; box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor; } .sidebar:not(.mobileMenuOpen):not(.userOpen) .userBox, .sidebar:not(.mobileMenuOpen) .extraMenu, .sidebar:not(.mobileMenuOpen) .search, .sidebar:not(.mobileMenuOpen) .progressBox, .sidebar:not(.mobileMenuOpen) #lessonList { display: none; } /* Al abrir el menú/usuario, separamos el contenido de la cabecera con un borde y margen */ .sidebar.userOpen .userBox, .sidebar.mobileMenuOpen .userBox { display: grid; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); } .sidebar.mobileMenuOpen { max-height: 84vh; overflow: auto; box-shadow: 0 20px 50px rgba(0,0,0,.5); } .sidebar.mobileMenuOpen .userBox + .progressBox, .sidebar.mobileMenuOpen .progressBox { display: block; margin-top: 12px; } .sidebar.mobileMenuOpen .extraMenu { display: grid; margin-top: 12px; } .sidebar.mobileMenuOpen .search, .sidebar.mobileMenuOpen #lessonList { display: block; } /* Cuando solo se abre el usuario (no el menú completo), también lo despegamos */ .sidebar.userOpen:not(.mobileMenuOpen) .userBox { margin-bottom: 4px; } .moduleTitle { pointer-events: auto; cursor: pointer; background: var(--glass); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 6px 0; color: var(--text2); font-size: 11px; letter-spacing: .05em; font-weight: 700; text-transform: none; } .moduleGroup.open .moduleTitle { border-color: rgba(124,92,252,.3); background: rgba(124,92,252,.08); color: var(--violet2); } .moduleTitle em { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; align-items: center; justify-content: center; background: var(--glass2); font-size: 12px; flex-shrink: 0; } .moduleGroup:not(.open) .moduleTitle em { transform: rotate(-90deg); } .moduleLessons { display: none !important; } .moduleGroup.open .moduleLessons { display: block !important; } .sidebar.mobileMenuOpen #lessonList { max-height: 44vh; overflow: auto; } .main { margin-left: 0; width: 100%; padding: 16px max(14px, env(safe-area-inset-left)) calc(90px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right)); perspective: none; } .hero { padding: 24px 22px; border-radius: 18px; } .heroBgNum { font-size: clamp(90px,20vw,150px); right: 18px; } .heroContent { transform: none; } .heroContent h2 { font-size: clamp(22px,6vw,32px); } .hero.slim .heroContent h2 { font-size: clamp(20px,5.5vw,28px); } .lessonLayout, .toolGrid, .glossary { grid-template-columns: 1fr; } .lessonText { font-size: 15px; } .card { border-radius: 18px; padding: 20px; } .exerciseGrid { grid-template-columns: 1fr; } .navButtons { gap: 8px; } .navBtn { padding: 13px 14px; font-size: 13px; } .sidebarCollapseBtn { display: none !important; } .classLandingHero { grid-template-columns: 1fr; min-height: auto; padding: 26px; border-radius: 24px; } .classHeroVisual { min-height: 180px; transform: none; } .classLandingSection { grid-template-columns: 1fr; padding: 24px; min-height: auto; border-radius: 22px; } .classSectionVisual { order: -1; } .contrastCards, .ecosystemGrid, .processRail { grid-template-columns: 1fr; } .principleWheel span { position: static; transform: none; width: auto; } .principleWheel { display: grid; gap: 7px; padding: 14px; } body.classesMode .main { width: 100%; margin-left: 0; padding: 14px 12px 84px; } body.classesMode .classLandingHero { min-height: auto; padding: 24px; grid-template-columns: 1fr; } body.classesMode .classLandingSection { min-height: auto; padding: 22px; grid-template-columns: 1fr; } body.classesMode .classBulletList { grid-template-columns: 1fr; } .mobileTabBar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; background: var(--surface); backdrop-filter: blur(22px); border-top: 1px solid var(--border); padding: 6px max(6px, env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); gap: 3px; } .mobileTabBar .extraBtn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 4px 6px; font-size: 9px; font-weight: 700; border-radius: 12px; background: transparent; border-color: transparent; color: var(--text3); } .mobileTabBar .extraBtn.active { background: rgba(124,92,252,.12); color: var(--violet2); border-color: transparent; } .tabIcon { font-size: 16px; line-height: 1; display: block; } } .mobileTabBar { display: none; } /* ── 21. Mobile small (≤620px) ──────────────────────────────────── */ @media(max-width:620px){ .brand { gap: 7px; } .logo { width: 36px; height: 36px; } .brandName { font-size: 15px; } .hero { padding: 18px; } .heroContent h2 { font-size: 22px; } .heroBgNum { font-size: 110px; } .authCard { padding: 28px 22px; border-radius: 24px; } .authCard h1 { font-size: 38px; } .classHeroContent h2 { font-size: 32px; } .classHeroContent p { font-size: 14px; } .classHeroVisual { display: none; } } /* ── 22. Performance ────────────────────────────────────────────── */ .lessonBtn,.answerBtn,.btnPrimary,.extraBtn { -webkit-tap-highlight-color: transparent; } .imageLightbox:not(.open),.installLightbox:not(.open) { backdrop-filter: none; -webkit-backdrop-filter: none; }