/* ============================================================
   BRANDING BOARD — Yuxi Nexa Home & Industrial Group Co., Limited
   Trading / sourcing export (Hong Kong) — electrodomésticos, materiales
   de construcción y vehículos para mercados de Latam (Rep. Dominicana).
   Paleta "Cobalt Amber" tomada del logo: cobalto #0030b0 + ámbar #f0a800.
   Tipografía: JetBrains Mono (display/datos, pedido del cliente) + Inter (cuerpo).
   Cambiar este archivo re-skinea toda la web sin tocar los bloques.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* Paleta del cliente: cobalto del logo + navy profundo derivado */
  --brand-1:oklch(0.25 0.095 266);   /* navy cobalto profundo (nav/footer/hero/bandas) */
  --brand-2:oklch(0.37 0.155 266);   /* cobalto medio */
  --brand-3:oklch(0.46 0.215 264);   /* cobalto vivo del logo #0030b0 */
  --brand-4:oklch(0.74 0.085 264);   /* cobalto claro / periwinkle */
  --brand-5:oklch(0.93 0.022 264);   /* azul muy claro (fondos suaves) */

  /* Acento ámbar/dorado (la flecha del logo) */
  --accent:oklch(0.80 0.155 79);     /* ámbar dorado para rellenos/botones/CTA */
  --accent-ink:oklch(0.24 0.05 266); /* texto sobre el ámbar (navy casi negro) */
  --accent-text:oklch(0.53 0.115 67);/* ámbar oscuro para texto chico sobre claro (AA >=4.5) */

  /* Roles derivados */
  --ink:oklch(0.24 0.012 266);
  --ink-soft:oklch(0.45 0.016 266);
  --ink-faint:oklch(0.58 0.012 266);
  --surface:oklch(0.993 0.002 255);
  --surface-2:oklch(0.965 0.006 258);
  --card:oklch(1 0 0);
  --line:oklch(0.90 0.008 258);

  /* Personalidad — técnica, comercial, sólida (mono en titulares = sello de marca) */
  --font-display:'JetBrains Mono','PingFang SC','Microsoft YaHei','Noto Sans SC',ui-monospace,monospace;
  --font-body:'Inter','PingFang SC','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  --radius:7px;
  --maxw:1200px;
  --shadow:0 22px 54px -28px oklch(0.25 0.09 266 / 0.55);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---- Overrides de marca: contraste AA del ámbar sobre claro ---- */
.eyebrow{color:var(--accent-text)}
.statc__c .delta,.tl span,.value .vn,.svc .num,.dlabel span{color:var(--accent-text)}
/* datos/specs en mono (refuerza la personalidad técnica) */
.hero__meta b,.stats b,.statc__c b,.spectable td,.speccard dd,.bento__cell .k,.prod__spec b{
  font-family:var(--font-mono);font-feature-settings:"tnum" 1;letter-spacing:-0.01em}
/* los titulares mono respiran mejor con un poco más de interletra negativa controlada */
h1,h2,h3{letter-spacing:-0.015em}

/* ============================================================ NAV — logo real (PNG) con swap claro/oscuro */
.nav__logo{gap:0;align-items:center}
.nav__logo img{height:38px;width:auto;display:block}
.nav__logo .logo-dark{display:none}          /* versión a color: solo cuando el nav es blanco (scrolled) */
.nav.scrolled .nav__logo .logo-light{display:none}
.nav.scrolled .nav__logo .logo-dark{display:block}
/* footer (siempre navy): logo blanco */
.foot__logo img{height:48px;width:auto;display:block}
/* header móvil: piezas compactas para no saturar (logo + idioma + CTA + burger) */
@media(max-width:860px){
  .nav__cta{gap:8px}
  .nav__cta .btn--primary{padding:9px 14px;font-size:13px}
  .nav__logo img{height:32px}
  .lang--dd .lang__trigger{padding:6px 9px}
}
@media(max-width:420px){
  .nav__logo img{height:27px}
  .nav__cta .btn--primary{padding:8px 11px;font-size:12px}
}

