/* ============================================================
   NUVVIA STORE — Design System 2026 × iPhone
   poch.studio × Nuvvia × Apple aesthetic
   Paleta oficial: iris (#5856D6), mint (#3DDBA0), oscuros.
   Tipografía: Space Grotesk / Grotesk (sin modificar).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* ── TOKENS DE DISEÑO ─────────────────────────────────────── */
:root {
    /* Paleta Nuvvia oficial */
    --iris: #5856D6;
    --iris-dark: #4845B5;
    --iris-light: #7B79E8;
    --mint: #3DDBA0;
    --mint-dark: #2AB888;
    --lavender: #E5DFFF;

    /* Fondos — escala de azul-violeta oscuro */
    --bg-0: #080812;
    /* más oscuro posible */
    --bg-1: #0E0E1A;
    /* base */
    --bg-2: #13131F;
    /* intermedio */
    --bg-3: #181828;
    /* superficie */
    --bg-4: #1E1E30;
    /* cards */
    --bg-5: #24243C;
    /* cards hover */

    /* Transparencias */
    --glass: rgba(30, 30, 48, 0.60);
    --glass-border: rgba(88, 86, 214, 0.22);
    --glass-blur: blur(16px);

    /* Textos */
    --txt-white: #FFFFFF;
    --txt-1: #F0EEFF;
    --txt-2: #C4BCFF;
    --txt-3: rgba(196, 188, 255, 0.70);
    --txt-4: rgba(196, 188, 255, 0.45);

    /* Bordes */
    --border-1: rgba(88, 86, 214, 0.20);
    --border-2: rgba(88, 86, 214, 0.40);
    --border-3: rgba(255, 255, 255, 0.06);

    /* Sombras */
    --shadow-iris: 0 20px 60px rgba(88, 86, 214, 0.30), 0 0 0 1px rgba(88, 86, 214, 0.15);
    --shadow-deep: 0 30px 80px rgba(0, 0, 0, 0.60);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.40);

    /* Tipografía */
    --font: 'Grotesk', 'Space Grotesk', system-ui, -apple-system, sans-serif;

    /* Escala tipográfica */
    --t-xs: 0.75rem;
    --t-sm: 0.875rem;
    --t-base: 1rem;
    --t-lg: 1.125rem;
    --t-xl: 1.25rem;
    --t-2xl: 1.5rem;
    --t-3xl: 1.875rem;
    --t-4xl: 2.25rem;
    --t-5xl: clamp(2.5rem, 5vw, 3.5rem);
    --t-6xl: clamp(3rem, 7vw, 5rem);

    /* Espaciado */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;

    /* Radios */
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-2xl: 32px;
    --r-full: 9999px;

    /* Transiciones */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 200ms;
    --dur-mid: 350ms;
    --dur-slow: 600ms;
    --dur-xslow: 900ms;

    /* Layout */
    --max-w: 1200px;
    --section-py: clamp(80px, 10vw, 120px);
}

/* ── RESET ──────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: var(--font);
    background: var(--bg-1);
    color: var(--txt-1);
    line-height: 1.65;
    overflow-x: hidden;
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

button {
    cursor: pointer;
    font-family: inherit;
    border: none;
    background: none;
}

details summary {
    cursor: pointer;
    list-style: none;
}

details summary::-webkit-details-marker {
    display: none;
}

/* ── UTILIDADES ─────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

@media (min-width: 768px) {
    .container {
        padding: 0 var(--space-8);
    }
}

/* Texto gradiente iris → mint */
.nv-accent-text {
    background: linear-gradient(135deg, var(--iris-light) 0%, var(--mint) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── ANIMACIONES ON-SCROLL ─────────────────────────────────── */
.nv-anim-reveal {
    opacity: 0;
    transform: translate3d(0, 48px, -30px) scale(0.97);
    transition:
        opacity var(--dur-slow) var(--ease-out),
        transform var(--dur-slow) var(--ease-out);
    will-change: transform, opacity;
}

.nv-anim-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.nv-anim-reveal[data-delay="1"] {
    transition-delay: 100ms;
}

.nv-anim-reveal[data-delay="2"] {
    transition-delay: 200ms;
}

.nv-anim-reveal[data-delay="3"] {
    transition-delay: 300ms;
}

.nv-anim-reveal[data-delay="4"] {
    transition-delay: 400ms;
}

/* Reveal del hero — SIN .nv-js: visible. CON .nv-js: animado. */
.nv-reveal {
    opacity: 1;
    transform: none;
    transition:
        opacity var(--dur-slow) var(--ease-out),
        transform var(--dur-slow) var(--ease-out);
}

.nv-js .nv-reveal {
    opacity: 0;
    transform: translateY(30px);
}

.nv-js .nv-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.nv-js .nv-reveal[data-delay="0"] {
    transition-delay: 100ms;
}

.nv-js .nv-reveal[data-delay="1"] {
    transition-delay: 250ms;
}

.nv-js .nv-reveal[data-delay="2"] {
    transition-delay: 400ms;
}

.nv-js .nv-reveal[data-delay="3"] {
    transition-delay: 550ms;
}

.nv-js .nv-reveal[data-delay="4"] {
    transition-delay: 700ms;
}


/* ── BOTONES ─────────────────────────────────────────────────── */
.nv-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font);
    font-size: var(--t-base);
    font-weight: 600;
    padding: 13px 26px;
    border-radius: var(--r-full);
    border: 1.5px solid transparent;
    transition: all var(--dur-mid) var(--ease-out);
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.nv-btn--primary {
    background: linear-gradient(135deg, var(--iris) 0%, var(--iris-light) 100%);
    color: var(--txt-white);
    border-color: transparent;
    box-shadow: 0 4px 20px rgba(88, 86, 214, 0.40);
}

.nv-btn--primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 40px rgba(88, 86, 214, 0.55);
}

