:root{
      --midnight:#031226; /* azul media noche */
      --black:#000000;
      --gold:#d4af37;
      --muted:#a9b3c2;
      --glass: rgba(255,255,255,0.04);
      --card-shadow: 0 6px 20px rgba(2,6,23,0.6);
      --radius: 14px;
      --grad-1: linear-gradient(135deg,var(--midnight) 0%, #07102a 40%, var(--black) 100%);
      --gold-grad: linear-gradient(90deg, rgba(212,175,55,0.06), rgba(212,175,55,0.18));
    }
    *{box-sizing:border-box}
    html,body{height:100%;margin:0;font-family:Montserrat,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial; color:#e8eef6; background: radial-gradient(circle at 10% 10%, rgba(212,175,55,0.02), transparent 8%), var(--grad-1);}
    a{color:inherit;text-decoration:none}

    /* NAV */
    .nav{position:fixed;top:18px;left:50%;transform:translateX(-50%);width:92%;max-width:1200px;display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));backdrop-filter:blur(6px);border-radius:20px;box-shadow:var(--card-shadow);z-index:60}
    .brand{display:flex;align-items:center;gap:12px}
    .logo{width:54px;height:54px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(120deg,var(--black),var(--midnight));box-shadow:inset 0 0 30px rgba(0,0,0,0.6);}
    .logo strong{font-family:Playfair Display,serif;color:var(--gold);font-size:18px}
    .nav .links{display:flex;gap:18px;align-items:center}
    .nav .links a{padding:8px 12px;border-radius:10px;transition:all .25s ease; font-weight:600}
    .nav .links a:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(2,6,23,0.6);}
    .cta{background:linear-gradient(90deg,var(--gold),#f1d281);color:#081018;padding:8px 14px;border-radius:12px;box-shadow:0 6px 18px rgba(212,175,55,0.12);}

    /* HERO */
    .hero{min-height:86vh;display:grid;grid-template-columns:1fr 480px;gap:40px;align-items:center;padding:120px 20px 60px;max-width:1200px;margin:0 auto}
    .hero-left{max-width:760px}
    .eyebrow{display:inline-block;padding:8px 12px;border-radius:999px;background:var(--gold-grad);color:var(--gold);font-weight:700;margin-bottom:18px;transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease}
    .eyebrow:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(212,175,55,0.12);opacity:0.98;cursor:default}

    h1{font-family:Playfair Display,serif;font-size:48px;line-height:1.02;margin:0 0 18px;color:#fff;transition:transform .22s cubic-bezier(.2,.9,.2,1),text-shadow .22s ease,color .22s ease}
    h1:hover{transform:translateY(-4px);text-shadow:0 12px 40px rgba(2,6,23,0.6);color:#ffffff}

    p.lead{color:var(--muted);font-size:18px;margin:0 0 22px;transition:transform .18s ease,color .18s ease}
    p.lead:hover{transform:translateY(-2px);color:#f5f7fb}

    .features{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
    .feature{background:var(--glass);padding:12px 14px;border-radius:12px;min-width:170px;box-shadow:0 6px 18px rgba(3,6,12,0.5);transition:transform .28s ease, box-shadow .28s ease}
    .feature:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 14px 40px rgba(2,6,23,0.6)}
    .feature:focus{outline:none;transform:translateY(-6px) scale(1.01);box-shadow:0 16px 48px rgba(2,6,23,0.65)}

    /* subtle group hover for hero left */
    .hero-left {transition:transform .28s ease}
    .hero-left:hover{transform:translateY(-6px)}

    /* Card */
    .card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:28px;border-radius:18px;box-shadow:var(--card-shadow);}
    .hero-right{display:flex;flex-direction:column;gap:18px}
    .stat{display:flex;justify-content:space-between;align-items:center}
    .stat .num{font-size:24px;font-weight:800;color:var(--gold)}
    .stat small{color:var(--muted)}

    /* Sections */
    section{max-width:1200px;margin:40px auto;padding:20px}
    .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
    .mission, .vision{padding:22px;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);box-shadow:0 8px 30px rgba(0,0,0,0.45)}
    .values{display:flex;gap:12px;flex-wrap:wrap}
    .value{flex:1 1 140px;padding:14px;border-radius:12px;background:linear-gradient(180deg, rgba(212,175,55,0.03), rgba(255,255,255,0.01));text-align:center;font-weight:700}

    /* Services list */
    .services{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .service-card{padding:18px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));transition:transform .28s ease;}
    .service-card:hover{transform:translateY(-8px)}

    /* Contact */
    .contact{display:flex;gap:22px;align-items:flex-start}
    form{flex:1;background:var(--glass);padding:20px;border-radius:12px}
    input,textarea{width:100%;padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit;margin-bottom:12px}
    button.send{background:linear-gradient(90deg,var(--gold),#f3d88a);border:none;padding:12px 16px;border-radius:10px;font-weight:700;cursor:pointer}

    footer{padding:28px;text-align:center;color:var(--muted);font-size:14px}

    /* reveal animation */
    .reveal{opacity:0;transform:translateY(20px);transition:all .7s cubic-bezier(.2,.9,.2,1)}
    .reveal.show{opacity:1;transform:none}

    /* responsive */
    @media (max-width:980px){
      .hero{grid-template-columns:1fr;padding-top:100px}
      .services{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width:640px){
      .nav{left:12px;transform:none;width:calc(100% - 24px)}
      h1{font-size:34px}
      .services{grid-template-columns:1fr}
    }

    /* subtle interactive gold outline on focus */
    :focus{outline:3px solid rgba(212,175,55,0.12)}

        /* Estilos glass para el carrusel */
    .glass-swiper .swiper-slide {
      background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
      border-radius: 14px;
      padding: 8px;
      display:flex;
      align-items:center;
      justify-content:center;
      border: 1px solid rgba(255,255,255,0.06);
      box-shadow: 0 8px 30px rgba(0,0,0,0.35);
      backdrop-filter: blur(8px) saturate(120%);
      -webkit-backdrop-filter: blur(8px) saturate(120%);
    }
    .glass-swiper .glass-media {
      width:100%;
      height:60vh;
      max-height:78vh;
      border-radius:10px;
      object-fit:contain;
      box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    }
    .glass-thumbs .swiper-slide {
      height:72px;
      opacity:0.8;
      border-radius:10px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,0.04);
      transition:transform .18s ease, opacity .18s ease;
    }
    .glass-thumbs .swiper-slide-thumb-active { transform:scale(1.04); opacity:1; }
    .glass-thumbs img, .glass-thumbs video { width:100%; height:100%; object-fit:cover; display:block; }
    .glass-swiper .swiper-button-next, .glass-swiper .swiper-button-prev {
      color:#fff;
      background: rgba(255,255,255,0.04);
      width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;
      box-shadow: 0 6px 18px rgba(0,0,0,0.25);
      border:1px solid rgba(255,255,255,0.04);
    }
    /* responsive thumbs */
    @media (max-width:720px){
      .glass-thumbs .swiper-slide { height:56px; }
      .glass-swiper .glass-media { height:48vh; }