/* ===========================================================================
   CLASES DE CONEXIÓN — Central Ensigna   (js/p-guia.js)
   Un camino de misiones y, adentro, una clase por paso. Teléfono primero.
   Tres tonos propios para «quién lo hace»: vos (cian) · adulto (durazno) · Claude (lila).
   =========================================================================== */
.gu { display: flex; flex-direction: column; gap: 14px; max-width: 760px; margin: 0 auto; }
.gu h2, .gu h3, .gu h4 { font-family: var(--display); letter-spacing: -.02em; color: var(--texto); margin: 0; }
.gu p { margin: 0; }
.gu ul, .gu ol { list-style: none; margin: 0; padding: 0; }

.gu-tono-vos { --tono: var(--cian); }
.gu-tono-adulto { --tono: var(--durazno); }
.gu-tono-claude { --tono: var(--lila); }

/* ── cabecera del camino ─────────────────────────────────────────────────── */
.gu-cab { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.gu-titulo { font-size: clamp(24px, 6.4vw, 34px); font-weight: 720; line-height: 1.08; }
.gu-bajada { color: var(--texto-2); font-size: 15px; line-height: 1.5; }
.gu-bajada strong { color: var(--entra); font-weight: 650; }
.gu-avance { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.gu-avance-barra { flex: 1; height: 8px; border-radius: 99px; background: var(--linea); overflow: hidden; }
.gu-avance-barra i { display: block; height: 100%; width: var(--pct, 0%); border-radius: 99px; background: var(--holo); transition: width .7s cubic-bezier(.2, .8, .2, 1); }
.gu-avance-texto { font-size: 13px; color: var(--texto-2); white-space: nowrap; }

/* ── quién hace cada paso ────────────────────────────────────────────────── */
.gu-quienes { display: grid; gap: 8px; }
.gu-quien { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radio-chico);
  border: 1px solid var(--linea); background: var(--superficie); }
.gu-quien-ico { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  color: var(--tono); border: 1.5px solid var(--tono); }
.gu-quien strong { font-size: 15px; color: var(--texto); }
.gu-quien p { font-size: 13px; color: var(--texto-2); line-height: 1.4; margin-top: 2px; }
.gu-regla { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--texto-2);
  padding: 12px 14px; border-radius: var(--radio-chico); border: 1px dashed var(--linea-fuerte); }
.gu-regla .ico { flex: none; margin-top: 2px; color: var(--aviso); }
.gu-regla strong { color: var(--texto); }

/* ── el camino: nodos unidos por una línea ───────────────────────────────── */
.gu-camino { position: relative; display: flex; flex-direction: column; gap: 14px; }
.gu-mision { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; }
.gu-mision::before { content: ""; position: absolute; left: 21px; top: 48px; bottom: -14px; width: 2px; background: var(--linea-fuerte); border-radius: 2px; }
.gu-mision:last-child::before { display: none; }
.gu-mision.gu-lista::before { background: var(--entra); }
.gu-nodo { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 1; }
.gu-lista .gu-nodo { background: var(--entra); color: var(--fondo); }
.gu-en-camino .gu-nodo { box-shadow: 0 0 0 3px var(--fondo), 0 0 0 5px var(--cian); border-radius: 50%; }
.gu-bloqueada .gu-nodo { opacity: .55; }
.gu-glifo-claude { display: grid; place-items: center; border-radius: 50%; color: var(--fondo); background: var(--lila); }
.gu-glifo-claude.gu-t44 { width: 44px; height: 44px; }
.gu-glifo-claude.gu-t28 { width: 28px; height: 28px; }
.gu-mision-cuerpo { padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gu-mision-cuerpo h3 { font-size: 21px; font-weight: 700; }
.gu-mision-bajada { font-size: 14px; line-height: 1.45; color: var(--texto-2); }
.gu-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gu-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12.5px;
  font-weight: 600; color: var(--texto-2); border: 1px solid var(--linea); background: var(--superficie); white-space: nowrap; }
.gu-chip.gu-gratis { color: var(--entra); border-color: color-mix(in srgb, var(--entra) 45%, transparent); }
.gu-chip[class*="gu-tono-"] { color: var(--tono); border-color: color-mix(in srgb, var(--tono) 50%, transparent); }
.gu-chip.gu-num { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto); }
.gu-premio { display: grid; gap: 4px; margin-top: 2px; }
.gu-premio li { display: flex; gap: 7px; align-items: flex-start; font-size: 13.5px; color: var(--texto-2); line-height: 1.4; }
.gu-premio .ico { flex: none; margin-top: 2px; color: var(--lila); }
.gu-puntos { display: flex; gap: 5px; margin-top: 4px; }
.gu-puntos i { flex: 1; max-width: 46px; height: 5px; border-radius: 99px; background: var(--linea-fuerte); }
.gu-puntos i.on { background: var(--entra); }
.gu-estado { font-size: 13px; color: var(--texto-3); display: flex; gap: 7px; align-items: flex-start; line-height: 1.45; }
.gu-estado .ico { flex: none; margin-top: 1px; color: var(--aviso); }
.gu-lista .gu-estado { color: var(--entra); }
.gu-ir { align-self: flex-start; margin-top: 2px; }

