/* Extracted from index.html during refactor. Order preserved. */

/* ── block 01 ─────────────────────────────────── */

        /* ─────────────────── RESET & BASE ─────────────────── */
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; font-size: 16px; }

        :root {
            --black:          #000000;
            --white:          #ffffff;
            --green:          #8C8C8C;
            --blue:           #111111;
            --dark-bg:        #0f1012;
            --color-offBlack: #0f1012;
            --gray-100: #f7f7f7;
            --gray-200: #e8e8e8;
            --gray-400: #bbb;
            --gray-600: #666;
            --gray-800: #333;
            --font-main: 'DM Sans', 'DM Sans', sans-serif;
            --font-mono: 'DM Sans', 'DM Sans', sans-serif;
            --transition: 0.2s ease;
            --max-w: 1200px;
        }

        html {
            overflow-x: clip; /* clip ≠ hidden: no crea scroll-container, no rompe position:sticky */
            -webkit-text-size-adjust: 100%;
            /* Scrollbar fina/discreta (Windows) — evita barra blanca visible */
            scrollbar-width: thin;
            scrollbar-color: rgba(0,0,0,0.25) transparent;
        }
        /* WebKit (Chrome/Edge/Safari Windows) */
        html::-webkit-scrollbar { width: 8px; height: 8px; }
        html::-webkit-scrollbar-track { background: transparent; }
        html::-webkit-scrollbar-thumb {
            background: rgba(0,0,0,0.22);
            border-radius: 4px;
        }
        html::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.38); }
        body {
            font-family: var(--font-main);
            background: #f5f5f7;
            color: #1d1d1f;
            overflow-x: clip; /* ídem: clip no crea BFC, sticky funciona */
            width: 100%;
            max-width: 100vw;
            position: relative;
            -webkit-font-smoothing: antialiased;
            letter-spacing: -0.01em;
            font-weight: 300;
        }

        /* ─────────────────── ANNOUNCEMENT BAR ─────────────────── */
        .announce-bar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 901;
            background: #0f1012;
            color: var(--white);
            text-align: center;
            padding: 7px 20px;
            font-size: 11px;
            font-family: var(--font-mono);
            letter-spacing: 0.02em;
            opacity: 0;
            transform: translateY(-100%);
            transition: opacity 0.5s ease, transform 0.5s ease;
        }
        .announce-bar.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
        .announce-bar a {
            color: var(--white);
            text-decoration: none;
            background: var(--blue);
            padding: 3px 12px;
            border-radius: 5.4rem;
            font-weight: 500;
            margin-left: 6px;
            transition: opacity 0.2s ease;
        }
        .announce-bar a:hover { opacity: 0.85; }
        @keyframes text-pulse {
            0%   { text-shadow: 0 0 0px rgba(91,159,255,0.8); }
            60%  { text-shadow: 0 0 10px rgba(91,159,255,0.6), 0 0 20px rgba(91,159,255,0.3); }
            100% { text-shadow: 0 0 0px rgba(91,159,255,0); }
        }

        /* ─────────────────── LOGO (shared: header + footer) ─────────────────── */
        .logo {
            display: flex;
            align-items: center;
            gap: 9px;
            text-decoration: none;
            color: rgba(0,0,0,0.80);
            transition: color 0.3s ease;
            pointer-events: auto;
        }
        .logo:hover { color: var(--black); }
        .logo-dot {
            width: 10px; height: 10px;
            background: var(--green);
            border-radius: 50%; flex-shrink: 0;
            animation: cta-pulse 2.5s infinite;
        }
        .logo-text { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }

        /* ─────────────────── MINIMAL NAV ─────────────────── */
        /* ─────────────────── AUGEN NAV ─────────────────── */
        #site-header {
            position: fixed;
            top: 0; left: 0;
            width: 100%;
            z-index: 900;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding-top: 30px;
            pointer-events: none;
        }
        /* Logo circle */
        .augen-logo {
            pointer-events: auto;
            width: 49px; height: 49px;
            border-radius: 50%;
            margin: 0 10px 0 0;
            background: rgba(120,120,120,0.12);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            display: flex; align-items: center; justify-content: center;
            text-decoration: none;
            color: var(--black);
            transition: background 0.25s, color 0.25s;
            flex-shrink: 0;
            overflow: hidden;
        }
        .augen-logo svg { width: 47px; height: 47px; display: block; }
        #site-header.nav-on-dark .augen-logo {
            background: rgba(255,255,255,0.1);
            color: var(--white);
        }
        /* Desktop nav pill */
        .augen-nav-pill {
            pointer-events: auto;
            position: static;
            display: flex;
            align-items: center;
            column-gap: 49px;
            height: 49px;
            padding: 0 33px;
            border-radius: 12px;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            background: rgba(120,120,120,0.08);
            transition: background 0.3s;
            white-space: nowrap;
        }
        #site-header.nav-on-dark .augen-nav-pill {
            background: rgba(255,255,255,0.08);
        }
        .augen-nav-pill a {
            font-family: var(--font-main);
            font-size: 16.8px;
            font-weight: 350;
            letter-spacing: -0.02em;
            line-height: 1.2;
            text-decoration: none;
            color: var(--black);
            opacity: 1;
            transition: opacity 0.2s;
        }
        #site-header.nav-on-dark .augen-nav-pill a { color: var(--white); }
        .augen-nav-pill a:hover { opacity: 0.5; }
        /* Burger — minimalist, 3-line, morph-to-X on open
           Fondo circular translúcido con backdrop-blur (estilo Apple). */
        .augen-burger {
            pointer-events: auto;
            width: 44px; height: 44px;
            margin: 30px 20px 0 0;
            background: rgba(255,255,255,0.35);
            backdrop-filter: blur(14px) saturate(140%);
            -webkit-backdrop-filter: blur(14px) saturate(140%);
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--black);
            flex-shrink: 0;
            position: relative;
            z-index: 2;
            transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.2s;
            -webkit-tap-highlight-color: transparent;
        }
        .augen-burger:hover { background: rgba(255,255,255,0.55); }
        .augen-burger:active { transform: scale(0.94); }
        #site-header.nav-on-dark .augen-burger {
            background: rgba(255,255,255,0.1);
            border-color: rgba(255,255,255,0.1);
            color: var(--white);
        }
        #site-header.nav-on-dark .augen-burger:hover { background: rgba(255,255,255,0.18); }
        .augen-burger .burger-icon {
            position: relative;
            width: 18px; height: 12px;
        }
        /* 2px en lugar de 1.5px para que las 3 líneas rendericen con el mismo
           grosor (1.5px causa redondeo sub-pixel y la primera parecía más gorda). */
        .augen-burger .burger-icon span {
            position: absolute; left: 0;
            display: block;
            width: 100%; height: 2px;
            background: currentColor;
            border-radius: 2px;
            transition: transform 0.35s cubic-bezier(0.65,0,0.35,1),
                        top 0.28s cubic-bezier(0.65,0,0.35,1) 0.08s,
                        opacity 0.2s ease;
        }
        .augen-burger .burger-icon span:nth-child(1) { top: 0; }
        .augen-burger .burger-icon span:nth-child(2) { top: 50%; margin-top: -1px; }
        .augen-burger .burger-icon span:nth-child(3) { bottom: 0; top: auto; }
        /* Open state: top & bottom rotate into an X, middle fades out */
        #site-header.menu-open .augen-burger {
            background: rgba(255,255,255,0.08);
            border-color: rgba(255,255,255,0.14);
            color: var(--white);
        }
        #site-header.menu-open .augen-burger .burger-icon span {
            transition: transform 0.35s cubic-bezier(0.65,0,0.35,1) 0.08s,
                        top 0.28s cubic-bezier(0.65,0,0.35,1),
                        bottom 0.28s cubic-bezier(0.65,0,0.35,1),
                        opacity 0.15s ease;
        }
        #site-header.menu-open .augen-burger .burger-icon span:nth-child(1) {
            top: 50%; margin-top: -1px; transform: rotate(45deg);
        }
        #site-header.menu-open .augen-burger .burger-icon span:nth-child(2) {
            opacity: 0; transform: scaleX(0);
        }
        #site-header.menu-open .augen-burger .burger-icon span:nth-child(3) {
            bottom: auto; top: 50%; margin-top: -1px; transform: rotate(-45deg);
        }
        /* Full-screen nav overlay (mobile) */
        .augen-nav-overlay {
            position: fixed;
            inset: 0;
            z-index: 1;
            padding: 110px 28px 48px;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s, visibility 0.4s;
            pointer-events: none;
        }
        #site-header.menu-open .augen-nav-overlay {
            opacity: 1; visibility: visible; pointer-events: auto;
        }
        .augen-nav-list {
            list-style: none; padding: 0; margin: 0;
            display: flex; flex-direction: column; row-gap: 4px;
        }
        .augen-nav-list li { display: flex; align-items: baseline; gap: 42px; }
        .augen-nav-list .nav-idx {
            font-size: 10px; font-weight: 350; letter-spacing: -0.02em;
            color: rgba(255,255,255,0.35); width: 18px; flex-shrink: 0;
        }
        .augen-nav-list a {
            font-family: var(--font-main);
            font-size: clamp(32px, 7vw, 48px);
            font-weight: 350;
            letter-spacing: -0.03em;
            color: var(--white);
            text-decoration: none;
            transition: opacity 0.2s;
        }
        .augen-nav-list a:hover { opacity: 0.55; }
        /* Background blur overlay */
        .augen-bg {
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.88);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            z-index: 0;
            opacity: 0; visibility: hidden;
            transition: opacity 0.4s, visibility 0.4s;
        }
        #site-header.menu-open .augen-bg { opacity: 1; visibility: visible; }
        /* Responsive */
        @media (min-width: 834px) {
            .augen-nav-overlay,
            .augen-bg { display: none !important; }
            .augen-burger { display: none !important; }
        }
        @media (max-width: 833px) {
            #site-header { justify-content: space-between; padding-top: 0; }
            .augen-nav-pill { display: none !important; }
            .augen-logo { margin: 20px 0 0 16px; }
            .augen-burger { margin: 20px 16px 0 0; }
        }

        /* ─────────────────── HERO ─────────────────── */
        .hero {
            display: grid;
            grid-template-columns: 1fr 1fr;
            max-width: var(--max-w);
            margin: 0 auto;
            padding: 80px 40px;
            align-items: center;
            gap: 80px;
        }
        .hero-left { padding: 0; }
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: var(--font-mono);
            font-size: 11px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--gray-600);
            margin-bottom: 32px;
        }
        .hero-badge::before {
            content: '';
            width: 6px; height: 6px;
            background: var(--green);
            border-radius: 50%;
        }
        .hero h1 {
            font-size: clamp(42px, 5vw, 68px);
            font-weight: 700;
            line-height: 1.08;
            letter-spacing: -0.04em;
            margin-bottom: 28px;
        }
        .hero h1 em {
            font-style: normal;
            color: var(--gray-600);
        }
        .hero-desc {
            font-size: 18px;
            line-height: 1.7;
            color: var(--gray-600);
            margin-bottom: 48px;
            max-width: 480px;
        }
        .hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
        .btn-primary {
            display: inline-flex;
            align-items: center;
            gap: 19px;
            background: transparent;
            color: var(--blue);
            font-family: var(--font-main);
            font-size: 16px;
            font-weight: 350;
            letter-spacing: -0.02em;
            line-height: 1.2;
            text-transform: none;
            padding: 0;
            border: none;
            text-decoration: none;
            cursor: pointer;
            transition: gap 0.25s ease;
        }
        .btn-primary::before {
            content: '→';
            width: 34px; height: 21px; min-width: 34px;
            border: 1.2px solid currentColor;
            border-radius: 94px;
            display: flex; align-items: center; justify-content: center;
            font-size: 11px;
            transition: background 0.25s ease, color 0.25s ease;
        }
        .btn-primary:hover { gap: 26px; }
        .btn-primary:hover::before { background: var(--blue); color: #fff; }
        .btn-ghost {
            display: inline-flex;
            align-items: center;
            gap: 19px;
            font-size: 1.6rem;
            font-weight: 350;
            letter-spacing: -0.02em;
            color: var(--gray-600);
            text-decoration: none;
            border: none;
            padding: 0;
            transition: color var(--transition), gap 0.25s ease;
        }
        .btn-ghost::before {
            content: '→';
            width: 54px; height: 33px; min-width: 54px;
            border: 1.2px solid currentColor;
            border-radius: 94px;
            display: flex; align-items: center; justify-content: center;
            font-size: 15px;
        }
        .btn-ghost:hover { color: var(--black); gap: 26px; }
        .hero-right {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* ── Logo scroll animations ── */
        .hero-logo-wrap {
            width: 100%;
            max-width: 460px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        #charlas-logo {
            width: 100%;
            animation: logoFloat 5s ease-in-out infinite;
            will-change: transform;
            transform-origin: center;
        }
        @keyframes logoFloat {
            0%,100% { transform: translateY(0px) rotate(0deg); }
            33%      { transform: translateY(-12px) rotate(0.6deg); }
            66%      { transform: translateY(-6px) rotate(-0.4deg); }
        }
        /* Fade-in on load */
        .hero-logo-wrap {
            opacity: 0;
            transform: scale(0.92);
            transition: opacity 0.9s ease, transform 0.9s ease;
        }
        .hero-logo-wrap.visible {
            opacity: 1;
            transform: scale(1);
        }
        /* Scroll-driven ring glow */
        .logo-glow {
            position: absolute;
            width: 55%;
            height: 55%;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(91,159,255,0.18) 0%, transparent 70%);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.4s;
        }
        .hero-logo-wrap:hover .logo-glow { opacity: 1; }

        /* ─────────────────── TICKER ─────────────────── */
        .ticker {
            position: relative;
            z-index: 6;
            border-top: 1px solid var(--gray-200);
            border-bottom: 1px solid var(--gray-200);
            overflow: hidden;
            padding: 14px 0;
            background: var(--white);
        }
        .ticker-track {
            display: flex;
            gap: 0;
            animation: ticker 24s linear infinite;
            white-space: nowrap;
        }
        .ticker-item {
            display: inline-flex;
            align-items: center;
            gap: 20px;
            padding: 0 40px;
            font-family: var(--font-mono);
            font-size: 12px;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--gray-600);
            flex-shrink: 0;
        }
        .ticker-item::after {
            content: '●';
            color: var(--blue);
            font-size: 8px;
        }
        @keyframes ticker {
            from { transform: translateX(0); }
            to { transform: translateX(-50%); }
        }

        /* ─────────────────── SECTIONS ─────────────────── */
        .section {
            padding: 120px 40px;
            max-width: var(--max-w);
            margin: 0 auto;
            position: relative;
            z-index: 6;
        }
        .section-full {
            padding: 120px 40px;
            position: relative;
            z-index: 6;
        }
        .section-label {
            font-family: var(--font-mono);
            font-size: 11px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--gray-600);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .section-label::before {
            content: '—';
            color: var(--green);
        }
        .section-title {
            font-size: clamp(48px, 6.5vw, 96px) !important;
            font-weight: 300 !important;
            letter-spacing: -0.03em !important;
            line-height: 1.0 !important;
            margin-bottom: 28px;
            font-family: 'DM Sans', var(--font-main);
            color: #1d1d1f;
        }
        .section-desc {
            font-size: 17px;
            color: #6e6e73;
            line-height: 1.75;
            max-width: 560px;
            margin-bottom: 72px;
            font-weight: 300;
        }

        /* ─────────────────── APP HERO ─────────────────── */
        .app-hero {
            background: #f5f5f7;
            position: relative;
            overflow: hidden;
        }
        .app-hero-inner {
            position: relative;
            width: 100%;
            min-height: 900px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-bottom: 80px;
        }
        .app-hero-text {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0;
            pointer-events: none;
            padding: 0 20px;
            overflow: hidden;
        }
        .app-hero-line {
            display: block;
            font-size: clamp(60px, 9.5vw, 140px);
            font-weight: 200;
            will-change: transform, filter, opacity;
            letter-spacing: -0.04em;
            line-height: 0.92;
            color: var(--blue);
            text-align: center;
            white-space: nowrap;
        }
        .app-hero-phone {
            position: relative;
            z-index: 2;
            width: clamp(220px, 29vw, 414px);
            flex-shrink: 0;
        }
        .app-hero-phone img {
            width: 100%;
            height: auto;
            display: block;
        }
        .app-hero-label {
            position: absolute;
            top: 40px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 11px;
            font-weight: 350;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(0,0,0,0.35);
            white-space: nowrap;
        }
        @media (max-width: 900px) {
            .app-hero-inner { min-height: 600px; padding-bottom: 40px; }
            .app-hero-phone { width: clamp(184px, 55vw, 288px); }
            /* Texto más pequeño para que no toque los bordes en móvil */
            .app-hero-line {
                font-size: clamp(38px, 11vw, 60px);
                letter-spacing: -0.03em;
            }
            .app-hero-text { padding: 0 16px; }
        }

        /* ─────────────────── MEMBRESÍA DETAIL ─────────────────── */
        .membresia-section {
            background: var(--color-offBlack);
            padding: 0 0 100px;
        }
        .membresia-inner {
            max-width: var(--max-w);
            margin: 0 auto;
            padding: 0 40px;
        }
        .membresia-divider {
            border: none;
            border-top: 1px solid rgba(255,255,255,0.1);
            margin: 0 0 72px;
        }
        .membresia-grid {
            display: grid;
            grid-template-columns: 1.1fr 1fr 0.9fr;
            gap: 0 48px;
            align-items: start;
        }
        .membresia-label {
            font-size: 11px;
            font-weight: 350;
            letter-spacing: 0.08em;
            color: rgba(255,255,255,0.35);
            text-transform: uppercase;
            margin-bottom: 28px;
        }
        .membresia-title {
            font-size: clamp(34px, 3.8vw, 50px);
            font-weight: 300;
            letter-spacing: -0.03em;
            line-height: 1.08;
            color: #fff;
            margin-bottom: 44px;
        }
        .membresia-item {
            padding: 28px 0;
            border-top: 1px solid rgba(255,255,255,0.09);
        }
        .membresia-item:first-child { border-top: none; padding-top: 0; }
        .membresia-item-num {
            font-size: 10px;
            color: rgba(255,255,255,0.25);
            font-family: var(--font-mono);
            letter-spacing: 0.06em;
            margin-bottom: 14px;
        }
        .membresia-item-title {
            font-size: 17px;
            font-weight: 400;
            color: #fff;
            letter-spacing: -0.02em;
            line-height: 1.3;
            margin-bottom: 10px;
        }
        .membresia-item-body {
            font-size: 14px;
            font-weight: 300;
            color: rgba(255,255,255,0.45);
            line-height: 1.65;
            letter-spacing: -0.01em;
        }
        .membresia-tagline {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            text-align: right;
            margin-bottom: 48px;
        }
        .membresia-tagline-icon {
            width: 28px; height: 28px;
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 13px; color: rgba(255,255,255,0.5);
            margin-bottom: 10px;
        }
        .membresia-tagline-text {
            font-size: 11px;
            color: rgba(255,255,255,0.3);
            line-height: 1.6;
            letter-spacing: -0.01em;
        }
        /* btn-primary override inside dark membresia section */
        .svc-content .btn-primary {
            color: #fff;
        }
        .svc-content .btn-primary:hover::before {
            background: #fff;
            color: #111;
        }
        @media (max-width: 833px) {
            .membresia-grid { grid-template-columns: 1fr; gap: 48px 0; }
            .membresia-tagline { align-items: flex-start; text-align: left; }
            .membresia-inner { padding: 0 20px; }
        }

        /* ─────────────────── FEATURES GRID ─────────────────── */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            border: 1px solid var(--gray-200);
        }
        .feature-item {
            padding: 40px;
            border: 1px solid var(--gray-200);
            border-left: 3px solid var(--green);
            border-radius: 12px;
            transition: background var(--transition), box-shadow var(--transition), border-color var(--transition);
            position: relative;
            background: var(--white);
        }
        .feature-item:hover {
            background: var(--gray-100);
            box-shadow: 0 4px 24px rgba(0,0,0,0.07);
            border-left-color: var(--green);
        }
        .feature-number {
            font-family: var(--font-mono);
            font-size: 11px;
            color: var(--gray-400);
            letter-spacing: 0.06em;
            margin-bottom: 28px;
        }
        .feature-icon {
            font-size: 24px;
            margin-bottom: 20px;
            display: block;
        }
        .feature-item h3 {
            font-size: 20px;
            font-weight: 600;
            letter-spacing: -0.02em;
            margin-bottom: 16px;
        }
        .feature-item p {
            font-size: 15px;
            color: var(--gray-600);
            line-height: 1.7;
        }
        .feature-arrow {
            position: absolute;
            bottom: 48px;
            right: 48px;
            width: 32px;
            height: 32px;
            background: var(--black);
            color: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            opacity: 0;
            transition: opacity var(--transition);
        }
        .feature-item:hover .feature-arrow { opacity: 1; }

        /* ─────────────────── PRICING ─────────────────── */
        .pricing-wrap {
            background: var(--white);
        }
        .pricing-inner {
            max-width: var(--max-w);
            margin: 0 auto;
            padding: 140px 40px;
        }
        .pricing-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: start;
        }
        .pricing-wrap .section-label { color: var(--gray-600); }
        .pricing-wrap .section-label::before { color: var(--blue); }
        .pricing-wrap .section-title { color: var(--black); }
        .pricing-wrap .section-desc { color: var(--gray-600); }
        .pricing-wrap .section-line { background: var(--gray-200); }
        .pricing-wrap .section-line.revealed { background: var(--blue); }
        .pricing-left .section-desc { margin-bottom: 40px; }
        .pricing-proof {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .proof-item {
            display: flex;
            align-items: flex-start;
            gap: 14px;
        }
        .proof-icon {
            width: 18px;
            height: 18px;
            background: var(--blue);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            flex-shrink: 0;
            margin-top: 2px;
        }
        .proof-text {
            font-size: 15px;
            color: var(--gray-600);
            line-height: 1.6;
        }
        .pricing-card {
            background: var(--white);
            border: 1px solid var(--gray-200);
            border-radius: 20px;
            overflow: hidden;
        }
        .pricing-card-header {
            padding: 40px 48px 32px;
            border-bottom: 1px solid var(--gray-200);
        }
        .pricing-tag {
            display: inline-block;
            background: rgba(17,17,17,0.07);
            color: var(--blue);
            border: 0.72px solid rgba(17,17,17,0.18);
            border-radius: 5.4rem;
            font-family: 'DM Sans', var(--font-mono);
            font-size: 10px;
            font-weight: 500;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            padding: 5px 14px;
            margin-bottom: 20px;
        }
        .pricing-name {
            font-size: 22px;
            font-weight: 500;
            letter-spacing: -0.02em;
            margin-bottom: 8px;
            color: var(--black);
            font-family: 'DM Sans', var(--font-main);
        }
        .pricing-tagline {
            font-size: 14px;
            color: var(--gray-600);
        }
        .pricing-card-price {
            padding: 32px 48px;
            border-bottom: 1px solid var(--gray-200);
        }
        .price-amount {
            font-size: 64px;
            font-weight: 600;
            letter-spacing: -0.04em;
            line-height: 1;
            color: var(--black);
            font-family: 'DM Sans', var(--font-main);
        }
        .price-currency {
            font-size: 28px;
            vertical-align: super;
            font-weight: 300;
        }
        .price-period {
            font-family: 'DM Sans', var(--font-mono);
            font-size: 12px;
            color: var(--gray-600);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin-top: 8px;
        }
        .price-note {
            font-size: 13px;
            color: var(--gray-600);
            margin-top: 8px;
        }
        .price-note strong { color: var(--black); }

        /* ── Price reveal on CTA click ── */
        .pricing-card-price {
            overflow: hidden;
            max-height: 0;
            opacity: 0;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            transition: max-height 0.7s cubic-bezier(0.16,1,0.3,1),
                        opacity 0.6s ease,
                        padding 0.5s ease;
        }
        .pricing-card-price.revealed {
            max-height: 200px;
            opacity: 1;
            padding-top: 32px !important;
            padding-bottom: 32px !important;
        }
        .btn-pricing {
            transition: background var(--transition), color var(--transition), transform 0.3s ease, box-shadow 0.3s ease;
        }
        .btn-pricing.revealing {
            opacity: 0.7;
        }
        .pricing-card-features {
            padding: 32px 48px;
            border-bottom: 1px solid var(--gray-200);
        }
        .feature-line {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 0;
            font-size: 15px;
            color: var(--black);
            border-bottom: 1px solid var(--gray-200);
        }
        .feature-line:last-child { border-bottom: none; }
        .feature-check {
            width: 16px;
            height: 16px;
            background: var(--blue);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .feature-check svg { width: 9px; height: 9px; fill: var(--white); }
        .pricing-card-action {
            padding: 32px 48px;
        }
        .btn-pricing {
            display: inline-flex;
            align-items: center;
            gap: 19px;
            background: transparent;
            color: var(--blue);
            font-family: 'DM Sans', var(--font-main);
            font-size: 16px;
            font-weight: 350;
            letter-spacing: -0.02em;
            line-height: 1.2;
            text-transform: none;
            padding: 0;
            border: none;
            cursor: pointer;
            transition: gap 0.25s ease;
        }
        .btn-pricing::before {
            content: '→';
            width: 34px; height: 21px; min-width: 34px;
            border: 1.2px solid currentColor;
            border-radius: 94px;
            display: flex; align-items: center; justify-content: center;
            font-size: 11px;
            transition: background 0.25s ease, color 0.25s ease;
        }
        .btn-pricing:hover { gap: 26px; }
        .btn-pricing:hover::before { background: var(--blue); color: #fff; }
        .pricing-secure {
            margin-top: 16px;
            font-family: 'DM Sans', var(--font-mono);
            font-size: 11px;
            color: var(--gray-400);
            text-align: center;
            letter-spacing: 0.02em;
        }

        /* ─────────────────── FAQ ─────────────────── */
        #faq {
            background: #f5f5f7;
            padding: 0 40px;
        }
        .faq-inner {
            background: #111111;
            max-width: var(--max-w);
            margin: 0 auto;
            padding: 80px 60px;
        }
        #faq .section-label { color: rgba(255,255,255,0.65); }
        #faq .section-label::before { color: rgba(255,255,255,0.9); }
        #faq .section-title { color: var(--white); }
        #faq .section-desc { color: rgba(255,255,255,0.65); }
        #faq .section-line { background: rgba(255,255,255,0.3); }
        #faq .section-line.revealed { background: var(--white); }
        .faq-layout {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 80px;
            align-items: start;
        }
        .faq-sticky { position: sticky; top: 100px; }
        .faq-list { border-top: 1px solid rgba(255,255,255,0.15); }
        .faq-item {}
        .faq-btn {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 28px 0;
            background: none;
            border: none;
            border-bottom: 1px solid rgba(255,255,255,0.25);
            cursor: pointer;
            text-align: left;
            gap: 24px;
            font-family: 'DM Sans', var(--font-main);
        }
        .faq-q {
            font-size: 17px;
            font-weight: 400;
            color: var(--white);
            letter-spacing: -0.02em;
        }
        .faq-icon {
            width: 28px;
            height: 28px;
            background: rgba(255,255,255,0.15);
            color: var(--white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: 300;
            flex-shrink: 0;
            transition: background 0.25s ease, color 0.25s ease;
        }
        .faq-btn:hover .faq-icon { background: rgba(255,255,255,0.25); color: var(--white); }
        .faq-btn.open .faq-icon { background: rgba(255,255,255,0.25); color: var(--white); }
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            pointer-events: none;
            transition: max-height 0.45s ease, opacity 0.3s ease;
        }
        .faq-answer.open {
            max-height: 800px;
            opacity: 1;
            pointer-events: auto;
        }
        .faq-answer-inner {
            padding: 20px 0 28px;
            font-size: 16px;
            color: rgba(255,255,255,0.65);
            line-height: 1.75;
            border-bottom: 1px solid rgba(255,255,255,0.12);
        }

        /* ─────────────────── FINAL CTA ─────────────────── */
        .final-cta-wrap { background: #f5f5f7; border-top: 1px solid rgba(0,0,0,0.08); }
        .final-cta-inner {
            max-width: var(--max-w);
            margin: 0 auto;
            padding: 160px 40px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
        }
        .final-cta-left {}
        .final-cta-inner .section-label { color: var(--gray-600); }
        .final-cta-inner .section-label::before { color: var(--blue); }
        .final-cta-inner .section-line { background: var(--gray-200); }
        .final-cta-inner .section-line.revealed { background: var(--blue); }
        .final-cta-inner .section-title { color: var(--black); margin-bottom: 32px; }
        .final-cta-desc {
            font-size: 15px;
            color: var(--gray-600);
            line-height: 1.7;
            margin-bottom: 16px;
        }
        .final-cta-right {
            display: flex;
            flex-direction: column;
            gap: 28px;
        }
        .final-price-block {
            border: 1px solid var(--gray-200);
            border-radius: 16px;
            padding: 40px;
            background: var(--gray-50);
        }
        .final-price-label {
            font-family: 'DM Sans', var(--font-mono);
            font-size: 11px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--gray-600);
            margin-bottom: 16px;
        }
        .final-price-number {
            font-size: 56px;
            font-weight: 600;
            color: var(--black);
            letter-spacing: -0.04em;
            line-height: 1;
            font-family: 'DM Sans', var(--font-main);
        }
        .final-price-period {
            font-size: 14px;
            color: var(--gray-600);
            margin-top: 8px;
        }
        .final-price-after {
            font-size: 13px;
            color: var(--gray-400);
        }
        .final-features {
            list-style: none;
            padding: 0;
            margin: 20px 0 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .final-features li {
            font-size: 13px;
            color: var(--gray-600);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .final-features li::before {
            content: '';
            width: 6px; height: 6px;
            min-width: 6px;
            background: var(--blue);
            border-radius: 50%;
        }
        .final-price-early {
            margin-top: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            color: var(--gray-600);
            font-family: 'DM Sans', var(--font-mono);
        }
        .final-price-early::before {
            content: '';
            width: 6px; height: 6px;
            background: var(--blue);
            border-radius: 50%;
            flex-shrink: 0;
        }
        .btn-final {
            display: inline-flex;
            align-items: center;
            gap: 19px;
            background: transparent;
            color: var(--blue);
            font-family: 'DM Sans', var(--font-main);
            font-size: 16px;
            font-weight: 350;
            letter-spacing: -0.02em;
            line-height: 1.2;
            text-transform: none;
            padding: 0;
            border: none;
            cursor: pointer;
            text-decoration: none;
            transition: gap 0.25s ease;
        }
        .btn-final::before {
            content: '→';
            width: 34px; height: 21px; min-width: 34px;
            border: 1.2px solid currentColor;
            border-radius: 94px;
            display: flex; align-items: center; justify-content: center;
            font-size: 11px;
            transition: background 0.25s ease, color 0.25s ease;
        }
        .btn-final:hover { gap: 26px; }
        .btn-final:hover::before { background: var(--blue); color: #fff; }

        /* ── Price CardSwap ─────────────────────────────── */
        .price-swap-wrap {
            position: relative;
            width: 100%;
            min-height: 580px;
            perspective: 900px;
            overflow: visible;
        }
        .swap-card {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            max-width: 440px;
            border: 1px solid var(--gray-200);
            border-radius: 16px;
            padding: 40px;
            background: #ffffff;
            transform-style: preserve-3d;
            will-change: transform;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            box-shadow: 0 30px 60px -24px rgba(0,0,0,0.18), 0 12px 28px -16px rgba(0,0,0,0.08);
        }
        .swap-card .btn-final { margin-top: 24px; }

        /* Plan Acompañamiento — fondo gris claro (destacado) */
        .swap-card[data-plan="acompanamiento"] {
            background: #ececee;
            border-color: rgba(0,0,0,0.08);
        }
        .swap-card.is-featured {
            border-color: #111111;
            box-shadow: 0 40px 80px -24px rgba(0,0,0,0.28), 0 16px 32px -12px rgba(0,0,0,0.12);
        }

        /* Plan Premium — fondo negro, texto claro */
        .swap-card[data-plan="premium"] {
            background: #0a0a0a;
            border-color: rgba(255,255,255,0.12);
        }
        .swap-card[data-plan="premium"] .final-price-label { color: rgba(255,255,255,0.55); }
        .swap-card[data-plan="premium"] .final-price-was { color: rgba(255,255,255,0.4); }
        .swap-card[data-plan="premium"] .final-price-was s { color: rgba(255,255,255,0.55); }
        .swap-card[data-plan="premium"] .final-price-number { color: #ffffff; }
        .swap-card[data-plan="premium"] .final-price-period { color: rgba(255,255,255,0.6); }
        .swap-card[data-plan="premium"] .final-features li { color: rgba(255,255,255,0.78); }
        .swap-card[data-plan="premium"] .final-features li::before { background: #80DEEA; }
        .swap-card[data-plan="premium"] .btn-final { color: #80DEEA; }
        .swap-card[data-plan="premium"] .btn-final::before { border-color: #80DEEA; }
        .swap-card[data-plan="premium"] .btn-final:hover::before { background: #80DEEA; color: #0a0a0a; }

        /* Precio tachado — "Precio normal 39,99€" encima del precio fundador */
        .final-price-was {
            font-family: var(--font-mono);
            font-size: 11px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: rgba(0,0,0,0.5);
            margin-bottom: 6px;
        }
        .final-price-was s {
            color: rgba(0,0,0,0.7);
            text-decoration-thickness: 1.5px;
            text-decoration-color: rgba(0,0,0,0.45);
            margin-left: 4px;
        }

        /* Badge "MÁS ELEGIDO" sobre la card destacada */
        .plan-badge {
            position: absolute;
            top: -13px;
            left: 50%;
            transform: translateX(-50%);
            display: inline-block;
            padding: 6px 14px;
            background: #111111;
            color: #ffffff;
            font-family: var(--font-mono);
            font-size: 10px;
            font-weight: 500;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            border-radius: 999px;
            white-space: nowrap;
            z-index: 2;
            box-shadow: 0 6px 16px rgba(0,0,0,0.18);
        }

        @media (max-width: 900px) {
            /* En móvil apilamos las cards verticalmente — sin animación GSAP
               que las coloca en diagonal y las saca por la derecha */
            .price-swap-wrap {
                min-height: auto !important;
                perspective: none !important;
                display: flex;
                flex-direction: column;
                gap: 18px;
                padding: 0 4px;
            }
            .swap-card {
                position: static !important;
                top: auto !important; left: auto !important;
                width: 100% !important;
                max-width: 100% !important;
                padding: 28px 24px !important;
                transform: none !important;
                opacity: 1 !important;
                margin: 0 !important;
                box-sizing: border-box;
            }
        }
        .final-disclaimer {
            font-family: 'DM Sans', var(--font-mono);
            font-size: 11px;
            color: rgba(255,255,255,0.5);
            text-align: center;
            letter-spacing: 0.02em;
        }

        /* ─────────────────── FOOTER ─────────────────── */
        footer {
            background: #111111;
            border-top: none;
        }
        .footer-inner {
            max-width: var(--max-w);
            margin: 0 auto;
            padding: 72px 40px 48px;
        }
        .footer-top {
            display: grid;
            grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 1fr;
            gap: 32px;
            padding-bottom: 60px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            margin-bottom: 40px;
        }
        .footer-brand .logo { margin-bottom: 20px; color: var(--white); }
        .footer-brand .logo:hover { color: rgba(255,255,255,0.7); }
        .footer-brand .logo-dot { display: none; }
        .footer-tagline {
            font-size: 14px;
            color: rgba(255,255,255,0.55);
            line-height: 1.7;
            max-width: 280px;
        }
        .footer-col h4 {
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #fff;
            margin-bottom: 20px;
        }
        .footer-col a {
            display: block;
            font-size: 14px;
            color: rgba(255,255,255,0.55);
            text-decoration: none;
            margin-bottom: 12px;
            transition: color var(--transition);
        }
        .footer-col a:hover { color: #fff; }
        .footer-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .footer-copy {
            font-size: 13px;
            color: rgba(255,255,255,0.4);
        }
        .footer-legal {
            display: flex;
            gap: 24px;
        }
        .footer-legal a {
            font-size: 13px;
            color: rgba(255,255,255,0.4);
            text-decoration: none;
            transition: color var(--transition);
        }
        .footer-legal a:hover { color: #fff; }

        /* ─────────────────── JOIN MODAL ─────────────────── */
        .modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.7);
            z-index: 2000;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .modal-overlay.open { display: flex; }
        .modal-box {
            background: var(--white);
            max-width: 560px;
            width: 100%;
            position: relative;
        }
        .modal-header {
            background: var(--black);
            padding: 48px 48px 32px;
        }
        .modal-title {
            font-size: 28px;
            font-weight: 700;
            letter-spacing: -0.03em;
            color: var(--white);
            margin-bottom: 8px;
        }
        .modal-subtitle {
            font-size: 14px;
            color: rgba(255,255,255,0.55);
            font-family: var(--font-mono);
        }
        .modal-close {
            position: absolute;
            top: 20px;
            right: 20px;
            background: none;
            border: none;
            color: rgba(255,255,255,0.5);
            font-size: 24px;
            cursor: pointer;
            padding: 4px 8px;
            transition: color var(--transition);
        }
        .modal-close:hover { color: var(--white); }
        .modal-body { padding: 40px 48px 48px; }
        .form-group { margin-bottom: 28px; }
        .form-label {
            display: block;
            font-family: var(--font-mono);
            font-size: 11px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--gray-600);
            margin-bottom: 10px;
        }
        .form-input {
            width: 100%;
            background: none;
            border: none;
            border-bottom: 1px solid var(--gray-200);
            padding: 12px 0;
            font-family: var(--font-main);
            font-size: 16px;
            color: var(--black);
            outline: none;
            transition: border-color var(--transition);
        }
        .form-input:focus { border-bottom-color: var(--black); }
        .form-input::placeholder { color: var(--gray-400); }
        .btn-submit {
            display: inline-flex;
            align-items: center;
            gap: 19px;
            width: auto;
            justify-content: center;
            background: transparent;
            color: var(--blue);
            font-family: var(--font-main);
            font-size: 16px;
            font-weight: 350;
            letter-spacing: -0.02em;
            line-height: 1.2;
            text-transform: none;
            padding: 0;
            border: none;
            cursor: pointer;
            margin-top: 8px;
            transition: gap 0.25s ease;
        }
        .btn-submit::before {
            content: '→';
            width: 34px; height: 21px; min-width: 34px;
            border: 1.2px solid currentColor;
            border-radius: 94px;
            display: flex; align-items: center; justify-content: center;
            font-size: 11px;
            transition: background 0.25s ease, color 0.25s ease;
        }
        .btn-submit:hover { gap: 26px; }
        .btn-submit:hover::before { background: var(--blue); color: #fff; }
        .form-note {
            font-family: var(--font-mono);
            font-size: 11px;
            color: var(--gray-400);
            text-align: center;
            margin-top: 16px;
            letter-spacing: 0.04em;
        }

        /* ─────────────────── FEATURE CARD EXTRAS ─────────────────── */
        .feature-tag {
            display: inline-block;
            font-family: var(--font-mono);
            font-size: 10px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--blue);
            border: 1px solid rgba(17,17,17,0.14);
            padding: 3px 8px;
            margin-bottom: 18px;
            border-radius: 5.4rem;
        }
        .feature-item:hover .feature-tag {
            border-color: var(--blue);
            color: var(--white);
            background: var(--blue);
        }
        .feature-meta { margin-top: 28px; }
        .feature-stat-row {
            display: flex;
            gap: 24px;
            margin-bottom: 14px;
        }
        .fstat {
            font-family: var(--font-mono);
            font-size: 12px;
            color: var(--gray-600);
            letter-spacing: 0.04em;
        }
        .fstat-num {
            font-weight: 700;
            color: var(--black);
            font-size: 14px;
        }
        .fstat-green { color: var(--green); font-weight: 700; }
        .feature-bar {
            height: 2px;
            background: var(--gray-200);
            width: 100%;
            overflow: hidden;
        }
        .feature-bar-fill {
            height: 100%;
            background: var(--black);
            width: 0%;
            transition: width 1.2s cubic-bezier(0.16,1,0.3,1);
        }
        .feature-item.bar-animate .feature-bar-fill { width: var(--bar-w, 80%); }

        /* ─────────────────── SCROLL REVEAL CLASSES ─────────────────── */
        .reveal-up {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.7s ease, transform 0.7s ease;
        }
        .reveal-up.visible { opacity: 1; transform: translateY(0); }

        /* Augen-style blur reveal */
        .reveal-blur {
            opacity: 0;
            filter: blur(8px);
            transform: translateY(20px);
            transition: opacity 0.7s ease, filter 0.6s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1);
        }
        .reveal-blur.in-view {
            opacity: 1;
            filter: blur(0);
            transform: translateY(0);
        }
        .reveal-blur:nth-child(2) { transition-delay: 0.1s; }
        .reveal-blur:nth-child(3) { transition-delay: 0.2s; }
        .reveal-blur:nth-child(4) { transition-delay: 0.3s; }

        .reveal-card {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1);
        }
        .reveal-card.visible { opacity: 1; transform: translateY(0); }

        .reveal-left {
            opacity: 0;
            transform: translateX(-48px);
            transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16,1,0.3,1);
        }
        .reveal-left.visible { opacity: 1; transform: translateX(0); }

        .reveal-right {
            opacity: 0;
            transform: translateX(48px);
            transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16,1,0.3,1);
        }
        .reveal-right.visible { opacity: 1; transform: translateX(0); }

        .reveal-scale {
            opacity: 0;
            transform: scale(0.88);
            transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16,1,0.3,1);
        }
        .reveal-scale.visible { opacity: 1; transform: scale(1); }

        /* ─────────────────── INTRO SCENE 3D ─────────────────── */
        #intro-scene {
            /* Sección larga: el scroll natural la atraviesa poco a poco,
               dando tiempo a que la animación ASCII/WebGL se reproduzca
               entera sin tener que hackear los eventos wheel. */
            height: 240vh; /* sceneH = 140vh */
            position: relative;
            background: #fff;
        }
        #intro-sticky {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            z-index: 4;
            will-change: opacity;
        }
        #intro-three {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background: transparent;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        /* Logo glow ring — CSS+JS, no Three.js overlay */
        #logo-glow-ring {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: min(56vw, 500px);
            height: min(56vw, 500px);
            border-radius: 50%;
            pointer-events: none;
            z-index: 3;
            --gx: 50%;
            --gy: 50%;
            --glow: 0;
        }
        #logo-glow-ring::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: radial-gradient(circle 130px at var(--gx) var(--gy),
                rgba(255,255,255,1) 0%,
                rgba(200,230,255,0.55) 35%,
                transparent 68%
            );
            -webkit-mask: radial-gradient(farthest-side,
                transparent 63%,
                black 70%,
                black 83%,
                transparent 90%
            );
            mask: radial-gradient(farthest-side,
                transparent 63%,
                black 70%,
                black 83%,
                transparent 90%
            );
            filter: blur(7px);
            opacity: var(--glow);
            transition: opacity 0.5s ease;
        }
        #intro-logo-wrap {
            position: relative;
            z-index: 2;
            width: min(50vw, 440px);
            transform-style: preserve-3d;
            will-change: transform;
            display: none; /* Three.js toma el control — ocultar desde el inicio para evitar flash */
        }
        #intro-logo-svg {
            width: 100%;
            filter: drop-shadow(0 0 40px rgba(91,159,255,0.35));
            transition: filter 0.3s;
            opacity: 0;
            pointer-events: none;
        }
        #intro-tagline {
            position: absolute;
            bottom: 13vh;
            left: 50%;
            transform: translateX(-50%);
            z-index: 3;
            font-family: var(--font-mono);
            font-size: 11px;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: rgba(0,0,0,0.38);
            white-space: nowrap;
        }
        #intro-scroll-hint {
            position: absolute;
            bottom: 7vh;
            left: 50%;
            transform: translateX(-50%);
            z-index: 200;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            opacity: 1;
            transition: opacity 0.4s;
        }
        #intro-scroll-hint span {
            font-family: var(--font-mono);
            font-size: 10px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #6e6e6e !important;
            font-weight: 500;
        }
        #intro-scroll-hint .scroll-arrow {
            width: 14px;
            height: 14px;
            color: #6e6e6e;
            stroke-width: 1;
            animation: scrollArrowBounce 1.6s ease-in-out infinite;
        }
        @keyframes scrollArrowBounce {
            0%,100% { transform: translateY(0);   opacity: 0.6; }
            50%      { transform: translateY(6px); opacity: 1;   }
        }
        /* Compat: si quedara algún .scroll-line antiguo en cache, lo ocultamos */
        .scroll-line { display: none; }
        /* Grid overlay on intro */
        .hero { position: relative; }
        .hero-left, .hero-right { position: relative; z-index: 2; }

        /* ─────────────────── SCROLL VIDEO (curtain reveal) ─────────────────── */
        #scroll-video-wrap {
            height: 170vh;
            position: relative;
            background: var(--color-offBlack);
            z-index: 2;
        }
        #scroll-video-sticky {
            position: sticky;
            top: 0;
            height: 100vh;
            overflow: hidden;
            background: var(--color-offBlack);
        }
        /* Curtain panels */
        .svc-curtain {
            position: absolute;
            left: 0; right: 0;
            height: 51%;
            background: #fff;
            z-index: 10;
            will-change: transform;
        }
        .svc-curtain.svc-top { top: 0; }
        .svc-curtain.svc-bot { bottom: 0; }
        /* Seam label */
        .svc-seam {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            z-index: 11;
            font-family: var(--font-mono);
            font-size: 10px;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            color: var(--blue);
            white-space: nowrap;
            pointer-events: none;
        }
        /* Content revealed */
        .svc-content {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 clamp(32px, 8vw, 120px);
        }
        .svc-header {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: clamp(28px, 4vh, 52px);
            padding-bottom: 18px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        .svc-header-label {
            font-family: var(--font-mono);
            font-size: 9px;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.3);
        }
        .svc-header-count {
            font-family: var(--font-mono);
            font-size: 9px;
            letter-spacing: 0.12em;
            color: rgba(255,255,255,0.18);
        }
        .svc-item {
            display: grid;
            grid-template-columns: 28px clamp(90px,14vw,140px) 1fr;
            align-items: baseline;
            gap: 0 clamp(12px,3vw,40px);
            padding: clamp(12px,1.8vh,20px) 0;
            border-bottom: 1px solid rgba(255,255,255,0.07);
            will-change: opacity, transform;
        }
        .svc-item:first-child { border-top: 1px solid rgba(255,255,255,0.07); }
        .svc-num {
            font-family: var(--font-mono);
            font-size: 9px;
            letter-spacing: 0.1em;
            color: rgba(255,255,255,0.2);
        }
        .svc-tag {
            font-family: var(--font-mono);
            font-size: 9px;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--blue);
        }
        .svc-title {
            font-size: clamp(15px, 2.4vw, 30px);
            font-weight: 600;
            letter-spacing: -0.025em;
            color: #fff;
            margin: 0;
            line-height: 1.1;
        }
        @media (max-width: 600px) {
            .svc-item { grid-template-columns: 28px 1fr; }
            .svc-tag { display: none; }
        }

                /* Mobile */
        @media (max-width: 768px) {
            /* Scroll video: disable sticky scroll effect on mobile, show as static block */
            #scroll-video-wrap { display: block !important; height: auto !important; }
            #scroll-video-sticky { position: static !important; height: auto !important; }
            /* Ocultar las cortinas blancas: tapan el contenido en móvil */
            .svc-curtain, .svc-curtain.svc-top, .svc-curtain.svc-bot, .svc-curtain-left, .svc-curtain-right { display: none !important; }
            .svc-seam { display: none !important; }
            .svc-content { position: static !important; opacity: 1 !important; transform: none !important; clip-path: none !important; -webkit-clip-path: none !important; padding: 56px 20px !important; }
            .membresia-grid { grid-template-columns: 1fr !important; gap: 40px 0 !important; }
            /* Intro scene shorter on mobile — still enough room for logo + texts */
            #intro-scene { height: 220vh; }
        }

        /* ─────────────────── HORIZONTAL MARQUEE SECTION ─────────────────── */
        .marquee-section {
            background: var(--color-offBlack);
            padding: 64px 0;
            overflow: hidden;
            position: relative;
            z-index: 2;
            isolation: isolate;
        }
        .marquee-track {
            display: flex;
            gap: 0;
            animation: marqueeScroll 20s linear infinite;
            white-space: nowrap;
        }
        .marquee-track.reverse { animation-direction: reverse; animation-duration: 28s; }
        .marquee-item {
            display: inline-flex;
            align-items: center;
            gap: 20px;
            padding: 0 48px;
            font-family: var(--font-main);
            font-size: clamp(28px, 4vw, 52px);
            font-weight: 700;
            letter-spacing: -0.03em;
            color: rgba(255,255,255,0.18);
            flex-shrink: 0;
            transition: color 0.2s;
        }
        .marquee-item:hover {
            color: rgba(255,255,255,0.9);
        }
        .marquee-dot {
            width: 8px; height: 8px;
            background: var(--blue);
            border-radius: 50%;
            flex-shrink: 0;
        }
        @keyframes marqueeScroll {
            from { transform: translateX(0); }
            to   { transform: translateX(-50%); }
        }

        /* ─────────────────── FLOATING NUMBERS (STATS STRIP) ─────────────────── */
        .stats-strip {
            background: var(--white);
            border-top: 1px solid var(--gray-200);
            border-bottom: 1px solid var(--gray-200);
            padding: 60px 40px;
            position: relative;
            z-index: 6; /* slides over the fixed flower (z-index:4) */
            margin-top: -90px; /* overlap: appears during final flower fade */
        }
        .stats-strip-inner {
            max-width: var(--max-w);
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 40px;
        }
        .stat-block { text-align: center; }
        .stat-num {
            font-size: clamp(40px, 5vw, 72px);
            font-weight: 700;
            letter-spacing: -0.04em;
            line-height: 1;
            display: block;
        }
        .stat-label {
            font-family: var(--font-mono);
            font-size: 11px;
            color: var(--gray-600);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-top: 8px;
            display: block;
        }
        .stat-block:nth-child(2) .stat-num { color: var(--black); }
        .stat-block:nth-child(4) .stat-num { color: var(--black); }

        /* ─────────────────── SCROLL PROGRESS BAR ─────────────────── */
        #scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            height: 2px;
            background: var(--green);
            z-index: 9999;
            width: 0%;
            transition: width 0.1s linear;
        }

        /* ─────────────────── FILM GRAIN ─────────────────── */
        #grain-canvas {
            display: none;
        }

        /* ─────────────────── INTRO HERO LEFT TEXT ─────────────────── */
        #intro-hero-left {
            position: absolute;
            left: 5%;
            top: 50%;
            transform: translateY(-50%);
            transform-origin: left center;
            z-index: 200;
            pointer-events: none;
        }
        .ihl-line {
            display: block;
            font-family: var(--font-main);
            font-size: clamp(36px, 5.5vw, 80px);
            font-weight: 700;
            line-height: 1.1;
            letter-spacing: -0.01em;
            color: rgba(0,0,0,0.85);
        }
        .ihl-line em {
            font-style: italic;
            color: var(--green);
        }

        /* ─────────────────── INTRO RIGHT TEXT ─────────────────── */
        #intro-text-overlay {
            position: absolute;
            right: 5%;
            top: 50%;
            transform: translateY(-50%);
            z-index: 200;
            pointer-events: none;
            width: clamp(260px, 28vw, 320px);
            background: rgba(255,255,255,0.65);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 8px;
            padding: 16px 20px;
        }
        .tw-block {
            font-family: var(--font-mono);
            font-size: 11px;
            line-height: 1.9;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: rgba(0,0,0,0.50);
            word-break: break-word;
        }

        /* ScrollReveal word spans */
        .sr-word {
            display: inline-block;
            will-change: opacity, filter;
            opacity: 0;
            filter: blur(4px);
        }

        /* ─────────────────── CHROMATIC ABERRATION OVERLAY ─────────────────── */
        #chroma-r, #chroma-b { display: none; }

        /* ─────────────────── HERO HEADLINE SPLIT ─────────────────── */
        .hero h1 .line-wrap {
            overflow: hidden;
            display: block;
            line-height: 1.15;
        }
        .hero h1 .line-inner {
            display: block;
            transform: translateY(108%);
            opacity: 0;
            transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
                        opacity 0.6s ease;
        }
        .hero h1.lines-revealed .line-inner          { transform: translateY(0); opacity: 1; }
        .hero h1.lines-revealed .line-inner:nth-child(2) { transition-delay: 0.18s; }
        .hero h1.lines-revealed .line-inner:nth-child(3) { transition-delay: 0.34s; }

        /* ─────────────────── MAGNETIC BUTTONS ─────────────────── */
        .btn-primary, .btn-ghost {
            transition: transform 0.4s cubic-bezier(0.16,1,0.3,1),
                        background var(--transition), color var(--transition),
                        border-color var(--transition);
        }

        /* ─────────────────── SECTION LINE REVEAL ─────────────────── */
        .section-line {
            display: block;
            height: 1px;
            background: var(--green);
            width: 0%;
            margin-bottom: 28px;
            transition: width 1.2s cubic-bezier(0.16,1,0.3,1);
        }
        .section-line.revealed { width: 48px; }

        /* ─────────────────── CLIP-PATH REVEAL ─────────────────── */
        .reveal-clip {
            clip-path: inset(0 0 0% 0); /* always visible — JS adds animation on scroll */
            transition: clip-path 0.9s cubic-bezier(0.16,1,0.3,1);
        }
        .reveal-clip.ready {
            clip-path: inset(0 0 100% 0); /* hidden until revealed */
        }
        .reveal-clip.ready.visible { clip-path: inset(0 0 0% 0); }

        /* ─────────────────── LOADING SCREEN ─────────────────── */
        #loading-screen {
            position: fixed;
            inset: 0;
            background: #fff;
            z-index: 999999;
            opacity: 1;
            transition: opacity 0.8s ease;
        }
        #loading-screen.fade-out { opacity: 0; pointer-events: none; }

        /* ─────────────────── RESPONSIVE ─────────────────── */
        @media (max-width: 900px) {
            .hero { grid-template-columns: 1fr; gap: 48px; min-height: auto; }
            .hero-right { display: none; }
            .features-grid { grid-template-columns: 1fr; }
            .feature-item:nth-child(odd) { border-right: none; }
            .feature-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--gray-200); }
            .feature-item:last-child { border-bottom: none; }
            .pricing-layout { grid-template-columns: 1fr; }
            #faq { padding: 0 16px; background: #f5f5f7; }
            .faq-inner { padding: 48px 24px; background: #111111; }
            .faq-layout { grid-template-columns: 1fr; }
            .faq-sticky { position: static; }
            .final-cta-inner { grid-template-columns: 1fr; }
            .footer-top { grid-template-columns: 1fr 1fr; }
            .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
        }
        @media (max-width: 600px) {
            /* ── Kill horizontal overflow completely ── */
            html, body { overflow-x: clip !important; }
            #chroma-r, #chroma-b { display: none !important; }

            /* Base */
            .header-inner { padding: 0 16px; height: 56px; }
            nav { gap: 8px; }
            nav a:not(:last-child):not(.btn-nav):not([class*="min-nav"]) { display: none; }
            .btn-nav { padding: 8px 14px; font-size: 13px; }
            .announce-bar { font-size: 11px; padding: 8px 16px; white-space: normal; text-align: center; }

            /* Hero */
            .hero { padding: 0 20px; min-height: auto; max-width: 100%; overflow: hidden; }
            .hero-left { padding: 48px 0 48px; }
            .hero h1 { font-size: clamp(36px, 10vw, 56px) !important; }
            .hero-desc { font-size: 15px; margin-bottom: 32px; }
            .hero-actions { flex-direction: column; gap: 12px; width: 100%; }
            .hero-actions .btn-primary,
            .hero-actions .btn-ghost { width: 100%; text-align: center; justify-content: center; }

            /* Sections */
            .section { padding: 56px 20px; max-width: 100%; box-sizing: border-box; }
            .section-full { padding: 56px 0; overflow: hidden; }
            .section-inner { padding: 56px 20px; max-width: 100%; box-sizing: border-box; }
            .section-title { font-size: clamp(28px, 9vw, 44px) !important; }
            .section-desc { font-size: 15px; }

            /* Stats — 2×2 grid instead of 4 in a row */
            .stats-strip { padding: 40px 20px; overflow: hidden; }
            .stats-strip-inner {
                grid-template-columns: 1fr 1fr !important;
                gap: 24px !important;
            }
            .stat-num { font-size: clamp(32px, 9vw, 48px); }
            .stat-label { font-size: 10px; }

            /* Ticker */
            .ticker { overflow: hidden !important; max-width: 100vw; }

            /* Features */
            .feature-item { padding: 24px 16px; }
            .feature-number { font-size: 28px; }



            /* Pricing */
            .pricing-inner { padding: 56px 20px; }
            .pricing-card-header,
            .pricing-card-price,
            .pricing-card-features,
            .pricing-card-action { padding-left: 20px; padding-right: 20px; }
            .price-amount { font-size: 52px; }
            .btn-final { padding: 8px 0; font-size: 15px; }

            /* FAQ */
            .faq-question { padding: 16px 14px; font-size: 14px; }
            .faq-answer { padding: 0 14px 16px; font-size: 14px; }

            /* Final CTA */
            .final-cta-inner { padding: 56px 20px; }

            /* Footer */
            .footer-inner { padding: 48px 20px 32px; }
            .footer-top { grid-template-columns: 1fr; gap: 32px; }
            .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
            .footer-copy { font-size: 11px; }

            /* Modals */
            .modal-box { margin: 12px; border-radius: 16px; max-height: calc(100svh - 24px); width: calc(100vw - 24px); max-width: calc(100vw - 24px); }
            .modal-header, .modal-body { padding-left: 20px; padding-right: 20px; }
            .legal-box { margin: 12px; border-radius: 16px; max-height: calc(100svh - 24px); width: calc(100vw - 24px); }

            /* Chat widget — mobile */
            #chat-widget {
                bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
                right: 12px !important;
            }
            #chat-panel {
                position: fixed !important;
                bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
                right: 12px !important;
                left: 12px !important;
                width: auto !important;
                max-width: none !important;
                height: auto !important;
                max-height: calc(100svh - 160px) !important;
                min-height: 260px !important;
                border-radius: 16px !important;
                box-sizing: border-box !important;
            }
            #chat-messages {
                flex: 1 !important;
                min-height: 0 !important;
                overflow-y: auto !important;
            }
            #chat-input-area {
                flex-shrink: 0 !important;
                padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
                box-sizing: border-box !important;
            }

            /* Intro */
            #intro-logo-wrap { width: min(72vw, 260px) !important; }
            #intro-sticky {
                overflow: hidden;
                top: 36px !important;
                height: calc(100vh - 36px) !important;
            }
            #intro-text-overlay {
                top: 50% !important;
                transform: translateY(-50%) !important;
                width: clamp(160px, 42vw, 220px) !important;
                right: 3% !important;
                background: rgba(255,255,255,0.72) !important;
                backdrop-filter: blur(8px) !important;
                -webkit-backdrop-filter: blur(8px) !important;
                border-radius: 6px !important;
                padding: 10px 12px !important;
            }

            /* Marquee sections */
            .marquee-section { overflow: hidden !important; max-width: 100vw; }
        }

        @media (max-width: 380px) {
            .section-title { font-size: 28px !important; }
            .hero h1 { font-size: 32px !important; }
            .btn-nav { padding: 7px 10px; font-size: 11px; }
            .stats-strip-inner { gap: 16px !important; }
        }
    
        /* ── ASCII CALENDULA ────────────────────────────────────────── */
        #ascii-scene {
            position: absolute;
            inset: 0;
            z-index: 50;
            overflow: hidden;
            pointer-events: none;
            background: #fff;
            -webkit-mask-image: linear-gradient(to bottom, black 82%, transparent 100%);
            mask-image: linear-gradient(to bottom, black 82%, transparent 100%);
        }
        #ascii-scene table {
            position: absolute;
            top: 0; left: 0;
            color: #111;
            pointer-events: none;
            background: transparent;
        }
        /* ── /ASCII CALENDULA ───────────────────────────────────────── */

