/* Componentes de la portada y de la cabecera/pie, que son de todo el sitio.
   Los nombres salen de la maqueta aprobada del gate 1c (30/09/2026), con el
   prefijo `nb-` y los colores y radios pasados a tokens: aqui no hay un solo
   color literal, salvo el `#000` de las mascaras (solo cuenta su canal alfa). */

/* Texto solo para lectores de pantalla. WooCommerce lo define en su hoja, pero
   el buscador y el precio de oferta (<del>/<ins>) no pueden depender de que esa
   hoja cargue: sin esto el rotulo del <label> y el "Original price was" se ven. */
.screen-reader-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- cabecera ---------- */
.nb-site-header{background:var(--nb-bg);color:var(--nb-text);
  border-bottom:1px solid var(--nb-line)}
.nb-header-row{display:flex;align-items:center;gap:1.25rem;min-height:4.5rem}
/* Los botones de la derecha se pegan al borde con `margin-left:auto`: asi el
   buscador crece en el medio sin empujarlos. */
.nb-header-acts{display:flex;align-items:center;gap:.25rem;margin-left:auto}
.nb-logo{display:inline-flex;align-items:center;line-height:0;white-space:nowrap}
.nb-logo__marca{display:block;height:30px;width:auto}
.nb-site-footer .nb-logo__marca{height:32px}

/* El buscador de WooCommerce trae un <input> sin ancho: no baja de su tamaño
   intrinseco (~20 caracteres) y en telefono se salia de la pantalla, chocando
   con el boton de Menu. Se le da ancho propio (`min-width:0` + `flex`) y, en
   pantalla chica, la fila entera del header envuelve: logo y Menu arriba,
   buscador debajo (ver responsive.css). Input y boton se pegan: una sola pieza. */
.nb-product-search{flex:1 1 auto;min-width:0;max-width:40rem}
.nb-product-search form{display:flex;min-width:0}
.nb-product-search .search-field{flex:1 1 auto;min-width:0;width:100%;min-height:44px;
  padding:0 1rem;background:var(--nb-bg);color:var(--nb-text);
  border:1px solid var(--nb-line);border-right:0;
  border-radius:var(--nb-radius-sm) 0 0 var(--nb-radius-sm);
  -webkit-appearance:none;appearance:none}
.nb-product-search .search-field::placeholder{color:var(--nb-text-dim)}
.nb-product-search button[type=submit]{display:inline-flex;align-items:center;gap:.4rem;
  min-height:44px;padding:0 1rem;background:var(--nb-volt);color:var(--nb-carbon);
  border:0;border-radius:0 var(--nb-radius-sm) var(--nb-radius-sm) 0;
  font-weight:600;cursor:pointer;transition:background-color .15s ease}
