/* home-empresa.css — portada de la instancia empresarial (empresa.lumbre.lat).
   Viven aquí sólo lo que app.css no tiene: el slider del héroe y la banda de tienda.
   Explora (level-card/level-grid), Lecturas (book-grid) y «continúa» reusan las clases
   de siempre: la portada empresa habla la misma lengua visual que el resto de Lumbre. */

/* ── cabecera del héroe ── */
.he-hero { padding-bottom: 8px; }
.he-hero-head { padding-top: 40px; }
.he-kicker { margin: 0 0 10px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; opacity: .72; }
.he-hero-head h1 { margin: 0 0 12px; font-size: clamp(1.7rem, 4.2vw, 2.7rem); line-height: 1.12; }
.he-lead { max-width: 62ch; margin: 0 0 26px; opacity: .85; }

/* ── slider: diapositiva a sangre, copy sobre scrim inferior ──
   Sondeo 2026-10-07 en servidor: las portadas de los cursos raíz empresa son FOTOS CUADRADAS
   512×512. La ventana del héroe es panorámica (≈900×540), así que object-fit: cover recorta el
   cuadro anclado al CENTRO (50% 50%) — corte simétrico, la cara/objeto de la foto nunca se trunca;
   el título real lo pone el copy sobre el scrim, no la propia imagen. */
.he-slider { position: relative; margin: 0 auto 8px; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 44px -22px rgba(20, 16, 8, .45); }
.he-track { position: relative; }
.he-slide { margin: 0; display: none; }
.he-slide.is-active { display: block; animation: he-fade .55s ease; }
@keyframes he-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .he-slide.is-active { animation: none; } }
.he-slide-link { display: block; position: relative; color: #fff; text-decoration: none; }
.he-slide-media img { display: block; width: 100%; height: clamp(340px, 54vh, 540px); object-fit: cover; object-position: 50% 50%; }
/* Curso puesto en el escaparate a mano y todavía sin portada en disco: el hueco se rellena con el
   fondo del portal, a la misma altura que una diapositiva con imagen, para que el héroe se vea armado
   desde el primer día y la curación nunca parezca ignorada. */
.he-slide-media:empty { display: block; width: 100%; height: clamp(340px, 54vh, 540px); background: linear-gradient(135deg, #17222f 0%, #2c4034 55%, #4a3b2a 100%); }
.he-slide-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 10, 6, 0) 28%, rgba(12, 10, 6, .38) 58%, rgba(12, 10, 6, .86) 100%); }
.he-slide-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px clamp(16px, 4vw, 34px) clamp(18px, 3.4vw, 28px); }
.he-slide-badge { display: inline-block; margin-bottom: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 248, 232, .16); border: 1px solid rgba(255, 248, 232, .38); font-size: .78rem; letter-spacing: .02em; }
.he-slide-title { margin: 0 0 6px; font-size: clamp(1.25rem, 3.2vw, 2rem); line-height: 1.18; text-shadow: 0 2px 14px rgba(0, 0, 0, .4); }
.he-slide-desc { margin: 0 0 10px; max-width: 58ch; font-size: .95rem; opacity: .92; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.he-slide-cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .92rem; }

/* flechas y puntos */
.he-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 248, 232, .5); background: rgba(12, 10, 6, .38); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(3px); transition: background .2s ease; }
.he-nav:hover, .he-nav:focus-visible { background: rgba(12, 10, 6, .68); }
.he-nav--prev { left: 12px; }
.he-nav--prev svg { transform: rotate(180deg); }
.he-nav--next { right: 12px; }
.he-dots { position: absolute; right: 0; bottom: 12px; left: 0; display: flex; justify-content: center; gap: 8px; }
.he-dot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 248, 232, .45); cursor: pointer; }
.he-dot.is-active { background: #fff8e8; transform: scale(1.25); }
@media (max-width: 640px) {
    .he-nav { display: none; } /* en móvil: gestos/puntos y el slide sigue siendo enlace */
    .he-slide-media img { height: clamp(300px, 46vh, 420px); }
}

/* glifo de área sin portada (respaldo del level-cover empresa) */
.he-area-glyph { display: grid; place-items: center; width: 100%; height: 100%; }

/* ── banda de tienda ──
   TOKENS SEMÁNTICOS, nunca literales (regla de app.css): el fondo rgba(255,252,244,.65) que llevaba
   la ficha quedaba CLARO sobre texto CLARO en el tema oscuro — ilegible. --surface/--ink/--line
   invierten juntos por data-theme y el contraste queda garantizado en ambos temas. */
.he-shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.he-product { display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--line, rgba(60, 45, 20, .14)); background: var(--surface, rgba(255, 252, 244, .65)); color: var(--ink, inherit); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.he-product:hover, .he-product:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(20, 16, 8, .4); }
.he-product-img { display: block; aspect-ratio: 4 / 3; background: var(--line, rgba(60, 45, 20, .06)); }
.he-product-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.he-product-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.he-product-body strong { font-size: .95rem; line-height: 1.3; color: var(--ink, inherit); }
.he-product-price { color: var(--muted, inherit); font-variant-numeric: tabular-nums; }

