/* =========================================================
   TRISTAR LOGISTICS PERU — Asistente TLP
   Fase 3: acabado visual. Usa la paleta y tipografías de sitio.css
   (azul marino, dorado, crema · Playfair Display + Inter).
   Clases asis- (Fase 1) y tlpa- (Fases 2 y 3). Sin estilos inline.
   ========================================================= */

/* TOKENS LOCALES — derivados de la paleta del sitio, no una paleta nueva.
   --tlpa-oro-texto es el dorado oscurecido para que el texto pequeño
   cumpla contraste AA sobre crema y blanco. */
.asis-panel,
.asis-launcher {
    --tlpa-tinta: var(--navy);
    --tlpa-texto-2: #56617A;
    --tlpa-oro-texto: #86672C;
    --tlpa-linea: rgba(10, 25, 47, 0.09);
    --tlpa-borde: rgba(10, 25, 47, 0.18);
    --tlpa-superficie: var(--white);
    --tlpa-error: #A12A2A;
    --tlpa-halo: 0 0 0 3px rgba(201, 169, 110, 0.35);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Con el asistente activo, WhatsApp vive en el pie del panel:
   se retira el botón flotante suelto para dejar un solo punto de entrada. */
.tlpa-activo .whatsapp-float { display: none; }

/* ---------------------------------------------------------
   BOTÓN FLOTANTE
   --------------------------------------------------------- */
.asis-launcher {
    position: fixed;
    right: 28px;
    bottom: 28px;
    height: 52px;
    padding: 0 24px 0 20px;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    background: var(--navy);
    color: var(--cream);
    border: 1px solid rgba(201, 169, 110, 0.55);
    border-radius: 26px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 12px 32px rgba(7, 15, 30, 0.32);
    z-index: 999;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.asis-launcher:hover {
    transform: translateY(-2px);
    border-color: var(--gold);
    box-shadow: 0 16px 36px rgba(7, 15, 30, 0.4);
}
.tlpa-launcher-icono { color: var(--gold); flex-shrink: 0; pointer-events: none; }

/* ---------------------------------------------------------
   PANEL
   --------------------------------------------------------- */
.asis-panel {
    position: fixed;
    right: 28px;
    bottom: 96px;
    width: 400px;
    max-width: calc(100vw - 24px);
    height: 640px;
    max-height: calc(100vh - 184px); /* deja libre la barra superior y el botón flotante */
    display: flex;
    flex-direction: column;
    background: var(--cream);
    color: var(--tlpa-tinta);
    border: 1px solid rgba(201, 169, 110, 0.28);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 28px 64px rgba(7, 15, 30, 0.3), 0 2px 8px rgba(7, 15, 30, 0.12);
    z-index: 1100;
    animation: tlpa-panel 0.22s ease-out;
}
@keyframes tlpa-panel {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
@keyframes tlpa-aparecer {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------
   ENCABEZADO
   --------------------------------------------------------- */
.asis-head {
    background: var(--navy);
    padding: 18px 14px 16px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.asis-titulos { min-width: 0; }
.asis-titulo {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--white);
}
.asis-sub {
    font-size: 11.5px;
    color: var(--gray);
    margin-top: 4px;
    line-height: 1.4;
}
.asis-cerrar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--gray-light);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}
.asis-cerrar:hover { background: rgba(255, 255, 255, 0.1); color: var(--white); }
.asis-cerrar svg { pointer-events: none; }

/* PROGRESO DE LA COTIZACIÓN (prolonga el encabezado; solo aparece en ese flujo) */
.tlpa-progreso {
    background: var(--navy);
    padding: 0 22px 14px;
    flex-shrink: 0;
}
.tlpa-progreso-txt {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
}
.tlpa-progreso-barra {
    display: block;
    width: 100%;
    height: 2px;
    border: none;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.14);
    color: var(--gold);
}
.tlpa-progreso-barra::-webkit-progress-bar { background: rgba(255, 255, 255, 0.14); }
.tlpa-progreso-barra::-webkit-progress-value { background: var(--gold); transition: width 0.3s ease; }
.tlpa-progreso-barra::-moz-progress-bar { background: var(--gold); }

/* ---------------------------------------------------------
   CONVERSACIÓN
   --------------------------------------------------------- */
.asis-log {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    padding: 22px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(10, 25, 47, 0.22) transparent;
}
.asis-log::-webkit-scrollbar { width: 8px; }
.asis-log::-webkit-scrollbar-thumb { background: rgba(10, 25, 47, 0.2); border-radius: 4px; }
.asis-log::-webkit-scrollbar-thumb:hover { background: rgba(10, 25, 47, 0.35); }

.asis-msg {
    max-width: 88%;
    font-size: 14px;
    line-height: 1.6;
    overflow-wrap: anywhere;
    animation: tlpa-aparecer 0.2s ease-out;
}

/* Respuestas del asistente: superficie clara, sin marco */
.asis-bot {
    align-self: flex-start;
    background: var(--tlpa-superficie);
    padding: 14px 16px;
    border-radius: 4px 14px 14px 14px;
    box-shadow: 0 1px 2px rgba(10, 25, 47, 0.05);
}
.asis-bot ul,
.asis-bot ol { margin: 8px 0; padding-left: 18px; }
.asis-bot li { margin-bottom: 4px; }
.asis-bot li::marker { color: var(--gold); }
.asis-bot a {
    color: var(--tlpa-tinta);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.18s ease;
}
.asis-bot a:hover { color: var(--tlpa-oro-texto); }
.asis-nota { font-size: 12.5px; color: var(--tlpa-texto-2); margin-top: 10px; }

/* Enlaces y acciones que salen del sitio (Tracking, Extranet, WhatsApp) */
.tlpa-ext::after,
.tlpa-opcion-ext::after {
    content: '\2197\FE0E';
    margin-left: 4px;
    font-size: 0.9em;
    color: var(--tlpa-oro-texto);
}

/* Mensajes del visitante */
.asis-user {
    align-self: flex-end;
    max-width: 78%;
    background: var(--navy);
    color: var(--cream);
    padding: 9px 14px;
    font-size: 13.5px;
    border-radius: 14px 14px 4px 14px;
}

/* Preguntas de la cotización: texto editorial, sin caja */
.tlpa-msg-flujo {
    max-width: 100%;
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 4px 0 0;
}
.tlpa-pregunta {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
}
.tlpa-intro { font-size: 13px; color: var(--tlpa-texto-2); margin-bottom: 12px; }
.tlpa-ayuda,
.tlpa-nota { font-size: 12.5px; line-height: 1.55; color: var(--tlpa-texto-2); margin-top: 6px; }

/* ---------------------------------------------------------
   OPCIONES Y ACCIONES
   --------------------------------------------------------- */
.asis-chips,
.tlpa-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.asis-chips,
.tlpa-paso { animation: tlpa-aparecer 0.2s ease-out; }
.tlpa-paso { display: flex; flex-direction: column; gap: 14px; }

/* Opción neutra */
.asis-chip,
.tlpa-opcion {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--tlpa-borde);
    border-radius: 9px;
    color: var(--tlpa-tinta);
    padding: 9px 14px;
    min-height: 40px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.asis-chip:hover,
.tlpa-opcion:hover { border-color: var(--gold); background: rgba(201, 169, 110, 0.14); }

/* Acción primaria */
.tlpa-chip-pri,
.tlpa-opcion-pri,
.tlpa-continuar,
.asis-enviar {
    background: var(--navy);
    border: 1px solid var(--navy);
    color: var(--cream);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.tlpa-chip-pri:hover,
.tlpa-opcion-pri:hover,
.tlpa-continuar:hover,
.asis-enviar:hover { background: var(--navy-lighter); border-color: var(--navy-lighter); }
.tlpa-opcion-pri { flex: 1 1 100%; min-height: 46px; text-align: center; }
.tlpa-opcion-pri.tlpa-opcion-ext::after,
.tlpa-chip-pri::after { color: var(--gold); }
.tlpa-continuar {
    align-self: flex-start;
    min-height: 44px;
    padding: 0 24px;
    border-radius: 9px;
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

/* Acción secundaria: sin marco */
.tlpa-opcion-sec {
    background: transparent;
    border-color: transparent;
    color: var(--tlpa-texto-2);
    text-decoration: underline;
    text-decoration-color: rgba(86, 97, 122, 0.4);
    text-underline-offset: 3px;
}
.tlpa-opcion-sec:hover { background: rgba(10, 25, 47, 0.05); border-color: transparent; color: var(--tlpa-tinta); }

/* Navegación del paso y pie */
.tlpa-nav { display: flex; flex-wrap: wrap; gap: 20px; }
.tlpa-nav-btn,
.tlpa-reiniciar {
    background: none;
    border: none;
    padding: 6px 0;
    font-size: 12.5px;
    font-family: inherit;
    color: var(--tlpa-texto-2);
    text-decoration: underline;
    text-decoration-color: rgba(86, 97, 122, 0.4);
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 0.18s ease;
}
.tlpa-nav-btn:hover,
.tlpa-reiniciar:hover { color: var(--tlpa-tinta); }

/* ---------------------------------------------------------
   CAMPOS
   --------------------------------------------------------- */
.tlpa-form { display: flex; flex-direction: column; gap: 14px; }
.tlpa-fila { display: flex; gap: 10px; }
.tlpa-campo { flex: 1; min-width: 0; }
.tlpa-fila .tlpa-campo:last-child { flex: 0 0 40%; }
.tlpa-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--tlpa-texto-2);
    margin-bottom: 7px;
}
.tlpa-input {
    width: 100%;
    background: var(--tlpa-superficie);
    border: 1px solid var(--tlpa-borde);
    border-radius: 9px;
    padding: 12px 14px;
    font-size: 14.5px;
    font-family: inherit;
    color: var(--tlpa-tinta);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.tlpa-input::placeholder,
.asis-input::placeholder { color: #7A849C; opacity: 1; }
.tlpa-input:hover { border-color: rgba(10, 25, 47, 0.34); }
.tlpa-input:focus { outline: none; border-color: var(--navy); box-shadow: var(--tlpa-halo); }
.tlpa-input:disabled { background: #ECECE6; color: var(--tlpa-texto-2); cursor: not-allowed; }
textarea.tlpa-input { resize: vertical; min-height: 84px; line-height: 1.5; }
select.tlpa-input {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2356617A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* Errores: texto + icono + borde (no dependen solo del color) */
.tlpa-input[aria-invalid="true"] { border-color: var(--tlpa-error); box-shadow: 0 0 0 3px rgba(161, 42, 42, 0.1); }
.tlpa-error { font-size: 12px; font-weight: 500; line-height: 1.45; color: var(--tlpa-error); margin-top: 6px; }
.tlpa-error::before { content: '\26A0\FE0E\00a0'; }

/* ---------------------------------------------------------
   RESUMEN
   --------------------------------------------------------- */
.tlpa-msg-resumen {
    align-self: stretch;
    max-width: 100%;
    padding: 22px 22px 20px;
    border-radius: 14px;
    border-top: 2px solid var(--gold);
}
.tlpa-resumen-titulo {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--tlpa-oro-texto);
    margin-bottom: 14px;
}
.tlpa-resumen-fila { padding: 10px 0; border-top: 1px solid var(--tlpa-linea); }
.tlpa-resumen-fila:first-child { padding-top: 0; border-top: none; }
.tlpa-resumen-fila dt { font-size: 11.5px; color: var(--tlpa-texto-2); margin-bottom: 2px; }
.tlpa-resumen-fila dd { font-size: 15px; font-weight: 500; line-height: 1.4; }
.tlpa-resumen-fila dd + dd { font-size: 13.5px; font-weight: 400; color: var(--tlpa-texto-2); }
.tlpa-resumen-sub { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--tlpa-linea); }
.asis-bot .tlpa-resumen-contacto { list-style: none; padding-left: 0; margin: 0; }
.asis-bot .tlpa-resumen-contacto li { margin-bottom: 1px; font-size: 14px; }
.asis-bot .tlpa-resumen-contacto li:first-child { font-size: 15px; font-weight: 600; }
.tlpa-msg-resumen .tlpa-pregunta { margin-top: 22px; font-size: 17px; }

/* ---------------------------------------------------------
   ESCRITURA LIBRE Y PIE
   --------------------------------------------------------- */
.asis-form {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 16px;
    padding: 5px 5px 5px 16px;
    background: var(--tlpa-superficie);
    border: 1px solid var(--tlpa-borde);
    border-radius: 12px;
    flex-shrink: 0;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.asis-form:focus-within { border-color: var(--navy); box-shadow: var(--tlpa-halo); }
.asis-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 10px 0;
    font-size: 14.5px;
    font-family: inherit;
    color: var(--tlpa-tinta);
}
.asis-input:focus { outline: none; }
.asis-enviar {
    height: 40px;
    padding: 0 16px;
    border-radius: 9px;
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    flex-shrink: 0;
}
.tlpa-pie {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 8px 20px calc(10px + env(safe-area-inset-bottom, 0px));
    flex-shrink: 0;
}
.tlpa-pie-wa {
    display: inline-flex;
    align-items: center;
    padding: 6px 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--tlpa-tinta);
    text-decoration: none;
    transition: color 0.18s ease;
}
.tlpa-pie-wa:hover { color: var(--tlpa-oro-texto); }

/* ---------------------------------------------------------
   AVISO SOBRE EL FORMULARIO DE CONTACTO PRECARGADO
   --------------------------------------------------------- */
.tlpa-aviso {
    border: 1px solid var(--gold);
    border-left-width: 3px;
    background: rgba(201, 169, 110, 0.12);
    color: var(--gray-light);
    padding: 16px 18px;
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.6;
}
.tlpa-aviso:focus { outline: none; }

/* ---------------------------------------------------------
   FOCO VISIBLE
   --------------------------------------------------------- */
.asis-chip:focus-visible,
.tlpa-opcion:focus-visible,
.tlpa-continuar:focus-visible,
.asis-enviar:focus-visible,
.tlpa-nav-btn:focus-visible,
.tlpa-reiniciar:focus-visible,
.tlpa-pie-wa:focus-visible,
.asis-bot a:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 4px; }
.tlpa-chip-pri:focus-visible,
.tlpa-opcion-pri:focus-visible,
.tlpa-continuar:focus-visible,
.asis-enviar:focus-visible { outline-color: var(--tlpa-oro-texto); border-radius: 9px; }
.asis-chip:focus-visible,
.tlpa-opcion:focus-visible { border-radius: 9px; }
.asis-launcher:focus-visible,
.asis-cerrar:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

/* ---------------------------------------------------------
   MÓVIL: pantalla completa, como una vista propia
   --------------------------------------------------------- */
@media (max-width: 600px) {
    .asis-launcher {
        right: 16px;
        bottom: 16px;
        width: 54px;
        height: 54px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }
    .tlpa-launcher-txt { display: none; }

    .asis-panel {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        max-width: none;
        height: auto;
        max-height: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        z-index: 1300; /* por encima del aviso de cookies, que si no taparía el área de escritura */
    }
    .asis-head { padding: 14px 10px 12px 18px; }
    .asis-titulo { font-size: 19px; }
    .asis-cerrar { width: 44px; height: 44px; }
    .tlpa-progreso { padding: 0 18px 12px; }
    .asis-log { padding: 18px 16px 16px; }
    .asis-form { margin: 0 12px; }
    .tlpa-pie { padding-left: 16px; padding-right: 16px; }

    /* 16 px evita el zoom automático de iOS al enfocar */
    .asis-input,
    .tlpa-input { font-size: 16px; }
    .asis-chip,
    .tlpa-opcion { min-height: 44px; }
    .asis-enviar { height: 44px; }
    .tlpa-nav-btn,
    .tlpa-reiniciar,
    .tlpa-pie-wa { min-height: 44px; }
    .tlpa-pie { padding-top: 2px; }
}

/* ---------------------------------------------------------
   MOVIMIENTO REDUCIDO
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .asis-panel,
    .asis-msg,
    .asis-chips,
    .tlpa-paso { animation: none; }
    .asis-log { scroll-behavior: auto; }
    .asis-launcher,
    .asis-launcher:hover { transition: none; transform: none; }
    .asis-panel *,
    .tlpa-progreso-barra::-webkit-progress-value { transition: none; }
}

/* =========================================================
   FASE 3.1 — Microajustes
   ========================================================= */

/* JERARQUÍA DE ACCIONES DEL RESUMEN
   Primaria (Enviar solicitud) · secundaria (WhatsApp) · terciarias (Corregir, Cancelar).
   .tlpa-opcion-ext solo existe en el bloque de acciones del resumen. */
.tlpa-opcion-pri { min-height: 48px; font-size: 14px; }
.tlpa-opcion-ext {
    flex: 1 1 100%;
    min-height: 44px;
    background: transparent;
    border-color: rgba(10, 25, 47, 0.45);
    text-align: center;
}
.tlpa-opcion-ext ~ .tlpa-opcion-sec {
    flex: 1 1 0;
    min-height: 36px;
    margin-top: 6px;
    padding: 6px 4px;
    font-size: 12.5px;
    font-weight: 400;
    text-align: center;
}

@media (max-width: 600px) {
    /* El historial pasa por debajo del encabezado con un desvanecido: lo que queda
       pegado arriba (p. ej. «Iniciar cotización») se lee como conversación, no como
       parte del encabezado ni de la barra de progreso. */
    .asis-log {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px);
        mask-image: linear-gradient(to bottom, transparent 0, #000 18px);
        gap: 14px;
    }

    /* La primera pregunta de la cotización se despega del mensaje que la inició. */
    .asis-bot:not(.tlpa-msg-flujo) + .asis-user + .tlpa-msg-flujo { margin-top: 10px; }

    /* HISTORIAL COMPACTO: la pregunta en curso es siempre el penúltimo elemento del
       chat (la sigue su bloque de opciones o campos). Las ya respondidas se muestran
       más pequeñas y pegadas a su respuesta; el contenido no cambia ni se oculta. */
    .asis-log > .tlpa-msg-flujo:not(:nth-last-child(2)) { padding-top: 0; }
    .asis-log > .tlpa-msg-flujo:not(:nth-last-child(2)) .tlpa-pregunta { font-size: 15px; line-height: 1.3; }
    .asis-log > .tlpa-msg-flujo:not(:nth-last-child(2)) .tlpa-ayuda,
    .asis-log > .tlpa-msg-flujo:not(:nth-last-child(2)) .tlpa-intro { font-size: 12px; margin-top: 2px; }
    .asis-log > .tlpa-msg-flujo:not(:nth-last-child(2)) .tlpa-intro { margin-bottom: 6px; }
    .tlpa-msg-flujo + .asis-user { margin-top: -8px; padding: 6px 12px; font-size: 13px; }

    /* Acciones del resumen: táctiles y bien separadas */
    .tlpa-opcion-pri { min-height: 50px; }
    .tlpa-opcion-ext { min-height: 46px; }
    .tlpa-opcion-ext ~ .tlpa-opcion-sec { min-height: 44px; }
}

/* =========================================================
   FASE 3.1.1 — Nada partido bajo el encabezado
   El autoscroll lo fija el script (scrollTop), así que scroll-padding y
   scroll-margin no intervienen. En su lugar, cada elemento del historial se
   oculta ENTERO en cuanto su borde superior entra en la franja de 8 px bajo
   el encabezado, y reaparece entero al volver a bajar: nunca se ve un texto
   cortado a media línea. No cambia el scroll, los tamaños ni el contenido.
   Alcance: preguntas ya respondidas, respuestas del visitante y, durante una
   cotización, la bienvenida y la tarjeta que ofrece iniciarla. Quedan fuera
   las tarjetas largas (respuestas informativas y resúmenes), que deben poder
   leerse aunque no quepan enteras.
   Navegadores sin animaciones ligadas al scroll conservan el aspecto de la 3.1.
   ========================================================= */
@keyframes tlpa-bajo-encabezado {
    0% { opacity: 1; }
    1%, 100% { opacity: 0; }
}
@supports (animation-timeline: view()) {
    .asis-log > .tlpa-msg-flujo:not(:nth-last-child(2)),
    .tlpa-progreso:not([hidden]) ~ .asis-log > .asis-bot:first-child {
        animation: tlpa-bajo-encabezado linear both;
        animation-timeline: view(block 8px 0px);
        animation-range: exit 0% exit 100%;
    }
    /* La tarjeta que ofrece iniciar la cotización: la que precede a la primera pregunta. */
    .asis-log > .asis-bot:not(.tlpa-msg-flujo):not(.tlpa-msg-resumen):has(+ .asis-user + .tlpa-msg-flujo) {
        animation: tlpa-bajo-encabezado linear both;
        animation-timeline: view(block 8px 0px);
        animation-range: exit 0% exit 100%;
    }
    .asis-log > .asis-user {
        animation: tlpa-aparecer 0.2s ease-out, tlpa-bajo-encabezado linear both;
        animation-timeline: auto, view(block 8px 0px);
        animation-range: normal, exit 0% exit 100%;
    }
    @media (prefers-reduced-motion: reduce) {
        .asis-log > .asis-user {
            animation: tlpa-bajo-encabezado linear both;
            animation-timeline: view(block 8px 0px);
            animation-range: exit 0% exit 100%;
        }
    }
}