.nv-btn--ghost {
    background: transparent;
    border-color: rgba(196, 188, 255, 0.28);
    color: var(--txt-1);
}

.nv-btn--ghost:hover {
    border-color: var(--iris);
    color: var(--txt-white);
    background: rgba(88, 86, 214, 0.12);
    transform: translateY(-2px);
}

.nv-btn--lg {
    padding: 16px 36px;
    font-size: var(--t-lg);
}

.nv-btn--sm {
    padding: 9px 18px;
    font-size: var(--t-sm);
}

.nv-btn--full {
    width: 100%;
    justify-content: center;
}

/* ── SECCIÓN HEADER COMÚN ─────────────────────────────────── */
.nv-section-header {
    text-align: center;
    margin-bottom: var(--space-16);
}

.nv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--mint);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin-bottom: var(--space-4);
}

.nv-section-title {
    font-size: var(--t-5xl);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--txt-1);
    margin-bottom: var(--space-4);
}

.nv-section-sub {
    font-size: var(--t-lg);
    color: var(--txt-3);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ── ORBES DECORATIVOS ─────────────────────────────────────── */
.nv-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    animation: nv-float 10s ease-in-out infinite;
}

.nv-orb--1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(88, 86, 214, 0.30) 0%, transparent 70%);
    top: -150px;
    right: 0;
    animation-delay: 0s;
}

.nv-orb--2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(61, 219, 160, 0.14) 0%, transparent 70%);
    bottom: 0;
    left: -100px;
    animation-delay: -3s;
}

.nv-orb--3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(88, 86, 214, 0.20) 0%, transparent 70%);
    top: 40%;
    left: 20%;
    animation-delay: -6s;
}

.nv-orb--4 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(88, 86, 214, 0.18) 0%, transparent 70%);
    top: 50%;
    right: -100px;
    transform: translateY(-50%);
    animation-delay: -2s;
}

.nv-orb--5 {
    width: 700px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(88, 86, 214, 0.14) 0%, transparent 70%);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: -4s;
    border-radius: 50%;
}

.nv-orb--6 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(88, 86, 214, 0.22) 0%, transparent 70%);
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
}

.nv-orb--7 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(61, 219, 160, 0.10) 0%, transparent 70%);
    bottom: 0;
    right: 10%;
    animation-delay: -3s;
}

@keyframes nv-float {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    33% {
        transform: translateY(-24px) scale(1.04);
    }

    66% {
        transform: translateY(-10px) scale(0.97);
    }
}

/* Grid lines decorativas */
.nv-grid-lines {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(88, 86, 214, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(88, 86, 214, 0.06) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
    pointer-events: none;
}


/* =============================================================
   NAVBAR
   ============================================================= */
.nv-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: background var(--dur-mid), box-shadow var(--dur-mid);
}

.nv-header.scrolled {
    background: rgba(8, 8, 18, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 rgba(88, 86, 214, 0.15);
}

.nv-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    gap: var(--space-8);
}

/* Logo */
.nv-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.nv-logo__img {
    height: 36px;
    width: auto;
}

.nv-logo__mark {
    display: flex;
}

.nv-logo__text {
    font-size: var(--t-xl);
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--txt-white);
}

