/* ============================================================
   CELCENTRO — Repuestos y pantallas para telefonía móvil
   Design system alineado con referencia tipo HunLuv:
   acento teal #0066CC, Montserrat, superficies claras, esquinas 3-6px
   ============================================================ */

:root{
  --navy:#333333;          /* texto oscuro / superficies oscuras */
  --navy-2:#3D3D3D;
  --blue:#0066CC;          /* acento principal (teal) */
  --blue-d:#0052A3;        /* teal oscuro para hover */
  --blue-l:#E8F1FB;        /* tinte claro teal */
  --orange:#0052A3;        /* "second accent" = teal oscuro (unifica con la referencia) */
  --orange-d:#003E7E;
  --ink:#333333;
  --muted:#6B7280;
  --line:#E5E7EB;
  --soft:#F5F6F7;
  --white:#FFFFFF;
  --radius:6px;
  --radius-sm:4px;
  --shadow:0 6px 18px rgba(0,0,0,.07);
  --shadow-lg:0 18px 44px rgba(0,0,0,.12);
  --container:1180px;
  --font-head:'Montserrat','Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --font-body:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{font-family:var(--font-head);font-weight:700;line-height:1.2;margin:0;color:var(--navy)}
p{margin:0}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
.section{padding:90px 0}
.section--soft{background:var(--soft)}
.section--navy{background:var(--soft);color:var(--ink)}
.section--navy h2,.section--navy h3{color:var(--navy)}
/* 目录页（productos.html）顶部：页首要「紧凑」，产品尽量靠上 —— 2026-10-14 删掉整块
   .page-hero 头图后，把 .section 的 90px 顶距收到 26px（只够一行面包屑的呼吸）。
   别的页面仍用 .section 的默认 90px。 */
.catalog-sec{padding:26px 0 80px}
@media (max-width:900px){ .catalog-sec{padding:18px 0 64px} }
/* contacto / nosotros / calidad：2026-10-16 起整块删掉页头 banner（面包屑+大标题都不要），
   首个区块顶距收紧 —— 同 productos 的 catalog-sec 做法。别把 .page-hero 加回这些页面。 */
.section--tight-top{padding-top:26px}
@media (max-width:900px){ .section--tight-top{padding-top:18px} }

/* Títulos de sección estilo plantilla: centrados con separador */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-head);font-size:12.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue);
  margin-bottom:14px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--blue);border-radius:2px}
.section--navy .eyebrow{color:var(--blue-d)}