/* ── block 02 ─────────────────────────────────── */

        #cookie-banner {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 100000; /* por encima del botón de WhatsApp (99999) */
            width: 260px;
            background: rgba(255,255,255,0.45);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 4px;
            font-family: var(--font-mono);
            padding: 14px 16px 12px;
            transform: translateY(120px);
            opacity: 0;
            transition: transform 0.55s cubic-bezier(0.16,1,0.3,1), opacity 0.55s ease;
            pointer-events: none;
        }
        #cookie-banner.show {
            transform: translateY(0);
            opacity: 1;
            pointer-events: auto;
        }
        .ck-label {
            font-size: 9px;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: rgba(0,0,0,0.3);
            margin-bottom: 6px;
        }
        .ck-text {
            font-family: var(--font-main);
            font-size: 12px;
            line-height: 1.5;
            color: rgba(0,0,0,0.5);
            margin-bottom: 12px;
        }
        .ck-actions {
            display: flex;
            gap: 6px;
        }
        .ck-accept {
            flex: 1;
            background: #111;
            color: #fff;
            border: none;
            border-radius: 3px;
            font-family: var(--font-main);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.02em;
            padding: 7px 0;
            cursor: pointer;
            transition: opacity 0.2s;
        }
        .ck-accept:hover { opacity: 0.85; }
        .ck-reject {
            background: transparent;
            color: rgba(0,0,0,0.35);
            border: 1px solid rgba(0,0,0,0.1);
            border-radius: 3px;
            font-family: var(--font-main);
            font-size: 11px;
            padding: 7px 10px;
            cursor: pointer;
            transition: color 0.2s, border-color 0.2s;
        }
        .ck-reject:hover { color: #000; border-color: rgba(0,0,0,0.3); }

        /* ── Legal modal ─────────────────────────────── */
        #legal-overlay {
            position: fixed; inset: 0;
            z-index: 10000;
            background: rgba(0,0,0,0.82);
            backdrop-filter: blur(6px);
            display: flex; align-items: center; justify-content: center;
            opacity: 0; pointer-events: none;
            transition: opacity 0.3s ease;
        }
        #legal-overlay.show { opacity: 1; pointer-events: auto; }
        #legal-box {
            background: #0d0d0d;
            border: 1px solid rgba(255,255,255,0.10);
            border-radius: 4px;
            width: min(680px, 92vw);
            max-height: 80vh;
            display: flex; flex-direction: column;
            overflow: hidden;
        }
        #legal-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 20px 28px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
            flex-shrink: 0;
        }
        #legal-title {
            font-family: var(--font-mono);
            font-size: 11px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--green);
        }
        #legal-close {
            background: none; border: none; color: rgba(255,255,255,0.4);
            font-size: 22px; cursor: pointer; line-height: 1;
            transition: color 0.2s;
        }
        #legal-close:hover { color: #fff; }
        #legal-body {
            padding: 28px;
            overflow-y: auto;
            font-family: var(--font-main);
            font-size: 14px;
            line-height: 1.75;
            color: rgba(255,255,255,0.65);
        }
        #legal-body h2 {
            font-size: 18px;
            font-weight: 700;
            color: #fff;
            margin: 0 0 6px;
            letter-spacing: -0.02em;
        }
        #legal-body h3 {
            font-size: 13px;
            font-weight: 600;
            color: rgba(255,255,255,0.9);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin: 28px 0 8px;
        }
        #legal-body p { margin: 0 0 14px; }
        #legal-body a { color: var(--green); }
        #legal-body strong { color: rgba(255,255,255,0.9); }
        #legal-body ul { padding-left: 18px; margin: 0 0 14px; }
        #legal-body ul li { margin-bottom: 6px; }
        #legal-body .legal-date {
            font-family: var(--font-mono);
            font-size: 10px;
            letter-spacing: 0.12em;
            color: rgba(0,0,0,0.3);
            margin-bottom: 24px;
        }