/* Links */
.nv-nav__links {
    display: none;
    align-items: center;
    gap: var(--space-8);
}

@media (min-width: 900px) {
    .nv-nav__links {
        display: flex;
    }
}

.nv-nav__link {
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--txt-2);
    transition: color var(--dur-fast);
    position: relative;
}

.nv-nav__link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--iris);
    border-radius: 2px;
    transition: width var(--dur-mid) var(--ease-out);
}

.nv-nav__link:hover,
.nv-nav__link.is-active {
    color: var(--txt-white);
}

.nv-nav__link:hover::after,
.nv-nav__link.is-active::after {
    width: 100%;
}

.nv-nav__link--cta {
    background: rgba(88, 86, 214, 0.15);
    border: 1px solid rgba(88, 86, 214, 0.35);
    color: var(--lavender);
    padding: 7px 18px;
    border-radius: var(--r-full);
}

.nv-nav__link--cta::after {
    display: none;
}

.nv-nav__link--cta:hover {
    background: var(--iris);
    border-color: var(--iris);
    color: var(--txt-white);
}

/* Acciones */
.nv-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.nv-cart-btn {
    position: relative;
    color: var(--txt-2);
    padding: var(--space-2);
    display: flex;
    transition: color var(--dur-fast);
}

.nv-cart-btn:hover {
    color: var(--txt-white);
}

.nv-cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--iris);
    color: white;
    font-size: 10px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hamburguesa */
.nv-hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: var(--space-2);
}

.nv-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--txt-2);
    border-radius: 2px;
    transition: all var(--dur-mid) var(--ease-out);
}

@media (min-width: 900px) {
    .nv-hamburger {
        display: none;
    }
}

.nv-hamburger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nv-hamburger.is-open span:nth-child(2) {
    opacity: 0;
}

.nv-hamburger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Menú mobile */
.nv-nav__links.is-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(8, 8, 18, 0.96);
    backdrop-filter: blur(20px);
    padding: var(--space-12) var(--space-8);
    gap: var(--space-8);
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.nv-nav__links.is-open .nv-nav__link {
    font-size: var(--t-2xl);
    font-weight: 600;
}


/* =============================================================
   HERO
   ============================================================= */
.nv-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--bg-0);
    padding-top: 72px;
}

.nv-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Overlay de contraste — paleta Nuvvia */
.nv-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 90% at 5% 50%,
            rgba(14, 12, 50, 0.90) 0%,
            rgba(20, 18, 64, 0.60) 45%,
            transparent 75%),
        linear-gradient(135deg,
            rgba(8, 8, 18, 0.75) 0%,
            rgba(8, 8, 18, 0.20) 60%,
            transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.nv-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    padding: var(--space-16) 0;
    align-items: center;
}

@media (min-width: 900px) {
    .nv-hero__inner {
        grid-template-columns: 1fr 1fr;
        padding: var(--space-24) 0;
    }
}

/* TAG + TÍTULO */
.nv-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--mint);
    background: rgba(61, 219, 160, 0.08);
    border: 1px solid rgba(61, 219, 160, 0.22);
    padding: 6px 14px;
    border-radius: var(--r-full);
    margin-bottom: var(--space-6);
    letter-spacing: 0.04em;
}

.nv-tag__dot {
    width: 7px;
    height: 7px;
    background: var(--mint);
    border-radius: 50%;
    animation: nv-pulse-dot 2s ease-in-out infinite;
}