.h2{font-size:clamp(26px,3.6vw,38px);font-weight:700}
.h3{font-size:clamp(20px,2.4vw,24px)}
.lead{font-size:16.5px;color:var(--muted);max-width:660px;margin-top:16px}
.section-head{max-width:760px;margin-bottom:50px}
.section-head--center{margin-left:auto;margin-right:auto;text-align:center}
.section-head--center .eyebrow{justify-content:center}
.section-head--center::after{
  content:"";display:block;width:52px;height:3px;background:var(--blue);
  margin:22px auto 0;border-radius:2px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-head);font-weight:600;font-size:14.5px;
  padding:13px 26px;border-radius:3px;transition:.22s ease;white-space:nowrap;
}
.btn svg{width:16px;height:16px;flex:none}
.btn--primary{background:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(0,102,204,.35)}
.btn--primary:hover{background:var(--blue-d);transform:translateY(-2px)}
.btn--blue{background:var(--blue-d);color:#fff;box-shadow:0 6px 16px rgba(0,82,163,.3)}
.btn--blue:hover{background:#003E7E;transform:translateY(-2px)}
.btn--outline{border:1.5px solid var(--line);color:var(--navy);background:#fff}
.btn--outline:hover{border-color:var(--blue);color:var(--blue-d);background:var(--blue-l)}
.btn--light{background:#fff;color:var(--blue-d)}
.btn--light:hover{background:var(--blue-l);transform:translateY(-2px)}
.btn--ghost-light{border:1.5px solid rgba(255,255,255,.5);color:#fff}
.btn--ghost-light:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.btn--sm{padding:9px 16px;font-size:13px}
.btn--block{width:100%}

/* ---------- Top bar ---------- */
.topbar{background:var(--navy);color:#CFCFCF;font-size:13px}
.topbar__in{display:flex;align-items:center;justify-content:space-between;min-height:42px;gap:16px}
.topbar__links{display:flex;gap:22px;align-items:center}
.topbar__links a{display:inline-flex;align-items:center;gap:7px;transition:color .2s}
.topbar__links a:hover{color:#fff}
.topbar__links svg{width:14px;height:14px;opacity:.75}
.topbar__links a.topbar__wa{background:#25D366;color:#fff;border-radius:999px;padding:6px 14px;
  font-family:var(--font-head);font-weight:600;font-size:13px;box-shadow:0 2px 10px rgba(37,211,102,.35);transition:.2s}
.topbar__links a.topbar__wa svg{width:15px;height:15px;opacity:1;color:#fff}
.topbar__links a.topbar__wa:hover{background:#1FBF57;color:#fff;transform:translateY(-1px)}
.topbar__right{display:flex;align-items:center;gap:18px}
.topbar-search{
  display:flex;align-items:center;background:#fff;border-radius:3px;overflow:hidden;
  border:1px solid #fff;
}
.topbar-search input{
  border:0;outline:none;font-family:var(--font-body);font-size:12.5px;
  padding:6px 12px;width:190px;color:#333;
}
.topbar-search button{
  background:var(--blue);color:#fff;display:grid;place-items:center;
  width:30px;height:30px;flex:none;transition:.2s;
}
.topbar-search button:hover{background:var(--blue-d)}
.topbar-search svg{width:14px;height:14px}
.lang-switch{display:flex;gap:14px;align-items:center}
.lang-switch button{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-head);font-weight:600;font-size:13px;color:#CFCFCF;transition:.2s;
  padding:2px 0;
}
.lang-switch button svg.flag{width:18px;height:12px;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.lang-switch button:hover{color:#fff}
.lang-switch button.is-active{color:var(--blue);border-bottom:2px solid var(--blue)}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:60;background:#fff;
  border-bottom:1px solid var(--line);
}
.header.is-stuck{box-shadow:0 4px 20px rgba(0,0,0,.08)}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
/* 品牌组 = logo + 品牌署名，**纵向两行**（顶栏是 space-between：三块 = 品牌组 / 导航 / CTA）。
   为什么竖排：顶栏可用宽度只有 303px（容器 1180 − 内边距 48 − 导航 614 − CTA 167 − 间距 48），
   logo 独占 168 → 只给署名剩 125px。横向放「CELCENTRO de China」会压到导航上
   （实测文字叠在「Inicio」上）。竖排放进 logo 宽度内（署名占位 121px < logo 实宽 178px），
   **不占任何水平空间**，任何视口 / 字体回退都不会溢出。 */
.brand-lockup{display:flex;flex-direction:column;align-items:flex-start;gap:2px;flex:none}
/* 品牌署名「CHINA」（2026-10-14 定稿，按用户给的 logo 稿排版）：
   「CELCENTRO」下面一条短横线，再下面是大写宽字距的 CHINA，**整体相对 CELCENTRO 文字水平居中**，不用国旗。
     · align-self:stretch + margin-left:48px（= .logo__mark 38 + .logo gap 10）→ 署名盒子宽度恰好等于
       「CELCENTRO」文字宽（130px），内部再居中 = "相对文字居中"。品牌组宽度仍由 logo（178px）决定，
       署名不会反过来把顶栏撑宽（不占任何水平空间）。
     · 短横线 52% 宽：对照参考稿，线约为字宽的 52%、比 CHINA 略宽。
     · padding-left:.32em 抵掉 letter-spacing 加在**最后一个字母后面**的那格空隙，否则整串会偏左半格。
     · 这里必须留 text-transform:uppercase（i18n 文案是 'China'，显示成 CHINA），与之前「de China」的写法相反。 */
.logo-origin{
  align-self:stretch;margin-left:48px;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  font-family:var(--font-head);font-weight:700;font-size:10px;letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--blue);white-space:nowrap;line-height:1;
}
.logo-origin > span{padding-left:.32em}
.logo-origin__rule{width:52%;height:2px;border-radius:2px;background:var(--blue);opacity:.9}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-head)}
.logo__mark{
  width:38px;height:38px;border-radius:6px;flex:none;
  background:var(--blue);
  display:grid;place-items:center;color:#fff;
}
.logo__mark svg{width:20px;height:20px}
.logo__text{font-weight:700;font-size:20px;letter-spacing:.01em;color:var(--navy)}
.logo__text span{color:var(--blue)}

.nav{display:flex;align-items:center;gap:0;--nav-px:8px}
.nav > a,.nav .nav-drop > a{
  font-family:var(--font-head);font-weight:600;font-size:12.5px;color:var(--navy);
  padding:26px var(--nav-px);transition:.2s;position:relative;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
}
.nav .nav-drop{position:relative}
.nav .nav-drop > a .caret{width:11px;height:11px;opacity:.6}
.nav > a:hover,.nav .nav-drop > a:hover{color:var(--blue-d)}
.nav a.is-active{color:var(--blue-d)}
.nav a.is-active::after,.nav .nav-drop.is-here > a::after{
  content:"";position:absolute;left:var(--nav-px,10px);right:var(--nav-px,10px);bottom:18px;height:2.5px;
  background:var(--blue);border-radius:2px;
}
/* Mega dropdown */
.nav-drop__panel{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--blue);
  box-shadow:var(--shadow-lg);border-radius:0 0 4px 4px;
  padding:26px 30px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px 40px;
  opacity:0;visibility:hidden;transition:.22s;min-width:620px;z-index:70;
}
.nav-drop:hover .nav-drop__panel,.nav-drop:focus-within .nav-drop__panel{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.nav-drop__col h4{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-d);
  margin:0 0 8px;font-weight:700;
}
.nav-drop__col a{
  display:block;font-size:13.5px;color:var(--navy);padding:6px 0;transition:.18s;font-weight:500;
}
.nav-drop__col a:hover{color:var(--blue-d);transform:translateX(3px)}
.nav-drop__all{
  grid-column:1/-1;border-top:1px solid var(--line);margin-top:12px;padding-top:14px;
  display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;color:var(--blue-d);
}
.nav-drop__all svg{width:15px;height:15px}
.header__cta{display:flex;align-items:center;gap:10px}
.burger{display:none;width:44px;height:44px;border-radius:4px;border:1.5px solid var(--line);place-items:center}
.burger svg{width:20px;height:20px;color:var(--navy)}

.mobile-nav{
  display:none;position:fixed;inset:0;z-index:80;background:var(--navy);
  padding:26px 24px;flex-direction:column;gap:4px;overflow-y:auto;
}
.mobile-nav.is-open{display:flex}
.mobile-nav__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.mobile-nav a[data-i18n]{
  font-family:var(--font-head);font-size:20px;font-weight:600;color:#fff;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,.1);
}
.mobile-nav .mobile-nav__sub{
  display:flex;flex-wrap:wrap;gap:8px;padding:12px 0 16px;border-bottom:1px solid rgba(255,255,255,.1);
}
.mobile-nav .mobile-nav__sub a{
  font-size:12.5px;font-weight:500;color:#CFCFCF;border:1px solid rgba(255,255,255,.25);
  border-radius:3px;padding:6px 11px;
}
.mobile-nav .btn{margin-top:24px}
.mobile-nav__close{width:44px;height:44px;border-radius:6px;background:rgba(255,255,255,.12);display:grid;place-items:center;color:#fff}
.mobile-nav__close svg{width:20px;height:20px}

/* ---------- Hero (slider) ---------- */
/* 2026-10-16 三轮：换成浅蓝白「维修工作台 + 拉美地图」亮色图（AI 生成无字版，文字仍是 HTML 动态渲染），
   主题由深转亮：文字/徽章改深色，渐变罩从压暗改为左侧提白保证标题可读，图片不再压透明度（必须全显）。 */
.hero{position:relative;overflow:hidden;background:#F2F7FC;color:var(--navy)}
.hero__media{position:absolute;inset:0}
.hero__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* 2026-10-19：图里的「拉美地图」在画面右上，默认 center 会让 cover 上下各裁 287px
     （1440×422 的 hero 只露出原图 44%），地图被裁掉只剩南端 —— 用户反馈「地图显示不正确」。
     顶部对齐 + 右侧对齐 → 地图完整露出；产品工作台从下方进入，被裁的部分落在底部。 */
  object-position:100% 0;opacity:0;
  transition:opacity 1s ease;
}
.hero__media img.is-on{opacity:1}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(245,249,253,.92) 0%,rgba(245,249,253,.68) 38%,rgba(245,249,253,.18) 62%,rgba(245,249,253,0) 82%);
}
.hero__in{position:relative;z-index:2;padding:126px 0 120px;max-width:720px}
/* 2026-10-16：文案对齐 Banner 参考图 —— 牌子变成「— Desde 2011 —」细横线样式 */
.hero .badge{
  background:none;border:0;padding:0;backdrop-filter:none;
  color:var(--blue-d);font-size:13.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.hero .badge::before,.hero .badge::after{
  content:"";display:inline-block;width:42px;height:1.5px;background:currentColor;
  opacity:.5;vertical-align:middle;margin:0 14px 2px;
}
.hero h1{color:var(--navy);font-size:clamp(32px,5vw,54px);font-weight:700;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--blue)}
/* 品类行：Pantallas | Baterías | Flex | Herramientas（分隔符是 <span>|</span>） */
.hero__cats{
  margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;
  font-size:clamp(18px,2.2vw,24px);font-weight:600;color:var(--navy);
}
.hero__cats span{color:var(--blue);opacity:.35;margin:0 16px;font-weight:400}
/* 三个特点（Mejor Precio / Alta Calidad / No compra mínima）：圆形蓝底白图标 + 两行文字 */
.hero__feats{display:flex;flex-wrap:wrap;gap:26px;margin-top:32px;list-style:none;padding:0}
.hero__feat{display:flex;align-items:center;gap:11px;max-width:190px}
.hero__feat-ico{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.hero__feat-ico svg{width:18px;height:18px}
.hero__feat span:last-child{font-size:14.5px;font-weight:600;line-height:1.25;color:var(--navy)}
.hero p{margin-top:24px;font-size:17.5px;color:#445060;max-width:600px}
/* 右上角手写体（Conectando China con Latinoamérica），与参考图同位 */
.hero__script{
  position:absolute;top:24px;right:24px;z-index:2;display:block;max-width:180px;
  font-family:"Segoe Script","Bradley Hand","Brush Script MT",cursive;
  font-size:17px;line-height:1.3;color:var(--blue-d);transform:rotate(-2.5deg);
}
.hero__script::after{
  content:"";display:block;height:2px;margin-top:7px;background:currentColor;opacity:.55;
  transform:skewX(-28deg);border-radius:2px;
}
/* 手写体要绝对定位在容器右上（与参考图同位） */
.hero__container{position:relative}
.hero__btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero__dots{position:absolute;left:0;right:0;bottom:26px;z-index:3;display:flex;gap:9px;justify-content:center}
.hero__dots button{
  width:26px;height:4px;border-radius:2px;background:rgba(255,255,255,.35);transition:.25s;
}
.hero__dots button.is-on{background:var(--blue)}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  border-radius:3px;padding:8px 15px;font-size:13px;font-weight:500;color:#E4E4E4;
  backdrop-filter:blur(6px);
}
.badge svg{width:14px;height:14px;color:var(--blue)}

/* ---------- Brand marquee ---------- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;overflow:hidden;padding:22px 0}
.marquee__track{display:flex;gap:64px;width:max-content;animation:scroll 32s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{
  font-family:var(--font-head);font-weight:700;font-size:16px;color:#9CA3AF;
  letter-spacing:.02em;white-space:nowrap;display:flex;align-items:center;gap:12px;
}
.marquee__item::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--line)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee__label{
  text-align:center;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:14px;
}

/* ---------- About split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split__media{position:relative}
.split__media img{border-radius:var(--radius);box-shadow:var(--shadow-lg);aspect-ratio:1/1;object-fit:cover;width:100%}
.split__media::before{
  content:"";position:absolute;inset:26px -26px -26px 26px;border-radius:var(--radius);
  background:var(--blue-l);z-index:-1;
}
/* 关于我们右侧公司展示图：2026-10-16 起用 about-office.jpg（3:2 原图，别改回 1:1 方裁） */
.split__media--wide img{aspect-ratio:3/2}
.chip-float{
  position:absolute;left:-18px;bottom:34px;background:#fff;border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);padding:16px 22px;display:flex;align-items:center;gap:14px;
  border:1px solid var(--line);
}
.chip-float__num{font-family:var(--font-head);font-size:30px;font-weight:700;color:var(--blue-d);line-height:1}
.chip-float__lbl{font-size:12.5px;color:var(--muted);font-weight:500;line-height:1.35;max-width:120px}

.check-list{display:grid;gap:13px;margin-top:26px}
.check-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:#4B5563}
.check-list svg{width:18px;height:18px;color:var(--blue);flex:none;margin-top:3px}

/* ---------- Category cards ---------- */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}

.cat-card{
  position:relative;border-radius:var(--radius);overflow:hidden;background:var(--navy);
  min-height:320px;display:flex;flex-direction:column;justify-content:flex-end;
  box-shadow:var(--shadow);transition:.3s ease;
}
.cat-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85;transition:.5s ease}
.cat-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,20,20,.05) 0%,rgba(20,20,20,.5) 55%,rgba(20,20,20,.9) 100%);
}
.cat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.cat-card:hover img{transform:scale(1.06)}
.cat-card__body{position:relative;z-index:2;padding:24px;color:#fff}
.cat-card__body h3{color:#fff;font-size:19px}
.cat-card__body p{font-size:13.5px;color:#C9C9C9;margin-top:8px}
.cat-card__link{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-family:var(--font-head);font-weight:600;font-size:13px;color:var(--blue);
}
.cat-card__link svg{width:15px;height:15px;transition:.2s}
.cat-card:hover .cat-card__link svg{transform:translateX(4px)}

/* ---------- Product cards (estilo plantilla) ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.prod-card{
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;
  transition:.25s;display:flex;flex-direction:column;
}
.prod-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--blue)}
.prod-card__media{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--soft)}
.prod-card__media img{width:100%;height:100%;object-fit:cover;transition:.45s}
.prod-card:hover .prod-card__media img{transform:scale(1.06)}
.prod-card__tag{
  position:absolute;left:10px;top:10px;z-index:2;background:var(--blue);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border-radius:2px;font-family:var(--font-head);
}
.prod-card__tag--amber{background:#D97706}
.prod-card__tag--green{background:#0E8A4A}
.prod-card__body{padding:16px 18px 20px;display:flex;flex-direction:column;flex:1}
.prod-card__body h3{
  font-size:13.5px;font-weight:600;line-height:1.5;color:var(--navy);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.prod-card__meta{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.prod-card__moq{font-size:12px;color:var(--muted);font-weight:600}
.prod-card__meta .btn{padding:7px 13px;font-size:12px}

/* ---------- Spec table ---------- */
.table-wrap{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.spec-table{width:100%;border-collapse:collapse;font-size:14.5px}
.spec-table thead th{
  background:var(--navy);color:#fff;font-family:var(--font-head);font-weight:600;
  text-align:left;padding:14px 20px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
}
.spec-table tbody td{padding:15px 20px;border-top:1px solid var(--line);vertical-align:middle}
.spec-table tbody tr{transition:background .18s}
.spec-table tbody tr:hover{background:var(--blue-l)}
.spec-table tbody tr:nth-child(odd){background:#FAFAFA}
.spec-table tbody tr:nth-child(odd):hover{background:var(--blue-l)}
.spec-table .p-name{font-weight:600;color:var(--navy);font-family:var(--font-head)}
.spec-table .p-sub{font-size:12.5px;color:var(--muted);display:block;margin-top:2px;font-weight:500}
.tag{
  display:inline-block;padding:4px 11px;border-radius:2px;font-size:11.5px;font-weight:700;
  font-family:var(--font-head);letter-spacing:.03em;
}
.tag--blue{background:var(--blue-l);color:var(--blue-d)}
.tag--green{background:#E7F6EE;color:#0E8A4A}
.tag--amber{background:#FFF1E6;color:#C75712}
.table-wrap .btn--sm{padding:9px 16px;font-size:13px}

/* ---------- Quality / video ---------- */
.video-thumb{
  position:relative;border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;
  aspect-ratio:16/10;background:var(--navy);box-shadow:var(--shadow);transition:.28s;
}
.video-thumb img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:.45s}
.video-thumb::after{content:"";position:absolute;inset:0;background:rgba(20,20,20,.26)}
.video-thumb:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.video-thumb:hover img{opacity:1;transform:scale(1.05)}
.video-thumb__play{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;
}
.video-thumb__play span{
  width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.94);
  display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.28);transition:.25s;
}
.video-thumb:hover .video-thumb__play span{transform:scale(1.1);background:var(--blue)}
.video-thumb__play svg{width:19px;height:19px;color:var(--navy);margin-left:2px}
.video-thumb:hover .video-thumb__play svg{color:#fff}
.video-thumb__dur{
  position:absolute;right:10px;bottom:10px;z-index:2;background:rgba(20,20,20,.85);color:#fff;
  font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:3px;font-family:var(--font-head);
  letter-spacing:.03em;
}
.video-thumb__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px;color:#fff;font-size:13.5px;font-weight:600;font-family:var(--font-head)}
.thumb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

/* ---------- Stats (blanco, cifras oscuras, unidad teal) ---------- */
/* minmax(0,1fr)：1fr 的 min-content 会被长标签（如「Controles de calidad por lote」）撑宽，
   导致六列宽度不等（实测 223px vs 164px） */
.stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.stats--4{grid-template-columns:repeat(4,1fr)}
.stat{text-align:center;padding:26px 10px}
/* 6 列里最长的「200.000+」在 42px 下会顶到相邻列 → 收到 36px 上限 */
.stat__num{font-family:var(--font-head);font-size:clamp(22px,2.4vw,28px);font-weight:700;color:#1A1A1A;line-height:1.05}
.stat__num span{color:var(--blue-d)}
.stat__lbl{font-size:13px;color:var(--blue-d);margin-top:8px;font-weight:600;line-height:1.4}
.stats--boxed .stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius)}

/* ---------- Offer cards ---------- */
.offer-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px;
  transition:.28s;position:relative;overflow:hidden;
}
.offer-card::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:.35s}
.offer-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent}
.offer-card:hover::before{transform:scaleX(1)}
.offer-card__ico{
  width:52px;height:52px;border-radius:6px;background:var(--blue-l);color:var(--blue-d);
  display:grid;place-items:center;margin-bottom:18px;
}
.offer-card__ico svg{width:24px;height:24px}
.offer-card h3{font-size:18px;margin-bottom:10px}
.offer-card p{font-size:14px;color:var(--muted)}

/* ---------- Home: trust cards ----------
   2026-10-14 首页大幅精简：原来「关于我们 / 质量 / 视频」是同一套「左图右文 + 蓝按钮」版式连排三段，
   滚动时像同一件事说了三遍。现合并成一排三卡（图 + 标题 + 一句 + 链接），高度约 360px。 */
.trust-grid{gap:22px}
.trust-card{
  display:flex;flex-direction:column;text-decoration:none;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.28s;
}
.trust-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent}
.trust-card__media{position:relative;aspect-ratio:16/10;background:var(--soft);overflow:hidden}
.trust-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.trust-card:hover .trust-card__media img{transform:scale(1.04)}
/* 第三张卡是「工厂视频」：加暗遮罩 + 播放按钮 + 时长，沿用原来那段视频卡的视觉语言 */
.trust-card__media--video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,31,51,.12),rgba(11,31,51,.5))}
.trust-card__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.94);
  display:grid;place-items:center;color:var(--blue-d);box-shadow:0 6px 18px rgba(0,0,0,.28);transition:.28s;
}
.trust-card__play svg{width:21px;height:21px;margin-left:2px}
.trust-card__dur{
  position:absolute;right:12px;bottom:12px;z-index:2;background:rgba(0,0,0,.72);color:#fff;
  font-family:var(--font-head);font-size:11.5px;font-weight:700;letter-spacing:.03em;
  padding:4px 9px;border-radius:3px;
}
.trust-card:hover .trust-card__play{transform:translate(-50%,-50%) scale(1.07)}
.trust-card__body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.trust-card__body h3{font-family:var(--font-head);font-size:17px;color:var(--navy);margin:0 0 9px}
.trust-card__body p{font-size:14px;line-height:1.68;color:var(--muted);margin:0 0 15px;flex:1}
.trust-card__link{
  font-family:var(--font-head);font-size:12.5px;font-weight:700;letter-spacing:.03em;
  color:var(--blue);display:inline-flex;align-items:center;gap:6px;
}
.trust-card__link::after{content:"\2192";transition:transform .25s}
.trust-card:hover .trust-card__link::after{transform:translateX(4px)}

