/* Uvamejai · cursos virtuales */

.cabeza-pagina .luciernagas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.cursos{background:linear-gradient(180deg,var(--noche),var(--ciruela) 25%,var(--noche))}

.curso-destacado{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,70px);align-items:center;
  padding:clamp(22px,3vw,40px);border-radius:32px;background:var(--ciruela-2);border:1px solid rgba(227,178,76,.35);
  box-shadow:0 0 0 8px var(--noche),0 0 0 9px rgba(227,178,76,.16),0 50px 100px -50px rgba(0,0,0,.9)
}
.curso-destacado .curso-foto img{width:100%;aspect-ratio:3/3.6;object-fit:cover;border-radius:var(--arco)}
.curso-destacado h2{font-size:clamp(2.6rem,5.5vw,4.4rem);line-height:1;margin:6px 0 16px;font-style:italic;color:var(--oro)}
.curso-formato{font-family:var(--mano);color:var(--plata);font-size:17px;margin:14px 0 0}
.curso-resumen{color:var(--crema-suave);font-size:1.08rem}
.curso-datos{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-wrap:wrap;gap:8px}
.curso-datos li{font-size:13px;padding:6px 12px;border-radius:999px;border:1px solid var(--linea);color:var(--crema)}
.curso-precio{font-family:var(--display);font-size:2rem;margin-bottom:22px}
.curso-precio small{font-family:var(--texto);font-size:13px;color:var(--crema-suave)}
@media (max-width:820px){.curso-destacado{grid-template-columns:1fr}.curso-destacado .curso-foto{max-width:340px}}

.cursos-sub{font-size:clamp(2rem,4vw,2.8rem);margin:clamp(70px,10vh,110px) 0 30px}
.cursos-proximos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:26px}
.curso{display:flex;flex-direction:column;padding:18px 18px 22px;border-radius:26px;background:var(--ciruela);border:1px solid var(--linea)}
.js .curso.revelar{transition-delay:calc(var(--i) * 90ms)}
.curso .curso-foto{position:relative}
.curso .curso-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;filter:saturate(.8)}
.curso .curso-foto .ficha{position:absolute;left:12px;top:12px;background:rgba(20,11,27,.8);backdrop-filter:blur(6px)}
.curso h3{font-size:1.7rem;margin:2px 0 10px}
.curso .curso-resumen{font-size:.98rem;flex:1}
.curso .curso-precio{font-size:1.4rem;margin-bottom:16px}

.como-rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin:36px 0 30px}
.como-paso{border-top:1px solid rgba(227,178,76,.45);padding-top:18px}
.js .como-paso.revelar{transition-delay:calc(var(--i) * 90ms)}
.como-paso .a-mano{font-size:17px}
.como-paso b{display:block;font-family:var(--display);font-variation-settings:"SOFT" 100;font-weight:500;font-size:1.35rem;margin:2px 0 8px}
.como-paso p{color:var(--crema-suave)}
.como-nota{font-size:14px;color:var(--crema-suave);border-left:2px solid var(--plata);padding-left:14px;max-width:44rem}
@media (max-width:820px){.como-rejilla{grid-template-columns:1fr}}

.avisame{padding:34px 30px 28px}
.avisame h2{font-size:2rem;margin-bottom:8px}
.avisame > p{color:var(--tinta-suave)}
.avisame-listo{text-align:center;padding:10px 0}
.avisame-listo .a-mano{font-size:20px;color:var(--oro-hondo)}
.avisame-listo .boton{margin-top:10px}