/* =========================================================================
   SilkVin — dirección de arte «Ruta de Seda Nocturna»
   Campo índigo dominante · oro seda reservado a UN rol · arena como respiro.
   Esquinas a 0 en todo el sitio (sello, no tarjeta). Un solo botón sólido por
   pantalla. Propiedades lógicas en todas partes: el árabe voltea solo.
   ========================================================================= */

:root{
  /* --- campo oscuro --- */
  --ink:      #0A1420;   /* fondo dominante */
  --ink-2:    #0D1B29;   /* bloques y tarjetas */
  --ink-3:    #12263A;   /* elevación / hover */
  --hair:     rgba(233,236,240,.11);
  --hair-2:   rgba(233,236,240,.20);
  --fg:       #E9ECF0;
  --fg-2:     #9AACBF;
  --fg-3:     #8497AB;

  /* --- oro: SOLO cifras, VIN, un botón y el filete de sección --- */
  --gold:     #D4A537;
  --gold-2:   #E8C87A;
  --gold-hair:rgba(212,165,55,.30);

  /* --- campo claro (arena, nunca blanco puro) --- */
  --sand:     #F4EFE6;
  --sand-2:   #E9E1D2;
  --sand-ink: #0A1420;
  --sand-fg2: #55606E;
  --sand-hair:rgba(10,20,32,.13);

  /* --- ritmo --- */
  --gap:      104px;
  --pad:      clamp(20px, 5vw, 64px);
  --max:      1280px;
  --measure:  720px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --hdrh:  62px;   /* alto real de la cabecera fija */
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--ink); color:var(--fg);
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
h1,h2,h3,h4,p,figure,blockquote{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }

/* ---------- tipografía ---------- */
.display,h1,h2.display,h3.display{
  font-family:"Instrument Serif","Times New Roman",serif;
  font-weight:400; line-height:.98; letter-spacing:-.012em;
}
.d-xl{ font-size:clamp(42px, 6.6vw, 92px) }
.d-l { font-size:clamp(32px, 4.3vw, 56px) }
.d-m { font-size:clamp(25px, 2.9vw, 37px) }
.d-s { font-size:clamp(21px, 2.1vw, 27px) }

.eyebrow{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); font-weight:500; display:flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:""; inline-size:26px; block-size:1px; background:var(--gold); opacity:.7; flex:none }
.eyebrow.plain::before{ display:none }

.lede{ font-size:clamp(18px,1.55vw,21px); line-height:1.6; color:var(--fg-2); max-inline-size:var(--measure) }
.body{ max-inline-size:var(--measure); color:var(--fg-2) }
.body p + p{ margin-block-start:1.05em }
.body strong{ color:var(--fg); font-weight:600 }

.mono{ font-family:"JetBrains Mono",ui-monospace,monospace; font-variant-ligatures:none }
.num{ font-family:"JetBrains Mono",ui-monospace,monospace; color:var(--gold); font-weight:500; letter-spacing:-.02em }
/* Los VIN y números de parte siempre de izquierda a derecha, incluso en árabe */
.ltr{ direction:ltr; unicode-bidi:isolate; display:inline-block }