/* ---------- Home: ritmo vertical más compacto ----------
   4 段，把桌面段间距从 90px 收到 64px（移动端 48px），首屏 Hero 也收一档。
   用 body[data-page="home"] 作用域，内页节奏不受影响。
   ⚠️ 2026-10-14 起首页**没有** `.cta-band`（询价区整段删除，改由 contacto.html 承担），
   所以原来那条 `body[data-page="home"] .cta-band__in{padding:64px 0}` 已随段一起删掉。 */
body[data-page="home"] .section{padding:64px 0}
body[data-page="home"] .section-head{margin-bottom:34px}

/* ---------- Home Hero：小一号 + 亮色主题（2026-10-16 三轮） ----------
   2026-10-14 二轮用户要求「图更真实、Banner 小一点」，段高 650→约450px、文字小一档 —— 仍沿用。
   2026-10-16 三轮换成 AI 生成的浅蓝白「维修工作台 + 拉美地图」无字图（文字仍是 HTML 动态渲染），
   主题由深转亮：渐变罩从「左浓黑」改为「左浓白」——文字侧保对比度，右侧地图/工作台原色可见。
   ⚠️ 渐变停靠点按**视口百分比**设计：1440 下文案区占 9%~59%（容器 1180 + 文案 720），
   所以 62% 之后才允许变透，否则标题会压在图上的实体产品上。 */