@keyframes nv-pulse-dot {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

.nv-hero__title {
    font-size: var(--t-6xl);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.04em;
    color: var(--txt-white);
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
    margin-bottom: var(--space-6);
}

.nv-hero__title em {
    font-style: normal;
    background: linear-gradient(135deg, var(--iris-light), var(--mint));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nv-hero__sub {
    font-size: clamp(var(--t-base), 2vw, var(--t-lg));
    color: rgba(196, 188, 255, 0.88);
    line-height: 1.75;
    max-width: 520px;
    margin-bottom: var(--space-8);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.nv-hero__ctas {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-8);
}

.nv-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.nv-trust-pill {
    font-size: var(--t-sm);
    color: var(--txt-3);
    font-weight: 500;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 5px 12px;
    border-radius: var(--r-full);
    backdrop-filter: blur(8px);
}

/* Visual hero */
.nv-hero__visual {
    display: flex;
    justify-content: center;
    perspective: 1200px;
}

.nv-hero__scene {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nv-hero__img {
    width: 100%;
    max-width: 500px;
    border-radius: 20px;
    transform: perspective(1200px) rotateY(-6deg) rotateX(3deg);
    transition: transform var(--dur-slow) var(--ease-spring),
        box-shadow var(--dur-slow) var(--ease-out);
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.6),
        0 0 80px rgba(88, 86, 214, 0.30);
    will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
    .nv-hero__scene:hover .nv-hero__img {
        transform: perspective(1200px) rotateY(-2deg) rotateX(1deg) translateY(-10px) scale(1.03);
        box-shadow:
            0 60px 120px rgba(0, 0, 0, 0.7),
            0 0 120px rgba(88, 86, 214, 0.45);
    }
}

@media (max-width: 899px) {
    .nv-hero__img {
        transform: perspective(800px) rotateY(-3deg) rotateX(1.5deg);
        max-width: 350px;
    }
}

.nv-hero__img-glow {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(circle at 50% 80%, rgba(88, 86, 214, 0.35) 0%, transparent 60%),
        radial-gradient(circle at 80% 20%, rgba(61, 219, 160, 0.10) 0%, transparent 40%);
    pointer-events: none;
    z-index: -1;
}

.nv-hero__glow-ring {
    position: absolute;
    width: 110%;
    height: 110%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(88, 86, 214, 0.12) 0%, transparent 70%);
    filter: blur(40px);
    z-index: -1;
    animation: nv-float 8s ease-in-out infinite;
}

/* Badges flotantes */
.nv-float-badge {
    position: absolute;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--glass);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--r-lg);
    padding: var(--space-3) var(--space-4);
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--txt-1);
    box-shadow: var(--shadow-card);
    white-space: nowrap;
    animation: nv-badge-float 4s ease-in-out infinite;
}

.nv-float-badge--1 {
    bottom: 20%;
    left: -10%;
    animation-delay: 0s;
}

.nv-float-badge--2 {
    top: 15%;
    right: -10%;
    animation-delay: -2s;
}

@keyframes nv-badge-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* Scroll hint */
.nv-scroll-hint {
    position: absolute;
    bottom: var(--space-8);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    color: var(--txt-4);
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    z-index: 2;
}

.nv-scroll-hint__line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, var(--iris), transparent);
    animation: nv-scroll-line 2s ease-in-out infinite;
}

@keyframes nv-scroll-line {
    0% {
        transform: scaleY(0);
        transform-origin: top;
    }

    50% {
        transform: scaleY(1);
        transform-origin: top;
    }

    51% {
        transform: scaleY(1);
        transform-origin: bottom;
    }

    100% {
        transform: scaleY(0);
        transform-origin: bottom;
    }
}


/* =============================================================
   POR QUÉ NUVVIA
   ============================================================= */
.nv-why {
    padding: var(--section-py) 0;
    background: linear-gradient(to bottom, var(--bg-1), var(--bg-2));
}

.nv-why__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 640px) {
    .nv-why__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .nv-why__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.nv-why-card {
    background: linear-gradient(145deg, var(--bg-4), rgba(88, 86, 214, 0.06));
    border: 1px solid var(--border-3);
    border-radius: var(--r-xl);
    padding: var(--space-8);
    transition:
        border-color var(--dur-mid) var(--ease-out),
        transform var(--dur-mid) var(--ease-spring),
        box-shadow var(--dur-mid) var(--ease-out);
    position: relative;
    overflow: hidden;
}

.nv-why-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(88, 86, 214, 0.5), rgba(61, 219, 160, 0.3), transparent);
    opacity: 0;
    transition: opacity var(--dur-mid);
}

.nv-why-card:hover {
    border-color: var(--border-1);
    transform: translateY(-8px) scale(1.01);
    box-shadow: var(--shadow-iris);
}

.nv-why-card:hover::before {
    opacity: 1;
}

.nv-why-card__icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(88, 86, 214, 0.22), rgba(88, 86, 214, 0.08));
    border-radius: var(--r-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--iris-light);
    margin-bottom: var(--space-6);
    box-shadow: 0 0 20px rgba(88, 86, 214, 0.18);
}

.nv-why-card__title {
    font-size: var(--t-lg);
    font-weight: 700;
    color: var(--txt-1);
    margin-bottom: var(--space-3);
}

.nv-why-card__text {
    font-size: var(--t-sm);
    color: var(--txt-3);
    line-height: 1.7;
}


/* =============================================================
   CATÁLOGO DE IPHONES
   ============================================================= */
.nv-catalog {
    position: relative;
    padding: var(--section-py) 0;
    background: var(--bg-2);
    overflow: hidden;
}

