.svc {

  --svc-panel: #1D1B1B;
  --svc-panel-2: #252222;
  --svc-panel-flujo: #1F1D1D;
  --svc-bisel: #0C0B0B;
  --svc-soporte: #1A1818;
  --svc-linea: rgb(216 211 208 / 0.14);
  --svc-linea-2: rgb(216 211 208 / 0.26);
  --svc-claro-2: #E9E5E2;
  --svc-claro-linea: rgb(22 21 21 / 0.1);
}

.svc-cabeza { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; margin-bottom: clamp(3rem, 2rem + 4vw, 5.5rem); }
.svc-cabeza__apoyo { max-width: 30rem; }

.svc-capitulo {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start;
  padding-top: clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
}
.svc-capitulo + .svc-capitulo { margin-top: clamp(4.5rem, 3rem + 5vw, 8rem); }
.svc-capitulo__filete { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--filete); --origen: left center; }

.svc-capitulo__filete::before { content: ""; position: absolute; top: -1px; left: 0; width: 3rem; height: 3px; background: var(--borgona); }

.svc-capitulo__titulo {
  font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem); line-height: 1.06;
  font-weight: var(--peso-titular); font-stretch: calc(var(--ancho-titular) * 1%);
  font-variation-settings: "wdth" var(--ancho-titular);
  letter-spacing: -0.012em; text-wrap: balance; overflow-wrap: break-word; hyphens: manual;
}
@media (max-width: 22em) { .svc-capitulo__titulo { hyphens: auto; hyphenate-limit-chars: 12 6 6; } }
.svc-capitulo__apoyo { max-width: 38ch; margin-top: 1.125rem; color: var(--texto-2); text-wrap: pretty; }
.svc-capitulo__detalle { margin-top: 2rem; }
.svc-incluye { max-width: 46ch; font-size: var(--t-chico); line-height: 1.6; color: var(--texto-2); text-wrap: pretty; }
.svc-incluye__etq { font-weight: 600; color: var(--texto); }
.svc-acciones { margin-top: 1.75rem; }

.svc-metodo__etq { font-size: var(--t-chico); font-weight: 600; line-height: 1.4; }
.svc-metodo__pasos { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0; margin-top: 0.875rem; }
.svc-metodo__pasos::before {
  content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--texto-2); opacity: 0.45;
  transform-origin: left center;
}
.svc-metodo__paso {
  position: relative; display: inline-flex; align-items: center; gap: 0.5rem; padding-inline: 0.625rem;
  background: var(--fondo); font-size: var(--t-cuerpo); font-weight: 600; line-height: 1.3;
}
.svc-metodo__paso:first-child { padding-left: 0; }
.svc-metodo__paso:last-child { padding-right: 0; }
.svc-metodo__paso::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; background: var(--acento); }
html[data-gestos]:not([data-gestos="fallo"]) .svc-metodo:not([data-visto]) .svc-metodo__pasos::before { transform: scaleX(0); }
html[data-gestos] .svc-metodo[data-visto] .svc-metodo__pasos::before { transform: none; transition: transform var(--d-trazar) var(--curva) 0.25s; }
@media (max-width: 22.49em) {
  .svc-metodo__paso { gap: 0.375rem; padding-inline: 0.375rem; font-size: 0.875rem; }
}

.svc-muestra { position: relative; width: 100%; max-width: 34rem; min-width: 0; margin: 2.25rem 0 0; container-type: inline-size; }
.svc-muestra__lienzo { contain: layout paint style; }
.svc-muestra__pie {
  display: flex; align-items: center; column-gap: 1rem; min-height: 2.75rem; margin-top: 0.5rem;
  font-size: var(--t-chico); line-height: 1.4; color: var(--texto-2);
}
.svc-muestra__rotulo { flex: 1 1 auto; min-width: 0; }

