:root {
        /* Ajustes rápidos */
        --comet-speed: 4s;
        /* velocidad del vuelo */
        --streak-speed: 1.6s;
        /* parpadeo de estelas */
        --separator-padding: 12px;
        /* espacio vertical del separador */
    }

    body {
        font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
        line-height: 1.6;
        margin: 0;
        color: #1d1d1f;
    }

    main {
        max-width: 900px;
        margin: 0 auto;
        padding: 32px 18px 80px;
    }

    h1,
    h2 {
        line-height: 1.25;
    }

    /* ======= Separador cometa ======= */
    .comet-separator {
        width: 100%;
        overflow: hidden;
    }

    .comet {
        width: min(920px, 96vw);
        display: block;
        margin: 0 auto;
    }

    .tail {
        stroke-dasharray: 180 900;
        /* hueco largo para efecto “cometa” */
        animation: streak var(--streak-speed) linear infinite;
    }

    .tail-2 {
        animation-delay: .12s;
    }

    .tail-3 {
        animation-delay: .24s;
    }

    .star {
        transform-origin: 20px 20px;
        animation:
            fly var(--comet-speed) ease-in-out infinite,
            twinkle .9s ease-in-out infinite alternate;
    }

    /* Animaciones */
    @keyframes streak {
        from {
            stroke-dashoffset: 0;
        }

        to {
            stroke-dashoffset: -1080;
        }
    }

    @keyframes fly {
        0% {
            transform: translate(-120px, 55px) scale(1);
            opacity: 0;
        }

        10% {
            opacity: 1;
        }

        50% {
            transform: translate(360px, 45px) scale(1.05);
        }

        90% {
            opacity: 1;
        }

        100% {
            transform: translate(840px, 55px) scale(1);
            opacity: 0;
        }
    }

    @keyframes twinkle {
        from {
            filter: drop-shadow(0 0 2px #ffd400);
        }

        to {
            filter: drop-shadow(0 0 8px #ffb300);
        }
    }

    /* Respeto a usuarios con reducción de movimiento */
    @media (prefers-reduced-motion: reduce) {

        .tail,
        .star {
            animation: none;
        }
    }

    /* Contenido demo */
    .card {
        background: white;
        border: 1px solid #e6e6e6;
        border-radius: 10px;
        padding: 18px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
    }

    /* ======= Separador cometa invertido ======= */
    .comet-reverse {
        width: min(920px, 96vw);
        display: block;
        margin: 0 auto;
        transform: scaleX(-1);
        /* Invierte horizontalmente TODO el SVG */
    }

    /* Mantiene las animaciones originales (no se duplican keyframes) */
    .tail-reverse {
        stroke-dasharray: 180 900;
        animation: streak var(--streak-speed) linear infinite;
    }

    .tail-reverse-2 {
        animation-delay: .12s;
    }

    .tail-reverse-3 {
        animation-delay: .24s;
    }

    .star-reverse {
        transform-origin: 20px 20px;
        animation:
            fly var(--comet-speed) ease-in-out infinite,
            twinkle .9s ease-in-out infinite alternate;
    }

    /* Igual que el original */
    @keyframes streak {
        from {
            stroke-dashoffset: 0;
        }

        to {
            stroke-dashoffset: -1080;
        }
    }

    @keyframes fly {
        0% {
            transform: translate(-120px, 55px) scale(1);
            opacity: 0;
        }

        10% {
            opacity: 1;
        }

        50% {
            transform: translate(360px, 45px) scale(1.05);
        }

        90% {
            opacity: 1;
        }

        100% {
            transform: translate(840px, 55px) scale(1);
            opacity: 0;
        }
    }

    @keyframes twinkle {
        from {
            filter: drop-shadow(0 0 2px #ffd400);
        }

        to {
            filter: drop-shadow(0 0 8px #ffb300);
        }
    }