/* ── banda de novedades — últimas publicaciones (cursos, OA, lecturas) ──
   Rejilla responsiva de tarjetas compactas. Cada tarjeta es un enlace completo con badge de tipo,
   título, descripción breve y fecha relativa. Tokens semánticos (--surface/--ink/--line/--muted)
   para contraste garantizado en ambos temas (claro/oscuro). */
.he-nov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.he-nov-card { display: flex; flex-direction: row; gap: 12px; align-items: stretch; padding: 12px; border-radius: 14px; border: 1px solid var(--line, rgba(60, 45, 20, .14)); background: var(--surface, rgba(255, 252, 244, .65)); color: var(--ink, inherit); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.he-nov-thumb { flex: none; width: 62px; align-self: stretch; border-radius: 10px; overflow: hidden; background: rgba(120, 100, 60, .12); }
.he-nov-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.he-nov-body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.he-nov-card:hover, .he-nov-card:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(20, 16, 8, .4); }
.he-nov-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: .7rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; width: fit-content; }
.he-nov-badge--course { background: rgba(59, 130, 246, .12); color: #2563eb; }
.he-nov-badge--area { background: rgba(245, 158, 11, .14); color: #b45309; }
.he-nov-badge--object { background: rgba(168, 85, 247, .12); color: #7c3aed; }
.he-nov-badge--book  { background: rgba(34, 197, 94, .12); color: #16a34a; }
@media (prefers-color-scheme: dark) {
    .he-nov-badge--course { background: rgba(59, 130, 246, .22); color: #93bbfd; }
    .he-nov-badge--area { background: rgba(245, 158, 11, .22); color: #fcd34d; }
    .he-nov-badge--object { background: rgba(168, 85, 247, .22); color: #c4a5f5; }
    .he-nov-badge--book  { background: rgba(34, 197, 94, .22); color: #86efac; }
}
.he-nov-title { font-size: .98rem; line-height: 1.3; }
.he-nov-desc { margin: 0; font-size: .82rem; line-height: 1.45; opacity: .78; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.he-nov-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; font-size: .75rem; opacity: .6; }
.he-nov-foot time { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
    .he-nov-grid { grid-template-columns: 1fr; }
}

/* ── RIQUEZA DEL CATÁLOGO (2026-10-22, ajuste HOME_RIQUEZA_ENABLED) ──
   Las portadas de la campaña Pixabay salen panorámicas 16:9 (1280×720), así que la ficha las
   enmarca en su proporción NATURAL: aspect-ratio + object-fit: cover no recorta nada y no deja
   bandas. Mismos tokens semánticos (--surface/--ink/--line/--muted) que la banda de tienda: el
   contraste queda garantizado en tema claro y oscuro sin escribir un solo color literal. */
.he-stats { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0 auto 20px; font-size: .9rem; opacity: .82; }
.he-stats span { display: inline-flex; align-items: baseline; gap: 6px; }
.he-stats b { font-size: 1.4rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }

/* carátulas de curso: la retícula grande, porque el curso es la unidad que da sentido al catálogo */
.he-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 18px; margin: 0 auto 6px; }
.he-course { display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--line, rgba(60, 45, 20, .14)); background: var(--surface, rgba(255, 252, 244, .65)); color: var(--ink, inherit); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.he-course:hover, .he-course:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 34px -20px rgba(20, 16, 8, .48); }
.he-course-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--line, rgba(60, 45, 20, .08)); }
.he-course-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.he-course-glyph { display: grid; place-items: center; width: 100%; height: 100%; }
.he-course-body { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px 14px; }
.he-course-body strong { font-size: 1.02rem; line-height: 1.28; }
.he-course-meta { font-size: .8rem; color: var(--muted, inherit); opacity: .8; }

/* lecciones sueltas: retícula más apretada — son muchas y se leen en minutos, así caben 20 */
.he-les-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(182px, 1fr)); gap: 14px; }
.he-les { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--line, rgba(60, 45, 20, .14)); background: var(--surface, rgba(255, 252, 244, .65)); color: var(--ink, inherit); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.he-les:hover, .he-les:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(20, 16, 8, .42); }
.he-les-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--line, rgba(60, 45, 20, .08)); }
.he-les-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.he-les-body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; }
.he-les-body strong { font-size: .88rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.he-les-meta { margin-top: auto; font-size: .72rem; color: var(--muted, inherit); opacity: .78; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 700px) {
    .he-courses { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .he-les-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .he-course-body strong { font-size: .92rem; }
    .he-les-body strong { -webkit-line-clamp: 2; }
}