/* Tienda TecnoEnLínea 1.0 (3-nov-2026): lo que la maqueta (tecno.css, rev. 22, sin tocar) no tenía porque era una sola
   página con capas: la fuente propia (la política de contenido no deja cargar Google Fonts), la ficha, el catálogo y
   Notebooks como PÁGINAS, las sugerencias del buscador, el pedido del carrito y la página de privacidad. Mismos tokens. */

@font-face { font-family: Archivo; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fuentes/archivo-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Archivo; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fuentes/archivo-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ── Piezas sueltas ─────────────────────────────────── */
/* El descuento a la vista (Puma 3-nov 12:39 «súper tibios» y 12:56): arriba el tachado grande con una raya verde fina
   y a su derecha «19% OFF»; abajo el precio y a su derecha «Ahorrás $ X»; el cartel de la foto, oscuro con el % verde. */
.t-lista { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 2px; }
.t-antes { font-size: 16.5px; font-weight: 600; color: #59615d; font-variant-numeric: tabular-nums;
  text-decoration-color: #16a34a; text-decoration-thickness: 1.5px; white-space: nowrap; }
.t-pct { font-style: normal; font-size: 12.5px; font-weight: 850; color: #fff; background: #16a34a; padding: 2px 7px; border-radius: 6px; letter-spacing: .01em; white-space: nowrap; }
.t-precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin-top: 0; }
.t-ahorro { font-size: 13px; font-weight: 750; color: #15803d; letter-spacing: 0; white-space: nowrap; }
.chips .chip-off { background: #17201c !important; color: #4ade80; font-size: 13px; font-weight: 850; padding: 5px 9px; border-radius: 8px; letter-spacing: .02em; box-shadow: 0 4px 12px #0003; }
/* Cartel flotante de la foto, tema CYBER MONDAY (Puma 3-nov: el número con % arriba y «OFF» abajo). PARA CAMBIAR EL TEMA al
   terminar el Cyber: sacar la clase «chip-off--cyber» en _macros.html y producto.html (vuelve el cartel oscuro de arriba), o
   retocar solo las variables --co-* de acá abajo. Apilado: no ensancha el cartel ni tapa la foto. Más chico (Puma 3-nov
   13:54: «tapa mucho la foto de los productos»): 14 px el número en la compu y 12 px en el celu, brillo corto. */
.chips .chip-off--cyber { --co-base: #07040f; --co-borde-a: #d946ef; --co-borde-b: #22d3ee; --co-num: #67e8f9; --co-off: #f0abfc; --co-brillo: #22d3ee66;
  display: inline-flex; flex-direction: column; align-items: center; gap: 0; padding: 3px 6px 4px; border-radius: 7px; line-height: 1; letter-spacing: 0;
  border: 1.5px solid transparent; color: var(--co-num);
  background: linear-gradient(var(--co-base), var(--co-base)) padding-box, linear-gradient(135deg, var(--co-borde-a), var(--co-borde-b)) border-box !important;
  box-shadow: 0 0 6px var(--co-brillo), 0 2px 6px #0005; }
.chip-off--cyber b { font-size: 14px; font-weight: 850; font-variant-numeric: tabular-nums; text-shadow: 0 0 6px var(--co-brillo); }
.chip-off--cyber i { font-style: normal; font-size: 7.5px; font-weight: 800; letter-spacing: .2em; margin: 1px -.2em 0 0; color: var(--co-off); }
.fi-ahorro { font-size: 16px; font-weight: 800; color: #15803d; white-space: nowrap; }
.t-sin-foto { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; font-weight: 800; letter-spacing: -.03em; color: #c3c9c5; text-transform: uppercase; }
.nb-stk .a-num-largo { font-size: .82rem; }
.nb-cuerpo h3 a { color: inherit; }
.btn[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; }
.cyber-oferta { text-decoration: none; }
.pie-fin { flex-wrap: wrap; gap: 8px 20px; }

/* ── Migas ──────────────────────────────────────────── */
.cat-miga { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 16px; font-size: 13px; color: var(--muted); }
.cat-miga a:hover { color: var(--ink); text-decoration: underline; }
.cat-miga b { color: var(--ink); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60ch; }

/* ── Catálogo (búsqueda, categoría, marca, ambiente, ofertas) ── */
.cat-hero { margin-top: 12px; border-radius: 18px; overflow: hidden; height: 170px; }
.cat-hero h1 { font-size: 32px; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.cat-hero-liso { background: radial-gradient(120% 140% at 85% 0%, #2f5f52 0%, #17201c 60%); }
.cat-hero-liso::before { display: none; }
/* Sin foto de ambiente (marca, búsqueda, Ofertas y las categorías sin subcategorías), el cartel en UN renglón (Puma
   3-nov: el de 170 px se comía un tercio de la pantalla de 554): ceja, título y bajada en fila; lo que no entra, «…»
   (primero se corta la bajada). Las dos clases: que las medidas de tablet y celu de `.cat-hero` no lo agranden. */
.cat-hero.cat-hero-liso { height: auto; min-height: 56px; border-radius: 14px; }
.cat-hero.cat-hero-liso > div { display: flex; align-items: baseline; gap: 12px; width: 100%; min-width: 0; padding: 13px 20px; }
.cat-hero.cat-hero-liso small { flex: none; }
.cat-hero.cat-hero-liso h1 { flex: 0 1 auto; min-width: 0; font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-hero.cat-hero-liso span { flex: 0 100 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* «Hacela a tu medida» (Puma 3-nov 22:01: «ponelo más grande la imagen y poné una imagen PRO de un disco REAL»): la
   foto del tipo de componente (RAM, M.2, SSD o HDD, sin marcas) a todo el ancho de la tarjeta; «Sin agregar», su dibujo. */
.nbf-op .nbf-op-foto { height: 78px; margin: 0 0 7px; border-radius: 9px; overflow: hidden; background: #eef0f6; font-size: 0; }
.nbf-op .nbf-op-foto .nbf-op-img { width: 100%; height: 100%; max-height: none; object-fit: cover; mix-blend-mode: normal; }
.cat-subs-cab { display: flex; align-items: baseline; gap: 12px; margin-top: 12px; }
.cat-subs-cab h1 { font-size: 28px; font-weight: 800; letter-spacing: -.04em; }
.cat-subs-cab span { font-size: 14px; color: var(--muted); }
.cat-subs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.cat-sub { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 10px 12px; border: 1.5px solid var(--line); border-radius: 16px; background: #fff; text-align: center; transition: border-color .2s, box-shadow .2s, transform .2s; }
.cat-sub:hover { border-color: #c9cfcb; box-shadow: 0 10px 24px #10181412; transform: translateY(-2px); }
.cat-sub.activa { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cat-sub-foto { width: 100%; height: 110px; display: grid; place-items: center; margin-bottom: 6px; }
.cat-sub-foto img { max-width: 80%; max-height: 104px; object-fit: contain; }
.cat-sub-foto svg { width: 46px; height: 46px; fill: none; stroke: var(--ink); stroke-width: 1.6; }
.cat-sub b { font-size: 14.5px; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; }
.cat-sub small { font-size: 12px; color: var(--muted); }
.cat-chips { padding: 14px 0 4px; }
.cat-chips a { flex: none; min-height: 40px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 99px; border: 1.5px solid var(--line); background: #fff; font-size: 13.5px; font-weight: 650; white-space: nowrap; }
.cat-chips a span { color: var(--muted); font-weight: 500; margin-left: 4px; font-variant-numeric: tabular-nums; }
.cat-chips a:hover { border-color: #b9c0bb; }
.cat-chips a[aria-current="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.cat-chips a[aria-current="true"] span { color: #c3cbc6; }
.cat-herr { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.cat-cuenta { font-size: 14px; color: var(--muted); }
.cat-cuenta b { color: var(--ink); }
.cat-orden { display: flex; gap: 6px; flex-wrap: wrap; }
.cat-orden a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; font-size: 13px; font-weight: 600; }
.cat-orden a[aria-current="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cat-grilla { padding: 14px 0 0; }
.cat-grilla .tarjeta { scroll-snap-align: none; }
.cat-paginas { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 26px; font-size: 14px; color: var(--muted); }
.cat-paginas .btn { align-self: center; }
.no-hay { margin: 26px auto 0; max-width: 620px; padding: 34px 20px; text-align: center; display: grid; gap: 10px; justify-items: center; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.no-hay b { color: var(--ink); font-size: 19px; letter-spacing: -.02em; }
.no-hay small { font-size: 11px; letter-spacing: .2em; font-weight: 700; color: var(--accent); }
.no-hay-bot { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.no-hay-bot .btn { align-self: center; }
.no-hay-404 { padding-block: 60px; }
.no-hay-404 b { font-size: 26px; }

/* ── La ficha como página ───────────────────────────── */
.ficha-pagina { width: 100%; max-height: none; overflow: visible; margin-top: 12px; box-shadow: 0 1px 2px #0000000a; border: 1px solid var(--line); }
/* En la compu (Puma, 3-nov: «que la galería de fotos se vea sin hacer scroll»): la foto principal toma el alto que
   queda en la pantalla (cabecera, migas, márgenes y la tira de miniaturas), así foto y miniaturas entran en la primera
   vista también en 1.166 × 554. La de notebook tiene arriba su cabecera (marca, procesador y título): un poco menos. */
@media (min-width: 901px) {
  .ficha-pagina .fi-galeria { top: 96px; }            /* pegada bajo la cabecera */
  .ficha-pagina .fi-arriba { padding-top: 20px; }
  .ficha-pagina .gal-main { aspect-ratio: auto; height: clamp(230px, calc(100vh - 290px), 640px); }
  .ficha-pagina.ficha-nb .gal-main { height: clamp(220px, calc(100vh - 330px), 600px); }
  .ficha-pagina .gal-tira { margin-top: 8px; }
  .ficha-pagina .gal-tira button { width: 60px; height: 60px; border-radius: 10px; }
}
.ficha-pagina .fi-miga { padding-right: 0; }
.ficha-pagina .nbf-cab { padding-right: 24px; }
.fi-lista { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 14px; color: #4a524e; }
.fi-antes { font-size: 21px; font-weight: 650; color: #4a524e; font-variant-numeric: tabular-nums; text-decoration-color: #16a34a; text-decoration-thickness: 1.5px; }
.fi-monto { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.fi-precio { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fi-pct { font-style: normal; flex: none; padding: 3px 10px; border-radius: 8px; background: #16a34a; color: #fff; font-size: 15px; font-weight: 850; letter-spacing: .01em; white-space: nowrap; }
.nbf-nota { margin-top: 10px; font-size: 12px; line-height: 1.45; opacity: .8; }
.fi-pagina .fila { padding-inline: 0; }

/* ── Notebooks como página ──────────────────────────── */
.nbp-pagina { background: #f4f5f6; margin-top: 0; padding-bottom: 10px; }
.nbp-caja-pagina { height: auto; overflow: visible; max-width: 1480px; margin-inline: auto; }
.nbp-caja-pagina .nbp-barra { position: static; background: transparent; backdrop-filter: none; border-bottom: 0; flex-wrap: wrap; }
.nbp-caja-pagina .nbp-barra h1 { font-size: 26px; font-weight: 800; letter-spacing: -.04em; }
.nbp-carta h3 { color: inherit; }

/* ── Sugerencias del buscador ───────────────────────── */
.sugerencias { position: fixed; z-index: 45; max-height: min(70vh, 520px); overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 60px #10181426; padding: 6px; overscroll-behavior: contain; }
.sug-it { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; min-height: 60px; padding: 6px 10px; border-radius: 10px; }
.sug-it:hover, .sug-it.activa { background: var(--canvas); }
.sug-foto { width: 52px; height: 52px; border-radius: 8px; background: #fff; border: 1px solid #eef0ee; display: grid; place-items: center; overflow: hidden; }
.sug-foto img { width: 86%; height: 86%; object-fit: contain; }
.sug-txt { min-width: 0; display: grid; gap: 2px; }
.sug-txt b { font-size: 14px; font-weight: 550; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sug-txt small { font-size: 12px; color: var(--muted); }
.sug-it strong { font-size: 15.5px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sug-todo { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; margin-top: 4px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 650; }
.sug-todo:hover, .sug-todo.activa { background: var(--canvas); border-radius: 0 0 10px 10px; }
.sug-nada { padding: 16px 12px; font-size: 14px; color: var(--muted); }

/* ── El pedido del carrito ──────────────────────────── */
.c-tit a:hover { text-decoration: underline; }
.c-no .c-pu { color: #b42318; font-weight: 600; }
.c-no .c-foto img { opacity: .45; }
.c-error { font-size: 13px; line-height: 1.45; color: #b42318; background: #fef3f2; border: 1px solid #fecdca; border-radius: 10px; padding: 9px 12px; }
.c-listo { display: grid; gap: 3px; padding: 10px 12px; border-radius: 10px; background: #ecfdf3; border: 1px solid #abefc6; font-size: 13px; color: #085d3a; }
.c-listo b { font-size: 15px; }
.carrito-pie .btn svg { width: 20px; height: 20px; }
.c-vaciar { align-self: center; min-height: 44px; padding: 0 12px; font-size: 13px; color: var(--muted); text-decoration: underline; }

/* ── Páginas legales ────────────────────────────────── */
.legal { max-width: 820px; padding-top: 28px; font-size: 15.5px; line-height: 1.65; color: #2b332f; }
.legal h1 { font-size: 34px; font-weight: 800; letter-spacing: -.04em; color: var(--ink); }
.legal-fecha { font-size: 13.5px; color: var(--muted); margin: 4px 0 18px; }
.legal h2 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); margin: 26px 0 6px; }
.legal p + p { margin-top: 10px; }
.legal-contacto { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; color: #17784a; text-decoration: underline; }

@media (max-width: 900px) {
  .cat-hero { height: 150px; }
  .cat-hero h1 { font-size: 26px; }
}
@media (max-width: 760px) {
  .cat-miga { padding-top: 12px; font-size: 12.5px; }
  .cat-miga b { max-width: 100%; }
  .cat-hero { height: 128px; border-radius: 14px; }
  .cat-hero h1 { font-size: 22px; }
  .cat-hero > div { padding: 14px 16px; }
  .cat-hero.cat-hero-liso { min-height: 48px; }
  .cat-hero.cat-hero-liso > div { gap: 10px; padding: 11px 14px; }
  .cat-hero.cat-hero-liso h1 { font-size: 18px; }
  .cat-hero.cat-hero-liso span { display: none; }
  .cat-chips { flex-wrap: nowrap; }
  .t-antes { font-size: 13.5px; } .t-pct { font-size: 10.5px; padding: 1px 5px; } .t-lista { gap: 3px 6px; }
  .t-ahorro { font-size: 11.5px; } .chips .chip-off { font-size: 11px; padding: 3px 7px; }
  .tarjeta .chips { left: 6px; top: 6px; }
  .chips .chip-off--cyber { padding: 2px 5px 3px; border-radius: 6px; } .chip-off--cyber b { font-size: 12px; } .chip-off--cyber i { font-size: 6.5px; }
  .cat-subs-cab h1 { font-size: 22px; }
  .cat-subs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 38%; overflow-x: auto; scrollbar-width: none; gap: 8px; }
  .cat-sub-foto { height: 84px; } .cat-sub-foto img { max-height: 80px; }
  .cat-sub b { font-size: 13px; }
  .cat-herr { flex-direction: column; align-items: flex-start; }
  .cat-orden { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .cat-orden a { flex: none; min-height: 44px; }
  .cat-grilla { gap: 10px; padding-top: 12px; }
  .cat-paginas { gap: 10px; font-size: 13px; }
  /* la ficha en página: sin el alto fijo de la capa; la compra queda fija abajo (sin el botón flotante encima) */
  .ficha-pagina { height: auto; border-radius: 14px; padding-bottom: 0; margin-top: 10px; }
  .pag-ficha main { padding-bottom: 84px; }
  .pag-ficha .wa-flota { display: none; }
  .ficha-pagina .nbf-cab { padding-right: 14px; }
  .fi-pagina { padding-inline: 10px; }
  .fi-pagina .fila { padding-inline: 0; }
  .nbp-caja-pagina .nbp-barra h1 { font-size: 22px; }
  .sugerencias { left: 8px !important; width: calc(100vw - 16px) !important; }
  .sug-it { grid-template-columns: 44px 1fr auto; gap: 10px; }
  .sug-foto { width: 44px; height: 44px; }
  .legal { font-size: 15px; padding-top: 20px; }
  .legal h1 { font-size: 27px; }
}

/* La cabecera de /ofertas durante el Cyber (Puma 3-nov 14:31: «algo superador, para aprovechar el espacio»; sin fechas): el
   CYBER / MONDAY de neón de la portada, una vidriera de 4 productos reales que flotan y «HASTA N% OFF» gigante. Los
   productos y el % salen de `tecno.cyber_vidriera`. En la compu entran 4, 3 o 2 según el ancho; en el celu, abajo, los 4. */
.ofc { position: relative; overflow: hidden; margin-top: 12px; height: 220px; border-radius: 18px; color: #fff;
  display: flex; align-items: center; gap: 22px; padding: 0 3.5% 28px;
  background: radial-gradient(70% 120% at 85% 20%, #3b0a5c 0%, transparent 60%), radial-gradient(60% 120% at 10% 100%, #06343a 0%, transparent 60%), #07040f; }
.ofc-txt { display: flex; flex-direction: column; flex: none; }
.ofc-txt small { font-size: 13px; letter-spacing: .45em; text-transform: uppercase; color: #67e8f9; font-weight: 700; margin-bottom: 6px; text-shadow: 0 0 10px #22d3ee; }
.ofc-txt b { position: relative; font-size: 56px; line-height: .86; font-weight: 900; letter-spacing: -.02em; font-style: italic; color: #fff;
  text-shadow: 0 0 6px #fff, 0 0 18px #f0abfc, 0 0 38px #d946ef, 0 0 70px #a21caf; animation: neon 5s infinite; }
.ofc-txt b + b { color: #e0f7ff; text-shadow: 0 0 6px #fff, 0 0 18px #67e8f9, 0 0 38px #06b6d4, 0 0 70px #0e7490; animation-delay: -2.3s; }
.ofc-txt b::after { content: attr(data-t); position: absolute; left: 3px; top: 0; color: #ff2fb9; opacity: .55; mix-blend-mode: screen; clip-path: inset(0 0 62% 0); animation: glitch 4s steps(1) infinite; }
.ofc-vidriera { flex: 1; min-width: 0; display: flex; justify-content: center; gap: 14px; }
.ofc-prod { position: relative; width: 124px; flex: none; display: flex; flex-direction: column; padding: 5px 5px 7px; border-radius: 14px; color: #fff; text-decoration: none;
  border: 1.5px solid transparent; background: linear-gradient(#0c0718, #0c0718) padding-box, linear-gradient(135deg, #d946ef, #22d3ee) border-box;
  box-shadow: 0 0 14px #d946ef40; animation: ofc-flota 5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.25s); transition: transform .2s, box-shadow .2s; }
.ofc-prod:hover { transform: translateY(-4px); box-shadow: 0 0 22px #d946ef8c, 0 0 36px #22d3ee4d; }
.ofc-prod:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; }
.ofc-foto { display: grid; place-items: center; height: 96px; border-radius: 10px; background: #fff; overflow: hidden; }
.ofc-foto img { max-width: 88%; max-height: 86px; object-fit: contain; }
.ofc-pct { position: absolute; top: 9px; left: 9px; padding: 2px 6px; border-radius: 6px; background: #07040f; color: #67e8f9; font-size: 10.5px; font-weight: 900; letter-spacing: .02em; box-shadow: 0 0 8px #22d3ee66; white-space: nowrap; }
.ofc-prod strong { margin-top: 6px; text-align: center; font-size: 15px; font-weight: 850; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 0 8px #d946ef99; }
@keyframes ofc-flota { 50% { translate: 0 -6px; } }
.ofc-hasta { flex: none; display: flex; flex-direction: column; align-items: center; line-height: .9; }
.ofc-hasta small { font-size: 13px; font-weight: 800; letter-spacing: .4em; padding-left: .4em; text-transform: uppercase; color: #f0abfc; text-shadow: 0 0 8px #d946ef; }
.ofc-hasta b { font-size: 78px; font-weight: 900; letter-spacing: -.04em; font-style: italic; font-variant-numeric: tabular-nums; color: #e0f7ff;
  text-shadow: 0 0 6px #fff, 0 0 18px #67e8f9, 0 0 38px #06b6d4, 0 0 70px #0e7490; animation: neon 5s infinite; animation-delay: -1.1s; }
.ofc-hasta i { font-style: normal; font-size: 24px; font-weight: 900; letter-spacing: .3em; padding-left: .3em; color: #fff; text-shadow: 0 0 6px #fff, 0 0 18px #f0abfc, 0 0 38px #d946ef; }
@media (max-width: 1180px) { .ofc-prod:nth-child(4) { display: none; } }
@media (max-width: 980px) { .ofc-prod:nth-child(3) { display: none; } .ofc-txt b { font-size: 44px; } .ofc-hasta b { font-size: 60px; } }
@media (max-width: 760px) {
  .ofc { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "txt hasta" "vid vid"; height: auto;
    border-radius: 14px; padding: 14px 12px 32px; gap: 12px 8px; }
  .ofc-txt { grid-area: txt; } .ofc-hasta { grid-area: hasta; } .ofc-vidriera { grid-area: vid; justify-content: space-between; gap: 6px; }
  .ofc-txt small { font-size: 8.5px; letter-spacing: .3em; margin-bottom: 3px; }
  .ofc-txt b { font-size: 32px; }
  .ofc-hasta small { font-size: 9px; } .ofc-hasta b { font-size: 46px; } .ofc-hasta i { font-size: 14px; }
  .ofc-prod, .ofc-prod:nth-child(3), .ofc-prod:nth-child(4) { display: flex; }
  .ofc-prod { width: auto; flex: 1 1 0; min-width: 0; padding: 3px 3px 5px; border-radius: 10px; }
  .ofc-foto { height: 66px; border-radius: 7px; } .ofc-foto img { max-height: 60px; }
  .ofc-pct { top: 6px; left: 6px; padding: 1px 4px; font-size: 8px; border-radius: 4px; }
  .ofc-prod strong { margin-top: 4px; font-size: 11.5px; }
  .ofc .cyber-cinta { height: 20px; } .ofc .cyber-cinta > span { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .ofc-txt b, .ofc-txt b::after, .ofc-hasta b, .ofc-prod { animation: none !important; } }

/* Memorias RAM partidas en dos (Puma 3-nov 14:51: «la mitad para notebook y la otra para PC, con imagen en alta calidad,
   explicando cuál es DIMM y SO-DIMM»): cada mitad con su imagen de fondo, el formato, el nombre, la explicación y el
   botón; en el celu, la imagen arriba y el texto abajo, lado a lado. */
.mitades { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.mitad { position: relative; overflow: hidden; height: 168px; border-radius: 18px; color: #fff; text-decoration: none; background: #0b100e;
  display: flex; align-items: center; outline: 3px solid transparent; outline-offset: 2px; transition: outline-color .2s; }
.mitad-img { position: absolute; top: 0; right: 0; bottom: 0; width: 54%; background-size: cover; background-position: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); transition: transform .5s; }
.mitad-txt { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 5px; width: 48%; padding: 16px 0 16px 24px; }
.mitad-fmt { align-self: flex-start; padding: 3px 10px; border-radius: 99px; border: 1px solid #ffffff4d; background: #ffffff14; font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.mitad b { font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.mitad small { font-size: 13.5px; line-height: 1.35; color: #d5ddd9; }
.mitad-cta { margin-top: 4px; font-size: 14px; font-weight: 750; color: #6ee7b7; }
.mitad:hover .mitad-img { transform: scale(1.04); }
.mitad.activa { outline-color: var(--accent); }
.mitades-todas { margin-left: auto; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .mitades { gap: 8px; }
  .mitad { height: auto; flex-direction: column; align-items: stretch; border-radius: 14px; }
  .mitad-img { position: relative; inset: auto; width: auto; height: 84px; -webkit-mask-image: none; mask-image: none; }
  .mitad-txt { width: auto; padding: 9px 10px 11px; gap: 3px; }
  .mitad-fmt { font-size: 10px; padding: 2px 7px; }
  .mitad b { font-size: 15.5px; } .mitad small { font-size: 12px; line-height: 1.35; } .mitad-cta { font-size: 12.5px; }
}

/* Las etiquetas de la tarjeta (Puma 3-nov 15:38: «Para notebook / Para PC»; en los discos NVMe, 2242…). Arriba a la
   izquierda, en la MISMA fila que el % de descuento y a su derecha; sin %, arrancan en la esquina (Puma 3-nov 16:00: «abajo
   no se ve bien… en negro y blanco no me gusta»). Un color por tarjeta: violeta para el uso (con su dibujito), cian para
   los datos del disco; los dos tonos son los del cartel Cyber, sobre blanco para no ensuciar la foto. */
.t-foto { position: relative; }
.t-arriba { position: absolute; z-index: 2; left: 10px; top: 10px; right: 10px; display: flex; align-items: flex-start; gap: 6px; pointer-events: none; }
.t-arriba .chips { position: static; flex: none; }
/* min-height = el alto del cartel del %: con o sin %, un renglón de etiquetas queda centrado a la misma altura en toda la
   fila; si son muchas y bajan a un 2.º renglón, el primero queda a la par del %. */
.t-tags { display: flex; flex-wrap: wrap; align-items: center; align-content: center; gap: 4px; min-width: 0; min-height: 32px; }
.t-tag { display: inline-flex; align-items: center; gap: 4px; font-style: normal; padding: 3px 8px 3px 7px; border-radius: 999px; white-space: nowrap;
  font-size: 11px; font-weight: 750; letter-spacing: .01em; line-height: 1.25;
  background: #f0fbfd; color: #0b6a7e; border: 1px solid #a8e6f0; box-shadow: 0 2px 6px #0e74901a; }
.t-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: linear-gradient(135deg, #22d3ee, #0891b2); flex: none; }
.t-tag-uso { background: linear-gradient(135deg, #f1efff, #f9f0ff); color: #4f2fc4; border-color: #d4c9fb; box-shadow: 0 2px 6px #6d28d91a; }
.t-tag-uso::before { content: none; }
.t-tag-uso svg { width: 13px; height: 13px; flex: none; fill: none; stroke: #7c5cf5; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
  .t-arriba { left: 6px; top: 6px; right: 6px; gap: 4px; } .t-tags { gap: 3px; min-height: 27px; }
  .t-tag { font-size: 9.5px; padding: 2px 6px 2px 5px; gap: 3px; } .t-tag::before { width: 4px; height: 4px; }
  .t-tag-uso svg { width: 11px; height: 11px; }
}

/* Las marcas con su logo oficial y sus colores (Puma 3-nov 15:41) en la tarjeta y en la ficha; un logo que es solo un
   símbolo va con el nombre al lado; sin logo, el nombre como siempre. En la ficha, solo la marca (sin «Categoría ›»). */
.t-marca { display: flex; align-items: center; gap: 6px; min-height: 18px; }
.t-logo { display: block; height: 17px; width: auto; max-width: 96px; object-fit: contain; object-position: left center; }
.t-logo-sim { height: 18px; max-width: 22px; }
.t-logo-cuad { height: 24px; margin: -3px 0; }
.fi-logo { display: block; height: 26px; width: auto; max-width: 150px; object-fit: contain; object-position: left center; }
.fi-logo-sim { height: 26px; max-width: 30px; }
.fi-logo-cuad { height: 36px; }
.fi-miga:has(.fi-logo) { gap: 8px; }
@media (max-width: 760px) { .t-logo { height: 14px; max-width: 80px; } .t-logo-sim { height: 15px; } .t-logo-cuad { height: 20px; }
  .fi-logo { height: 22px; } .fi-logo-cuad { height: 30px; } }

/* «Para notebook / Para PC» con descuento (Puma 3-nov 16:40 y 17:07: «igual, mismo formato y tamaño, pero abajo a la
   derecha»): la misma pastilla de arriba, en la esquina de abajo a la derecha de la foto; sin descuento va arriba. */
.t-uso-abajo { position: absolute; z-index: 2; right: 10px; bottom: 10px; display: flex; pointer-events: none; }
@media (max-width: 760px) { .t-uso-abajo { right: 6px; bottom: 6px; } }

/* Arriba de la grilla, con tarjetas de subcategoría o las mitades de RAM (Puma 3-nov 17:23: «optimizá el espacio, sacá el
   título si ya seleccionamos la card, que quede más llamativa la elegida y el orden a la derecha, uno abajo del otro»): las
   tarjetas (o las mitades) y, a la derecha, el orden en columna; en el celu, el orden abajo en un renglón. Con chips
   (sección sin subcategorías), chips y orden en el mismo renglón. */
.cat-top { display: flex; align-items: stretch; gap: 14px; margin-top: 14px; }
.cat-top > .cat-subs, .cat-top > .mitades { flex: 1; min-width: 0; margin-top: 0; }
.cat-top > .cat-subs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.cat-orden-col { flex: none; width: 148px; display: flex; align-items: center; }
.cat-orden-col .cat-orden { flex-direction: column; flex-wrap: nowrap; width: 100%; gap: 8px; }
.cat-orden-col .cat-orden a { justify-content: center; min-height: 44px; }
.cat-herr-chips { margin-top: 14px; flex-wrap: nowrap; }
.cat-herr-chips .cat-chips { margin-top: 0; flex: 1; min-width: 0; }
/* La tarjeta elegida, bien a la vista en blanco y negro (Puma 3-nov 18:11: «ni azul ni fondo rojo: negro y blanco con
   más notoriedad, algo más actual»): la tarjeta en negro con el nombre en blanco, la foto en su recuadro blanco, un poco
   levantada y con su tilde blanco. Colores fijos, no los del acento. */
.cat-sub.activa { position: relative; border-color: #111; background: #111; box-shadow: 0 14px 30px #0000003d; transform: translateY(-3px); }
.cat-sub.activa .cat-sub-foto { background: #fff; border-radius: 11px; }
.cat-sub.activa b { color: #fff; }
.cat-sub.activa .cat-sub-foto svg { stroke: #111; }
.cat-sub.activa::after { content: "✓"; position: absolute; top: 7px; right: 7px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: #111; font-size: 12px; font-weight: 900; box-shadow: 0 2px 6px #0000004d; }
.mitad.activa { outline: 3px solid #111; outline-offset: 3px; box-shadow: 0 14px 30px #00000047; }
.mitad.activa::after { content: "✓"; position: absolute; z-index: 2; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: #111; font-size: 13px; font-weight: 900; }
@media (max-width: 760px) {
  .cat-top { flex-direction: column; gap: 10px; margin-top: 10px; }
  .cat-top > .cat-subs { grid-auto-columns: 38%; position: relative; padding: 4px 3px 6px; }
  .cat-sub.activa { transform: none; }
  .cat-orden-col { width: auto; }
  .cat-orden-col .cat-orden { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .cat-orden-col .cat-orden a { flex: 1 0 auto; }
  .cat-herr-chips { flex-direction: column; align-items: stretch; gap: 8px; }
}

/* La generación de la memoria (Puma 3-nov 18:46): pastilla negra arriba, a la derecha del % (o de «Para notebook / PC»),
   con su «i»; con el mouse encima (o un toque en el celu) abre el globo con el aviso de compatibilidad, a lo ancho de la
   foto, debajo del renglón de arriba. */
/* 19:07 (Puma: «los negros no me gustan, más actuales»): naranja suave, el color de «prestá atención», con su «i». */
.t-tag-ddr { position: static; pointer-events: auto; cursor: help; background: linear-gradient(135deg, #fff7ed, #ffedd5); color: #9a3412;
  border-color: #fdba74; box-shadow: 0 2px 6px #f973161f; }
.t-tag-ddr::before { content: none; }
.t-tag-ddr::after { content: "i"; display: grid; place-items: center; width: 13px; height: 13px; margin-left: 2px; border-radius: 50%;
  background: #f97316; color: #fff; font-size: 9px; font-weight: 900; font-style: italic; font-family: Georgia, serif; }
.t-globo { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 5; padding: 9px 11px; border-radius: 10px;
  background: #111; color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.4; white-space: normal; text-align: left;
  box-shadow: 0 10px 24px #00000040; }
.t-tag-ddr:hover .t-globo, .t-tag-ddr.ve .t-globo { display: block; }
@media (max-width: 760px) { .t-globo { font-size: 11px; padding: 7px 9px; top: calc(100% + 6px); } .t-tag-ddr::after { width: 11px; height: 11px; font-size: 8px; } }

/* Las etiquetas se acomodan para no tapar el producto (Puma 3-nov 19:07: «que si tapan la imagen vayan abajo del % o a la
   derecha o 1 y 1, según convenga»): tecno.js prueba estas ubicaciones con la foto ya dibujada y deja la que menos la
   pisa. lay-col: debajo del %, una abajo de la otra; lay-lados: el % a la izquierda y las etiquetas a la derecha;
   lay-izq: la de abajo, a la izquierda. */
.t-arriba.lay-col { flex-direction: column; align-items: flex-start; }
.t-arriba.lay-col .t-tags { flex-direction: column; align-items: flex-start; min-height: 0; }
.t-arriba.lay-lados { justify-content: space-between; }
.t-arriba.lay-lados .t-tags { justify-content: flex-end; margin-left: auto; }
.t-uso-abajo.lay-izq { right: auto; left: 10px; }
@media (max-width: 760px) { .t-uso-abajo.lay-izq { left: 6px; } }