/* ============================================================
   BRANDING BOARD — Lianhua Fabrics
   Shaoxing Lianhua Fabrics Co., Limited (紹興聯華織物有限公司) — sourcing de telas
   de tapicería y herrajes para mueble desde Shaoxing (Keqiao / China Textile City)
   hacia fabricantes de muebles en Latinoamérica.
   Paleta "Crimson Loom": rojo carmesí de marca sobre marfil cálido y casi-negro
   vinoso — monocromática, deliberada (paleta entregada por el cliente).
   Familia visual: Producto de Lujo (fotografía dominante, serif de autor, radius
   bajo, pill CTAs con tracking, motion lento y editorial).
   Tipografía Fraunces (display, óptico variable) + Mulish (body, sans fina).
   Cambiar este archivo re-skinea toda la web sin tocar los bloques compartidos.
   ============================================================ */
@import url('fonts.css');

:root{
  /* Paleta Crimson Loom — ramp entregada por el cliente + neutros cálidos funcionales */
  --brand-1:#170609;   /* casi-negro vinoso — header/footer/hero scrim, secciones oscuras */
  --brand-2:#3D010E;   /* vino profundo — bordes/acentos sobre oscuro */
  --brand-3:#79021C;   /* carmesí estructural — bordes, hover sobre oscuro, texto AA sobre claro */
  --brand-4:#F2E4D6;   /* marfil cálido — superficie secundaria (evoca lino crudo) */
  --brand-5:#FCF7F1;   /* marfil casi blanco — superficie principal */

  --accent:#F50538;      /* carmesí vívido del cliente — CTAs grandes, marca */
  --accent-2:#FF3F63;    /* hover de accent, más claro */
  --accent-ink:#FFFFFF;  /* texto sobre accent */
  --accent-text:#A80430; /* rojo AA para texto/links chicos sobre claro (no el vívido: no pasa contraste) */

  --ink:#210B0E;
  --ink-soft:#6E4C4F;
  --ink-faint:#875F62; /* AA 5.13:1 sobre --surface (el #9C8082 original daba 3.39:1, hallazgo taste-skill vuelta 1) */
  --surface:var(--brand-5);
  --surface-2:var(--brand-4);
  --card:#FFFFFF;
  --line:#E6D6C7;

  --font-display:'Fraunces','Noto Serif SC',Georgia,serif;
  --font-body:'Mulish','PingFang SC','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif;
  --font-wordmark:'Fraunces',Georgia,serif;
  --radius:3px;
  --maxw:1240px;
  --shadow:0 30px 60px -30px rgba(23,6,9,.35);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
}

h1,h2,h3,h4{letter-spacing:-0.01em;font-weight:600}
.eyebrow{font-weight:700;letter-spacing:.14em}
.btn{border-radius:999px;padding:14px 26px;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;transition:transform .2s var(--ease-out),background .3s,color .3s,filter .3s}
.btn--primary{background:var(--accent);color:var(--accent-ink)}
.btn--primary:hover{filter:brightness(1.08)}
.btn--ghost{border:1.5px solid currentColor;background:transparent}
.btn:active{transform:scale(.97)}
.card,.svc,.prod,.statc__c,.qcard,.icard,.bento__cell{border-radius:var(--radius)}

/* ============================================================ HEADER — "lh" monochrome-luxury re-skin
   (base: HEADERS/header-18-monochrome-luxury, re-tokenizado sobre la paleta Crimson Loom) */
