/* ============================================================================================
   PORTADA (inicio.js): el panal de magicui/hexagon-pattern, «AUTOSCALE AI» kinetic a lo grande y
   los cuatro hexágonos clave. Los tokens son los del panel: papel, tinta, índigo y la aurora. La
   única audacia es el wordmark; todo lo demás acompaña.
   ============================================================================================ */

/* El logo de la barra lateral es el botón que la abre. */
button.side-brand { width: 100%; margin: 0; border: 0; border-radius: 12px; background: transparent; font-family: inherit; text-align: left; cursor: pointer; transition: background .15s; }
button.side-brand:hover { background: rgba(17, 19, 24, .045); }
button.side-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.side-brand .brandmark { transition: transform .45s cubic-bezier(.2, .9, .25, 1.3); }
button.side-brand:hover .brandmark { transform: rotate(-8deg) scale(1.08); }
@media (max-width: 1180px) { button.side-brand { width: auto; padding: 4px; } }

html.inicio-abierto { overflow: hidden; }
/* Encima de fichas y modales (60) y debajo de la paleta ⌘K (70), que se puede abrir desde aquí. */
.inicio { position: fixed; inset: 0; z-index: 65; overflow: hidden; background: var(--bg); touch-action: none; animation: inicioIn .35s var(--ease) both; }
.inicio.sale { animation: inicioOut .22s ease both; pointer-events: none; }
@keyframes inicioIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes inicioOut { from { opacity: 1; } to { opacity: 0; } }
.inicio .aurora::before { width: 56vmax; padding-top: 56vmax; left: -16vmax; top: -30vmax; opacity: .2; filter: blur(96px); }
.inicio .aurora::after { width: 50vmax; padding-top: 50vmax; right: -16vmax; bottom: -30vmax; opacity: .18; filter: blur(96px); }

/* ---------- El panal ---------- */
.inicio-panal { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.inicio-panal svg { position: absolute; left: 0; top: 0; display: block; overflow: visible; }
.ip-base path { fill: none; stroke: var(--ink); stroke-opacity: .085; stroke-width: 1; }
.inicio-panal path { transform-box: fill-box; transform-origin: center; animation: celdaIn .8s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes celdaIn { from { opacity: 0; transform: scale(.35); } to { opacity: 1; transform: none; } }
/* La luz: un círculo que se mueve con transform y, dentro, el mismo panal en índigo movido al
   revés, así que las celdas no se mueven y solo se ilumina lo que queda debajo. Todo transform y
   opacidad: no repinta el panal en cada fotograma. */
.ip-foco { position: absolute; left: 0; top: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px; overflow: hidden; border-radius: 50%; opacity: 0; will-change: transform, opacity;
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 100%); mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 100%); }
.ip-foco .ip-luz { left: 320px; top: 320px; will-change: transform; }
.ip-luz path { fill: var(--accent); fill-opacity: .07; stroke: var(--accent); stroke-opacity: .85; stroke-width: 1.4; }

/* ---------- El wordmark ---------- */
.kx { position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0 16px; display: grid; place-items: center; pointer-events: none; font-size: inherit; }
.kx-letras { position: relative; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; column-gap: .22em; font-size: min(12.6vw, 27vh); line-height: .9; letter-spacing: 0; text-transform: uppercase; color: var(--ink); user-select: none; -webkit-user-select: none; }
.kx-p { display: inline-flex; white-space: nowrap; }
.kx-p.pega { margin-left: -.22em; }   /* AUTO+SCALE: anula el column-gap */
.kx-l { display: inline-block; font-weight: 100; padding-inline: calc(var(--t, 0) * .12em); -webkit-text-stroke: calc(var(--t, 0) * .05em) currentColor;
  color: var(--ink); color: color-mix(in oklab, var(--accent) calc(var(--t, 0) * 92%), var(--ink));
  animation: letraIn .95s var(--ease) both; animation-delay: calc(140ms + var(--n, 0) * 45ms); }
@keyframes letraIn { from { opacity: 0; transform: translateY(.3em); filter: blur(16px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- Los cuatro hexágonos clave ---------- */
.inicio-claves { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.kh { position: absolute; pointer-events: none; animation: khIn .8s cubic-bezier(.2, .9, .25, 1.2) both; animation-delay: var(--d, 0ms); }
@keyframes khIn { from { opacity: 0; transform: scale(.2) rotate(-60deg); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
.kh-pulso, .kh-forma { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kh-pulso path { fill: none; stroke: var(--halo); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: khPulso 3.4s cubic-bezier(.2, .7, .2, 1) infinite; animation-delay: var(--p, 0ms); }
@keyframes khPulso { 0% { opacity: .7; transform: scale(1); } 75%, 100% { opacity: 0; transform: scale(1.6); } }
.kh-cuerpo { position: absolute; inset: 0; transition: transform .45s cubic-bezier(.2, .9, .25, 1.3); }
.kh:hover .kh-cuerpo, .kh:focus-within .kh-cuerpo { transform: scale(1.09); }
.kh-forma { filter: drop-shadow(0 14px 22px color-mix(in srgb, var(--halo) 40%, transparent)) drop-shadow(0 2px 4px rgba(17, 19, 24, .2)); }
.kh-luz { opacity: 0; transition: opacity .35s var(--ease); }
.kh:hover .kh-luz, .kh:focus-within .kh-luz { opacity: 1; }
.kh-borde { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1; }
.kh:has(.kh-btn:focus-visible) .kh-borde { stroke: #fff; stroke-width: 3; }
/* El botón ocupa el hexágono exacto: la esquina vacía de su caja no responde al clic. */
.kh-btn { position: absolute; inset: 0; padding: 0; margin: 0; border: 0; background: none; color: #fff; cursor: pointer; pointer-events: auto; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); -webkit-tap-highlight-color: transparent; }
.kh-btn:focus-visible { outline: none; }
.kh-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 11%; text-align: center; font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.12; }
.kh-txt .ico { width: 22px; height: 22px; color: var(--halo); transition: color .3s, transform .45s cubic-bezier(.2, .9, .25, 1.3); }
.kh:hover .kh-txt .ico, .kh:focus-within .kh-txt .ico { color: #fff; transform: translateY(-2px); }

/* ---------- Volver ---------- */
.inicio-volver { position: absolute; top: 18px; left: 18px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px 9px 11px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink); font-weight: 500; font-size: 14px; box-shadow: var(--shadow-xs); transition: background .15s, transform .2s var(--ease); }
.inicio-volver:hover { background: #fff; transform: translateX(-2px); }
.inicio-volver:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.inicio-volver svg { width: 16px; height: 16px; flex: none; }

@media (max-width: 719px) {
  .kx-letras { flex-wrap: wrap; font-size: min(23vw, 12vh); row-gap: .02em; }
  .kx-p { flex-basis: 100%; justify-content: center; }
  .kx-p.pega { margin-left: 0; }
  .kh-txt { font-size: 14px; gap: 4px; padding: 0 7%; letter-spacing: -.02em; }
  .kh-txt .ico { width: 18px; height: 18px; }
  .inicio-volver { top: 14px; left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .inicio, .inicio.sale, .inicio-panal path, .kx-l, .kh, .kh-pulso path { animation: none; }
  .kh-cuerpo, .kh-luz, .kh-txt .ico, .side-brand .brandmark, .inicio-volver { transition: none; }
}