/* realme — «nadie había llegado tan rápido a 100 millones de móviles».
   Strategy Analytics (2021): realme llegó a los 100 millones en 37 meses; Xiaomi, en 41; Apple, en 44. Una
   contrarreloj sobre un marcador negro: el reloj de meses avanza con --q (0 → 1; en escritorio, el de la portada
   fijada, --p; en móvil, una animación que se reproduce sola) y cada barra crece con él hasta pararse en su mes. */

@property --q {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

/* Mes del reloj, entero */
@property --mo {
    syntax: '<integer>';
    inherits: true;
    initial-value: 0;
}

.cv--realme {
    --q: var(--p);
    /* El reloj corre de 0 a 44 meses entre 0,06 y 0,86 de avance */
    --t: calc(clamp(0, (var(--q) - 0.06) / 0.8, 1) * 44);
    --mo: calc(var(--t) - 0.5);
    --rm-yellow: #ffc915;
    --rm-ink: #111111;
    --cv-bg: #ffffff;
    --cv-ink: var(--rm-ink);
    --cv-muted: #5c5c5c;
    --cv-hint: #5c5c5c;
    --cv-accent: var(--rm-ink);
    --cv-font-display: 'Unbounded', system-ui, sans-serif;
    --cv-font-body: 'Lexend', system-ui, sans-serif;
    color: var(--rm-ink);
    background: #ffffff;
}

.cv--realme ::selection {
    color: var(--rm-ink);
    background: var(--rm-yellow);
}

/* La portada no se desvanece al bajar: el marcador final se lee con todo el texto */
.cv--realme .cv__stage {
    width: min(1180px, 100%);
    justify-items: stretch;
    text-align: left;
}

.cv--realme .cv__copy {
    width: 100%;
    align-items: stretch;
    opacity: 1;
    transform: none;
}

/* —— Cabecera: nombre y récord —— */
.cv-rm-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: end;
    gap: 14px clamp(28px, 5vw, 72px);
    width: min(100%, 1060px);
    margin: 0 auto;
}

.cv-rm-kicker {
    display: inline-block;
    margin: 0;
    padding: 0.36em 0.8em;
    font-size: clamp(0.74rem, 0.85vw, 0.84rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--rm-yellow);
    border-radius: 999px;
}

