#copilot {

    --cop-canvas: #030116;
    --cop-deep: #12073c;
    --cop-text: #fff;
    --cop-heading: #ebe9fe;
    --cop-muted: rgba(235, 233, 254, .8);
    --cop-dim: #98a2b3;
    --cop-border: #1b1b43;
    --cop-border-soft: #241f36;
    --cop-panel-border: rgba(155, 98, 255, .32);
    --cop-toggle-border: #2f2f6a;

    --cop-brand: #9b62ff;
    --cop-brand-lo: #6037ff;
    --cop-brand-hi: #b27aff;
    --cop-brand-pale: #e59cff;

    /* relleno del CTA, calcado del boton "Client Area" del header */
    --cop-cta: radial-gradient(167.31% 100% at 50.4273% 23.6111%,
        var(--cop-brand-lo) 0%, var(--cop-brand-hi) 100%);
    --cop-cta-hi: radial-gradient(167.31% 100% at 50.4273% 23.6111%,
        #6f4bff 0%, #c091ff 100%);

    /* paleta por defecto de magicui/dia-text-reveal */
    --dia-1: #c679c4;
    --dia-2: #fa3d1d;
    --dia-3: #ffb005;
    --dia-4: #e1e1fe;
    --dia-5: #0358f7;

    /* paleta por defecto de magicui/aurora-text */
    --aurora-1: #ff0080;
    --aurora-2: #7928ca;
    --aurora-3: #0070f3;
    --aurora-4: #38bdf8;

    --cop-accent: #7fd1ff;
    --cop-accent-soft: rgba(127, 209, 255, .12);
    --cop-warn: #ffb968;
    --cop-danger: #ff7a6b;
    --cop-ok: #5fed83;

    --cop-ease-title: cubic-bezier(.2, .4, .2, 1);
    --cop-ease-quart: cubic-bezier(.165, .84, .44, 1);
    --cop-ease-out: cubic-bezier(.12, .62, .12, .95);
    --cop-ease-in: cubic-bezier(.54, .12, .76, .42);
    --cop-ease-inout: cubic-bezier(.5, .16, .1, 1);

    --cop-ease: var(--cop-ease-title);
    --cop-dur: .8s;
    --cop-distance: 24px;
    --cop-stagger: .1s;

    --cop-maxw: 1280px;
    --cop-radius: 24px;

    position: relative;
    display: block;

    width: auto;
    min-width: 0;
    align-self: stretch;

    background: var(--cop-canvas);
    color: var(--cop-text);
    font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;

    overflow: clip visible;
    scroll-margin-top: 96px;
}

#copilot *,
#copilot *::before,
#copilot *::after { box-sizing: border-box; }

/* Enlace con la seccion de features: el halo de la seccion asoma por encima
   del borde superior, para que una seccion entre en la otra en vez de
   empezar de golpe. */
#copilot::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: -220px;
    width: min(1500px, 130%);
    height: 440px;
    transform: translateX(-50%);
    pointer-events: none;

    background:
        radial-gradient(52% 68% at 50% 100%, rgba(96, 55, 255, .2), rgba(96, 55, 255, 0) 72%),
        radial-gradient(70% 46% at 50% 100%, rgba(155, 98, 255, .1), rgba(155, 98, 255, 0) 76%);
    filter: blur(36px);
}

[data-cop-reveal="title"] > * {
    opacity: 0;
    transform: translateY(var(--cop-distance));
    transition-property: opacity, transform;
    transition-duration: var(--cop-dur);
    transition-timing-function: var(--cop-ease-title);
}

[data-cop-reveal="title"].is-visible > * { opacity: 1; transform: none; }

[data-cop-reveal="title"] > h2 { transition-delay: calc(var(--cop-stagger) * 1 + var(--cop-base-delay, 0s)); }
[data-cop-reveal="title"] > p  { transition-delay: calc(var(--cop-stagger) * 2 + var(--cop-base-delay, 0s)); }
[data-cop-reveal="title"] > div,
[data-cop-reveal="title"] > .cop-actions { transition-delay: calc(var(--cop-stagger) * 4 + var(--cop-base-delay, 0s)); }

[data-cop-reveal="title"] > .cop-mascot-wrap,
[data-cop-reveal="title"] > .cop-section__mascot {
    transform: translateY(40px) scale(.94);
    transition-duration: 1s;
    transition-timing-function: var(--cop-ease-quart);
    transition-delay: 0s;
}

/* La mascota va por delante del titulo y entra con su propio disparo: el del
   titulo espera a que el texto suba hasta dos tercios de la ventana, y hasta
   entonces aqui quedaria un hueco vacio en mitad de la pantalla. */
[data-cop-reveal="title"].is-visible > .cop-mascot-wrap,
[data-cop-reveal="title"].is-visible > .cop-section__mascot,
[data-cop-reveal="title"].is-mascot-in > .cop-mascot-wrap,
[data-cop-reveal="title"].is-mascot-in > .cop-section__mascot {
    opacity: 1;
    transform: translateY(0) scale(1);
}