/* ── más adelante ────────────────────────────────────────────────────────── */
.gu-despues { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.gu-despues h3 { font-size: 17px; font-weight: 680; }
.gu-despues-lista { display: grid; gap: 10px; }
.gu-otra { padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; }
.gu-otra-cab { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.gu-otra h4 { font-size: 15.5px; font-weight: 660; }
.gu-otra .pill { flex: none; }
.gu-otra-costo { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--entra); }
.gu-otra-texto { font-size: 13.5px; line-height: 1.5; color: var(--texto-2); }

/* ── la clase ────────────────────────────────────────────────────────────── */
.gu-clase-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gu-volver { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 6px; border: 0; background: none;
  color: var(--texto-2); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; border-radius: 12px; }
.gu-volver:hover { color: var(--texto); }
.gu-clase-mision { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--texto); min-width: 0; }
.gu-clase-mision strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gu-tramos { display: flex; gap: 5px; }
.gu-tramo { flex: 1; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.gu-tramo i { display: block; width: 100%; height: 6px; border-radius: 99px; background: var(--linea-fuerte); transition: background .3s, height .2s; }
.gu-tramo.on i { background: var(--entra); }
.gu-tramo.aqui i { height: 9px; background: var(--holo); }
.gu-tramo.aqui.on i { background: var(--entra); box-shadow: 0 0 0 2px var(--fondo), 0 0 0 3.5px var(--entra); }

.gu-paso { padding: 20px 18px; display: flex; flex-direction: column; gap: 14px; }
.gu-paso-titulo { font-size: clamp(23px, 6vw, 30px); font-weight: 720; line-height: 1.12; }
.gu-bloque { display: flex; flex-direction: column; gap: 4px; }
.gu-grande { font-size: 17px; line-height: 1.5; color: var(--texto); }
.gu-para { flex-direction: row; gap: 9px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--texto-2);
  padding: 11px 13px; border-radius: var(--radio-chico); background: var(--superficie); border: 1px solid var(--linea); }
.gu-para .ico { flex: none; margin-top: 2px; color: var(--cian); }
.gu-zona { display: flex; flex-direction: column; gap: 12px; }
.gu-zona:empty { display: none; }
.gu-abrir { justify-content: space-between; text-decoration: none; }
.gu-abrir span { flex: 1; text-align: left; }

/* la ventana de mentira con el camino de clics */
.gu-ventana { border-radius: var(--radio-chico); border: 1px solid var(--linea-fuerte); overflow: hidden; background: var(--superficie-solida); }
.gu-ventana header { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--linea); }
.gu-ventana header i { width: 9px; height: 9px; border-radius: 50%; background: var(--linea-fuerte); }
.gu-ventana-titulo { margin-left: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--texto-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gu-clics { display: flex; flex-direction: column; gap: 0; padding: 12px; }
.gu-clic { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; opacity: 0;
  animation: gu-entra .45s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--i) * 90ms + 120ms); }
.gu-clic:not(:last-child)::after { content: ""; position: absolute; left: 12px; top: 37px; bottom: -3px; width: 2px; background: var(--linea-fuerte); }
.gu-clic-n { margin-top: 3px; }
.gu-clic-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono);
  font-size: 11px; color: var(--texto-2); border: 1.5px solid var(--linea-fuerte); background: var(--superficie-solida); }
.gu-clic-t { font-size: 14.5px; color: var(--texto); padding: 6px 11px; border-radius: 10px; border: 1px solid var(--linea); background: var(--superficie); line-height: 1.3; }
.gu-clic.ultimo .gu-clic-n { color: var(--fondo); background: var(--cian); border-color: var(--cian); }
.gu-clic.ultimo .gu-clic-t { border-color: var(--cian); font-weight: 650; animation: gu-late 1.9s ease-in-out 1.2s infinite; }
.gu-ventana-nota { padding: 0 12px 12px; }
@keyframes gu-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes gu-late { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cian) 55%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }

/* para copiar */
.gu-copia { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 11px 13px;
  border-radius: var(--radio-chico); border: 1px solid var(--linea); background: var(--superficie); }
.gu-copia .ceja { grid-column: 1 / -1; }
.gu-copia code { font-family: var(--mono); font-size: 12.5px; color: var(--texto); overflow-wrap: anywhere; line-height: 1.45; }

/* la acción dentro de la clase */
.gu-accion { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--radio-chico);
  border: 1.5px solid color-mix(in srgb, var(--lila) 45%, transparent); background: color-mix(in srgb, var(--lila) 7%, transparent); }
.gu-form { display: flex; flex-direction: column; gap: 10px; }
.gu-form .nota { display: flex; gap: 6px; align-items: flex-start; }
.gu-form .nota .ico { flex: none; margin-top: 2px; }
.gu-error { color: var(--sale); font-size: 14px; }
.gu-conectar { min-height: 52px; font-size: 16px; }

