* { margin:0; padding:0; box-sizing:border-box; }

        :root{
            --bg:#0c0e13;
            --bg-elev:#12151c;
            --surface:rgba(255,255,255,0.028);
            --surface-hover:rgba(255,255,255,0.055);
            --hairline:rgba(201,168,106,0.16);
            --hairline-strong:rgba(201,168,106,0.34);
            --gold:#c9a86a;
            --gold-soft:#dcc592;
            --accent-grad:linear-gradient(120deg,#c9a86a 0%,#e7d3a1 100%);
            --text:#ece8e1;
            --text-muted:#9a958b;
            --text-dim:#6a665d;
        }

        html{ scroll-behavior:smooth; scroll-padding-top:96px; }

        body{
            font-family:'Inter',sans-serif;
            color:var(--text);
            background:var(--bg);
            line-height:1.7;
            overflow-x:hidden;
            max-width:100vw;
            -webkit-font-smoothing:antialiased;
        }

        body::before{
            content:'';
            position:fixed; inset:0;
            background:
                radial-gradient(800px circle at 85% -8%, rgba(201,168,106,0.07), transparent 55%),
                radial-gradient(600px circle at -5% 100%, rgba(201,168,106,0.04), transparent 55%);
            z-index:0; pointer-events:none;
        }

        @keyframes fadeInUp{ from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);} }

        /* HEADER */
        header{
            background:rgba(12,14,19,0.6);
            border-bottom:1px solid var(--hairline);
            padding:22px 20px;
            position:sticky; top:0; z-index:100;
            backdrop-filter:blur(16px) saturate(130%);
            -webkit-backdrop-filter:blur(16px) saturate(130%);
        }
        .header-content{ max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; }
        .header-logo{
            font-family:'Playfair Display',serif;
            font-size:28px; font-weight:700; letter-spacing:4px;
            color:var(--gold);
        }

        /* HERO */
        .hero{
            background:transparent;
            padding:115px 20px 85px;
            position:relative; overflow:hidden; width:100%; box-sizing:border-box; z-index:1;
        }
        .hero-content{ max-width:1200px; margin:0 auto; position:relative; z-index:2; animation:fadeInUp .9s ease-out; }
        .hero-label{
            display:inline-block;
            color:var(--gold);
            font-size:12px; font-weight:600; letter-spacing:3.5px; text-transform:uppercase;
            margin-bottom:28px; padding-bottom:12px;
            border-bottom:1px solid var(--hairline-strong);
        }
        .hero h1{
            font-family:'Playfair Display',serif;
            font-size:74px; font-weight:800; line-height:1.04; letter-spacing:-1px;
            color:#f6f2ea; max-width:900px; margin-bottom:28px;
        }
        .hero-subtitle{
            font-size:19px; color:#b3ada1; max-width:600px; margin-bottom:46px; font-weight:400; line-height:1.7;
        }
        .cta-group{ display:flex; gap:16px; flex-wrap:wrap; }
        .cta-primary,.cta-secondary{
            padding:16px 36px; border-radius:2px; font-weight:600; font-size:13px; letter-spacing:1.8px; text-transform:uppercase;
            cursor:pointer; border:none; transition:all .25s ease; text-decoration:none; display:inline-block; font-family:'Inter',sans-serif;
        }
        .cta-primary{ background:var(--gold); color:#0c0e13; font-weight:700; }
        .cta-primary:hover{ background:var(--gold-soft); transform:translateY(-2px); box-shadow:0 12px 32px rgba(201,168,106,0.28); }
        .cta-secondary{ background:transparent; color:var(--gold); border:1px solid var(--hairline-strong); }
        .cta-secondary:hover{ border-color:var(--gold); background:rgba(201,168,106,0.06); transform:translateY(-2px); }

        /* METRICS */
        .metrics{
            background:var(--surface);
            border:1px solid var(--hairline);
            border-top:2px solid var(--gold);
            padding:48px 40px; position:relative; z-index:10; border-radius:3px;
            max-width:1160px; margin:0 auto; width:calc(100% - 40px); backdrop-filter:blur(10px);
        }
        .metrics-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; text-align:center; }
        .metric-item h3{
            font-family:'Playfair Display',serif; font-size:50px; font-weight:700; color:var(--gold); margin-bottom:8px; letter-spacing:-1px;
        }
        .metric-item p{ font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:2px; font-weight:500; }

        /* SECTIONS */
        section{ padding:115px 20px; max-width:1200px; margin:0 auto; position:relative; z-index:1; }
        h2{
            font-family:'Playfair Display',serif; font-size:52px; font-weight:700; margin-bottom:22px; letter-spacing:-0.5px; line-height:1.1;
        }
        h2::after{ content:''; display:block; width:56px; height:2px; background:var(--gold); margin-top:24px; }
        .section-desc{ font-size:17px; color:var(--text-muted); margin-bottom:50px; max-width:660px; line-height:1.75; font-weight:400; }

        /* PROBLEMA */
        .problema-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:44px; }
        .problema-card{
            background:var(--surface); border:1px solid var(--hairline); border-left:2px solid var(--gold);
            padding:36px; border-radius:3px; transition:all .3s ease; animation:fadeInUp .7s ease-out backwards;
        }
        .problema-card:nth-child(1){animation-delay:.05s;}
        .problema-card:nth-child(2){animation-delay:.12s;}
        .problema-card:nth-child(3){animation-delay:.19s;}
        .problema-card:nth-child(4){animation-delay:.26s;}
        .problema-card:hover{ transform:translateY(-5px); background:var(--surface-hover); border-left-color:var(--gold-soft); box-shadow:0 16px 44px rgba(0,0,0,0.45); }
        .problema-card h3{ font-family:'Playfair Display',serif; font-size:23px; font-weight:600; color:var(--text); margin-bottom:12px; }
        .problema-card p{ font-size:14.5px; color:var(--text-muted); line-height:1.75; }

        /* COMO FUNCIONA */
        .como-funciona{
            background:linear-gradient(180deg, rgba(201,168,106,0.035) 0%, transparent 100%);
            border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); max-width:none;
        }
        .como-funciona>h2,.como-funciona>.section-desc,.como-funciona>div{ max-width:1200px; margin-left:auto; margin-right:auto; }

        /* FEATURES */
        .features-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px; margin-top:50px; }
        .feature-box{
            background:var(--surface); border:1px solid var(--hairline); padding:40px 34px; border-radius:3px; transition:all .3s ease; animation:fadeInUp .7s ease-out backwards;
        }
        .feature-box:nth-child(1){animation-delay:.05s;}
        .feature-box:nth-child(2){animation-delay:.1s;}
        .feature-box:nth-child(3){animation-delay:.15s;}
        .feature-box:nth-child(4){animation-delay:.2s;}
        .feature-box:nth-child(5){animation-delay:.25s;}
        .feature-box:nth-child(6){animation-delay:.3s;}
        .feature-box:hover{ transform:translateY(-5px); background:var(--surface-hover); border-color:var(--hairline-strong); box-shadow:0 16px 44px rgba(0,0,0,0.45); }
        .feature-icon{ font-size:30px; margin-bottom:18px; display:block; }
        .feature-box h3{ font-family:'Playfair Display',serif; font-size:22px; font-weight:600; color:var(--gold); margin-bottom:12px; }
        .feature-box p{ font-size:14.5px; color:var(--text-muted); line-height:1.75; }

        /* TESTIMONIOS */
        .testimonios{ background:transparent; }
        .testimonios-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; margin-top:50px; }
        .testimonio{ background:var(--surface); border:1px solid var(--hairline); padding:36px; border-radius:3px; transition:all .3s ease; }
        .testimonio:hover{ transform:translateY(-4px); background:var(--surface-hover); border-color:var(--hairline-strong); box-shadow:0 16px 44px rgba(0,0,0,0.45); }
        .testimonio-text{ font-family:'Playfair Display',serif; font-size:18px; font-style:italic; color:var(--text); margin-bottom:22px; line-height:1.7; font-weight:500; }
        .testimonio-text::before{ content:'\201C'; font-family:'Playfair Display',serif; display:block; font-size:58px; line-height:0.2; margin-bottom:20px; color:var(--gold); }
        .testimonio-author{ font-weight:600; color:var(--gold); font-size:14.5px; letter-spacing:0.3px; }
        .testimonio-role{ font-size:12px; color:var(--text-dim); margin-top:5px; text-transform:uppercase; letter-spacing:1px; }

        /* FORM */
        .form-container{ background:var(--surface); border:1px solid var(--hairline); border-top:2px solid var(--gold); padding:52px; border-radius:3px; margin-top:44px; backdrop-filter:blur(10px); }
        .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:10px; }
        .form-group{ display:flex; flex-direction:column; }
        .form-group.full{ grid-column:1 / -1; }
        label{ font-size:12px; font-weight:600; color:var(--gold); margin-bottom:9px; letter-spacing:1px; text-transform:uppercase; }
        input,select,textarea{ padding:13px 15px; border:1px solid var(--hairline-strong); border-radius:2px; background:rgba(255,255,255,0.02); color:var(--text); font-family:'Inter',sans-serif; font-size:15px; transition:all .25s ease; }
        input::placeholder,textarea::placeholder{ color:var(--text-dim); }
        input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--gold); background:rgba(255,255,255,0.04); box-shadow:0 0 0 3px rgba(201,168,106,0.15); }
        select option{ background:var(--bg-elev); color:var(--text); }
        textarea{ min-height:110px; resize:vertical; }
        .submit-btn{ grid-column:1 / -1; background:var(--gold); color:#0c0e13; padding:16px 32px; border:none; border-radius:2px; font-weight:700; font-size:13px; letter-spacing:1.8px; text-transform:uppercase; cursor:pointer; transition:all .25s ease; font-family:'Inter',sans-serif; margin-top:6px; }
        .submit-btn:hover{ background:var(--gold-soft); transform:translateY(-2px); box-shadow:0 12px 32px rgba(201,168,106,0.28); }

        @media (max-width:768px){
            .como-funciona [style*="grid-template-columns: repeat(4"]{ grid-template-columns:repeat(2,1fr)!important; gap:40px 0!important; }
            .como-funciona [style*="grid-template-columns: repeat(4"]>div{ padding:0 16px!important; }
            .como-funciona [style*="top: 36px"]{ display:none; }
        }
        @media (max-width:480px){
            .como-funciona [style*="grid-template-columns: repeat(4"]{ grid-template-columns:1fr!important; }
        }

        @media (max-width:1024px){
            section{ padding:80px 30px; }
            .hero{ padding:95px 30px 60px; }
            .hero h1{ font-size:56px; }
            .metrics{ width:calc(100% - 60px); padding:42px 30px; }
            .problema-grid,.features-grid,.testimonios-grid{ grid-template-columns:repeat(2,1fr); }
            .form-grid{ grid-template-columns:1fr; gap:20px; }
            .submit-btn{ grid-column:1 / -1; }
        }
        @media (max-width:768px){
            body{ font-size:14px; }
            section{ padding:64px 20px; }
            header{ padding:18px 20px; }
            .header-logo{ font-size:24px; letter-spacing:3px; }
            .hero{ padding:74px 20px 48px; }
            .hero-label{ font-size:11px; margin-bottom:22px; }
            .hero h1{ font-size:40px; margin-bottom:18px; line-height:1.1; }
            .hero-subtitle{ font-size:16px; margin-bottom:34px; }
            .cta-group{ flex-direction:column; gap:12px; }
            .cta-primary,.cta-secondary{ width:100%; text-align:center; padding:14px 24px; }
            .metrics{ width:calc(100% - 32px); padding:30px 20px; }
            .metrics-grid{ grid-template-columns:repeat(3,1fr); gap:16px; }
            .metric-item h3{ font-size:32px; }
            .metric-item p{ font-size:10px; letter-spacing:1px; }
            h2{ font-size:34px; }
            h2::after{ margin-top:18px; }
            .section-desc{ font-size:15px; margin-bottom:35px; }
            .problema-grid,.features-grid,.testimonios-grid{ grid-template-columns:1fr; gap:18px; }
            .problema-card,.feature-box,.testimonio{ padding:28px 22px; }
            .form-container{ padding:32px 22px; }
            .form-grid{ grid-template-columns:1fr; gap:18px; }
            .form-group.full{ grid-column:1; }
        }
        @media (max-width:480px){
            section{ padding:54px 16px; }
            .hero h1{ font-size:32px; line-height:1.16; }
            h2{ font-size:28px; }
            .metric-item h3{ font-size:26px; }
        }

        .success-message{ display:none; background:rgba(201,168,106,0.1); border:1px solid var(--hairline-strong); color:var(--text); padding:22px; border-radius:3px; text-align:center; font-weight:600; margin-top:20px; }
        footer{ background:transparent; border-top:1px solid var(--hairline); padding:38px 20px; text-align:center; font-size:13px; color:var(--text-dim); position:relative; z-index:1; letter-spacing:0.5px; }
        .mouse-spotlight{ position:fixed; width:380px; height:380px; background:radial-gradient(circle, rgba(201,168,106,0.1) 0%, transparent 70%); border-radius:50%; pointer-events:none; z-index:1; filter:blur(50px); opacity:0; transition:opacity .3s ease; }
        @media (max-width:768px){ .mouse-spotlight{ display:none; } }

        /* ============================================================
           CAPA PREMIUM · BRILLO + CRISTAL  (overrides finales)
           ============================================================ */
        :root{
            --gold-metal:linear-gradient(180deg,#f6e7bd 0%,#dcbf84 42%,#b78f49 58%,#ecd9a6 100%);
            --accent-grad:linear-gradient(180deg,#f6e7bd 0%,#dcbf84 42%,#b78f49 58%,#ecd9a6 100%);
        }

        @keyframes shimmer{ to{ background-position:200% center; } }
        @keyframes sheen{ from{ left:-150%; } to{ left:160%; } }
        @keyframes glide{ 0%,100%{ left:-65%; } 55%{ left:125%; } }

        /* Glows ambientales más ricos (más profundidad, menos plano) */
        body::before{
            background:
                radial-gradient(950px circle at 82% -10%, rgba(201,168,106,0.13), transparent 55%),
                radial-gradient(720px circle at -8% 6%, rgba(201,168,106,0.06), transparent 50%),
                radial-gradient(640px circle at 52% 118%, rgba(201,168,106,0.05), transparent 55%);
        }

        /* Logo lockup: emblema balanza-rostro + palabra HOFUSS */
        .header-logo{ display:inline-flex; align-items:center; gap:11px; }
        .logo-mark{ flex-shrink:0; display:block; }
        .header-logo span{
            background:var(--gold-metal);
            background-size:200% auto;
            -webkit-background-clip:text; background-clip:text;
            -webkit-text-fill-color:transparent; color:transparent;
            animation:shimmer 6s linear infinite;
        }

        /* Título con halo dorado tenue (luz / clase) */
        .hero h1{ text-shadow:0 2px 44px rgba(201,168,106,0.12); }

        /* Números metálicos con brillo */
        .metric-item h3{
            background:var(--gold-metal);
            background-size:200% auto;
            -webkit-background-clip:text; background-clip:text;
            -webkit-text-fill-color:transparent; color:transparent;
            animation:shimmer 7s linear infinite;
        }

        /* Caja de métricas: cristal + barrido de luz lento */
        .metrics{
            position:relative; overflow:hidden;
            background:linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.012) 30%, var(--surface) 100%);
            box-shadow:0 24px 64px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.09);
        }
        .metrics::after{
            content:''; position:absolute; top:0; left:-65%; width:42%; height:100%;
            background:linear-gradient(110deg, transparent, rgba(255,255,255,0.09), transparent);
            transform:skewX(-20deg); pointer-events:none;
            animation:glide 7s ease-in-out infinite;
        }

        /* Tarjetas de cristal: reflejo en borde superior + blur */
        .problema-card, .feature-box, .testimonio{
            position:relative; overflow:hidden;
            backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
            background:linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.012) 24%, var(--surface) 100%);
            box-shadow:inset 0 1px 0 rgba(255,255,255,0.07);
        }
        .problema-card:hover, .feature-box:hover, .testimonio:hover{
            box-shadow:0 20px 54px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.16), 0 0 0 1px rgba(201,168,106,0.28);
        }
        /* Destello de cristal al pasar el mouse */
        .problema-card::after, .feature-box::after, .testimonio::after{
            content:''; position:absolute; top:0; left:-150%; width:60%; height:100%;
            background:linear-gradient(110deg, transparent, rgba(255,255,255,0.08), transparent);
            transform:skewX(-20deg); pointer-events:none; z-index:1;
        }
        .problema-card:hover::after, .feature-box:hover::after, .testimonio:hover::after{ animation:sheen 0.9s ease; }

        /* Botones: barrido de luz tipo cristal */
        .cta-primary, .submit-btn{ position:relative; overflow:hidden; }
        .cta-primary::before, .submit-btn::before{
            content:''; position:absolute; top:0; left:-150%; width:55%; height:100%;
            background:linear-gradient(110deg, transparent, rgba(255,255,255,0.6), transparent);
            transform:skewX(-20deg); pointer-events:none;
        }
        .cta-primary:hover::before, .submit-btn:hover::before{ animation:sheen 0.85s ease; }

        /* Formulario de cristal */
        .form-container{
            position:relative; overflow:hidden;
            background:linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.012) 24%, var(--surface) 100%);
            box-shadow:0 28px 72px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.09);
        }
        input, select, textarea{ box-shadow:inset 0 1px 0 rgba(255,255,255,0.03); }

        /* Desplegables: flecha dorada propia (quita la del navegador, alineada) */
        select{
            -webkit-appearance:none; -moz-appearance:none; appearance:none;
            background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c9a86a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
            background-repeat:no-repeat;
            background-position:right 15px center;
            background-size:12px;
            padding-right:40px;
            cursor:pointer;
        }

        /* Spotlight del mouse con más presencia dorada */
        .mouse-spotlight{ background:radial-gradient(circle, rgba(201,168,106,0.15) 0%, transparent 70%); }

        /* ===== Rejilla dorada sutil en el hero (textura tech) ===== */
        .hero::after{
            content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
            background-image:
                linear-gradient(rgba(201,168,106,0.055) 1px, transparent 1px),
                linear-gradient(90deg, rgba(201,168,106,0.055) 1px, transparent 1px);
            background-size:58px 58px;
            -webkit-mask-image:radial-gradient(115% 80% at 78% 6%, #000 0%, transparent 68%);
            mask-image:radial-gradient(115% 80% at 78% 6%, #000 0%, transparent 68%);
        }

        /* ===== Hero en dos columnas: texto + mockup ===== */
        .hero-grid{ display:grid; grid-template-columns:1.02fr 0.98fr; gap:54px; align-items:center; }
        .hero-copy, .hero-mockup{ min-width:0; }
        .hero-copy .hero-label{ display:inline-block; }
        .hero-grid .hero h1, .hero-grid h1{ max-width:none; }
        @media (max-width:980px){
            .hero-grid{ grid-template-columns:1fr; gap:44px; }
            .hero-mockup{ order:2; max-width:560px; }
        }

        /* ===== Ventana de la app (mockup de cristal) ===== */
        .app-window{
            position:relative; border-radius:12px; overflow:hidden;
            background:linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.015) 32%, rgba(255,255,255,0.022) 100%);
            border:1px solid var(--hairline-strong);
            box-shadow:0 34px 90px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.14);
            backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
            animation:fadeInUp 1s ease-out .15s backwards;
        }
        .app-window::after{
            content:''; position:absolute; top:0; left:-60%; width:38%; height:100%;
            background:linear-gradient(110deg, transparent, rgba(255,255,255,0.08), transparent);
            transform:skewX(-20deg); pointer-events:none; animation:glide 7s ease-in-out infinite 1.2s;
        }
        .app-bar{ display:flex; align-items:center; gap:7px; padding:14px 16px; border-bottom:1px solid var(--hairline); }
        .app-dot{ width:9px; height:9px; border-radius:50%; background:rgba(201,168,106,0.4); }
        .app-bar-title{ margin-left:10px; font-size:11px; letter-spacing:1.8px; text-transform:uppercase; color:var(--text-muted); font-weight:600; }
        .app-body{ padding:18px; position:relative; z-index:1; }
        .app-search{
            display:flex; align-items:center; gap:10px;
            background:rgba(255,255,255,0.03); border:1px solid var(--hairline-strong);
            border-radius:8px; padding:12px 14px; margin-bottom:14px; font-size:13.5px; color:var(--text);
        }
        .app-search > svg{ width:16px; height:16px; color:var(--gold); flex-shrink:0; }
        .app-search > span{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .app-search .cursor{ width:1.5px; height:15px; background:var(--gold); flex-shrink:0; animation:blink 1.1s steps(1) infinite; }
        .result-sub{ min-width:0; }
        @keyframes blink{ 50%{ opacity:0; } }
        .app-meta{ font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-dim); margin-bottom:12px; }
        .app-meta .mono{ font-family:ui-monospace,'SF Mono',Menlo,monospace; color:var(--gold); letter-spacing:0; text-transform:none; }
        .result{
            position:relative; padding:13px 14px; border-radius:8px; margin-bottom:9px;
            border:1px solid var(--hairline); border-left:2px solid var(--gold);
            background:rgba(255,255,255,0.02); transition:background .25s ease;
        }
        .result:hover{ background:rgba(255,255,255,0.04); }
        .result:last-child{ margin-bottom:0; }
        .result-title{ font-family:'Playfair Display',serif; font-size:15px; color:var(--text); margin-bottom:7px; line-height:1.3; }
        .result-sub{ font-size:11.5px; color:var(--text-muted); display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
        .result-id{ font-family:ui-monospace,Menlo,monospace; color:var(--gold); font-size:11px; }
        .verified{ display:inline-flex; align-items:center; gap:5px; font-size:10px; color:var(--gold); border:1px solid var(--hairline-strong); border-radius:100px; padding:3px 9px; letter-spacing:0.5px; text-transform:uppercase; margin-left:auto; }
        .verified svg{ width:11px; height:11px; }
        .bar{ height:4px; border-radius:4px; background:rgba(255,255,255,0.06); margin-top:10px; overflow:hidden; }
        .bar span{ display:block; height:100%; border-radius:4px; background:var(--gold-metal); }
        @media (max-width:768px){
            .app-body{ padding:14px; }
            .app-search{ font-size:12.5px; }
            .result-title{ font-size:14px; }
        }

        /* ============ SECCIÓN "EL VEREDICTO" (dominio abstracto) ============ */
        .veredicto{
            max-width:none; position:relative; overflow:hidden;
            border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
            background:
                radial-gradient(820px circle at 80% 50%, rgba(201,168,106,0.10), transparent 62%),
                linear-gradient(180deg, rgba(201,168,106,0.04) 0%, transparent 55%);
        }
        .veredicto-inner{
            max-width:1200px; margin:0 auto;
            display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center;
        }
        .veredicto-copy{ min-width:0; }
        .veredicto h2{ margin-bottom:22px; }
        .veredicto h2::after{ display:none; }
        .gold-em{
            background:var(--gold-metal); background-size:200% auto;
            -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
            animation:shimmer 7s linear infinite;
        }
        .veredicto .section-desc{ margin-bottom:0; }
        .veredicto-foot{
            margin-top:22px; font-family:'Playfair Display',serif; font-style:italic;
            font-size:18px; color:var(--text-muted); line-height:1.5;
            padding-left:16px; border-left:2px solid var(--gold);
        }

        .veredicto-emblem{ min-width:0; display:flex; flex-direction:column; align-items:center; gap:30px; }
        .domain-ring{ position:relative; width:210px; height:210px; display:flex; align-items:center; justify-content:center; }
        .domain-ring .ring{ position:absolute; border-radius:50%; pointer-events:none; }
        .domain-ring .r1{ inset:0; border:1px solid var(--hairline-strong); box-shadow:inset 0 0 70px rgba(201,168,106,0.16); }
        .domain-ring .r2{ inset:26px; border:1px dashed rgba(201,168,106,0.38); animation:spin 30s linear infinite; }
        @keyframes spin{ to{ transform:rotate(360deg); } }
        .domain-ring .scales{ width:78px; height:78px; color:var(--gold); filter:drop-shadow(0 0 16px rgba(201,168,106,0.45)); }
        .domain-ring .scales svg{ width:100%; height:100%; display:block; }

        .verdict-list{ width:100%; max-width:380px; display:flex; flex-direction:column; gap:12px; }
        .verdict{
            display:flex; align-items:center; gap:14px; padding:15px 17px;
            border-radius:12px; border:1px solid var(--hairline);
            background:linear-gradient(180deg, rgba(255,255,255,0.04), var(--surface));
            box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
        }
        .verdict-ok{ border-left:2px solid var(--gold); }
        .verdict-no{ opacity:0.7; }
        .vmark{
            width:32px; height:32px; border-radius:50%; flex-shrink:0;
            display:flex; align-items:center; justify-content:center;
            border:1px solid var(--hairline-strong); color:var(--gold);
        }
        .vmark svg{ width:15px; height:15px; }
        .vmark.vno{ color:var(--text-muted); }
        .vt{ font-family:'Playfair Display',serif; font-size:17px; color:var(--text); line-height:1.2; }
        .verdict-no .vt{ text-decoration:line-through; text-decoration-color:rgba(154,149,139,0.55); }
        .vs{ font-size:12px; color:var(--text-muted); margin-top:3px; }

        @media (max-width:980px){
            .veredicto-inner{ grid-template-columns:1fr; gap:44px; }
            .veredicto-emblem{ order:2; }
        }
        @media (max-width:768px){
            .veredicto-foot{ font-size:16px; }
            .domain-ring{ width:180px; height:180px; }
            .domain-ring .scales{ width:66px; height:66px; }
        }

        /* Íconos dorados de línea en las tarjetas de problema */
        .card-icon{
            display:inline-flex; width:34px; height:34px; margin-bottom:18px;
            color:var(--gold);
            align-items:center; justify-content:center;
            border:1px solid var(--hairline-strong); border-radius:50%;
            padding:7px; position:relative; z-index:2;
            box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);
        }
        .card-icon svg{ width:100%; height:100%; display:block; }

        /* Respeto a usuarios con movimiento reducido */
        @media (prefers-reduced-motion: reduce){
            .header-logo, .metric-item h3, .metrics::after{ animation:none; }
        }
    

        /* ====== Selector de idioma (ES / EN) ====== */
        .lang-switch{ display:inline-flex; align-items:center; gap:2px; border:1px solid var(--hairline-strong); border-radius:100px; padding:3px; background:var(--surface); backdrop-filter:blur(8px); }
        .lang-switch a{ font-family:'Inter',sans-serif; font-size:12px; font-weight:600; letter-spacing:1px; color:var(--text-muted); text-decoration:none; padding:5px 12px; border-radius:100px; transition:all .2s ease; line-height:1; }
        .lang-switch a:hover{ color:var(--text); }
        .lang-switch a.active{ background:var(--gold); color:#0c0e13; }
        @media (max-width:480px){ .lang-switch a{ padding:5px 9px; font-size:11px; } header{ padding:16px 14px; } .header-logo span{ font-size:22px; } }

/* ====== Navegación + botón volver arriba ====== */
.topnav{ display:flex; gap:26px; align-items:center; }
.topnav a{ font-family:'Inter',sans-serif; font-size:13px; letter-spacing:.4px; color:var(--text-muted); text-decoration:none; transition:color .2s ease; }
.topnav a:hover{ color:var(--text); }
.topnav a.nav-cta{ color:var(--gold); border:1px solid var(--hairline-strong); padding:7px 16px; border-radius:100px; }
.topnav a.nav-cta:hover{ background:rgba(201,168,106,.08); border-color:var(--gold); }
@media (max-width:860px){ .topnav{ display:none; } }

.to-top{ position:fixed; right:24px; bottom:24px; z-index:90; width:46px; height:46px; border-radius:50%; cursor:pointer;
    border:1px solid var(--hairline-strong); background:rgba(12,14,19,.7); color:var(--gold); font-size:20px; line-height:1;
    opacity:0; transform:translateY(10px); pointer-events:none; transition:all .3s ease; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background:rgba(201,168,106,.15); border-color:var(--gold); }

/* ====== Comparativa ChatGPT vs HOFUSS ====== */
.compare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:50px; }
.compare-card{ background:var(--surface); border:1px solid var(--hairline); border-radius:16px; padding:34px 30px; }
.compare-card.cc-good{ border-color:var(--hairline-strong); background:linear-gradient(180deg, rgba(201,168,106,0.06), var(--surface)); box-shadow:inset 0 1px 0 rgba(255,255,255,0.07); }
.compare-card h3{ font-family:'Playfair Display',serif; font-size:22px; font-weight:600; margin-bottom:22px; }
.compare-card.cc-bad h3{ color:var(--text-muted); }
.compare-card.cc-good h3{ color:var(--gold); }
.compare-card ul{ list-style:none; display:flex; flex-direction:column; gap:14px; margin:0; padding:0; }
.compare-card li{ font-size:14.5px; line-height:1.5; color:var(--text-muted); display:flex; gap:12px; align-items:flex-start; }
.compare-card.cc-good li{ color:var(--text); }
.compare-card li::before{ flex-shrink:0; font-weight:700; line-height:1.4; }
.compare-card.cc-bad li::before{ content:'\2715'; color:#b07a7a; }
.compare-card.cc-good li::before{ content:'\2713'; color:var(--gold); }
@media (max-width:760px){ .compare-grid{ grid-template-columns:1fr; } }

/* ====== Captura de email en el hero ====== */
.hero-capture{ display:flex; gap:10px; flex-wrap:wrap; max-width:500px; }
.hero-capture input{ flex:1; min-width:210px; padding:15px 16px; border:1px solid var(--hairline-strong); border-radius:10px; background:rgba(255,255,255,0.02); color:var(--text); font-family:'Inter',sans-serif; font-size:15px; transition:border-color .2s ease; }
.hero-capture input::placeholder{ color:var(--text-dim); }
.hero-capture input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,168,106,.15); }
.hero-capture .cta-primary{ white-space:nowrap; }
.hero-secondary{ margin-top:16px; }

