.art-header{ padding:4rem 0 1.5rem; }
.art-kicker{
  font-family:var(--mono); font-size:.8rem; color:var(--acento);
  text-transform:uppercase; letter-spacing:.12em;
}
.art-titulo{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.2rem,6vw,3.6rem); letter-spacing:-.02em;
  line-height:1.04; margin:.7rem 0 1rem;
}
.art-sub{ font-size:clamp(1.05rem,2vw,1.3rem); color:var(--tinta-suave); max-width:60ch; }
.art-meta{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem; }
.art-meta span{
  font-family:var(--mono); font-size:.74rem; color:var(--tinta-suave);
  border:1px solid var(--linea); border-radius:999px; padding:.35rem .9rem;
}
.art-meta span b{ color:var(--acento); font-weight:700; }

.prosa{ max-width:720px; margin-inline:auto; }
.prosa h2{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.5rem,3vw,2rem); letter-spacing:-.01em; margin:2.6rem 0 1rem;
}
.prosa h3{ font-family:var(--display); font-weight:700; font-size:1.15rem; margin:1.6rem 0 .5rem; }
.prosa p{ color:var(--tinta-suave); margin-bottom:1rem; font-size:1.03rem; line-height:1.75; }
.prosa p b, .prosa li b{ color:var(--tinta); }
.prosa ul, .prosa ol{ color:var(--tinta-suave); margin:0 0 1.2rem 1.3rem; line-height:1.9; }
/* enlaces de texto en color acento — pero NO los botones (.boton), que
   tienen su propio color; si no, el botón primario queda teal sobre teal */
.prosa a:not(.boton){ color:var(--acento); text-decoration:underline; text-underline-offset:3px; }
.prosa code{
  font-family:var(--mono); font-size:.85em; color:var(--acento);
  background:color-mix(in srgb,var(--acento) 12%,transparent); padding:.1rem .4rem; border-radius:5px;
}

.codigo{
  background:var(--papel-2); border:1px solid var(--linea); border-radius:var(--radio-sm);
  padding:1.2rem; overflow-x:auto; font-family:var(--mono); font-size:.82rem;
  line-height:1.75; color:var(--tinta-suave); margin:1.2rem 0;
}
.codigo .k{ color:var(--acento); }
.codigo .c{ color:var(--tenue); }
.codigo b{ color:var(--coral); font-weight:700; }

.playground{
  border:1px solid var(--linea); border-radius:var(--radio); background:var(--papel-2);
  overflow:hidden; margin:2rem 0;
}
.playground__escena{
  height:320px; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  background:radial-gradient(circle at 50% 40%, color-mix(in srgb,var(--acento) 8%,transparent), transparent 70%);
  border-bottom:1px solid var(--linea);
}
.playground__pista{
  position:absolute; bottom:12px; left:0; right:0; text-align:center;
  font-family:var(--mono); font-size:.72rem; color:var(--tenue); pointer-events:none;
}
.pg-boton{
  padding:1.1rem 2.2rem; border-radius:999px; background:var(--acento); color:#fff;
  font-family:var(--mono); font-weight:700; font-size:1rem; will-change:transform;
}
.playground__controles{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; padding:1.6rem; }
@media (max-width:560px){ .playground__controles{ grid-template-columns:1fr; } }
.control label{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:.8rem; color:var(--tinta-suave); margin-bottom:.55rem;
}
.control label b{ color:var(--acento); font-weight:700; }
.control input[type=range]{ width:100%; accent-color:var(--acento); cursor:pointer; }

.pg-card{
  width:170px; height:170px; border-radius:var(--radio);
  background:linear-gradient(135deg,var(--acento),var(--violeta));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--mono); font-weight:700;
  transform-style:preserve-3d; will-change:transform;
}
.pg-card span{ transform:translateZ(36px); }
.lerp-seg{
  width:22px; height:22px; border-radius:7px; pointer-events:none;
}
.confeti{
  position:absolute; width:9px; height:9px; border-radius:2px; pointer-events:none;
  transform:translate(-50%,-50%); animation:confeti-vuela .8s ease-out forwards;
}
@keyframes confeti-vuela{
  to{ transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(320deg); opacity:0; }
}

