:root {
  color-scheme: dark;
  --bg: #0b1120;
  --surface: #151f32;
  --surface-2: #1b2740;
  --border: rgba(148, 163, 184, .14);
  --border-strong: rgba(148, 163, 184, .26);
  --text: #f1f5f9;
  --text-2: #cbd5e1;
  --muted: #94a3b8;
  --accent: #5eead4;
  --accent-ink: #042f2a;
  --accent-tint: rgba(94, 234, 212, .08);
  --accent-line: rgba(94, 234, 212, .35);
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --radius: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--bg); color: var(--muted); font-family: var(--sans); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
::selection { background: rgba(94, 234, 212, .25); color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ---------- navegación ---------- */
.nav { position: sticky; top: 0; z-index: 10; height: 64px; display: flex; align-items: center; gap: 32px; padding: 0 clamp(16px, 4vw, 40px); background: rgba(11, 17, 32, .78); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--border); }
.nav .name { font-size: 1rem; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
.nav .name:hover { text-decoration: none; color: var(--accent); }
.nav .links { display: flex; gap: 26px; }
.nav .links a { color: var(--muted); font-size: .9rem; font-weight: 500; transition: color .15s; }
.nav .links a:hover { color: var(--text); text-decoration: none; }
.nav .icons { margin-left: auto; display: flex; gap: 6px; }
.nav .icons a { color: var(--muted); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; transition: color .15s, background .15s; }
.nav .icons a:hover { color: var(--accent); }
.nav .icons svg { width: 18px; height: 18px; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 30; padding: 8px 14px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.skip:focus { top: 12px; text-decoration: none; }

main { max-width: 1040px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 48px); }
section { padding: 72px 0 16px; }

/* ---------- portada: el retrato a la izquierda, la presentación a la derecha ---------- */
.hero { position: relative; min-height: min(760px, calc(100vh - 64px)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(24px, 5vw, 64px); padding: 72px 0; }
.portrait { min-width: 0; }
.portrait canvas { display: block; width: 100%; max-width: 500px; aspect-ratio: 1; margin: 0 auto; }
.hero .game-status { min-height: 1.5em; max-width: none; margin: 6px 0 0; text-align: center; font-family: var(--mono); font-size: .76rem; color: var(--accent); }
.hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1.02; margin: 0; color: var(--text); font-weight: 700; letter-spacing: -.045em; }
.hero h1 b { color: var(--accent); font-weight: 700; }
.hero p { max-width: 560px; margin: 24px 0 0; font-size: 1.125rem; line-height: 1.7; color: var(--muted); }

.btn { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 18px; border: 1px solid var(--border-strong); border-radius: 10px; color: var(--text); font-size: .9rem; font-weight: 500; background: transparent; transition: background .15s, border-color .15s, transform .15s; }
.btn:hover { background: var(--surface); border-color: var(--muted); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }
.btn.solid, .contact .btn { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.solid:hover, .contact .btn:hover { background: #8ef0e0; border-color: #8ef0e0; }

/* ---------- títulos de sección: "/ about me" con una línea ---------- */
h2 { color: var(--text); font-size: clamp(1.6rem, 4vw, 2rem); font-weight: 600; letter-spacing: -.03em; margin: 0 0 36px; display: flex; align-items: center; gap: 16px; white-space: nowrap; }
h2::after { content: ""; height: 1px; flex: 0 1 280px; background: var(--border); }
h2 span { color: var(--accent); font-family: var(--mono); font-weight: 400; font-size: .8em; }

/* ---------- sobre mí ---------- */
.about p { max-width: 640px; margin: 0 0 16px; text-wrap: pretty; font-size: 1.05rem; color: var(--text-2); }
.about p b { color: var(--accent); font-weight: 600; }
/* Texto corrido justificado, con división en sílabas para que no se abran huecos entre palabras. */
.panel li, .hero p, .card p, .article p, .article li, .fix p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; }
.article .note, .contact p { text-align: inherit; }
h1, h2, h3 { text-wrap: balance; }
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 48px; align-items: center; }
.photo { width: 100%; max-width: 220px; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); filter: grayscale(.15); transition: filter .3s; }
.photo:hover { filter: none; }
.tech { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 0; margin: 22px 0 0; list-style: none; max-width: 640px; }
.tech li { font-family: var(--mono); font-size: .8rem; color: var(--text-2); }
.tech li::before { content: "▹ "; color: var(--accent); }

/* ---------- experiencia en pestañas ---------- */
.tabs { display: grid; grid-template-columns: 200px 1fr; gap: 36px; min-height: 300px; }
.tablist { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--border); }
.tablist button { text-align: left; background: none; border: 0; border-left: 2px solid transparent; margin-left: -1px; padding: 10px 16px; color: var(--muted); font-family: var(--sans); font-size: .9rem; font-weight: 500; cursor: pointer; border-radius: 0 8px 8px 0; transition: color .15s, background .15s; }
.tablist button:hover { color: var(--text); }
.tablist button[aria-selected="true"] { color: var(--accent); border-left-color: var(--accent); }
.panel h3 { margin: 0; color: var(--text); font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em; }
.panel h3 b { color: var(--accent); font-weight: 600; }
.panel .when { font-family: var(--mono); font-size: .76rem; letter-spacing: .02em; margin: 4px 0 20px; }
.panel ul { padding: 0; margin: 0; list-style: none; }
.panel li { position: relative; padding-left: 22px; margin-bottom: 12px; }
.panel li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); }

