/* Landing del Ciclo Anual — Universidad Nacional de Ingeniería.

   TODO cuelga de .lp-mis. El marco del sitio inyecta en ESTE documento Bootstrap,
   akcadmia.css y sitio.css, y lo hace DESPUÉS de esta hoja: a igualdad de
   especificidad ganan sus reglas. De ahí el prefijo propio, el bloque de
   neutralización y los !important de la costura con la cabecera.

   CONCEPTO: el año de preparación como una misión espacial. Las secciones de
   "espacio" son oscuras en los dos temas, con estrellas dibujadas con gradientes;
   las de "sala limpia" son claras con papel de puntos y se oscurecen en el tema
   oscuro. El color de acción es el verde de telemetría: el "GO" de un control de
   misión.

   DOS IDENTIDADES, Y NO SE MEZCLAN:
     · LA UNIVERSIDAD (--lp-uni-*): rojo ladrillo y plata. Es la franja superior y
       es idéntica en las landings de la UNI.
     · LA CAMPAÑA (el resto): espacio, violeta y telemetría. Es propia de esta.

   Todo el movimiento respeta la preferencia de menos movimiento del sistema. */
.lp-mis {
    /* ── Identidad de la universidad ───────────────────────────────────── */
    --lp-uni: #8C1D18;
    --lp-uni-claro: #B3342B;
    --lp-uni-tinta: #FFFFFF;
    --lp-uni-plata: #DCE1E8;
    --lp-uni-tipo: "Trebuchet MS", "Segoe UI", sans-serif;
    /* ── El espacio ────────────────────────────────────────────────────── */
    --lp-espacio: #050716;
    --lp-espacio-alto: #0C1236;
    --lp-violeta: #8C6CFF;
    --lp-luz: #F3F5FF;
    --lp-luz-suave: rgba(243, 245, 255, .76);
    --lp-panel: rgba(12, 18, 54, .72);
    --lp-panel-borde: rgba(243, 245, 255, .14);
    --lp-tierra: #0B1A3C;
    /* ── Telemetría: el color de acción ────────────────────────────────── */
    --lp-senal: #2DE2D0;
    --lp-senal-fuerte: #14B8A9;
    --lp-senal-borde: #0B8E83;
    --lp-senal-tinta: #03201D;
    --lp-go: #34E27A;
    --lp-pendiente: #FFB547;
    /* ── El cohete ─────────────────────────────────────────────────────── */
    --lp-cohete-casco: #EEF1FA;
    --lp-cohete-sombra: rgba(27, 33, 80, .16);
    --lp-cohete-aleta: #6A4BE0;
    --lp-cohete-tobera: #5A6284;
    --lp-cohete-ventana-borde: #AEB6D6;
    --lp-llama: #FF6A3D;
    --lp-llama-clara: #FFC24A;
    /* ── Sala limpia: secciones claras ─────────────────────────────────── */
    --lp-tinta: #0E1330;
    --lp-tinta-suave: #4B5377;
    --lp-acento: #4331C9;
    --lp-fondo: #F6F7FC;
    --lp-fondo-alterno: #ECEEF8;
    --lp-superficie: #FFFFFF;
    --lp-borde: rgba(14, 19, 48, .12);
    --lp-borde-fuerte: rgba(14, 19, 48, .24);
    --lp-punto: rgba(67, 49, 201, .14);
    --lp-sombra: rgba(14, 19, 48, .08);
    --lp-sombra-fuerte: rgba(14, 19, 48, .18);
    --lp-sello: #B3342B;
    --lp-sello-fondo: rgba(255, 255, 255, .92);
    /* ── Medidas y tipografías ─────────────────────────────────────────── */
    --lp-ancho: 80rem;
    --lp-ancho-texto: 46rem;
    --lp-display: Bahnschrift, "DIN Alternate", "Segoe UI", system-ui, sans-serif;
    --lp-mono: "Cascadia Code", Consolas, "Courier New", monospace;
    margin: 0;
    background: var(--lp-fondo);
    color: var(--lp-tinta);
    line-height: 1.65;
    scroll-behavior: smooth;
}

/* Tema oscuro del sitio. El atributo lo pone Akcadmia en un ancestro; aquí solo se
   reasignan las variables, nunca las reglas. Las secciones de espacio ya son
   oscuras: el cambio se nota sobre todo en las de sala limpia. */
[data-tema="oscuro"] .lp-mis {
    --lp-uni: #9E2620;
    --lp-uni-claro: #C2463C;
    --lp-uni-plata: #E6EAF0;
    --lp-espacio: #03040D;
    --lp-espacio-alto: #080C26;
    --lp-violeta: #A68CFF;
    --lp-panel: rgba(10, 14, 42, .78);
    --lp-tierra: #081430;
    --lp-senal: #3FF0DE;
    --lp-senal-fuerte: #22CBBB;
    --lp-senal-borde: #0FA396;
    --lp-tinta: #E7EAFB;
    --lp-tinta-suave: #A8AFD2;
    --lp-acento: #A99BFF;
    --lp-fondo: #090D22;
    --lp-fondo-alterno: #0E1330;
    --lp-superficie: #141A3D;
    --lp-borde: rgba(169, 155, 255, .2);
    --lp-borde-fuerte: rgba(169, 155, 255, .36);
    --lp-punto: rgba(169, 155, 255, .12);
    --lp-sombra: rgba(0, 0, 0, .45);
    --lp-sombra-fuerte: rgba(0, 0, 0, .6);
    --lp-sello: #FF8A7A;
    --lp-sello-fondo: rgba(9, 13, 34, .9);
}

/* ═══ Costura con la cabecera del sitio ════════════════════════════════════
   El marco inserta su cabecera como hermano justo encima de la landing y deja un
   hueco entre las dos. El hueco se pinta del color de la franja institucional
   para que no se distinga. El color va escrito porque aquí se pinta un ancestro
   de .lp-mis, que no ve sus variables. */
body:has(> .lp-mis) {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #8C1D18;
}

[data-tema="oscuro"] body:has(> .lp-mis) {
    background-color: #2A0B09;
}

body > :has(+ .lp-mis) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}

    body > :has(+ .lp-mis) > :last-child {
        margin-bottom: 0 !important;
    }

/* ═══ Neutralización de los estilos del sitio ══════════════════════════════
   :where aporta cero especificidad: solo derrota las reglas de elemento del sitio
   y queda por debajo de las clases de esta hoja. */
.lp-mis :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, a, span, strong, small, em, label, summary, button, output, aside, article, figure, figcaption) {
    color: inherit;
    font-family: inherit;
}

.lp-mis,
.lp-mis *,
.lp-mis *::before,
.lp-mis *::after {
    box-sizing: border-box;
}

    /* Lo que el guion oculta con hidden se oculta siempre, aunque una regla de esta
   hoja le haya dado otro display. Sin esto, una fila con display flex seguiría a
   la vista con el atributo puesto. */
    .lp-mis [hidden] {
        display: none !important;
    }

.lp-mis__ancho {
    width: min(100% - 3rem, var(--lp-ancho));
    margin-inline: auto;
}

.lp-mis__ancho--estrecho {
    width: min(100% - 3rem, 52rem);
}

.lp-mis svg {
    fill: currentColor;
}

.lp-mis__icono {
    width: 1.2em;
    height: 1.2em;
    flex: 0 0 auto;
    fill-rule: evenodd;
}

/* Las fotografías reservan su proporción con los atributos width y height del
   marcado, así la página no salta al cargarlas. El fondo es la red de seguridad
   si un archivo faltara: se ve un bloque del color de la paleta, no un hueco. */
.lp-mis img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Texto solo para lectores de pantalla: está en el árbol de accesibilidad pero
   no ocupa sitio en la pantalla. */