.cv--realme .cv__title {
    margin-top: clamp(8px, 1.4vh, 14px);
    font-size: clamp(3.2rem, min(7vw, 13vh), 6.4rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.04em;
}

/* Las letras entran de un salto */
.cv--realme .cv-ch {
    animation: cv-rm-letter 0.8s var(--cv-spring) both;
    animation-delay: calc((var(--d) + var(--i) * var(--step)) * 1ms);
}

@keyframes cv-rm-letter {
    from {
        opacity: 0;
        transform: translate3d(0, 0.5em, 0);
    }
}

.cv-rm-line {
    margin: 0;
    font-size: clamp(1.4rem, 2.3vw, 2.1rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.cv--realme .cv__lead {
    max-width: 46ch;
    margin-top: clamp(8px, 1.2vh, 12px);
    font-size: clamp(0.98rem, 1.15vw, 1.08rem);
    font-weight: 400;
    color: #333333;
}

/* —— El marcador —— */
.cv-rm-board {
    --name-w: clamp(84px, 9vw, 124px);
    --ruler-h: 30px;
    width: min(100%, 1060px);
    margin: clamp(18px, 3vh, 32px) auto 0;
    padding: clamp(16px, 2.2vw, 26px) clamp(18px, 2.6vw, 32px) clamp(12px, 1.6vw, 18px);
    color: #ffffff;
    background: var(--rm-ink);
    border-radius: clamp(16px, 2vw, 24px);
}

.cv-rm-cap {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 clamp(8px, 1.4vh, 14px);
    font-size: clamp(0.72rem, 0.85vw, 0.84rem);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.cv-rm-clock {
    white-space: nowrap;
    color: #ffffff;
}

.cv-rm-clock b {
    display: inline-block;
    min-width: 2ch;
    font-family: 'Unbounded', system-ui, sans-serif;
    font-size: 1.5em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    text-align: right;
    color: var(--rm-yellow);
}

.cv-rm-mo::before {
    counter-reset: mo var(--mo);
    content: counter(mo);
}

.cv-rm-field {
    position: relative;
}

.cv-rm-lanes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cv-rm-lane {
    display: grid;
    grid-template-columns: var(--name-w) minmax(0, 1fr);
    align-items: center;
    height: clamp(46px, 7vh, 64px);
    border-top: 1px dashed rgba(255, 255, 255, 0.2);
}

.cv-rm-lane:last-child {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
}

.cv-rm-name {
    font-family: 'Unbounded', system-ui, sans-serif;
    font-size: clamp(0.82rem, 1.15vw, 1.05rem);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
}

.cv-rm-lane--me .cv-rm-name {
    font-weight: 800;
    color: var(--rm-yellow);
}

/* Las barras van por encima de la línea del récord: no tapa los tiempos de Xiaomi y Apple */
.cv-rm-track {
    position: relative;
    z-index: 1;
    height: 60%;
}

/* Cada barra crece con el reloj y se para en su mes */
.cv-rm-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(min(var(--t), var(--m)) / 48 * 100%);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    color: #ffffff;
    background: #4a4a4a;
    border-radius: 999px;
}

.cv-rm-lane--me .cv-rm-bar {
    color: var(--rm-ink);
    background: var(--rm-yellow);
}

/* El tiempo de cada marca aparece entero al llegar */
.cv-rm-time {
    padding-right: 0.9em;
    font-size: clamp(0.78rem, 1vw, 0.95rem);
    font-weight: 500;
    white-space: nowrap;
    opacity: clamp(0, (var(--t) - var(--m)) * 1000 + 1, 1);
}

.cv-rm-time b {
    font-family: 'Unbounded', system-ui, sans-serif;
    font-size: 1.2em;
    font-weight: 800;
}

/* Línea del récord: baja por las tres calles cuando llega realme */
.cv-rm-record {
    position: absolute;
    top: 0;
    bottom: var(--ruler-h);
    left: calc(var(--name-w) + (100% - var(--name-w)) * var(--x) / 48);
    border-left: 2px dashed var(--rm-yellow);
    transform-origin: 50% 0;
    transform: scaleY(clamp(0, (var(--t) - var(--x)) / 1.5, 1));
}

/* Regla de meses: una marca cada 6 y el número cada 12 */
.cv-rm-ruler {
    position: relative;
    display: block;
    height: var(--ruler-h);
    margin-left: var(--name-w);
}

.cv-rm-tick {
    position: absolute;
    top: 0;
    left: calc(var(--x) / 48 * 100%);
    width: 1px;
    height: 6px;
    background: rgba(255, 255, 255, 0.35);
}

.cv-rm-tick--major {
    height: 10px;
    background: rgba(255, 255, 255, 0.6);
}

.cv-rm-tick em {
    position: absolute;
    top: 12px;
    left: 0;
    font-size: 0.72rem;
    font-style: normal;
    color: rgba(255, 255, 255, 0.6);
    transform: translateX(-50%);
}

.cv-rm-src {
    margin: 4px 0 0;
    font-size: 0.72rem;
    text-align: right;
    color: rgba(255, 255, 255, 0.5);
}

/* —— Pie —— */
.cv-rm-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 24px;
    width: min(100%, 1060px);
    margin: clamp(12px, 2vh, 20px) auto 0;
}

.cv--realme .cv__meta,
.cv--realme .cv__stats {
    margin: 0;
}

/* —— Móvil: el reloj corre solo —— */
@media (max-width: 900px) {
    .cv--realme {
        --q: 0;
        animation: cv-rm-run 7s linear 1.6s both;
    }

    .cv-rm-head {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .cv--realme .cv__title {
        font-size: clamp(2.8rem, 15vw, 4.4rem);
    }

    .cv-rm-line {
        font-size: clamp(1.3rem, 6vw, 1.7rem);
    }

    .cv-rm-board {
        --name-w: 66px;
        --ruler-h: 26px;
        padding: 14px 14px 10px;
        border-radius: 16px;
    }

    .cv-rm-lane {
        height: 44px;
    }

    .cv-rm-name {
        font-size: 0.74rem;
    }

    .cv-rm-foot {
        flex-direction: column;
        align-items: flex-start;
    }
}

@keyframes cv-rm-run {
    from { --q: 0; }
    to { --q: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .cv--realme,
    .cv--realme .cv-ch {
        animation: none;
    }

    /* Directamente el marcador final */
    .cv--realme {
        --q: 1;
    }
}