/* ============================================================ HERO — eyebrow claro sobre navy + meta en mono */
.hero .eyebrow,.subhero .eyebrow{color:var(--brand-4)}
.hero__meta b{color:#fff}
.hero__bg img{filter:saturate(1.02) contrast(1.03)}
/* El .container es hijo flex del .hero (display:flex); sin width:100% se encoge al ancho
   del contenido y el texto del hero deja de alinear con el logo del nav (LOGO-alineado).
   Forzar el ancho lo recoloca en el mismo margen del contenedor que el logo. */
.hero>.container{width:100%}
/* hero compacto: el contenido entra cómodo en el primer fold y el meta/CTA no quedan
   tapados por la barra de cookies fija (FOLD-cookie). */
.hero{min-height:88vh}
.hero__in{padding:104px 0 40px;max-width:720px}
.hero h1{font-size:clamp(2.1rem,5vw,3.5rem);max-width:18ch}
.hero p{font-size:clamp(1rem,1.6vw,1.18rem);margin-top:16px}
.hero__cta{margin-top:26px}
.hero__meta{margin-top:30px;gap:30px}
.hero__meta b{font-size:1.7rem}
/* móvil: hero aún más compacto para que el meta no caiga bajo la barra de cookies (más alta en columna) */
@media(max-width:560px){
  .hero__in{padding:84px 0 30px}
  .hero h1{font-size:1.85rem;line-height:1.16;max-width:22ch}
  .hero p{font-size:.98rem;margin-top:12px}
  .hero__cta{margin-top:20px;gap:10px}
  .hero__cta .btn{padding:12px 18px;font-size:14px}
  /* el meta de 3 cifras se amontona en 360px y compite con la barra de cookies;
     las mismas cifras viven en la banda de stats más abajo, así que se oculta en móvil */
  .hero__meta{display:none}
}
/* barra de cookies compacta en móvil (fila, no columna): ocupa menos alto y no tapa el
   meta del hero en el primer fold (FOLD-cookie). */
@media(max-width:520px){
  .cookiebar{flex-direction:row;text-align:left;padding:10px 14px;font-size:12px;gap:10px;bottom:12px}
  .cookiebar .btn{padding:8px 13px;font-size:12px}
}

/* ============================================================ STRIP de capacidades (banda mono bajo el hero) */
.capstrip{background:var(--brand-1);color:rgba(255,255,255,.78);border-top:1px solid rgba(255,255,255,.10)}
.capstrip__in{display:flex;gap:18px 40px;align-items:center;justify-content:center;flex-wrap:wrap;
  padding:18px 0;font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.02em}
.capstrip__in span{display:inline-flex;align-items:center;gap:10px}
.capstrip__in i{color:var(--accent);font-style:normal;font-size:9px}

/* ============================================================ VERTICALS — 3 columnas de negocio (componente firma) */
.verts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
.vert{position:relative;border-radius:calc(var(--radius)*1.6);overflow:hidden;min-height:340px;
  display:flex;flex-direction:column;justify-content:flex-end;color:#fff;isolation:isolate;
  border:1px solid var(--line);box-shadow:var(--shadow)}
.vert img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s var(--ease)}
.vert::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,transparent 28%,color-mix(in oklab,var(--brand-1),transparent 28%) 70%,var(--brand-1) 100%)}
.vert:hover img{transform:scale(1.05)}
.vert__in{padding:26px 24px}
.vert__n{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--accent)}
.vert h3{font-size:1.4rem;margin-top:8px;color:#fff;letter-spacing:-0.01em}
.vert p{font-size:14px;color:rgba(255,255,255,.84);margin-top:8px;max-width:34ch}
.vert__link{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--font-mono);
  font-size:12.5px;font-weight:700;letter-spacing:.04em;color:#fff;border-bottom:2px solid var(--accent);padding-bottom:3px}
.vert__link:hover{gap:12px}
@media(max-width:860px){.verts{grid-template-columns:1fr}.vert{min-height:300px}}

/* ============================================================ FZIG — lista de specs del servicio + imagen que iguala la altura del texto */
.fzig__list{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:12px}
.fzig__list li{position:relative;padding-left:26px;font-size:14.5px;color:var(--ink-soft);line-height:1.55}
.fzig__list li::before{content:"›";position:absolute;left:6px;top:0;color:var(--accent-text);font-weight:800;font-family:var(--font-mono)}
.fzig__list b{color:var(--ink);font-weight:700}
.fzig__list b::after{content:": ";color:var(--ink-soft);font-weight:400}
/* en desktop, la foto se estira para igualar la altura del bloque de texto (no más huecos verticales);
   en móvil (apilado) se mantiene el aspect-ratio de bloques. La proporción de fzig no entra al gate de "chorizos". */
@media(min-width:761px){
  .fzig__row{align-items:stretch}
  .fzig__media{display:flex}
  .fzig__media img{height:100%;width:100%;aspect-ratio:auto;min-height:320px;object-fit:cover}
  /* ALTERNAR izq/der: en bloques.css la regla era order:-1 (dejaba todas las fotos a la izquierda).
     order:2 empuja la foto a la derecha en las filas pares -> zigzag real (foto izq, der, izq, der). */
  .fzig__row:nth-child(even) .fzig__media{order:2}
}

/* ============================================================ CATTAGS — chips de categoría mono */
.cattags{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;list-style:none}
.cattags li{font-family:var(--font-mono);font-size:12.5px;font-weight:600;color:var(--ink-soft);
  background:var(--surface-2);border:1px solid var(--line);border-radius:30px;padding:7px 14px}
.cattags li::before{content:"▸ ";color:var(--accent-text)}

/* ============================================================ legales escaneables (TOC sticky) */
.legal{display:grid;grid-template-columns:230px 1fr;gap:clamp(28px,5vw,56px);align-items:start}
.legal__toc{position:sticky;top:96px;font-size:14px}
.legal__toc a{display:block;padding:7px 0 7px 14px;color:var(--ink-soft);border-left:2px solid var(--line);transition:color .2s,border-color .2s}
.legal__toc a:hover{color:var(--accent-text);border-color:var(--accent)}
.legal__body h2{font-size:1.3rem;margin:34px 0 10px;scroll-margin-top:96px}
.legal__body h2:first-child{margin-top:0}
.legal__body p,.legal__body li{color:var(--ink-soft);font-size:15px;margin-top:10px}
.legal__body ul{margin-left:20px}
.legal__meta{font-size:13.5px;color:var(--ink-faint);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:8px}
@media(max-width:760px){.legal{grid-template-columns:1fr}.legal__toc{position:static}}

/* foco reforzado en el formulario */
.form input:focus-visible,.form textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ============================================================ 404 */
.nf{min-height:70vh;display:grid;place-items:center;text-align:center;padding:120px 0 60px}
.nf__code{font-family:var(--font-display);font-weight:800;font-size:clamp(4rem,16vw,9rem);line-height:1;color:var(--brand-3)}
.nf h1{font-size:clamp(1.4rem,4vw,2rem);margin-top:10px}
.nf p{color:var(--ink-soft);margin:12px auto 26px;max-width:42ch}