/* ---------- proyectos ---------- */
.projects { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.projects.three { grid-template-columns: repeat(3, 1fr); }
.group { font-family: var(--mono); font-size: .76rem; color: var(--muted); margin: 0 0 14px; }
.projects + .group { margin-top: 40px; }
.card { position: relative; padding: 24px 0 4px; border-top: 1px solid var(--border); display: flex; flex-direction: column; color: inherit; }
.card::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--accent); transition: width .5s cubic-bezier(.2, .7, .2, 1); }
.card:hover { text-decoration: none; }
.card:hover::before { width: 100%; }
.card:hover h3 { color: var(--accent); }
.card h3 { transition: color .2s; }
.card .logo { transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.card:hover .logo { transform: rotate(-6deg) scale(1.06); }
.card .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.card .logo { width: 44px; height: 44px; border-radius: 10px; object-fit: contain; }
.card .kind { font-family: var(--mono); font-size: .7rem; color: var(--muted); text-align: right; }
.card h3 { margin: 0 0 10px; font-size: 1.2rem; color: var(--text); font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.card p { margin: 0 0 20px; font-size: .93rem; line-height: 1.65; }
.card .tags { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.card .tags { gap: 4px 14px !important; }
.card .tags span { font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.card .more { margin-top: 18px; font-size: .85rem; font-weight: 500; color: var(--accent); }
.card .more::after { content: ""; }
.case { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 14px 0 0; border-top: 1px solid var(--border); color: inherit; }
.case:hover { text-decoration: none; }
.case:hover b { color: var(--accent); }
.case > span:nth-child(2) { flex: 1; min-width: 0; }
.case b { display: block; color: var(--text); font-weight: 600; font-size: .95rem; }
.case small { display: block; font-size: .83rem; color: var(--muted); }
.case i { font-style: normal; color: var(--accent); }
.case .badge { flex: none; width: 28px; height: 28px; }
.badge { width: 44px; height: 44px; display: grid; place-items: center; color: var(--accent); }
.badge svg { width: 26px; height: 26px; }

/* ---------- contacto y pie ---------- */
.contact { text-align: center; padding-bottom: 80px; }
.contact h2 { justify-content: center; }
.contact h2::after { display: none; }
.contact p { max-width: 500px; margin: 0 auto 26px; }
.contact .cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.email { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 22px; font-family: var(--mono); font-size: 1rem; color: var(--text); }
.copy { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-family: var(--sans); font-size: .8rem; font-weight: 500; cursor: pointer; }
.copy:hover { color: var(--accent); }
.copy svg { width: 15px; height: 15px; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
/* Formación: el título a la izquierda, las certificaciones verificables a la derecha. */
.rows { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border); }
.rows li { border-bottom: 1px solid var(--border); max-height: 140px; overflow: hidden; transition: max-height .4s ease, opacity .3s ease, border-color .3s; }
.rows li.out { max-height: 0; opacity: 0; border-color: transparent; }
.row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 14px; padding: 13px 2px; color: inherit; }
a.row:hover { text-decoration: none; }
a.row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
a.row:hover::after, a.row:focus-visible::after { transform: scaleX(1); }
.rows .what { color: var(--text); transition: color .2s, transform .3s; }
a.row:hover .what { color: var(--accent); transform: translateX(4px); }
.rows .what a { color: var(--text); }
.rows .what a:hover { color: var(--accent); text-decoration: none; }
.rows b { font-weight: 600; }
.who { position: relative; display: grid; justify-items: end; font-family: var(--mono); font-size: .76rem; color: var(--muted); white-space: nowrap; }
.who > span { grid-area: 1 / 1; transition: opacity .25s, transform .25s; }
.who .go { color: var(--accent); opacity: 0; transform: translateY(6px); }
a.row:hover .meta, a.row:focus-visible .meta { opacity: 0; transform: translateY(-6px); }
a.row:hover .go, a.row:focus-visible .go { opacity: 1; transform: none; }
.certs-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 48px 0 16px; }
.certs-head h3 { margin: 0; color: var(--text); font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { height: 30px; padding: 0 2px; margin-right: 12px; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; color: var(--muted); font-family: var(--sans); font-size: .8rem; font-weight: 500; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.chip:hover { color: var(--text); }
.chip.on { color: var(--accent); border-bottom-color: var(--accent); }
/* Las filas entran en cascada y los checks se dibujan al llegar a la sección. */
.motion .edu .row { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--i) * 70ms); }
.motion .edu.live .row, .motion .edu[data-done] .row { opacity: 1; transform: none; }
footer { text-align: center; font-size: .8rem; padding: 28px 16px 40px; border-top: 1px solid var(--border); }
footer a { color: var(--muted); }
footer a:hover { color: var(--text); }

/* ---------- artículo de un proyecto ---------- */
.article { max-width: 760px; margin: 0 auto; padding: 48px clamp(16px, 5vw, 32px) 56px; }
.back { font-size: .88rem; font-weight: 500; color: var(--muted); }
.back:hover { color: var(--text); text-decoration: none; }
.article header { margin: 36px 0 40px; }
.article .eyebrow { font-family: var(--mono); font-size: .76rem; color: var(--accent); }
.article h1 { color: var(--text); font-size: clamp(2.3rem, 7vw, 3.4rem); line-height: 1.08; margin: 10px 0 16px; font-weight: 700; letter-spacing: -.04em; }
.article .lede { font-size: 1.13rem; color: var(--text-2); margin: 0; line-height: 1.7; }
.article .cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.article h2 { font-size: 1.5rem; margin: 64px 0 18px; }
.article h2::after { display: none; }
.article h3 { color: var(--text); font-size: 1.08rem; margin: 30px 0 6px; font-weight: 600; letter-spacing: -.01em; }
.article p, .article li { color: var(--muted); }
.article ul { padding-left: 20px; }
.article li { margin-bottom: 9px; }
.article li::marker { color: var(--accent); }
.article strong { color: var(--text); font-weight: 600; }
.article q { color: var(--text-2); }
.article code { font-family: var(--mono); font-size: .85em; color: var(--accent); background: var(--surface); padding: 1px 6px; border-radius: 4px; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px 28px; margin: 0; }
.facts div { padding-top: 14px; border-top: 1px solid var(--accent-line); }
.facts b { display: block; color: var(--accent); font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.facts span { font-size: .83rem; line-height: 1.45; display: block; margin-top: 4px; }

/* Un error real y cómo quedó resuelto. */
.fix { margin: 26px 0; }
.fix .was { color: var(--text); font-weight: 600; font-size: 1rem; margin-bottom: 4px; }
.fix .was::before { content: "✕ "; color: #f87171; font-size: .8em; }
.fix p { margin: 0; font-size: .95rem; }

/* Diagrama de flujo: una línea troncal con un nodo por etapa y un paquete de datos que la recorre.
   El modelo de lenguaje es un nodo lleno, el código uno cuadrado, los extremos uno vacío. */
.flow { position: relative; display: grid; gap: 18px; margin: 30px 0 18px; padding-left: 46px; }
.flow::before { content: ""; position: absolute; left: 16px; top: 24px; bottom: 24px; width: 2px; border-radius: 2px; background: linear-gradient(var(--accent-line), var(--border-strong) 60%, var(--accent-line)); }
.flow::after { content: ""; position: absolute; left: 12px; top: 24px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--accent-tint), 0 0 18px rgba(94, 234, 212, .55); animation: packet 5s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes packet { 0% { top: 24px; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: calc(100% - 34px); opacity: 0; } }
.flow .arrow { display: none; }
.flow .step { position: relative; padding: 2px 0; color: var(--text); font-size: .95rem; font-weight: 600; letter-spacing: -.01em; }
.flow .step small { display: block; color: var(--muted); font-size: .84rem; font-weight: 400; letter-spacing: 0; margin-top: 3px; line-height: 1.5; }
.flow .step::before { content: ""; position: absolute; left: -38px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--bg); border: 2px solid var(--muted); }
.flow .step.model { color: var(--accent); }
.flow .step.model::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
.flow .step.code::before { border-radius: 3px; border-color: var(--text-2); background: var(--surface-2); }
.flow .step.model::after, .flow .step.code::after { margin-left: 10px; vertical-align: 2px; font-family: var(--mono); font-size: .64rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.flow .step.model::after { content: "model"; color: var(--accent); }
.flow .step.code::after { content: "code"; color: var(--muted); }

.legend { display: flex; gap: 20px; flex-wrap: wrap; justify-content: flex-start; padding-left: 46px; font-family: var(--mono); font-size: .72rem; }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--muted); margin-right: 7px; vertical-align: -1px; background: var(--bg); }
.legend .m { border-color: var(--accent); background: var(--accent); }
.legend .c { border-radius: 3px; border-color: var(--text-2); background: var(--surface-2); }
@media (prefers-reduced-motion: reduce) { .flow::after { animation: none; top: 24px; } }

.stack { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 0 !important; list-style: none; }
.stack li { font-family: var(--mono); font-size: .8rem; color: var(--text-2); margin: 0; }
.stack li::before { content: "▹ "; color: var(--accent); }
.article-end { position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px 24px; margin: 36px calc(-1 * clamp(16px, 5vw, 32px)) 0; padding: 12px clamp(16px, 5vw, 32px); background: rgba(11, 17, 32, .86); backdrop-filter: saturate(160%) blur(12px); border-top: 1px solid var(--border); font-size: .9rem; font-weight: 500; }
.article-end a { color: var(--muted); }
.article-end a:hover { color: var(--text); text-decoration: none; }
.article-end > :first-child { justify-self: start; }
.article-end a[href="#top"] { justify-self: center; }
.article-end .next { justify-self: end; text-align: right; color: var(--text); }
.article-end .next:hover { color: var(--accent); }
.article-end .next small { display: block; line-height: 1.3; font-family: var(--mono); font-size: .68rem; font-weight: 400; color: var(--accent); letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 760px) { .article-end { grid-template-columns: auto auto 1fr; gap: 16px; font-size: .84rem; } .article-end .next small { display: none; } }
.note { font-size: .85rem; color: var(--muted); border-top: 1px solid var(--border); padding-top: 20px; margin-top: 56px; }

/* Aparición suave al llegar a cada bloque. Sin JavaScript o con menos movimiento pedido, todo se ve. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } .card:hover { transform: none; } }

@media (max-width: 980px) {
  .projects.three { grid-template-columns: repeat(2, 1fr); }
  .projects.three > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .panel li, .hero p, .card p, .article p, .article li, .fix p { text-align: left; }
  .principles { grid-template-columns: 1fr; gap: 16px; }
  .pr-item { padding: 11px 0 13px; font-size: .92rem; }
  .row { grid-template-columns: 1fr; row-gap: 2px; }
  .row .who { justify-items: start; }
  .certs-head { margin-top: 40px; }
  .projects.three { grid-template-columns: 1fr; }
  .nav { gap: 16px; }
  .nav .links { display: none; }
  .tabs { grid-template-columns: 1fr; gap: 20px; }
  .tablist { flex-direction: row; overflow-x: auto; border-left: 0; border-bottom: 1px solid var(--border); gap: 0; }
  .tablist button { border-left: 0; border-bottom: 2px solid transparent; margin: 0 0 -1px; border-radius: 8px 8px 0 0; white-space: nowrap; padding: 10px 12px; font-size: .85rem; }
  .tablist button[aria-selected="true"] { border-bottom-color: var(--accent); }
  .projects { grid-template-columns: 1fr; }
  section { padding-top: 76px; }
  h2::after { flex-basis: 60px; }
  .hero { min-height: auto; padding: 72px 0 48px; grid-template-columns: 1fr; gap: 8px; }
  .portrait canvas { max-width: 300px; }
  .about-grid { grid-template-columns: 1fr; gap: 28px; }
  .photo { max-width: 220px; }
}

/* ---------- how I build ---------- */
.lead { margin: -14px 0 28px; max-width: 560px; }
.principles { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 40px; align-items: stretch; }
.pr-list { display: grid; border-top: 1px solid var(--border); }
.pr-item { position: relative; display: flex; gap: 14px; align-items: flex-start; width: 100%; padding: 14px 0 16px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; color: var(--muted); font-family: var(--sans); font-size: .98rem; font-weight: 500; text-align: left; cursor: pointer; overflow: hidden; transition: background .2s, color .2s; }
.pr-item .n { font-family: var(--mono); font-size: .74rem; color: var(--muted); }
.pr-item:hover { color: var(--text); }
.pr-item.on { color: var(--text); }
.pr-item.on .n { color: var(--accent); }
.pr-item .bar { position: absolute; left: 78px; right: 0; bottom: 3px; height: 2px; border-radius: 2px; background: var(--accent-line); transform-origin: left; transform: scaleX(0); }
/* La regla activa muestra cuánto falta para pasar a la siguiente: un riel tenue que se llena. */
.auto .pr-item.on::before { content: ""; position: absolute; left: 78px; right: 0; bottom: 3px; height: 2px; border-radius: 2px; background: rgba(148, 163, 184, .16); }
.pr-item.on .bar { transform: scaleX(1); }
.auto .pr-item.on .bar { background: var(--accent); animation: rule-timer 12s linear forwards; animation-play-state: paused; }
.auto.live .pr-item.on .bar { animation-play-state: running; }
.auto.live:focus-within .pr-item.on .bar { animation-play-state: paused; }
@keyframes rule-timer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pr-panel { position: relative; align-self: center; }
.pr-panel { display: grid; }
.pr-scene { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease, visibility .45s; }
.pr-scene.on { opacity: 1; visibility: visible; transform: none; }
@keyframes scene-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pr-scene svg { display: block; width: 100%; height: auto; margin-bottom: 14px; }
.pr-scene h3 { margin: 0 0 6px; color: var(--text); font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; }
.pr-scene p { margin: 0 0 12px; }
.seen { font-size: .88rem; font-weight: 500; }
.sc-line { fill: none; stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 4 6; }
.sc-flow { animation: sc-dash 1s linear infinite; }
@keyframes sc-dash { to { stroke-dashoffset: -20; } }
.sc-node { fill: none; stroke: none; }
.sc-code { fill: var(--surface-2); stroke: var(--accent); stroke-width: 1.5; }
.sc-t { fill: var(--text-2); font-family: var(--mono); font-size: 12px; }
.sc-mut { fill: var(--muted); font-family: var(--mono); font-size: 11px; }
.sc-ink { fill: var(--accent-ink); font-family: var(--mono); font-size: 11px; font-weight: 500; }
.sc-big { fill: var(--accent); font-family: var(--mono); font-size: 18px; font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
  .sc-flow, .pr-scene.on, .auto .pr-item.on .bar { animation: none; }
  .motion .edu .row { transition: none; opacity: 1; transform: none; }
}

/* ---------- about: una frase y cuatro líneas ---------- */
.tech-label { margin: 0 0 10px !important; font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.group span { color: var(--accent); }

/* ---------- artículos: logo e ilustración ---------- */
.art-logo { display: block; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 12px; object-fit: contain; }
.art-logo.icon { padding: 0; color: var(--accent); border-radius: 0; }
.art-visual { margin: 8px 0 36px; }
.art-visual svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (prefers-reduced-motion: reduce) { .art-visual .sc-flow { animation: none; } }

/* ---------- stack a la vista ---------- */
.built { margin: 0 0 44px; }
.built p { margin: 0 0 10px !important; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: left !important; }
.built ul { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; padding: 0 !important; list-style: none; }
.built li { margin: 0 !important; color: var(--text); font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; transition: color .2s; }
.built li:hover { color: var(--accent); }
.built.small { margin: 18px 0 0; }
.built.small li { font-size: 1rem; color: var(--text-2); }
.panel b.t { color: var(--text); font-weight: 600; }
@media (max-width: 760px) {
}
.pr-group { margin: 18px 0 4px !important; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.pr-group:first-child { margin-top: 0 !important; }
.pr-list { border-top: 0 !important; }
.pr-item .n { padding-top: 3px; }
.pr-item .tx b { display: block; font-weight: 500; }
.pr-item .desc { display: grid; grid-template-rows: 0fr; opacity: 0; color: var(--muted); font-size: .9rem; font-weight: 400; line-height: 1.55; transition: grid-template-rows .5s cubic-bezier(.2, .7, .2, 1), opacity .4s ease, margin .5s cubic-bezier(.2, .7, .2, 1); }
.pr-item .desc > span { min-height: 0; overflow: hidden; }
.pr-item.on .desc { grid-template-rows: 1fr; opacity: 1; margin-top: 4px; }
.pr-scene .seen { display: inline-block; margin-top: 6px; }
.sc-cap { fill: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.sc-acc { fill: var(--accent); font-family: var(--mono); font-size: 12px; }
.sc-acc-line { stroke: var(--accent-line); }
@media (max-width: 760px) { .pr-panel { order: -1; } }

.pr-item:focus:not(:focus-visible), .chip:focus:not(:focus-visible) { outline: none; }
.panel .built li { padding-left: 0; margin: 0 !important; }
.panel .built li::before { content: none; }
@media (max-width: 760px) {
  .principles { grid-template-columns: 1fr; gap: 20px; }
}
.about p.tech-label { margin: 28px 0 10px !important; font-size: .74rem; color: var(--muted); }

/* ---------- logros por puesto: una línea por logro, que arranca con su número ---------- */
.panel ul.wins { margin: 18px 0 24px; border-top: 1px solid var(--border); }
.panel .wins li { margin: 0; padding: 12px 0 12px; border-bottom: 1px solid var(--border); text-align: left; }
.panel .wins li::before { content: none; }
.wins .big { margin-right: 6px; color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.panel .built.small { margin: 0 0 4px; }
.tablist button { border-radius: 0; }
.tablist button:focus:not(:focus-visible) { outline: none; }
/* Que se note que se puede tocar: una flecha que aparece al pasar y queda en la elegida. */
.pr-item { padding-right: 28px !important; }
.pr-item::after { content: "→"; position: absolute; right: 4px; top: 14px; color: var(--muted); opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s, color .25s; }
.pr-item:hover::after { opacity: 1; transform: none; }
.pr-item.on::after { opacity: 1; transform: none; color: var(--accent); }
.pr-item .tx b { transition: color .2s; }
.pr-item:hover .tx b { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .pr-scene, .pr-item .desc, .pr-item::after { transition: none; } }
.panel .wins + .case { border-top: 0; margin-top: 4px; padding-top: 4px; }
/* Etapa del ciclo de vida junto al número. */
.pr-item .n { flex: none; width: 64px; display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.pr-item .n em { font-style: normal; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pr-item.on .n em { color: var(--accent); }
.pr-list { position: relative; }
/* Experiencia: los tres puestos ocupan el mismo lugar, así la sección no cambia de alto al cambiar de pestaña. */
.tabs > div:last-child { display: grid; }
.tabs .panel { grid-area: 1 / 1; transition: opacity .35s ease, transform .35s ease; }
.tabs .panel.off { visibility: hidden; opacity: 0; transform: translateY(6px); pointer-events: none; }
.role-stack { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0 0 6px !important; padding: 0; list-style: none; }
.panel .role-stack li { margin: 0; padding: 0; color: var(--text); font-size: .95rem; font-weight: 600; letter-spacing: -.01em; }
.panel .role-stack li::before { content: none; }
@media (prefers-reduced-motion: reduce) { .tabs .panel { transition: none; } }
/* Herramientas arriba del About, en una línea como el stack de cada puesto. */
.about p.tech-label { margin: 0 0 8px !important; }
.about .tech { margin: 0 0 28px; gap: 4px 20px; }
.about .tech li { color: var(--text); font-family: var(--sans); font-size: .98rem; font-weight: 600; letter-spacing: -.01em; }
.about .tech li::before { content: none; }
/* Educación: una lista corta, el qué a la izquierda y quién a la derecha. */
.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.list li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.list .what { color: var(--text); }
.list .who { flex: none; font-family: var(--mono); font-size: .76rem; color: var(--muted); }
.list-label { margin: 40px 0 10px; font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 760px) { .list li { flex-direction: column; gap: 2px; } }
/* Experiencia: los logros separados por aire, sin líneas. */
.panel ul.wins { border-top: 0; margin-top: 14px; }
.panel .wins li { border-bottom: 0; padding: 6px 0; }
/* Que se note lo que se toca: flecha en cada puesto y el link al caso en color. */
.tablist button { position: relative; padding-right: 30px !important; }
.tablist button::after { content: "→"; position: absolute; right: 10px; top: 50%; transform: translate(-4px, -50%); opacity: .35; transition: opacity .2s, transform .2s; }
.tablist button:hover::after { opacity: 1; transform: translate(0, -50%); }
.tablist button[aria-selected="true"]::after { opacity: 1; transform: translate(0, -50%); color: var(--accent); }
.case small { color: var(--accent) !important; font-weight: 500; }
.case:hover small { text-decoration: underline; }
.case i { display: none; }
@media (max-width: 760px) { .tablist button { padding-right: 24px !important; } .tablist button::after { right: 6px; } }
.pr-item:focus-visible, .tablist button:focus-visible { outline: none; }
.pr-item:focus-visible .tx b, .tablist button:focus-visible { color: var(--accent); }
/* Fondo de pipelines y juego de plataformas. */
.pipelines { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.play-layer { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 20; }
.playing .nav { z-index: 22; }
.wiggle { animation: wiggle .6s ease 3; }
@keyframes wiggle { 25% { transform: rotate(-4deg) scale(1.06); } 75% { transform: rotate(4deg) scale(1.06); } }

/* ---------- botón de juego, piezas del nivel, fondo y barra ---------- */
.sticker { display: inline-flex; flex: none; width: 80px; height: 35px; margin-left: 10px; vertical-align: middle; opacity: .9; }
.sticker svg { width: 100%; height: 100%; overflow: visible; }
/* La barra de desplazamiento de Nutrigordo: fina, sin flechas y del color de la página. */
html { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent; overflow-y: scroll; }
/* Credenciales: al pasar, el nombre toma el color y a la derecha aparece adónde lleva. */
.list li { position: relative; }
.list li.one .cred::after { content: ""; position: absolute; inset: 0; }
.cred { color: var(--text); transition: color .2s; white-space: nowrap; }
.cred:hover, .cred:focus-visible { color: var(--accent); text-decoration: none; }
.list li:has(.cred:hover) .meta, .list li:has(.cred:focus-visible) .meta { opacity: 0; transform: translateY(-6px); }
.list li:has(.cred:hover) .go, .list li:has(.cred:focus-visible) .go { opacity: 1; transform: none; }
@media (hover: none) { .cred { color: var(--accent); } }
@media (max-width: 760px) { .list .who { justify-items: start; } }
/* Juego: el muñequito vive en la página. Un botón invisible encima para tocarlo, una pista la primera vez y controles en el celu. */
.pk-hit { position: absolute; z-index: 21; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
.pk-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.pk-hint { position: absolute; z-index: 21; padding: 5px 11px; border: 1px solid var(--accent-line); border-radius: 10px; background: rgba(11, 17, 32, .92); font-family: var(--mono); font-size: .74rem; color: var(--accent); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -100%); transition: opacity .4s; }
.pk-hint::after, .pk-say::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background: inherit; border: inherit; border-width: 0 1px 1px 0; transform: rotate(45deg); }
.pk-hint.on { opacity: 1; animation: pk-bob 1.8s ease-in-out infinite; }
@keyframes pk-bob { 50% { transform: translate(-50%, calc(-100% - 5px)); } }
.pk-say { position: absolute; z-index: 21; width: min(320px, calc(100vw - 32px)); padding: 12px 14px; border: 1px solid var(--accent-line); border-radius: 12px; background: rgba(11, 17, 32, .94); color: var(--text); font-size: .88rem; line-height: 1.5; pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% + 6px)); transition: opacity .35s, transform .35s; }
.pk-say.on { opacity: 1; transform: translate(-50%, -100%); }
.pk-say p { margin: 0; }
.pk-say .go { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.pk-say kbd { display: inline-grid; place-items: center; min-width: 28px; height: 28px; border: 1px solid var(--accent-line); border-bottom-width: 3px; border-radius: 7px; color: var(--accent); font: inherit; font-size: 1.1rem; }
.pk-say kbd + kbd { margin-left: -2px; }
.pad.pulse button[data-k] { animation: pad-pulse .9s ease 3; }
@keyframes pad-pulse { 50% { box-shadow: 0 0 0 10px rgba(94, 234, 212, .18); border-color: var(--accent); } }
@media (prefers-reduced-motion: reduce) { .pk-hint.on, .pad.pulse button[data-k] { animation: none; } }
/* Panel fijo de controles, abajo a la derecha. */
.play-help { position: fixed; right: 18px; bottom: 18px; z-index: 24; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 14px; border: 1px solid var(--border-strong); border-radius: 12px; background: rgba(11, 17, 32, .9); backdrop-filter: blur(8px); font-family: var(--mono); font-size: .7rem; color: var(--muted); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .3s, transform .3s; }
.play-help.on { opacity: 1; pointer-events: auto; transform: none; }
.play-help span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.play-help .goal { color: var(--accent); }
.play-help kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px; color: var(--text-2); font: inherit; }
.play-help .restart { height: 28px; padding: 0 10px; border: 1px solid var(--accent-line); border-radius: 8px; background: transparent; color: var(--accent); font: inherit; cursor: pointer; }
.play-help .restart:hover { background: var(--accent-tint); }
.play-help .exit { height: 28px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: transparent; color: var(--text-2); font: inherit; cursor: pointer; }
.play-help .exit:hover { color: var(--text); border-color: var(--muted); }
.pad .re { position: fixed; top: 76px; right: 64px; width: 40px; height: 40px; font-size: 16px; }
.pad { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; align-items: flex-end; gap: 14px; padding: 0 18px calc(18px + env(safe-area-inset-bottom)); pointer-events: none; }
.pad[hidden] { display: none; }
.pad button { pointer-events: auto; width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--accent-line); background: rgba(11, 17, 32, .72); color: var(--accent); font-size: 20px; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; backdrop-filter: blur(6px); }
.pad button:active { background: var(--accent-tint); }
.pad .down { margin-left: auto; }
.pad .jump { width: 78px; height: 78px; }
.pad .x { position: fixed; top: 76px; right: 16px; width: 40px; height: 40px; font-size: 15px; }
@media (pointer: coarse) { .play-help { display: none; } }
/* Juego: lo que el muñequito ya leyó o pisó queda encendido. */
.about p { transition: color .4s; }
.playing .about p.read { color: var(--text); }
.card.lit::before { width: 100%; }
.card.lit h3 { color: var(--accent); }
.card.lit .logo { transform: rotate(-6deg) scale(1.06); }
/* El globito al costado del muñequito, con la punta hacia él. */
.pk-hint.side { transform: translate(0, -50%); }
.pk-hint.side::after { left: -6px; top: 50%; bottom: auto; margin: -5px 0 0; border-width: 0 0 1px 1px; }
.pk-hint.side.on { animation: pk-nudge-side 1.8s ease-in-out infinite; }
@keyframes pk-nudge-side { 50% { transform: translate(5px, -50%); } }
/* Certificaciones: el nombre con emisor y año a la izquierda, qué cubre y dónde se usó a la derecha. */
.list.certs li { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 24px; padding: 7px 0; }
.list.certs .who { flex: none; }
.fold .list-label { margin-top: 20px; }
.fold > .list-label:first-of-type { margin-top: 26px; }
@media (max-width: 760px) { .list.certs li { flex-direction: column; gap: 0; } }
/* How I work: la lista queda fija y la explicación de cada regla se lee a la derecha, sobre su escena. */
.pr-item .desc { display: none; }
.scene-desc { margin: 0 0 14px !important; max-width: 460px; font-size: 1rem; line-height: 1.6; color: var(--text-2); }
/* ---------- rediseño: más ancho, menos CV ---------- */
main { max-width: 1240px; }
.hero { min-height: calc(100vh - 64px); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.portrait canvas { max-width: 620px; }
.hero h1 { font-size: clamp(2.5rem, 4.6vw, 4rem); }
.hero .intro p { max-width: 520px; }
/* Los números, grandes y a lo ancho, con la línea de arriba como en las tarjetas. */
/* Cada producto con su animación arriba. */
.card .visual { margin: 0 0 18px; }
.card .viz { display: block; width: 100%; height: auto; }
.more-links { margin: 28px auto 0 !important; font-size: .9rem; }
.page { padding-top: 24px; }
@media (max-width: 760px) { .hero { min-height: auto; } }
@media (max-width: 760px) { .hero { grid-template-columns: minmax(0, 1fr); } .portrait canvas { max-width: 300px; } .hero h1 { font-size: clamp(2.4rem, 11vw, 3.2rem); } }
/* Sin líneas separadoras al leer: solo aparecen mientras se juega, porque ahí son el piso del muñequito. */
h2::after { display: none; }
.nav { border-bottom-color: transparent; }
footer { border-top: 0; }
.card { border-top-color: transparent; }
.playing .card { border-top-color: var(--border); }
.case { border-top: 0; }
.list, .list li { border-top: 0; border-bottom: 0; }
.pr-item, .pr-list { border-bottom: 0 !important; border-top: 0 !important; }
/* Lo más importante, primero y grande: lo construido en Kimberly-Clark. */
.flagship { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.card.big h3 { font-size: 1.6rem; letter-spacing: -.03em; }
.card.big p { font-size: 1rem; color: var(--text-2); }
.card.big .badge { width: 34px; height: 34px; }
.card.big .badge svg { width: 30px; height: 30px; }
.nums { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 4px 0 22px; padding: 0; list-style: none; }
.nums li { display: flex; flex-direction: column; font-size: .82rem; color: var(--muted); }
.nums b { color: var(--accent); font-size: 1.7rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.card.big .visual { order: 0; margin: 0 0 14px; }
@media (max-width: 980px) { .flagship { grid-template-columns: 1fr; } }
/* Experiencia: una tarjeta por puesto, con el rol y las fechas arriba. */
.when-role { margin: 0 0 6px !important; font-size: .85rem !important; color: var(--muted) !important; }
.when-role b { color: var(--text); font-weight: 600; }
.did { margin: 0 0 16px; padding-left: 18px; color: var(--text-2); font-size: .92rem; line-height: 1.55; }
.did li { margin-bottom: 6px; }
.did li::marker { color: var(--accent); }
.stackline { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 18px; padding: 0; list-style: none; }
.stackline li { font-family: var(--mono); font-size: .74rem; color: var(--accent); }
.earlier { margin: 28px 0 0; font-size: .9rem; color: var(--muted); }
.earlier b { color: var(--text-2); font-weight: 600; }
/* Mientras se juega, el contacto deja lugar a la izquierda para la caja de Snowflake. */
/* Mientras se juega, antes del contacto entran el bucket, la pipeline y la caja de Snowflake. */
.playing .contact { padding-top: 220px; }
@media (max-width: 1200px) { .playing .contact { padding-top: 600px; } }
@media (max-width: 760px) { .playing .contact { padding-bottom: 150px; } }
/* Los tres perfiles, debajo del nombre. */
.hero .roles { margin: 14px 0 0 !important; font-family: var(--mono); font-size: .9rem !important; color: var(--accent) !important; letter-spacing: .02em; text-align: left; }
/* Productos en dos columnas para que entren cuatro, el de Cortex marcado como en curso. */
.projects.four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 40px; }
.card.soon { cursor: default; }
.card.soon .more { color: var(--muted); }
.card.soon h3::after { content: "in progress"; margin-left: 10px; padding: 2px 8px; border: 1px solid var(--accent-line); border-radius: 999px; font-family: var(--mono); font-size: .65rem; font-weight: 500; color: var(--accent); vertical-align: 4px; }
@media (max-width: 760px) { .projects.four { grid-template-columns: 1fr; } }
/* En dos columnas, los dibujos de los productos no crecen de más. */
.projects.four .card .visual { max-width: 440px; }
/* ---------- que la página respire ---------- */
/* Cada sección es una franja de lado a lado, con un tono apenas distinto y mucho aire. */
main > section:not(.hero) { position: relative; padding: 120px 0 110px; }
main > section:not(.hero):nth-of-type(even)::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: linear-gradient(180deg, rgba(148, 163, 184, .035), rgba(148, 163, 184, .015)); }
.eyebrow { margin: 0 0 10px !important; font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
h2 { margin-bottom: 18px; }
.group { margin-bottom: 36px; }
/* Las tarjetas son superficies apenas más claras, sin bordes: se ve dónde empieza y termina cada una. */
.card { padding: 28px 28px 24px; border-radius: 18px; background: rgba(148, 163, 184, .045); border-top: 0 !important; transition: background .25s, transform .25s; }
.card::before { display: none; }
.card:hover { background: rgba(148, 163, 184, .085); transform: translateY(-3px); }
.playing .card { border-top: 0 !important; }
.flagship, .projects.four, .more-grid { gap: 28px; }
.more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.more-grid .card h3 { font-size: 1.3rem; }
@media (max-width: 760px) { main > section:not(.hero) { padding: 80px 0 70px; } .more-grid { grid-template-columns: 1fr; } .card { padding: 22px 18px; } }
/* La silueta no termina en el borde de la foto: los hombros se disuelven hacia abajo y a los costados. */
.portrait canvas {
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%), linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 80%, transparent 100%), linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect;
}
/* Las dos tarjetas de experiencia, simétricas: tres números en tres columnas y el link siempre al fondo. */
.card.big { display: flex; flex-direction: column; }
.card.big .nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 20px; }
.card.big .more { margin-top: auto; }
.flagship.solo { grid-template-columns: 1fr; }
.card.next { max-width: 760px; }
.card.next .plan { margin: 4px 0 18px; padding-left: 18px; color: var(--text-2); }
.card.next .plan li { margin: 6px 0; }
.card.next .plan li::marker { color: var(--accent); }
h2.next-co { margin-top: 72px; }
@media (max-width: 420px) { .card.big .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* La línea de años y regiones de la experiencia, a tamaño de lectura. */
.group.big { font-family: var(--sans); font-size: 1.15rem; color: var(--text-2); letter-spacing: 0; }
@media (max-width: 760px) { .group.big { font-size: 1rem; } }
/* Productos con el mismo orden que la experiencia: el dibujo debajo del texto y el link al fondo. */
.projects.four .card { display: flex; flex-direction: column; }
.projects.four .card .top { margin-bottom: 14px; }
.projects.four .card .visual { margin: 6px 0 14px; }
.projects.four .card .more { margin-top: auto; }
/* El paso a la sección siguiente: una sola flecha fija abajo en el medio de la pantalla, siempre en el mismo lugar. */
.scroll-next { position: fixed; z-index: 20; left: 50%; bottom: 18px; transform: translateX(-50%); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--text-2); transition: color .2s, background .2s; }
.scroll-next svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: scroll-next-bob 1.8s ease-in-out infinite; }
.scroll-next:hover { color: var(--accent); background: var(--accent-tint); }
.scroll-next[hidden] { display: none; }
@keyframes scroll-next-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.playing .scroll-next { display: none; }
@media (prefers-reduced-motion: reduce) { .scroll-next svg { animation: none; } }
/* Las herramientas de cada tarjeta, en la misma línea mono que la portada. */
.card p.tools, .card.big p.tools { margin: auto 0 14px; font-family: var(--mono); font-size: .76rem; line-height: 1.7; color: var(--muted); }
.card .tools + .more, .card.big .tools + .more, .projects.four .card .tools + .more { margin-top: 0; }
/* La fecha del puesto, a la derecha del título y sobre su misma línea. */
.title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.title-row .when { flex: none; font-family: var(--mono); font-size: .76rem; color: var(--muted); }
@media (max-width: 480px) { .title-row { flex-direction: column; gap: 0; } }
/* Tarjetas con carrusel: el link del caso cubre toda la tarjeta y el carrusel queda por encima. */
.card.linked { position: relative; }
.card.linked .more::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* Todos los dibujos de producto en la misma caja, para que las filas coincidan con o sin carrusel. */
.projects.four .card .visual { max-width: none; }
.projects.four .card .visual:not(.slides), .slides .track { aspect-ratio: 16 / 10; display: grid; place-items: center; }
/* El carrusel: se desliza con el dedo, con las flechas o con los puntitos. Primero el diagrama, después capturas. */
.slides { position: relative; z-index: 1; }
.slides .track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; border-radius: 12px; }
.slides .track::-webkit-scrollbar { display: none; }
.slides .slide { flex: 0 0 100%; display: grid; place-items: center; scroll-snap-align: start; }
.slides .slide svg { width: 100%; height: auto; }
.slides .slide img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; outline: 1px solid var(--border); outline-offset: -1px; }
.slides .ctrl { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; }
.slides button.prev, .slides button.fwd { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; transition: color .2s; }
.slides button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.slides button.prev:hover, .slides button.fwd:hover { color: var(--accent); }
.slides button[disabled] { visibility: hidden; }
.slides .dots { display: flex; justify-content: center; gap: 6px; }
.slides .dots button { width: 16px; height: 3px; padding: 0; border: 0; border-radius: 2px; background: var(--border-strong); cursor: pointer; transition: width .2s, background .2s; }
.slides .dots button.on { width: 26px; background: var(--accent); }
.slides .count { display: none;  position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(11, 17, 32, .8); border: 1px solid var(--border-strong); font-family: var(--mono); font-size: .68rem; color: var(--text-2); pointer-events: none; }
/* Lo que deja el juego al terminar: la nota del agente en el contacto y cada tarjeta leída marcada. */
.agent-note { display: flex; align-items: center; gap: 14px; max-width: 560px; margin: 32px auto 0; padding: 14px 16px; border: 1px solid var(--accent-line); border-radius: 16px; background: rgba(94, 234, 212, .06); text-align: left; animation: note-in .5s ease; }
.agent-note[hidden] { display: none; }
.agent-note p { margin: 0 !important; font-size: .92rem; color: var(--text-2); }
.agent-note b { margin-right: 8px; font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.agent-dot { position: relative; flex: none; width: 28px; height: 28px; margin-top: 6px; border-radius: 8px; background: var(--accent); box-shadow: 0 0 16px rgba(94, 234, 212, .55); }
.agent-dot::before { content: ""; position: absolute; left: 8px; top: 9px; width: 4px; height: 8px; border-radius: 1px; background: var(--bg); box-shadow: 8px 0 0 var(--bg); }
.agent-dot::after { content: ""; position: absolute; left: 12px; top: -9px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); box-shadow: 0 3px 0 -1px var(--accent), 0 6px 0 -1px var(--accent); }
.agent-note .again { flex: none; padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: none; color: var(--text-2); font: inherit; font-size: .78rem; cursor: pointer; }
.agent-note .again:hover { color: var(--accent); border-color: var(--accent); }
@keyframes note-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ran .card.read { position: relative; }
.ran .card.read::after { content: "✓ read"; position: absolute; right: 22px; bottom: 22px; font-family: var(--mono); font-size: .7rem; color: var(--accent); pointer-events: none; }
@media (max-width: 560px) { .agent-note { flex-wrap: wrap; } }
/* El visor: la imagen grande al centro, flechas a los costados, contador arriba y cerrar arriba a la derecha. */
.slides .slide { cursor: zoom-in; }
.lb-open { overflow: hidden; }
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--text); }
.lightbox::backdrop { background: rgba(5, 9, 18, .9); backdrop-filter: blur(4px); }
.lightbox figure { position: absolute; inset: 0; margin: 0; }
.lb-stage { position: absolute; inset: 64px 84px 84px; display: grid; place-items: center; }
.lb-stage img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.lb-stage svg { width: min(100%, 1100px); height: auto; max-height: 100%; }
.lightbox figcaption { position: absolute; left: 24px; right: 24px; bottom: 30px; text-align: center; font-size: .9rem; color: var(--text-2); }
.lb-prev, .lb-next, .lb-close { position: absolute; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--border-strong); border-radius: 50%; background: rgba(11, 17, 32, .85); color: var(--text); cursor: pointer; transition: border-color .2s, color .2s; }
.lb-prev:hover, .lb-next:hover, .lb-close:hover { border-color: var(--accent); color: var(--accent); }
.lb-prev svg, .lb-next svg, .lb-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb-prev { left: 20px; top: calc(50% - 23px); } .lb-next { right: 20px; top: calc(50% - 23px); }
.lb-close { top: 16px; right: 20px; }
.lb-count { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: .78rem; color: var(--text-2); }
@media (max-width: 760px) {
  .lb-stage { inset: 70px 12px 120px; }
  .lb-prev, .lb-next { top: auto; bottom: 64px; }
  .lightbox figcaption { bottom: 20px; font-size: .82rem; }
}
/* Credenciales: los nombres largos bajan de línea, y las que tienen link lo dicen una sola vez, con
   "view credential ↗" al lado del año. Sin subrayados: al pasar, el nombre toma el color. */