[data-cop-reveal="panel"] {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity .8s var(--cop-ease-quart) .1s,
                transform .8s var(--cop-ease-quart) .1s;
}

[data-cop-reveal="panel"].is-visible { opacity: 1; transform: none; }

[data-cop-reveal="panel"] .cop-panel__aura {
    opacity: 0;
    transition: opacity 6s var(--cop-ease-quart) 1.2s;
}

[data-cop-reveal="panel"].is-visible .cop-panel__aura { opacity: 1; }

[data-cop-reveal="rows"] > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .3s var(--cop-ease-quart),
                transform .3s var(--cop-ease-quart);
}

[data-cop-reveal="rows"].is-visible > * { opacity: 1; transform: none; }

[data-cop-reveal="rows"] > *:nth-child(2) { transition-delay: .1s; }
[data-cop-reveal="rows"] > *:nth-child(3) { transition-delay: .2s; }
[data-cop-reveal="rows"] > *:nth-child(4) { transition-delay: .3s; }
[data-cop-reveal="rows"] > *:nth-child(5) { transition-delay: .4s; }

[data-cop-reveal="grid"] > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s var(--cop-ease-out),
                transform .6s var(--cop-ease-out);
    transition-delay: calc(var(--cop-i, 0) * 75ms);
}

[data-cop-reveal="grid"].is-visible > * { opacity: 1; transform: none; }

.cop-glow {
    position: absolute;
    z-index: -1;
    width: 100%;
    top: 0;
    left: 0;
    pointer-events: none;

    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 320px);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 320px);
}

.cop-glow__light {
    position: absolute;
    left: 20%;
    width: 60%;
    padding: 30% 0;

    background: radial-gradient(circle at 0 100%,
        rgba(229, 156, 255, .3) 10%,
        rgba(96, 55, 255, .26) 20%,
        rgba(96, 55, 255, 0) 60%);
    filter: blur(40px);
    transform: translateY(-70%) rotate(-45deg);
}

.cop-glow--deep .cop-glow__light {
    left: 35%;
    background: radial-gradient(circle at 0 100%,
        rgba(229, 156, 255, .28) 20%,
        rgba(96, 55, 255, .24) 40%,
        rgba(96, 55, 255, 0) 50%);
    filter: blur(50px);
}

.cop-glow-round {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 10%;
    width: 80%;
    height: 60%;
    border-radius: 50%;
    background: radial-gradient(rgba(178, 122, 255, .5) 30%, rgba(96, 55, 255, .26));
    filter: blur(60px);
    opacity: .32;
    pointer-events: none;
}

.cop-intro {
    position: relative;

    background: linear-gradient(to bottom,
        rgba(3, 1, 22, 0) 0%,
        rgba(10, 7, 32, .4) 26%,
        rgba(18, 7, 60, .42) 50%,
        rgba(10, 6, 32, .3) 78%,
        rgba(10, 6, 32, 0) 100%);
    clip-path: inset(0);
    overflow: hidden;
    padding-top: 96px;
}

/* Empalme con la seccion de features: el lienzo del body ya viene bajando del
   gris neutro al azul, asi que aca solo se acompana con una capa translucida.
   Un color opaco arriba cortaba ese degradado con una linea dura. */
.cop-intro::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 420px;
    background: linear-gradient(to bottom,
        rgba(3, 1, 22, 0) 0%,
        rgba(6, 3, 26, .45) 34%,
        rgba(3, 1, 22, .55) 70%,
        rgba(3, 1, 22, 0) 100%);
    pointer-events: none;
    z-index: 0;
}

.cop-intro__sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .04) 58%,
        rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.cop-intro__inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin-inline: auto;
    padding-inline: 24px;
    text-align: center;
}

/* Dia Text Reveal (magicui) portado a CSS.
   El componente recalcula el gradiente frame a frame, pero el patron es fijo
   -- [color de texto][banda de 34%][transparente] -- y solo se traslada, asi
   que equivale a un gradiente de 234% de ancho moviendose de 100% a 0%.
   Stops: banda de 2x17% arrancando en 100/234 = 42.735%, un color cada
   8.5/234 = 3.632%. Easing: easeInOutCubic del original. */