.nv-catalog__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.nv-products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

@media (min-width: 640px) {
    .nv-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .nv-products-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Product Card */
.nv-prod-card {
    background: linear-gradient(145deg, var(--bg-4), rgba(36, 36, 60, 0.95));
    border: 1px solid var(--border-3);
    border-radius: var(--r-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition:
        border-color var(--dur-mid) var(--ease-out),
        transform var(--dur-mid) var(--ease-spring),
        box-shadow var(--dur-mid) var(--ease-out);
    position: relative;
    will-change: transform;
}

.nv-prod-card:hover {
    border-color: rgba(88, 86, 214, 0.45);
    transform: translateY(-10px) scale(1.02);
    box-shadow: var(--shadow-iris), var(--shadow-deep);
}

.nv-prod-card__img-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--bg-3);
}

.nv-prod-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}

.nv-prod-card:hover .nv-prod-card__img {
    transform: scale(1.06);
}

.nv-prod-card__img-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 90%, rgba(88, 86, 214, 0.25), transparent 60%);
    opacity: 0;
    transition: opacity var(--dur-mid);
}

.nv-prod-card:hover .nv-prod-card__img-glow {
    opacity: 1;
}

.nv-prod-card__badge {
    position: absolute;
    font-size: var(--t-xs);
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--r-full);
    letter-spacing: 0.04em;
}

.nv-prod-card__badge--sale {
    top: var(--space-3);
    left: var(--space-3);
    background: var(--mint);
    color: #0a1f14;
}

.nv-prod-card__badge--model {
    top: var(--space-3);
    right: var(--space-3);
    background: rgba(88, 86, 214, 0.80);
    color: white;
    backdrop-filter: blur(8px);
}

.nv-prod-card__body {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
}

.nv-prod-card__name {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--txt-1);
    line-height: 1.4;
}

.nv-prod-card__name a:hover {
    color: var(--iris-light);
}

.nv-prod-card__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.nv-prod-card__price-old {
    font-size: var(--t-xs);
    color: var(--txt-4);
    text-decoration: line-through;
}

.nv-prod-card__price-current {
    font-size: var(--t-lg);
    font-weight: 700;
    color: var(--txt-white);
}

.nv-prod-card__price-current .woocommerce-Price-currencySymbol {
    font-size: 0.75em;
}

.nv-prod-card__cuotas {
    font-size: var(--t-xs);
    color: var(--mint-dark);
}

.nv-prod-card__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-3);
}

.nv-catalog__footer {
    text-align: center;
    margin-top: var(--space-12);
}

.nv-catalog__empty {
    text-align: center;
    padding: var(--space-16) 0;
    color: var(--txt-3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
}


/* =============================================================
   COMPARADOR DE MODELOS
   ============================================================= */
.nv-compare {
    padding: var(--section-py) 0;
    background: linear-gradient(to bottom, var(--bg-2), var(--bg-1));
}

.nv-compare__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

@media (min-width: 780px) {
    .nv-compare__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.nv-compare-card {
    background: var(--bg-4);
    border: 1px solid var(--border-3);
    border-radius: var(--r-2xl);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    position: relative;
    transition: border-color var(--dur-mid), box-shadow var(--dur-mid), transform var(--dur-mid) var(--ease-spring);
}

.nv-compare-card:hover {
    border-color: var(--border-1);
    box-shadow: var(--shadow-iris);
    transform: translateY(-6px);
}

.nv-compare-card--featured {
    background: linear-gradient(145deg, rgba(88, 86, 214, 0.18), rgba(88, 86, 214, 0.06));
    border-color: rgba(88, 86, 214, 0.50);
    box-shadow: 0 0 40px rgba(88, 86, 214, 0.20);
}

.nv-compare-card__tag {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--iris), var(--iris-light));
    color: white;
    font-size: var(--t-xs);
    font-weight: 700;
    padding: 5px 16px;
    border-radius: var(--r-full);
    white-space: nowrap;
    letter-spacing: 0.06em;
}

.nv-compare-card__tier {
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--mint);
    text-transform: uppercase;
    letter-spacing: 0.10em;
}

.nv-compare-card__title {
    font-size: var(--t-3xl);
    font-weight: 700;
    color: var(--txt-white);
    letter-spacing: -0.03em;
    margin: var(--space-2) 0;
}

.nv-compare-card__desc {
    font-size: var(--t-sm);
    color: var(--txt-3);
    line-height: 1.7;
}

.nv-compare-card__features {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;
}

.nv-compare-card__features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--t-sm);
    color: var(--txt-2);
}