.list.certs .cred { white-space: normal; text-decoration: none; transition: color .2s; }
.list.certs .who { display: flex; flex-wrap: wrap; gap: 0 12px; }
.list.certs li .meta { opacity: 1 !important; transform: none !important; }
.list.certs .who .go { opacity: .75; transform: none; }
.list.certs li:has(.cred:hover) .go, .list.certs li:has(.cred:focus-visible) .go { opacity: 1; }
/* How I think: dos desplegables que abren su contenido completo en la misma página. */
main > section#more { padding: 100px 0 90px; }
.fold + .fold { margin-top: 14px; }
.fold summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; padding: 22px 28px; border-radius: 18px; background: rgba(148, 163, 184, .045); cursor: pointer; list-style: none; transition: background .25s; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary:hover, .fold[open] summary { background: rgba(148, 163, 184, .085); }
.playing .fold summary { cursor: default; }
.playing .fold:not([open]) summary:hover { background: rgba(148, 163, 184, .045); }
.fold-title { font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.fold-hint { flex: 1; font-size: .92rem; color: var(--muted); }
.fold summary::after { content: "▾"; margin-left: auto; font-size: 1.15rem; line-height: 1; color: var(--accent); transition: transform .25s; }
.fold[open] summary::after { transform: rotate(180deg); }
.fold[open] > :not(summary) { animation: fold-in .35s ease; }
.fold > .lead, .fold > .principles { margin-top: 26px; }
/* En el juego, pasar de un desplegable al otro es un acordeón: la altura se anima en los dos a la vez. */
.fold.swap { interpolate-size: allow-keywords; }
.fold.swap::details-content { height: 0; overflow: clip; transition: height .42s ease, content-visibility .42s allow-discrete; }
.fold.swap[open]::details-content { height: auto; }
.fold.swap > :not(summary) { animation: none; }
.fold.swap > summary + * { margin-top: 0; padding-top: 26px; }
@keyframes fold-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* El título "generándose": las letras aún no escritas no se ven pero ocupan su lugar, y una barra fina titila al final. */
.hero h1.typing .ch:not(.on) { color: transparent; }
.hero h1 .caret { display: inline-block; width: 0; }
.hero h1 .caret::after { content: ""; display: inline-block; width: .07em; height: .78em; margin-left: .06em; vertical-align: -.04em; border-radius: 2px; background: var(--accent); animation: caret-blink 1s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }

/* ---------- espacio y vidrio ---------- */
/* El fondo es un solo espacio profundo: nebulosas tenues fijas detrás de todo, sin franjas que delaten la página. */
:root { --bg: #070b16; --glass: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)); --glass-hover: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03)); --glass-line: rgba(255, 255, 255, .08); }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(1100px 760px at 88% -8%, rgba(45, 212, 191, .2), transparent 62%),
    radial-gradient(900px 700px at -12% 34%, rgba(99, 102, 241, .19), transparent 62%),
    radial-gradient(1000px 860px at 55% 112%, rgba(56, 189, 248, .14), transparent 62%),
    radial-gradient(700px 520px at 60% 45%, rgba(168, 85, 247, .07), transparent 65%), var(--bg); }
main > section:not(.hero):nth-of-type(even)::before { display: none; }
/* Las cajas son vidrio: dejan ver la nieve y las estrellas desenfocadas detrás, con un borde de luz arriba. */
.card, .fold summary, .agent-note { background: var(--glass); border: 1px solid var(--glass-line) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 60px -34px rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); }
.card:hover, .fold summary:hover, .fold[open] summary { background: var(--glass-hover); border-color: rgba(94, 234, 212, .22) !important; }
.playing .fold:not([open]) summary:hover { background: var(--glass); border-color: var(--glass-line) !important; }
.agent-note { background: linear-gradient(180deg, rgba(94, 234, 212, .09), rgba(94, 234, 212, .03)); border-color: var(--accent-line) !important; }
.nav { background: rgba(7, 11, 22, .62); }