/* ---------- rejilla ---------- */
.wrap{ inline-size:min(100% - var(--pad)*2, var(--max)); margin-inline:auto }
.wrap-wide{ inline-size:min(100% - var(--pad)*2, 1500px); margin-inline:auto }
section{ padding-block:var(--gap) }
.section-sand{ background:var(--sand); color:var(--sand-ink) }
.section-sand .lede,.section-sand .body{ color:var(--sand-fg2) }
.section-sand .body strong{ color:var(--sand-ink) }
.section-sand .eyebrow{ color:#775A11 }
.section-sand .eyebrow::before{ background:#775A11 }
.section-sand .num{ color:#775A11 }

.rule{ block-size:1px; background:var(--hair); border:0 }
.section-sand .rule{ background:var(--sand-hair) }

/* ---------- cabecera ---------- */
.hdr{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:60;
  display:flex; align-items:center; gap:20px;
  padding:18px var(--pad);
  transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
  border-block-end:1px solid transparent;
}
.hdr.solid{ background:rgba(10,20,32,.90); backdrop-filter:blur(14px); border-block-end-color:var(--hair) }
.brand{ display:flex; align-items:center; gap:12px; flex:none }
.brand .wm{ font-family:"Instrument Serif",serif; font-size:21px; letter-spacing:.10em; line-height:1; color:#F3F1EC }
.nav{ display:flex; align-items:center; gap:30px; margin-inline-start:auto }
.nav a{ font-size:14px; color:var(--fg-2); letter-spacing:.01em; position:relative; padding-block:6px }
.nav a::after{ content:""; position:absolute; inset-block-end:0; inset-inline-start:0; inline-size:0; block-size:1px; background:var(--gold); transition:inline-size .3s var(--ease) }
.nav a:hover{ color:var(--fg) } .nav a:hover::after,.nav a[aria-current]::after{ inline-size:100% }
.nav a[aria-current]{ color:var(--fg) }

.langs{ display:flex; gap:2px; align-items:center }
.langs a{
  font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-3); padding:5px 8px; border:1px solid transparent;
}
.langs a:hover{ color:var(--fg) }
.langs a[aria-current]{ color:var(--ink); background:var(--gold); font-weight:700 }

/* botón hamburguesa */
.burger{ display:none; align-items:center; gap:9px; margin-inline-start:auto; background:none;
  border:1px solid var(--hair-2); color:var(--fg); padding:9px 13px;
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; cursor:pointer }
.burger .bars{ inline-size:14px; block-size:9px; flex:none; position:relative }
.burger .bars::before,.burger .bars::after{ content:""; position:absolute; inset-inline:0; block-size:1px; background:currentColor }
.burger .bars::before{ inset-block-start:0 } .burger .bars::after{ inset-block-end:0 }
.mobnav{ display:none }

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:11px;
  font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase;
  padding:16px 26px; border:1px solid var(--gold); color:var(--ink); background:var(--gold);
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
  cursor:pointer;
}
.btn:hover{ background:var(--gold-2); border-color:var(--gold-2); transform:translateY(-2px) }
.btn-ghost{ background:transparent; color:var(--fg); border-color:var(--hair-2) }
.btn-ghost:hover{ background:transparent; border-color:var(--gold); color:var(--gold) }
.section-sand .btn-ghost{ color:var(--sand-ink); border-color:var(--sand-hair) }
.section-sand .btn-ghost:hover{ border-color:#775A11; color:#775A11 }
.btn .arw{ transition:transform .25s var(--ease) }
.btn:hover .arw{ transform:translateX(4px) }
[dir="rtl"] .btn .arw{ transform:scaleX(-1) }
[dir="rtl"] .btn:hover .arw{ transform:scaleX(-1) translateX(4px) }

/* =========================================================================
   HERO — foto a sangre, velo índigo, titular editorial
   ========================================================================= */
.hero{ position:relative; min-block-size:min(94vh, 900px); display:flex; align-items:flex-end; padding-block:150px 0; overflow:hidden }
.hero-img{ position:absolute; inset:0; z-index:0 }
.hero-img img{ inline-size:100%; block-size:100%; object-fit:cover; object-position:44% 55% }
.hero-veil{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top, var(--ink) 0%, rgba(10,20,32,.70) 26%, rgba(10,20,32,.20) 58%, rgba(10,20,32,.46) 100%),
    linear-gradient(to right, rgba(10,20,32,.76) 0%, rgba(10,20,32,.32) 42%, rgba(10,20,32,.06) 76%);
}
[dir="rtl"] .hero-veil{ background:
    linear-gradient(to top, var(--ink) 0%, rgba(10,20,32,.70) 26%, rgba(10,20,32,.20) 58%, rgba(10,20,32,.46) 100%),
    linear-gradient(to left, rgba(10,20,32,.76) 0%, rgba(10,20,32,.32) 42%, rgba(10,20,32,.06) 76%); }
.hero .wrap{ position:relative; z-index:2; padding-block-end:clamp(48px,7vw,92px) }
.hero h1{ margin-block:26px 26px; max-inline-size:15ch }
.hero h1 em{ font-style:italic; color:var(--gold-2) }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-block-start:36px }

/* franja de datos bajo el hero */
.stripe{ border-block:1px solid var(--hair); background:var(--ink-2) }
.stripe ul{ display:grid; grid-template-columns:repeat(4,1fr) }
.stripe li{ padding:30px clamp(16px,2.2vw,32px); border-inline-end:1px solid var(--hair) }
.stripe li:last-child{ border-inline-end:0 }
.stripe .k{ font-family:"JetBrains Mono",monospace; font-size:clamp(21px,2.3vw,30px); color:var(--gold); font-weight:500; line-height:1.1 }
.stripe .v{ font-size:13px; color:var(--fg-3); margin-block-start:9px; line-height:1.45 }

/* =========================================================================
   BLOQUES DE CONTENIDO
   ========================================================================= */
/* A · editorial a dos columnas asimétricas */
.split{ display:grid; grid-template-columns:minmax(min(300px,100%),.92fr) minmax(min(320px,100%),1fr); gap:clamp(32px,5vw,84px); align-items:start }
.split.tight{ grid-template-columns:minmax(min(280px,100%),.7fr) minmax(min(320px,100%),1fr) }

/* B · cifras grandes en fila */
.figs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr)); gap:1px; background:var(--sand-hair); margin-block-start:56px }
.figs li{ background:var(--sand); padding:30px 26px 30px 0 }
.figs li:not(:first-child){ padding-inline-start:26px }
.figs .k{ font-family:"JetBrains Mono",monospace; font-size:clamp(30px,3.6vw,46px); color:#8A6A1B; line-height:1; letter-spacing:-.03em }
.figs .v{ margin-block-start:14px; font-size:14.5px; color:var(--sand-fg2); line-height:1.5 }
.figs .s{ margin-block-start:10px; font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.1em; color:#6F6350; text-transform:uppercase }

/* C · pasos con filete */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:1px; background:var(--hair); margin-block-start:60px }
.steps li{ background:var(--ink); padding:34px 30px 38px; position:relative }
.steps .n{ font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.2em; color:var(--gold); margin-block-end:22px }
.steps h3{ font-family:"Instrument Serif",serif; font-size:26px; line-height:1.1; margin-block-end:13px }
.steps p{ font-size:14.5px; color:var(--fg-2); line-height:1.6 }
/* Los peldaños también viven sobre campo arena (página «Nosotros»): sin esto
   heredaban el fondo índigo y el titular quedaba tinta sobre tinta. */
.section-sand .steps li{ background:var(--sand) }
.section-sand .steps .n{ color:#775A11 }
.section-sand .steps h3{ color:var(--sand-ink) }
.section-sand .steps p{ color:var(--sand-fg2) }

/* D · banda fotográfica a sangre con cita */
.band{ position:relative; min-block-size:clamp(400px,56vw,620px); display:flex; align-items:center; overflow:hidden }
.band img{ position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; object-position:50% 34%; z-index:0 }
.band--person img{ object-position:62% 42% }
.band .veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(to right, rgba(10,20,32,.93) 0%, rgba(10,20,32,.72) 46%, rgba(10,20,32,.30) 100%) }
[dir="rtl"] .band .veil{ background:linear-gradient(to left, rgba(10,20,32,.93) 0%, rgba(10,20,32,.72) 46%, rgba(10,20,32,.30) 100%) }
.band .wrap{ position:relative; z-index:2 }
.band blockquote{ font-family:"Instrument Serif",serif; font-size:clamp(26px,3.3vw,44px); line-height:1.18; max-inline-size:19ch }
.band cite{ display:block; font-style:normal; margin-block-start:26px; font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.19em; text-transform:uppercase; color:#93A6BA }

/* D2 · mosaico del servicio — cinco imágenes, rejilla asimétrica de 12 columnas */
.mosaic{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:1px;
  background:var(--hair); margin-block-start:56px; border-block:1px solid var(--hair) }
.mosaic figure{ margin:0; background:var(--ink-2); display:flex; flex-direction:column }
.mosaic .ph{ position:relative; overflow:hidden }
.mosaic .ph img{ inline-size:100%; aspect-ratio:16/10; object-fit:cover;
  transition:transform .9s var(--ease) }
.mosaic figure:hover .ph img{ transform:scale(1.035) }
/* filete oro sobre la foto: liga el número con la imagen sin cajas de color */
.mosaic .ph::after{ content:""; position:absolute; inset-block-end:0; inset-inline-start:0;
  inline-size:44px; block-size:2px; background:var(--gold) }
.mosaic figcaption{ padding:24px 26px 30px; flex:1 }
.mosaic .n{ font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold) }
.mosaic h3{ font-family:"Instrument Serif",serif; font-weight:400; font-size:25px;
  line-height:1.12; margin-block:14px 11px }
.mosaic p{ font-size:14px; color:var(--fg-2); line-height:1.6 }
.mosaic .m7{ grid-column:span 7 } .mosaic .m5{ grid-column:span 5 }
.mosaic .m4{ grid-column:span 4 }
@media (max-width:1000px){
  .mosaic .m7,.mosaic .m5{ grid-column:span 6 }
  .mosaic .m4{ grid-column:span 6 }
  .mosaic .m4:last-child{ grid-column:1 / -1 }
  .mosaic .m4:last-child .ph img{ aspect-ratio:21/9 }
}
@media (max-width:640px){ .mosaic figure{ grid-column:1 / -1 !important } }
[lang="ar"] .mosaic h3{ font-weight:600; font-size:21px; line-height:1.4 }

/* D3 · tira de marcas — palabra compuesta, NO logotipos: SilkVin es un proveedor
   independiente y reproducir los logos insinuaría una autorización que no existe. */
/* Tira de marcas. Los PNG son tinta plana con alfa, así que sobre campo oscuro
   basta invertirlos: no hace falta un segundo juego de archivos. */
/* Rejilla, no flex: son 15 marcas de anchos muy distintos y con `flex-wrap` la
   última cae sola en una tercera fila. 15 = 5×3 y = 3×5, así que con 5 o 3
   columnas las filas siempre salen exactas. */
.brandstrip{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(22px,2.8vw,36px); margin-block-start:36px; max-inline-size:1050px }
.brandstrip li{ display:flex; align-items:center; justify-content:center;
  block-size:clamp(36px,4vw,52px) }
.brandstrip img{ inline-size:auto; block-size:auto;
  max-block-size:100%; max-inline-size:100%;
  filter:invert(1); opacity:.88 }
@media (max-width:900px){ .brandstrip{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.section-sand .brandstrip img{ filter:none; opacity:.86 }
.brandstrip .wm{ font-family:"JetBrains Mono",monospace;
  font-size:clamp(13px,1.5vw,18px); letter-spacing:.15em; text-transform:uppercase;
  color:var(--fg); opacity:.8 }
.section-sand .brandstrip .wm{ color:var(--sand-ink); opacity:.78 }
[lang="ar"] .brandstrip li{ font-family:"IBM Plex Sans Arabic",sans-serif; font-weight:600; font-size:clamp(18px,1.9vw,25px) }
.tmnote{ margin-block-start:26px; max-inline-size:76ch; font-size:12.5px; line-height:1.62; color:var(--fg-3) }
.section-sand .tmnote{ color:var(--sand-fg2) }

/* E · tarjetas oscuras */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr)); gap:1px; background:var(--hair); margin-block-start:56px }
@media (min-width:1000px){ .cards--3{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.card{ background:var(--ink-2); padding:32px 30px 36px; transition:background .3s var(--ease) }
.card:hover{ background:var(--ink-3) }
.card h3{ font-family:"Instrument Serif",serif; font-size:25px; line-height:1.12; margin-block:16px 12px }
.card p{ font-size:14.5px; color:var(--fg-2); line-height:1.6 }
.card .tag{ font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold) }

/* F · media + texto */
.media{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:clamp(28px,4.5vw,72px); align-items:center }
.media figure{ position:relative }
.media img{ inline-size:100% }
.media figcaption{ font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--fg-3); margin-block-start:14px }
.section-sand .media figcaption{ color:#5C6775 }

/* G · tabla de datos */
.tbl{ inline-size:100%; border-collapse:collapse; margin-block-start:48px; font-size:14.5px }
.tbl th{ text-align:start; font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.19em; text-transform:uppercase; color:var(--fg-3); font-weight:500; padding:0 18px 15px 0; border-block-end:1px solid var(--hair-2) }
.tbl td{ padding:17px 18px 17px 0; border-block-end:1px solid var(--hair); vertical-align:top; color:var(--fg-2) }
.tbl td:first-child{ color:var(--fg); font-weight:500 }
.tbl tr:hover td{ background:rgba(233,236,240,.025) }
.section-sand .tbl th{ color:var(--sand-fg2); border-block-end-color:var(--sand-hair) }
.section-sand .tbl td{ color:var(--sand-fg2); border-block-end-color:var(--sand-hair) }
.section-sand .tbl td:first-child{ color:var(--sand-ink) }
.tbl tr.grp th{ text-align:start;
  padding:34px 0 12px; border-block-end:1px solid var(--gold-hair); color:var(--gold);
  font-size:10.5px; letter-spacing:.22em;
}
.tbl tr.grp:first-child th{ padding-block-start:0 }
.scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch }

