/* Tema WEB: regreso a clases, EComercioTipoTemporada = 04. */
.tema-clases-activo {
    --rosa: #f1a531;
    --rosa-fuerte: #dd8423;
    --rosa-claro: #fff5db;
    --celeste: #43acc7;
    --celeste-oscuro: #176d91;
    --celeste-cantidad: #208bad;
    --tinta: #193d58;
    --texto-suave: #526b78;
    --borde: #c9e3e8;
    --sombra: 0 15px 40px rgba(26, 87, 111, .15);
    position: relative;
    min-height: 100vh;
    isolation: isolate;
    overflow: hidden;
    background: radial-gradient(circle at 12% 18%, rgba(255, 226, 140, .55), transparent 19rem),
                radial-gradient(circle at 88% 48%, rgba(117, 209, 223, .28), transparent 23rem),
                linear-gradient(180deg, #e4f7fb 0, #f5fbf5 42rem, #fffaf0 100%);
}
.tema-clases-activo > :not(.tema-clases) { position: relative; z-index: 2; }
.tema-clases { position: fixed; inset: 0; z-index: 35; overflow: hidden; pointer-events: none; }
.tema-clases__estudiantes { position: fixed; left: clamp(8px, 1.8vw, 30px); bottom: 12px; width: clamp(140px, 17vw, 265px); height: auto; filter: drop-shadow(0 10px 9px rgba(20, 71, 90, .21)); transform-origin: bottom center; animation: clases-saludo 5s ease-in-out infinite; }
.tema-clases__utiles { position: fixed; right: clamp(10px, 2.2vw, 38px); bottom: 18px; display: flex; align-items: center; gap: .15em; padding: .22em .4em; border: 2px solid #efbc67; border-radius: 999px; background: rgba(255, 251, 230, .9); font-size: clamp(24px, 3.3vw, 43px); box-shadow: 0 8px 20px rgba(32, 105, 125, .16); animation: clases-saludo 4.5s ease-in-out -2s infinite; }
.tema-clases__trazo { position: fixed; font-size: clamp(22px, 2.6vw, 38px); opacity: .72; filter: drop-shadow(0 4px 5px rgba(27, 88, 109, .14)); animation: clases-flotar 7s ease-in-out infinite; }
.tema-clases__trazo--uno { top: 17%; left: 3%; transform: rotate(-18deg); }
.tema-clases__trazo--dos { top: 28%; right: 3%; animation-delay: -2.4s; }
.tema-clases__trazo--tres { top: 63%; left: 2%; animation-delay: -4.1s; }
.tema-clases__trazo--cuatro { top: 70%; right: 4%; animation-delay: -1.1s; }
.tema-clases-activo .encabezado { border-bottom: 3px solid #efbf68; background: linear-gradient(110deg, #176b89, #2697b0 56%, #3eacb9); color: #fff; box-shadow: 0 7px 20px rgba(18, 80, 103, .22); }
.tema-clases-activo .encabezado__grupos-boton,
.tema-clases-activo .encabezado__carrito { border-color: #f3d493; background: #fffdf3; color: #176b89; }
.tema-clases-activo .encabezado__busqueda { border-color: #e9b655; box-shadow: 0 0 0 3px rgba(255, 226, 145, .2); }
.tema-clases-activo .encabezado__busqueda button { background: linear-gradient(135deg, #ffd476, #efad3d); color: #284b57; }
.tema-clases-activo .encabezado__carrito-icono { color: #197f9c; }
.tema-clases-activo .encabezado__carrito-icono b { background: #e89636; }
.tema-clases-activo main { background: transparent; }
.tema-clases-activo .presentacion__marca,
.tema-clases-activo .producto-tarjeta,
.tema-clases-activo .producto-seccion,
.tema-clases-activo .pagina-interna,
.tema-clases-activo .pedido-contenido,
.tema-clases-activo .identificacion-tarjeta { border-color: #b8dce6; background: rgba(255, 255, 255, .96); box-shadow: 0 14px 32px rgba(31, 99, 117, .12); }
.tema-clases-activo .producto-tarjeta::before { background: linear-gradient(90deg, #f8c967, #4aafc6, #f8c967); }
.tema-clases-activo .producto-tarjeta::after { content: "📚"; position: absolute; z-index: 6; top: 10px; right: 10px; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #c7e2e7; border-radius: 50%; background: #fff9e9; font-size: 17px; box-shadow: 0 4px 9px rgba(24, 91, 111, .15); pointer-events: none; }
.tema-clases-activo .producto-tarjeta:nth-child(3n+2)::after { content: "✏️"; }
.tema-clases-activo .producto-tarjeta:nth-child(3n)::after { content: "🎒"; }
.tema-clases-activo .producto-tarjeta__agregar,
.tema-clases-activo .boton-primario { border-color: #187d9b; background: linear-gradient(135deg, #35aac1, #187d9b); color: #fff; box-shadow: 0 8px 19px rgba(28, 120, 147, .22); }
.tema-clases-activo .producto-tarjeta__precio,
.tema-clases-activo .producto-seccion__titulo,
.tema-clases-activo h1,
.tema-clases-activo h2 { color: #176b89; }
.tema-clases-activo .carrito-panel,
.tema-clases-activo .departamentos-panel { border-color: #b9dce2; background: #fffdf5; }
.tema-clases-activo .pie-pagina { border-top-color: #f0bb5b; background: linear-gradient(110deg, #176b89, #2c9cb2); color: #fff; }
@keyframes clases-flotar { 50% { translate: 0 -12px; rotate: 8deg; } }
@keyframes clases-saludo { 50% { transform: rotate(2deg) translateY(-5px); } }
@media (max-width: 700px) {
    .tema-clases__estudiantes { left: 4px; bottom: 65px; width: clamp(85px, 25vw, 125px); }
    .tema-clases__utiles { right: 5px; bottom: 69px; font-size: 21px; }
    .tema-clases__trazo--dos, .tema-clases__trazo--tres { display: none; }
    .tema-clases__trazo { font-size: 19px; }
    .tema-clases-activo .producto-tarjeta::after { top: 7px; right: 7px; width: 25px; height: 25px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .tema-clases__estudiantes, .tema-clases__utiles, .tema-clases__trazo { animation: none; }
}