.lp-mis__solo-lectores {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ═══ Aparición al desplazar ═══════════════════════════════════════════════
   La clase que oculta la pone el guion: sin él todo se ve desde el principio. */
.lp-mis--animada [data-revelar] {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity .7s ease, transform .7s ease;
}

    .lp-mis--animada [data-revelar].lp-mis--visible {
        opacity: 1;
        transform: none;
    }

/* Quien pidió menos movimiento en su sistema no lo recibe: se apagan las
   entradas, los bucles decorativos y el despegue final. */
@media (prefers-reduced-motion: reduce) {
    .lp-mis {
        scroll-behavior: auto;
    }

    .lp-mis--animada [data-revelar] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .lp-mis__estrellas::after,
    .lp-mis__nebulosa,
    .lp-mis__baliza,
    .lp-mis__accion--pulso,
    .lp-mis__cohete--portada,
    .lp-mis__cohete-llama,
    .lp-mis__vapor,
    .lp-mis__chasqui-anillo,
    .lp-mis__destino,
    .lp-mis__radar,
    .lp-mis__led,
    .lp-mis__pantalla,
    .lp-mis__go,
    .lp-mis__ritmo,
    .lp-mis__cohete--cierre,
    .lp-mis__humo {
        animation: none !important;
    }

    .lp-mis--animada .lp-mis__paso {
        opacity: 1;
        transform: none;
        animation: none !important;
    }

    .lp-mis__radar-aguja,
    .lp-mis__tanque-nivel {
        transition: none;
    }
}

/* ═══ Franja institucional ═════════════════════════════════════════════════ */
.lp-mis__institucional {
    background: linear-gradient(90deg, var(--lp-uni), var(--lp-uni-claro));
    color: var(--lp-uni-tinta);
    box-shadow: inset 0 -2px 0 var(--lp-uni-plata);
}

.lp-mis__institucional-contenido {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1.25rem;
    padding: .7rem 0;
}

.lp-mis__emblema {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .6rem;
    border: 2px solid var(--lp-uni-plata);
    color: var(--lp-uni-plata);
    transform: rotate(-8deg);
}

    .lp-mis__emblema svg {
        width: 1.35rem;
        height: 1.35rem;
    }

.lp-mis__uni {
    margin: 0 auto 0 0;
    line-height: 1.3;
}

.lp-mis__uni-nombre {
    display: block;
    font-family: var(--lp-uni-tipo);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.lp-mis__uni-lema {
    display: block;
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lp-uni-plata);
}

.lp-mis__uni-sello {
    padding: .3rem 1rem;
    border: 1px solid var(--lp-uni-plata);
    border-radius: .4rem;
    font-family: var(--lp-mono);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lp-uni-plata);
}

/* ═══ Cielo estrellado ═════════════════════════════════════════════════════
   Dos capas de puntos hechas con gradientes: una fija y otra que titila. No hay
   imagen que descargar y el patrón se repite sin que se note. */
.lp-mis__estrellas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(1.5px 1.5px at 1.5rem 2rem, rgba(243, 245, 255, .9), transparent), radial-gradient(1px 1px at 7.5rem 5rem, rgba(243, 245, 255, .7), transparent), radial-gradient(1.5px 1.5px at 4rem 9.5rem, rgba(190, 210, 255, .85), transparent), radial-gradient(1px 1px at 10.5rem 11.5rem, rgba(243, 245, 255, .6), transparent), radial-gradient(1.2px 1.2px at 6rem 3.5rem, rgba(200, 190, 255, .8), transparent);
    background-size: 13rem 13rem;
}

    .lp-mis__estrellas::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(1.8px 1.8px at 3rem 6rem, rgba(243, 245, 255, .95), transparent), radial-gradient(1.4px 1.4px at 15rem 2.5rem, rgba(170, 240, 235, .9), transparent), radial-gradient(1.6px 1.6px at 9rem 17rem, rgba(243, 245, 255, .85), transparent), radial-gradient(1.2px 1.2px at 18rem 13rem, rgba(200, 190, 255, .9), transparent);
        background-size: 21rem 21rem;
        animation: lp-mis-titilar 4.5s ease-in-out infinite alternate;
    }

@keyframes lp-mis-titilar {
    from {
        opacity: .25;
    }

    to {
        opacity: 1;
    }
}

/* ═══ Portada ══════════════════════════════════════════════════════════════
   Velo de espacio sobre la fotografía, más denso abajo, donde nace el horizonte.
   Si portada.jpeg faltara, queda el color de fondo y se ve terminada igual. */
.lp-mis__portada {
    position: relative;
    overflow: hidden;
    padding: 4.5rem 0 8rem;
    color: var(--lp-luz);
    background-color: var(--lp-espacio);
    background-image: linear-gradient(180deg, rgba(5, 7, 22, .62) 0%, rgba(5, 7, 22, .8) 60%, rgba(5, 7, 22, .96) 100%), url("imagenes/portada.jpeg");
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

[data-tema="oscuro"] .lp-mis__portada {
    background-image: linear-gradient(180deg, rgba(3, 4, 13, .72) 0%, rgba(3, 4, 13, .86) 60%, rgba(3, 4, 13, .98) 100%), url("imagenes/portada.jpeg");
}

/* Nubes de gas de colores que se mueven muy despacio detrás de todo. */
.lp-mis__nebulosa {
    position: absolute;
    inset: -30% -20%;
    pointer-events: none;
    background: radial-gradient(ellipse 40% 35% at 78% 28%, rgba(140, 108, 255, .34), transparent 70%), radial-gradient(ellipse 35% 30% at 18% 75%, rgba(45, 226, 208, .16), transparent 70%);
    animation: lp-mis-deriva 26s ease-in-out infinite alternate;
}

@keyframes lp-mis-deriva {
    from {
        transform: translate3d(-2%, 0, 0) scale(1);
    }

    to {
        transform: translate3d(2%, -3%, 0) scale(1.08);
    }
}

/* El borde de la Tierra: la parte de arriba de una elipse enorme, con el brillo
   de la atmósfera. */
.lp-mis__horizonte {
    position: absolute;
    left: -15%;
    right: -15%;
    bottom: -19rem;
    height: 24rem;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 0%, rgba(45, 226, 208, .32), var(--lp-tierra) 38%, var(--lp-espacio) 70%);
    box-shadow: 0 -.25rem 2.5rem rgba(45, 226, 208, .3);
    pointer-events: none;
}

.lp-mis__portada-rejilla {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 3rem;
    align-items: center;
}

.lp-mis__distintivo {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1rem;
    padding: .35rem 1rem .35rem .45rem;
    border-radius: 999px;
    border: 1px solid rgba(243, 245, 255, .28);
    background: rgba(12, 18, 54, .55);
    font-family: var(--lp-mono);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.lp-mis__distintivo-icono {
    width: 1.5rem;
    height: 1.5rem;
    fill: none !important;
    stroke: var(--lp-senal);
    stroke-width: 1.6;
}

.lp-mis__antetitulo {
    display: block;
    margin: 0 0 1.25rem;
    font-family: var(--lp-mono);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lp-senal);
}

/* La baliza: una luz roja que parpadea, como la de una torre de lanzamiento. */
.lp-mis__baliza {
    display: inline-block;
    width: .55rem;
    height: .55rem;
    margin-right: .6rem;
    vertical-align: .08em;
    background: var(--lp-llama);
    box-shadow: 0 0 .7rem var(--lp-llama);
    transform: rotate(45deg);
    animation: lp-mis-parpadeo 1.3s steps(2, jump-none) infinite;
}

@keyframes lp-mis-parpadeo {
    50% {
        opacity: .25;
    }
}

.lp-mis__titulo {
    margin: 0 0 1.25rem;
    font-family: var(--lp-display);
    font-size: clamp(2.3rem, 5.4vw, 4.4rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.01em;
    color: var(--lp-luz);
}

.lp-mis__titulo-destino {
    display: block;
    color: var(--lp-senal);
}

/* El degradado del destino solo se aplica donde el navegador sabe recortar el
   fondo al texto: en los demás se queda el verde plano, nunca transparente. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .lp-mis__titulo-destino {
        background: linear-gradient(90deg, var(--lp-senal), var(--lp-violeta));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.lp-mis__bajada {
    margin: 0;
    max-width: 36rem;
    font-size: 1.14rem;
    color: var(--lp-luz-suave);
}

.lp-mis__sensores {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.5rem;
    font-size: .92rem;
    color: var(--lp-luz-suave);
}

    .lp-mis__sensores li {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
    }

        .lp-mis__sensores li::before {
            content: "";
            width: .5rem;
            height: .5rem;
            border-radius: 50%;
            background: var(--lp-go);
            box-shadow: 0 0 .5rem var(--lp-go);
        }

/* ═══ Botones ══════════════════════════════════════════════════════════════
   El principal es el verde de telemetría con tinta casi negra: el par con más
   contraste de la paleta, sobre el espacio y sobre la sala limpia. El borde más
   oscuro le da contorno cuando cae sobre fondo claro. */
.lp-mis__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 2rem;
}

.lp-mis__acciones--centro {
    justify-content: center;
}

.lp-mis__accion {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .95rem 2rem;
    border: 2px solid var(--lp-senal-borde);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--lp-senal), var(--lp-senal-fuerte));
    color: var(--lp-senal-tinta);
    font-family: var(--lp-display);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .03em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 .6rem 1.4rem rgba(20, 184, 169, .28);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

    /* El destello que cruza el botón al pasar por encima: el encendido. */
    .lp-mis__accion::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -60%;
        width: 40%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
        transform: skewX(-20deg);
        transition: left .55s ease;
        pointer-events: none;
    }

    .lp-mis__accion:hover {
        color: var(--lp-senal-tinta);
        transform: translateY(-2px);
        box-shadow: 0 0 0 .4rem rgba(45, 226, 208, .18), 0 .9rem 1.8rem rgba(20, 184, 169, .35);
    }

        .lp-mis__accion:hover::after {
            left: 120%;
        }

    .lp-mis__accion:focus-visible {
        outline: 3px solid var(--lp-violeta);
        outline-offset: 3px;
    }