/* ---------- liquid glass ---------- */
/* Vidrio grueso: más transparente y más desenfocado, con brillo propio y un filo de luz que se enciende en las
   esquinas, como el borde de un vidrio curvo que refleja el cielo. */
.card, .fold summary, .agent-note { position: relative; border-radius: 22px; border-color: transparent !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .025) 42%, rgba(255, 255, 255, .045));
  -webkit-backdrop-filter: blur(22px) saturate(180%) brightness(1.06); backdrop-filter: blur(22px) saturate(180%) brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(255, 255, 255, .04), 0 18px 50px -20px rgba(0, 0, 0, .6);
  transition: background .3s, box-shadow .3s, transform .3s; }
.card::after, .fold summary::before, .agent-note::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .06) 30%, rgba(255, 255, 255, .02) 62%, rgba(94, 234, 212, .3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.card:hover, .fold summary:hover, .fold[open] summary { background: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04) 42%, rgba(255, 255, 255, .07));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(255, 255, 255, .06), 0 24px 60px -20px rgba(0, 0, 0, .65); }
.playing .fold:not([open]) summary:hover { background: linear-gradient(135deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .025) 42%, rgba(255, 255, 255, .045)); }
.agent-note { background: linear-gradient(135deg, rgba(94, 234, 212, .14), rgba(94, 234, 212, .04) 45%, rgba(255, 255, 255, .05)); }