.cop-h1,
.cop-section__intro h2,
.cop-outro h2 {
    background-image: linear-gradient(90deg,
        var(--cop-heading) 0%,
        var(--cop-heading) 42.735%,
        var(--dia-1) 42.735%,
        var(--dia-2) 46.368%,
        var(--dia-3) 50%,
        var(--dia-4) 53.632%,
        var(--dia-5) 57.265%,
        transparent 57.265%,
        transparent 100%);
    background-size: 234% 100%;
    background-repeat: no-repeat;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@keyframes cop-dia-sweep {
    from { background-position: 100% 0; }
    to   { background-position: 0% 0; }
}

[data-cop-reveal="title"].is-visible h2 {
    animation: cop-dia-sweep 1.5s cubic-bezier(.65, 0, .35, 1)
        calc(var(--cop-stagger) * 1 + var(--cop-base-delay, 0s)) both;
}

.cop-h1 {
    margin: 0;
    font-family: var(--font-esbuild), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 64px;
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -.035em;
    text-wrap: balance;
}

/* Aurora Text (magicui) portado a CSS: gradiente de 135deg a doble ancho que
   se pasea por el texto. El keyframe original incluye un rotate/scale que en
   el componente queda inerte (el span es inline), asi que no se replica. */
.cop-h1 em {
    font-style: normal;

    background-image: linear-gradient(135deg,
        var(--aurora-1) 0%,
        var(--aurora-2) 25%,
        var(--aurora-3) 50%,
        var(--aurora-4) 75%,
        var(--aurora-1) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

    /* entra cuando la banda del reveal ya paso por encima */
    opacity: 0;
}

@keyframes cop-aurora {
    0%   { background-position: 0% 50%; }
    25%  { background-position: 50% 100%; }
    50%  { background-position: 100% 50%; }
    75%  { background-position: 50% 0%; }
    100% { background-position: 0% 50%; }
}

@keyframes cop-aurora-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

[data-cop-reveal="title"].is-visible .cop-h1 em {
    animation:
        cop-aurora 10s ease-in-out infinite alternate,
        cop-aurora-in .45s var(--cop-ease-out) 1.05s both;
}

.cop-lede {
    margin: 20px auto 0;
    max-width: 34em;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: .24px;
    color: var(--cop-muted);
    text-wrap: balance;
}

.cop-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}

.cop-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease-out, border-color .2s ease-out, color .2s ease-out;
}

/* Mismo CTA que el boton "Client Area" del header (.xai1futhvo-container):
   radial de --cop-brand-lo a --cop-brand-hi con borde --cop-brand. */
.cop-btn--primary {
    border-color: var(--cop-brand);
    background: var(--cop-cta);
    color: #fff;
}

.cop-btn--primary:hover {
    border-color: var(--cop-brand-hi);
    background: var(--cop-cta-hi);
    color: #fff;
}

.cop-btn--secondary {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .25);
    color: var(--cop-text);
    backdrop-filter: blur(6px);
}

.cop-btn--secondary:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .45);
}

.cop-btn svg { flex: none; transition: transform .3s var(--cop-ease); }
.cop-btn:hover svg { transform: translateX(2px); }

.cop-mascot-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.cop-mascot-wrap::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 420px;
    height: 420px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(178, 122, 255, .2) 0%, rgba(127, 209, 255, .08) 38%, rgba(127, 209, 255, 0) 68%);
    filter: blur(30px);
    animation: cop-glow-pulse 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes cop-glow-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .8; }
}

.cop-mascot {
    position: relative;
    width: 430px;
    height: 380px;
    margin-block: 24px;
    filter: drop-shadow(0 26px 52px rgba(70, 60, 190, .45));
}

.cop-mascot__canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    opacity: 0;
    transition: opacity .6s var(--cop-ease-quart);
}

.cop-mascot.is-3d .cop-mascot__canvas { opacity: 1; }
.cop-mascot.is-3d .cop-mascot__still { opacity: 0; }

.cop-mascot__still {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity .6s var(--cop-ease-quart);
    animation: cop-float-sm 5.5s ease-in-out infinite;
}

.cop-section__mascot {
    width: 75px;
    height: 75px;
    margin: 0 auto 24px;
    animation: cop-float-sm 5.5s ease-in-out infinite;
}

.cop-section__mascot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(127, 209, 255, .35));
}

