.hero{
  position:relative;
  padding:1.75rem 0 3rem;
  display:flex; align-items:center;
  overflow:hidden;
}
.hero__caja{ display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center; }
@media (max-width:860px){ .hero__caja{ grid-template-columns:1fr; } }

@media (max-width:560px){
  .contenedor{ width:min(100% - 28px, var(--ancho-max)); }
  .hero{ padding:1.5rem 0 2rem; min-height:auto; }
  .hero__titulo{ font-size:clamp(1.85rem,8.2vw,2.5rem); line-height:1.05; }
  .hero__sub{ font-size:.95rem; }
  .hero__cta{
    margin-top:1.4rem;
    flex-direction:column;
    align-items:stretch;
  }
  .hero__cta .boton,
  .hero__cta .pata-wrap,
  .hero__cta .pata-wrap > .boton{
    width:100%;
    justify-content:center;
  }
}

.hero__etiqueta{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.78rem; color:var(--acento);
  border:1px solid var(--linea); border-radius:999px;
  padding:.4rem .9rem; margin-bottom:1.4rem;
}
.hero__etiqueta .punto{
  width:8px; height:8px; border-radius:50%; background:var(--lima);
  animation:latido 1.6s ease-in-out infinite;
}
@keyframes latido{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

.hero__titulo{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.4rem,6vw,4.6rem); line-height:1.02;
  letter-spacing:-.03em;
}
.hero__titulo .palabra{ display:inline-block; }
.hero__titulo em{ font-style:normal; color:var(--acento); position:relative; }
.hero__sub{
  margin-top:1.4rem; font-size:clamp(1rem,2vw,1.2rem);
  color:var(--tinta-suave); max-width:46ch;
}
.hero__cta{ margin-top:2.2rem; display:flex; gap:1rem; flex-wrap:wrap; }

.hero__mascota{ display:flex; justify-content:center; align-items:center; }
.mascota-escena{
  width:min(460px,100%); aspect-ratio:1; position:relative;
  animation:flota 4.5s ease-in-out infinite;
}
#mascota{ overflow:visible; cursor:pointer; }
#mascota:active{ transform:scale(.97); }

@keyframes flota{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }

#cuerpo{
  transform-box:fill-box; transform-origin:center bottom;
  animation:respira 3.8s ease-in-out infinite;
}
@keyframes respira{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.012,1.03)} }

#ojoIzq, #ojoDer{
  transform-box:fill-box; transform-origin:center;
  transition:transform .09s ease;
}
#mascota.parpadea #ojoIzq,
#mascota.parpadea #ojoDer{ transform:scaleY(.08); }

#bocaAbierta, #bocaCerrada{ transition:opacity .18s ease; }
#mascota.habla #bocaCerrada{ opacity:0; }
#mascota.habla #bocaAbierta{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  .mascota-escena, #cuerpo{ animation:none; }
}

.seccion{ padding:4rem 0; }
.seccion__cabecera{ max-width:640px; margin-bottom:2.6rem; }
.seccion__kicker{
  font-family:var(--mono); font-size:.8rem; color:var(--acento);
  text-transform:uppercase; letter-spacing:.12em;
}
.seccion__titulo{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.8rem,4vw,2.8rem); letter-spacing:-.02em; margin-top:.6rem;
}
.seccion__texto{ color:var(--tinta-suave); margin-top:.8rem; }

.rejilla{
  display:grid; gap:1.4rem;
  grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
}

.demo{
  position:relative; border:1px solid var(--linea); border-radius:var(--radio);
  background:var(--papel-2); overflow:hidden;
  transition:border-color var(--transicion), transform var(--transicion);
}
.demo:hover{ border-color:color-mix(in srgb,var(--acento) 45%,var(--linea)); }

.demo__num{
  position:absolute; top:1rem; right:1.2rem;
  font-family:var(--mono); font-size:.78rem; color:var(--tenue);
}

.demo__lienzo{
  height:200px; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb,var(--acento) 8%,transparent), transparent 70%),
    var(--papel-2);
  border-bottom:1px solid var(--linea);
}