.svc-pausa {
  flex: none; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: 0 -0.875rem 0 auto;
  padding: 0; border: 0; border-radius: var(--radio); background: none; color: var(--texto-2);
  transition: color var(--d-hover) linear;
}
.svc-pausa:hover { color: var(--texto); }
.svc-pausa__icono { grid-area: 1 / 1; width: 1rem; height: 1rem; }
.svc-pausa__icono--seguir, .svc-pausa[data-pausado] .svc-pausa__icono--pausa { display: none; }
.svc-pausa[data-pausado] .svc-pausa__icono--seguir { display: block; }

.svc-muestra[data-svc-quieta] .svc-muestra__lienzo *,
.svc-muestra[data-svc-quieta] .svc-muestra__pie * { animation-play-state: paused !important; }

.svc-muestra:not([data-svc-quieta]) :is(.svc-web__nombre, .svc-auto__burbuja, .svc-auto__resultado,
  .svc-auto__punto, .svc-chat__pregunta, .svc-chat__respuesta, .svc-chat__escribiendo, .svc-sis__suma, .svc-sis__aviso-texto) { will-change: transform, opacity; }

html[data-movimiento="pleno"] .svc :is(.boton, .svc-pausa) { transition: color 100ms linear 60ms, border-color 200ms linear, transform 0.4s var(--curva); }
html[data-movimiento="pleno"] .svc :is(.boton, .svc-pausa):active {
  transform: scale(0.97);
  transition: color 100ms linear 60ms, border-color 200ms linear, transform 0.1s cubic-bezier(0.11, 0, 0.5, 0);
}

.svc-panel {
  position: relative; overflow: hidden; border: 1px solid var(--svc-linea); border-radius: 8px;
  background: var(--svc-panel); color: var(--hueso); font-size: 0.875rem; line-height: 1.4;
}
.svc-panel--claro { border-color: transparent; background: var(--hueso); color: var(--carbon); }
.svc-panel__barra {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem;
  padding: 0.5rem 1rem; border-bottom: 1px solid var(--svc-linea);
}
.svc-panel--claro .svc-panel__barra { border-bottom-color: var(--svc-claro-linea); }
.svc-panel__titulo { display: inline-flex; align-items: center; gap: 0.625rem; min-width: 0; font-weight: 700; white-space: nowrap; }
.svc-panel__sello {
  display: inline-grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 4px;
  background: var(--carbon); color: var(--hueso); font-size: 0.75rem; font-weight: 800; line-height: 1;
  font-stretch: calc(var(--ancho-titular) * 1%); font-variation-settings: "wdth" var(--ancho-titular);
}
.svc-panel__meta { font-size: 0.8125rem; color: var(--gris-400); font-variant-numeric: tabular-nums; white-space: nowrap; }
.svc-panel--claro .svc-panel__meta { color: var(--gris-700); }

.svc-monitor { display: grid; justify-items: center; }
.svc-monitor__marco { width: 100%; padding: 0.375rem; border: 1px solid var(--svc-linea-2); border-radius: 10px; background: var(--svc-bisel); }
.svc-monitor__pantalla { position: relative; overflow: hidden; aspect-ratio: 1440 / 900; border-radius: 5px; background: var(--svc-panel); }

