/* Tecno — Universal Tone: una foto, todos los tonos de piel.
   Una foto de grupo con cinco personas de piel distinta. Con una sola exposición, pensada para la piel más clara,
   las demás se apagan. --q (0 → 1) es el avance: en escritorio, el de la portada fijada (--p); en móvil, una
   animación que se reproduce sola. En 0,45 se pasa a Universal Tone y, de 0,5 a 0,7, cada cara se reconoce (su
   recuadro) y su tono se ajusta por separado. */

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

/* Caras ajustadas, para el contador */
@property --faces {
    syntax: '<integer>';
    inherits: true;
    initial-value: 0;
}

.cv--tecno {
    --q: var(--p);
    /* Cambio de modo a Universal Tone */
    --ut: clamp(0, (var(--q) - 0.44) / 0.03, 1);
    --faces: calc(
        clamp(0, (var(--q) - 0.5) * 100000, 1) + clamp(0, (var(--q) - 0.55) * 100000, 1) +
        clamp(0, (var(--q) - 0.6) * 100000, 1) + clamp(0, (var(--q) - 0.65) * 100000, 1) +
        clamp(0, (var(--q) - 0.7) * 100000, 1)
    );
    --te-ink: #f6ebe1;
    --te-muted: rgba(246, 235, 225, 0.66);
    --te-copper: #e0b088;
    --te-blue: #4da3ff;
    --te-night: #14110f;
    --cv-bg: var(--te-night);
    --cv-ink: var(--te-ink);
    --cv-muted: var(--te-muted);
    --cv-hint: var(--te-muted);
    --cv-accent: var(--te-copper);
    --cv-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
    --cv-font-body: 'Be Vietnam Pro', system-ui, sans-serif;
    color: var(--te-ink);
    background:
        radial-gradient(70% 80% at 70% 45%, rgba(224, 176, 136, 0.16), rgba(224, 176, 136, 0) 70%),
        var(--te-night);
}

.cv--tecno ::selection {
    color: var(--te-night);
    background: var(--te-copper);
}

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

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

.cv-te-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(32px, 5vw, 80px);
}

/* —— Nombre y promesa —— */
.cv-te-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.cv-te-kicker {
    margin: 0;
    font-size: clamp(0.78rem, 0.9vw, 0.88rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--te-copper);
}

.cv--tecno .cv__title {
    margin-top: 6px;
    font-size: clamp(3.8rem, min(9vw, 17vh), 8rem);
    font-weight: 800;
    line-height: 0.88;
    letter-spacing: -0.03em;
}

.cv--tecno .cv-ch {
    animation: cv-te-letter 0.8s var(--cv-ease) both;
    animation-delay: calc((var(--d) + var(--i) * var(--step)) * 1ms);
}

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

.cv-te-line {
    margin: clamp(12px, 2vh, 20px) 0 0;
    max-width: 16ch;
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-size: clamp(1.5rem, 2.5vw, 2.3rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.cv--tecno .cv__lead {
    max-width: 40ch;
    margin-top: 12px;
    font-size: clamp(0.98rem, 1.15vw, 1.08rem);
    font-weight: 400;
    color: rgba(246, 235, 225, 0.8);
}

.cv-te-facts {
    margin-top: clamp(16px, 3vh, 28px);
}

.cv--tecno .cv__meta {
    margin: 0;
}

.cv--tecno .cv__stats strong {
    color: var(--te-ink);
}

/* —— La foto —— */
.cv-te-photo {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: radial-gradient(90% 90% at 50% 30%, #4a3c32 0%, #2b221c 60%, #1d1713 100%);
    border: 1px solid rgba(246, 235, 225, 0.14);
    border-radius: 14px;
}

/* Barra de la cámara encima de la imagen: así no tapa las cabezas cuando la foto se hace pequeña */
.cv-te-hud {
    display: flex;
    padding: 12px 14px 0;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    font-size: clamp(0.72rem, 0.82vw, 0.8rem);
    font-weight: 600;
}

/* Modo de la cámara: una exposición para todos o Universal Tone */
.cv-te-modes {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 999px;
}

.cv-te-mode {
    padding: 0.35em 0.8em;
    border-radius: 999px;
}

.cv-te-mode--one {
    color: color-mix(in srgb, var(--te-muted) calc(var(--ut) * 100%), var(--te-night));
    background: color-mix(in srgb, transparent calc(var(--ut) * 100%), var(--te-ink));
}

.cv-te-mode--ut {
    color: color-mix(in srgb, #ffffff calc(var(--ut) * 100%), var(--te-muted));
    background: color-mix(in srgb, var(--te-blue) calc(var(--ut) * 100%), transparent);
}

.cv-te-count {
    padding: 0.35em 0.8em;
    color: var(--te-muted);
    background: rgba(0, 0, 0, 0.35);
    border-radius: 999px;
}

.cv-te-faces {
    color: var(--te-ink);
    font-variant-numeric: tabular-nums;
}

.cv-te-faces::before {
    counter-reset: faces var(--faces);
    content: counter(faces);
}

.cv-te-svg {
    display: block;
    width: 100%;
    height: auto;
}

.cv-te-floor {
    fill: rgba(0, 0, 0, 0.22);
}

/* Cada persona: apagada con la exposición única y con su tono justo al reconocerse su cara */
.cv-te-person {
    --fix: clamp(0, (var(--q) - var(--t)) / 0.03, 1);
    filter: brightness(calc(var(--dim) + (1 - var(--dim)) * var(--fix)));
}

.cv-te-shine {
    fill: #ffffff;
    opacity: 0.14;
}

/* Recuadro de cara: aparece entero cuando le toca */
.cv-te-box {
    fill: none;
    stroke: var(--te-blue);
    stroke-width: 2.5;
    opacity: clamp(0, (var(--q) - var(--t)) * 100000, 1);
}

/* —— Móvil: la foto se ajusta sola —— */
@media (max-width: 900px) {
    .cv--tecno {
        --q: 0;
        animation: cv-te-run 6s linear 1.6s both;
    }

    .cv-te-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .cv--tecno .cv__title {
        font-size: clamp(3.2rem, 17vw, 4.8rem);
    }

    .cv-te-line {
        max-width: none;
        font-size: clamp(1.3rem, 6vw, 1.7rem);
    }

    .cv--tecno .cv__lead {
        font-size: 0.95rem;
    }

    .cv-te-facts {
        margin-top: 12px;
    }

    .cv-te-hud {
        padding: 8px 8px 0;
        font-size: 0.68rem;
    }
}

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

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

    /* Directamente la foto ajustada */
    .cv--tecno {
        --q: 1;
    }
}