.pg-foco{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(var(--foco,160px) circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb,var(--acento) 40%,transparent), transparent 62%);
}
.pg-foco-texto{ font-family:var(--display); font-weight:700; font-size:1.8rem; color:var(--tinta); position:relative; }

.art-revela{ font-family:var(--display); font-weight:700; font-size:clamp(2rem,7vw,3.2rem); cursor:default; letter-spacing:-.01em; }
.art-revela span{ display:inline-block; transition:transform .3s cubic-bezier(.22,.61,.36,1), color .3s; }
.art-revela:hover span{ transform:translateY(var(--salto,-10px)); color:var(--acento); }

.pg-onda{
  position:relative; overflow:hidden; padding:1.1rem 2.2rem; border-radius:var(--radio-sm);
  background:var(--tinta); color:var(--papel); font-family:var(--mono); font-weight:700; font-size:1rem;
}
.pg-onda .circulo{
  position:absolute; width:20px; height:20px; border-radius:50%;
  background:var(--papel); opacity:.5;
  transform:translate(-50%,-50%) scale(0); pointer-events:none;
  animation:onda-art .6s ease-out forwards;
}
@keyframes onda-art{ to{ transform:translate(-50%,-50%) scale(var(--escala,9)); opacity:0; } }

.art-scramble{ font-family:var(--mono); font-weight:700; font-size:2.1rem; letter-spacing:.14em; color:var(--tinta); }

.art-contador{ font-family:var(--display); font-weight:700; font-size:3.6rem; color:var(--acento); line-height:1; }

.pg-dock{ display:flex; gap:14px; align-items:flex-end; height:70px; }
.pg-dock span{
  width:30px; height:30px; border-radius:9px; will-change:transform;
  background:linear-gradient(135deg,var(--acento),var(--violeta));
  transform-origin:bottom center; transition:transform .12s ease;
}

.tw-demo{ font-family:var(--mono); font-weight:700; font-size:1.8rem; color:var(--tinta); min-height:1.6em; }
.tw-demo::after{ content:'|'; color:var(--acento); margin-left:2px; animation:tw-cursor 1s steps(1) infinite; }
@keyframes tw-cursor{ 50%{ opacity:0; } }

.flip{ width:180px; height:180px; perspective:900px; }
.flip__in{ position:relative; width:100%; height:100%; transition:transform .6s cubic-bezier(.22,.61,.36,1); transform-style:preserve-3d; }
.flip:hover .flip__in,
.flip.flip--volteada .flip__in{ transform:rotateY(180deg); }
.flip__cara{
  position:absolute; inset:0; backface-visibility:hidden; border-radius:var(--radio);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--mono); font-weight:700; font-size:1.1rem;
}
.flip__frente{ background:linear-gradient(135deg,var(--acento),#0e8497); }
.flip__atras{ background:linear-gradient(135deg,var(--violeta),#4a3fd6); transform:rotateY(180deg); }

.art-fin{
  max-width:720px; margin:3.5rem auto 0; padding-top:2rem;
  border-top:1px solid var(--linea); display:flex; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; align-items:center;
}

/* Nivel 3 · búho completo (reutiliza .mascota-escena de galeria.css) */
.nivel3-demo{ display:flex; justify-content:center; margin:1.6rem auto .5rem; }
.nivel3-demo .mascota-escena{ width:min(300px,78%); }

/* Bloque "¿Dónde lo has visto?" — contexto real de uso + por qué funciona.
   Cierra cada mini curso conectando la técnica con productos reales. */
.mc-donde{
  margin: 2.4rem 0 .5rem;
  padding: 1.2rem 1.35rem;
  border-left: 3px solid var(--acento);
  background: var(--papel-2);
  background: color-mix(in srgb, var(--acento) 6%, var(--papel-2));
  border-radius: 0 12px 12px 0;
}
.mc-donde h3{
  margin: 0 0 .4rem; font-family: var(--display); font-weight: 700;
  font-size: 1.05rem; letter-spacing: -.01em;
}
.mc-donde p{ margin: 0; color: var(--tinta-suave); line-height: 1.65; }
.mc-donde p b{ color: var(--tinta); font-weight: 600; }