/* ============================================================
   BRANDING BOARD — Nancorp
   Importacion directa y distribucion mayorista B2B de neumaticos, sourcing
   desde fabricas verificadas de China continental (sede de registro: Hong Kong).
   Paleta "Racing Red Carbon": carbon casi-negro + rojo carrera + blanco.
   Tipografia Oswald (display, condensada industrial) + Inter (body) + IBM Plex Mono (specs).
   Cambiar este archivo re-skinea toda la web sin tocar los bloques.
   ============================================================ */
/* Fuentes self-host (no Google Fonts: clave en China). */
@import url('fonts.css');

:root{
  /* Paleta Racing Red Carbon */
  --brand-1:oklch(0.17 0.015 25);    /* carbon casi-negro (header/footer/hero scrim) */
  --brand-2:oklch(0.32 0.14 26);     /* rojo quemado oscuro (hover/borde sobre oscuro) */
  --brand-3:oklch(0.47 0.03 250);    /* gris acero azulado (acento neutro industrial) */
  --brand-4:oklch(0.95 0.006 60);    /* superficie secundaria calida */
  --brand-5:oklch(0.99 0.002 60);    /* superficie principal casi blanca */

  /* Rojo de marca = el rojo EXACTO del logo oficial del cliente (#FF0000). El logo manda: antes el
     acento era #D61B2A y chocaba con el logo pegado al lado en el header. */
  --accent:oklch(0.628 0.258 29.2);  /* #FF0000 — rojo del logo. CTA / marca */
  --accent-ink:oklch(0.99 0 0);      /* texto sobre accent */
  --accent-text:oklch(0.46 0.19 25); /* rojo AA para texto chico sobre claro (NO es #FF0000: no pasaria contraste) */
  --accent-2:oklch(0.70 0.22 29.2);  /* #FF5645 — rojo mas claro (hover de accent) */

  --ink:oklch(0.19 0.012 30);
  --ink-soft:oklch(0.42 0.014 30);
  --ink-faint:oklch(0.58 0.012 30);
  --surface:var(--brand-5);
  --surface-2:var(--brand-4);
  --card:oklch(1 0 0);
  --line:oklch(0.89 0.006 50);

  --font-display:'Oswald','PingFang SC','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif;
  --font-body:'Inter','PingFang SC','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif;
  --font-wordmark:'Oswald',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --radius:10px;
  --maxw:1240px;
  --shadow:0 22px 54px -26px oklch(0.17 0.02 25 / .4);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.23,1,.32,1);
}

h1,h2,h3,h4{text-transform:none;letter-spacing:-0.01em}
.eyebrow{color:var(--accent-text);font-family:var(--font-mono);letter-spacing:.1em}
.btn--primary{background:var(--accent);color:var(--accent-ink)}
.btn--primary:hover{background:var(--accent-2)}

/* ============================================================ HEADER — utility bar + category bar (2 filas, pedido explicito del cliente) */
.ncheader{position:sticky;top:0;z-index:80;font-family:var(--font-body)}
.ncutil{background:var(--card);border-bottom:1px solid var(--line)}
.ncutil__in{display:flex;align-items:center;gap:22px;padding:12px clamp(20px,5vw,40px);max-width:var(--maxw);margin:0 auto}
/* Logo oficial del cliente. height fija + width:auto = jamas se deforma (ni el lockup 9:1 ni el
   isotipo 1.43:1 del <picture> movil). */