/* El botón que late: un anillo que se expande y se apaga, como una señal. */
.lp-mis__accion--pulso {
    animation: lp-mis-senal 2.6s ease-out infinite;
}

@keyframes lp-mis-senal {
    0% {
        box-shadow: 0 0 0 0 rgba(45, 226, 208, .55), 0 .6rem 1.4rem rgba(20, 184, 169, .28);
    }

    70%, 100% {
        box-shadow: 0 0 0 1rem rgba(45, 226, 208, 0), 0 .6rem 1.4rem rgba(20, 184, 169, .28);
    }
}

.lp-mis__accion--contorno {
    background: transparent;
    border-color: currentColor;
    color: inherit;
    box-shadow: none;
}

    .lp-mis__accion--contorno:hover {
        color: inherit;
        background: rgba(140, 108, 255, .16);
        box-shadow: none;
    }

.lp-mis__accion--compacta {
    padding: .65rem 1.4rem;
    font-size: .95rem;
}

.lp-mis__accion--bloque {
    display: flex;
    width: 100%;
    margin-top: 1.5rem;
}

/* ═══ La plataforma de lanzamiento ═════════════════════════════════════════ */
.lp-mis__plataforma {
    display: grid;
    justify-items: center;
    gap: 1.5rem;
}

.lp-mis__lanzadera {
    position: relative;
    width: 100%;
    max-width: 22rem;
    height: clamp(15rem, 28vw, 21rem);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.lp-mis__torre {
    position: absolute;
    bottom: 0;
    left: 50%;
    height: 100%;
    width: auto;
    aspect-ratio: 70 / 300;
    transform: translateX(-165%);
}

    .lp-mis__torre path {
        fill: none;
        stroke: rgba(243, 245, 255, .38);
        stroke-width: 2;
        stroke-linecap: round;
    }

/* ── El cohete: las mismas piezas en la portada, en la trayectoria y en el
      cierre. Sus colores no cambian con el tema porque siempre va sobre el
      espacio, que es oscuro en los dos. ─────────────────────────────────── */
.lp-mis__cohete-cuerpo {
    fill: var(--lp-cohete-casco);
}

.lp-mis__cohete-sombra {
    fill: var(--lp-cohete-sombra);
}

.lp-mis__cohete-franja {
    fill: var(--lp-uni-claro);
}

.lp-mis__cohete-ventana {
    fill: var(--lp-espacio-alto);
    stroke: var(--lp-cohete-ventana-borde);
    stroke-width: 4;
}

.lp-mis__cohete-brillo {
    fill: rgba(255, 255, 255, .6);
}

.lp-mis__cohete-aleta {
    fill: var(--lp-cohete-aleta);
}

.lp-mis__cohete-tobera {
    fill: var(--lp-cohete-tobera);
}

.lp-mis__cohete-llama-exterior {
    fill: var(--lp-llama);
}

.lp-mis__cohete-llama-interior {
    fill: var(--lp-llama-clara);
}

/* La llama tiembla desde la tobera: el origen de la escala es su borde de arriba. */
.lp-mis__cohete-llama {
    transform-box: fill-box;
    transform-origin: 50% 0;
    animation: lp-mis-llama .16s ease-in-out infinite alternate;
}

@keyframes lp-mis-llama {
    from {
        transform: scale(.94, .82);
        opacity: .85;
    }

    to {
        transform: scale(1.04, 1.12);
        opacity: 1;
    }
}

.lp-mis__cohete--portada {
    position: relative;
    z-index: 1;
    height: 100%;
    width: auto;
    aspect-ratio: 1 / 2;
    filter: drop-shadow(0 0 1.5rem rgba(140, 108, 255, .35));
    animation: lp-mis-flotar 3.4s ease-in-out infinite;
}

@keyframes lp-mis-flotar {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-.45rem);
    }
}

.lp-mis__vapor {
    position: absolute;
    bottom: -1.1rem;
    width: 7rem;
    height: 3.4rem;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(243, 245, 255, .5), transparent);
    pointer-events: none;
    animation: lp-mis-vapor 4.2s ease-in-out infinite;
}

.lp-mis__vapor--1 {
    left: calc(50% - 7rem);
}

.lp-mis__vapor--2 {
    left: calc(50% - 3.5rem);
    animation-delay: -1.4s;
}

.lp-mis__vapor--3 {
    left: 50%;
    animation-delay: -2.8s;
}

@keyframes lp-mis-vapor {
    0%, 100% {
        transform: scale(.85);
        opacity: .5;
    }

    50% {
        transform: scale(1.12) translateY(-.3rem);
        opacity: .9;
    }
}

/* Los datos de vuelo, en un panel con las esquinas de una pantalla de control. */
.lp-mis__datos-vuelo {
    position: relative;
    width: 100%;
    max-width: 24rem;
    padding: 1.15rem 1.35rem;
    border: 1px solid rgba(45, 226, 208, .35);
    border-radius: 1rem;
    background: rgba(8, 12, 38, .74);
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .35);
    backdrop-filter: blur(6px);
}

    .lp-mis__datos-vuelo::before,
    .lp-mis__datos-vuelo::after {
        content: "";
        position: absolute;
        width: 1.2rem;
        height: 1.2rem;
        border: 2px solid var(--lp-senal);
        pointer-events: none;
    }

    .lp-mis__datos-vuelo::before {
        top: -1px;
        left: -1px;
        border-right: 0;
        border-bottom: 0;
        border-top-left-radius: 1rem;
    }

    .lp-mis__datos-vuelo::after {
        bottom: -1px;
        right: -1px;
        border-left: 0;
        border-top: 0;
        border-bottom-right-radius: 1rem;
    }

.lp-mis__datos-titulo {
    margin: 0 0 .6rem;
    font-family: var(--lp-mono);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lp-senal);
}

.lp-mis__datos-lista {
    margin: 0;
}

    .lp-mis__datos-lista > div {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: .2rem 1rem;
        padding: .42rem 0;
        border-top: 1px dashed rgba(243, 245, 255, .16);
    }

    .lp-mis__datos-lista dt {
        font-family: var(--lp-mono);
        font-size: .74rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--lp-luz-suave);
    }

    .lp-mis__datos-lista dd {
        margin: 0;
        font-weight: 700;
        text-align: right;
        color: var(--lp-luz);
    }

/* ═══ Secciones ════════════════════════════════════════════════════════════ */
/* overflow-x clip recorta lo que se pinta fuera, como el borde de la Tierra de la
   trayectoria, sin convertir la sección en un contenedor con su propio scroll. */
.lp-mis__seccion {
    position: relative;
    padding: 5.5rem 0;
    overflow-x: clip;
}

/* Espacio: oscuro en los dos temas, con un campo de estrellas fijo en el fondo. */
.lp-mis__seccion--espacio {
    color: var(--lp-luz);
    background-color: var(--lp-espacio);
    background-image: radial-gradient(1px 1px at 2rem 3rem, rgba(243, 245, 255, .6), transparent), radial-gradient(1.3px 1.3px at 9rem 1.5rem, rgba(243, 245, 255, .5), transparent), radial-gradient(1px 1px at 12rem 10rem, rgba(200, 190, 255, .6), transparent), radial-gradient(1.2px 1.2px at 5rem 12.5rem, rgba(170, 240, 235, .5), transparent), radial-gradient(ellipse 60% 50% at 88% 0%, rgba(140, 108, 255, .18), transparent 70%), radial-gradient(ellipse 50% 45% at 8% 100%, rgba(45, 226, 208, .1), transparent 70%);
    background-size: 14rem 14rem, 14rem 14rem, 14rem 14rem, 14rem 14rem, 100% 100%, 100% 100%;
}

/* Órbita: el azul más alto del cielo, para la sección del satélite. */
.lp-mis__seccion--orbita {
    overflow: hidden;
    color: var(--lp-luz);
    background: radial-gradient(ellipse 55% 60% at 22% 50%, rgba(140, 108, 255, .22), transparent 70%), linear-gradient(160deg, var(--lp-espacio-alto), var(--lp-espacio) 75%);
}

/* Sala limpia: papel de puntos, el de los cuadernos de ingeniería. */
.lp-mis__seccion--sala {
    color: var(--lp-tinta);
    background-color: var(--lp-fondo);
    background-image: radial-gradient(circle, var(--lp-punto) 1px, transparent 1.6px);
    background-size: 1.6rem 1.6rem;
}

.lp-mis__seccion--sala-alterna {
    color: var(--lp-tinta);
    background: var(--lp-fondo-alterno);
}

