.tutorial-learning-center{position:relative;overflow:hidden}.tutorial-learning-center::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 18% 15%,rgba(57,255,20,.10),transparent 28%),radial-gradient(circle at 88% 8%,rgba(0,255,170,.08),transparent 25%),linear-gradient(rgba(57,255,20,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(57,255,20,.018) 1px,transparent 1px);background-size:auto,auto,52px 52px,52px 52px}.tutorial-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);align-items:center;gap:clamp(22px,4vw,52px);padding:clamp(30px,4vw,58px) max(24px,calc((100vw - 1420px)/2));background:linear-gradient(105deg,rgba(0,0,0,.95),rgba(0,45,17,.84),rgba(0,0,0,.96));border-bottom:1px solid rgba(57,255,20,.18);overflow:hidden}.tutorial-hero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.026) 0 1px,transparent 1px 7px),linear-gradient(90deg,transparent,rgba(57,255,20,.10),transparent);opacity:.6;pointer-events:none}.tutorial-hero>*{position:relative;z-index:1}.learning-badge{display:inline-flex;align-items:center;gap:9px;width:fit-content;padding:9px 15px;border:1px solid rgba(57,255,20,.38);border-radius:999px;color:#39ff14;background:rgba(0,0,0,.34);box-shadow:0 0 24px rgba(57,255,20,.12);font-weight:900;letter-spacing:1.2px;text-transform:uppercase;font-size:.8rem}.tutorial-hero h1{margin:16px 0 12px;font-size:clamp(2.5rem,6vw,6rem);line-height:.96;text-wrap:balance}.tutorial-hero h1 span{display:block;color:#39ff14}.tutorial-hero p{max-width:790px;font-size:clamp(1rem,1.35vw,1.17rem);line-height:1.65}.learning-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px}.learning-stat{padding:14px;border:1px solid rgba(57,255,20,.22);border-radius:18px;background:rgba(0,0,0,.34);text-align:center}.learning-stat strong{display:block;font-family:var(--font-title);font-size:clamp(1.25rem,2.4vw,2rem);color:#39ff14}.learning-stat span{font-size:.85rem;color:#cfe0d1;font-weight:800}.learning-path{width:min(1220px,calc(100% - 42px));margin:clamp(24px,4vw,42px) auto;padding:clamp(22px,3vw,34px);border:1px solid rgba(57,255,20,.24);border-radius:30px;background:linear-gradient(135deg,rgba(57,255,20,.07),rgba(0,0,0,.50));box-shadow:0 0 36px rgba(57,255,20,.09)}.learning-path h2,.tutorial-detail h2{font-family:var(--font-title);margin:0 0 14px}.learning-track{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;counter-reset:lesson}.learning-lesson{position:relative;padding:18px;border:1px solid rgba(57,255,20,.20);border-radius:20px;background:rgba(0,0,0,.32);text-decoration:none;color:#fff;transition:.3s ease}.learning-lesson:hover{transform:translateY(-5px);border-color:rgba(57,255,20,.55);box-shadow:0 0 28px rgba(57,255,20,.14)}.learning-lesson::before{counter-increment:lesson;content:"0" counter(lesson);display:inline-grid;place-items:center;width:42px;height:42px;border-radius:14px;margin-bottom:12px;background:rgba(57,255,20,.12);color:#39ff14;font-family:var(--font-title);font-weight:900;border:1px solid rgba(57,255,20,.30)}.learning-lesson strong{display:block;line-height:1.3}.learning-lesson span{display:block;margin-top:8px;color:#bdd1c2;font-size:.88rem}.tutorial-main-section{width:min(1220px,calc(100% - 42px));margin:0 auto;padding:clamp(24px,4vw,44px) 0}.tutorial-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}.tutorial-card{position:relative;overflow:hidden;padding:22px;border-radius:24px;border:1px solid rgba(57,255,20,.18);background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(57,255,20,.035),rgba(0,0,0,.46));box-shadow:0 18px 46px rgba(0,0,0,.24);transition:.3s ease}.tutorial-card:hover{transform:translateY(-6px);border-color:rgba(57,255,20,.45);box-shadow:0 0 30px rgba(57,255,20,.14)}.tutorial-card-top{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:12px;color:#cfe0d1;font-weight:800;font-size:.84rem}.tutorial-series{color:#39ff14!important;font-weight:900;margin:0 0 8px!important}.tutorial-card h2{font-size:clamp(1.18rem,1.7vw,1.55rem);line-height:1.2;margin-bottom:10px;text-wrap:balance}.tutorial-card p{font-size:.95rem;line-height:1.55}.tutorial-card.is-featured{border-color:rgba(57,255,20,.55);background:linear-gradient(145deg,rgba(57,255,20,.14),rgba(0,0,0,.58));box-shadow:0 0 34px rgba(57,255,20,.16)}.tutorial-card.is-featured::before{content:"RUTA ESPECIAL";position:absolute;right:16px;top:16px;padding:7px 10px;border-radius:999px;background:#39ff14;color:#001603;font-size:.68rem;font-weight:900;letter-spacing:.7px}.tutorial-detail-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);gap:clamp(22px,4vw,52px);align-items:center;padding:clamp(30px,4vw,58px) max(24px,calc((100vw - 1420px)/2));background:linear-gradient(105deg,rgba(0,0,0,.96),rgba(0,45,17,.86),rgba(0,0,0,.96));border-bottom:1px solid rgba(57,255,20,.16)}.tutorial-detail-hero h1{font-size:clamp(2.1rem,4.5vw,4.6rem);line-height:1.04;text-wrap:balance;margin:16px 0 12px}.tutorial-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.tutorial-meta span{padding:8px 12px;border-radius:999px;border:1px solid rgba(57,255,20,.22);background:rgba(0,0,0,.32);color:#dfffe2;font-weight:800}.tutorial-thumb-panel{position:relative;min-height:clamp(230px,30vw,405px);display:grid;place-items:center;border-radius:30px;border:1px solid rgba(57,255,20,.28);background:radial-gradient(circle at center,rgba(57,255,20,.18),transparent 36%),rgba(0,0,0,.35);overflow:hidden;box-shadow:0 0 34px rgba(57,255,20,.10)}.tutorial-thumb-panel img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 24px rgba(57,255,20,.30));transition:.55s ease}.tutorial-thumb-panel:hover img{transform:scale(1.045);filter:drop-shadow(0 0 44px rgba(57,255,20,.55))}.tutorial-content{width:min(1180px,calc(100% - 42px));margin:0 auto;padding:clamp(24px,4vw,46px) 0;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:24px}.tutorial-panel{padding:clamp(20px,3vw,30px);border:1px solid rgba(57,255,20,.18);border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.34));box-shadow:0 18px 44px rgba(0,0,0,.22);margin-bottom:18px}.tutorial-video{overflow:hidden;border-radius:24px;border:1px solid rgba(57,255,20,.28);background:#000;box-shadow:0 0 30px rgba(57,255,20,.10);margin-bottom:18px}.tutorial-video iframe{width:100%;aspect-ratio:16/9;border:0;display:block}.learn-list{display:grid;gap:10px;padding:0;margin:0;list-style:none}.learn-list li{display:flex;gap:10px;align-items:flex-start;color:#dfffe2}.learn-list li::before{content:"✓";color:#39ff14;font-weight:900}.tutorial-sidebar{position:sticky;top:110px;height:max-content}.tutorial-side-card{padding:22px;border-radius:24px;border:1px solid rgba(57,255,20,.20);background:rgba(0,0,0,.38);margin-bottom:16px}.tutorial-side-card strong{display:block;color:#39ff14;font-family:var(--font-title);font-size:1.6rem}.related-tutorials{display:grid;gap:10px}.related-tutorials a{padding:12px 14px;border-radius:16px;border:1px solid rgba(57,255,20,.16);background:rgba(0,0,0,.25);text-decoration:none;color:#ecfff0;font-weight:800}.related-tutorials a:hover{color:#39ff14;border-color:rgba(57,255,20,.4)}@media(max-width:950px){.tutorial-hero,.tutorial-detail-hero,.tutorial-content{grid-template-columns:1fr}.learning-stats{grid-template-columns:repeat(2,1fr)}.tutorial-sidebar{position:static}.tutorial-hero h1{font-size:clamp(2.25rem,12vw,4.1rem)}.tutorial-detail-hero h1{font-size:clamp(2rem,10vw,3.35rem)}}@media(max-width:520px){.learning-stats{grid-template-columns:1fr}.tutorial-grid{grid-template-columns:1fr}.tutorial-main-section,.learning-path,.tutorial-content{width:min(100% - 28px,1220px)}.tutorial-hero,.tutorial-detail-hero{padding-left:16px;padding-right:16px}.tutorial-thumb-panel{min-height:230px}}