/* ==========================================================================
   CASA DE LAS EXTENSIONES · ACADEMY — CAPA PREMIUM
   Solo presentación. Se carga DESPUÉS de styles.css. No toca Firebase,
   matrículas, compras ni lógica. Para volver atrás: quitar el <link> de
   premium.css en index.html.
   Identidad: Cinzel · dorado #EED282 → #B7854D · negro · blanco
   ========================================================================== */

:root{
  --ink:#0a0908;
  --surface:#11100e;
  --surface-2:#171512;
  --hair:rgba(238,210,130,.14);
  --hair-strong:rgba(238,210,130,.34);
  --gold:#e6cb8e;
  --gold-soft:#eed282;
  --gold-deep:#b7854d;
  --text:#f6f1e7;
  --text-soft:#cfc6b6;
  --muted:#9d9588;
  --radius:18px;
  --ease:cubic-bezier(.22,.7,.2,1);
  --shadow-soft:0 18px 50px -22px rgba(0,0,0,.85);
}

/* ---------- Base ---------- */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:
    radial-gradient(1100px 520px at 90% -8%,rgba(183,133,77,.10),transparent 60%),
    radial-gradient(800px 420px at -5% 30%,rgba(238,210,130,.045),transparent 60%),
    var(--ink);
  color:var(--text);
  font-family:'DM Sans',system-ui,sans-serif;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:rgba(238,210,130,.28);color:#fff}
h1,h2,h3{font-family:'Cinzel',Georgia,serif;font-weight:400;letter-spacing:.02em}
.eyebrow{
  font-family:'DM Sans',sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;color:var(--gold);opacity:.92;
}
.eyebrow::before{content:"";display:inline-block;width:22px;height:1px;background:var(--gold-deep);vertical-align:middle;margin-right:12px;opacity:.9}
.auth-card .eyebrow::before,.lash-section-head .eyebrow::before,.room-heading .eyebrow::before{display:none}
.muted{color:var(--muted)}