.lp-mis__cabecera {
    max-width: var(--lp-ancho-texto);
    margin: 0 auto 1rem;
    text-align: center;
}

.lp-mis__h2 {
    margin: 0 0 1rem;
    font-family: var(--lp-display);
    font-size: clamp(1.7rem, 3.6vw, 2.6rem);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -.005em;
    color: var(--lp-acento);
}

.lp-mis__h2--claro {
    color: var(--lp-luz);
}

.lp-mis__h3 {
    margin: 0 0 .5rem;
    font-family: var(--lp-display);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
}

.lp-mis__texto {
    margin: 0 0 1rem;
    font-size: 1.05rem;
}

.lp-mis__texto--claro {
    color: var(--lp-luz-suave);
}

.lp-mis__texto--intro {
    margin-bottom: 0;
    font-size: 1.12rem;
    color: var(--lp-tinta-suave);
}

.lp-mis__pie-seccion {
    max-width: var(--lp-ancho-texto);
    margin: 2.25rem auto 0;
    font-size: .92rem;
    color: var(--lp-tinta-suave);
    text-align: center;
}

.lp-mis__pie-seccion--claro {
    color: var(--lp-luz-suave);
}

/* La etiqueta lleva un piloto cuadrado delante, como los rótulos de una consola. */
.lp-mis__etiqueta {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1rem;
    padding: .35rem 1rem;
    border: 1px solid currentColor;
    border-radius: .35rem;
    background: var(--lp-superficie);
    font-family: var(--lp-mono);
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lp-acento);
}

    .lp-mis__etiqueta::before {
        content: "";
        flex: 0 0 auto;
        width: .45rem;
        height: .45rem;
        background: currentColor;
    }

.lp-mis__seccion--espacio .lp-mis__etiqueta,
.lp-mis__seccion--orbita .lp-mis__etiqueta,
.lp-mis__cierre .lp-mis__etiqueta {
    background: rgba(45, 226, 208, .08);
    color: var(--lp-senal);
}

/* ═══ Hecho en la UNI ══════════════════════════════════════════════════════ */
.lp-mis__chasqui {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 4rem;
    align-items: center;
}

.lp-mis__chasqui-foto {
    margin: 0;
}

/* El marco es el que manda en la proporción: así el anillo rodea la foto y no
   la foto más su pie. */
.lp-mis__chasqui-marco {
    position: relative;
    display: block;
    max-width: 26rem;
    margin-inline: auto;
}

    .lp-mis__chasqui-marco img {
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        border-radius: 50%;
        border: 1px solid rgba(243, 245, 255, .2);
        background-color: var(--lp-espacio-alto);
        box-shadow: 0 0 0 .8rem rgba(140, 108, 255, .08), 0 0 4rem rgba(45, 226, 208, .2);
    }

/* Un anillo de órbita que gira alrededor de la foto con un satélite montado. */
.lp-mis__chasqui-anillo {
    position: absolute;
    inset: -7%;
    z-index: 1;
    border-radius: 50%;
    border: 1px dashed rgba(45, 226, 208, .45);
    pointer-events: none;
    animation: lp-mis-girar 26s linear infinite;
}

@keyframes lp-mis-girar {
    to {
        transform: rotate(360deg);
    }
}

.lp-mis__chasqui-satelite {
    position: absolute;
    top: -.5rem;
    left: 50%;
    width: 1rem;
    height: 1rem;
    margin-left: -.5rem;
    border-radius: .2rem;
    background: var(--lp-senal);
    box-shadow: 0 0 1rem var(--lp-senal);
}

    /* Los dos paneles solares del satélite. */
    .lp-mis__chasqui-satelite::before,
    .lp-mis__chasqui-satelite::after {
        content: "";
        position: absolute;
        top: .3rem;
        width: .9rem;
        height: .4rem;
        background: var(--lp-violeta);
    }

    .lp-mis__chasqui-satelite::before {
        right: 100%;
    }

    .lp-mis__chasqui-satelite::after {
        left: 100%;
    }

.lp-mis__chasqui-foto figcaption {
    margin-top: 1.5rem;
    font-family: var(--lp-mono);
    font-size: .76rem;
    text-align: center;
    color: var(--lp-luz-suave);
}

