:root{
      --bg:#05070d;
      --bg-soft:#090d18;
      --panel:rgba(11,18,33,.68);
      --panel-strong:rgba(13,22,42,.86);
      --line:rgba(87,164,255,.18);
      --line-strong:rgba(87,164,255,.38);
      --primary:#3b9eff;
      --primary-2:#0b66ff;
      --cyan:#72ddff;
      --text:#f4f8ff;
      --muted:#98abc8;
      --success:#65f7b6;
      --radius:24px;
      --shadow:0 30px 80px rgba(0,0,0,.45);
    }

    *{margin:0;padding:0;box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      min-height:100vh;
      overflow-x:hidden;
      font-family:"Inter",sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 10% 10%,rgba(24,104,255,.16),transparent 32%),
        radial-gradient(circle at 90% 18%,rgba(0,209,255,.12),transparent 30%),
        radial-gradient(circle at 50% 85%,rgba(56,89,255,.12),transparent 35%),
        var(--bg);
    }

    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-3;
      background-image:
        linear-gradient(rgba(70,132,220,.055) 1px,transparent 1px),
        linear-gradient(90deg,rgba(70,132,220,.055) 1px,transparent 1px);
      background-size:52px 52px;
      mask-image:linear-gradient(to bottom,black,transparent 88%);
    }

    a{color:inherit;text-decoration:none}
    button,a{cursor:pointer}
    img{display:block;max-width:100%}
    section{scroll-margin-top:100px}
    .container{width:min(1180px,calc(100% - 40px));margin:auto}
    .section{padding:110px 0}
    .eyebrow{
      display:inline-flex;align-items:center;gap:9px;
      margin-bottom:18px;padding:8px 13px;border:1px solid var(--line-strong);
      border-radius:999px;background:rgba(29,106,219,.11);
      color:#acd4ff;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
    }
    .section-title{font-size:clamp(2.15rem,5vw,4.3rem);line-height:1;letter-spacing:-.055em;max-width:850px}
    .section-copy{color:var(--muted);font-size:1.05rem;line-height:1.75;max-width:690px;margin-top:20px}
    .gradient-text{
      color:transparent;
      background:linear-gradient(120deg,#fff 10%,#91caff 45%,#3b9eff 72%,#75f0ff);
      background-clip:text;-webkit-background-clip:text;
    }

    #particles{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
    .aurora{position:fixed;inset:0;z-index:-4;overflow:hidden;pointer-events:none}
    .orb{
      position:absolute;width:420px;height:420px;border-radius:50%;filter:blur(100px);
      opacity:.18;animation:floatOrb 12s ease-in-out infinite alternate;
    }
    .orb.one{background:#0077ff;left:-120px;top:12%}
    .orb.two{background:#00d5ff;right:-160px;top:28%;animation-delay:-4s}
    .orb.three{background:#5d2bff;left:35%;bottom:-220px;animation-delay:-7s}
    @keyframes floatOrb{to{transform:translate3d(50px,-60px,0) scale(1.16)}}

    .cursor-dot,.cursor-ring{
      position:fixed;left:0;top:0;pointer-events:none;border-radius:50%;z-index:9999;
      transform:translate(-50%,-50%);
    }
    .cursor-dot{width:7px;height:7px;background:white}
    .cursor-ring{
      width:35px;height:35px;border:1px solid rgba(93,175,255,.75);
      transition:width .2s,height .2s,background .2s,border .2s;
    }
    .cursor-ring.active{width:55px;height:55px;background:rgba(59,158,255,.1);border-color:var(--cyan)}

    .navbar-wrap{
      position:fixed;top:18px;left:0;right:0;z-index:100;
    }
    .navbar{
      width:min(1180px,calc(100% - 32px));margin:auto;padding:13px 16px 13px 20px;
      display:flex;align-items:center;justify-content:space-between;gap:18px;
      border:1px solid var(--line);border-radius:20px;
      background:rgba(5,9,18,.72);backdrop-filter:blur(18px);box-shadow:0 15px 50px rgba(0,0,0,.25);
    }
    .logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.25rem}
    .logo-mark{
      width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
      background:linear-gradient(145deg,#3b9eff,#074ac6);box-shadow:0 0 30px rgba(59,158,255,.4)
    }
    .nav-links{display:flex;align-items:center;gap:24px;color:#b7c7df;font-size:.91rem;font-weight:700}
    .nav-links a{transition:.2s}
    .nav-links a:hover{color:#fff}
    .nav-cta{
      padding:11px 17px;border-radius:13px;background:rgba(59,158,255,.12);
      border:1px solid var(--line-strong);font-weight:800;color:#dcebff;
    }
    .menu-btn{display:none;background:none;border:0;color:white;font-size:1.35rem}

    .hero{
      min-height:100vh;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;
      gap:60px;padding:145px 0 80px;
    }
    .hero-content{animation:heroIn .9s ease both}
    @keyframes heroIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
    .hero h1{
      font-size:clamp(3.3rem,7vw,7.25rem);line-height:.88;letter-spacing:-.075em;font-weight:900;
      text-transform:uppercase;
    }
    .hero h1 span{display:block}
    .hero p{max-width:650px;margin:28px 0 34px;color:#a8bad3;font-size:1.08rem;line-height:1.75}
    .cta-group{display:flex;flex-wrap:wrap;gap:14px}
    .btn{
      position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
      min-height:55px;padding:0 23px;border-radius:15px;font-weight:800;overflow:hidden;
      transition:transform .25s,border-color .25s,box-shadow .25s,background .25s;
    }
    .btn:hover{transform:translateY(-3px)}
    .btn-primary{
      color:white;border:1px solid rgba(255,255,255,.16);
      background:linear-gradient(135deg,#2992ff,#0758dc);
      box-shadow:0 10px 35px rgba(0,102,255,.35);
      animation:buttonGlow 2.6s ease-in-out infinite;
    }
    @keyframes buttonGlow{
      50%{box-shadow:0 12px 48px rgba(0,137,255,.58),0 0 0 7px rgba(59,158,255,.06)}
    }
    .btn-secondary{border:1px solid var(--line-strong);background:rgba(255,255,255,.035);color:#d6e7ff}
    .hero-note{display:flex;align-items:center;gap:10px;margin-top:25px;color:#8fa5c2;font-size:.88rem}
    .hero-note i{color:var(--success)}

    .hero-visual{position:relative;display:grid;place-items:center;animation:heroIn 1s .15s ease both}
    .visual-ring{
      position:absolute;width:470px;height:470px;border-radius:50%;
      border:1px solid rgba(61,162,255,.18);animation:spin 20s linear infinite;
    }
    .visual-ring::before,.visual-ring::after{
      content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:#62c7ff;
      box-shadow:0 0 24px #37a7ff;
    }
    .visual-ring::before{left:34px;top:92px}.visual-ring::after{right:45px;bottom:83px}
    @keyframes spin{to{transform:rotate(360deg)}}
    .avatar-card{
      position:relative;width:min(100%,390px);padding:18px;border:1px solid var(--line-strong);
      border-radius:34px;background:linear-gradient(145deg,rgba(20,39,72,.8),rgba(7,12,23,.76));
      backdrop-filter:blur(20px);box-shadow:var(--shadow),0 0 65px rgba(0,108,255,.14);
      transform:rotate(2deg);
    }
    .avatar-frame{
      min-height:430px;border-radius:25px;overflow:hidden;position:relative;
      background:
        linear-gradient(to top,rgba(3,7,16,.88),transparent 62%),
        radial-gradient(circle at 50% 25%,rgba(91,177,255,.55),transparent 27%),
        linear-gradient(135deg,#132744,#07101e);
    }
    .avatar-frame::before{
      content:"";position:absolute;inset:0;
      background-image:linear-gradient(rgba(80,174,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(80,174,255,.08) 1px,transparent 1px);
      background-size:30px 30px;
    }
    .avatar-img{
      position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
      border-radius:25px;
    }
    .avatar-fallback{
      position:absolute;inset:0;display:grid;place-items:center;font-size:10rem;color:#8bc7ff;
      filter:drop-shadow(0 0 40px rgba(45,150,255,.45));
    }
    .avatar-info{position:absolute;left:25px;right:25px;bottom:24px;z-index:2}
    .avatar-info h3{font-size:2rem;margin-bottom:6px}
    .avatar-info p{color:#aac0dd}
    .status-badge{
      position:absolute;right:-18px;top:28px;display:flex;align-items:center;gap:8px;
      padding:11px 15px;border-radius:14px;border:1px solid rgba(101,247,182,.24);
      background:rgba(8,26,26,.83);backdrop-filter:blur(15px);font-weight:800;font-size:.82rem;
    }
    .status-dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 15px var(--success)}
    .floating-code{
      position:absolute;left:-35px;bottom:45px;padding:13px 15px;border:1px solid var(--line);
      border-radius:15px;background:rgba(7,15,29,.9);backdrop-filter:blur(15px);
      color:#8fd2ff;font-family:monospace;font-size:.78rem;box-shadow:0 15px 35px rgba(0,0,0,.3);
    }

    .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
    .stat{
      padding:27px;border:1px solid var(--line);border-radius:var(--radius);
      background:linear-gradient(145deg,rgba(16,29,54,.75),rgba(7,12,23,.66));
      text-align:center;
    }
    .stat strong{display:block;font-size:clamp(2.2rem,4vw,3.65rem);letter-spacing:-.06em}
    .stat span{color:var(--muted);font-size:.9rem}

    .about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
    .about-card{
      min-height:500px;border-radius:30px;border:1px solid var(--line);position:relative;overflow:hidden;
      background:
        linear-gradient(to top,rgba(6,10,18,.9),transparent),
        radial-gradient(circle at 60% 30%,rgba(59,158,255,.42),transparent 28%),
        linear-gradient(145deg,#101d35,#07101c);
    }
    .about-card::before{
      content:"BERNALDEV";position:absolute;left:-25px;bottom:20px;
      font-size:6rem;font-weight:900;letter-spacing:-.08em;color:rgba(255,255,255,.035);
    }
    .about-card i{position:absolute;inset:0;display:grid;place-items:center;font-size:10rem;color:#79bfff;filter:drop-shadow(0 0 35px #168cff66)}
    .about-list{display:grid;gap:14px;margin-top:30px}
    .about-list div{display:flex;gap:13px;color:#b3c4dc;line-height:1.55}
    .about-list i{color:#72c6ff;margin-top:4px}

    .skills-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:45px}
    .skill{
      padding:24px;border:1px solid var(--line);border-radius:20px;background:rgba(14,25,47,.56)
    }
    .skill-top{display:flex;justify-content:space-between;margin-bottom:13px;font-weight:800}
    .skill-top span:last-child{color:#78c7ff}
    .bar{height:10px;border-radius:999px;background:#101a2b;overflow:hidden}
    .bar-fill{
      width:var(--level);height:100%;border-radius:inherit;
      background:linear-gradient(90deg,#0868ef,#71dfff);box-shadow:0 0 18px rgba(42,160,255,.55);
      transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
    }
    .skill.visible .bar-fill{transform:scaleX(1)}

    .cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:45px}
    .service-card{
      position:relative;padding:26px;border:1px solid var(--line);border-radius:22px;
      background:linear-gradient(145deg,rgba(16,30,56,.7),rgba(7,12,23,.75));overflow:hidden;
      transition:.3s;
    }
    .service-card::after{
      content:"";position:absolute;width:120px;height:120px;border-radius:50%;right:-50px;top:-50px;
      background:rgba(59,158,255,.11);filter:blur(8px);
    }
    .service-card:hover{transform:translateY(-8px);border-color:var(--line-strong)}
    .service-card i{font-size:1.8rem;color:#62bcff;margin-bottom:28px}
    .service-card h3{font-size:1.15rem;margin-bottom:10px}
    .service-card p{color:var(--muted);font-size:.92rem;line-height:1.65}

    .projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
    .project-card{
      border:1px solid var(--line);border-radius:24px;overflow:hidden;background:rgba(10,18,32,.74);
      transition:.3s;
    }
    .project-card:hover{transform:translateY(-8px);border-color:var(--line-strong);box-shadow:0 22px 50px rgba(0,0,0,.28)}
    .project-cover{
      height:210px;position:relative;display:grid;place-items:center;overflow:hidden;
      background:radial-gradient(circle at 50% 40%,rgba(59,158,255,.3),transparent 30%),linear-gradient(145deg,#122849,#07101d);
    }
    .project-cover::before{
      content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(85,170,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(85,170,255,.07) 1px,transparent 1px);background-size:24px 24px
    }
    .project-cover i{font-size:4rem;color:#89cbff;filter:drop-shadow(0 0 25px #188cff99);z-index:1}
    .project-body{padding:24px}
    .project-tags{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 20px}
    .tag{font-size:.72rem;font-weight:800;color:#aad4ff;border:1px solid var(--line);padding:7px 9px;border-radius:8px;background:rgba(59,158,255,.06)}
    .project-body p{color:var(--muted);font-size:.9rem;line-height:1.65}
    .project-link{display:inline-flex;align-items:center;gap:8px;color:#78c8ff;font-weight:800;font-size:.9rem}

    .timeline{position:relative;max-width:860px;margin:55px auto 0}
    .timeline::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(transparent,#3b9eff,transparent)}
    .timeline-item{width:50%;padding:0 45px 55px;position:relative}
    .timeline-item:nth-child(even){margin-left:50%}
    .timeline-item::before{
      content:"";position:absolute;top:10px;width:13px;height:13px;border-radius:50%;background:#65c9ff;
      box-shadow:0 0 22px #3b9eff;
    }
    .timeline-item:nth-child(odd)::before{right:-7px}.timeline-item:nth-child(even)::before{left:-6px}
    .timeline-card{padding:24px;border:1px solid var(--line);border-radius:20px;background:rgba(12,22,40,.72)}
    .timeline-card strong{display:block;color:#63bdff;font-size:1.8rem;margin-bottom:8px}
    .timeline-card p{color:var(--muted);line-height:1.6}

    .testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:45px}
    .quote{padding:28px;border:1px solid var(--line);border-radius:22px;background:rgba(13,24,44,.66)}
    .stars{color:#ffd66b;letter-spacing:4px;margin-bottom:20px}
    .quote blockquote{font-size:1.02rem;line-height:1.7;color:#dae8fb;margin-bottom:22px}
    .quote footer{color:#77c4ff;font-weight:800}

    .faq{display:grid;gap:12px;margin-top:45px}
    .faq-item{border:1px solid var(--line);border-radius:18px;background:rgba(11,21,39,.65);overflow:hidden}
    .faq-question{
      width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;
      color:white;background:none;border:0;padding:20px 22px;font:inherit;font-weight:800
    }
    .faq-answer{max-height:0;overflow:hidden;color:var(--muted);line-height:1.7;transition:max-height .35s ease}
    .faq-answer p{padding:0 22px 22px}
    .faq-item.open .faq-answer{max-height:180px}
    .faq-item.open .faq-question i{transform:rotate(45deg)}
    .faq-question i{transition:.3s}

    .final-cta{
      position:relative;overflow:hidden;text-align:center;padding:85px 30px;border:1px solid var(--line-strong);
      border-radius:35px;background:
        radial-gradient(circle at 50% 0%,rgba(64,176,255,.28),transparent 42%),
        linear-gradient(145deg,rgba(13,31,60,.92),rgba(5,10,21,.94));
      box-shadow:var(--shadow);
    }
    .final-cta::before{
      content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(91,177,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(91,177,255,.06) 1px,transparent 1px);background-size:34px 34px;
      mask-image:radial-gradient(circle at center,black,transparent 75%);
    }
    .final-cta>*{position:relative;z-index:1}
    .final-cta h2{font-size:clamp(2.6rem,6vw,5.7rem);letter-spacing:-.065em;line-height:.98}
    .final-cta p{color:var(--muted);margin:22px auto 30px;max-width:650px;line-height:1.7}
    .final-cta .cta-group{justify-content:center}

    .footer-main{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:35px;padding:75px 0 40px}
    .footer-main h4{margin-bottom:18px}
    .footer-main ul{list-style:none;display:grid;gap:12px;color:var(--muted)}
    .footer-brand p{color:var(--muted);max-width:350px;line-height:1.7;margin-top:16px}
    .footer-bottom{
      border-top:1px solid var(--line);padding:22px 0 32px;display:flex;justify-content:space-between;
      color:#7187a5;font-size:.87rem
    }
    .socials{display:flex;gap:12px}
    .socials a{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.025)}
    .socials a:hover{color:white;border-color:var(--line-strong)}

    .reveal{opacity:0;transform:translateY(35px);transition:opacity .75s ease,transform .75s ease}
    .reveal.visible{opacity:1;transform:none}

    @media(max-width:980px){
      .hero,.about-grid{grid-template-columns:1fr}
      .hero{padding-top:170px}
      .hero-visual{margin-top:20px}
      .stats-grid,.cards-grid{grid-template-columns:repeat(2,1fr)}
      .projects-grid{grid-template-columns:repeat(2,1fr)}
      .footer-main{grid-template-columns:1fr 1fr}
      .nav-links{display:none;position:absolute;left:16px;right:16px;top:76px;flex-direction:column;align-items:stretch;padding:20px;background:#080e1a;border:1px solid var(--line);border-radius:17px}
      .nav-links.open{display:flex}
      .menu-btn{display:block}
      .nav-cta{display:none}
    }
    @media(max-width:680px){
      .container{width:min(100% - 24px,1180px)}
      .section{padding:80px 0}
      .hero h1{font-size:clamp(3rem,15vw,5rem)}
      .visual-ring{width:330px;height:330px}
      .avatar-card{width:320px}
      .avatar-frame{min-height:380px}
      .status-badge{right:-5px}
      .floating-code{left:-2px}
      .stats-grid,.skills-grid,.cards-grid,.projects-grid,.testimonials,.footer-main{grid-template-columns:1fr}
      .timeline::before{left:6px}
      .timeline-item,.timeline-item:nth-child(even){width:100%;margin-left:0;padding:0 0 35px 35px}
      .timeline-item:nth-child(odd)::before,.timeline-item:nth-child(even)::before{left:0;right:auto}
      .footer-bottom{flex-direction:column;gap:15px}
      .cursor-dot,.cursor-ring{display:none}
    }
    @media(prefers-reduced-motion:reduce){
      *{animation:none!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
      .reveal{opacity:1;transform:none}
    }


    /* ===== BernalDev Shop / catálogo unificado ===== */
    .shop-head{display:flex;align-items:end;justify-content:space-between;gap:34px;margin-bottom:34px}
    .shop-head .section-copy{margin-top:0;max-width:480px}
    .shop-toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 34px}
    .shop-filter{padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.025);color:#8ea5c4;font:800 .75rem Inter,sans-serif;letter-spacing:.04em;transition:.25s}
    .shop-filter:hover,.shop-filter.active{color:#fff;border-color:var(--line-strong);background:rgba(59,158,255,.13);box-shadow:0 0 25px rgba(59,158,255,.08)}
    .shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .shop-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:26px;background:linear-gradient(145deg,rgba(16,29,54,.78),rgba(7,12,23,.72));box-shadow:0 18px 45px rgba(0,0,0,.18);transition:transform .3s,border-color .3s,box-shadow .3s}
    .shop-card:hover{transform:translateY(-7px);border-color:var(--line-strong);box-shadow:0 28px 70px rgba(0,0,0,.3),0 0 40px rgba(21,116,255,.08)}
    .shop-card.hidden{display:none}
    .shop-visual{height:220px;position:relative;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--line);background:radial-gradient(circle at 50% 32%,rgba(71,171,255,.26),transparent 27%),linear-gradient(145deg,#10264a,#07101f)}
    .shop-visual::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(74,154,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(74,154,255,.06) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(to bottom,black,transparent)}
    .shop-visual::after{content:"";position:absolute;width:180px;height:180px;border:1px solid rgba(99,190,255,.18);border-radius:50%;box-shadow:0 0 50px rgba(44,137,255,.14);animation:spin 18s linear infinite}
    .shop-icon{position:relative;z-index:2;width:88px;height:88px;display:grid;place-items:center;border:1px solid rgba(116,202,255,.28);border-radius:28px;background:linear-gradient(145deg,rgba(56,157,255,.19),rgba(7,27,52,.72));font-size:2.35rem;color:#b9e1ff;box-shadow:0 20px 50px rgba(0,0,0,.26),0 0 35px rgba(52,149,255,.16)}
    .shop-label{position:absolute;left:16px;top:16px;z-index:3;padding:7px 10px;border:1px solid var(--line-strong);border-radius:999px;background:rgba(5,11,22,.72);backdrop-filter:blur(12px);font-size:.68rem;font-weight:900;letter-spacing:.12em;color:#9fd0ff}
    .shop-body{padding:24px}
    .shop-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px;color:#7f98b8;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
    .shop-meta b{color:#74d9ff;font-size:.65rem}
    .shop-card h3{font-size:1.25rem;margin-bottom:9px}
    .shop-card p{min-height:72px;color:var(--muted);line-height:1.65;font-size:.9rem}
    .compat{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0}
    .compat span{padding:6px 9px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.02);color:#8eb0d5;font-size:.67rem;font-weight:800}
    .shop-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:17px;border-top:1px solid var(--line)}
    .shop-price{font-size:1rem}.shop-price small{display:block;color:#667e9c;font-size:.62rem;text-transform:uppercase;letter-spacing:.09em;margin-bottom:3px}
    .shop-buy{display:inline-flex;align-items:center;gap:8px;color:#bde0ff;font-weight:900;font-size:.82rem}.shop-buy:hover{color:#fff}
    .shop-note{display:flex;align-items:center;gap:16px;margin-top:22px;padding:18px 20px;border:1px dashed rgba(83,167,255,.26);border-radius:18px;background:rgba(22,90,176,.055);color:#8fa7c5}
    .shop-note i{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;border-radius:12px;background:rgba(59,158,255,.12);color:#79c7ff}.shop-note p{flex:1;font-size:.85rem}.shop-note strong{color:#dcecff}

    .workflow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:48px;border-top:1px solid var(--line)}
    .workflow article{position:relative;padding:36px 28px 0 0}
    .workflow article::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:#55b8ff;box-shadow:0 0 18px #2b96ff}
    .workflow b{color:#62b9ff;font:800 .75rem monospace}.workflow span{display:block;margin:25px 0 7px;color:#587695;font-size:.66rem;font-weight:900;letter-spacing:.14em}.workflow h3{font-size:1.1rem;margin-bottom:8px}.workflow p{color:var(--muted);font-size:.84rem;line-height:1.65}

    .contact-shell{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;padding:46px;border:1px solid var(--line-strong);border-radius:30px;background:radial-gradient(circle at 5% 10%,rgba(38,126,255,.15),transparent 34%),linear-gradient(145deg,rgba(14,26,48,.86),rgba(6,11,21,.82));box-shadow:var(--shadow)}
    .contact-shell h2{font-size:clamp(2.3rem,5vw,4rem);line-height:1;letter-spacing:-.055em;margin-bottom:17px}.contact-shell .section-copy{font-size:.98rem}.availability{display:flex;align-items:center;gap:11px;margin-top:26px;color:#a5bad4;font-size:.82rem}.availability .status-dot{flex:0 0 auto}
    .quote-form{display:grid;gap:14px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.quote-form label{display:grid;gap:7px;color:#8ea4bf;font-size:.72rem;font-weight:800}.quote-form input,.quote-form select,.quote-form textarea{width:100%;border:1px solid #1b3452;border-radius:13px;outline:none;background:rgba(3,9,17,.72);color:#eff7ff;padding:14px 15px;font:500 .84rem Inter,sans-serif}.quote-form textarea{min-height:148px;resize:vertical}.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{border-color:#3b9eff;box-shadow:0 0 0 3px rgba(59,158,255,.09)}.quote-form small{color:#5f7691;font-size:.68rem;text-align:center}.wide{width:100%;border:0}

    .request-modal{position:fixed;inset:0;z-index:9998;display:grid;place-items:center;padding:20px;background:rgba(1,5,12,.82);backdrop-filter:blur(14px);opacity:0;pointer-events:none;transition:.25s}.request-modal.open{opacity:1;pointer-events:auto}.request-card{position:relative;width:min(580px,100%);padding:30px;border:1px solid var(--line-strong);border-radius:24px;background:#08111f;box-shadow:var(--shadow);transform:translateY(18px);transition:.25s}.request-modal.open .request-card{transform:none}.request-card h3{font-size:1.8rem;margin:8px 0}.request-card p{color:var(--muted);font-size:.86rem;line-height:1.6}.request-card textarea{width:100%;min-height:220px;margin:15px 0;padding:14px;border:1px solid #1b3657;border-radius:13px;background:#040a12;color:#bed8f2;font:12px/1.6 monospace;resize:none}.request-close{position:absolute;right:18px;top:14px;border:0;background:none;color:#7890ad;font-size:1.6rem}

    @media(max-width:950px){.shop-grid{grid-template-columns:repeat(2,1fr)}.shop-card:last-child{grid-column:1/-1}.workflow{grid-template-columns:repeat(2,1fr);gap:26px}.contact-shell{grid-template-columns:1fr}.shop-head{display:block}.shop-head .section-copy{margin-top:18px}}
    @media(max-width:700px){.shop-grid,.workflow{grid-template-columns:1fr}.shop-card:last-child{grid-column:auto}.workflow{border-top:0;gap:0}.workflow article{padding:22px 0 22px 26px;border-left:1px solid var(--line)}.workflow article::before{top:28px;left:-5px}.workflow span{margin-top:8px}.contact-shell{padding:28px 20px}.field-row{grid-template-columns:1fr}.shop-note{align-items:flex-start;flex-wrap:wrap}.shop-note p{flex-basis:80%}.shop-visual{height:190px}}

/* =========================
   Valoraciones de clientes
========================= */
.reviews-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px}
.rating-summary{min-width:235px;display:flex;align-items:center;gap:16px;padding:18px 20px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,rgba(16,29,54,.82),rgba(7,12,23,.72));box-shadow:0 18px 45px rgba(0,0,0,.2)}
.rating-summary>strong{font-size:3.1rem;line-height:1;letter-spacing:-.08em}
.summary-stars,.stars{color:#ffd56a;letter-spacing:.12em;text-shadow:0 0 18px rgba(255,213,106,.18)}
.rating-summary span{display:block;margin-top:5px;color:var(--muted);font-size:.82rem}
.reviews-layout{display:grid;grid-template-columns:1.22fr .78fr;gap:24px;align-items:start;margin-top:45px}
.testimonials{margin-top:0}
.quote{position:relative;min-height:190px}
.quote blockquote{margin:15px 0 18px;color:#d8e5f6;line-height:1.68}
.quote footer{color:var(--muted);font-size:.88rem}
.review-date{display:block;margin-top:6px;color:#5f7899;font-size:.75rem}
.review-loading{grid-column:1/-1;opacity:.65}
.reviews-more{margin:18px auto 0}
.review-form{position:sticky;top:105px;padding:26px;border:1px solid var(--line-strong);border-radius:26px;background:linear-gradient(145deg,rgba(16,29,54,.86),rgba(7,12,23,.84));box-shadow:var(--shadow)}
.review-form-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}
.review-form h3{font-size:1.45rem;margin-top:5px}
.mini-label{font-size:.68rem;letter-spacing:.15em;color:#7dbfff;font-weight:900}
.review-form label{display:grid;gap:8px;margin-top:14px;color:#aec0d8;font-size:.82rem;font-weight:700}
.review-form input,.review-form textarea{width:100%;border:1px solid var(--line);border-radius:13px;background:rgba(4,9,18,.72);color:#fff;padding:13px 14px;outline:none;font:inherit;transition:.2s}
.review-form textarea{min-height:130px;resize:vertical}
.review-form input:focus,.review-form textarea:focus{border-color:#4da8ff;box-shadow:0 0 0 4px rgba(59,158,255,.08)}
.star-picker{display:flex;gap:3px}
.star-picker button{border:0;background:transparent;color:#41516a;font-size:1.48rem;padding:0 1px;transition:transform .15s,color .15s,text-shadow .15s}
.star-picker button:hover,.star-picker button.active{color:#ffd56a;transform:translateY(-1px);text-shadow:0 0 18px rgba(255,213,106,.35)}
.review-meta{display:flex;justify-content:space-between;gap:12px;margin:9px 1px 15px;color:#6f87a3;font-size:.72rem}
.review-status{min-height:20px;margin-top:12px;text-align:center;font-size:.82rem;color:var(--muted)}
.review-status.success{color:var(--success)}
.review-status.error{color:#ff8f9f}
.review-empty{grid-column:1/-1;padding:28px;border:1px dashed var(--line);border-radius:20px;color:var(--muted);text-align:center}
@media(max-width:900px){.reviews-head{align-items:flex-start;flex-direction:column}.reviews-layout{grid-template-columns:1fr}.review-form{position:static}.rating-summary{width:100%;min-width:0}}
@media(max-width:600px){.review-form-top{flex-direction:column}.rating-summary>strong{font-size:2.5rem}.review-meta{flex-direction:column}.testimonials{grid-template-columns:1fr}}

/* ===== Unified Admin / Security Center ===== */
body.admin-mode > .navbar-wrap,
body.admin-mode > main,
body.admin-mode > footer,
body.admin-mode > .request-modal,
body.admin-mode > .cursor-dot,
body.admin-mode > .cursor-ring { display:none !important; }
body.admin-mode{min-height:100vh;overflow-x:hidden}
body.admin-mode #adminApp:not([hidden]){display:block !important;min-height:100vh;position:relative;z-index:3}
.admin-app{min-height:100vh}
.admin-login-view{min-height:100vh;display:grid;place-items:center;padding:110px 20px 40px}
.admin-login-card{width:min(520px,100%);padding:38px;border:1px solid rgba(78,139,214,.25);border-radius:28px;background:linear-gradient(180deg,rgba(9,17,34,.94),rgba(5,10,21,.96));box-shadow:0 28px 90px rgba(0,0,0,.45);backdrop-filter:blur(22px)}
.admin-login-brand{display:inline-flex;margin-bottom:32px}.admin-login-card h1{font-size:clamp(2.2rem,6vw,4rem);margin:.15em 0}.admin-login-card>p{color:var(--muted);line-height:1.7}.admin-login-form{display:grid;gap:16px;margin-top:26px}.admin-login-form label{display:grid;gap:8px;color:#cbd9ea;font-size:.9rem;font-weight:700}.admin-login-form input,.admin-filters input,.admin-filters select{width:100%;border:1px solid rgba(92,143,203,.24);background:rgba(3,9,20,.72);color:#fff;border-radius:14px;padding:14px 15px;outline:none}.admin-login-form input:focus,.admin-filters input:focus,.admin-filters select:focus{border-color:#58b5ff;box-shadow:0 0 0 4px rgba(88,181,255,.08)}.admin-back-link{display:inline-flex;gap:8px;align-items:center;margin-top:20px;color:#8299b5;text-decoration:none}.admin-back-link:hover{color:#fff}
.admin-dashboard-view{min-height:100vh}.admin-topbar{height:76px;position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:0 26px;background:rgba(4,9,20,.82);backdrop-filter:blur(22px);border-bottom:1px solid rgba(86,135,194,.18)}.admin-top-actions{display:flex;align-items:center;gap:10px}.admin-live{display:flex;align-items:center;gap:9px;color:#8fa6c1;font-size:.82rem}.admin-action-btn{padding:10px 14px;min-height:42px}.admin-layout{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:calc(100vh - 76px)}.admin-sidebar{position:sticky;top:76px;height:calc(100vh - 76px);padding:26px 16px;border-right:1px solid rgba(86,135,194,.16);background:rgba(5,11,24,.54)}.admin-nav-item{width:100%;display:flex;gap:10px;align-items:center;text-align:left;border:0;background:transparent;color:#8ea3bd;padding:12px 13px;border-radius:12px;margin:4px 0;font-weight:700;cursor:pointer}.admin-nav-item:hover,.admin-nav-item.active{color:#fff;background:linear-gradient(90deg,rgba(45,151,255,.14),rgba(45,151,255,.05));box-shadow:inset 3px 0 #58b5ff}.admin-side-note{position:absolute;left:16px;right:16px;bottom:20px;padding:13px;border:1px solid rgba(86,135,194,.16);border-radius:14px;color:#6f849f;font-size:.72rem;line-height:1.55;background:rgba(7,14,28,.65)}.admin-main{min-width:0;padding:34px}.admin-tab{display:none}.admin-tab.active{display:block}.admin-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px}.admin-page-head h1{font-size:clamp(2rem,4vw,3rem);margin:0}.admin-muted{color:#7186a1;font-size:.82rem}.admin-metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}.admin-metric,.admin-panel{border:1px solid rgba(86,135,194,.16);background:linear-gradient(180deg,rgba(9,18,36,.88),rgba(5,11,23,.9));border-radius:20px;box-shadow:0 18px 55px rgba(0,0,0,.2)}.admin-metric{padding:21px}.admin-metric>span{color:#8094ad;font-size:.78rem}.admin-metric strong{display:block;font-size:2.25rem;margin:7px 0}.admin-metric small{color:#627791}.admin-metric.warning strong{color:#ffbd3d}.admin-metric.danger strong{color:#ff6374}.admin-panel-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:14px;margin-bottom:14px}.admin-panel{padding:18px}.admin-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.admin-panel-head h2{font-size:1rem;margin:0}.admin-table-wrap{overflow:auto}.admin-table-wrap table{width:100%;border-collapse:collapse;font-size:.78rem}.admin-table-wrap th{text-align:left;color:#7186a1;font-weight:800;padding:12px;border-bottom:1px solid rgba(86,135,194,.17);white-space:nowrap}.admin-table-wrap td{padding:12px;border-bottom:1px solid rgba(86,135,194,.10);color:#c2d0e3;vertical-align:top}.admin-table-wrap code{color:#8ad1ff}.admin-path-cell{max-width:360px;overflow-wrap:anywhere}.admin-filters{display:flex;gap:10px;margin-bottom:14px}.admin-filters input{max-width:300px}.admin-filters select{max-width:180px}.admin-badge{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:.68rem;font-weight:900;text-transform:uppercase}.admin-badge.info{background:rgba(85,229,155,.11);color:#55e59b}.admin-badge.medium{background:rgba(255,189,61,.11);color:#ffbd3d}.admin-badge.high,.admin-badge.critical{background:rgba(255,93,108,.12);color:#ff6374}.admin-row-actions{display:flex;gap:7px;flex-wrap:wrap}.admin-row-actions button{border:1px solid rgba(86,135,194,.2);background:#0b1830;color:#dce9f8;border-radius:9px;padding:7px 9px;cursor:pointer}.admin-row-actions button.danger{color:#ff7180;border-color:rgba(255,99,116,.24);background:rgba(255,99,116,.08)}.admin-comment-cell{min-width:250px;max-width:440px;white-space:normal}.admin-bar-chart{height:220px;display:flex;align-items:flex-end;gap:7px;padding-top:15px}.admin-bar-col{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px}.admin-bar-col .admin-bar{width:100%;min-height:6px;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,#58b5ff,#176cff);box-shadow:0 0 22px rgba(50,168,255,.14)}.admin-bar-col span{font-size:.62rem;color:#637792;writing-mode:vertical-rl;transform:rotate(180deg);max-height:42px;overflow:hidden}.admin-status-list{display:grid;gap:10px}.admin-status-row{display:flex;justify-content:space-between;align-items:center;padding:14px;border-radius:13px;background:rgba(32,95,160,.08);border:1px solid rgba(86,135,194,.12)}
@media(max-width:980px){.admin-layout{grid-template-columns:1fr}.admin-sidebar{position:static;height:auto;display:flex;gap:8px;overflow:auto;border-right:0;border-bottom:1px solid rgba(86,135,194,.16);padding:14px}.admin-sidebar>.eyebrow,.admin-side-note{display:none}.admin-nav-item{width:auto;white-space:nowrap}.admin-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-panel-grid{grid-template-columns:1fr}.admin-main{padding:22px}.admin-topbar{padding:0 18px}.admin-live{display:none}}
@media(max-width:620px){.admin-login-card{padding:28px 20px}.admin-topbar{height:auto;min-height:76px;align-items:flex-start;padding-top:15px;padding-bottom:15px;gap:12px}.admin-top-actions{gap:7px}.admin-action-btn{font-size:0;width:42px;padding:10px}.admin-action-btn i{font-size:14px}.admin-metric-grid{grid-template-columns:1fr}.admin-main{padding:18px 12px}.admin-page-head{align-items:flex-start;flex-direction:column}.admin-filters{flex-direction:column}.admin-filters input,.admin-filters select{max-width:none}}

/* ===== Discord session / account navigation ===== */
.nav-user-area{position:relative;display:flex;align-items:center}
.nav-login,.nav-account-btn{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:10px 14px;border:1px solid rgba(88,181,255,.22);border-radius:13px;background:rgba(8,18,36,.68);color:#eaf5ff;text-decoration:none;font-weight:800;font-size:.82rem;cursor:pointer;transition:.22s ease;backdrop-filter:blur(16px)}
.nav-login:hover,.nav-account-btn:hover{border-color:rgba(88,181,255,.55);background:rgba(25,82,145,.18);transform:translateY(-1px)}
.nav-login i{color:#738adb;font-size:1rem}.nav-account{position:relative}.nav-account-btn img{width:27px;height:27px;border-radius:50%;object-fit:cover;border:1px solid rgba(126,198,255,.35)}.nav-account-btn>i{font-size:.68rem;color:#7f94ad}
.account-menu{position:absolute;right:0;top:calc(100% + 12px);width:265px;padding:10px;border:1px solid rgba(88,181,255,.18);border-radius:17px;background:rgba(5,11,24,.96);box-shadow:0 24px 70px rgba(0,0,0,.48);backdrop-filter:blur(22px);z-index:100}.account-menu-head{display:flex;align-items:center;gap:11px;padding:9px 8px 13px;border-bottom:1px solid rgba(88,181,255,.12);margin-bottom:6px}.account-menu-head img{width:42px;height:42px;border-radius:50%;object-fit:cover}.account-menu-head div{min-width:0}.account-menu-head strong,.account-menu-head span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-menu-head strong{font-size:.88rem}.account-menu-head span{color:#6f849f;font-size:.7rem;margin-top:3px}.account-menu a,.account-menu button{width:100%;display:flex;align-items:center;gap:10px;padding:11px 10px;color:#a9bbcf;text-decoration:none;border:0;border-radius:10px;background:transparent;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;text-align:left}.account-menu a:hover,.account-menu button:hover{background:rgba(88,181,255,.09);color:#fff}.account-menu a i,.account-menu button i{width:18px;text-align:center;color:#58b5ff}
.account-section[hidden]{display:none!important}.account-shell{padding:28px;border:1px solid rgba(88,181,255,.16);border-radius:26px;background:linear-gradient(180deg,rgba(9,18,36,.86),rgba(5,11,23,.9));box-shadow:0 24px 80px rgba(0,0,0,.22)}.account-profile{display:flex;align-items:center;gap:18px}.account-profile>img{width:86px;height:86px;border-radius:24px;object-fit:cover;border:1px solid rgba(88,181,255,.35);box-shadow:0 12px 38px rgba(22,108,255,.12)}.account-profile h2{margin:.15em 0;font-size:clamp(1.8rem,4vw,2.8rem)}.account-panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px}.account-panels article{display:flex;align-items:flex-start;gap:13px;padding:18px;border:1px solid rgba(88,181,255,.13);border-radius:18px;background:rgba(6,14,28,.58)}.account-panels article>i{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:rgba(88,181,255,.10);color:#58b5ff}.account-panels span,.account-panels strong,.account-panels small{display:block}.account-panels span{font-size:.7rem;color:#7086a0;text-transform:uppercase;font-weight:900;letter-spacing:.08em}.account-panels strong{margin:5px 0;color:#fff}.account-panels small{color:#7e92aa;line-height:1.5}.account-panels a{display:inline-flex;align-items:center;gap:7px;margin-top:10px;color:#72c3ff;text-decoration:none;font-size:.78rem;font-weight:800}
@media(max-width:1120px){.nav-user-area{margin-left:auto}.nav-account-btn span,.nav-login{font-size:0}.nav-login i{font-size:1rem}.nav-login{width:42px;justify-content:center;padding:10px}.nav-account-btn{padding:7px 9px}.nav-account-btn>i{display:none}}
@media(max-width:800px){.account-panels{grid-template-columns:1fr}.account-profile{align-items:flex-start}.account-menu{position:fixed;right:16px;top:74px}.nav-user-area{order:2}}
.nav-admin-direct{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:10px 13px;margin-right:8px;border:1px solid rgba(88,181,255,.28);border-radius:13px;background:linear-gradient(135deg,rgba(25,108,255,.16),rgba(52,176,255,.08));color:#dff3ff;text-decoration:none;font-size:.79rem;font-weight:900;white-space:nowrap}.nav-admin-direct:hover{border-color:rgba(88,181,255,.58);box-shadow:0 0 24px rgba(37,128,255,.12)}.nav-admin-direct i{color:#58b5ff}
@media(max-width:1120px){.nav-admin-direct{font-size:0;width:42px;justify-content:center;padding:10px}.nav-admin-direct i{font-size:.92rem}}

/* ============================================================
   VISIBILITY SYSTEM FIX
   El atributo hidden siempre tiene prioridad.
   ============================================================ */

[hidden] {
    display: none !important;
}

/* Navbar administrativo */
#adminNavbarDirect:not([hidden]) {
    display: inline-flex !important;
}

#adminNavLink:not([hidden]) {
    display: flex !important;
}

/* Tarjeta administrativa del perfil */
#accountAdminCard:not([hidden]) {
    display: flex !important;
}

/* Aplicación administrativa */
body.admin-mode #adminApp:not([hidden]) {
    display: block !important;
}

/* Login administrativo */
#adminLoginView:not([hidden]) {
    display: grid !important;
}

/* Dashboard administrativo */
#adminDashboardView:not([hidden]) {
    display: block !important;
}


/* ============================================================
   BERNALDEV SHOP - PRODUCT MANAGER
   ============================================================ */

.product-admin-grid {
  display: grid;
  grid-template-columns: minmax(340px, .9fr) minmax(420px, 1.2fr);
  gap: 16px;
  align-items: start;
}

.product-editor-panel {
  position: sticky;
  top: 96px;
}

.product-admin-form {
  display: grid;
  gap: 18px;
}

.product-admin-form label {
  display: grid;
  gap: 8px;
  color: #8ea3bd;
  font-size: .76rem;
  font-weight: 800;
}

.product-admin-form input,
.product-admin-form select,
.product-admin-form textarea {
  width: 100%;
  border: 1px solid rgba(86, 135, 194, .18);
  border-radius: 12px;
  outline: none;
  background: rgba(5, 13, 28, .8);
  color: #e9f3ff;
  padding: 12px 13px;
  font: inherit;
}

.product-admin-form input:focus,
.product-admin-form select:focus,
.product-admin-form textarea:focus {
  border-color: rgba(88, 181, 255, .65);
  box-shadow: 0 0 0 3px rgba(88, 181, 255, .08);
}

.product-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.product-image-editor {
  display: grid;
  gap: 10px;
}

.product-image-preview {
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px dashed rgba(88, 181, 255, .28);
  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(39, 126, 255, .12),
      transparent 55%
    ),
    rgba(5, 12, 25, .76);
  color: #627d9c;
}

.product-image-preview i {
  font-size: 2rem;
  color: #58b5ff;
}

.product-image-preview img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.product-upload-btn {
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px !important;
  cursor: pointer;
  border: 1px solid rgba(88, 181, 255, .25);
  border-radius: 12px;
  background: rgba(34, 117, 255, .10);
  color: #cfeaff !important;
}

.product-switch-row {
  display: flex !important;
  align-items: flex-start;
  gap: 12px !important;
  padding: 14px;
  border: 1px solid rgba(86, 135, 194, .15);
  border-radius: 14px;
  background: rgba(5, 13, 27, .55);
}

.product-switch-row input {
  width: auto;
  margin-top: 3px;
}

.product-switch-row span {
  display: grid;
  gap: 4px;
}

.product-switch-row strong {
  color: #e9f3ff;
}

.product-switch-row small {
  color: #748ba7;
  font-weight: 500;
}

.product-ticket-note {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border: 1px solid rgba(88, 181, 255, .18);
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(88, 101, 242, .12),
    rgba(22, 108, 255, .06)
  );
}

.product-ticket-note > i {
  font-size: 1.45rem;
  color: #7d87ff;
}

.product-ticket-note div {
  display: grid;
  gap: 3px;
}

.product-ticket-note strong {
  color: #edf4ff;
}

.product-ticket-note span {
  color: #7d91aa;
  font-size: .74rem;
}

.product-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}

.admin-action-btn.secondary {
  background: rgba(14, 30, 53, .7);
  color: #9eb3cb;
}

.product-total-badge {
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(88, 181, 255, .16);
  background: rgba(88, 181, 255, .07);
  color: #8ebfe9;
  font-size: .7rem;
  font-weight: 800;
}

.admin-products-list {
  display: grid;
  gap: 11px;
}

.admin-product-item {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 14px;
  padding: 13px;
  border: 1px solid rgba(86, 135, 194, .13);
  border-radius: 16px;
  background: rgba(5, 13, 27, .54);
}

.admin-product-thumb {
  height: 112px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 13px;
  background: rgba(28, 87, 150, .08);
  color: #58b5ff;
  font-size: 1.6rem;
}

.admin-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-product-info {
  min-width: 0;
  display: grid;
  gap: 9px;
}

.admin-product-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-product-title > div {
  min-width: 0;
}

.admin-product-title strong {
  display: block;
  color: #edf5ff;
  overflow-wrap: anywhere;
}

.admin-product-title span:not(.admin-badge) {
  display: block;
  margin-top: 3px;
  color: #65809e;
  font-size: .7rem;
}

.admin-product-info p {
  margin: 0;
  color: #8398b0;
  font-size: .76rem;
  line-height: 1.5;
}

.admin-product-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #7188a4;
  font-size: .72rem;
}

.admin-product-meta strong {
  color: #67c4ff;
  font-size: .9rem;
}

.admin-product-empty {
  min-height: 250px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  color: #6f849f;
  text-align: center;
}

.admin-product-empty i {
  font-size: 2.4rem;
  color: #58b5ff;
}

.admin-product-empty strong {
  color: #dcecff;
}

.product-status-error {
  color: #ff7180 !important;
}


/* PUBLIC PRODUCT IMAGES */

.shop-product-image {
  position: relative;
  overflow: hidden;
}

.shop-product-image > img {
  width: 100%;
  height: 100%;
  min-height: 205px;
  object-fit: cover;
}

.shop-product-image .shop-label {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
}

.shop-product-fallback {
  min-height: 205px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(
      circle at center,
      rgba(54, 160, 255, .16),
      transparent 56%
    );
}

.shop-product-fallback i {
  font-size: 3rem;
  color: #58b5ff;
}

.shop-empty-state {
  grid-column: 1 / -1;
  min-height: 260px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  text-align: center;
  color: #748ca8;
}

.shop-empty-state i {
  font-size: 2.5rem;
  color: #58b5ff;
}


@media (max-width: 1050px) {

  .product-admin-grid {
    grid-template-columns: 1fr;
  }

  .product-editor-panel {
    position: static;
  }

}


@media (max-width: 650px) {

  .product-form-grid {
    grid-template-columns: 1fr;
  }

  .admin-product-item {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .admin-product-thumb {
    height: 82px;
  }

  .admin-product-title {
    flex-direction: column;
  }

}


/* ============================================================
   FAIL2BAN SECURITY CENTER
   ============================================================ */

.fail2ban-center {
  margin-top: 22px;
}

.f2b-head {
  margin-top: 12px;
}

.f2b-online {
  color: #55e59b !important;
  font-size: 1.55rem !important;
}

.f2b-ban-form {
  display: grid;
  gap: 14px;
}

.f2b-ban-form label {
  display: grid;
  gap: 7px;
  color: #8094ad;
  font-size: .76rem;
  font-weight: 800;
}

.f2b-ban-form input,
.f2b-ban-form select {
  width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  border: 1px solid rgba(86,135,194,.18);
  border-radius: 11px;
  outline: none;
  background: rgba(5,13,28,.8);
  color: #e4effd;
  font: inherit;
}

.f2b-ban-form input:focus,
.f2b-ban-form select:focus {
  border-color: rgba(88,181,255,.62);
  box-shadow:
    0 0 0 3px rgba(88,181,255,.08);
}

.f2b-ban-btn {
  color: #ffdce0;
  border-color: rgba(255,99,116,.3);
  background:
    rgba(255,99,116,.1);
}

.f2b-unban-btn {
  border: 1px solid rgba(85,229,155,.25);
  border-radius: 9px;
  padding: 7px 10px;
  background: rgba(85,229,155,.08);
  color: #72e8ad;
  cursor: pointer;
  font-weight: 800;
}

.f2b-unban-btn:disabled {
  opacity: .45;
  cursor: wait;
}

@media (max-width: 900px) {
  .f2b-metrics {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 560px) {
  .f2b-metrics {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   FIX PRODUCTOS ADMIN
   ============================================================ */

#productsTab {
    display: none;
}

#productsTab.active:not([hidden]) {
    display: block !important;
}

#productsTab[hidden] {
    display: none !important;
}

.product-admin-grid {
    width: 100%;
}



/* ============================================================
   ADMIN TABS - VISIBILIDAD DEFINITIVA
   ============================================================ */

.admin-tab[hidden] {
    display: none !important;
}

.admin-tab.active:not([hidden]) {
    display: block !important;
}

#productsTab.active:not([hidden]),
#overview.active:not([hidden]),
#access.active:not([hidden]),
#security.active:not([hidden]),
#reviews.active:not([hidden]) {
    display: block !important;
}

/* ============================================================
   ADMIN NAVIGATION - FINAL
   Un único sistema: .admin-tab + .active
   ============================================================ */

.admin-tab {
    display: none !important;
}

.admin-tab.active {
    display: block !important;
}



/* ============================================================
   BERNALDEV PREMIUM ADMIN 2026
   ============================================================ */

body.admin-mode {
    --admin-bg: #050914;
    --admin-panel: rgba(8, 16, 31, .86);
    --admin-panel-soft: rgba(10, 21, 40, .72);
    --admin-border: rgba(104, 151, 213, .14);
    --admin-blue: #58b5ff;
    --admin-blue-2: #227cff;
    --admin-green: #64e7a4;
    --admin-yellow: #f3c84b;
    --admin-red: #ff6578;
}


/* TOPBAR */

.admin-topbar {
    height: 78px;
    padding: 0 24px;
    background:
        rgba(4, 9, 19, .92);
    border-bottom:
        1px solid rgba(91, 138, 200, .14);
    backdrop-filter: blur(22px);
}

.admin-topbar .logo {
    font-size: 1.15rem;
}

.admin-topbar .logo-mark {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    box-shadow:
        0 8px 30px rgba(34, 124, 255, .22);
}


/* LAYOUT */

.admin-layout {
    grid-template-columns:
        320px minmax(0, 1fr);
}

.admin-sidebar {
    padding: 26px 16px;
    background:
        linear-gradient(
            180deg,
            rgba(7, 16, 34, .96),
            rgba(4, 10, 23, .96)
        );
}

.admin-main {
    padding: 32px;
}


/* SIDEBAR NAV */

.admin-nav-item {
    min-height: 48px;
    padding: 13px 14px;
    border-radius: 13px;
    margin: 4px 0;
    transition:
        background .18s ease,
        transform .18s ease,
        color .18s ease;
}

.admin-nav-item:hover {
    transform: translateX(2px);
}

.admin-nav-item.active {
    color: #fff;
    background:
        linear-gradient(
            90deg,
            rgba(31, 105, 198, .34),
            rgba(21, 71, 142, .20)
        );
    box-shadow:
        inset 3px 0 #69bdff;
}


/* SECURITY CARD */

.premium-security-card {
    margin-top: 24px;
    padding: 15px;
    border:
        1px solid rgba(96, 153, 214, .17);
    border-radius: 15px;
    background:
        linear-gradient(
            180deg,
            rgba(8, 20, 37, .78),
            rgba(6, 15, 29, .72)
        );
}

.premium-security-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
}

.premium-security-title > span:first-child {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #65e7a5;
    font-size: .69rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.premium-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #63e8a4;
    box-shadow:
        0 0 15px rgba(99, 232, 164, .75);
}

.premium-security-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    font-size: .72rem;
}

.premium-security-row span {
    color: #8ba0b9;
}

.premium-security-row strong,
.security-ok {
    color: #64e7a4 !important;
}


/* CLOCK */

.premium-server-clock {
    display: grid;
    gap: 5px;
    margin-top: 13px;
    padding: 15px;
    border:
        1px solid rgba(96, 153, 214, .15);
    border-radius: 15px;
    background:
        rgba(5, 14, 28, .63);
}

.premium-server-clock > span {
    color: #768ca7;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.premium-server-clock strong {
    color: #fff;
    font-size: 1.45rem;
}

.premium-server-clock small {
    color: #6d829d;
}


/* QUICK ACTIONS */

.premium-quick-actions {
    display: grid;
    gap: 7px;
    margin-top: 14px;
    padding: 14px;
    border:
        1px solid rgba(96, 153, 214, .13);
    border-radius: 15px;
}

.premium-mini-title {
    margin-bottom: 5px;
    color: #7388a1;
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.premium-quick-actions a,
.premium-quick-actions button {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border:
        1px solid rgba(96, 153, 214, .13);
    border-radius: 10px;
    background:
        rgba(11, 25, 45, .61);
    color: #dce8f6;
    font: inherit;
    font-size: .72rem;
    cursor: pointer;
}

.premium-quick-actions a:hover,
.premium-quick-actions button:hover {
    border-color:
        rgba(88, 181, 255, .35);
    background:
        rgba(19, 48, 82, .7);
}


/* TOP REAL SYSTEM METRICS */

.premium-system-metrics {
    display: flex;
    align-items: center;
    gap: 8px;
}

.premium-system-pill {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border:
        1px solid rgba(94, 145, 209, .13);
    border-radius: 10px;
    background:
        rgba(9, 19, 35, .72);
}

.premium-system-pill i {
    color: #64e7a4;
    font-size: .75rem;
}

.premium-system-pill span {
    color: #6f849f;
    font-size: .68rem;
}

.premium-system-pill strong {
    color: #d9e8fa;
    font-size: .72rem;
}


/* METRICS */

.admin-metric {
    min-height: 132px;
    padding: 20px;
    border-color:
        rgba(90, 141, 204, .14);
    background:
        linear-gradient(
            180deg,
            rgba(10, 21, 39, .88),
            rgba(6, 14, 28, .90)
        );
}

.admin-metric strong {
    font-size: 2rem;
}

.admin-metric:hover {
    border-color:
        rgba(88, 181, 255, .27);
}


/* PANELS */

.admin-panel {
    border-color:
        rgba(89, 139, 204, .14);
    background:
        linear-gradient(
            180deg,
            rgba(9, 19, 36, .88),
            rgba(5, 12, 25, .92)
        );
}


/* PRODUCT MANAGER */

.product-editor-panel,
.product-list-panel {
    border-radius: 18px;
}

.admin-product-item {
    transition:
        transform .18s ease,
        border-color .18s ease;
}

.admin-product-item:hover {
    transform: translateY(-1px);
    border-color:
        rgba(88, 181, 255, .26);
}

.product-image-preview {
    min-height: 250px;
}


/* TABLES */

.admin-table-wrap tbody tr {
    transition:
        background .15s ease;
}

.admin-table-wrap tbody tr:hover {
    background:
        rgba(42, 107, 176, .055);
}


/* RESPONSIVE */

@media (max-width: 1250px) {

    .premium-system-metrics {
        display: none;
    }

}

@media (max-width: 850px) {

    .admin-layout {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        position: relative;
        top: auto;
        height: auto;
    }

    .premium-security-card,
    .premium-server-clock,
    .premium-quick-actions {
        display: none;
    }

}

/* ============================================================
   QUICK ACTIONS - HORIZONTAL LAYOUT
   ============================================================ */

.premium-quick-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
}

.premium-quick-actions .premium-mini-title {
    grid-column: 1 / -1;
    margin-bottom: 4px;
}

.premium-quick-actions a,
.premium-quick-actions button {
    width: 100%;
    min-width: 0;
    min-height: 82px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 12px 8px;

    text-align: center;

    border: 1px solid rgba(96, 153, 214, .16);
    border-radius: 13px;

    background:
        linear-gradient(
            180deg,
            rgba(12, 28, 52, .78),
            rgba(7, 18, 36, .82)
        );

    color: #dce8f6;

    font: inherit;
    font-size: .7rem;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.premium-quick-actions a i,
.premium-quick-actions button i {
    font-size: 1rem;
    color: #69bdff;
}

.premium-quick-actions a:hover,
.premium-quick-actions button:hover {
    transform: translateY(-2px);

    border-color: rgba(88, 181, 255, .42);

    background:
        linear-gradient(
            180deg,
            rgba(20, 49, 86, .88),
            rgba(9, 25, 48, .9)
        );
}

/* Colores individuales */
#premiumRefresh i {
    color: #58b5ff;
}

.premium-quick-actions a[href="/"] i {
    color: #64e7a4;
}

.premium-quick-actions a[href*="discord"] i {
    color: #8b7cff;
}


/* Responsive */
@media (max-width: 1100px) {
    .premium-quick-actions {
        grid-template-columns: 1fr;
    }

    .premium-quick-actions .premium-mini-title {
        grid-column: auto;
    }

    .premium-quick-actions a,
    .premium-quick-actions button {
        min-height: 44px;
        flex-direction: row;
        justify-content: flex-start;
        padding: 10px 12px;
    }
}



/* ============================================================
   BERNALDEV PLATFORM STYLES V1
   ============================================================ */

.platform-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.platform-toolbar input {
    min-width: 260px;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid rgba(86,135,194,.18);
    border-radius: 11px;
    background: rgba(5,13,28,.8);
    color: #e8f2ff;
}

.platform-commercial-metrics {
    margin-top: 14px;
}

.platform-recent-activity {
    margin-top: 14px;
}

.platform-activity-list {
    display: grid;
    gap: 6px;
}

.platform-activity-row {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px;
    border-radius: 12px;
    border: 1px solid rgba(86,135,194,.1);
    background: rgba(7,16,31,.48);
}

.platform-activity-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(88,181,255,.08);
    color: #58b5ff;
}

.platform-activity-row div {
    display: grid;
    gap: 2px;
}

.platform-activity-row div strong {
    color: #e8f3ff;
    font-size: .78rem;
}

.platform-activity-row div span,
.platform-activity-row small {
    color: #6f849f;
    font-size: .68rem;
}

.platform-customer {
    display: flex;
    align-items: center;
    gap: 10px;
}

.platform-customer img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.platform-customer > div {
    display: grid;
}

.platform-customer small {
    color: #7187a3;
}

.platform-customer-notes {
    width: min(300px,100%);
    min-height: 56px;
    border: 1px solid rgba(86,135,194,.16);
    border-radius: 9px;
    background: rgba(5,13,28,.75);
    color: #dceafa;
    padding: 8px;
    resize: vertical;
}

.platform-mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    margin-top: 6px;
    padding: 6px 9px;
    border: 1px solid rgba(88,181,255,.2);
    border-radius: 8px;
    background: rgba(88,181,255,.08);
    color: #8fd0ff;
    font-size: .7rem;
    cursor: pointer;
    text-decoration: none;
}

.platform-order-layout {
    display: grid;
    grid-template-columns: minmax(0,1.3fr) minmax(340px,.8fr);
    gap: 14px;
    align-items: start;
}

.platform-order-list {
    display: grid;
    gap: 10px;
}

.platform-order-card {
    padding: 15px;
    border: 1px solid rgba(86,135,194,.13);
    border-radius: 15px;
    background: rgba(5,13,27,.54);
}

.platform-order-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.platform-order-card-head > div {
    display: grid;
    gap: 3px;
}

.platform-order-card-head > div span {
    color: #607a99;
    font-size: .67rem;
}

.platform-order-card-head strong {
    color: #edf5ff;
}

.platform-order-card p {
    color: #8095ae;
    font-size: .76rem;
}

.platform-order-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 10px 0;
    color: #7290ae;
    font-size: .7rem;
}

.platform-order-status {
    height: fit-content;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 900;
    text-transform: uppercase;
}

.status-pending {
    background: rgba(255,189,61,.1);
    color: #ffbd3d;
}

.status-quoted {
    background: rgba(88,181,255,.1);
    color: #58b5ff;
}

.status-development {
    background: rgba(146,105,255,.1);
    color: #b292ff;
}

.status-review {
    background: rgba(63,209,219,.1);
    color: #52d8df;
}

.status-completed {
    background: rgba(85,229,155,.1);
    color: #55e59b;
}

.status-cancelled {
    background: rgba(255,99,116,.1);
    color: #ff6374;
}

.platform-form {
    display: grid;
    gap: 14px;
}

.platform-form label {
    display: grid;
    gap: 7px;
    color: #8094ad;
    font-size: .74rem;
    font-weight: 800;
}

.platform-form input,
.platform-form select,
.platform-form textarea {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(86,135,194,.18);
    border-radius: 11px;
    background: rgba(5,13,28,.8);
    color: #e5effb;
    padding: 10px 12px;
    font: inherit;
}

.platform-form textarea {
    resize: vertical;
}

.platform-form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}

.platform-settings-panel {
    max-width: 900px;
}

.platform-backup-list {
    display: grid;
    gap: 8px;
}

.platform-backup-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 1px solid rgba(86,135,194,.13);
    border-radius: 12px;
    background: rgba(5,13,27,.5);
}

.platform-backup-row > div {
    display: flex;
    gap: 10px;
    align-items: center;
}

.platform-backup-row > div > i {
    color: #58b5ff;
}

.platform-backup-row span {
    display: grid;
}

.platform-backup-row small {
    color: #6d849e;
}

.account-inline-button {
    margin-top: 10px;
    border: 0;
    background: transparent;
    color: #72c3ff;
    font-weight: 800;
    cursor: pointer;
}

@media(max-width:1100px) {
    .platform-order-layout {
        grid-template-columns: 1fr;
    }
}

@media(max-width:650px) {
    .platform-form-grid {
        grid-template-columns: 1fr;
    }

    .platform-activity-row {
        grid-template-columns: 34px minmax(0,1fr);
    }

    .platform-activity-row > small {
        grid-column: 2;
    }
}


/* ============================================================
   BERNALDEV PLATFORM POLISH STYLES V1
   ============================================================ */

body.platform-modal-open {
    overflow: hidden;
}


/* MODALS */

.platform-modal[hidden] {
    display: none !important;
}

.platform-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    padding: 24px;
}

.platform-modal-backdrop {
    position: absolute;
    inset: 0;
    background:
        rgba(1, 5, 12, .82);
    backdrop-filter:
        blur(14px);
}

.platform-modal-card {
    position: relative;
    width: min(720px, 100%);
    max-height: 88vh;
    overflow: auto;
    padding: 24px;
    border:
        1px solid rgba(
          88,
          181,
          255,
          .18
        );
    border-radius: 22px;
    background:
        linear-gradient(
            180deg,
            rgba(10, 20, 39, .98),
            rgba(4, 10, 22, .98)
        );
    box-shadow:
        0 35px 120px
        rgba(0,0,0,.6);
}

.platform-modal-large {
    width: min(1050px, 100%);
}

.platform-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 22px;
}

.platform-modal-head h2 {
    margin: 5px 0 0;
    color: #f1f7ff;
}

.platform-modal-kicker {
    color: #58b5ff;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.platform-modal-close {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border:
        1px solid rgba(
          91,
          142,
          205,
          .15
        );
    border-radius: 12px;
    background:
        rgba(10, 24, 43, .7);
    color: #9aafc7;
    cursor: pointer;
}

.platform-modal-close:hover {
    color: #fff;
    border-color:
        rgba(88,181,255,.4);
}


/* LOADING */

.platform-loading {
    min-height: 220px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    color: #8197b2;
}

.platform-loading i {
    color: #58b5ff;
    font-size: 1.7rem;
}


/* EMPTY */

.platform-empty-state {
    min-height: 260px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    text-align: center;
    color: #768ba4;
}

.platform-empty-state > i {
    font-size: 2.5rem;
    color: #58b5ff;
}

.platform-empty-state h3 {
    color: #edf5ff;
    margin: 0;
}


/* CLIENT ORDERS */

.platform-client-orders {
    display: grid;
    gap: 15px;
}

.platform-client-order {
    padding: 20px;
    border:
        1px solid rgba(
          86,
          135,
          194,
          .15
        );
    border-radius: 18px;
    background:
        linear-gradient(
            180deg,
            rgba(8,18,34,.8),
            rgba(5,12,25,.8)
        );
}

.platform-client-order > header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

.platform-client-order > header > div {
    display: grid;
    gap: 4px;
}

.platform-client-order > header span:first-child {
    color: #677f9d;
    font-size: .7rem;
}

.platform-client-order h3 {
    margin: 0;
    color: #edf5ff;
}

.platform-client-order > p {
    color: #8499b0;
    line-height: 1.6;
}

.platform-client-product {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    margin: 12px 0;
    padding: 7px 10px;
    border-radius: 9px;
    background:
        rgba(88,181,255,.08);
    color: #8bd0ff;
    font-size: .74rem;
}

.platform-client-order footer {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 18px;
}

.platform-client-order footer > div {
    display: grid;
    gap: 3px;
}

.platform-client-order footer span {
    color: #647d99;
    font-size: .67rem;
}

.platform-client-order footer strong {
    color: #dbeafa;
    font-size: .8rem;
}

.platform-client-order footer .btn {
    margin-left: auto;
}


/* TIMELINE */

.platform-order-timeline {
    display: grid;
    grid-template-columns:
        repeat(5, 1fr);
    gap: 5px;
    margin-top: 20px;
}

.platform-order-step {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 7px;
    color: #536b87;
    text-align: center;
}

.platform-order-step::before {
    content: "";
    position: absolute;
    top: 10px;
    left: -50%;
    width: 100%;
    height: 2px;
    background:
        rgba(82,111,148,.16);
}

.platform-order-step:first-child::before {
    display: none;
}

.platform-order-step > span {
    position: relative;
    z-index: 2;
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #0b1728;
    border:
        1px solid rgba(
          83,
          110,
          145,
          .25
        );
    font-size: .55rem;
}

.platform-order-step.done {
    color: #69dca4;
}

.platform-order-step.done::before {
    background:
        rgba(85,229,155,.42);
}

.platform-order-step.done > span {
    color: #072016;
    background: #55e59b;
    border-color: #55e59b;
}

.platform-order-step small {
    font-size: .61rem;
}

.platform-progress {
    height: 5px;
    overflow: hidden;
    margin-top: 16px;
    border-radius: 999px;
    background:
        rgba(85,111,147,.12);
}

.platform-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            #176cff,
            #58b5ff,
            #55e59b
        );
}

.platform-order-cancelled {
    margin-top: 16px;
    padding: 10px;
    border-radius: 10px;
    background:
        rgba(255,99,116,.08);
    color: #ff7180;
}


/* CUSTOMER HISTORY */

.platform-customer-profile {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border:
        1px solid rgba(
          86,
          135,
          194,
          .14
        );
    border-radius: 16px;
    background:
        rgba(6,14,28,.56);
}

.platform-customer-profile img {
    width: 74px;
    height: 74px;
    border-radius: 20px;
    object-fit: cover;
}

.platform-customer-profile > div {
    display: grid;
    gap: 3px;
}

.platform-customer-profile h3 {
    margin: 0;
    color: #edf5ff;
}

.platform-customer-profile span {
    color: #7086a2;
}

.platform-customer-profile code {
    color: #75c5ff;
}

.platform-customer-stats {
    display: grid;
    grid-template-columns:
        repeat(3,1fr);
    gap: 10px;
    margin: 14px 0;
}

.platform-customer-stats > div {
    padding: 15px;
    border:
        1px solid rgba(
          86,
          135,
          194,
          .13
        );
    border-radius: 13px;
    background:
        rgba(6,14,28,.5);
}

.platform-customer-stats strong {
    display: block;
    color: #fff;
    font-size: 1.45rem;
}

.platform-customer-stats span {
    color: #7087a3;
    font-size: .7rem;
}

.platform-history-orders {
    margin-top: 18px;
}

.platform-history-orders > article {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-bottom:
        1px solid rgba(
          86,
          135,
          194,
          .1
        );
}

.platform-history-orders > article > div {
    display: grid;
    gap: 3px;
}

.platform-history-orders strong {
    color: #dceafd;
}

.platform-history-orders span:not(.platform-order-status) {
    color: #7087a3;
    font-size: .7rem;
}


/* PRODUCT PREVIEW */

.platform-product-preview {
    overflow: hidden;
    border:
        1px solid rgba(
          86,
          135,
          194,
          .15
        );
    border-radius: 18px;
    background:
        rgba(6,14,28,.62);
}

.platform-preview-image {
    position: relative;
    height: 300px;
    overflow: hidden;
    background:
        radial-gradient(
          circle,
          rgba(88,181,255,.14),
          transparent 60%
        );
}

.platform-preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.platform-preview-image > div {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: #58b5ff;
    font-size: 3rem;
}

.platform-preview-image .shop-label {
    position: absolute;
    top: 16px;
    left: 16px;
}

.platform-preview-body {
    padding: 22px;
}

.platform-preview-body h2 {
    color: #fff;
}

.platform-preview-body p {
    color: #8197b0;
    line-height: 1.65;
}

.platform-preview-price {
    display: grid;
    margin: 18px 0;
}

.platform-preview-price span {
    color: #687e99;
    font-size: .67rem;
    text-transform: uppercase;
}

.platform-preview-price strong {
    color: #58b5ff;
    font-size: 1.6rem;
}


/* MAINTENANCE */

.platform-maintenance[hidden] {
    display: none !important;
}

.platform-maintenance {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(32,111,255,.18),
            transparent 42%
        ),
        #040812;
}

.platform-maintenance-card {
    width: min(560px,100%);
    display: grid;
    justify-items: center;
    gap: 13px;
    text-align: center;
}

.platform-maintenance-card .logo-mark {
    width: 65px;
    height: 65px;
    font-size: 1.3rem;
}

.platform-maintenance-card h1 {
    margin: 4px 0;
    color: #fff;
    font-size:
        clamp(2rem,6vw,3.6rem);
}

.platform-maintenance-card p {
    max-width: 470px;
    color: #7f95ae;
    line-height: 1.65;
}


@media(max-width:700px) {

    .platform-modal {
        padding: 10px;
    }

    .platform-modal-card {
        padding: 18px;
        border-radius: 17px;
    }

    .platform-order-timeline {
        overflow-x: auto;
        grid-template-columns:
          repeat(5,110px);
    }

    .platform-customer-stats {
        grid-template-columns: 1fr;
    }

    .platform-client-order footer {
        display: grid;
        grid-template-columns:
            repeat(2,1fr);
    }

    .platform-client-order footer .btn {
        margin: 0;
        grid-column: 1 / -1;
    }
}