/* H · el puntaje de confianza */
.scores{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:1px; background:var(--hair); margin-block-start:56px }
.score{ background:var(--ink-2); padding:30px 28px 34px; border-block-start:2px solid var(--gold) }
.score.mid{ border-block-start-color:#8FA0B3 }
.score.low{ border-block-start-color:#C25A3E }
.score .n{ font-family:"JetBrains Mono",monospace; font-size:32px; color:var(--gold); line-height:1; letter-spacing:-.02em }
.score.mid .n{ color:#B7C4D2 } .score.low .n{ color:#D8735A }
.score h3{ font-size:15px; font-family:Archivo,"Helvetica Neue",Arial,sans-serif; line-height:1.35; font-weight:600; margin-block:16px 9px; letter-spacing:.01em }
.score p{ font-size:14px; color:var(--fg-2); line-height:1.58 }

/* I · maqueta de conversación por WhatsApp */
.chat{ background:var(--ink-2); border:1px solid var(--hair); padding:clamp(20px,3vw,34px); max-inline-size:560px }
.chat .hd{ display:flex; align-items:center; gap:11px; padding-block-end:18px; margin-block-end:22px; border-block-end:1px solid var(--hair); font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3) }
.chat .dot{ inline-size:7px; block-size:7px; background:#3FBF6A; flex:none }
.msg{ margin-block-end:16px; max-inline-size:88% }
.msg .who{ font-family:"JetBrains Mono",monospace; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3); margin-block-end:7px }
.msg .bub{ padding:15px 17px; font-size:14.5px; line-height:1.58; background:var(--ink-3); color:var(--fg-2); border-inline-start:2px solid var(--hair-2) }
.msg.mine{ margin-inline-start:auto }
.msg.mine .bub{ background:rgba(212,165,55,.09); border-inline-start-color:var(--gold); color:var(--fg) }
.msg .conf{ font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--gold); display:inline-block; margin-block-start:9px; letter-spacing:.06em }

/* J · corredores logísticos */
.lanes{ margin-block-start:52px; border-block-start:1px solid var(--sand-hair) }
.lanes li{ display:grid; grid-template-columns:minmax(min(160px,100%),1.2fr) minmax(min(140px,100%),1fr) auto; gap:18px 24px; align-items:baseline; padding:22px 0; border-block-end:1px solid var(--sand-hair) }
.lanes .a{ font-size:17px; font-weight:600; color:var(--sand-ink) }
.lanes .b{ font-size:14px; color:var(--sand-fg2) }
.lanes .c{ font-family:"JetBrains Mono",monospace; font-size:16px; color:#775A11; white-space:nowrap; text-align:end }

.lanes--dark{ border-block-start-color:var(--hair) }
.lanes--dark li{ border-block-end-color:var(--hair) }
.lanes--dark .a{ color:var(--fg) }
.lanes--dark .b{ color:var(--fg-2) }
.lanes--dark .c{ color:var(--gold) }

/* K · lista de comprobación */
.checks{ margin-block-start:30px; display:grid; gap:14px; max-inline-size:var(--measure) }
.checks li{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; font-size:15.5px; color:var(--fg-2); line-height:1.55 }
.checks .mk{ color:var(--gold); font-family:"JetBrains Mono",monospace; font-size:13px; line-height:1.75 }
.checks.no .mk{ color:#DE8067 }
.section-sand .checks li{ color:var(--sand-fg2) }
.section-sand .checks .mk{ color:#775A11 }
.section-sand .checks.no .mk{ color:#993A1E }

/* L · formulario */
.form{ display:grid; gap:20px; max-inline-size:620px; margin-block-start:40px }
.field label{ display:block; font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3); margin-block-end:9px }
.field input,.field textarea,.field select{
  inline-size:100%; background:var(--ink-2); border:1px solid var(--hair-2); color:var(--fg);
  padding:14px 16px; font-family:Archivo,sans-serif; font-size:15.5px; border-radius:0;
  transition:border-color .25s var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--gold) }
.field input.mono{ font-family:"JetBrains Mono",monospace; letter-spacing:.09em; text-transform:uppercase }
.field .hint{ font-size:12.5px; color:var(--fg-3); margin-block-start:8px }
.form-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:20px }

/* M · CTA de cierre */
.cta{ position:relative; overflow:hidden; padding-block:clamp(76px,9vw,120px) }
.cta img{ position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; z-index:0 }
.cta .veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(to bottom, rgba(10,20,32,.74), rgba(10,20,32,.90)) }
.cta .wrap{ position:relative; z-index:2; text-align:center }
.cta h2{ margin-inline:auto; max-inline-size:17ch }
.cta .lede{ margin-inline:auto; text-align:center; margin-block-start:22px }
.cta .hero-actions{ justify-content:center }

/* ---------- pie ---------- */
.ftr{ background:var(--ink-2); border-block-start:1px solid var(--hair); padding-block:72px 36px }
.ftr-grid{ display:grid; grid-template-columns:minmax(min(260px,100%),1.4fr) repeat(auto-fit,minmax(min(150px,100%),1fr)); gap:44px }
.ftr h3{ font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-3); margin-block-end:18px }
.ftr li{ margin-block-end:11px } .ftr li a{ font-size:14.5px; color:var(--fg-2) } .ftr li a:hover{ color:var(--gold) }
.ftr .about{ font-size:14.5px; color:var(--fg-2); max-inline-size:38ch; margin-block-start:20px; line-height:1.62 }
.ftr-btm{ margin-block-start:60px; padding-block-start:26px; border-block-start:1px solid var(--hair); display:flex; flex-wrap:wrap; gap:16px 32px; align-items:center; font-size:12.5px; color:var(--fg-2) } /* fg-3 daba 3,83:1 a 12,5 px: no es AA */
.ftr-btm .mono{ font-size:11px; letter-spacing:.12em }

/* ---------- aviso de piloto (honestidad) ---------- */
.pilot{ border:1px solid var(--gold-hair); background:rgba(212,165,55,.055); padding:22px 26px; margin-block-start:44px; max-inline-size:var(--measure) }
.pilot .t{ font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-block-end:11px }
.pilot p{ font-size:14.5px; color:var(--fg-2); line-height:1.6 }
.section-sand .pilot{ border-color:rgba(138,106,27,.3); background:rgba(138,106,27,.06) }
.section-sand .pilot .t{ color:#775A11 } .section-sand .pilot p{ color:var(--sand-fg2) }

/* ---------- movimiento ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease) }
.reveal.in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}

/* ---------- foco visible ---------- */
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }

/* ---------- móvil ---------- */
@media (max-width: 900px){
  :root{ --gap:62px }
  /* El mínimo de las dos columnas (300+320+gap) supera el viewport: a una columna. */
  .split,.split.tight{ grid-template-columns:minmax(0,1fr) }
  .media{ grid-template-columns:minmax(0,1fr) }
  /* La primera pista del pie pide 260px y las de enlaces 150px: a 360 no caben. */
  .ftr-grid{ grid-template-columns:minmax(0,1fr); gap:38px }
  body{ font-size:16.5px }
  .nav{ display:none }
  .burger{ display:inline-flex }
  /* La cabecera es lo único que sigue desbordando en móvil: marca + botón +
     cuatro idiomas no caben a 360 px con las medidas de escritorio. */
  .hdr{ gap:10px; padding-inline:16px }
  .brand{ min-inline-size:0 } .brand .wm{ font-size:18px }
  .langs a{ padding:5px 5px; font-size:10px; letter-spacing:.05em }
  .langs{ order:3 }
  .hdr{ padding-block:14px }
  .mobnav{ display:block; position:fixed; inset:0; z-index:70; background:var(--ink); padding:96px var(--pad) 40px; transform:translateY(-100%); visibility:hidden; transition:transform .42s var(--ease), visibility .42s; overflow-y:auto }
  .mobnav.open{ transform:none; visibility:visible }
  .mobnav a{ display:block; font-family:"Instrument Serif",serif; font-size:31px; padding-block:15px; border-block-end:1px solid var(--hair) }
  .mobnav .close{ position:absolute; inset-block-start:16px; inset-inline-end:var(--pad); background:none; border:1px solid var(--hair-2); color:var(--fg); padding:9px 13px; font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.16em; cursor:pointer }
  .stripe ul{ grid-template-columns:repeat(2,1fr) }
  .stripe li{ border-block-end:1px solid var(--hair) }
  .stripe li:nth-child(2n){ border-inline-end:0 }
  .hero{ min-block-size:auto; padding-block:132px 0 }
  .hero .wrap{ padding-block-end:56px }
  .band{ min-block-size:420px }
  .lanes li{ grid-template-columns:1fr auto }
  .lanes .b{ grid-column:1/-1; order:3 }
  .figs li{ padding-inline:0 !important }
}
@media (max-width: 580px){
  .burger .blabel{ display:none }
  .burger{ padding:9px 11px }
  .hdr{ gap:8px }
}
@media (max-width: 520px){
  .stripe ul{ grid-template-columns:1fr }
  .stripe li{ border-inline-end:0 }
  .btn{ inline-size:100%; justify-content:center }
  .hero-actions{ gap:11px }
}

/* ---------- árabe ---------- */
[lang="ar"] body,[lang="ar"] .display,[lang="ar"] h1,[lang="ar"] .steps h3,
[lang="ar"] .card h3,[lang="ar"] .band blockquote,[lang="ar"] .brand .wm,
[lang="ar"] .mobnav a{
  font-family:"IBM Plex Sans Arabic","Noto Sans Arabic",sans-serif;
}
[lang="ar"] .display,[lang="ar"] h1{ font-weight:600; line-height:1.24; letter-spacing:0 }
[lang="ar"] .d-xl{ font-size:clamp(34px,5.2vw,68px) }
[lang="ar"] .d-l{ font-size:clamp(27px,3.6vw,45px) }
[lang="ar"] .d-m{ font-size:clamp(22px,2.5vw,31px) }
[lang="ar"] .band blockquote{ font-weight:600; line-height:1.42 }
[lang="ar"] .steps h3,[lang="ar"] .card h3{ font-weight:600; font-size:21px; line-height:1.4 }
[lang="ar"] .eyebrow,[lang="ar"] .btn{ letter-spacing:.04em }
/* La marca denominativa NO se traduce ni se voltea */
[lang="ar"] .brand .wm{ direction:ltr; letter-spacing:.06em; font-weight:600; font-size:19px }

/* El árabe no tiene cursiva: la sintética se ve como un error tipográfico. */
[lang="ar"] .hero h1 em,[lang="ar"] em{ font-style:normal }
/* Rangos numéricos («60–89») dentro de texto RTL: sin aislar, el algoritmo bidi
   los invierte y el lector ve «89–60». */
[lang="ar"] .score .n,[lang="ar"] .stripe .k,[lang="ar"] .figs .k,
[lang="ar"] .lanes .c,[lang="ar"] .tbl td:last-child,[lang="ar"] .msg .conf{
  unicode-bidi:isolate;
}
[lang="ar"] .score .n,[lang="ar"] .tbl td:last-child{ direction:ltr; text-align:start }

/* =========================================================================
   CAPA COMERCIAL B2B
   Añadida sobre la dirección «Ruta de Seda Nocturna» sin tocar sus reglas:
   mismo campo índigo, mismo oro de un solo rol, mismas esquinas a 0.
   Lo que cambia es la densidad — un catálogo mayorista necesita leerse rápido.
   ========================================================================= */

/* Varios componentes de esta capa declaran display:flex/grid, que gana a la
   regla de agente de usuario de [hidden]. Sin esto, el aviso de «sin resultados»
   y la caja de error salían visibles y vacíos en la primera carga. */
[hidden]{display:none !important}

