@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root{
  --orange:#f97316;--orange2:#ea580c;--orange3:#c2410c;
  --orange-light:#fff7ed;--orange-mid:#ffedd5;--orange-border:#fed7aa;
  --orange-glow:rgba(249,115,22,.18);
  --white:#ffffff;--off:#fafaf9;--off2:#f5f5f4;
  --border:#e7e5e4;--border2:#d6d3d1;
  --text:#1c1917;--text2:#292524;--muted:#78716c;--muted2:#a8a29e;
  --blue:var(--orange);--blue2:var(--orange2);
  --blue-light:var(--orange-light);--blue-border:var(--orange-border);
  --electric:#fb923c;
  --color-success:#16a34a;--color-success-bg:#f0fdf4;--color-success-border:#bbf7d0;
  --color-danger:#dc2626;--color-danger-bg:#fef2f2;--color-danger-border:#fecaca;
  --color-warning:#d97706;--color-warning-bg:#fffbeb;--color-warning-border:#fcd34d;
  --color-info:var(--orange);--color-info-bg:var(--orange-light);--color-info-border:var(--orange-border);
  --font:'Plus Jakarta Sans',sans-serif;
  --text-xs:0.72rem;--text-sm:0.82rem;--text-base:0.92rem;--text-md:1rem;
  --text-lg:1.15rem;--text-xl:1.4rem;--text-2xl:1.9rem;
  --text-display:clamp(2.8rem,5vw,4.2rem);
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;
  --space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;
  --radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;
  --shadow-xs:0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:0 2px 8px rgba(0,0,0,.06);
  --shadow-md:0 4px 20px rgba(0,0,0,.08);
  --shadow-lg:0 12px 40px rgba(0,0,0,.1);
  --shadow-xl:0 24px 64px rgba(0,0,0,.12);
  --shadow-orange:0 8px 32px rgba(249,115,22,.22);
  --shadow-orange-lg:0 16px 48px rgba(249,115,22,.28);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--white);color:var(--text);font-family:var(--font);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* NAV */
nav{display:flex;align-items:center;justify-content:space-between;padding:0 2.5rem;height:64px;background:rgba(255,255,255,.85);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid rgba(231,229,228,.8);position:sticky;top:0;z-index:200;will-change:transform;-webkit-transform:translateZ(0);transform:translateZ(0)}
.logo{display:flex;align-items:center;gap:.65rem;text-decoration:none;flex-shrink:0}
.logo-mark{width:38px;height:38px;border-radius:11px;background:linear-gradient(145deg,#fb923c,#ea580c);display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;box-shadow:0 4px 14px rgba(249,115,22,.4),inset 0 1px 0 rgba(255,255,255,.2)}
.ai-badge{position:absolute;top:-5px;right:-5px;background:#fbbf24;color:#78350f;font-size:5.5px;font-weight:900;padding:2px 4px;border-radius:4px;border:1.5px solid #fff;letter-spacing:.02em}
.logo-text{display:flex;flex-direction:column;line-height:1}
.logo-name{font-weight:800;font-size:1rem;color:var(--text);letter-spacing:-.025em}
.logo-name span{color:var(--orange)}
.logo-sub{font-size:.5rem;font-weight:700;color:var(--muted2);letter-spacing:.12em;text-transform:uppercase;margin-top:2px}
.nav-links{flex:1;display:flex;align-items:center;justify-content:center;gap:1.75rem}
.nav-links a{font-size:.83rem;font-weight:500;color:var(--muted);text-decoration:none;transition:color .2s;letter-spacing:-.01em}
.nav-links a:hover, .nav-links a.nav-active { color: var(--orange) !important; font-weight: 700; }
.nav-right-all{display:flex;align-items:center;gap:.55rem;flex-shrink:0}
.nav-right{display:flex;align-items:center;gap:.6rem}
.credits-pill{background:var(--orange-light);border:1px solid var(--orange-border);color:var(--orange3);font-size:.7rem;font-weight:700;padding:.28rem .75rem;border-radius:100px}
.btn-ghost{background:none;border:1px solid var(--border);color:var(--text2);padding:.44rem 1.05rem;border-radius:9px;font-size:.78rem;font-weight:500;cursor:pointer;font-family:var(--font);transition:all .2s;letter-spacing:-.01em}
.btn-ghost:hover{border-color:var(--border2);background:var(--off)}
.btn-blue{background:var(--orange);color:#fff;border:none;padding:.48rem 1.15rem;border-radius:9px;font-size:.78rem;font-weight:700;cursor:pointer;font-family:var(--font);transition:all .22s;box-shadow:0 2px 10px rgba(249,115,22,.35);letter-spacing:-.01em}
.btn-blue:hover{background:var(--orange2);box-shadow:0 4px 16px rgba(249,115,22,.45);transform:translateY(-1px)}

.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:.4rem;z-index:300}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:all .3s}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
@media(max-width:900px){nav{padding:.9rem 1.25rem;backdrop-filter:none;-webkit-backdrop-filter:none;background:#ffffff;-webkit-transform:translateZ(0);transform:translateZ(0)}.nav-links{display:none}.nav-right-all{display:none}.hamburger{display:flex}}

/* DRAWER */
.drawer-overlay{position:fixed;inset:0;background:rgba(28,25,23,.55);z-index:8999;display:none;backdrop-filter:blur(4px)}
.drawer-overlay.open{display:block}
.mobile-menu{position:fixed;top:0;left:-285px;bottom:0;width:285px;background:var(--white);z-index:9000;display:flex;flex-direction:column;border-right:1px solid var(--border);overflow-y:auto;transition:left .32s cubic-bezier(.4,0,.2,1);box-shadow:6px 0 32px rgba(0,0,0,.1)}
.mobile-menu.open{left:0}
.mobile-menu-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--border)}
.mobile-menu-logo{display:flex;align-items:center;gap:.5rem}
.mobile-close{background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--muted);padding:.25rem;line-height:1}
.mobile-menu-credits{margin:.75rem 1.25rem;background:var(--orange-light);border:1px solid var(--orange-border);border-radius:10px;padding:.65rem 1rem;font-size:.78rem;font-weight:700;color:var(--orange3);line-height:1.5}
.mobile-menu-section{padding:.5rem 1.25rem;font-size:.6rem;font-weight:700;color:var(--muted2);text-transform:uppercase;letter-spacing:.08em;margin-top:.25rem}
.mobile-menu a{font-size:.88rem;font-weight:500;color:var(--text);text-decoration:none;padding:.72rem 1.25rem;display:flex;align-items:center;gap:.65rem;transition:all .2s}
.mobile-menu a:hover{background:var(--off);color:var(--orange)}
.mobile-menu a.active{color:var(--orange);font-weight:700;background:var(--orange-light)}
.mobile-menu a .m-icon{font-size:1rem;width:20px;text-align:center;flex-shrink:0}
.mobile-menu-footer{padding:1rem 1.25rem;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:.65rem;margin-top:auto}
.mobile-menu-footer button{width:100%;text-align:center;padding:.72rem;font-size:.86rem;border-radius:10px;cursor:pointer;font-family:var(--font);font-weight:600}

/* HERO */
.hero{max-width:1280px;margin:0 auto;padding:3rem 2.5rem 3rem;display:grid;grid-template-columns:1fr 1.05fr;gap:5rem;align-items:center;position:relative}
.hero::before{content:'';position:absolute;top:-60px;right:0;width:55%;height:calc(100% + 120px);background:radial-gradient(ellipse at 60% 40%,rgba(249,115,22,.06) 0%,transparent 65%);pointer-events:none;z-index:0}
.hero > *{position:relative;z-index:1}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:2.5rem;padding:3rem 1.25rem}.hero::before{display:none}}

.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:var(--orange-light);border:1px solid var(--orange-border);color:var(--orange3);padding:.32rem .9rem;border-radius:100px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:.05rem;box-shadow:0 2px 8px rgba(249,115,22,.1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90vw}
.badge-dot{width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px rgba(249,115,22,.2);animation:pulse-dot 2s infinite}

h1{font-family:var(--font);font-size:clamp(2rem,3.5vw,3.2rem);font-weight:800;line-height:1.1;color:var(--text);margin-bottom:0;letter-spacing:-.04em}
h1 em{font-style:normal;color:var(--orange)}

.hero-sub{font-size:.95rem;color:var(--muted);line-height:1.78;max-width:480px;margin-bottom:0;font-weight:400;letter-spacing:-.01em}
.hero-trust{display:flex;gap:1.75rem;flex-wrap:wrap;margin-bottom:2rem}
.hero-trust-item{display:flex;align-items:center;gap:.45rem;font-size:.86rem;font-weight:600;color:var(--muted);letter-spacing:-.01em}
.hero-trust-item .t-check{width:20px;height:20px;border-radius:50%;background:var(--color-success-bg);border:1px solid var(--color-success-border);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--color-success);flex-shrink:0}

.hero-ctas{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:2.75rem}
.cta-primary{background:linear-gradient(135deg,#fb923c,#ea580c);color:#fff;border:none;padding:1rem 2.5rem;border-radius:14px;font-size:1.05rem;font-weight:700;cursor:pointer;font-family:var(--font);letter-spacing:-.01em;display:flex;align-items:center;gap:.5rem;transition:all .24s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 24px rgba(249,115,22,.45),0 1px 0 rgba(255,255,255,.15) inset;position:relative;overflow:hidden}
.cta-primary::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.1),transparent);pointer-events:none}
.cta-primary:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(249,115,22,.55)}
.cta-primary:active{transform:translateY(0)}
.cta-secondary{background:var(--white);color:var(--text2);border:1px solid var(--border2);padding:.95rem 2rem;border-radius:14px;font-size:1rem;font-weight:500;cursor:pointer;font-family:var(--font);transition:all .2s;letter-spacing:-.01em;box-shadow:var(--shadow-xs)}
.cta-secondary:hover{border-color:var(--border2);background:var(--off);transform:translateY(-1px)}

.hero-stats{display:flex;gap:3rem}
.stat{padding-left:1.2rem;border-left:2px solid var(--orange-border);position:relative}
.stat::before{content:'';position:absolute;left:-2px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--orange),transparent)}
.stat-n{font-size:2.1rem;font-weight:800;color:var(--orange);letter-spacing:-.04em;line-height:1;margin-bottom:.18rem}
.stat-l{font-size:.75rem;color:var(--muted2);font-weight:500;letter-spacing:.01em}