.demo__cuerpo{ padding:1.2rem 1.4rem 1.4rem; }
.demo__tag{ font-family:var(--mono); font-size:.72rem; color:var(--acento); }
.demo__titulo{ font-family:var(--display); font-weight:700; font-size:1.15rem; margin:.35rem 0 .5rem; }
.demo__desc{ font-size:.92rem; color:var(--tinta-suave); }

.demo__toggle{
  margin-top:1rem; font-family:var(--mono); font-size:.76rem;
  color:var(--tinta-suave); display:inline-flex; align-items:center; gap:.4rem;
  border:1px solid var(--linea); border-radius:var(--radio-sm); padding:.4rem .8rem;
  transition:var(--transicion);
}
.demo__toggle:hover{ color:var(--tinta); border-color:var(--tinta-suave); }
.demo__codigo{
  max-height:0; overflow:hidden; transition:max-height .5s ease;
}
.demo__codigo.abierto{ max-height:420px; }
.demo__codigo pre{
  margin-top:1rem; background:var(--papel); border:1px solid var(--linea);
  border-radius:var(--radio-sm); padding:1rem; overflow-x:auto;
  font-family:var(--mono); font-size:.76rem; line-height:1.7; color:var(--tinta-suave);
}
.demo__codigo .k{ color:var(--acento); }
.demo__codigo .c{ color:var(--tenue); }

.fondo-anim{ position:relative; }
#buho-arma{ min-height:260vh; }
#codigo-junta{ min-height:220vh; }
.fondo-anim__pin{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2.5rem; text-align:center; padding:3rem 0;
}
@media (prefers-reduced-motion:reduce){
  #buho-arma, #codigo-junta{ min-height:auto; }
  .fondo-anim__pin{ position:static; height:auto; padding:5rem 0; }
}
.fondo-anim__caja{ max-width:580px; }
.fondo-anim__stage{ display:flex; align-items:center; justify-content:center; width:100%; }
#buhoArma{ width:min(400px,72vw); height:auto; overflow:visible; }

#buhoArma > *{ transform-box:fill-box; transform-origin:center; }
.cj-palabra{
  font-family:var(--mono); font-weight:700; color:var(--acento);
  font-size:clamp(2.6rem,11vw,7rem); letter-spacing:-.02em; display:flex;
}
.cj-palabra span{ display:inline-block; will-change:transform; }

.owl-mini{ width:130px; height:130px; overflow:visible; }

.tw-demo{ font-family:var(--mono); font-weight:700; font-size:1.4rem; 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:150px; height:150px; perspective:800px; }
.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{ 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:1rem;
}
.flip__frente{ background:linear-gradient(135deg,var(--acento),#0e8497); }
.flip__atras{ background:linear-gradient(135deg,var(--violeta),#4a3fd6); transform:rotateY(180deg); }

.demo__link{
  margin-top:1.1rem; display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-weight:700; font-size:.78rem; color:var(--acento);
}
.demo__link span{ transition:transform .25s; }
.demo__link:hover span{ transform:translateX(5px); }

.iman{
  padding:.9rem 1.6rem; border-radius:999px; background:var(--acento); color:#fff;
  font-family:var(--mono); font-weight:700; font-size:.85rem; will-change:transform;
}

.tilt{
  width:150px; height:150px; 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-size:.8rem;
  transform-style:preserve-3d; will-change:transform;
}
.tilt span{ transform:translateZ(30px); }

.spot{
  position:absolute; inset:0;
  background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb,var(--acento) 35%,transparent), transparent 60%);
  opacity:0; transition:opacity .4s;
}
.demo__lienzo:hover .spot{ opacity:1; }
.spot-texto{ font-family:var(--display); font-weight:700; font-size:1.4rem; color:var(--tinta); position:relative; }

.revela{ font-family:var(--display); font-weight:700; font-size:1.6rem; cursor:default; }
.revela span{
  display:inline-block; transition:transform .35s cubic-bezier(.22,.61,.36,1), color .35s;
}
.revela:hover span{ transform:translateY(-8px); color:var(--acento); }

.mini-seguidor{
  width:16px; height:16px; border-radius:5px; pointer-events:none;
}

.onda{
  position:relative; overflow:hidden;
  padding:.9rem 1.6rem; border-radius:var(--radio-sm);
  background:var(--tinta); color:var(--papel);
  font-family:var(--mono); font-weight:700; font-size:.85rem;
}
.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-anim .6s ease-out forwards;
}
@keyframes onda-anim{ to{ transform:translate(-50%,-50%) scale(12); opacity:0; } }

.scramble{ font-family:var(--mono); font-weight:700; font-size:1.9rem; letter-spacing:.12em; color:var(--tinta); cursor:default; }

.contador{ text-align:center; }
.contador__num{ font-family:var(--display); font-weight:700; font-size:3rem; color:var(--acento); display:block; line-height:1; }
.contador__cap{ font-family:var(--mono); font-size:.78rem; color:var(--tenue); }

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

.confeti-btn{
  padding:.9rem 1.6rem; border-radius:999px; background:var(--violeta); color:#fff;
  font-family:var(--mono); font-weight:700; font-size:.85rem;
}
.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; }
}