@keyframes cop-float-sm {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

.cop-panel {
    --cop-panel-fade: 150px;
    --cop-panel-glass: rgba(155, 98, 255, .07);

    position: relative;
    z-index: 1;
    max-width: 1246px;
    margin: 72px auto 0;
    padding: 12px 12px 0;
    border-radius: var(--cop-radius) var(--cop-radius) 0 0;
}

/* Marco de cristal del panel. Vive en un pseudo-elemento para poder fundir su
   base contra el lienzo sin arrastrar tambien la capa de estrellas. */
.cop-panel::after {
    content: "";
    position: absolute;
    z-index: -3;
    inset: 0;
    border: 1px solid var(--cop-panel-border);
    border-bottom: 0;
    border-radius: inherit;
    background: var(--cop-panel-glass);
    backdrop-filter: blur(4px);
    pointer-events: none;

    -webkit-mask-image: linear-gradient(to bottom,
        #000 calc(100% - var(--cop-panel-fade)), rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom,
        #000 calc(100% - var(--cop-panel-fade)), rgba(0, 0, 0, 0) 100%);
}

.cop-panel--section {
    --cop-panel-glass: rgba(155, 98, 255, .045);
    /* algo menor que el aire que reserva .cop-demo abajo, para que el boton
       del CTA nunca caiga dentro del degradado */
    --cop-panel-fade: 118px;

    margin-top: 56px;
    padding: 20px 20px 0;
}

.cop-panel--section::after { border-color: rgba(155, 98, 255, .24); }

/* Campo de estrellas anclado al panel: emana desde el contenedor de la demo
   hacia afuera y se desvanece antes de llegar al resto de la seccion. */
.cop-panel__stars {
    position: absolute;
    z-index: -2;
    inset: -220px -260px -180px;
    pointer-events: none;

    background: url(../img/copilot-particles.png) center / auto repeat;
    filter: brightness(2.3);
    opacity: .9;

    -webkit-mask-image: radial-gradient(58% 62% at 50% 50%,
        #000 18%, rgba(0, 0, 0, .55) 58%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(58% 62% at 50% 50%,
        #000 18%, rgba(0, 0, 0, .55) 58%, rgba(0, 0, 0, 0) 100%);
}

.cop-panel__aura {
    position: absolute;
    z-index: -1;
    inset: -20% -6% auto;
    height: 70%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(178, 122, 255, .26), rgba(96, 55, 255, 0) 75%);
    filter: blur(50px);
    pointer-events: none;
}

.cop-panel__inner {
    border-radius: calc(var(--cop-radius) - 8px) calc(var(--cop-radius) - 8px) 0 0;
    background: #08051c;
    overflow: hidden;

    -webkit-mask-image: linear-gradient(to bottom,
        #000 calc(100% - var(--cop-panel-fade)), rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom,
        #000 calc(100% - var(--cop-panel-fade)), rgba(0, 0, 0, 0) 100%);
}

/* Estela de luz que sale del borde superior del panel hacia arriba,
   al modo del visual del hero de github.com. */
.cop-panel__beam {
    position: absolute;
    z-index: -1;
    left: 50%;
    bottom: calc(100% - 2px);
    width: min(980px, 88%);
    height: 300px;
    transform: translateX(-50%);
    pointer-events: none;
}

/* radiales anclados al borde del panel: la luz se abre hacia arriba sin dejar
   aristas (un clip-path aca se leia como un foco de teatro, no como una estela) */
.cop-panel__beam::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(26% 96% at 50% 100%,
            rgba(226, 210, 255, .34), rgba(155, 98, 255, .12) 45%, rgba(96, 55, 255, 0) 78%),
        radial-gradient(52% 58% at 50% 100%,
            rgba(127, 209, 255, .1), rgba(96, 55, 255, 0) 74%);
    filter: blur(22px);
}

.cop-panel__beam::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 56%;
    height: 3px;
    transform: translateX(-50%);
    border-radius: 3px;
    background: linear-gradient(90deg,
        rgba(178, 122, 255, 0) 0%,
        rgba(214, 190, 255, .85) 30%,
        #fff 50%,
        rgba(214, 190, 255, .85) 70%,
        rgba(178, 122, 255, 0) 100%);
    filter: blur(1px);
}

.cop-window { position: relative; }

.cop-window__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--cop-border);
    background: rgba(255, 255, 255, .02);
}

.cop-window__dots { display: flex; gap: 6px; }

.cop-window__dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2b2b52;
}

.cop-window__title {
    font-family: var(--font-mono), ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--cop-dim);
}

.cop-window__badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--cop-border);
    border-radius: 999px;
    font-family: var(--font-mono), ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cop-dim);
}

.cop-window__badge i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cop-ok);
    box-shadow: 0 0 0 3px rgba(95, 237, 131, .16);
    animation: cop-pulse 2.4s ease-in-out infinite;
}

@keyframes cop-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

.cop-window__body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px;
    /* el alto minimo evita que el panel se encoja entre escenario y escenario */
    min-height: 352px;
    text-align: left;
    transition: opacity .48s ease-out;
}

.cop-window__body.is-fading { opacity: 0; }

.cop-turn {
    display: flex;
    gap: 12px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .8s var(--cop-ease-quart), transform .8s var(--cop-ease-quart);
}

/* Cada bloque de la respuesta (texto, tabla, CTA) entra por su cuenta en vez
   de aparecer el conjunto de golpe. El retardo lo pone el JS. */
.cop-rise {
    opacity: 0;
    transform: translateY(10px);
    animation: cop-rise .8s var(--cop-ease-quart) forwards;
}

@keyframes cop-rise {
    to { opacity: 1; transform: none; }
}

.cop-turn.is-shown { opacity: 1; transform: translateY(0); }

.cop-turn__avatar {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    background: #1c1c3d;
    color: var(--cop-dim);
    overflow: hidden;
}

.cop-turn__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
    transform: scale(1.35);
}

/* Copilot va suelto, sin disco ni recorte: la imagen ya viene recortada contra
   transparencia, igual que la mascota de la seccion. La caja sigue midiendo
   28px para no descuadrar la columna de los turnos; el dibujo se sale de ella. */
.cop-turn__avatar--bot {
    background: none;
    overflow: visible;
}

.cop-turn__avatar--bot img {
    width: 36px;
    height: 36px;
    /* el max-width global de las imagenes la recortaria al ancho de la caja */
    max-width: none;
    /* el margen negativo la deja centrada sobre la caja de 28px en vez de
       desbordar solo hacia un lado */
    margin: -4px;
    object-fit: contain;
    object-position: center;
    transform: none;
    filter: drop-shadow(0 6px 14px rgba(127, 209, 255, .28));
}