/* scroll fino dorado */
*{scrollbar-width:thin;scrollbar-color:#4a3d28 transparent}
::-webkit-scrollbar{height:6px;width:8px}
::-webkit-scrollbar-thumb{background:#4a3d28;border-radius:9px}

/* ---------- Botones ---------- */
button{
  font-family:'DM Sans',sans-serif;font-weight:500;letter-spacing:.02em;
  border:1px solid var(--hair-strong);background:transparent;color:var(--text);
  border-radius:999px;padding:11px 20px;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
button:hover{border-color:var(--gold);background:rgba(238,210,130,.07);color:#fff}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid rgba(238,210,130,.7);outline-offset:3px}

.primary,.lash-gold-btn,
.premium-course-card .premium-course-action button,
.premium-course-card .premium-course-action button.primary{
  background:linear-gradient(120deg,#b7854d 0%,#eed282 52%,#c9a05f 100%)!important;
  background-size:160% 100%!important;background-position:0 0!important;
  color:#17110a!important;border:0!important;border-radius:999px!important;
  font-weight:700!important;font-size:12.5px!important;letter-spacing:.14em!important;text-transform:uppercase;
  padding:15px 30px!important;
  box-shadow:0 10px 26px -12px rgba(183,133,77,.75),inset 0 1px 0 rgba(255,255,255,.35)!important;
  transition:background-position .6s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)!important;
}
.primary:hover,.lash-gold-btn:hover,
.premium-course-card .premium-course-action button:hover{
  background-position:100% 0!important;transform:translateY(-2px);
  box-shadow:0 16px 30px -12px rgba(238,210,130,.55),inset 0 1px 0 rgba(255,255,255,.4)!important;color:#17110a!important;
}
.primary:active,.lash-gold-btn:active{transform:translateY(0)}
.primary.small,.enroll-controls .primary{padding:9px 16px!important;font-size:11px!important}
.lash-gold-btn span{display:inline-block;margin-left:6px;transition:transform .3s var(--ease)}
.lash-gold-btn:hover span{transform:translate(3px,-3px)}
.danger{color:#e9a89e}

/* ---------- Inputs ---------- */
label{color:var(--text-soft);font-size:12px;letter-spacing:.04em}
input,textarea,select{
  background:rgba(255,255,255,.025)!important;color:var(--text)!important;
  border:1px solid rgba(238,210,130,.2)!important;border-radius:12px!important;
  padding:13px 15px!important;font-family:inherit;
  transition:border-color .25s,box-shadow .25s,background .25s;
}
input::placeholder,textarea::placeholder{color:#6d665a}
input:focus,textarea:focus,select:focus{
  outline:none!important;border-color:var(--gold)!important;
  background:rgba(238,210,130,.04)!important;box-shadow:0 0 0 4px rgba(238,210,130,.09)!important;
}

/* ==========================================================================
   LOGIN
   ========================================================================== */
.auth-screen{
  background:
    radial-gradient(700px 420px at 50% 0%,rgba(183,133,77,.20),transparent 70%),
    radial-gradient(600px 500px at 50% 110%,rgba(238,210,130,.07),transparent 70%),
    var(--ink)!important;
}
.auth-card{
  transform:none!important;animation:fadeUp .9s var(--ease) both!important;
  border:1px solid var(--hair-strong)!important;border-radius:26px!important;
  background:linear-gradient(160deg,rgba(24,22,19,.92),rgba(10,9,8,.96))!important;
  box-shadow:0 40px 90px -30px #000,0 0 0 1px rgba(255,255,255,.02) inset!important;
  backdrop-filter:blur(8px);padding:clamp(30px,6vw,52px)!important;
}
.auth-card::before{left:20%!important;right:20%!important;background:linear-gradient(90deg,transparent,#eed282,transparent)!important}
.auth-logo{animation:none!important;filter:drop-shadow(0 6px 18px rgba(0,0,0,.7))!important;width:140px!important}
.auth-card h1{
  font-size:clamp(20px,4.2vw,26px)!important;line-height:1.5!important;letter-spacing:.06em!important;
  text-shadow:none!important;margin:18px auto 10px!important;
}
.auth-card p{color:var(--muted)!important;font-size:13px!important}
.auth-card .primary{width:100%;margin-top:8px}
.auth-links{margin-top:22px!important;padding-top:20px;border-top:1px solid var(--hair)}
.linkbtn{color:var(--gold)!important;border:0!important;border-radius:6px!important;padding:6px 4px!important;font-size:12px!important;letter-spacing:.06em;text-decoration:none}
.linkbtn:hover{background:transparent!important;text-decoration:underline;text-underline-offset:5px}
.error{color:#eab0a6!important}

/* ==========================================================================
   CABECERA
   ========================================================================== */
#appShell .top{
  background:rgba(10,9,8,.78)!important;backdrop-filter:blur(22px) saturate(140%);
  border-bottom:1px solid var(--hair)!important;box-shadow:none!important;
  padding-block:9px!important;
}
.brand img{width:54px!important;height:48px!important}
.brand strong{font-family:'Cinzel',serif;font-weight:500;font-size:13px!important;letter-spacing:.2em!important}
.brand small{letter-spacing:.5em!important;font-size:9px!important;color:var(--gold-deep)!important;margin-top:3px}
.account{font-size:12px;color:var(--muted)}
.account button,#appShell #adminQuickAccess:not([hidden]){
  padding:8px 18px!important;font-size:11px!important;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--hair-strong)!important;border-radius:999px!important;background:transparent!important;color:var(--gold)!important;
}
.account button:hover,#appShell #adminQuickAccess:hover{background:rgba(238,210,130,.08)!important;color:#fff!important}

/* ==========================================================================
   PORTADA (HERO)
   ========================================================================== */
#appShell .shell main{max-width:1240px!important;padding-top:26px!important}
#appShell .lash-hero.lash-hero-photo{
  min-height:420px!important;border:1px solid var(--hair)!important;border-radius:28px!important;
  background:var(--surface)!important;box-shadow:var(--shadow-soft);margin-bottom:14px!important;
  padding:clamp(34px,6vw,84px)!important;
}
#appShell .lash-hero-photo .lash-hero-media:after{
  background:
    linear-gradient(90deg,#0a0908 0%,rgba(10,9,8,.94) 28%,rgba(10,9,8,.55) 58%,rgba(10,9,8,.08) 100%),
    linear-gradient(0deg,rgba(10,9,8,.55),transparent 40%)!important;
}
#appShell .lash-hero-photo .lash-hero-placeholder{
  background:radial-gradient(circle at 78% 42%,rgba(183,133,77,.30) 0%,rgba(23,18,13,.9) 45%,#0a0908 100%)!important;color:var(--gold-deep)!important;
}
#appShell .lash-hero-photo .lash-hero-placeholder span{font-size:64px!important;opacity:.45;font-weight:200}
#appShell .lash-hero-photo .lash-hero-placeholder small{letter-spacing:.34em!important;opacity:.7}
#appShell .lash-hero-photo .lash-hero-copy{animation:fadeUp 1s var(--ease) .1s both}
#appShell .lash-hero-photo h1,#appShell .lash-hero h1{
  font-family:'Cinzel',serif!important;font-weight:400!important;
  font-size:clamp(34px,4.6vw,62px)!important;line-height:1.14!important;letter-spacing:.03em!important;
  margin:22px 0 18px!important;color:#fff;
}
#appShell .lash-hero h1 em{
  font-style:normal;background:linear-gradient(100deg,#eed282,#b7854d 85%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--gold);
}
#appShell .lash-hero-photo p,#appShell .lash-hero p{font-size:15px!important;color:var(--text-soft)!important;max-width:420px!important;margin-bottom:30px!important;line-height:1.75}

/* ==========================================================================
   TÍTULOS DE SECCIÓN
   ========================================================================== */
.lash-featured-heading,.lash-learning-heading,.lash-section-head{margin-top:58px!important}
.lash-featured-heading h2,.lash-learning-heading h2,.lash-section-head h2,#appShell .section-head h2{
  font-family:'Cinzel',serif!important;font-weight:400!important;letter-spacing:.04em!important;
  font-size:clamp(22px,2.6vw,30px)!important;color:#fff;margin:12px 0 8px!important;
}
.lash-featured-heading h2 span,.lash-learning-heading h2 span,.lash-section-mark{color:var(--gold-deep)!important;font-size:.6em;vertical-align:middle;margin-left:8px;font-family:'DM Sans',sans-serif}
.lash-featured-heading p,.lash-learning-heading p{color:var(--muted)!important;font-size:14px!important;max-width:520px}
.lash-featured-heading,.lash-learning-heading{padding-bottom:18px;border-bottom:1px solid var(--hair);margin-bottom:22px!important}
.section-head{margin-top:44px!important}
.counter{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ==========================================================================
   CURSO DESTACADO + TARJETAS DE FORMACIÓN
   ========================================================================== */
#appShell .featured-course,
#appShell .lash-featured,
#appShell #pdfCatalog .premium-course-card{
  position:relative;border:1px solid var(--hair)!important;border-radius:var(--radius)!important;
  background:linear-gradient(155deg,var(--surface-2),var(--ink) 80%)!important;
  box-shadow:var(--shadow-soft)!important;overflow:hidden;
  transition:transform .5s var(--ease),border-color .4s,box-shadow .5s var(--ease)!important;
}
#appShell .featured-course::after,#appShell #pdfCatalog .premium-course-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(520px 260px at 100% 0%,rgba(183,133,77,.13),transparent 70%);
}
#appShell .featured-course:hover,#appShell #pdfCatalog .premium-course-card:hover{
  transform:translateY(-5px)!important;border-color:var(--hair-strong)!important;
  box-shadow:0 30px 60px -28px #000,0 0 0 1px rgba(238,210,130,.08)!important;
}
#appShell .lash-featured{padding:clamp(28px,4vw,48px)!important}
#appShell .featured-course h2,#appShell .lash-featured h2,#appShell #pdfCatalog .premium-course-card h2{
  font-family:'Cinzel',serif!important;font-weight:400!important;letter-spacing:.02em;line-height:1.2!important;color:#fff;
}
#appShell .featured-course h2 em,#appShell #pdfCatalog .premium-course-card h2 em{font-style:normal;color:var(--gold)!important}
#appShell .featured-course p{color:var(--text-soft)!important;font-size:14.5px;line-height:1.8}
.course-tag{
  border:1px solid var(--hair-strong)!important;color:var(--gold)!important;border-radius:999px!important;
  font-size:9.5px!important;letter-spacing:.3em!important;padding:7px 15px!important;font-weight:600;
}
.course-meta{color:var(--gold-deep)!important;font-size:10px!important;letter-spacing:.28em!important;font-weight:600}
.course-mark,#appShell .lash-featured .course-mark,#appShell #pdfCatalog .premium-course-card .course-mark{
  font-family:'Cinzel',serif!important;font-weight:400;color:rgba(238,210,130,.13)!important;
}
.premium-access{color:var(--gold)!important;font-size:10.5px!important;letter-spacing:.2em!important;font-weight:600}