/* ---------- liquid glass, sin bordes ---------- */
/* El vidrio se nota por lo que hace con el cielo de atrás (lo desenfoca, lo satura, lo aclara) y por un brillo suave
   que entra desde una esquina; nunca por una línea alrededor. */
:root { --lg: radial-gradient(140% 90% at 0% 0%, rgba(255, 255, 255, .14), transparent 55%), linear-gradient(160deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .02) 60%, rgba(148, 197, 255, .05));
  --lg-hover: radial-gradient(140% 90% at 0% 0%, rgba(255, 255, 255, .2), transparent 55%), linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03) 60%, rgba(148, 197, 255, .07));
  --lg-shadow: inset 0 22px 30px -26px rgba(255, 255, 255, .25), 0 22px 60px -26px rgba(0, 0, 0, .75); }
.card::after, .fold summary::before, .agent-note::after { display: none; }
.card, .fold summary, .agent-note, .art-visual, .facts div, .article-end {
  border: 0 !important; background: var(--lg); box-shadow: var(--lg-shadow);
  -webkit-backdrop-filter: blur(26px) saturate(190%) brightness(1.1); backdrop-filter: blur(26px) saturate(190%) brightness(1.1); }
.card:hover, .fold summary:hover, .fold[open] summary { background: var(--lg-hover); box-shadow: inset 0 22px 30px -24px rgba(255, 255, 255, .32), 0 26px 70px -26px rgba(0, 0, 0, .8); }
.playing .fold:not([open]) summary:hover { background: var(--lg); box-shadow: var(--lg-shadow); }
.agent-note { background: radial-gradient(140% 90% at 0% 0%, rgba(94, 234, 212, .2), transparent 55%), linear-gradient(160deg, rgba(94, 234, 212, .08), rgba(255, 255, 255, .03)); }
.art-visual { padding: 28px clamp(16px, 3vw, 36px); border-radius: 26px; }
.facts div { padding: 18px 20px 20px; border-radius: 20px; }
.article-end { border-radius: 20px 20px 0 0; }

/* ---------- artículos a lo ancho ---------- */
/* En pantallas grandes el caso de estudio usa el ancho: arriba el título, el dibujo y las cifras de lado a lado;
   después, cada sección con su título a la izquierda y el contenido a la derecha. */
@media (min-width: 1000px) {
  .article { max-width: 1180px; display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); column-gap: 72px; }
  .article > * { grid-column: 1 / -1; min-width: 0; }
  .article header { max-width: 920px; }
  .article .lede { max-width: 72ch; font-size: 1.2rem; }
  .article .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .article > h2 { grid-column: 1; align-self: start; display: block; margin: 0; padding-top: 64px; font-size: 1.35rem; line-height: 1.3; }
  .article > h2 ~ *:not(h2):not(.note):not(.article-end) { grid-column: 2; }
  .article > h2 + * { margin-top: 64px; }
  .article > h2 ~ p, .article > h2 ~ ul { max-width: 78ch; }
}

/* ---------- liquid glass, minimalista ---------- */
/* Como el de Apple: vidrio casi transparente, un desenfoque leve para que lo de atrás se siga viendo, y solo el
   brillo del canto donde entra la luz. Sin sombras afuera ni degradés adentro. */
:root { --lg: rgba(255, 255, 255, .035); --lg-hover: rgba(255, 255, 255, .065);
  --lg-shadow: inset 1px 1px 0 rgba(255, 255, 255, .2), inset -1px -1px 0 rgba(255, 255, 255, .05); }
.card, .fold summary, .agent-note, .art-visual, .facts div, .article-end {
  background: var(--lg); box-shadow: var(--lg-shadow);
  -webkit-backdrop-filter: blur(8px) saturate(170%); backdrop-filter: blur(8px) saturate(170%); }
.card:hover, .fold summary:hover, .fold[open] summary { background: var(--lg-hover); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .28), inset -1px -1px 0 rgba(255, 255, 255, .07); }
.playing .fold:not([open]) summary:hover { background: var(--lg); box-shadow: var(--lg-shadow); }
.agent-note { background: rgba(94, 234, 212, .06); }
/* El nombre de la tabla se escribe como código: así se lee como una tabla de verdad, no como una frase. */
.pk-say code, .play-help code { font-family: var(--mono); font-size: .9em; color: var(--accent); background: rgba(94, 234, 212, .1); padding: 1px 6px; border-radius: 5px; }

/* ---------- liquid: sin canto, con refracción ---------- */
/* Ningún borde ni brillo de canto. Lo "líquido" lo da la refracción: lo que está detrás se ondula al pasar por el
   vidrio, como a través de agua. En Chrome y Edge se usa un filtro de distorsión (lo arma snow.js); en el resto
   queda el vidrio limpio con desenfoque leve. */