.cop-turn__body {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--cop-text);
}

.cop-turn--user .cop-turn__body { font-weight: 500; }

.cop-turn__caret {
    display: inline-block;
    width: 8px;
    height: 1em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: var(--cop-accent);
    animation: cop-blink 1s steps(1) infinite;
}

.cop-turn.is-done .cop-turn__caret { display: none; }

@keyframes cop-blink {
    0%, 45%   { opacity: 1; }
    55%, 100% { opacity: 0; }
}

.cop-thinking {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono), ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--cop-dim);
}

.cop-thinking i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cop-accent);
    animation: cop-bounce 1.2s var(--cop-ease) infinite;
}

.cop-thinking i:nth-child(2) { animation-delay: .15s; }
.cop-thinking i:nth-child(3) { animation-delay: .3s; }

@keyframes cop-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .35; }
    30%           { transform: translateY(-5px); opacity: 1; }
}

.cop-section {
    position: relative;
    padding: 104px 24px 0;
    background: transparent;
}

.cop-section__intro {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
}

.cop-section__intro h2 {
    margin: 0;
    font-family: var(--font-esbuild), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.03em;
    text-wrap: balance;
}

.cop-section__intro p {
    margin: 16px auto 0;
    max-width: 32em;
    font-size: 22px;
    line-height: 1.4;
    letter-spacing: .24px;
    color: var(--cop-muted);
    text-wrap: balance;
}

.cop-toggle-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
}

.cop-toggle {
    --cop-btn-minw: 130px;
    --cop-btn-h: 40px;
    position: relative;
    display: flex;
    max-width: 100%;
    margin-inline: auto;
    /* el aire interior separa la pastilla seleccionada del borde exterior,
       como el .Toggle de github.com */
    padding: 8px;
    border: 1px solid var(--cop-toggle-border);
    border-radius: 60px;
    white-space: nowrap;
    overflow: hidden;
    transition: background-color .2s ease-out;
}

/* Indicador deslizante al modo del .Toggle-selection de github.com: un anillo
   con el borde en gradiente, sin relleno, que viaja hasta la pestana activa.
   Va en SVG porque un borde degradado no se resuelve con `border`. */
.cop-toggle__selection {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.cop-toggle__selection rect {
    transform-origin: 50%;
    transition: transform .6s var(--cop-ease-inout),
                width .6s var(--cop-ease-inout),
                height .6s var(--cop-ease-inout);
}

/* colocacion inicial y recalculos por resize: sin viaje */
.cop-toggle.is-placing .cop-toggle__selection rect { transition: none; }

.cop-toggle__btn {
    position: relative;
    min-width: var(--cop-btn-minw);
    height: var(--cop-btn-h);
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: inherit;
    background-color: transparent;
    color: var(--cop-text);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

.cop-toggle__btn:not(:last-child) { margin-right: 4px; }

.cop-toggle__btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(rgba(255, 255, 255, .12) 0%, rgba(153, 153, 153, .12) 100%);
    opacity: 0;
    transition: opacity .2s ease-out;
    pointer-events: none;
}

.cop-toggle__btn:hover::before,
.cop-toggle__btn:active::before,
.cop-toggle__btn.is-selected::before { opacity: 1; }

.cop-toggle__btn span {
    position: relative;
    display: inline-block;
}

/* Fantasma con la etiqueta ya en negrita: fija el ancho del boton al del
   estado seleccionado, para que al cambiar de pestana no se corran los
   textos ni el anillo tenga que perseguir un ancho distinto. */
.cop-toggle__btn span::after {
    content: attr(data-label);
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    font-weight: 600;
    pointer-events: none;
}

.cop-toggle__btn.is-selected {
    color: var(--cop-text);
    font-weight: 600;
}

.cop-cap-desc {
    margin: 28px auto 0;
    max-width: 40em;
    min-height: 3em;
    font-size: 17px;
    line-height: 1.55;
    color: var(--cop-muted);
    text-align: center;
    text-wrap: balance;
    transition: opacity .38s ease-out;
}

.cop-cap-desc.is-swapping { opacity: 0; }

.cop-demo-stack { position: relative; }

.cop-demo {
    display: none;
    flex-direction: column;
    gap: 12px;
    /* el extra abajo reserva la franja donde el panel se funde con el lienzo */
    padding: 22px 22px 134px;
    text-align: left;
}

.cop-demo.is-active { display: flex; }

.cop-demo > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .75s var(--cop-ease-quart), transform .75s var(--cop-ease-quart);
}

.cop-demo.is-active.is-played > * { opacity: 1; transform: none; }

.cop-demo.is-active.is-played > *:nth-child(1) { transition-delay: .08s; }
.cop-demo.is-active.is-played > *:nth-child(2) { transition-delay: .26s; }
.cop-demo.is-active.is-played > *:nth-child(3) { transition-delay: .44s; }
.cop-demo.is-active.is-played > *:nth-child(4) { transition-delay: .62s; }