/* portadas de curso */
.course-cover{
  border:1px solid var(--hair)!important;border-radius:14px!important;background:linear-gradient(135deg,#17130e,#241c12 55%,#0a0908)!important;
  box-shadow:inset 0 0 40px rgba(0,0,0,.45);
}
.course-cover img{transition:transform 1.2s var(--ease)}
.premium-course-card:hover .course-cover img,.course-card:hover .course-cover img{transform:scale(1.045)}
.course-cover small{letter-spacing:.3em!important;color:var(--gold-deep)!important}

/* mis clases */
#appShell .course-card{
  border:1px solid var(--hair)!important;border-radius:var(--radius)!important;
  background:linear-gradient(155deg,var(--surface-2),var(--ink) 80%)!important;
  box-shadow:var(--shadow-soft)!important;
  transition:transform .5s var(--ease),border-color .4s,box-shadow .5s var(--ease)!important;
}
#appShell .course-card::before{content:none!important}
#appShell .course-card:hover{transform:translateY(-5px)!important;border-color:var(--hair-strong)!important}
#appShell .course-card h3{font-family:'Cinzel',serif!important;font-weight:400!important;font-size:19px!important;letter-spacing:.02em;line-height:1.35}
.course-card-meta{font-size:12px!important;letter-spacing:.04em}
#appShell .course-card button,#appShell .pdf-card-bottom button{border-radius:999px!important;min-height:44px}