.card, .fold summary, .agent-note, .art-visual, .facts div, .article-end,
.card:hover, .fold summary:hover, .fold[open] summary, .playing .fold:not([open]) summary:hover { box-shadow: none; }
.lg-liquid :is(.card, .fold summary, .agent-note, .art-visual, .facts div, .article-end) {
  -webkit-backdrop-filter: url(#lg-refract) blur(3px) saturate(170%); backdrop-filter: url(#lg-refract) blur(3px) saturate(170%); }

/* ---------- el mismo vidrio en todo lo que flota ---------- */
/* El menú, los botones, la flecha de abajo y los controles del juego usan el vidrio de la barra de los artículos:
   lo que pasa por detrás se desenfoca y se ondula. Sin bordes. */
:root { --ease: cubic-bezier(.22, 1, .36, 1); }
.nav, .play-help, .pad button, .scroll-next, .btn:not(.solid) { border-color: transparent !important; }
.lg-liquid :is(.nav, .play-help, .pad button, .scroll-next, .btn:not(.solid)) {
  -webkit-backdrop-filter: url(#lg-refract) blur(3px) saturate(170%); backdrop-filter: url(#lg-refract) blur(3px) saturate(170%); }
.play-help, .pad button, .scroll-next, .btn:not(.solid) { background: var(--lg); }
/* El menú es aire mientras estás arriba de todo y se vuelve vidrio apenas la página empieza a pasar por debajo. */
.nav { background: transparent; transition: background .5s var(--ease), -webkit-backdrop-filter .5s var(--ease), backdrop-filter .5s var(--ease); }
.nav:not(.scrolled) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.nav.scrolled { background: var(--lg); }

/* ---------- movimiento ---------- */
/* Todo se mueve con la misma curva: arranca rápido y se apoya suave, sin rebotes. */
.card { transition: background .45s var(--ease), transform .6s var(--ease); }
.card:hover { transform: translateY(-4px); }
.btn { transition: background .35s var(--ease), color .35s var(--ease), transform .45s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:not(.solid):hover { background: var(--lg-hover); }
.scroll-next { transition: color .3s var(--ease), background .3s var(--ease), transform .45s var(--ease); }
.scroll-next:hover { background: var(--lg-hover); transform: translateX(-50%) translateY(-2px); }
.pad button { transition: background .25s var(--ease), transform .25s var(--ease); }
.pad button:active { transform: scale(.94); }
.fold summary { transition: background .45s var(--ease); }
@media (prefers-reduced-motion: reduce) { .card:hover, .btn:hover, .scroll-next:hover { transform: none; } .scroll-next:hover { transform: translateX(-50%); } }
/* El botón principal del contacto sigue lleno de color: el vidrio es para lo secundario. */
.contact .btn:not(.ghost), .lg-liquid .contact .btn:not(.ghost) { background: var(--accent); -webkit-backdrop-filter: none; backdrop-filter: none; }
.contact .btn:not(.ghost):hover { background: #8ef0e0; }

/* ---------- nada que se corte ---------- */
/* La barra de los artículos flota: separada del borde de la pantalla y con las cuatro esquinas redondeadas, así al
   llegar al final no parece un pedazo cortado. La nota del final va sin línea: una línea más corta que el texto de
   arriba se lee como un error. */
.article-end { bottom: 14px; border-radius: 20px; margin-bottom: 14px; }
.article .note { border-top: 0; padding-top: 0; margin-top: 72px; }
/* Todo lo de arriba del artículo termina en el mismo borde derecho que el dibujo y las cifras. */
@media (min-width: 1000px) {
  .article header { max-width: none; }
  .article .lede { max-width: none; font-size: clamp(1.15rem, 1.45vw, 1.38rem); line-height: 1.65; }
  .article > h2 ~ p, .article > h2 ~ ul { max-width: none; }
}

/* Desplegables: el título arriba y la descripción completa debajo, nunca partida al costado del título. */
.fold summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; row-gap: 4px; align-items: center; }
.fold summary .fold-title { grid-column: 1; }
.fold summary .fold-hint { grid-column: 1; grid-row: 2; }
.fold summary::after { grid-column: 2; grid-row: 1 / span 2; margin-left: 0; }
/* IBM ocupa el mismo ancho que la fila de Kimberly-Clark: las dos empresas quedan alineadas. */
.card.next { max-width: none; }

/* ---------- el vidrio responde ---------- */
/* Un reflejo sigue al cursor dentro del vidrio y la tarjeta se inclina apenas hacia él. Las posiciones las pone
   snow.js en --mx, --my, --rx y --ry; sin mouse (celular) no pasa nada. */
.glass-live { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)); transition: transform .7s var(--ease), background .45s var(--ease); }
.glass-live::before { content: ""; display: block; z-index: 0; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease);
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .09), transparent 65%); }
.glass-live.glint::before { opacity: 1; }
.glass-live.glint { --lift: -4px; }
.card.glass-live:hover { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)); }
.playing .glass-live { --rx: 0deg !important; --ry: 0deg !important; }

/* ---------- entrada ---------- */
/* Al llegar a una sección, cada tarjeta se materializa desde un desenfoque, una detrás de la otra. */
html.js .reveal .card, html.js .reveal .fold { opacity: 0; transform: translateY(22px) scale(.985); filter: blur(8px);
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
html.js .reveal.in .card, html.js .reveal.in .fold { opacity: 1; transform: none; filter: none; }
html.js .reveal.in :is(.card, .fold):nth-child(2) { transition-delay: .08s; }
html.js .reveal.in :is(.card, .fold):nth-child(3) { transition-delay: .16s; }
html.js .reveal.in :is(.card, .fold):nth-child(4) { transition-delay: .24s; }
html.js .reveal.in .glass-live, html.js .reveal.in .glass-live:hover { transition-delay: 0s; transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)); }
@media (prefers-reduced-motion: reduce) { html.js .reveal .card, html.js .reveal .fold { opacity: 1; transform: none; filter: none; } .glass-live { --rx: 0deg !important; --ry: 0deg !important; } }
/* Mientras se scrollea, el vidrio usa solo el desenfoque, que es liviano; la refracción vuelve apenas se detiene.
   Así el scroll no pierde cuadros. */
html.is-scrolling.lg-liquid :is(.nav, .play-help, .pad button, .scroll-next, .btn:not(.solid), .card, .fold summary, .agent-note, .art-visual, .facts div, .article-end) {
  -webkit-backdrop-filter: blur(4px) saturate(170%); backdrop-filter: blur(4px) saturate(170%); }
html.is-scrolling .nav:not(.scrolled) { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* La entrada no anima desenfoque: desenfocar vidrio mientras la página se mueve es lo más caro. Solo fundido y
   un leve desplazamiento, que la placa de video mueve sin costo. */
html.js .reveal .card, html.js .reveal .fold { filter: none; transition: opacity .8s var(--ease), transform .8s var(--ease); will-change: opacity, transform; }
html.js .reveal.in .card, html.js .reveal.in .fold { will-change: auto; }
/* El retrato se dibuja en una capa más grande que su cuadro, para que las rayas empujadas no choquen contra un
   borde. La disolución de los hombros la hace cada raya (portrait.js), así que esta capa no lleva máscara. */
.portrait { position: relative; }
.portrait .portrait-ink { position: absolute; z-index: 1; pointer-events: none; max-width: none; margin: 0; aspect-ratio: auto; cursor: default; -webkit-mask-image: none; mask-image: none; }
/* Mientras flota, el lienzo del juego queda detrás de la página: Little Bit pasa por detrás del texto y del vidrio. */
/* Flotando, en la compu va detrás del texto del margen; en el celu, adelante: si no, una tarjeta que ocupa la pantalla lo tapa. */
@media (min-width: 768px) { body.pk-floating .play-layer { z-index: -1; } }
/* El globito de ayuda también flota por detrás de la página, junto con Little Bit: nunca tapa lo que se lee. */
@media (min-width: 768px) { body.pk-floating .pk-hint { z-index: -1; } }
/* El globito y el área de click de Little Bit viven en su propia capa: se desplazan suave, sin saltos de píxel. */
.pk-hint, .pk-hit { will-change: translate, transform; }

/* La flecha del centro de la barra de los artículos: baja de zona en zona, como la del inicio. */
.article-end a.down { display: grid; place-items: center; width: 36px; height: 28px; border-radius: 14px; color: var(--text-2); }
.article-end a.down:hover { color: var(--accent); background: var(--accent-tint); }
.article-end a.down svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: scroll-next-bob 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .article-end a.down svg { animation: none; } }

/* Credenciales: cada nombre es su propio link, con la flechita al lado; el hover cae justo sobre la palabra. */
.list.certs .cred::after { content: " ↗"; position: static; inset: auto; font-family: var(--mono); font-size: .78em; color: var(--accent); opacity: .7; }
.list.certs .cred:hover::after, .list.certs .cred:focus-visible::after { opacity: 1; }

/* Nada se sale por el costado: el lienzo del retrato y el del juego no agrandan la página en el celu. */
html, body { overflow-x: clip; }

/* Los controles del juego en el celu van en una barra de vidrio: un toque que no cae justo en un botón
   queda en la barra y nunca abre un link de abajo. */
.pad { pointer-events: auto; padding-top: 14px; background: rgba(11, 17, 32, .3); -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); border-radius: 26px 26px 0 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.pad .x, .pad .re { background: var(--lg); -webkit-backdrop-filter: blur(8px) saturate(170%); backdrop-filter: blur(8px) saturate(170%); }
/* La nota final y el globo de la misión, con el mismo vidrio que el resto. */
.agent-note, .pk-say { background: var(--lg) !important; box-shadow: var(--lg-shadow) !important; -webkit-backdrop-filter: blur(10px) saturate(170%); backdrop-filter: blur(10px) saturate(170%); border-color: transparent !important; }

/* Los botones chicos del juego van dentro de la barra, entre las flechas y el salto: nunca encima de otro. */
/* La barra del celu: las cuatro flechas del mismo tamaño y, en el medio, reiniciar y salir, chicos. */
.pad { display: grid; grid-template-columns: 60px 60px 1fr 1fr 60px 60px; align-items: center; column-gap: 8px; }
.pad button { width: 60px; height: 60px; margin: 0; }
.pad [data-k="left"] { grid-column: 1; } .pad [data-k="right"] { grid-column: 2; } .pad .down { grid-column: 5; } .pad .jump { grid-column: 6; width: 60px; height: 60px; }
.pad .x, .pad .re { position: static; grid-row: 1; width: 34px; height: 34px; font-size: 14px; }
.pad .re { grid-column: 3; justify-self: end; } .pad .x { grid-column: 4; justify-self: start; }
/* Más aire entre secciones en el celu (en la compu ya tienen 120 px). */
@media (max-width: 760px) {
  main { padding: 0 22px; }
  main > section:not(.hero) { padding-top: 104px; padding-bottom: 84px; }
  .pr-panel { order: 0; margin: 6px 0 22px; }
  .card { padding-top: 30px; }
  .card + .card { margin-top: 12px; }
  /* Jugando en el celu, la página queda de fondo: el juego se lee sin mezclarse con el texto. */
  main, footer { transition: opacity .5s var(--ease); }
  body.playing main, body.playing footer { opacity: .85; }
}
/* Sin subrayado debajo de la regla elegida: el tiempo sigue corriendo por dentro, pero no se ve. */
.pr-item .bar, .auto .pr-item.on::before { opacity: 0; }

/* Los diálogos de Little Bit y su saludo: vidrio, sin borde de color. */
.pk-bubble { position: absolute; left: 0; top: 0; z-index: 21; display: flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 12px; transform: translate(-50%, -50%); font: 500 15px "JetBrains Mono", monospace; color: #f1f5f9; white-space: nowrap; pointer-events: none; opacity: 0; background: var(--lg); box-shadow: var(--lg-shadow); -webkit-backdrop-filter: blur(12px) saturate(170%); backdrop-filter: blur(12px) saturate(170%); will-change: translate, opacity; }
.pk-hint { background: var(--lg) !important; box-shadow: var(--lg-shadow); border-color: transparent !important; -webkit-backdrop-filter: blur(12px) saturate(170%); backdrop-filter: blur(12px) saturate(170%); }
.pk-hint::after { display: none; }

/* El reflejo de la tarjeta ocupa toda la tarjeta: nunca queda como una línea arriba (venía del subrayado viejo). */
.card.glass-live::before { top: 0; left: 0; width: auto; height: auto; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .09), transparent 65%); }
/* Los desplegables: la misma inclinación y el mismo reflejo que las tarjetas. */
.fold summary.glass-tilt { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)); transition: transform .7s var(--ease), background .45s var(--ease), box-shadow .3s; }
.fold summary.glass-tilt.glint { --lift: -4px; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .09), transparent 65%), linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04) 42%, rgba(255, 255, 255, .07)); }
.playing .fold summary.glass-tilt { --rx: 0deg !important; --ry: 0deg !important; --lift: 0px !important; }