.cop-demo__prompt {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 13px 15px;
    border: 1px solid var(--cop-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, .03);
    font-size: 15px;
    line-height: 1.5;
    color: var(--cop-text);
}

.cop-demo__prompt::before {
    content: "›";
    flex: none;
    font-family: var(--font-mono), ui-monospace, monospace;
    font-size: 17px;
    line-height: 1.3;
    color: var(--cop-accent);
}

/* Traza de ejecucion: una pastilla por llamada, con su icono dentro a la
   izquierda. Cada una dice en pocas palabras que hizo Copilot y, al cerrarse,
   despliega el resultado. No se enseña la consulta en si —lo que convence es
   la cadena de pasos, no su sintaxis. */
.cop-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.cop-tool {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px 5px 5px;
    border: 1px solid var(--cop-border);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 1px 2px rgba(3, 1, 22, .5);
    font-size: 13px;
    line-height: 1.4;
    color: var(--cop-dim);
    white-space: nowrap;
    transition: border-color .6s ease-out, color .6s ease-out, box-shadow .6s ease-out;
}

/* solo las que inserta el chat entran animadas; las de las demos estaticas
   ya llegan resueltas y las revela su bloque contenedor */
.cop-tool--enter {
    opacity: 0;
    transform: translateY(8px) scale(.94);
    animation: cop-pill-in .7s var(--cop-ease-quart) forwards;
}

@keyframes cop-pill-in {
    to { opacity: 1; transform: none; }
}

.cop-tool.is-done {
    border-color: rgba(155, 98, 255, .28);
    color: rgba(235, 233, 254, .88);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 1px 2px rgba(3, 1, 22, .5),
        0 0 0 3px rgba(155, 98, 255, .05);
}

.cop-tool__icon {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    color: var(--cop-dim);
    transition: background-color .6s ease-out, color .6s ease-out;
}

.cop-tool__icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* anillo de trabajo alrededor del icono mientras la llamada esta en curso */
.cop-tool__icon::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    border-top-color: var(--cop-brand-hi);
    animation: cop-spin 1s linear infinite;
    transition: opacity .35s ease-out;
}

.cop-tool.is-done .cop-tool__icon {
    background: rgba(155, 98, 255, .16);
    color: var(--cop-brand-pale);
}

.cop-tool.is-done .cop-tool__icon::after { opacity: 0; animation: none; }

@keyframes cop-spin { to { transform: rotate(360deg); } }

.cop-tool__label {
    margin-left: 9px;
    letter-spacing: -.005em;
}

/* el resultado se despliega al cerrarse la llamada; el margen viaja con el
   ancho para que la pastilla no reserve el hueco antes de tiempo */
.cop-tool__out {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 0;
    margin-left: 0;
    overflow: hidden;
    /* verde algo mas apagado que --cop-ok: a este tamano el neon canta */
    color: #7ce3a4;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    opacity: 0;
    transition:
        max-width .7s var(--cop-ease-quart),
        margin-left .7s var(--cop-ease-quart),
        opacity .5s ease-out .15s;
}

.cop-tool__out::before {
    content: "";
    flex: none;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
}

.cop-tool.is-done .cop-tool__out {
    max-width: 22ch;
    margin-left: 9px;
    opacity: 1;
}

.cop-result {
    border: 1px solid var(--cop-border);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(155, 98, 255, .045), rgba(155, 98, 255, 0) 120px),
        #07041a;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .04),
        0 8px 24px -14px rgba(3, 1, 22, .9);
    overflow: hidden;
}

.cop-result__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 15px;
    border-bottom: 1px solid var(--cop-border);
    font-family: var(--font-mono), ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cop-dim);
}

.cop-rows { display: flex; flex-direction: column; }

/* geo y traza tambien viven dentro del marco de resultado cuando responde el
   chat: ahi el borde y el fondo los pone .cop-result */
.cop-result > .cop-geo,
.cop-result > .cop-trace {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.cop-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 11px 15px;
    font-size: 14.5px;
    border-bottom: 1px solid rgba(27, 27, 67, .55);
}

.cop-row:last-child { border-bottom: 0; }

.cop-row--flagged { background: linear-gradient(90deg, rgba(255, 122, 107, .1), transparent 70%); }

.cop-row__name {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cop-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* la referencia de cada fila —lo normal para ese reseller— al lado del nombre:
   sin ella el numero de la derecha no dice si es mucho o poco */
.cop-row__name small,
.cop-geo__city small {
    font-family: var(--font-mono), ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--cop-dim);
    white-space: nowrap;
}

.cop-geo__city small { margin-left: 8px; }

.cop-row__name code,
.cop-geo__flag {
    display: inline-grid;
    place-items: center;
    flex: none;
    min-width: 30px;
    padding: 2px 6px;
    border: 1px solid var(--cop-border);
    border-radius: 4px;
    background: rgba(255, 255, 255, .04);
    font-family: var(--font-mono), ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1.4;
    color: var(--cop-dim);
}

.cop-row--flagged .cop-row__name code,
.cop-geo__item--flagged .cop-geo__flag {
    border-color: rgba(255, 122, 107, .35);
    background: rgba(255, 122, 107, .1);
    color: var(--cop-danger);
}

