/* ===== aurora ===== */
/* Aurora · Moxen — los estilos del efecto y de la demostración. */
:root {
  --ar-fondo: #0a0a0a;
  --ar-texto: #f4f4f4;
  --ar-suave: rgba(255, 255, 255, .55);
  /* las cortinas de la aurora (r, g, b; las lee el JS): casi blancas,
     con un tinte frío apenas perceptible */
  --ar-luz-1: 196, 214, 226;
  --ar-luz-2: 236, 240, 238;
  --ar-luz-3: 176, 186, 214;
  --ar-mezcla: lighter;      /* cómo se suman las cortinas: la luz se acumula */
  --ar-estrella: #ffffff;
  --ar-cielo: #12151a;       /* el horizonte, un poco más claro que el cielo */
  --ar-grano: .07;
}
:root[data-tema="claro"] {
  --ar-fondo: #eeeeee;
  --ar-texto: #0a0a0a;
  --ar-suave: rgba(0, 0, 0, .55);
  --ar-luz-1: 60, 66, 76;
  --ar-luz-2: 20, 22, 26;
  --ar-luz-3: 90, 96, 112;
  --ar-mezcla: source-over;  /* en claro, la aurora es tinta que se posa */
  --ar-estrella: transparent;
  --ar-cielo: #f6f6f6;
  --ar-grano: .09;
}




/* ── el efecto ─────────────────────────────────────────────────────── */
[data-aurora] {
  position: relative; isolation: isolate; overflow: hidden;
  /* el cielo: más claro abajo, donde estaría el horizonte */
  background: linear-gradient(to top, var(--ar-cielo), var(--ar-fondo) 70%);
}
/* El lienzo se dibuja diminuto y el navegador lo agranda suavizando: el
   desenfoque sale gratis y cuesta casi nada por cuadro. */
.ar-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
.ar-estrellas { z-index: -3; }
/* un grano fino encima, para que el degradado no haga escalones */
[data-aurora]::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--ar-grano);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}


/* ===== dock ===== */
/* Dock · Moxen — los estilos del efecto y de la demostración. */
:root {
  --dk-fondo: #0a0a0a;
  --dk-texto: #f4f4f4;
  --dk-suave: rgba(255, 255, 255, .45);
  --dk-tam: 80px;               /* el ícono en reposo; el JS lo lee de aquí */
  --dk-hueco: 14px;
  --dk-aumento: 1.85;           /* cuánto crece el ícono bajo el cursor (lo lee el JS) */
  /* la barra: un vidrio ahumado, opaco para que sus tres piezas no se noten */
  --dk-barra-1: #1d1d1d;
  --dk-barra-2: #121212;
  --dk-barra-borde: rgba(255, 255, 255, .1);
  --dk-barra-filo: rgba(255, 255, 255, .09);
  --dk-sombra: rgba(0, 0, 0, .85);
  --dk-charco: rgba(255, 255, 255, .06);  /* la luz que la barra deja en el suelo */
  /* la etiqueta */
  --dk-etiqueta: rgba(28, 28, 28, .94);
  --dk-etiqueta-texto: #f4f4f4;
  --dk-etiqueta-borde: rgba(255, 255, 255, .12);
}
:root[data-tema="claro"] {
  --dk-fondo: #eeeeee;
  --dk-texto: #0a0a0a;
  --dk-suave: rgba(0, 0, 0, .45);
  --dk-barra-1: #fbfbfb;
  --dk-barra-2: #e4e4e4;
  --dk-barra-borde: rgba(0, 0, 0, .1);
  --dk-barra-filo: rgba(255, 255, 255, .9);
  --dk-sombra: rgba(0, 0, 0, .28);
  --dk-charco: rgba(255, 255, 255, .7);
  --dk-etiqueta: rgba(10, 10, 10, .92);
  --dk-etiqueta-texto: #f4f4f4;
  --dk-etiqueta-borde: rgba(0, 0, 0, 0);
}




/* ── el efecto ─────────────────────────────────────────────────────── */
/* La barra tiene alto fijo y los íconos crecen hacia arriba con un
   scale: nada cambia de tamaño en el layout, solo transform. */
.dk-dock {
  position: relative; display: inline-flex; align-items: flex-end; gap: var(--dk-hueco);
  height: calc(var(--dk-tam) + 28px); padding: 14px; touch-action: none;
}
/* El fondo crece con los íconos: dos mitades que se separan y una pieza
   central que se estira entre ellas (dock.js las mueve). */