.nv-check {
    color: var(--mint);
    font-weight: 700;
    flex-shrink: 0;
}


/* =============================================================
   FORMAS DE PAGO
   ============================================================= */
.nv-payment {
    position: relative;
    padding: var(--section-py) 0;
    background: var(--bg-2);
    overflow: hidden;
}

.nv-payment__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.nv-payment__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 640px) {
    .nv-payment__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.nv-payment-card {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--r-xl);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
    transition: border-color var(--dur-mid), transform var(--dur-mid) var(--ease-spring), box-shadow var(--dur-mid);
}

.nv-payment-card:hover {
    border-color: var(--border-2);
    transform: translateY(-6px);
    box-shadow: var(--shadow-iris);
}

.nv-payment-card__icon {
    font-size: 2.5rem;
    line-height: 1;
}

.nv-payment-card__title {
    font-size: var(--t-xl);
    font-weight: 700;
    color: var(--txt-1);
}

.nv-payment-card__text {
    font-size: var(--t-sm);
    color: var(--txt-3);
    line-height: 1.7;
    flex: 1;
}

.nv-payment-card__badge {
    display: inline-block;
    background: linear-gradient(135deg, rgba(88, 86, 214, 0.25), rgba(88, 86, 214, 0.10));
    border: 1px solid rgba(88, 86, 214, 0.35);
    color: var(--iris-light);
    font-size: var(--t-xs);
    font-weight: 700;
    padding: 5px 14px;
    border-radius: var(--r-full);
    letter-spacing: 0.06em;
}

.nv-payment__cta {
    text-align: center;
    margin-top: var(--space-12);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.nv-payment__cta-text {
    font-size: var(--t-lg);
    color: var(--txt-2);
}


/* =============================================================
   TESTIMONIOS
   ============================================================= */
.nv-testimonios {
    padding: var(--section-py) 0;
    background: linear-gradient(to bottom, var(--bg-1), var(--bg-2));
}

.nv-testi-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 640px) {
    .nv-testi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .nv-testi-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.nv-testi-card {
    background: linear-gradient(145deg, var(--bg-4), rgba(88, 86, 214, 0.06));
    border: 1px solid var(--border-3);
    border-radius: var(--r-xl);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    transition:
        border-color var(--dur-mid),
        transform var(--dur-mid) var(--ease-spring),
        box-shadow var(--dur-mid);
}

.nv-testi-card:hover {
    border-color: var(--border-1);
    transform: translateY(-6px);
    box-shadow: 0 0 30px rgba(88, 86, 214, 0.18), var(--shadow-deep);
}

.nv-testi-stars {
    color: #FFC107;
    font-size: var(--t-lg);
    letter-spacing: 2px;
}

.nv-testi-text {
    font-size: var(--t-sm);
    color: var(--txt-2);
    line-height: 1.75;
    flex: 1;
    font-style: italic;
}

.nv-testi-author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.nv-testi-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--iris), var(--mint));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-lg);
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.nv-testi-name {
    font-size: var(--t-sm);
    font-weight: 700;
    color: var(--txt-1);
}

.nv-testi-city {
    font-size: var(--t-xs);
    color: var(--txt-4);
}


/* =============================================================
   FAQ
   ============================================================= */
.nv-faq {
    padding: var(--section-py) 0;
    background: var(--bg-2);
}

.nv-faq__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
}

@media (min-width: 900px) {
    .nv-faq__inner {
        grid-template-columns: 1fr 2fr;
        align-items: start;
    }

    .nv-faq__header {
        text-align: left;
    }

    .nv-faq__header .nv-section-title {
        max-width: 340px;
        margin-bottom: 0;
    }
}

.nv-faq__header .nv-section-title {
    margin-bottom: 0;
}

.nv-faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.nv-faq-item {
    background: var(--bg-4);
    border: 1px solid var(--border-3);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color var(--dur-mid);
}

.nv-faq-item:hover,
.nv-faq-item[open] {
    border-color: var(--border-1);
}

.nv-faq-item__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    font-size: var(--t-base);
    font-weight: 600;
    color: var(--txt-1);
    transition: color var(--dur-fast);
}

.nv-faq-item__q:hover {
    color: var(--txt-white);
}

.nv-faq-item__icon {
    flex-shrink: 0;
    color: var(--iris-light);
    transition: transform var(--dur-mid) var(--ease-out);
}

.nv-faq-item[open] .nv-faq-item__icon {
    transform: rotate(-180deg);
}