body[data-page="home"] .hero__media img.is-on{opacity:1}
body[data-page="home"] .hero__media::after{
  background:linear-gradient(96deg,
    rgba(245,249,253,.95) 0%,rgba(245,249,253,.84) 44%,
    rgba(245,249,253,.38) 66%,rgba(245,249,253,0) 86%);
}
body[data-page="home"] .hero__in{padding:52px 0 46px}
body[data-page="home"] .hero h1{font-size:clamp(28px,3.8vw,44px)}
body[data-page="home"] .hero__cats{margin-top:14px;font-size:clamp(16px,1.9vw,20px)}
body[data-page="home"] .hero__cats span{margin:0 12px}
body[data-page="home"] .hero__feats{margin-top:16px;gap:14px 22px}
body[data-page="home"] .hero p{margin-top:14px;font-size:16.5px;max-width:560px}
body[data-page="home"] .hero__btns{margin-top:22px}
body[data-page="home"] .hero__script{top:12px;right:8px;font-size:15px;max-width:150px}
@media (max-width:860px){
  body[data-page="home"] .section{padding:48px 0}
  body[data-page="home"] .section-head{margin-bottom:26px}
  body[data-page="home"] .hero__in{padding:46px 0 44px}
  /* 窄屏没地方放手写体，直接隐藏（避免压到标题） */
  body[data-page="home"] .hero__script{display:none}
  body[data-page="home"] .hero__feats{gap:16px 20px;margin-top:20px}
  body[data-page="home"] .hero__feat{max-width:none}
  body[data-page="home"] .hero__feat span:last-child{font-size:14px}
  body[data-page="home"] .hero .badge::before,body[data-page="home"] .hero .badge::after{width:26px;margin:0 10px 2px}
  /* 窄屏文案占满宽度，罩子改成「上浓下透」的斜向亮色版：顶部保对比度，底部仍看得见工作台 */
  body[data-page="home"] .hero__media::after{
    background:linear-gradient(168deg,
      rgba(245,249,253,.94) 0%,rgba(245,249,253,.78) 58%,rgba(245,249,253,.40) 100%);
  }
}
/* 热门产品在窄屏保持两列：默认 620px 以下变一列，8 张卡竖排要滚 4400px（约 10 屏）。
   首页是橱窗，两列缩略图 + 点进目录页更合理。minmax(0,1fr) 防长标题撑列（历史坑）。 */
