

.noche .nm-servicio { transition:color .5s var(--dc-ease), transform .5s var(--dc-ease), text-shadow .5s ease; }
.noche .nm-servicios:hover .nm-servicio { filter:none; color:transparent; text-shadow:0 0 1.8px rgba(242,242,244,.4); }
.noche .nm-servicios .nm-servicio:hover, .noche .nm-servicios .nm-servicio:active, .noche .nm-servicios .nm-servicio:focus-visible {
  filter:none; color:#F2F2F4; text-shadow:0 0 18px rgba(255,255,255,.55), 0 0 54px rgba(242,242,244,.28); }
.noche.casa .nm-servicios:hover .nm-servicio { color:transparent; text-shadow:0 0 1.8px rgba(255,255,255,.5); }

.noche .un-ajov .un-ajb:not(.un-ajb-s) { padding:var(--casa-sp-22) 36px; margin:-8px -36px -18px; }
.noche .un-ajov .un-ajb-quieto:not(.un-ajb-s) { margin-top:var(--casa-sp-8); }
.noche.alto .un-ajov .un-ajb:not(.un-ajb-s) { margin-top:-10px; }
.noche .un-ajov .un-ajb-s { padding:var(--casa-sp-18) var(--casa-sp-26); margin:-14px -12px -14px; }
.noche .un-ajf { padding:var(--casa-sp-14) 44px 0; margin:var(--casa-sp-2) -44px 0; }
.noche .un-ajov-plan { padding:var(--casa-sp-16) var(--casa-sp-30); margin:-16px -30px -6px; }

@media (any-hover: hover) {
  .opcion { padding:var(--dc-sp-20) 40px calc(var(--dc-sp-20) + 34px); margin:0 -40px -34px; }
  .crear-opciones .opcion { padding:var(--dc-sp-10) var(--dc-sp-24); margin:0 calc(var(--dc-sp-24) * -1); }
}

@media (any-hover: hover) {
  .opcion:hover, .crear-opciones .opcion:hover, #alumno-panel-clases .opcion:hover { font-size:var(--dc-fs-52); transform:scale(1.3); }
  .opcion:hover:active { transform:scale(1.28); }
  .menu-grande .menu-grande-op:hover { font-size:var(--dc-fs-50); transform:scale(1.3); transform-origin:center; }
  .menu-grande .menu-grande-op:hover:active { transform:scale(1.28); }
  #aula-panel-progreso .progreso-menu .ajustes-menu-row:hover, #aula-panel-ajustes .ajustes-menu .ajustes-menu-row:hover {
    font-size:var(--dc-fs-50); transform:scale(1.3); transform-origin:left center; }
  #aula-panel-progreso .progreso-menu .ajustes-menu-row:hover:active, #aula-panel-ajustes .ajustes-menu .ajustes-menu-row:hover:active { transform:scale(1.28); }
}
@media (any-hover: hover) and (max-width:700px) { .opcion:hover, #alumno-panel-clases .opcion:hover { font-size:var(--dc-fs-40); } }

@media (max-width: 700px) {
  #screen-lesson .lesson-header-inner { display:flex; align-items:center; justify-content:space-between; gap:var(--casa-sp-10);
    padding:max(16px, env(safe-area-inset-top)) 14px 8px; }
  #screen-lesson .marca-alumno { font-size:var(--casa-letra-34); }
  #screen-lesson .marca-alumno .marca-club { font-size:14px; }
  #screen-lesson .leccion-der { gap:var(--casa-sp-2); align-self:center; }
  #screen-lesson .lesson-header .back-btn { font-size:var(--casa-letra-22) !important; padding:var(--casa-sp-6) var(--casa-sp-8) !important; }
  #screen-lesson .session-layout { padding:0 var(--casa-sp-14); gap:var(--casa-sp-6); }
  #screen-lesson .session-layout > .leccion-centro { flex:1 1 auto; width:100%; max-width:100%; }
  #screen-lesson .leccion-centro > #exercises-container { width:100%; }
  #screen-lesson #exercises-container .ex-wysiwyg { max-width:100%; box-sizing:border-box; }
  
  #screen-lesson .wa-hueco { max-width:100%; }
  #screen-lesson .wa-input { max-width:calc(100vw - 96px); }
  #screen-lesson .clase-titulo { font-size:28px; }
  
  #screen-lesson .session-layout > .pills-col { flex:none; width:100%; height:auto; position:relative; top:auto;
    flex-direction:row; flex-wrap:nowrap; overflow-x:auto; gap:var(--casa-sp-16); padding:var(--casa-sp-2) 0 var(--casa-sp-6); }
  #screen-lesson .pills-col .class-pill, #screen-lesson .pills-col .class-pill.big { font-size:var(--casa-letra-22); width:auto; flex:none; max-width:85vw; white-space:normal; }
  #screen-lesson .pills-col .notebook-empty { font-size:15px; opacity:.6; }
  
  #screen-lesson .session-layout > .notebook-col { position:fixed; top:0; right:0; bottom:0; left:auto; height:100%; max-height:none;
    width:min(370px, 92vw); z-index:var(--casa-capa-clase-cajon); padding:calc(70px + env(safe-area-inset-top, 0px)) 18px 18px; box-sizing:border-box;
    background:linear-gradient(165deg, rgba(190,199,211,.96), rgba(132,147,172,.97)); -webkit-backdrop-filter:blur(26px) saturate(130%); backdrop-filter:blur(26px) saturate(130%);
    box-shadow:-18px 0 50px rgba(20,30,45,.28); -webkit-mask-image:none; mask-image:none; transform:translateX(105%); filter:none; }
  #screen-lesson .session-layout > .notebook-col.open { transform:translateX(0); }
}