.lp-mis__hitos {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

    .lp-mis__hitos li {
        display: flex;
        flex-direction: column;
        gap: .25rem;
        padding-top: 1rem;
        border-top: 2px solid rgba(45, 226, 208, .35);
        font-size: .88rem;
        line-height: 1.4;
        color: var(--lp-luz-suave);
    }

.lp-mis__hito-cifra {
    font-family: var(--lp-display);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 700;
    line-height: 1;
    color: var(--lp-senal);
    font-variant-numeric: tabular-nums;
}

/* ═══ Plan de vuelo: la trayectoria ════════════════════════════════════════
   Dos dibujos del mismo vuelo: el apaisado hasta tableta y el vertical en móvil.
   pathLength="1" en el marcado normaliza el largo de la ruta, así que el tramo
   recorrido se pinta con un dasharray de 1 sin medir nada. */
.lp-mis__trayectoria {
    max-width: 64rem;
    margin: 2.5rem auto 0;
}

.lp-mis__trayectoria-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.lp-mis__trayectoria-svg--alta {
    display: none;
    max-width: 26rem;
    margin-inline: auto;
}

.lp-mis__astros circle {
    fill: rgba(243, 245, 255, .6);
}

.lp-mis__tierra {
    fill: var(--lp-tierra);
}

.lp-mis__atmosfera {
    fill: none;
    stroke: rgba(45, 226, 208, .6);
    stroke-width: 2;
    filter: drop-shadow(0 0 .35rem rgba(45, 226, 208, .6));
}

.lp-mis__rampa {
    fill: none;
    stroke: rgba(243, 245, 255, .55);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.lp-mis__orbita {
    fill: none;
    stroke: var(--lp-violeta);
    stroke-width: 1.5;
    stroke-dasharray: 4 5;
}

.lp-mis__destino {
    fill: var(--lp-senal);
    transform-box: fill-box;
    transform-origin: center;
    animation: lp-mis-latido 2s ease-in-out infinite;
}

@keyframes lp-mis-latido {
    50% {
        transform: scale(1.45);
        opacity: .55;
    }
}

.lp-mis__ruta {
    fill: none;
    stroke: rgba(243, 245, 255, .3);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: .008 .012;
}

.lp-mis__ruta-recorrida {
    fill: none;
    stroke: var(--lp-senal);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    filter: drop-shadow(0 0 .3rem rgba(45, 226, 208, .8));
}

.lp-mis__marca circle {
    fill: var(--lp-espacio-alto);
    stroke: var(--lp-violeta);
    stroke-width: 2;
    transition: fill .3s ease, stroke .3s ease;
}

.lp-mis__marca text {
    fill: var(--lp-luz);
    font-family: var(--lp-mono);
    font-size: 15px;
    font-weight: 700;
    text-anchor: middle;
    transition: fill .3s ease;
}

.lp-mis__marca--alcanzada circle {
    fill: var(--lp-senal);
    stroke: var(--lp-senal);
}

.lp-mis__marca--alcanzada text {
    fill: var(--lp-senal-tinta);
}

.lp-mis__trayectoria-rotulo {
    fill: var(--lp-luz-suave);
    font-family: var(--lp-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lp-mis__trayectoria-rotulo--destino {
    fill: var(--lp-senal);
}

/* La lectura de telemetría va en HTML y no dentro del dibujo: así su letra no
   encoge con el SVG en pantallas estrechas. */
.lp-mis__telemetria {
    max-width: 40rem;
    min-height: 2.9rem;
    margin: 0 auto 1.5rem;
    padding: .65rem 1rem;
    border: 1px solid rgba(45, 226, 208, .3);
    border-radius: .5rem;
    background: rgba(8, 12, 38, .6);
    font-family: var(--lp-mono);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .03em;
    text-align: center;
    color: var(--lp-senal);
    font-variant-numeric: tabular-nums;
}

    .lp-mis__telemetria:empty {
        display: none;
    }

/* ═══ Plan de vuelo: las etapas ════════════════════════════════════════════ */
.lp-mis__etapas {
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.lp-mis__etapa {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 1.1rem;
    border: 1px solid var(--lp-panel-borde);
    background: var(--lp-panel);
    transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}

.lp-mis__etapa--activa {
    border-color: var(--lp-senal);
    box-shadow: 0 0 0 1px var(--lp-senal), 0 0 2.2rem rgba(45, 226, 208, .22);
    transform: translateY(-4px);
}

.lp-mis__etapa-foto {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background-color: var(--lp-espacio-alto);
    filter: saturate(.8) brightness(.82);
    transition: filter .35s ease;
}

.lp-mis__etapa--activa .lp-mis__etapa-foto {
    filter: none;
}

.lp-mis__etapa-cuerpo {
    padding: 1.2rem 1.2rem 1.4rem;
}

    .lp-mis__etapa-cuerpo > p:last-child {
        margin: 0;
        font-size: .95rem;
        color: var(--lp-luz-suave);
    }

    .lp-mis__etapa-cuerpo .lp-mis__etapa-rango {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .3rem .75rem;
        margin: 0 0 .55rem;
        font-family: var(--lp-mono);
        font-size: .74rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--lp-luz-suave);
    }

.lp-mis__etapa-numero {
    color: var(--lp-senal);
}

/* ═══ Elige tu puesto: el dial ═════════════════════════════════════════════
   En pantalla ancha, nueve estaciones alrededor de la insignia. Cada <li> se
   coloca con tres giros: gira al ángulo de su estación, avanza el radio y deshace
   el giro para que el botón quede derecho. El ángulo de cada una se declara aquí,
   y el guion lo lee para mover la aguja. */
.lp-mis__mando {
    display: grid;
    grid-template-columns: 30rem minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
    margin-top: 2.75rem;
}

.lp-mis__consola {
    position: relative;
    width: 30rem;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid var(--lp-borde);
    background: radial-gradient(circle, var(--lp-superficie) 0 34%, var(--lp-fondo-alterno) 34.5% 100%);
    box-shadow: inset 0 0 0 .7rem var(--lp-superficie), 0 1.5rem 3rem var(--lp-sombra);
}

    /* El carril por el que van las estaciones. */
    .lp-mis__consola::before {
        content: "";
        position: absolute;
        inset: 9.3%;
        border-radius: 50%;
        border: 1px dashed var(--lp-borde-fuerte);
        pointer-events: none;
    }

/* El barrido del radar mientras no hay puesto elegido. */
.lp-mis__radar {
    position: absolute;
    inset: 16%;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(45, 226, 208, .3), rgba(45, 226, 208, 0) 24%);
    pointer-events: none;
    animation: lp-mis-girar 5s linear infinite;
}

.lp-mis__consola--fijada .lp-mis__radar {
    background: none;
    animation: none;
}

.lp-mis__radar-aguja {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44%;
    height: .22rem;
    margin-top: -.11rem;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--lp-senal-fuerte));
    transform-origin: 0 50%;
    transform: rotate(var(--lp-mis-angulo, -90deg));
    opacity: 0;
    transition: transform .7s cubic-bezier(.34, 1.4, .5, 1), opacity .3s ease;
}

.lp-mis__consola--fijada .lp-mis__radar-aguja {
    opacity: 1;
}

.lp-mis__insignia {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 11rem;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    text-align: center;
}

.lp-mis__parche {
    width: 8.5rem;
    height: 8.5rem;
    filter: drop-shadow(0 .5rem 1rem rgba(14, 19, 48, .25));
}

.lp-mis__parche-fondo {
    fill: var(--lp-espacio-alto);
    stroke: var(--lp-uni-plata);
    stroke-width: 4;
}

.lp-mis__parche-interior {
    fill: var(--lp-espacio);
    stroke: var(--lp-senal);
    stroke-width: 2;
}

.lp-mis__parche-texto {
    fill: var(--lp-luz);
    font-family: var(--lp-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .2em;
}

.lp-mis__parche-orbita {
    fill: none;
    stroke: var(--lp-senal);
    stroke-width: 3;
}

.lp-mis__parche-cohete {
    fill: var(--lp-cohete-casco);
}

.lp-mis__parche-estrella {
    fill: var(--lp-llama-clara);
}

.lp-mis__parche-planeta {
    fill: var(--lp-violeta);
}

.lp-mis__insignia-texto {
    margin: 0;
    line-height: 1.2;
}

.lp-mis__insignia-rotulo {
    display: block;
    font-family: var(--lp-mono);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lp-tinta-suave);
}

.lp-mis__insignia-puesto {
    display: block;
    font-family: var(--lp-display);
    font-size: 1rem;
    color: var(--lp-acento);
}

.lp-mis__estaciones {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .lp-mis__estaciones li {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 2;
        transform-origin: 0 0;
        transform: rotate(var(--lp-mis-estacion)) translate(12.2rem) rotate(calc(var(--lp-mis-estacion) * -1)) translate(-50%, -50%);
    }

        .lp-mis__estaciones li:nth-child(1) {
            --lp-mis-estacion: -90deg;
        }

        .lp-mis__estaciones li:nth-child(2) {
            --lp-mis-estacion: -50deg;
        }

        .lp-mis__estaciones li:nth-child(3) {
            --lp-mis-estacion: -10deg;
        }

        .lp-mis__estaciones li:nth-child(4) {
            --lp-mis-estacion: 30deg;
        }

        .lp-mis__estaciones li:nth-child(5) {
            --lp-mis-estacion: 70deg;
        }

        .lp-mis__estaciones li:nth-child(6) {
            --lp-mis-estacion: 110deg;
        }

        .lp-mis__estaciones li:nth-child(7) {
            --lp-mis-estacion: 150deg;
        }

        .lp-mis__estaciones li:nth-child(8) {
            --lp-mis-estacion: 190deg;
        }

        .lp-mis__estaciones li:nth-child(9) {
            --lp-mis-estacion: 230deg;
        }

.lp-mis__estacion {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    width: 5.6rem;
    height: 5.6rem;
    padding: .4rem;
    border: 2px solid var(--lp-borde-fuerte);
    border-radius: 50%;
    background: var(--lp-superficie);
    color: var(--lp-tinta);
    font-family: var(--lp-display);
    font-size: .64rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 .5rem 1.2rem var(--lp-sombra);
    transition: transform .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

    .lp-mis__estacion:hover {
        transform: scale(1.06);
        border-color: var(--lp-acento);
    }

    .lp-mis__estacion:focus-visible {
        outline: 3px solid var(--lp-acento);
        outline-offset: 3px;
    }

    .lp-mis__estacion[aria-pressed="true"] {
        background: var(--lp-espacio-alto);
        border-color: var(--lp-senal);
        color: var(--lp-senal);
        box-shadow: 0 0 0 .35rem rgba(45, 226, 208, .2), 0 0 1.5rem rgba(45, 226, 208, .35);
    }

.lp-mis__estacion-icono {
    width: 1.7rem;
    height: 1.7rem;
    fill: none !important;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Las pantallas de cada puesto ─────────────────────────────────────── */
.lp-mis__pantallas {
    position: relative;
    display: grid;
    gap: 1.25rem;
}

.lp-mis__pantalla {
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border-radius: 1.25rem;
    border: 1px solid var(--lp-borde);
    background: var(--lp-superficie);
    box-shadow: 0 1rem 2.5rem var(--lp-sombra);
}

/* Con el guion vivo solo se ve la pantalla del puesto elegido. */
.lp-mis--con-consola .lp-mis__pantalla {
    display: none;
}

.lp-mis--con-consola .lp-mis__pantalla--activa {
    display: grid;
    animation: lp-mis-aparecer .45s ease;
}

@keyframes lp-mis-aparecer {
    from {
        opacity: 0;
        transform: translateY(.75rem) scale(.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Apaisada en escritorio para que la pantalla no pase del alto del dial; en
   pantallas estrechas recupera altura. */
.lp-mis__pantalla-foto {
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    background-color: var(--lp-fondo-alterno);
}

.lp-mis__pantalla-texto {
    padding: 1.5rem 1.6rem 1.75rem;
}

    .lp-mis__pantalla-texto > p {
        margin: 0 0 1rem;
        color: var(--lp-tinta-suave);
    }

.lp-mis__pantalla .lp-mis__pantalla-rotulo {
    margin: 0 0 .35rem;
    font-family: var(--lp-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lp-acento);
}

.lp-mis__carreras {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

    .lp-mis__carreras li {
        padding: .35rem .8rem;
        border-radius: 999px;
        border: 1px solid var(--lp-borde);
        background: var(--lp-fondo-alterno);
        font-size: .86rem;
        font-weight: 600;
        color: var(--lp-tinta);
    }

/* ═══ Chequeo previo al despegue ═══════════════════════════════════════════ */
.lp-mis__sistemas {
    margin-top: 2.25rem;
}

.lp-mis__sistema {
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid var(--lp-panel-borde);
    background: var(--lp-panel);
    transition: border-color .3s ease, box-shadow .3s ease;
}

    .lp-mis__sistema + .lp-mis__sistema {
        margin-top: .9rem;
    }

    .lp-mis__sistema summary {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1.15rem 1.35rem;
        list-style: none;
        cursor: pointer;
    }

        .lp-mis__sistema summary::-webkit-details-marker {
            display: none;
        }

        .lp-mis__sistema summary:focus-visible {
            outline: 3px solid var(--lp-senal);
            outline-offset: -3px;
        }

.lp-mis__sistema-nombre {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    font-family: var(--lp-display);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--lp-luz);
}

    .lp-mis__sistema-nombre small {
        margin-bottom: .2rem;
        font-family: var(--lp-mono);
        font-size: .7rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--lp-luz-suave);
    }

.lp-mis__sistema-estado {
    flex: 0 0 auto;
    padding: .3rem .8rem;
    border: 1px solid var(--lp-pendiente);
    border-radius: 999px;
    font-family: var(--lp-mono);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lp-pendiente);
}

.lp-mis__sistema--go {
    border-color: rgba(52, 226, 122, .55);
    box-shadow: 0 0 1.5rem rgba(52, 226, 122, .12);
}

    .lp-mis__sistema--go .lp-mis__sistema-estado {
        border-color: var(--lp-go);
        color: var(--lp-go);
    }

.lp-mis__sistema-cuerpo {
    padding: 0 1.35rem 1.3rem 3.2rem;
}

    .lp-mis__sistema-cuerpo p {
        margin: 0;
        color: var(--lp-luz-suave);
    }

/* El piloto: ámbar parpadeando mientras falta verificar, verde fijo en GO. El
   estado también va escrito al lado, así que no depende solo del color. */
.lp-mis__led {
    flex: 0 0 auto;
    width: .85rem;
    height: .85rem;
    border-radius: 50%;
    background: var(--lp-pendiente);
    box-shadow: 0 0 .7rem var(--lp-pendiente);
    animation: lp-mis-parpadeo 1.3s ease-in-out infinite;
}

.lp-mis__sistema--go .lp-mis__led,
.lp-mis__led--go {
    background: var(--lp-go);
    box-shadow: 0 0 .9rem var(--lp-go);
    animation: none;
}

.lp-mis__go {
    margin-top: 1.5rem;
    padding: 1.75rem 1.5rem;
    border: 1px solid var(--lp-go);
    border-radius: 1.1rem;
    background: rgba(52, 226, 122, .08);
    text-align: center;
    animation: lp-mis-aparecer .5s ease;
}

.lp-mis__go-titulo {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 .5rem;
    font-family: var(--lp-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--lp-go);
}

.lp-mis__go-texto {
    margin: 0 0 1.25rem;
    color: var(--lp-luz-suave);
}

/* ═══ Combustible ══════════════════════════════════════════════════════════ */
.lp-mis__combustible {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 3rem;
    align-items: center;
}

.lp-mis__control {
    margin: 1.75rem 0 1.25rem;
    padding: 1.25rem 1.4rem;
    border: 1px solid var(--lp-borde);
    border-radius: 1rem;
    background: var(--lp-superficie);
    box-shadow: 0 .75rem 2rem var(--lp-sombra);
}

.lp-mis__control-rotulo {
    display: block;
    margin-bottom: .8rem;
    font-family: var(--lp-mono);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lp-acento);
}

.lp-mis__control-fila {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* El deslizador pinta su tramo recorrido con la variable que actualiza el guion.
   Sin guion se queda en el valor inicial y funciona igual. */
.lp-mis__deslizador {
    flex: 1 1 auto;
    min-width: 0;
    height: .6rem;
    margin: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--lp-senal-fuerte) 0 calc(var(--lp-mis-nivel, .24) * 100%), var(--lp-fondo-alterno) calc(var(--lp-mis-nivel, .24) * 100%) 100%);
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

    .lp-mis__deslizador::-webkit-slider-thumb {
        width: 1.7rem;
        height: 1.7rem;
        border: 3px solid var(--lp-senal);
        border-radius: 50%;
        background: var(--lp-espacio-alto);
        box-shadow: 0 0 0 .35rem rgba(45, 226, 208, .25);
        -webkit-appearance: none;
        appearance: none;
    }

    .lp-mis__deslizador::-moz-range-thumb {
        width: 1.7rem;
        height: 1.7rem;
        border: 3px solid var(--lp-senal);
        border-radius: 50%;
        background: var(--lp-espacio-alto);
        box-shadow: 0 0 0 .35rem rgba(45, 226, 208, .25);
    }

    .lp-mis__deslizador:focus-visible {
        outline: 3px solid var(--lp-acento);
        outline-offset: 8px;
    }

.lp-mis__control-valor {
    flex: 0 0 auto;
    min-width: 4.4rem;
    padding: .35rem .7rem;
    border-radius: .6rem;
    background: var(--lp-espacio-alto);
    font-family: var(--lp-mono);
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    color: var(--lp-senal);
    font-variant-numeric: tabular-nums;
}

.lp-mis__ritmos > p {
    margin: 0;
    padding: .9rem 1.1rem;
    border-left: 4px solid var(--lp-senal-fuerte);
    border-radius: 0 .75rem .75rem 0;
    background: var(--lp-superficie);
    color: var(--lp-tinta);
}

    /* Sin guion se ve solo el primer ritmo; con él, el que corresponde a las horas. */
    .lp-mis__ritmos > p + p {
        display: none;
    }

.lp-mis--con-calculadora .lp-mis__ritmos > p {
    display: none;
}

.lp-mis--con-calculadora .lp-mis__ritmos > .lp-mis__ritmo--visible {
    display: block;
    animation: lp-mis-aparecer .35s ease;
}

.lp-mis__tablero {
    display: flex;
    align-items: stretch;
    gap: 1.5rem;
    padding: 1.75rem;
    border: 1px solid rgba(45, 226, 208, .25);
    border-radius: 1.4rem;
    background: var(--lp-espacio);
    color: var(--lp-luz);
    box-shadow: 0 1.25rem 3rem var(--lp-sombra-fuerte);
}

/* El tanque se llena con la misma variable del deslizador. Nunca se vacía del
   todo: con una hora a la semana también hay combustible. */
.lp-mis__tanque {
    position: relative;
    flex: 0 0 4.5rem;
    min-height: 15rem;
    overflow: hidden;
    border: 2px solid rgba(243, 245, 255, .3);
    border-radius: 2.25rem;
    background: rgba(243, 245, 255, .06);
}

.lp-mis__tanque-nivel {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, var(--lp-senal-fuerte), var(--lp-senal) 60%, var(--lp-violeta));
    transform-origin: bottom;
    transform: scaleY(max(.06, var(--lp-mis-nivel, .24)));
    transition: transform .45s cubic-bezier(.3, 1.3, .5, 1);
}

.lp-mis__tanque-marcas {
    position: absolute;
    inset: .75rem 1.1rem;
    background: repeating-linear-gradient(0deg, transparent 0 calc(25% - 1px), rgba(243, 245, 255, .4) calc(25% - 1px) 25%);
    pointer-events: none;
}

.lp-mis__lecturas-caja {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.lp-mis__lecturas {
    margin: 0;
}

    .lp-mis__lecturas > div + div {
        margin-top: 1.25rem;
        padding-top: 1.25rem;
        border-top: 1px dashed rgba(243, 245, 255, .18);
    }

    .lp-mis__lecturas dt {
        margin-bottom: .3rem;
        font-size: .88rem;
        font-weight: 400;
        color: var(--lp-luz-suave);
    }

    .lp-mis__lecturas dd {
        margin: 0;
        font-family: var(--lp-mono);
        font-size: clamp(2rem, 4vw, 2.8rem);
        font-weight: 700;
        line-height: 1;
        color: var(--lp-senal);
        font-variant-numeric: tabular-nums;
    }

.lp-mis__tablero-nota {
    margin: 1.25rem 0 0;
    font-size: .8rem;
    color: var(--lp-luz-suave);
}

/* ═══ Secuencia de encendido ═══════════════════════════════════════════════
   Los pasos arrancan tenues y se encienden uno tras otro cuando la sección se
   hace visible. Sin guion no hay clase de animación y se ven todos encendidos. */
.lp-mis__secuencia {
    list-style: none;
    margin: 2.75rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.lp-mis__paso {
    position: relative;
    padding: 1.75rem 1.4rem 1.6rem;
    border: 1px solid var(--lp-panel-borde);
    border-radius: 1.1rem;
    background: var(--lp-panel);
}

    .lp-mis__paso > p {
        margin: 0 0 1rem;
        font-size: .95rem;
        color: var(--lp-luz-suave);
    }

        .lp-mis__paso > p:last-child {
            margin-bottom: 0;
        }

.lp-mis__paso-numero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.2rem;
    height: 4.2rem;
    margin-bottom: 1.1rem;
    border: 2px solid var(--lp-violeta);
    border-radius: 50%;
    font-family: var(--lp-display);
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--lp-luz);
}

.lp-mis__paso--despegue {
    border-color: rgba(45, 226, 208, .5);
    background: linear-gradient(160deg, rgba(45, 226, 208, .14), var(--lp-panel) 60%);
}

    .lp-mis__paso--despegue .lp-mis__paso-numero {
        border-color: var(--lp-senal);
        color: var(--lp-senal);
    }

        .lp-mis__paso--despegue .lp-mis__paso-numero svg {
            width: 2rem;
            height: 2rem;
            fill-rule: evenodd;
        }

.lp-mis--animada .lp-mis__paso {
    opacity: .3;
    transform: scale(.97);
}

.lp-mis--animada .lp-mis--visible .lp-mis__paso {
    animation: lp-mis-encender .55s ease forwards;
}

    .lp-mis--animada .lp-mis--visible .lp-mis__paso:nth-child(2) {
        animation-delay: .55s;
    }

    .lp-mis--animada .lp-mis--visible .lp-mis__paso:nth-child(3) {
        animation-delay: 1.1s;
    }

    .lp-mis--animada .lp-mis--visible .lp-mis__paso:nth-child(4) {
        animation-delay: 1.65s;
    }

@keyframes lp-mis-encender {
    0% {
        opacity: .3;
        transform: scale(.97);
    }

    60% {
        opacity: 1;
        transform: scale(1.02);
        box-shadow: 0 0 2rem rgba(140, 108, 255, .35);
    }

    100% {
        opacity: 1;
        transform: none;
        box-shadow: none;
    }
}

/* ═══ Para quien financia la misión ════════════════════════════════════════ */
.lp-mis__agencia {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 3.5rem;
    align-items: center;
}

.lp-mis__agencia-foto {
    position: relative;
    margin: 0;
}

    .lp-mis__agencia-foto img {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border-radius: 1.4rem;
        background-color: var(--lp-fondo-alterno);
        box-shadow: 0 1.5rem 3rem var(--lp-sombra-fuerte);
    }

/* El sello de "aprobado", ladeado como si lo hubieran estampado a mano. */
.lp-mis__sello {
    position: absolute;
    right: -1rem;
    bottom: 1.25rem;
    padding: .55rem 1rem;
    border: 3px double var(--lp-sello);
    border-radius: .5rem;
    background: var(--lp-sello-fondo);
    font-family: var(--lp-display);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lp-sello);
    box-shadow: 0 .5rem 1rem var(--lp-sombra);
    transform: rotate(-7deg);
}

.lp-mis__informe {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: grid;
    gap: .85rem;
}

    .lp-mis__informe li {
        position: relative;
        padding: 1rem 1.1rem 1rem 3rem;
        border: 1px solid var(--lp-borde);
        border-radius: .9rem;
        background: var(--lp-superficie);
        font-size: .96rem;
        color: var(--lp-tinta-suave);
    }

        .lp-mis__informe li::before {
            content: "";
            position: absolute;
            top: 1.2rem;
            left: 1.1rem;
            width: 1.1rem;
            height: 1.1rem;
            border-radius: 50%;
            background: var(--lp-senal-fuerte);
            box-shadow: inset 0 0 0 .3rem var(--lp-superficie), 0 0 0 1px var(--lp-senal-fuerte);
        }

    .lp-mis__informe strong {
        color: var(--lp-tinta);
    }

/* ═══ Bitácora de a bordo ══════════════════════════════════════════════════
   Una tira que se desliza en horizontal con imán en cada entrada. Solo se
   desplaza la tira, nunca la página. */
.lp-mis__bitacora {
    margin-top: 2.5rem;
}

/* Sin relleno lateral: el imán dejaría la primera entrada a esa distancia del
   borde y el guion no sabría que está al principio. */
.lp-mis__bitacora-pista {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    padding: .5rem 0 1.25rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--lp-violeta) transparent;
}

    .lp-mis__bitacora-pista:focus-visible {
        outline: 3px solid var(--lp-senal);
        outline-offset: 4px;
        border-radius: 1rem;
    }

.lp-mis__entrada {
    position: relative;
    flex: 0 0 min(78%, 19rem);
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--lp-panel-borde);
    border-radius: 1.25rem;
    background: var(--lp-espacio-alto);
    scroll-snap-align: start;
}

    .lp-mis__entrada img {
        width: 100%;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        background-color: var(--lp-espacio-alto);
        transition: transform .6s ease;
    }

    .lp-mis__entrada:hover img {
        transform: scale(1.05);
    }

    .lp-mis__entrada figcaption {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 3.5rem 1.1rem 1.1rem;
        background: linear-gradient(transparent, rgba(3, 4, 13, .94));
        font-weight: 600;
        line-height: 1.4;
        color: var(--lp-luz);
    }