.gu-cartel { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; line-height: 1.5; padding: 11px 13px; border-radius: var(--radio-chico);
  border: 1px solid var(--linea); color: var(--texto-2); }
.gu-cartel .ico { flex: none; margin-top: 2px; }
.gu-cartel-aviso { border-color: color-mix(in srgb, var(--aviso) 50%, transparent); background: color-mix(in srgb, var(--aviso) 9%, transparent); }
.gu-cartel-aviso .ico { color: var(--aviso); }
.gu-cartel-bien { border-color: color-mix(in srgb, var(--entra) 50%, transparent); }
.gu-cartel-bien .ico { color: var(--entra); }
.gu-cartel-info .ico { color: var(--cian); }

/* palabras nuevas: fichas que se dan vuelta */
.gu-palabras { display: flex; flex-direction: column; gap: 8px; }
.gu-fichas { display: grid; gap: 8px; }
.gu-ficha { position: relative; text-align: left; font: inherit; color: var(--texto); cursor: pointer; min-height: 48px; padding: 11px 13px;
  border-radius: var(--radio-chico); border: 1px dashed var(--linea-fuerte); background: none; display: flex; flex-direction: column; gap: 6px; }
.gu-ficha-frente { display: flex; align-items: center; gap: 8px; }
.gu-ficha-frente .ico { color: var(--lila); }
.gu-ficha-dorso { display: none; font-size: 14px; line-height: 1.5; color: var(--texto-2); }
.gu-ficha.vuelta { border-style: solid; border-color: color-mix(in srgb, var(--lila) 55%, transparent); background: color-mix(in srgb, var(--lila) 8%, transparent); }
.gu-ficha.vuelta .gu-ficha-dorso { display: block; animation: gu-entra .3s ease both; }
.gu-desmarcar { align-self: flex-start; border: 0; background: none; color: var(--texto-3); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; min-height: 44px; }

/* el pie de la clase */
.gu-pie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gu-pie .btn-primario, .gu-pie .gu-comprobar { margin-left: auto; }
.gu-solo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-3); }
.gu-solo.bien { color: var(--entra); }

/* el cierre */
.gu-fin { align-items: center; text-align: center; padding: 30px 20px; }
.gu-fin-sello { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; color: var(--fondo); background: var(--entra);
  animation: gu-sello .6s cubic-bezier(.2, 1.4, .4, 1) both; }
.gu-premio-grande { text-align: left; gap: 8px; }
.gu-premio-grande li { font-size: 15px; }
.gu-fin-botones { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 380px; }
@keyframes gu-sello { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── las imágenes 3D (img/3d-*.webp) ─────────────────────────────────────── */
.ilu-3d { display: block; object-fit: contain; animation: gu-flota 6s ease-in-out infinite; }
.gu-cab { position: relative; padding-right: 128px; min-height: 148px; }
.gu-cab-arte { position: absolute; right: 8px; top: 12px; pointer-events: none; }
.gu-mision-cuerpo { position: relative; }
.gu-mision-arte { position: absolute; right: 10px; top: 8px; pointer-events: none; }
.gu-mision-arte + .ceja + h3 { padding-right: 84px; }
.gu-accion-arte { align-self: center; }
@keyframes gu-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (max-width: 420px) {
  .gu-cab { padding-right: 20px; }
  .gu-cab-arte { position: static; align-self: center; order: -1; }
}
@media (prefers-reduced-motion: reduce) { .ilu-3d { animation: none; } }

/* la puerta a las clases, en la cabecera de Cuentas */
.cu-guia { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin-top: 10px; padding: 10px 14px; text-align: left;
  font: inherit; color: var(--texto); cursor: pointer; border-radius: var(--radio-chico);
  border: 1px solid color-mix(in srgb, var(--lila) 45%, transparent); background: color-mix(in srgb, var(--lila) 8%, transparent); }
.cu-guia > .ico:first-child { flex: none; color: var(--lila); }
.cu-guia > span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cu-guia strong { font-size: 15px; }
.cu-guia small { font-size: 13px; color: var(--texto-2); }
.cu-guia > .ico:last-child { flex: none; color: var(--texto-3); }
/* en compu la cabecera de Cuentas es una fila: el resumen no se achica por culpa de esta puerta
   (antes le quedaban 237 px y los tres rótulos se pisaban); si no entra, la puerta baja de renglón */
@media (min-width: 960px) {
  .cu-cabeza { flex-wrap: wrap; }
  .cu-cabeza .cu-resumen { flex: 1 1 400px; }
  .cu-guia { width: auto; flex: 1 1 280px; margin-top: 0; }
}

@media (min-width: 720px) {
  .gu-quienes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gu-despues-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gu-paso { padding: 26px; }
  .gu-fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .gu-clic { animation: none; opacity: 1; }
  .gu-clic.ultimo .gu-clic-t, .gu-fin-sello, .gu-ficha.vuelta .gu-ficha-dorso { animation: none; }
  .gu-avance-barra i { transition: none; }
}