/* ===================== Portada del tablero de pacing — identidad GMO (negro + naranja) ===================== */
:root{
  --bg:#0c0c0c; --card:#141414; --card-2:#1a1a1a; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --ink:#ffffff; --muted:#8f8f8f; --accent:#f2982c; --accent-2:#ff7a00; --accent-hi:#ffb45c; --glow:242,152,44; --glow-2:255,122,0;
  --ok:#2fbf71; --warn:#f2b134; --bad:#ff5c4d;
  --meta:#4c6ef5; --google:#40c057; --tiktok:#e9ecef; --ga4:#ff922b; --tn:#339af0; --vtex:#f06595;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0; min-height:100%}
body.cover{background:var(--bg); color:var(--ink); font-family:var(--body); -webkit-font-smoothing:antialiased; overflow-x:hidden; display:flex; flex-direction:column; min-height:100vh}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* ---------- Fondo animado ---------- */
.bg{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none}
.bg__grid{position:absolute; inset:-40% -20% 0; transform:perspective(900px) rotateX(58deg); transform-origin:50% 100%;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:64px 64px; animation:grid-move 6s linear infinite;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 100%, #000 30%, transparent 75%); mask-image:radial-gradient(ellipse 70% 80% at 50% 100%, #000 30%, transparent 75%)}
@keyframes grid-move{from{background-position:0 0, 0 0} to{background-position:0 64px, 0 0}}
.bg__glow{position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; mix-blend-mode:screen}
.bg__glow--a{width:60vmax; height:60vmax; left:-18vmax; top:-24vmax; background:radial-gradient(circle, rgba(var(--glow),.55), rgba(var(--glow),0) 60%); animation:drift-a 18s ease-in-out infinite alternate}
.bg__glow--b{width:50vmax; height:50vmax; right:-16vmax; bottom:-22vmax; background:radial-gradient(circle, rgba(var(--glow-2),.35), rgba(var(--glow-2),0) 60%); animation:drift-b 22s ease-in-out infinite alternate}
@keyframes drift-a{from{transform:translate(0,0)} to{transform:translate(12vmax,8vmax)}}
@keyframes drift-b{from{transform:translate(0,0)} to{transform:translate(-10vmax,-9vmax)}}
.bg__scan{position:absolute; left:0; right:0; height:140px; top:-140px; background:linear-gradient(180deg, transparent, rgba(var(--glow),.06), transparent); animation:scan 9s linear infinite}
@keyframes scan{to{top:110%}}

/* ---------- Layout ---------- */
.cover__wrap{position:relative; z-index:1; flex:1; width:min(1180px, 100% - 48px); margin:0 auto; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:56px; align-items:center; padding:56px 0 32px}
.cover__intro{max-width:560px; animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.cover__demo{animation:rise .9s .15s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}

.cover__logo{display:block; width:230px; height:auto; margin:0 0 34px; filter:drop-shadow(0 0 24px rgba(var(--glow),.25))}
.cover__eyebrow{display:inline-flex; align-items:center; gap:10px; margin:0 0 18px; padding:6px 12px 6px 8px; border:1px solid var(--line-2); border-radius:999px; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:#cfcfcf; background:rgba(255,255,255,.03)}
.pulse{width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 rgba(var(--glow),.6); animation:pulse 2s ease-out infinite}
.pulse--ok{background:var(--ok); box-shadow:0 0 0 0 rgba(47,191,113,.6)}
@keyframes pulse{to{box-shadow:0 0 0 10px rgba(var(--glow),0)}}
.cover__title{font-family:var(--display); font-weight:800; font-size:clamp(44px, 6vw, 78px); line-height:.98; letter-spacing:-.02em; margin:0 0 20px}
.cover__title span{color:var(--accent); background:linear-gradient(90deg, var(--accent-hi), var(--accent) 45%, var(--accent-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.cover__lead{font-size:17px; line-height:1.55; color:#c9c9c9; margin:0 0 30px; max-width:480px}

.cta{display:inline-flex; align-items:center; gap:12px; padding:15px 22px 15px 18px; border-radius:14px; background:var(--accent); color:#0c0c0c; font-weight:600; font-size:16px; text-decoration:none; position:relative; isolation:isolate; overflow:hidden; box-shadow:0 12px 34px rgba(var(--glow),.32), inset 0 1px 0 rgba(255,255,255,.35); transition:transform .18s ease, box-shadow .18s ease}
.cta::after{content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform:translateX(-120%); animation:shine 4.5s 1.4s ease-in-out infinite; z-index:-1}
@keyframes shine{0%{transform:translateX(-120%)} 35%,100%{transform:translateX(120%)}}
.cta:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(var(--glow),.45), inset 0 1px 0 rgba(255,255,255,.35)}
.cta__g{width:22px; height:22px; background:#fff; border-radius:50%; padding:3px}
.cta__arrow{margin-left:4px; transition:transform .18s ease}
.cta:hover .cta__arrow{transform:translateX(4px)}
.cover__hint{margin:14px 0 0; font-size:13px; color:var(--muted)}

.cover__feats{list-style:none; margin:38px 0 0; padding:26px 0 0; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px}
.cover__feats li{display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--muted); line-height:1.35}
.cover__feats b{color:#fff; font-weight:600; font-size:13.5px; padding-left:10px; border-left:2px solid var(--accent)}
.cover__feats span{padding-left:12px}

.flashes{list-style:none; margin:0 0 18px; padding:0}
.flash{padding:10px 14px; border-radius:10px; font-size:13.5px; background:rgba(255,255,255,.06); border:1px solid var(--line-2)}
.flash--error{background:rgba(255,92,77,.12); border-color:rgba(255,92,77,.4)}
.flash--success{background:rgba(47,191,113,.12); border-color:rgba(47,191,113,.4)}

/* ---------- Maqueta del tablero ---------- */
.panel{background:linear-gradient(180deg, #171717, #111); border:1px solid var(--line-2); border-radius:18px; padding:18px 18px 14px; box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(var(--glow),.06), 0 0 60px rgba(var(--glow),.08); transform:perspective(1400px) rotateY(-6deg) rotateX(2deg); transition:transform .6s ease}
.cover__demo:hover .panel{transform:perspective(1400px) rotateY(-2deg) rotateX(0)}
.panel__head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px}
.panel__title{display:block; font-family:var(--display); font-weight:700; font-size:20px}
.panel__sub{display:block; font-size:12px; color:var(--muted); margin-top:2px}
.panel__live{display:inline-flex; align-items:center; gap:8px; font-size:11.5px; color:#bdbdbd; padding:5px 10px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.03); white-space:nowrap}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px}
.kpi{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:var(--card-2); border:1px solid var(--line); border-left-width:3px}
.kpi b{font-family:var(--display); font-size:26px; font-weight:800; min-width:34px; font-variant-numeric:tabular-nums}
.kpi span{display:flex; flex-direction:column; font-size:12.5px; font-weight:500}
.kpi small{color:var(--muted); font-weight:400; font-size:11px}
.kpi--bad{border-left-color:var(--bad)} .kpi--bad b{color:var(--bad)}
.kpi--warn{border-left-color:var(--warn)} .kpi--warn b{color:var(--warn)}
.kpi--ok{border-left-color:var(--ok)} .kpi--ok b{color:var(--ok)}
.rows{display:grid; gap:8px}
.row{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) auto; gap:12px; align-items:center; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.025); border:1px solid var(--line)}
.row__name{display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row__name span{display:flex; gap:4px}
.tag{font-style:normal; font-size:9.5px; font-weight:600; line-height:15px; padding:0 5px; border-radius:4px; color:#fff}
.tag--m{background:var(--meta)} .tag--g{background:var(--google)} .tag--t{background:#333; color:#fff} .tag--a{background:var(--ga4)} .tag--n{background:var(--tn)} .tag--v{background:var(--vtex)}
.bar{position:relative; display:grid; grid-template-columns:repeat(30,1fr); gap:2px; height:16px}
.bar i{display:block; border-radius:2px; background:rgba(255,255,255,.08); transition:background .35s ease, box-shadow .35s ease}
.bar.go i.on{background:var(--c); box-shadow:0 0 8px color-mix(in srgb, var(--c) 55%, transparent)}
.bar__exp{position:absolute; top:-4px; bottom:-4px; width:2px; left:calc(var(--exp) * 1%); background:#fff; border-radius:2px; opacity:0; transform:scaleY(.4); transition:opacity .5s 1.8s ease, transform .5s 1.8s ease}
.bar.go .bar__exp{opacity:.9; transform:none}
.row--ok{--c:var(--ok)} .row--warn{--c:var(--warn)} .row--bad{--c:var(--bad)}
.badge{font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; background:color-mix(in srgb, var(--c) 18%, transparent); color:var(--c); white-space:nowrap; font-variant-numeric:tabular-nums}
.panel__foot{display:flex; justify-content:space-between; gap:10px; margin-top:12px; font-size:11px; color:var(--muted)}
.legend{display:inline-flex; align-items:center; gap:6px}
.legend__mark{display:inline-block; width:2px; height:12px; background:#fff; border-radius:2px}

.cover__foot{position:relative; z-index:1; display:flex; gap:18px; justify-content:center; padding:18px; font-size:12px; color:var(--muted)}
.cover__foot a{color:var(--muted); text-decoration:none} .cover__foot a:hover{color:#fff}

/* ---------- Responsive y movimiento reducido ---------- */
@media (max-width: 980px){
  .cover__wrap{grid-template-columns:1fr; gap:36px; padding:36px 0 24px}
  .cover__intro{max-width:none}
  .panel{transform:none}
  .cover__feats{grid-template-columns:1fr; gap:12px}
}
@media (max-width: 560px){
  .cover__wrap{width:calc(100% - 32px)}
  .cover__logo{width:180px}
  .row{grid-template-columns:1fr; gap:8px}
  .badge{justify-self:start}
}
@media (prefers-reduced-motion: reduce){
  .bg__grid, .bg__glow, .bg__scan, .pulse, .cta::after, .cover__intro, .cover__demo{animation:none}
  .bar i, .bar__exp{transition:none} .bar .bar__exp{opacity:.9; transform:none}
}

/* Marca VC Digital: navy + teal (identidad de reportes VC) */
body.brand-vc{--bg:#1a2332; --card:#222e3f; --card-2:#27354a; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --accent:#4ecdc4; --accent-2:#2bb3aa; --accent-hi:#8fe6df; --glow:78,205,196; --glow-2:66,165,245; --muted:#9fb0bf}
body.brand-vc .panel{background:linear-gradient(180deg, #243247, #1c2839)}
body.brand-vc .cover__lead{color:#c5d0da}