/* vivo — el módulo de cámara ZEISS: anillo grabado, diafragmas que se abren y visor que enfoca */

@property --cv-ap {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 30%;
}

@property --cv-rot {
    syntax: '<angle>';
    inherits: false;
    initial-value: 40deg;
}

.cv--vivo {
    --cv-bg: #eef0f5;
    --cv-ink: #11131b;
    --cv-muted: #5b6072;
    --cv-accent: #415fff;
    --cv-blue: #415fff;
    --cv-font-display: 'DM Sans', system-ui, sans-serif;
    --cv-font-body: 'DM Sans', system-ui, sans-serif;
    --cv-cta-bg: #415fff;
    --cv-cta-ink: #fff;
    --cv-cta-radius: 999px;
    --cv-cta-shadow-hover: 0 14px 30px -12px rgba(65, 95, 255, 0.65);
    background: linear-gradient(165deg, #f5f6f9 0%, #e6e9f0 100%);
}

/* —— Fondo: bokeh desenfocado —— */
.cv-vv-bokeh {
    border-radius: 50%;
    filter: blur(28px);
    animation: cv-vv-drift 18s ease-in-out infinite alternate;
}

.cv-vv-bokeh--1 {
    right: 4%;
    top: 6%;
    width: 30vw;
    height: 30vw;
    background: radial-gradient(closest-side, rgba(65, 95, 255, 0.28), transparent);
}

.cv-vv-bokeh--2 {
    right: 30%;
    bottom: -14%;
    width: 26vw;
    height: 26vw;
    background: radial-gradient(closest-side, rgba(150, 110, 255, 0.22), transparent);
    animation-duration: 22s;
}

.cv-vv-bokeh--3 {
    left: -6%;
    top: 20%;
    width: 22vw;
    height: 22vw;
    background: radial-gradient(closest-side, rgba(70, 200, 255, 0.18), transparent);
    animation-direction: alternate-reverse;
}

@keyframes cv-vv-drift {
    to { transform: translate3d(-4vw, 3vh, 0) scale(1.15); }
}

/* —— Módulo —— */
.cv--vivo .cv__art-in {
    --m: clamp(210px, min(31vw, 54vh), 470px);
    gap: clamp(14px, 2.4vh, 24px);
    transform: scale(calc(1 + var(--p) * 0.12));
}

.cv-vv-module {
    position: relative;
    display: block;
    width: var(--m);
    height: var(--m);
    border-radius: 50%;
    background:
        conic-gradient(from 210deg, #ebe6dc, #b8af9f, #f7f3ec, #a69c8b, #efe9df, #c9c1b2, #ebe6dc);
    box-shadow:
        0 40px 70px -34px rgba(20, 24, 40, 0.55),
        0 0 0 1px rgba(0, 0, 0, 0.06),
        inset 0 2px 3px rgba(255, 255, 255, 0.8),
        inset 0 -3px 6px rgba(0, 0, 0, 0.18);
    rotate: calc(var(--p) * 32deg);
    animation: cv-vv-in 1.4s var(--cv-ease) 0.1s both;
}

@keyframes cv-vv-in {
    from {
        opacity: 0;
        transform: scale(0.8) rotate(-40deg);
    }
}

.cv-vv-engrave {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: cv-spin 70s linear infinite;
}

.cv-vv-engrave text {
    font-family: 'DM Sans', sans-serif;
    font-size: 9.6px;
    font-weight: 700;
    fill: #6f6656;
    opacity: 0.85;
}

.cv-vv-glass {
    position: absolute;
    inset: 12.5%;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #2b303d 0%, #0d0f15 58%, #050608 100%);
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.6), inset 0 8px 18px rgba(255, 255, 255, 0.06);
}

.cv-vv-lens {
    position: absolute;
    width: 34%;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 42% 38%, #6b7cff 0 5%, #24296b 16%, #0b0c1c 38%, #050509 60%),
        #050509;
    box-shadow:
        0 0 0 3px #1c1f27,
        0 0 0 5px #3b3f4a,
        0 0 0 6px #121419,
        0 6px 14px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    animation: cv-pop 0.9s var(--cv-ease) both;
}

.cv-vv-lens--a { left: 13%; top: 16%; animation-delay: 0.7s; }
.cv-vv-lens--b { right: 13%; top: 16%; animation-delay: 0.82s; }
.cv-vv-lens--c { left: 33%; bottom: 10%; animation-delay: 0.94s; }

/* Diafragma: láminas (conic) con un agujero que se abre */
.cv-vv-iris {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-conic-gradient(from var(--cv-rot), #1b1d24 0deg 44deg, #2d303a 44deg 51.4deg);
    -webkit-mask: radial-gradient(circle, transparent var(--cv-ap), #000 calc(var(--cv-ap) + 0.6px));
    mask: radial-gradient(circle, transparent var(--cv-ap), #000 calc(var(--cv-ap) + 0.6px));
    animation: cv-vv-iris 1.8s var(--cv-ease) 1.1s both;
}

.cv-vv-lens--b .cv-vv-iris { animation-delay: 1.25s; }
.cv-vv-lens--c .cv-vv-iris { animation-delay: 1.4s; }

@keyframes cv-vv-iris {
    from {
        --cv-ap: 0%;
        --cv-rot: -30deg;
    }
}

.cv-vv-glint {
    position: absolute;
    left: 20%;
    top: 14%;
    width: 34%;
    height: 18%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.7), transparent);
    transform: rotate(-30deg);
}

.cv-vv-flash {
    position: absolute;
    right: 20%;
    bottom: 22%;
    width: 7%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #fff6d8, #c9b98c 60%, #6c6450);
    box-shadow: 0 0 0 2px #2a2c33;
}

.cv-vv-zeiss {
    position: absolute;
    left: 14%;
    bottom: 26%;
    padding: 2px 6px;
    font-family: 'DM Sans', sans-serif;
    font-size: calc(var(--m) * 0.034);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #fff;
    background: #1d3fbb;
    border-radius: 2px;
}

.cv-vv-tstar {
    position: absolute;
    left: 18%;
    bottom: 18%;
    font-family: 'DM Sans', sans-serif;
    font-size: calc(var(--m) * 0.038);
    font-weight: 700;
    color: #e2232a;
}

/* Visor: esquinas que enfocan */
.cv-vv-focus {
    position: absolute;
    left: 50%;
    top: calc(var(--m) / 2);
    width: calc(var(--m) * 1.18);
    height: calc(var(--m) * 1.18);
    transform: translate(-50%, -50%);
    animation: cv-vv-focus 1.4s var(--cv-ease) 1.6s both, cv-vv-hunt 4s ease-in-out 3s infinite;
}

.cv-vv-focus i {
    position: absolute;
    width: 14%;
    height: 14%;
    border: 0 solid color-mix(in srgb, var(--cv-blue) calc(40% + var(--p) * 60%), #11131b);
}

.cv-vv-focus i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }
.cv-vv-focus i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.cv-vv-focus i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; }
.cv-vv-focus i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }

