/* Kinexus Labs — estilos del sitio (rehecho el 1-nov-2026).
   Identidad: símbolo Nexo (variante Sólida), azul noche + oro + mármol, Outfit.
   Tema claro por defecto; el oscuro se activa con el botón (data-theme="dark" en <html>, lo pone /sitio.js).
   Sin estilos en línea: el CSP (style-src 'self') los bloquea. */

@font-face {
  font-family: "Outfit";
  src: url("/fonts/outfit-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens: claro ---------- */
:root {
  --noche: #14213D;
  --oro: #C8963E;
  --marmol: #F5F2EA;
  --grafito: #3A3F4B;

  --fondo: #F5F2EA;
  --fondo-2: #EEE8DB;
  --superficie: #ffffff;
  --texto: #1b2233;
  --suave: #545a69;
  --linea: #e2dccf;
  --marca: var(--noche);
  --acento: #8a6420;          /* oro oscurecido: 6:1 sobre mármol, apto para texto pequeño */
  --acento-deco: var(--oro);  /* solo para adornos */
  --boton: var(--noche);
  --boton-texto: var(--marmol);
  --boton-hover: #22335c;
  --sombra: 0 1px 2px rgba(20, 33, 61, 0.05), 0 10px 30px rgba(20, 33, 61, 0.07);
  --sombra-alta: 0 2px 4px rgba(20, 33, 61, 0.06), 0 22px 50px rgba(20, 33, 61, 0.12);

  /* Identidad de cada producto */
  --aulora: #6a3fd0;
  --aulora-2: #13827a;
  --aulora-suave: #efeaff;
  --arete: #8C2F39;
  --arete-suave: #f6e7e8;
  --agora: #2F6F8F;
  --agora-suave: #e3eff5;

  /* Paleta del pixel art (día) */
  --px-m1: #FBF8F1; --px-m2: #E3DACA; --px-m3: #C9BDA4; --px-d1: #ad9c7c;
  --px-o1: #C8963E; --px-o2: #EBC77A;
  --px-s1: #F9DE98; --px-s2: #EDB95E;
  --px-l1: #F1ECD9; --px-l2: #cfc7ae;
  --px-n1: #ffffff; --px-n2: #f0e6d4;
  --px-b1: #3A3F4B;
  --px-h1: #EEDFC0; --px-h2: #E2CFA7;
  --px-t1: #D9C59B; --px-t2: #C4AD7E;
  --px-f1: #4F7F55; --px-f2: #7AA870;
  --px-v1: #A99577; --px-v2: #8f7c5f;
  --px-p1: #2F6F8F; --px-p2: #A86F4C; --px-p3: #2B1B12; --px-p4: #8C2F39;
  --px-e1: #ffffff; --px-e2: #9fb2d6;
  --px-u1: #7d5b3d; --px-u2: #c9a77c; --px-u3: #f1e6cf; --px-k1: #14213D;

  color-scheme: light;
}

/* ---------- Tokens: oscuro ---------- */
:root[data-theme="dark"] {
  --fondo: #0f1729;
  --fondo-2: #121c33;
  --superficie: #16213a;
  --texto: #ece9e1;
  --suave: #a9aebb;
  --linea: #27355a;
  --marca: var(--marmol);
  --acento: #DDAE5C;
  --boton: var(--oro);
  --boton-texto: var(--noche);
  --boton-hover: #d9a958;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.25);
  --sombra-alta: 0 2px 4px rgba(0, 0, 0, 0.35), 0 22px 50px rgba(0, 0, 0, 0.4);

  --aulora: #b9a1f7;
  --aulora-2: #62d1c3;
  --aulora-suave: #231f45;
  --arete: #e48a93;
  --arete-suave: #3a1d26;
  --agora: #7ebad8;
  --agora-suave: #16324a;

  --px-m1: #b3bdd0; --px-m2: #8592a9; --px-m3: #56627b; --px-d1: #E7BE6C;
  --px-o2: #F0CB7A;
  --px-n1: #2d3b5e; --px-n2: #26334f;
  --px-h1: #1b2643; --px-h2: #17213b;
  --px-t1: #222d48; --px-t2: #1b2540;
  --px-f1: #2c4a40; --px-f2: #3d6352;
  --px-v1: #4b5166; --px-v2: #3d4255;
  --px-p1: #4a8db0; --px-p2: #8d5c3f; --px-p3: #120c08; --px-p4: #a8434e;
  --px-u1: #6b4e35; --px-u2: #b08e66; --px-u3: #ddd0b8; --px-k1: #0b1222;

  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.5s ease, color 0.5s ease;
}
h1, h2, h3, .marca-texto, .outfit { font-family: "Outfit", system-ui, sans-serif; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-color: var(--acento-deco); }
a:hover { color: var(--acento); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 4px; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 50; padding: 0.6rem 1rem; border-radius: 10px; background: var(--boton); color: var(--boton-texto); font-weight: 600; text-decoration: none; }
.saltar:focus { top: 1rem; }

.contenedor { width: 100%; max-width: 72rem; margin: 0 auto; padding-inline: 1.25rem; }

/* ---------- Símbolo Nexo ---------- */
.simbolos { position: absolute; }
.nexo-p { fill: var(--p); }
.nexo-a { fill: var(--a); }
.nexo-trazo { fill: none; stroke: var(--p); stroke-width: 9; stroke-linecap: round; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 20; padding-block: 0.75rem;
  background: color-mix(in srgb, var(--fondo) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--linea) 70%, transparent);
  transition: background-color 0.5s ease;
}
.cabecera .contenedor { display: flex; align-items: center; gap: 0.5rem 1.25rem; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; gap: 0.6rem; margin-right: auto; text-decoration: none; color: var(--marca); }
.logo:hover { color: var(--marca); }
.logo svg { width: 2.3rem; height: 2.3rem; flex: none; --p: var(--marca); --a: var(--oro); }
.marca-texto { display: flex; flex-direction: column; line-height: 1; }
.marca-texto b { font-weight: 600; font-size: 1.12rem; letter-spacing: 0.16em; }
.marca-texto span { font-size: 0.55rem; letter-spacing: 0.6em; margin-top: 0.3rem; opacity: 0.8; }

.menu { display: flex; flex-wrap: wrap; gap: 0.15rem 1.15rem; margin: 0; padding: 0; list-style: none; font-size: 0.95rem; }
.menu a { display: inline-block; padding-block: 0.35rem; text-decoration: none; color: var(--suave); }
.menu a:hover { color: var(--texto); }

/* Botón de tema: sol de día, luna de noche (pixel art). */
.tema-boton {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; cursor: pointer;
  border-radius: 12px; border: 1.5px solid var(--linea); background: var(--superficie); color: var(--acento);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.tema-boton:hover { border-color: var(--acento-deco); }
.tema-boton:active { transform: scale(0.94); }
.tema-boton[hidden] { display: none; }
.px-tema { width: 22px; height: 22px; }
.px-tema .c-ic { fill: currentColor; }
.px-tema .ic-luna { display: none; }
[data-theme="dark"] .px-tema .ic-sol { display: none; }
[data-theme="dark"] .px-tema .ic-luna { display: inline; }

/* ---------- Botones ---------- */
.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.7rem 1.3rem; border-radius: 12px;
  font-weight: 600; font-size: 0.98rem; text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.boton:active { transform: translateY(1px); }
.boton-principal { background: var(--boton); color: var(--boton-texto); box-shadow: 0 2px 0 rgba(20, 33, 61, 0.22); }
.boton-principal:hover { background: var(--boton-hover); color: var(--boton-texto); }
.boton-secundario { border-color: var(--linea); color: var(--texto); background: var(--superficie); }
.boton-secundario:hover { border-color: var(--acento-deco); color: var(--texto); }
.boton svg { width: 1.15rem; height: 1.15rem; flex: none; }
.icono-trazo { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }

/* ---------- Textos comunes ---------- */
.antetitulo {
  margin: 0 0 0.9rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--acento);
}
.portada { padding-block: 3.5rem 4.5rem; }
.portada h1 { margin: 0; font-size: clamp(2.3rem, 5.6vw, 3.9rem); font-weight: 600; max-width: 17ch; }
.portada .entrada { margin: 1.4rem 0 0; font-size: 1.18rem; color: var(--suave); max-width: 40rem; }

.seccion { padding-block: 4.5rem; border-top: 1px solid var(--linea); }
.seccion h2 { margin: 0 0 0.75rem; font-size: clamp(1.75rem, 3.8vw, 2.4rem); font-weight: 600; }
.seccion .intro { margin: 0 0 2.25rem; color: var(--suave); max-width: 44rem; }
.seccion-alterna { background: var(--fondo-2); transition: background-color 0.5s ease; }

/* ---------- Portada del inicio ---------- */
.portada-inicio .contenedor { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
@media (max-width: 900px) { .portada-inicio .contenedor { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; } }
.etimologia { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.etimologia li {
  display: inline-flex; align-items: baseline; gap: 0.4rem; padding: 0.3rem 0.75rem; border-radius: 99px;
  background: var(--superficie); border: 1px solid var(--linea); font-size: 0.9rem; color: var(--suave);
}
.etimologia i { font-style: normal; font-family: "Outfit", sans-serif; font-weight: 600; color: var(--texto); }
.etimologia li.mas { padding-inline: 0; border: 0; background: none; color: var(--acento); font-weight: 600; }

/* Escena pixel: amanecer o noche en el ágora. */
.escena { margin: 0; }
.escena-ventana {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 22px;
  border: 1px solid var(--linea); box-shadow: var(--sombra-alta); isolation: isolate;
}
.escena-ventana::before, .escena-ventana::after { content: ""; position: absolute; inset: 0; z-index: -1; transition: opacity 0.9s ease; }
.escena-ventana::before { background: linear-gradient(180deg, #F8F2E4 0%, #F7E7C6 55%, #F3D29A 100%); }
.escena-ventana::after { background: linear-gradient(180deg, #0a1122 0%, #15213d 60%, #22305a 100%); opacity: 0; }
[data-theme="dark"] .escena-ventana::after { opacity: 1; }
.px-escena { display: block; width: 100%; height: 100%; }
.escena figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem; margin-top: 0.6rem; font-size: 0.88rem; color: var(--suave); }
.boton-enlace {
  min-height: 44px; padding: 0.35rem 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--acento); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--acento-deco); text-underline-offset: 0.2em;
}
.boton-enlace:hover { color: var(--texto); }

/* Colores del pixel art (se recolorean con el tema). */
.px rect { transition: fill 0.9s ease; }
.c-m1 { fill: var(--px-m1); } .c-m2 { fill: var(--px-m2); } .c-m3 { fill: var(--px-m3); } .c-d1 { fill: var(--px-d1); }
.c-o1 { fill: var(--px-o1); } .c-o2 { fill: var(--px-o2); }
.c-s1 { fill: var(--px-s1); } .c-s2 { fill: var(--px-s2); }
.c-l1 { fill: var(--px-l1); } .c-l2 { fill: var(--px-l2); }
.c-n1 { fill: var(--px-n1); } .c-n2 { fill: var(--px-n2); }
.c-b1 { fill: var(--px-b1); }
.c-h1 { fill: var(--px-h1); } .c-h2 { fill: var(--px-h2); }
.c-t1 { fill: var(--px-t1); } .c-t2 { fill: var(--px-t2); }
.c-f1 { fill: var(--px-f1); } .c-f2 { fill: var(--px-f2); }
.c-v1 { fill: var(--px-v1); } .c-v2 { fill: var(--px-v2); }
.c-p1 { fill: var(--px-p1); } .c-p2 { fill: var(--px-p2); } .c-p3 { fill: var(--px-p3); } .c-p4 { fill: var(--px-p4); }
.c-e1 { fill: var(--px-e1); } .c-e2 { fill: var(--px-e2); }
.c-u1 { fill: var(--px-u1); } .c-u2 { fill: var(--px-u2); } .c-u3 { fill: var(--px-u3); } .c-k1 { fill: var(--px-k1); }

/* Qué se ve de día y de noche. */
.px-escena .sol, .px-escena .rayos, .px-escena .aves, .px-escena .luna, .px-escena .estrella, .px-escena .luciernagas { transition: opacity 0.9s ease; }
.px-escena .luna, .px-escena .estrella, .px-escena .luciernagas { opacity: 0; }
[data-theme="dark"] .px-escena .sol, [data-theme="dark"] .px-escena .rayos, [data-theme="dark"] .px-escena .aves { opacity: 0; }
[data-theme="dark"] .px-escena .luna, [data-theme="dark"] .px-escena .estrella, [data-theme="dark"] .px-escena .luciernagas { opacity: 1; }
.px-escena .palma.lejana { opacity: 0.55; }

/* Movimiento: pasos enteros (steps) para que el pixel no se emborrone. Barato: solo transform y opacity. */
.px-escena .nube1 { animation: deriva 150s steps(240) infinite; animation-delay: -60s; }
.px-escena .nube2 { animation: deriva 210s steps(240) infinite; animation-delay: -150s; }
@keyframes deriva { from { transform: translateX(-30px); } to { transform: translateX(170px); } }
.px-escena .aves { animation: vuelo 38s steps(200) infinite; animation-delay: -6s; }
@keyframes vuelo { from { transform: translate(-30px, 6px); } 50% { transform: translate(70px, 0); } to { transform: translate(180px, -8px); } }
.cuadro-a { animation: cuadro-a 0.6s steps(1) infinite; }
.cuadro-b { animation: cuadro-b 0.6s steps(1) infinite; }
@keyframes cuadro-a { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes cuadro-b { 0% { opacity: 0; } 50% { opacity: 1; } }
.px-escena .caminante { animation: camina 48s steps(190) infinite; animation-delay: -14s; }
@keyframes camina { from { transform: translate(-14px, 64px); } to { transform: translate(176px, 64px); } }
.px-escena .rayos { animation: rayos 3.2s steps(1) infinite; }
@keyframes rayos { 0%, 60% { fill-opacity: 1; } 61%, 100% { fill-opacity: 0.25; } }
.px-escena .halo { animation: halo 2.4s steps(1) infinite; }
@keyframes halo { 0%, 50% { fill-opacity: 0; } 51%, 100% { fill-opacity: 1; } }
.px-escena .estrella.t1 { animation: titila 3.1s steps(1) infinite; }
.px-escena .estrella.t2 { animation: titila 4.3s steps(1) infinite -1.2s; }
.px-escena .estrella.t3 { animation: titila 2.7s steps(1) infinite -0.6s; }
.px-escena .estrella.t4 { animation: titila 5.1s steps(1) infinite -2s; }
.px-escena .luciernagas { animation: titila 1.9s steps(1) infinite; }
@keyframes titila { 0%, 70% { fill-opacity: 1; } 71%, 100% { fill-opacity: 0.25; } }

/* Pausa fuera de pantalla (lo marca /sitio.js). */
.js .anima:not(.en-vista) * { animation-play-state: paused !important; }

/* ---------- Ecosistema ---------- */
.mapa { margin: 0 0 2.5rem; padding: 1.25rem; border-radius: 20px; background: var(--superficie); border: 1px solid var(--linea); box-shadow: var(--sombra); }
.mapa svg { display: block; width: 100%; height: auto; }
.mapa .enlace { fill: none; stroke: var(--linea); stroke-width: 2.5; }
/* pathLength="100" en cada trazo: el pulso mide lo mismo en proporción y recorre el enlace de arriba abajo. */
.mapa .pulso { fill: none; stroke: var(--oro); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 4 96; animation: pulso 3.6s linear infinite; }
.mapa .pulso.corto { stroke-dasharray: 12 88; }
.mapa .pulso.d2 { animation-delay: -1.2s; } .mapa .pulso.d3 { animation-delay: -2.4s; } .mapa .pulso.d4 { animation-delay: -0.6s; } .mapa .pulso.d5 { animation-delay: -1.8s; }
@keyframes pulso { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.mapa .t1.t1s { font-size: 15px; }
.mapa .caja { stroke-width: 2; }
.mapa text { font-family: "Outfit", system-ui, sans-serif; text-anchor: middle; }
.mapa .t1 { font-size: 18px; font-weight: 600; }
.mapa .t2 { font-size: 12.5px; }
.mapa .n-kx .caja { fill: var(--noche); stroke: var(--noche); }
.mapa .n-kx text { fill: var(--marmol); }
.mapa .n-kx .t2 { fill: #E2B866; }
[data-theme="dark"] .mapa .n-kx .caja { fill: #1f2d50; stroke: var(--oro); }
.mapa .n-aulora .caja { fill: var(--aulora-suave); stroke: var(--aulora); }
.mapa .n-arete .caja { fill: var(--arete-suave); stroke: var(--arete); }
.mapa .n-agora .caja { fill: var(--agora-suave); stroke: var(--agora); }
.mapa .n-aulora text { fill: var(--aulora); } .mapa .n-arete text { fill: var(--arete); } .mapa .n-agora text { fill: var(--agora); }
.mapa .nodo-kx { fill: var(--oro); }
@media (max-width: 640px) { .mapa { display: none; } }

.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.25rem; }
.tarjeta {
  position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 1.6rem;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: 18px; box-shadow: var(--sombra);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.5s ease;
}
.tarjeta::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--color-p); }
.tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.p-aulora { --color-p: linear-gradient(90deg, #a35ee8, #4a8fd9 55%, #2db8a8); --tinta-p: var(--aulora); --suave-p: var(--aulora-suave); }
.p-arete { --color-p: var(--arete); --tinta-p: var(--arete); --suave-p: var(--arete-suave); }
.p-agora { --color-p: var(--agora); --tinta-p: var(--agora); --suave-p: var(--agora-suave); }
.tarjeta-cabecera { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1rem; }
.tarjeta-cabecera img, .tarjeta-cabecera .sello { width: 3.1rem; height: 3.1rem; flex: none; object-fit: contain; }
.sello { display: grid; place-items: center; border-radius: 14px; background: var(--suave-p); }
.sello .px-icono { width: 1.9rem; height: 1.9rem; }
.p-arete .c-ic1 { fill: var(--arete); } .p-arete .c-ic2 { fill: var(--oro); }
.p-agora .c-ic1 { fill: var(--agora); } .p-agora .c-ic2 { fill: var(--oro); }
.tarjeta h3 { margin: 0; font-size: 1.4rem; font-weight: 600; }
.tarjeta .respaldo { display: block; font-size: 0.72rem; color: var(--suave); letter-spacing: 0.04em; margin-top: 0.2rem; font-family: system-ui, sans-serif; font-weight: 400; }
.tarjeta .que { margin: 0 0 0.5rem; font-weight: 600; color: var(--tinta-p); }
.tarjeta p { margin: 0 0 1rem; color: var(--suave); font-size: 0.98rem; }
.tarjeta .lema { margin: 0 0 1rem; padding: 0.6rem 0.8rem; border-radius: 10px; background: var(--suave-p); font-size: 0.9rem; color: var(--texto); }
.tarjeta .lema i { font-style: normal; font-weight: 600; font-family: "Outfit", sans-serif; color: var(--tinta-p); }
.tarjeta .pie { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.estado {
  display: inline-block; padding: 0.2rem 0.65rem; border-radius: 99px; font-size: 0.75rem; font-weight: 600;
  background: var(--fondo); color: var(--suave); border: 1px solid var(--linea);
}
.estado.activo { color: #2f6b47; border-color: #b9d9c4; background: #eef7f1; }
[data-theme="dark"] .estado.activo { color: #9fd6b3; border-color: #2f5a41; background: #15301f; }
.enlace-flecha { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 0.95rem; text-decoration: none; color: var(--tinta-p, var(--acento)); }
.enlace-flecha:hover { color: var(--texto); }
.modulos { margin: 0 0 1rem; padding: 0; list-style: none; font-size: 0.92rem; }
.modulos li { padding: 0.55rem 0; border-top: 1px dashed var(--linea); color: var(--suave); }
.modulos b { color: var(--texto); font-weight: 600; }

/* ---------- Hoja de ruta (barras pixel) ---------- */
.ruta { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.ruta li {
  display: grid; grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr) minmax(0, 1.3fr); gap: 0.5rem 1.5rem; align-items: center;
  padding: 1rem 1.25rem; border-radius: 16px; background: var(--superficie); border: 1px solid var(--linea);
}
@media (max-width: 820px) { .ruta li { grid-template-columns: minmax(0, 1fr); } }
.ruta .nombre { font-family: "Outfit", sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--tinta-p); }
.ruta .nombre small { display: block; font-family: system-ui, sans-serif; font-weight: 400; font-size: 0.8rem; color: var(--suave); }
.ruta p { margin: 0; color: var(--suave); font-size: 0.93rem; }
.etapas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.etapas span { height: 14px; background: var(--fondo-2); border: 2px solid var(--linea); }
.etapas span.llena { background: var(--tinta-p); border-color: var(--tinta-p); }
.etapas span.actual { background: var(--tinta-p); border-color: var(--tinta-p); animation: cursor 1.1s steps(1) infinite; }
@keyframes cursor { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.35; } }
.etapas-leyenda { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 0.3rem; font-size: 0.72rem; color: var(--suave); }
.etapas-leyenda .ahora { color: var(--tinta-p); font-weight: 600; }

/* ---------- Virtudes ---------- */
.virtudes { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 1.25rem; }
.virtud {
  display: flex; flex-direction: column; padding: 1.5rem 1.4rem; border-radius: 18px; background: var(--superficie);
  border: 1px solid var(--linea); box-shadow: var(--sombra); transition: transform 0.25s ease, background-color 0.5s ease;
}
.virtud:hover { transform: translateY(-3px); }
.virtud .px-insignia { width: 4.5rem; height: 4.5rem; margin-bottom: 0.9rem; }
.virtud:hover .px-insignia { animation: salto 0.5s steps(3); }
@keyframes salto { 50% { transform: translateY(-6px); } }
.px-insignia .destello { opacity: 0; }
.virtud:hover .destello { animation: destello 0.9s steps(1) 2; }
@keyframes destello { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.ins-arete .c-fondo { fill: #14213D; }
.ins-andreia .c-fondo { fill: #8C2F39; }
.ins-sofrosine .c-fondo { fill: #2F6F8F; }
.ins-dicaiosine .c-fondo { fill: #4F6A3A; }
.px-insignia .c-m1 { fill: #F5F2EA; }
.px-insignia .c-o1 { fill: #C8963E; }
.px-insignia .c-o2 { fill: #EBC77A; }
.virtud .griego { display: block; font-size: 0.95rem; color: var(--acento); letter-spacing: 0.05em; }
.virtud h3 { margin: 0.2rem 0 0.1rem; font-size: 1.4rem; font-weight: 600; }
.virtud .significado { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--suave); margin-bottom: 0.75rem; }
.virtud p { margin: 0; font-size: 0.96rem; color: var(--suave); }
.virtud .en-verso { margin-top: auto; padding-top: 0.85rem; font-size: 0.88rem; }
.virtud .en-verso::before { content: ""; display: block; margin: 1rem 0 0.85rem; border-top: 1px dashed var(--linea); }
.virtud .en-verso b { color: var(--texto); font-weight: 600; }

/* ---------- La lechuza del ágora ---------- */
.lechuza-bloque { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2.5rem; align-items: center; }
@media (max-width: 720px) { .lechuza-bloque { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 1.5rem; } }
.lechuza-boton {
  position: relative; display: grid; place-items: center; width: 11rem; height: 11rem; padding: 1.4rem; cursor: pointer;
  border-radius: 28px; border: 1.5px solid var(--linea); background: var(--superficie); box-shadow: var(--sombra);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.lechuza-boton:hover { border-color: var(--acento-deco); }
.lechuza-boton:active { transform: scale(0.97); }
.px-lechuza { width: 100%; height: 100%; }
.px-lechuza .parpados { opacity: 0; animation: parpadeo 5s steps(1) infinite; }
@keyframes parpadeo { 0%, 92% { opacity: 0; } 93%, 96% { opacity: 1; } 97%, 100% { opacity: 0; } }
.lechuza-boton.salta .px-lechuza { animation: salto 0.45s steps(3); }
.lechuza-boton .globo {
  position: absolute; top: -0.7rem; right: -0.7rem; padding: 0.2rem 0.55rem; border-radius: 8px;
  background: var(--boton); color: var(--boton-texto); font-size: 0.75rem; font-weight: 600;
}
.palabra { padding: 1.6rem 1.75rem; border-radius: 20px; background: var(--superficie); border: 1px solid var(--linea); box-shadow: var(--sombra); max-width: 40rem; }
.palabra .griega { margin: 0; font-family: "Outfit", Georgia, serif; font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 600; color: var(--marca); line-height: 1.1; }
.palabra .translit { margin: 0.3rem 0 0.9rem; font-size: 0.95rem; color: var(--acento); font-style: italic; }
.palabra .significa { margin: 0 0 0.75rem; }
.palabra .hoy { margin: 0; color: var(--suave); }
.palabra .hoy b { color: var(--texto); }
.palabra-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1.25rem; }
.palabra-pie .cuenta { font-size: 0.85rem; color: var(--suave); }
.palabra.cambia { animation: aparece 0.35s ease; }
@keyframes aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Compromisos ---------- */
.compromisos { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.compromisos li { padding: 1.4rem; border-radius: 16px; background: var(--superficie); border: 1px solid var(--linea); transition: background-color 0.5s ease; }
.compromisos svg { width: 1.6rem; height: 1.6rem; color: var(--acento); margin-bottom: 0.6rem; }
.compromisos h3 { margin: 0 0 0.4rem; font-size: 1.12rem; font-weight: 600; }
.compromisos p { margin: 0; color: var(--suave); font-size: 0.96rem; }

/* ---------- Funciones (página de producto) ---------- */
.funciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; }
.funcion { padding: 1.4rem; border-radius: 16px; background: var(--superficie); border: 1px solid var(--linea); transition: background-color 0.5s ease; }
.funcion h3 { margin: 0 0 0.5rem; font-size: 1.15rem; font-weight: 600; }
.funcion p { margin: 0; color: var(--suave); font-size: 0.97rem; }

.producto-titulo { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.producto-titulo img { width: 4.5rem; height: auto; }
.producto-titulo .nombre { font-family: "Outfit", sans-serif; font-size: 1.6rem; font-weight: 600; line-height: 1; }
.producto-titulo .respaldo { display: block; font-size: 0.8rem; color: var(--suave); margin-top: 0.3rem; }

/* ---------- Contacto y pie ---------- */
.contacto-bloque { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.contacto-bloque h2 { margin-bottom: 0.4rem; }
.contacto-bloque p { margin: 0; color: var(--suave); }
.contacto-bloque .acciones { margin-top: 0; }

.pie-sitio { border-top: 1px solid var(--linea); padding-block: 2.25rem; font-size: 0.88rem; color: var(--suave); }
.pie-sitio .contenedor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 2rem; }
.pie-sitio ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.pie-sitio a { display: inline-block; padding-block: 0.4rem; }
.pie-sitio .nota { flex-basis: 100%; margin: 0; font-size: 0.82rem; }

/* ---------- Página 404 ---------- */
.no-encontrada { padding-block: 3.5rem 6rem; }
.no-encontrada h1 { margin: 0 0 1rem; font-size: clamp(2rem, 5vw, 3rem); }
.no-encontrada p { color: var(--suave); max-width: 36rem; }
.escena-404 { max-width: 30rem; margin: 0 0 2rem; padding: 1rem; border-radius: 20px; background: var(--superficie); border: 1px solid var(--linea); }
.px-404 { display: block; width: 100%; height: auto; }
.px-404 .pregunta { animation: titila-op 1.4s steps(1) infinite; }
@keyframes titila-op { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }

/* ---------- Aparición suave al desplazarse (solo con JS) ---------- */
.js .revelar { opacity: 0; transform: translateY(14px); transition: opacity 0.45s ease-out, transform 0.45s ease-out; }
.js .revelar.visible { opacity: 1; transform: none; }

@media (max-width: 560px) {
  .portada { padding-block: 2.25rem 3rem; }
  .seccion { padding-block: 3.25rem; }
  .menu { gap: 0 0.9rem; font-size: 0.9rem; }
  .cabecera nav { order: 3; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .revelar { opacity: 1; transform: none; }
}

/* ---------- Tarjetas del ecosistema (1-nov-2026, pedido del usuario) ----------
   Al pasar el cursor (o con el foco): la tarjeta se eleva y se inclina apenas, la barra de color
   crece y el sello da un saltito. La de Aulora es toda un enlace (el enlace se estira con ::after).
   Las que aún no tienen página se difuminan y llega volando el búho con el cartel «Próximamente». */
.tarjeta { transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1), box-shadow 0.35s ease, background-color 0.5s ease; }
.tarjeta::before { transition: height 0.3s ease; }
.tarjeta:hover, .tarjeta:focus-within, .tarjeta-pronto:focus { transform: translateY(-6px) rotate(-0.4deg); box-shadow: var(--sombra-alta); }
.tarjeta:hover::before, .tarjeta:focus-within::before, .tarjeta-pronto:focus::before { height: 7px; }
.tarjeta:hover .tarjeta-cabecera img, .tarjeta:hover .sello,
.tarjeta:focus-within .tarjeta-cabecera img, .tarjeta-pronto:focus .sello { animation: saltito 0.6s steps(4) 1; }
@keyframes saltito { 0%, 100% { transform: none; } 25% { transform: translateY(-5px) rotate(-6deg); } 50% { transform: translateY(-2px) rotate(4deg); } 75% { transform: translateY(-1px); } }

.tarjeta-enlace { cursor: pointer; }
.tarjeta-enlace .enlace-flecha::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.tarjeta-enlace .enlace-flecha:focus-visible { outline: none; }
.tarjeta-enlace:has(.enlace-flecha:focus-visible) { outline: 3px solid var(--acento); outline-offset: 3px; }
.tarjeta-enlace:hover .enlace-flecha { color: var(--texto); }

.tarjeta-pronto { cursor: default; }
.tarjeta-pronto:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
.tarjeta-pronto > :not(.pronto) { transition: filter 0.35s ease, opacity 0.35s ease; }
.tarjeta-pronto:hover > :not(.pronto), .tarjeta-pronto:focus > :not(.pronto) { filter: blur(3px); opacity: 0.45; }
.pronto { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; }
.tarjeta-pronto:hover .pronto, .tarjeta-pronto:focus .pronto { opacity: 1; }
.buho-vuelo { display: grid; justify-items: center; transform: translate(70%, -90%) scale(0.6); }
.tarjeta-pronto:hover .buho-vuelo, .tarjeta-pronto:focus .buho-vuelo { animation: llega 0.9s steps(9) both, flota 1.6s ease-in-out 0.9s infinite; }
@keyframes llega {
  0% { transform: translate(70%, -90%) scale(0.6); }
  60% { transform: translate(-6%, 8%) scale(1.05); }
  100% { transform: none; }
}
@keyframes flota { 0%, 100% { transform: none; } 50% { transform: translateY(-6px); } }
.px-buho { width: 7.5rem; height: 5rem; }
.px-buho .alas-b { opacity: 0; }
.tarjeta-pronto:hover .px-buho .alas-a, .tarjeta-pronto:focus .px-buho .alas-a { animation: aleteo-a 0.32s steps(1) infinite; }
.tarjeta-pronto:hover .px-buho .alas-b, .tarjeta-pronto:focus .px-buho .alas-b { animation: aleteo-b 0.32s steps(1) infinite; }
@keyframes aleteo-a { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes aleteo-b { 0% { opacity: 0; } 50% { opacity: 1; } }
/* El cartel cuelga de las patas: dos cuerdas y una tabla de madera. */
.cartel {
  position: relative; margin-top: 0.85rem; padding: 0.4rem 0.9rem; border-radius: 6px;
  font-family: "Outfit", sans-serif; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em;
  background: #f3e2bd; color: #4a3313; border: 2px solid #8a6420; box-shadow: 0 4px 0 #6e4f18, 0 10px 18px rgba(20, 33, 61, 0.25);
}
.cartel::before, .cartel::after { content: ""; position: absolute; bottom: 100%; width: 2px; height: 0.95rem; background: #8a6420; }
.cartel::before { left: 32%; } .cartel::after { right: 32%; }
:root[data-theme="dark"] .cartel { background: #3a2c12; color: #f3dfb0; border-color: #ddae5c; box-shadow: 0 4px 0 #1c1508, 0 10px 18px rgba(0, 0, 0, 0.45); }
:root[data-theme="dark"] .cartel::before, :root[data-theme="dark"] .cartel::after { background: #ddae5c; }

@media (prefers-reduced-motion: reduce) {
  .tarjeta, .tarjeta::before, .tarjeta-pronto > :not(.pronto), .pronto { transition: none; }
  .tarjeta:hover, .tarjeta:focus-within, .tarjeta-pronto:focus { transform: none; }
  .tarjeta:hover .tarjeta-cabecera img, .tarjeta:hover .sello, .tarjeta:focus-within .tarjeta-cabecera img, .tarjeta-pronto:focus .sello { animation: none; }
  .buho-vuelo, .tarjeta-pronto:hover .buho-vuelo, .tarjeta-pronto:focus .buho-vuelo { transform: none; animation: none; }
  .tarjeta-pronto:hover .px-buho .alas-a, .tarjeta-pronto:focus .px-buho .alas-a, .tarjeta-pronto:hover .px-buho .alas-b, .tarjeta-pronto:focus .px-buho .alas-b { animation: none; }
}