.nv-faq-item__a {
    padding: 0 var(--space-6) var(--space-5);
    font-size: var(--t-sm);
    color: var(--txt-3);
    line-height: 1.8;
    border-top: 1px solid var(--border-3);
    padding-top: var(--space-4);
}


/* =============================================================
   CTA FINAL
   ============================================================= */
.nv-cta-final {
    position: relative;
    padding: var(--section-py) 0;
    background: var(--bg-0);
    overflow: hidden;
}

.nv-cta-final__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.nv-cta-final__inner {
    text-align: center;
    position: relative;
    z-index: 1;
}

.nv-cta-final__title {
    font-size: var(--t-6xl);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: var(--txt-white);
    margin: var(--space-6) 0;
    text-shadow: 0 0 60px rgba(88, 86, 214, 0.25);
}

.nv-cta-final__sub {
    font-size: var(--t-lg);
    color: var(--txt-3);
    line-height: 1.7;
    max-width: 520px;
    margin: 0 auto var(--space-10);
}

.nv-cta-final__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-8);
}

.nv-cta-final__trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    flex-wrap: wrap;
    font-size: var(--t-sm);
    color: var(--txt-4);
    font-weight: 500;
}


/* =============================================================
   FOOTER
   ============================================================= */
.nv-footer {
    background: linear-gradient(to bottom, var(--bg-1), var(--bg-0));
    border-top: 1px solid rgba(88, 86, 214, 0.15);
}

.nv-footer__inner {
    padding: var(--space-16) 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
}

@media (min-width: 768px) {
    .nv-footer__inner {
        grid-template-columns: 1fr 1fr;
    }
}

.nv-footer__brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.nv-footer__tagline {
    font-size: var(--t-sm);
    color: var(--txt-4);
}

.nv-footer__social {
    display: flex;
    gap: var(--space-4);
}

.nv-footer__social-link {
    color: var(--txt-4);
    transition: color var(--dur-fast), transform var(--dur-fast);
}

.nv-footer__social-link:hover {
    color: var(--iris-light);
    transform: translateY(-2px);
}

.nv-footer__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
}

.nv-footer__nav-title {
    font-size: var(--t-sm);
    font-weight: 700;
    color: var(--txt-2);
    margin-bottom: var(--space-4);
}

.nv-footer__nav ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.nv-footer__nav a {
    font-size: var(--t-sm);
    color: var(--txt-4);
    transition: color var(--dur-fast);
}

.nv-footer__nav a:hover {
    color: var(--iris-light);
}

.nv-footer__bottom {
    background: var(--bg-0);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding: var(--space-6) 0;
}

.nv-footer__bottom .container {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.nv-footer__bottom p {
    font-size: var(--t-xs);
    color: var(--txt-4);
}

.nv-footer__disclaimer {
    opacity: 0.6;
}


/* =============================================================
   BOTÓN FLOTANTE WHATSAPP
   ============================================================= */
.nv-wa-float {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: 999;
    background: #25D366;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.45);
    transition: transform var(--dur-mid) var(--ease-spring), box-shadow var(--dur-mid);
}

.nv-wa-float:hover {
    transform: scale(1.12);
    box-shadow: 0 10px 40px rgba(37, 211, 102, 0.65);
}

.nv-wa-float__tooltip {
    position: absolute;
    right: 68px;
    background: var(--bg-4);
    color: var(--txt-1);
    white-space: nowrap;
    font-size: var(--t-xs);
    font-weight: 600;
    padding: 6px 12px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-3);
    opacity: 0;
    transform: translateX(8px);
    transition: all var(--dur-mid) var(--ease-out);
    pointer-events: none;
}

.nv-wa-float:hover .nv-wa-float__tooltip {
    opacity: 1;
    transform: translateX(0);
}


/* =============================================================
   RESPONSIVE — AJUSTES MOBILE GENERALES
   ============================================================= */
@media (max-width: 639px) {

    /* Hero */
    .nv-hero__ctas {
        flex-direction: column;
    }

    .nv-hero__ctas .nv-btn {
        width: 100%;
        justify-content: center;
    }

    .nv-float-badge {
        display: none;
    }

    /* CTA final */
    .nv-cta-final__actions {
        flex-direction: column;
    }

    .nv-cta-final__actions .nv-btn {
        width: 100%;
        justify-content: center;
    }

    /* FAQ */
    .nv-faq__header {
        text-align: center;
    }

    /* Desactivar orbes en mobile para performance */
    .nv-orb {
        display: none;
    }

    .nv-grid-lines {
        display: none;
    }
}

