/* Ajustes finales de la portada aprobada.
   ---------------------------------------------------------------------------
   Se carga despues de landing.css para dejar el indicador conversacion-reserva
   alineado con las tarjetas del hero: la conversacion queda a la derecha y la
   reserva a la izquierda, asi que el trazo avanza de derecha a izquierda.

   Este archivo ya no sustituye el panel por una captura. El panel se dibuja
   con HTML y CSS al final de landing.css.
   -------------------------------------------------------------------------- */

@media (min-width: 52.01rem) {
    .flujo {
        flex-direction: row-reverse;
        width: min(44rem, calc(100% - 3rem));
        max-width: none;
        margin-top: 1.4rem;
    }

    .flujo i {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
    }

    .flujo i::after {
        animation-direction: alternate-reverse;
    }
}

/* Tarjetas nuevas que prolongan el lenguaje flotante de la portada. */
.marco--con-orbitas {
    position: relative;
}

.orbita {
    z-index: 4;
    width: 11.5rem;
    padding: 0.78rem;
    pointer-events: none;
    box-shadow: 0 30px 58px -30px rgba(23, 35, 31, 0.45);
}

.orbita .flotante__cabecera {
    display: flex;
    padding-bottom: 0.55rem;
}

.orbita p {
    margin: 0;
}

.orbita__hora {
    color: var(--azul);
    font-family: var(--display);
    font-size: 1.55rem;
    font-weight: 680;
    letter-spacing: 0;
}

.orbita__titulo {
    color: var(--tinta);
    font-family: var(--display);
    font-size: 0.92rem;
    font-weight: 650;
    letter-spacing: 0;
}

.orbita__detalle,
.orbita__meta {
    color: var(--gris);
    font-size: 0.72rem;
}

.orbita__meta {
    display: flex;
    justify-content: space-between;
    margin-top: 0.7rem !important;
    padding-top: 0.6rem;
    border-top: 1px solid var(--linea);
}

.orbita__meta span {
    color: var(--tinta);
    font-weight: 700;
}

.orbita--hueco {
    position: absolute;
    top: 13.5rem;
    right: max(0.2rem, calc(50% - 38rem));
    transform: rotate(2.2deg);
}

.orbita--hueco .estado {
    margin-top: 0.65rem;
}

.orbita--precio {
    position: absolute;
    top: 25rem;
    left: max(0.15rem, calc(50% - 38rem));
    transform: rotate(-2.4deg);
}

.preguntas__lado {
    position: sticky;
    top: 8rem;
    align-self: start;
}

.preguntas__lado .rotulo {
    position: static;
}

.orbita--relevo {
    position: relative;
    width: min(100%, 20rem);
    margin-top: 2rem;
    transform: rotate(1.4deg);
}

.orbita--relevo .relevo {
    margin-top: 0.15rem;
}

@keyframes orbitar-hueco {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(2.2deg); }
    50% { transform: translate3d(0, -7px, 0) rotate(1.3deg); }
}

@keyframes orbitar-precio {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-2.4deg); }
    50% { transform: translate3d(0, 8px, 0) rotate(-1.4deg); }
}

@keyframes orbitar-relevo {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(1.4deg); }
    50% { transform: translate3d(0, -6px, 0) rotate(0.7deg); }
}

@media (prefers-reduced-motion: no-preference) {
    .orbita--hueco { animation: orbitar-hueco 7.8s ease-in-out infinite; }
    .orbita--precio { animation: orbitar-precio 9.2s ease-in-out -3s infinite; }
    .orbita--relevo { animation: orbitar-relevo 8.6s ease-in-out -5s infinite; }
}

@media (max-width: 64rem) {
    .orbita--hueco,
    .orbita--precio {
        right: 1.1rem;
        left: auto;
    }
}

@media (max-width: 52rem) {
    .orbita--hueco,
    .orbita--precio,
    .orbita--relevo {
        position: relative;
        inset: auto;
        width: 100%;
        margin: 0 0 1.25rem;
        animation: none;
        transform: none;
    }

    .orbita--precio {
        margin: 1.25rem 0 0;
    }

    .preguntas__lado {
        position: static;
    }

    .orbita--relevo {
        margin-top: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .orbita {
        animation: none !important;
    }
}