@media (max-width: 700px) {
  html.clases-oscuro #screen-lesson .session-layout > .notebook-col {
    background:linear-gradient(165deg, rgba(44,45,46,.97), rgba(22,23,26,.97) 48%, rgba(10,10,12,.98)); box-shadow:-18px 0 60px rgba(0,0,0,.7); }
}

@media (max-width: 700px) {
  html body #screen-lesson { --ej-fs:21px; --ej-fs-palabra:18px; }
  #screen-lesson #exercises-container .sv-instruction { font-size:var(--casa-letra-18); }
  #screen-lesson #exercises-container .img-gallery-caption { font-size:16px; }
  #screen-lesson #exercises-container .ex-accion { font-size:17px; }
  #screen-lesson #exercises-container .w-chip { font-size:var(--casa-letra-18); }
  #screen-lesson .pills-col .notebook-empty { font-size:16px; }
}

html:not(.vitrina) body #screen-lesson .lesson-header-inner { max-width:none; margin:0; padding:var(--lg-y) var(--lg-x) var(--dc-sp-34); }
html:not(.vitrina) body #screen-lesson .marca-alumno { position:relative; font-size:var(--lg-fs); letter-spacing:var(--lg-ls); line-height:1; margin:0; white-space:nowrap; }
html:not(.vitrina) body #screen-lesson .marca-alumno .marca-club { display:inline-block; font-size:.38em; margin-left:.16em; letter-spacing:normal; }
html:not(.vitrina) body #screen-lesson .marca-alumno::after { content:'назад'; position:absolute; left:0; top:100%; margin-top:var(--casa-sp-10);
  font-size:calc(var(--lg-fs) * 20 / 78); letter-spacing:.5px; line-height:1; white-space:nowrap; opacity:.72;
  transition:opacity var(--dc-t-lento) var(--dc-ease); }
html[lang="es"]:not(.vitrina) body #screen-lesson .marca-alumno::after { content:'atrás'; }
@media (any-hover: hover) { html:not(.vitrina) body #screen-lesson .marca-alumno:hover::after { opacity:1; } }
html:not(.vitrina) body #screen-lesson .leccion-der { justify-self:end; }
#screen-lesson .lesson-toolbar:empty { display:none; }   
#screen-lesson .pills-col .notebook-empty { visibility:hidden; }
@media (min-width: 701px) {
  html:not(.vitrina) body #screen-lesson .lesson-header .back-btn { font-size:calc(var(--lg-fs) * 22 / 78) !important; padding:var(--dc-sp-10) 0 var(--dc-sp-10) var(--dc-sp-24) !important; }
}
@media (max-width: 700px) {
  html:not(.vitrina) body #screen-lesson .lesson-header-inner { align-items:baseline; padding:var(--lg-y) var(--lg-x) 30px; }
  html:not(.vitrina) body #screen-lesson .marca-alumno::after { font-size:calc(var(--lg-fs) * 20 / 46); }
  html:not(.vitrina) body #screen-lesson .lesson-header .back-btn { padding:var(--casa-sp-6) 0 var(--casa-sp-6) var(--casa-sp-8) !important; }
  
  html:not(.vitrina) body #screen-lesson .session-layout > .notebook-col { padding-top:calc(var(--lg-y) + var(--lg-fs) + 44px); }
}

@property --fila-i { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --fila-d { syntax:'<length>'; inherits:false; initial-value:0px; }
@media (max-width:699px), (orientation:portrait) and (max-width:1100px) {
  #screen-home .alumno-tabs:not(.prof-tabs) {
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--fila-i), #000 calc(100% - var(--fila-d)), transparent 100%);
    mask-image:linear-gradient(to right, transparent 0, #000 var(--fila-i), #000 calc(100% - var(--fila-d)), transparent 100%);
    transition:--fila-i var(--dc-t-viaje) var(--dc-ease), --fila-d var(--dc-t-viaje) var(--dc-ease); }
  #screen-home .alumno-tabs:not(.prof-tabs).fila-izq { --fila-i:56px; }
  #screen-home .alumno-tabs:not(.prof-tabs).fila-der { --fila-d:56px; }
  #screen-home .alumno-tabs:not(.prof-tabs).fila-quieta { transition:none; }
}