@media (max-width:620px){
  body[data-page="home"] .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 60%,#33475B 100%);color:#fff;position:relative;overflow:hidden}
.cta-band::after{
  content:"";position:absolute;right:-140px;top:-140px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,102,204,.2),transparent 68%);
}
.cta-band__in{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;padding:84px 0}
.cta-band h2{color:#fff;font-size:clamp(26px,3.8vw,38px)}
.cta-band p{color:#CFCFCF;margin-top:16px;font-size:16px}
/* 注意：`.cta-band .mini-list`（三条勾选项）随首页询价区一起删除（2026-10-14），
   全站已无 mini-list 宿主 —— 若日后又要用，从 git/备份里取回。 */
.cta-band--simple .cta-band__in{grid-template-columns:1fr;gap:26px;padding:70px 0;align-items:flex-start}
.cta-band--simple p{max-width:640px}

/* ---------- Forms ---------- */
.form-card{background:#fff;border-radius:var(--radius);padding:32px;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1/-1}
.field label{font-size:13px;font-weight:600;color:var(--navy);font-family:var(--font-head)}
.field label span{color:var(--orange)}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:14px;padding:12px 14px;border:1px solid var(--line);
  border-radius:3px;background:#FAFAFA;color:var(--ink);transition:.2s;width:100%;
}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(0,102,204,.15);
}
.field input.is-error,.field select.is-error{border-color:#E04A4A}
.field .err{font-size:12px;color:#E04A4A;font-weight:600;display:none}
.field.has-error .err{display:block}
/* WhatsApp 行：区号下拉 + 号码输入 */
.phone-row{display:flex;gap:8px}
.phone-row select{width:96px;flex:none}
.form-note{font-size:12.5px;color:var(--muted);margin-top:12px}
.form-ok{
  display:none;background:#E7F6EE;border:1px solid #B8E3CB;color:#0E8A4A;border-radius:4px;
  padding:14px 16px;font-size:14px;font-weight:600;margin-top:16px;
}
.form-ok.is-visible{display:flex;gap:10px;align-items:center}
.form-ok svg{width:18px;height:18px;flex:none}

/* 提交失败时的兜底块：把客户已填好的内容整段搬到 WhatsApp / 邮件，保证询价不丢 */
.form-fallback{
  display:none;background:#FFF7ED;border:1px solid #FBD5A5;color:#8A4B08;border-radius:4px;
  padding:16px;font-size:13.5px;line-height:1.65;margin-top:16px;
}
.form-fallback.is-visible{display:block}
.form-fallback b{display:block;font-size:14.5px;margin-bottom:6px;color:#7A3F04}
.form-fallback p{margin:0 0 12px}
.form-fallback__btns{display:flex;gap:10px;flex-wrap:wrap}
.form-fallback__btns .btn{text-decoration:none}

/* 蜜罐字段：视觉上藏起来，正常访客看不见；机器人会自动填上 */
.honey{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;
  opacity:0;pointer-events:none}

/* ---------- Footer ---------- */
.footer{background:var(--navy);color:#BDBDBD;padding:64px 0 0;font-size:14px}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:48px}
.footer .logo__text{color:#fff}
.footer .logo__text span{color:var(--blue)}
.footer__desc{margin-top:18px;max-width:320px;line-height:1.7}
.footer h4{color:#fff;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px;font-family:var(--font-head);font-weight:600}
.footer__col ul{display:grid;gap:11px}
.footer__col a{transition:.2s}
.footer__col a:hover{color:#fff}
.footer__contact li{display:flex;gap:11px;align-items:flex-start;margin-bottom:14px}
.footer__contact svg{width:16px;height:16px;color:var(--blue);flex:none;margin-top:4px}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.12);padding:20px 0;display:flex;
  align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;
}
.footer__badges{display:flex;gap:9px;flex-wrap:wrap}
.footer__badges span{
  border:1px solid rgba(255,255,255,.2);border-radius:3px;padding:4px 10px;font-size:11.5px;
  font-weight:600;letter-spacing:.06em;font-family:var(--font-head);color:#D6D6D6;
}

/* ---------- Page hero (inner pages) ---------- */
/* 仅屏幕阅读器可见（SEO 用） */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 页头（contacto / nosotros / calidad）：2026-10-16 起整块删除（banner+面包屑+大标题都不要，
   HTML 里已无 .page-hero 节点，首区块用 .section--tight-top 收顶距）。
   ⚠️ 不要给这三个页面加回 .page-hero / .page-hero__bg —— 用户已两轮明确否掉这块。 */
.breadcrumb{display:flex;gap:9px;align-items:center;font-size:12.5px;color:var(--muted);margin-bottom:18px;font-family:var(--font-head);font-weight:500}
.breadcrumb a:hover{color:var(--navy)}
.breadcrumb span{opacity:.45}

/* ---------- Timeline ---------- */
.timeline{position:relative;padding-left:34px;display:grid;gap:32px}
.timeline::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:var(--line)}
.timeline__item{position:relative}
.timeline__item::before{
  content:"";position:absolute;left:-31px;top:6px;width:14px;height:14px;border-radius:50%;
  background:#fff;border:3px solid var(--blue);
}
.timeline__year{font-family:var(--font-head);font-weight:700;color:var(--blue-d);font-size:15px;letter-spacing:.04em}
.timeline__item h3{font-size:17px;margin:6px 0 8px}
.timeline__item p{color:var(--muted);font-size:14.5px;max-width:560px}

/* ---------- Values ---------- */
.value-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;transition:.28s}
.value-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.value-card__ico{width:48px;height:48px;border-radius:6px;background:var(--blue-l);color:var(--blue-d);display:grid;place-items:center;margin-bottom:16px}
.value-card__ico svg{width:22px;height:22px}
.value-card h3{font-size:17px;margin-bottom:9px}
.value-card p{font-size:14px;color:var(--muted)}

/* ---------- Product page ---------- */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:24px}
/* 选中品牌后品牌条整条移除；.filters 自带 display:flex 会盖掉 UA 的 [hidden]，必须显式写一条 */
.filters[hidden]{display:none}
.filter-btn{
  font-family:var(--font-head);font-weight:600;font-size:13px;padding:10px 19px;
  border-radius:3px;border:1px solid var(--line);color:var(--muted);transition:.2s;background:#fff;
}
.filter-btn:hover{border-color:var(--blue);color:var(--blue-d)}
.filter-btn.is-active{background:var(--blue);border-color:var(--blue);color:#fff}

/* ---------- 型号墙：「选你的设备」（iFixit 式入口） ----------
   选中品牌时铺该品牌的机型卡片；「全部品牌」时铺品牌卡片。 */
.model-wall{margin:0 0 30px}
.model-wall[hidden]{display:none}
.wall__head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:13px}
.wall__title{font-family:var(--font-head);font-size:17px;color:var(--navy)}
.wall__hint{font-size:13px;color:var(--muted)}
.wall__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:10px}
.mcard{
  display:flex;align-items:center;padding:9px 13px 10px;text-align:left;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;
  transition:.2s;cursor:pointer;font:inherit;color:inherit;
}
.mcard:hover{border-color:var(--blue);box-shadow:var(--shadow)}
.mcard.is-active{border-color:var(--blue);box-shadow:0 0 0 2px rgba(0,102,204,.16)}
/* 纯文字卡：型号名在上、款数在下（单行会让「iPhone 17 Pro Max」被截断）
   最多折两行：短的（Galaxy A16 / iPad 7）仍是一行，长的（iPad Pro 12.9" 5th (2021)）折行显示全称，
   不会有「只差一点点就被截掉年份」的情况。同一行内所有卡等高（grid 行高取最大），不会参差。 */
.mcard__tx{min-width:0;width:100%;display:flex;flex-direction:column;gap:1px}
.mcard__tx b{
  font-family:var(--font-head);font-size:13px;font-weight:600;color:var(--navy);line-height:1.3;
  white-space:normal;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.mcard__tx em{font-style:normal;font-size:11.5px;color:var(--muted);line-height:1.3}
.mcard--more{
  justify-content:center;font-family:var(--font-head);font-size:12.5px;font-weight:600;
  color:var(--blue-d);background:var(--soft);
}

/* ---------- 系列墙（Samsung）：品牌与型号之间的「Elige tu serie」 ----------
   与型号墙同一套视觉语言，但卡片带一个方形系列徽标（Galaxy / S、Galaxy / Note…）。 */
.series-wall{margin:0 0 26px}
.series-wall[hidden]{display:none}
.series-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(198px,1fr));gap:10px}
.scard{
  display:flex;align-items:center;gap:11px;padding:10px 14px;text-align:left;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;
  transition:.2s;cursor:pointer;font:inherit;color:inherit;
}
.scard:hover{border-color:var(--blue);box-shadow:var(--shadow)}
.scard.is-active{border-color:var(--blue);box-shadow:0 0 0 2px rgba(0,102,204,.16);background:var(--blue-l)}
.scard__badge{
  flex:none;width:44px;height:44px;border-radius:4px;background:var(--blue-l);color:var(--blue-d);
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
}
.scard__badge small{
  font-family:var(--font-head);font-size:7.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;opacity:.85;
}
.scard__badge b{font-family:var(--font-head);font-size:16px;font-weight:700;margin-top:2px}
/* 无前缀的墙（otros 按厂商）：徽标里只有一个 3 字母短码，不需要给小字让位的 2px */
.scard__badge b:only-child{margin-top:0}
.scard__badge-code{font-size:13px;letter-spacing:.02em}
.scard.is-active .scard__badge{background:var(--blue);color:#fff}
.scard__tx{min-width:0;display:flex;flex-direction:column;gap:1px}
.scard__tx b{
  font-family:var(--font-head);font-size:13px;font-weight:600;color:var(--navy);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.scard__tx em{font-style:normal;font-size:11.5px;color:var(--muted);line-height:1.3}

/* ---------- 两列目录：左侧筛选栏 + 右侧结果 ---------- */
.catalog{display:grid;grid-template-columns:236px minmax(0,1fr);gap:32px;align-items:start}
/* grid 项默认 min-width:auto，会被内容（移动端横向滚动的品类条）撑破视口 → 必须归零 */
.catalog>*{min-width:0}
.catalog--noside{grid-template-columns:minmax(0,1fr)}
.catalog__side{position:sticky;top:92px;display:flex;flex-direction:column;gap:14px}
.catalog__side[hidden]{display:none}
.catalog__main{min-width:0}

/* 结果条：数量 + 结果内搜索 + 视图切换 */
.result-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 20px}
.result-bar__n{font-family:var(--font-head);font-size:13.5px;color:var(--muted)}
.result-bar__n b{color:var(--navy);font-size:15px}
.result-bar__by{display:block;font-size:12px;color:var(--muted);font-weight:500}
.result-bar__chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}
.result-bar__chip{
  display:inline-flex;align-items:center;gap:6px;padding:4px 8px 4px 11px;
  border:1px solid var(--blue);border-radius:999px;background:rgba(0,102,204,.07);
  font-family:var(--font-head);font-size:11.5px;font-weight:600;color:var(--blue-d);cursor:pointer;
}
.result-bar__chip svg{width:11px;height:11px}
.result-bar__chip:hover{background:var(--blue);color:#fff}
.result-bar__search{
  display:flex;align-items:center;flex:1;min-width:190px;max-width:400px;margin-left:auto;
  border:1px solid var(--line);border-radius:999px;background:#fff;overflow:hidden;transition:.2s;
}
.result-bar__search:focus-within{border-color:var(--blue)}
.result-bar__search input{
  flex:1;min-width:0;border:0;padding:9px 4px 9px 16px;font-size:13.5px;
  font-family:inherit;background:none;color:var(--navy);outline:none;
}
.result-bar__search button{
  flex:none;width:38px;height:36px;display:grid;place-items:center;
  color:var(--muted);cursor:pointer;background:none;border:0;
}
.result-bar__search button svg{width:17px;height:17px}

/* Filtro por categoría (2.º nivel: pantallas / baterías / puertos de carga…)
   在左侧栏里竖排成「分组」；窄屏退回横向滚动条。 */
.cat-bar{
  display:flex;flex-direction:column;align-items:stretch;gap:5px;
  padding:14px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--soft);
}
.cat-bar[hidden]{display:none}
/* .cat-bar__label 已废弃（2026-10-19）：下方第一项就是「All categories」，标题多余。
   语义改由 #catBar 的 aria-label 承担（见 script.js renderCatBar）。 */
.cat-btn{
  display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;
  font-family:var(--font-head);font-weight:600;font-size:12.5px;line-height:1.5;
  padding:8px 11px;border-radius:6px;border:1px solid transparent;color:var(--navy);
  background:#fff;transition:.2s;cursor:pointer;
}
.cat-btn:hover{border-color:var(--blue);color:var(--blue-d)}
.cat-btn.is-active{background:var(--blue);border-color:var(--blue);color:#fff}
.cat-btn__n{font-weight:500;opacity:.6;margin-left:auto;font-size:11.5px;flex:none}
.cat-btn.is-active .cat-btn__n{opacity:.85}

.cat-block{padding:44px 0;border-top:1px solid var(--line)}
.cat-block:first-of-type{border-top:0;padding-top:0}
.cat-block>.tag{margin-bottom:18px;display:inline-block}
/* 单品牌视图（品牌栏已高亮该品牌）→ 产品区不再重复品牌名：标签与上面的分隔线一起去掉，
   结果条下面直接铺产品（2026-10-14 用户要求）。「全部品牌」时标签保留，它是 6 个分块的标识。 */
.cat-block--bare{border-top:0;padding-top:0}
.cat-block--bare>.tag{display:none}
/* minmax(0,1fr)：1fr 等价 minmax(auto,1fr)，会被条目里最长不可断字符串（如型号串
   "(T730/T733/T735/T736/T737/T738)"）的 min-content 撑宽整列，导致该列卡片连同缩略图一起变大 */
.item-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}
.item-row{
  display:flex;flex-direction:column;gap:12px;min-width:0;
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px;background:#fff;
  transition:.22s;
}
.item-row:hover{border-color:var(--blue);box-shadow:var(--shadow)}
/* 产品标题：2026-10-14 用户反馈「名称总是展示不完整」。
   原为 3 行 / 14px —— 实测三星块 3518 行里 **64% 被截断**（最长标题 253 字符）。
   提到 6 行 + 13px 后截断率降到 **1.5%**，而卡片高度几乎不变（395 → 428px，网格 stretch 吸收）。
   ⚠ 长标题仍以 title 属性做悬停全文提示（见 productRow 的 a[title]）。 */
.item-row h4{font-size:13px;font-family:var(--font-head);font-weight:600;color:var(--navy);line-height:1.45;
  overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.item-row h4 a{color:var(--navy);transition:color .15s}
.item-row h4 a:hover{color:var(--blue)}
.item-row__txt{min-width:0;flex:1}
.item-row .spec{font-size:12.5px;color:var(--muted);margin-top:5px}
.item-row .subtag{font-weight:700;color:var(--blue-d);font-family:var(--font-head);letter-spacing:.3px}
.item-row .moq{font-size:12.5px;color:var(--blue-d);font-weight:700;font-family:var(--font-head);white-space:nowrap}
/* miniatura del producto (cuando el panel de administración aporta imagen propia) */
.item-row__main{display:flex;flex-direction:column;align-items:stretch;gap:11px;flex:1;min-width:0}
.item-row__thumb{
  width:100%;height:auto;aspect-ratio:1/1;flex:none;border-radius:var(--radius-sm);overflow:hidden;
  border:1px solid var(--line);background:var(--soft);display:block;
}
.item-row__thumb img{width:100%;height:100%;object-fit:contain;background:#fff}
.item-row__thumb.js-swap{position:relative}
.item-row__act{margin-top:auto}
.item-row__act .btn{width:100%}
.item-row__n{position:absolute;right:6px;bottom:6px;background:rgba(15,23,42,.66);color:#fff;font-size:10px;
  line-height:1.6;padding:0 5px;border-radius:5px;letter-spacing:.2px;pointer-events:none}


/* ---------- Ficha de producto (PDP) ---------- */
html[lang="en"] [data-lang-es]{display:none}
html[lang="es"] [data-lang-en]{display:none}
.pdp{padding:26px 0 0;background:#fff}
.pdp__crumbs{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:12.5px;color:var(--muted);margin-bottom:20px}
.pdp__crumbs a{color:var(--muted)}
.pdp__crumbs a:hover{color:var(--blue)}
/* 2026-10-19：面包屑各格必须同字号同色（用户口径「字体大小和虚实一致」）。
   以前 span 是 #C4C4C4，品牌格和末格的 data-lang span 正好是 span → 这两格比
   Inicio/Producto 浅一档，看起来「有的实有的虚」。现在统一 var(--muted)。 */
.pdp__crumbs span{color:var(--muted)}
/* 品牌格的两种语言 span 跟着链接走（悬停时一起变蓝） */
.pdp__crumbs a span{color:inherit}
.pdp__crumbs .pdp__crumb-end{color:var(--muted);max-width:100%}
.pdp__grid{display:grid;grid-template-columns:1.02fr 1fr;gap:46px;align-items:start}
.pdp__media{position:sticky;top:26px}
.pdp__stage{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.pdp__stage img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff}
.pdp__thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.pdp__thumb{width:70px;height:70px;padding:0;border:2px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;background:#fff;cursor:pointer;transition:border-color .15s}
.pdp__thumb:hover{border-color:#B9CFE8}
.pdp__thumb.is-active{border-color:var(--blue)}
.pdp__thumb img{width:100%;height:100%;object-fit:cover}
.pdp__tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.pdp__info h1{font-family:var(--font-head);font-size:25px;line-height:1.35;color:var(--navy);margin:0 0 12px}
.pdp__meta{font-size:13px;color:var(--muted);margin-bottom:14px}
.pdp__meta b{color:var(--navy)}
.pdp__spec{display:inline-block;background:var(--blue-l);color:var(--blue-d);font-weight:700;font-size:12.5px;
  padding:4px 13px;border-radius:999px;margin-bottom:18px}
.pdp__usp{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:10px}
.pdp__usp li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--ink);line-height:1.6}
.pdp__usp svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--blue)}
.pdp__cta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.pdp__note{font-size:12.5px;color:var(--muted);margin:0}
.pdp__band{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:52px 0;margin-top:46px}
/* ⚠️ 必须 minmax(0,…)：1fr 等价 minmax(auto,1fr)，列最小尺寸取 min-content。
   390px 实测 —— 选项卡那行（flex-wrap:nowrap 的横向滑动条）的 min-content 是 525px，
   直接把整个网格列顶到 525 → document 横向溢出 159px。minmax(0,…) + .pdp-main{min-width:0}
   让列可以缩到视口宽，超出的部分由 tab 条自己横向滚动。 */
.pdp-cols{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:44px;align-items:start}
.pdp-main{min-width:0}
/* 详情页选项卡（2026-10-14 用户要「更简单一点」）：Descripción / Calidad / Empaque / Envío / FAQ
   五个面板全部写在静态 HTML 里，靠 .is-active 显隐；下划线式 tab，B2B 观感最克制。
   ⚠️ 面板显隐只能靠 display，不能用 [hidden] 单独扛 —— .pdp-panel{display:none} 是作者样式，
   本来就盖得住 UA 的 [hidden]，两者一起用才既语义正确（aria）又渲染正确。 */
.pdp-tabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--line);margin:0 0 26px}
.pdp-tab{appearance:none;-webkit-appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  margin-bottom:-1px;padding:12px 16px;cursor:pointer;white-space:nowrap;border-radius:4px 4px 0 0;
  font-family:var(--font-head);font-weight:600;font-size:14px;line-height:1.2;color:var(--muted);
  transition:color .18s,border-color .18s}