.dk-fondo { position: absolute; inset: 0; pointer-events: none; }
.dk-fondo i {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background: linear-gradient(180deg, var(--dk-barra-1), var(--dk-barra-2));
  border: 1px solid var(--dk-barra-borde);
  box-shadow: inset 0 1px 0 var(--dk-barra-filo);
}
.dk-fondo .dk-izq { left: 0; border-right: 0; border-radius: 28px 0 0 28px; }
.dk-fondo .dk-der { right: 0; border-left: 0; border-radius: 0 28px 28px 0; }
.dk-fondo .dk-medio { left: 25%; border-left: 0; border-right: 0; border-radius: 0; }
/* la sombra va aparte, una sola, para que no se oscurezcan las uniones */
.dk-fondo .dk-sombra {
  left: 3%; width: 94%; top: 55%; bottom: -46px; border: 0; border-radius: 50%; box-shadow: none;
  background: radial-gradient(closest-side, var(--dk-sombra), transparent);
}
.dk-fondo .dk-charco {
  left: -10%; width: 120%; top: auto; bottom: -70px; height: 90px; border: 0; border-radius: 50%; box-shadow: none;
  background: radial-gradient(closest-side, var(--dk-charco), transparent);
}

.dk-item {
  position: relative; flex: none; width: var(--dk-tam); height: var(--dk-tam);
  padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  transform-origin: 50% 100%; -webkit-tap-highlight-color: transparent;
}
.dk-item:focus-visible { outline: none; }
.dk-salto { position: absolute; inset: 0; transform-origin: 50% 100%; }