.lp-mis__entrada-fecha {
    display: block;
    margin-bottom: .35rem;
    font-family: var(--lp-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lp-senal);
}

.lp-mis__bitacora-controles {
    display: none;
    justify-content: flex-end;
    gap: .6rem;
    margin-top: .5rem;
}

.lp-mis--con-carrusel .lp-mis__bitacora-controles {
    display: flex;
}

.lp-mis__bitacora-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(243, 245, 255, .35);
    border-radius: 50%;
    background: var(--lp-panel);
    color: var(--lp-luz);
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, opacity .2s ease;
}

    .lp-mis__bitacora-boton svg {
        width: 1.3rem;
        height: 1.3rem;
        fill: none !important;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .lp-mis__bitacora-boton:hover:not(:disabled) {
        border-color: var(--lp-senal);
        color: var(--lp-senal);
    }

    .lp-mis__bitacora-boton:focus-visible {
        outline: 3px solid var(--lp-senal);
        outline-offset: 3px;
    }

    .lp-mis__bitacora-boton:disabled {
        opacity: .35;
        cursor: default;
    }

/* ═══ Preguntas de la tripulación ══════════════════════════════════════════
   details y summary: se despliegan sin JavaScript. El marcador del navegador se
   retira y se dibuja un botón redondo que gira al abrir. */
.lp-mis__faq {
    display: grid;
    gap: .75rem;
    margin-top: 2rem;
}

.lp-mis__faq-item {
    overflow: hidden;
    border: 1px solid var(--lp-borde);
    border-left: 4px solid var(--lp-acento);
    border-radius: .9rem;
    background: var(--lp-superficie);
}

    .lp-mis__faq-item summary {
        position: relative;
        padding: 1.1rem 3.6rem 1.1rem 1.3rem;
        font-weight: 700;
        color: var(--lp-tinta);
        list-style: none;
        cursor: pointer;
    }

        .lp-mis__faq-item summary::-webkit-details-marker {
            display: none;
        }

        .lp-mis__faq-item summary::after {
            content: "›";
            position: absolute;
            top: 50%;
            right: 1.1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 1.9rem;
            height: 1.9rem;
            margin-top: -.95rem;
            border-radius: 50%;
            background: var(--lp-fondo-alterno);
            font-size: 1.35rem;
            line-height: 1;
            color: var(--lp-acento);
            transition: transform .25s ease, background-color .25s ease;
        }

        .lp-mis__faq-item summary:focus-visible {
            outline: 3px solid var(--lp-acento);
            outline-offset: -3px;
        }

    .lp-mis__faq-item[open] summary::after {
        transform: rotate(90deg);
        background: var(--lp-acento);
        color: var(--lp-superficie);
    }

    .lp-mis__faq-item p {
        margin: 0;
        padding: 0 1.3rem 1.2rem;
        color: var(--lp-tinta-suave);
    }

/* ═══ Cierre · despegue ════════════════════════════════════════════════════ */
.lp-mis__cierre {
    position: relative;
    overflow: hidden;
    padding: 7rem 0 5rem;
    text-align: center;
    color: var(--lp-luz);
    background-color: var(--lp-espacio);
    background-image: linear-gradient(180deg, rgba(5, 7, 22, .92) 0%, rgba(5, 7, 22, .62) 45%, rgba(5, 7, 22, .94) 100%), url("imagenes/despegue.jpeg");
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

.lp-mis__cierre-contenido {
    position: relative;
    z-index: 1;
}

    .lp-mis__cierre-contenido .lp-mis__h2 {
        max-width: 44rem;
        margin-inline: auto;
    }

    .lp-mis__cierre-contenido .lp-mis__texto {
        max-width: 36rem;
        margin-inline: auto;
    }

/* El cohete del costado: quieto hasta que el guion marca el despegue. Sale por
   arriba y la sección lo recorta; el humo se queda en la base. */
.lp-mis__cierre-escena {
    position: absolute;
    right: 7%;
    bottom: 0;
    width: 7rem;
    height: 14rem;
    pointer-events: none;
}

.lp-mis__cohete--cierre {
    position: absolute;
    left: 0;
    bottom: 1rem;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 1.25rem rgba(255, 106, 61, .35));
}

.lp-mis__cierre--despegue .lp-mis__cohete--cierre {
    animation: lp-mis-despegue 3.4s cubic-bezier(.55, 0, .85, .25) .4s forwards;
}

@keyframes lp-mis-despegue {
    0% {
        transform: translateY(0);
    }

    10% {
        transform: translateY(.3rem);
    }

    100% {
        transform: translateY(-70rem);
    }
}

.lp-mis__humo {
    position: absolute;
    bottom: -1.75rem;
    width: 7rem;
    height: 4rem;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(243, 245, 255, .55), transparent);
    opacity: 0;
}