.svc-monitor__capa { position: absolute; inset: 0; overflow: hidden; }
.svc-monitor__captura { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-monitor__capa[data-capa="oculta"] { z-index: 0; transform: translateY(-100%); }
.svc-monitor__capa[data-capa="oculta"] .svc-monitor__captura { transform: translateY(100%); }
.svc-monitor__capa[data-capa="debajo"] { z-index: 1; }
.svc-monitor__capa[data-capa="entra"] { z-index: 2; transition: transform 0.9s var(--curva); }
.svc-monitor__capa[data-capa="entra"] .svc-monitor__captura { transition: transform 0.9s var(--curva); }
.svc-monitor__cuello { width: 14%; height: clamp(1.25rem, 6cqi, 2.25rem); border: 1px solid var(--svc-linea-2); border-top: 0; background: var(--svc-soporte); }
.svc-monitor__base { width: 34%; height: 0.4375rem; border: 1px solid var(--svc-linea-2); border-radius: 3px 3px 2px 2px; background: var(--svc-soporte); }

.svc-web__nombres { position: relative; display: grid; flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 1rem; font-weight: 600; line-height: 1.75; color: var(--texto); }
.svc-web__nombre { grid-area: 1 / 1; white-space: nowrap; }
.svc-web__nombre[data-capa="espera"] { opacity: 0; transform: translateY(100%); }
.svc-web__nombre[data-capa="sale"] { opacity: 0; transform: translateY(-100%); transition: transform 0.6s var(--curva), opacity 0.35s linear; }
.svc-web__nombre[data-capa="entra"] { transition: transform 0.7s var(--curva) 0.12s, opacity 0.4s linear 0.12s; }
.svc-web__progreso { display: none; flex: none; gap: 0.375rem; }
.svc-muestra[data-svc-vivo] .svc-web__progreso { display: inline-flex; }
.svc-web__tramo { position: relative; width: 1.75rem; height: 2px; overflow: hidden; background: rgb(216 211 208 / 0.22); }
.svc-web__tramo > span { position: absolute; inset: 0; background: var(--borgona); transform-origin: left center; transform: scaleX(0); }
.svc-web__tramo[data-estado="lleno"] > span { transform: none; background: var(--plata); }
.svc-web__tramo[data-estado="corre"] > span { animation: svc-tramo 3.5s linear both; }
@keyframes svc-tramo { from { transform: scaleX(0); } to { transform: none; } }

.svc-sis__resumen { display: grid; gap: 1.25rem; padding: 1.125rem 1rem 1.125rem; }
.svc-sis__etq { display: block; font-size: 0.75rem; font-weight: 600; line-height: 1.3; color: var(--gris-700); }
.svc-sis__cifra { display: flex; align-items: baseline; gap: 0.375rem; margin-top: 0.5rem; white-space: nowrap; }
.svc-sis__moneda { font-size: 1rem; font-weight: 600; color: var(--gris-700); }
.svc-sis__numero {
  font-size: clamp(2.125rem, 1.4rem + 4cqi, 3.25rem); font-weight: 800; line-height: 1; letter-spacing: -0.015em;
  font-stretch: calc(var(--ancho-titular) * 1%); font-variation-settings: "wdth" var(--ancho-titular);
  font-variant-numeric: tabular-nums;
}

.svc-sis__suma { font-size: 0.8125rem; font-weight: 600; color: var(--gris-700); font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(4px); transition: opacity 0.3s linear, transform 0.45s var(--curva); }
.svc-sis__suma[data-visible] { opacity: 1; transform: none; }

.svc-sis__barras { display: grid; gap: 0.625rem; margin-top: 0.75rem; }
.svc-barra { display: grid; grid-template-columns: 5rem minmax(0, 1fr) 2.75rem; align-items: center; column-gap: 0.75rem; font-size: 0.8125rem; line-height: 1.2; }
.svc-barra__pista { position: relative; height: 0.5rem; overflow: hidden; border-radius: 2px; background: rgb(22 21 21 / 0.08); }

.svc-barra__relleno { position: absolute; inset: 0; background: var(--carbon); transform-origin: left center; transform: scaleX(var(--v, 0)); transition: transform 1.2s var(--curva); }
.svc-barra__relleno::after { content: ""; position: absolute; inset: 0; background: var(--borgona); opacity: 0; transition: opacity 0.35s linear; }
.svc-barra[data-activa] .svc-barra__relleno::after { opacity: 1; }
.svc-barra[data-sucursal="centro"] { --v: 0.910769; }
.svc-barra[data-sucursal="equipetrol"] { --v: 0.632308; }
.svc-barra[data-sucursal="norte"] { --v: 0.376923; }
.svc-barra__valor { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.svc-sis[data-svc-sin-transicion] .svc-barra__relleno { transition: none; }

.svc-sis__aviso { position: relative; display: grid; padding: 0.6875rem 1rem; border-block: 1px solid var(--svc-claro-linea); font-size: 0.8125rem; line-height: 1.35; }
.svc-sis__aviso::before { content: ""; position: absolute; inset: -1px 0; background: rgb(171 112 122 / 0.18); transition: opacity 0.45s linear; }
.svc-sis__aviso-texto { position: relative; grid-area: 1 / 1; display: flex; align-items: center; gap: 0.625rem; transition: opacity 0.45s var(--curva), transform 0.45s var(--curva); }
.svc-sis__aviso-texto::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; background: var(--gris-400); }
.svc-sis__aviso-texto--calma { color: var(--gris-700); }
.svc-sis__aviso-texto--alerta::before { background: var(--borgona); }
.svc-sis__aviso-texto strong { font-weight: 700; }
.svc-sis__aviso[data-svc-aviso="alerta"] .svc-sis__aviso-texto--calma { opacity: 0; transform: translateY(-6px); }
.svc-sis__aviso[data-svc-aviso="calma"] .svc-sis__aviso-texto--alerta { opacity: 0; transform: translateY(6px); }
.svc-sis__aviso[data-svc-aviso="calma"]::before { opacity: 0; }

.svc-sis__ventas { padding: 1.125rem 1rem 0.5rem; }
.svc-sis__marco { --fila: 2.25rem; position: relative; height: calc(var(--fila) * 3); margin-top: 0.375rem; overflow: hidden; }
.svc-sis__lista { display: block; }
.svc-venta {
  display: grid; grid-template-columns: 2.625rem 5.25rem minmax(0, 1fr) auto; align-items: center; column-gap: 0.625rem;
  height: var(--fila); border-top: 1px solid var(--svc-claro-linea); font-size: 0.8125rem; white-space: nowrap;
}
.svc-venta__hora { color: var(--gris-700); font-variant-numeric: tabular-nums; }
.svc-venta__producto { overflow: hidden; text-overflow: ellipsis; }
.svc-venta__monto { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

@container (max-width: 19.5rem) {
  .svc-venta { grid-template-columns: 5rem minmax(0, 1fr) auto; }
  .svc-venta__hora { display: none; }
}

@container (min-width: 32rem) {
  .svc-sis__resumen { grid-template-columns: auto minmax(0, 1fr); column-gap: 2rem; align-items: start; }

  .svc-sis__kpi { position: relative; }
  .svc-sis__suma { position: absolute; left: 0; top: calc(100% + 0.5rem); }
  .svc-venta { grid-template-columns: 3rem 6.25rem minmax(0, 1fr) auto; }
}

.svc-auto { --svc-auto-hueco: 3rem; border-color: rgb(216 211 208 / 0.2); background: var(--svc-panel-flujo); }
.svc-auto__pasos { display: grid; row-gap: 1.25rem; padding: 1.25rem 1rem 1.375rem; }
.svc-auto__paso { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: 0.875rem; }

.svc-auto__paso:not(:last-child)::before { content: ""; position: absolute; top: 2rem; bottom: -1.25rem; left: calc(1rem - 0.5px); width: 1px; background: var(--svc-linea-2); }
.svc-auto__icono {
  position: relative; display: grid; place-items: center; width: 2rem; height: 2rem;
  border: 1px solid var(--svc-linea-2); border-radius: 6px; background: var(--svc-panel-2); color: var(--plata);
}
.svc-auto__icono::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--borgona); border-radius: inherit; opacity: 0; }
.svc-auto__cuerpo { display: grid; min-width: 0; }
.svc-auto__nombre { display: block; padding-top: 0.375rem; font-size: 0.8125rem; font-weight: 600; line-height: 1.25; color: var(--plata); }

