/* /ofertas/ — Ofertas 3.0 (02-10-2026). Lienzo «El Nexo 3», página «producto», tablero «Ofertas 3.0».
   Va sobre gp-guia.css (.gg-*) y disco-digital.css (buscador .dd-srch, chips .dd-chip, «Cargar más» .dd-mas).
   Móvil primero: buscador, filtros, chollos de hoy (ticket del Nexo), Game Pass más barato, rejilla, Telegram y preguntas.
   El cian es la marca; verde solo para «Mínimo». Iconos XboxFluent. */
.of3{--gn:#5eff9f;--tg:#229ed9}
.of3 [hidden]{display:none!important}
.of3-top{display:flex;flex-direction:column;gap:12px;margin-top:14px}
@media (min-width:900px){.of3-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px}.of3-chips{flex-wrap:wrap;justify-content:flex-end}}
.of3-sec{display:flex;flex-direction:column;gap:12px;margin-top:22px;min-width:0}
.of3-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.of3-hd h2{margin:0;font:400 28px/.95 var(--fd);color:#fff;letter-spacing:.01em;text-transform:uppercase}
.of3-hd h2 span{color:var(--cy)}
.of3-hd small{display:block;margin-top:3px;font:500 12.5px/1.3 var(--fs);color:var(--mut)}
.of3-hd>a{flex:none;font:800 13px/1 var(--fs);color:var(--cy2)}
/* Flechas del raíl: solo con ratón (en táctil se desliza con el dedo) */
.of3-fl{display:none;flex:none;gap:6px}
.of3-fl button{width:36px;height:36px;border:0;padding:0;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--pan2);color:var(--cy2);font-size:15px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
@media (hover:hover) and (pointer:fine){.of3-fl{display:flex}.of3-fl button:hover{box-shadow:inset 0 0 0 1px rgba(0,212,255,.5)}}
@media (min-width:900px){.of3-hd h2{font-size:32px}}

/* Chollos de hoy + Game Pass: una columna en móvil, dos en PC */
.of3-dos{display:flex;flex-direction:column;min-width:0}
@media (min-width:1100px){.of3-dos{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:start}}

/* Raíl de tickets (se desliza con el dedo) */
.of3-rail{display:flex;gap:12px;overflow-x:auto;margin:0 -12px;padding:4px 12px 16px;scroll-snap-type:x mandatory;scroll-padding-inline:12px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.of3-rail::-webkit-scrollbar{display:none}
@media (min-width:1100px){.of3-rail{margin:0;padding:4px 2px 16px;scroll-padding-inline:2px}}

/* Ticket (el mismo del Nexo) */
.of3-tk{flex:none;width:min(300px,82vw);scroll-snap-align:start;border-radius:20px;background:var(--pan);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 22px 44px -28px rgba(0,212,255,.5);display:flex;flex-direction:column}
.of3-tk-art{position:relative;display:block;aspect-ratio:16/9;border-radius:20px 20px 0 0;overflow:hidden;background:radial-gradient(circle at 30% 20%,rgba(0,212,255,.22),var(--pan) 70%);-webkit-touch-callout:none}
.of3-tk-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform .5s ease}
.of3-tk-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,13,0) 36%,rgba(5,8,13,.55) 66%,var(--pan) 100%)}
.of3-tk-st{position:absolute;z-index:2;top:10px;left:10px;height:28px;padding:0 9px;border-radius:9px;display:flex;align-items:center;background:rgba(5,8,13,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.of3-tk-st img{display:block;height:14px;width:auto}
.of3-tk-hx{position:absolute;z-index:2;top:6px;right:10px;filter:drop-shadow(0 0 16px rgba(0,212,255,.7))}
.of3-tk-hx>span{width:64px;height:70px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(160deg,#b9f4ff,#00d4ff 55%,#0097c4);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#04121a;transform:rotate(-8deg)}
.of3-tk-hx b{font:400 25px/.9 var(--fd)}.of3-tk-hx small{font:800 9px/1 var(--fs);letter-spacing:.14em}
.of3-tk-t{position:absolute;z-index:2;left:14px;right:14px;bottom:8px;font:400 26px/.95 var(--fd);color:#fff;letter-spacing:.01em;text-shadow:0 2px 16px rgba(0,0,0,.8);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.of3-tk-sep{position:relative;display:block;height:22px}
.of3-tk-sep::before{content:"";position:absolute;left:20px;right:20px;top:10px;border-top:2px dashed rgba(255,255,255,.14)}
.of3-tk-sep i{position:absolute;top:0;width:22px;height:22px;border-radius:50%;background:var(--bg0);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.of3-tk-sep i:first-child{left:-11px}.of3-tk-sep i:last-child{right:-11px}
.of3-tk-b{display:flex;flex-direction:column;gap:10px;padding:0 14px 14px;flex:1}
.of3-tk-pr{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;margin:0}
.of3-tk-pr b{font:400 40px/.9 var(--fd);color:#fff;font-variant-numeric:tabular-nums}
.of3-tk-pr s{font:600 14px/1 var(--fs);color:var(--mut)}
.of3-tk-cta{display:flex;align-items:center;gap:10px;margin-top:auto}
.of3-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:46px;border-radius:14px;font:800 15px/1 var(--fs);background:var(--cy);color:#04121a!important;-webkit-tap-highlight-color:transparent}

/* Chips */
.of3-chs{display:flex;flex-wrap:wrap;gap:6px}
.of3-ch{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 8px;border-radius:8px;font:800 11px/1 var(--fs);letter-spacing:.05em;text-transform:uppercase;background:var(--pan2);color:#c3ccd6;white-space:nowrap}
.of3-ch .xg{font-size:12px}
.of3-ch.is-cy{background:rgba(0,212,255,.14);color:var(--cy2)}
.of3-ch.is-gp{background:rgba(255,255,255,.1);color:#fff}
.of3-ch.is-min{background:rgba(94,255,159,.13);color:var(--gn)}

/* Campana «Avísame si baja» */
.of3-bell{flex:none;width:44px;height:44px;border:0;padding:0;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--pan2);color:var(--cy2);font-size:17px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .12s,background .15s}
.of3-bell.is-on{background:rgba(0,212,255,.18);box-shadow:inset 0 0 0 1.5px var(--cy);color:#fff}
.of3-bell:active{transform:scale(.92)}
.of3-c .of3-bell{width:34px;height:34px;border-radius:10px;font-size:15px}

/* Game Pass más barato */
.of3-gp{display:flex;flex-direction:column;border-radius:18px;background:var(--pan);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);overflow:hidden}
.of3-pl{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid rgba(255,255,255,.06);color:var(--t)!important;-webkit-tap-highlight-color:transparent}
.of3-pl:first-child{border-top:0}
.of3-pl.is-top{background:radial-gradient(circle at 90% 0,rgba(0,212,255,.22),transparent 60%);box-shadow:inset 3px 0 0 var(--cy)}
.of3-pl-n{flex:1;min-width:0}
.of3-pl-n b{display:block;font:800 15px/1.2 var(--fs);color:#fff}
.of3-pl-n small{display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px;margin-top:4px;font:500 12px/1.3 var(--fs);color:var(--mut)}
.of3-pl-n small img{height:12px;width:auto;opacity:.9}
.of3-pl-pr{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right}
.of3-pl-pr b{font:400 30px/.9 var(--fd);color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.of3-pl-pr b i{font:600 12px/1 var(--fs);font-style:normal;color:var(--mut);margin-left:2px}
.of3-pl-pr span{display:flex;align-items:center;gap:6px}
.of3-pl-pr s{font:600 12px/1 var(--fs);color:var(--mut)}
.of3-pl-pr em{font-style:normal;padding:3px 6px;border-radius:6px;background:rgba(0,212,255,.14);color:var(--cy2);font:800 11px/1 var(--fs)}
.of3-pl-go{flex:none;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--pan2);color:var(--cy2);font-size:15px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.of3-pl.is-top .of3-pl-go{background:var(--cy);color:#04121a;box-shadow:none}
.of3-gp-ft{margin:0;padding:11px 14px;font:600 12.5px/1.45 var(--fs);color:var(--t2);background:var(--bg0)}
.of3-gp-ft a{color:var(--cy2);text-decoration:underline;text-underline-offset:2px}

/* Rejilla */
.of3-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:640px){.of3-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.of3-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}
@media (min-width:1180px){.of3-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.of3-c{display:flex;flex-direction:column;min-width:0;border-radius:16px;overflow:hidden;background:var(--pan);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.of3-c-im{position:relative;display:block;aspect-ratio:16/9;background:var(--pan2);-webkit-touch-callout:none}
.of3-c-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.of3-c-im em{position:absolute;top:7px;right:7px;padding:4px 7px 3px;border-radius:7px;background:var(--cy);color:#04121a;font:400 17px/1 var(--fd);font-style:normal}
.of3-c-bd{display:flex;flex-direction:column;gap:7px;padding:9px 10px 10px;flex:1}
.of3-c-t{margin:0;font:800 13.5px/1.2 var(--fs);min-height:32px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.of3-c-t a{color:#fff}
.of3-c-p{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 7px;margin:0}
.of3-c-p strong{font:400 25px/.9 var(--fd);color:#fff;font-variant-numeric:tabular-nums}
.of3-c-p s{font:600 11.5px/1 var(--fs);color:var(--mut)}
.of3-c-ft{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto}
.of3-c-st img{display:block;height:12px;width:auto;opacity:.85}
.of3-c-st .of3-st-tx{font:700 11.5px/1 var(--fs);color:var(--mut)}
.of3-mas{align-self:center;display:inline-flex;align-items:center;gap:6px;margin-top:4px}
.of3-mas span{color:var(--mut);font-weight:700}
.of3-mas.is-busy{opacity:.6;pointer-events:none}

/* Final: preguntas + Telegram + cómo elegimos */
.of3-fin{display:flex;flex-direction:column;gap:14px;margin-top:26px}
@media (min-width:900px){.of3-fin{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px;align-items:start}}
.of3-lado{display:flex;flex-direction:column;gap:14px;min-width:0}
.of3-tg{display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;color:var(--t)!important;background:radial-gradient(circle at 90% 0,rgba(34,158,217,.35),transparent 60%),var(--pan);box-shadow:inset 0 0 0 1px rgba(34,158,217,.4)}
.of3-tg-i{flex:none;width:42px;height:42px;border-radius:12px;background:var(--tg);display:flex;align-items:center;justify-content:center}
.of3-tg-i svg{width:21px;height:21px;fill:#fff}
.of3-tg-tx{flex:1;min-width:0}
.of3-tg-tx b{display:block;font:800 15px/1.2 var(--fs);color:#fff}
.of3-tg-tx small{font:500 12.5px/1.35 var(--fs);color:var(--t2)}
.of3-tg-b{flex:none;height:38px;padding:0 14px;border-radius:12px;background:var(--tg);color:#fff;display:flex;align-items:center;font:800 13px/1 var(--fs)}
.of3-seo{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:18px;background:var(--pan);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.of3-seo h2{margin:0;font:400 24px/1 var(--fd);color:#fff}
.of3-seo p{margin:0;font:500 14px/1.6 var(--fs);color:var(--t2)}
.of3-seo p b{color:#fff}
.of3-seo a{color:var(--cy2);text-decoration:underline;text-underline-offset:2px}
.of3-aff{font-size:12.5px!important;color:var(--mut)!important}

@media (hover:hover){
  .of3-tk:hover .of3-tk-art>img{transform:scale(1.07)}
  .of3-pl:hover{background:rgba(0,212,255,.06)}
  .of3-pl.is-top:hover{background:radial-gradient(circle at 90% 0,rgba(0,212,255,.3),transparent 60%)}
  .of3-c:hover{box-shadow:inset 0 0 0 1px rgba(0,212,255,.45)}
  .of3-c-t a:hover{color:var(--cy2)}
  .of3-bell:hover{background:#18212c}
  .of3-tg:hover{box-shadow:inset 0 0 0 1px rgba(34,158,217,.7)}
}
@media (prefers-reduced-motion:reduce){.of3-tk-art>img,.of3-bell{transition:none}}