.pdp-tab:hover{color:var(--navy)}
.pdp-tab.is-active{color:var(--blue-d);border-bottom-color:var(--blue)}
.pdp-tab:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.pdp-panel{display:none}
.pdp-panel.is-active{display:block}
.pdp-panel p{font-size:14px;line-height:1.78;color:var(--ink);margin:0 0 12px}
.pdp-panel h3.pdp-sub{font-family:var(--font-head);font-size:15px;color:var(--navy);margin:26px 0 12px}
.pdp-steps:first-child{margin-top:0}
/* 规格表：390px 窄屏下长型号串会把 table 的 min-content 顶到 500+，进而撑宽整个网格列
   （实测 document 溢出 159px）。滚动容器 min-content=0 兜底，td 允许任意断词收窄。 */
.pdp-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pdp-panel .spec-table td{overflow-wrap:anywhere}
.spec-table{width:100%;border-collapse:collapse;font-size:13.5px;border:1px solid var(--line)}
.spec-table th,.spec-table td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
.spec-table th{background:var(--soft);font-weight:600;color:var(--navy);width:38%}
.pdp-card{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:24px}
.pdp-card--sticky{position:sticky;top:26px}
.pdp-card h3{font-family:var(--font-head);font-size:16px;color:var(--navy);margin:0 0 8px}
.pdp-card p{font-size:13.5px;line-height:1.7;color:var(--ink);margin:0 0 16px}
.pdp-card .btn{width:100%;justify-content:center;margin-bottom:9px}
.pdp-card .btn:last-child{margin-bottom:0}
.pdp-steps{list-style:none;padding:0;margin:0;display:grid;gap:13px}
.pdp-steps li{display:flex;gap:12px;font-size:13.5px;line-height:1.6}
.pdp-steps i{flex:none;width:24px;height:24px;border-radius:50%;background:var(--blue-l);color:var(--blue-d);
  font-style:normal;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center}
.pdp-steps b{display:block;color:var(--navy);font-weight:600}
.pdp-steps span{color:var(--muted)}
.pdp-faq{display:grid;gap:10px}
.pdp-faq details{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:15px 18px}
.pdp-faq summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--navy);list-style:none}
.pdp-faq summary::-webkit-details-marker{display:none}
.pdp-faq summary::after{content:'+';float:right;color:var(--blue);font-weight:700}
.pdp-faq details[open] summary::after{content:'–'}
.pdp-faq p{margin:11px 0 0;font-size:13.5px;line-height:1.7;color:var(--ink)}
.pdp-rel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.pdp-rel a{display:block;border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;transition:.2s}
.pdp-rel a:hover{border-color:var(--blue);box-shadow:var(--shadow)}
.pdp-rel img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--soft)}
.pdp-rel b{display:block;padding:11px 13px;font-size:12.5px;font-weight:600;color:var(--navy);line-height:1.5;overflow-wrap:anywhere}
.pdp-back{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--blue-d);margin-top:6px}
.pdp-back svg{width:16px;height:16px;transform:rotate(180deg)}