.cop-row__bar {
    width: 130px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    overflow: hidden;
}

.cop-row__bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cop-brand-lo), var(--cop-accent));
    transform-origin: 0 50%;
    transform: scaleX(0);
    transition: transform 1.15s var(--cop-ease-quart);
    transition-delay: var(--cop-delay, 0s);
}

.is-played .cop-row__bar i { transform: scaleX(var(--cop-val, 1)); }

.cop-row--flagged .cop-row__bar i { background: linear-gradient(90deg, #a8503d, var(--cop-danger)); }

.cop-row__val {
    font-family: var(--font-mono), ui-monospace, monospace;
    font-size: 13px;
    color: var(--cop-dim);
    text-align: right;
    min-width: 5ch;
}

.cop-row--flagged .cop-row__val { color: var(--cop-danger); }

.cop-cta-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 12px 12px 16px;
    border: 1px solid var(--cop-border);
    border-radius: 999px;
    background: rgba(127, 209, 255, .05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.cop-cta-strip__label { font-size: 13.5px; color: var(--cop-dim); }

.cop-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border: 1px solid var(--cop-brand);
    border-radius: 999px;
    background: var(--cop-cta);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease-out, border-color .2s ease-out;
}

.cop-action:hover { background: var(--cop-cta-hi); border-color: var(--cop-brand-hi); }

/* danger y applied conservan su color semantico */
.cop-action--danger {
    border-color: rgba(255, 122, 107, .35);
    background: rgba(255, 122, 107, .12);
    color: var(--cop-danger);
}

.cop-action--danger:hover { background: rgba(255, 122, 107, .22); border-color: rgba(255, 122, 107, .6); }

.cop-action.is-applied {
    border-color: rgba(95, 237, 131, .4);
    background: rgba(95, 237, 131, .14);
    color: var(--cop-ok);
}

.cop-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 122, 107, .3);
    border-radius: 10px;
    background: rgba(255, 122, 107, .07);
}

.cop-alert__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 122, 107, .14);
    color: var(--cop-danger);
}

.cop-alert__text { font-size: 14px; line-height: 1.45; color: var(--cop-text); }
.cop-alert__text b { color: var(--cop-danger); font-weight: 600; }

.cop-geo {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--cop-border);
    border-radius: 10px;
    background: #07041a;
    overflow: hidden;
}

.cop-geo__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    border-bottom: 1px solid rgba(27, 27, 67, .55);
    font-size: 14px;
}

.cop-geo__item:last-child { border-bottom: 0; }
.cop-geo__city { color: var(--cop-text); }

.cop-geo__time {
    font-family: var(--font-mono), ui-monospace, monospace;
    font-size: 12.5px;
    color: var(--cop-dim);
}

.cop-geo__item--flagged .cop-geo__time { color: var(--cop-danger); }

.cop-trace {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--cop-border);
    border-radius: 10px;
    background: #07041a;
    overflow: hidden;
}

.cop-hop {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 11px 15px;
    border-bottom: 1px solid rgba(27, 27, 67, .55);
    font-size: 14px;
}

.cop-hop:last-child { border-bottom: 0; }

.cop-hop__dot {
    justify-self: center;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cop-ok);
    box-shadow: 0 0 0 3px rgba(95, 237, 131, .14);
}

.cop-hop--fail .cop-hop__dot {
    background: var(--cop-danger);
    box-shadow: 0 0 0 3px rgba(255, 122, 107, .16);
    animation: cop-pulse 1.4s ease-in-out infinite;
}

.cop-hop--fix .cop-hop__dot {
    background: var(--cop-accent);
    box-shadow: 0 0 0 3px rgba(127, 209, 255, .16);
}

.cop-hop__name { color: var(--cop-text); }

.cop-hop__name small {
    display: block;
    font-family: var(--font-mono), ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--cop-dim);
}

.cop-hop__stat {
    font-family: var(--font-mono), ui-monospace, monospace;
    font-size: 12.5px;
    color: var(--cop-dim);
    text-align: right;
    white-space: nowrap;
}

.cop-hop--fail .cop-hop__stat { color: var(--cop-danger); }
.cop-hop--fix  .cop-hop__stat { color: var(--cop-ok); }

.cop-marquee {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 48px;
    margin-top: 96px;
    padding-block: 20px;

    border-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, .09) 22%, rgba(255, 255, 255, .09) 78%, transparent) 1;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    overflow: hidden;
    user-select: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.cop-marquee__group {
    display: flex;
    flex: none;
    align-items: center;
    gap: 48px;
    min-width: 100%;
    justify-content: space-around;
    animation: cop-scroll-x 42s linear infinite;
}

.cop-marquee:hover .cop-marquee__group,
.cop-marquee:focus-within .cop-marquee__group { animation-play-state: paused; }

@keyframes cop-scroll-x {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-100% - 48px)); }
}

.cop-marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
    font-family: var(--font-mono), ui-monospace, monospace;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    white-space: nowrap;
}

