/* STGO · Anima — la pieza en directo y la capa de la visita (2026-10-03; G2 de «Anima en directo»).
   Cargado solo donde vive Anima (escritorio y, en «modo móvil», teléfonos y tabletas; nunca con html.stgo-sin-anima): lo
   inserta el cargador de index.html junto a sus scripts.
   UNA hoja vertical en la que ella llena todo (la maqueta aprobada, 3_MONTAJE/ANIMA/DIRECTO/maqueta.html): en la
   portada, el retrato de la tarjeta «Soy Anima»; en la esquina, su retrato de 118 × 148 con «● ANIMA»; asomada, 256 × 320
   con su invitación; en directo, la hoja de 3:5 con su cabecera arriba y los comentarios encima del vídeo, abajo, sobre
   un degradado de lectura; compacta, 268 × 402 con su último comentario. La geometría (dónde está la pieza, de qué
   tamaño, el encuadre de su vídeo) la escribe js/anima/forma.js; este CSS pone los colores, la letra, la maqueta de cada
   panel (a su tamaño de destino, anclado abajo a la derecha: la superficie lo recorta mientras crece) y sus fundidos: lo
   que sale se va en 0,18 s y lo que entra llega en 0,32 s cuando la hoja casi ha llegado (0,22 s).
   Material de la casa: negro #0f0f0f, amarillo #ffe600, papel #f4f3ef; micro-etiquetas Roboto Mono en mayúsculas,
   texto Inter, su nombre en Montserrat; 3 px en los controles, 1,25rem en las hojas, filetes punteados. Sin burbujas,
   sin desenfoques de fondo y sin degradados de adorno: solo los de lectura.
   Plan: docs/plans/2026-10-02-anima-en-directo.md («La pieza») */

.anima {
  --anima-amarillo: #ffe600;
  --anima-papel: #f4f3ef;
  --anima-negro: #0f0f0f;
  --anima-mono: "Roboto Mono VF", "Roboto Mono", monospace;
  --anima-texto: "Inter VF", Inter, system-ui, sans-serif;
  --anima-titulo: Montserrat, "Inter VF", sans-serif;
  --anima-linea: rgba(255, 255, 255, 0.14);
  --anima-linea-2: rgba(255, 255, 255, 0.22);
  --anima-texto-2: rgba(255, 255, 255, 0.72);
  --anima-texto-3: rgba(255, 255, 255, 0.5);
  --anima-ficha-fondo: rgba(15, 15, 15, 0.62);
  --anima-entra: opacity 0.32s ease 0.22s, visibility 0s;          /* lo que entra, cuando la hoja casi ha llegado */
  --anima-sale: opacity 0.18s ease, visibility 0s linear 0.18s;     /* lo que sale, enseguida */
  display: block;
  position: fixed;
  inset: 0;
  z-index: 8000;                                          /* página < Anima < Contacto (9000) < experiencia (9500) < avisos */
  pointer-events: none;
  color: #fff;
  font-family: var(--anima-texto);
  -webkit-font-smoothing: antialiased;
}

.anima [hidden] {
  display: none !important;
}

/* ── la pieza: la única caja que se coloca (translate3d + ancho y alto, desde forma.js) ── */
.anima_pieza {
  position: absolute;
  left: 0;
  top: 0;
  width: 118px;
  height: 148px;
  opacity: 0;                                             /* hasta que forma.js la coloca */
  contain: layout style;
  pointer-events: none;
}

/* la sombra, aparte de la superficie (que recorta): una capa vacía del tamaño de la hoja en directo que forma.js escala
   hasta el de la superficie (solo con transform: su desenfoque nunca se repinta) y funde a 0 en el hueco de la portada */
.anima_sombra {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--anima-directo-w, 468px);
  height: var(--anima-directo-h, 780px);
  border-radius: 1.25rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35);
  transform-origin: 0 0;
  pointer-events: none;
}

/* la anticipación (js/anima/intencion.js): el puntero que se acerca a su retrato en la esquina lo levanta 3 px (forma.js)
   y su sombra se hace más honda: una capa encima que se funde en 180 ms */
.anima_sombra::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.anima.is-anticipa .anima_sombra::after {
  opacity: 1;
}

/* su filete de 1 px va en la propia superficie (dentro de su recorte); radio, fondo y filete los escribe forma.js cuando
   cambian (0 en el hueco de la portada: ahí el borde es el de la tarjeta) */
.anima_superficie {
  position: absolute;
  inset: 0;
  overflow: clip;
  border-radius: 14px;
  background: #111;
  outline: 1px solid var(--anima-linea);
  outline-offset: -1px;
  color: #fff;
  contain: strict;
  pointer-events: none;
}

.anima.is-moviendo .anima_pieza,
.anima.is-moviendo .anima_sombra,
.anima[data-tam="guia"] .anima_pieza {
  will-change: transform;
}

.anima.is-abierta .anima_superficie {
  pointer-events: auto;
}

/* ── su vídeo: llena la hoja (object-fit: cover y el encuadre de su plano; «más cerca», su escala sobre la cara) ── */
.anima_retrato,
.anima_retrato-marco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.anima_retrato-marco {
  background: #111;
}

.anima_video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 45% 40%;
}

/* el segundo vídeo de la presencia: la reserva, donde el director prepara el plano siguiente quieto y ya en su
   instante. El cambio de plano es un corte seco, en el mismo fotograma: nunca un fundido (G1 de «Anima en directo») */
.anima_video.is-reserva {
  opacity: 0;
  transition: none;
}

.anima_video.is-reserva.is-delante {
  opacity: 1;
}

/* ── los degradados de lectura: arriba, bajo su cabecera; abajo, bajo sus comentarios (en la esquina y asomada, solo el
   de abajo; en el hueco de la portada, ninguno: como la tarjeta) ── */
.anima_velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.anima_velo::before,
.anima_velo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.anima_velo::before {
  top: 0;
  height: 140px;
  background: linear-gradient(rgba(10, 10, 10, 0.62), rgba(10, 10, 10, 0));
}

.anima_velo::after {
  bottom: 0;
  height: 62%;
  background: linear-gradient(rgba(10, 10, 10, 0), rgba(10, 10, 10, 0.5) 38%, rgba(10, 10, 10, 0.86));
}

.anima.is-abierta .anima_velo::before,
.anima.is-abierta .anima_velo::after {
  opacity: 1;
}

.anima.is-esquina:not(.is-abierta) .anima_velo::after {
  height: 50%;
  background: linear-gradient(rgba(10, 10, 10, 0), rgba(10, 10, 10, 0.7));
  opacity: 1;
}

.anima.is-esquina.is-asomada:not(.is-abierta) .anima_velo::after {
  height: 60%;
  background: linear-gradient(rgba(10, 10, 10, 0), rgba(10, 10, 10, 0.5) 42%, rgba(10, 10, 10, 0.9));
}