.lp-mis__humo--1 {
    left: -3.5rem;
}

.lp-mis__humo--2 {
    left: 0;
}

.lp-mis__humo--3 {
    left: 3.5rem;
}

.lp-mis__cierre--despegue .lp-mis__humo {
    animation: lp-mis-humo 3.2s ease-out .35s forwards;
}

.lp-mis__cierre--despegue .lp-mis__humo--2 {
    animation-delay: .5s;
}

.lp-mis__cierre--despegue .lp-mis__humo--3 {
    animation-delay: .65s;
}

@keyframes lp-mis-humo {
    0% {
        opacity: 0;
        transform: scale(.4);
    }

    30% {
        opacity: .9;
    }

    100% {
        opacity: 0;
        transform: scale(2.3) translateY(-1rem);
    }
}

.lp-mis__nota-legal {
    max-width: 44rem;
    margin: 2.75rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px dashed rgba(243, 245, 255, .2);
    font-size: .8rem;
    color: rgba(243, 245, 255, .66);
}

/* ═══ Propulsor: el botón fijo ═════════════════════════════════════════════
   fixed y no sticky: las hojas del sitio definen su propio contenedor de
   desplazamiento y con eso sticky no se pega a nada.

   Oculto no basta con desplazarlo: sin visibility seguiría interceptando
   pulsaciones sobre el pie del sitio aunque no se vea.

   Va en la esquina inferior IZQUIERDA: la derecha es la de la mascota del sitio,
   que se dibuja por encima y lo taparía. */