/* progreso */
.progress-track{height:3px!important;background:rgba(255,255,255,.08)!important}
.progress-fill{background:linear-gradient(90deg,var(--gold-deep),var(--gold-soft))!important;box-shadow:0 0 10px rgba(238,210,130,.4)}

/* ==========================================================================
   CATEGORÍAS + ACCESOS RÁPIDOS
   ========================================================================== */
.lash-category-row{gap:8px!important;padding:4px 2px 14px!important}
.lash-category-row button{
  border:1px solid var(--hair)!important;background:transparent!important;color:var(--text-soft)!important;
  border-radius:999px!important;padding:9px 20px!important;font-size:12.5px;letter-spacing:.06em;
}
.lash-category-row button:hover{border-color:var(--gold)!important;color:#fff!important;background:rgba(238,210,130,.06)!important}
.lash-category-row button:first-child{border-color:var(--hair-strong)!important;color:var(--gold)!important;background:rgba(238,210,130,.07)!important}

#appShell .lash-shortcuts{gap:14px!important}
#appShell .lash-shortcuts button{
  min-height:150px!important;border:1px solid var(--hair)!important;border-radius:var(--radius)!important;
  background:linear-gradient(160deg,var(--surface-2),var(--ink))!important;
  padding:26px!important;gap:8px!important;justify-content:flex-end;position:relative;overflow:hidden;
  transition:transform .5s var(--ease),border-color .4s,background .4s!important;
}
#appShell .lash-shortcuts button::after{
  content:"→";position:absolute;top:22px;right:24px;color:var(--gold-deep);font-size:16px;opacity:0;transform:translateX(-6px);transition:.4s var(--ease);
}
#appShell .lash-shortcuts button:hover{transform:translateY(-4px)!important;border-color:var(--hair-strong)!important}
#appShell .lash-shortcuts button:hover::after{opacity:1;transform:none}
.lash-shortcuts strong{font-family:'Cinzel',serif;font-weight:500;letter-spacing:.06em;font-size:16px}
.lash-shortcuts small{color:var(--muted)!important;font-size:12px}
.lash-shortcut-icon{
  display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--hair-strong);border-radius:50%;
  color:var(--gold)!important;margin-bottom:auto;background:rgba(238,210,130,.04);
}
.lash-shortcut-icon svg,.nav-ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}