/* ── block 03 ─────────────────────────────────── */

        /* ── Chat Widget (hidden — uncomment display to restore) ── */
        #chat-widget {
            display: none !important;
            position: fixed;
            bottom: 28px;
            right: 28px;
            z-index: 9999;
            font-family: var(--font-main);
        }
        #chat-toggle {
            width: 58px;
            height: 58px;
            background: var(--black);
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 24px rgba(0,0,0,0.35);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            position: relative;
        }
        #chat-toggle:hover { transform: scale(1.07); box-shadow: 0 6px 32px rgba(0,0,0,0.4); }
        #chat-toggle svg { fill: white; transition: opacity 0.2s; }
        #chat-toggle .icon-close { display: none; }
        #chat-widget.open #chat-toggle .icon-chat { display: none; }
        #chat-widget.open #chat-toggle .icon-close { display: block; }
        #chat-online-badge {
            position: absolute;
            top: 3px; right: 3px;
            width: 14px; height: 14px;
            background: #4CAF50;
            border: 2px solid white;
            border-radius: 50%;
            display: none;
        }
        #chat-online-badge.active { display: block; }

        /* ── Panel ── */
        #chat-panel {
            position: absolute;
            bottom: 72px;
            right: 0;
            width: 340px;
            height: 500px;
            background: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 20px;
            box-shadow: 0 12px 48px rgba(0,0,0,0.18);
            display: none;
            flex-direction: column;
            overflow: hidden;
            transform: translateY(12px);
            opacity: 0;
            transition: transform 0.28s cubic-bezier(0.16,1,0.3,1), opacity 0.22s ease;
        }
        #chat-widget.open #chat-panel {
            display: flex;
            transform: translateY(0);
            opacity: 1;
        }
        /* header */
        #chat-header {
            background: var(--black);
            color: white;
            padding: 16px 18px 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
        }
        #chat-header-dot {
            width: 9px; height: 9px;
            background: var(--green);
            border-radius: 50%;
            flex-shrink: 0;
        }
        #chat-header-title { font-size: 14px; font-weight: 600; flex: 1; }
        #chat-online-count { font-size: 12px; color: rgba(255,255,255,0.5); font-family: var(--font-mono); }

        /* screens */
        #chat-screen-login,
        #chat-screen-room { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
        #chat-screen-login {
            align-items: flex-start;
            justify-content: center;
            padding: 32px 28px 28px;
            gap: 0;
            background: #fff;
        }
        #chat-login-eyebrow {
            font-family: var(--font-mono);
            font-size: 9px;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: rgba(0,0,0,0.35);
            margin-bottom: 16px;
        }
        #chat-login-title {
            font-size: 22px;
            font-weight: 600;
            color: var(--black);
            text-align: left;
            line-height: 1.2;
            letter-spacing: -0.03em;
            margin-bottom: 6px;
        }
        #chat-login-sub {
            font-size: 12px;
            color: rgba(0,0,0,0.4);
            text-align: left;
            margin-bottom: 28px;
            line-height: 1.5;
        }
        #chat-screen-login input {
            width: 100%;
            padding: 10px 0;
            border: none;
            border-bottom: 1px solid rgba(0,0,0,0.15);
            border-radius: 0;
            font-family: var(--font-main);
            font-size: 13px;
            outline: none;
            transition: border-color 0.2s;
            background: transparent;
            margin-bottom: 18px;
            color: var(--black);
        }
        #chat-screen-login input::placeholder { color: rgba(0,0,0,0.3); }
        #chat-screen-login input:focus { border-bottom-color: var(--black); }
        #chat-code-input { letter-spacing: 0.08em; font-family: var(--font-mono) !important; font-size: 12px !important; }
        #chat-join-btn {
            width: 100%;
            padding: 14px;
            background: var(--black);
            color: white;
            border: none;
            border-radius: 0;
            font-family: var(--font-main);
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            cursor: pointer;
            transition: opacity 0.2s;
            margin-top: 8px;
        }
        #chat-join-btn:hover { opacity: 0.8; }
        #chat-error-msg {
            font-size: 11px;
            color: #c0392b;
            text-align: left;
            display: none;
            font-weight: 500;
            margin-top: -10px;
            margin-bottom: 8px;
        }
        #chat-error-msg.show { display: block; }
        #chat-cta-block {
            width: 100%;
            border-top: 1px solid rgba(0,0,0,0.08);
            padding: 18px 0 0;
            text-align: left;
            margin-top: 20px;
        }
        #chat-cta-block p {
            font-size: 11.5px;
            color: rgba(0,0,0,0.4);
            margin-bottom: 10px !important;
            line-height: 1.5;
        }
        #chat-cta-block strong { color: var(--black); font-weight: 600; }
        #chat-cta-link {
            display: inline-block;
            background: transparent;
            color: var(--black);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            padding: 0;
            border-bottom: 1px solid var(--black);
            text-decoration: none;
            letter-spacing: -0.01em;
            transition: transform 0.15s;
        }
        #chat-cta-link:hover { transform: scale(1.04); }

        /* messages */
        #chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 14px 14px 6px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        #chat-messages::-webkit-scrollbar { width: 4px; }
        #chat-messages::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }
        .chat-msg { display: flex; flex-direction: row; gap: 8px; align-items: flex-end; margin-bottom: 4px; }
        .chat-msg.me { flex-direction: row-reverse; }
        .chat-msg-content { display: flex; flex-direction: column; gap: 2px; max-width: 82%; }
        .chat-msg.me .chat-msg-content { align-items: flex-end; }
        .chat-msg .chat-name { font-size: 10px; color: var(--gray-400); font-family: var(--font-mono); padding: 0 4px; }
        .chat-msg .chat-bubble {
            padding: 9px 13px;
            border-radius: 14px;
            font-size: 13.5px;
            line-height: 1.45;
            word-break: break-word;
        }
        .chat-msg:not(.me) .chat-bubble { background: #f1f1f1; color: var(--black); border-bottom-left-radius: 4px; }
        .chat-msg.me .chat-bubble { background: var(--black); color: white; border-bottom-right-radius: 4px; }
        .chat-msg .chat-time { font-size: 10px; color: var(--gray-400); padding: 0 4px; font-family: var(--font-mono); }
        .chat-system {
            text-align: center;
            font-size: 11px;
            color: var(--gray-400);
            font-family: var(--font-mono);
            padding: 2px 0;
        }

        /* input area */
        #chat-input-area {
            padding: 10px 12px;
            border-top: 1px solid #f0f0f0;
            display: flex;
            gap: 8px;
            flex-shrink: 0;
            background: #fafafa;
        }
        #chat-input {
            flex: 1;
            padding: 10px 13px;
            border: 1.5px solid var(--gray-200);
            border-radius: 22px;
            font-family: var(--font-main);
            font-size: 13.5px;
            outline: none;
            background: white;
            transition: border-color 0.2s;
        }
        #chat-input:focus { border-color: var(--black); }
        #chat-send-btn {
            width: 40px; height: 40px;
            background: var(--black);
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: background 0.2s, transform 0.15s;
        }
        #chat-send-btn:hover { background: #222; transform: scale(1.05); }
        #chat-send-btn svg { width: 16px; height: 16px; fill: white; }

        /* ── GIF panel ── */
        #chat-gif-panel {
            display: none; flex-direction: column; gap: 6px;
            border-top: 1px solid #f0f0f0;
            padding: 8px 12px;
            max-height: 200px;
            background: #fafafa;
            flex-shrink: 0;
        }
        #chat-gif-panel.open { display: flex; }
        #chat-gif-search {
            padding: 7px 10px; border: 1px solid rgba(0,0,0,0.15);
            border-radius: 20px; font-size: 12px; outline: none;
            font-family: var(--font-main); background: #fff; flex-shrink: 0;
        }
        #chat-gif-grid {
            display: grid; grid-template-columns: repeat(3, 1fr);
            gap: 4px; overflow-y: auto;
        }
        #chat-gif-grid img {
            width: 100%; aspect-ratio: 1; object-fit: cover;
            border-radius: 4px; cursor: pointer; transition: opacity 0.15s;
        }
        #chat-gif-grid img:hover { opacity: 0.82; }
        #chat-gif-btn {
            width: 34px; height: 34px; background: none; border: none;
            border-radius: 6px; cursor: pointer; font-size: 10px; font-weight: 700;
            color: rgba(0,0,0,0.35); flex-shrink: 0; transition: background 0.15s;
            font-family: var(--font-mono); letter-spacing: -0.5px;
        }
        #chat-gif-btn:hover, #chat-gif-btn.active { background: rgba(0,0,0,0.07); color: rgba(0,0,0,0.7); }
        #chat-img-btn {
            width: 34px; height: 34px; background: none; border: none;
            border-radius: 6px; cursor: pointer; color: rgba(0,0,0,0.35);
            flex-shrink: 0; display: flex; align-items: center; justify-content: center;
            transition: background 0.15s;
        }
        #chat-img-btn:hover { background: rgba(0,0,0,0.07); color: rgba(0,0,0,0.7); }
        #chat-img-btn svg { width: 16px; height: 16px; }
        #chat-img-btn.uploading { opacity: 0.4; pointer-events: none; }
        .chat-bubble-img {
            max-width: 180px; border-radius: 8px; display: block;
            cursor: zoom-in; transition: opacity 0.15s;
        }
        .chat-bubble-img:hover { opacity: 0.88; }
        .chat-bubble-img.expanded { max-width: 100%; cursor: zoom-out; }

        /* ── Profile screen ── */
        #chat-screen-profile { flex: 1; display: flex; flex-direction: column; overflow-y: auto; padding: 20px; gap: 12px; }
        #chat-screen-profile h3 { font-size: 14px; font-weight: 700; text-align: center; margin-bottom: 4px; }
        #chat-screen-profile p { font-size: 12px; color: var(--gray-600); text-align: center; margin-bottom: 8px; }
        .profile-avatar-picker { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 4px; }
        .avatar-opt {
            width: 40px; height: 40px; border-radius: 50%; border: 2px solid transparent;
            font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center;
            background: #f5f5f5; transition: border-color 0.15s, transform 0.15s;
        }
        .avatar-opt:hover { transform: scale(1.1); }
        .avatar-opt.selected { border-color: var(--black); transform: scale(1.1); }
        .profile-input {
            width: 100%; padding: 10px 13px;
            border: 1.5px solid var(--gray-200); border-radius: 10px;
            font-family: var(--font-main); font-size: 13px; outline: none;
            transition: border-color 0.2s;
        }
        .profile-input:focus { border-color: var(--black); }
        .profile-days-row { display: flex; gap: 8px; align-items: center; }
        .profile-days-row label { font-size: 12px; color: var(--gray-600); flex-shrink: 0; }
        #chat-save-profile-btn {
            width: 100%; padding: 12px; background: var(--black); color: white;
            border: none; border-radius: 10px; font-family: var(--font-main);
            font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 4px;
        }
        #chat-skip-profile { text-align: center; font-size: 12px; color: var(--gray-400); cursor: pointer; text-decoration: underline; }

        /* ── Avatar in messages ── */
        .chat-avatar {
            width: 30px; height: 30px; border-radius: 50%;
            background: #f0f0f0; flex-shrink: 0;
            overflow: hidden;
        }
        .chat-avatar img { width: 100%; height: 100%; display: block; }

        /* ── Profile view popup ── */
        #profile-popup {
            position: fixed;
            background: #111; color: white; border: 1px solid rgba(255,255,255,0.12);
            border-radius: 16px; padding: 20px; width: 200px;
            box-shadow: 0 12px 40px rgba(0,0,0,0.5);
            z-index: 99999; display: none;
        }

        /* ── Push notification banner ── */
        #push-banner {
            background: #000; color: white; padding: 10px 16px;
            display: flex; align-items: center; gap: 10px;
            font-size: 12px; border-bottom: 1px solid rgba(255,255,255,0.1);
            flex-shrink: 0; display: none;
        }
        #push-banner.show { display: flex; }
        #push-banner button {
            padding: 5px 12px; border: none; border-radius: 6px;
            font-size: 11px; font-weight: 700; cursor: pointer;
        }
        #push-enable-btn { background: var(--green); color: #000; }
        #push-later-btn { background: transparent; color: rgba(255,255,255,0.5); }

        /* ── PWA install banner ── */
        #pwa-banner {
            position: fixed; top: 0; left: 0; right: 0;
            background: #000; color: white;
            padding: 12px 16px; display: none; align-items: center;
            gap: 10px; box-shadow: 0 2px 16px rgba(0,0,0,0.4); z-index: 99997;
            border-bottom: 1px solid rgba(91,159,255,0.3);
        }
        #pwa-banner.show { display: flex; }
        #pwa-banner .pwa-icon { font-size: 28px; flex-shrink: 0; }
        #pwa-banner .pwa-text { flex: 1; }
        #pwa-banner .pwa-text strong { font-size: 13px; display: block; margin-bottom: 2px; }
        #pwa-banner .pwa-text span { font-size: 11px; color: rgba(255,255,255,0.5); }
        #pwa-install-btn { background: var(--green); color: #000; border: none; border-radius: 8px; padding: 8px 14px; font-size: 12px; font-weight: 700; cursor: pointer; flex-shrink: 0; }
        #pwa-close-btn { background: none; border: none; color: rgba(255,255,255,0.4); cursor: pointer; font-size: 18px; flex-shrink: 0; }

        /* offline notice */
        #chat-offline-notice {
            padding: 10px 14px;
            background: #fff8e1;
            border-bottom: 1px solid #ffe082;
            font-size: 12px;
            color: #7c6000;
            text-align: center;
            display: none !important;
        }
        #chat-offline-notice.show { display: block !important; }

        @media (max-width: 480px) {
            #chat-panel { width: calc(100vw - 32px); right: -14px; }
        }