@media (max-width:980px){
  .pdp__grid{grid-template-columns:1fr;gap:28px}
  .pdp__media{position:static}
  .pdp-cols{grid-template-columns:minmax(0,1fr);gap:28px}
  .pdp-card--sticky{position:static}
  /* 窄屏：tab 一行排不下，改成横向滑动（不换行，免得两行高低不齐） */
  .pdp-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .pdp-tabs::-webkit-scrollbar{display:none}
  .pdp-rel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pdp__info h1{font-size:21px}
  .pdp__band{padding:38px 0;margin-top:34px}
}

/* ---------- Process steps ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;counter-reset:step}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 20px;position:relative;transition:.28s}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.step__num{
  font-family:var(--font-head);font-weight:700;font-size:12.5px;color:var(--blue-d);
  background:var(--blue-l);border-radius:2px;padding:5px 12px;display:inline-block;margin-bottom:14px;
}
.step h3{font-size:16px;margin-bottom:9px}
.step p{font-size:13.5px;color:var(--muted)}

/* ---------- Video gallery ---------- */
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

/* ---------- Latest video (bande destacada) ---------- */
.latest-video{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:center}
.latest-video .video-thumb{aspect-ratio:16/9}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
.info-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;gap:16px;align-items:flex-start;transition:.25s}
.info-card:hover{box-shadow:var(--shadow);border-color:var(--blue)}
.info-card__ico{width:46px;height:46px;border-radius:6px;background:var(--blue-l);color:var(--blue-d);display:grid;place-items:center;flex:none}
.info-card__ico svg{width:21px;height:21px}
.info-card h3{font-size:15.5px;margin-bottom:6px}
.info-card p{font-size:14px;color:var(--muted);line-height:1.6}
.info-card a{color:var(--blue-d);font-weight:600}
.info-stack{display:grid;gap:16px}
/* 地图卡：静态图 + 悬浮 CTA。旧 .map-ph（深色占位块 + 网格纹理）
   已于 2026-10-20 整块删除，别再当占位加回。 */