.nb-product-search button[type=submit]:hover{background:#D8FF66}

.nb-iconbtn{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  padding:0 .6rem;border:0;border-radius:var(--nb-radius-sm);background:none;
  color:inherit;font-weight:600;cursor:pointer;transition:background-color .15s ease}
.nb-iconbtn:hover{background:var(--nb-surface)}
/* El boton de Menu solo existe en telefono: aqui se apaga y responsive.css lo
   enciende. Lleva las DOS clases para ganarle el `display:inline-flex` de
   `.nb-iconbtn` sin depender del orden en el archivo. */
.nb-iconbtn.nb-menu-toggle{display:none;min-width:44px;justify-content:center;
  border:1px solid var(--nb-line-strong)}

/* ---------- barra de categorias ---------- */
.nb-cats{border-bottom:1px solid var(--nb-line)}
/* navigation.js pone `hidden` en el <nav>. Un `display` explicito le gana al
   `[hidden]` del navegador, asi que se afirma aqui, sobre la propia `.nb-cats`. */
.nb-cats[hidden]{display:none}
/* La `ul` lleva tambien `.nb-shell`: por eso solo se anulan los margenes de
   ARRIBA y ABAJO. Con `margin:0` se perderia el `margin-inline:auto` de
   `.nb-shell` y la barra se pegaria a la izquierda. */
.nb-cats ul{list-style:none;margin-block:0;padding:0;display:flex;gap:.25rem;
  overflow-x:auto;scrollbar-width:none}
.nb-cats ul::-webkit-scrollbar{display:none}
.nb-cats a{display:inline-flex;align-items:center;min-height:44px;padding:0 .8rem;
  font-weight:600;color:var(--nb-text-dim);white-space:nowrap;
  border-bottom:2px solid transparent;transition:color .15s ease}
.nb-cats a:hover{color:var(--nb-text)}
/* `overflow-x:auto` obliga a `overflow-y:auto` y recorta el anillo de foco
   exterior (6px por fuera de la caja). Aqui el anillo va por DENTRO. */
.nb-cats a:focus-visible{box-shadow:inset 0 0 0 3px var(--nb-focus-inner),
  inset 0 0 0 5px var(--nb-focus-outer);outline-offset:0}
.nb-cats__all{margin-left:auto}

/* ---------- hero: la oferta de la semana sobre carbón ---------- */
.nb-hero{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:1rem;padding-top:1.25rem}
.nb-promo{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  align-items:center;gap:1rem;background:var(--nb-panel);color:var(--nb-panel-text);
  border-radius:var(--nb-radius-lg);padding:2.25rem 2.5rem;min-height:30rem;overflow:hidden}
.nb-promo__texto{position:relative;z-index:1}
.nb-promo__eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--nb-panel-dim);margin:0}
.nb-promo h1{margin:.5rem 0 0;font-size:clamp(1.7rem,3.2vw,2.7rem);font-weight:800;line-height:1.05;letter-spacing:-.03em}
.nb-promo__sub{margin:.5rem 0 0;color:var(--nb-panel-dim);font-size:1rem;max-width:30ch}
.nb-promo__price{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.nb-promo__price .nb-precio{font-size:clamp(2rem,3.2vw,2.6rem);line-height:1;letter-spacing:-.03em;color:var(--nb-volt)}
.nb-promo__price s{color:var(--nb-panel-dim);font-weight:500;font-size:1.2rem}
.nb-promo__price .nb-pill{position:static;font-size:.85rem;padding:.4rem .55rem}
.nb-promo .nb-button{margin-top:1.4rem}
/* La foto de estudio viene con su propio fondo (#0B0F10, el mismo del panel): va
   entera, en `contain` a la derecha, con el borde izquierdo desvanecido. Con
   `cover` el producto pisaba el titular (medido el 30/09 en la maqueta). */
.nb-promo__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:right center;z-index:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
.nb-promo__img{justify-self:end;width:min(100%,34rem);position:relative;z-index:1}
/* Respaldo sin recorte: la foto blanca vive en una placa, nunca pegada al carbón. */
.nb-promo__placa{display:grid;place-items:center;justify-self:end;width:min(100%,26rem);padding:1.25rem;
  background:var(--nb-placa);border-radius:var(--nb-radius-md)}
.nb-pill{position:absolute;top:0;left:0;background:var(--nb-pill);color:var(--nb-pill-ink);
  font:700 .72rem/1 var(--nb-heading);padding:.35rem .5rem;border-radius:var(--nb-radius-sm);letter-spacing:.02em}

/* ---------- tiles al costado del hero ---------- */
.nb-side{display:grid;grid-template-rows:1fr 1fr;gap:1rem}
.nb-tile{position:relative;display:grid;align-content:start;gap:.4rem;padding:1.5rem;
  border-radius:var(--nb-radius-lg);overflow:hidden;min-height:12rem;
  transition:transform .15s ease}
.nb-tile:hover{transform:translateY(-2px)}
.nb-tile h3{margin:0;font-size:1.25rem;font-weight:700;line-height:1.15;letter-spacing:-.02em;max-width:14ch}
.nb-tile p{margin:0;font-size:.9rem;max-width:22ch}
.nb-tile__go{font-weight:600;margin-top:.4rem;border-bottom:1px solid currentColor;
  width:max-content;padding-bottom:.05rem}
/* La foto del tile se sale un poco por la esquina: es decorativa, no recibe clics. */
.nb-tile img{position:absolute;right:-.5rem;bottom:-.25rem;width:44%;max-width:11rem;
  height:auto;object-fit:contain;pointer-events:none;
  /* Una foto alta (un gabinete) no llega al borde de arriba: se achica dentro de su caja, pegada abajo a la derecha. */
  max-height:calc(100% - 1.25rem);object-position:right bottom}
.nb-tile--carbon{background:var(--nb-carbon);color:var(--nb-panel-text)}
.nb-tile--carbon .nb-tile__go{color:var(--nb-volt)}
.nb-tile--mist{background:var(--nb-surface);color:var(--nb-text)}
.nb-tile--mist p{color:var(--nb-text-dim)}

/* ---------- secciones ---------- */
.nb-sec{padding-block:2.75rem}
.nb-sec__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}
.nb-sec__head h1,.nb-sec__head h2{margin:0;font-size:clamp(1.35rem,2.2vw,1.7rem);font-weight:700;letter-spacing:-.02em}
.nb-sec__head a{font-weight:600;color:var(--nb-text-dim);white-space:nowrap;
  border-bottom:1px solid var(--nb-line-strong);padding-bottom:.1rem;transition:color .15s ease}
.nb-sec__head a:hover{color:var(--nb-text);border-color:var(--nb-volt)}
/* Página de ofertas (30/09/2026): subtítulo con el conteo. */
.nb-ofertas__sub{margin:-.5rem 0 1.25rem;color:var(--nb-text-dim)}

/* ---------- categorias con foto ---------- */
.nb-catgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem}
.nb-cat{display:grid;gap:.4rem;padding:1rem 1rem .9rem;border:1px solid var(--nb-line);
  border-radius:var(--nb-radius-md);background:var(--nb-bg);
  transition:border-color .15s ease,transform .15s ease}