.svc-auto__espera, .svc-auto__resultado { grid-area: 2 / 1; }
.svc-auto__espera { display: grid; align-content: start; row-gap: 0.5rem; margin-top: 0.75rem; opacity: 0; transition: opacity 0.35s linear; }
.svc-auto__espera span { height: 0.5rem; border-radius: 2px; background: rgb(216 211 208 / 0.13); }
.svc-auto__espera span:first-child { width: 62%; }
.svc-auto__espera span:last-child { width: 38%; }
.svc-auto__paso--caja .svc-auto__espera span:last-child { display: none; }
.svc-auto__burbuja {
  width: fit-content; max-width: 19rem; margin-top: 0.625rem; padding: 0.625rem 0.875rem; border-radius: 2px 10px 10px 10px;
  background: var(--hueso); color: var(--carbon); line-height: 1.45; text-wrap: pretty;
}
.svc-auto__resultado { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-top: 0.5rem; }
.svc-auto__texto { display: grid; row-gap: 0.125rem; min-width: 0; }
.svc-auto__texto strong { font-weight: 600; }
.svc-auto__detalle { font-size: 0.8125rem; color: var(--plata); }
.svc-auto__check { flex: none; margin-top: 0.125rem; color: var(--borgona); }

.svc-auto__punto { position: absolute; top: 2rem; left: calc(1rem - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--borgona); opacity: 0; pointer-events: none; }