/* ── block 04 ─────────────────────────────────── */

        /* ─────────────────── PROFILE CARDS SECTION ─────────────────── */
        .pc-section {
            background: #060606;
            padding: 80px 0 100px;
            overflow: hidden;
        }
        .pc-label {
            text-align: center;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.22);
            margin-bottom: 52px;
            font-family: var(--font-main);
        }
        .pc-grid {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            gap: 32px;
            flex-wrap: wrap;
            padding: 20px 40px 20px;
            max-width: 1060px;
            margin: 0 auto;
        }

        /* ── Wrapper: holds CSS vars, behind glow + shell ── */
        .pc-wrap {
            position: relative;
            width: 300px;
            height: 420px;
            flex-shrink: 0;
            --icon: none;
            --inner-gradient: linear-gradient(145deg, #1a0a4080 0%, #06b6d444 100%);
            --behind-glow-color: rgba(6,182,212,0.67);
            --behind-glow-size: 55%;
            --rotate-x: 0deg;
            --rotate-y: 0deg;
            --pointer-x: 50%;
            --pointer-y: 50%;
            --background-x: 50%;
            --background-y: 50%;
            --pointer-from-center: 0;
            --pointer-from-top: 0.5;
            --pointer-from-left: 0.5;
        }

        /* ── Behind glow (leaks around card) ── */
        .pc-behind {
            position: absolute;
            inset: -30px;
            border-radius: 50px;
            background: radial-gradient(
                var(--behind-glow-size) var(--behind-glow-size) at var(--pointer-x) var(--pointer-y),
                var(--behind-glow-color) 0%,
                transparent 100%
            );
            opacity: calc(var(--pointer-from-center) * 0.9);
            filter: blur(24px);
            z-index: 0;
            pointer-events: none;
            will-change: opacity;
        }

        /* ── Shell: perspective wrapper, receives pointer events ── */
        .pc-shell {
            position: relative;
            width: 100%;
            height: 100%;
            perspective: 900px;
            perspective-origin: 50% 50%;
            z-index: 1;
            cursor: pointer;
        }

        /* ── Card: the visible face ── */
        .pc-card-face {
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: 20px;
            overflow: hidden;
            transform-style: preserve-3d;
            box-shadow:
                0 10px 40px rgba(0,0,0,0.75),
                inset 0 0 0 1px rgba(255,255,255,0.08);
            transition: box-shadow 0.4s ease;
        }
        .pc-shell.active .pc-card-face {
            box-shadow:
                0 26px 60px rgba(0,0,0,0.85),
                0 0 50px rgba(6,182,212,0.18),
                inset 0 0 0 1px rgba(255,255,255,0.14);
        }

        /* ── Inside: rotated layer via CSS vars ── */
        .pc-inside {
            position: absolute;
            inset: 0;
            transform: rotateX(var(--rotate-y)) rotateY(var(--rotate-x));
            transform-origin: center;
            transform-style: preserve-3d;
            border-radius: 20px;
            overflow: hidden;
            will-change: transform;
        }

        /* ── Avatar: full-bleed photo background ── */
        .pc-avatar-fill {
            position: absolute;
            inset: 0;
            z-index: 0;
        }
        .pc-avatar-fill img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 15%;
            display: block;
        }

        /* ── Inner gradient color tint (blended over photo) ── */
        .pc-inner-grad {
            position: absolute;
            inset: 0;
            background: var(--inner-gradient);
            mix-blend-mode: color;
            z-index: 1;
            pointer-events: none;
        }

        /* Icon pattern removed */

        /* ── Grain ── */
        .pc-inside::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
            background-size: 200px;
            opacity: 0.055;
            z-index: 3;
            pointer-events: none;
            mix-blend-mode: overlay;
        }

        /* ── Shine (holographic, moves with pointer) ── */
        .pc-shine {
            position: absolute;
            inset: 0;
            z-index: 4;
            pointer-events: none;
            background: radial-gradient(
                farthest-corner circle at var(--pointer-x) var(--pointer-y),
                rgba(255,255,255,0.9) 0%,
                rgba(255,255,255,0.35) 15%,
                rgba(6,182,212,0.18) 40%,
                rgba(168,85,247,0.12) 60%,
                transparent 80%
            );
            opacity: calc(var(--pointer-from-center) * 0.65);
            mix-blend-mode: overlay;
        }

        /* ── Glare (directional light sweep) ── */
        .pc-glare {
            position: absolute;
            inset: 0;
            z-index: 5;
            pointer-events: none;
            background: linear-gradient(
                calc(var(--pointer-from-left) * 200deg - 20deg),
                rgba(255,255,255,0.22) 0%,
                transparent 55%
            );
            opacity: calc(var(--pointer-from-center) * 0.5);
            mix-blend-mode: overlay;
        }

        /* ── Name overlay (top of card) ── */
        .pc-details {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            padding: 26px 22px 48px;
            z-index: 6;
            background: linear-gradient(
                to bottom,
                rgba(5,5,20,0.88) 0%,
                rgba(5,5,20,0.5) 50%,
                transparent 100%
            );
            text-align: center;
            pointer-events: none;
        }
        .pc-details h3 {
            font-size: 21px;
            font-weight: 700;
            color: rgba(255,255,255,0.96);
            letter-spacing: -0.03em;
            margin: 0 0 5px;
            line-height: 1.2;
            font-family: var(--font-main);
            text-shadow: 0 2px 16px rgba(0,0,0,0.7);
        }
        .pc-details p {
            font-size: 11.5px;
            font-weight: 500;
            color: rgba(255,255,255,0.5);
            letter-spacing: 0.05em;
            margin: 0;
            font-family: var(--font-main);
        }

        /* ── Years badge (bottom right) ── */
        .pc-years-badge {
            position: absolute;
            bottom: 18px;
            right: 16px;
            z-index: 7;
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.4);
            font-family: var(--font-main);
            pointer-events: none;
        }
        .pc-years-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #22c55e;
            box-shadow: 0 0 7px rgba(34,197,94,0.8);
            animation: pc-pulse 2.8s ease-in-out infinite;
        }
        @keyframes pc-pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.4; transform: scale(0.75); }
        }

        @media (max-width: 900px) {
            .pc-grid { gap: 20px; }
            .pc-wrap { width: 260px; height: 370px; }
        }
        @media (max-width: 600px) {
            .pc-grid { flex-direction: column; align-items: center; padding: 0 0 20px; }
            .pc-wrap { width: 290px; height: 405px; }
        }

/* ── block 05 ─────────────────────────────────── */

  #wa-float {
    position: fixed !important;
    right: 22px !important;
    bottom: 22px !important;
    z-index: 99999 !important;
    display: inline-flex !important;
    text-decoration: none !important;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22,1,0.36,1);
  }
  #wa-float.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  #wa-float .wa-icon {
    width: 40px; height: 40px;
    border-radius: 0;
    background: #111;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
    transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), box-shadow 0.2s;
  }
  #wa-float .wa-icon svg {
    width: 20px; height: 20px; display: block;
    fill: #fff;
  }
  #wa-float:hover .wa-icon { transform: scale(1.06); box-shadow: 0 4px 16px rgba(0,0,0,0.28); }
  @media (max-width: 640px) {
    #wa-float { right: 16px !important; bottom: 16px !important; }
  }