:root{
  --porcelain:#FBF7F5;
  --ink:#241B1D;
  --blush:#F0D9D9;
  --rose:#C97B84;
  --wine:#6B1F2A;
  --gold:#B08D57;
  --nude:#D8B9A6;
  --french:#F6EFE9;
  --success:#3F7A5B;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{ overflow-x:hidden; max-width:100%; }
body{
  background:var(--porcelain);
  color:var(--ink);
  font-family:'Manrope', sans-serif;
  line-height:1.5;
  overflow-x:hidden;
  max-width:100%;
}
h1,h2,h3,.serif{ font-family:'Fraunces', serif; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }
.container{ max-width:1200px; margin:0 auto; padding:0 20px; }
.container-sm{ max-width:720px; margin:0 auto; padding:0 20px; }

/* BOTONES */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:999px;
  font-weight:600; font-size:14px; border:none; cursor:pointer;
  transition:filter .2s ease, transform .2s ease;
  font-family:'Manrope', sans-serif;
}
.btn:hover{ filter:brightness(1.1); }
.btn:disabled{ opacity:.45; cursor:not-allowed; filter:none; }
.btn-wine{ background:var(--wine); color:#fff; }
.btn-outline{ background:transparent; color:#fff; border:1px solid rgba(176,141,87,.4); }
.btn-outline-ink{ background:transparent; color:var(--ink); border:1px solid rgba(36,27,29,.25); }
.btn-ink{ background:var(--ink); color:#fff; }
.btn-white{ background:#fff; color:var(--wine); }
.btn-block{ width:100%; }

/* NAV (compartido en todas las páginas) */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,247,245,.9); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(36,27,29,.08);
}
.nav-inner{ height:64px; display:flex; align-items:center; justify-content:space-between; }
.logo{ font-family:'Fraunces', serif; font-weight:600; font-size:20px; }
.logo span{ color:var(--wine); }
.nav-links{ display:flex; gap:32px; font-size:14px; font-weight:500; }
.nav-links a{ opacity:.8; transition:opacity .2s; }
.nav-links a:hover, .nav-links a.active{ opacity:1; }
.nav-links a.active{ color:var(--wine); font-weight:700; }
.nav-cta{ display:flex; align-items:center; gap:16px; }
.nav-user{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; }
.burger{ display:none; background:none; border:none; font-size:22px; cursor:pointer; }
.mobile-menu{ display:none; flex-direction:column; gap:16px; padding:0 20px 20px; font-size:14px; font-weight:500; }
.mobile-menu.open{ display:flex; }

@media (max-width:860px){
  .nav-links, .nav-cta{ display:none; }
  .burger{ display:block; }
}

/* TIPOGRAFÍA DE SECCIÓN */
.label{ font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--wine); margin-bottom:8px; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.section-head h2{ font-size:30px; font-weight:500; }
.page-header{ padding:48px 0 32px; text-align:center; }
.page-header h1{ font-size:34px; font-weight:500; margin-bottom:10px; }
.page-header p{ font-size:14px; opacity:.7; max-width:480px; margin:0 auto; }

/* BADGES */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:5px 12px; border-radius:999px;
}
.badge-gold{ background:rgba(176,141,87,.15); color:var(--gold); }
.badge-success{ background:rgba(63,122,91,.12); color:var(--success); }
.badge-wine{ background:rgba(107,31,42,.1); color:var(--wine); }

/* CARDS genéricas */
.card{
  background:#fff; border-radius:20px; border:1px solid rgba(36,27,29,.08);
  padding:24px;
}

/* FORMULARIOS */
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; padding:13px 16px; border-radius:12px;
  border:1px solid rgba(36,27,29,.18); font-family:'Manrope', sans-serif; font-size:14px;
  background:#fff; color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--wine);
}
.field-hint{ font-size:12px; opacity:.6; margin-top:6px; }
.field-error{ font-size:12px; color:#B3261E; margin-top:6px; }

/* FOOTER */
footer{ border-top:1px solid rgba(36,27,29,.08); padding:40px 0; margin-top:40px; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-inner .logo{ font-size:16px; }
.footer-inner p{ font-size:12px; opacity:.5; }

/* ============ HOME: hero / mosaico / galería / servicios / academia / testimonios / booking cta ============ */
.hero{ padding:40px 0 60px; }
.hero-grid{ display:grid; grid-template-columns:2fr 3fr; gap:24px; }
.hero-panel{ background:linear-gradient(150deg, var(--rose) 0%, var(--blush) 100%); border-radius:24px; padding:40px 32px; display:flex; flex-direction:column; justify-content:space-between; min-height:480px; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:11px; text-transform:uppercase; letter-spacing:.12em; background:rgba(255,255,255,.55); color:var(--wine); padding:6px 14px; border-radius:999px; margin-bottom:32px; width:fit-content; }
.hero-panel h1{ color:var(--wine); font-size:40px; font-style:italic; font-weight:450; line-height:1.05; margin-bottom:22px; }
.hero-panel p{ color:rgba(36,27,29,.75); max-width:340px; font-size:15px; }
.hero-panel .btn-outline{ color:var(--wine); border-color:rgba(107,31,42,.4); }
.hero-buttons{ display:flex; gap:12px; margin-top:36px; flex-wrap:wrap; }
.hero-mosaic{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:110px; gap:16px; }
.tile{ border-radius:22px; }
.tile-a{ grid-column:span 2; grid-row:span 2; background:linear-gradient(150deg,var(--wine),var(--ink)); }
.tile-b{ background:linear-gradient(150deg,var(--french),var(--blush)); }
.tile-c{ grid-row:span 2; background:linear-gradient(160deg,var(--gold),var(--nude)); }
.tile-d{ background:linear-gradient(160deg,var(--rose),var(--blush)); }
.tile-f{ background:linear-gradient(160deg,var(--wine),var(--rose)); }
.tile-e{ grid-column:span 2; background:var(--blush); display:flex; align-items:center; padding:0 24px; }
.tile-e p{ font-family:'Fraunces', serif; color:var(--wine); font-weight:600; font-size:18px; }
@media (max-width:860px){ .hero-grid{ grid-template-columns:1fr; } }

.gallery{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:220px; gap:16px; padding-bottom:80px; }
.g-item{ position:relative; border-radius:18px; overflow:hidden; transition:opacity .4s, filter .4s; background:rgba(36,27,29,.05); cursor:pointer; }
.g-item .bg{ position:absolute; inset:0; transition:transform .5s; }
.g-item:hover .bg{ transform:scale(1.06); }
.g-item .caption{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:16px; background:linear-gradient(0deg, rgba(36,27,29,.75) 0%, transparent 55%); opacity:0; transition:opacity .3s; }
.g-item:hover .caption{ opacity:1; }
.g-item .caption p{ color:#fff; font-size:13px; font-weight:500; }
@media (max-width:860px){ .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; } }

.gallery-pager{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.gallery-pager::-webkit-scrollbar{ display:none; }
.gallery-track{ display:flex; width:100%; }
.gallery-page{ flex:0 0 100%; width:100%; max-width:100%; box-sizing:border-box; scroll-snap-align:start; scroll-snap-stop:always; display:grid; gap:16px; padding-bottom:8px; }
.gallery-page-10{ grid-template-columns:repeat(5,1fr); grid-auto-rows:200px; }
.gallery-page-3{ grid-template-columns:repeat(3,1fr); grid-auto-rows:280px; }
@media (max-width:860px){
  .gallery-page-10{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; }
  .gallery-page-3{ grid-template-columns:1fr; grid-auto-rows:260px; }
}
.gallery-dots{ display:flex; justify-content:center; gap:8px; margin:20px 0 72px; }
.gallery-dot{ width:8px; height:8px; border-radius:50%; background:rgba(36,27,29,.2); cursor:pointer; border:none; padding:0; transition:all .2s; }
.gallery-dot.active{ background:var(--wine); width:22px; border-radius:5px; }

.gallery-simple{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding-bottom:72px; }
.gallery-simple .g-item{ height:280px; }
@media (max-width:860px){
  .gallery-simple{ grid-template-columns:1fr; }
  .gallery-simple .g-item{ height:340px; }
}

.lightbox{ display:none; position:fixed; inset:0; background:rgba(20,15,16,.94); z-index:999; align-items:center; justify-content:center; padding:24px; cursor:zoom-out; }
.lightbox.active{ display:flex; }
.lightbox img{ max-width:100%; max-height:88vh; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.5); cursor:default; }
.lightbox-close{ position:absolute; top:20px; right:24px; background:rgba(255,255,255,.12); border:none; color:#fff; font-size:28px; line-height:1; width:44px; height:44px; border-radius:50%; cursor:pointer; }

.terminos-overlay{ display:none; position:fixed; inset:0; background:rgba(20,15,16,.85); z-index:1000; align-items:center; justify-content:center; padding:20px; }
.terminos-overlay.active{ display:flex; }
.terminos-modal{ background:var(--porcelain); border-radius:20px; max-width:480px; width:100%; max-height:90vh; overflow-y:auto; position:relative; padding-bottom:4px; }
.terminos-modal img{ width:100%; display:block; border-radius:20px 20px 0 0; }
.terminos-cerrar{ position:absolute; top:12px; right:12px; background:rgba(20,15,16,.6); border:none; color:#fff; font-size:24px; line-height:1; width:36px; height:36px; border-radius:50%; cursor:pointer; z-index:2; }
.terminos-footer{ padding:20px 24px 24px; }
.terminos-check{ display:flex; align-items:flex-start; gap:10px; font-size:13px; line-height:1.4; margin-bottom:16px; cursor:pointer; }
.terminos-check input{ margin-top:2px; width:18px; height:18px; flex-shrink:0; accent-color:var(--wine); cursor:pointer; }

.services{ background:var(--blush); padding:80px 0; }
.services h2{ text-align:center; font-size:32px; font-weight:500; margin-bottom:56px; }
.services .label{ text-align:center; }
.svc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; max-width:900px; margin:0 auto; }
.svc-group h3{ font-size:18px; color:var(--wine); font-weight:600; margin-bottom:20px; border-bottom:2px solid var(--gold); display:inline-block; padding-bottom:6px; }
.svc-item{ display:flex; align-items:baseline; gap:8px; margin-bottom:16px; font-size:14px; }
.svc-item .name{ white-space:nowrap; }
.svc-item .dots{ flex:1; border-bottom:1px dotted rgba(36,27,29,.4); margin-bottom:4px; }
.svc-item .dur{ font-size:12px; opacity:.6; white-space:nowrap; }
.svc-item .price{ font-weight:700; color:var(--wine); white-space:nowrap; }
.services-cta{ text-align:center; margin-top:56px; }
@media (max-width:860px){ .svc-grid{ grid-template-columns:1fr; } }

.academia-section{ padding:80px 0; }
.academia-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; }
.academia-section h2{ font-size:32px; font-weight:500; margin-bottom:18px; }
.academia-section p{ font-size:14px; opacity:.75; max-width:420px; margin-bottom:32px; }
.course-cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.course-card{ border-radius:18px; padding:20px; min-height:140px; display:flex; flex-direction:column; justify-content:space-between; }
.course-card.dark{ background:var(--ink); color:#fff; }
.course-card.light{ background:var(--blush); color:var(--ink); }
.course-card .tag{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.course-card.dark .tag{ color:var(--gold); }
.course-card.light .tag{ color:var(--wine); }
.course-card .title{ font-family:'Fraunces', serif; font-weight:500; font-size:16px; }
@media (max-width:860px){ .academia-grid{ grid-template-columns:1fr; } }

.testimonials{ background:var(--ink); padding:80px 0; color:#fff; }
.testimonials h2{ text-align:center; font-size:32px; font-weight:500; margin-bottom:56px; }
.testimonials .label{ text-align:center; color:var(--gold); }
.t-filtros{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-bottom:36px; }
.t-filtro{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); color:#fff; padding:7px 16px; border-radius:20px; font-size:12px; font-weight:600; cursor:pointer; font-family:'Manrope',sans-serif; opacity:.7; }
.t-filtro.active{ background:var(--gold); border-color:var(--gold); color:var(--ink); opacity:1; }
.t-grid{ display:flex; gap:20px; overflow-x:auto; padding:4px 4px 16px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.t-card{ background:#2E2325; border-radius:18px; padding:24px; flex:0 0 300px; }
@media (max-width:600px){ .t-card{ flex-basis:260px; } }
.t-card .t-photo{ width:100%; height:160px; object-fit:cover; border-radius:12px; margin-bottom:16px; }
.t-card .stars{ color:var(--gold); margin-bottom:14px; font-size:13px; }
.t-card p{ font-size:14px; opacity:.85; margin-bottom:18px; }
.t-card .name{ font-weight:600; font-size:14px; }

.booking-cta{ background:var(--wine); padding:80px 20px; text-align:center; color:#fff; }
.booking-cta .label{ color:var(--gold); text-align:center; margin-bottom:12px; }
.booking-cta h2{ font-size:32px; font-weight:500; max-width:560px; margin:0 auto 18px; }
.booking-cta p{ opacity:.7; font-size:14px; max-width:420px; margin:0 auto 32px; }

.contact{ padding:80px 0; display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.contact h2{ font-size:30px; font-weight:500; margin-bottom:24px; }
.contact-list li{ display:flex; align-items:center; gap:12px; font-size:14px; margin-bottom:16px; }
.contact-list i{ color:var(--wine); width:18px; text-align:center; }
.map-box{ background:var(--blush); border-radius:18px; min-height:260px; display:flex; align-items:center; justify-content:center; color:var(--wine); text-align:center; }
.map-box i{ font-size:26px; margin-bottom:8px; display:block; }
.map-box p{ font-size:12px; opacity:.7; }
@media (max-width:860px){ .contact{ grid-template-columns:1fr; } }

/* ============ AGENDAMIENTO ============ */
.booking-layout{ display:grid; grid-template-columns:1.6fr 1fr; gap:32px; padding:20px 0 80px; align-items:start; min-width:0; }
.booking-layout > *{ min-width:0; }
@media (max-width:900px){ .booking-layout{ grid-template-columns:1fr; } }

.steps{ display:flex; align-items:center; gap:8px; margin-bottom:32px; font-size:12px; font-weight:600; flex-wrap:wrap; row-gap:10px; }
.step{ display:flex; align-items:center; gap:6px; opacity:.4; white-space:nowrap; }
.step.active{ opacity:1; color:var(--wine); }
.step .num{ height:24px; width:24px; border-radius:50%; background:rgba(36,27,29,.1); display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; }
.step.active .num{ background:var(--wine); color:#fff; }
.step-line{ flex:1 1 20px; min-width:20px; height:1px; background:rgba(36,27,29,.15); }

.svc-select-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:36px; }
@media (max-width:600px){ .svc-select-grid{ grid-template-columns:1fr; } }
.svc-option{
  border:1.5px solid rgba(36,27,29,.15); border-radius:16px; padding:16px 18px;
  cursor:pointer; transition:border-color .2s, background .2s;
}
.svc-option:hover{ border-color:var(--rose); }
.svc-option.selected{ border-color:var(--wine); background:rgba(107,31,42,.04); }
.svc-option .row1{ display:flex; justify-content:space-between; font-weight:600; font-size:14px; margin-bottom:4px; }
.svc-option .row2{ font-size:12px; opacity:.6; }
.svc-option .price{ color:var(--wine); font-weight:700; }

.date-picker{ margin-bottom:36px; }
.date-scroll{ display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; }
.date-chip{
  min-width:64px; border:1.5px solid rgba(36,27,29,.15); border-radius:14px;
  padding:12px 8px; text-align:center; cursor:pointer; flex-shrink:0;
}
.date-chip .dow{ font-size:11px; opacity:.6; text-transform:uppercase; }
.date-chip .day{ font-family:'Fraunces', serif; font-size:20px; font-weight:600; margin:2px 0; }
.date-chip .mon{ font-size:10px; opacity:.6; text-transform:uppercase; }
.date-chip.selected{ border-color:var(--wine); background:var(--wine); color:#fff; }
.date-chip.selected .dow, .date-chip.selected .mon{ opacity:.8; }

.time-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media (max-width:600px){ .time-grid{ grid-template-columns:repeat(3,1fr); } }
.time-chip{
  border:1.5px solid rgba(36,27,29,.15); border-radius:12px; padding:10px 6px;
  text-align:center; font-size:13px; font-weight:600; cursor:pointer;
}
.time-chip.selected{ border-color:var(--wine); background:var(--wine); color:#fff; }
.time-chip.disabled{ opacity:.3; text-decoration:line-through; cursor:not-allowed; }

.summary-card{ position:sticky; top:88px; }
.summary-card h3{ font-family:'Fraunces', serif; font-size:20px; margin-bottom:20px; }
.summary-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; font-size:13px; padding:10px 0; border-bottom:1px solid rgba(36,27,29,.08); }
.summary-row .k{ opacity:.6; flex-shrink:0; }
.summary-row .v{ font-weight:600; text-align:right; min-width:0; overflow-wrap:break-word; }
.summary-total{ display:flex; justify-content:space-between; align-items:baseline; padding:16px 0; margin-top:6px; }
.summary-total .k{ font-size:13px; }
.summary-total .v{ font-family:'Fraunces', serif; font-size:24px; color:var(--wine); font-weight:600; flex-shrink:0; white-space:nowrap; }
.deposit-note{ font-size:12px; opacity:.6; margin-bottom:20px; line-height:1.5; }
.pay-methods{ display:flex; gap:10px; margin-top:16px; }
.pay-methods span{ font-size:11px; padding:6px 10px; border-radius:8px; background:rgba(36,27,29,.06); }

/* ============ ACADEMIA / CATÁLOGO ============ */
.filters-bar{ display:flex; gap:10px; margin-bottom:32px; flex-wrap:wrap; }
.filter-chip{
  border:1.5px solid rgba(36,27,29,.15); border-radius:999px; padding:8px 18px;
  font-size:13px; font-weight:600; cursor:pointer; background:#fff;
}
.filter-chip.active{ background:var(--ink); color:#fff; border-color:var(--ink); }

.course-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding-bottom:80px; }
@media (max-width:900px){ .course-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .course-grid{ grid-template-columns:1fr; } }
.course-item{ border-radius:20px; overflow:hidden; background:#fff; border:1px solid rgba(36,27,29,.08); transition:transform .2s; }
.course-item:hover{ transform:translateY(-4px); }
.course-cover{ height:160px; display:flex; align-items:center; justify-content:center; position:relative; }
.course-cover i{ font-size:34px; color:#fff; opacity:.85; }
.course-body{ padding:20px; }
.course-body .level{ margin-bottom:10px; }
.course-body h3{ font-size:17px; font-weight:600; margin-bottom:8px; line-height:1.3; }
.course-body p{ font-size:13px; opacity:.65; margin-bottom:16px; line-height:1.5; }
.course-foot{ display:flex; justify-content:space-between; align-items:center; }
.course-price{ font-family:'Fraunces', serif; font-weight:600; font-size:18px; color:var(--wine); }

/* ============ LOGIN / REGISTRO ============ */
.auth-wrap{ padding:60px 0 100px; display:flex; justify-content:center; }
.auth-card{ width:100%; max-width:420px; }
.auth-tabs{ display:flex; background:var(--blush); border-radius:999px; padding:4px; margin-bottom:32px; }
.auth-tab{ flex:1; text-align:center; padding:10px; border-radius:999px; font-size:13px; font-weight:700; cursor:pointer; }
.auth-tab.active{ background:var(--wine); color:#fff; }
.auth-form{ display:none; }
.auth-form.active{ display:block; }
.auth-links{ display:flex; justify-content:space-between; font-size:12px; margin-top:-6px; margin-bottom:20px; }
.auth-links a{ color:var(--wine); font-weight:600; }
.auth-divider{ text-align:center; font-size:12px; opacity:.5; margin:22px 0; position:relative; }

/* ============ PANEL DE ALUMNA ============ */
.dash-layout{ display:grid; grid-template-columns:260px 1fr; gap:32px; padding:32px 0 80px; align-items:start; }
@media (max-width:860px){ .dash-layout{ grid-template-columns:1fr; } }
.dash-sidebar{ position:sticky; top:88px; }
.dash-profile{ display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.dash-avatar{ height:44px; width:44px; border-radius:50%; background:var(--wine); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-family:'Fraunces', serif; }
.dash-profile .name{ font-weight:700; font-size:14px; }
.dash-profile .mail{ font-size:11px; opacity:.6; }
.dash-nav{ display:flex; flex-direction:column; gap:4px; }
.dash-nav a{ padding:11px 14px; border-radius:10px; font-size:13px; font-weight:600; display:flex; align-items:center; gap:10px; }
.dash-nav a.active{ background:var(--ink); color:#fff; }
.dash-nav a:not(.active):hover{ background:rgba(36,27,29,.05); }

.my-course-card{ display:flex; gap:16px; padding:16px; border-radius:16px; border:1px solid rgba(36,27,29,.08); margin-bottom:14px; cursor:pointer; transition:border-color .2s; }
.my-course-card:hover{ border-color:var(--rose); }
.my-course-thumb{ height:64px; width:64px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.my-course-thumb i{ color:#fff; font-size:18px; }
.my-course-info{ flex:1; }
.my-course-info h4{ font-size:14px; font-weight:600; margin-bottom:6px; }
.progress-bar{ height:6px; background:rgba(36,27,29,.08); border-radius:99px; overflow:hidden; margin-bottom:6px; }
.progress-fill{ height:100%; background:var(--wine); border-radius:99px; }
.progress-label{ font-size:11px; opacity:.6; }

.player-wrap{ background:var(--ink); border-radius:20px; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; margin-bottom:24px; position:relative; }
.player-wrap i{ color:#fff; font-size:46px; opacity:.85; cursor:pointer; }
.player-wrap .locked{ position:absolute; inset:0; background:rgba(36,27,29,.85); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:#fff; border-radius:20px; }
.player-wrap .locked i{ font-size:26px; opacity:1; }
.player-wrap .locked span{ font-size:13px; }

.module-list{ margin-top:8px; }
.module{ margin-bottom:18px; }
.module-title{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; opacity:.55; margin-bottom:10px; font-weight:700; }
.lesson{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; font-size:13px; margin-bottom:6px; cursor:pointer; }
.lesson:hover{ background:rgba(36,27,29,.04); }
.lesson.playing{ background:rgba(107,31,42,.06); color:var(--wine); font-weight:700; }
.lesson i{ width:16px; text-align:center; opacity:.6; }
.lesson .dur{ margin-left:auto; font-size:11px; opacity:.5; }

.materials-list .material{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:14px; border:1px solid rgba(36,27,29,.08); margin-bottom:10px; }
.materials-list .material i{ font-size:18px; color:var(--wine); }
.materials-list .material .info{ flex:1; }
.materials-list .material .info .fname{ font-size:13px; font-weight:600; }
.materials-list .material .info .fsize{ font-size:11px; opacity:.55; }