/* =====================================================================
   Asistente de Nutrimos & Servimos (mascota): lanzador, panel de ayuda,
   recorrido guiado y avisos. Usa las poses originales de la mascota.
   ===================================================================== */
.con-asistente .flotantes { bottom: 6.75rem; }

/* ---------- Lanzador ---------- */
.asistente-lanzador {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 850;
  display: flex; align-items: flex-end; gap: .35rem; padding: 0; border: 0; background: none; cursor: pointer;
  transition: opacity .25s ease, transform .25s ease;
}
.asistente-lanzador[hidden] { display: none; }
.asistente-lanzador.es-oculto { opacity: 0; transform: translateY(16px); pointer-events: none; }
.lanzador-globo {
  max-width: 230px; margin-bottom: 1.6rem; padding: .55rem .8rem; text-align: left;
  background: #fff; color: var(--grafito); border: 1px solid var(--gris-150); border-radius: 12px 12px 4px 12px; box-shadow: var(--sombra-lg);
  font: 700 .95rem/1.2 var(--fuente-titulos); font-stretch: condensed;
}
.asistente-lanzador[aria-expanded="true"] .lanzador-globo { display: none; }
.lanzador-avatar { position: relative; display: grid; place-items: end center; width: 66px; height: 78px; }
.lanzador-avatar::before { content: ""; position: absolute; inset: auto 2px 0 2px; height: 58px; border-radius: 50%; background: #fff; box-shadow: var(--sombra-lg); }
.lanzador-avatar img { position: relative; width: 56px; height: auto; margin-bottom: 4px; }
.asistente-lanzador:hover .lanzador-avatar img { transform: translateY(-2px) rotate(-3deg); transition: transform .2s ease; }
.asistente-lanzador:focus-visible { outline: none; }
.asistente-lanzador:focus-visible .lanzador-avatar::before { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--rojo); }
.asistente-lanzador.es-mini .lanzador-avatar { display: none; }
.asistente-lanzador.es-mini .lanzador-globo { margin: 0; padding: .45rem .8rem; border-radius: 8px; background: var(--rojo); color: #fff; border-color: var(--rojo); }
.lanzador-entrar { animation: lanzadorEntrar .5s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes lanzadorEntrar { from { opacity: 0; transform: translateY(18px); } }
@media (max-width: 640px) {
  .asistente-lanzador { right: .6rem; bottom: .6rem; }
  .lanzador-globo { display: none; }
  .asistente-lanzador.es-mini .lanzador-globo { display: block; }
  .lanzador-avatar { width: 56px; height: 66px; }
  .lanzador-avatar::before { height: 50px; }
  .lanzador-avatar img { width: 46px; }
  .con-asistente .flotantes { bottom: 5.25rem; }
}

/* ---------- Panel de ayuda ---------- */
.asistente-panel {
  position: fixed; right: 1rem; bottom: 6.4rem; z-index: 860; width: min(380px, calc(100vw - 2rem));
  max-height: min(78vh, 600px); display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--gris-150); border-radius: 14px; box-shadow: 0 24px 60px rgba(33, 34, 36, .22);
  animation: panelEntrar .25s ease both;
}
.asistente-panel[hidden] { display: none; }
@keyframes panelEntrar { from { opacity: 0; transform: translateY(12px); } }
.ap-cabecera { position: relative; display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: .8rem; align-items: end; padding: 1rem 2.8rem .9rem 1rem; color: #fff; }
.ap-cabecera picture, .ap-cabecera img { width: 74px; height: auto; display: block; margin-bottom: -.9rem; }
.ap-nombre { margin: 0 0 .2rem; font: 700 .78rem/1 var(--fuente-titulos); font-stretch: condensed; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.ap-mensaje { margin: 0 0 .1rem; font: 700 1.12rem/1.2 var(--fuente-titulos); font-stretch: condensed; color: #fff; }
.ap-minimizar { position: absolute; right: .5rem; top: .5rem; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; }
.ap-minimizar:hover { background: rgba(255, 255, 255, .28); }
.ap-cuerpo { overflow-y: auto; padding: 1.1rem 1rem 1rem; display: grid; gap: .9rem; }
.ap-acciones { display: flex; flex-wrap: wrap; gap: .4rem; }
.ap-acciones a { padding: .4rem .7rem; border-radius: 6px; background: var(--rojo-100); color: var(--rojo-700); font-size: var(--t-sm); font-weight: 700; text-decoration: none; }
.ap-acciones a:hover { background: var(--rojo); color: #fff; }
.ap-subtitulo { margin: .2rem 0 0; font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-700); }
.ap-preguntas { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.ap-preguntas button {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .7rem .8rem; text-align: left;
  background: var(--gris-50); color: var(--grafito); border: 1px solid var(--gris-150); border-radius: 8px; cursor: pointer; font: 600 var(--t-sm)/1.3 var(--fuente);
}
.ap-preguntas button:hover { border-color: var(--rojo); color: var(--rojo); }
.ap-preguntas .icono { width: 16px; height: 16px; flex: none; color: var(--rojo); }
.ap-respuesta { padding: .9rem 1rem; background: var(--gris-50); border-left: 3px solid var(--rojo); border-radius: 0 8px 8px 0; }
.ap-respuesta[hidden] { display: none; }
.ap-respuesta-pregunta { margin: 0 0 .4rem; font: 700 1.05rem/1.25 var(--fuente-titulos); font-stretch: condensed; color: var(--rojo); }
.ap-respuesta p { margin: 0 0 .7rem; font-size: var(--t-sm); color: var(--texto-suave); }
.ap-respuesta .ap-acciones { margin-bottom: .6rem; }
.ap-volver { padding: 0; border: 0; background: none; color: var(--gris-700); font-size: var(--t-xs); font-weight: 700; text-decoration: underline; cursor: pointer; }
.ap-pie { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .7rem 1rem; border-top: 1px solid var(--gris-150); font-size: var(--t-xs); color: var(--gris-700); }
.ap-pie label { display: inline-flex; gap: .4rem; align-items: center; cursor: pointer; }
.ap-pie input { accent-color: var(--rojo); width: 16px; height: 16px; }
.ap-ocultar { padding: 0; border: 0; background: none; color: var(--gris-700); font-size: var(--t-xs); font-weight: 700; text-decoration: underline; cursor: pointer; }
@media (max-width: 640px) {
  .asistente-panel { left: .5rem; right: .5rem; bottom: .5rem; width: auto; max-height: 82vh; }
}

/* ---------- Recorrido guiado ---------- */
.recorrido-foco {
  position: fixed; z-index: 900; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 4px #fff, 0 0 0 9999px rgba(30, 31, 33, .55);
  transition: top .35s ease, left .35s ease, width .35s ease, height .35s ease;
}
.recorrido-tarjeta {
  position: fixed; z-index: 910; width: min(380px, calc(100vw - 1.5rem));
  display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: .85rem; align-items: start;
  padding: 1rem 1.1rem 1rem .9rem; background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
  transition: top .35s ease, left .35s ease;
}
.recorrido-tarjeta picture, .recorrido-tarjeta img { width: 78px; height: auto; display: block; }
.rt-paso { margin: 0 0 .15rem; font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-600); }
.rt-titulo { margin: 0 0 .3rem; font-size: 1.35rem; text-transform: uppercase; color: var(--rojo); }
.rt-titulo:focus { outline: none; }
.rt-texto { margin: 0 0 .85rem; font-size: var(--t-sm); color: var(--texto-suave); }
.rt-controles { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.rt-controles .btn { min-height: 38px; padding: .45rem .85rem; font-size: var(--t-sm); }
.rt-saltar { margin-left: auto; padding: 0; border: 0; background: none; color: var(--gris-700); font-size: var(--t-xs); font-weight: 700; text-decoration: underline; cursor: pointer; }
.rt-barra { grid-column: 1 / -1; height: 4px; margin-top: .2rem; background: var(--gris-150); border-radius: 4px; overflow: hidden; }
.rt-barra span { display: block; height: 100%; background: var(--rojo); transition: width .35s ease; }
@media (max-width: 640px) {
  .recorrido-tarjeta { left: .5rem !important; right: .5rem; top: auto !important; bottom: .5rem; width: auto; grid-template-columns: 62px minmax(0, 1fr); }
  .recorrido-tarjeta picture, .recorrido-tarjeta img { width: 62px; }
}

/* ---------- Avisos de la mascota (confirmación, advertencia, despedida) ---------- */
.asistente-aviso {
  position: fixed; right: 1rem; bottom: 6.6rem; z-index: 870; width: min(330px, calc(100vw - 2rem));
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: .7rem; align-items: center;
  padding: .8rem .9rem; background: #fff; border: 1px solid var(--gris-150); border-radius: 12px; box-shadow: var(--sombra-lg);
  animation: panelEntrar .25s ease both;
}
.asistente-aviso picture, .asistente-aviso img { width: 56px; height: auto; }
.asistente-aviso p { margin: 0; font-size: var(--t-sm); color: var(--grafito); }
.asistente-aviso strong { display: block; font: 700 1.02rem/1.2 var(--fuente-titulos); font-stretch: condensed; color: var(--rojo); }
@media (max-width: 640px) { .asistente-aviso { right: .5rem; left: .5rem; width: auto; bottom: 5.4rem; } }

/* Preferencia del visitante: sin animaciones de la mascota */
.asistente-quieto .hero-mascota img, .asistente-quieto .lanzador-entrar, .asistente-quieto .asistente-panel,
.asistente-quieto .asistente-aviso, .asistente-quieto .recorrido-foco, .asistente-quieto .recorrido-tarjeta { animation: none !important; transition: none !important; }