.vh{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.gold{color:var(--gold)}
.lnk{background:none;border:0;padding:0;color:var(--gold);cursor:pointer;
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:9px}
.lnk:hover{color:var(--gold-2)}
.section-sand .lnk{color:#775A11}
.btn-sm{padding:11px 17px;font-size:11px;letter-spacing:.14em}

/* ---------- cabecera: nav + CTA persistente + píldora del RFQ ---------- */
.hdr-cta{flex:none;white-space:nowrap}
.rfqpill[hidden]{display:none}
.rfqpill{display:inline-flex;align-items:center;gap:9px;flex:none;cursor:pointer;
  background:transparent;border:1px solid var(--gold-hair);color:var(--fg);
  padding:10px 13px;font-family:"JetBrains Mono",monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase}
.rfqpill:hover{border-color:var(--gold);color:var(--gold)}
.rfqpill .n{background:var(--gold);color:var(--ink);min-inline-size:19px;text-align:center;
  padding:1px 5px;font-weight:700}
.nav{gap:24px}
.nav a{font-size:13.5px;white-space:nowrap}

@media (max-width:1240px){ .hdr-cta .arw{display:none} }
@media (max-width:1180px){
  .nav{display:none}
  .burger{display:inline-flex;margin-inline-start:auto}
  .hdr-cta{display:none}
}

/* barra fija de acción en móvil — los dos CTA del brief, siempre a mano */
.stickycta{display:none;position:fixed;inset-inline:0;inset-block-end:0;z-index:55;
  gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(10,20,32,.94);backdrop-filter:blur(12px);
  border-block-start:1px solid var(--hair)}
.stickycta .btn{flex:1 1 0;justify-content:center;padding-inline:8px;text-align:center}
@media (max-width:900px){
  .stickycta{display:flex}
  body{padding-block-end:74px}
  .rfqdrawer .rfqdrawer-in{padding-block-end:96px}
}

/* ---------- cajón del RFQ ---------- */
.rfqdrawer{position:fixed;inset:0;z-index:80;background:rgba(4,9,16,.62);overflow:hidden;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.rfqdrawer.open{opacity:1;visibility:visible}
.rfqdrawer-in{position:absolute;inset-block:0;inset-inline-end:0;inline-size:min(460px,100%);
  background:var(--ink-2);border-inline-start:1px solid var(--hair);
  padding:26px var(--pad) 30px;overflow-y:auto;
  transform:translateX(100%);transition:transform .38s var(--ease)}
[dir="rtl"] .rfqdrawer-in{transform:translateX(-100%)}
.rfqdrawer.open .rfqdrawer-in{transform:none}
.rfq-hd{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-block-end:18px;border-block-end:1px solid var(--hair)}
.rfq-hd h2{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:500}
.rfq-hd .close,.mobnav .close{background:none;border:1px solid var(--hair-2);color:var(--fg);
  padding:8px 12px;font-family:"JetBrains Mono",monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.rfq-empty{margin-block-start:26px;font-size:14px;color:var(--fg-3);line-height:1.6}
.rfq-list{margin-block-start:8px}
.rfq-list li{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;
  justify-content:space-between;padding-block:16px;border-block-end:1px solid var(--hair)}
.rfq-list .rl-n{font-size:14.5px;color:var(--fg);flex:1 1 150px;line-height:1.4}
.rfq-list .rl-a{display:flex;align-items:center;gap:12px}
.rfq-list .rl-x{font-size:10px}
.rfq-ft{margin-block-start:26px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.rfq-list--form{margin-block:6px 18px}
.rfq-list--form li{border-block-end-color:var(--hair)}

/* campo de cantidad, compartido por tarjetas, ficha y cajón */
.qtyf{display:inline-flex;align-items:center;gap:9px}
.qtyf > .mono{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.qtyf .qty{inline-size:72px;background:var(--ink);border:1px solid var(--hair-2);color:var(--fg);
  padding:9px 10px;font-family:"JetBrains Mono",monospace;font-size:14px;text-align:center;border-radius:0}
.qtyf .qty:focus{outline:none;border-color:var(--gold)}
.section-sand .qtyf .qty{background:#fff;border-color:var(--sand-hair);color:var(--sand-ink)}

/* ---------- hero comercial ---------- */
.hero--comm{min-block-size:min(88vh,860px)}
.hero--comm .hero-img img{object-position:50% 50%}
.hero--comm .hero-veil{background:
  linear-gradient(to top, var(--ink) 0%, rgba(10,20,32,.74) 24%, rgba(10,20,32,.34) 62%, rgba(10,20,32,.62) 100%),
  linear-gradient(to right, rgba(10,20,32,.90) 0%, rgba(10,20,32,.56) 46%, rgba(10,20,32,.18) 82%)}
[dir="rtl"] .hero--comm .hero-veil{background:
  linear-gradient(to top, var(--ink) 0%, rgba(10,20,32,.74) 24%, rgba(10,20,32,.34) 62%, rgba(10,20,32,.62) 100%),
  linear-gradient(to left, rgba(10,20,32,.90) 0%, rgba(10,20,32,.56) 46%, rgba(10,20,32,.18) 82%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(min(340px,100%),.75fr);
  gap:clamp(30px,4vw,64px);align-items:end}
/* El titular comercial no es el editorial: dos frases que tienen que caber en
   dos líneas y leerse en cinco segundos, no una cita a 92 px. */
.hero--comm h1{font-size:clamp(34px,4.3vw,62px);margin-block:20px 20px;max-inline-size:21ch}
.hero--comm .lede{max-inline-size:52ch}
.b2bline{margin-block-start:20px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.cta .b2bline{margin-block-start:26px}

.vinbox{background:rgba(10,20,32,.86);backdrop-filter:blur(10px);
  border:1px solid var(--gold-hair);padding:26px 24px 24px;display:grid;gap:14px}
.vinbox h2{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:500}
.vinbox input{inline-size:100%;background:var(--ink);border:1px solid var(--hair-2);color:var(--fg);
  padding:15px 16px;font-family:"JetBrains Mono",monospace;font-size:16px;letter-spacing:.10em;
  text-transform:uppercase;border-radius:0}
.vinbox input:focus{outline:none;border-color:var(--gold)}
.vinbox .btn{justify-content:center}
.vinbox .hint{font-size:11.5px;color:var(--fg-3);line-height:1.5}
/* Caja de arranque del héroe: tres puertas B2B (catálogo, marcas, lista) en
   vez del campo de VIN. Misma caja, mismo oro: el VIN pasó a apoyo secundario. */
.startlist{list-style:none;margin:14px 0 16px;padding:0;display:grid;gap:8px}
.startlist a{display:flex;flex-direction:column;gap:3px;padding:11px 14px;min-block-size:44px;
  border:1px solid var(--hair-2);background:var(--ink);color:var(--fg);text-decoration:none;transition:border-color .2s}
.startlist a:hover,.startlist a:focus-visible{border-color:var(--gold);outline:none}
.startlist b{font-weight:500;font-size:14px;line-height:1.3}
.startlist span{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.08em;color:var(--fg-3)}
/* Adjunto que no es imagen (PDF, CSV, Excel): ficha con la extensión */
.thumbs .thf{display:flex;align-items:center;justify-content:center;inline-size:104px;block-size:78px;
  background:var(--ink-3);border:1px solid var(--hair-2);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
@media (max-width:980px){ .hero-grid{grid-template-columns:minmax(0,1fr)} .vinbox{margin-block-start:8px} }

/* franja de confianza a seis */
.stripe--6 ul{grid-template-columns:repeat(6,1fr)}
.stripe--6 .k{font-size:clamp(16px,1.5vw,21px)}
.stripe--6 li{padding:24px clamp(14px,1.6vw,22px)}
@media (max-width:1100px){ .stripe--6 ul{grid-template-columns:repeat(3,1fr)}
  .stripe--6 li{border-block-end:1px solid var(--hair)} .stripe--6 li:nth-child(3n){border-inline-end:0} }
@media (max-width:640px){ .stripe--6 ul{grid-template-columns:repeat(2,1fr)}
  .stripe--6 li:nth-child(3n){border-inline-end:1px solid var(--hair)}
  .stripe--6 li:nth-child(2n){border-inline-end:0} }

/* ---------- tarjetas de categoría ---------- */
.ccards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:1px;background:var(--hair);margin-block-start:56px}
@media (min-width:1100px){ .ccards{grid-template-columns:repeat(4,minmax(0,1fr))} }
.ccard{background:var(--ink-2);display:flex;flex-direction:column;transition:background .3s var(--ease)}
.ccard:hover{background:var(--ink-3)}
.ccard-ph{display:block;overflow:hidden}
.ccard-ph img{inline-size:100%;aspect-ratio:10/7;object-fit:cover;transition:transform .8s var(--ease)}
.ccard:hover .ccard-ph img{transform:scale(1.03)}
.ccard-b{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.ccard-n{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.ccard h3{font-family:"Instrument Serif",serif;font-weight:400;font-size:23px;line-height:1.12}
.ccard p{font-size:13.5px;color:var(--fg-2);line-height:1.55;flex:1}

/* ---------- tarjetas de sector ---------- */
.icards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));
  gap:1px;background:var(--hair);margin-block-start:56px}
.icard{background:var(--ink-2);padding:30px 28px 32px;display:flex;flex-direction:column;gap:12px}
.icard h3{font-family:"Instrument Serif",serif;font-weight:400;font-size:24px;line-height:1.12}
.icard p{font-size:14px;color:var(--fg-2);line-height:1.6;flex:1}
[lang="ar"] .ccard h3,[lang="ar"] .icard h3{font-weight:600;font-size:20px;line-height:1.4}

/* ---------- barra de filtros del catálogo ---------- */
.filterbar{position:sticky;inset-block-start:var(--hdrh);z-index:40;background:rgba(10,20,32,.94);
  backdrop-filter:blur(14px);border-block:1px solid var(--hair);padding-block:16px;
  margin-block-start:var(--gap)}
.filterbar-in{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-content:space-between}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:transparent;border:1px solid var(--hair-2);color:var(--fg-2);cursor:pointer;
  padding:8px 13px;font-family:"JetBrains Mono",monospace;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;display:inline-flex;gap:8px;align-items:center;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
.chip:hover{border-color:var(--gold);color:var(--fg)}
.chip .mono{opacity:.5;font-size:10px}
.chip.is-on{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:600}
.chip.is-on .mono{opacity:.7}
.searchf{flex:1 1 240px;max-inline-size:380px}
.searchf input{inline-size:100%;background:var(--ink-2);border:1px solid var(--hair-2);color:var(--fg);
  padding:11px 14px;font-size:14.5px;font-family:Archivo,sans-serif;border-radius:0}
.searchf input:focus{outline:none;border-color:var(--gold)}
.filtercount{margin-block-start:12px;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-3)}
.noresults{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:center;
  padding:70px var(--pad);text-align:center;color:var(--fg-2);font-size:16px}

.catgroup{padding-block:clamp(48px,6vw,76px)}
.catgroup + .catgroup{padding-block-start:0}
.cathead h2{margin-block:16px 12px}
.cathead .body{font-size:15px}

/* ---------- ficha comercial de catálogo ---------- */
.pcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:1px;background:var(--hair);margin-block-start:34px}
@media (min-width:1100px){ .pcards{grid-template-columns:repeat(3,minmax(0,1fr))} }
.pcard{background:var(--ink-2);display:flex;flex-direction:column;transition:background .3s var(--ease)}
/* Relleno de fin de fila. La rejilla pinta sus huecos con el color de la línea,
   así que una categoría de 1 o 4 familias dejaba media fila con aspecto de
   tarjeta rota. Sólo existe donde la rejilla es de 3 columnas fijas. */
.pcard--ghost{display:none;background:transparent;pointer-events:none}
@media (min-width:1100px){ .pcard--ghost{display:block} }
.pcard:hover{background:var(--ink-3)}
.pcard-ph{display:block;overflow:hidden;background:var(--sand)}
.pcard-ph img{inline-size:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .8s var(--ease)}
.pcard:hover .pcard-ph img{transform:scale(1.03)}
.pcard-b{padding:20px 22px 24px;display:flex;flex-direction:column;gap:11px;flex:1}
.pcard-tag{display:flex;gap:12px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.pcard-tag span:last-child{color:var(--fg-3)}
.pcard h3{font-family:"Instrument Serif",serif;font-weight:400;font-size:23px;line-height:1.14}
.pcard h3 a:hover{color:var(--gold-2)}
.pcard p{font-size:13.5px;color:var(--fg-2);line-height:1.55;flex:1}
.pcard-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-block-start:2px}
.pcard-act{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding-block-start:14px;border-block-start:1px solid var(--hair)}
.pcard-act .btn{flex:1 1 auto;justify-content:center}
.pcard-more{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);
  display:inline-flex;gap:8px;align-items:center}
.pcard-more:hover{color:var(--gold)}
[lang="ar"] .pcard h3{font-weight:600;font-size:19px;line-height:1.45}

.addrfq.is-in{background:transparent;color:var(--gold);border-color:var(--gold)}
.addrfq.flash{background:var(--gold-2);border-color:var(--gold-2);color:var(--ink)}

/* estados de disponibilidad — cuatro, y hoy sólo uno es verdad */
.avail{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;padding:5px 9px;border:1px solid;white-space:nowrap;line-height:1.3}
.avail--stock{color:#5FCF8A;border-color:rgba(95,207,138,.42);background:rgba(95,207,138,.07)}
.avail--supplier{color:#9FC3E8;border-color:rgba(159,195,232,.38);background:rgba(159,195,232,.06)}
.avail--sourced{color:var(--gold);border-color:var(--gold-hair);background:rgba(212,165,55,.06)}
.avail--quote{color:var(--fg-3);border-color:var(--hair-2)}
.section-sand .avail--sourced{color:#775A11;border-color:rgba(138,106,27,.4);background:rgba(138,106,27,.07)}
.section-sand .avail--stock{color:#1E7A46;border-color:rgba(30,122,70,.4)}
.section-sand .avail--supplier{color:#2C5B87;border-color:rgba(44,91,135,.4)}
.section-sand .avail--quote{color:var(--sand-fg2);border-color:var(--sand-hair)}
.unit{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-3);
  padding:5px 0;white-space:nowrap}
.flagh{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:#E1936F;
  border:1px solid rgba(225,147,111,.38);padding:5px 9px;white-space:nowrap}

.availlegend{display:grid;gap:20px}
.availlegend li{display:grid;gap:9px;justify-items:start}
.availlegend p{font-size:14px;color:var(--sand-fg2);line-height:1.55}

/* ---------- ficha individual de familia ---------- */
.fam{padding-block:clamp(140px,15vw,190px) var(--gap)}
.fam-grid{display:grid;grid-template-columns:minmax(min(300px,100%),1fr) minmax(min(320px,100%),1fr);
  gap:clamp(30px,4.5vw,68px);align-items:start;margin-block-start:30px}
.fam-ph{margin:0}
.fam-ph img{inline-size:100%;aspect-ratio:3/2;object-fit:cover;background:var(--sand)}
.fam-ph figcaption{padding:12px 4px 0;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-3)}
.fam-b h1{margin-block:20px 18px}
.fam-b .pcard-meta{margin-block-start:22px}
.fam-act{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-block-start:26px;
  padding-block-start:24px;border-block-start:1px solid var(--hair)}
.pilot--warn{border-color:rgba(225,147,111,.38);background:rgba(225,147,111,.06)}
.pilot--warn .t{color:#E1936F}
.needt{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#775A11;
  margin-block:34px 12px}
.spec{margin:0;border-block-start:1px solid var(--sand-hair)}
.srow{display:grid;grid-template-columns:minmax(min(150px,42%),.6fr) 1fr;gap:12px 22px;
  padding-block:16px;border-block-end:1px solid var(--sand-hair)}
.srow dt{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#775A11}
.srow dd{margin:0;font-size:14.5px;color:var(--sand-fg2);line-height:1.55}
@media (max-width:560px){ .srow{grid-template-columns:minmax(0,1fr);gap:6px} }

.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  gap:1px;background:var(--hair);margin-block-start:34px}
.related a{display:grid;gap:8px;background:var(--ink-2);padding:22px 24px 24px;
  transition:background .3s var(--ease)}
.related a:hover{background:var(--ink-3)}
.related .rn{font-family:"Instrument Serif",serif;font-size:21px;line-height:1.16}
.related .rc{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
[lang="ar"] .related .rn{font-family:"IBM Plex Sans Arabic",sans-serif;font-weight:600;font-size:17px}

/* ---------- migas y cabecera de página ---------- */
.pagehead{padding-block:clamp(150px,17vw,206px) 0}
.pagehead h1{font-size:clamp(31px,4.2vw,56px);margin-block:20px 22px;max-inline-size:20ch}
.crumbs{display:flex;flex-wrap:wrap;gap:9px;align-items:center;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-block-end:24px}
.crumbs a{color:var(--fg-3)} .crumbs a:hover{color:var(--gold)}
.crumbs .sep{opacity:.4}
.crumbs [aria-current]{color:var(--fg-2)}

/* ---------- bloques de apoyo ---------- */
.sidet{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:500}
.direct{margin-block-start:24px;display:grid;gap:18px}
.direct li{display:grid;gap:6px}
.direct .k{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}
.direct a,.direct span:not(.k){font-size:14.5px;color:var(--fg-2);line-height:1.55}
.direct a:hover{color:var(--gold)}
.direct .gold{font-size:17px}

.statline{display:grid;grid-template-columns:minmax(min(180px,100%),auto) 1fr;
  gap:14px 34px;align-items:start;margin-block-start:var(--gap);
  padding-block-start:34px;border-block-start:1px solid var(--sand-hair)}
.statline .k{font-size:clamp(30px,3.6vw,46px);color:#8A6A1B;line-height:1;letter-spacing:-.03em}
.statline .v{font-size:15px;color:var(--sand-fg2);line-height:1.6;max-inline-size:62ch}
.statline cite{display:block;margin-block-start:12px;font-style:normal;
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:#6F6350}
.statline cite a{border-block-end:1px solid rgba(111,99,80,.4)}
.hubnote{margin-block-start:22px;font-size:13.5px;color:var(--sand-fg2);
  border-inline-start:2px solid rgba(138,106,27,.45);padding-inline-start:16px;line-height:1.6}
.lanenote{margin-block-start:24px;font-size:13.5px;color:var(--sand-fg2);
  max-inline-size:82ch;line-height:1.62}
.terms{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:28px}
.term{border:1px solid var(--sand-hair);padding:8px 13px;font-size:11px;
  letter-spacing:.14em;color:var(--sand-fg2)}
.toc{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase}
.toc a{color:var(--fg-3);border-block-end:1px solid var(--hair-2);padding-block-end:3px}
.toc a:hover{color:var(--gold);border-color:var(--gold)}
.ftr-b2b{margin-block-start:18px;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold)}

/* ---------- preguntas frecuentes ---------- */
.faqs{display:grid;border-block-start:1px solid var(--sand-hair)}
.faq{border-block-end:1px solid var(--sand-hair)}
.faq summary{cursor:pointer;list-style:none;padding-block:22px;padding-inline-end:34px;
  position:relative;font-size:17px;font-weight:600;color:var(--sand-ink);line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;inset-inline-end:0;inset-block-start:20px;
  font-family:"JetBrains Mono",monospace;font-size:19px;color:#775A11;transition:transform .25s var(--ease)}
.faq[open] summary::after{content:"–"}
.faq summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.faq .body{padding-block-end:24px;max-inline-size:76ch}
.faq .body p{font-size:15px;line-height:1.65}

/* ---------- formulario ---------- */
.rfqform{display:grid;gap:30px;max-inline-size:760px}
.formsec{border:0;margin:0;padding:0;display:grid;gap:20px}
/* El filete va en el LEGEND, no en el fieldset: si va en el fieldset, el hueco
   que el navegador abre para el título deja la línea cruzándolo a media altura. */
.formsec legend{inline-size:100%;padding:26px 0 0;border-block-start:1px solid var(--hair);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.formsec:first-of-type legend{border-block-start:0;padding-block-start:0}
.field .req{color:var(--gold);margin-inline-start:3px}
.field .err{margin-block-start:7px;font-size:12.5px;color:#E8886A;line-height:1.5}
.field input.bad,.field select.bad,.field textarea.bad{border-color:#C25A3E}
.field input.ok{border-color:rgba(95,207,138,.6)}
.field input.warn{border-color:rgba(212,165,55,.6)}
.field input[type=date]{color-scheme:dark}
.consent{margin-block-start:4px}
.field .chk,.chk{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:14px;letter-spacing:0;
  text-transform:none;color:var(--fg-2);line-height:1.6;cursor:pointer;margin-block-end:0}
[lang="ar"] .field .chk{font-family:"IBM Plex Sans Arabic",sans-serif}
.chk input{inline-size:19px;block-size:19px;accent-color:var(--gold);margin-block-start:2px;flex:none}
.chk a{color:var(--gold);border-block-end:1px solid var(--gold-hair)}
.formfoot{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}
.formfoot .hint{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
/* Campo señuelo: fuera de la vista pero NO display:none, que algunos robots detectan. */
.hp{position:absolute;inset-inline-start:-9999px;inline-size:1px;block-size:1px;overflow:hidden}
.alert{padding:16px 18px;font-size:14px;line-height:1.6;display:flex;flex-wrap:wrap;
  gap:12px;align-items:center}
.alert-err{border:1px solid rgba(194,90,62,.5);background:rgba(194,90,62,.09);color:#F0B7A4}

.upload{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.upload input[type=file]{position:absolute;inline-size:1px;block-size:1px;opacity:0;overflow:hidden}
.upload input[type=file]:focus-visible + label{outline:2px solid var(--gold);outline-offset:3px}
.upload-n{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-3)}
.thumbs{display:flex;flex-wrap:wrap;gap:10px}
.thumbs:empty{display:none}
.thumbs li{position:relative;inline-size:104px}
.thumbs img{inline-size:104px;block-size:78px;object-fit:cover;background:var(--ink-3);
  border:1px solid var(--hair-2)}
.thumbs .thn{display:block;margin-block-start:5px;font-size:9.5px;letter-spacing:.1em;color:var(--fg-3)}
.thumbs .thx{position:absolute;inset-block-start:0;inset-inline-end:0;background:var(--ink);
  color:var(--fg);border:1px solid var(--hair-2);cursor:pointer;
  font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 6px}
.thumbs .thx:hover{background:#C25A3E;border-color:#C25A3E;color:#fff}

/* ---------- confirmación ---------- */
.refbox{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center;
  border:1px solid var(--gold-hair);background:rgba(212,165,55,.06);
  padding:24px 26px;margin-block-start:34px;max-inline-size:var(--measure)}
.refbox .t{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  flex:1 1 100%}
.refv{font-size:clamp(24px,3vw,34px);color:var(--gold);letter-spacing:.06em;line-height:1}

/* ---------- árabe: la capa comercial también voltea ---------- */
[lang="ar"] .chip,[lang="ar"] .avail,[lang="ar"] .unit,[lang="ar"] .flagh,
[lang="ar"] .eyebrow,[lang="ar"] .btn,[lang="ar"] .lnk{letter-spacing:.02em}
[lang="ar"] .qtyf .qty,[lang="ar"] .refv,[lang="ar"] .stripe .k{unicode-bidi:isolate}
[lang="ar"] .vinbox input{direction:ltr;text-align:start}
[lang="ar"] .crumbs{letter-spacing:.02em}
[dir="rtl"] .thumbs .thx{inset-inline-end:0}

@media (max-width:900px){
  :root{ --hdrh:54px }
  /* El mínimo de las dos columnas (300+320+gap) supera el viewport en móvil:
     sin esta regla la ficha de familia desbordaba 295 px a 375. */
  .fam-grid{ grid-template-columns:minmax(0,1fr) }
}

/* ---------- tarjetas sobre campo arena ----------
   `.card`, `.icard` y `.ccard` traen fondo índigo propio; dentro de una sección
   arena heredaban el color de texto oscuro de la sección y el titular quedaba
   tinta sobre tinta (1,06:1 medido). Sobre arena se pintan en arena. */
.section-sand .cards,.section-sand .icards,.section-sand .ccards,
.section-sand .pcards,.section-sand .related{background:var(--sand-hair)}
.section-sand .card,.section-sand .icard,.section-sand .ccard,
.section-sand .pcard,.section-sand .related a{background:var(--sand)}
.section-sand .card:hover,.section-sand .icard:hover,.section-sand .ccard:hover,
.section-sand .pcard:hover,.section-sand .related a:hover{background:var(--sand-2)}
.section-sand .card h3,.section-sand .icard h3,.section-sand .ccard h3,
.section-sand .pcard h3,.section-sand .pcard h3 a,.section-sand .related .rn{color:var(--sand-ink)}
.section-sand .card p,.section-sand .icard p,.section-sand .ccard p,
.section-sand .pcard p{color:var(--sand-fg2)}
.section-sand .card .tag,.section-sand .ccard-n,.section-sand .pcard-tag,
.section-sand .related .rc{color:#775A11}
.section-sand .pcard-act{border-block-start-color:var(--sand-hair)}
.section-sand .pcard-more{color:#6F6350}
.section-sand .pcard--ghost{background:transparent}

/* ---------- tabla de créditos fotográficos ----------
   Una tabla ancha en un móvil de 360 px no cabe: en vez de encoger la letra
   hasta lo ilegible, la tabla rueda dentro de su propio contenedor. */
.tablewrap{overflow-x:auto;margin-block-start:34px;-webkit-overflow-scrolling:touch}
.crd{border-collapse:collapse;inline-size:100%;min-inline-size:640px;font-size:14px}
.crd th,.crd td{text-align:start;padding:13px 16px 13px 0;
  border-block-end:1px solid var(--sand-hair);vertical-align:top}
.crd th{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:#775A11;font-weight:400;white-space:nowrap}
.crd td{color:var(--sand-fg2);line-height:1.5}
.crd td a{color:var(--sand-ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(10,20,32,.28)}
.crd td a:hover{color:#8A6508}
.crd .n{color:#775A11;white-space:nowrap}
.crd td.ltr,.crd td .mono{font-size:12.5px}
.fam-ph figcaption a{color:var(--fg-3);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.22);margin-inline-start:10px}
.fam-ph figcaption a:hover{color:var(--gold)}

/* ---------- cabecera de página con fotografía ----------
   Las once páginas interiores abrían idénticas: campo oscuro, doscientos píxeles
   de aire y la mitad derecha vacía. La foto no rellena un hueco — dice de qué va
   la página antes de que se lea una línea. Se recorta a 3:2 con punto focal por
   página (`--pos`), porque los originales van de 1,34 a 2,44 de proporción. */
.pagehead--ph{padding-block:clamp(126px,14vw,168px) 0}
.pagehead--ph .ph-grid{display:grid;grid-template-columns:1.04fr .96fr;
  gap:clamp(26px,4.4vw,68px);align-items:center}
.pagehead--ph h1{max-inline-size:15ch}
.pagehead--ph .lede{max-inline-size:52ch}
.ph-fig{margin:0;position:relative;overflow:hidden}
.ph-fig img{inline-size:100%;aspect-ratio:3/2;object-fit:cover;object-position:var(--pos,50% 50%)}
/* El mismo filete oro que liga número y foto en el mosaico: un solo recurso
   repetido lee como sistema; dos recursos distintos leen como parche. */
.ph-fig::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;
  inline-size:56px;block-size:2px;background:var(--gold)}
@media (max-width:900px){
  .pagehead--ph .ph-grid{grid-template-columns:1fr;gap:34px}
  .pagehead--ph h1,.pagehead--ph .lede{max-inline-size:none}
  .ph-fig img{aspect-ratio:16/9}
}

/* El mosaico también vive sobre campo arena (los tres peldaños de la portada).
   Sin esto heredaba el fondo índigo y el titular quedaba tinta sobre tinta. */
.section-sand .mosaic{background:var(--sand-hair);border-block-color:var(--sand-hair)}
.section-sand .mosaic figure{background:var(--sand)}
.section-sand .mosaic .n{color:#775A11}
.section-sand .mosaic h3{color:var(--sand-ink)}
.section-sand .mosaic p{color:var(--sand-fg2)}

/* Nota de la beta + foto: dos columnas para que la derecha deje de estar vacía.
   `align-items:start` porque la nota es corta y la foto alta: centradas, la nota
   flotaba a media altura sin nada que la sostuviera. */
.media--note{align-items:center;margin-block-start:56px}
.media--note .pilot{max-inline-size:none}
.media--note figure{margin:0}
.media--note img{inline-size:100%;aspect-ratio:3/2;object-fit:cover;
  /* La distribución del motor es la foto más clara del juego y sobre campo
     índigo se despegaba del resto. Se baja medio punto de luz para que se
     integre; el archivo no se toca, porque lo comparten otras páginas. */
  filter:brightness(.9) contrast(1.03)}
/* Un solo recurso repetido lee como sistema. El filete oro bajo la foto ya
   estaba en el mosaico; se generaliza a todas las figuras de `.media` para que
   la portada, las cabeceras y las fichas hablen el mismo idioma. */
.media figure{position:relative}
.media figure::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;
  inline-size:56px;block-size:2px;background:var(--gold)}
.media figcaption ~ *{position:static}

/* Foco visible en los campos: el borde oro a 1px se pierde en un formulario
   largo, y el teclado es la única forma de rellenarlo para quien no usa ratón. */
.field input:focus,.field textarea:focus,.field select:focus{
  box-shadow:0 0 0 2px rgba(212,165,55,.22)}

/* =======================================================================
   CAPA TÉCNICA — «Precision automotive sourcing. Verified by data.»
   Un solo color de señal (el oro) y un gris titanio para el dato frío.
   Nada aquí es decorativo: cada pieza dice algo que el texto no dice.
   ======================================================================= */
:root{
  --steel:   #8FA3B8;   /* dato técnico sobre campo oscuro */
  --steel-2: #C3CFDA;   /* dato técnico destacado */
  --steel-d: #5C6775;   /* dato técnico sobre campo arena */
}

/* --- VIN: diecisiete casillas que se llenan al escribir ---------------
   Es el único adorno del héroe y además es funcional: enseña de un vistazo
   que un VIN tiene 17 posiciones y cuántas lleva escritas el usuario. */
.vinslots{display:grid;grid-template-columns:repeat(17,1fr);gap:3px;margin-block-start:12px}
.vinslots i{block-size:4px;background:rgba(143,163,184,.22);border-radius:0;
  transition:background .18s var(--ease)}
.vinslots i.on{background:var(--gold)}
.vinslots i.over{background:#C25A3E}
@media (max-width:420px){ .vinslots{gap:2px} }

/* --- flujo de identificación ------------------------------------------
   Entrada → cuatro capas → salida. En escritorio es una fila de cuatro con
   el filete que las une; en móvil se apila y el filete pasa a vertical. */
.idflow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--hair);margin-block-start:52px;border-block:1px solid var(--hair)}
.idflow .lay{background:var(--ink-2);padding:30px 26px 34px;position:relative}
.idflow .lay::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;
  inline-size:44px;block-size:2px;background:var(--gold)}
.idflow .n{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.2em;
  color:var(--gold);margin-block-end:18px}
.idflow h3{font-family:"Instrument Serif",serif;font-weight:400;font-size:24px;
  line-height:1.12;margin-block-end:12px}
.idflow p{font-size:13.5px;color:var(--fg-2);line-height:1.6}
@media (max-width:1000px){ .idflow{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .idflow{grid-template-columns:1fr} }
[lang="ar"] .idflow h3{font-weight:600;font-size:20px;line-height:1.4}

/* entradas y salidas: fichas de dato, no botones */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:18px;padding:0;list-style:none}
.chips li{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--steel-2);border:1px solid var(--hair-2);
  padding:8px 12px;background:rgba(143,163,184,.05)}
.chips--out li{color:var(--gold-2);border-color:var(--gold-hair);
  background:rgba(212,165,55,.06)}
.idio{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:clamp(24px,3.4vw,54px);margin-block-start:46px}
.idio h3{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-3);font-weight:400}

/* --- corredor China → Dubái → mercados -------------------------------
   SVG propio: texto real (traducible y accesible), sin imagen de mapa. */
.corridor{margin-block-start:46px;border:1px solid var(--hair);background:var(--ink-2);
  padding:clamp(20px,3vw,34px);overflow-x:auto}
.corridor svg{display:block;inline-size:100%;min-inline-size:640px;block-size:auto}
.corridor .cd-line{stroke:var(--hair-2);stroke-width:1.25;fill:none}
.corridor .cd-flow{stroke:var(--gold);stroke-width:1.75;fill:none;
  stroke-dasharray:7 9;animation:cdflow 5.5s linear infinite}
@keyframes cdflow{ to{ stroke-dashoffset:-64 } }
@media (prefers-reduced-motion:reduce){ .corridor .cd-flow{animation:none} }
.corridor .cd-node{fill:var(--ink);stroke:var(--steel);stroke-width:1.25}
.corridor .cd-hub{fill:var(--ink);stroke:var(--gold);stroke-width:2}
.corridor .cd-code{font-family:"JetBrains Mono",monospace;font-size:11px;
  letter-spacing:.14em;fill:var(--gold)}
.corridor .cd-lbl{font-family:Archivo,sans-serif;font-size:12.5px;fill:var(--steel-2)}
.corridor .cd-cap{font-family:"JetBrains Mono",monospace;font-size:9.5px;
  letter-spacing:.18em;fill:var(--fg-3)}

/* --- rail de cinco pasos ---------------------------------------------- */
.rail{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1px;
  background:var(--sand-hair);margin-block-start:52px;border-block:1px solid var(--sand-hair)}
.rail>*{background:var(--sand)}
.rail .r4{grid-column:span 4} .rail .r6{grid-column:span 6}
.rail figure{margin:0;display:flex;flex-direction:column}
.rail .ph{position:relative;overflow:hidden}
.rail .ph img{inline-size:100%;aspect-ratio:16/10;object-fit:cover;
  transition:transform .9s var(--ease)}
.rail figure:hover .ph img{transform:scale(1.03)}
.rail .ph::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;
  inline-size:44px;block-size:2px;background:var(--gold)}
.rail .b{padding:24px 26px 30px;flex:1}
.rail .n{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.2em;
  color:#775A11}
.rail h3{font-family:"Instrument Serif",serif;font-weight:400;font-size:23px;
  line-height:1.14;margin-block:13px 10px;color:var(--sand-ink)}
.rail p{font-size:13.5px;color:var(--sand-fg2);line-height:1.6}
.rail .r6 .b{padding-block:30px 34px}
@media (max-width:1000px){ .rail .r4,.rail .r6{grid-column:span 6} }
@media (max-width:640px){ .rail .r4,.rail .r6{grid-column:1 / -1} }
[lang="ar"] .rail h3{font-weight:600;font-size:19px;line-height:1.45}

/* --- asistente del formulario en tres pasos --------------------------- */
.wnav{display:flex;flex-wrap:wrap;gap:1px;background:var(--hair);
  border:1px solid var(--hair);margin-block-end:30px}
.wnav button{flex:1 1 160px;background:var(--ink-2);border:0;color:var(--fg-3);
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;padding:15px 16px;text-align:start;cursor:pointer;
  display:flex;gap:10px;align-items:baseline;transition:color .2s var(--ease),background .2s var(--ease)}
.wnav button:hover{color:var(--fg-2)}
.wnav button[aria-current="step"]{background:var(--ink-3);color:var(--gold)}
.wnav button .s{opacity:.6}
.wnav button.done{color:var(--steel-2)}
.wnav button.done .s::after{content:" ✓";color:var(--gold)}
.wstep[hidden]{display:none}
.wfoot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin-block-start:30px;padding-block-start:24px;border-block-start:1px solid var(--hair)}
.wfoot .grow{flex:1 1 auto}
/* Resumen editable antes de enviar: el paso 3 muestra lo que ya se escribió
   y cada línea vuelve a su paso con un clic. */
.wsum{border:1px solid var(--hair);background:rgba(143,163,184,.04);
  padding:20px 22px;margin-block-end:26px}
.wsum h3{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-3);font-weight:400;margin-block-end:14px}
.wsum dl{display:grid;grid-template-columns:minmax(120px,.5fr) 1fr auto;gap:9px 16px;margin:0}
.wsum dt{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3)}
.wsum dd{margin:0;font-size:13.5px;color:var(--fg-2);word-break:break-word}
.wsum .ed{background:none;border:0;color:var(--gold);cursor:pointer;padding:0;
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.wsum .ed:hover{text-decoration:underline}
.wsum .empty{color:var(--fg-3)}

/* El flujo de identificación vive sobre campo arena: es el bloque que explica
   el producto y necesita el contraste editorial, no el fondo índigo. */
.section-sand .idflow{background:var(--sand-hair);border-block-color:var(--sand-hair)}
.section-sand .idflow .lay{background:var(--sand)}
.section-sand .idflow h3{color:var(--sand-ink)}
.section-sand .idflow p{color:var(--sand-fg2)}
.section-sand .idflow .n{color:#775A11}
.section-sand .chips li{color:var(--sand-fg2);border-color:var(--sand-hair);
  background:rgba(10,20,32,.03)}
.section-sand .chips--out li{color:#775A11;border-color:rgba(138,106,27,.3);
  background:rgba(138,106,27,.06)}
.section-sand .idio h3{color:var(--steel-d)}

/* Peldaños sin foto: no son un hueco, son la tarjeta de dato de la fila. El
   filete oro y el centrado vertical les dan el mismo peso que a las de foto. */
.rail .nop{position:relative;display:flex}
.rail .nop::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;
  inline-size:44px;block-size:2px;background:var(--gold)}
.rail .nop .b{display:flex;flex-direction:column;justify-content:center;
  padding-block:34px 38px;max-inline-size:62ch}

/* En móvil los tres pasos se apilan a ancho completo: repartidos en dos filas
   desiguales (2 + 1) se leían como un error de maquetación, y además la fila
   suelta quedaba justo en el límite del área táctil recomendada. */
@media (max-width:700px){
  .wnav button{flex:1 1 100%;min-block-size:48px;align-items:center}
}
.wnav button{min-block-size:48px;align-items:center}

/* «No está en el catálogo»: el catálogo tiene treinta familias y el negocio
   cotiza fuera de ellas. Sin este bloque, un comprador que no ve su pieza
   concluye que no la vendemos y se va. */
.missing{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between;
  border:1px solid var(--gold-hair);background:rgba(212,165,55,.05);
  padding:clamp(26px,3.4vw,40px);margin-block-start:var(--gap)}
.missing .lede{max-inline-size:58ch;margin:0}

/* =========================================================================
   CAPA MÓVIL — el sitio en la mano
   Lo anterior ya resolvía el ancho: a 360 px no desborda nada. Lo que queda
   son cuatro fallos que sólo existen en un teléfono y que ninguna media
   query de ancho podía ver:
     · Safari amplía la página al enfocar un campo de menos de 16 px.
     · El dedo no acierta un objetivo de 29 px de alto.
     · Una barra fija de alto variable no cabe en un hueco de alto fijo.
     · Un diagrama pensado para 1180 px se corta, y una rejilla de dos
       columnas deja el texto en una tira de ocho caracteres.
   ========================================================================= */

/* --- 1 · el zoom de iOS ---------------------------------------------------
   Safari amplía la página al enfocar cualquier campo por debajo de 16 px y
   después NO la devuelve: el comprador queda con el formulario desplazado y
   en zoom, y el resto de la página fuera de la pantalla. 16 px es el umbral
   exacto del motor, no una preferencia tipográfica: por eso el formulario
   entero —veintiocho campos— sube de 15,5 a 16 sólo en móvil. */
@media (max-width:900px){
  .field input,.field textarea,.field select,
  .searchf input,.qtyf .qty,.chk input[type=text]{ font-size:16px }
  .qtyf .qty{ inline-size:88px; min-block-size:48px }
}

/* --- 2 · el dedo ----------------------------------------------------------
   44 px es el mínimo con el que un pulgar acierta a la primera. Donde el
   diseño no admite crecer —los cuatro idiomas de la cabecera— el área se
   amplía con un pseudo-elemento: se pulsa más grande sin verse más grande. */
@media (max-width:900px){
  .hdr{ padding-block:10px }
  .burger{ min-block-size:44px; padding-inline:14px; justify-content:center }
  .langs a{ position:relative; padding:6px 9px }
  .langs a::after{ content:""; position:absolute; inset:-9px 0 }
  .brand{ min-block-size:44px }
  .btn,.btn-sm{ min-block-size:48px; justify-content:center }
  .lnk,.pcard-more{ min-block-size:44px }
  .chip{ min-block-size:44px }
  /* El consentimiento es obligatorio para enviar: un cuadro de 19 px era el
     objetivo más pequeño de todo el embudo, justo en el último paso. */
  .chk input{ inline-size:24px; block-size:24px; margin-block-start:0 }
  .chk{ align-items:center }
  /* Pie: catorce enlaces de 16 px de alto pegados unos a otros. */
  .ftr li{ margin-block-end:0 }
  .ftr li a,.ftr-btm a{ display:inline-flex; align-items:center; min-block-size:44px }
  .ftr-btm{ gap:2px 26px }
  .ftr-btm > span:last-child a{ padding-inline:2px }
}

/* --- 3 · las dos barras fijas --------------------------------------------
   Alto medido en site.js, no escrito aquí: el mismo botón ocupa una línea en
   inglés y tres en francés, así que la barra mide entre 63 y 99 px según el
   idioma y el teléfono. El hueco fijo de 74 px tapaba el pie en francés y
   sobraba en inglés. El valor de reserva sólo actúa si el JS no llega. */
@media (max-width:900px){
  body{ padding-block-end:calc(var(--stickyh, 84px) + 6px) }
  .rfqdrawer .rfqdrawer-in{ padding-block-end:calc(var(--stickyh, 84px) + 26px) }
  /* Dos botones largos en una barra de 360 px: se aprieta el interletrado
     antes que dejarlos partirse en tres líneas. */
  .stickycta .btn{ font-size:10.5px; letter-spacing:.08em; padding:13px 6px; line-height:1.25 }
}

/* --- 4 · la barra de filtros del catálogo ---------------------------------
   Nueve categorías envueltas en cinco filas medían 367 px pegados bajo la
   cabecera: casi la mitad de la pantalla de un teléfono, permanentemente, en
   la única página donde el comprador va a mirar fotos. En móvil los chips
   pasan a una fila con desplazamiento lateral —sangrada hasta el borde para
   que se vea que sigue— y el buscador sube: la barra baja a ~140 px. */
@media (max-width:900px){
  .filterbar{ padding-block:12px }
  /* `flex-wrap:wrap` en columna dejaba que la fila de chips abriera una
     segunda columna y arrastrara el ancho del documento a 1022 px; y el
     `min-width:auto` que un flex item trae de fábrica anula el
     `overflow-x:auto`: sin ponerlo a cero el carrusel no se recorta, se
     estira. Las dos cosas juntas desbordaban la página entera. */
  .filterbar-in{ flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:10px }
  .searchf{ order:-1; flex:none; max-inline-size:none }
  .chips{ flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity;
    min-inline-size:0; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad) }
  .chips::-webkit-scrollbar{ display:none }
  .chip{ flex:none; scroll-snap-align:start }
  .filtercount{ margin-block-start:8px }
}

/* --- 5 · la cifra y su explicación ---------------------------------------
   `minmax(min(180px,100%),auto) 1fr` reservaba 210 px para «7.1 million» y
   dejaba la explicación en una tira de 110 px: cuatro palabras por línea y
   un hueco vacío del alto del párrafo bajo la cifra. */
@media (max-width:760px){
  .statline{ grid-template-columns:minmax(0,1fr); gap:14px }
  .statline .v{ max-inline-size:none }
}

/* --- 6 · el corredor China → Dubái ---------------------------------------
   El SVG tiene 1180 px de ancho mínimo y vive en un contenedor con
   desplazamiento lateral: en un teléfono se veía el nodo de Dubái partido
   por el borde y los tres mercados de destino no se veían nunca. Debajo de
   760 px se cambia por la misma información en vertical, con texto real que
   se traduce y se envuelve solo —incluido el árabe, que aquí sí se alinea a
   la derecha porque el eje del dibujo pasa a ser vertical. */
.cdlist{ display:none }
@media (max-width:760px){
  .corridor{ display:none }
  .cdlist{ display:block; margin-block-start:38px; border:1px solid var(--hair);
    background:var(--ink-2); padding:28px 24px }
  .cdlist li{ position:relative; padding-inline-start:32px; padding-block-end:26px }
  .cdlist li:last-child{ padding-block-end:0 }
  .cdlist li::before{ content:""; position:absolute; inset-inline-start:7px;
    inset-block:8px -8px; inline-size:1px; background:var(--hair-2) }
  .cdlist li:last-child::before{ display:none }
  .cdlist li::after{ content:""; position:absolute; inset-inline-start:3px;
    inset-block-start:4px; inline-size:9px; block-size:9px; border-radius:50%;
    border:1px solid var(--steel); background:var(--ink) }
  .cdlist .cd-hub::after{ inline-size:15px; block-size:15px; inset-inline-start:0;
    inset-block-start:1px; border:2px solid var(--gold) }
  .cdlist .cd-hub{ padding-block-end:30px }
  /* Los tres mercados salen del mismo punto: sangrarlos los separa de la
     cadena y los lee como tres salidas, no como tres escalas seguidas. */
  .cdlist .cd-dst{ padding-inline-start:56px; padding-block-end:20px }
  .cdlist .cd-dst::after{ inset-inline-start:27px }
  .cdlist .cd-dst::before{ inset-inline-start:31px }
  .cdlist .cd-dst:first-of-type::before{ inset-block-start:-14px }
  .cdlist b{ display:block; font-family:"JetBrains Mono",monospace; font-size:11px;
    letter-spacing:.14em; color:var(--gold); line-height:1 }
  .cdlist .cd-src b,.cdlist .cd-dst b{ color:var(--steel-2) }
  .cdlist span{ display:block; margin-block-start:5px; font-size:14.5px;
    color:var(--fg-2); line-height:1.5 }
  .cdlist .cap{ display:block; font-family:"JetBrains Mono",monospace; font-size:9.5px;
    letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3);
    margin-block-end:5px }
}

/* --- 7 · los objetivos que no pueden crecer -------------------------------
   Cuatro sitios donde el enlace mide entre 15 y 30 px de alto y agrandarlo
   rompería la maquetación: las migas, el título de cada ficha del catálogo,
   la tabla de créditos fotográficos y el índice de las condiciones. Donde el
   bloque sí admite aire —el teléfono y el correo, que son el CTA directo de
   media docena de páginas— se agranda de verdad; donde no, el área táctil se
   extiende con un pseudo-elemento: se pulsa más grande sin verse distinto. */
@media (max-width:900px){
  .crumbs a,.pcard h3 a,.tbl td a,.crd td a,.toc a{ position:relative; display:inline-block }
  .crumbs a::after,.pcard h3 a::after,.tbl td a::after,.crd td a::after,.toc a::after{
    content:""; position:absolute; inset:-14px -6px }
  .pcard h3 a::after{ inset:-9px -4px }
  /* El índice de las condiciones es una fila envuelta con 10 px entre líneas:
     las áreas ampliadas se pisaban unas a otras y ninguna llegaba a 44. Con
     22 px de aire cada ancla se pulsa entera, y un índice de seis entradas se
     lee mejor separado que apretado. */
  .toc{ gap:22px 24px }
  /* Teléfono y correo: el contacto directo merece la fila entera. */
  .direct li{ gap:2px }
  .direct a{ display:inline-flex; align-items:center; min-block-size:44px }
}

.skip-link{position:absolute;inset-block-start:-60px;inset-inline-start:16px;z-index:99;background:var(--gold);
color:var(--ink);padding:12px 20px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;
text-transform:uppercase;transition:inset-block-start .2s}
.skip-link:focus{inset-block-start:16px}