.avatar__comparativa{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-bottom:2.5rem; }
@media (max-width:640px){ .avatar__comparativa{ grid-template-columns:1fr; } }
.avatar__demo{ border:1px solid var(--linea); border-radius:var(--radio); background:var(--papel-2); overflow:hidden; }
.avatar__lienzo{
  height:230px; 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);
}
.mini-gato{ width:180px; height:180px; overflow:visible; }
.avatar__etq{ display:block; font-size:.78rem; color:var(--acento); padding:1rem 1.2rem 0; }
.avatar__nota{ font-size:.9rem; color:var(--tinta-suave); padding:.3rem 1.2rem 1.2rem; }

.avatar__lib{
  display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center;
  border:1px solid var(--linea); border-radius:var(--radio); padding:2rem; background:var(--papel-2);
}
@media (max-width:760px){ .avatar__lib{ grid-template-columns:1fr; } }
.avatar__lib h3{ font-family:var(--display); font-weight:700; font-size:1.4rem; margin:.4rem 0 .8rem; }
.avatar__lib p{ color:var(--tinta-suave); }
.avatar__lib b{ color:var(--acento); font-weight:500; }
.avatar__pasos{ margin:1rem 0 1.2rem 1.1rem; color:var(--tinta-suave); font-size:.92rem; line-height:1.9; }
.avatar__pasos a{ color:var(--acento); text-decoration:underline; }
.avatar__lib-demo{
  position:relative; aspect-ratio:1; border-radius:var(--radio); overflow:hidden;
  background:color-mix(in srgb,var(--violeta) 10%,var(--papel));
  display:flex; align-items:center; justify-content:center;
}
#riveLienzo{ width:100%; height:100%; display:block; }
.avatar__aviso{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:1.5rem; gap:.5rem;
}
.avatar__aviso .ic{ font-size:2.4rem; }
.avatar__aviso strong{ font-family:var(--display); }
.avatar__aviso p{ font-size:.85rem; color:var(--tinta-suave); }

.mini-texto-glow{
  position:relative;
  display:inline-block;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.6rem, 5vw, 2.1rem);
  letter-spacing:-.03em;
  line-height:1;
  cursor:default;
  user-select:none;
}
.mini-texto-glow__base{
  color: color-mix(in srgb, var(--tinta) 40%, transparent);
}
.mini-texto-glow__luz{
  position:absolute; inset:0;
  color:transparent;
  background: radial-gradient(
    90px circle at var(--mx, 50%) var(--my, 50%),
    var(--acento) 0%,
    color-mix(in srgb, var(--acento) 50%, #fecb68) 40%,
    transparent 72%
  );
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events:none;
}
.mini-texto-glow b{ font-weight:700; }

.mini-toast{
  padding:.85rem 1.2rem; border-radius:var(--radio-sm);
  background:var(--tinta); color:var(--papel);
  font-family:var(--mono); font-size:.8rem; font-weight:700;
  cursor:grab; user-select:none; touch-action:none;
}
.mini-toast:active{ cursor:grabbing; }

.mini-marquee{
  width:100%; overflow:hidden; mask-image:linear-gradient(90deg,transparent, #000 12%, #000 88%, transparent);
}
.mini-marquee__track{
  display:flex; width:max-content;
  animation:miniMarquee 12s linear infinite;
  font-family:var(--mono); font-weight:700; font-size:1rem; color:var(--acento);
}
.mini-marquee__track span{ padding-right:1rem; white-space:nowrap; }
@keyframes miniMarquee{ to{ transform:translateX(-50%); } }

.mini-skel{ width:70%; display:flex; flex-direction:column; gap:.6rem; }
.mini-skel__line, .mini-skel__avatar{
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--tenue) 25%,var(--papel-2)),
    color-mix(in srgb,var(--tenue) 12%,var(--papel-2)),
    color-mix(in srgb,var(--tenue) 25%,var(--papel-2)));
  background-size:200% 100%;
  animation:skelShimmer 1.2s ease-in-out infinite;
  border-radius:8px;
}
.mini-skel__line{ height:14px; width:100%; }
.mini-skel__line.short{ width:55%; }
.mini-skel__avatar{ width:48px; height:48px; border-radius:50%; margin-top:.4rem; }
@keyframes skelShimmer{ to{ background-position:-200% 0; } }