/* Nota de confidencialidad del formulario */
.form-note{ font-size:13px; color:var(--text-dim); margin-bottom:20px; display:flex; gap:8px; align-items:center; }
.form-note svg{ width:15px; height:15px; flex-shrink:0; color:var(--gold); }

/* ====== Mapa jurisprudencial (mockup del hero) ====== */
.app-body.jg{ padding:10px 14px 12px; }
.jg-meta{ font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; color:#6a665d; padding:4px 4px 8px; display:flex; justify-content:space-between; gap:8px; }
.jg-meta .mono{ font-family:ui-monospace,'SF Mono',Menlo,monospace; color:var(--gold); letter-spacing:0; text-transform:none; }
.jg svg{ width:100%; height:auto; display:block; }
.jg .edge{ fill:none; stroke:url(#edgeg); stroke-dasharray:1; stroke-dashoffset:1; animation:jgdraw .85s ease forwards; }
@keyframes jgdraw{ to{ stroke-dashoffset:0; } }
.jg .node{ transform:scale(0); transform-box:fill-box; transform-origin:center; animation:jgpop .55s cubic-bezier(.2,1.5,.4,1) forwards; }
@keyframes jgpop{ to{ transform:scale(1); } }
.jg .lbl{ font-family:'Inter',sans-serif; fill:#cdc7ba; opacity:0; animation:jgfade .5s ease forwards; }
.jg .lbl.id{ font-family:ui-monospace,Menlo,monospace; fill:var(--gold); font-size:9.5px; }
.jg .lbl.court{ font-size:9.5px; fill:#d8c08e; font-weight:600; letter-spacing:.4px; }
.jg .lbl.pct{ font-size:8px; fill:#8b909e; }
.jg .lbl.core{ fill:#f3e3b3; font-weight:700; font-size:11px; letter-spacing:1.6px; }
@keyframes jgfade{ to{ opacity:1; } }
.jg .pulse{ fill:none; stroke:var(--gold); stroke-width:1; transform-box:fill-box; transform-origin:center; animation:jgpulse 2.6s ease-out infinite; }
@keyframes jgpulse{ 0%{ transform:scale(1); opacity:.5 } 100%{ transform:scale(2.7); opacity:0 } }
.jg-legend{ display:flex; gap:16px; flex-wrap:wrap; padding:8px 4px 2px; font-size:10.5px; color:var(--text-muted); }
.jg-legend span{ display:inline-flex; align-items:center; gap:6px; }
.jg-lg-dot{ width:10px; height:10px; border-radius:50%; border:1.4px solid var(--gold); }
.jg-lg-hex{ width:11px; height:11px; background:linear-gradient(180deg,#2a2418,#15130c); border:1px solid rgba(216,192,142,.6); clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%); }
.jg-lg-line{ width:16px; border-top:1.5px solid rgba(201,168,106,.6); }
@media (prefers-reduced-motion: reduce){ .jg .edge,.jg .node,.jg .lbl,.jg .pulse{ animation:none!important; opacity:1!important; transform:none!important; stroke-dashoffset:0!important; } }

/* Nodos interactivos del mapa */
.jg .node{ cursor:pointer; transition:filter .2s ease; }
.jg .node:hover{ filter:drop-shadow(0 0 7px rgba(201,168,106,.9)); }
.jg .node:hover circle{ stroke:#f3e3b3; }

/* Mockup de resultados reubicado */
.result-showcase{ max-width:560px; margin:46px auto 0; }

/* ===== Mockup app 2 paneles (hero) ===== */
.app-ia{ margin-left:auto; font-size:9px; letter-spacing:1.5px; font-weight:700; color:var(--gold); border:1px solid var(--hairline-strong); border-radius:100px; padding:3px 9px; }
.app2-search{ display:flex; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid var(--hairline); }
.app2-search .s{ flex:1; display:flex; align-items:center; gap:9px; background:rgba(255,255,255,0.03); border:1px solid var(--hairline-strong); border-radius:9px; padding:9px 12px; font-size:12.5px; color:var(--text); min-width:0; }
.app2-search .s svg{ width:15px; height:15px; color:var(--gold); flex-shrink:0; }
.app2-search .s span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app2-search .m{ font-size:11px; color:var(--text-muted); white-space:nowrap; } .app2-search .m b{ color:var(--gold); font-weight:600; }
.app2-panels{ display:flex; min-height:286px; }
.app2-list{ width:50%; border-right:1px solid var(--hairline); padding:10px; display:flex; flex-direction:column; gap:4px; }
.app2-ph{ font-size:9.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-dim); padding:6px 6px; }
.app2-item{ display:flex; gap:9px; padding:8px 10px; border-radius:9px; border:1px solid transparent; }
.app2-item.on{ background:rgba(201,168,106,.08); border-color:var(--hairline-strong); }
.app2-chk{ width:18px; height:18px; flex-shrink:0; border-radius:50%; border:1px solid var(--hairline-strong); display:flex; align-items:center; justify-content:center; color:var(--gold); margin-top:1px; }
.app2-chk svg{ width:11px; height:11px; }
.app2-b{ min-width:0; flex:1; }
.app2-ttl{ font-family:'Playfair Display',serif; font-size:12.5px; line-height:1.25; color:var(--text); margin-bottom:3px; }
.app2-sub{ font-size:10.5px; color:var(--text-muted); display:flex; gap:6px; align-items:center; }
.app2-rid{ font-family:ui-monospace,Menlo,monospace; color:var(--gold); font-size:10px; }
.app2-hid{ font-size:8px; letter-spacing:.5px; text-transform:uppercase; color:var(--gold); border:1px solid var(--hairline-strong); border-radius:100px; padding:1px 6px; margin-left:auto; }
.app2-rel{ margin-top:6px; height:3px; border-radius:3px; background:rgba(255,255,255,.06); overflow:hidden; }
.app2-rel span{ display:block; height:100%; background:linear-gradient(90deg,#caa86b,#f3e3b3); }
.app2-map{ width:50%; }
.app2-map svg{ width:100%; height:100%; display:block; }
.app2-map .edge{ fill:none; stroke:url(#a2eg); stroke-width:1.5; }
.app2-map .ehi{ stroke:var(--gold); stroke-width:1.8; filter:drop-shadow(0 0 3px rgba(201,168,106,.55)); }
.app2-map .lb{ font-family:ui-monospace,Menlo,monospace; fill:var(--gold); font-size:8px; }
.app2-map .lc{ fill:#f3e3b3; font-weight:700; font-size:9px; letter-spacing:1px; }
.app2-map .pulse{ fill:none; stroke:var(--gold); stroke-width:1; transform-box:fill-box; transform-origin:center; animation:a2pl 2.6s ease-out infinite; }
@keyframes a2pl{ 0%{transform:scale(1);opacity:.5} 100%{transform:scale(2.6);opacity:0} }
@media (max-width:620px){
    .app2-panels{ flex-direction:column; }
    .app2-list{ width:100%; border-right:none; border-bottom:1px solid var(--hairline); }
    .app2-map{ width:100%; height:210px; }
}

/* Pregunta de interés (checkboxes) */
.interest-group{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.interest-item{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--text); cursor:pointer;
    background:rgba(255,255,255,0.02); border:1px solid var(--hairline-strong); border-radius:10px; padding:11px 13px;
    text-transform:none; letter-spacing:0; font-weight:400; margin:0; line-height:1.45; transition:border-color .2s ease, background .2s ease; }
.interest-item:hover{ border-color:var(--gold); }
.interest-item input{ accent-color:var(--gold); width:15px; height:15px; margin-top:2px; flex-shrink:0; cursor:pointer; box-shadow:none; }
.interest-item:has(input:checked){ background:rgba(201,168,106,.08); border-color:var(--gold); }
@media (max-width:640px){ .interest-group{ grid-template-columns:1fr; } }

/* Fix: reset de los checkboxes (el estilo global de input los deformaba) */
.interest-item input[type="checkbox"]{
    appearance:auto; -webkit-appearance:auto;
    padding:0; border:0; background:transparent; box-shadow:none; border-radius:0; transition:none;
}
.interest-item input[type="checkbox"]:focus{
    background:transparent; box-shadow:none; border:0;
    outline:2px solid rgba(201,168,106,.45); outline-offset:2px;
}
/* Resaltado al marcar — con clase (funciona en todos los navegadores) */
.interest-item.checked{ background:rgba(201,168,106,.08); border-color:var(--gold); }

/* ====== Artículo de blog ====== */
.article{ max-width:780px; margin:0 auto; padding:80px 22px 90px; position:relative; z-index:1; }
.article .crumb{ font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--text-dim); margin-bottom:26px; }
.article .crumb a{ color:var(--gold); text-decoration:none; }
.article-kicker{ color:var(--gold); font-size:12px; letter-spacing:3px; text-transform:uppercase; margin-bottom:18px; }
.article h1{ font-family:'Playfair Display',serif; font-size:clamp(32px,5vw,48px); font-weight:800; line-height:1.12; letter-spacing:-0.5px; color:#f4f0e8; margin-bottom:16px; }
.article-meta{ font-size:13px; color:var(--text-dim); margin-bottom:40px; padding-bottom:26px; border-bottom:1px solid var(--hairline); }
.article .lead{ font-size:18.5px; line-height:1.8; color:#c9c4b9; margin-bottom:34px; }
.article h2{ font-family:'Playfair Display',serif; font-size:27px; font-weight:700; color:var(--gold); margin:44px 0 16px; letter-spacing:0; }
.article h2::after{ display:none; }
.article p{ font-size:16px; line-height:1.85; color:#c2bdb2; margin-bottom:18px; }
.article ul, .article ol{ margin:0 0 22px 22px; }
.article li{ font-size:16px; line-height:1.8; color:#c2bdb2; margin-bottom:12px; }
.article li strong, .article p strong{ color:var(--text); }
.article a{ color:var(--gold); text-decoration:underline; text-decoration-color:rgba(201,168,106,.4); text-underline-offset:3px; }
.article a:hover{ text-decoration-color:var(--gold); }
.article a.cta-primary{ text-decoration:none; display:inline-block; color:#0c0e13; padding:15px 32px; border-radius:2px; font-size:13px; }
.article a.cta-primary:hover{ color:#0c0e13; }
.article .sources li{ font-size:14px; }
.article .disclaimer{ margin-top:40px; padding-top:22px; border-top:1px solid var(--hairline); font-size:13px; color:var(--text-dim); }
.article em{ color:#d8d2c4; }