/* la tesela: un ícono con material, filo de luz arriba y sombra de contacto */
.dk-tesela {
  position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border-radius: 23%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .35),
              0 1px 1px rgba(0, 0, 0, .35), 0 8px 18px -8px rgba(0, 0, 0, .8);
}
/* el brillo de barniz en la mitad de arriba */
.dk-tesela::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 48%);
}
.dk-tesela svg { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.dk-t-blanco { background: linear-gradient(180deg, #ffffff, #d4d4d4); color: #0a0a0a; box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, .18), 0 1px 1px rgba(0, 0, 0, .35), 0 8px 18px -8px rgba(0, 0, 0, .8); }
.dk-t-grafito { background: linear-gradient(180deg, #4a4a4a, #161616); color: #fff; }
.dk-t-negro { background: radial-gradient(120% 90% at 50% 0%, #2e2e2e, #070707 70%); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 1px rgba(0, 0, 0, .35), 0 8px 18px -8px rgba(0, 0, 0, .8); }
.dk-t-metal { background: radial-gradient(130% 100% at 30% 0%, #fafafa, #b9b9b9 45%, #7d7d7d); color: #111; }
.dk-t-vidrio {
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 18px -8px rgba(0, 0, 0, .8);
}
:root[data-tema="claro"] .dk-t-vidrio { background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .12)); color: #0a0a0a; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), inset 0 1px 0 rgba(255, 255, 255, .8), 0 8px 18px -8px rgba(0, 0, 0, .4); }
/* los trazos rellenos de cada dibujo */
.dk-relleno { fill: currentColor; stroke: none; }
.dk-relleno-claro { fill: #f4f4f4; stroke: none; }
.dk-punto { fill: #0a0a0a; stroke: none; }
.dk-lente { fill: rgba(255, 255, 255, .14); stroke: none; }
.dk-gris { fill: #8c8c8c; stroke: none; }
.dk-claro { fill: #ededed; stroke: none; }
.dk-flor ellipse { stroke: none; mix-blend-mode: multiply; }
.dk-flor ellipse:nth-child(1) { fill: #1a1a1a; } .dk-flor ellipse:nth-child(2) { fill: #333; }
.dk-flor ellipse:nth-child(3) { fill: #4d4d4d; } .dk-flor ellipse:nth-child(4) { fill: #666; }
.dk-flor ellipse:nth-child(5) { fill: #808080; } .dk-flor ellipse:nth-child(6) { fill: #999; }
.dk-flor ellipse:nth-child(7) { fill: #b3b3b3; } .dk-flor ellipse:nth-child(8) { fill: #cccccc; }
.dk-engranaje { transform: scale(1.14); }
.dk-dientes { stroke: #1a1a1a; stroke-width: 2.6; stroke-dasharray: 2.32 1.55; stroke-linecap: butt; }
.dk-rueda { fill: #1a1a1a; stroke: none; }
.dk-eje { fill: #d8d8d8; stroke: rgba(0, 0, 0, .5); stroke-width: .6; }
/* el calendario: una franja oscura con sus anillas y el día grande */
.dk-calendario i { position: absolute; left: 0; right: 0; top: 0; height: 27%; background: linear-gradient(180deg, #2b2b2b, #0e0e0e); }
.dk-calendario i::before, .dk-calendario i::after { content: ""; position: absolute; top: 34%; width: 7%; height: 32%; border-radius: 2px; background: #d9d9d9; }
.dk-calendario i::before { left: 30%; }
.dk-calendario i::after { right: 30%; }
.dk-calendario b { position: relative; top: 12%; font-size: calc(var(--dk-tam) * .42); font-weight: 600; letter-spacing: -.05em; line-height: 1; }

/* el aviso: una burbuja con el número, que entra y sale con rebote */
.dk-aviso {
  position: absolute; right: -9%; top: -9%; z-index: 2; min-width: 34%; height: 34%; padding: 0 6%;
  display: grid; place-items: center; border-radius: 999px;
  background: #f4f4f4; color: #0a0a0a; font-size: calc(var(--dk-tam) * .2); font-weight: 600; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--dk-barra-2), 0 4px 10px -2px rgba(0, 0, 0, .6);
  transform: scale(0); transition: transform .45s cubic-bezier(.5, 0, .75, 0);
}
.dk-aviso.is-visto { transform: scale(1); transition: transform .6s cubic-bezier(.34, 1.8, .5, 1); }
:root[data-tema="claro"] .dk-aviso { background: #0a0a0a; color: #f4f4f4; }

/* el punto de «abierta», en el vidrio bajo el ícono */
.dk-item::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
  background: var(--dk-texto); box-shadow: 0 0 6px 1px rgba(255, 255, 255, .35);
  transform: scale(0); transition: transform .5s cubic-bezier(.34, 1.8, .5, 1);
}
:root[data-tema="claro"] .dk-item::after { box-shadow: none; }
.dk-item.is-abierto::after { transform: scale(1); }

/* La etiqueta solo se ve en el ícono más cercano al cursor. Va dentro del
   ícono (que crece con scale) y dock.js le aplica la escala inversa, así
   que siempre queda encima y del mismo tamaño. */
.dk-nombre { position: absolute; left: 50%; bottom: calc(100% + 14px); width: 0; display: flex; justify-content: center; transform-origin: 50% 100%; pointer-events: none; }
.dk-nombre span {
  flex: none; padding: .42rem .8rem; border-radius: 10px; white-space: nowrap;
  background: var(--dk-etiqueta); color: var(--dk-etiqueta-texto); border: 1px solid var(--dk-etiqueta-borde);
  font-size: 1.02rem; font-weight: 500; letter-spacing: -.005em;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(8px) scale(.92); transform-origin: 50% 100%;
  transition: opacity .16s, transform .3s cubic-bezier(.22, 1, .36, 1);
}
.dk-item.is-cerca .dk-nombre span, .dk-item:focus-visible .dk-nombre span {
  opacity: 1; transform: none; transition: opacity .2s, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.dk-item.is-saltando .dk-nombre span { opacity: 0; transform: translateY(8px) scale(.92); transition: opacity .1s, transform .3s; }
.dk-item:focus-visible .dk-tesela { outline: 2px solid var(--dk-texto); outline-offset: 4px; }

.dk-separador {
  position: relative; flex: none; align-self: center; width: 1px; height: calc(var(--dk-tam) * .74);
  background: linear-gradient(transparent, var(--dk-barra-borde) 20%, var(--dk-barra-borde) 80%, transparent);
}


/* ===== latido ===== */
/* Latido · Moxen — los estilos del efecto y de la demostración. */
:root {
  --la-fondo: #0a0a0a;
  --la-texto: #f4f4f4;
  --la-suave: rgba(255, 255, 255, .42);
  --la-linea: rgba(255, 255, 255, .12);
  --la-cara-a: #1a1a1a;
  --la-cara-b: #0f0f0f;
  --la-brillo-borde: rgba(255, 255, 255, .08);
  --la-sombra: rgba(0, 0, 0, .85);
  /* el corazón y sus chispas; para un «me gusta» rojo, cambia estos dos */
  --la-corazon: #f4f4f4;
  --la-corazon-sombra: #a9a9a9;   /* el fondo del degradado del relleno */
}
:root[data-tema="claro"] {
  --la-fondo: #eeeeee;
  --la-texto: #0a0a0a;
  --la-suave: rgba(0, 0, 0, .45);
  --la-linea: rgba(0, 0, 0, .1);
  --la-cara-a: #ffffff;
  --la-cara-b: #f6f6f6;
  --la-brillo-borde: rgba(255, 255, 255, 1);
  --la-sombra: rgba(0, 0, 0, .18);
  --la-corazon: #0a0a0a;
  --la-corazon-sombra: #000000;
}




/* ── el efecto ─────────────────────────────────────────────────────── */
.la-boton {
  position: relative; display: inline-flex; align-items: center; gap: .5em;
  height: 148px; padding: 0 .95em 0 .72em; border: 0; border-radius: 74px;
  background: linear-gradient(var(--la-cara-a), var(--la-cara-b)); color: var(--la-texto); cursor: pointer;
  font: 500 3.4rem/1 "General Sans", system-ui, sans-serif; letter-spacing: -.04em;
  box-shadow: inset 0 1px 0 var(--la-brillo-borde), 0 0 0 1px var(--la-linea), 0 40px 70px -30px var(--la-sombra);
  transition: box-shadow .5s, transform .4s cubic-bezier(.22, 1, .36, 1);
  -webkit-tap-highlight-color: transparent;
}
.la-boton:hover { transform: translateY(-2px); }
.la-boton:active { transform: scale(.97); }
.la-boton:focus-visible { outline: 2px solid var(--la-texto); outline-offset: 8px; }
/* marcado: el contorno se enciende */
.la-boton.is-gusta { box-shadow: inset 0 1px 0 var(--la-brillo-borde), 0 0 0 1.5px var(--la-corazon), 0 40px 70px -30px var(--la-sombra); }

.la-corazon { position: relative; width: 1.62em; height: 1.62em; flex: none; }
.la-corazon svg { width: 100%; height: 100%; overflow: visible; }
.la-silueta { fill: none; stroke: var(--la-corazon); stroke-width: 1.55; stroke-linejoin: round; }
.la-g1 { stop-color: var(--la-corazon); }
.la-g2 { stop-color: var(--la-corazon-sombra); }
/* el relleno: un círculo que crece desde el centro, recortado por el corazón */
.la-relleno { r: 0; transition: r .42s cubic-bezier(.22, 1, .36, 1); }
.is-gusta .la-relleno { r: 15px; transition-delay: .06s; }
.la-brillo { fill: rgba(255, 255, 255, .75); opacity: 0; transition: opacity .3s; }
:root:not([data-tema="claro"]) .la-brillo { fill: #fff; }
.is-gusta .la-brillo { opacity: 1; transition-delay: .3s; }

/* lub-dub: el doble golpe de un latido, y luego uno suave cada tanto */
.la-latido { transform-origin: 50% 55%; transform-box: view-box; }
.is-late .la-latido { animation: la-golpe .66s cubic-bezier(.3, .7, .4, 1); }
@keyframes la-golpe {
  0%   { transform: scale(1); }
  14%  { transform: scale(.72, .78); }
  34%  { transform: scale(1.34, 1.28); }
  50%  { transform: scale(.93); }
  66%  { transform: scale(1.12); }
  82%  { transform: scale(.98); }
  100% { transform: scale(1); }
}
.is-gusta:not(.is-late) .la-latido { animation: la-pulso 1.5s .7s ease-in-out infinite; }
@keyframes la-pulso { 0%, 40%, 100% { transform: scale(1); } 10% { transform: scale(1.08); } 22% { transform: scale(1.04); } }
/* al quitarlo: se desinfla y recupera la forma */
.is-suelta .la-latido { animation: la-suelta .5s cubic-bezier(.3, .7, .4, 1); }
@keyframes la-suelta { 0% { transform: scale(1); } 30% { transform: scale(.82, .78); } 65% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* las chispas se pintan en un lienzo más grande que el botón */
.la-lienzo { position: absolute; left: 50%; top: 50%; pointer-events: none; }

/* la cuenta: una columna de cifras por dígito, como un cuentakilómetros */
.la-cuenta { display: inline-flex; align-items: flex-start; height: 1em; overflow: hidden; font-variant-numeric: tabular-nums; }
.la-columna { display: flex; flex-direction: column; transition: transform .6s cubic-bezier(.34, 1.4, .5, 1); }
.la-columna:nth-last-child(2) { transition-delay: .05s; }
.la-columna:nth-last-child(3) { transition-delay: .1s; }
.la-columna > span { height: 1em; line-height: 1; }


/* ===== estela ===== */
/* Estela · Moxen — los estilos del efecto y de la demostración. */
:root {
  --et-fondo: #0a0a0a;
  --et-texto: #f4f4f4;
  --et-suave: rgba(255, 255, 255, .42);
  --et-tenue: rgba(255, 255, 255, .07);
  --et-punto: #f4f4f4;       /* el color de la estela */
}
:root[data-tema="claro"] {
  --et-fondo: #eeeeee;
  --et-texto: #0a0a0a;
  --et-suave: rgba(0, 0, 0, .45);
  --et-tenue: rgba(0, 0, 0, .07);
  --et-punto: #0a0a0a;
}




/* ── el efecto ─────────────────────────────────────────────────────── */
.et-activo, .et-activo * { cursor: none !important; }
/* un solo lienzo encima de todo: la cuerda de puntos y la huella */
.et-capa { position: fixed; inset: 0; z-index: 1000; width: 100%; height: 100%; pointer-events: none; }
/* el texto con huella lo dibuja el lienzo; el del documento queda para
   leerlo, seleccionarlo y para los lectores de pantalla */
.et-dibujado { color: transparent !important; -webkit-text-stroke: 0 transparent !important; }