@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  --red:#E51C3E; --red-dark:#C4102F; --ink:#0D0D0D;
  --bg:#F5F5F5; --line:#E6E6E6; --text:#171717;
  --text-mid:#5C5C5C; --text-soft:#8A8A8A;
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);}
h1,h2,h3,.brand{font-family:'Poppins',sans-serif;}
a{text-decoration:none;color:inherit;}
ul{margin:0;padding:0;list-style:none;}
img{display:block;max-width:100%;}

/* NAV */
.nav{background:var(--ink);color:#fff;padding:22px 40px;display:flex;flex-direction:column;align-items:center;gap:18px;}
.brand{font-weight:800;font-size:24px;letter-spacing:.02em;color:var(--red);display:flex;flex-direction:column;align-items:center;line-height:0.95;}
.brand-logo{height:34px;width:auto;display:block;}
.brand-logo-lg{height:58px;width:auto;display:block;margin:0 auto;}
.brand small{font-size:10px;letter-spacing:.35em;color:#fff;font-weight:600;margin-top:2px;}
.nav-links{display:flex;gap:34px;flex-wrap:wrap;justify-content:center;align-items:center;}
.nav-links a{font-size:14px;color:#D8D8D8;font-weight:500;}
.nav-links a.active{color:#fff;border-bottom:2px solid var(--red);padding-bottom:4px;}
.nav-user{font-size:13px;color:#D8D8D8;}
.nav-user a{color:var(--red);font-weight:700;}

/* AUTH */
.auth-wrap{min-height:100vh;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:30px;}
.brand-lockup{font-family:'Poppins',sans-serif;font-weight:800;font-size:30px;color:var(--red);text-align:center;line-height:1;}
.brand-lockup small{display:block;font-size:11px;letter-spacing:.35em;color:#fff;margin-top:6px;}
.auth-card{background:#fff;border-radius:10px;padding:36px 34px;width:100%;max-width:380px;}
.auth-card h1{font-size:20px;margin:0 0 20px;}
.auth-card form{display:flex;flex-direction:column;gap:16px;}
.auth-card label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--text-mid);}
.auth-card input{padding:12px 14px;border:1.5px solid var(--line);border-radius:6px;font-size:14px;font-family:inherit;}
.auth-card input:focus{outline:none;border-color:var(--red);}
.auth-error{background:#FDEAEC;color:var(--red-dark);padding:10px 14px;border-radius:6px;font-size:13px;margin-bottom:16px;}
.auth-alt{text-align:center;font-size:13px;color:var(--text-mid);margin-top:18px;}
.auth-alt a{color:var(--red);font-weight:700;}

.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--red);color:#fff;font-family:'Poppins',sans-serif;font-weight:700;font-size:14px;padding:13px 26px;border-radius:6px;border:none;cursor:pointer;}
.btn:hover{background:var(--red-dark);}

/* PRODUCT LIST (index) */
.page-head{background:var(--red);color:#fff;text-align:center;padding:34px 20px;font-family:'Poppins',sans-serif;font-weight:800;font-size:30px;letter-spacing:.02em;}
.products{max-width:960px;margin:0 auto;padding:44px 24px 80px;display:flex;flex-direction:column;gap:22px;}
.product-card{background:#fff;border-radius:10px;display:flex;align-items:center;gap:28px;padding:26px 30px;box-shadow:0 1px 3px rgba(0,0,0,0.06);}
.product-logo{width:120px;height:100px;flex:none;display:flex;align-items:center;justify-content:center;font-family:'Poppins',sans-serif;font-weight:800;color:var(--red);font-size:20px;text-align:center;line-height:1;border-right:1px solid var(--line);padding-right:24px;}
.product-logo-img{width:120px;height:100px;flex:none;border-radius:8px;object-fit:cover;}
.product-logo small{display:block;font-size:8px;letter-spacing:.3em;color:var(--ink);margin-top:4px;font-weight:700;}
.product-info{flex:1;}
.product-info h2{font-size:21px;margin:0 0 10px;font-weight:700;}
.product-info p{font-size:14px;color:var(--text-mid);line-height:1.65;margin:0;max-width:560px;}
.btn-outline{flex:none;border:1.5px solid var(--ink);color:var(--ink);font-family:'Poppins',sans-serif;font-weight:700;font-size:13.5px;padding:12px 22px;border-radius:6px;background:#fff;white-space:nowrap;}
.btn-outline:hover{background:var(--ink);color:#fff;}

/* HERO / CURSO */
.hero{background:linear-gradient(rgba(10,10,10,0.62),rgba(10,10,10,0.72)),repeating-linear-gradient(115deg,#1c2733,#1c2733 40px,#222f3d 40px,#222f3d 80px);color:#fff;text-align:center;padding:70px 24px;}
.hero p{max-width:760px;margin:0 auto 30px;font-size:15px;line-height:1.85;color:#EDEDED;}
.wrap{max-width:1000px;margin:0 auto;padding:0 24px;}

.module{background:#fff;margin-top:20px;border-radius:6px;padding:30px 34px;}
.module h2{font-size:16px;font-weight:800;margin:0 0 22px;letter-spacing:.01em;}
.lesson{display:flex;align-items:center;gap:16px;padding:16px 0;border-top:1px solid var(--line);}
.lesson:first-of-type{border-top:none;}
.lesson-link{flex:1;display:flex;align-items:center;gap:16px;}
.lesson-thumb{width:56px;height:52px;flex:none;border-radius:6px;background:var(--ink);color:var(--red);display:flex;align-items:center;justify-content:center;font-family:'Poppins',sans-serif;font-weight:800;font-size:13px;}
.lesson-thumb-img{width:56px;height:52px;flex:none;border-radius:6px;object-fit:cover;}
.lesson-info h4{margin:0 0 4px;font-size:14.5px;font-weight:700;line-height:1.4;}
.lesson-info p{margin:0;font-size:12.5px;color:var(--text-soft);line-height:1.5;max-width:480px;}
.lesson-status{flex:none;margin-left:auto;}
.check{color:var(--red);font-size:18px;}
.progressbar{position:relative;width:70px;height:5px;background:var(--line);border-radius:3px;overflow:hidden;}
.progressbar i{position:absolute;left:0;top:0;bottom:0;background:var(--red);}

/* WATCH PAGE */
.watch-wrap{max-width:820px;margin:0 auto;padding:40px 24px 80px;}
.watch-video{background:#000;border-radius:8px;overflow:hidden;aspect-ratio:16/9;margin-bottom:24px;}
.watch-video iframe, .watch-video video{width:100%;height:100%;border:0;display:block;}
.watch-title{font-size:22px;font-weight:800;margin:0 0 10px;}
.watch-desc{color:var(--text-mid);font-size:14.5px;line-height:1.7;margin:0 0 24px;}
.watch-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.watch-status{font-size:13px;color:var(--text-mid);}
.back-link{display:inline-block;margin-bottom:20px;color:var(--text-mid);font-size:13.5px;}
.back-link:hover{color:var(--red);}
.downloads-box{background:#fff;border-radius:10px;padding:20px 22px;margin-bottom:24px;box-shadow:0 1px 3px rgba(0,0,0,0.06);}
.downloads-box h3{margin:0 0 14px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-mid);display:flex;align-items:center;gap:8px;}
.downloads-box ul{display:flex;flex-direction:column;gap:10px;}
.download-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--bg);border-radius:8px;transition:background .15s;}
.download-item:hover{background:#EFEFEF;}
.download-icon{width:38px;height:38px;flex:none;border-radius:7px;background:var(--ink);color:var(--red);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;font-family:'Poppins',sans-serif;}
.download-name{flex:1;font-size:13.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.download-btn{flex:none;background:var(--ink);color:#fff;font-family:'Poppins',sans-serif;font-weight:700;font-size:12px;padding:8px 14px;border-radius:6px;white-space:nowrap;}
.download-btn:hover{background:var(--red);}

footer{background:var(--red);color:#fff;padding:22px 24px;display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;justify-content:space-between;font-size:12.5px;}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;}
.foot-links a{color:#fff;opacity:.92;}

@media (max-width:640px){
  /* NAV */
  .nav{padding:16px 18px;gap:12px;}
  .brand-logo{height:26px;}
  .nav-links{gap:14px;font-size:12.5px;}
  .nav-user{font-size:11.5px;width:100%;text-align:center;}

  /* PAGE HEAD / PRODUCTS */
  .page-head{font-size:22px;padding:24px 16px;}
  .products{padding:24px 16px 50px;gap:16px;}
  .product-card{flex-direction:column;text-align:center;padding:20px 18px;gap:16px;}
  .product-logo, .product-logo-img{border-right:none;border-bottom:1px solid var(--line);padding-right:0;padding-bottom:16px;width:100%;height:auto;max-height:120px;}
  .product-info h2{font-size:18px;}
  .product-info p{font-size:13.5px;}
  .btn-outline{width:100%;}

  /* HERO / CURSO */
  .hero{padding:40px 16px;}
  .hero p{font-size:13.5px;line-height:1.7;}
  .wrap{padding:0 12px;}
  .module{padding:18px 16px;margin-top:14px;}
  .module h2{font-size:14px;margin-bottom:14px;}
  .lesson{gap:10px;padding:12px 0;flex-wrap:wrap;}
  .lesson-link{gap:10px;min-width:0;}
  .lesson-thumb, .lesson-thumb-img{width:44px;height:42px;}
  .lesson-info h4{font-size:13px;}
  .lesson-info p{font-size:11.5px;max-width:100%;}
  .lesson-status{margin-left:8px;}
  .progressbar{width:50px;}

  /* AUTH */
  .auth-card{padding:26px 22px;}
  .brand-lockup{font-size:24px;}
  .brand-logo-lg{height:44px;}

  /* WATCH PAGE */
  .watch-wrap{padding:20px 14px 50px;}
  .watch-title{font-size:18px;}
  .watch-desc{font-size:13px;}
  .watch-actions{gap:10px;}
  .btn{width:100%;padding:13px 18px;}
  .watch-status{width:100%;}

  /* FOOTER */
  footer{flex-direction:column;text-align:center;padding:18px 16px;gap:10px 0;}
  .foot-links{justify-content:center;gap:14px;font-size:11.5px;}
}

@media (max-width:400px){
  .page-head{font-size:19px;}
  .nav-links{gap:10px;font-size:11.5px;}
  .lesson-info h4{font-size:12.5px;}
}