@media (prefers-reduced-motion:reduce){
  .mini-marquee__track, .mini-skel__line, .mini-skel__avatar{ animation:none; }
}
.avatar__aviso code{ font-family:var(--mono); font-size:.75rem; color:var(--acento); background:color-mix(in srgb,var(--acento) 12%,transparent); padding:.15rem .4rem; border-radius:4px; }

.codigo{
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio-sm);
  padding:1rem; overflow-x:auto; font-family:var(--mono); font-size:.76rem; line-height:1.7; color:var(--tinta-suave);
  margin-top:1rem;
}
.codigo .k{ color:var(--acento); }
.codigo .c{ color:var(--tenue); }

/* ============ Demos 18–22 (previews de galería) ============ */
/* 18 · Barra de progreso */
.mini-prog{ position:absolute; inset:0; }
.mini-prog__bar{
  position:absolute; top:0; left:0; height:5px; width:0; z-index:2;
  background:var(--acento); border-radius:0 3px 3px 0;
  transition:width .06s linear;
}
.mini-prog__doc{
  position:absolute; inset:0; overflow-y:auto; padding:1.6rem 1.4rem;
  font-family:var(--mono); color:var(--tenue); font-size:.95rem;
  line-height:2.6; text-align:center;
}
.mini-prog__doc p{ margin:0; }

/* 19 · Imán de partículas */
.mini-iman{ position:absolute; inset:0; width:100%; height:100%; }

/* pista compartida (canvas / goo / imán) */
.mini-hint{
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  color:var(--tenue); font-size:.7rem; pointer-events:none; z-index:2;
}

/* 20 · Morphing */
.mini-morph{ width:120px; height:120px; overflow:visible; }
.mini-morph__p{ fill:var(--acento); }

/* 21 · Parallax de capas */
.mini-plx{ position:absolute; inset:0; }
.mini-plx__c{
  position:absolute; border-radius:50%; will-change:transform;
  transition:transform .18s ease-out;
}
/* rgba de fallback antes de cada color-mix: en navegadores viejos las bolitas
   igual se ven con color en vez de quedar transparentes. */
.mini-plx__c[data-depth="0.03"]{ width:78px; height:78px; left:20%; top:22%;
  background:rgba(106,92,255,.32);
  background:color-mix(in srgb, var(--violeta) 32%, transparent); }
.mini-plx__c[data-depth="0.06"]{ width:48px; height:48px; right:22%; top:28%;
  background:rgba(240,102,47,.38);
  background:color-mix(in srgb, var(--coral) 38%, transparent); }
.mini-plx__c[data-depth="0.10"]{ width:32px; height:32px; left:40%; bottom:20%;
  background:rgba(23,162,184,.48);
  background:color-mix(in srgb, var(--acento) 48%, transparent); }
.mini-plx__txt{
  position:absolute; left:50%; top:44%; margin-left:-1.4em;
  font-family:var(--display); font-weight:700; font-size:1.7rem;
  color:var(--tinta); will-change:transform; transition:transform .18s ease-out;
}

/* 22 · Estela goo */
.mini-goo{ position:absolute; inset:0; width:100%; height:100%; }