.cop-marquee__item::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: var(--cop-accent);
    opacity: .8;
}

.cop-outro {
    position: relative;
    padding: 104px 24px 112px;
    text-align: center;
    background: linear-gradient(to bottom,
        rgba(10, 6, 32, 0) 0%,
        rgba(10, 6, 32, .45) 55%,
        rgba(10, 6, 32, 0) 100%);

}

.cop-outro__inner { position: relative; z-index: 1; max-width: 720px; margin-inline: auto; }

.cop-outro h2 {
    margin: 0;
    font-family: var(--font-esbuild), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.03em;
    text-wrap: balance;
}

.cop-outro p {
    margin: 16px auto 0;
    max-width: 32em;
    font-size: 19px;
    line-height: 1.5;
    color: var(--cop-muted);
    text-wrap: balance;
}

@media (max-width: 1023px) {
    .cop-h1 { font-size: 52px; }
    .cop-lede { font-size: 20px; }
    .cop-section__intro h2, .cop-outro h2 { font-size: 34px; }
    .cop-section__intro p { font-size: 19px; }
    .cop-toggle { --cop-btn-minw: 110px; }
}

@media (max-width: 809px) {
    .cop-intro { padding-top: 72px; }
    .cop-h1 { font-size: 38px; }
    .cop-lede { font-size: 17px; margin-top: 16px; }
    .cop-actions { margin-top: 26px; }

    .cop-mascot { width: 315px; height: 280px; margin-block: 12px; }
    .cop-mascot-wrap::before { width: 280px; height: 280px; }

    .cop-panel { margin-top: 44px; padding: 8px 8px 0; border-radius: 16px 16px 0 0; }
    .cop-panel--section { padding: 10px 10px 0; }
    .cop-panel__inner { border-radius: 10px 10px 0 0; }
    .cop-panel__stars { inset: -120px -90px -100px; }

    .cop-window__body { padding: 16px; min-height: 320px; }
    .cop-demo { padding: 16px 16px 104px; }

    .cop-panel { --cop-panel-fade: 110px; }
    .cop-panel--section { --cop-panel-fade: 100px; }
    .cop-panel__beam { height: 220px; }

    .cop-section { padding-top: 72px; }
    .cop-section__intro h2, .cop-outro h2 { font-size: 27px; }
    .cop-section__intro p { font-size: 16.5px; }

    .cop-toggle-wrap { width: 100%; }
    .cop-toggle {
        --cop-btn-minw: 0;
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .cop-toggle::-webkit-scrollbar { display: none; }
    .cop-toggle__btn { flex: 1 0 auto; font-size: 14px; padding: 8px 14px; }

    .cop-cap-desc { font-size: 15.5px; margin-top: 22px; }

    .cop-row { grid-template-columns: 1fr auto; }
    .cop-row__bar { display: none; }

    /* sin la barra hay sitio de sobra en vertical: la referencia baja a su
       propia linea en vez de quedarse cortada a media palabra */
    .cop-row__name {
        display: block;
        white-space: normal;
        overflow: visible;
    }

    .cop-row__name small { display: block; }

    .cop-cta-strip { flex-direction: column; align-items: stretch; border-radius: 14px; }
    .cop-action { justify-content: center; }

    /* en pantallas estrechas una pastilla larga no cabe entera: la etiqueta
       reparte en dos lineas dentro de la pastilla en vez de salirse del panel */
    .cop-tool {
        max-width: 100%;
        font-size: 12.5px;
        white-space: normal;
    }

    /* el resultado manda: se lleva el ancho que necesita y la etiqueta se
       reparte en el que queda */
    .cop-tool__label { min-width: 0; flex: 1 1 auto; }
    .cop-tool__out { flex: none; max-width: 18ch; white-space: nowrap; }

    .cop-marquee { margin-top: 64px; }
    .cop-outro { padding: 72px 24px 80px; }
    .cop-outro p { font-size: 16.5px; }
}

@media (max-width: 479px) {
    .cop-h1 { font-size: 31px; }
    .cop-mascot { width: 265px; height: 235px; }
}

@media (prefers-reduced-motion: reduce) {
    #copilot *,
    #copilot *::before,
    #copilot *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    [data-cop-reveal] > *,
    [data-cop-reveal="panel"],
    [data-cop-reveal="panel"] .cop-panel__aura {
        opacity: 1;
        transform: none;
    }
    .cop-turn { opacity: 1; transform: none; }
    .cop-demo > * { opacity: 1; transform: none; }
    .cop-rise,
    .cop-tool--enter { opacity: 1; transform: none; }
    .cop-tool__icon::after { display: none; }
    .cop-mascot__still, .cop-section__mascot { animation: none; }

    /* sin barrido ni aurora: los titulos quedan en su color final */
    .cop-h1,
    .cop-section__intro h2,
    .cop-outro h2 { background-position: 0 0; }

    .cop-h1 em {
        background-image: none;
        -webkit-text-fill-color: var(--cop-brand-hi);
        color: var(--cop-brand-hi);
        opacity: 1;
    }
}