.nb-cat:hover{border-color:var(--nb-volt);transform:translateY(-2px)}
/* Alto en `rem`, nunca en %: ver la nota de .nb-product-card__media en commerce.css. */
.nb-cat img{height:5.5rem;width:auto;max-width:100%;object-fit:contain;justify-self:center;margin-block:.3rem}
.nb-cat b{font:600 .95rem/1.2 var(--nb-heading);overflow-wrap:anywhere}
.nb-cat small{color:var(--nb-text-dim);font-size:.78rem;font-variant-numeric:tabular-nums}

/* ---------- tarjetas de oferta (portada) ---------- */
.nb-grid5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}
/* Columna flexible y no una grilla de filas fijas: la categoria es opcional
   (si el producto no tiene, el <span> ni se imprime) y con filas fijas el
   nombre y el precio se corrian de fila. El precio baja solo con `margin-top:auto`. */
.nb-card{display:flex;flex-direction:column;gap:.3rem;min-width:0;padding:1rem;
  background:var(--nb-bg);border:1px solid var(--nb-line);border-radius:var(--nb-radius-md);
  transition:border-color .15s ease,transform .15s ease}
.nb-card:hover{border-color:var(--nb-volt);transform:translateY(-2px)}
/* Altura en `rem` (ver commerce.css): alto util = alto de la caja, sin padding. */
.nb-card__media{position:relative;display:grid;place-items:center;height:10rem;margin-bottom:.4rem}
.nb-card__media img{max-height:9rem;width:auto;max-width:100%;object-fit:contain}
.nb-card .nb-rotulo{overflow-wrap:anywhere}
.nb-card__name{font:600 .95rem/1.3 var(--nb-heading);display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;overflow-wrap:anywhere}
/* El precio llega como HTML de WooCommerce: <del> (antes) + <ins> (ahora). El
   navegador subraya el <ins>; aqui se apaga y el precio vigente va primero. */
.nb-card__price,.nb-fila__p{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.4rem;
  font-variant-numeric:tabular-nums}
.nb-card__price{margin-top:auto;padding-top:.2rem;font-size:1.15rem;line-height:1.2}
.nb-card__price ins,.nb-fila__p ins{text-decoration:none;background:none}
.nb-card__price del,.nb-fila__p del{order:2;color:var(--nb-text-dim);font-weight:500;font-size:.82rem;
  text-decoration-thickness:1px}

/* ---------- como se compra una PC ---------- */
.nb-pasos{background:var(--nb-surface);border-radius:var(--nb-radius-lg);padding:2rem 2.25rem;
  display:grid;grid-template-columns:minmax(0,1.1fr) repeat(4,minmax(0,1fr));gap:1.5rem;align-items:start}
.nb-pasos h2{margin:0;font-size:1.5rem;font-weight:700;line-height:1.1;letter-spacing:-.02em}
.nb-pasos h2 + p{margin:.5rem 0 0;color:var(--nb-text-dim);max-width:26ch}
.nb-pasos .nb-button{margin-top:1rem}
.nb-paso{border-top:2px solid var(--nb-line-strong);padding-top:.8rem}
.nb-paso b{display:block;font:700 1.02rem/1.25 var(--nb-heading)}
.nb-paso span{display:block;color:var(--nb-text-dim);font-size:.88rem;margin-top:.25rem}

/* ---------- lo nuevo ---------- */
.nb-filas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.nb-fila{display:grid;grid-template-columns:4.5rem minmax(0,1fr) auto;gap:.9rem;align-items:center;
  padding:.75rem;border:1px solid var(--nb-line);border-radius:var(--nb-radius-md);
  background:var(--nb-bg);transition:border-color .15s ease}
.nb-fila:hover{border-color:var(--nb-volt)}
.nb-fila img{width:4.5rem;height:3.5rem;object-fit:contain}
.nb-fila__t{display:grid;gap:.15rem;min-width:0}
.nb-fila__n{font:600 .92rem/1.25 var(--nb-heading);overflow-wrap:anywhere}
/* Aqui el precio vigente y el anterior se apilan, alineados a la derecha: en
   telefono dos precios en una fila le quitaban el ancho al titulo. */
.nb-fila__p{flex-direction:column;align-items:flex-end;font-size:1rem;line-height:1.1;white-space:nowrap}

/* ---------- pie ---------- */
/* El pie es carbon (acento, no piso). El `<footer>` pone el fondo a todo el
   ancho y `.nb-foot` (que es el `.nb-shell` de adentro) reparte las columnas. */
.nb-site-footer{margin-top:1rem;padding-block:2.5rem;background:var(--nb-carbon);color:var(--nb-panel-text)}
.nb-foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;align-items:start}
.nb-site-footer p{margin:.6rem 0 0;color:var(--nb-panel-dim);max-width:38ch}
.nb-foot h4{margin:0 0 .8rem;font:600 .78rem/1 var(--nb-body);letter-spacing:.08em;
  text-transform:uppercase;color:var(--nb-panel-dim)}
.nb-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.nb-foot a{transition:color .15s ease}
/* El volt es texto solo sobre carbon: aqui el pie lo es. */
.nb-foot a:hover{color:var(--nb-volt)}
.nb-foot__num{font:700 1.1rem/1 var(--nb-heading);color:var(--nb-panel-text);margin-top:.4rem}