/* Dentro de los globos: las flechas como teclas y las tablas como código, igual que en la misión. */
.pk-bubble { gap: 6px; }
.pk-bubble kbd { display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin: 0 2px; border: 1px solid var(--accent-line); border-bottom-width: 2px; border-radius: 6px; color: var(--accent); font: inherit; font-size: .95rem; }
.pk-bubble code { font-family: var(--mono); font-size: .9em; color: var(--accent); background: rgba(94, 234, 212, .1); padding: 1px 6px; border-radius: 5px; }

/* Jugando en el celu, el DAG corre por su propio carril a la izquierda: debajo de la portada el contenido se corre
   un poco y Little Bit nunca queda encima de un número o de un título. */
@media (max-width: 760px) { body.playing main > section:not(.hero) { padding-left: 26px !important; } }

/* El rol: más presente, y escrito por el mismo cursor que el título. */
.hero .roles { margin: 18px 0 0 !important; font-size: 1.12rem !important; font-weight: 500; letter-spacing: .01em; }
.hero .roles.typing .ch:not(.on) { color: transparent; }
.hero .roles .caret { display: inline-block; width: 0; }
.hero .roles .caret::after { content: ""; display: inline-block; width: .55em; height: 1.05em; margin-left: .12em; vertical-align: -.18em; border-radius: 2px; background: var(--accent); opacity: .85; animation: caret-blink 1s steps(1) infinite; }
@media (max-width: 760px) { .hero .roles { font-size: 1rem !important; margin-top: 14px !important; } }