/* ── en la portada: su etiqueta sobre el retrato, como en la tarjeta (la de la tarjeta queda debajo de ella) ── */
.anima_tag {
  position: absolute;
  z-index: 2;
  left: 0.45rem;
  bottom: 0.4rem;
  padding: 0.1rem 0.3rem;
  background: rgba(0, 0, 0, 0.72);
  color: var(--anima-amarillo);
  font-family: var(--anima-mono);
  font-size: 0.55rem;
  line-height: 1.4;
  letter-spacing: 0.14em;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.anima.is-en-tarjeta:not(.is-abierta) .anima_tag {
  opacity: 1;
}

/* ── en la esquina: su retrato vertical con «● ANIMA», el punto amarillo latiendo ── */
.anima_mini {
  position: absolute;
  z-index: 2;
  left: 9px;
  bottom: 9px;
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 0.625rem/1 var(--anima-mono);
  letter-spacing: 0.14em;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.anima_mini i,
.anima_estado i,
.anima_directo i,
.anima_marca i {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--anima-amarillo);
  box-shadow: 0 0 0 0 rgba(255, 230, 0, 0.6);
  animation: anima-latido 1.8s ease-out infinite;
}

.anima.is-esquina:not(.is-abierta):not(.is-asomada) .anima_mini {
  opacity: 1;
}

.anima.is-esquina:not(.is-abierta) .anima_superficie {
  cursor: pointer;
}

/* ── asomada (el puntero o el foco sobre su retrato en la esquina): crece a 256 × 320 y la invita a hablar ── */
.anima_invita {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 14px 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s linear 0.14s;
  pointer-events: none;
}

/* (abierta, lo de la esquina se va enseguida: la hoja crece desde ella) */
.anima.is-abierta .anima_invita {
  transition: opacity 0.08s ease, transform 0.08s ease, visibility 0s linear 0.08s;
}

.anima.is-abierta .anima_mini,
.anima.is-abierta .anima_tag {
  transition: opacity 0.08s ease;
}

.anima.is-esquina.is-asomada:not(.is-abierta) .anima_invita {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.3s ease 0.17s, transform 0.3s ease 0.17s, visibility 0s;
}

.anima_invita-nombre {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 600 1.1rem/1 var(--anima-titulo);
  white-space: nowrap;
}

.anima_directo,
.anima_estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 22px;
  padding: 0 8px;
  box-sizing: border-box;
  border-radius: 3px;
  background: var(--anima-ficha-fondo);
  outline: 1px solid var(--anima-linea);
  outline-offset: -1px;
  color: #fff;
  font: 500 0.625rem/1 var(--anima-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.anima_invita-nombre .anima_directo {
  height: 20px;
}

.anima_directo b,
.anima_estado b {
  font-weight: 500;
}

.anima_invita-soy {
  margin-top: 7px;
  color: var(--anima-texto-2);
  font: 400 0.625rem/1.3 var(--anima-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.anima_invita-cta {
  margin-top: 12px;
  height: 36px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 3px;
  background: var(--anima-amarillo);
  color: var(--anima-negro);
  font: 600 0.6875rem/1 var(--anima-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* el estado, honesto: el punto amarillo latiendo solo con su IA lista (y mientras se prepara); gris si aún no está */
:is(.anima_cab, .anima_invita)[data-motor]:not([data-motor="lista"]):not([data-motor="cargando"]) :is(.anima_estado, .anima_directo) i {
  background: rgba(255, 255, 255, 0.55);
  animation: none;
}

/* (con un fallo o sin WebGPU, rojo: G3, con la misma especificidad que la regla de arriba, que si no lo dejaba gris) */
:is(.anima_cab, .anima_invita)[data-motor]:not([data-motor="lista"]):not([data-motor="cargando"])[data-motor="error"] :is(.anima_estado, .anima_directo) i,
:is(.anima_cab, .anima_invita)[data-motor]:not([data-motor="lista"]):not([data-motor="cargando"])[data-motor="no-disponible"] :is(.anima_estado, .anima_directo) i {
  background: #f3350c;
}

/* ── los paneles: maquetados a su tamaño de destino, anclados abajo a la derecha (la superficie los recorta mientras la
   hoja crece o encoge: su texto nunca cambia de ancho en vuelo); el inactivo no se ve, no se alcanza y no se oye
   (visibility + inert + aria-hidden) ── */
.anima_panel {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  width: var(--anima-directo-w, 468px);
  height: var(--anima-directo-h, 780px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: var(--anima-sale);
  pointer-events: none;
}

.anima_panel.is-activo {
  opacity: 1;
  visibility: visible;
  transition: var(--anima-entra);
}

/* (de la hoja en directo a la escena y al revés -- el mismo marco, la misma cabecera --: el panel cambia de golpe y solo su
   cuerpo entra con un fundido; la cabecera no parpadea) */
.anima.is-mismo-marco .anima_panel {
  transition: none;
}

.anima.is-mismo-marco .anima_panel.is-activo > :not(.anima_cab) {
  animation: anima-cuerpo-entra 0.3s ease both;
}

@keyframes anima-cuerpo-entra {
  from { opacity: 0; }
}

.anima_panel[data-tam="aviso"] {
  width: var(--anima-compacta-w, 268px);
  height: var(--anima-compacta-h, 402px);
}

.anima_panel[data-tam="guia"] {
  width: 300px;
  height: 450px;
}

/* (la raíz del panel deja pasar el puntero a su vídeo, debajo; su texto y sus controles, no) */
.anima_panel.is-activo > *,
.anima_panel.is-activo .anima_cab > * {
  pointer-events: auto;
}

.anima_panel.is-activo > .anima_cab {
  pointer-events: none;
}

/* ── la cabecera: «Anima» con su ficha de estado y el tiempo de conversación, que es una IA de STGO y que funciona en
   este equipo; a la derecha, el idioma, hacerla pequeña y cerrar, en fichas sólidas ── */
.anima_cab {
  position: relative;
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 16px 0 18px;
}

.anima_quien {
  flex: 1;
  min-width: 0;
}

.anima_nombre-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.anima_nombre {
  flex: none;
  margin: 0;
  color: #fff;
  font: 600 1.15rem/1 var(--anima-titulo);
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.anima_estado {
  min-width: 0;
  overflow: hidden;
}

.anima_estado b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  /* (con line-height 1 la caja mide 10 px y recortaba la tilde de «PREPARÁNDOSE» y «EN LÍNEA»: 1,6 deja sitio a las
     tildes y a lo que baja de la línea, y la ficha sigue midiendo 22 px) */
  line-height: 1.6;
}

.anima_reloj {
  flex: none;
  color: var(--anima-texto-2);
  font-weight: 400;
}

.anima_soy {
  margin: 7px 0 0;
  color: var(--anima-texto-2);
  font: 400 0.625rem/1.3 var(--anima-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* «funciona en este equipo» abre el aviso legal («Cómo funciona Anima»): el mismo texto, con su filete punteado */
.anima_soy-legal {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: underline dotted rgba(255, 255, 255, 0.35);
  text-underline-offset: 3px;
  cursor: pointer;
}

.anima_soy-legal:hover {
  color: #fff;
}

.anima_soy-legal:focus-visible {
  outline: 2px solid var(--anima-amarillo);
  outline-offset: 2px;
}

.anima_botones {
  flex: none;
  display: flex;
  gap: 6px;
}

/* las fichas sólidas: idioma, hacerla pequeña, ampliar y cerrar */
.anima_ficha {
  height: 28px;
  min-width: 28px;
  padding: 0 8px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 3px;
  background: var(--anima-ficha-fondo);
  outline: 1px solid var(--anima-linea);
  outline-offset: -1px;
  color: #fff;
  font: 500 0.6875rem/1 var(--anima-mono);
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.15s ease, outline-color 0.15s ease;
}

.anima_ficha:hover {
  background: rgba(15, 15, 15, 0.85);
  outline-color: rgba(255, 255, 255, 0.35);
}

.anima_ficha svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

.anima_idioma i {
  font-style: normal;
}

.anima_ficha:focus-visible,
.anima_enviar:focus-visible,
.anima_detener:focus-visible,
.anima_boton:focus-visible,
.anima_chip:focus-visible,
.anima_historia:focus-visible,
.anima_ruta:focus-visible {
  outline: 2px solid var(--anima-amarillo);
  outline-offset: 2px;
}

/* ── los comentarios: abajo, encima de su vídeo, sin burbujas; se van perdiendo con el tiempo (la consola dice la edad
   de cada uno) y, hacia arriba, una máscara los pierde. Con el puntero encima se paran y todo el hilo se puede leer ── */
.anima_feed {
  position: relative;
  flex: 0 1 auto;
  margin-top: auto;
  min-height: 0;
  max-height: calc(var(--anima-directo-h, 780px) * 0.42);
  padding: 0 18px;
  overflow: hidden;
  overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(transparent 0, #000 72px);
  mask-image: linear-gradient(transparent 0, #000 72px);
}

/* una decisión abierta (el permiso) se lee entera: sin tope ni máscara, desde su título */
.anima_panel.is-decision .anima_feed {
  max-height: none;
  -webkit-mask-image: none;
  mask-image: none;
}

.anima_feed.is-pausa {
  overflow-y: auto;
  scrollbar-width: none;
}

.anima_feed.is-pausa::-webkit-scrollbar {
  display: none;
}

.anima_hilo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 72px 0 0;
  list-style: none;
}

.anima_hilo:focus-visible {
  outline: 0;
}

.anima_tarjetas:not(:empty) {
  padding: 14px 0 2px;
}

.anima_e {
  display: block;
  transition: opacity 0.9s ease, transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), max-height 0.6s ease, margin 0.6s ease;
}

.anima_e.is-nueva {
  opacity: 0 !important;
  transform: translateY(10px);
}

.anima_e.is-oculta {
  opacity: 0 !important;
  max-height: 0;
  margin-top: -14px;
  overflow: hidden;
}

.anima_feed.is-pausa .anima_e {
  opacity: 1 !important;
  transition: opacity 0.3s ease;                          /* (lo perdido aparece sin recolocar lo que se lee) */
}

.anima_feed.is-pausa .anima_e.is-oculta {
  max-height: none;
  margin-top: 0;
}

.anima_e-quien {
  display: block;
  margin-bottom: 5px;
  color: var(--anima-texto-2);
  font: 500 0.625rem/1 var(--anima-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.anima_e.is-anima .anima_e-quien {
  color: var(--anima-amarillo);
}

.anima_e-texto {
  color: rgba(255, 255, 255, 0.9);
  font: 400 0.94rem/1.46 var(--anima-texto);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  text-wrap: pretty;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.anima_e.is-anima .anima_e-texto {
  color: #fff;
}

/* las líneas de sistema (la memoria local, las paradas de la visita): no son palabras suyas, sin «ANIMA» */
.anima_e.is-sistema .anima_e-quien,
.anima_parada .anima_e-quien {
  color: var(--anima-texto-2);
}

.anima_e.is-sistema .anima_e-texto {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.875rem;
}

.anima_parada {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.anima_parada .anima_e-quien {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anima_parada-ver {
  flex: none;
  height: 22px;
  padding: 0 8px;
  border: 0;
  border-radius: 3px;
  background: var(--anima-ficha-fondo);
  outline: 1px solid var(--anima-linea);
  outline-offset: -1px;
  color: var(--anima-texto-2);
  font: 500 0.625rem/1 var(--anima-mono);
  letter-spacing: 0.12em;
  cursor: pointer;
}

.anima_parada-ver:hover {
  color: #fff;
  outline-color: rgba(255, 255, 255, 0.35);
}

/* mientras piensa, tres puntos; mientras escribe, su cursor amarillo */
.anima_puntos {
  display: inline-flex;
  gap: 5px;
  padding: 6px 0 2px;
}

.anima_puntos i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  animation: anima-punto 1.2s ease-in-out infinite;
}

.anima_puntos i:nth-child(2) { animation-delay: 0.15s; }
.anima_puntos i:nth-child(3) { animation-delay: 0.3s; }

.anima_cursor {
  display: inline-block;
  width: 0.5em;
  height: 1.02em;
  margin-left: 2px;
  vertical-align: -0.16em;
  background: var(--anima-amarillo);
  animation: anima-parpadeo 1s steps(1) infinite;
}

/* la acción de su respuesta («VER LAS CERTIFICACIONES ↗»): en mono, con borde amarillo */
.anima_e-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.anima_ruta,
.anima_e-acciones .anima_chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  height: 28px;
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid var(--anima-amarillo);
  border-radius: 3px;
  background: rgba(15, 15, 15, 0.55);
  color: var(--anima-amarillo);
  font: 500 0.6875rem/1 var(--anima-mono);
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.anima_ruta {
  display: flex;
  margin-top: 10px;
}

.anima_ruta::after,
.anima_e-acciones .anima_chip.is-accion::after {
  content: "↗";
}

.anima_ruta:hover,
.anima_e-acciones .anima_chip:hover {
  background: var(--anima-amarillo);
  color: var(--anima-negro);
}

.anima_e-acciones .anima_chip.is-hecha {
  border-color: rgba(255, 230, 0, 0.45);
  color: rgba(255, 230, 0, 0.7);
}

.anima_contacto {
  color: var(--anima-amarillo);
  text-decoration-color: rgba(255, 230, 0, 0.48);
  text-underline-offset: 0.16em;
}

/* «↑ CONVERSACIÓN»: con lo de antes perdido, lo abre entero */
.anima_historia {
  position: absolute;
  z-index: 2;
  right: 16px;
  top: 62px;
  height: 22px;
  padding: 0 8px;
  border: 0;
  border-radius: 3px;
  background: var(--anima-ficha-fondo);
  outline: 1px solid var(--anima-linea);
  outline-offset: -1px;
  color: var(--anima-texto-2);
  font: 500 0.625rem/1 var(--anima-mono);
  letter-spacing: 0.12em;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.anima_panel.is-historia .anima_historia {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s;
}

/* ── las líneas de sistema de la consola (el permiso, la carga, los requisitos, activar, la visita por empezar): sin
   «ANIMA», con su etiqueta mono, su texto y sus botones ── */
.anima_tarjeta {
  margin: 0 0 12px;
}

.anima_tarjeta-etq {
  display: block;
  margin-bottom: 6px;
  color: var(--anima-texto-2);
  font: 500 0.625rem/1 var(--anima-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.anima_tarjeta p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font: 400 0.875rem/1.45 var(--anima-texto);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.anima_tarjeta-titulo {
  margin: 0 0 8px;
  color: #fff;
  font: 600 1rem/1.2 var(--anima-titulo);
}

.anima_tarjeta-titulo:focus {
  outline: 0;
}

/* el permiso (G3, la línea de sistema de la maqueta): su etiqueta fuera («ANTES DE EMPEZAR») y, en su caja, el aviso legal
   y de descarga de siempre en un tramo que se desplaza -- lo que queda por leer se funde abajo; leído, nada se funde --,
   con la decisión siempre a la vista */
.anima_permiso {
  padding: 14px;
  border-radius: 3px;
  background: rgba(15, 15, 15, 0.84);
  outline: 1px solid var(--anima-linea-2);
  outline-offset: -1px;
}

.anima_tarjeta.is-aviso .anima_tarjeta-etq {
  margin-bottom: 5px;
}

.anima_tarjeta.is-aviso .anima_tarjeta-titulo {
  margin-bottom: 10px;
  font-size: 0.9375rem;
}

.anima_tarjeta.is-aviso .anima_aviso {
  max-height: 9.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(244, 243, 239, 0.2) transparent;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 2.4rem), transparent);
  mask-image: linear-gradient(#000 calc(100% - 2.4rem), transparent);
}

.anima_tarjeta.is-aviso .anima_aviso.is-final {
  -webkit-mask-image: none;
  mask-image: none;
}

.anima_tarjeta.is-aviso .anima_aviso:focus-visible {
  outline: 1px dotted rgba(255, 230, 0, 0.6);
  outline-offset: 2px;
}

.anima_aviso dl {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.4rem 0.7rem;
  margin: 0 0 0.8rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.anima_aviso dt {
  padding-top: 0.15rem;
  color: var(--anima-texto-3);
  font-family: var(--anima-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.anima_aviso dd { margin: 0; color: rgba(244, 243, 239, 0.86); }
.anima_aviso dd b { color: var(--anima-amarillo); font-weight: 600; }

.anima_aviso .stgo-anima-legal_texto p {
  margin: 0 0 0.55rem;
  color: rgba(244, 243, 239, 0.72);
  font-size: 0.8125rem;
}

.anima_aviso .stgo-anima-legal_texto b { color: #fff; font-weight: 600; }

.anima_aviso .stgo-anima-legal_equipo {
  margin: 0 0 0.8rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(255, 230, 0, 0.45);
  border-radius: 3px;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.anima_aviso .stgo-anima-legal_equipo b { color: var(--anima-amarillo); }

/* I1 (la escalera de motores): la línea «Otros niveles» en el permiso normal y, en el aviso del Pro, la puerta de este equipo -- cada
   requisito con su SÍ / NO en la letra de máquina, sin iconos --; la prueba de la gráfica, «AL ACEPTAR». (Con respaldos: el
   diálogo propio del motor, sin consola, queda fuera de .anima y de sus variables) */
.anima_aviso dl.stgo-anima-legal_pro { margin-top: -0.2rem; }
.anima_aviso dl.stgo-anima-legal_pro dd { color: var(--anima-texto-2); }

.stgo-anima-legal_puerta {
  margin: 0;
  padding: 0;
  list-style: none;
}

.stgo-anima-legal_puerta li {
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  gap: 0.4rem;
  padding: 0.18rem 0;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.12);
}

.stgo-anima-legal_puerta li:last-child { border-bottom: 0; }

.stgo-anima-legal_puerta li span {
  padding-top: 0.12rem;
  font-family: var(--anima-mono, "Roboto Mono", monospace);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
}

.stgo-anima-legal_puerta li.is-si span { color: var(--anima-amarillo, #ffe600); }
.stgo-anima-legal_puerta li.is-no span { color: #fff; }
.stgo-anima-legal_puerta li.is-no { color: #fff; }
.stgo-anima-legal_puerta li.is-luego { display: block; }
.stgo-anima-legal_puerta li.is-luego span { display: block; color: var(--anima-texto-3, rgba(255, 255, 255, 0.5)); }

.anima_tarjeta-botones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

/* los botones: amarillo lo principal, en línea lo demás */
.anima_boton {
  height: 34px;
  padding: 0 14px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--anima-texto-2);
  font: 500 0.6875rem/1 var(--anima-mono);
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.anima_boton:hover { color: #fff; }

.anima_boton.is-primario,
.anima_boton.is-adelante.is-lista {
  background: var(--anima-amarillo);
  color: var(--anima-negro);
  font-weight: 600;
}

.anima_boton.is-primario:hover,
.anima_boton.is-adelante.is-lista:hover { background: #fff; color: var(--anima-negro); }

.anima_boton.is-adelante { color: var(--anima-amarillo); font-weight: 600; outline: 1px solid rgba(255, 230, 0, 0.5); outline-offset: -1px; }
.anima_boton.is-adelante.is-primario,
.anima_boton.is-adelante.is-lista { outline: 0; color: var(--anima-negro); }
.anima_boton.is-adelante.is-lista { animation: anima-pulso 0.9s ease-in-out 2; }
.anima_boton.is-quieto { color: var(--anima-texto-3); }
.anima_boton:disabled { opacity: 0.4; cursor: default; }

/* la carga (G3, la línea de la maqueta): «PREPARANDO A ANIMA», la fase en palabras, la barra amarilla y su dato («120 DE
   327 MB · SOLO ESTA VEZ»), con Cancelar discreto a su derecha. Acabada, se funde (0,6 s) cuando ella está en línea. En la
   compacta, la fila de la fase y su porcentaje sobre la barra */
.anima_tarjeta.is-carga {
  transition: opacity 0.6s ease;
}

.anima_tarjeta.is-carga.is-saliendo {
  opacity: 0;
}

.anima_tarjeta.is-carga .anima_tarjeta-etq {
  margin-bottom: 5px;
}

.anima_tarjeta p.anima_carga-fase {
  margin: 0;
}

.anima_tarjeta.is-carga .anima_barra {
  margin-top: 10px;
}

.anima_carga-dato {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 13px;
  margin-top: 8px;
  color: var(--anima-texto-3);
  font: 400 0.625rem/1.3 var(--anima-mono);
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

.anima_carga-dato > span {
  min-width: 0;
}

/* (un botón en línea, del tamaño del dato: Cancelar mientras carga) */
.anima_boton.is-discreto {
  flex: none;
  height: auto;
  padding: 2px 0;
  color: var(--anima-texto-3);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-decoration: underline dotted rgba(255, 255, 255, 0.35);
  text-underline-offset: 3px;
}

.anima_boton.is-discreto:hover {
  color: #fff;
}

.anima_carga-fila {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  font: 400 0.625rem/1.3 var(--anima-mono);
  letter-spacing: 0.1em;
}

.anima_carga-fila b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255, 255, 255, 0.86); font-weight: 400; text-transform: uppercase; }
.anima_carga-fila span { flex: none; color: var(--anima-amarillo); font-variant-numeric: tabular-nums; }

.anima_barra {
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.16);
}

.anima_barra i {
  display: block;
  width: var(--anima-carga, 0%);
  height: 100%;
  background: var(--anima-amarillo);
  transition: width 0.5s linear;
}

.anima_barra.is-indeterminada i {
  width: 32%;
  animation: anima-barrido 1.5s ease-in-out infinite;
}

.anima_barra.is-error i { background: #f3350c; }

.anima_tarjeta p.anima_carga-aviso {
  margin-top: 8px;
  color: var(--anima-amarillo);
}

.anima_duracion,
.anima_esc-duracion {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.anima_duracion .anima_tarjeta-etq,
.anima_esc-duracion .anima_tarjeta-etq {
  margin: 0 4px 0 0;
}

/* ── el pie: el raíl de la visita, las sugerencias (solo con la conversación vacía), lo que estás viendo y el campo ── */
.anima_pie {
  flex: none;
  padding: 6px 16px 0;
}

/* (con las sugerencias, 6 px entre los comentarios y ellas y 10 hasta lo que estás viendo; sin ellas, 20: la maqueta) */
.anima_sugerencias {
  display: flex;
  gap: 6px;
  margin: 0 -16px 10px;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
  max-height: 40px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  transition: opacity 0.3s ease, max-height 0.4s ease;
}

.anima_sugerencias::-webkit-scrollbar {
  display: none;
}

.anima_sugerencias.is-oculta {
  opacity: 0;
  max-height: 0;
  margin-bottom: 14px;
  pointer-events: none;
}

.anima_rail:not([hidden]) {
  margin-bottom: 10px;
}

.anima_rail:not([hidden]) + .anima_sugerencias.is-oculta {
  margin-bottom: 0;
}

.anima_chip {
  flex: none;
  height: 30px;
  padding: 0 11px;
  box-sizing: border-box;
  border: 0;
  border-radius: 3px;
  background: rgba(15, 15, 15, 0.5);
  outline: 1px solid var(--anima-linea-2);
  outline-offset: -1px;
  color: #fff;
  font: 400 0.8125rem/1 var(--anima-texto);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, outline-color 0.15s ease;
}

.anima_chip:hover {
  background: rgba(15, 15, 15, 0.78);
}

.anima_chip.is-activo {
  outline-color: var(--anima-amarillo);
  color: var(--anima-amarillo);
}

/* el raíl de la visita en la hoja (hasta la hoja de visita de G4): dónde va, su filete de progreso y sus controles */
.anima_rail {
  padding: 0 0 2px;
}

.anima_rail-progreso {
  display: flex;
  gap: 3px;
  margin-bottom: 8px;
}

.anima_rail-progreso i {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.16);
}

.anima_rail-progreso i.is-hecha { background: rgba(255, 230, 0, 0.5); }
.anima_rail-progreso i.is-actual { background: var(--anima-amarillo); }

.anima_rail-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.anima_rail-donde {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font: 500 0.625rem/1.3 var(--anima-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.anima_rail-niveles {
  flex: none;
  display: flex;
  gap: 4px;
}

.anima_rail-niveles button {
  height: 22px;
  padding: 0 6px;
  border: 0;
  border-radius: 3px;
  background: var(--anima-ficha-fondo);
  outline: 1px solid var(--anima-linea);
  outline-offset: -1px;
  color: var(--anima-texto-2);
  font: 500 0.625rem/1 var(--anima-mono);
  cursor: pointer;
}

.anima_rail-niveles button.is-activo { outline-color: var(--anima-amarillo); color: var(--anima-amarillo); }

.anima_rail-botones {
  display: flex;
  align-items: center;
  gap: 8px;
}

.anima_rail .anima_rail-sig { flex: 1; justify-content: center; }
.anima_rail .anima_rail-sig.is-lista { animation: anima-pulso 2.4s ease-in-out infinite; }

.anima_viendo {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: -3px 2px 5px;                                /* (alto de línea 1,6 sin mover nada: 16 − 3 + 5 = 10 + 8) */
  min-width: 0;
  overflow: hidden;
  color: var(--anima-texto-2);
  font: 500 0.625rem/1.6 var(--anima-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.anima_viendo::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  box-sizing: border-box;
  border: 1px solid var(--anima-amarillo);
  border-radius: 50%;
}

/* ── el campo: UNO, hijo de la superficie, abajo y con la hoja (52 px en directo, 44 en la compacta) ── */
.anima_redactar {
  position: absolute;
  z-index: 4;
  left: 16px;
  right: 16px;
  bottom: 16px;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: var(--anima-sale);
}

.anima_redactar:not([inert]) {
  opacity: 1;
  visibility: visible;
  transition: var(--anima-entra);
}

.anima_redactar[data-tam="aviso"] {
  left: 10px;
  right: 10px;
  bottom: 10px;
}

.anima_redactar[data-tam="aviso"] .anima_viendo {
  display: none;
}

.anima_campo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 8px 8px 8px 14px;
  box-sizing: border-box;
  border-radius: 3px;
  background: rgba(15, 15, 15, 0.58);
  outline: 1px solid var(--anima-linea-2);
  outline-offset: -1px;
  transition: outline-color 0.2s ease, background 0.2s ease;
}

.anima_campo:focus-within {
  outline-color: rgba(255, 230, 0, 0.75);
  background: rgba(15, 15, 15, 0.74);
}

.anima_redactar[data-tam="aviso"] .anima_campo {
  min-height: 44px;
  padding: 7px 7px 7px 11px;
}

.anima_entrada {
  flex: 1;
  min-width: 0;
  height: 1.35em;
  min-height: 1.35em;
  max-height: calc(1.35em * 3);
  margin: 0;
  padding: 0;
  resize: none;
  border: 0;
  outline: 0;
  background: none;
  color: #fff;
  font: 400 1rem/1.35 var(--anima-texto);
}

.anima_redactar[data-tam="aviso"] .anima_entrada {
  max-height: 1.35em;
  font-size: 0.875rem;
  scrollbar-width: none;
}

.anima_redactar[data-tam="aviso"] .anima_entrada::-webkit-scrollbar { display: none; }

.anima_entrada::placeholder {
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.anima_entrada:disabled { cursor: not-allowed; }
.anima_entrada:disabled::placeholder { color: rgba(255, 255, 255, 0.38); }

.anima_enviar,
.anima_detener {
  flex: none;
  align-self: flex-end;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: var(--anima-amarillo);
  color: var(--anima-negro);
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.2s ease;
}

.anima_enviar:active { transform: scale(0.94); }

.anima_enviar svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.anima_entrada:placeholder-shown + .anima_enviar,
.anima_enviar:disabled { opacity: 0.45; }
.anima_enviar:disabled { cursor: default; }

.anima_redactar[data-tam="aviso"] .anima_enviar,
.anima_redactar[data-tam="aviso"] .anima_detener {
  width: 30px;
  height: 30px;
}

.anima_detener span {
  width: 10px;
  height: 10px;
  background: var(--anima-negro);
}

.anima_sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── en directo: la cabecera arriba; los comentarios, las sugerencias y lo que estás viendo, abajo, sobre el campo ── */
.anima_panel[data-tam="conversacion"] {
  padding-bottom: calc(var(--anima-campo-h, 76px) + 16px);
}

/* ── compacta (el aviso de F2, en directo): ella en pequeño, «● ANIMA», ⤢ y su último comentario en 3 líneas ── */
/* (su comentario acaba a 106 px del borde de abajo, como en la maqueta aprobada: 52 px por encima del campo) */
.anima_panel[data-tam="aviso"] {
  padding-bottom: calc(var(--anima-campo-h, 44px) + 62px);
}

.anima_marca {
  position: absolute;
  left: 12px;
  top: 12px;
  height: 24px;
  padding: 0 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: 3px;
  background: var(--anima-ficha-fondo);
  outline: 1px solid var(--anima-linea);
  outline-offset: -1px;
  font: 500 0.625rem/1 var(--anima-mono);
  letter-spacing: 0.14em;
}

.anima_panel[data-tam="aviso"] .anima_ampliar {
  position: absolute;
  top: 10px;
  right: 10px;
}

.anima_aviso-cuerpo {
  margin-top: auto;
  padding: 0 12px;
  cursor: pointer;
}

.anima_aviso-cuerpo .anima_e-quien {
  margin-bottom: 4px;
  color: var(--anima-amarillo);
}

.anima_aviso-texto {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  color: #fff;
  font: 400 0.84rem/1.46 var(--anima-texto);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  overflow-wrap: anywhere;
}

.anima_aviso-texto .anima_ruta { display: none; }

.anima_aviso-visita {
  padding-top: 4px;
}

.anima_aviso-carga .anima_e-quien {
  color: var(--anima-texto-2);
}

/* ── los adornos: fuera de la superficie (sin recorte) -- su retrato pulsable en la esquina, los no leídos y la píldora ── */
.anima_adornos {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* abrirla: en la esquina (y en el hueco de la portada), su retrato entero es el botón; con el teclado, su anillo */
.anima_abrir {
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.anima.is-en-tarjeta .anima_abrir {
  border-radius: 2px;
}

.anima.is-abierta .anima_abrir,
.anima.is-cambiando:not(.is-asomada) .anima_abrir,
.anima_abrir:disabled {
  pointer-events: none;
}

.anima_abrir:focus-visible {
  outline: 2px solid var(--anima-amarillo);
  outline-offset: 3px;
}

.anima_pastilla {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.45rem);
  padding: 0.18rem 0.45rem;
  border-radius: 3px;
  background: rgba(10, 10, 10, 0.88);
  outline: 1px solid rgba(255, 230, 0, 0.5);
  outline-offset: -1px;
  color: var(--anima-amarillo);
  font-family: var(--anima-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.anima_nuevos {
  position: absolute;
  top: -0.42rem;
  right: -0.42rem;
  z-index: 5;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.2rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #111;
  border-radius: 999px;
  background: var(--anima-amarillo);
  color: var(--anima-negro);
  font: 700 0.625rem/1 var(--anima-mono);
}

/* otra capa ocupa la pantalla (Contacto, la película, la experiencia, la cámara): Anima se aparta */
.anima.is-apartada,
html.anima-apartada .anima-visita,
html.anima-apartada .anima-manos {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

/* abierta, la tarjeta de la portada es ella. Su retrato se oculta en el mismo cuadro en que la pieza sale de su hueco (lo
   pone la consola: --stgo-mascot-portrait-opacity) y su copia se funde en 140 ms; al plegar, la copia vuelve con el mismo
   fundido mientras ella regresa a la tarjeta */
html.anima-abierta .stgo-home_hero .stgo-mascot-copy {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.14s ease, visibility 0s linear 0.14s;
}

html.anima-vuelve .stgo-home_hero .stgo-mascot-copy {
  transition: opacity 0.14s ease;
}

/* el retrato de la tarjeta de la portada (debajo de ella): su segundo vídeo, la reserva del director, con su mismo
   encuadre; un corte seco, nunca un fundido */
.stgo-home_hero .stgo-mascot-source video.anima_tarjeta-reserva {
  opacity: 0;
  transition: none;
}

.stgo-home_hero .stgo-mascot-source video.anima_tarjeta-reserva.is-delante {
  opacity: 1;
}

/* ── G5 · sus idiomas, a la vista (js/anima/idiomas.js): «HABLO 16 IDIOMAS» con ‹ › y las fichas de dos líneas, de ancho
   fijo: (ancho − 2 × 6) / 3,4, tres enteras y la cuarta a medias. Una tira por sitio (la tarjeta de la portada, la hoja en
   directo, la escena y la guía); la lista emergente ya no existe ── */
.anima-idiomas {
  --anima-idiomas-mono: "Roboto Mono VF", "Roboto Mono", monospace;
  --anima-idiomas-texto: "Inter VF", Inter, system-ui, sans-serif;
  --anima-idiomas-mascara: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
  min-width: 0;
  color: #fff;
}

.anima-idiomas[hidden] {
  display: none !important;
}

.anima-idiomas_fila {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

.anima-idiomas_etq {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.72);
  font: 500 0.625rem/1.6 var(--anima-idiomas-mono);    /* (1,6: ni las tildes de «MÓWIĘ» ni las matras del hindi se recortan) */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.anima-idiomas_flecha {
  flex: none;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: rgba(15, 15, 15, 0.62);
  outline: 1px solid rgba(255, 255, 255, 0.14);
  outline-offset: -1px;
  color: #fff;
  font: 500 0.8125rem/1 var(--anima-idiomas-mono);
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.anima-idiomas_flecha:hover,
.anima-idiomas_flecha:focus-visible {
  opacity: 1;
  background: rgba(15, 15, 15, 0.85);
}

.anima-idiomas_flecha:focus-visible {
  outline: 2px solid var(--anima-amarillo, #ffe600);
  outline-offset: 1px;
}

.anima-idiomas_flecha:disabled {
  opacity: 0.16;
  cursor: default;
}

.anima-idiomas_tira {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-mask-image: var(--anima-idiomas-mascara);
  mask-image: var(--anima-idiomas-mascara);
}

.anima-idiomas_tira::-webkit-scrollbar {
  display: none;
}

/* la máscara: a la derecha mientras queda tira; a la izquierda en cuanto se ha desplazado */
.anima-idiomas.is-desplazada {
  --anima-idiomas-mascara: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

.anima-idiomas.is-final {
  --anima-idiomas-mascara: none;
}

.anima-idiomas.is-desplazada.is-final {
  --anima-idiomas-mascara: linear-gradient(90deg, transparent, #000 48px);
}

.anima-idiomas_ficha {
  flex: 0 0 calc((100% - 12px) / 3.4);
  box-sizing: border-box;
  min-width: 0;
  height: 2.6rem;
  padding: 0 9px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  scroll-snap-align: start;
  border-radius: 3px;
  background: rgba(15, 15, 15, 0.62);
  outline: 1px solid rgba(255, 255, 255, 0.14);
  outline-offset: -1px;
  cursor: pointer;
  transition: background 0.15s ease, outline-color 0.15s ease;
}

.anima-idiomas_ficha:hover {
  background: rgba(15, 15, 15, 0.85);
  outline-color: rgba(255, 255, 255, 0.35);
}

.anima-idiomas_ficha.is-activa {
  outline-color: var(--anima-amarillo, #ffe600);
}

.anima-idiomas_ficha:focus-visible {
  outline: 2px solid var(--anima-amarillo, #ffe600);
  outline-offset: -2px;
}

.anima-idiomas_cod {
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.72);
  font: 500 0.6875rem/1 var(--anima-idiomas-mono);
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.anima-idiomas_cod i {
  font-style: normal;
  font-size: 0.8rem;
  line-height: 1;
  letter-spacing: 0;
}

.anima-idiomas_ficha.is-activa .anima-idiomas_cod {
  color: var(--anima-amarillo, #ffe600);
}

.anima-idiomas_nombre {
  overflow: hidden;
  color: #fff;
  font: 500 0.78rem/1.15 var(--anima-idiomas-texto);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* dónde va: en la hoja, encima de las sugerencias; en la escena, en su pie; en la guía, bajo su cabecera */
.anima_pie > .anima-idiomas {
  margin: 0 0 12px;
}

.anima_esc-idiomas {
  align-self: stretch;
}

.anima_guia-idiomas {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 54px;
  z-index: 2;
}

.anima_guia-bandera i {
  font-style: normal;
  font-size: 0.8rem;
  line-height: 1;
}

.anima_panel[data-tam="guia"] .anima_guia-bandera[aria-expanded="true"],
.anima_panel .anima_idioma[aria-expanded="true"] {
  outline-color: var(--anima-amarillo);
}

/* la tarjeta de la portada: desplegada desde «ES ⌃», la tira ocupa el hueco de «Soy Anima.» y su texto (la consola fija
   el alto del bloque: la tarjeta y su retrato no cambian de tamaño) */
.stgo-home .stgo-home_hero .stgo-mascot-copy.is-idiomas .home-header_contact-cta,
.stgo-home .stgo-home_hero .stgo-mascot-copy.is-idiomas .home-header_contact-text {
  display: none;
}

.stgo-home .stgo-home_hero .anima-idiomas[data-donde="tarjeta"] {
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: auto;
}

.stgo-home .stgo-home_hero .anima-idiomas[data-donde="tarjeta"] .anima-idiomas_ficha {
  background: #0c0c0c;
}

.stgo-home .stgo-home_hero .anima-idiomas[data-donde="tarjeta"] .anima-idiomas_ficha:hover {
  background: #141414;
}

@media (prefers-reduced-motion: reduce) {
  .anima-idiomas *,
  .stgo-home .stgo-home_hero .anima-idiomas * {
    transition-duration: 0.01s !important;
  }
}

/* ── la capa de la visita (G4): el halo -- 1 px amarillo, radio 14, la página atenuada alrededor y su etiqueta encima, como
   en la maqueta -- y los puntos +. Sin cursor: lo que se ve son sus manos (abajo, .anima-manos). El halo nace del punto
   donde ella toca (un recorte circular que crece, visita.js) ── */
.anima-visita {
  position: fixed;
  inset: 0;
  z-index: 7990;                                          /* bajo la pieza: nada suyo la tapa */
  pointer-events: none;
}

.anima-visita.is-pausada .anima-visita_spot {
  opacity: 0 !important;
  pointer-events: none;
}

.anima-visita_velo,
.anima-visita_halo {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  box-sizing: border-box;
  border-radius: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.3, 0.72, 0.2, 1), width 0.6s cubic-bezier(0.3, 0.72, 0.2, 1), height 0.6s cubic-bezier(0.3, 0.72, 0.2, 1);
}

/* la página, atenuada fuera de lo que señala (la sombra de 9999 px de la maqueta) */
.anima-visita_velo {
  z-index: 0;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.38);
}

.anima-visita_halo {
  z-index: 1;
  border: 1px solid var(--anima-amarillo, #ffe600);
}

.anima-visita_velo.is-visto,
.anima-visita_halo.is-visto {
  opacity: 1;
}

/* (al aparecer o al seguir a su elemento con el scroll, sin transición de geometría) */
.anima-visita_velo.is-salta,
.anima-visita_halo.is-salta {
  transition: opacity 0.5s ease;
}

.anima-visita_halo-etq {
  position: absolute;
  left: 14px;                                            /* (la visita la corre a lo largo del borde si ahí pisa texto) */
  top: -26px;
  max-width: calc(100% - 28px);
  box-sizing: border-box;
  padding: 4px 6px;
  border-radius: 3px;
  background: rgba(15, 15, 15, 0.88);                    /* (G5: legible sobre el texto de la página que tenga encima) */
  overflow: hidden;
  color: var(--anima-amarillo, #ffe600);
  font: 500 0.625rem/1 "Roboto Mono VF", "Roboto Mono", monospace;
  letter-spacing: 0.14em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anima-visita_halo.is-etq-abajo .anima-visita_halo-etq {
  top: calc(100% + 8px);
}

.anima-visita_halo.is-etq-dentro .anima-visita_halo-etq {
  top: 12px;
}

.anima-visita_spot {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 230, 0, 0.55);
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.78);
  color: #ffe600;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 420ms ease, transform 520ms cubic-bezier(0.34, 1.3, 0.4, 1), border-color 240ms ease, color 240ms ease;
  box-shadow: 0 0.5rem 1.4rem rgba(0, 0, 0, 0.45);
}

.anima-visita_spot.is-viva { opacity: 1; transform: scale(1); }
.anima-visita_spot.is-fuera { opacity: 0 !important; pointer-events: none; }

.anima-visita_spot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(255, 230, 0, 0.5);
  border-radius: 999px;
  animation: anima-late 2.6s ease-out infinite;
  pointer-events: none;
}

.anima-visita_spot-cruz {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
  transform: translateY(-1px);
}

.anima-visita_spot-rotulo {
  position: absolute;
  right: calc(100% + 0.6rem);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  opacity: 0;
  transition: opacity 240ms ease, transform 240ms ease;
  padding: 0.34rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  background: rgba(8, 8, 8, 0.92);
  color: #fff;
  font-family: "Roboto Mono VF", "Roboto Mono", monospace;
  font-size: 0.6875rem;                                   /* dentro de un botón: el suelo de lo que se pulsa */
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

.anima-visita_spot:hover .anima-visita_spot-rotulo,
.anima-visita_spot:focus-visible .anima-visita_spot-rotulo {
  opacity: 1;
  transform: translateY(-50%);
}

/* (su rótulo, donde no pise texto de la página: encima, debajo o a la derecha del +; la visita lo decide) */
.anima-visita_spot.is-rot-arriba .anima-visita_spot-rotulo,
.anima-visita_spot.is-rot-abajo .anima-visita_spot-rotulo {
  right: 0;
  top: auto;
  bottom: calc(100% + 0.5rem);
  transform: translateY(6px);
}

.anima-visita_spot.is-rot-abajo .anima-visita_spot-rotulo {
  top: calc(100% + 0.5rem);
  bottom: auto;
  transform: translateY(-6px);
}

.anima-visita_spot.is-rot-der .anima-visita_spot-rotulo {
  right: auto;
  left: calc(100% + 0.6rem);
  transform: translateY(-50%) translateX(-6px);
}

.anima-visita_spot.is-rot-arriba:is(:hover, :focus-visible) .anima-visita_spot-rotulo,
.anima-visita_spot.is-rot-abajo:is(:hover, :focus-visible) .anima-visita_spot-rotulo {
  transform: none;
}

.anima-visita_spot.is-rot-der:is(:hover, :focus-visible) .anima-visita_spot-rotulo {
  transform: translateY(-50%);
}

.anima-visita_spot.is-visto { border-color: rgba(255, 255, 255, 0.22); color: rgba(255, 230, 0, 0.45); }
.anima-visita_spot.is-visto::after { animation: none; opacity: 0; }

/* ── la guía (G4): la hoja de visita, 300 × 450 (radio 18, forma.js), que flota junto al bloque que explica. La maqueta
   aprobada: arriba, el filete de progreso de 2 px, «02 / 09» y el título en mono con ⤢ y ✕; abajo, sobre su degradado
   de lectura, sus palabras como subtítulo (Inter 0,94rem, de 4 a 6 líneas que siguen el final), las etiquetas de la visita
   (D7) y «‹ · CONTINUAR › · SALIR» ── */
.anima_panel[data-tam="guia"] {
  justify-content: flex-end;
  padding: 14px;
}

.anima_guia-barra {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.14);
}

.anima_guia-barra i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--anima-amarillo);
  transition: width 0.5s ease;
}

.anima_guia-cab {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.anima_panel.is-activo .anima_guia-cab {
  pointer-events: none;
}

.anima_panel.is-activo .anima_guia-cab > button {
  pointer-events: auto;
}

.anima_guia-paso {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--anima-texto-2);
  font: 500 0.625rem/1.35 var(--anima-mono);
  letter-spacing: 0.14em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.anima_guia-paso b {
  display: block;
  overflow: hidden;
  color: #fff;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anima_guia-pie {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.anima_panel[data-tam="guia"].is-activo > .anima_guia-pie {
  pointer-events: none;                                   /* (su vídeo, debajo, recibe el puntero; sus controles, no) */
}

.anima_panel[data-tam="guia"].is-activo .anima_guia-pie > * {
  pointer-events: auto;
}

.anima_guia-tu {
  margin: 0 0 8px;
  color: var(--anima-texto-2);
  font: 500 0.625rem/1.4 var(--anima-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

/* sus palabras: un subtítulo de 4 a 6 líneas que sigue el final mientras dice (con un fundido arriba si no cabe) */
.anima_guia-texto {
  align-self: stretch;
  min-height: calc(4 * 1.46em);
  max-height: calc(6 * 1.46em);
  overflow: hidden;
  color: #fff;
  font: 400 0.94rem/1.46 var(--anima-texto);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  text-wrap: pretty;
  overflow-wrap: break-word;
}

.anima_guia-texto.is-recortado {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 1.4em);
  mask-image: linear-gradient(to bottom, transparent, #000 1.4em);
}

.anima_guia-volver {
  height: 24px;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--anima-texto-2);
  font: 500 0.6875rem/1 var(--anima-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.anima_guia-volver:hover { color: #fff; }

/* D7: las etiquetas de la visita, en mono amarillo (no son palabras suyas) */
.anima_guia-etq {
  margin: 10px 0 0;
  color: var(--anima-amarillo);
  font: 500 0.625rem/1.3 var(--anima-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.anima_guia-fichas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.anima_guia-fichas .anima_chip {
  height: 28px;
  padding: 0 10px;
  font-size: 0.8125rem;
}

.anima_guia-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.anima_guia-acciones .anima_guia-ant,
.anima_guia-acciones .anima_guia-salir {
  padding: 0 10px;
}

/* ── sus manos (G4, js/anima/manos.js): la yema de su dedo, sus ondas, sus notas y sus filetes. Bajo la pieza y sobre el
   halo; nada se pulsa ── */
.anima-manos {
  position: fixed;
  inset: 0;
  z-index: 7995;
  overflow: hidden;
  pointer-events: none;
}

.anima-manos_velo {
  position: absolute;
  inset: 0;
  background: #0f0f0f;
  opacity: 0;
}

.anima-manos_hilos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.anima-manos_hilos line {
  stroke: rgba(255, 230, 0, 0.75);
  stroke-width: 1;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.anima-manos_hilos circle {
  fill: #ffe600;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.anima-manos_hilos .is-vista {
  opacity: 1;
}

/* la yema: un círculo translúcido de 42 px (blanco al 16 %, anillo de 1 px al 45 %, sombra suave) */
.anima-manos_yema {
  position: absolute;
  left: 0;
  top: 0;
  width: 42px;
  height: 42px;
  will-change: transform;
}

.anima-manos_yema i {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32), 0 1px 3px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.16s ease;
}

.anima-manos_yema.is-apoyada i {
  opacity: 1;
  transition: opacity 0.08s ease;
}

/* la onda de un toque: se abre y se apaga en ~380 ms */
.anima-manos_onda {
  position: absolute;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: anima-onda 0.38s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes anima-onda {
  0% { transform: scale(0.6); opacity: 0.85; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* una nota suya: filete de 1 px amarillo, negro al 88 %, radio 3, Inter 0,875rem; su etiqueta mono y el caret amarillo */
.anima-manos_nota {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 240px;
  box-sizing: border-box;
  padding: 7px 10px 8px;
  border: 1px solid #ffe600;
  border-radius: 3px;
  background: rgba(15, 15, 15, 0.88);
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.anima-manos_nota.is-abierta {
  opacity: 1;
  animation: anima-nota 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.anima-manos_nota.is-sale {
  opacity: 0;
}

.anima-manos_nota.is-fuera {
  visibility: hidden;
}

@keyframes anima-nota {
  0% { scale: 0.94; }
  100% { scale: 1; }
}

.anima-manos_nota-etq {
  display: block;
  margin-bottom: 4px;
  color: #ffe600;
  font: 500 0.625rem/1 "Roboto Mono VF", "Roboto Mono", monospace;
  letter-spacing: 0.14em;
}

.anima-manos_nota-texto {
  margin: 0;
  font: 400 0.875rem/1.4 "Inter VF", Inter, system-ui, sans-serif;
  overflow-wrap: break-word;
}

.anima-manos_caret {
  display: inline-block;
  width: 0.45em;
  height: 1.02em;
  margin-left: 1px;
  vertical-align: -0.16em;
  background: #ffe600;
  animation: anima-parpadeo 1s steps(1) infinite;
}

.anima-manos_caret.is-fin {
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* ── la escena (F3a, ahora la hoja en directo): ella llena la hoja con la cabecera de siempre arriba; abajo, sobre su
   degradado de lectura, la preparación de la visita (su etiqueta, qué es, la duración y «Empezar ›»), la parada 1
   narrada como subtítulo (una caja fija de 6 líneas que no se recoloca mientras escribe) o «verla» ── */
.anima_panel[data-tam="escena"] {
  justify-content: space-between;
}

.anima_panel[data-tam="escena"].is-activo > .anima_esc-pie {
  pointer-events: none;                                   /* tocarla (su vídeo, debajo) la devuelve o la lleva a la guía */
}

.anima_panel[data-tam="escena"].is-activo .anima_esc-pie > * {
  pointer-events: auto;
}

.anima_esc-pie {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 0 18px 18px;
}

.anima_esc-etq {
  color: var(--anima-amarillo);
  font: 500 0.625rem/1 var(--anima-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* sus palabras: texto plano en letra de subtítulo. Mientras escribe (la parada 1, «verla»), una caja fija de 6 líneas:
   las líneas se llenan de arriba abajo y nada se recoloca; si un texto no cupiera, la caja sigue su final con un
   fundido arriba (nunca se enrolla ni salta) */
.anima_esc-texto {
  --anima-subtitulo-tam: 1.0625rem;
  --anima-subtitulo-lh: 1.46;
  align-self: stretch;
  margin: 0;
  color: #fff;
  font: 400 var(--anima-subtitulo-tam)/var(--anima-subtitulo-lh) var(--anima-texto);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  text-wrap: pretty;
  overflow: hidden;
  overflow-wrap: break-word;
}

.anima_esc-texto.is-fija {
  height: calc(6 * var(--anima-subtitulo-tam) * var(--anima-subtitulo-lh));
}

.anima_esc-texto.is-recortado {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 1.6rem);
  mask-image: linear-gradient(to bottom, transparent, #000 1.6rem);
}

.anima_esc-texto .anima_ruta {
  font-size: 0.6875rem;
}

.anima_esc-acciones {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── movimiento (solo fundidos y latidos: la geometría es de forma.js) ── */
@keyframes anima-latido {
  0% { box-shadow: 0 0 0 0 rgba(255, 230, 0, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(255, 230, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 230, 0, 0); }
}

@keyframes anima-punto {
  0%, 60%, 100% { opacity: 0.25; transform: none; }
  30% { opacity: 1; transform: translateY(-2px); }
}

@keyframes anima-parpadeo {
  50% { opacity: 0; }
}

@keyframes anima-barrido {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}

@keyframes anima-pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 230, 0, 0.35); }
  50% { box-shadow: 0 0 0 6px rgba(255, 230, 0, 0); }
}

@keyframes anima-late {
  0% { transform: scale(0.82); opacity: 0; }
  35% { opacity: 0.9; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* movimiento reducido: nada se anima y solo la opacidad y los colores cambian (en 10 ms). La lista de propiedades va
   explícita: con la duración sola, todo elemento sin transición propia interpolaría también anchos, altos y posiciones */
@media (prefers-reduced-motion: reduce) {
  .anima *,
  .anima *::before,
  .anima *::after,
  .anima-visita *,
  .anima-visita *::after,
  .anima-manos * {
    transition-property: opacity, color, background-color, border-color, visibility !important;
    transition-duration: 0.01s !important;
    transition-delay: 0s !important;
    animation: none !important;
  }

  /* los cambios de plano, cortes secos también aquí (la regla de arriba no los vuelve fundidos de 10 ms) */
  .anima .anima_video,
  .stgo-home_hero .stgo-mascot-source video.anima_tarjeta-reserva {
    transition: none !important;
  }

  /* excepción explícita: un cambio de tamaño sin geometría interpolada. La pieza se funde a 0 en 90 ms, forma.js la
     coloca en su sitio nuevo y vuelve a 1 en 150 ms (solo opacidad) */
  .anima.is-reducido-sale .anima_pieza {
    opacity: 0 !important;
    transition: opacity 0.09s linear !important;
  }

  .anima.is-reducido-entra .anima_pieza {
    transition: opacity 0.15s linear !important;
  }
}

/* ── M2 · Anima en el teléfono (html.stgo-anima-movil, D13; docs/plans/2026-10-03-anima-movil.md) ──
   Plegada: su esquina mínima (66 × 84, radio 12: forma.js) con su FOTO fija -- nunca un vídeo mientras se baja -- y «● ANIMA»;
   escondida (is-escondida, de la consola) con la tarjeta de la portada en pantalla o aún por llegar, cerca del contacto y del
   pie. Abierta: la hoja a pantalla completa con sus zonas seguras (env(safe-area-inset-*): valen si la página las declara), la
   cabecera sin «—» (no hay compacta) y fichas de 34 px para el dedo; los comentarios y el campo suben sobre el teclado
   (--anima-teclado, de visualViewport) y su vídeo sigue detrás, entero. Con el dedo, la hoja no arrastra la página
   (touch-action): el hilo se desplaza en vertical y las tiras en horizontal. Plegada, nada suyo se anima ── */
html.stgo-anima-movil .anima_retrato-marco {
  background: #111 url("../videos/STGO-WEB_anima-movil-foto.jpg?v=1") 55% 30% / cover no-repeat;
}

/* (revisión integral: plegada en su esquina, su vídeo se funde -- 0,2 s -- sobre su foto fija en lugar de saltar a ella; con
   filter: opacity(), que se suma a la opacidad con la que el director corta seco entre sus dos vídeos sin tocarla) */
html.stgo-anima-movil .anima .anima_video {
  transition: filter 0.2s ease, visibility 0s;
}

html.stgo-anima-movil .anima:not(.is-abierta):not(.is-cambiando) .anima_video {
  filter: opacity(0);
  visibility: hidden;
  transition: filter 0.2s ease, visibility 0s linear 0.2s;
}

html.stgo-anima-movil .anima .anima_pieza {
  transition: opacity 0.2s ease;
}

html.stgo-anima-movil .anima.is-escondida:not(.is-abierta) .anima_pieza {
  opacity: 0 !important;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

html.stgo-anima-movil .anima:not(.is-abierta) *,
html.stgo-anima-movil .anima:not(.is-abierta) *::before,
html.stgo-anima-movil .anima:not(.is-abierta) *::after {
  animation: none !important;
}

/* (su punto, que late con la opacidad: en el compositor, sin repintar cada cuadro como la sombra del escritorio) */
html.stgo-anima-movil .anima_estado i,
html.stgo-anima-movil .anima_directo i,
html.stgo-anima-movil .anima_marca i {
  box-shadow: none;
  animation-name: anima-latido-movil;
}

@keyframes anima-latido-movil {
  0%, 100% { opacity: 1; }
  60% { opacity: 0.35; }
}

html.stgo-anima-movil .anima_mini {
  left: 8px;
  bottom: 8px;
  gap: 5px;
}

html.stgo-anima-movil .anima_abrir {
  border-radius: 12px;
}

html.stgo-anima-movil .anima_compactar {
  display: none;
}

html.stgo-anima-movil .anima_panel .anima_ficha {
  height: 34px;
  min-width: 34px;
}

/* (revisión integral: el dedo necesita 44 × 44. Lo que se dibuja más pequeño -- las fichas de 34 px de la cabecera, la flecha de
   enviar, las flechas de la tira de idiomas, «↑ CONVERSACIÓN», las acciones de sus respuestas, «Cancelar» -- lleva una zona de
   toque invisible alrededor (::before) hasta 44; entre dos vecinos, el hueco justo para que sus zonas no se pisen. Las
   sugerencias y los botones del permiso, 44 de alto dibujados) */
html.stgo-anima-movil .anima_panel .anima_botones {
  gap: 12px;
}

html.stgo-anima-movil .anima_panel .anima_ficha,
html.stgo-anima-movil .anima_enviar,
html.stgo-anima-movil .anima_detener,
html.stgo-anima-movil .anima-idiomas_flecha,
html.stgo-anima-movil .anima_e-acciones .anima_chip,
html.stgo-anima-movil .anima_boton.is-discreto {
  position: relative;
}

html.stgo-anima-movil .anima_historia {
  overflow: visible;
}

html.stgo-anima-movil .anima_panel .anima_ficha::before,
html.stgo-anima-movil .anima-idiomas_flecha::before {
  content: "";
  position: absolute;
  inset: -5px;
}

html.stgo-anima-movil .anima_enviar::before,
html.stgo-anima-movil .anima_detener::before {
  content: "";
  position: absolute;
  inset: -4px;
}

html.stgo-anima-movil .anima_historia::before {
  content: "";
  position: absolute;
  inset: -11px -4px;
}

html.stgo-anima-movil .anima_e-acciones {
  gap: 12px;
}

html.stgo-anima-movil .anima_e-acciones .anima_chip {
  height: 34px;
}

html.stgo-anima-movil .anima_e-acciones .anima_chip::before {
  content: "";
  position: absolute;
  inset: -5px;
}

html.stgo-anima-movil .anima_boton.is-discreto::before {
  content: "";
  position: absolute;
  inset: -15px -8px;
}

html.stgo-anima-movil .anima-idiomas_fila {
  gap: 12px;
}

html.stgo-anima-movil .anima-idiomas_flecha {
  width: 34px;
  height: 34px;
}

html.stgo-anima-movil .anima_sugerencias:not(.is-oculta) {
  max-height: 44px;
}

html.stgo-anima-movil .anima_sugerencias .anima_chip,
html.stgo-anima-movil .anima_tarjeta .anima_boton:not(.is-discreto) {
  height: 44px;
}

/* (revisión integral: mientras crece o encoge, lo que entra sigue el progreso del muelle -- --anima-contenido, de la consola: 0
   hasta el 75 % del camino, 1 al llegar --, y lo que sale se va enseguida. Ningún trozo de texto recortado a media palabra) */
html.stgo-anima-movil .anima.is-cambiando .anima_panel.is-activo,
html.stgo-anima-movil .anima.is-cambiando .anima_redactar:not([inert]) {
  opacity: var(--anima-contenido, 1);
  transition: visibility 0s;
}

html.stgo-anima-movil .anima.is-cambiando .anima_panel:not(.is-activo),
html.stgo-anima-movil .anima.is-cambiando .anima_redactar[inert] {
  transition: opacity 0.1s ease, visibility 0s linear 0.1s;
}

html.stgo-anima-movil .anima_e-acciones .anima_chip:disabled {
  border-color: rgba(255, 230, 0, 0.3);
  color: rgba(255, 230, 0, 0.45);
  cursor: default;
}

html.stgo-anima-movil .anima_panel[data-tam="conversacion"] {
  padding-bottom: calc(var(--anima-campo-h, 76px) + 16px + max(env(safe-area-inset-bottom, 0px), var(--anima-teclado, 0px)));
}

html.stgo-anima-movil .anima_panel[data-tam="conversacion"] .anima_cab {
  padding: calc(14px + env(safe-area-inset-top, 0px) + var(--anima-vv-arriba, 0px)) calc(14px + env(safe-area-inset-right, 0px)) 0 calc(16px + env(safe-area-inset-left, 0px));
}

html.stgo-anima-movil .anima_panel[data-tam="conversacion"] .anima_feed {
  max-height: calc((var(--anima-directo-h, 780px) - var(--anima-teclado, 0px)) * 0.42);
  padding-right: calc(18px + env(safe-area-inset-right, 0px));
  padding-left: calc(18px + env(safe-area-inset-left, 0px));
}

html.stgo-anima-movil .anima_panel[data-tam="conversacion"] .anima_pie {
  padding-right: calc(16px + env(safe-area-inset-right, 0px));
  padding-left: calc(16px + env(safe-area-inset-left, 0px));
}

html.stgo-anima-movil .anima_redactar {
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + max(env(safe-area-inset-bottom, 0px), var(--anima-teclado, 0px)));
  left: calc(16px + env(safe-area-inset-left, 0px));
}

html.stgo-anima-movil .anima_velo::after {
  bottom: var(--anima-teclado, 0px);
}

/* (M3: muy poco alto a la vista -- en horizontal con el teclado arriba, menos de 300 px: is-poco-alto, de la consola --: la
   cabecera y el campo; los comentarios, lo que estás viendo y «↑ CONVERSACIÓN» no caben sin pisar la cabecera y vuelven en
   cuanto baja el teclado) */
html.stgo-anima-movil .anima.is-poco-alto .anima_panel[data-tam="conversacion"] .anima_feed,
html.stgo-anima-movil .anima.is-poco-alto .anima_panel[data-tam="conversacion"] .anima_pie,
html.stgo-anima-movil .anima.is-poco-alto .anima_historia,
html.stgo-anima-movil .anima.is-poco-alto .anima_viendo {
  display: none;
}

/* (M3: en horizontal -- y en una tableta --, la hoja tiene todo el ancho: sus comentarios, a un ancho de lectura, a la izquierda;
   el campo sigue de lado a lado) */
@media (min-width: 700px) {
  html.stgo-anima-movil .anima_panel[data-tam="conversacion"] .anima_feed {
    max-width: 620px;
  }
}

/* (revisión integral: en horizontal, sus comentarios en el 30 % de abajo -- no el 42 % -- y en la mitad izquierda, bajo su
   barbilla y a un lado de su cara: forma.js le pone los ojos al 32 % del alto) */
@media (orientation: landscape) {
  html.stgo-anima-movil .anima_panel[data-tam="conversacion"] .anima_feed {
    max-width: min(620px, 46vw);
    max-height: calc((var(--anima-directo-h, 780px) - var(--anima-teclado, 0px)) * 0.3);
  }
}

html.stgo-anima-movil .anima.is-abierta .anima_superficie {
  touch-action: none;
  overscroll-behavior: none;
}

html.stgo-anima-movil .anima_feed,
html.stgo-anima-movil .anima_tarjeta.is-aviso .anima_aviso,
html.stgo-anima-movil .anima_entrada {
  touch-action: pan-y;
  overscroll-behavior: contain;
}

html.stgo-anima-movil .anima_sugerencias,
html.stgo-anima-movil .anima-idiomas_tira {
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}

@media print {
  .anima,
  .anima-visita,
  .anima-manos {
    display: none;
  }
}

/* ── I4/I5 de «Anima inteligente» (2026-10-03): el clip y el micrófono del campo, y las tarjetas del hilo (el borrador del correo,
   la llamada, lo que Anima recuerda, las fotos). La gramática de la hoja: negro translúcido, filetes, amarillo para lo que actúa;
   datos densos, sin paneles vacíos ── */
.anima_adjuntar,
.anima_mic {
  flex: none;
  align-self: flex-end;
  width: 32px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.anima_adjuntar[hidden],
.anima_mic[hidden] { display: none; }
.anima_adjuntar svg,
.anima_mic svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.anima_adjuntar:hover,
.anima_mic:hover,
.anima_mic.is-activo { color: var(--anima-amarillo); }
.anima_adjuntar:disabled,
.anima_mic:disabled { opacity: 0.35; cursor: default; }
.anima_adjuntar:focus-visible,
.anima_mic:focus-visible { outline: 1px solid var(--anima-amarillo); outline-offset: 1px; }
.anima_redactar[data-tam="aviso"] .anima_adjuntar,
.anima_redactar[data-tam="aviso"] .anima_mic { display: none; }
.anima_viendo.is-pista { color: var(--anima-amarillo); white-space: normal; }

.anima_e.is-tarjeta .anima_e-texto { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.82); }
.anima_tarjeta-nota {
  margin: 6px 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
}
.anima_correo,
.anima_llamada,
.anima_memoria,
.anima_fotos {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--anima-linea-2, rgba(255, 255, 255, 0.18));
}
.anima_correo-asunto,
.anima_correo-cuerpo {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 6px;
  padding: 6px 8px;
  border: 0;
  border-radius: 3px;
  outline: 1px solid var(--anima-linea-2, rgba(255, 255, 255, 0.18));
  outline-offset: -1px;
  background: rgba(15, 15, 15, 0.62);
  color: #fff;
  font: 400 0.8125rem/1.4 var(--anima-texto);
  resize: vertical;
}
.anima_correo-asunto { font-weight: 600; }
.anima_correo-cuerpo { min-height: 7.5em; max-height: 14em; }
.anima_correo-asunto:focus,
.anima_correo-cuerpo:focus { outline-color: rgba(255, 230, 0, 0.75); }
.anima_correo .anima_e-acciones,
.anima_llamada .anima_e-acciones,
.anima_memoria .anima_e-acciones,
.anima_fotos .anima_e-acciones { margin-top: 6px; }
a.anima_chip { text-decoration: none; display: inline-flex; align-items: center; }
.anima_llamada-estado {
  margin: 0;
  font: 600 0.8125rem/1.35 var(--anima-texto);
  color: #fff;
}
.anima_llamada-estado::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  vertical-align: 1px;
  background: rgba(255, 255, 255, 0.45);
}
.anima_llamada-estado.is-abierto::before { background: var(--anima-amarillo); }
.anima_llamada-etq {
  margin: 8px 0 2px;
  font: 600 0.6875rem/1.3 var(--anima-mono, monospace);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.anima_llamada-decir {
  margin: 0;
  padding-left: 1.2em;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
}
.anima_memoria-lista { margin: 0; padding: 0; list-style: none; }
.anima_memoria-lista li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid var(--anima-linea-2, rgba(255, 255, 255, 0.18));
  font-size: 0.8125rem;
  line-height: 1.35;
}
.anima_memoria-fecha { font: 500 0.6875rem/1 var(--anima-mono, monospace); color: rgba(255, 255, 255, 0.55); text-transform: uppercase; }
.anima_memoria-texto { color: rgba(255, 255, 255, 0.9); }
.anima_fotos-tira { display: flex; gap: 6px; flex-wrap: wrap; }
.anima_fotos-tira img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 2px;
  outline: 1px solid var(--anima-linea-2, rgba(255, 255, 255, 0.18));
}
html.stgo-anima-movil .anima_adjuntar,
html.stgo-anima-movil .anima_mic { position: relative; width: 36px; }
html.stgo-anima-movil .anima_adjuntar::before,
html.stgo-anima-movil .anima_mic::before { content: ""; position: absolute; inset: -4px 0; }
html.stgo-anima-movil .anima_correo-asunto,
html.stgo-anima-movil .anima_correo-cuerpo { font-size: 16px; }

/* ── 2026-10-04 · el nivel de IA: la ficha de la cabecera (sus barras: 1, 2 o 3; el Pro, en amarillo), la tarjeta de los niveles
   (una ficha por nivel: lo que es, su modelo abierto, lo que pesa, la memoria, el ritmo y lo que pide; la del Pro, resaltada) y
   el atajo «▸ Visita guiada» junto a «VIENDO» ── */
.anima_nivel { gap: 6px; padding: 0 7px; letter-spacing: 0.08em; }
.anima_nivel[hidden] { display: none; }
.anima_nivel b { font-weight: 500; white-space: nowrap; }
.anima_nivel-barras { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; flex: none; }
.anima_nivel-barras i { display: block; width: 3px; border-radius: 1px; background: rgba(255, 255, 255, 0.26); }
.anima_nivel-barras i:nth-child(1) { height: 4px; }
.anima_nivel-barras i:nth-child(2) { height: 7px; }
.anima_nivel-barras i:nth-child(3) { height: 10px; }
.anima_nivel-barras i.is-llena { background: #fff; }
.anima_nivel.is-pro { color: var(--anima-amarillo); outline-color: rgba(255, 230, 0, 0.55); }
.anima_nivel.is-pro .anima_nivel-barras i.is-llena { background: var(--anima-amarillo); }
.anima_nivel[aria-expanded="true"] { outline-color: var(--anima-amarillo); }
.anima_cab[data-cab="escena"] .anima_nivel { display: none; }

.anima_niveles {
  padding: 12px 12px 10px;
  border-radius: 3px;
  background: rgba(15, 15, 15, 0.88);
  outline: 1px solid var(--anima-linea-2);
  outline-offset: -1px;
}
.anima_niveles-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.anima_niveles .anima_tarjeta-titulo { margin-bottom: 4px; font-size: 0.9375rem; }
.anima_niveles-cerrar { flex: none; height: 26px; min-width: 26px; padding: 0; margin: -3px -3px 0 0; }
.anima_tarjeta p.anima_niveles-intro { margin: 0 0 10px; font-size: 0.75rem; line-height: 1.4; color: rgba(244, 243, 239, 0.66); text-shadow: none; }
.anima_niveles-lista { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.anima_nivel-ficha {
  padding: 9px 11px 10px;
  border-radius: 3px;
  outline: 1px solid rgba(255, 255, 255, 0.14);
  outline-offset: -1px;
  background: rgba(255, 255, 255, 0.03);
}
.anima_nivel-ficha.is-actual { outline-color: rgba(255, 255, 255, 0.5); }
.anima_nivel-ficha.is-pro { outline-color: rgba(255, 230, 0, 0.6); background: linear-gradient(180deg, rgba(255, 230, 0, 0.1), rgba(255, 230, 0, 0.02)); }
.anima_nivel-ficha.is-pro.is-actual { outline-color: var(--anima-amarillo); }
.anima_nivel-ficha.is-no .anima_nivel-desc,
.anima_nivel-ficha.is-no .anima_nivel-datos,
.anima_nivel-ficha.is-no .anima_nivel-pide { opacity: 0.62; }
.anima_nivel-cab { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.anima_nivel-nombre { color: #fff; font: 600 0.75rem/1.25 var(--anima-mono); letter-spacing: 0.14em; }
.anima_nivel-ficha.is-pro .anima_nivel-nombre { color: var(--anima-amarillo); }
.anima_nivel-ficha.is-pro .anima_nivel-barras i.is-llena { background: var(--anima-amarillo); }
.anima_nivel-sello {
  padding: 3px 6px;
  border-radius: 2px;
  background: var(--anima-amarillo);
  color: var(--anima-negro);
  font: 600 0.5625rem/1.25 var(--anima-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.anima_nivel-accion { margin-left: auto; display: inline-flex; align-items: center; flex: none; }
.anima_nivel-accion .anima_boton { height: 26px; padding: 0 12px; }
.anima_tarjeta p.anima_nivel-desc { margin: 4px 0 1px; font-size: 0.8125rem; line-height: 1.35; color: #fff; }
.anima_tarjeta p.anima_nivel-modelo,
.anima_tarjeta p.anima_nivel-datos,
.anima_tarjeta p.anima_nivel-pide { margin: 0; color: rgba(244, 243, 239, 0.62); font: 400 0.625rem/1.6 var(--anima-mono); letter-spacing: 0.04em; text-shadow: none; }
.anima_tarjeta p.anima_nivel-datos { color: rgba(244, 243, 239, 0.86); }
.anima_nivel-uso { color: #fff; font: 600 0.625rem/1 var(--anima-mono); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.anima_nivel-uso::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--anima-amarillo); vertical-align: 1px; }
.anima_tarjeta p.anima_nivel-nota { margin: 4px 0 0; font-size: 0.75rem; line-height: 1.4; color: rgba(255, 255, 255, 0.7); }

.anima_atajo-visita {
  position: absolute;
  top: -5px;
  right: 2px;
  height: 20px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--anima-amarillo);
  font: 500 0.625rem/1.6 var(--anima-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.anima_atajo-visita[hidden] { display: none; }
.anima_atajo-visita:hover { color: #fff; }
.anima_atajo-visita:focus-visible { outline: 2px solid var(--anima-amarillo); outline-offset: 2px; }
.anima_redactar.con-atajo .anima_viendo { padding-right: 150px; }
.anima_redactar[data-tam="aviso"] .anima_atajo-visita { display: none; }

/* (en el teléfono: la ficha, solo sus barras -- su nombre, en su etiqueta --; las fichas de los niveles, una debajo de otra, y el
   hilo a pantalla completa ya se desplaza) */
html.stgo-anima-movil .anima_nivel b { display: none; }
html.stgo-anima-movil .anima_nivel-barras { height: 13px; gap: 3px; }
html.stgo-anima-movil .anima_nivel-barras i { width: 4px; }
html.stgo-anima-movil .anima_nivel-barras i:nth-child(1) { height: 5px; }
html.stgo-anima-movil .anima_nivel-barras i:nth-child(2) { height: 9px; }
html.stgo-anima-movil .anima_nivel-barras i:nth-child(3) { height: 13px; }
html.stgo-anima-movil .anima_nivel-accion .anima_boton { height: 36px; }
html.stgo-anima-movil .anima_nivel-sello { flex: 0 1 auto; white-space: normal; }
/* (en el escritorio, con la ficha del nivel la fila de botones crece: «IA de STGO · funciona en este equipo» pasa a su propia fila,
   a todo el ancho de la cabecera, y no se parte) */
html:not(.stgo-anima-movil) .anima_cab {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "fila botones" "soy soy";
  align-items: center;
  column-gap: 10px;
}
html:not(.stgo-anima-movil) .anima_quien { display: contents; }
html:not(.stgo-anima-movil) .anima_nombre-fila { grid-area: fila; }
html:not(.stgo-anima-movil) .anima_cab > .anima_botones { grid-area: botones; }
html:not(.stgo-anima-movil) .anima_soy { grid-area: soy; margin-top: 4px; }

/* Fuentes de la respuesta: un acceso discreto al contenido público consultado. */
.anima_fuentes { margin-top: 8px; }
.anima_fuentes > summary { cursor: pointer; width: fit-content; }
.anima_fuentes > .anima_e-acciones { margin-top: 6px; }

/* Las etiquetas largas se ajustan a la hoja: una flecha de CSS y texto dentro del borde. */
.anima_e-acciones .anima_chip {
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
  height: auto;
  min-height: 28px;
  padding: 7px 10px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
  text-align: left;
}
.anima_e-acciones .anima_chip.is-accion::after { flex: none; }
.anima_fuentes > summary { max-width: 100%; height: auto; min-height: 30px; padding: 7px 11px; line-height: 1.35; white-space: normal; }

html.stgo-anima-movil .anima_e-acciones .anima_chip,
html.stgo-anima-movil .anima_fuentes > summary { height: auto; min-height: 44px; }