.lhhdr{position:sticky;top:0;z-index:80;background:color-mix(in oklab,var(--surface) 86%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .5s var(--ease),background .5s}
.lhhdr.s{background:color-mix(in oklab,var(--surface) 98%,transparent);border-bottom-color:var(--line);box-shadow:0 1px 0 var(--line)}
.lhhdr__in{max-width:var(--maxw);margin:0 auto;padding:18px clamp(20px,5vw,44px);display:flex;align-items:center;gap:34px}
.lhlogo{display:flex;align-items:center;gap:13px;font-family:var(--font-wordmark);font-weight:600;font-size:19px;letter-spacing:.01em;color:var(--ink)}
.lhlogo__mark{width:38px;height:38px;border-radius:50%;border:1px solid var(--brand-3);display:grid;place-items:center;flex:0 0 auto;overflow:hidden;transition:border-color .35s var(--ease),background .35s}
.lhlogo__mark img{width:22px;height:22px;object-fit:contain;display:block}
.lhlogo:hover .lhlogo__mark{background:var(--brand-1);border-color:var(--brand-1)}
.lhlogo__wm{display:flex;flex-direction:column;line-height:1.15}
.lhlogo__wm b{font-weight:600}
.lhlogo__wm i{font-style:normal;font-family:var(--font-body);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.lhnav{margin-left:auto;display:flex;gap:32px;align-items:center}
.lhnav a{font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--ink-soft);position:relative;padding:5px 0;transition:color .3s}
.lhnav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent-text);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.lhnav a:hover,.lhnav a.active{color:var(--ink)}
.lhnav a:hover::after,.lhnav a.active::after{transform:scaleX(1);transform-origin:left}
.lhhdr__end{display:flex;align-items:center;gap:18px;flex:0 0 auto}
.lhcta{font-family:var(--font-body);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink);border:1px solid var(--ink);padding:12px 22px;border-radius:999px;white-space:nowrap;transition:background .35s var(--ease),color .35s}
.lhcta:hover{background:var(--ink);color:var(--surface)}
.lhburger{display:none;width:42px;height:42px;border:1px solid var(--line);background:none;border-radius:999px;flex-direction:column;gap:5px;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.lhburger span{width:17px;height:1px;background:var(--ink);display:block}
.lhdrawer{position:fixed;inset:0;z-index:120;background:var(--surface);transform:translateY(-100%);transition:transform .55s var(--ease);padding:24px clamp(20px,6vw,44px);overflow-y:auto;visibility:hidden}
.lhdrawer.open{transform:translateY(0);visibility:visible}
.lhdrawer__top{display:flex;justify-content:space-between;align-items:center}
.lhdrawer nav{margin-top:40px;display:flex;flex-direction:column}
.lhdrawer nav a{font-family:var(--font-display);font-size:28px;font-weight:500;letter-spacing:-.01em;padding:16px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.lhdrawer__cta{margin-top:30px;display:flex;flex-direction:column;gap:12px}
.lhclose{width:42px;height:42px;border:1px solid var(--line);background:none;border-radius:999px;font-size:20px;cursor:pointer;color:var(--ink)}
@media(max-width:920px){.lhnav{display:none}.lhcta{display:none}.lhburger{display:flex}}
/* vuelta 1 reverificacion #3 (B/E/impeccable/critique, unanime): a 1024x768 (viewport oficial
   "laptop") el header ES desborda 22px -- "Solicitar Muestras" + nav completa en español es mas
   ancho que "Request Samples" + nav en ingles, y el breakpoint de 920px se habia ajustado solo
   contra el texto EN. En vez de ensanchar el breakpoint (cambiaria cuando el desktop ES pasa a
   hamburguesa, afectando mas paginas de las necesarias), se angosta el nav/CTA SOLO en la franja
   921-1180px -- ahi hay espacio de sobra en pantallas mas anchas, y esta franja es exactamente
   donde el ingles ya entraba justo y el español no. */
@media(min-width:921px) and (max-width:1180px){
  .lhnav{gap:20px}
  .lhhdr__in{gap:22px}
  .lhhdr__end{gap:12px}
  .lhcta{padding:12px 16px}
}

/* selector de idioma: dropdown compacto (familia dropdown-compacto) */
.lang{position:relative;font-family:var(--font-body)}
.lang__trigger{display:flex;align-items:center;gap:6px;background:none;border:1px solid var(--line);border-radius:999px;padding:8px 13px;font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--ink-soft);cursor:pointer;transition:border-color .2s,color .2s}
.lang__trigger:hover{border-color:var(--brand-3);color:var(--ink)}
.lang__trigger svg{width:11px;height:11px;transition:transform .25s var(--ease-out)}
.lang.open .lang__trigger svg{transform:rotate(180deg)}
.lang__menu{position:absolute;top:calc(100% + 8px);right:0;min-width:150px;background:var(--card);border:1px solid var(--line);border-radius:calc(var(--radius)*2);box-shadow:var(--shadow);padding:6px;display:none;flex-direction:column;z-index:90}
.lang.open .lang__menu{display:flex}
.lang__menu a{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:6px;font-size:13.5px;color:var(--ink-soft);font-weight:600}
.lang__menu a:hover{background:var(--surface-2);color:var(--ink)}
.lang__menu a[aria-current="true"]{color:var(--accent-text)}
.lang__code{font-family:var(--font-body);font-size:10.5px;font-weight:800;color:var(--ink-faint);width:20px}

/* ============================================================ FOOTER — footer-18 re-skin, class="ft" (convención del sistema) */
.ft{font-family:var(--font-body);background:var(--brand-1);color:rgba(252,247,241,.82)}
.ft__in{max-width:var(--maxw);margin:0 auto;padding:clamp(64px,9vw,104px) clamp(20px,5vw,44px) 0}
.ft__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding-bottom:clamp(38px,6vw,64px);border-bottom:1px solid rgba(252,247,241,.14)}
.ft__head h3{font-family:var(--font-display);font-weight:500;font-size:clamp(1.7rem,3.6vw,2.6rem);letter-spacing:-.01em;line-height:1.15;max-width:18ch;color:#fff}
.ft__head a{font-family:var(--font-body);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#fff;border:1px solid rgba(252,247,241,.5);padding:13px 26px;border-radius:999px;text-decoration:none;font-weight:700;transition:background .35s var(--ease),color .35s,border-color .35s;white-space:nowrap}
.ft__head a:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.ft__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:32px;padding:44px 0}
.ft__logo{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-wordmark);font-weight:600;font-size:18px;color:#fff}
.ft__logo .m{width:36px;height:36px;border-radius:50%;border:1px solid rgba(252,247,241,.45);display:grid;place-items:center;overflow:hidden}
.ft__logo .m img{width:21px;height:21px;object-fit:contain}
.ft__tag{margin-top:16px;color:rgba(252,247,241,.62);font-size:14px;line-height:1.75;font-weight:300;max-width:32ch}
.ft__addr{display:block;margin-top:16px;font-size:13px;color:rgba(252,247,241,.5);line-height:1.7}
.ft__col h4{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(252,247,241,.48);margin-bottom:4px}
.ft__col ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.ft__col a{position:relative;color:rgba(252,247,241,.82);font-size:14px;text-decoration:none;width:max-content}
.ft__col a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:#fff;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.ft__col a:hover::after{transform:scaleX(1);transform-origin:left}
.ft__bottom{padding:24px 0 34px;border-top:1px solid rgba(252,247,241,.14);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:rgba(252,247,241,.5);font-size:12px;letter-spacing:.04em}
.ft__up{display:inline-flex;align-items:center;gap:8px;color:rgba(252,247,241,.6);text-decoration:none;font-weight:600;transition:color .2s,transform .2s var(--ease-out)}
.ft__up:hover{color:#fff;transform:translateY(-2px)}
.ft__up svg{width:14px;height:14px}
@media(max-width:980px){.ft__grid{grid-template-columns:1.4fr 1fr 1fr}}
@media(max-width:640px){.ft__grid{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.ft__grid{grid-template-columns:1fr}}

/* ============================================================ HERO — visual-dominante (heroc re-tokenizado): fotografía de tela a pantalla completa, texto alineado a la izquierda (mismo margen que el header), motion lento */
.lhhero{position:relative;min-height:94vh;display:flex;flex-direction:column;color:#fff;overflow:hidden;background:var(--brand-1);isolation:isolate}
.lhhero__bg{position:absolute;inset:0;z-index:-2}
.lhhero__bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.05)}
.lhhero__bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(23,6,9,.62) 0%,rgba(23,6,9,.28) 38%,rgba(23,6,9,.5) 78%,rgba(23,6,9,.86) 100%)}
.lhhero__in{position:relative;z-index:1;flex:1;display:flex;align-items:center;max-width:var(--maxw);width:100%;margin:0 auto;padding:clamp(84px,13vh,130px) clamp(20px,5vw,44px)}
.lhhero__copy{max-width:720px}
.lhhero .eyebrow{color:var(--accent-2);display:inline-flex;align-items:center;gap:10px;background:rgba(23,6,9,.4);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);padding:8px 16px;border-radius:999px;font-size:11.5px}
.lhhero h1{font-family:var(--font-display);font-weight:500;font-size:clamp(2.1rem,4.4vw,3.7rem);line-height:1.12;margin-top:20px;letter-spacing:-.01em}
.lhhero h1 em{font-style:normal;color:var(--accent-2)}
.lhhero p{font-size:clamp(1rem,1.5vw,1.15rem);color:rgba(255,255,255,.86);margin:18px 0 0;font-weight:300;line-height:1.6}
.lhhero__cta{display:flex;gap:16px;justify-content:flex-start;margin-top:30px;flex-wrap:wrap}
.lhhero .btn--ghost{border-color:rgba(255,255,255,.55);color:#fff}
.lhhero .btn--ghost:hover{background:#fff;color:var(--brand-1);border-color:#fff}
.lhhero__pillars{position:relative;z-index:1;flex:0 0 auto;max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,44px) 40px;display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid rgba(255,255,255,.2)}
.lhhero__pillars a{padding:26px 28px 0;color:#fff;display:flex;flex-direction:column;gap:6px;border-right:1px solid rgba(255,255,255,.2);transition:opacity .3s}
.lhhero__pillars a:first-child{padding-left:0}
.lhhero__pillars a:last-child{border-right:none}
.lhhero__pillars a:hover{opacity:.75}
.lhhero__pillars b{font-family:var(--font-display);font-size:1.3rem;font-weight:500;display:flex;align-items:center;gap:10px}
.lhhero__pillars span{font-size:13.5px;color:rgba(255,255,255,.68);font-weight:300}
@media(max-width:640px){.lhhero{min-height:100vh}.lhhero__in{padding-top:118px}.lhhero__pillars{grid-template-columns:1fr;margin-top:44px}.lhhero__pillars a{padding-bottom:22px;border-right:none;border-bottom:1px solid rgba(255,255,255,.2)}.lhhero__pillars a:last-child{border-bottom:none}
  /* vuelta 1 reverificacion #3 (B/C/D/taste/uiux/critique/redteam, unanime): con el cookiebar
     nuevo (en flujo, ~78px) sumado a los 118px de aire fijo sobre el hero, el CTA secundario del
     hero quedaba fuera del pliegue oficial (360x800) en la primera visita. El aire de 118px estaba
     pensado para cuando NO hay cookiebar (visitante recurrente); se reduce SOLO mientras el
     cookiebar esta presente, sin tocar el espaciado para el resto de los casos. */
  body:has(.cookiebar) .lhhero__in{padding-top:34px}}

/* ============================================================ TRUST STRIP — credenciales de sourcing en Shaoxing/Keqiao */
.lhstrip{background:var(--brand-1);color:rgba(252,247,241,.72);padding:16px 0;overflow:hidden;border-top:1px solid rgba(252,247,241,.1)}
.lhstrip__in{display:flex;gap:0;align-items:center;justify-content:center;flex-wrap:wrap;font-size:13px;font-weight:600;letter-spacing:.03em}
.lhstrip__in span{padding:0 26px;position:relative}
.lhstrip__in span:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:3px;height:3px;border-radius:50%;background:rgba(252,247,241,.35)}

/* ============================================================ PILLARS — Telas / Herrajes (fzig re-tokenizado, sin CSS extra necesario: reusa .fzig) */

/* ============================================================ FABRIC SWATCH GALLERY — grilla de textura/color, propia del rubro */
.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:44px}
.swatch{position:relative;aspect-ratio:1;border-radius:calc(var(--radius)*1.2);overflow:hidden;cursor:default}
.swatch img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.swatch:hover img{transform:scale(1.09)}
.swatch__lbl{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;background:linear-gradient(0deg,rgba(23,6,9,.82),transparent);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.02em}
@media(max-width:920px){.swatches{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.swatches{grid-template-columns:repeat(2,1fr)}}

/* ============================================================ SPEC CHIP — GSM / composición / ancho (label técnico discreto, sin caer en mono industrial) */
.speck{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.speck span{font-size:11.5px;font-weight:700;letter-spacing:.03em;color:var(--ink-soft);background:var(--surface-2);border-radius:999px;padding:5px 12px}

/* Motion / microinteracciones (Emil Kowalski): reveal, tilt sutil, magnetic CTA — respeta prefers-reduced-motion */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* imgband — asegurar aspect-ratio consistente en bandas de apoyo fotográfico */
.imgband img{aspect-ratio:4/3}

/* tabla comparativa de telas: encabezado sticky en scroll horizontal mobile */
.tscroll{overflow-x:auto}
.tscroll table{min-width:640px}

/* ============================================================ FIRMA "thread-draw" (fx/firma-lianhua.js)
   motion tokens del sitio + el hilo en sí. Sin JS/con reduced-motion: dashoffset:0 (ya trazado). */
.fx{--fx-dur-1:100ms;--fx-dur-2:300ms;--fx-dur-3:500ms;--fx-ease-out:cubic-bezier(.23,1,.32,1);--fx-ease-out-expo:cubic-bezier(.16,1,.3,1);--fx-stagger:60ms;--fx-thread:var(--accent-2)}
.thread-hero{display:block;width:150px;height:22px;margin-top:14px;overflow:visible}
.thread-hero path{fill:none;stroke:var(--fx-thread,var(--accent-2));stroke-width:1.6;stroke-linecap:round;stroke-dashoffset:0}
.svert{position:relative}
.thread-proc{position:absolute;left:21px;top:44px;bottom:6px;width:2px;overflow:visible;z-index:0;pointer-events:none;opacity:.28}
.thread-proc path{fill:none;stroke:var(--fx-thread,var(--accent-2));stroke-width:2;stroke-linecap:round}
.thread-fill{position:absolute;left:21px;top:44px;bottom:6px;width:2px;background:var(--fx-thread,var(--accent-2));z-index:0;pointer-events:none;transform:scaleY(1);transform-origin:50% 0%}
.svert__step{position:relative;z-index:1}
.fx .svert--thread .svert__step::after{display:none}
.svert--thread{padding:8px 0}
/* Loop 1 replan (protocolo de efectos): la version pineada necesito 3 rondas de padding (vw, luego
   vh) para acercar el alto del bloque de pasos al del viewport fijado, sin cerrar nunca el fondo
   vacio del todo (plateau real). Al sacar el pin (ver fx/firma-lianhua.js) la seccion vuelve a
   ocupar su alto natural -- no hay frame que llenar, así que no hace falta padding extra por fx. */
@media(max-width:760px){.svert--thread[data-fx-scrub]{padding-top:0}}
@media(prefers-reduced-motion:reduce){.thread-hero path{stroke-dashoffset:0!important}.thread-fill{transform:scaleY(1)!important}}

/* ============================================================ ARTICLE — post de blog individual */
.article{max-width:720px;margin:0 auto}
.article__meta{display:flex;gap:14px;align-items:center;font-size:13px;color:var(--ink-faint);font-weight:600}
.article h1{font-size:clamp(1.9rem,4vw,2.7rem);margin-top:14px;line-height:1.15}
.article__cover{border-radius:calc(var(--radius)*1.6);overflow:hidden;margin-top:28px;box-shadow:var(--shadow)}
.article__cover img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.article__body{margin-top:32px;font-size:17px;line-height:1.8;color:var(--ink-soft)}
.article__body h2{color:var(--ink);font-family:var(--font-display);font-weight:600;font-size:1.5rem;margin:38px 0 12px}
.article__body p{margin-top:16px}
.article__body ul{margin:16px 0 0 22px}
.article__body li{margin-top:9px}
.article__body strong{color:var(--ink);font-weight:700}