/* La nota final la firma Little Bit, con la respuesta que da Snowflake al insertar su fila. */
.agent-note code { font-family: var(--mono); font-size: .88em; color: var(--accent); background: rgba(94, 234, 212, .1); padding: 1px 6px; border-radius: 5px; }
.agent-note small { display: block; margin-top: 6px; font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.agent-note small::before { content: "✓ "; color: var(--accent); }

/* El globo de Little Bit cuando flota en el margen: se parte en renglones para no meterse en el contenido. */
.pk-hint.lane { white-space: normal; text-wrap: balance; text-align: center; line-height: 1.45; }

/* El globo que hay que leer sí o sí se pasa con su botón. */
.pk-say.on { pointer-events: auto; }
.pk-say .next { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 10px 6px 12px; border: 1px solid var(--accent-line); border-radius: 9px; background: rgba(94, 234, 212, .08); color: var(--accent); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.pk-say .next:hover { background: rgba(94, 234, 212, .16); }
.pk-say .next kbd { min-width: 20px; height: 20px; font-size: .78rem; border-bottom-width: 2px; border-radius: 5px; }

/* El mismo aire entre todas las secciones, medido entre lo último que se ve de una y el título de la siguiente. */
main > section:not(.hero), main > section#more { padding: 84px 0; }
main > section#more { padding-bottom: 111px; }
@media (max-width: 760px) { main > section:not(.hero), main > section#more { padding: 72px 0; } main > section#more { padding-bottom: 96px; } }

/* El aviso cuando Little Bit quedó esperando fuera de pantalla: arriba de la barra del juego, sin tapar la lectura. */
.pk-away { position: fixed; right: 18px; bottom: 76px; z-index: 24; width: min(300px, calc(100vw - 36px)); padding: 12px 14px; border: 1px solid var(--accent-line); border-radius: 12px; background: rgba(11, 17, 32, .94); backdrop-filter: blur(8px); color: var(--text); font-size: .86rem; line-height: 1.45; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .35s, transform .35s; }
.pk-away.on { opacity: 1; pointer-events: auto; transform: none; }
.pk-away p { margin: 0 0 10px; }
.pk-away div { display: flex; gap: 8px; }
.pk-away button { height: 30px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: transparent; color: var(--text-2); font: inherit; font-size: .8rem; cursor: pointer; }
.pk-away .back { border-color: var(--accent-line); color: var(--accent); }
.pk-away button:hover { background: var(--accent-tint); }
@media (max-width: 760px) { .pk-away { right: 16px; bottom: 150px; } }


/* En el celu los globos de Little Bit son angostos y se ajustan al texto: no ocupan todo el ancho. */
@media (max-width: 760px) { .pk-say { width: max-content; max-width: min(250px, 72vw); } .pk-hint { white-space: normal; max-width: min(210px, 62vw); text-align: center; line-height: 1.45; } }

/* La presentación entra entera en la primera pantalla, en cualquier alto: la cara se achica según el alto visible
   (svh, sin las barras del navegador) y deja lugar al texto y a la flecha de abajo. En el celu usa todo el ancho. */
.portrait canvas:not(.portrait-ink) { max-width: min(620px, calc(100vh - 210px)); max-width: min(620px, calc(100svh - 210px)); }
@media (max-width: 760px) {
  .hero { min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); padding: 8px 0 84px; gap: 4px; align-content: center; }
  .portrait canvas:not(.portrait-ink) { max-width: min(400px, 100%, calc(100vh - 380px)); max-width: min(400px, 100%, calc(100svh - 380px)); min-width: 200px; }
}

/* En pantallas táctiles no hay inclinación 3D (es un efecto del mouse). En iPhone, Safari dibuja lo que tiene
   transformación 3D por encima de todo, aunque tenga menos z-index: tapaba los globos de Little Bit. */
@media (hover: none) { .glass-live, .card.glass-live:hover, html.js .reveal.in .glass-live, html.js .reveal.in .glass-live:hover, .fold summary.glass-tilt { transform: translateY(var(--lift, 0px)) !important; } }

/* En el celu los globos de Little Bit son más chicos: acompañan sin tapar. */
@media (max-width: 760px) { .pk-hint { font-size: .62rem; padding: 3px 8px; border-radius: 8px; max-width: min(180px, 55vw); } .pk-bubble { height: 28px; padding: 0 11px; font-size: 12px; border-radius: 9px; } .pk-say { font-size: .8rem; padding: 10px 12px; } }

/* El cursor propio: un círculo de vidrio que crece sobre lo que se puede tocar, con un punto en el centro que marca
   exactamente dónde apunta. Va pegado al puntero, sin inercia: con inercia quedaba atrás y se sentía impreciso. */
@media (hover: hover) and (pointer: fine) {
  html.soft-cursor, html.soft-cursor * { cursor: none !important; }
  .cursor { position: fixed; left: 0; top: 0; z-index: 9999; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: rgba(241, 245, 249, .06); border: 1px solid rgba(241, 245, 249, .55); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35), inset 0 -1px 2px rgba(0, 0, 0, .18), 0 2px 10px rgba(0, 0, 0, .25); pointer-events: none; transition: width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease), background .25s var(--ease), opacity .2s; will-change: transform; }
  .cursor::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: #5eead4; box-shadow: 0 0 6px rgba(94, 234, 212, .9); }
  .cursor.on-link { width: 42px; height: 42px; margin: -21px 0 0 -21px; background: rgba(241, 245, 249, .1); border-color: rgba(241, 245, 249, .7); }
  .cursor.down { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: rgba(241, 245, 249, .18); }
  .cursor.gone { opacity: 0; }
  .spark { position: fixed; z-index: 9999; width: 8px; height: 8px; margin: -4px 0 0 -4px; pointer-events: none; background: var(--c, #5eead4); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 3px var(--c, #5eead4)); animation: spark-out .6s ease-out forwards; }
  @keyframes spark-out { from { opacity: .9; transform: translate(0, 0) scale(1) rotate(0deg); } to { opacity: 0; transform: translate(var(--dx, 0), 10px) scale(.2) rotate(90deg); } }
}

/* Celu: cada parada del juego entra entera entre el menú y los botones. Las cifras van en una sola fila y,
   mientras se juega, la línea de herramientas se guarda (está completa en cada caso). */
@media (max-width: 420px) {
  .card.big .nums { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; margin-bottom: 18px; }
  .card.big .nums b { font-size: 1.3rem; }
  .card.big .nums li { font-size: .74rem; line-height: 1.35; }
}
@media (max-width: 760px) { .playing .card p.tools, .playing .card.big .more { display: none; } }
@media (max-width: 760px) {
  .playing .card.big, .playing .projects .card { padding-top: 22px; padding-bottom: 16px; }
  .playing .slides .track { aspect-ratio: 16 / 8; }
  .playing .slides .slide svg { max-height: 100%; }
}
/* Celu: los diagramas de los casos, un poco más juntos, para que cada sección entre en una pantalla. */
@media (max-width: 760px) { .article .flow { gap: 12px; margin: 20px 0 12px; } }
/* En pantallas táctiles no hay teclado: el ↵ de los botones del diálogo no dice nada ahí. */
@media (hover: none) { .pk-say .next kbd, button kbd { display: none; } }

/* Notas fuera del trabajo: al final de todo, sin peso visual */
.notes { padding-bottom: 72px; }
.notes .cred { white-space: normal; }
/* La nota fuera del trabajo: una tarjeta con su foto, para que se vea sin competir con los proyectos */
.note-card { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; align-items: center; }
.note-card .note-shot { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: right center; border-radius: 12px; display: block; }
.note-card h3 { margin: 8px 0 10px; }
.note-card .more { margin-top: 14px; display: inline-block; }
@media (max-width: 760px) { .note-card { grid-template-columns: 1fr; gap: 16px; } .note-card .note-shot { aspect-ratio: 4 / 3; } }
/* Notas, como Wikipedia: el relato corre en una columna ancha y las fotos van en un recuadro a la derecha,
   con su pie abajo, y el texto las rodea. Los diagramas ocupan la columna entera. */
.notes-article p, .notes-article li { text-align: left; }
.notes-article ol { padding-left: 2.2em; }
.article .thumb { float: right; clear: right; width: clamp(300px, 28vw, 480px); margin: 4px 0 18px 28px; padding: 6px; border: 1px solid var(--border); border-radius: 6px; background: rgba(11, 17, 32, .7); }
.article .thumb.two { width: clamp(380px, 36vw, 640px); display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.article .thumb.two:has(.note-fig:nth-child(3)) { width: clamp(440px, 42vw, 760px); grid-template-columns: repeat(3, 1fr); }
.article .thumb .note-fig { margin: 0; }
.article .thumb .note-fig a { display: block; }
.article .thumb img { display: block; width: 100%; height: auto; max-height: 440px; object-fit: contain; border-radius: 3px; }
.article .thumb.two img { aspect-ratio: 4 / 3; max-height: none; object-fit: cover; }
.article .thumb figcaption { padding: 8px 4px 2px; font-size: .84rem; line-height: 1.4; color: var(--muted); }
/* Los diagramas van centrados y a lo ancho, debajo de las fotos que haya arriba */
.article .note-wide { clear: both; margin: 28px auto; max-width: 1000px; }
.article .note-wide img { display: block; width: 100%; height: auto; border-radius: 10px; }
.article .note-wide figcaption { margin-top: 8px; font-size: .78rem; color: var(--muted); }
.notes-article .note-tables, .notes-article .article-end { clear: both; }
@media (min-width: 1000px) {
  .article.notes-article { display: block; max-width: min(1500px, 92vw); }
  .notes-article > h2 { display: block; margin-top: 64px; margin-bottom: 16px; padding: 0 0 10px; font-size: 1.6rem; border-bottom: 1px solid var(--border); }
  .notes-article > h2 + * { margin-top: 0; }
  .notes-article p, .notes-article li { font-size: 1.06rem; line-height: 1.75; }
  .notes-article .note-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
}
@media (max-width: 760px) {
  .article .thumb, .article .thumb.two, .article .thumb.two:has(.note-fig:nth-child(3)) { float: none; width: auto; margin: 18px 0; }
  .article .thumb img { max-height: 46vh; }
  .article .thumb figcaption { font-size: .74rem; line-height: 1.35; padding: 6px 2px 0; }
}
/* Las listas se leen como una ficha: fondo propio que las separa del cielo, la pieza chica a la izquierda y el modelo en primer plano */
.article .note-table { overflow-x: auto; margin: 14px 0; padding: 6px 20px; border-radius: 16px; background: rgba(11, 17, 32, .82); border: 1px solid var(--border); }
.article .note-table table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.article .note-table th, .article .note-table td { text-align: left; padding: 11px 10px; border-bottom: 1px solid rgba(148, 163, 184, .1); vertical-align: top; }
.article .note-table tr:last-child td { border-bottom: 0; }
.article .note-table th { font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.note-tables .note-table td:first-child { font-family: var(--mono); font-size: .76rem; color: var(--accent); white-space: nowrap; padding-top: 13px; }
.note-tables .note-table td:nth-child(2) { color: var(--text); }
.note-tables .note-table td:nth-child(3) { color: var(--muted); font-size: .86rem; }
.article ol { padding-left: 22px; }

/* El juego es opcional: un botón discreto debajo de la presentación, que desaparece mientras se juega */
/* Lo que sigue al nombre espera a que termine de escribirse la línea de abajo */
.hero .intro.wait > p:not(.roles), .hero .intro.wait > .pk-play { opacity: 0; translate: 0 6px; transition: opacity .6s ease, translate .6s ease; }
.hero .intro.wait.done > p:not(.roles), .hero .intro.wait.done > .pk-play { opacity: 1; translate: 0 0; }
.hero .intro.wait:not(.done) > .pk-play { pointer-events: none; }
.hero .intro.wait.done > .pk-play { transition-delay: .15s; }
.pk-play { transition: opacity .6s ease, translate .6s ease, color .2s; }
.pk-play { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 0; border: 0; background: none; color: var(--muted); font: 500 .82rem var(--mono); cursor: pointer; transition: color .2s; }
.pk-play svg { width: 15px; height: 15px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pk-play svg circle { fill: var(--accent); stroke: none; }
.pk-play:hover, .pk-play:focus-visible { color: var(--accent); }
.playing .pk-play { visibility: hidden; }

/* El visor de fotos de las notas: la foto entera sobre la página oscurecida */
.note-lb { max-width: none; max-height: none; width: 100vw; height: 100dvh; margin: 0; padding: 0; border: 0; background: rgba(5, 8, 16, .92); color: var(--text); }
.note-lb::backdrop { background: transparent; }
.note-lb[open] { display: grid; place-items: center; }
.note-lb figure { margin: 0; padding: 56px 72px; display: grid; justify-items: center; gap: 12px; width: 100%; height: 100%; box-sizing: border-box; align-content: center; }
.note-lb img { max-width: 100%; max-height: calc(100dvh - 150px); object-fit: contain; border-radius: 8px; }
.note-lb figcaption { font-size: .9rem; color: var(--muted); text-align: center; }
.note-lb button { position: fixed; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: rgba(148, 163, 184, .1); color: var(--text); cursor: pointer; }
.note-lb button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.note-lb .lb-close { top: 16px; right: 16px; }
.note-lb .lb-prev { left: 16px; top: 50%; translate: 0 -50%; }
.note-lb .lb-next { right: 16px; top: 50%; translate: 0 -50%; }
@media (max-width: 760px) { .note-lb figure { padding: 64px 12px; } .note-lb .lb-prev, .note-lb .lb-next { top: auto; bottom: 20px; translate: none; } }
.article .thumb a { cursor: zoom-in; }

/* Lugar reservado para la foto del setup terminado */
.article .setup-soon .soon { display: grid; place-items: center; place-content: center; gap: 10px; aspect-ratio: 4 / 3; border: 1.5px dashed var(--border); border-radius: 6px; color: var(--muted); font-size: .9rem; text-align: center; padding: 16px; }
.article .setup-soon svg { width: 34px; height: 34px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; }

/* Jugar desde el menú: un joystick con su palabra, a la derecha de todo */
.nav-play { display: inline-flex; align-items: center; gap: 6px; height: 36px; margin-left: 2px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--accent); font: 500 .8rem var(--mono); cursor: pointer; transition: background .2s, border-color .2s; }
.nav-play svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav-play circle { fill: currentColor; stroke: none; }
.nav-play:hover, .nav-play:focus-visible { background: rgba(94, 234, 212, .08); }
.playing .nav-play { visibility: hidden; }
@media (max-width: 420px) { .nav-play span { display: none; } .nav-play { padding: 0 9px; } }

/* Educación sin desplegable: la lista a la vista, debajo del título */
.edu .list-label:first-child { margin-top: 8px; }

/* Notas, simétrico y sin bordes: todos los recuadros de fotos miden lo mismo y cierran contra el borde derecho del
   texto; las fotos van de a dos, y si queda una sola al final ocupa el ancho entero. Los diagramas van de borde a
   borde de la columna. Sin líneas en los títulos ni marcos en las fotos. */
.notes-article > h2 { border-bottom: 0 !important; padding-bottom: 0 !important; }
.article .thumb, .article .thumb.two, .article .thumb.two:has(.note-fig:nth-child(3)) { padding: 0; border: 0; background: none; border-radius: 0; }
.article .thumb img { border-radius: 8px; }
.article .thumb figcaption { padding: 6px 0 0; }
@media (min-width: 1000px) {
  .article .thumb, .article .thumb.two, .article .thumb.two:has(.note-fig:nth-child(3)) { width: 38%; margin: 6px 0 22px 40px; }
  .article .thumb.two, .article .thumb.two:has(.note-fig:nth-child(3)) { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
  .article .thumb.two .note-fig:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .article .thumb.two .note-fig:last-child:nth-child(odd) img { aspect-ratio: 16 / 9; }
  .article .note-wide { max-width: none; margin: 32px 0; }
}

/* Productos: todos en una fila cuando entran, usando el ancho de la pantalla; uno por fila en pantallas angostas */
@media (min-width: 1000px) {
  .projects.four { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .projects.four .card p { text-align: left; }
}
@media (max-width: 999px) { .projects.four { grid-template-columns: 1fr; } }

/* Notas: dos por fila, foto arriba y texto abajo, todas del mismo tamaño; una por fila en el celu */
.note-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.note-grid .note-card { display: flex; flex-direction: column; gap: 0; }
.note-grid .note-card .note-shot { aspect-ratio: 16 / 9; object-position: center; border-radius: 12px; margin-bottom: 18px; }
.note-grid .note-card p { text-align: left; }
.note-grid .note-card .more { margin-top: auto; padding-top: 14px; }
.note-grid .note-body { display: flex; flex-direction: column; flex: 1; }
@media (max-width: 760px) { .note-grid { grid-template-columns: 1fr; } }
.note-grid .note-card .kind { display: block; text-align: left; margin-bottom: 6px; }
.note-grid .note-card h3 { font-size: 1.05rem; line-height: 1.35; }
@media (min-width: 1300px) { .note-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .note-grid .note-card { padding: 20px; } .note-grid .note-card .note-shot { aspect-ratio: 4 / 3; } }

/* Tablas de números: la última columna es el resultado, alineado a la derecha como en una planilla */
.notes-article .note-table:not(.note-tables .note-table) td, .notes-article .note-table:not(.note-tables .note-table) th { color: var(--muted); }
.notes-article .note-table:not(.note-tables .note-table) td:first-child { color: var(--text); }
.notes-article .note-table:not(.note-tables .note-table) td:not(:first-child), .notes-article .note-table:not(.note-tables .note-table) th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
/* Galería a lo ancho para las secciones con poco texto y varias fotos */
.article .note-gallery { clear: both; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 14px; margin: 24px 0 8px; }
.article .note-gallery .note-fig { margin: 0; }
.article .note-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
.article .note-gallery figcaption { margin-top: 8px; font-size: .84rem; color: var(--muted); }
@media (max-width: 760px) { .article .note-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Simetría: todas las fotos al costado del texto con el mismo ancho y la misma proporción, llenando su recuadro.
   La foto entera se ve al tocarla. */
@media (min-width: 1000px) {
  .notes-article .thumb img, .notes-article .thumb.two img { width: 100%; aspect-ratio: 4 / 3; max-height: none; object-fit: cover; border-radius: 8px; }
}
/* Las filas de fotos tienen siempre el mismo tamaño de foto (un tercio del ancho), centradas: dos fotos no se agrandan */
@media (min-width: 761px) {
  .article .note-gallery { grid-template-columns: repeat(var(--n, 3), calc((100% - 28px) / 3)); justify-content: center; }
  .article .note-gallery[style*="--n:4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Filas de fotos: cada foto mide un tercio del ancho (un cuarto si son cuatro) y las filas incompletas van centradas */
@media (min-width: 761px) {
  .article .note-gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
  .article .note-gallery .note-fig { flex: 0 0 calc((100% - 28px) / 3); }
  .article .note-gallery[style*="--n:4"] .note-fig { flex-basis: calc((100% - 42px) / 4); }
}
/* Una foto sola al costado es más apaisada, para que no cuelgue más allá de su tramo de texto */
@media (min-width: 1000px) { .notes-article .thumb:not(.two) img { aspect-ratio: 16 / 10; } }

/* Todas las secciones usan el mismo ancho en pantallas grandes: etiqueta, título y contenido arrancan en el mismo
   borde en toda la página, y el bloque queda centrado. */
@media (min-width: 1000px) {
  main > section:not(.hero) { margin-inline: calc((min(1140px, 90vw) - 100%) / -2); }
}
/* La tarjeta sola de IBM ocupa el ancho, pero su dibujo no crece sin límite */
@media (min-width: 1000px) { .flagship.solo .visual { width: 100%; max-width: 620px; margin-inline: auto; } .flagship.solo .visual svg { width: 100%; height: auto; } }
/* Jugando en compu, el tubo de Airflow baja por la izquierda de las notas: las tarjetas le dejan el lugar */
@media (min-width: 761px) { body.playing #notes .note-grid { margin-left: 130px; } }

/* Productos: arriba a la derecha, el repo de presentación y la app, por encima del enlace que cubre la tarjeta */
.card .out { display: inline-flex; align-items: center; gap: 4px; }
.card .out .kind { margin-right: 6px; }
.card .ico { position: relative; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--muted); transition: color .2s, background .2s; }
.card .ico svg { width: 16px; height: 16px; }
.card .ico:hover, .card .ico:focus-visible { color: var(--accent); background: rgba(94, 234, 212, .1); text-decoration: none; }

/* Los dibujos de las tarjetas no crecen más que el texto que acompañan: sin sensación de zoom en pantallas grandes */
@media (min-width: 1000px) { .card .visual svg.viz { max-width: 620px; margin-inline: auto; display: block; } }

/* En compu todo un poco más chico, a la escala que se ve en la vista previa: menos sensación de zoom */
@media (min-width: 1000px) { html { font-size: 14px; } body { font-size: 14.5px; } }