.nc-logo{display:flex;align-items:center;flex:0 0 auto}
.nc-logo__pic{display:block;flex:0 0 auto;line-height:0}
.nc-logo__img{height:30px;width:auto;display:block}
.nc-logo__word{font-family:var(--font-wordmark);font-weight:700;font-size:25px;letter-spacing:.005em;color:var(--accent);line-height:1}
.nc-logo__word i{color:var(--accent);font-style:normal}
@media(max-width:520px){.nc-logo__img{height:32px}}  /* isotipo: mas alto porque es casi cuadrado */
.ncsearch{flex:1;display:flex;max-width:520px;position:relative}
.ncsearch input{flex:1;border:1.5px solid var(--line);border-right:none;border-radius:30px 0 0 30px;padding:11px 18px;font:inherit;font-size:14.5px;background:var(--surface-2);color:var(--ink)}
.ncsearch input:focus-visible{outline:none;border-color:var(--accent)}
.ncsearch button{border:none;background:var(--accent);color:var(--accent-ink);border-radius:0 30px 30px 0;padding:0 20px;cursor:pointer;display:grid;place-items:center;transition:background .18s}
.ncsearch button:hover{background:var(--accent-2)}
.ncsearch svg{width:17px;height:17px}
.ncutil__right{display:flex;align-items:center;gap:20px;flex:0 0 auto}
.nchotline{display:flex;align-items:center;gap:10px;color:var(--ink)}
.nchotline .ic{width:36px;height:36px;border-radius:50%;background:color-mix(in oklab,var(--accent),transparent 86%);color:var(--accent-text);display:grid;place-items:center;font-size:15px;flex:0 0 auto}
.nchotline b{display:block;font-size:11.5px;color:var(--ink-faint);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.nchotline em{display:block;font-style:normal;font-family:var(--font-mono);font-size:14.5px;font-weight:600;color:var(--ink);transition:color .18s}
.nchotline:hover em{color:var(--accent-text)}
.nc-burger{display:none;background:none;border:none;color:var(--ink);font-size:22px;cursor:pointer;line-height:1;flex:0 0 auto}

.ncbar{background:var(--accent);color:#fff}
.ncbar__in{display:flex;align-items:center;gap:26px;padding:0 clamp(20px,5vw,40px);max-width:var(--maxw);margin:0 auto}
.ncdrop{position:relative}
.ncdrop__btn{display:flex;align-items:center;gap:10px;background:var(--brand-1);color:#fff;border:none;padding:14px 20px;font:600 14.5px/1 var(--font-body);cursor:pointer;border-radius:0;white-space:nowrap}
.ncdrop__btn .hb{font-size:15px}
.ncdrop__btn:hover{background:color-mix(in oklab,var(--brand-1),#fff 8%)}
.ncdrop__chev{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;margin-left:auto;flex:0 0 auto;transition:transform .2s var(--ease-out)}
.ncdrop.open .ncdrop__chev{transform:rotate(180deg)}
.ncdrop__menu{position:absolute;top:100%;left:0;min-width:240px;background:var(--card);color:var(--ink);box-shadow:var(--shadow);border-radius:0 0 var(--radius) var(--radius);padding:8px;display:none;flex-direction:column;z-index:60}
.ncdrop.open .ncdrop__menu{display:flex}
.ncdrop__menu a{padding:11px 14px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink)}
.ncdrop__menu a:hover{background:var(--surface-2);color:var(--accent-text)}
.ncnav{display:flex;gap:26px;align-items:center;flex:1}
.ncnav a{padding:15px 0;font-weight:600;font-size:14.5px;color:rgba(255,255,255,.92);border-bottom:2px solid transparent;transition:border-color .2s}
.ncnav a:hover,.ncnav a.active{border-color:#fff}
.ncbar__right{display:flex;align-items:center;gap:20px;flex:0 0 auto}
.ncwish{display:flex;align-items:center;gap:8px;background:none;border:none;color:#fff;font:600 14px/1 var(--font-body);cursor:pointer;position:relative}
.ncwish svg{width:18px;height:18px}
.ncwish__count{position:absolute;top:-8px;left:12px;background:#fff;color:var(--accent-text);font-family:var(--font-mono);font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:50%;display:grid;place-items:center;padding:0 3px}
.nclogin{display:flex;align-items:center;gap:8px;font:600 14px/1 var(--font-body);color:#fff}
.nclogin svg{width:18px;height:18px}
@media(max-width:1080px){.ncnav{gap:16px}.ncutil__right .nchotline b{display:none}}
@media(max-width:860px){
  .ncutil__in{padding:10px clamp(20px,5vw,40px)}
  .ncsearch{position:absolute;left:0;right:0;top:100%;max-width:none;padding:0 clamp(20px,5vw,40px) 12px;background:var(--card);display:none}
  .ncsearch.open{display:flex}
  .ncutil__right .nchotline{display:none}
  .nc-burger{display:grid;place-items:center;min-width:44px;min-height:44px;margin:-8px -6px;order:9}
  .ncbar{display:none}
  .ncbar.open{display:block}
  .ncbar__in{flex-direction:column;align-items:stretch;gap:0;padding:0;max-height:70vh;overflow-y:auto}
  .ncdrop{width:100%}
  .ncdrop__btn{width:100%;justify-content:space-between;padding:16px clamp(16px,5vw,28px)}
  .ncdrop__menu{position:static;box-shadow:none;border-radius:0;background:color-mix(in oklab,var(--brand-1),#fff 4%)}
  .ncdrop__menu a{color:#fff}
  .ncdrop__menu a:hover{background:rgba(255,255,255,.1);color:#fff}
  .ncnav{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .ncnav a{padding:15px clamp(16px,5vw,28px);border-bottom:1px solid rgba(255,255,255,.15)}
  .ncbar__right{flex-direction:column;align-items:stretch;gap:0;width:100%;padding:6px 0 14px}
  .ncwish,.nclogin,.ncquote-nav{padding:13px clamp(16px,5vw,28px);justify-content:flex-start}
  .ncquote-nav__count{position:static;margin-left:auto}
}
.ncheader.scrolled .ncutil{box-shadow:0 1px 0 var(--line)}

/* Search icon toggle (móvil) */
.ncsearch-toggle{display:none;background:none;border:none;color:var(--ink);cursor:pointer;padding:6px}
@media(max-width:860px){.ncsearch-toggle{display:grid;place-items:center;min-width:40px;min-height:40px}}

/* ============================================================ HERO con video de fondo (contenedores / fabrica / EV) */
.nchero{position:relative;min-height:92vh;display:flex;align-items:center;color:#fff;overflow:hidden;background:var(--brand-1);isolation:isolate}
.nchero__bg{position:absolute;inset:0;z-index:-2;background:var(--brand-1) url("assets/video/hero-poster.jpg") center/cover no-repeat}
.nchero__bg video,.nchero__bg img{width:100%;height:100%;object-fit:cover}
/* Video visible en la mayor parte del frame: un charco radial oscuro SOLO detrás del bloque de
   texto (ancla ~22% desde la izquierda) + un velo superior/inferior muy leve para nav/stats.
   Nada de pared diagonal opaca: el centro-derecha del video queda a la vista, como pidió Diego.
   OJO: los % de radial-gradient son el RADIO de la elipse, no el diámetro — 26%/34% de radio
   ya cubre ~52%/68% de diámetro real, suficiente para el bloque de texto sin tapar el frame. */
.nchero__bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(26% 34% at 22% 46%, oklch(0.12 0.02 25 / .82) 0%, oklch(0.12 0.02 25 / .5) 55%, transparent 90%),
  linear-gradient(180deg, oklch(0.12 0.02 25 / .38) 0%, transparent 16%, transparent 72%, oklch(0.12 0.02 25 / .48) 100%)}
.nchero__bg{animation:ncHeroZoom 24s ease-out infinite alternate}
@keyframes ncHeroZoom{from{transform:scale(1)}to{transform:scale(1.06)}}
@media(prefers-reduced-motion:reduce){.nchero__bg{animation:none}}
.nchero .container{width:100%}
.nchero__in{padding:150px 0 76px;max-width:660px;text-shadow:0 3px 26px oklch(0.1 0.02 25 / .5)}
.nchero__kick{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);background:oklch(0.12 0.02 25 / .55);backdrop-filter:blur(6px);padding:7px 14px;border-radius:30px;border:1px solid rgba(255,255,255,.18)}
.nchero h1{font-size:clamp(2.5rem,6vw,4.4rem);font-weight:700;line-height:1.08;margin-top:20px}
.nchero h1 em{color:var(--accent-2);font-style:normal}
.nchero p{font-size:clamp(1.03rem,1.7vw,1.22rem);color:rgba(255,255,255,.92);margin-top:18px;max-width:50ch}
.nchero__cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.nchero__meta{display:flex;gap:0;margin-top:48px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.22);padding-top:26px}
.nchero__meta div{padding-right:34px;margin-right:34px;border-right:1px solid rgba(255,255,255,.22)}
.nchero__meta div:last-child{border-right:none;margin-right:0;padding-right:0}
.nchero__meta b{font-family:var(--font-mono);font-size:1.7rem;font-weight:600;display:block;color:#fff}
.nchero__meta span{font-size:12.5px;color:rgba(255,255,255,.78)}
/* franja de credito del video (discreta, ancla abajo-derecha) */
.nchero__credit{position:absolute;right:clamp(20px,5vw,40px);bottom:18px;z-index:1;font:600 10.5px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55)}
@media(max-width:640px){.nchero{min-height:82vh}.nchero__in{padding:104px 0 40px}.nchero__meta{gap:18px 0}.nchero__meta div{padding-right:20px;margin-right:20px}.nchero__credit{display:none}}

/* ============================================================ CATEGORY RING — "Find the Right Tires for You" (iconos circulares) */
.ncring{display:grid;grid-template-columns:repeat(7,1fr);gap:22px;margin-top:44px}
.ncring__item{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.ncring__img{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:3px solid var(--surface-2);box-shadow:var(--shadow);transition:border-color .2s,transform .3s var(--ease)}
.ncring__item:hover .ncring__img{border-color:var(--accent);transform:translateY(-4px)}
.ncring__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease-out)}
.ncring__item:hover .ncring__img img{transform:scale(1.12)}
.ncring__item b{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.3}
@media(max-width:960px){.ncring{grid-template-columns:repeat(4,1fr);gap:26px 16px}}
@media(max-width:560px){.ncring{grid-template-columns:repeat(3,1fr);gap:22px 12px}.ncring__item b{font-size:12px}}

/* ============================================================ SHOP — sidebar (search+categorias+marca+estilo+condiciones) + toolbar + grilla + paginacion (catalogo real, sin precios inventados) */
.ncshop{display:grid;grid-template-columns:250px 1fr;gap:40px;align-items:start;margin-top:30px}
.ncshop__side{position:sticky;top:100px;display:flex;flex-direction:column;gap:28px}
.ncshop__block h3{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);margin-bottom:14px;font-weight:700}
.ncshsearch-wrap{position:relative}
.ncshsearch-wrap svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--ink-faint);fill:none;stroke-width:2;pointer-events:none}
.ncshsearch{width:100%;padding:11px 14px 11px 38px;border:1.5px solid var(--line);border-radius:var(--radius);font:inherit;font-size:14px;background:var(--card);color:var(--ink)}
.ncshsearch:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.ncshcats,.ncshgroup{display:flex;flex-direction:column;gap:1px}
.ncshcat,.ncshck{display:flex;align-items:center;gap:10px;padding:8px 4px;border-radius:8px;cursor:pointer;font-size:13.5px;color:var(--ink-soft);transition:background .15s,color .15s}
.ncshcat:hover,.ncshck:hover{background:var(--surface-2);color:var(--ink)}
.ncshcat input,.ncshck input{accent-color:var(--accent);width:15px;height:15px;flex:0 0 auto}
.ncshcat span,.ncshck span{flex:1}
.ncshcat i,.ncshck i{font-style:normal;font-family:var(--font-mono);font-size:11px;color:var(--ink-faint)}
.ncshcat:has(input:checked){color:var(--accent-text);font-weight:600}
.ncshck:has(input:checked){color:var(--ink);font-weight:600}
/* toolbar */
.ncshtoolbar{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid var(--line)}
.ncshcount{font-size:13px;color:var(--ink-soft)}
.ncshtoolbar__right{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.ncshshow{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-faint)}
.ncshshow__n{border:none;background:none;font:600 13px/1 var(--font-mono);color:var(--ink-faint);cursor:pointer;padding:4px 2px;transition:color .15s}
.ncshshow__n:hover{color:var(--ink)}
.ncshshow__n.on{color:var(--accent-text)}
.ncshdens{display:flex;gap:4px}
.ncshdens__b{width:34px;height:34px;border:1.5px solid var(--line);background:var(--card);border-radius:8px;display:grid;place-items:center;cursor:pointer;color:var(--ink-faint);transition:border-color .15s,color .15s}
.ncshdens__b svg{width:18px;height:18px;fill:currentColor}
.ncshdens__b:hover{color:var(--ink)}
.ncshdens__b.on{border-color:var(--accent);color:var(--accent-text)}
.ncshsort select{border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:var(--radius);padding:9px 34px 9px 14px;font:inherit;font-size:13.5px;cursor:pointer;
  appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:14px}
.ncshsort select:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* grid + density */
.ncshgrid{display:grid;gap:18px;margin-top:24px}
.ncshgrid.dens-2{grid-template-columns:repeat(2,1fr)}
.ncshgrid.dens-3{grid-template-columns:repeat(3,1fr)}
.ncshgrid.dens-4{grid-template-columns:repeat(4,1fr)}
.ncshcard{background:var(--card);border:1.5px solid var(--line);border-radius:calc(var(--radius)*1.3);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s var(--ease),box-shadow .25s,border-color .2s}
.ncshcard:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow)}
.ncshcard__img{aspect-ratio:1;background:#fff;position:relative;overflow:hidden}
.ncshcard__img img{width:100%;height:100%;object-fit:contain;display:block;padding:8%;transition:transform .5s var(--ease-out)}
.ncshcard:hover .ncshcard__img img{transform:scale(1.06)}
.ncshcard__wish{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;color:var(--ink-soft);transition:color .2s,transform .15s}
.ncshcard__wish:hover{color:var(--accent)}
.ncshcard__wish.on{color:var(--accent)}
.ncshcard__wish svg{width:16px;height:16px}
.ncshcard__b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:5px;flex:1}
.ncshcard__cat{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-text)}
.ncshcard__name{font-size:14.5px;font-weight:600;line-height:1.3;color:var(--ink);letter-spacing:-0.01em}
.ncshcard__cta{margin-top:auto;padding-top:12px}
.ncshcard__cta .btn{width:100%;justify-content:center;padding:10px 14px;font-size:13px}
.ncquote__in{display:none}
.ncquote.on .ncquote__add{display:none}
.ncquote.on .ncquote__in{display:inline-flex;align-items:center;gap:6px}
.ncquote.on .ncquote__in::before{content:"✓";font-weight:700}
.ncquote.on{background:var(--brand-1)}
.ncquote.on:hover{background:color-mix(in oklab,var(--brand-1),#fff 10%)}
.ncshcard--hide{display:none}
.ncshempty{text-align:center;color:var(--ink-soft);padding:40px 0;font-size:15px}
/* pager numerado */
.ncshpager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;margin-top:36px}
.ncshpg{min-width:42px;height:42px;padding:0 13px;border:1.5px solid var(--line);background:var(--card);border-radius:10px;font:600 14px/1 var(--font-body);color:var(--ink-soft);cursor:pointer;transition:border-color .15s,color .15s}
.ncshpg:hover:not(:disabled){border-color:var(--accent);color:var(--ink)}
.ncshpg.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.ncshpg:disabled{opacity:.4;cursor:default}
.ncshpg--nav{font-size:18px}
@media(max-width:1180px){.ncshop{grid-template-columns:210px 1fr;gap:28px}.ncshgrid.dens-4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.ncshop{grid-template-columns:1fr}.ncshop__side{position:static;max-height:none;overflow:visible;display:grid;grid-template-columns:1fr 1fr;gap:22px 28px}.ncshop__block:first-child{grid-column:1/-1}.ncshcats,.ncshgroup{gap:2px}.ncshtoolbar{gap:12px}.ncshtoolbar__right{gap:12px}.ncshdens{display:none}}
@media(max-width:680px){.ncshgrid.dens-2,.ncshgrid.dens-3,.ncshgrid.dens-4{grid-template-columns:1fr 1fr}.ncshop__side{grid-template-columns:1fr}}
@media(max-width:420px){.ncshgrid.dens-2,.ncshgrid.dens-3,.ncshgrid.dens-4{grid-template-columns:1fr}}

/* header: boton "My Quotation" con contador (junto a Wishlist) */
.ncquote-nav{display:flex;align-items:center;gap:8px;color:#fff;font:600 14px/1 var(--font-body);position:relative}
.ncquote-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.ncquote-nav__count{position:absolute;top:-8px;left:12px;background:#fff;color:var(--accent-text);font-family:var(--font-mono);font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:50%;display:grid;place-items:center;padding:0 3px}

/* contacto: resumen de la cotización armada desde el shop */
.ncqsum{border:1.5px solid var(--line);border-radius:calc(var(--radius)*1.4);padding:22px 24px;background:var(--surface-2)}
.ncqsum__empty{color:var(--ink-soft);font-size:14.5px;margin:0}
.ncqsum__h{font-size:1.05rem;margin-bottom:14px}
.ncqsum__list{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.ncqsum__list li{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px 14px;font-size:14px}
.ncqsum__x{border:none;background:none;color:var(--ink-faint);font-size:20px;line-height:1;cursor:pointer;padding:0 4px;transition:color .15s}
.ncqsum__x:hover{color:var(--accent)}
.ncqsum__clear{border:1.5px solid var(--line);background:var(--card);color:var(--ink-soft);border-radius:30px;padding:8px 18px;font:600 13px/1 var(--font-body);cursor:pointer;transition:border-color .15s,color .15s}
.ncqsum__clear:hover{border-color:var(--accent);color:var(--accent-text)}

/* ============================================================ BLOG — grilla de articulos */
.ncpostgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.ncpost{background:var(--card);border:1.5px solid var(--line);border-radius:calc(var(--radius)*1.5);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s var(--ease),box-shadow .2s}
.ncpost:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.ncpost__img{aspect-ratio:16/10;background:var(--surface-2);overflow:hidden}
.ncpost__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease-out)}
.ncpost:hover .ncpost__img img{transform:scale(1.06)}
.ncpost__b{padding:20px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.ncpost__tag{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-text)}
.ncpost__date{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-faint)}
.ncpost h3{font-size:1.15rem;line-height:1.28;margin-top:2px}
.ncpost p{color:var(--ink-soft);font-size:14px;flex:1}
.ncpost__more{font-weight:700;font-size:13.5px;color:var(--accent-text);margin-top:6px}
@media(max-width:860px){.ncpostgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ncpostgrid{grid-template-columns:1fr}}

/* article (post individual) */
.ncarticle{max-width:760px;margin:0 auto}
.ncarticle__meta{display:flex;gap:14px;align-items:center;font-size:13px;color:var(--ink-faint);font-family:var(--font-mono)}
.ncarticle h1{font-size:clamp(1.8rem,4vw,2.6rem);margin-top:14px}
.ncarticle__cover{border-radius:calc(var(--radius)*1.5);overflow:hidden;margin-top:26px;box-shadow:var(--shadow)}
.ncarticle__cover img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.ncarticle__body{margin-top:30px;font-size:16.5px;line-height:1.8;color:var(--ink-soft)}
.ncarticle__body h2{color:var(--ink);font-size:1.4rem;margin:34px 0 12px}
.ncarticle__body p{margin-top:14px}
.ncarticle__body ul{margin:14px 0 0 22px}
.ncarticle__body li{margin-top:8px}

/* ============================================================ FOOTER — rediseño editorial completo (no 3 columnas planas) */
.foot{position:relative;overflow:hidden;padding:0 0 30px;background:var(--brand-1);color:rgba(255,255,255,.9)}
.foot__wm{position:absolute;left:50%;bottom:-6.2vw;transform:translateX(-50%);z-index:0;
  font-family:var(--font-display);font-weight:700;font-size:min(24vw,300px);line-height:1;letter-spacing:-0.02em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.09);white-space:nowrap;pointer-events:none;user-select:none}
.foot__trust{position:relative;z-index:1;border-bottom:1px solid rgba(255,255,255,.1)}
.foot__trust-in{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:center;
  padding:18px clamp(20px,5vw,40px);font:600 12.5px/1 var(--font-mono);letter-spacing:.04em;color:rgba(255,255,255,.55);text-transform:uppercase}
.foot__trust-in i{font-style:normal;color:var(--accent-2)}
.foot > .container{position:relative;z-index:1;padding-top:56px}
.foot__top{grid-template-columns:1.3fr .85fr .85fr .95fr}
.foot__logo .nc-logo__img{height:34px}
.foot .nc-logo__word{color:#fff}
.foot h4{display:flex;align-items:center;gap:8px}
.foot h4::before{content:"";width:22px;height:2px;background:var(--accent);display:inline-block}
.nc-social{display:flex;gap:10px;margin-top:20px}
.nc-social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;color:rgba(255,255,255,.75);transition:background .2s,color .2s,transform .18s var(--ease-out),border-color .2s}
.nc-social a:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-3px)}
.nc-social svg{width:16px;height:16px}
.foot__cats a{font-size:13.5px}
.foot__pay{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:14px 12px;
  margin-top:40px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1)}
.foot__pay-ic{width:17px;height:17px;stroke:rgba(255,255,255,.55);fill:none;stroke-width:1.8;flex:0 0 auto}
.foot__pay > span{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.55);white-space:nowrap}
.foot__pay-badges{display:flex;flex-wrap:wrap;gap:8px}
.foot__pay-badge{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:6px;padding:6px 10px;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.foot__pay-badge img{height:18px;width:auto;display:block}
.foot__bottom{position:relative;z-index:1}
.foot__top2{align-items:flex-start}
.foot__totop{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.6);font:600 12.5px/1 var(--font-body);transition:color .2s,transform .2s var(--ease-out)}
.foot__totop:hover{color:#fff;transform:translateY(-2px)}
.foot__totop svg{width:14px;height:14px}
@media(max-width:900px){.foot__wm{font-size:min(32vw,260px);bottom:-4vw}}

/* Wordmark logo fallback en cabecera si el <img> del logo falla o no está aun elegido */
.nc-logo__img[data-fallback]{display:none}
.nc-logo:has(img[data-broken]) .nc-logo__word{display:inline}

/* ============================================================ ICONOS REALES (reemplazan los glifos unicode rotos ◧✓◨▤) */
.nc-ic{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;display:block}

/* ============================================================ "WHAT WE DO" — lista editorial numerada (reemplaza el grid de 4 cards identicas) */
.ncsteps{margin-top:52px;border-top:1px solid var(--line)}
.ncsteps__row{display:grid;grid-template-columns:.5fr 3.3fr 4.2fr;gap:clamp(16px,3vw,40px);align-items:start;
  padding:clamp(26px,4vw,42px) 0;border-bottom:1px solid var(--line);transition:background .25s}
.ncsteps__row:hover{background:color-mix(in oklab,var(--accent),transparent 96%)}
.ncsteps__no{font-family:var(--font-mono);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:500;color:var(--line);transition:color .25s}
.ncsteps__row:hover .ncsteps__no{color:var(--accent)}
.ncsteps__t{display:flex;align-items:center;gap:16px}
.ncsteps__icwrap{width:44px;height:44px;border-radius:12px;background:color-mix(in oklab,var(--accent),transparent 88%);display:grid;place-items:center;flex:0 0 auto;transition:background .25s}
.ncsteps__row:hover .ncsteps__icwrap{background:color-mix(in oklab,var(--accent),transparent 78%)}
.ncsteps__t .nc-ic{width:22px;height:22px;color:var(--accent);flex:0 0 auto}
.nc-ic--bold{stroke-width:2.3}
.ncsteps__t h3{font-size:clamp(1.15rem,2vw,1.5rem);letter-spacing:-0.01em}
.ncsteps__row p{color:var(--ink-soft);font-size:15.5px;max-width:56ch;padding-top:2px}
@media(max-width:760px){.ncsteps__row{grid-template-columns:1fr;gap:10px}.ncsteps__no{display:none}}

/* ============================================================ "WHY WORK WITH US" — banda oscura de contraste (ritmo de pagina, no otra card blanca) */
.ncwhy{background:var(--brand-1);color:#fff;border-radius:calc(var(--radius)*2.2);padding:clamp(40px,6vw,72px) clamp(24px,5vw,56px);position:relative;overflow:hidden}
.ncwhy::before{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 90% at 88% 8%, color-mix(in oklab,var(--accent),transparent 68%), transparent 60%);pointer-events:none}
.ncwhy__hd{position:relative;max-width:640px}
.ncwhy__hd .eyebrow{color:var(--accent-2)}
.ncwhy__hd h2{color:#fff}
.ncwhy .checks{position:relative;margin-top:44px;grid-template-columns:1fr 1fr;gap:20px 40px}
.ncwhy .checks li b{color:#fff}
.ncwhy .checks li span{color:rgba(255,255,255,.72)}
.ncwhy .checks li .ck{background:color-mix(in oklab,var(--accent),transparent 78%);color:var(--accent-2)}
@media(max-width:640px){.ncwhy .checks{grid-template-columns:1fr}}

/* ============================================================ CTA final — motivo decorativo propio (arcos del imagotipo), NO el gradiente generico roto
   (bug: --brand-4 claro rompia .ctagrad con un degradé rosado lavado) */
.nccta{position:relative;border-radius:calc(var(--radius)*2.2);overflow:hidden;min-height:320px;display:flex;align-items:center;
  color:#fff;background:linear-gradient(155deg,var(--brand-1) 0%,oklch(0.20 0.02 25) 60%,var(--brand-1) 100%)}
.nccta::before{content:"";position:absolute;right:-8%;top:50%;transform:translateY(-50%);width:56vmin;height:56vmin;
  border-radius:50%;border:1.5px solid rgba(255,255,255,.09);pointer-events:none}
.nccta::after{content:"";position:absolute;right:2%;top:50%;transform:translateY(-50%) rotate(-35deg);width:38vmin;height:38vmin;
  border-radius:50%;border:1.5px solid color-mix(in oklab,var(--accent),transparent 55%);border-left-color:transparent;border-bottom-color:transparent;pointer-events:none}
.nccta__in{position:relative;z-index:1;padding:clamp(40px,6vw,64px);max-width:600px}
.nccta__in .eyebrow{color:var(--accent-2)}
.nccta h2{font-size:clamp(1.9rem,4vw,2.8rem);margin-top:10px}

/* barra de progreso de scroll + boton magnetico (capa de efectos) */
.scrollprog{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:200;transition:width .1s linear}
.btn--primary{transition:transform .15s var(--ease-out),background .2s,filter .2s}
@media(prefers-reduced-motion:reduce){.scrollprog{display:none}.btn--primary{transition:background .2s}}
.nccta p{color:rgba(255,255,255,.88);margin-top:14px;max-width:48ch}
.nccta .btn{margin-top:28px}

/* ============================================================ SET-PIECE 3D "carbon-velocity" — GLOBAL SOURCING NETWORK (globo de particulas canvas + rutas) */
.ncglobe-sec{position:relative;overflow:hidden;background:var(--brand-1);color:#fff;padding:clamp(56px,7vw,96px) 0;min-height:480px;display:flex;align-items:center;isolation:isolate}
.ncglobe-sec::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(56% 68% at 74% 46%, color-mix(in oklab,var(--accent),transparent 80%), transparent 70%)}
.ncglobe-stage{position:absolute;top:50%;right:-8%;transform:translateY(-50%);z-index:1;width:min(680px,62vw);aspect-ratio:1;pointer-events:none}
.ncglobe-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ncglobe-fallback{position:absolute;inset:10%;border-radius:50%;
  background:radial-gradient(circle at 38% 32%, color-mix(in oklab,var(--accent-2),transparent 42%) 0%, color-mix(in oklab,var(--brand-2),transparent 26%) 34%, transparent 66%);
  box-shadow:inset 0 0 70px oklch(0 0 0 / .5);opacity:.55}
.fx-globe-on .ncglobe-fallback{opacity:0;transition:opacity .7s var(--ease-out)}
.ncglobe-in{position:relative;z-index:2;width:100%}
.ncglobe-copy{max-width:540px}
.ncglobe-copy h2{color:#fff}
.ncglobe-copy > p{color:rgba(255,255,255,.82);margin-top:16px;max-width:46ch}
.ncglobe-pts{list-style:none;display:flex;flex-direction:column;gap:0;margin:34px 0 30px}
.ncglobe-pts li{display:grid;grid-template-columns:clamp(64px,7vw,88px) 1fr;align-items:baseline;gap:18px;padding:16px 0;border-top:1px solid rgba(255,255,255,.12)}
.ncglobe-pts li:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.ncglobe-pts b{font-family:var(--font-mono);font-size:clamp(1.7rem,3vw,2.3rem);font-weight:600;color:var(--accent-2);line-height:1}
.ncglobe-pts span{color:rgba(255,255,255,.78);font-size:14.5px;line-height:1.42}
@media(max-width:900px){
  .ncglobe-sec{min-height:0;padding:clamp(52px,9vw,84px) 0;flex-direction:column;display:block}
  .ncglobe-sec::before{background:radial-gradient(70% 40% at 50% 24%, color-mix(in oklab,var(--accent),transparent 82%), transparent 70%)}
  .ncglobe-stage{position:relative;top:auto;right:auto;transform:none;margin:0 auto 30px;width:min(360px,78vw)}
  .ncglobe-copy{max-width:none}
}
@media(prefers-reduced-motion:reduce){.ncglobe-sec::before{opacity:.7}}

/* ============================================================ CARDS+ : spotlight que sigue al cursor + tilt (el tilt lo pone el JS inline) — sistema entero, solo puntero fino, degrada a nada */
@media (hover:hover) and (pointer:fine){
  .ncshcard,.ncpost,.qcard,.value{position:relative}
  .ncshcard::after,.ncpost::after,.qcard::after,.value::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;opacity:0;
    background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%), color-mix(in oklab,var(--accent),transparent 84%), transparent 60%);
    transition:opacity .3s var(--ease-out)}
  .ncshcard:hover::after,.ncpost:hover::after,.qcard:hover::after,.value:hover::after{opacity:1}
  .ncshcard,.ncpost,.qcard,.value{transition:transform .28s var(--ease-out),box-shadow .3s var(--ease-out),border-color .2s}
  .fx-tilting{transition:transform .12s var(--ease-out)!important}
}
@media (prefers-reduced-motion:reduce){.ncshcard::after,.ncpost::after,.qcard::after,.value::after{display:none}}

/* parallax de scroll: el contenedor recorta y la imagen tiene overscan para que el desplazamiento no revele bordes */
[data-fx-parallax]{overflow:hidden}
[data-fx-parallax] img{will-change:transform;transform:translateZ(0)}
.fx-parallax [data-fx-parallax] img{transform:scale(1.16)}
@media(prefers-reduced-motion:reduce){.fx-parallax [data-fx-parallax] img{transform:none}}
/* mouse-parallax del contenido del hero (sutil, da profundidad al set-piece principal) */
.nchero__in{will-change:transform}

/* cookiebar: tras el primer scroll significativo se achica y se corre a una esquina, para no
   volver a tapar contenido cada vez que algo cae en la franja inferior del viewport */
.cookiebar--faded{left:auto;right:16px;max-width:280px;padding:10px 12px;flex-direction:column;align-items:stretch;gap:8px;opacity:.94;font-size:12px}
.cookiebar--faded .btn{padding:7px 14px;font-size:12px;width:100%}
@media(prefers-reduced-motion:no-preference){.cookiebar{transition:max-width .3s var(--ease-out),padding .3s var(--ease-out)}}

/* .contact__list (ul>li) del sitio: bloques.css targetea "div" descendiente (icono+texto en fila);
   li>div externo lo hereda bien, pero el div interno titulo+br+descripcion tambien matchea y
   quedaba en fila -> se re-declara bloque para que el titulo y la descripcion sigan apiladas */
.contact__list .cl-body{display:block}
.contact__list li > div{gap:15px}

/* shop.html: 2 fotos del bloque "catalogo limpio" leian mas frias/ambientales que sus vecinas de
   estudio (pallet de exportacion con luz de galpon, rueda con fondo de calle azulado) — se
   neutraliza el tono de color para acercarlas al resto sin regenerar las fotos */
.ncshcard__img img[data-label="Export Pallet"],
.ncshcard__img img[data-label="City Comfort Tire"]{filter:saturate(.88) hue-rotate(-4deg) brightness(1.03) contrast(.98)}

/* index.html: la foto de robots del blog-teaser #3 es mas fria/azulada que sus 2 vecinas calidas */
.ncpost__img img[data-label="Future of manufacturing"]{filter:saturate(.94) hue-rotate(6deg) brightness(1.04) sepia(.06)}

/* ============================================================ BRANDS — franja de logos de marcas distribuidas
   (label discreto, NO usa .eyebrow para no repetir el patron ya acotado a 2 por pagina) */
.ncbrands-band{padding:clamp(40px,5vw,60px) 0;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ncbrands__eye{text-align:center;font:600 12px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 30px}
.ncbrands{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(30px,5vw,60px)}
.ncbrands img{height:38px;width:auto;object-fit:contain;opacity:.9;transition:opacity .25s,transform .25s var(--ease-out)}
.ncbrands img:hover{opacity:1;transform:translateY(-2px)}
.ncbrands img[alt="Viwann"]{height:52px}
@media(max-width:640px){.ncbrands{gap:26px 34px}.ncbrands img{height:30px}.ncbrands img[alt="Viwann"]{height:42px}}

/* foco visible de marca */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* skip-link: oculto fuera de viewport, aparece solo con foco de teclado (sin regla en ningun lado
   del sistema, se veia como texto pelado siempre visible arriba a la izquierda) */
.skip-link{position:absolute;top:-100px;left:8px;z-index:200;background:var(--accent);color:var(--accent-ink);padding:10px 16px;border-radius:8px;font-weight:600;font-size:14px;transition:top .2s var(--ease-out)}
.skip-link:focus{top:8px}

/* boton "Browse Categories" del header (categoria bar): el resto del sitio usa esquinas
   redondeadas (10px cards/botones, 30px pills) pero este boton tenia border-radius:0 */
.ncdrop__btn{border-radius:var(--radius) var(--radius) 0 0}
@media(max-width:860px){.ncdrop__btn{border-radius:0}}

/* breadcrumb de los posts de blog: .crumb (bloques.css) es blanco pensado para vivir sobre
   .subhero oscuro, pero blog-*.html lo coloca fuera de .subhero, sobre el fondo claro de pagina */
.ncarticle .crumb{color:var(--ink-faint)}
.ncarticle .crumb a:hover{color:var(--accent-text)}

/* ============================================================ MOTION real: tilt magnetico en tarjetas/circulos, hover con intencion */
.ncring__item,.ncshcard,.ncpost,.qcard{transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s}
@media(hover:hover){
  .ncring__item:hover{transform:translateY(-6px)}
  .qcard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
}