.svc-muestra--auto[data-svc-paso] .svc-auto__burbuja { transition: opacity 0.45s var(--curva), transform 0.45s var(--curva); }
.svc-muestra--auto[data-svc-paso] .svc-auto__resultado { transition: opacity 0.45s var(--curva) 0.2s, transform 0.45s var(--curva) 0.2s; }
.svc-muestra--auto[data-svc-paso] .svc-auto__espera { transition: opacity 0.2s linear; }
.svc-muestra--auto[data-svc-paso="6"] .svc-auto__espera { transition: opacity 0.3s linear 0.4s; }
.svc-muestra--auto[data-svc-paso="0"] :is(.svc-auto__burbuja, .svc-auto__resultado),
.svc-muestra--auto:is([data-svc-paso="1"], [data-svc-paso="2"]) .svc-auto__resultado,
.svc-muestra--auto:is([data-svc-paso="3"], [data-svc-paso="4"]) .svc-auto__resultado--caja { opacity: 0; transform: translateY(6px); transition: none; }
.svc-muestra--auto[data-svc-paso="6"] :is(.svc-auto__burbuja, .svc-auto__resultado) { opacity: 0; transition: opacity 0.35s linear; }
.svc-muestra--auto:is([data-svc-paso="0"], [data-svc-paso="1"], [data-svc-paso="2"], [data-svc-paso="6"]) .svc-auto__espera,
.svc-muestra--auto:is([data-svc-paso="3"], [data-svc-paso="4"]) .svc-auto__paso--caja .svc-auto__espera { opacity: 1; }
.svc-muestra--auto[data-svc-paso="1"] .svc-auto__paso--whatsapp .svc-auto__icono::after,
.svc-muestra--auto[data-svc-paso="3"] .svc-auto__paso--sistema .svc-auto__icono::after,
.svc-muestra--auto[data-svc-paso="5"] .svc-auto__paso--caja .svc-auto__icono::after { animation: svc-latido 0.9s var(--curva) both; }
@keyframes svc-latido { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

.svc-chat__conversacion { display: grid; align-content: start; row-gap: 0.75rem; padding: 1rem 1rem 1.125rem; }
.svc-chat__pregunta { grid-row: 1; grid-column: 1; justify-self: end; max-width: 85%; padding: 0.625rem 0.875rem; border-radius: 10px 10px 2px 10px; background: var(--carbon); color: var(--hueso); line-height: 1.4; }
.svc-chat__turno { grid-row: 2; grid-column: 1; display: grid; justify-items: start; }

.svc-chat__inicio { grid-row: 1 / span 2; grid-column: 1; align-self: start; opacity: 0; pointer-events: none; }
.svc-chat__saludo { max-width: 26rem; line-height: 1.45; text-wrap: pretty; }
.svc-chat__sugerencias { margin-top: 0.875rem; border-bottom: 1px solid var(--svc-claro-linea); }
.svc-chat__sugerencia {
  display: flex; align-items: center; gap: 0.625rem; padding-block: 0.5rem; border-top: 1px solid var(--svc-claro-linea);
  font-size: 0.8125rem; line-height: 1.35; color: var(--gris-700); transition: color var(--d-hover) linear;
}
.svc-chat__sugerencia::before { content: ""; flex: none; width: 0.375rem; height: 0.375rem; background: var(--gris-400); }
.svc-muestra--ia[data-svc-paso="1"] .svc-chat__sugerencia--elegida { color: var(--carbon); }
.svc-muestra--ia[data-svc-paso="1"] .svc-chat__sugerencia--elegida::before { background: var(--borgona); }
.svc-chat__escribiendo, .svc-chat__respuesta { grid-area: 1 / 1; }
.svc-chat__escribiendo { display: inline-flex; align-self: start; gap: 4px; padding: 0.5rem 0; opacity: 0; }
.svc-chat__escribiendo span { width: 6px; height: 6px; border-radius: 50%; background: var(--gris-700); }
.svc-chat__respuesta { width: 100%; max-width: 27rem; padding-top: 0.25rem; }
.svc-chat__respuesta p { line-height: 1.45; text-wrap: pretty; }
.svc-chat__respuesta strong { font-weight: 700; }
.svc-chat__grafico { position: relative; margin-top: 1.25rem; }
.svc-chat__svg { width: 100%; height: auto; overflow: visible; }
.svc-chat__base { stroke: rgb(22 21 21 / 0.2); stroke-width: 1; vector-effect: non-scaling-stroke; }

.svc-chat__linea, .svc-chat__tramo { stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.svc-chat__linea { stroke: var(--carbon); stroke-width: 1.4; }
.svc-chat__tramo { stroke: var(--borgona); stroke-width: 2.4; }

.svc-chat__marca { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--carbon); }
.svc-chat__marca--martes { left: 80.667%; top: 48.939%; }
.svc-chat__marca--ayer { left: 96%; top: 33.03%; background: var(--borgona); }
.svc-chat__valor { position: absolute; font-size: 0.75rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.svc-chat__valor--martes { left: 80.667%; top: 48.939%; color: var(--gris-700); transform: translate(-100%, -100%) translate(-6px, -4px); }
.svc-chat__valor--ayer { right: 0; top: 33.03%; transform: translateY(-100%) translateY(-9px); }
.svc-chat__leyenda { position: relative; height: 1rem; margin-top: 0.375rem; font-size: 0.75rem; line-height: 1rem; color: var(--gris-700); white-space: nowrap; }
.svc-chat__dia { position: absolute; top: 0; }
.svc-chat__dia--martes { left: 80.667%; transform: translateX(-50%); }
.svc-chat__dia--ayer { right: 0; }

.svc-chat__entrada { display: flex; align-items: center; gap: 0.5rem; margin: 0 1rem 1rem; padding: 0.3125rem 0.3125rem 0.3125rem 0.875rem; border: 1px solid rgb(22 21 21 / 0.16); border-radius: 8px; }
.svc-chat__campo { position: relative; display: flex; flex: 1 1 auto; align-items: center; min-width: 0; height: 2rem; overflow: hidden; white-space: nowrap; }
.svc-chat__campo[data-desborda] { justify-content: flex-end; }
.svc-chat__texto { flex: none; }
.svc-chat__cursor { flex: none; width: 1px; height: 1.1em; margin-left: 1px; background: var(--carbon); opacity: 0; }
.svc-chat__enviar { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 6px; background: var(--carbon); color: var(--hueso); }

.svc-muestra--ia[data-svc-paso] :is(.svc-chat__pregunta, .svc-chat__respuesta, .svc-chat__escribiendo) { transition: opacity 0.4s var(--curva), transform 0.4s var(--curva); }
.svc-muestra--ia:is([data-svc-paso="0"], [data-svc-paso="1"]) .svc-chat__pregunta,
.svc-muestra--ia:is([data-svc-paso="0"], [data-svc-paso="1"], [data-svc-paso="2"], [data-svc-paso="3"]) .svc-chat__respuesta { opacity: 0; transform: translateY(8px); transition: none; }
.svc-muestra--ia[data-svc-paso="3"] .svc-chat__escribiendo { opacity: 1; }
.svc-muestra--ia[data-svc-paso="3"] .svc-chat__escribiendo span { animation: svc-puntos 0.9s linear infinite; }
.svc-muestra--ia[data-svc-paso="3"] .svc-chat__escribiendo span:nth-child(2) { animation-delay: 0.15s; }
.svc-muestra--ia[data-svc-paso="3"] .svc-chat__escribiendo span:nth-child(3) { animation-delay: 0.3s; }
@keyframes svc-puntos { 0%, 100% { opacity: 0.3; } 40% { opacity: 1; } }
.svc-muestra--ia[data-svc-paso="6"] :is(.svc-chat__pregunta, .svc-chat__respuesta) { opacity: 0; transition: opacity 0.3s linear; }

.svc-muestra--ia:is([data-svc-paso="4"], [data-svc-paso="5"]) .svc-chat__escribiendo { transition: opacity 0.12s linear; }
.svc-muestra--ia:is([data-svc-paso="4"], [data-svc-paso="5"]) .svc-chat__respuesta { transition-delay: 0.14s; }

.svc-muestra--ia:is([data-svc-paso="0"], [data-svc-paso="1"]) .svc-chat__inicio { opacity: 1; transition: opacity 0.2s linear; }

.svc-muestra--ia[data-svc-paso="2"] .svc-chat__inicio { opacity: 0; transform: translateY(-1.25rem); transition: opacity 0.22s linear, transform 0.45s var(--curva); }
.svc-muestra--ia[data-svc-paso="2"] .svc-chat__pregunta { transition-delay: 0.18s; }
.svc-muestra--ia:is([data-svc-paso="3"], [data-svc-paso="4"], [data-svc-paso="5"]) .svc-chat__inicio { opacity: 0; transform: translateY(0.75rem); }
.svc-muestra--ia[data-svc-paso="6"] .svc-chat__inicio { opacity: 1; transform: none; transition: opacity 0.2s linear 0.3s, transform 0.4s var(--curva) 0.3s; }

.svc-muestra--ia[data-svc-paso="0"] .svc-chat__cursor { animation: svc-parpadeo 1s steps(1, end) infinite; }
.svc-muestra--ia[data-svc-paso="1"] .svc-chat__cursor { opacity: 1; }
@keyframes svc-parpadeo { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.svc-muestra--ia[data-svc-paso="5"] .svc-chat__linea { transition: stroke-dashoffset 1s var(--curva); }
.svc-muestra--ia[data-svc-paso="5"] .svc-chat__tramo { transition: stroke-dashoffset 0.45s var(--curva) 0.75s; }
.svc-muestra--ia[data-svc-paso="5"] :is(.svc-chat__marca, .svc-chat__valor) { transition: opacity 0.35s linear 0.95s; }
.svc-muestra--ia:is([data-svc-paso="0"], [data-svc-paso="1"], [data-svc-paso="2"], [data-svc-paso="3"], [data-svc-paso="4"]) :is(.svc-chat__linea, .svc-chat__tramo) { stroke-dashoffset: 1; }
.svc-muestra--ia:is([data-svc-paso="0"], [data-svc-paso="1"], [data-svc-paso="2"], [data-svc-paso="3"], [data-svc-paso="4"]) :is(.svc-chat__marca, .svc-chat__valor) { opacity: 0; }

@container (min-width: 36rem) {
  .svc-panel { font-size: 0.9375rem; }
  .svc-panel__barra { min-height: 3.25rem; padding-inline: 1.25rem; }
  .svc-sis__etq { font-size: 0.8125rem; }
  .svc-sis__resumen { padding: 1.375rem 1.25rem 1.25rem; }
  .svc-sis__aviso { padding-inline: 1.25rem; font-size: 0.875rem; }
  .svc-sis__ventas { padding: 1.25rem 1.25rem 0.625rem; }
  .svc-sis__marco { --fila: 2.5rem; }
  .svc-barra, .svc-venta { font-size: 0.875rem; }
  .svc-barra { grid-template-columns: 5.75rem minmax(0, 1fr) 3rem; }
  .svc-venta { grid-template-columns: 3.25rem 7rem minmax(0, 1fr) auto; }
  .svc-chat__conversacion { padding: 1.25rem 1.25rem 1.375rem; }
  .svc-chat__respuesta { max-width: 30rem; }
  .svc-chat__entrada { margin: 0 1.25rem 1.25rem; }
  .svc-chat__sugerencia { font-size: 0.875rem; }
}
@container (min-width: 52rem) {
  .svc-auto .svc-panel__barra { padding-inline: 1.5rem; }
  .svc-auto__pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--svc-auto-hueco); row-gap: 0; padding: 1.75rem 1.5rem 2rem; }
  .svc-auto__paso { grid-template-columns: minmax(0, 1fr); row-gap: 1rem; align-content: start; }

  .svc-auto__icono { width: 2.5rem; height: 2.5rem; border-radius: 7px; }
  .svc-auto__icono svg { width: 1.125rem; height: 1.125rem; }
  .svc-auto__paso:not(:last-child)::before { top: calc(1.25rem - 0.5px); bottom: auto; left: calc(2.5rem + 0.75rem); right: calc(0.75rem - var(--svc-auto-hueco)); width: auto; height: 1px; }
  .svc-auto__punto { top: calc(1.25rem - 4px); left: calc(2.5rem + 0.75rem); }

  .svc-auto__resultado { justify-content: flex-start; gap: 0.625rem; }
  .svc-auto__nombre { padding-top: 0; font-size: 0.875rem; }
  .svc-auto__burbuja { max-width: 24rem; font-size: 1rem; }
  .svc-auto__texto strong { font-size: 1rem; }
  .svc-auto__detalle { font-size: 0.875rem; }
}

@media (min-width: 48em) {
  .svc-capitulo__detalle { max-width: 34rem; }
}

@media (min-width: 64em) {
  .svc-cabeza { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--separacion); align-items: end; }
  .svc-cabeza__titulo { grid-column: 1 / span 7; }
  .svc-cabeza__apoyo { grid-column: 8 / span 5; justify-self: end; padding-bottom: 0.4rem; }

  .svc-capitulo { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto auto 1fr; column-gap: var(--separacion); }
  .svc-capitulo__cabeza { grid-column: 1 / span 5; grid-row: 2; }
  .svc-capitulo__detalle { grid-column: 1 / span 5; grid-row: 3; }

  .svc-muestra { grid-column: 7 / span 6; grid-row: 1 / span 4; justify-self: end; align-self: center; max-width: none; margin-top: 0; }
  .svc-capitulo--invertido .svc-capitulo__cabeza,
  .svc-capitulo--invertido .svc-capitulo__detalle { grid-column: 8 / span 5; }
  .svc-capitulo--invertido .svc-muestra { grid-column: 1 / span 6; justify-self: start; }
  .svc-capitulo--invertido .svc-capitulo__filete { --origen: right center; }
  .svc-capitulo--invertido .svc-capitulo__filete::before { left: auto; right: 0; }

  .svc-capitulo--web { grid-template-rows: 1fr auto auto; }
  .svc-capitulo--web .svc-muestra { grid-row: 1 / -1; align-self: end; }
  .svc-capitulo--sistema { grid-template-rows: auto auto 1fr; }
  .svc-capitulo--sistema .svc-capitulo__cabeza { grid-row: 1; padding-top: 0.25rem; }
  .svc-capitulo--sistema .svc-capitulo__detalle { grid-row: 2; }
  .svc-capitulo--sistema .svc-muestra { grid-row: 1 / -1; align-self: start; }
}