.demo-panel{background:var(--white);border:1px solid var(--border);border-radius:22px;padding:1.4rem;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.demo-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#fb923c,#f97316,#ea580c)}
.demo-label{font-size:.6rem;font-weight:700;color:var(--muted2);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.85rem}
.demo-cols{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;position:relative}
.demo-col-label{font-size:.64rem;font-weight:600;color:var(--muted);margin-bottom:.45rem;display:flex;align-items:center;gap:.3rem}
.demo-col-label::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--orange)}
.demo-img-box{background:var(--off);border:1px solid var(--border);border-radius:13px;aspect-ratio:9/16;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.4rem;transition:all .3s}
.demo-img-box:hover{border-color:var(--orange-border);background:var(--orange-light)}
.demo-img-box span{font-size:.64rem;color:var(--muted2);font-weight:500}
.demo-arrow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34px;height:34px;background:linear-gradient(135deg,#fb923c,#ea580c);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.9rem;color:#fff;z-index:2;box-shadow:0 4px 14px rgba(249,115,22,.45);animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-6px)}}
.demo-status{margin-top:.85rem;display:flex;align-items:center;justify-content:space-between;padding-top:.75rem;border-top:1px solid var(--border)}
.demo-status-dot{display:flex;align-items:center;gap:.38rem;font-size:.63rem;color:var(--muted);font-weight:500}
.dot-green{width:6px;height:6px;border-radius:50%;background:#16a34a;animation:pulse-dot 2s infinite}
@keyframes pulse-dot{0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)}70%{box-shadow:0 0 0 7px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.demo-tag{background:var(--off);border:1px solid var(--border);color:var(--muted2);font-size:.58rem;padding:.2rem .55rem;border-radius:6px}

/* STEPS */
.steps-section{background:var(--off);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:3rem 2.5rem}
.steps-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}
@media(max-width:700px){.steps-inner{grid-template-columns:1fr}}
.step-card{display:flex;align-items:flex-start;gap:1rem}
.step-num{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#fb923c,#ea580c);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.82rem;flex-shrink:0;box-shadow:0 4px 12px rgba(249,115,22,.35)}
.step-text strong{display:block;font-weight:700;font-size:.86rem;color:var(--text);margin-bottom:.25rem;letter-spacing:-.01em}
.step-text p{font-size:.77rem;color:var(--muted);line-height:1.6}

/* TOOL */
.tool-section{max-width:1280px;margin:0 auto;padding:4.5rem 2.5rem}
.tool-header{text-align:center;margin-bottom:3.5rem}
.tool-header h2{font-size:2rem;font-weight:800;color:var(--text);margin-bottom:.55rem;letter-spacing:-.04em}
.tool-header p{color:var(--muted);font-size:.86rem;letter-spacing:-.01em}
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.25rem;align-items:start}
@media(max-width:860px){.tool-grid{grid-template-columns:1fr}}
.card{background:var(--white);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .25s}
.card:hover{box-shadow:var(--shadow-md)}
.card-head{padding:1rem 1.3rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.65rem;background:linear-gradient(135deg,var(--orange-light) 0%,var(--white) 100%)}
.card-icon{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#fb923c,#ea580c);display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0;box-shadow:0 3px 8px rgba(249,115,22,.3)}
.card-title{font-weight:700;font-size:.86rem;color:var(--text);letter-spacing:-.01em}
.card-sub{font-size:.65rem;color:var(--muted);margin-top:.05rem}
.field{padding:.95rem 1.3rem;border-bottom:1px solid var(--border)}
.field-label{font-size:.64rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:.55rem;display:flex;align-items:center;gap:.35rem}
.field-label::before{content:'';width:3px;height:12px;border-radius:2px;background:linear-gradient(to bottom,var(--orange),var(--orange2))}
.tabs{display:flex;gap:.3rem;margin-bottom:.6rem}
.tab{flex:1;background:var(--off);border:1px solid var(--border);color:var(--muted);padding:.4rem;border-radius:8px;font-size:.7rem;font-weight:600;cursor:pointer;text-align:center;transition:all .22s;font-family:var(--font)}
.tab.active{background:linear-gradient(135deg,#fb923c,#ea580c);border-color:transparent;color:#fff;box-shadow:0 2px 8px rgba(249,115,22,.3)}
.ref-box{width:100%;height:280px;border:1.5px dashed var(--border);border-radius:12px;background:var(--off);overflow:hidden;cursor:pointer;transition:all .25s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;text-align:center;position:relative}
.ref-box:hover{border-color:var(--orange);background:var(--orange-light)}
.ref-box.has-img{border-style:solid;border-color:var(--orange)}
.ref-box img.rp{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:11px;pointer-events:none;background:var(--off);padding:3px}
.ref-bar{position:absolute;bottom:0;left:0;right:0;padding:.24rem .55rem;font-size:.58rem;color:#fff;font-weight:600;background:rgba(234,88,12,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ref-ov{position:absolute;inset:0;background:rgba(249,115,22,.35);display:flex;align-items:center;justify-content:center;opacity:0;transition:.22s;border-radius:11px}
.ref-box.has-img:hover .ref-ov{opacity:1}
.ref-ov span{color:#fff;font-size:.7rem;font-weight:700;background:var(--orange2);padding:.3rem .7rem;border-radius:7px}
.ref-ph strong{font-size:.77rem;font-weight:700;color:var(--text)}
.ref-ph p{font-size:.63rem;color:var(--muted)}
.gal-btn{background:#c2410c;color:#fff;border:none;padding:.34rem .8rem;border-radius:7px;font-size:.68rem;font-weight:700;cursor:pointer;margin-top:.3rem;font-family:var(--font);box-shadow:0 2px 8px rgba(249,115,22,.3);transition:all .2s}
.gal-btn:hover{background:#9a3412}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}
.prod-slot{border:1.5px dashed var(--border);border-radius:11px;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.22rem;cursor:pointer;transition:all .22s;background:var(--off);position:relative;overflow:hidden;text-align:center;padding:.45rem}
.prod-slot:hover,.prod-slot.ok{border-color:var(--orange);background:var(--orange-light)}
.slot-n{position:absolute;top:.3rem;left:.3rem;width:18px;height:18px;border-radius:50%;background:var(--orange);color:#fff;font-size:.58rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.prod-slot img.sp{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;background:#fff;padding:3px;border-radius:10px}
.sl-ov{position:absolute;inset:0;background:rgba(249,115,22,.42);display:flex;align-items:center;justify-content:center;opacity:0;transition:.2s;border-radius:10px}
.prod-slot.ok:hover .sl-ov{opacity:1}
.sl-ov span{color:#fff;font-size:.62rem;font-weight:700}
.logo-row{display:flex;align-items:center;gap:.65rem;margin-top:.65rem}
.logo-slot{border:1.5px dashed var(--border);border-radius:11px;width:100px;height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.12rem;cursor:pointer;transition:all .22s;background:var(--off);position:relative;overflow:hidden;flex-shrink:0}
.logo-slot:hover,.logo-slot.ok{border-color:var(--orange);background:var(--orange-light)}
.logo-slot img.lp{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:4px;border-radius:10px;pointer-events:none}
.config{display:flex;gap:.55rem;flex-wrap:wrap;align-items:flex-end}
.cfg{flex:1;min-width:110px}
.cfg label{font-size:.64rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:.28rem}
select{width:100%;background:var(--white);border:1px solid var(--border);color:var(--text);padding:.48rem .6rem;border-radius:9px;font-size:.76rem;font-family:var(--font);outline:none;cursor:pointer;transition:border-color .2s,box-shadow .2s;letter-spacing:-.01em}
select:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(249,115,22,.08)}
.btn-generate{background:linear-gradient(135deg,#fb923c,#ea580c);color:#fff;border:none;padding:.68rem 1.45rem;border-radius:11px;font-size:.86rem;font-weight:700;cursor:pointer;font-family:var(--font);transition:all .24s;display:flex;align-items:center;gap:.4rem;white-space:nowrap;flex-shrink:0;box-shadow:0 4px 16px rgba(249,115,22,.35);letter-spacing:-.01em;position:relative;overflow:hidden}
.btn-generate::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.1),transparent);pointer-events:none}
.btn-generate:hover{background:linear-gradient(135deg,#f97316,#c2410c);transform:translateY(-1px);box-shadow:0 6px 22px rgba(249,115,22,.45)}
.btn-generate:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}

/* RESULT */
.result-card{background:var(--white);border:1px solid var(--border);border-radius:18px;overflow:hidden;position:sticky;top:76px;box-shadow:var(--shadow-sm)}
.result-head{padding:.95rem 1.3rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.result-title{font-weight:700;font-size:.86rem;color:var(--text);letter-spacing:-.01em}
.result-actions{display:flex;gap:.4rem}
.btn-expand{background:var(--off);border:1px solid var(--border);color:var(--text);padding:.34rem .8rem;border-radius:8px;font-size:.68rem;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:.3rem;font-family:var(--font);transition:all .2s}
.btn-expand:hover{border-color:var(--border2)}
.btn-dl{background:var(--orange);color:#fff;border:none;padding:.34rem .95rem;border-radius:8px;font-size:.68rem;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:.3rem;font-family:var(--font);box-shadow:0 2px 8px rgba(249,115,22,.3);transition:all .2s}
.btn-dl:hover{background:var(--orange2)}
.result-empty{padding:3.25rem 1.5rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.75rem}
.result-empty-icon{font-size:2.5rem;opacity:.2}
.result-empty p{font-size:.78rem;color:var(--muted);line-height:1.7;max-width:220px;letter-spacing:-.01em}
.result-loading{display:none;padding:1.75rem 1.3rem;text-align:center}
.spinner{width:40px;height:40px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--orange);animation:spin 1s linear infinite;margin:0 auto .8rem}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-title{font-weight:700;font-size:.88rem;color:var(--text);margin-bottom:.22rem;letter-spacing:-.01em}
.loading-sub{font-size:.7rem;color:var(--muted);margin-bottom:1rem}
.steps-list{background:var(--off);border-radius:11px;padding:.7rem .9rem;text-align:left;border:1px solid var(--border)}
.step-item{display:flex;align-items:center;gap:.42rem;font-size:.68rem;color:var(--muted);padding:.18rem 0;opacity:.3;transition:all .35s}
.step-item.active{opacity:1;color:var(--orange);font-weight:700}
.step-item.done{opacity:.55;color:var(--color-success)}
.step-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.result-img-wrap{display:none}
.result-thumb{position:relative;cursor:zoom-in;background:var(--off);margin:.9rem 1.3rem;border-radius:12px;overflow:hidden;max-height:280px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border)}
.result-thumb img{max-width:100%;max-height:280px;object-fit:contain;border-radius:12px;display:block}
.thumb-ov{position:absolute;inset:0;background:rgba(249,115,22,.3);display:flex;align-items:center;justify-content:center;opacity:0;transition:.22s;border-radius:12px}
.result-thumb:hover .thumb-ov{opacity:1}
.thumb-ov span{color:#fff;font-size:.72rem;font-weight:700;background:var(--orange2);padding:.3rem .75rem;border-radius:7px}

/* LIGHTBOX */
.lightbox{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:99999;display:none;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1.5rem}
.lightbox.open{display:flex}
.lightbox-img{max-width:min(90vw,700px);max-height:75vh;object-fit:contain;border-radius:14px;box-shadow:0 24px 80px rgba(0,0,0,.5)}
.lightbox-actions{display:flex;gap:.65rem}
.lb-dl{background:var(--orange);color:#fff;border:none;padding:.58rem 1.4rem;border-radius:10px;font-size:.85rem;font-weight:700;cursor:pointer;font-family:var(--font)}
.lb-close{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;padding:.58rem 1.2rem;border-radius:10px;font-size:.85rem;font-weight:500;cursor:pointer;font-family:var(--font)}
.lb-nav-btn{position:fixed;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);border:none;color:#fff;font-size:2.5rem;width:54px;height:54px;border-radius:50%;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:100000;transition:background .2s;line-height:1}
.lb-nav-btn:hover{background:rgba(255,255,255,.25)}
.lb-prev{left:1rem}.lb-next{right:1rem}
.lightbox.has-nav .lb-nav-btn{display:flex}

/* MODAL GALERÍA */
.modal-bg{position:fixed;inset:0;background:rgba(28,25,23,.72);backdrop-filter:blur(6px);z-index:1000;display:none;align-items:flex-start;justify-content:center;padding:2rem;overflow-y:auto}
.modal-bg.open{display:flex;animation:bgIn .2s ease}
.modal{background:var(--white);border:1px solid var(--border);border-radius:22px;width:100%;max-width:900px;margin:auto;overflow:hidden;box-shadow:var(--shadow-xl)}
.modal-hd{display:flex;align-items:center;justify-content:space-between;padding:1.05rem 1.5rem;border-bottom:1px solid var(--border)}
.modal-hd h3{font-size:.9rem;font-weight:700;color:var(--text);letter-spacing:-.01em}
.modal-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1.1rem;transition:color .2s}
.modal-close:hover{color:var(--text)}
.modal-hint{padding:.5rem 1.5rem;background:var(--off);border-bottom:1px solid var(--border);font-size:.7rem;color:var(--muted)}
.modal-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.85rem;padding:1.3rem;max-height:58vh;overflow-y:auto}
.m-item{border-radius:11px;border:1.5px solid var(--border);cursor:pointer;overflow:hidden;transition:all .22s;background:var(--off2)}
.m-item:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:0 4px 14px rgba(249,115,22,.15)}
.m-item.sel{border-color:var(--orange);box-shadow:0 0 0 3px rgba(249,115,22,.15)}
.m-thumb{width:100%;aspect-ratio:9/16;object-fit:contain;display:block;background:var(--off2)}
.m-item-label{display:none}
.modal-ft{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.5rem;border-top:1px solid var(--border)}
.modal-cancel{background:none;border:1px solid var(--border);color:var(--muted);padding:.44rem 1rem;border-radius:9px;font-size:.78rem;cursor:pointer;font-family:var(--font);transition:all .2s}
.modal-cancel:hover{border-color:var(--border2)}
.modal-use{background:var(--orange);color:#fff;border:none;padding:.44rem 1.3rem;border-radius:9px;font-size:.78rem;font-weight:700;cursor:pointer;font-family:var(--font);box-shadow:0 2px 8px rgba(249,115,22,.3);transition:all .2s}
.modal-use:hover{background:var(--orange2)}
.modal-use:disabled{opacity:.35;cursor:not-allowed}

/* AUTH */
.auth-modal-bg{position:fixed;inset:0;background:rgba(28,25,23,.72);backdrop-filter:blur(8px);z-index:3000;display:none;align-items:center;justify-content:center;padding:1rem}
.auth-modal-bg.open{display:flex;animation:bgIn .22s ease}
@keyframes bgIn{from{opacity:0}to{opacity:1}}
.auth-modal{background:var(--white);border-radius:22px;width:100%;max-width:420px;max-height:92vh;overflow-y:auto;border:1px solid var(--border);animation:modalIn .24s cubic-bezier(.34,1.56,.64,1);box-shadow:var(--shadow-xl)}
@keyframes modalIn{from{opacity:0;transform:scale(.93) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
.auth-modal-head{padding:1.85rem 1.6rem 0;text-align:center}
.auth-logo{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:1rem}
.auth-logo-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#fb923c,#ea580c);display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 4px 12px rgba(249,115,22,.35)}
.auth-logo-name{font-weight:800;font-size:.95rem;color:var(--text);letter-spacing:-.02em}
.auth-logo-name span{color:var(--orange)}
.auth-modal-head h2{font-size:1.25rem;font-weight:800;color:var(--text);margin-bottom:.3rem;letter-spacing:-.025em}
.auth-modal-head p{font-size:.78rem;color:var(--muted);line-height:1.6;letter-spacing:-.01em}
.auth-tabs{display:flex;margin:1.3rem 1.6rem 0;border-bottom:2px solid var(--border)}
.auth-tab{flex:1;padding:.62rem;text-align:center;font-size:.8rem;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .22s;letter-spacing:-.01em}
.auth-tab.active{color:var(--orange);border-bottom-color:var(--orange)}
.auth-body{padding:1.3rem 1.6rem 1.6rem}
.auth-row{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}
.auth-field{margin-bottom:.82rem}
.auth-field label{display:block;font-size:.67rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.32rem}
.auth-field input,.auth-field select{width:100%;border:1px solid var(--border);border-radius:10px;padding:.6rem .8rem;font-size:.84rem;font-family:var(--font);outline:none;transition:border-color .2s,box-shadow .2s;color:var(--text);background:var(--white);letter-spacing:-.01em}
.auth-field input:focus,.auth-field select:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(249,115,22,.1)}
.auth-error{background:#fef2f2;border:1px solid #fecaca;color:#dc2626;font-size:.73rem;padding:.5rem .8rem;border-radius:9px;margin-bottom:.75rem;display:none}
.auth-error.show{display:block}
.btn-auth{width:100%;background:linear-gradient(135deg,#fb923c,#ea580c);color:#fff;border:none;padding:.75rem;border-radius:11px;font-size:.88rem;font-weight:700;cursor:pointer;font-family:var(--font);transition:opacity .22s,background .22s,box-shadow .22s;margin-top:.3rem;box-shadow:0 4px 16px rgba(249,115,22,.35);letter-spacing:-.01em}
.btn-auth:hover{background:linear-gradient(135deg,#f97316,#c2410c);box-shadow:0 6px 20px rgba(249,115,22,.45)}
.btn-auth:disabled{opacity:.5;cursor:not-allowed}
.auth-switch{text-align:center;font-size:.73rem;color:var(--muted);margin-top:.88rem}
.auth-switch span{color:var(--orange);cursor:pointer;font-weight:700}
.auth-terms{text-align:center;font-size:.65rem;color:var(--muted2);margin-top:.65rem;line-height:1.55}
.auth-terms a{color:var(--orange);text-decoration:none}
.blur-result{filter:blur(8px);pointer-events:none;user-select:none}

/* PLANES */
.plan-card{border:1px solid var(--border);border-radius:14px;padding:1.1rem;background:var(--white);transition:all .22s;box-shadow:var(--shadow-xs)}
.plan-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.plan-card.featured{border:2px solid var(--orange);position:relative;box-shadow:var(--shadow-orange)}
.plan-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#fb923c,#ea580c);color:#fff;font-size:.6rem;font-weight:700;padding:.22rem .8rem;border-radius:100px;white-space:nowrap}
.plan-name{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:.5rem}
.plan-price{font-size:1.9rem;font-weight:800;color:var(--text);line-height:1;margin-bottom:.15rem;letter-spacing:-.04em}
.plan-period{font-size:.65rem;color:var(--muted);margin-bottom:.45rem}
.plan-credits-badge{font-size:.65rem;font-weight:700;padding:.2rem .55rem;border-radius:6px;display:inline-block;margin-bottom:.8rem}
.plan-credits-badge.blue{background:var(--orange-light);border:1px solid var(--orange-border);color:var(--orange3)}
.plan-credits-badge.gray{background:var(--off);border:1px solid var(--border);color:var(--text)}
.plan-features{list-style:none;font-size:.68rem;color:var(--muted);line-height:2.15;margin-bottom:1rem}
.plan-features .pf-no{opacity:.32;text-decoration:line-through}
.plan-name{color:var(--muted)}
.plan-btn{width:100%;padding:.58rem;border-radius:9px;font-size:.75rem;font-weight:700;cursor:pointer;font-family:var(--font);transition:all .22s;border:none;letter-spacing:-.01em}
.plan-btn.primary{background:linear-gradient(135deg,#fb923c,#ea580c);color:#fff;box-shadow:0 3px 10px rgba(249,115,22,.3)}
.plan-btn.primary:hover{background:linear-gradient(135deg,#f97316,#c2410c);box-shadow:0 5px 16px rgba(249,115,22,.4)}
.plan-btn.secondary{background:var(--off);border:1px solid var(--border);color:var(--text)}
.plan-btn.secondary:hover{border-color:var(--orange);color:var(--orange);background:var(--orange-light)}
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;padding:0 1rem 1rem}
@media(max-width:860px){.plans-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.plans-modal{border-radius:18px}.plans-grid{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:.65rem;padding:0 1rem 1rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}.plans-grid::-webkit-scrollbar{display:none}.plans-grid .plan-card{flex:0 0 72vw;max-width:280px;scroll-snap-align:start}.plans-grid::after{content:'';flex:0 0 1rem}}
@media(max-width:380px){.plans-grid .plan-card{flex:0 0 82vw}}
.plans-scroll-hint{display:none;text-align:center;font-size:.65rem;color:var(--muted);padding:.35rem 0 .1rem}
@media(max-width:600px){.plans-scroll-hint{display:block}}
.prepago-pkg-btn{width:100%;display:flex;align-items:center;justify-content:space-between;background:var(--off);border:1.5px solid var(--border);border-radius:13px;padding:.9rem 1.15rem;cursor:pointer;font-family:var(--font);transition:all .22s;margin-bottom:.55rem}
.prepago-pkg-btn:hover{border-color:var(--orange);background:var(--orange-light);transform:translateY(-1px);box-shadow:0 4px 12px rgba(249,115,22,.1)}
.prepago-pkg-btn:last-child{margin-bottom:0}
.pkg-left{text-align:left}
.pkg-credits{font-size:.95rem;font-weight:800;color:var(--text);letter-spacing:-.02em}
.pkg-label{font-size:.65rem;color:var(--muted);margin-top:.1rem}
.pkg-price{font-size:1.2rem;font-weight:800;color:var(--orange);letter-spacing:-.02em}
.pkg-saving{font-size:.6rem;color:var(--color-success);font-weight:700;margin-top:.1rem;text-align:right}

/* SIDEBAR */
.app-sidebar{position:fixed;top:0;left:0;bottom:0;width:270px;background:var(--white);border-right:1px solid var(--border);z-index:190;display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .3s ease;overflow-y:auto;overflow-x:hidden;isolation:isolate;scrollbar-width:none;-ms-overflow-style:none}
.app-sidebar::-webkit-scrollbar{display:none}
body.sidebar-mode .app-sidebar{transform:translateX(0)}
@media(min-width:901px){body.sidebar-mode nav{left:270px;width:calc(100% - 270px);position:fixed}body.sidebar-mode .hero,body.sidebar-mode .steps-section,body.sidebar-mode .features-section,body.sidebar-mode .pricing-section,body.sidebar-mode .tool-section{margin-left:270px}}
.sb-header{padding:1.15rem 1.1rem .95rem;border-bottom:1px solid var(--border);flex-shrink:0}
.sb-logo{display:flex;align-items:center;gap:.65rem;text-decoration:none;margin-bottom:.75rem}
.sb-logo-mark{width:40px;height:40px;border-radius:11px;background:linear-gradient(145deg,#fb923c,#ea580c);display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;box-shadow:0 4px 12px rgba(249,115,22,.35)}
.sb-logo-text{display:flex;flex-direction:column;line-height:1.1}
.sb-logo-name{font-weight:800;font-size:1.05rem;color:var(--text);letter-spacing:-.025em}
.sb-logo-name span{color:var(--orange)}
.sb-logo-sub{font-size:.5rem;font-weight:700;color:var(--muted2);letter-spacing:.12em;text-transform:uppercase;margin-top:2px}
.sb-section{padding:.55rem 1rem .22rem;font-size:.58rem;font-weight:700;color:var(--muted2);text-transform:uppercase;letter-spacing:.1em}
.sb-link{display:flex;align-items:center;gap:.6rem;padding:.64rem 1rem;font-size:.8rem;font-weight:500;color:var(--muted);text-decoration:none;cursor:pointer;border:none;background:none;width:100%;text-align:left;border-radius:0;transition:all .18s;font-family:var(--font);position:relative;letter-spacing:-.01em}
.sb-link:hover{background:var(--off);color:var(--text)}
.sb-link.active{background:var(--orange-light);color:var(--orange3);font-weight:700}
.sb-link.active::before{content:'';position:absolute;left:0;top:20%;bottom:20%;width:3px;background:linear-gradient(to bottom,var(--orange),var(--orange2));border-radius:0 3px 3px 0}
.sb-link .sb-icon{font-size:.95rem;width:18px;text-align:center;flex-shrink:0}
.sb-link .sb-badge{margin-left:auto;background:var(--off2);border:1px solid var(--border);color:var(--muted2);font-size:.58rem;font-weight:700;padding:.1rem .4rem;border-radius:4px}
.sb-link.soon{opacity:.4;cursor:default}
.sb-link.soon:hover{background:none;color:var(--muted)}
.sb-credits{margin:.75rem 1rem;background:linear-gradient(135deg,var(--orange-light),var(--orange-mid));border:1px solid var(--orange-border);border-radius:13px;padding:.9rem}
.sb-credits-title{font-size:.6rem;font-weight:700;color:var(--orange3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.65rem}
.sb-credits-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem}
.sb-credits-label{font-size:.72rem;font-weight:600;color:var(--text);display:flex;align-items:center;gap:.35rem}
.sb-credits-num{font-size:.78rem;font-weight:800;color:var(--orange)}
.sb-bar-track{height:6px;background:rgba(249,115,22,.15);border-radius:100px;overflow:hidden;margin-bottom:.55rem}
.sb-bar-fill{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--orange),#fb923c);transition:width .6s ease}
.sb-bar-fill.warn{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.sb-bar-fill.danger{background:linear-gradient(90deg,#ef4444,#f87171)}
.sb-credits-sub{font-size:.62rem;color:var(--muted);text-align:center}
.sb-credits-trial{background:#fffbeb !important;border-color:#fcd34d !important}
body.dark-mode .sb-credits-trial{background:rgba(251,191,36,.1) !important;border-color:rgba(251,191,36,.3) !important}
.sb-credits-prepago{background:linear-gradient(135deg,#f5f3ff,#ede9fe);border-color:#c4b5fd}
.sb-credits-prepago .sb-prepago-title{color:#6d28d9}
.sb-credits-prepago .sb-prepago-num{color:#7c3aed}
.sb-credits-prepago .sb-prepago-label{color:var(--text)}
.sb-credits-prepago .sb-bar-track-prepago{background:rgba(124,58,237,.15)}
.sb-credits-prepago .sb-bar-fill-prepago{background:linear-gradient(90deg,#7c3aed,#a78bfa)}
body.dark-mode .sb-credits-prepago{background:linear-gradient(135deg,rgba(124,58,237,.14),rgba(124,58,237,.08));border-color:rgba(167,139,250,.3)}
body.dark-mode .sb-credits-prepago .sb-prepago-title{color:#a78bfa}
body.dark-mode .sb-credits-prepago .sb-prepago-num{color:#c4b5fd}
body.dark-mode .sb-credits-prepago .sb-bar-track-prepago{background:rgba(124,58,237,.22)}
.sb-footer{margin-top:auto;padding:.85rem 1rem;border-top:1px solid var(--border);flex-shrink:0}
.sb-logout{display:flex;align-items:center;gap:.55rem;padding:.55rem .75rem;font-size:.76rem;font-weight:500;color:var(--muted);cursor:pointer;border-radius:9px;transition:all .18s;background:none;border:none;width:100%;font-family:var(--font)}
.sb-logout:hover{background:rgba(239,68,68,.08);color:#f87171}
@media(max-width:900px){body.sidebar-mode .app-sidebar{display:flex;transform:translateX(-100%);z-index:9000;transition:transform .3s ease;-webkit-overflow-scrolling:touch}body.sidebar-mode .app-sidebar.mobile-open{transform:translateX(0);box-shadow:6px 0 40px rgba(0,0,0,.2)}body.sidebar-mode nav{left:0;width:100%}body.sidebar-mode .hero,body.sidebar-mode .steps-section,body.sidebar-mode .tool-section{margin-left:0}}

/* SECCIONES VISITANTE */
body.sidebar-mode .hero,body.sidebar-mode .steps-section{display:none}
body.sidebar-mode .tool-section{display:none}
body.sidebar-mode .features-section,body.sidebar-mode .pricing-section,body.sidebar-mode footer{display:none}
body.sidebar-mode.project-mode .tool-section{display:block;padding-top:0}
body.sidebar-mode.project-mode .tool-header{display:none}
body.sidebar-mode.project-mode #visitorSectionPickerBlock{display:none}

/* MAIN VIEW */
.main-view{max-width:1280px;margin:0 auto;padding:2.5rem;animation:viewIn .2s ease;overflow:visible;height:auto}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:901px){body.sidebar-mode .main-view{margin-left:270px;padding-top:2rem;margin-top:64px}}
@media(max-width:900px){body.sidebar-mode .main-view{margin-left:0;margin-top:64px}.main-view{padding:1.5rem 1.25rem}}

/* DASHBOARD */
.dash-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:2rem;gap:1rem}
.dash-title{font-size:1.65rem;font-weight:800;letter-spacing:-.045em;color:var(--text)}
.dash-title span{color:var(--orange)}
.dash-subtitle{font-size:.78rem;color:var(--muted);margin-top:.3rem;letter-spacing:-.01em}
.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}

/* PROJECT CARDS */
.project-card{background:var(--white);border:1px solid var(--border);border-radius:18px;padding:1.15rem;cursor:pointer;transition:all .25s;position:relative;overflow:hidden;box-shadow:var(--shadow-xs)}
.project-card:hover{border-color:var(--orange-border);transform:translateY(-4px);box-shadow:0 16px 40px rgba(249,115,22,.1),var(--shadow-md)}
.project-card:hover .project-card-icon img{transform:scale(1.05)}
.project-card:hover .project-card-icon{border-color:var(--orange-border)}
.project-card-icon img{transition:transform .25s ease}
.project-card-inner{position:relative;z-index:1}
.project-card-icon{width:100%;height:140px;border-radius:12px;background:var(--off);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin-bottom:.9rem;overflow:hidden;transition:border-color .25s}
.project-card-icon img{width:100%;height:100%;object-fit:cover;border-radius:11px}
.project-card-name{font-weight:700;font-size:.88rem;color:var(--text);margin-bottom:.25rem;letter-spacing:-.02em}
.project-card-desc{font-size:.72rem;color:var(--muted);line-height:1.55;margin-bottom:.78rem;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;letter-spacing:-.01em}
.project-card-footer{display:flex;align-items:center;justify-content:space-between}
.project-card-count{font-size:.64rem;color:var(--muted);background:var(--off);border:1px solid var(--border);padding:.2rem .52rem;border-radius:6px;font-weight:600}
.project-card-date{font-size:.62rem;color:var(--muted2)}
.project-card-del{position:absolute;top:.68rem;right:.68rem;z-index:2;background:var(--white);border:1px solid var(--border);color:var(--muted2);cursor:pointer;font-size:.72rem;border-radius:7px;padding:.24rem .44rem;opacity:.45;transition:all .2s}
.project-card-edit{position:absolute;top:.68rem;right:2.45rem;z-index:2;background:var(--white);border:1px solid var(--border);color:var(--muted2);cursor:pointer;font-size:.72rem;border-radius:7px;padding:.24rem .44rem;opacity:.45;transition:all .2s}
.project-card:hover .project-card-edit{opacity:1}
.project-card-edit:hover{border-color:var(--orange);color:var(--orange);background:var(--orange-light);opacity:1}
.project-card:hover .project-card-del{opacity:1}
.project-card-del:hover{border-color:#ef4444;color:#ef4444;background:#fef2f2;opacity:1}
.new-project-card{border:1.5px dashed var(--border);background:var(--off);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;min-height:230px;color:var(--muted);font-size:.82rem;font-weight:500;transition:all .25s;border-radius:18px;cursor:pointer}
.new-project-card:hover{border-color:var(--orange);color:var(--orange);background:var(--orange-light);transform:translateY(-3px);box-shadow:0 8px 24px rgba(249,115,22,.1)}
.new-project-card-icon{width:40px;height:40px;border-radius:11px;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:background .22s}
.new-project-card:hover .new-project-card-icon{background:var(--orange-border)}

/* BREADCRUMB / SECTION PICKER */
.project-breadcrumb{display:flex;align-items:center;gap:.45rem;font-size:.8rem;margin-bottom:1.5rem}
.bc-back{color:var(--muted);cursor:pointer;display:flex;align-items:center;gap:.3rem;font-weight:500;transition:color .15s;background:none;border:none;font-family:var(--font);font-size:.8rem;padding:0}
.bc-back:hover{color:var(--orange)}
.bc-sep{color:var(--border2)}
.bc-current{font-weight:700;color:var(--text);letter-spacing:-.01em}
.section-picker{background:var(--off);border:1px solid var(--border);border-radius:15px;padding:1rem 1.15rem;margin-bottom:1.75rem}
.section-picker-label{font-size:.6rem;font-weight:700;color:var(--muted2);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.72rem}
.sections-row{display:flex;gap:.4rem;flex-wrap:wrap}
.section-pill{background:var(--white);border:1.5px solid var(--border);color:var(--muted);padding:.36rem .85rem;border-radius:100px;font-size:.72rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:var(--font);white-space:nowrap;line-height:1.4;letter-spacing:-.01em}
.section-pill:hover{border-color:var(--orange);color:var(--orange);background:var(--orange-light);transform:translateY(-1px)}
.section-pill.active{background:var(--orange);border-color:var(--orange);color:#fff;transform:scale(1.03);box-shadow:0 3px 10px rgba(249,115,22,.3)}

/* GALLERY */
.gen-gallery{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--border)}
.gen-gallery-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.15rem}
.gen-gallery-title{font-size:.88rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:.5rem;letter-spacing:-.02em}
.gen-gallery-count{background:var(--orange-light);border:1px solid var(--orange-border);color:var(--orange3);font-size:.62rem;font-weight:800;padding:.15rem .5rem;border-radius:6px}
.gen-group{margin-bottom:2rem}
.gen-group-header{display:flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:700;color:var(--text);margin-bottom:.88rem;padding-bottom:.55rem;border-bottom:1px solid var(--border);letter-spacing:-.02em}
.gen-group-count{background:var(--orange-light);border:1px solid var(--orange-border);color:var(--orange3);font-size:.62rem;font-weight:800;padding:.15rem .5rem;border-radius:6px}
.gallery-empty{text-align:center;padding:2.5rem 1rem;color:var(--muted)}
.gallery-empty-icon{font-size:2rem;margin-bottom:.6rem;opacity:.2}
.gallery-empty p{font-size:.78rem;line-height:1.7;max-width:240px;margin:0 auto;letter-spacing:-.01em}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.9rem}
.gen-card{border:1px solid var(--border);border-radius:13px;overflow:hidden;background:var(--white);transition:all .22s;box-shadow:var(--shadow-xs)}
.gen-card:hover{border-color:var(--orange-border);box-shadow:0 6px 20px rgba(249,115,22,.1);transform:translateY(-2px)}
.gen-thumb-wrap{position:relative;overflow:hidden;background:var(--off);cursor:pointer;display:flex;align-items:center;justify-content:center;min-height:150px}
.gen-thumb{width:100%;display:block;object-fit:contain;aspect-ratio:auto;transition:transform .25s;background:var(--off)}
.gen-card:hover .gen-thumb{transform:scale(1.03)}
.gen-thumb-ov{display:none}
.gen-card-foot{padding:.52rem .65rem;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border)}
.gen-section-tag{font-size:.6rem;font-weight:700;color:var(--orange3);background:var(--orange-light);border:1px solid var(--orange-border);padding:.15rem .45rem;border-radius:5px;text-transform:capitalize}
.gen-card-actions{display:flex;gap:.2rem}
.gen-action{background:none;border:none;cursor:pointer;font-size:.78rem;color:var(--muted2);padding:.2rem .28rem;border-radius:5px;transition:all .15s}
.gen-action:hover{background:var(--off);color:var(--text)}
.gen-action.del:hover{background:#fef2f2;color:#ef4444}

/* CREAR PROYECTO */
.cp-field{margin-bottom:.88rem}
.cp-field label{display:block;font-size:.67rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.35rem}
.cp-field input,.cp-field textarea{width:100%;border:1px solid var(--border);border-radius:10px;padding:.62rem .85rem;font-size:.85rem;font-family:var(--font);outline:none;transition:border-color .2s,box-shadow .2s;resize:none;color:var(--text);background:var(--white);letter-spacing:-.01em}
.cp-field input:focus,.cp-field textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(249,115,22,.08)}
.cp-img-upload{width:100%;height:112px;border:1.5px dashed var(--border);border-radius:12px;background:var(--off);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;cursor:pointer;transition:all .22s;position:relative;overflow:hidden}
.cp-img-upload:hover{border-color:var(--orange);background:var(--orange-light)}
.cp-img-upload.has-img{border-style:solid;border-color:var(--orange)}
.cp-img-upload img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:4px;border-radius:11px}
.cp-img-upload .cp-img-ov{position:absolute;inset:0;background:rgba(249,115,22,.38);display:flex;align-items:center;justify-content:center;opacity:0;transition:.22s}
.cp-img-upload.has-img:hover .cp-img-ov{opacity:1}
.cp-img-upload .cp-img-ov span{color:#fff;font-size:.7rem;font-weight:700;background:var(--orange2);padding:.3rem .7rem;border-radius:7px}

/* FUNCIONES */
.features-section{background:var(--off);border-top:1px solid var(--border);padding:5.5rem 2.5rem}
.features-inner{max-width:1280px;margin:0 auto}
.features-header{text-align:center;margin-bottom:3.5rem}
.features-header h2{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:800;letter-spacing:-.04em;margin-bottom:.7rem}
.features-header h2 em{font-style:normal;color:var(--orange)}
.features-header p{font-size:.9rem;color:var(--muted);letter-spacing:-.01em}
.features-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.1rem}
@media(max-width:1100px){.features-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.features-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.features-grid{grid-template-columns:1fr}}
.feature-card{background:var(--white);border:1px solid var(--border);border-radius:18px;padding:1.6rem;position:relative;transition:all .25s;box-shadow:var(--shadow-xs)}
.feature-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.feature-card.featured{border:2px solid var(--orange)}
.feature-card.soon-card{opacity:.65}
.feature-card.featured{border:2px solid var(--orange);box-shadow:0 0 0 1px rgba(234,88,12,.15)}
.feature-badge{position:absolute;top:-16px;left:1.25rem;background:linear-gradient(135deg,#fb923c,#ea580c);color:#fff;font-size:.82rem;font-weight:800;padding:.4rem 1.2rem;border-radius:100px;letter-spacing:.04em;box-shadow:0 4px 14px rgba(234,88,12,.55);white-space:nowrap}
.feature-icon{font-size:2rem;margin-bottom:.8rem}
.feature-card h3{font-size:.95rem;font-weight:800;color:var(--text);margin-bottom:.5rem;letter-spacing:-.02em}
.feature-card p{font-size:.78rem;color:var(--muted);line-height:1.7;margin-bottom:.9rem;letter-spacing:-.01em}
.feature-list{list-style:none;font-size:.75rem;color:var(--muted);line-height:2.1}
.soon-badge{background:var(--off2);border:1px solid var(--border);color:var(--muted2);font-size:.58rem;font-weight:700;padding:.1rem .4rem;border-radius:4px;margin-left:.35rem}

/* PRECIOS */
.pricing-section{padding:5.5rem 2.5rem;background:var(--white)}
.pricing-inner{max-width:1280px;margin:0 auto}
.pricing-header{text-align:center;margin-bottom:2.75rem}
.pricing-badge{display:inline-flex;background:var(--orange-light);border:1px solid var(--orange-border);color:var(--orange3);font-size:.7rem;font-weight:700;padding:.32rem .9rem;border-radius:100px;margin-bottom:1.1rem}
.pricing-header h2{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:800;letter-spacing:-.04em;margin-bottom:.7rem}
.pricing-header h2 em{font-style:normal;color:var(--orange)}
.pricing-header p{font-size:.9rem;color:var(--muted);letter-spacing:-.01em}
.pricing-highlight{display:flex;align-items:center;justify-content:center;gap:2.5rem;background:linear-gradient(135deg,#fb923c 0%,#ea580c 100%);border-radius:18px;padding:1.75rem;margin-bottom:2.5rem;box-shadow:var(--shadow-orange-lg);position:relative;overflow:hidden}
.pricing-highlight::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(255,255,255,.1),transparent 60%)}
.ph-item{text-align:center;position:relative;z-index:1}
.ph-num{display:block;font-size:2rem;font-weight:800;color:#fff;letter-spacing:-.04em;line-height:1}
.ph-label{font-size:.7rem;color:rgba(255,255,255,.75);font-weight:500;margin-top:.2rem}
.ph-div{width:1px;height:44px;background:rgba(255,255,255,.2);position:relative;z-index:1}
.pricing-cta-block{text-align:center;margin-bottom:3.5rem}
.pricing-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-bottom:2.5rem;align-items:start}
@media(max-width:900px){.pricing-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.pricing-cards{grid-template-columns:1fr}}
.pricing-card{border:1px solid var(--border);border-radius:16px;padding:1.5rem 1.4rem 1.3rem;background:var(--white);position:relative;transition:all .25s;box-shadow:var(--shadow-xs)}
.pricing-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.pricing-card.featured-card{border:2px solid var(--orange);box-shadow:var(--shadow-orange);transform:scale(1.06);z-index:1}
.pricing-card.featured-card:hover{transform:scale(1.06) translateY(-3px)}
/* Accent bar — clip only the bar with its own pseudo wrapper */
.pc-accent{display:block;height:3px;border-radius:12px;margin-bottom:1rem}
.pc-accent-scout{background:linear-gradient(90deg,#64748b,#94a3b8)}
.pc-accent-prepago{background:linear-gradient(90deg,#6b7280,#9ca3af)}
.pc-accent-basico{background:linear-gradient(90deg,#22c55e,#16a34a)}
.pc-accent-business{background:linear-gradient(90deg,#f59e0b,#d97706)}
.pc-accent-agency{background:linear-gradient(90deg,#8b5cf6,#7c3aed)}
.pricing-card.featured-card .pc-accent{background:linear-gradient(90deg,#fb923c,#ea580c)}
/* Business/Agency subtle tint */
.pc-business{background:linear-gradient(160deg,var(--white) 70%,rgba(245,158,11,.05))}
.pc-agency{background:linear-gradient(160deg,var(--white) 70%,rgba(139,92,246,.06))}
/* Divider */
.pc-divider{border:none;border-top:1px solid var(--border);margin:.85rem 0}
/* Rate inline */
.pc-rate{font-size:.68rem;color:var(--muted);opacity:.7;font-weight:400}
.pc-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#fb923c,#ea580c);color:#fff;font-size:.62rem;font-weight:700;padding:.28rem .9rem;border-radius:100px;white-space:nowrap;box-shadow:0 2px 8px rgba(249,115,22,.4)}
.pc-badge-agency{background:linear-gradient(135deg,#8b5cf6,#7c3aed);box-shadow:0 2px 8px rgba(139,92,246,.35)}
.pc-name{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.3rem;font-family:var(--font)}
.pc-price{font-size:2rem;font-weight:800;color:var(--text);line-height:1;letter-spacing:-.04em;font-family:var(--font)}
.pc-price span{font-size:.82rem;font-weight:500;color:var(--muted)}
.pc-desc{font-size:.68rem;color:var(--muted);margin-bottom:.9rem;letter-spacing:-.01em}
.pc-features{list-style:none;font-size:.75rem;color:var(--muted);line-height:1.9;margin-bottom:1.2rem;display:flex;flex-direction:column;gap:.18rem;font-family:var(--font)}
.pc-features .pc-no{opacity:.3;text-decoration:line-through}
.pc-btn{width:100%;padding:.65rem;border-radius:10px;font-size:.8rem;font-weight:700;cursor:pointer;font-family:var(--font);border:1px solid var(--border);background:var(--off);color:var(--text);transition:all .22s;letter-spacing:-.01em}
.pc-btn:hover{border-color:var(--orange);color:var(--orange)}
.pc-btn.primary{background:linear-gradient(135deg,#fb923c,#ea580c);color:#fff;border-color:transparent;box-shadow:0 3px 10px rgba(249,115,22,.3)}
.pc-btn.primary:hover{background:linear-gradient(135deg,#f97316,#c2410c);box-shadow:0 5px 16px rgba(249,115,22,.4)}
.pc-btn-business{border-color:rgba(245,158,11,.5);color:#f59e0b}
.pc-btn-business:hover{background:rgba(245,158,11,.08);border-color:#f59e0b}
.pc-btn-agency{border-color:rgba(139,92,246,.5);color:#8b5cf6}
.pc-btn-agency:hover{background:rgba(139,92,246,.08);border-color:#8b5cf6}
.pricing-guarantee{text-align:center;font-size:.82rem;color:var(--muted);background:var(--off);border:1px solid var(--border);border-radius:12px;padding:.9rem;letter-spacing:-.01em}

/* UTILS */
input[type=file]{display:none}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--off)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
body.sidebar-mode nav .logo{display:none !important}
.tool-grid{position:relative}
.no-credits-overlay{position:absolute;inset:0;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);z-index:10;display:flex;align-items:center;justify-content:center;border-radius:18px}
.no-credits-box{text-align:center;padding:2.25rem;background:#fff;border:1px solid var(--border);border-radius:18px;max-width:320px;box-shadow:var(--shadow-lg)}
.no-credits-box h3{font-size:1.1rem;font-weight:800;margin:.5rem 0;letter-spacing:-.025em}
.no-credits-box p{font-size:.82rem;color:var(--muted);margin-bottom:1rem;line-height:1.65;letter-spacing:-.01em}
.nav-greeting{display:flex;align-items:center;gap:.6rem}
.nav-controls{margin-left:auto}
.nav-greeting-wave{font-size:1.4rem;line-height:1;animation:wave-hand 1s ease-in-out 1;transform-origin:70% 70%;display:inline-block}
.nav-greeting-body{display:flex;flex-direction:column;line-height:1.1}
.nav-greeting-label{font-size:.6rem;font-weight:700;letter-spacing:.12em;color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;text-transform:uppercase}
.nav-greeting-name{background:linear-gradient(90deg,#fb923c 0%,#ea580c 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:800;font-size:1.15rem;font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:-.03em;text-transform:uppercase}
@keyframes wave-hand{0%{transform:rotate(0deg)}20%{transform:rotate(25deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(20deg)}80%{transform:rotate(-5deg)}100%{transform:rotate(0deg)}}
.gen-counter{display:flex;align-items:center;gap:.5rem;background:var(--orange-light);border:1px solid var(--orange-border);padding:.3rem .88rem;border-radius:100px;font-size:.72rem;font-weight:600;color:var(--orange3)}
.gen-counter-dot{width:7px;height:7px;border-radius:50%;background:#16a34a;animation:pulse-dot 2s infinite}
.gen-counter-num{font-size:.82rem;font-weight:800;color:var(--orange)}
.gen-counter-label{color:var(--muted);font-weight:500}
.gen-counter-ico{font-size:.85rem;line-height:1;display:inline-block;transform-origin:50% 70%;animation:clapper-board 2.8s ease-in-out infinite;filter:drop-shadow(0 0 3px rgba(139,92,246,.5))}
.gen-counter-videos{background:rgba(139,92,246,.1);border-color:rgba(139,92,246,.3);position:relative;overflow:hidden}
.gen-counter-videos::before{content:'';position:absolute;inset:-2px;border-radius:100px;background:radial-gradient(circle at center,rgba(139,92,246,.35) 0%,transparent 70%);animation:purple-glow 2.8s ease-in-out infinite;pointer-events:none;z-index:0}
.gen-counter-videos>*{position:relative;z-index:1}
.gen-counter-videos .gen-counter-num{color:#8b5cf6;background:linear-gradient(90deg,#a78bfa,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
body.dark-mode .gen-counter-videos{background:rgba(139,92,246,.15);border-color:rgba(139,92,246,.35)}
@keyframes clapper-board{
  0%,60%,100%{transform:rotate(0deg)}
  65%{transform:rotate(-18deg)}
  72%{transform:rotate(-2deg)}
  78%{transform:rotate(-8deg)}
  85%{transform:rotate(0deg)}
}
@keyframes purple-glow{
  0%,60%,100%{opacity:.3}
  72%{opacity:.9}
  85%{opacity:.4}
}
@media(max-width:900px){.gen-counter-label{display:none}}
@media(max-width:600px){.gen-counter{padding:.25rem .65rem;gap:.35rem}.gen-counter-num{font-size:.76rem}}
@media(prefers-reduced-motion: reduce){
  .gen-counter-ico,.gen-counter-videos::before{animation:none}
}

/* DARK MODE */
body.dark-mode{--white:#131211;--off:#1c1917;--off2:#292524;--border:#3c3836;--border2:#57534e;--text:#fafaf9;--text2:#e7e5e4;--muted:#a8a29e;--muted2:#a8a29e;--orange3:#fb923c;--orange-light:rgba(249,115,22,.12);--orange-mid:rgba(249,115,22,.08);--orange-border:rgba(249,115,22,.25)}
body.dark-mode .modal,body.dark-mode .auth-modal{background:#1c1917;border-color:#3c3836}
body.dark-mode nav,body.dark-mode .app-sidebar{background:rgba(19,18,17,.92);border-color:#3c3836}
@media(max-width:900px){body.dark-mode nav{background:#131211;backdrop-filter:none;-webkit-backdrop-filter:none}}
body.dark-mode .project-card,body.dark-mode .card,body.dark-mode .result-card{background:#1c1917;border-color:#3c3836}
body.dark-mode .gen-counter{background:rgba(249,115,22,.12);border-color:rgba(249,115,22,.25)}
body.dark-mode select,body.dark-mode .auth-field input,body.dark-mode .auth-field select,body.dark-mode .cp-field input,body.dark-mode .cp-field textarea{background:#292524;color:#fafaf9;border-color:#3c3836}
body.dark-mode .hs-section{background:#1c1917;border-color:#3c3836}
body.dark-mode .hs-header{background:#292524;border-color:#3c3836}
body.dark-mode .hs-product{background:#292524}
body.dark-mode .hs-landing{background:#292524}
body.dark-mode .gn-stat{background:#1c1917;border-color:#3c3836}
body.dark-mode .gn-stat-val{color:#fb923c}
body.dark-mode .gn-filter-box{background:#1c1917;border-color:#3c3836}
body.dark-mode .gn-filter-title{color:#fafaf9}
body.dark-mode .gn-filter-desc{color:#a8a29e}
body.dark-mode .gn-select{background:#292524;border-color:#3c3836;color:#fafaf9}
body.dark-mode .gn-search{background:#292524;border-color:#3c3836;color:#fafaf9}
body.dark-mode .gn-card{background:#1c1917;border-color:#3c3836}
body.dark-mode .gn-card-name{color:#fafaf9}
body.dark-mode .gn-card-price{color:#e7e5e4}
body.dark-mode .gn-empty{background:#1c1917;border-color:#3c3836}
body.dark-mode .gn-pg-btn{background:#1c1917;border-color:#3c3836;color:#e7e5e4}
body.dark-mode .gn-result-count{color:#a8a29e}
body.dark-mode .gn-result-count strong{color:#fafaf9}
body.dark-mode .gn-modal-box{background:#1c1917}
body.dark-mode .gn-modal-name{color:#fafaf9}
body.dark-mode .gn-modal-price{background:#292524}
body.dark-mode .gn-modal-price-val{color:#fafaf9}
body.dark-mode .gn-stat-box{background:#292524}
body.dark-mode .gn-stat-box-val{color:#fb923c}
body.dark-mode .gn-stat-box-lbl{color:#a8a29e}
body.dark-mode .gn-badge-ventas{background:rgba(37,99,235,.18);border-color:rgba(96,165,250,.3)}
body.dark-mode .gn-badge-ventas .gn-badge-num{color:#93c5fd}
body.dark-mode .gn-badge-ventas .gn-badge-lbl{color:#60a5fa}
body.dark-mode .gn-badge-stock{background:rgba(22,163,74,.15);border-color:rgba(74,222,128,.25)}
body.dark-mode .gn-badge-stock .gn-badge-num{color:#4ade80}
body.dark-mode .gn-badge-stock .gn-badge-lbl{color:#4ade80}
body.dark-mode .score-alto{background:rgba(234,179,8,.1);border-color:rgba(234,179,8,.3)}
body.dark-mode .score-alto .gn-badge-num{color:#fde047}
body.dark-mode .score-alto .gn-badge-lbl{color:#fbbf24}
body.dark-mode .score-medio{background:rgba(22,163,74,.1);border-color:rgba(74,222,128,.25)}
body.dark-mode .score-medio .gn-badge-num{color:#4ade80}
body.dark-mode .score-medio .gn-badge-lbl{color:#4ade80}
body.dark-mode .score-bajo{background:#292524;border-color:#3c3836}
body.dark-mode .score-bajo .gn-badge-num{color:#a8a29e}
body.dark-mode .score-bajo .gn-badge-lbl{color:#a8a29e}
body.dark-mode .gn-chart-lbl{color:#a8a29e}
body.dark-mode .gn-card-provider{color:#a8a29e}
body.dark-mode .gn-card-provider strong{color:#93c5fd}
body.dark-mode .gn-ultimo{color:#a8a29e}
body.dark-mode .gn-loading{color:#a8a29e}
body.dark-mode .gn-modal-meta{color:#a8a29e}
body.dark-mode .gn-modal-price-lbl{color:#a8a29e}
body.dark-mode .gn-modal-section-title{color:#e7e5e4}
body.dark-mode .gn-score-bar-lbl{color:#a8a29e}
body.dark-mode .gn-score-bar-track{background:#3c3836}
body.dark-mode .gn-comp-btn{background:#292524;border-color:#3c3836;color:#e7e5e4}
body.dark-mode .gn-comp-btn:hover{border-color:#fb923c;color:#fb923c;background:rgba(251,146,60,.08)}
body.dark-mode .gn-modal-header{border-color:#3c3836}
body.dark-mode .gn-modal-close{background:#292524;color:#a8a29e}
body.dark-mode .gn-modal-body{color:#e7e5e4}
body.dark-mode .gn-modal-section{color:#e7e5e4}
body:not(.dark-mode) .footer{background:#f5f5f4;border-color:#e7e5e4}
body:not(.dark-mode) .footer-col-title{color:#1c1917}
body:not(.dark-mode) .footer-link{color:#78716c}
body:not(.dark-mode) .footer-bottom{color:#a8a29e}
body:not(.dark-mode) .footer-bottom-links a{color:#a8a29e}
body.dark-mode .footer-desc{color:#a8a29e}
body.dark-mode .footer-link{color:#a8a29e}
body:not(.dark-mode) .footer-social{background:#e7e5e4;border-color:#d6d3d1;color:#78716c}
body:not(.dark-mode) .footer-input{background:#fff;border-color:#e7e5e4;color:#1c1917}
body:not(.dark-mode) .logo-name{color:#1c1917}
/* LANG / MISC */
.lang-opt{width:100%;text-align:left;padding:.45rem .75rem;border:none;background:none;cursor:pointer;font-size:.8rem;font-family:var(--font);border-radius:7px;color:var(--text);transition:background .15s;letter-spacing:-.01em}
.lang-opt:hover{background:var(--orange-light);color:var(--orange)}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:5px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.skeleton{background:linear-gradient(90deg,var(--off) 25%,var(--border) 50%,var(--off) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes revealImg{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes slotPulse{0%{transform:scale(1)}40%{transform:scale(1.06);border-color:var(--color-success)}100%{transform:scale(1)}}
body.menu-open{overflow:hidden;touch-action:none}
.nav-links a.nav-active { color: var(--orange) !important; font-weight: 700; }
.hero{max-width:100%;margin:0;padding:.75rem 3rem 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.25rem}
.hero-showcase{display:grid;grid-template-columns:1fr 1fr;gap:2rem;width:100%;max-width:1280px;margin:1.25rem auto 0;padding:0 2.5rem}
@media(max-width:900px){.hero{padding:.75rem 1.25rem 0;gap:.25rem}.hero-showcase{grid-template-columns:1fr;gap:1rem;padding:0 1.25rem}}
.hero-sub{max-width:650px;text-align:center;margin-left:auto;margin-right:auto}
.hero-stats{justify-content:center;margin-top:2rem;margin-bottom:3.5rem}
.hero-trust{justify-content:center;margin-bottom:0;margin-top:1.75rem}
.hero-ctas{justify-content:center;margin-bottom:0;margin-top:3rem}
@media(max-width:600px){.hero-ctas{flex-direction:column;width:100%;padding:0 1.5rem;margin-top:2rem}.hero-ctas .cta-primary,.hero-ctas .cta-secondary{width:100%;justify-content:center}.hero-stats{gap:2rem}.stat-n{font-size:1.7rem}.hero-trust{gap:1.2rem;flex-direction:column;align-items:center}}
.hs-section{background:#fafaf9;border:1px solid var(--border);border-radius:16px;overflow:hidden;min-width:0;isolation:isolate}
.hs-header{padding:.6rem .9rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);background:#fff}
.hs-title{font-size:.7rem;font-weight:700;color:var(--text)}
.hs-badge{background:var(--orange-light);border:1px solid var(--orange-border);color:var(--orange3);font-size:.58rem;font-weight:700;padding:2px 7px;border-radius:100px}
.hs-body{padding:.75rem 0 0;overflow:hidden;position:relative;width:100%;min-height:420px}
@media(max-width:600px){.hs-body{min-height:220px}}
.hs-track{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1);width:100%;will-change:transform;min-width:0}
.hs-slide{min-width:100%;max-width:100%;width:100%;display:grid;grid-template-columns:1fr auto 1fr;gap:.5rem;align-items:center;box-sizing:border-box;padding:0 .75rem}
.hs-product{background:var(--off2);border-radius:8px;overflow:hidden;width:100%}
.hs-product img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;display:block;border-radius:8px}
.hs-landing img,.hs-banner img{width:100%;height:auto;aspect-ratio:9/16;object-fit:contain;display:block;border-radius:8px}
.hs-arrow{width:24px;height:24px;background:var(--orange);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.75rem;flex-shrink:0;box-shadow:0 3px 8px rgba(249,115,22,.35)}
.hs-lbl{font-size:.58rem;color:var(--muted2);font-weight:600;text-align:center;margin-top:.3rem}
.hs-landing{background:var(--off2);border-radius:8px;overflow:hidden}
.hl-badge{background:#fed7aa;color:#c2410c;font-size:6px;font-weight:700;padding:2px 5px;border-radius:3px;width:fit-content;margin-bottom:.2rem}
.hl-title{font-size:8px;font-weight:800;color:var(--text);line-height:1.3}
.hl-title em{font-style:normal;color:var(--orange)}
.hl-sub{font-size:6px;color:var(--muted);line-height:1.4;margin:.2rem 0}
.hl-feat{font-size:6px;color:#57534e;margin-bottom:2px}
.hl-btn{background:var(--orange);color:#fff;font-size:6px;font-weight:700;padding:3px 7px;border-radius:4px;width:fit-content;margin-top:.25rem}
.hs-banner{border-radius:8px;overflow:hidden}
.hb-tag{background:rgba(255,255,255,.2);color:#fff;font-size:6px;font-weight:700;padding:1px 5px;border-radius:3px;width:fit-content}
.hb-emoji{font-size:20px;text-align:center;margin:.2rem 0}
.hb-title{color:#fff;font-size:7px;font-weight:800;line-height:1.3}
.hb-price{color:rgba(255,255,255,.8);font-size:6px;margin-top:1px}
.hb-btn{background:rgba(255,255,255,.25);color:#fff;font-size:6px;font-weight:700;padding:2px 5px;border-radius:3px;width:fit-content;margin-top:.25rem}
.hs-progress{height:2px;background:var(--border);border-radius:2px;margin:.65rem .75rem 0;overflow:hidden}
.hs-progress-fill{height:100%;background:var(--orange);border-radius:2px;width:0%;transition:width .1s linear}
.hs-dots{display:flex;justify-content:center;gap:5px;margin-top:.6rem;align-items:center;padding-bottom:.75rem}
.hs-dot{width:24px;height:24px;background:transparent;cursor:pointer;border:none;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hs-dot::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--border);transition:all .3s;display:block}
.hs-dot.active::before{background:var(--orange);width:16px;border-radius:3px}
@media(max-width:600px){
  .pricing-highlight{flex-direction:column;gap:1rem;padding:1.25rem}
  .ph-div{width:80%;height:1px}
  .pricing-cards{grid-template-columns:1fr}
}
.footer{background:#1c1917;border-top:1px solid #3c3836;padding:3.5rem 2.5rem 0;margin-top:4rem}
.footer-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.5fr;gap:3rem;padding-bottom:3rem;border-bottom:1px solid #3c3836}
.footer-brand{display:flex;flex-direction:column}
.footer-desc{font-size:.78rem;color:#78716c;line-height:1.7;margin-bottom:1rem;max-width:240px}
.footer-socials{display:flex;gap:.65rem;margin-top:.5rem}
.footer-social{width:32px;height:32px;border-radius:8px;background:#292524;border:1px solid #3c3836;color:#a8a29e;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;text-decoration:none;transition:all .2s}
.footer-social:hover{border-color:var(--orange);color:var(--orange)}
.footer-col{display:flex;flex-direction:column;gap:.6rem}
.footer-col-title{font-size:.72rem;font-weight:700;color:#fafaf9;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.35rem}
.footer-link{font-size:.8rem;color:#78716c;text-decoration:none;transition:color .2s}
.footer-link:hover{color:var(--orange)}
.footer-newsletter-row{display:flex;gap:.5rem;margin-top:.5rem}
.footer-input{flex:1;background:#292524;border:1px solid #3c3836;border-radius:9px;padding:.5rem .75rem;font-size:.78rem;color:#fafaf9;font-family:var(--font);outline:none}
.footer-input:focus{border-color:var(--orange)}
.footer-btn{background:#c2410c;color:#fff;border:none;padding:.5rem 1rem;border-radius:9px;font-size:.75rem;font-weight:700;cursor:pointer;font-family:var(--font);white-space:nowrap;transition:background .2s}
.footer-btn:hover{background:#9a3412}
.footer-bottom{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:1.25rem 0;font-size:.72rem;color:#78716c;flex-wrap:wrap;gap:.75rem}
.footer-bottom-links{display:flex;gap:1.5rem}
.footer-bottom-links a{color:#78716c;text-decoration:none;transition:color .2s}
body.dark-mode .footer-bottom{color:#a8a29e}
body.dark-mode .footer-bottom-links a{color:#a8a29e}
.footer-bottom-links a:hover{color:var(--orange)}
@media(max-width:900px){.footer-inner{grid-template-columns:1fr 1fr;gap:2rem}.footer-brand{grid-column:1/-1}.footer-col:last-child{grid-column:1/-1}}
@media(max-width:600px){.footer-inner{grid-template-columns:1fr}.footer-bottom{flex-direction:column;text-align:center}}
@media(min-width:901px){
  body.sidebar-mode .footer{
    margin-left:270px;
  }
}
.slot-del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(220,38,38,0.85);
  color: #fff;
  border: none;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  line-height: 1;
}
.slot-del:hover { background: #dc2626; }

/* ═══════════════════════════════════════════════════════════════════════
   TIKTOK SHOP SPY — CSS completo + totalmente responsive
   ═══════════════════════════════════════════════════════════════════════ */
.tss-wrap{padding:1.5rem 2rem;max-width:1400px}
.tss-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:1.25rem}
.tss-stat{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:.75rem 1.25rem;min-width:0}
.tss-stat-lbl{font-size:.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tss-stat-val{font-size:1.35rem;font-weight:700;color:var(--orange,#f97316);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tss-filters{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:1rem 1.25rem;margin-bottom:1.25rem;display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.tss-fg{display:flex;flex-direction:column;gap:4px;flex:1;min-width:120px}
.tss-label{font-size:.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.tss-select,.tss-input{background:var(--bg,#f8f8f8);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:8px 10px;font-size:.85rem;outline:none;width:100%;font-family:inherit}
.tss-select:focus,.tss-input:focus{border-color:var(--orange,#f97316)}
.tss-btn{background:var(--orange,#f97316);border:none;border-radius:8px;color:#fff;padding:9px 22px;font-size:.85rem;cursor:pointer;font-weight:700;white-space:nowrap;font-family:inherit}
.tss-btn:hover{opacity:.9}

/* Sección */
.tss-section{margin-bottom:2rem}
.tss-sec-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border);gap:8px}
.tss-sec-left{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.tss-sec-icon{font-size:1.1rem;flex-shrink:0}
.tss-sec-name{font-size:1rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tss-sec-cnt{background:rgba(249,115,22,.12);color:var(--orange,#f97316);border-radius:20px;padding:2px 10px;font-size:.72rem;font-weight:700;flex-shrink:0}
.tss-ver-todo{background:none;border:none;color:var(--orange,#f97316);font-size:.82rem;cursor:pointer;font-family:inherit;font-weight:600;flex-shrink:0;white-space:nowrap}
.tss-ver-todo:hover{text-decoration:underline}
.tss-row{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.tss-back-bar{display:flex;align-items:center;gap:10px;margin-bottom:1.25rem;padding-bottom:12px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.tss-back{background:none;border:1px solid var(--border);border-radius:8px;padding:6px 14px;font-size:.78rem;cursor:pointer;color:var(--muted);font-family:inherit}
.tss-back:hover{border-color:var(--orange,#f97316);color:var(--orange,#f97316)}

/* Grid + Card */
.tss-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.tss-card{background:var(--white);border:1px solid var(--border);border-radius:10px;overflow:hidden;cursor:pointer;transition:box-shadow .15s,border-color .15s,transform .15s}
.tss-card:hover{border-color:var(--orange,#f97316);box-shadow:0 4px 16px rgba(249,115,22,.12);transform:translateY(-2px)}
.tss-card-img{position:relative;aspect-ratio:1;background:var(--bg,#f5f5f5);overflow:hidden}
.tss-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.tss-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2rem;opacity:.25}
.tss-rank{position:absolute;top:6px;left:6px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800}
.tss-rank.r1{background:#f59e0b;color:#1a0a00}
.tss-rank.r2{background:#9ca3af;color:#111}
.tss-rank.r3{background:#b45309;color:#fff}
.tss-rank.rn{background:rgba(0,0,0,.55);color:#fff}
.tss-price{position:absolute;bottom:6px;left:6px;background:rgba(0,0,0,.72);border-radius:6px;padding:3px 8px;font-size:.75rem;font-weight:700;color:#fff;backdrop-filter:blur(4px)}
.tss-discount{position:absolute;top:6px;right:6px;background:#ef4444;border-radius:5px;padding:2px 6px;font-size:.65rem;font-weight:800;color:#fff}
.tss-card-body{padding:10px 11px}
.tss-card-title{font-size:.76rem;color:var(--text);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.15rem;margin-bottom:8px;font-weight:500}
.tss-metric{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px}
.tss-mlbl{font-size:.63rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.tss-mval{font-size:.78rem;font-weight:800}
.tss-rev{color:#3b82f6}
.tss-sal{color:#22c55e}
.tss-loading,.tss-empty{text-align:center;padding:3rem;color:var(--muted);font-size:.85rem}
.tss-btn-more{background:transparent;border:1px solid var(--border);border-radius:8px;padding:9px 28px;font-size:.85rem;cursor:pointer;color:var(--muted);font-family:inherit;font-weight:600}
.tss-btn-more:hover{border-color:var(--orange,#f97316);color:var(--orange,#f97316)}

/* ─── Tablet (hasta 1024px): 4 cards por fila en row ─────────── */
@media(max-width:1024px){
  .tss-wrap{padding:1.25rem 1.5rem}
  .tss-row{grid-template-columns:repeat(4,1fr)}
}

/* ─── Tablet pequeña (hasta 768px): header más compacto ─────── */
@media(max-width:768px){
  .tss-wrap{padding:1rem 1rem}
  .tss-stats{grid-template-columns:repeat(2,1fr);gap:8px}
  .tss-stat{padding:.65rem .85rem}
  .tss-stat-val{font-size:1.15rem}
  .tss-filters{padding:.85rem 1rem;gap:8px}
  .tss-row{grid-template-columns:repeat(2,1fr);gap:10px}
  .tss-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .tss-sec-name{font-size:.95rem}
  /* Fix header espacio arriba */
  .tss-wrap .dash-header{margin-top:0;margin-bottom:1.25rem;flex-direction:column;gap:.5rem}
  .tss-wrap .dash-title{font-size:1.5rem}
  .tss-wrap .dash-subtitle{font-size:.78rem}
}

/* ─── Móvil (hasta 600px): 2 cards por fila, legibles ──────── */
@media(max-width:600px){
  .tss-wrap{padding:.5rem .75rem 1rem}
  .tss-wrap .dash-header{margin-top:0;margin-bottom:1rem;padding-top:0}
  .tss-wrap .dash-title{font-size:1.35rem;line-height:1.1}
  .tss-wrap .dash-subtitle{font-size:.72rem;margin-top:.15rem}
  .tss-stats{grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:1rem}
  .tss-stat{padding:.55rem .75rem;border-radius:10px;min-width:0}
  .tss-stat-lbl{font-size:.58rem;letter-spacing:.04em}
  .tss-stat-val{font-size:.95rem}
  .tss-filters{padding:.75rem .85rem;gap:8px;border-radius:10px;flex-direction:column;align-items:stretch}
  .tss-fg{min-width:100%;width:100%;flex:none !important}
  .tss-btn{width:100%;padding:11px}
  .tss-sec-hdr{padding-bottom:8px;margin-bottom:10px;gap:6px}
  .tss-sec-name{font-size:.88rem}
  .tss-sec-cnt{font-size:.66rem;padding:2px 7px}
  .tss-ver-todo{font-size:.76rem}
  /* Grid 2 columnas legibles en móvil */
  .tss-row,.tss-grid{grid-template-columns:repeat(2,1fr) !important;gap:8px}
  .tss-card{border-radius:9px}
  .tss-card-body{padding:8px 10px}
  .tss-card-title{font-size:.78rem;min-height:2.2rem;margin-bottom:6px;line-height:1.3}
  .tss-metric{margin-bottom:2px}
  .tss-mlbl{font-size:.6rem}
  .tss-mval{font-size:.76rem}
  .tss-price{font-size:.72rem;padding:3px 7px;bottom:5px;left:5px}
  .tss-rank{width:22px;height:22px;font-size:.68rem;top:5px;left:5px}
  .tss-discount{font-size:.58rem;padding:2px 5px;top:5px;right:5px}
}

/* ─── Móvil mediano (hasta 480px): tight layout ────────────── */
@media(max-width:480px){
  .tss-wrap{padding:.5rem .6rem 1rem}
  .tss-stats{gap:5px}
  .tss-stat{padding:.5rem .65rem}
  .tss-stat-val{font-size:.9rem}
  .tss-row,.tss-grid{gap:7px}
  .tss-card-body{padding:7px 9px}
  .tss-card-title{font-size:.75rem;min-height:2.1rem}
  .tss-mval{font-size:.73rem}
}

/* ─── Móvil pequeño (hasta 360px): cards mínimas pero legibles ─ */
@media(max-width:360px){
  .tss-wrap{padding:.4rem .5rem 1rem}
  .tss-wrap .dash-title{font-size:1.2rem}
  .tss-row,.tss-grid{gap:6px}
  .tss-card-body{padding:6px 8px}
  .tss-card-title{font-size:.72rem;min-height:2rem}
  .tss-mval{font-size:.7rem}
}

/* ─── Dark mode ─────────────────────────────────────────────── */
body.dark-mode .tss-stat,
body.dark-mode .tss-filters,
body.dark-mode .tss-card{background:#1c1917;border-color:#3c3836}
body.dark-mode .tss-select,
body.dark-mode .tss-input{background:#292524;color:#fafaf9;border-color:#3c3836}
body.dark-mode .tss-card-img,
body.dark-mode .tss-ph{background:#292524}
body.dark-mode .tss-back{background:#1c1917;border-color:#3c3836}
body.dark-mode .tss-sec-hdr,
body.dark-mode .tss-back-bar{border-color:#3c3836}

/* ═══════════════════════════════════════════════════════════════
   AUTH MODAL — vistas nuevas (OTP, forgot, reset, success)
   Pegar al FINAL de public/css/styles.css
   No conflictúa con los estilos existentes de .auth-modal/.auth-field/etc.
   ═══════════════════════════════════════════════════════════════ */

/* Google button */
.btn-google{
  width:100%;display:flex;align-items:center;justify-content:center;gap:.6rem;
  background:#fff;color:var(--text);border:1px solid var(--border2);
  padding:.68rem;border-radius:11px;font-size:.84rem;font-weight:600;
  cursor:pointer;font-family:var(--font);transition:background .22s,border-color .22s,box-shadow .22s;
  letter-spacing:-.01em;margin-bottom:.85rem;
}
.btn-google:hover{background:var(--off);border-color:var(--border);box-shadow:var(--shadow-sm)}
.btn-google:disabled{opacity:.55;cursor:not-allowed}

/* Divisor "o" */
.auth-divider{
  display:flex;align-items:center;gap:.6rem;margin:.25rem 0 .85rem;
  color:var(--muted2);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600;
}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}

/* Éxito verde (para mensajes "código enviado", etc.) */
.auth-success{
  background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;
  font-size:.73rem;padding:.5rem .8rem;border-radius:9px;margin-bottom:.75rem;display:none;
}
.auth-success.show{display:block}

/* Introducción de OTP / forgot / reset */
.otp-intro{
  font-size:.82rem;color:var(--muted);line-height:1.55;margin:0 0 1rem;text-align:center;letter-spacing:-.01em;
}
.otp-intro strong{color:var(--text);font-weight:700;word-break:break-all}

/* Boxes OTP (6 dígitos) */
.otp-boxes{
  display:flex;gap:.45rem;justify-content:center;margin:0 0 1.1rem;
}
.otp-box{
  width:44px;height:52px;text-align:center;font-size:1.3rem;font-weight:700;
  border:1.5px solid var(--border);border-radius:10px;background:var(--white);
  color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  outline:none;transition:border-color .18s,box-shadow .18s,background .18s;
}
.otp-box:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(249,115,22,.12)}
.otp-box.filled{background:var(--orange-light);border-color:var(--orange)}
@media (max-width:420px){
  .otp-box{width:38px;height:46px;font-size:1.1rem}
  .otp-boxes{gap:.3rem}
}

/* Check animado de éxito */
.success-check{
  width:72px;height:72px;margin:.5rem auto;
  animation:successPop .5s cubic-bezier(.34,1.56,.64,1);
}
.success-check svg{width:100%;height:100%}
.success-check circle{stroke-dasharray:151;stroke-dashoffset:151;animation:drawCircle .5s ease forwards}
.success-check path{stroke-dasharray:60;stroke-dashoffset:60;animation:drawCheck .35s .45s ease forwards}
@keyframes drawCircle{to{stroke-dashoffset:0}}
@keyframes drawCheck{to{stroke-dashoffset:0}}
@keyframes successPop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}

/* Dark mode: OTP boxes + Google button */
body.dark-mode .btn-google{background:#1c1917;color:#fafaf9;border-color:#3c3836}
body.dark-mode .btn-google:hover{background:#292524}
body.dark-mode .otp-box{background:#1c1917;color:#fafaf9;border-color:#3c3836}
body.dark-mode .otp-box.filled{background:rgba(249,115,22,.15);border-color:var(--orange)}
body.dark-mode .auth-divider{color:#a8a29e}
body.dark-mode .auth-success{background:rgba(22,163,74,.12);border-color:rgba(22,163,74,.35);color:#86efac}

/* ═══════════════════════════════════════════════════════════════════════
   SPLASH SCREEN — Overlay profesional login/logout
   Totalmente responsive (PC + tablet + móvil)
   ═══════════════════════════════════════════════════════════════════════ */
.splash-overlay{
  position:fixed;inset:0;z-index:9999;
  background:radial-gradient(ellipse at center,#1c1917 0%,#0a0908 70%);
  display:none;align-items:center;justify-content:center;
  opacity:0;transition:opacity .35s ease;
  padding:1rem;box-sizing:border-box;overflow:hidden
}
.splash-overlay.open{display:flex;opacity:1}
.splash-content{
  position:relative;z-index:10;text-align:center;
  opacity:0;transform:scale(.95);
  transition:all .5s cubic-bezier(.34,1.3,.5,1);
  max-width:95vw
}
.splash-overlay.open .splash-content{opacity:1;transform:scale(1)}
.splash-logo{
  display:inline-flex;align-items:center;gap:18px;
  margin-bottom:36px
}
.splash-logo-mark{
  width:68px;height:68px;border-radius:18px;
  background:linear-gradient(135deg,#fb923c 0%,#ea580c 100%);
  display:flex;align-items:center;justify-content:center;
  position:relative;flex-shrink:0;
  box-shadow:0 20px 48px -10px rgba(249,115,22,.55),0 0 0 1px rgba(255,255,255,.08) inset
}
.splash-bolt{
  font-size:30px;filter:brightness(0) invert(1);
  display:inline-block;transform-origin:center;
  animation:splash-bolt 1.8s ease-in-out infinite
}
.splash-ai-badge{
  position:absolute;top:-7px;right:-7px;
  background:#0a0908;color:#fb923c;font-size:9px;font-weight:900;
  letter-spacing:.08em;padding:3px 7px;border-radius:7px;
  border:1.5px solid #fb923c
}
.splash-ring{
  position:absolute;inset:-8px;border-radius:22px;
  border:1.5px solid rgba(249,115,22,.4);pointer-events:none;
  animation:splash-ring 2s ease-out infinite
}
.splash-ring-2{
  inset:-14px;border-radius:26px;
  border-width:1px;border-color:rgba(249,115,22,.2);
  animation-delay:.7s
}
.splash-logo-text{text-align:left}
.splash-logo-name{
  display:block;font-size:32px;font-weight:800;
  letter-spacing:-.03em;color:white;line-height:1;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif
}
.splash-logo-accent{
  background:linear-gradient(90deg,#fb923c,#ea580c);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text
}
.splash-logo-sub{
  display:block;font-size:10px;font-weight:700;
  letter-spacing:.26em;color:#78716c;margin-top:6px
}
.splash-status{
  margin-bottom:26px;display:flex;align-items:center;
  justify-content:center;gap:12px;flex-wrap:nowrap
}
.splash-spinner{
  width:16px;height:16px;flex-shrink:0;
  border:2px solid rgba(249,115,22,.2);
  border-top-color:#fb923c;border-radius:50%;
  animation:splash-spin .8s linear infinite
}
.splash-msg{
  font-size:15px;font-weight:600;color:#e7e5e4;
  font-family:'Inter','Plus Jakarta Sans',system-ui,sans-serif;
  letter-spacing:-.01em;text-align:left;
  min-width:200px;transition:opacity .25s ease
}
.splash-bar{
  width:280px;max-width:80vw;height:3px;
  background:rgba(255,255,255,.06);border-radius:100px;
  overflow:hidden;margin:0 auto
}
.splash-bar-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,#fb923c,#ea580c);
  border-radius:100px;
  transition:width .6s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 10px rgba(249,115,22,.5)
}
.splash-particles{
  position:absolute;inset:0;pointer-events:none;
  z-index:1;overflow:hidden
}
.splash-particles span{
  position:absolute;bottom:-10px;
  width:4px;height:4px;border-radius:50%;
  background:#fb923c;opacity:0;
  box-shadow:0 0 6px #fb923c;
  animation:splash-float 3s ease-out infinite
}
.splash-particles span:nth-child(1){left:15%;--dx:-30px;animation-delay:0s}
.splash-particles span:nth-child(2){left:25%;--dx:20px;animation-delay:.3s}
.splash-particles span:nth-child(3){left:35%;--dx:-15px;animation-delay:.7s}
.splash-particles span:nth-child(4){left:45%;--dx:35px;animation-delay:1.1s}
.splash-particles span:nth-child(5){left:55%;--dx:-25px;animation-delay:.5s}
.splash-particles span:nth-child(6){left:65%;--dx:18px;animation-delay:1.5s}
.splash-particles span:nth-child(7){left:75%;--dx:-40px;animation-delay:.9s}
.splash-particles span:nth-child(8){left:85%;--dx:28px;animation-delay:1.8s}
.splash-particles span:nth-child(9){left:10%;--dx:45px;animation-delay:2.2s}
.splash-particles span:nth-child(10){left:90%;--dx:-35px;animation-delay:1.3s}

@keyframes splash-spin{to{transform:rotate(360deg)}}
@keyframes splash-bolt{
  0%,100%{transform:rotate(0)}
  15%{transform:rotate(-12deg)}
  30%{transform:rotate(8deg)}
  45%{transform:rotate(-4deg)}
  60%{transform:rotate(2deg)}
  75%{transform:rotate(0)}
}
@keyframes splash-ring{
  0%{transform:scale(1);opacity:.6}
  100%{transform:scale(1.5);opacity:0}
}
@keyframes splash-float{
  0%,100%{transform:translateY(0) translateX(0);opacity:0}
  20%{opacity:1}
  80%{opacity:1}
  100%{transform:translateY(-120px) translateX(var(--dx,0));opacity:0}
}

/* ─── Tablet (hasta 768px) ──────────────────────────────────────── */
@media(max-width:768px){
  .splash-logo{gap:14px;margin-bottom:28px}
  .splash-logo-mark{width:56px;height:56px;border-radius:15px}
  .splash-bolt{font-size:25px}
  .splash-ai-badge{font-size:8px;padding:2px 6px}
  .splash-logo-name{font-size:26px}
  .splash-logo-sub{font-size:9px;letter-spacing:.22em}
  .splash-msg{font-size:14px;min-width:auto}
  .splash-bar{width:240px}
}
/* ─── Móvil (hasta 480px) ───────────────────────────────────────── */
@media(max-width:480px){
  .splash-logo{gap:12px;margin-bottom:24px;flex-direction:row}
  .splash-logo-mark{width:48px;height:48px;border-radius:13px}
  .splash-bolt{font-size:21px}
  .splash-ai-badge{font-size:7px;padding:2px 5px;top:-5px;right:-5px}
  .splash-logo-name{font-size:22px}
  .splash-logo-sub{font-size:8px;letter-spacing:.2em;margin-top:4px}
  .splash-status{margin-bottom:22px;gap:10px}
  .splash-spinner{width:14px;height:14px}
  .splash-msg{font-size:13px}
  .splash-bar{width:85vw;max-width:260px}
  .splash-particles span{width:3px;height:3px}
}
/* ─── Móvil pequeño (hasta 360px) ──────────────────────────────── */
@media(max-width:360px){
  .splash-logo-mark{width:44px;height:44px}
  .splash-bolt{font-size:19px}
  .splash-logo-name{font-size:20px}
  .splash-msg{font-size:12px}
}
/* ─── Accesibilidad: reduced motion ─────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .splash-bolt,.splash-ring,.splash-particles span{animation:none!important}
  .splash-spinner{animation-duration:1.5s}
  .splash-content{transition:opacity .3s ease}
}
/* ============================================================================
   ECOM LAND VISION · Agregar al final de public/css/styles.css
   ============================================================================ */

/* -------------------------------------------------------------------------- KEYFRAMES */
@keyframes vision-pulse      { 0%,100%{opacity:.45} 50%{opacity:1} }
@keyframes vision-scan       { 0%{transform:translateY(-100%)} 100%{transform:translateY(1200%)} }
@keyframes vision-shimmer    { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes vision-radar-dash { to{stroke-dashoffset:-20} }
@keyframes vision-toast-in   { from{opacity:0;transform:translateY(8px) translateX(-50%)} to{opacity:1;transform:translateY(0) translateX(-50%)} }

/* -------------------------------------------------------------------------- CONTENEDOR */
.vision-container {
  padding: 28px 32px 48px;
  color: #fff;
  max-width: 1100px;
}

/* -------------------------------------------------------------------------- HEADER INICIAL */
.vision-header { margin-bottom: 28px; }
.vision-header-badges { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.vision-title { font-size:26px; font-weight:700; color:#fff; letter-spacing:-.4px; margin:0 0 8px; }
.vision-title span { color:#EF9F27; }
.vision-subtitle { font-size:14px; color:rgba(255,255,255,.5); margin:0; line-height:1.55; }

/* -------------------------------------------------------------------------- BADGES */
.vision-badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:10px; font-weight:600; padding:4px 11px;
  border-radius:20px; letter-spacing:.8px;
}
.vision-badge-purple { background:rgba(127,119,221,.15); border:1px solid rgba(127,119,221,.3); color:#CECBF6; }
.vision-badge-green  { background:rgba(29,158,117,.15);  border:1px solid rgba(29,158,117,.3);  color:#5DCAA5; }
.vision-badge-subtle { font-size:11px; color:rgba(255,255,255,.4); padding:4px 0; }
.vision-pulse-dot {
  width:6px; height:6px; border-radius:50%; background:#7F77DD;
  animation:vision-pulse 2.5s ease-in-out infinite; flex-shrink:0;
}

/* -------------------------------------------------------------------------- INPUT CARD */
.vision-input-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  border-radius:14px; padding:18px 20px; margin-bottom:6px;
}
.vision-input-wrapper {
  display:flex; align-items:center; gap:10px;
  background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.1);
  border-radius:10px; padding:0 6px 0 14px; transition:border-color .2s;
}
.vision-input-wrapper:focus-within { border-color:rgba(239,159,39,.55); }
.vision-input-icon { color:rgba(255,255,255,.3); flex-shrink:0; }
.vision-url-input {
  flex:1; background:transparent; border:none; outline:none;
  color:#fff; font-size:14px; padding:13px 0;
  font-family:var(--font-mono, monospace); min-width:0;
}
.vision-url-input::placeholder { color:rgba(255,255,255,.25); }
.vision-analyze-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:#EF9F27; color:#1a1008; border:none; border-radius:8px;
  padding:10px 20px; font-size:13px; font-weight:700;
  cursor:pointer; transition:background .2s,transform .15s; flex-shrink:0;
}
.vision-analyze-btn:hover   { background:#FAC775; }
.vision-analyze-btn:active  { transform:scale(.98); }
.vision-analyze-btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.vision-btn-icon { flex-shrink:0; }
.vision-input-hint { font-size:11.5px; color:rgba(255,255,255,.35); margin-top:10px; padding:0 4px; }

/* -------------------------------------------------------------------------- LOADING */
.vision-loading {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-radius:16px; padding:40px; text-align:center; margin-top:14px;
}
.vision-loading-scanner {
  width:48px; height:48px; border-radius:50%;
  border:3px solid rgba(255,255,255,.08);
  border-top-color:#EF9F27;
  animation:vision-spin 0.9s linear infinite;
  margin:0 auto 20px;
}
@keyframes vision-spin { to{transform:rotate(360deg)} }
.vision-loading-url {
  font-family:var(--font-mono,monospace); font-size:12px;
  color:rgba(255,255,255,.4); margin-bottom:20px; word-break:break-all;
}
.vision-loading-steps { display:flex; flex-direction:column; gap:8px; align-items:flex-start; display:inline-flex; }
.vision-loading-step {
  display:flex; align-items:center; gap:10px;
  font-size:13px; color:rgba(255,255,255,.55);
}
.vision-step-dot {
  width:7px; height:7px; border-radius:50%; background:#EF9F27;
  animation:vision-pulse 1.8s ease-in-out infinite; flex-shrink:0;
}

/* -------------------------------------------------------------------------- ERROR */
.vision-error {
  background:rgba(226,75,74,.06); border:1px solid rgba(226,75,74,.25);
  border-radius:14px; padding:36px; text-align:center; margin-top:14px;
}
.vision-error-icon { color:#E24B4A; margin-bottom:12px; }
.vision-error-title { font-size:16px; font-weight:600; color:#F09595; margin-bottom:6px; }
.vision-error-message { font-size:13px; color:rgba(255,255,255,.5); }

/* -------------------------------------------------------------------------- CARD BASE */
.vision-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:24px; margin-bottom:14px;
  position:relative; overflow:hidden;
  transition:border-color .25s;
}
.vision-card:hover { border-color:rgba(255,255,255,.13); }

/* líneas de color en la parte superior de cada card */
.vision-top-line {
  position:absolute; top:0; left:0; right:0; height:1px;
}
.vision-top-line-red     { background:linear-gradient(90deg,transparent,#E24B4A,transparent); }
.vision-top-line-orange  { background:linear-gradient(90deg,transparent,#EF9F27,transparent); }
.vision-top-line-green   { background:linear-gradient(90deg,transparent,#1D9E75,transparent); }
.vision-top-line-purple  { background:linear-gradient(90deg,transparent,#7F77DD,transparent); }
.vision-top-line-lavender{ background:linear-gradient(90deg,transparent,#AFA9EC,transparent); }
.vision-top-line-salmon  { background:linear-gradient(90deg,transparent,#D85A30,transparent); }

/* -------------------------------------------------------------------------- LABELS Y TÍTULOS (compartidos) */
.vision-section-label {
  font-size:10px; color:rgba(255,255,255,.4);
  letter-spacing:2px; font-weight:600; margin-bottom:4px;
}
.vision-section-title {
  font-size:17px; font-weight:600; color:#fff; margin-bottom:4px;
}
.vision-section-sub {
  font-size:12.5px; color:rgba(255,255,255,.5); line-height:1.5;
}
.vision-section-header-spaced { margin-bottom:20px; }
.vision-green { color:#5DCAA5; }

/* -------------------------------------------------------------------------- REPORT HEADER */
.vision-report-header {
  position:relative; background:linear-gradient(135deg,rgba(239,159,39,.08),rgba(163,45,45,.04) 50%,rgba(127,119,221,.08));
  border:1px solid rgba(239,159,39,.2); border-radius:20px;
  padding:32px; margin-bottom:14px; overflow:hidden;
}
.vision-report-header-glow-1 {
  position:absolute; top:-60%; right:-10%;
  width:500px; height:500px; pointer-events:none;
  background:radial-gradient(circle,rgba(239,159,39,.12),transparent 70%);
}
.vision-report-header-glow-2 {
  position:absolute; bottom:-40%; left:-10%;
  width:400px; height:400px; pointer-events:none;
  background:radial-gradient(circle,rgba(127,119,221,.1),transparent 70%);
}
.vision-report-header-top-line {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:600px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(239,159,39,.6),transparent);
}
.vision-report-header-content {
  position:relative; display:flex;
  justify-content:space-between; align-items:flex-start; gap:24px;
}
.vision-report-header-main { flex:1; }
.vision-report-badges { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.vision-report-label  { font-size:11px; color:rgba(255,255,255,.4); letter-spacing:1.5px; margin-bottom:6px; }
.vision-report-url    { font-size:22px; font-weight:500; color:#fff; margin-bottom:6px; font-family:var(--font-mono,monospace); }
.vision-report-path   { font-size:11.5px; color:rgba(255,255,255,.45); margin-bottom:24px; }

/* KPIs */
.vision-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.vision-kpi  { padding-left:14px; }
.vision-kpi-red    { border-left:2px solid #E24B4A; }
.vision-kpi-green  { border-left:2px solid #1D9E75; }
.vision-kpi-orange { border-left:2px solid #EF9F27; }
.vision-kpi-label  { font-size:10px; color:rgba(255,255,255,.4); letter-spacing:1.5px; margin-bottom:6px; }
.vision-kpi-value  { font-size:26px; font-weight:500; font-variant-numeric:tabular-nums; font-family:var(--font-mono,monospace); line-height:1; }
.vision-kpi-unit   { font-size:14px; opacity:.6; }
.vision-kpi-sub    { font-size:10.5px; color:rgba(255,255,255,.4); margin-top:2px; }
.vision-kpi-red   .vision-kpi-value { color:#F09595; }
.vision-kpi-green .vision-kpi-value { color:#5DCAA5; }
.vision-kpi-orange.vision-kpi-value { color:#FAC775; }

/* Score ring */
.vision-score-ring-wrapper { position:relative; width:160px; height:160px; flex-shrink:0; }
.vision-grade-badge {
  position:absolute; bottom:-10px; left:50%; transform:translateX(-50%);
  color:#fff; font-size:11px; padding:5px 16px; border-radius:20px;
  font-weight:600; letter-spacing:1.5px; white-space:nowrap;
  box-shadow:0 6px 16px rgba(239,159,39,.45);
}

/* -------------------------------------------------------------------------- VIEW TOGGLE */
.vision-view-toggle-card {
  display:flex; justify-content:space-between; align-items:center;
  gap:20px; flex-wrap:wrap; padding:18px 24px;
}
.vision-view-toggle-label { font-size:10px; color:rgba(255,255,255,.4); letter-spacing:2px; margin-bottom:4px; }
.vision-view-toggle-title { font-size:15px; font-weight:600; color:#fff; margin-bottom:2px; }
.vision-view-toggle-sub   { font-size:12px; color:rgba(255,255,255,.45); }
.vision-view-toggle-buttons { display:flex; gap:8px; flex-shrink:0; }
.vision-view-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px; border-radius:10px; cursor:pointer;
  font-size:12.5px; font-weight:500; transition:all .2s;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); color:rgba(255,255,255,.6);
}
.vision-view-btn:hover { background:rgba(255,255,255,.08); color:#fff; }
.vision-view-btn.active { background:rgba(239,159,39,.18); border-color:rgba(239,159,39,.45); color:#EF9F27; }
.vision-view-badge {
  font-size:9.5px; background:rgba(255,255,255,.08);
  padding:2px 7px; border-radius:6px; font-family:var(--font-mono,monospace);
}

/* -------------------------------------------------------------------------- TOP 3 PROBLEMAS */
.vision-top-issues         { padding:22px 24px; }
.vision-top-issues-header  { display:flex; align-items:flex-start; gap:14px; margin-bottom:18px; }
.vision-top-issues-icon    {
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,#D85A30,#E24B4A);
  display:flex; align-items:center; justify-content:center;
}
.vision-top-issues-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }

.vision-issue-card {
  border-radius:12px; padding:16px;
  transition:transform .2s;
}
.vision-issue-card:hover { transform:translateY(-2px); }
.vision-issue-critical { background:rgba(226,75,74,.08); border:1px solid rgba(226,75,74,.2); }
.vision-issue-warning  { background:rgba(239,159,39,.08); border:1px solid rgba(239,159,39,.2); }

.vision-issue-header   { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.vision-issue-number   {
  width:28px; height:28px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; font-family:var(--font-mono,monospace);
}
.vision-issue-critical .vision-issue-number { background:rgba(226,75,74,.25); color:#F09595; }
.vision-issue-warning  .vision-issue-number { background:rgba(239,159,39,.25); color:#FAC775; }

.vision-issue-category { font-size:10px; letter-spacing:1px; font-weight:600; }
.vision-issue-critical .vision-issue-category { color:#F09595; }
.vision-issue-warning  .vision-issue-category { color:#FAC775; }

.vision-issue-title { font-size:13.5px; font-weight:600; color:#fff; margin-bottom:5px; line-height:1.35; }
.vision-issue-desc  { font-size:12px; color:rgba(255,255,255,.55); line-height:1.5; }

/* -------------------------------------------------------------------------- 4 CATEGORÍAS DE SALUD */
.vision-health-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
.vision-health-card {
  border-radius:14px; padding:18px; text-align:center; position:relative;
  transition:transform .2s;
}
.vision-health-card:hover { transform:translateY(-2px); }
.vision-health-critical { background:rgba(226,75,74,.07); border:1px solid rgba(226,75,74,.18); }
.vision-health-warning  { background:rgba(239,159,39,.07); border:1px solid rgba(239,159,39,.18); }
.vision-health-excellent{ background:rgba(29,158,117,.07); border:1px solid rgba(29,158,117,.18); }

.vision-health-badge {
  position:absolute; top:12px; right:12px;
  font-size:9px; font-weight:700; padding:3px 8px; border-radius:6px; letter-spacing:.8px;
}
.vision-health-badge-critical { background:rgba(226,75,74,.2); color:#F09595; }
.vision-health-badge-warning  { background:rgba(239,159,39,.2); color:#FAC775; }
.vision-health-badge-excellent{ background:rgba(29,158,117,.2); color:#5DCAA5; }

.vision-health-ring  { display:block; margin:0 auto 12px; width:90px; height:90px; }
.vision-health-title { font-size:13.5px; font-weight:600; color:#fff; margin-bottom:4px; }
.vision-health-desc  { font-size:11px; color:rgba(255,255,255,.45); line-height:1.45; margin-bottom:12px; }
.vision-health-fix   { background:rgba(0,0,0,.25); border-radius:8px; padding:10px 12px; text-align:left; }
.vision-health-fix-label { font-size:9.5px; font-weight:700; letter-spacing:.8px; margin-bottom:4px; }
.vision-health-fix-label-critical { color:#F09595; }
.vision-health-fix-label-warning  { color:#FAC775; }
.vision-health-fix-label-excellent{ color:#5DCAA5; }
.vision-health-fix-text { font-size:11px; color:rgba(255,255,255,.6); line-height:1.5; }

/* -------------------------------------------------------------------------- FILMSTRIP */
.vision-filmstrip-card   { padding:24px; }
.vision-filmstrip-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.vision-filmstrip-legend { display:flex; flex-direction:column; gap:6px; }
.vision-legend-item      { display:flex; align-items:center; gap:6px; font-size:11px; color:rgba(255,255,255,.5); }
.vision-legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.vision-legend-dot-green  { background:#1D9E75; }
.vision-legend-dot-orange { background:#EF9F27; }

.vision-filmstrip-grid  { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-bottom:16px; }
.vision-filmstrip-item  { display:flex; flex-direction:column; align-items:center; gap:5px; }
.vision-filmstrip-frame {
  width:100%; aspect-ratio:9/16; background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.09); border-radius:8px;
  overflow:hidden; position:relative;
}
.vision-filmstrip-last .vision-filmstrip-frame { border-color:rgba(29,158,117,.5); box-shadow:0 0 12px rgba(29,158,117,.2); }
.vision-filmstrip-frame img { width:100%; height:100%; object-fit:cover; }
.vision-filmstrip-empty { width:100%; height:100%; background:rgba(255,255,255,.03); }
.vision-filmstrip-time {
  position:absolute; bottom:4px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.65); color:rgba(255,255,255,.8);
  font-size:9px; padding:2px 6px; border-radius:4px;
  font-family:var(--font-mono,monospace); white-space:nowrap;
}
.vision-filmstrip-time-green { color:#5DCAA5; }
.vision-filmstrip-desc { font-size:10px; color:rgba(255,255,255,.45); text-align:center; }
.vision-filmstrip-desc-green { color:#5DCAA5; }

.vision-filmstrip-verdict {
  background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.07);
  border-radius:10px; padding:14px 16px;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.vision-filmstrip-verdict-title { font-size:13.5px; font-weight:500; color:#fff; margin-bottom:4px; }
.vision-filmstrip-verdict-time  { color:#F09595; font-weight:700; }
.vision-filmstrip-verdict-sub   { font-size:12px; color:rgba(255,255,255,.5); line-height:1.5; }
.vision-filmstrip-verdict-badge {
  flex-shrink:0; background:rgba(226,75,74,.18); border:1px solid rgba(226,75,74,.3);
  color:#F09595; font-size:12px; font-weight:700; padding:7px 14px; border-radius:8px;
  font-family:var(--font-mono,monospace); white-space:nowrap;
}

/* -------------------------------------------------------------------------- 5 INDICADORES DE VELOCIDAD */
.vision-speed-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
}
.vision-speed-card {
  border-radius:12px; padding:16px;
  transition:border-color .2s;
}
.vision-speed-card:hover { border-color:rgba(255,255,255,.15); }
.vision-speed-full   { grid-column:1 / -1; }
.vision-speed-critical{ background:rgba(226,75,74,.07); border:1px solid rgba(226,75,74,.18); }
.vision-speed-warning { background:rgba(239,159,39,.07); border:1px solid rgba(239,159,39,.18); }
.vision-speed-excellent{background:rgba(29,158,117,.07); border:1px solid rgba(29,158,117,.18); }

.vision-speed-top   { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }
.vision-speed-info  { flex:1; }
.vision-speed-title { font-size:13.5px; font-weight:600; color:#fff; margin-bottom:3px; }
.vision-speed-desc  { font-size:11.5px; color:rgba(255,255,255,.45); line-height:1.45; }
.vision-speed-right { text-align:right; flex-shrink:0; }
.vision-speed-value { font-size:20px; font-weight:600; color:#fff; font-family:var(--font-mono,monospace); line-height:1.1; }
.vision-speed-badge { font-size:9px; font-weight:700; padding:3px 8px; border-radius:6px; letter-spacing:.8px; margin-top:4px; display:inline-block; }
.vision-speed-badge-critical { background:rgba(226,75,74,.2); color:#F09595; }
.vision-speed-badge-warning  { background:rgba(239,159,39,.2); color:#FAC775; }
.vision-speed-badge-excellent{ background:rgba(29,158,117,.2); color:#5DCAA5; }

.vision-speed-bar { height:5px; background:rgba(255,255,255,.06); border-radius:3px; overflow:hidden; margin-bottom:10px; }
.vision-speed-bar-fill        { height:100%; border-radius:3px; }
.vision-speed-bar-critical    { background:linear-gradient(90deg,#D85A30,#E24B4A); box-shadow:0 0 8px rgba(226,75,74,.4); }
.vision-speed-bar-warning     { background:linear-gradient(90deg,#BA7517,#EF9F27); }
.vision-speed-bar-excellent   { background:linear-gradient(90deg,#0F6E56,#1D9E75); }

.vision-speed-fix { background:rgba(0,0,0,.25); border-radius:8px; padding:10px 12px; }
.vision-speed-fix-label { font-size:9.5px; color:#EF9F27; font-weight:700; letter-spacing:.8px; margin-bottom:4px; }
.vision-speed-fix-text  { font-size:11.5px; color:rgba(255,255,255,.65); line-height:1.5; }
.vision-speed-ideal     { font-size:11.5px; color:rgba(255,255,255,.55); }

/* -------------------------------------------------------------------------- OPORTUNIDADES */
.vision-opportunities-header {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:16px; margin-bottom:18px; flex-wrap:wrap;
}
.vision-savings-badge {
  background:rgba(239,159,39,.12); border:1px solid rgba(239,159,39,.25);
  border-radius:10px; padding:8px 14px; text-align:center; flex-shrink:0;
}
.vision-savings-label { font-size:9px; color:rgba(255,255,255,.45); letter-spacing:1px; margin-bottom:2px; }
.vision-savings-value { font-size:18px; font-weight:700; color:#EF9F27; font-family:var(--font-mono,monospace); }

.vision-opportunities-list { display:flex; flex-direction:column; gap:8px; }
.vision-opportunity {
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:start; gap:10px;
  padding:12px 14px; border-radius:10px;
  grid-template-rows: auto auto;
}
.vision-opportunity-critical{ background:rgba(226,75,74,.07); border:1px solid rgba(226,75,74,.15); }
.vision-opportunity-warning { background:rgba(239,159,39,.07); border:1px solid rgba(239,159,39,.15); }

.vision-opportunity-main    { display:flex; align-items:center; gap:10px; grid-column:1/2; }
.vision-opportunity-icon    { font-size:10px; }
.vision-opportunity-critical .vision-opportunity-icon { color:#E24B4A; }
.vision-opportunity-warning  .vision-opportunity-icon { color:#EF9F27; }
.vision-opportunity-title   { font-size:13px; font-weight:600; color:#fff; }
.vision-opportunity-savings {
  font-size:12px; font-weight:700; font-family:var(--font-mono,monospace);
  grid-column:3/4; grid-row:1/2; white-space:nowrap; align-self:center;
}
.vision-opportunity-critical .vision-opportunity-savings { color:#F09595; }
.vision-opportunity-warning  .vision-opportunity-savings { color:#FAC775; }
.vision-opportunity-desc    { font-size:11.5px; color:rgba(255,255,255,.5); line-height:1.5; grid-column:1/-1; padding-left:20px; }

/* -------------------------------------------------------------------------- ARCHIVOS PESADOS */
.vision-heavy-list { display:flex; flex-direction:column; gap:8px; }
.vision-heavy-item {
  display:flex; align-items:center; gap:14px;
  padding:12px 14px; border-radius:10px;
}
.vision-heavy-critical{ background:rgba(226,75,74,.07); border:1px solid rgba(226,75,74,.15); }
.vision-heavy-warning { background:rgba(239,159,39,.07); border:1px solid rgba(239,159,39,.15); }

.vision-heavy-icon {
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
}
.vision-heavy-info  { flex:1; min-width:0; }
.vision-heavy-name  { font-size:12.5px; font-weight:600; color:#fff; margin-bottom:3px; font-family:var(--font-mono,monospace); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vision-heavy-desc  { font-size:11px; color:rgba(255,255,255,.45); }
.vision-heavy-right { text-align:right; flex-shrink:0; }
.vision-heavy-size  { font-size:14px; font-weight:700; color:#F09595; font-family:var(--font-mono,monospace); }
.vision-heavy-savings{ font-size:10.5px; color:rgba(255,255,255,.4); margin-top:2px; }

/* -------------------------------------------------------------------------- RADAR HEXAGONAL */
.vision-radar-card {
  background:radial-gradient(ellipse at center top,rgba(127,119,221,.06),transparent 60%), rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08); border-radius:20px;
  padding:28px 32px; margin-bottom:14px; position:relative; overflow:hidden;
}
.vision-radar-top-line {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:500px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(127,119,221,.6),transparent);
}
.vision-radar-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; flex-wrap:wrap; gap:16px; }
.vision-radar-title-block { display:flex; align-items:flex-start; gap:10px; }
.vision-radar-accent { width:4px; height:40px; background:linear-gradient(180deg,#EF9F27,#D85A30); border-radius:2px; flex-shrink:0; margin-top:2px; }
.vision-radar-sub { font-size:12.5px; color:rgba(255,255,255,.5); max-width:400px; }

.vision-radar-legend { display:flex; flex-direction:column; gap:8px; }
.vision-radar-legend-item { display:flex; align-items:center; gap:10px; padding:8px 14px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:10px; }
.vision-radar-legend-swatch { width:24px; height:8px; border-radius:2px; flex-shrink:0; }
.vision-radar-legend-swatch-aurora { background:linear-gradient(90deg,rgba(175,169,236,.4),#AFA9EC); }
.vision-radar-legend-swatch-dashed { height:0; border-top:1.5px dashed #5DCAA5; }
.vision-radar-legend-title { font-size:11px; color:#fff; font-weight:500; }
.vision-radar-legend-sub   { font-size:9px; color:rgba(255,255,255,.4); letter-spacing:.5px; }

.vision-radar-svg-wrapper { margin:8px 0; }
.vision-radar-potential   { animation:vision-radar-dash 8s linear infinite; }

.vision-radar-summary {
  display:flex; align-items:center; justify-content:center; gap:0;
  background:rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.07);
  border-radius:12px; padding:14px 0; margin-top:4px;
}
.vision-radar-summary-cell       { text-align:center; padding:0 28px; }
.vision-radar-summary-arrow      { padding:0 8px; opacity:.5; }
.vision-radar-summary-label      { font-size:9px; color:rgba(255,255,255,.4); letter-spacing:1.5px; margin-bottom:4px; font-weight:600; }
.vision-radar-summary-label-gap  { color:rgba(239,159,39,.7); }
.vision-radar-summary-value      { font-size:22px; font-weight:500; font-family:var(--font-mono,monospace); }
.vision-radar-summary-value span { font-size:11px; font-weight:400; color:rgba(255,255,255,.4); margin-left:4px; }
.vision-radar-summary-lavender   { color:#CECBF6; }
.vision-radar-summary-green      { color:#5DCAA5; }
.vision-radar-summary-orange     { color:#EF9F27; }
.vision-radar-summary-highlight  { border-left:1px solid rgba(255,255,255,.08); padding-left:28px; }

/* -------------------------------------------------------------------------- ECOM LAND VISION (análisis) */
.vision-analysis        { padding:24px; }
.vision-analysis-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.vision-analysis-header-main { display:flex; align-items:center; gap:14px; }
.vision-analysis-icon {
  width:40px; height:40px; border-radius:11px; flex-shrink:0;
  background:linear-gradient(135deg,#7F77DD,#534AB7);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(127,119,221,.4);
}
.vision-analysis-stats { display:flex; gap:6px; flex-wrap:wrap; }
.vision-stat-chip {
  font-size:10px; color:rgba(255,255,255,.5); padding:4px 12px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px;
}

.vision-analysis-findings  { display:flex; flex-direction:column; gap:6px; }
.vision-finding {
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 14px; border-radius:10px;
  transition:background .2s;
}
.vision-finding:hover { background:rgba(255,255,255,.03); }
.vision-finding-positive { border-left:2px solid #1D9E75; background:rgba(29,158,117,.05); }
.vision-finding-warning  { border-left:2px solid #EF9F27; background:rgba(239,159,39,.05); }
.vision-finding-critical { border-left:2px solid #E24B4A; background:rgba(226,75,74,.05); }

.vision-finding-icon {
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; margin-top:1px;
}
.vision-finding-positive .vision-finding-icon { background:rgba(29,158,117,.2); color:#5DCAA5; }
.vision-finding-warning  .vision-finding-icon { background:rgba(239,159,39,.2); color:#FAC775; }
.vision-finding-critical .vision-finding-icon { background:rgba(226,75,74,.2); color:#F09595; }

.vision-finding-title { font-size:13px; font-weight:600; color:#fff; margin-bottom:3px; }
.vision-finding-desc  { font-size:11.5px; color:rgba(255,255,255,.55); line-height:1.5; }

/* -------------------------------------------------------------------------- ESTRUCTURA 10 SECCIONES */
.vision-structure       { padding:24px; }
.vision-structure-header{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; flex-wrap:wrap; gap:10px; }

.vision-structure-progress-bar {
  height:8px; background:rgba(255,255,255,.06); border-radius:4px;
  overflow:hidden; margin-bottom:4px; display:flex;
}
.vision-structure-progress-fill    { background:linear-gradient(90deg,#0F6E56,#1D9E75); border-radius:4px 0 0 4px; }
.vision-structure-progress-missing { background:repeating-linear-gradient(90deg,rgba(226,75,74,.25) 0 6px,transparent 6px 10px); }

.vision-structure-score { font-size:13px; font-weight:500; }
.vision-structure-note  { font-size:11.5px; color:rgba(255,255,255,.45); margin-bottom:16px; }

.vision-structure-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:8px;
}
.vision-struct-item  { border-radius:10px; padding:12px; }
.vision-struct-detected{ background:rgba(29,158,117,.08); border:1px solid rgba(29,158,117,.22); }
.vision-struct-missing { background:rgba(226,75,74,.06); border:1px dashed rgba(226,75,74,.28); }

.vision-struct-icon { font-size:18px; margin-bottom:6px; }
.vision-struct-name { font-size:12px; font-weight:600; color:#fff; margin-bottom:2px; }
.vision-struct-detected .vision-struct-name { color:#9FE1CB; }
.vision-struct-missing  .vision-struct-name { color:#F09595; }
.vision-struct-where { font-size:10px; line-height:1.4; }
.vision-struct-detected .vision-struct-where { color:rgba(93,202,165,.6); }
.vision-struct-missing  .vision-struct-where { color:rgba(240,149,149,.6); }

/* -------------------------------------------------------------------------- DIVISORES */
.vision-divider { display:flex; align-items:center; gap:12px; margin:24px 0 16px; }
.vision-divider-line { flex:1; height:1px; }
.vision-divider-line-purple { background:linear-gradient(90deg,transparent,rgba(127,119,221,.4),transparent); }
.vision-divider-label {
  font-size:10px; font-weight:700; letter-spacing:1.5px;
  padding:4px 12px; border-radius:10px; white-space:nowrap;
}
.vision-divider-label-purple {
  background:rgba(127,119,221,.12); border:1px solid rgba(127,119,221,.25); color:#CECBF6;
}

/* -------------------------------------------------------------------------- PLAN DE ACCIÓN */
.vision-action-plan   { padding:24px; }
.vision-action-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
.vision-action-subtitle{ font-size:12.5px; color:rgba(255,255,255,.5); }
.vision-action-cards  { display:flex; flex-direction:column; gap:14px; }

.vision-action-card {
  border-radius:14px; padding:22px; position:relative;
  transition:transform .2s, border-color .2s;
}
.vision-action-card:hover { transform:translateY(-1px); }
.vision-action-card[class*="critical"]{ background:rgba(226,75,74,.06); border:1px solid rgba(226,75,74,.18); }
.vision-action-card[class*="warning"] { background:rgba(239,159,39,.06); border:1px solid rgba(239,159,39,.18); }

/* borde lateral de color */
.vision-action-top-line-critical {
  position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:14px 0 0 14px;
  background:linear-gradient(180deg,#E24B4A,#D85A30);
}
.vision-action-top-line-warning {
  position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:14px 0 0 14px;
  background:linear-gradient(180deg,#EF9F27,#BA7517);
}

.vision-action-card-header { display:flex; align-items:flex-start; gap:14px; margin-bottom:14px; }
.vision-action-num {
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; font-family:var(--font-mono,monospace);
}
.vision-action-num-critical{ background:rgba(226,75,74,.2); color:#F09595; }
.vision-action-num-warning { background:rgba(239,159,39,.2); color:#FAC775; }

.vision-action-meta  { flex:1; }
.vision-action-title { font-size:15.5px; font-weight:700; color:#fff; margin-bottom:6px; line-height:1.3; }
.vision-action-title-critical{ color:#F09595; }
.vision-action-title-warning { color:#FAC775; }

.vision-action-badges { display:flex; gap:6px; flex-wrap:wrap; }
.vision-action-badge-time {
  font-size:10px; padding:3px 9px; border-radius:6px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.6);
}
.vision-action-badge-impact {
  font-size:10px; padding:3px 9px; border-radius:6px;
  background:rgba(29,158,117,.12); border:1px solid rgba(29,158,117,.25); color:#5DCAA5; font-weight:600;
}

.vision-action-context {
  background:rgba(0,0,0,.25); border-radius:8px; padding:12px 14px;
  margin-bottom:14px; font-size:12.5px; color:rgba(255,255,255,.65); line-height:1.6;
}

.vision-action-steps   { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.vision-action-step-item{ display:flex; align-items:flex-start; gap:10px; }
.vision-action-step-num {
  width:22px; height:22px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:700; background:rgba(239,159,39,.18); color:#EF9F27;
  margin-top:1px;
}
.vision-action-step-text { font-size:12.5px; color:rgba(255,255,255,.75); line-height:1.55; }

/* código CSS */
.vision-code-block  { background:#0d0d10; border:1px solid rgba(255,255,255,.09); border-radius:10px; overflow:hidden; }
.vision-code-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 14px; background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.06);
}
.vision-code-lang { font-size:10px; color:rgba(255,255,255,.4); letter-spacing:1.5px; font-weight:600; font-family:var(--font-mono,monospace); }
.vision-copy-btn {
  font-size:10.5px; color:rgba(255,255,255,.55); background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1); border-radius:6px; padding:4px 10px;
  cursor:pointer; transition:all .2s;
}
.vision-copy-btn:hover { background:rgba(255,255,255,.1); color:#fff; }
.vision-copy-btn-success { background:rgba(29,158,117,.2) !important; color:#5DCAA5 !important; border-color:rgba(29,158,117,.3) !important; }
.vision-code-content {
  display:block; padding:14px 16px; font-size:12px; line-height:1.7;
  color:rgba(255,255,255,.8); font-family:var(--font-mono,monospace);
  overflow-x:auto; margin:0; white-space:pre;
}

/* -------------------------------------------------------------------------- SECCIONES FALTANTES */
.vision-missing-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:14px; }
.vision-missing-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  border-radius:16px; padding:20px; position:relative; overflow:hidden;
  transition:transform .2s, border-color .2s;
}
.vision-missing-card:hover { transform:translateY(-2px); border-color:rgba(127,119,221,.3); }
.vision-missing-card::before {
  content:''; position:absolute; top:-40%; right:-30%;
  width:200px; height:200px; pointer-events:none;
  background:radial-gradient(circle,rgba(127,119,221,.08),transparent);
}

.vision-missing-header      { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:14px; }
.vision-missing-header-left { display:flex; align-items:center; gap:12px; }
.vision-missing-icon-wrap   {
  width:38px; height:38px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  background:linear-gradient(135deg,#7F77DD,#534AB7);
  box-shadow:0 4px 14px rgba(127,119,221,.35);
}
.vision-missing-title { font-size:14px; font-weight:600; color:#fff; margin-bottom:2px; }
.vision-missing-desc  { font-size:11px; color:rgba(255,255,255,.5); }
.vision-missing-impact { font-size:10px; font-weight:700; padding:4px 10px; border-radius:8px; border:1px solid; white-space:nowrap; flex-shrink:0; }
.vision-missing-impact-warning { background:rgba(239,159,39,.15); border-color:rgba(239,159,39,.3); color:#FAC775; }
.vision-missing-impact-critical{ background:rgba(226,75,74,.15); border-color:rgba(226,75,74,.3); color:#F09595; }

.vision-generate-btn {
  width:100%; background:linear-gradient(135deg,#7F77DD,#534AB7);
  color:#fff; border:none; padding:12px; border-radius:10px;
  font-size:12.5px; font-weight:600; display:flex;
  align-items:center; justify-content:center; gap:10px;
  cursor:pointer; box-shadow:0 6px 18px rgba(127,119,221,.3);
  transition:transform .2s, box-shadow .2s;
}
.vision-generate-btn:hover { transform:translateY(-1px); box-shadow:0 10px 26px rgba(127,119,221,.45); }
.vision-generate-time {
  background:rgba(255,255,255,.18); font-size:9.5px;
  padding:2px 7px; border-radius:5px; font-family:var(--font-mono,monospace);
}

/* -------------------------------------------------------------------------- BUNDLE CTA */
.vision-bundle-cta {
  position:relative; background:linear-gradient(135deg,rgba(127,119,221,.18),rgba(239,159,39,.12));
  border:1px solid rgba(127,119,221,.35); border-radius:20px;
  padding:32px; text-align:center; overflow:hidden; margin-bottom:14px;
}
.vision-bundle-glow-1 {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 30% 50%,rgba(127,119,221,.2),transparent 55%);
}
.vision-bundle-glow-2 {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 70% 50%,rgba(239,159,39,.15),transparent 55%);
}
.vision-bundle-content { position:relative; }
.vision-bundle-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  padding:5px 14px; border-radius:20px; margin-bottom:16px;
  font-size:10px; color:rgba(255,255,255,.75); letter-spacing:1.5px;
}
.vision-bundle-title {
  font-size:24px; font-weight:700; color:#fff;
  margin-bottom:10px; letter-spacing:-.3px;
}
.vision-shimmer-text {
  background:linear-gradient(90deg,#fff 0%,#FAC775 50%,#fff 100%);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text;
  color:transparent; animation:vision-shimmer 3.5s linear infinite;
}
.vision-bundle-sub {
  font-size:13px; color:rgba(255,255,255,.6); margin-bottom:24px;
  max-width:500px; margin-left:auto; margin-right:auto; line-height:1.65;
}
.vision-bundle-btn {
  background:linear-gradient(135deg,#7F77DD,#EF9F27);
  color:#fff; border:none; padding:15px 34px; border-radius:12px;
  font-size:14px; font-weight:700; display:inline-flex; align-items:center; gap:12px;
  cursor:pointer; box-shadow:0 10px 28px rgba(127,119,221,.45);
  transition:transform .2s, box-shadow .2s;
}
.vision-bundle-btn:hover { transform:translateY(-2px); box-shadow:0 16px 36px rgba(127,119,221,.55); }

/* -------------------------------------------------------------------------- TOAST */
.vision-toast {
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(8px);
  background:#1e1e24; border:1px solid rgba(255,255,255,.15);
  color:#fff; font-size:13px; padding:10px 20px; border-radius:10px;
  opacity:0; pointer-events:none; z-index:9999; white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.vision-toast-show {
  opacity:1; transform:translateX(-50%) translateY(0);
  animation:vision-toast-in .25s ease forwards;
}

/* -------------------------------------------------------------------------- MÓVIL RESPONSIVO */
@media (max-width: 900px) {
  .vision-container      { padding:20px 18px 40px; }
  .vision-kpis           { grid-template-columns:repeat(2,1fr); }
  .vision-top-issues-grid{ grid-template-columns:1fr; }
  .vision-health-grid    { grid-template-columns:repeat(2,1fr); }
  .vision-filmstrip-grid { grid-template-columns:repeat(3,1fr); }
  .vision-speed-grid     { grid-template-columns:1fr; }
  .vision-speed-full     { grid-column:auto; }
  .vision-missing-grid   { grid-template-columns:1fr; }
  .vision-structure-grid { grid-template-columns:repeat(2,1fr); }
  .vision-report-url     { font-size:16px; }
  .vision-radar-summary  { flex-wrap:wrap; }
}

/* ═══════════════════════════════════════════════════════════════════
   VISION OVERRIDES — bloque único limpio
   ═══════════════════════════════════════════════════════════════════ */

/* Contenedor principal con fondo oscuro propio */
#analisis-view {
  background: var(--white);
  min-height: calc(100vh - 64px);
  color: var(--text);
}
body.dark-mode #analisis-view {
  background: #0A0A0B;
}
#analisis-view.main-view { padding: 0; }
#analisis-view * { box-sizing: border-box; }

/* EMAIL VIEW — fixes permanentes que no dependen de EM.initialized */
#emailsView { overflow: visible !important; height: auto !important; max-height: none !important; }
#emailsView .em-history { overflow: visible !important; height: auto !important; }
#emailsView #em-history-container { overflow: visible !important; height: auto !important; }
.vision-container { padding: 28px 32px 48px !important; }

/* Health cards */
.vision-health-critical { background: rgba(226,75,74,.09) !important; border: 1px solid rgba(226,75,74,.22) !important; }
.vision-health-warning  { background: rgba(239,159,39,.09) !important; border: 1px solid rgba(239,159,39,.22) !important; }
.vision-health-excellent{ background: rgba(29,158,117,.09) !important; border: 1px solid rgba(29,158,117,.18) !important; }

/* Radar: contener el SVG sin cortarlo */
.vision-radar-card {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
.vision-radar-svg-wrapper {
  max-width: 580px;
  margin: 0 auto;
  width: 100%;
}
.vision-radar-svg-wrapper svg {
  width: 100%;
  height: auto;
  display: block;
  max-height: none !important;
}

/* Estructura — clases que usa vision.js */
.vision-structure-pct { text-align: right; flex-shrink: 0; }
.vision-structure-pct-value {
  font-size: 28px; font-weight: 700; color: #EF9F27;
  font-family: var(--font-mono, monospace); line-height: 1;
}
.vision-structure-pct-value span { font-size: 14px; }
.vision-structure-pct-label { font-size: 9px; color: rgba(255,255,255,.4); letter-spacing: 1.5px; margin-top: 2px; }

.vision-structure-bar {
  display: flex; height: 6px; border-radius: 3px;
  overflow: hidden; margin: 14px 0; background: rgba(255,255,255,.06);
}
.vision-structure-bar-done    { background: linear-gradient(90deg,#0F6E56,#1D9E75); min-width: 2px; }
.vision-structure-bar-missing { background: repeating-linear-gradient(90deg,rgba(226,75,74,.3) 0 6px,transparent 6px 10px); }

.vision-structure-grid {
  display: grid !important;
  grid-template-columns: repeat(5,1fr) !important;
  gap: 8px; margin-bottom: 14px;
}
.vision-structure-card {
  border-radius: 10px; padding: 12px 10px; text-align: center;
}
.vision-structure-detected { background: rgba(29,158,117,.08); border: 1px solid rgba(29,158,117,.22); }
.vision-structure-missing  { background: rgba(226,75,74,.06);  border: 1px dashed rgba(226,75,74,.28); }
.vision-structure-icon { font-size: 16px; margin-bottom: 5px; font-weight: 700; }
.vision-structure-detected .vision-structure-icon { color: #5DCAA5; }
.vision-structure-missing  .vision-structure-icon { color: #F09595; }
.vision-structure-name { font-size: 11.5px; font-weight: 600; }
.vision-structure-detected .vision-structure-name { color: #9FE1CB; }
.vision-structure-missing  .vision-structure-name { color: #F09595; }
.vision-structure-insight {
  font-size: 12.5px; color: rgba(255,255,255,.55); line-height: 1.6; margin-top: 8px;
}
.vision-red { color: #F09595; }

/* Findings vacíos */
.vision-analysis-findings:empty::after {
  content: 'Ecom Land Vision leyó la página. Los hallazgos detallados aparecen en el plan de acción.';
  display: block; padding: 14px; color: rgba(255,255,255,.4);
  font-size: 13px; text-align: center; font-style: italic;
}

/* Responsive */
@media (max-width: 900px) {
  .vision-container { padding: 20px 16px 40px !important; }
  .vision-structure-grid { grid-template-columns: repeat(2,1fr) !important; }
  .vision-radar-svg-wrapper { max-width: 100%; }
}
/* ============================================================================

/* ============================================================================
   ECOM LAND VISION · CSS Premium Dashboard
   ============================================================================ */
/* ============================================================================
   ECOM LAND VISION · CSS Premium Dashboard
   Adaptado al tema claro/oscuro y a los colores de marca de la app.
   - Modo día (default): fondos blancos, acentos naranjas
   - Modo noche (body.dark-mode): fondos negros, mismos acentos naranjas
   ============================================================================ */

/* ==== VARIABLES LOCALES DE VISION ==== */
/* Usamos las variables del sistema y solo agregamos las específicas de Vision */
.vision-container {
  /* Estados semánticos (scores verde/naranja/rojo) — se adaptan al tema */
  --v-good: #16a34a;
  --v-good-soft: #22c55e;
  --v-mid: #d97706;
  --v-mid-soft: #f59e0b;
  --v-bad: #dc2626;
  --v-bad-soft: #ef4444;

  /* Color de marca principal (naranja de la app) */
  --v-brand: var(--orange);
  --v-brand-soft: var(--orange2);

  /* Backgrounds y bordes — usan las variables de tu sistema */
  --v-card-bg: var(--off);
  --v-card-border: var(--border);
  --v-card-hover: var(--off2);
  --v-section-bg: var(--white);
}

/* En modo oscuro, aclaramos los verdes/naranjas/rojos para mejor contraste */
body.dark-mode .vision-container {
  --v-good: #5DCAA5;
  --v-good-soft: #9FE1CB;
  --v-mid: #EF9F27;
  --v-mid-soft: #FFC15E;
  --v-bad: #E74C3C;
  --v-bad-soft: #FF7B6B;

  --v-card-bg: #1c1917;
  --v-card-border: #3c3836;
  --v-card-hover: #292524;
  --v-section-bg: #131211;
}

/* ==== SECTION CARD BASE ==== */
.vision-section-card {
  padding: 24px !important;
  background: var(--v-section-bg) !important;
  border: 1px solid var(--v-card-border) !important;
  border-radius: 16px !important;
  margin-bottom: 16px !important;
  position: relative;
  overflow: hidden;
  animation: visionFadeInUp 0.5s ease-out;
  box-shadow: var(--shadow-sm);
}

body.dark-mode .vision-section-card {
  box-shadow: none;
}

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

.vision-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}

.vision-section-label {
  font-size: 11px;
  letter-spacing: 1.8px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: 600;
}
.vision-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.vision-section-sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* ============================================================================
   1. HERO
   ============================================================================ */
.vision-hero {
  position: relative;
  background: linear-gradient(135deg, var(--orange-light), var(--orange-mid));
  border: 1px solid var(--orange-border);
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 20px;
  overflow: hidden;
  animation: visionFadeInUp 0.5s ease-out;
  box-shadow: var(--shadow-md);
}

body.dark-mode .vision-hero {
  background: linear-gradient(135deg, rgba(249,115,22,0.12), rgba(249,115,22,0.06));
  border-color: rgba(249,115,22,0.25);
  box-shadow: none;
}

.vision-hero-glow {
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--orange-glow) 0%, transparent 70%);
  pointer-events: none;
  animation: visionGlowPulse 4s ease-in-out infinite;
}

@keyframes visionGlowPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

.vision-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}

@media (max-width: 768px) {
  .vision-hero {
    padding: 24px 20px;
  }
  .vision-hero-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .vision-hero-right { justify-content: flex-start; }
}

.vision-hero-left { min-width: 0; }

.vision-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 1.8px;
  color: var(--orange);
  text-transform: uppercase;
  font-weight: 700;
  padding: 6px 12px;
  background: rgba(249,115,22,0.12);
  border: 1px solid rgba(249,115,22,0.3);
  border-radius: 20px;
  margin-bottom: 16px;
}

.vision-hero-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 12px var(--orange);
  animation: visionPulse 1.5s ease-in-out infinite;
}

@keyframes visionPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.vision-hero-url {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: -0.5px;
  word-break: break-all;
}

@media (max-width: 600px) {
  .vision-hero-url { font-size: 22px; }
}

.vision-hero-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 24px;
}

.vision-hero-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .vision-hero-metrics { grid-template-columns: repeat(2, 1fr); }
}

.vision-hero-stat {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}

body.dark-mode .vision-hero-stat {
  background: rgba(0,0,0,0.25);
  border-color: transparent;
}

.vision-hero-stat-bar {
  width: 100%;
  height: 4px;
  background: var(--off2);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

body.dark-mode .vision-hero-stat-bar {
  background: rgba(255,255,255,0.08);
}

.vision-hero-stat-fill {
  height: 100%;
  width: 0;
  border-radius: 4px;
  animation: visionBarGrow 1s ease-out 0.3s forwards;
}

@keyframes visionBarGrow {
  from { width: 0; }
  to   { width: var(--target); }
}

.vision-hero-stat-good { background: linear-gradient(90deg, var(--v-good), var(--v-good-soft)); }
.vision-hero-stat-mid  { background: linear-gradient(90deg, var(--v-mid), var(--v-mid-soft)); }
.vision-hero-stat-bad  { background: linear-gradient(90deg, var(--v-bad), var(--v-bad-soft)); }

.vision-hero-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vision-hero-stat-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

.vision-hero-stat-val {
  font-size: 15px;
  font-weight: 700;
}

.vision-hero-score-good { color: var(--v-good); }
.vision-hero-score-mid  { color: var(--v-mid); }
.vision-hero-score-bad  { color: var(--v-bad); }

.vision-hero-right { display: flex; justify-content: center; }

.vision-hero-gradebox {
  background: var(--white);
  border-radius: 20px;
  padding: 24px 36px;
  text-align: center;
  min-width: 180px;
  border: 2px solid transparent;
  position: relative;
  box-shadow: var(--shadow-md);
}

body.dark-mode .vision-hero-gradebox {
  background: rgba(0,0,0,0.35);
  box-shadow: none;
}

.vision-hero-gradebox.vision-grade-a { border-color: var(--v-good); box-shadow: 0 0 40px rgba(22,163,74,0.2); }
.vision-hero-gradebox.vision-grade-b { border-color: var(--v-mid); box-shadow: 0 0 40px rgba(217,119,6,0.2); }
.vision-hero-gradebox.vision-grade-c { border-color: var(--v-mid); box-shadow: 0 0 40px rgba(217,119,6,0.2); }
.vision-hero-gradebox.vision-grade-d { border-color: var(--v-bad); box-shadow: 0 0 40px rgba(220,38,38,0.2); }

.vision-hero-grade {
  font-size: 72px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -3px;
  margin-bottom: 6px;
}

.vision-grade-a .vision-hero-grade { color: var(--v-good); }
.vision-grade-b .vision-hero-grade { color: var(--v-mid); }
.vision-grade-c .vision-hero-grade { color: var(--v-mid); }
.vision-grade-d .vision-hero-grade { color: var(--v-bad); }

.vision-hero-score {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.vision-hero-score-max {
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
}

.vision-hero-score-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ============================================================================
   2. SCORECARD PREMIUM — 2x2 grid con rings grandes
   ============================================================================ */
.vision-scorecard-premium {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 600px) {
  .vision-scorecard-premium { grid-template-columns: 1fr; }
}

.vision-score-big {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px;
  background: var(--v-card-bg);
  border: 1px solid var(--v-card-border);
  border-radius: 14px;
  transition: all 0.25s ease;
  cursor: default;
}

.vision-score-big:hover {
  background: var(--v-card-hover);
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

.vision-score-big-good { border-left: 3px solid var(--v-good); }
.vision-score-big-mid  { border-left: 3px solid var(--v-mid); }
.vision-score-big-bad  { border-left: 3px solid var(--v-bad); }

.vision-score-big-ring-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vision-ring-svg { display: block; }

.vision-ring-progress {
  transition: stroke-dashoffset 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.vision-ring-good { stroke: var(--v-good); }
.vision-ring-mid  { stroke: var(--v-mid); }
.vision-ring-bad  { stroke: var(--v-bad); }

body.dark-mode .vision-ring-good { filter: drop-shadow(0 0 6px rgba(93,202,165,0.4)); }
body.dark-mode .vision-ring-mid  { filter: drop-shadow(0 0 6px rgba(239,159,39,0.4)); }
body.dark-mode .vision-ring-bad  { filter: drop-shadow(0 0 6px rgba(231,76,60,0.4)); }

.vision-ring-num {
  font-size: 36px;
  font-weight: 800;
  fill: var(--text);
}

.vision-score-big-info { flex: 1; min-width: 0; }

.vision-score-big-label {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.vision-score-big-sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

/* ============================================================================
   3. CORE WEB VITALS
   ============================================================================ */
.vision-vitals-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 600px) { .vision-vitals-grid { grid-template-columns: 1fr; } }

.vision-vital-card {
  padding: 18px;
  background: var(--v-card-bg);
  border: 1px solid var(--v-card-border);
  border-radius: 14px;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.vision-vital-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
}

.vision-vital-good::before { background: linear-gradient(90deg, var(--v-good), var(--v-good-soft)); }
.vision-vital-mid::before  { background: linear-gradient(90deg, var(--v-mid), var(--v-mid-soft)); }
.vision-vital-bad::before  { background: linear-gradient(90deg, var(--v-bad), var(--v-bad-soft)); }

.vision-vital-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
  gap: 8px;
}

.vision-vital-code {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--text);
}

.vision-vital-full {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.3px;
  margin-top: 2px;
}

.vision-vital-badge {
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.vision-vital-badge-good { background: rgba(22,163,74,0.12); color: var(--v-good); border: 1px solid rgba(22,163,74,0.3); }
.vision-vital-badge-mid  { background: rgba(217,119,6,0.12); color: var(--v-mid); border: 1px solid rgba(217,119,6,0.3); }
.vision-vital-badge-bad  { background: rgba(220,38,38,0.12); color: var(--v-bad); border: 1px solid rgba(220,38,38,0.3); }

body.dark-mode .vision-vital-badge-good { background: rgba(93,202,165,0.15); }
body.dark-mode .vision-vital-badge-mid  { background: rgba(239,159,39,0.15); }
body.dark-mode .vision-vital-badge-bad  { background: rgba(231,76,60,0.15); }

.vision-vital-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: -1px;
}

.vision-vital-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 14px;
}

.vision-vital-progress { margin-top: 12px; }

.vision-vital-progress-bar {
  position: relative;
  width: 100%;
  height: 6px;
  background: var(--off2);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}

body.dark-mode .vision-vital-progress-bar {
  background: rgba(255,255,255,0.08);
}

.vision-vital-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 4px;
  animation: visionBarGrow 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
}

.vision-vital-fill-good { background: linear-gradient(90deg, var(--v-good), var(--v-good-soft)); }
.vision-vital-fill-mid  { background: linear-gradient(90deg, var(--v-mid), var(--v-mid-soft)); }
.vision-vital-fill-bad  { background: linear-gradient(90deg, var(--v-bad), var(--v-bad-soft)); }

.vision-vital-progress-target {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 10px;
  background: var(--text);
  opacity: 0.4;
}

.vision-vital-target-label {
  font-size: 10px;
  color: var(--muted);
  text-align: right;
}

/* ============================================================================
   4. FILMSTRIP PREMIUM
   ============================================================================ */
.vision-filmstrip-premium {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  padding: 20px 4px 0;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .vision-filmstrip-premium { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

.vision-filmstrip-line {
  position: absolute;
  top: 72%;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, var(--v-mid), var(--v-good));
  z-index: 0;
  opacity: 0.5;
}

.vision-filmstrip-item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.vision-filmstrip-frame {
  width: 100%;
  aspect-ratio: 9/16;
  background: var(--off);
  border: 1px solid var(--v-card-border);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  margin-bottom: 10px;
}

body.dark-mode .vision-filmstrip-frame {
  background: rgba(0,0,0,0.4);
}

.vision-filmstrip-item.vision-filmstrip-last .vision-filmstrip-frame {
  border-color: var(--v-good);
  box-shadow: 0 0 16px rgba(22,163,74,0.3);
}

body.dark-mode .vision-filmstrip-item.vision-filmstrip-last .vision-filmstrip-frame {
  box-shadow: 0 0 16px rgba(93,202,165,0.3);
}

.vision-filmstrip-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vision-filmstrip-empty {
  width: 100%;
  height: 100%;
  background: var(--off2);
}

.vision-filmstrip-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--v-mid);
  border: 2px solid var(--white);
  box-shadow: 0 0 8px rgba(217,119,6,0.5);
  margin-bottom: 6px;
}

.vision-filmstrip-dot-green {
  background: var(--v-good);
  box-shadow: 0 0 12px rgba(22,163,74,0.5);
}

.vision-filmstrip-time {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.vision-filmstrip-time-green { color: var(--v-good); }

.vision-filmstrip-desc {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.3;
}

.vision-filmstrip-legend {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--muted);
}

.vision-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vision-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.vision-legend-dot-green { background: var(--v-good); }
.vision-legend-dot-orange { background: var(--v-mid); }

.vision-filmstrip-verdict {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--v-card-bg);
  border-radius: 12px;
  border: 1px solid var(--v-card-border);
  flex-wrap: wrap;
}

.vision-filmstrip-verdict-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.vision-filmstrip-verdict-time {
  color: var(--v-mid);
  font-weight: 800;
}

.vision-filmstrip-verdict-sub {
  font-size: 12px;
  color: var(--muted);
}

.vision-filmstrip-verdict-badge {
  background: rgba(220,38,38,0.12);
  border: 1px solid rgba(220,38,38,0.3);
  color: var(--v-bad);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.vision-filmstrip-verdict-badge-ok {
  background: rgba(22,163,74,0.12);
  border: 1px solid rgba(22,163,74,0.3);
  color: var(--v-good);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/* ============================================================================
   5. SCREENSHOT CON MARCO
   ============================================================================ */
.vision-screenshot-wrap {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.vision-device-frame {
  position: relative;
  padding: 12px;
  background: linear-gradient(145deg, var(--text2), var(--text));
  border-radius: 32px;
  box-shadow: var(--shadow-xl);
}

body.dark-mode .vision-device-frame {
  background: linear-gradient(145deg, #1a1a20, #0d0d10);
}

.vision-device-mobile {
  max-width: 320px;
  border: 2px solid var(--border);
}

.vision-device-desktop {
  max-width: 720px;
  border-radius: 16px;
  padding: 8px;
}

.vision-device-screen {
  border-radius: 24px;
  overflow: hidden;
  background: var(--white);
  max-height: 600px;
  display: flex;
  justify-content: center;
}

.vision-device-desktop .vision-device-screen {
  border-radius: 10px;
}

.vision-device-screen img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: top;
}

@media (max-width: 400px) {
  .vision-device-mobile { max-width: 260px; }
}

/* ============================================================================
   6. RADAR / PENTÁGONO (con grilla visible)
   ============================================================================ */
.vision-radar-card {
  background: var(--v-section-bg) !important;
}

.vision-radar-layout {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 32px;
  align-items: center;
}

@media (max-width: 900px) {
  .vision-radar-layout { grid-template-columns: 1fr; gap: 24px; }
}

.vision-radar-chart-wrap {
  display: flex;
  justify-content: center;
  padding: 10px;
}

.vision-radar-svg {
  display: block;
  animation: visionFadeIn 0.8s ease-out 0.3s both;
  max-width: 100%;
  height: auto;
}

@keyframes visionFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.vision-radar-shape {
  animation: visionRadarGrow 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
  transform-origin: center;
}

@keyframes visionRadarGrow {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* GRILLA DEL RADAR — bien visible para ver hasta dónde puede llegar */
.vision-radar-grid {
  fill: rgba(249,115,22,0.04);
  stroke: var(--border2);
  stroke-width: 1.2;
}

body.dark-mode .vision-radar-grid {
  fill: rgba(249,115,22,0.02);
  stroke: rgba(255,255,255,0.15);
}

/* La última grilla (la externa, 100%) más marcada */
.vision-radar-grid-outer {
  stroke: var(--orange);
  stroke-width: 1.8;
  stroke-dasharray: 4 4;
  fill: none;
  opacity: 0.5;
}

body.dark-mode .vision-radar-grid-outer {
  stroke: rgba(249,115,22,0.6);
}

.vision-radar-axis {
  stroke: var(--border2);
  stroke-width: 1;
  stroke-dasharray: 3, 5;
  opacity: 0.7;
}

body.dark-mode .vision-radar-axis {
  stroke: rgba(255,255,255,0.15);
}

.vision-radar-dot {
  animation: visionDotPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.vision-radar-dot:nth-child(1) { animation-delay: 0.8s; }
.vision-radar-dot:nth-child(2) { animation-delay: 0.9s; }
.vision-radar-dot:nth-child(3) { animation-delay: 1.0s; }
.vision-radar-dot:nth-child(4) { animation-delay: 1.1s; }
.vision-radar-dot:nth-child(5) { animation-delay: 1.2s; }
.vision-radar-dot:nth-child(6) { animation-delay: 1.3s; }

@keyframes visionDotPop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.vision-radar-dot-good { fill: var(--v-good); }
.vision-radar-dot-mid  { fill: var(--v-mid); }
.vision-radar-dot-bad  { fill: var(--v-bad); }

.vision-radar-label-group {
  animation: visionFadeIn 0.6s ease-out 1s both;
}

.vision-radar-label-title {
  fill: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.vision-radar-label-score {
  font-size: 15px;
  font-weight: 800;
}

.vision-radar-label-good { fill: var(--v-good); }
.vision-radar-label-mid  { fill: var(--v-mid); }
.vision-radar-label-bad  { fill: var(--v-bad); }

/* Leyenda lateral */
.vision-radar-legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vision-radar-legend-item {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: var(--v-card-bg);
  border-radius: 10px;
  border: 1px solid var(--v-card-border);
  transition: all 0.2s ease;
}

.vision-radar-legend-item:hover {
  background: var(--v-card-hover);
  transform: translateX(4px);
}

.vision-radar-legend-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.vision-radar-legend-info { flex: 1; min-width: 0; }

.vision-radar-legend-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  gap: 8px;
}

.vision-radar-legend-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.vision-radar-legend-score {
  font-size: 16px;
  font-weight: 800;
}

.vision-radar-legend-sub {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}

.vision-radar-legend-issues {
  margin-top: 4px;
}

.vision-radar-legend-issue {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
  padding: 2px 0;
}

/* ============================================================================
   7. IMÁGENES
   ============================================================================ */
.vision-image-list { display: flex; flex-direction: column; gap: 10px; }

.vision-image-row {
  display: flex;
  gap: 14px;
  padding: 12px 14px;
  background: var(--v-card-bg);
  border: 1px solid var(--v-card-border);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.vision-image-row:hover {
  background: var(--v-card-hover);
}

.vision-image-rank {
  width: 28px;
  height: 28px;
  background: var(--orange-light);
  color: var(--orange);
  border: 1px solid var(--orange-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

.vision-image-info { flex: 1; min-width: 0; }

.vision-image-name {
  font-size: 13px;
  color: var(--text);
  font-family: 'SF Mono', Monaco, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}

.vision-image-bar {
  width: 100%;
  height: 4px;
  background: var(--off2);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}

body.dark-mode .vision-image-bar {
  background: rgba(255,255,255,0.08);
}

.vision-image-bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--v-mid), var(--v-mid-soft));
  border-radius: 4px;
  animation: visionBarGrow 1s ease-out 0.5s forwards;
}

.vision-image-meta {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--muted);
  flex-wrap: wrap;
}

.vision-image-meta b { color: var(--text); }
.vision-image-savings { color: var(--v-mid); }
.vision-image-savings b { color: var(--v-mid); }

/* ============================================================================
   8. RECURSOS
   ============================================================================ */
.vision-resource-block { margin-top: 18px; }
.vision-resource-block:first-child { margin-top: 0; }

.vision-resource-block-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}

.vision-resource-list { display: flex; flex-direction: column; gap: 6px; }

.vision-resource-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--v-card-bg);
  border: 1px solid var(--v-card-border);
  border-radius: 8px;
  font-size: 12px;
  gap: 12px;
}

.vision-resource-url {
  color: var(--muted);
  font-family: 'SF Mono', Monaco, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.vision-resource-cost {
  color: var(--v-mid);
  font-weight: 700;
  flex-shrink: 0;
  padding: 3px 8px;
  background: rgba(217,119,6,0.1);
  border-radius: 6px;
}

body.dark-mode .vision-resource-cost {
  background: rgba(239,159,39,0.1);
}

/* ============================================================================
   9. OPORTUNIDADES
   ============================================================================ */
.vision-opp-list { display: flex; flex-direction: column; gap: 12px; }

.vision-opp-row {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: var(--v-card-bg);
  border: 1px solid var(--v-card-border);
  border-radius: 12px;
  border-left: 3px solid var(--orange);
  transition: all 0.25s ease;
}

.vision-opp-row:hover {
  background: var(--v-card-hover);
  transform: translateX(4px);
}

.vision-opp-rank {
  font-size: 13px;
  font-weight: 800;
  color: var(--orange);
  padding: 4px 10px;
  background: var(--orange-light);
  border: 1px solid var(--orange-border);
  border-radius: 8px;
  height: fit-content;
  flex-shrink: 0;
}

.vision-opp-body { flex: 1; min-width: 0; }

.vision-opp-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.vision-opp-desc {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
  line-height: 1.5;
}

.vision-opp-meter {
  width: 100%;
  height: 4px;
  background: var(--off2);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

body.dark-mode .vision-opp-meter {
  background: rgba(255,255,255,0.08);
}

.vision-opp-meter-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--orange), var(--v-good));
  border-radius: 4px;
  animation: visionBarGrow 1s ease-out 0.5s forwards;
}

.vision-opp-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.vision-opp-badge {
  font-size: 11px;
  padding: 4px 10px;
  background: var(--orange-light);
  border: 1px solid var(--orange-border);
  color: var(--orange);
  border-radius: 6px;
  font-weight: 600;
}

/* ============================================================================
   10. STUDIO CTA FINAL
   ============================================================================ */
.vision-studio-cta-card {
  position: relative;
  background: linear-gradient(135deg, var(--orange-light), var(--orange-mid)) !important;
  border: 1px solid var(--orange-border) !important;
  padding: 32px !important;
  overflow: hidden;
}

body.dark-mode .vision-studio-cta-card {
  background: linear-gradient(135deg, rgba(249,115,22,0.12), rgba(249,115,22,0.08)) !important;
  border-color: rgba(249,115,22,0.25) !important;
}

.vision-studio-cta-glow {
  position: absolute;
  top: -40%;
  left: -20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--orange-glow) 0%, transparent 60%);
  pointer-events: none;
  animation: visionGlowPulse 5s ease-in-out infinite;
}

.vision-studio-cta-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.vision-studio-cta-emoji {
  font-size: 56px;
  flex-shrink: 0;
}

.vision-studio-cta-text { flex: 1; min-width: 220px; }

.vision-studio-cta-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}

.vision-studio-cta-sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

.vision-studio-cta-btn {
  background: linear-gradient(135deg, var(--orange), var(--orange2));
  color: var(--white);
  border: none;
  padding: 14px 26px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  letter-spacing: 0.3px;
  box-shadow: var(--shadow-orange);
}

.vision-studio-cta-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-orange-lg);
}

@media (max-width: 600px) {
  .vision-studio-cta-content { flex-direction: column; text-align: center; }
  .vision-studio-cta-btn { width: 100%; }
  .vision-studio-cta-card { padding: 24px 20px !important; }
}

/* ============================================================================
   RESPONSIVE GENERAL
   ============================================================================ */
@media (max-width: 600px) {
  .vision-section-card { padding: 18px !important; }
  .vision-section-title { font-size: 16px; }
  .vision-hero-grade { font-size: 56px; }
  .vision-hero-gradebox { padding: 18px 24px; min-width: 140px; }
  .vision-score-big { padding: 16px; gap: 14px; }
  .vision-ring-num { font-size: 30px; }
  .vision-score-big-label { font-size: 15px; }
  .vision-vital-value { font-size: 26px; }
}

/* ============================================================================
   ECOM LAND VISION · OVERRIDES PARA MODO DÍA
   Los estilos viejos de Vision estaban hardcoded para fondo negro.
   Acá revertimos los colores en modo día (por defecto) para que respete el tema.
   ============================================================================ */

/* Fondo del contenedor principal: blanco en día, negro en noche */
body:not(.dark-mode) #analisis-view {
  background: var(--white);
}

/* Textos: en modo día, deben ser oscuros */
body:not(.dark-mode) .vision-title,
body:not(.dark-mode) .vision-report-url,
body:not(.dark-mode) .vision-kpi-val,
body:not(.dark-mode) .vision-view-toggle-title,
body:not(.dark-mode) .vision-section-title,
body:not(.dark-mode) .vision-action-title,
body:not(.dark-mode) .vision-analysis-title,
body:not(.dark-mode) .vision-card-title,
body:not(.dark-mode) .vision-structure-name,
body:not(.dark-mode) .vision-top-issue-title,
body:not(.dark-mode) .vision-bundle-title {
  color: var(--text);
}

body:not(.dark-mode) .vision-subtitle,
body:not(.dark-mode) .vision-badge-subtle,
body:not(.dark-mode) .vision-report-label,
body:not(.dark-mode) .vision-report-path,
body:not(.dark-mode) .vision-kpi-label,
body:not(.dark-mode) .vision-kpi-sub,
body:not(.dark-mode) .vision-view-toggle-label,
body:not(.dark-mode) .vision-section-label,
body:not(.dark-mode) .vision-section-sub,
body:not(.dark-mode) .vision-error-message,
body:not(.dark-mode) .vision-input-hint,
body:not(.dark-mode) .vision-action-category,
body:not(.dark-mode) .vision-action-context,
body:not(.dark-mode) .vision-action-step-text,
body:not(.dark-mode) .vision-analysis-desc {
  color: var(--muted);
}

/* Input */
body:not(.dark-mode) .vision-input-card {
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

body:not(.dark-mode) .vision-input-wrapper {
  background: var(--off);
  border: 1px solid var(--border);
}

body:not(.dark-mode) .vision-url-input {
  color: var(--text);
}

body:not(.dark-mode) .vision-url-input::placeholder {
  color: var(--muted2);
}

body:not(.dark-mode) .vision-input-icon {
  color: var(--muted);
}

/* Cards genéricas viejas */
body:not(.dark-mode) .vision-card {
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}

body:not(.dark-mode) .vision-card:hover {
  border-color: var(--border2);
}

/* Steps de acción */
body:not(.dark-mode) .vision-action-step-item {
  background: var(--off);
  border: 1px solid var(--border);
}

body:not(.dark-mode) .vision-action-step-num {
  background: var(--orange-light);
  color: var(--orange);
}

/* Structure cards */
body:not(.dark-mode) .vision-structure-card {
  background: var(--off);
  border: 1px solid var(--border);
}

/* Bundle CTA */
body:not(.dark-mode) .vision-bundle-sub,
body:not(.dark-mode) .vision-bundle-content {
  color: var(--muted);
}

/* Badges */
body:not(.dark-mode) .vision-badge-purple {
  background: rgba(249,115,22,0.1);
  color: var(--orange);
  border: 1px solid var(--orange-border);
}

body:not(.dark-mode) .vision-badge-green {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success-border);
}

/* Filmstrip y frames */
body:not(.dark-mode) .vision-filmstrip-card {
  background: var(--white);
  border: 1px solid var(--border);
}

body:not(.dark-mode) .vision-loading {
  background: var(--white);
  border: 1px solid var(--border);
}

body:not(.dark-mode) .vision-loading-url,
body:not(.dark-mode) .vision-loading-step {
  color: var(--text);
}

/* Error state */
body:not(.dark-mode) .vision-error {
  background: var(--white);
  border: 1px solid var(--border);
}

body:not(.dark-mode) .vision-error-title {
  color: var(--text);
}

/* Code blocks — siempre oscuros porque es código */
/* Los dejamos como están */

/* Reset de cualquier regla .vision-card::before que tenga backgrounds */
body:not(.dark-mode) .vision-card::before {
  opacity: 0.5;
}
/* ============================================================================
   OPTIMIZADOR DE IMÁGENES
   ============================================================================ */
.comp-view { padding: 28px 24px; max-width: 760px; margin: 0 auto; }

.comp-title { font-size: var(--text-xl); font-weight: 800; letter-spacing: -.3px; margin-bottom: 6px; color: var(--text); }
.comp-title em { color: var(--orange); font-style: normal; }
.comp-desc { font-size: var(--text-sm); color: var(--muted); line-height: 1.6; margin-bottom: 14px; }

.comp-badges { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 20px; }
.comp-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; font-size: .71rem; font-weight: 600; border: 1px solid; }
.comp-badge-g { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success); }
.comp-badge-o { background: var(--orange-light); border-color: var(--orange-border); color: var(--orange2); }
.comp-badge-b { background: var(--orange-light); border-color: var(--orange-border); color: var(--orange3); }

/* DROPZONE */
.comp-dz { border: 2px dashed var(--border2); border-radius: var(--radius-lg); background: var(--off); padding: 40px 20px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.comp-dz:hover, .comp-dz.over { border-color: var(--orange); background: var(--orange-light); }
.comp-dz-icon { width: 56px; height: 56px; border-radius: 13px; background: var(--orange-light); border: 1px solid var(--orange-border); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-size: 24px; }
.comp-dz-t { font-size: var(--text-base); font-weight: 700; color: var(--text); }
.comp-dz-s { font-size: var(--text-sm); color: var(--muted); margin-top: 4px; }
.comp-dz-pills { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.comp-dz-pill { padding: 4px 11px; border-radius: 20px; font-size: .71rem; font-weight: 500; background: var(--white); border: 1px solid var(--border); color: var(--muted); }

/* QUEUE SECTION */
.comp-queuesec { margin-top: 14px; display: none; }
.comp-qheader { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.comp-qhdr { font-size: var(--text-sm); color: var(--muted); }
.comp-btn-clear { font-size: .72rem; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border2); background: transparent; color: var(--muted); cursor: pointer; font-family: var(--font); transition: all .15s; }
.comp-btn-clear:hover { color: var(--text); border-color: var(--border2); }

.comp-qlist { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.comp-qi { display: flex; align-items: center; gap: 9px; background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px; transition: border-color .2s; }
.comp-qi.proc { border-color: var(--orange-border); }
.comp-qi.done { border-color: var(--color-success-border); }
.comp-qthumb { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; background: var(--off2); flex-shrink: 0; }
.comp-qinfo { flex: 1; min-width: 0; }
.comp-qname { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.comp-qmeta { font-size: .7rem; color: var(--muted); margin-top: 2px; }
.comp-qst { font-size: .72rem; white-space: nowrap; color: var(--muted2); }
.comp-qst.proc { color: var(--orange); font-weight: 600; }
.comp-qst.done { color: var(--color-success); font-weight: 700; }
.comp-qrm { background: none; border: none; color: var(--muted2); cursor: pointer; font-size: 14px; padding: 3px 6px; border-radius: 4px; transition: color .15s; }
.comp-qrm:hover { color: var(--text); }

/* BARRA DE PROGRESO */
.comp-progwrap { margin-bottom: 12px; display: none; }
.comp-prow { display: flex; justify-content: space-between; margin-bottom: 6px; }
.comp-ptxt { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.comp-ppct { font-size: var(--text-sm); font-weight: 800; color: var(--orange); }
.comp-ptrack { height: 7px; background: var(--off2); border-radius: 20px; overflow: hidden; border: 1px solid var(--border); }
.comp-pfill { height: 100%; width: 0%; background: var(--orange); border-radius: 20px; transition: width .3s ease; }
.comp-pfill.done { background: var(--color-success); }

/* BOTTOM BAR — formato + comprimir */
.comp-bottombar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--off); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 12px 14px;
}
.comp-fmt-label { font-size: var(--text-sm); font-weight: 600; color: var(--text2); white-space: nowrap; }
.comp-fmts { display: flex; gap: 5px; }
.comp-fb {
  padding: 8px 16px; border-radius: 8px;
  border: 1.5px solid var(--border2);
  background: var(--white);
  color: var(--text2);
  font-size: .8rem; font-weight: 700; cursor: pointer;
  font-family: var(--font); transition: all .15s;
}
.comp-fb.active {
  border-color: var(--orange);
  background: var(--orange);
  color: #fff;
}
.comp-sp { flex: 1; }
.comp-btn-comp {
  padding: 10px 26px; border-radius: 10px; border: none;
  background: var(--orange); color: #fff;
  font-size: var(--text-sm); font-weight: 800; cursor: pointer;
  font-family: var(--font); letter-spacing: .3px;
  box-shadow: var(--shadow-orange);
  transition: all .2s;
}
.comp-btn-comp:hover { background: var(--orange2); box-shadow: var(--shadow-orange-lg); transform: translateY(-1px); }
.comp-btn-comp:active { transform: scale(.97); }
.comp-btn-comp:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* CARD DE RESULTADOS */
.comp-rescard { margin-top: 16px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: none; }

.comp-hero { padding: 18px 20px; background: var(--off); border-bottom: 1px solid var(--border); }
.comp-hero-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.comp-hlbl { font-size: .68rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 4px; }
.comp-hnum { font-size: 2.4rem; font-weight: 900; color: var(--orange); line-height: 1; letter-spacing: -1px; }
.comp-hunit { font-size: .88rem; font-weight: 500; color: var(--muted); margin-left: 3px; }
.comp-hsub { font-size: var(--text-sm); color: var(--muted); margin-top: 4px; }
.comp-hpct { text-align: center; background: var(--color-success-bg); border: 1.5px solid var(--color-success-border); border-radius: 10px; padding: 12px 18px; flex-shrink: 0; }
.comp-hpct-n { font-size: 1.9rem; font-weight: 900; color: var(--color-success); line-height: 1; }
.comp-hpct-l { font-size: .68rem; color: var(--muted); margin-top: 3px; }

.comp-stats3 { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--border); }
.comp-s3 { padding: 12px 14px; text-align: center; border-right: 1px solid var(--border); }
.comp-s3:last-child { border-right: none; }
.comp-s3-lbl { font-size: .67rem; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); }
.comp-s3-val { font-size: var(--text-base); font-weight: 800; margin-top: 3px; color: var(--text); }
.comp-s3-val.g { color: var(--color-success); }
.comp-s3-val.o { color: var(--orange); }

.comp-reslist-wrap { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.comp-ritem { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 8px; transition: background .15s; }
.comp-ritem:hover { background: var(--off); }
.comp-rthumb { width: 40px; height: 40px; border-radius: 7px; object-fit: cover; background: var(--off2); flex-shrink: 0; }
.comp-rinfo { flex: 1; min-width: 0; }
.comp-rname { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.comp-rsizes { font-size: .7rem; color: var(--muted); margin-top: 2px; }
.comp-rsizes s { opacity: .5; text-decoration: line-through; }
.comp-rbadge { font-size: .7rem; font-weight: 800; padding: 3px 8px; border-radius: 20px; background: var(--color-success-bg); border: 1px solid var(--color-success-border); color: var(--color-success); white-space: nowrap; flex-shrink: 0; }
.comp-btn-dl { padding: 7px 14px; border-radius: 8px; border: 1.5px solid var(--orange); background: var(--orange-light); color: var(--orange2); font-size: .76rem; font-weight: 700; cursor: pointer; font-family: var(--font); transition: all .15s; white-space: nowrap; flex-shrink: 0; }
.comp-btn-dl:hover { background: var(--orange-mid); }

.comp-dlall-wrap { padding: 0 12px 12px; }
.comp-btn-dlall { width: 100%; padding: 12px; border-radius: 10px; border: none; background: var(--orange); color: #fff; font-size: var(--text-sm); font-weight: 800; cursor: pointer; font-family: var(--font); letter-spacing: .3px; box-shadow: var(--shadow-orange); transition: all .2s; }
.comp-btn-dlall:hover { background: var(--orange2); box-shadow: var(--shadow-orange-lg); transform: translateY(-1px); }

/* DARK MODE */
body.dark-mode .comp-dz { background: var(--off); border-color: var(--border2); }
body.dark-mode .comp-dz:hover, body.dark-mode .comp-dz.over { background: var(--orange-mid); border-color: var(--orange); }
body.dark-mode .comp-dz-pill { background: var(--off2); border-color: var(--border); color: var(--muted); }
body.dark-mode .comp-qi { background: var(--off); border-color: var(--border); }
body.dark-mode .comp-qi.done { border-color: rgba(22,163,74,.35); }
body.dark-mode .comp-ptrack { background: var(--off2); border-color: var(--border); }
body.dark-mode .comp-bottombar { background: var(--off); border-color: var(--border); }
body.dark-mode .comp-fb { background: var(--off2); border-color: var(--border2); color: var(--text2); }
body.dark-mode .comp-fb.active { background: var(--orange); border-color: var(--orange); color: #fff; }
body.dark-mode .comp-rescard { background: var(--off); border-color: var(--border); }
body.dark-mode .comp-hero { background: var(--off2); border-color: var(--border); }
body.dark-mode .comp-hpct { background: rgba(22,163,74,.12); border-color: rgba(22,163,74,.3); }
body.dark-mode .comp-stats3 { border-color: var(--border); }
body.dark-mode .comp-s3 { border-color: var(--border); }
body.dark-mode .comp-ritem:hover { background: var(--off2); }
body.dark-mode .comp-rbadge { background: rgba(22,163,74,.12); border-color: rgba(22,163,74,.3); }
body.dark-mode .comp-btn-dl { background: var(--orange-mid); border-color: var(--orange-border); }
body.dark-mode .comp-btn-dl:hover { background: var(--orange-light); }
body.dark-mode .comp-btn-clear { border-color: var(--border2); color: var(--muted); }

/* RESPONSIVE */
@media (max-width: 600px) {
  .comp-view { padding: 16px 12px; }
  .comp-hero-top { flex-direction: column; align-items: flex-start; }
  .comp-stats3 { grid-template-columns: 1fr 1fr; }
  .comp-stats3 .comp-s3:nth-child(2) { border-right: none; }
  .comp-stats3 .comp-s3:nth-child(3) { grid-column: 1 / -1; border-right: none; border-top: 1px solid var(--border); }
  .comp-bottombar { flex-direction: column; align-items: stretch; gap: 10px; }
  .comp-sp { display: none; }
  .comp-btn-comp { width: 100%; text-align: center; padding: 12px; }
  .comp-ritem { flex-wrap: wrap; }
  .comp-btn-dl { width: 100%; text-align: center; margin-top: 4px; }
}

/* PAYMENT FAILED OVERLAY */
#paymentFailedOverlay{position:fixed;top:64px;left:0;right:0;bottom:0;z-index:180;background:rgba(12,10,9,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:flex-start;justify-content:center;padding:2.5rem 1rem;overflow-y:auto}
body.sidebar-mode #paymentFailedOverlay{left:270px}
@media(max-width:900px){body.sidebar-mode #paymentFailedOverlay{left:0}}
.pf-card{background:var(--white,#fff);border:1.5px solid rgba(239,68,68,.35);border-radius:20px;padding:2rem 2rem 1.75rem;max-width:480px;width:100%;box-shadow:0 8px 40px rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;text-align:center;gap:.75rem;margin-top:.5rem}
.pf-icon-wrap{width:64px;height:64px;border-radius:50%;background:rgba(239,68,68,.1);border:1.5px solid rgba(239,68,68,.3);display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin-bottom:.25rem}
.pf-title{font-size:1.35rem;font-weight:800;color:#ef4444;letter-spacing:-.03em;margin:0}
.pf-desc{font-size:.83rem;color:var(--muted,#78716c);line-height:1.6;margin:0}
.pf-plan-badge{display:inline-flex;background:rgba(249,115,22,.12);border:1px solid rgba(249,115,22,.3);color:#f97316;font-size:.72rem;font-weight:700;padding:.25rem .85rem;border-radius:100px;text-transform:uppercase;letter-spacing:.06em}
.pf-payment-box{display:flex;align-items:center;gap:.85rem;width:100%;background:var(--off,#f5f5f4);border:1px solid var(--border,#e7e5e4);border-radius:12px;padding:.9rem 1.1rem;text-align:left;margin:.25rem 0}
.pf-payment-icon{font-size:1.15rem;flex-shrink:0}
.pf-payment-title{font-size:.82rem;font-weight:700;color:var(--text,#1c1917)}
.pf-payment-sub{font-size:.74rem;color:#f97316;margin-top:.1rem}
.pf-btn-primary{width:100%;background:linear-gradient(135deg,#fb923c,#ea580c);color:#fff;border:none;border-radius:12px;padding:.85rem 1.5rem;font-size:.88rem;font-weight:700;cursor:pointer;font-family:var(--font,inherit);transition:opacity .18s}
.pf-btn-primary:hover{opacity:.88}
.pf-btn-secondary{width:100%;background:transparent;color:var(--text,#1c1917);border:1.5px solid var(--border,#e7e5e4);border-radius:12px;padding:.8rem 1.5rem;font-size:.83rem;font-weight:600;cursor:pointer;font-family:var(--font,inherit);transition:all .18s}
.pf-btn-secondary:hover{border-color:#ef4444;color:#ef4444}
.pf-footer-note{font-size:.72rem;color:var(--muted,#a8a29e);margin:0;line-height:1.5}
body.dark-mode .pf-card{background:#1c1917;border-color:rgba(239,68,68,.3)}
body.dark-mode .pf-payment-box{background:#292524;border-color:#3c3836}
body.dark-mode .pf-btn-secondary{color:#e7e5e4;border-color:#3c3836}

/* PLAN UPGRADE OVERLAY */
#planUpgradeOverlay{position:fixed;top:64px;left:0;right:0;bottom:0;z-index:180;background:rgba(12,10,9,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:flex-start;justify-content:center;padding:2.5rem 1rem;overflow-y:auto}
body.sidebar-mode #planUpgradeOverlay{left:270px}
@media(max-width:900px){body.sidebar-mode #planUpgradeOverlay{left:0}}
.pu-card{background:var(--white,#fff);border:1.5px solid rgba(249,115,22,.4);border-radius:20px;padding:2rem 2rem 1.75rem;max-width:480px;width:100%;box-shadow:0 8px 40px rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;text-align:center;gap:.75rem;margin-top:.5rem}
.pu-icon-wrap{width:64px;height:64px;border-radius:50%;background:rgba(249,115,22,.12);border:1.5px solid rgba(249,115,22,.3);display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin-bottom:.25rem}
.pu-title{font-size:1.35rem;font-weight:800;color:#f97316;letter-spacing:-.03em;margin:0}
.pu-desc{font-size:.83rem;color:var(--muted,#78716c);line-height:1.6;margin:0}
.pu-plan-badge{display:inline-flex;background:rgba(249,115,22,.12);border:1px solid rgba(249,115,22,.3);color:#f97316;font-size:.72rem;font-weight:700;padding:.25rem .85rem;border-radius:100px;text-transform:uppercase;letter-spacing:.06em}
.pu-btn-primary{width:100%;background:linear-gradient(135deg,#fb923c,#ea580c);color:#fff;border:none;border-radius:12px;padding:.85rem 1.5rem;font-size:.88rem;font-weight:700;cursor:pointer;font-family:var(--font,inherit);transition:opacity .18s}
.pu-btn-primary:hover{opacity:.88}
.pu-btn-alt{width:100%;background:transparent;color:var(--text,#1c1917);border:1.5px solid var(--border,#e7e5e4);border-radius:12px;padding:.8rem 1.5rem;font-size:.83rem;font-weight:600;cursor:pointer;font-family:var(--font,inherit);transition:all .18s}
.pu-btn-alt:hover{border-color:#f97316;color:#f97316}
.pu-note{font-size:.72rem;color:var(--muted,#a8a29e);margin:0;line-height:1.5}
body.dark-mode .pu-card{background:#1c1917;border-color:rgba(249,115,22,.35)}
body.dark-mode .pu-btn-alt{color:#e7e5e4;border-color:#3c3836}

/* ══════════════════════════════════════════════════════════════════
   SISTEMA DE AFILIADOS — estilos completos
   Widget azul del mismo tamaño que los bloques de créditos
   Compatible con dark-mode y responsive
   ══════════════════════════════════════════════════════════════════ */

/* ── Widget sidebar ─────────────────────────────────────────────── */
.sb-affiliate {
  margin: .55rem 1rem;
  background: linear-gradient(135deg,rgba(59,130,246,.13),rgba(37,99,235,.08));
  border: 1px solid rgba(59,130,246,.3);
  border-radius: 13px;
  padding: .9rem;
  cursor: pointer;
  transition: border-color .2s, transform .15s, box-shadow .2s;
}
.sb-affiliate:hover {
  border-color: rgba(59,130,246,.6);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(59,130,246,.15);
}
.sb-affiliate.active {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}

.sb-aff-header {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .55rem;
}
.sb-aff-pulse {
  width: 5px; height: 5px;
  background: #3b82f6;
  border-radius: 50%;
  flex-shrink: 0;
  animation: sbAffPulse 2s infinite;
}
@keyframes sbAffPulse {
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.4; transform:scale(1.4); }
}
.sb-aff-title-text {
  font-size: .6rem;
  font-weight: 700;
  color: #60a5fa;
  text-transform: uppercase;
  letter-spacing: .07em;
  flex: 1;
}
.sb-aff-status {
  font-size: .56rem;
  font-weight: 700;
  padding: .1rem .38rem;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.sb-aff-status.active    { background:rgba(34,197,94,.15);  color:#22c55e; border:1px solid rgba(34,197,94,.3); }
.sb-aff-status.pending   { background:rgba(234,179,8,.12);  color:#eab308; border:1px solid rgba(234,179,8,.3); }
.sb-aff-status.suspended { background:rgba(239,68,68,.1);   color:#ef4444; border:1px solid rgba(239,68,68,.25); }
.sb-aff-status.none      { background:var(--off2);          color:var(--muted2); border:1px solid var(--border); }

.sb-aff-stats { margin-bottom: .4rem; }
.sb-aff-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .7rem;
  margin-bottom: .2rem;
}
.sb-aff-stat-row span { color: var(--muted); }
.sb-aff-stat-row strong { color: var(--text); font-weight: 800; }

.sb-aff-cta {
  font-size: .65rem;
  color: #60a5fa;
  font-weight: 600;
  text-align: right;
  margin-top: .35rem;
  opacity: .85;
}

/* ── Panel principal ────────────────────────────────────────────── */
.aff-stats-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}
@media(max-width:900px){ .aff-stats-grid{ grid-template-columns:repeat(2,1fr); gap:.75rem; } }
@media(max-width:480px){ .aff-stats-grid{ grid-template-columns:1fr 1fr; gap:.6rem; } }

.aff-stat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem 1.1rem;
}
.aff-stat-card.green  { border-color:rgba(34,197,94,.35);  background:rgba(34,197,94,.06); }
.aff-stat-card.blue   { border-color:rgba(59,130,246,.35); background:rgba(59,130,246,.06); }
.aff-stat-card.amber  { border-color:rgba(234,179,8,.35);  background:rgba(234,179,8,.06); }
.aff-stat-card.purple { border-color:rgba(124,58,237,.35); background:rgba(124,58,237,.06); }
.aff-stat-icon  { font-size:1.2rem; margin-bottom:.3rem; }
.aff-stat-val   { font-size:1.65rem; font-weight:900; color:var(--text); line-height:1; margin-bottom:.1rem; }
.aff-stat-label { font-size:.6rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.05em; }

.aff-link-box {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  flex-wrap: wrap;
}
.aff-link-label { font-size:.6rem; font-weight:700; color:var(--muted2); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.18rem; }
.aff-link-url { font-size:.78rem; font-weight:600; color:#60a5fa; font-family:ui-monospace,monospace; word-break:break-all; }
.aff-copy-btn {
  background: rgba(59,130,246,.1);
  border: 1px solid rgba(59,130,246,.3);
  color: #60a5fa;
  border-radius: 8px;
  padding: .38rem .85rem;
  font-size:.7rem; font-weight:700;
  cursor:pointer; white-space:nowrap;
  transition:all .15s;
  font-family:var(--font);
  flex-shrink:0;
}
.aff-copy-btn:hover  { background:rgba(59,130,246,.2); }
.aff-copy-btn.copied { background:#3b82f6; color:#fff; border-color:#3b82f6; }

.aff-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
@media(max-width:640px){ .aff-info-grid{ grid-template-columns:1fr; } }

.aff-table-wrap { background:var(--white); border:1px solid var(--border); border-radius:13px; overflow:hidden; margin-bottom:1.1rem; }
.aff-table-header { padding:.75rem 1.25rem; border-bottom:1px solid var(--border); font-size:.65rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.aff-table { width:100%; border-collapse:collapse; }
.aff-table th { padding:.55rem 1.25rem; text-align:left; font-size:.6rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; background:var(--off); border-bottom:1px solid var(--border); white-space:nowrap; }
.aff-table td { padding:.72rem 1.25rem; font-size:.77rem; color:var(--text); border-bottom:1px solid var(--border); vertical-align:middle; }
.aff-table tr:last-child td { border-bottom:none; }
.aff-table tr:hover td { background:var(--off); }
@media(max-width:640px){ .aff-table th,.aff-table td{ padding:.55rem .75rem; font-size:.7rem; } }

.aff-detail-row { display:flex; align-items:center; justify-content:space-between; padding:.65rem 1.25rem; border-bottom:1px solid var(--border); font-size:.77rem; }
.aff-detail-row:last-child{ border-bottom:none; }
.aff-detail-label { color:var(--muted); }
.aff-detail-val   { font-weight:700; color:var(--text); }

.aff-badge { display:inline-block; padding:.15rem .48rem; border-radius:100px; font-size:.58rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.aff-badge.hold      { background:rgba(234,179,8,.12);  color:#ca8a04; border:1px solid rgba(234,179,8,.3); }
.aff-badge.approved  { background:rgba(34,197,94,.12);  color:#16a34a; border:1px solid rgba(34,197,94,.3); }
.aff-badge.paid      { background:rgba(59,130,246,.12); color:#2563eb; border:1px solid rgba(59,130,246,.3); }
.aff-badge.cancelled { background:rgba(239,68,68,.1);   color:#dc2626; border:1px solid rgba(239,68,68,.25); }
.aff-badge.fraud     { background:rgba(236,72,153,.1);  color:#be185d; border:1px solid rgba(236,72,153,.25); }

.aff-empty { text-align:center; padding:2.5rem 1rem; color:var(--muted); font-size:.82rem; }
.aff-empty-icon { font-size:2rem; margin-bottom:.35rem; }

.aff-register-box {
  background: linear-gradient(135deg,rgba(59,130,246,.1),rgba(37,99,235,.06));
  border: 1px solid rgba(59,130,246,.25);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  max-width: 460px;
  margin: 1rem auto;
}
.aff-register-icon  { font-size:2.5rem; margin-bottom:.65rem; }
.aff-register-title { font-size:1.1rem; font-weight:800; color:var(--text); margin-bottom:.35rem; letter-spacing:-.03em; }
.aff-register-desc  { font-size:.79rem; color:var(--muted); margin-bottom:1.1rem; line-height:1.65; }
.aff-register-perks { display:flex; flex-direction:column; gap:.32rem; margin-bottom:1.1rem; text-align:left; }
.aff-register-perk  { font-size:.75rem; color:#60a5fa; display:flex; align-items:flex-start; gap:.4rem; }

.aff-btn-green {
  background: linear-gradient(135deg,#3b82f6,#2563eb);
  color: #fff;
  border: none;
  border-radius: 11px;
  padding: .72rem 1.4rem;
  font-size:.86rem; font-weight:700;
  cursor:pointer;
  transition:opacity .15s,transform .15s;
  width:100%;
  font-family:var(--font);
  letter-spacing:-.01em;
}
.aff-btn-green:hover    { opacity:.88; transform:translateY(-1px); }
.aff-btn-green:disabled { opacity:.5; cursor:not-allowed; transform:none; }

.aff-pending-box {
  background: var(--white);
  border: 1px solid rgba(234,179,8,.35);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  max-width: 460px;
  margin: 1rem auto;
}

.aff-pay-box {
  background: linear-gradient(135deg,rgba(59,130,246,.1),rgba(37,99,235,.06));
  border: 1px solid rgba(59,130,246,.3);
  border-radius: 13px;
  padding: 1.1rem 1.4rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-bottom:1.1rem;
}
.aff-pay-label  { font-size:.6rem; font-weight:700; color:#60a5fa; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.18rem; }
.aff-pay-amount { font-size:1.9rem; font-weight:900; color:var(--text); line-height:1; }
.aff-pay-link {
  display:inline-block;
  background:#3b82f6; color:#fff;
  border-radius:9px;
  padding:.52rem 1.1rem;
  font-size:.76rem; font-weight:700;
  text-decoration:none;
  transition:opacity .15s;
}
.aff-pay-link:hover{ opacity:.85; }

/* ── Dark mode ──────────────────────────────────────────────────── */
body.dark-mode .sb-affiliate{
  background:linear-gradient(135deg,rgba(59,130,246,.12),rgba(37,99,235,.07));
  border-color:rgba(59,130,246,.22);
}
body.dark-mode .sb-affiliate:hover{ border-color:rgba(59,130,246,.5); }
body.dark-mode .aff-stat-card{ background:#1c1917; border-color:#3c3836; }
body.dark-mode .aff-stat-card.green { border-color:rgba(34,197,94,.3);  background:rgba(34,197,94,.08); }
body.dark-mode .aff-stat-card.blue  { border-color:rgba(59,130,246,.3); background:rgba(59,130,246,.08); }
body.dark-mode .aff-stat-card.amber { border-color:rgba(234,179,8,.3);  background:rgba(234,179,8,.08); }
body.dark-mode .aff-stat-card.purple{ border-color:rgba(124,58,237,.3); background:rgba(124,58,237,.08); }
body.dark-mode .aff-link-box  { background:#1c1917; border-color:#3c3836; }
body.dark-mode .aff-table-wrap{ background:#1c1917; border-color:#3c3836; }
body.dark-mode .aff-table th  { background:#292524; border-color:#3c3836; }
body.dark-mode .aff-table td  { border-color:#3c3836; }
body.dark-mode .aff-table tr:hover td{ background:#292524; }
body.dark-mode .aff-detail-row{ border-color:#3c3836; }
body.dark-mode .aff-register-box{ background:linear-gradient(135deg,rgba(59,130,246,.1),rgba(37,99,235,.06)); border-color:rgba(59,130,246,.2); }
body.dark-mode .aff-pending-box{ background:#1c1917; border-color:rgba(234,179,8,.3); }
body.dark-mode .aff-pay-box{ background:linear-gradient(135deg,rgba(59,130,246,.1),rgba(37,99,235,.06)); border-color:rgba(59,130,246,.25); }
body.dark-mode .aff-link-url{ color:#93c5fd; }
body.dark-mode .aff-register-perk{ color:#93c5fd; }
body.dark-mode .aff-copy-btn{ background:rgba(59,130,246,.12); border-color:rgba(59,130,246,.25); color:#93c5fd; }
body.dark-mode .aff-copy-btn:hover { background:rgba(59,130,246,.22); }
body.dark-mode .aff-copy-btn.copied{ background:#3b82f6; color:#fff; }
/* ═══════════════════════════════════════════════════════════════════
   AFF-PATCH.CSS — Pega al final de styles.css (después del bloque dark-mode de afiliados)
   Solo reemplaza los azules por el naranja del design system
   ═══════════════════════════════════════════════════════════════════ */


/* Stat card "blue" → naranja (card de referidos) */
.aff-stat-card.blue {
  border-color: rgba(249,115,22,.35);
  background: rgba(249,115,22,.06);
}

/* Link box */
.aff-link-box  { background: var(--orange-light); border-color: var(--orange-border); }
.aff-link-url  { color: var(--orange3); }

/* Copy btn */
.aff-copy-btn {
  background: rgba(249,115,22,.12);
  border-color: var(--orange-border);
  color: var(--orange3);
}
.aff-copy-btn:hover  { background: rgba(249,115,22,.2); }
.aff-copy-btn.copied { background: var(--orange); color: #fff; border-color: var(--orange); }

/* Register box */
.aff-register-box  { background: var(--white); border-color: var(--border); }
.aff-register-perk { color: var(--text2); }

/* Botón solicitar acceso */
.aff-btn-green { background: linear-gradient(135deg, #fb923c, #ea580c); }

/* Pay box */
.aff-pay-box   { background: var(--color-success-bg); border-color: var(--color-success-border); }
.aff-pay-label { color: var(--color-success); }
.aff-pay-link  { background: var(--color-success); }

/* Badge "paid" */
.aff-badge.paid { background: var(--orange-light); color: var(--orange3); border-color: var(--orange-border); }

/* ── Dark mode overrides ───────────────────────────────────────── */
body.dark-mode .aff-stat-card.blue  { border-color: rgba(249,115,22,.3); background: rgba(249,115,22,.08); }
body.dark-mode .aff-link-box        { background: var(--orange-light); border-color: var(--orange-border); }
body.dark-mode .aff-link-url        { color: var(--orange); }
body.dark-mode .aff-register-box    { background: var(--off); border-color: var(--border); }
body.dark-mode .aff-register-perk   { color: var(--text2); }
body.dark-mode .aff-pay-box         { background: rgba(22,163,74,.1); border-color: rgba(74,222,128,.2); }
body.dark-mode .aff-pay-label       { color: #4ade80; }
body.dark-mode .aff-pay-link        { background: #16a34a; }
/* ═══════════════════════════════════════════════════════════════════════════
   ESTUDIO DE MERCADO — styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* Variables locales */
:root {
  --ms-green:  #16a34a;
  --ms-amber:  #d97706;
  --ms-red:    #ef4444;
  --ms-orange: #fb923c;
  --ms-blue:   #3b82f6;
  --ms-purple: #8b5cf6;
  --ms-teal:   #0ea5e9;
  --ms-muted:  var(--muted);
}

/* Wrapper */
.ms-wrap { padding: 0 0 3rem; }

/* ── Form area ─────────────────────────────────────────────────────────────── */
.ms-form-area {
  padding: 1.6rem 2rem 1.4rem;
  border-bottom: 1px solid var(--border);
  background: var(--white);
}
.ms-title { font-size: 1.3rem; font-weight: 700; color: var(--text); margin-bottom: .2rem; letter-spacing: -.03em; }
.ms-title-accent { color: var(--orange3, #fb923c); }
.ms-subtitle { font-size: .8rem; color: var(--muted); margin-bottom: 1.1rem; line-height: 1.5; }

.ms-form-grid { display: grid; grid-template-columns: 88px 1fr; gap: 1rem; align-items: start; }

/* Upload */
.ms-upload-col {}
.ms-upload-box {
  width: 88px; height: 88px;
  border: 1.5px dashed var(--border2);
  border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; background: var(--off); overflow: hidden;
  transition: border-color .2s, background .2s;
  padding: .5rem;
}
.ms-upload-box:hover { border-color: var(--orange3,#fb923c); background: var(--orange-light,rgba(251,146,60,.06)); }
.ms-upload-box.ms-upload-drag { border-color: var(--orange3,#fb923c); background: var(--orange-light,rgba(251,146,60,.06)); }
.ms-upload-icon { font-size: 1.6rem; margin-bottom: .2rem; }
.ms-upload-label { font-size: .65rem; font-weight: 600; color: var(--text2); text-align: center; }
.ms-upload-sub { font-size: .6rem; color: var(--muted2); text-align: center; margin-top: .1rem; }

/* Fields */
.ms-fields-col {}
.ms-fields-grid { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: .7rem; align-items: end; }
.ms-field { display: flex; flex-direction: column; gap: .28rem; }
.ms-label { font-size: .72rem; font-weight: 600; color: var(--muted); }
.ms-input {
  border: 1px solid var(--border); border-radius: 8px; padding: .5rem .75rem;
  font-size: .82rem; background: var(--off); color: var(--text);
  font-family: var(--font, inherit); width: 100%; transition: border-color .18s;
}
.ms-input:focus { outline: none; border-color: var(--orange3,#fb923c); }
.ms-select { cursor: pointer; }
.ms-field-btn { flex-direction: row; gap: .5rem; align-items: flex-end; }
.ms-cost-pill {
  display: flex; align-items: center; gap: .4rem; white-space: nowrap;
  background: rgba(251,146,60,.08); border: 1px solid rgba(251,146,60,.25);
  border-radius: 8px; padding: .48rem .75rem;
}
.ms-cost-label { font-size: .72rem; color: var(--muted); }
.ms-cost-val { font-size: .88rem; font-weight: 700; color: var(--orange3,#fb923c); }
.ms-btn-run {
  background: linear-gradient(135deg,#fb923c,#ea580c); color: #fff; border: none;
  border-radius: 9px; padding: .52rem 1.1rem; font-size: .82rem; font-weight: 700;
  cursor: pointer; font-family: var(--font,inherit); white-space: nowrap; transition: opacity .18s;
}
.ms-btn-run:hover { opacity: .9; }
.ms-btn-run:disabled { opacity: .5; cursor: default; }

/* ── Error ─────────────────────────────────────────────────────────────────── */
.ms-error {
  margin: 1rem 2rem; padding: .8rem 1rem;
  background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.25);
  border-radius: 8px; font-size: .82rem; color: var(--ms-red);
}

/* ── Loading ────────────────────────────────────────────────────────────────── */
.ms-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 3rem 2rem; gap: .8rem;
}
.ms-spinner {
  width: 36px; height: 36px; border: 3px solid var(--border);
  border-top-color: var(--orange3,#fb923c); border-radius: 50%;
  animation: msSpin .7s linear infinite;
}
@keyframes msSpin { to { transform: rotate(360deg); } }
.ms-loading-text { font-size: .9rem; font-weight: 600; color: var(--text); }
.ms-loading-sub { font-size: .78rem; color: var(--muted); }

/* ── Results area ────────────────────────────────────────────────────────────── */
.ms-results { padding: 1.2rem 2rem 2rem; display: flex; flex-direction: column; gap: 0; }
.ms-section-label {
  font-size: .68rem; font-weight: 700; color: var(--muted2);
  text-transform: uppercase; letter-spacing: .07em;
  margin: 1.1rem 0 .55rem;
}

/* ── Precio box ─────────────────────────────────────────────────────────────── */
.ms-price-box {
  background: var(--off); border: 1px solid var(--border);
  border-radius: 10px; padding: 1rem 1.2rem;
}
.ms-price-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ms-price-info {}
.ms-price-country { font-size: .78rem; font-weight: 500; color: var(--text2); }
.ms-price-vals { display: flex; align-items: center; gap: 1.5rem; }
.ms-price-col { text-align: center; }
.ms-price-col-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .2rem; }
.ms-price-col-val { font-size: 1.3rem; font-weight: 700; line-height: 1; }
.ms-price-col-sub { font-size: .68rem; color: var(--muted); margin-top: .2rem; }
.ms-price-divider { width: 1px; height: 40px; background: var(--border); }

.ms-calc-detail {
  display: flex; flex-wrap: wrap; gap: .5rem 1.2rem;
  font-size: .75rem; color: var(--muted); margin-top: .5rem;
  padding: .6rem .8rem; background: var(--off); border: 1px solid var(--border); border-radius: 8px;
}
.ms-calc-detail strong { color: var(--text2); }
.ms-calc-formula { font-style: italic; }

/* ── Métricas ───────────────────────────────────────────────────────────────── */
.ms-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: .65rem; }
.ms-metric {
  background: var(--off); border: 1px solid var(--border);
  border-radius: 10px; padding: .85rem 1rem;
}
.ms-metric-label { font-size: .68rem; font-weight: 700; color: var(--muted2); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .3rem; }
.ms-metric-val { font-size: 1.25rem; font-weight: 500; color: var(--text); line-height: 1; }
.ms-metric-sub { font-size: .72rem; color: var(--muted); margin-top: .2rem; }

/* ── Keywords ───────────────────────────────────────────────────────────────── */
.ms-kw-row { display: flex; flex-wrap: wrap; gap: .35rem; }
.ms-kw {
  font-size: .73rem; padding: .25rem .75rem; border-radius: 20px;
  background: var(--off); border: 1px solid var(--border); color: var(--muted);
}
.ms-kw.ms-kw-hot { border-color: rgba(251,146,60,.4); color: var(--orange3,#fb923c); background: rgba(251,146,60,.06); }

/* ── Tabla ──────────────────────────────────────────────────────────────────── */
.ms-table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.ms-table { width: 100%; border-collapse: collapse; font-size: .78rem; min-width: 800px; }
.ms-table thead tr { background: var(--off); }
.ms-table th {
  font-size: .65rem; font-weight: 700; color: var(--muted2);
  text-transform: uppercase; letter-spacing: .05em;
  padding: .6rem .8rem; text-align: left; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.ms-table td { padding: .62rem .8rem; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
.ms-table tr:last-child td { border-bottom: none; }
.ms-table tr:hover td { background: var(--off); }

.ms-page-name { font-weight: 600; font-size: .8rem; }
.ms-page-id { font-size: .65rem; color: var(--muted); margin-top: 1px; }
.ms-empty-row { text-align: center; padding: 2rem; color: var(--muted); font-style: italic; }

/* Badges */
.ms-badge { display: inline-block; font-size: .65rem; font-weight: 700; padding: .18rem .55rem; border-radius: 4px; white-space: nowrap; }
.ms-b-drop  { background: rgba(59,130,246,.1);  color: #3b82f6; }
.ms-b-brand { background: rgba(22,163,74,.1);   color: #16a34a; }
.ms-b-norm  { background: rgba(107,114,128,.1); color: #6b7280; }
.ms-b-lp    { background: rgba(139,92,246,.1);  color: #8b5cf6; }
.ms-b-fn    { background: rgba(251,146,60,.1);  color: #fb923c; }
.ms-b-pp    { background: rgba(14,165,233,.1);  color: #0ea5e9; }
.ms-b-ws    { background: rgba(34,197,94,.1);   color: #22c55e; }

/* vs mínimo badge */
.ms-vstatus { font-size: .68rem; font-weight: 700; padding: .2rem .5rem; border-radius: 4px; white-space: nowrap; }
.ms-v-ok   { background: rgba(22,163,74,.1);  color: #16a34a; }
.ms-v-warn { background: rgba(217,119,6,.1);  color: #d97706; }
.ms-v-bad  { background: rgba(239,68,68,.1);  color: #ef4444; }

/* Links de la tabla */
.ms-links { display: flex; flex-direction: column; gap: .3rem; }
.ms-link {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .68rem; font-weight: 600; padding: .22rem .6rem;
  border-radius: 5px; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: opacity .15s;
}
.ms-link:hover { opacity: .8; }
.ms-link-fb    { background: rgba(24,119,242,.1); color: #1877f2; border: 1px solid rgba(24,119,242,.2); }
.ms-link-ads   { background: rgba(251,146,60,.1); color: #ea580c; border: 1px solid rgba(251,146,60,.25); }
.ms-link-store { background: var(--off); color: var(--text2); border: 1px solid var(--border); }
.ms-link-wa    { background: rgba(37,211,102,.1); color: #25D366; border: 1px solid rgba(37,211,102,.3); }

/* ── Veredicto ──────────────────────────────────────────────────────────────── */
.ms-verdict-inner {
  display: flex; align-items: flex-start; gap: 1rem;
  border: 1px solid; border-radius: 10px; padding: .9rem 1.2rem;
}
.ms-verdict-score { font-size: 2rem; font-weight: 800; line-height: 1; flex-shrink: 0; min-width: 3rem; text-align: center; }
.ms-verdict-title { font-size: .92rem; font-weight: 600; color: var(--text); margin-bottom: .3rem; }
.ms-verdict-sub { font-size: .8rem; color: var(--muted); line-height: 1.55; }

/* ── Estrategia grid ────────────────────────────────────────────────────────── */
.ms-strat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.ms-strat-box {
  background: var(--off); border: 1px solid var(--border);
  border-radius: 10px; padding: .95rem 1.1rem;
}
.ms-strat-full { grid-column: 1 / -1; }
.ms-strat-head { font-size: .82rem; font-weight: 600; color: var(--text); margin-bottom: .45rem; }
.ms-strat-body { font-size: .78rem; color: var(--muted); line-height: 1.65; }
.ms-strat-body ul { list-style: disc; padding-left: 1.1rem; }
.ms-strat-body li { margin-bottom: .25rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════════════════════ */
body.dark-mode .ms-form-area            { background: rgba(19,18,17,.6); border-color: #3c3836; }
body.dark-mode .ms-input                { background: #292524; border-color: #3c3836; color: #fafaf9; }
body.dark-mode .ms-input:focus          { border-color: #fb923c; }
body.dark-mode .ms-upload-box           { background: #1c1917; border-color: #3c3836; }
body.dark-mode .ms-upload-box:hover     { border-color: #fb923c; background: rgba(251,146,60,.08); }
body.dark-mode .ms-price-box            { background: #1c1917; border-color: #3c3836; }
body.dark-mode .ms-calc-detail          { background: #1c1917; border-color: #3c3836; }
body.dark-mode .ms-metric              { background: #1c1917; border-color: #3c3836; }
body.dark-mode .ms-table thead tr      { background: #292524; }
body.dark-mode .ms-table th            { border-color: #3c3836; }
body.dark-mode .ms-table td            { border-color: #3c3836; color: #e7e5e4; }
body.dark-mode .ms-table tr:hover td   { background: #1c1917; }
body.dark-mode .ms-table-scroll        { border-color: #3c3836; }
body.dark-mode .ms-strat-box           { background: #1c1917; border-color: #3c3836; }
body.dark-mode .ms-kw                  { background: #1c1917; border-color: #3c3836; }
body.dark-mode .ms-link-store          { background: #292524; color: #e7e5e4; border-color: #3c3836; }
body.dark-mode .ms-link-wa             { background: rgba(37,211,102,.15); color: #25D366; border-color: rgba(37,211,102,.4); }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .ms-form-area   { padding: 1.2rem 1rem 1rem; }
  .ms-results     { padding: .8rem 1rem 2rem; }
  .ms-form-grid   { grid-template-columns: 72px 1fr; gap: .7rem; }
  .ms-upload-box  { width: 72px; height: 72px; }
  .ms-fields-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .ms-field-btn   { grid-column: 1 / -1; flex-direction: row; gap: .5rem; }
  .ms-metrics     { grid-template-columns: 1fr 1fr; }
  .ms-strat-grid  { grid-template-columns: 1fr; }
  .ms-strat-full  { grid-column: 1; }
  .ms-price-inner { flex-direction: column; gap: .7rem; }
  .ms-verdict-inner { flex-direction: column; }
}

@media (max-width: 500px) {
  .ms-form-grid   { grid-template-columns: 1fr; }
  .ms-upload-box  { width: 100%; height: 70px; flex-direction: row; gap: .5rem; padding: .6rem .8rem; }
  .ms-fields-grid { grid-template-columns: 1fr; }
  .ms-metrics     { grid-template-columns: 1fr 1fr; }
  .ms-field-btn   { flex-direction: column; }
  .ms-btn-run     { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════
   ACADEMIA — Nav button + Sidebar badge
   ══════════════════════════════════════════════════════════════════ */

/* ── Botón Academia en la navbar ─────────────────────────────────── */
.nav-academia-btn{display:flex;align-items:center;gap:.45rem;background:linear-gradient(135deg,#fb923c,#ea580c);color:#fff;border:none;border-radius:10px;padding:.4rem .9rem;cursor:pointer;font-family:var(--font);font-size:.78rem;font-weight:700;letter-spacing:-.01em;box-shadow:0 2px 12px rgba(249,115,22,.4),0 1px 0 rgba(255,255,255,.15) inset;transition:all .22s;flex-shrink:0}
.nav-academia-btn:hover{background:linear-gradient(135deg,#ea580c,#c2410c);box-shadow:0 4px 18px rgba(249,115,22,.5);transform:translateY(-1px)}
.nav-academia-icon{font-size:1rem;line-height:1}
.nav-academia-label{white-space:nowrap}
@media(max-width:900px){.nav-academia-btn{display:none!important}}

/* ── Badge especial en sidebar para Academia ─────────────────────── */
.sb-academia-btn{background:linear-gradient(135deg,rgba(249,115,22,.1),rgba(234,88,12,.05))!important;border-left:3px solid transparent;margin:.25rem .5rem;border-radius:10px!important;padding:.7rem .75rem!important;width:calc(100% - 1rem)!important;transition:all .2s!important}
.sb-academia-btn:hover{background:linear-gradient(135deg,rgba(249,115,22,.18),rgba(234,88,12,.12))!important}
.sb-academia-btn.active{background:linear-gradient(135deg,rgba(249,115,22,.2),rgba(234,88,12,.15))!important;border-left-color:var(--orange)!important}
.sb-academia-badge{margin-left:auto;background:linear-gradient(135deg,#fb923c,#ea580c);color:#fff;font-size:.52rem;font-weight:800;padding:.15rem .45rem;border-radius:4px;letter-spacing:.04em;animation:ac-badge-pulse 3s ease-in-out infinite}
@keyframes ac-badge-pulse{0%,100%{opacity:1}50%{opacity:.65}}

/* ══════════════════════════════════════════════════════════════════
   ACADEMIA — Cursos (grid de tarjetas)
   ══════════════════════════════════════════════════════════════════ */

/* Grid de cursos */
.ac-courses-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;padding-bottom:2rem}
@media(max-width:1100px){.ac-courses-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ac-courses-grid{grid-template-columns:1fr;gap:.85rem}}

/* Tarjeta de curso */
.ac-course-card{background:var(--white);border:1px solid var(--border);border-radius:16px;overflow:hidden;cursor:pointer;transition:box-shadow .2s,transform .2s;display:flex;flex-direction:column}
.ac-course-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.ac-course-card:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* Thumbnail */
.ac-card-thumb{position:relative;width:100%;padding-bottom:56.25%;overflow:hidden;background:var(--off2);flex-shrink:0}
.ac-card-thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.ac-card-thumb-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:3.5rem}
.ac-card-thumb-overlay{position:absolute;bottom:0;left:0;right:0;padding:.65rem .85rem;display:flex;align-items:flex-end}
.ac-card-course-label{color:#fff;font-size:.72rem;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.5);line-height:1.3}

/* Cuerpo de tarjeta */
.ac-card-body{padding:1rem 1.1rem 1.1rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.ac-card-header-row{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}
.ac-card-title{font-size:.95rem;font-weight:700;color:var(--text);line-height:1.3;flex:1}
.ac-card-desc{font-size:.78rem;color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ac-card-meta{display:flex;align-items:center;gap:.85rem;font-size:.72rem;color:var(--muted);margin-top:.1rem}
.ac-meta-done{font-weight:600}

/* Barra de progreso */
.ac-progress-wrap{display:flex;align-items:center;gap:.6rem;margin-top:.2rem}
.ac-progress-track{flex:1;height:6px;background:var(--off2);border-radius:3px;overflow:hidden}
.ac-progress-fill{height:100%;border-radius:3px;transition:width .4s ease}
.ac-progress-pct{font-size:.7rem;font-weight:700;flex-shrink:0;min-width:2.4rem;text-align:right}

/* Status badges */
.ac-status-badge{font-size:.58rem;font-weight:800;padding:.2rem .5rem;border-radius:5px;flex-shrink:0;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em}
.ac-status-done{background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0}
.ac-status-progress{background:var(--orange-light);color:var(--orange3);border:1px solid var(--orange-border)}
.ac-status-new{background:var(--off2);color:var(--muted2);border:1px solid var(--border)}

/* Estados vacíos y carga */
.ac-loading-state{display:flex;justify-content:center;align-items:center;padding:4rem;grid-column:1/-1}
.ac-spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--orange);border-radius:50%;animation:ac-spin .7s linear infinite}
@keyframes ac-spin{to{transform:rotate(360deg)}}
.ac-empty-state{grid-column:1/-1;text-align:center;padding:4rem 1rem;color:var(--muted)}
.ac-empty-icon{font-size:3.5rem;margin-bottom:1rem}
.ac-empty-state p{font-size:.88rem;line-height:1.6}

/* ══════════════════════════════════════════════════════════════════
   ACADEMIA — Vista de detalle del curso
   ══════════════════════════════════════════════════════════════════ */

/* Barra superior */
.ac-detail-topbar{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem;flex-wrap:wrap}
.ac-back-btn{display:flex;align-items:center;gap:.35rem;background:var(--off);border:1px solid var(--border);color:var(--text);padding:.42rem .9rem;border-radius:9px;font-size:.78rem;font-weight:600;cursor:pointer;font-family:var(--font);transition:all .18s;flex-shrink:0}
.ac-back-btn:hover{background:var(--off2);border-color:var(--border2)}
.ac-detail-course-name{font-size:.92rem;font-weight:700;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Layout: sidebar + panel principal */
.ac-detail-layout{display:grid;grid-template-columns:300px 1fr;gap:1.25rem;align-items:start}
@media(max-width:920px){.ac-detail-layout{grid-template-columns:1fr;gap:1rem}}

/* ── Sidebar de lecciones ── */
.ac-lessons-sidebar{background:var(--white);border:1px solid var(--border);border-radius:14px;overflow:hidden;position:sticky;top:72px}
.ac-sidebar-header{padding:1rem 1.1rem .85rem;border-bottom:1px solid var(--border)}
.ac-sidebar-title{font-size:.88rem;font-weight:700;color:var(--text);margin-bottom:.65rem;line-height:1.3}
.ac-sidebar-prog-wrap{display:flex;align-items:center;gap:.6rem}
.ac-sidebar-prog-bar{flex:1;height:7px;background:var(--off2);border-radius:4px;overflow:hidden}
.ac-sidebar-prog-fill{height:100%;background:linear-gradient(90deg,#fb923c,#ea580c);border-radius:4px;transition:width .5s ease}
.ac-sidebar-prog-pct{font-size:.7rem;font-weight:700;color:var(--orange3);flex-shrink:0}

/* Lista de lecciones */
.ac-lessons-list{max-height:calc(100vh - 260px);overflow-y:auto;scrollbar-width:thin}
.ac-lesson-item{display:flex;align-items:center;gap:.7rem;padding:.75rem 1.1rem;cursor:pointer;border-bottom:1px solid var(--border);transition:background .15s;border:none;width:100%;text-align:left;background:none;font-family:var(--font)}
.ac-lesson-item:last-child{border-bottom:none}
.ac-lesson-item:hover{background:var(--off)}
.ac-lesson-item.ac-lesson-active{background:var(--orange-light)}
.ac-lesson-item.ac-lesson-done .ac-lesson-num{color:#16a34a}
.ac-lesson-num{width:24px;height:24px;border-radius:50%;background:var(--off2);display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;color:var(--muted);flex-shrink:0}
.ac-lesson-item.ac-lesson-active .ac-lesson-num{background:var(--orange-light);color:var(--orange3)}
.ac-lesson-info{flex:1;min-width:0}
.ac-lesson-title{font-size:.8rem;font-weight:600;color:var(--text);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-lesson-item.ac-lesson-done .ac-lesson-title{color:var(--muted)}
.ac-lesson-item.ac-lesson-active .ac-lesson-title{color:var(--orange3)}
.ac-lesson-dur{font-size:.67rem;color:var(--muted2);margin-top:.1rem}
.ac-lesson-play-icon{font-size:.72rem;color:var(--muted2);flex-shrink:0}
.ac-lesson-item.ac-lesson-active .ac-lesson-play-icon{color:var(--orange)}

/* ── Panel principal ── */
.ac-player-main{display:flex;flex-direction:column;gap:1.1rem}

/* Cabecera del video */
.ac-video-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.ac-video-title{font-size:1.15rem;font-weight:700;color:var(--text);line-height:1.3;flex:1}
.ac-completed-badge{display:flex;align-items:center;gap:.35rem;background:#f0fdf4;border:1px solid #bbf7d0;color:#16a34a;font-size:.72rem;font-weight:700;padding:.3rem .75rem;border-radius:100px;flex-shrink:0}

/* Reproductor */
.ac-video-wrap{background:#000;border-radius:14px;overflow:hidden;position:relative;aspect-ratio:16/9;width:100%}
.ac-video-player{width:100%;height:100%;display:block;object-fit:contain}
.ac-video-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:var(--off2);cursor:default}
.ac-ph-icon{font-size:3.5rem}
.ac-video-placeholder p{font-size:.85rem;color:var(--muted)}

/* Descripción */
.ac-lesson-desc{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:1rem 1.2rem;font-size:.84rem;color:var(--text);line-height:1.7}

/* ── Documentos ── */
.ac-docs-section,.ac-comments-section{background:var(--white);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.ac-section-title{display:flex;align-items:center;gap:.5rem;padding:.85rem 1.2rem;font-size:.82rem;font-weight:700;color:var(--text);border-bottom:1px solid var(--border)}
.ac-docs-list{display:flex;flex-direction:column;gap:0}
.ac-doc-item{display:flex;align-items:center;gap:.85rem;padding:.8rem 1.2rem;text-decoration:none;color:var(--text);border-bottom:1px solid var(--border);transition:background .15s}
.ac-doc-item:last-child{border-bottom:none}
.ac-doc-item:hover{background:var(--off)}
.ac-doc-icon{width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:800;flex-shrink:0;letter-spacing:.04em}
.ac-doc-info{flex:1;min-width:0}
.ac-doc-name{font-size:.82rem;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-doc-meta{font-size:.68rem;color:var(--muted);margin-top:.1rem}
.ac-doc-download{font-size:1rem;color:var(--muted);font-weight:700}
.ac-doc-item:hover .ac-doc-download{color:var(--orange)}

/* ── Comentarios ── */
.ac-comment-form{padding:1rem 1.2rem;border-bottom:1px solid var(--border)}
.ac-comment-textarea{width:100%;border:1px solid var(--border);border-radius:10px;padding:.75rem 1rem;font-size:.84rem;font-family:var(--font);color:var(--text);background:var(--off);resize:vertical;outline:none;transition:border-color .2s;min-height:80px}
.ac-comment-textarea:focus{border-color:var(--orange);background:var(--white)}
.ac-comment-form-footer{display:flex;align-items:center;justify-content:space-between;margin-top:.55rem}
.ac-char-count{font-size:.7rem;color:var(--muted2)}
.ac-comment-submit{background:linear-gradient(135deg,#fb923c,#ea580c);color:#fff;border:none;border-radius:9px;padding:.45rem 1.1rem;font-size:.78rem;font-weight:700;cursor:pointer;font-family:var(--font);transition:all .2s;box-shadow:0 2px 8px rgba(249,115,22,.3)}
.ac-comment-submit:hover{background:linear-gradient(135deg,#ea580c,#c2410c);box-shadow:0 4px 14px rgba(249,115,22,.4)}
.ac-comment-submit:disabled{opacity:.6;cursor:default;transform:none}

.ac-comments-list{display:flex;flex-direction:column;gap:0;max-height:420px;overflow-y:auto;scrollbar-width:thin}
.ac-comment{display:flex;gap:.75rem;padding:.85rem 1.2rem;border-bottom:1px solid var(--border)}
.ac-comment:last-child{border-bottom:none}
.ac-comment-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#fb923c,#ea580c);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;flex-shrink:0}
.ac-comment-body{flex:1;min-width:0}
.ac-comment-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.3rem;flex-wrap:wrap}
.ac-comment-name{font-size:.8rem;font-weight:700;color:var(--text)}
.ac-comment-date{font-size:.68rem;color:var(--muted2)}
.ac-comment-delete{margin-left:auto;background:none;border:none;color:var(--muted2);font-size:.75rem;cursor:pointer;padding:.1rem .25rem;border-radius:4px;line-height:1;transition:color .15s}
.ac-comment-delete:hover{color:var(--color-danger)}
.ac-comment-content{font-size:.82rem;color:var(--text);line-height:1.6;word-break:break-word}
.ac-no-comments{padding:1.5rem 1.2rem;font-size:.82rem;color:var(--muted);text-align:center}
.ac-comments-loading{padding:1rem 1.2rem;font-size:.78rem;color:var(--muted)}

/* ══════════════════════════════════════════════════════════════════
   ACADEMIA — Dark Mode
   ══════════════════════════════════════════════════════════════════ */

/* Sidebar academia btn dark */
body.dark-mode .sb-academia-btn{background:linear-gradient(135deg,rgba(249,115,22,.15),rgba(234,88,12,.08))!important}
body.dark-mode .sb-academia-btn:hover{background:linear-gradient(135deg,rgba(249,115,22,.25),rgba(234,88,12,.18))!important}
body.dark-mode .sb-academia-btn.active{background:linear-gradient(135deg,rgba(249,115,22,.28),rgba(234,88,12,.2))!important}

/* Tarjetas de cursos dark */
body.dark-mode .ac-course-card{background:#1c1917;border-color:#3c3836}
body.dark-mode .ac-course-card:hover{box-shadow:0 8px 32px rgba(0,0,0,.4)}
body.dark-mode .ac-card-title{color:#fafaf9}
body.dark-mode .ac-card-desc{color:#a8a29e}
body.dark-mode .ac-card-meta{color:#a8a29e}
body.dark-mode .ac-progress-track{background:#292524}
body.dark-mode .ac-status-done{background:rgba(22,163,74,.15);color:#4ade80;border-color:rgba(74,222,128,.25)}
body.dark-mode .ac-status-progress{background:rgba(249,115,22,.12);color:#fb923c;border-color:rgba(249,115,22,.25)}
body.dark-mode .ac-status-new{background:#292524;color:#78716c;border-color:#3c3836}
body.dark-mode .ac-empty-state{color:#a8a29e}

/* Detalle curso dark */
body.dark-mode .ac-back-btn{background:#292524;border-color:#3c3836;color:#e7e5e4}
body.dark-mode .ac-back-btn:hover{background:#3c3836}
body.dark-mode .ac-detail-course-name{color:#78716c}
body.dark-mode .ac-lessons-sidebar{background:#1c1917;border-color:#3c3836}
body.dark-mode .ac-sidebar-header{border-color:#3c3836}
body.dark-mode .ac-sidebar-title{color:#fafaf9}
body.dark-mode .ac-sidebar-prog-bar{background:#292524}
body.dark-mode .ac-lesson-item{border-color:#292524}
body.dark-mode .ac-lesson-item:hover{background:#292524}
body.dark-mode .ac-lesson-item.ac-lesson-active{background:rgba(249,115,22,.12)}
body.dark-mode .ac-lesson-num{background:#292524;color:#78716c}
body.dark-mode .ac-lesson-item.ac-lesson-active .ac-lesson-num{background:rgba(249,115,22,.18);color:#fb923c}
body.dark-mode .ac-lesson-title{color:#e7e5e4}
body.dark-mode .ac-lesson-item.ac-lesson-done .ac-lesson-title{color:#78716c}
body.dark-mode .ac-lesson-item.ac-lesson-active .ac-lesson-title{color:#fb923c}
body.dark-mode .ac-lesson-dur{color:#57534e}
body.dark-mode .ac-video-title{color:#fafaf9}
body.dark-mode .ac-completed-badge{background:rgba(22,163,74,.15);border-color:rgba(74,222,128,.25);color:#4ade80}
body.dark-mode .ac-video-wrap{background:#0a0a0a}
body.dark-mode .ac-video-placeholder{background:#1c1917}
body.dark-mode .ac-video-placeholder p{color:#78716c}
body.dark-mode .ac-lesson-desc{background:#1c1917;border-color:#3c3836;color:#e7e5e4}
body.dark-mode .ac-docs-section{background:#1c1917;border-color:#3c3836}
body.dark-mode .ac-comments-section{background:#1c1917;border-color:#3c3836}
body.dark-mode .ac-section-title{color:#e7e5e4;border-color:#3c3836}
body.dark-mode .ac-doc-item{color:#e7e5e4;border-color:#292524}
body.dark-mode .ac-doc-item:hover{background:#292524}
body.dark-mode .ac-doc-name{color:#e7e5e4}
body.dark-mode .ac-doc-meta{color:#78716c}
body.dark-mode .ac-comment-form{border-color:#3c3836}
body.dark-mode .ac-comment-textarea{background:#292524;border-color:#3c3836;color:#fafaf9}
body.dark-mode .ac-comment-textarea:focus{border-color:var(--orange);background:#292524}
body.dark-mode .ac-char-count{color:#57534e}
body.dark-mode .ac-comment{border-color:#292524}
body.dark-mode .ac-comment-name{color:#fafaf9}
body.dark-mode .ac-comment-content{color:#e7e5e4}
body.dark-mode .ac-comment-date{color:#57534e}
body.dark-mode .ac-no-comments{color:#78716c}
body.dark-mode .ac-comments-loading{color:#78716c}

/* ══════════════════════════════════════════════════════════════════
   ACADEMIA — Responsive móvil
   ══════════════════════════════════════════════════════════════════ */

@media(max-width:920px){
  .ac-detail-topbar{margin-bottom:.75rem}
  .ac-lessons-sidebar{position:static;border-radius:12px}
  .ac-lessons-list{max-height:220px}
  .ac-video-title{font-size:1rem}
  .ac-comment-textarea{font-size:.9rem}
}

@media(max-width:600px){
  .ac-card-body{padding:.85rem .95rem .95rem}
  .ac-card-title{font-size:.9rem}
  .ac-back-btn{font-size:.74rem;padding:.38rem .7rem}
  .ac-video-header{flex-direction:column;align-items:flex-start;gap:.4rem}
  .ac-comment-form-footer{flex-direction:column;align-items:flex-end;gap:.4rem}
  .ac-comment-submit{align-self:stretch;text-align:center}
}

/* ── Academia page title (clases propias para evitar conflicto con .dash-title de projects.js) ── */
.ac-page-title{font-size:1.65rem;font-weight:800;letter-spacing:-.045em;color:var(--text)}
.ac-page-title span{color:var(--orange)}
.ac-page-subtitle{font-size:.78rem;color:var(--muted);margin-top:.3rem;letter-spacing:-.01em}

/* ── WhatsApp community button ── */
.ac-wa-btn{display:inline-flex;align-items:center;gap:.55rem;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;text-decoration:none;border:none;border-radius:12px;padding:.65rem 1.2rem;font-family:var(--font);font-size:.82rem;font-weight:700;letter-spacing:-.01em;box-shadow:0 3px 16px rgba(34,197,94,.4),0 1px 0 rgba(255,255,255,.15) inset;transition:all .22s;flex-shrink:0;white-space:nowrap;margin-left:auto;cursor:pointer;animation:ac-wa-pulse 3.5s ease-in-out infinite}
.ac-wa-btn:hover{background:linear-gradient(135deg,#16a34a,#15803d);box-shadow:0 5px 22px rgba(34,197,94,.55);transform:translateY(-2px);color:#fff}
.ac-wa-btn svg{flex-shrink:0}
@keyframes ac-wa-pulse{0%,100%{box-shadow:0 3px 16px rgba(34,197,94,.4),0 1px 0 rgba(255,255,255,.15) inset}50%{box-shadow:0 3px 24px rgba(34,197,94,.65),0 1px 0 rgba(255,255,255,.15) inset}}

/* ══ PHONE MOCKUP CAROUSEL ══════════════════════════════════════════════════ */
/* CSS custom property set by JS when theme changes so fades always match bg */
:root{--mockup-bg:#0d0d14}
body:not(.dark-mode){--mockup-bg:#f0ede8}

.mockup-section{padding:2.5rem 0 4rem;background:var(--mockup-bg);overflow:hidden;position:relative;transition:background .35s}
.mockup-header{text-align:center;padding:0 1.5rem 2rem;position:relative;z-index:2}
.mockup-eyebrow{display:inline-flex;align-items:center;gap:.5rem;background:rgba(249,115,22,.12);border:1px solid rgba(249,115,22,.25);color:#fb923c;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.35rem 1rem;border-radius:100px;margin-bottom:1.1rem}
.mockup-eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:#fb923c;flex-shrink:0;animation:mw-pulse 2s infinite}
@keyframes mw-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.mockup-header h2{font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:800;letter-spacing:-.04em;line-height:1.1;margin-bottom:.75rem;color:#fff}
body:not(.dark-mode) .mockup-header h2{color:#1c1917}
.mockup-header h2 em{font-style:normal;background:linear-gradient(135deg,#fb923c,#f97316);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.mockup-header p{font-size:.95rem;max-width:480px;margin:0 auto;color:rgba(255,255,255,.5)}
body:not(.dark-mode) .mockup-header p{color:#78716c}

/* Stage with edge fade — fades always match section bg */
.mockup-stage{position:relative;overflow:hidden;padding:1rem 0 2rem}
.mockup-stage::before,.mockup-stage::after{content:'';position:absolute;top:0;bottom:0;width:220px;z-index:3;pointer-events:none;transition:background .35s}
.mockup-stage::before{left:0;background:linear-gradient(to right,var(--mockup-bg) 0%,transparent 100%)}
.mockup-stage::after{right:0;background:linear-gradient(to left,var(--mockup-bg) 0%,transparent 100%)}

/* Track — animated strip sliding left */
.mockup-track{display:flex;gap:1.75rem;width:max-content;animation:mockupScroll var(--mockup-speed,35s) linear infinite;will-change:transform;padding:0 1.75rem}
.mockup-track:hover{animation-play-state:paused}
@keyframes mockupScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Phone frame */
.phone-mockup{flex-shrink:0;width:var(--pm-w,220px);height:var(--pm-h,440px);background:var(--pm-color,#0f0f1a);border-radius:38px;padding:12px 9px;position:relative;box-shadow:0 0 0 1.5px rgba(255,255,255,.07),0 32px 80px rgba(0,0,0,.55),0 0 0 8px rgba(255,255,255,.03),inset 0 1.5px 0 rgba(255,255,255,.12);cursor:default;transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .4s ease}
body:not(.dark-mode) .phone-mockup{box-shadow:0 0 0 1.5px rgba(0,0,0,.12),0 24px 60px rgba(0,0,0,.2),0 0 0 8px rgba(0,0,0,.03),inset 0 1.5px 0 rgba(255,255,255,.12)}
.phone-mockup:hover{transform:translateY(-10px) scale(1.035);box-shadow:0 0 0 1.5px rgba(249,115,22,.3),0 48px 100px rgba(0,0,0,.7),0 0 0 8px rgba(249,115,22,.05),inset 0 1.5px 0 rgba(255,255,255,.18)}

/* Dynamic island */
.pm-island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:72px;height:22px;background:var(--pm-color,#0f0f1a);border-radius:0 0 12px 12px;z-index:4;box-shadow:inset 0 -1px 0 rgba(255,255,255,.06)}
.pm-island::before{content:'';position:absolute;top:5px;left:50%;transform:translateX(-50%);width:40px;height:11px;background:#111;border-radius:100px;border:1px solid rgba(255,255,255,.06)}

/* Screen */
.pm-screen{width:100%;height:100%;background:#000;border-radius:28px;overflow:hidden;position:relative}

/* Iframe scaler inside screen */
.pm-iframe-scaler{position:absolute;top:0;left:0;transform-origin:top left;overflow:hidden}
.pm-iframe-scaler iframe{border:none;display:block;pointer-events:none;overflow:hidden}

/* Shimmer reflection overlay on screen */
.pm-screen::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,transparent 45%);pointer-events:none;border-radius:28px;z-index:2}

/* Side buttons */
.pm-btn-vol{position:absolute;left:-3.5px;top:90px;width:3.5px;border-radius:2px 0 0 2px;background:var(--pm-frame,#1a1a2e)}
.pm-btn-vol::before,.pm-btn-vol::after{content:'';position:absolute;left:0;width:3.5px;border-radius:2px 0 0 2px;background:var(--pm-frame,#1a1a2e)}
.pm-btn-vol{height:32px}
.pm-btn-vol::before{top:44px;height:32px}
.pm-btn-vol::after{top:88px;height:32px}
.pm-btn-pwr{position:absolute;right:-3.5px;top:110px;width:3.5px;height:55px;border-radius:0 2px 2px 0;background:var(--pm-frame,#1a1a2e)}

/* Glow under phone */
.phone-mockup::after{content:'';position:absolute;bottom:-28px;left:50%;transform:translateX(-50%);width:65%;height:28px;background:rgba(249,115,22,.1);filter:blur(18px);border-radius:50%;pointer-events:none;transition:background .4s}
.phone-mockup:hover::after{background:rgba(249,115,22,.25)}

/* Responsive */
@media(max-width:900px){
  .mockup-section{padding:2rem 0 3rem}
  .mockup-stage::before,.mockup-stage::after{width:100px}
}
@media(max-width:768px){
  .mockup-stage{
    overflow-x:scroll;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:.5rem;
    scrollbar-width:none
  }
  .mockup-stage::-webkit-scrollbar{display:none}
  .mockup-stage::before,.mockup-stage::after{display:none}
  .mockup-track{
    animation:none!important;
    width:max-content;
    padding:0 calc(50vw - var(--pm-w,220px)/2);
    gap:1.5rem
  }
  .phone-mockup{
    scroll-snap-align:center;
    touch-action:pan-x;
    opacity:.55;
    transform:scale(.83);
    transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .35s ease !important;
    cursor:default
  }
  .phone-mockup.is-active{opacity:1;transform:scale(1)}
  .phone-mockup:hover,.phone-mockup.is-active:hover{box-shadow:none !important}
}
@media(max-width:600px){
  .mockup-section{padding:1.5rem 0 2.5rem}
  .mockup-header h2{font-size:1.6rem}
}
/* ══ END PHONE MOCKUP CAROUSEL ══════════════════════════════════════════════ */
body.dark-mode .ac-wa-btn{background:linear-gradient(135deg,#22c55e,#16a34a)}
@media(max-width:680px){.ac-wa-btn{margin-left:0;width:100%;justify-content:center}}