/* ==========================================================================
   NAVEGACIÓN INFERIOR (píldora flotante en vidrio)
   ========================================================================== */
.lash-bottom-nav{
  background:rgba(14,13,11,.82)!important;backdrop-filter:blur(22px) saturate(150%)!important;
  border:1px solid var(--hair-strong)!important;border-radius:999px!important;
  box-shadow:0 24px 50px -16px #000!important;padding:6px!important;gap:2px!important;
}
.lash-bottom-nav .bottom-nav-item{
  border-radius:999px!important;color:var(--muted)!important;padding:9px 20px!important;font-size:10.5px!important;
  letter-spacing:.14em;text-transform:uppercase;font-weight:600;gap:4px!important;background:transparent!important;border:0!important;
}
.lash-bottom-nav .bottom-nav-item:hover{color:#fff!important;background:rgba(255,255,255,.04)!important}
.lash-bottom-nav .bottom-nav-item.selected{color:#17110a!important;background:linear-gradient(120deg,#c9a05f,#eed282)!important}
.lash-bottom-nav .nav-ico{display:grid;place-items:center;font-size:0!important}
.lash-bottom-nav .nav-ico svg{width:19px;height:19px}

/* ==========================================================================
   AULA VIRTUAL
   ========================================================================== */
.back-courses{color:var(--gold)!important;font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:8px 0!important}
.back-courses:hover{background:transparent!important;color:#fff!important}
.room-heading h2{font-size:clamp(24px,3vw,36px)!important;letter-spacing:.03em}
.room-main,.room-list-panel,.course-room .room-lesson-info{
  border:1px solid var(--hair)!important;border-radius:var(--radius)!important;background:var(--surface)!important;
}
.room-player{border-radius:var(--radius) var(--radius) 0 0;box-shadow:none!important;overflow:hidden}
.room-lesson-info h3{font-size:22px!important}
.room-lesson{
  background:transparent!important;border:1px solid transparent!important;border-radius:14px!important;padding:12px!important;
  transition:background .3s,border-color .3s;
}
.room-lesson:hover{background:rgba(238,210,130,.05)!important}
.room-lesson.selected{background:rgba(238,210,130,.08)!important;border-color:var(--hair-strong)!important}
.lesson-num{border:1px solid var(--hair-strong)!important;font-family:'Cinzel',serif;color:var(--gold)!important}
.room-actions .done{background:rgba(238,210,130,.08)!important;border-color:var(--gold)!important;color:var(--gold)!important}

/* ==========================================================================
   PERFIL
   ========================================================================== */
.lash-profile-card{background:var(--surface)!important;border:1px solid var(--hair)!important;border-radius:var(--radius)!important}
.lash-avatar{background:rgba(238,210,130,.08)!important;border:1px solid var(--hair-strong);color:var(--gold)!important;font-family:'Cinzel',serif}

/* ==========================================================================
   ADMIN, MATRÍCULAS, DIÁLOGOS, PDF
   ========================================================================== */
.photo-admin,.pdf-admin,.admin-item,.student-admin-card{
  border:1px solid var(--hair)!important;border-radius:var(--radius)!important;background:var(--surface)!important;
}
.enroll-line{border-top:1px solid var(--hair)!important}
.student-admin-head strong{color:var(--gold)!important;font-family:'Cinzel',serif;font-weight:500;letter-spacing:.04em}
.enrollment-admin{border-top:1px solid var(--hair)!important}
dialog{background:var(--surface)!important;border:1px solid var(--hair-strong)!important;border-radius:22px!important;box-shadow:0 50px 100px -30px #000}
dialog::backdrop{background:rgba(5,5,4,.78);backdrop-filter:blur(6px)}
.pdf-overlay{background:rgba(5,5,4,.94)!important;backdrop-filter:blur(8px)}
.pdf-modal{border:1px solid var(--hair-strong)!important;border-radius:22px!important;background:var(--surface)!important}
.pdf-top,.pdf-bottom{background:var(--surface-2)!important}
.pdf-top h2{font-family:'Cinzel',serif!important;font-weight:400!important}
.status{color:var(--gold)}

/* ==========================================================================
   PIE
   ========================================================================== */
footer{border-top:1px solid var(--hair)!important;color:var(--muted)!important;font-size:10px!important;letter-spacing:.34em!important;padding:34px 20px!important}

/* ==========================================================================
   MOVIMIENTO
   ========================================================================== */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
#appShell main>section{animation:fadeUp .9s var(--ease) both}
#appShell main>section:nth-child(2){animation-delay:.08s}
#appShell main>section:nth-child(3){animation-delay:.14s}
#appShell main>section:nth-child(4){animation-delay:.2s}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ==========================================================================
   MÓVIL
   ========================================================================== */
@media(max-width:760px){
  #appShell .shell main{padding:14px 16px 120px!important}
  #appShell .top{padding-inline:16px!important}
  .brand strong{font-size:10px!important;letter-spacing:.14em!important}
  .brand small{letter-spacing:.4em!important}
  #appShell .lash-hero.lash-hero-photo{border-radius:22px!important;min-height:0!important;padding:0!important}
  #appShell .lash-hero-photo .lash-hero-media{height:230px!important}
  #appShell .lash-hero-photo .lash-hero-media:after{background:linear-gradient(0deg,var(--surface) 0%,rgba(17,16,14,.4) 55%,transparent 100%)!important}
  #appShell .lash-hero-photo .lash-hero-copy{padding:6px 24px 30px!important}
  #appShell .lash-hero-photo h1{font-size:clamp(29px,8.4vw,38px)!important;margin:16px 0 12px!important}
  #appShell .lash-hero-photo p{max-width:none!important;font-size:13.5px!important;margin-bottom:22px!important}
  .lash-featured-heading,.lash-learning-heading,.lash-section-head{margin-top:40px!important}
  #appShell .lash-shortcuts{gap:8px!important}
  #appShell .lash-shortcuts button{min-height:118px!important;padding:14px 12px!important}
  .lash-shortcut-icon{width:36px;height:36px}
  .lash-shortcuts strong{font-size:12px!important;letter-spacing:.03em}
  .lash-shortcuts small{font-size:10.5px!important}
  #appShell .lash-shortcuts button::after{display:none}
  .lash-bottom-nav{
    left:12px!important;right:12px!important;bottom:max(12px,env(safe-area-inset-bottom))!important;
    width:auto!important;max-width:none!important;border-radius:999px!important;border:1px solid var(--hair-strong)!important;
    justify-content:space-between!important;padding:5px!important;
  }
  .lash-bottom-nav .bottom-nav-item{padding:9px 4px!important;font-size:9px!important;letter-spacing:.08em;flex:1}
  #appShell .featured-course,#appShell .lash-featured{padding:26px 22px!important}
}
@media(min-width:761px){
  /* en escritorio la barra queda integrada al final, no flotando sobre el contenido */
  #appShell .lash-bottom-nav{margin:34px auto 28px!important}
}

/* ajuste fino: sin línea decorativa en eyebrows dentro de tarjetas ni en móvil (evita cortes de línea) */
.premium-course-card .eyebrow::before{display:none}
@media(max-width:760px){.eyebrow::before{display:none}.eyebrow{letter-spacing:.28em}}


/* ==========================================================================
   PORTADAS POR DEFECTO (cuando todavía no se subió una foto del curso)
   La foto real subida desde Administrar reemplaza esto automáticamente.
   ========================================================================== */
.course-cover:has(.course-cover-placeholder){
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 320 180%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22 cx=%2270%25%22 cy=%2220%25%22 r=%2280%25%22%3E%3Cstop offset=%220%22 stop-color=%22%23b7854d%22 stop-opacity=%22.32%22/%3E%3Cstop offset=%221%22 stop-color=%22%230a0908%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width=%22320%22 height=%22180%22 fill=%22%23100e0b%22/%3E%3Crect width=%22320%22 height=%22180%22 fill=%22url(%23g)%22/%3E%3Cg fill=%22none%22 stroke=%22%23eed282%22 stroke-linecap=%22round%22 stroke-width=%221%22%3E%3Cg opacity=%22.75%22%3E%3Cpath d=%22M82.0 112.0 Q61.5 102.9 51.0 99.8%22/%3E%3Cpath d=%22M90.7 102.8 Q71.4 91.9 61.0 87.0%22/%3E%3Cpath d=%22M99.3 94.6 Q81.5 81.9 71.4 75.2%22/%3E%3Cpath d=%22M108.0 87.6 Q91.9 73.0 82.4 64.5%22/%3E%3Cpath d=%22M116.7 81.6 Q102.6 65.3 94.0 55.0%22/%3E%3Cpath d=%22M125.3 76.7 Q113.5 58.7 106.2 46.7%22/%3E%3Cpath d=%22M134.0 72.9 Q124.8 53.4 118.9 39.8%22/%3E%3Cpath d=%22M142.7 70.2 Q136.3 49.3 132.1 34.3%22/%3E%3Cpath d=%22M151.3 68.5 Q148.0 46.5 145.8 30.4%22/%3E%3Cpath d=%22M160.0 68.0 Q160.0 45.0 160.0 28.0%22/%3E%3Cpath d=%22M168.7 68.5 Q172.0 46.5 174.2 30.4%22/%3E%3Cpath d=%22M177.3 70.2 Q183.7 49.3 187.9 34.3%22/%3E%3Cpath d=%22M186.0 72.9 Q195.2 53.4 201.1 39.8%22/%3E%3Cpath d=%22M194.7 76.7 Q206.5 58.7 213.8 46.7%22/%3E%3Cpath d=%22M203.3 81.6 Q217.4 65.3 226.0 55.0%22/%3E%3Cpath d=%22M212.0 87.6 Q228.1 73.0 237.6 64.5%22/%3E%3Cpath d=%22M220.7 94.6 Q238.5 81.9 248.6 75.2%22/%3E%3Cpath d=%22M229.3 102.8 Q248.6 91.9 259.0 87.0%22/%3E%3Cpath d=%22M238.0 112.0 Q258.5 102.9 269.0 99.8%22/%3E%3C/g%3E%3Cpath opacity=%22.9%22 d=%22M82 104Q160 52 238 104Q160 146 82 104Z%22/%3E%3Ccircle opacity=%22.6%22 cx=%22160%22 cy=%22102%22 r=%2213%22/%3E%3Ccircle opacity=%22.9%22 cx=%22160%22 cy=%22102%22 r=%224.5%22 fill=%22%23eed282%22/%3E%3Cpath opacity=%22.25%22 d=%22M30 152H290%22/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat,#100e0b!important;position:relative;
  justify-content:flex-end;align-items:flex-start;padding:0 16px 12px;
}
.course-cover:has(.course-cover-placeholder)::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,9,8,.7),transparent 45%);pointer-events:none}
.course-cover:has(.course-cover-placeholder) .course-cover-placeholder{display:none}
.course-cover:has(.course-cover-placeholder) small{font-size:0!important;position:relative;z-index:1}
.course-cover:has(.course-cover-placeholder) small::after{content:"CASA DE LAS EXTENSIONES · CURSOS";font-size:8.5px;letter-spacing:.34em;color:#b7854d;font-weight:600}

/* ==========================================================================
   FOTOS DE MARIE COMO PORTADAS POR DEFECTO
   Se reemplazan solas al subir una foto desde Administrar.
   ========================================================================== */
#appShell #academyHeroPlaceholder{
  background:url("img/hero-marie.jpg") 78% 30%/cover no-repeat,#0a0908!important;color:transparent!important;
}
#appShell #academyHeroPlaceholder span,#appShell #academyHeroPlaceholder small{display:none!important}
@media(max-width:760px){#appShell #academyHeroPlaceholder{background-position:86% 30%!important}}

.course-cover.cde-photo{position:relative;padding:0}
.course-cover.cde-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92) contrast(1.03)}
.course-cover.cde-photo::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(0deg,rgba(10,9,8,.55),transparent 55%),linear-gradient(135deg,rgba(183,133,77,.10),transparent 60%)}