@keyframes cv-vv-focus {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.3);
    }
}

@keyframes cv-vv-hunt {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(0.97); }
}

.cv-vv-readout {
    display: flex;
    gap: 14px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--cv-muted);
    animation: cv-fade 1s ease 2s both;
}

.cv-vv-readout .is-rec {
    color: var(--cv-ink);
}

.cv-vv-readout .is-rec::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: #e2232a;
    vertical-align: 1px;
    animation: cv-pulse 1.2s ease-in-out infinite;
}

/* —— Texto —— */
.cv--vivo .cv__kicker {
    color: var(--cv-blue);
    letter-spacing: 0.5em;
}

.cv--vivo .cv__title {
    font-size: clamp(4.4rem, min(11.5vw, 19vh), 10rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.88;
}

.cv--vivo .cv-ch {
    animation: cv-focus 1.1s var(--cv-ease) both;
    animation-delay: calc((var(--d) + var(--i) * var(--step)) * 1ms);
}

@media (max-width: 900px) {
    .cv--vivo .cv__art-in {
        --m: clamp(170px, min(52vw, 26vh), 240px);
        gap: 10px;
    }

    .cv-vv-readout {
        font-size: 0.68rem;
        gap: 10px;
    }

    .cv--vivo .cv__title {
        font-size: clamp(3.6rem, 20vw, 5.4rem);
    }
}