.lp-mis__propulsor {
    position: fixed;
    left: 1.25rem;
    bottom: 1.25rem;
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .4rem 1.25rem .4rem .4rem;
    border: 1px solid rgba(45, 226, 208, .5);
    border-radius: 999px;
    background: var(--lp-espacio-alto);
    color: var(--lp-luz);
    font-family: var(--lp-display);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .4);
}

    .lp-mis__propulsor:hover {
        color: var(--lp-senal);
    }

    .lp-mis__propulsor:focus-visible {
        outline: 3px solid var(--lp-senal);
        outline-offset: 3px;
    }

.lp-mis--con-propulsor .lp-mis__propulsor {
    opacity: 0;
    visibility: hidden;
    transform: translateY(150%);
    transition: transform .35s ease, opacity .35s ease, visibility .35s;
}

.lp-mis--con-propulsor .lp-mis__propulsor--visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.lp-mis__propulsor-anillo {
    position: relative;
    flex: 0 0 auto;
    width: 2.8rem;
    height: 2.8rem;
}

/* El aro empieza arriba: por eso se gira un cuarto de vuelta hacia atrás. */
.lp-mis__propulsor-aro {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.lp-mis__propulsor-pista {
    fill: none !important;
    stroke: rgba(243, 245, 255, .15);
    stroke-width: 3;
}

.lp-mis__propulsor-progreso {
    fill: none !important;
    stroke: var(--lp-senal);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.lp-mis__propulsor-cohete {
    position: absolute;
    inset: .7rem;
    width: calc(100% - 1.4rem);
    height: calc(100% - 1.4rem);
    fill: var(--lp-senal) !important;
    fill-rule: evenodd;
}

/* ═══ Pantallas medianas ═══════════════════════════════════════════════════ */
@media (max-width: 61.99rem) {
    .lp-mis__portada {
        padding: 3.5rem 0 7rem;
    }

    .lp-mis__portada-rejilla,
    .lp-mis__chasqui,
    .lp-mis__mando,
    .lp-mis__combustible,
    .lp-mis__agencia {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }

    .lp-mis__portada-texto,
    .lp-mis__chasqui-texto {
        text-align: center;
    }

    .lp-mis__bajada {
        margin-inline: auto;
    }

    .lp-mis__portada .lp-mis__acciones,
    .lp-mis__chasqui-texto .lp-mis__acciones,
    .lp-mis__sensores {
        justify-content: center;
    }

    .lp-mis__chasqui-marco {
        max-width: 20rem;
    }

    .lp-mis__hitos {
        text-align: left;
    }

    .lp-mis__etapas,
    .lp-mis__secuencia {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* El dial pasa a ser un panel con las estaciones en rejilla: en ancho de
       tableta no cabe un círculo de treinta rem con el texto al lado. */
    .lp-mis__consola {
        width: 100%;
        aspect-ratio: auto;
        padding: 1.5rem;
        border-radius: 1.25rem;
        background: var(--lp-superficie);
        box-shadow: 0 1rem 2.5rem var(--lp-sombra);
    }

        .lp-mis__consola::before,
        .lp-mis__radar {
            display: none;
        }

    .lp-mis__insignia {
        position: static;
        width: auto;
        margin-bottom: 1.25rem;
        flex-direction: row;
        justify-content: center;
        gap: 1rem;
        transform: none;
        text-align: left;
    }

    .lp-mis__parche {
        width: 5rem;
        height: 5rem;
    }

    .lp-mis__estaciones {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .6rem;
    }

        .lp-mis__estaciones li {
            position: static;
            transform: none;
        }

    .lp-mis__estacion {
        width: 100%;
        height: auto;
        padding: .85rem .4rem;
        border-radius: 1rem;
        font-size: .7rem;
    }

    .lp-mis__sello {
        right: .75rem;
    }

    .lp-mis__pantalla-foto {
        aspect-ratio: 16 / 10;
    }

    .lp-mis__cierre-escena {
        display: none;
    }
}

/* ═══ Tableta vertical y móvil: la trayectoria vertical ════════════════════ */
@media (max-width: 47.99rem) {
    .lp-mis__trayectoria-svg--ancha {
        display: none;
    }

    .lp-mis__trayectoria-svg--alta {
        display: block;
    }
}

/* ═══ Móviles ══════════════════════════════════════════════════════════════ */
@media (max-width: 35.99rem) {
    .lp-mis__seccion {
        padding: 3.75rem 0;
    }

    .lp-mis__cierre {
        padding: 4.5rem 0 4rem;
    }

    .lp-mis__institucional-contenido {
        justify-content: center;
        text-align: center;
    }

    .lp-mis__uni {
        margin: 0;
    }

    .lp-mis__accion {
        width: 100%;
    }

    .lp-mis__accion--compacta {
        width: auto;
    }

    .lp-mis__hitos,
    .lp-mis__etapas,
    .lp-mis__secuencia {
        grid-template-columns: minmax(0, 1fr);
    }

    .lp-mis__consola {
        padding: 1.1rem;
    }

    .lp-mis__estaciones {
        gap: .45rem;
    }

    .lp-mis__estacion {
        padding: .75rem .25rem;
        font-size: .62rem;
    }

    .lp-mis__pantalla-texto {
        padding: 1.25rem 1.2rem 1.4rem;
    }

    .lp-mis__sistema summary {
        padding: 1rem 1.1rem;
        gap: .75rem;
    }

    .lp-mis__sistema-cuerpo {
        padding: 0 1.1rem 1.15rem;
    }

    .lp-mis__tablero {
        padding: 1.25rem;
        gap: 1rem;
    }

    .lp-mis__tanque {
        flex-basis: 3.4rem;
        min-height: 13rem;
    }

    .lp-mis__propulsor {
        left: 1rem;
        bottom: 1rem;
        font-size: .9rem;
    }
}

/* Por debajo de 22.5rem el propulsor, que va a la izquierda, ya no cabe entero
   entre el borde y la mascota del sitio, que ocupa la esquina derecha: se
   estrecha, y solo a lo ancho, para no perder alto donde se pulsa. El cohete
   encoge con el anillo y conserva su proporción dentro de él. Por debajo de 21rem
   ni así cabe, y el anillo, que es adorno, cede su sitio al texto; el relleno
   vertical crece para que el botón conserve un alto cómodo para el dedo. */
@media (max-width: 22.49rem) {
    .lp-mis__propulsor {
        gap: .5rem;
        padding-right: 1rem;
        font-size: .85rem;
    }

    .lp-mis__propulsor-anillo {
        width: 2.4rem;
        height: 2.4rem;
    }

    .lp-mis__propulsor-cohete {
        inset: .6rem;
        width: calc(100% - 1.2rem);
        height: calc(100% - 1.2rem);
    }
}

@media (max-width: 20.99rem) {
    .lp-mis__propulsor {
        padding: .75rem 1rem;
    }

    .lp-mis__propulsor-anillo {
        display: none;
    }
}