.map-card{
  display:block;position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:#F1F3F6;aspect-ratio:1120/700;
  transition:border-color .25s,box-shadow .25s;
}
.map-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease}
.map-card:hover{border-color:var(--blue);box-shadow:var(--shadow)}
.map-card:hover img{transform:scale(1.015)}
.map-card:focus-visible{outline:3px solid var(--blue-l);outline-offset:2px}
.map-card__cta{
  position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:7px;
  background:#fff;color:var(--navy);font-family:var(--font-head);font-weight:700;font-size:12.5px;
  letter-spacing:.01em;padding:9px 15px;border-radius:999px;box-shadow:0 4px 16px rgba(10,26,51,.18);
  transition:background .2s,color .2s;
}
.map-card__cta svg{width:13px;height:13px;color:var(--blue-d);flex:none}
.map-card:hover .map-card__cta{background:var(--blue);color:#fff}
.map-card:hover .map-card__cta svg{color:#fff}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px;max-width:820px}
.faq__item{border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;overflow:hidden}
.faq__q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 22px;text-align:left;font-family:var(--font-head);font-weight:600;
  font-size:15px;color:var(--navy);
}
.faq__q svg{width:18px;height:18px;color:var(--blue-d);flex:none;transition:.25s}
.faq__item.is-open .faq__q svg{transform:rotate(45deg)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq__a p{padding:0 22px 20px;color:var(--muted);font-size:14px}

/* ---------- 隐私政策 / 法律文本 ---------- */
.legal__layout{display:grid;grid-template-columns:268px minmax(0,1fr);gap:52px;align-items:start}
.legal__side{position:sticky;top:96px}
.legal{max-width:820px}
.legal__updated{font-size:13px;color:var(--muted);margin-top:10px}
.legal__intro{margin-bottom:8px;max-width:820px}
.legal__intro p{font-size:15.5px;line-height:1.8;color:var(--ink);margin:0 0 12px}
.legal__toc{
  display:flex;flex-direction:column;gap:2px;
  padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--soft);
}
.legal__toc[hidden]{display:none}
.legal__tocTitle{
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 8px;
}
.legal__toc a{display:flex;gap:9px;align-items:baseline;padding:5px 0;font-size:13px;line-height:1.45;color:var(--ink)}
.legal__toc a:hover,.legal__toc a:focus-visible{color:var(--blue)}
.legal__toc a.is-current{color:var(--blue);font-weight:600}
.legal__toc i{
  font-style:normal;flex:none;width:16px;font-size:11px;font-weight:600;color:var(--blue);
  font-variant-numeric:tabular-nums;
}
.legal__sec{padding-top:28px;scroll-margin-top:96px}
.legal__sec:first-child{padding-top:0}
.legal__sec h2{
  font-family:var(--font-head);font-weight:600;font-size:18px;color:var(--navy);
  margin:0 0 12px;padding-left:14px;position:relative;line-height:1.4;
}
.legal__sec h2::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:2px;background:var(--blue)}
.legal__sec p{font-size:15px;line-height:1.78;color:var(--ink);margin:0 0 12px}
.legal__sec ul{margin:0 0 14px;padding:0;list-style:none}
.legal__sec li{
  position:relative;padding-left:18px;margin-bottom:8px;
  font-size:14.5px;line-height:1.72;color:var(--ink);
}
.legal__sec li::before{
  content:"";position:absolute;left:2px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--blue);
}
@media (max-width:980px){
  .legal__layout{grid-template-columns:1fr;gap:22px}
  .legal__side{position:static}
  .legal__toc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
}
@media (max-width:720px){
  .legal__toc{padding:12px 14px;gap:0 14px}
  .legal__toc a{font-size:12.5px;padding:4px 0}
  .legal__sec h2{font-size:16.5px}
  .legal__sec p,.legal__intro p{font-size:14.5px}
  .legal__sec li{font-size:14px}
}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:24px}
.modal.is-open{display:flex}
.modal__bd{position:absolute;inset:0;background:rgba(20,20,20,.82);backdrop-filter:blur(4px)}
.modal__box{position:relative;z-index:2;background:#fff;border-radius:var(--radius);max-width:860px;width:100%;overflow:hidden;box-shadow:var(--shadow-lg)}
.modal__box img{width:100%;max-height:70vh;object-fit:cover}
.modal__cap{padding:18px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.modal__cap h3{font-size:16.5px}
.modal__cap p{font-size:13px;color:var(--muted)}
.modal__close{
  position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;border-radius:50%;
  background:rgba(20,20,20,.7);color:#fff;display:grid;place-items:center;
}
.modal__close svg{width:18px;height:18px}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.1s}
.reveal[data-delay="2"]{transition-delay:.2s}
.reveal[data-delay="3"]{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .marquee__track{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- WhatsApp float ---------- */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:70;width:54px;height:54px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 10px 30px rgba(37,211,102,.42);
  transition:.25s;
}
.wa-float:hover{transform:translateY(-3px) scale(1.05)}
.wa-float svg{width:28px;height:28px;color:#fff}

/* ---------- Responsive ---------- */
/* La barra lleva ahora todas las marcas del catálogo + Contacto:
   necesita ~690px, que con el contenedor de 1180px solo caben a partir de 1180px de viewport.
   Por debajo se pasa al menú hamburguesa (móvil), que también lista las marcas. */
@media (max-width:1180px){
  .nav{display:none}
  .burger{display:grid}
  .header__cta .btn{display:none}
}
@media (max-width:1080px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .video-grid{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr;gap:36px}
  .latest-video{grid-template-columns:1fr}
  .item-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .section{padding:64px 0}
  .split{grid-template-columns:1fr;gap:44px}
  .split__media::before{display:none}
  .split__media img{aspect-ratio:4/3}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .cta-band__in{grid-template-columns:1fr;gap:40px;padding:60px 0}
  .contact-grid{grid-template-columns:1fr}
  .thumb-grid{grid-template-columns:repeat(2,1fr)}
  .hero__in{padding:92px 0 84px}
  .item-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .topbar__links a[data-email]{display:none}
  .topbar__links a.topbar__wa{padding:5px 11px;font-size:12px;white-space:nowrap}
  .topbar__links a.topbar__wa svg{width:14px;height:14px}
  .lang-switch{gap:9px}
  .lang-switch button{font-size:12px;gap:5px}
  .topbar__in{gap:10px}
  .topbar-search{display:none}
  .topbar__hours{display:none}
  .grid-4{grid-template-columns:1fr}
  .prod-grid{grid-template-columns:1fr}
  .item-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats--4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .video-grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .spec-table thead{display:none}
  .spec-table tbody td{display:block;border-top:0;padding:4px 20px}
  .spec-table tbody tr{display:block;padding:14px 0;border-top:1px solid var(--line)}
  .spec-table tbody td:first-child{padding-top:16px}
  .spec-table tbody td:last-child{padding-bottom:16px}
  .spec-table td .hide-sm{display:none}
  .modal__box img{max-height:50vh}
  .map-card__cta{left:10px;bottom:10px;padding:6px 11px;font-size:10.5px;gap:5px}
  .map-card__cta svg{width:11px;height:11px}
}
@media (max-width:480px){
  .item-list{grid-template-columns:minmax(0,1fr)}
}

/* ============================================================
   Catálogo: filas de producto (siempre por artículo) + páginas de modelo
   2026-10-12: se eliminó el conmutador «por modelo / por calidad» y las filas
   agregadas por modelo — el listado muestra siempre productos concretos.
   ============================================================ */

/* Sub-filtro contextual: líneas de panel (iPhone: DD/RJ/JK/GX/ZY) y series (Samsung: A/S/J) */
.sub-bar{
  display:flex;flex-direction:column;align-items:stretch;gap:5px;
  padding:14px;border:1px dashed var(--line);
  border-radius:var(--radius-sm);background:var(--soft);
}
.sub-bar[hidden]{display:none}
.sub-bar__label{font-family:var(--font-head);font-weight:600;font-size:12px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.4px;margin:0 0 5px}
.sub-btn{
  display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;
  font-family:var(--font-head);font-weight:600;font-size:12.5px;letter-spacing:.3px;
  padding:8px 11px;border-radius:6px;border:1px solid transparent;color:var(--navy);
  background:#fff;transition:.2s;cursor:pointer;
}
.sub-btn:hover{border-color:var(--blue);color:var(--blue-d)}
.sub-btn.is-active{background:var(--blue);border-color:var(--blue);color:#fff}
.sub-btn__n{font-weight:500;opacity:.6;margin-left:auto;font-size:11.5px;flex:none}
.sub-btn.is-active .sub-btn__n{opacity:.85}

/* Móvil / tablet: 侧栏收起成横向滚动条，目录变单列 */
@media (max-width:860px){
  .catalog{grid-template-columns:1fr;gap:18px}
  .catalog__side{position:static;gap:10px}
  .catalog__side .cat-bar,
  .catalog__side .sub-bar,.cat-bar,.sub-bar{
    flex-direction:row;align-items:center;flex-wrap:nowrap;
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding:10px 12px;gap:8px;
  }
  .cat-bar::-webkit-scrollbar,.sub-bar::-webkit-scrollbar{display:none}
  .sub-bar__label{
    position:sticky;left:0;background:var(--soft);padding-right:6px;margin:0;white-space:nowrap;
  }
  .catalog__side .cat-btn,.catalog__side .sub-btn,.cat-btn,.sub-btn{
    flex:0 0 auto;width:auto;border-radius:999px;padding:6px 14px;
  }
  .cat-btn__n,.sub-btn__n{margin-left:5px}
  .result-bar__search{max-width:none;margin-left:0;flex-basis:100%}
  .wall__grid{grid-template-columns:repeat(auto-fill,minmax(164px,1fr))}
  .series-grid{grid-template-columns:repeat(auto-fill,minmax(172px,1fr))}
}

/* 视觉隐藏：只给屏幕阅读器/搜索引擎用（机型页的 h1 现在走这个类 ——
   2026-10-12 用户要求机型页首那整块头图区全删，但页面不能没有 h1）。 */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* 屏幕质量选择器：归属「Pantallas」分区（原来占页首） */
.mp-pick{display:grid;grid-template-columns:.7fr 1.3fr;gap:38px;align-items:start;margin:20px 0 26px;
  padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--soft)}
.mp-pick__media .pdp__stage{background:#fff}
.mp-pick__title{font-family:var(--font-head);font-size:16.5px;color:var(--navy);margin:0 0 4px}
.mp-pick__sub{font-size:13px;color:var(--muted);margin:0 0 14px}
.mp-pick__info .mp-quality{margin-top:0}

.mp-quality{margin-top:16px}
.mp-quality__label{display:block;font-family:var(--font-head);font-weight:600;font-size:13px;color:var(--muted);margin-bottom:8px}
.mp-chips{display:flex;gap:8px;flex-wrap:wrap}
.mp-chip{
  display:flex;flex-direction:row;align-items:center;gap:8px;width:auto;padding:7px 12px 7px 8px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;cursor:pointer;transition:.2s;
}
.mp-chip img{width:36px;height:36px;object-fit:contain;flex:none}
.mp-chip span{font-size:11.5px;font-weight:600;color:var(--muted);text-align:left;line-height:1.3;white-space:nowrap}
.mp-chip:hover{border-color:var(--blue)}
.mp-chip.is-active{border-color:var(--blue);box-shadow:0 0 0 2px rgba(0,102,204,.16)}
.mp-chip.is-active span{color:var(--blue-d)}
.mp-selected{font-family:var(--font-head);font-size:14.5px;color:var(--navy);margin:14px 0 0}
.mp-specs{margin-top:16px}
.mp-h2{font-family:var(--font-head);font-size:21px;color:var(--navy)}
.mp-cards__sub{color:var(--muted);font-size:14.5px;margin:10px 0 22px}
.mp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.mp-card{
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;
  display:flex;flex-direction:column;transition:.22s;
}
.mp-card:hover{border-color:var(--blue);box-shadow:var(--shadow)}
.mp-card.is-active{border-color:var(--blue);box-shadow:0 0 0 2px rgba(0,102,204,.16)}
.mp-card__media{position:relative;background:var(--soft);aspect-ratio:1/1}
.mp-card__media img{width:100%;height:100%;object-fit:contain}
/* 图片/标题都是详情页入口（见 pages.js 的 card()）：包一层 block 链接，不改变图区尺寸 */
.mp-card__imglink{display:block;width:100%;height:100%}
.mp-card__body h3 a{color:inherit;text-decoration:none}
.mp-card:hover .mp-card__body h3 a{color:var(--blue-d)}
.mp-card__tag{position:absolute;top:10px;left:10px}
.mp-card__body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.mp-card__body h3{font-size:13.5px;font-family:var(--font-head);font-weight:600;color:var(--navy);line-height:1.45}
.mp-card__body .spec{font-size:12px;color:var(--blue-d);font-weight:600}
.mp-card__ref{font-size:12px;color:var(--muted)}
.mp-card__cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:10px}
.mp-others{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.mp-other{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;transition:.2s}
.mp-other:hover{border-color:var(--blue)}
.mp-other b{font-family:var(--font-head);font-size:13.5px;color:var(--navy)}
.mp-other span{font-size:11.5px;color:var(--muted)}
/* 机型页：品类导航条 + 分区标题（机型页 = 该机型全部配件） */
.mp-catnav{display:flex;flex-wrap:wrap;gap:10px}
.mp-catnav__item{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;
  border:1px solid var(--line);border-radius:100px;background:#fff;
  font-size:13px;font-weight:600;color:var(--navy);transition:.2s;
}
.mp-catnav__item:hover{border-color:var(--blue);color:var(--blue-d)}
.mp-catnav__item b{
  font-family:var(--font-head);font-size:11.5px;color:var(--blue-d);
  background:rgba(0,102,204,.09);border-radius:100px;padding:2px 8px;
}
.mp-catsec{scroll-margin-top:96px}
.mp-h3{
  display:flex;align-items:center;gap:10px;margin:0 0 18px;
  font-family:var(--font-head);font-size:19px;color:var(--navy);
}
.mp-h3__n{
  font-size:12px;font-weight:700;color:var(--blue-d);
  background:rgba(0,102,204,.09);border-radius:100px;padding:3px 10px;
}
@media (max-width:820px){
  .mp-pick{grid-template-columns:1fr;gap:18px;padding:16px}
  .mp-grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
  .mp-h3{font-size:17px}
  .mp-catnav__item{font-size:12.5px;padding:8px 12px}
}

/* 图片保护：屏蔽移动端长按弹出的「存储图像 / 拷贝」菜单（桌面右键由 script.js 拦截）。
   只作用于 img，不动 user-select，页面文字照常可选可复制。 */
img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;pointer-events:auto}