/* ============================================================ GENIOS CREATIVOS · Estilos de Lección (clase*.html) Depende de css/genios.css (tokens + topbar + botones). El color del módulo se pasa con style="--wc: var(--mN)" en . ============================================================ */ body.lesson { --wc: var(--m1); } /* contenedor de lectura */ .lread { max-width: 900px; margin: 0 auto; padding: 0 22px; } .block { padding: 52px 0; } .block.tint { background: color-mix(in srgb, var(--wc) 7%, transparent); } /* ── Topbar de lección ── */ .lback { display:inline-flex; align-items:center; gap:7px; font-weight:800; font-size:14px; color:var(--ink-2); padding:9px 14px; border-radius:999px; border:2px solid var(--line); transition:.18s; } .lback:hover { color:var(--ink); border-color:var(--wc); transform:translateX(-2px); } .nav-title { font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--ink); } .nav-title span { color:var(--wc); } .prog-chip { display:inline-flex; align-items:center; gap:10px; background:#fff; border:2px solid var(--line); border-radius:999px; padding:7px 8px 7px 16px; font-weight:800; font-size:13px; color:var(--ink-2); } .prog-chip .bar { width:80px; height:8px; background:#EAEDFA; border-radius:999px; overflow:hidden; } .prog-chip .bar i { display:block; height:100%; background:var(--wc); border-radius:999px; } .prog-chip #dv-progress-badge { font-size:12px; } /* ============================================================ HERO de lección ============================================================ */ .lhero { position:relative; text-align:center; padding:46px 22px 38px; overflow:hidden; } .lhero .badge-pill { display:inline-flex; align-items:center; gap:8px; font-weight:900; font-size:13px; color:#fff; background:var(--wc); padding:8px 18px; border-radius:999px; box-shadow:0 5px 0 color-mix(in srgb,var(--wc) 65%, #000); } .lhero .kicker { display: inline-block; font-weight: 900; font-size: 19px; letter-spacing: .02em; text-transform: none; color: #fff; background: var(--wc); padding: 10px 28px; border-radius: 999px; margin: 14px 0 12px; box-shadow: 0 5px 0 rgba(0,0,0,.18); } .lhero h1 { font-size:clamp(38px,7vw,68px); font-weight:700; color:var(--ink); margin-bottom:14px; } .lhero h1 span { color:var(--wc); position:relative; white-space:nowrap; } .lhero h1 span::after { content:''; position:absolute; left:0; right:0; bottom:4px; height:12px; z-index:-1; background:color-mix(in srgb,var(--wc) 28%, #fff); border-radius:999px; transform:rotate(-1deg); } .lhero .lead { font-size:19px; font-weight:600; color:var(--ink-2); max-width:560px; margin:0 auto 22px; } .lhero .chips { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; } .mascot-stage { width:170px; height:170px; margin:32px auto 18px; position:relative; } .mascot-stage img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 14px 22px rgba(0,0,0,.22)); animation:float 4s ease-in-out infinite; } /* burbuja de diálogo */ .bubble { position:relative; max-width:520px; margin:0 auto 26px; background:#fff; border:2px solid var(--line); border-radius:20px; padding:16px 22px; font-weight:600; font-size:16px; color:var(--ink); box-shadow:var(--shadow-sm); } .bubble strong { color:var(--wc); } .bubble::before { content:''; position:absolute; top:-10px; left:50%; transform:translateX(-50%) rotate(45deg); width:18px; height:18px; background:#fff; border-left:2px solid var(--line); border-top:2px solid var(--line); } /* ============================================================ Encabezado de sección (con avatar de Robotsin) ============================================================ */ .shead { display:flex; align-items:center; gap:16px; margin-bottom:26px; } .shead .ava { width:64px; height:64px; flex-shrink:0; border-radius:18px; overflow:hidden; background:color-mix(in srgb,var(--wc) 14%, #fff); border:2px solid color-mix(in srgb,var(--wc) 30%,#fff); display:grid; place-items:center; } .shead .ava img { width:100%; height:100%; object-fit:contain; } .shead .lab { font-weight:900; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--wc); } .shead h2 { font-size:clamp(26px,4vw,40px); font-weight:700; color:var(--ink); line-height:1.05; margin-top:3px; } .shead h2 em { font-style:normal; color:var(--wc); } /* ── Caja de Misión ── */ .mission { display:flex; gap:20px; align-items:flex-start; background:#fff; border:2px solid var(--line); border-left:8px solid var(--wc); border-radius:var(--r); padding:26px 28px; box-shadow:var(--shadow-sm); margin-bottom:30px; } .mission .em { font-size:46px; flex-shrink:0; } .mission h3 { font-family:var(--font-display); font-weight:600; font-size:21px; color:var(--ink); margin-bottom:7px; } .mission p { font-weight:600; font-size:16px; color:var(--ink-2); } .mission strong { color:var(--wc); } /* ── Objetivos ── */ .objs { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; } .obj { background:#fff; border:2px solid var(--line); border-radius:var(--r); padding:22px; box-shadow:var(--shadow-sm); transition:transform .16s; } .obj:hover { transform:translateY(-4px); } .obj .em { font-size:30px; margin-bottom:8px; } .obj h4 { font-family:var(--font-display); font-weight:600; font-size:17px; margin-bottom:4px; } .obj p { font-weight:600; font-size:14px; color:var(--ink-2); } /* ── Mensaje de Robotsin (inline) ── */ .rmsg { display:flex; gap:16px; align-items:flex-start; background:#fff; border:2px solid var(--line); border-radius:var(--r); padding:20px 22px; margin:22px 0; box-shadow:var(--shadow-sm); } .rmsg .ava { width:60px; height:60px; flex-shrink:0; border-radius:50%; overflow:hidden; background:color-mix(in srgb,var(--wc) 12%, #fff); display:grid; place-items:center; } .rmsg .ava img { width:100%; height:100%; object-fit:contain; } .rmsg .who { font-weight:900; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--wc); margin-bottom:5px; } .rmsg .say { font-weight:600; font-size:16px; color:var(--ink); line-height:1.6; } .rmsg .say strong { color:var(--wc); } .rmsg .say em { font-style:normal; font-weight:800; color:var(--gold); } .rmsg.alt { background:color-mix(in srgb,var(--wc) 7%, #fff); } /* ── Concepto destacado ── */ .concept { background:color-mix(in srgb,var(--wc) 9%, #fff); border:2px solid color-mix(in srgb,var(--wc) 26%,#fff); border-radius:var(--r); padding:22px 26px; margin:20px 0; } .concept p { font-weight:700; font-size:17px; color:var(--ink); } .concept strong { color:var(--wc); } /* ── Diagrama ── */ .diagram { background:#fff; border:2px solid var(--line); border-radius:var(--r); padding:22px; margin:22px 0; box-shadow:var(--shadow-sm); } .diagram .dt { font-weight:900; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--wc); margin-bottom:14px; } .diagram img { width:100%; border-radius:14px; background:#fff; border:1px solid var(--line); } /* ── Tabla de prompt ── */ .ptable { width:100%; border-collapse:separate; border-spacing:0 8px; margin:18px 0; } .ptable th { text-align:left; font-weight:900; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding:0 16px 4px; } .ptable td { padding:15px 16px; background:#fff; border:2px solid var(--line); border-left:none; border-right:none; font-weight:700; font-size:15px; color:var(--ink-2); } .ptable td:first-child { border-left:2px solid var(--line); border-radius:14px 0 0 14px; font-weight:900; color:var(--ink); white-space:nowrap; } .ptable td:last-child { border-right:2px solid var(--line); border-radius:0 14px 14px 0; font-style:italic; } /* ── Prompt code ── */ .pcode { background:#10183A; border:2px solid #2A3566; border-radius:var(--r); padding:22px 24px; margin:14px 0; font-family:'Courier New',monospace; font-size:15px; line-height:1.85; color:#BBD5FF; } .pcode .pl { display:block; font-family:var(--font-body); font-weight:900; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#6E7CB8; margin-bottom:10px; } /* ── Actividades ── */ .acts { display:flex; flex-direction:column; gap:12px; list-style:none; } .act { display:flex; gap:16px; align-items:flex-start; background:#fff; border:2px solid var(--line); border-radius:var(--r); padding:20px 22px; box-shadow:var(--shadow-sm); transition:transform .16s; } .act:hover { transform:translateX(4px); } .act .num { width:46px; height:46px; flex-shrink:0; border-radius:14px; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:20px; color:#fff; box-shadow:0 4px 0 rgba(0,0,0,.14); } .act h4 { font-family:var(--font-display); font-weight:600; font-size:17px; margin-bottom:3px; } .act p { font-weight:600; font-size:14px; color:var(--ink-2); } .act .t { margin-left:auto; align-self:center; background:color-mix(in srgb,var(--wc) 12%,#fff); color:var(--wc); font-weight:900; font-size:12px; padding:6px 12px; border-radius:999px; white-space:nowrap; } .act.c1 .num{ background:var(--green); box-shadow:0 4px 0 #169A50; } .act.c2 .num{ background:var(--purple); box-shadow:0 4px 0 #6E40D6; } .act.c3 .num{ background:var(--gold); box-shadow:0 4px 0 #D98C00; } .act.c4 .num{ background:var(--red); box-shadow:0 4px 0 #D43344; } /* ── Tarea ── */ .tarea { display:flex; gap:20px; align-items:flex-start; background:linear-gradient(135deg, color-mix(in srgb,var(--gold) 16%,#fff), color-mix(in srgb,var(--red) 10%,#fff)); border:2px solid color-mix(in srgb,var(--gold) 40%,#fff); border-radius:var(--r); padding:26px 28px; box-shadow:var(--shadow-sm); } .tarea .em { font-size:46px; flex-shrink:0; } .tarea h3 { font-family:var(--font-display); font-weight:600; font-size:21px; margin-bottom:7px; } .tarea p { font-weight:600; font-size:16px; color:var(--ink-2); } .tarea strong { color:#D98C00; } /* ============================================================ INSIGNIA (recompensa) — interactiva ============================================================ */ .badge-sec { text-align:center; position:relative; overflow:hidden; background:linear-gradient(135deg, color-mix(in srgb,var(--wc) 14%,#fff), color-mix(in srgb,var(--purple) 10%,#fff)); } .badge-coin { width:140px; height:140px; margin:0 auto 18px; border-radius:50%; background:linear-gradient(135deg, var(--gold), #FF8A00); display:grid; place-items:center; font-size:62px; box-shadow:0 12px 0 #D98C00, 0 22px 40px -10px rgba(217,140,0,.6); } .badge-coin.locked { background:linear-gradient(135deg,#D7DBEC,#BCC2DD); box-shadow:0 12px 0 #A7AECB; filter:grayscale(.3); } .badge-sec h3 { font-family:var(--font-display); font-weight:700; font-size:26px; color:var(--ink); } .badge-sec .bname { font-family:var(--font-display); font-weight:600; font-size:20px; color:var(--wc); margin:6px 0 4px; } .badge-sec .bmeta { font-weight:700; font-size:14px; color:var(--ink-2); margin-bottom:20px; } .badge-sec.won .badge-coin { animation:popIn .5s cubic-bezier(.34,1.7,.5,1) both; } @keyframes popIn { from{ transform:scale(.4) rotate(-12deg); opacity:0 } to{ transform:scale(1) rotate(0); opacity:1 } } /* ── Cierre (resumen) ── */ .cierre { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; } .rec { background:#fff; border:2px solid var(--line); border-radius:var(--r); padding:22px; text-align:center; box-shadow:var(--shadow-sm); } .rec .em { font-size:32px; margin-bottom:8px; } .rec h4 { font-family:var(--font-display); font-weight:600; font-size:15px; margin-bottom:5px; } .rec p { font-weight:600; font-size:13px; color:var(--ink-2); } /* ── Siguiente ── */ .next { display:flex; align-items:center; gap:18px; margin-top:26px; background:linear-gradient(120deg, var(--wc), color-mix(in srgb,var(--wc) 60%,#fff)); color:#fff; border-radius:var(--r); padding:24px 28px; box-shadow:var(--shadow); } .next .em { font-size:34px; } .next .lab { font-weight:900; font-size:32px; letter-spacing:.04em; text-transform:uppercase; color:#fff !important; opacity:1; } .next .ti { font-family:var(--font-display); font-weight:700; font-size:20px; color:rgba(255,255,255,.8) !important; } /* ── Navegación de lección ── */ .lessonnav { display:flex; gap:12px; max-width:900px; margin:40px auto 0; padding:32px 22px 0; border-top:2px solid var(--line); } .lnav-btn { flex:1; display:flex; align-items:center; gap:14px; background:#fff; border:2px solid var(--line); border-radius:var(--r); padding:18px 22px; box-shadow:var(--shadow-sm); transition:transform .16s, border-color .16s; } .lnav-btn:hover { transform:translateY(-3px); border-color:var(--wc); } .lnav-btn.next-btn { justify-content:flex-end; text-align:right; } .lnav-btn .ar { font-size:26px; color:var(--wc); } .lnav-btn .lab { font-weight:900; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); } .lnav-btn .ti { font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink); } .lnav-home { width:58px; flex-shrink:0; display:grid; place-items:center; background:#fff; border:2px solid var(--line); border-radius:var(--r); font-size:22px; box-shadow:var(--shadow-sm); transition:.16s; } .lnav-home:hover { transform:translateY(-3px); border-color:var(--wc); } .lnav-spacer { flex:1; } /* ── Video de la clase (Robotsin explica la misión) ── */ .class-video { margin: 6px 0 30px; } .cv-frame { position: relative; border-radius: var(--r-lg); padding: 12px; background: linear-gradient(135deg, var(--wc), color-mix(in srgb,var(--wc) 50%, var(--purple))); box-shadow: 0 22px 46px -22px color-mix(in srgb,var(--wc) 65%, #000), 0 8px 0 rgba(0,0,0,.06); } .cv-inner { position: relative; border-radius: 18px; overflow: hidden; background: #0B1230; aspect-ratio: 16/9; } .cv-inner video { width: 100%; height: 100%; object-fit: cover; display: block; } .cv-badge { position: absolute; top: 14px; left: 14px; z-index: 3; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.93); border-radius: 999px; padding: 7px 14px; font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--ink); box-shadow: var(--shadow-sm); } .cv-badge .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px color-mix(in srgb,var(--red) 26%, transparent); animation: pulse 1.8s ease-in-out infinite; } .cv-play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; cursor: pointer; border: none; background: rgba(11,18,48,.18); transition: background .2s; } .cv-play:hover { background: rgba(11,18,48,.28); } .cv-play .circle { width: 84px; height: 84px; border-radius: 50%; background: rgba(255,255,255,.96); display: grid; place-items: center; font-size: 30px; color: var(--wc); padding-left: 6px; box-shadow: 0 10px 0 rgba(0,0,0,.16), var(--shadow); transition: transform .16s; } .cv-play:hover .circle { transform: scale(1.08); } .cv-play.hidden { display: none; } .cv-caption { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 14px; font-weight: 700; font-size: 15px; color: var(--ink-2); text-align: center; } .cv-caption b { color: var(--wc); font-family: var(--font-display); font-weight: 600; } @media (max-width:760px){ .nav-title { font-size:15px; } .nav-title .sep { display:none; } } @media (max-width:620px){ .lread { padding:0 16px; } .block { padding:40px 0; } .nav-title { display:none; } .prog-chip { padding:6px 8px 6px 12px; font-size:12px; } .prog-chip .bar { width:54px; } .mission, .tarea { flex-direction:column; gap:12px; } .mission .em, .tarea .em { font-size:40px; } .shead { gap:12px; } .shead .ava { width:54px; height:54px; } .act { flex-wrap:wrap; } .act .t { margin-left:0; } .lessonnav { flex-wrap:wrap; gap:10px; } .lhero h1 { font-size:40px; } .mascot-stage { width:140px; height:140px; } .badge-coin { width:118px; height:118px; font-size:52px; } } @media (max-width:400px){ .lhero .lead { font-size:17px; } .bubble { font-size:15px; padding:14px 18px; } .lhero .chips { gap:8px; } .chip { padding:7px 13px; font-size:13px; } .pcode { font-size:13px; padding:18px; } .lnav-btn { padding:15px 18px; } }