/* COPGuia — la guía de la «i» (19/10/2026). Ver cop-guia.js */
html.cg-abierta, html.cg-abierta body{ overflow:hidden }
.cg{
  --cg-acc: 12,149,235;
  position:fixed; inset:0; z-index:1200;
  display:flex; flex-direction:column;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(var(--cg-acc),.16), transparent 62%),
    var(--bg, #070b12);
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
  opacity:0; transform:translateY(14px);
  transition: opacity .28s ease, transform .32s cubic-bezier(.2,.8,.2,1);
}
.cg.ver{ opacity:1; transform:none }
.cg[hidden]{ display:none }

.cg-cab{
  display:grid; grid-template-columns:3.4rem 1fr 3.4rem; align-items:center;
  padding: var(--gap-md, .7rem) var(--cop-aire, 16px);
}
.cg-num{ font:700 var(--fs-sm, .8rem)/1 Inter,sans-serif; color:var(--text-dim, #9aa3b5); letter-spacing:.04em }
.cg-num b{ color:rgb(var(--cg-acc)) }
.cg-tit{ margin:0; text-align:center; font:400 clamp(1.05rem, 5vw, 1.3rem)/1.1 Anton,Impact,sans-serif; letter-spacing:.02em; text-transform:uppercase; color:#fff; text-wrap:balance }
.cg-x{ justify-self:end; width:38px; height:38px; display:grid; place-items:center; border:0; border-radius:var(--r-card, 14px); background:transparent; color:var(--text-dim, #9aa3b5); cursor:pointer }
.cg-x svg{ width:20px; height:20px }
@media (hover:hover){ .cg-x:hover{ color:#fff } }

.cg-pista{
  flex:1 1 auto; min-height:0;
  display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain;
}
.cg-pista::-webkit-scrollbar{ display:none }
.cg-pista:focus{ outline:none }
.cg-paso{
  flex:0 0 100%; width:100%; max-width:100%; min-width:0; box-sizing:border-box; scroll-snap-align:center; scroll-snap-stop:always;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: var(--gap-lg, 1rem);
  padding: 0 calc(var(--cop-aire, 16px) + 4px) var(--gap-lg, 1rem);
  text-align:center; overflow-y:auto;
}
.cg-arte{
  position:relative; width:100%; max-width:360px; height:clamp(170px, 36dvh, 280px);
  display:grid; place-items:center;
}
.cg-pt{ margin:0; max-width:30ch; font:800 var(--fs-xl, 1.3rem)/1.2 Inter,sans-serif; color:#fff; text-wrap:balance }
.cg-pp{ margin:0; max-width:36ch; font:500 var(--fs-base, 1rem)/1.5 Inter,sans-serif; color:var(--text-dim, #b6bdcc); text-wrap:pretty }
.cg-pp b{ color:#fff; font-weight:700 }
.cg-pp em{ font-style:normal; color:rgb(var(--cg-acc)); font-weight:700 }

.cg-pie{ display:flex; flex-direction:column; align-items:center; gap:var(--gap-lg, 1rem); padding: var(--gap-sm, .5rem) var(--cop-aire, 16px) var(--gap-xl, 1.2rem) }
.cg-puntos{ display:flex; gap:var(--gap-sm, .5rem) }
.cg-pto{ width:8px; height:8px; padding:0; border:0; border-radius:99px; background:rgba(255,255,255,.22); cursor:pointer; transition:width .25s ease, background .25s ease }
.cg-pto.on{ width:24px; background:rgb(var(--cg-acc)) }
.cg-botones{ display:grid; grid-template-columns:minmax(5.5rem,auto) 1fr; gap:var(--gap-md, .7rem); width:100%; max-width:420px }
.cg-botones .cop-b{ width:100% }
.cg-atras:disabled{ opacity:.35; pointer-events:none }

/* ── piezas de las ilustraciones (las arma quien abre la guía) ── */
.cg-luz{ position:absolute; inset:12% 8%; border-radius:50%; background:radial-gradient(closest-side, rgba(var(--cg-acc),.30), transparent); filter:blur(8px) }
.cg-fila{ position:relative; display:flex; align-items:center; justify-content:center; gap:var(--gap-md, .7rem) }
.cg-col{ position:relative; display:flex; flex-direction:column; align-items:center; gap:var(--gap-sm, .5rem) }
.cg-cam{ width:84px; height:auto; display:block; filter:drop-shadow(0 8px 14px rgba(0,0,0,.45)) }
.cg-cam--s{ width:58px }
.cg-skin{ width:78px; height:78px; border-radius:var(--r-card, 14px); object-fit:cover; object-position:top; background:#101725; border:1px solid rgba(var(--cg-acc),.45) }
.cg-band{ width:46px; height:32px; border-radius:6px; object-fit:cover; box-shadow:0 4px 12px rgba(0,0,0,.4) }
.cg-div{ width:44px; height:auto }
.cg-ico{ width:64px; height:64px; display:block }
.cg-vs{ font:400 1.7rem/1 Anton,Impact,sans-serif; color:#fff; letter-spacing:.04em }
.cg-flecha{ width:26px; height:26px; color:rgb(var(--cg-acc)) }
.cg-rot{ font:700 var(--fs-xs, .72rem)/1.2 Inter,sans-serif; color:var(--text-dim, #9aa3b5); text-transform:uppercase; letter-spacing:.06em }
.cg-chip{ display:inline-flex; align-items:center; gap:.3rem; padding:.35rem .6rem; border-radius:var(--r-card, 14px); background:rgba(255,255,255,.06); font:800 var(--fs-sm, .8rem)/1 Inter,sans-serif; color:#fff }
.cg-chip b{ font:400 1.15rem/1 Anton,Impact,sans-serif; color:rgb(var(--cg-acc)) }
.cg-tabla{ width:100%; max-width:280px; display:flex; flex-direction:column; gap:6px }
.cg-tr{ display:grid; grid-template-columns:1.6rem 30px 1fr auto; align-items:center; gap:var(--gap-sm, .5rem); padding:.5rem .7rem; border-radius:var(--r-card, 14px); background:rgba(255,255,255,.045); font:700 var(--fs-md, .88rem)/1 Inter,sans-serif; color:#fff; text-align:left }
.cg-tr i{ font-style:normal; color:var(--text-dim, #9aa3b5) }
.cg-tr b{ font:400 1.1rem/1 Anton,Impact,sans-serif }
.cg-tr.yo{ background:rgba(var(--cg-acc),.16); box-shadow:inset 0 0 0 1px rgba(var(--cg-acc),.5) }
.cg-tr img{ width:30px; height:auto }
.cg-esc{ display:flex; align-items:flex-end; gap:6px }
.cg-esc img{ width:34px }

/* animaciones: corren sólo en el paso que se ve */
.cg-paso .cg-in{ opacity:0; transform:translateY(12px) scale(.94) }
.cg-paso.on .cg-in{ animation:cgIn .5s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(var(--d, 0) * 120ms + 80ms) }
@keyframes cgIn{ to{ opacity:1; transform:none } }
.cg-paso.on .cg-flota{ animation:cgIn .5s cubic-bezier(.2,.8,.2,1) forwards, cgFlota 3.2s ease-in-out .7s infinite; animation-delay:calc(var(--d, 0) * 120ms + 80ms), calc(var(--d, 0) * 120ms + 700ms) }
@keyframes cgFlota{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
.cg-paso.on .cg-sube{ animation:cgIn .5s cubic-bezier(.2,.8,.2,1) forwards, cgSube 3.2s ease-in-out 1.2s infinite }
@keyframes cgSube{ 0%,25%,100%{ transform:none } 45%,80%{ transform:translateY(calc(-100% - 6px)) } }
.cg-paso.on .cg-baja{ animation:cgIn .5s cubic-bezier(.2,.8,.2,1) forwards, cgBaja 3.2s ease-in-out 1.2s infinite }
@keyframes cgBaja{ 0%,25%,100%{ transform:none } 45%,80%{ transform:translateY(calc(100% + 6px)) } }
.cg-paso.on .cg-late{ animation:cgIn .5s cubic-bezier(.2,.8,.2,1) forwards, cgLate 1.8s ease-in-out 1s infinite; animation-delay:calc(var(--d, 0) * 120ms + 80ms), 1s }
@keyframes cgLate{ 0%,100%{ filter:none } 50%{ filter:drop-shadow(0 0 12px rgba(var(--cg-acc),.8)) } }
@media (prefers-reduced-motion: reduce){
  .cg, .cg-pto{ transition:none }
  .cg-paso .cg-in{ opacity:1; transform:none }
  .cg-paso.on .cg-in, .cg-paso.on .cg-flota, .cg-paso.on .cg-sube, .cg-paso.on .cg-baja, .cg-paso.on .cg-late{ animation:none }
}
@media (min-width:900px){
  .cg-arte{ max-width:420px }
}
.cg-ico svg{ width:100%; height:100%; display:block }