/* ================================================================
   HOME-SECTIONS.CSS — Projects, Live lab, Fragments of me, Education, footer.
   Se carga después de theme.css. Escala tipográfica: títulos de sección en Bricolage,
   texto en Inter. Naranja = «se puede abrir»; azul = concepto.
================================================================ */
.sec { padding: clamp(4.5rem, 9vw, 8rem) 0 0; scroll-margin-top: calc(var(--nav-h) + 8px); }
.sec-title { font-size: clamp(2.6rem, 7vw, 5.6rem); font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.sec-lead { color: var(--muted); font-size: 1.08rem; line-height: 1.6; max-width: 40rem; margin: -1rem 0 2rem; }
.work-more { color: var(--muted); font-size: 0.95rem; margin-top: 2rem; }
.work-more a { color: var(--text); border-bottom: 1px solid var(--border2); transition: border-color 0.2s, color 0.2s; }
.work-more a:hover { color: var(--accent); border-color: var(--ember); }

/* ── Some projects ───────────────────────────────────────────── */
.work-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 2.6rem) clamp(1rem, 2.2vw, 2rem); }
.wcard { display: flex; flex-direction: column; gap: 1.1rem; grid-column: span 6; min-width: 0; }
.wcard-0, .wcard-3 { grid-column: span 7; } .wcard-1, .wcard-2 { grid-column: span 5; }
.wcard-cover { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px; background: var(--card2); border: 1px solid var(--border); position: relative; }
.wcard-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.wcard:hover .wcard-cover img { transform: scale(1.035); }
.wcard-cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(var(--ember-r), 0); transition: box-shadow 0.25s; }
.wcard:hover .wcard-cover::after, .wcard:focus-visible .wcard-cover::after { box-shadow: inset 0 0 0 2px rgba(var(--ember-r), 0.9); }
.wcard-body { display: flex; flex-direction: column; gap: 0.45rem; }
.wcard h3 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; }
.wcard p { color: var(--muted); font-size: 0.98rem; line-height: 1.55; max-width: 46rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wcard-tags { font-size: 0.82rem; color: var(--muted2); }
.wcard:hover h3 { color: var(--ember); }
@media (max-width: 800px) { .work-grid { grid-template-columns: minmax(0, 1fr); } .wcard, .wcard[class] { grid-column: auto; } }

/* ── Live lab ────────────────────────────────────────────────── */
.how { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; margin: 0 0 2.4rem; }
.how b { display: block; font-family: var(--display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.3rem; }
.how span { color: var(--muted); font-size: 0.93rem; line-height: 1.55; }
@media (max-width: 760px) { .how { grid-template-columns: 1fr; gap: 1rem; } }
#lab .lab { padding-bottom: 0; }
#lab .lab-tabs button.on { border-color: var(--ember); }
#lab .lab-tabs button.on i { color: var(--ember); }
.lab-where { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-bottom: 1.1rem; color: var(--muted); font-size: 0.86rem; }
.lab-where .seg button.on { background: var(--accent); color: #fff; }
.lab-where small { color: var(--muted2); font-size: 0.8rem; }
#lab .lab-empty { border: 1px dashed var(--border2); border-radius: var(--r); }

/* ── Education + knowledge graph ─────────────────────────────── */
.edu { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: start; margin-bottom: 1.6rem; }
.edu-card h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; letter-spacing: -0.03em; margin-bottom: 0.5rem; }
.edu-where { color: var(--text); font-weight: 500; }
.edu-when { color: var(--muted2); font-size: 0.9rem; margin-bottom: 1rem; }
.edu-card p:last-child { color: var(--muted); line-height: 1.65; max-width: 40rem; }
.edu-how { color: var(--muted); line-height: 1.6; font-size: 0.98rem; padding-left: 1.4rem; border-left: 2px solid var(--ember); }
@media (max-width: 860px) { .edu { grid-template-columns: 1fr; } }
.graph-box { border: 1px solid var(--border); border-radius: 22px; background: radial-gradient(80% 70% at 50% 45%, rgba(var(--accent-r), 0.06), transparent 70%), var(--card); overflow: hidden; }
#kgraph { display: block; width: 100%; height: clamp(540px, 56vw, 720px); touch-action: pan-y; outline-offset: -3px; }
.graph-reader { min-height: 3.2em; margin-top: 1rem; color: var(--muted); font-size: 0.98rem; line-height: 1.6; max-width: 60rem; }
.graph-reader b { color: var(--text); }
.graph-reader a { color: var(--ember); border-bottom: 1px solid rgba(var(--ember-r), 0.4); }
.graph-reader a:hover { border-color: var(--ember); }

/* ── Footer ──────────────────────────────────────────────────── */
footer#footer { position: relative; margin-top: clamp(5rem, 10vw, 9rem); padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 3vw, 2.75rem) 2rem; border-top: 1px solid var(--border); background: radial-gradient(70% 90% at 50% 120%, rgba(var(--accent-r), 0.1), transparent 70%), var(--bg2); text-align: left; }
.foot-main { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.foot-cta h2 { font-size: clamp(2.8rem, 7.4vw, 7rem); font-weight: 800; letter-spacing: -0.05em; line-height: 0.9; margin-bottom: 1.4rem; }
.foot-cta > p { color: var(--muted); max-width: 34rem; line-height: 1.6; }
.foot-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }
.foot-copied { min-height: 1.4em; margin-top: 0.7rem; color: var(--accent); font-size: 0.88rem; }
/* Fuera de la Home (p. ej. /projects/...): titular más pequeño; la Home conserva el tamaño grande. */
body:not([data-page="home"]) footer#footer { margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem); }
body:not([data-page="home"]) .foot-cta h2 { font-size: clamp(1.9rem, 3.8vw, 3.1rem); line-height: 1; margin-bottom: 1rem; }
body:not([data-page="home"]) .foot-cta > p { font-size: 0.95rem; }
.foot-meta { max-width: 1440px; margin: clamp(2rem, 4vw, 3.5rem) auto 0; padding-top: 1.4rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.foot-social { display: flex; gap: 0.7rem; list-style: none; }
.soc { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border2); background: var(--card); transition: transform 0.2s, border-color 0.2s, background 0.2s; }
.soc:hover { transform: translateY(-2px); background: var(--card2); }
.soc-gh { color: #f0f6fc; } .soc-gh:hover { border-color: #f0f6fc; }
.soc-in { color: #0a66c2; } .soc-in:hover { border-color: #0a66c2; color: #2e8bf0; }
.soc-mail { color: #ea4335; } .soc-mail:hover { border-color: #ea4335; }
.foot-visitors { font-family: var(--mono); font-size: 0.82rem; color: var(--muted2); letter-spacing: 0.01em; }
.foot-visitors b { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .foot-main { grid-template-columns: 1fr; } }

/* Tic-tac-toe */
.ttt { background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 1.2rem; max-width: 340px; }
.ttt-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.9rem; } .ttt-top b { font-family: var(--display); font-size: 1.05rem; letter-spacing: -0.02em; } .ttt-top span { font-size: 0.8rem; color: var(--muted); }
.ttt-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ttt-board button { aspect-ratio: 1; border: 1px solid var(--border2); background: var(--bg3); border-radius: 12px; font: 600 2rem var(--display); color: var(--accent); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.ttt-board button:hover:not(:disabled) { border-color: var(--accent); background: var(--card2); } .ttt-board button:disabled { cursor: default; }
.ttt-board button[data-v="o"] { color: var(--text); }
.ttt-bot { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.8rem; margin-top: 0.9rem; } .ttt-bot small { color: var(--muted2); font-size: 0.74rem; line-height: 1.45; }
.ttt-reset { flex: none; background: transparent; border: 1px solid var(--border2); color: var(--text); border-radius: 8px; padding: 0.35rem 0.8rem; font: 600 0.78rem "Inter", sans-serif; } .ttt-reset:hover { border-color: var(--ember); color: var(--ember); }