@media (max-width: 899px) {
    .nv-scroll-hint {
        display: none;
    }
}

/* ── VIDEO HERO (YouTube embed) ──────────────────────────────── */
.nv-hero__scene--video {
    perspective: 1200px;
}

.nv-hero__video-wrap {
    position: relative;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 16 / 10;
    border-radius: 22px;
    overflow: hidden;
    transform: perspective(1200px) rotateY(-6deg) rotateX(3deg);
    transition: transform 600ms cubic-bezier(0.34, 1.1, 0.64, 1), box-shadow 600ms ease;
    box-shadow: 0 40px 100px rgba(0, 0, 0, .65), 0 0 80px rgba(88, 86, 214, .35), inset 0 0 0 1px rgba(88, 86, 214, .18);
    will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
    .nv-hero__scene--video:hover .nv-hero__video-wrap {
        transform: perspective(1200px) rotateY(-2deg) rotateX(1deg) translateY(-10px) scale(1.03);
        box-shadow: 0 60px 120px rgba(0, 0, 0, .75), 0 0 120px rgba(88, 86, 214, .50), inset 0 0 0 1px rgba(88, 86, 214, .30);
    }
}

.nv-hero__video {
    position: absolute;
    top: -10%;
    left: -5%;
    width: 110%;
    height: 120%;
    border: none;
    pointer-events: none;
}

.nv-hero__video-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, transparent 55%, rgba(8, 8, 18, .40) 100%),
        linear-gradient(135deg, rgba(88, 86, 214, .06) 0%, transparent 60%);
    z-index: 1;
    pointer-events: none;
    border-radius: 22px;
}

/* Fallback: cuando el video-wrap está presente, ocultar imagen */
.nv-hero__video-wrap~.nv-hero__img--fallback {
    display: none;
}

.nv-hero__img--fallback {
    width: 100%;
    max-width: 520px;
    border-radius: 22px;
    transform: perspective(1200px) rotateY(-6deg) rotateX(3deg);
    box-shadow: 0 40px 100px rgba(0, 0, 0, .6), 0 0 80px rgba(88, 86, 214, .30);
}

@media (max-width: 899px) {
    .nv-hero__video-wrap {
        max-width: 360px;
        transform: perspective(800px) rotateY(-3deg) rotateX(1.5deg);
    }
}

/* ── FIX: HERO REVEAL — CSS-FIRST (sin depender de JS/GSAP) ─── */
/* Los elementos .nv-reveal del hero usan animaciones CSS nativas
   para que el contenido sea visible aunque JS falle. */

.nv-hero .nv-reveal {
    animation: nv-hero-entry 0.7s cubic-bezier(0.34, 1.1, 0.64, 1) both;
}

.nv-hero .nv-reveal[data-delay="0"] {
    animation-delay: 0.10s;
}

.nv-hero .nv-reveal[data-delay="1"] {
    animation-delay: 0.25s;
}

.nv-hero .nv-reveal[data-delay="2"] {
    animation-delay: 0.40s;
}

.nv-hero .nv-reveal[data-delay="3"] {
    animation-delay: 0.55s;
}

.nv-hero .nv-reveal[data-delay="4"] {
    animation-delay: 0.70s;
}

@keyframes nv-hero-entry {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Si JS ya agregó is-visible, que no haya conflicto */
.nv-hero .nv-reveal.is-visible {
    animation: none;
    opacity: 1;
    transform: none;
}

/* ── FIX: IMAGEN FALLBACK DEL HERO — siempre visible ────────── */
/* El video de YouTube puede no cargar en móvil o por política.
   La imagen fallback se muestra siempre; JS la oculta solo si
   el iframe cargó exitosamente. */
.nv-hero__img--fallback {
    display: block !important;
    width: 100%;
    max-width: 520px;
    border-radius: 22px;
    transform: perspective(1200px) rotateY(-6deg) rotateX(3deg);
    box-shadow: 0 40px 100px rgba(0, 0, 0, .6), 0 0 80px rgba(88, 86, 214, .30);
    transition: transform 600ms cubic-bezier(0.34, 1.1, 0.64, 1);
}

/* Cuando el video esté activo Y cargó (clase .yt-loaded añadida por JS),
   ahí sí ocultar la imagen fallback */
.nv-hero__video-wrap.yt-loaded~.nv-hero__img--fallback {
    display: none !important;
}

@media (max-width: 899px) {
    .nv-hero__img--fallback {
        max-width: 360px;
        transform: perspective(800px) rotateY(-3deg) rotateX(1.5deg);
    }
}