:root{
                --bg: #0b1120;         /* Dark navy */
                --bg-2:#0f172a;        /* Slate navy */
                --txt:#e5e7eb;         /* Gray 200 */
                --muted:#94a3b8;       /* Slate 400 */
                --brand:#e0d68a;       /* Gold-ish */
                --accent:#9e1b32;      /* Burgundy */
                --card:#111827cc;      /* Glass card */
                --ring:#6ee7ff55;
            }
            *{ box-sizing:border-box }
            html,body{ height:100% }
            body{
                margin:0;
                font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
                color:var(--txt);
                background: radial-gradient(1200px 800px at 10% -10%, #1f2a44 0%, transparent 60%),
                    radial-gradient(900px 700px at 110% 10%, #1a2a3f 0%, transparent 60%),
                    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
                overflow-x:hidden;
            }
            a{ color:inherit }
            .container{ width:min(1200px, 92%); margin-inline:auto }

            /* ---------- Helpers ---------- */
            .btn{
                display:inline-flex; align-items:center; gap:.6rem;
                padding:.9rem 1.2rem; border-radius:12px; font-weight:700;
                letter-spacing:.2px; text-decoration:none; position:relative; isolation:isolate
            }
            .btn-primary{
                color:#000000; background:linear-gradient(90deg, #e0d68a, #ffd88a);
                box-shadow:0 10px 24px #e0d68a33
            }
            .btn-primary::after{
                content:""; position:absolute; inset:-2px; border-radius:14px;
                background:conic-gradient(from 0deg, transparent, #ffffff55 20%, transparent 40%, #00000022 60%, transparent 80%);
                filter:blur(8px); z-index:-1; opacity:.4
            }
            .btn-ghost{ border:1px solid #ffffff22; color:var(--txt); backdrop-filter: blur(6px); background:#ffffff08 }
            .chip{ display:inline-block; padding:.35rem .7rem; border-radius:999px; font-size:.9rem; color:#0b1120; background:#e5fffb }

            /* ---------- Header ---------- */
            header{
                position:sticky; top:0; backdrop-filter:saturate(160%) blur(8px);
                background:#0b1120cc; border-bottom:1px solid #ffffff12; z-index:50
            }
            .nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 0 }
            .logo{ display:flex; align-items:center; gap:.8rem }
            .logo img{ height:38px; width:auto }
            .menu{ display:flex; gap:1.2rem; align-items:center }
            .menu a{ color:var(--muted); text-decoration:none; font-weight:600 }
            .menu a:hover{ color:#fff }

            /* ---------- Glow grid BG ---------- */
            .glow-grid{
                position:absolute; inset:0;
                background:
                    radial-gradient(400px 180px at 15% 20%, #4de3ff22, transparent),
                    radial-gradient(400px 180px at 85% 10%, #ffd88a22, transparent),
                    radial-gradient(450px 200px at 75% 85%, #a78bfa22, transparent);
                mask: linear-gradient(#000, #0000 80%);
                pointer-events:none;
                animation: floatBG 20s linear infinite alternate;
            }
            @keyframes floatBG{ to{ transform: translate3d(0,-20px,0) } }

            /* ---------- Hero ---------- */
            .hero{ position:relative; padding:92px 0 70px; overflow:hidden }
            .hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:40px; align-items:center }
            .eyebrow{ color:#a5f3fc; font-weight:800; letter-spacing:.14em; text-transform:uppercase }
            .h1{
                font-size:clamp(2.2rem, 4vw + .5rem, 4rem); line-height:1.05; margin:.2rem 0 1rem;
                font-weight:900; letter-spacing:-.02em;
                background:linear-gradient(180deg, #fff, #dbeafe 40%, #bcd9ff 60%, #9cc3ff 100%);
                -webkit-background-clip:text; background-clip:text; color:transparent; position:relative
            }
            .shimmer{ background-size:200% 100%; animation:shimmer 6s ease-in-out infinite }
            @keyframes shimmer{ 0%{background-position:200% 0} 50%{background-position:100% 0} 100%{background-position:0 0} }
            .lead{ color:#cbd5e1; font-size:1.12rem }
            .hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px }
            .phone{ font-weight:800; color:#fff }
            .hero-img{ position:relative; border-radius:20px; overflow:hidden; border:1px solid #ffffff22; box-shadow:0 30px 60px #0008 }
            .hero-img img{ display:block; width:100%; height:auto }
            .shine:before{
                content:""; position:absolute; inset:-1px;
                background: linear-gradient(120deg, transparent 10%, #ffffff12 30%, transparent 50%, transparent);
                transform: translateX(-100%); animation: shine 7s ease-in-out infinite
            }
            @keyframes shine{ 50%{ transform:translateX(40%) } 100%{ transform:translateX(120%) } }

            /* ---------- Section base ---------- */
            section{ position:relative; padding:72px 0 }
            .section-title{ font-size:clamp(1.6rem, 2.2vw + .5rem, 2.4rem); margin:0 0 10px; font-weight:900 }
            .section-kicker{ color:#a5b4fc; text-transform:uppercase; letter-spacing:.16em; font-weight:800 }
            .two-col{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; align-items:center }

            /* ---------- Cards / features ---------- */
            .cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px }
            .card{
                background:var(--card); border:1px solid #ffffff1a; border-radius:16px; padding:22px; box-shadow:0 16px 40px #0006
            }
            .card h3, .card h4{ margin:.2rem 0 .4rem }
            .card p{ color:#cbd5e1; margin:0 }
            .card .icon{
                width:42px; height:42px; display:grid; place-items:center; border-radius:12px;
                background:#06101a; color:#7dd3fc; box-shadow: inset 0 0 24px #0ea5e966, 0 0 0 1px #7dd3fc44
            }
            .card.glow{ box-shadow:0 10px 40px #e0d68a1f, inset 0 1px 0 #ffffff0d }

            /* ---------- Stats ---------- */
            .stats{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px }
            .stat{ background:#0f1222; border:1px dashed #ffffff2a; border-radius:16px; padding:26px; text-align:center }
            .stat .num{ font-size:2rem; font-weight:900 }
            .stat .sub{ color:#a3b0c2 }

            /* ---------- Banner InmoRed ---------- */
            .promo{
                background:linear-gradient(180deg,#131d3b,#0f1226);
                border-radius:18px; border:1px solid #ffffff1a; padding:36px; text-align:center; position:relative; overflow:hidden
            }
            .promo .spark{
                position:absolute; inset:auto -30% -50% -30%; height:220%;
                background:radial-gradient(closest-side, #e0d68a1a, transparent);
                filter:blur(20px); animation:floatBG 18s ease-in-out infinite alternate
            }

            /* ---------- Clients ---------- */
            .clients{ display:grid; grid-template-columns: repeat(3, 1fr); gap:22px }
            .client{ border:1px solid #ffffff1a; background:#0d1426; border-radius:16px; overflow:hidden; transition: transform .35s ease }
            .client:hover{ transform: translateY(-6px) }
            .client img{ width:100%; height:auto; display:block }
            .client h5{ margin:0; padding:14px 18px; border-top:1px solid #ffffff14; font-size:1rem }

            /* ---------- CTA Tokko ---------- */
            .notice{ background:#eef1f5; color:#0b1120; border-left:5px solid var(--accent); padding:18px 20px; border-radius:12px }

            /* ---------- Contact ---------- */
            .contact{ display:grid; grid-template-columns: 1fr 1fr; gap:28px }
            .panel{ background:#0e1428; border:1px solid #ffffff1a; border-radius:16px; padding:22px }
            label{ font-weight:700; display:block; margin:12px 0 6px }
            input, textarea{
                width:100%; padding:12px 14px; border-radius:12px; border:1px solid #334155;
                background:#0b1224; color:#e2e8f0; outline:none
            }
            input:focus, textarea:focus{ box-shadow:0 0 0 3px var(--ring); border-color:#7dd3fc }

            /* ---------- Footer ---------- */
            footer{ margin-top:60px; border-top:1px solid #ffffff12; background:#0b1120 }
            .footer{ display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; padding:26px 0; color:#9fb0c7 }

            /* ---------- Reveal on view ---------- */
            .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease }
            .reveal.in{ opacity:1; transform: translateY(0) }

            /* ---------- Responsive ---------- */
            @media (max-width: 1024px){
                .hero-grid, .two-col, .contact{ grid-template-columns: 1fr }
                .cards{ grid-template-columns: 1fr 1fr }
                .clients{ grid-template-columns: 1fr 1fr }
                .stats{ grid-template-columns: 1fr 1fr 1fr }
            }
            @media (max-width: 640px){
                .cards,.clients{ grid-template-columns: 1fr }
                .stats{ grid-template-columns: 1fr 1fr }
                .menu{ display:none }
            }

            /* Motion safe */
            @media (prefers-reduced-motion: reduce){
                .shimmer,.shine:before,.glow-grid,.promo .spark{ animation: none }
            }
            .mini-spinner{
                display:inline-block; width:14px; height:14px; border:2px solid #fff; border-top-color:transparent;
                border-radius:50%; vertical-align:-2px; animation:spin .8s linear infinite; margin-right:8px
            }
            @keyframes spin{ to{ transform:rotate(360deg) } }
            .btn[disabled]{ opacity:.6; cursor:not-allowed; filter:grayscale(20%) }
            .notice-msg{ display:none; font-weight:800; font-size:1.1rem; padding:10px 16px; border-radius:10px; text-align:center; margin-top:12px }
            .notice-ok{ background:#dcfce7; color:#166534; border:1px solid #86efac }
            .notice-err{ background:#fee2e2; color:#7f1d1d; border:1px solid #fecaca }
            /* ======== FIX UI: bloque rápido (consulta-wp) ======== */
/* ======= FORM RÁPIDO EN LÍNEA ======= */
#consulta-wp{padding:40px 0;background:#fff}
#consulta-wp .container{
  width:min(1100px,92%);
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  flex-wrap:wrap;
}
#consulta-wp .lead-left{flex:1 1 280px}
#consulta-wp .lead-left p{color:#9e1b32;margin:0;font-weight:700}
#consulta-wp .lead-left h2{
  font-size:clamp(1.6rem,2.4vw,2.2rem);
  font-weight:800;margin:.2rem 0 0;color:#0b1120
}

/* Form en línea */
#fast-lead-form{
  display:flex;
  gap:12px;
  flex:1 1 480px;
}
#fast-lead-form input{
  flex:1;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #d1d5db;
  background:#f9fafb;
  color:#0f172a;
  font-size:.95rem;
}
#fast-lead-form input::placeholder{color:#9ca3af}
#fast-lead-btn{
  padding:12px 20px;
  border-radius:8px;
  border:none;
  background:#c03945;
  color:#fff;
  font-weight:700;
  letter-spacing:.5px;
  cursor:pointer;
  transition:background .2s;
}
#fast-lead-btn:hover{background:#a92f3a}