/* ==========================================================================
   FILTRO POR CATEGORÍA
   ========================================================================== */
.cde-hidden{display:none!important}
.lash-category-row button.active{border-color:var(--hair-strong)!important;color:#17110a!important;background:linear-gradient(120deg,#c9a05f,#eed282)!important;font-weight:600}
.lash-category-row button:not(.active):first-child{color:var(--text-soft)!important;background:transparent!important;border-color:var(--hair)!important}
.cde-cat-empty{margin:26px 0;padding:34px 24px;text-align:center;border:1px dashed var(--hair-strong);border-radius:var(--radius);color:var(--muted);font-size:14px;letter-spacing:.04em}

/* ==========================================================================
   CONTINUÁ DONDE QUEDASTE + ANILLO DE PROGRESO
   ========================================================================== */
.cde-continue{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin:0 0 22px;padding:22px 26px;border:1px solid var(--hair-strong);border-radius:var(--radius);
  background:linear-gradient(120deg,rgba(183,133,77,.16),rgba(17,16,14,.9) 60%);box-shadow:var(--shadow-soft);
}
.cde-continue[hidden]{display:none}
.cde-continue-text{display:grid;gap:5px;min-width:0}
.cde-continue .eyebrow::before{display:none}
.cde-c-lesson{font-family:'Cinzel',serif;font-weight:400;font-size:clamp(18px,2.4vw,24px);letter-spacing:.02em;color:#fff;line-height:1.3}
.cde-c-course{color:var(--muted);font-size:12.5px;letter-spacing:.04em}
.course-cover{position:relative}
.cde-ring{position:absolute;top:12px;right:12px;width:46px;height:46px;z-index:2;display:grid;place-items:center;border-radius:50%;background:rgba(10,9,8,.72);backdrop-filter:blur(6px)}
.cde-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.cde-ring circle{fill:none;stroke-width:2.6}
.cde-ring .bg{stroke:rgba(238,210,130,.2)}
.cde-ring .fg{stroke:#eed282;stroke-linecap:round;transition:stroke-dasharray .8s var(--ease)}
.cde-ring span{position:relative;font-size:10.5px;font-weight:600;color:var(--gold);letter-spacing:.02em}
@media(max-width:760px){.cde-continue{padding:18px;flex-direction:column;align-items:stretch}.cde-continue .lash-gold-btn{width:100%}}