:root{
    --ink:#152029;
    --ink-soft:#3a4650;
    --paper:#F1EFE8;
    --paper-dim:#e7e4da;
    --card:#FFFFFF;
    --steel:#33546A;
    --steel-dark:#233d4d;
    --amber:#F0A400;
    --amber-dark:#C97F00;
    --line:#d8d4c8;
    --radius:2px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  html{overflow-x:hidden;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-wrap:break-word;
  }
  h1,h2,h3,.display{
    font-family:'Oswald',sans-serif;
    text-transform:uppercase;
    letter-spacing:0.01em;
    margin:0;
  }
  .mono{
    font-family:'JetBrains Mono',monospace;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 28px;
  }
  button{font-family:inherit;cursor:pointer;}
  /* ---------- Focus visibility ---------- */
  a:focus-visible, button:focus-visible{
    outline:3px solid var(--amber);
    outline-offset:2px;
  }
  /* ---------- Anchor scroll offset (so sticky header never covers a jumped-to section) ---------- */
  #categorias, #marcas, #nosotros, #proceso, #contacto{
    scroll-margin-top:96px;
  }
  header.main{
    background:var(--paper);
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    z-index:100;
  }
  header.main .wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    height:84px;
  }
  .logo{
    display:flex;
    align-items:center;
    gap:12px;
    /* en el header es un enlace a la portada; en el footer sigue siendo un div */
    text-decoration:none;
    color:inherit;
  }
  a.logo:hover .logo-word{color:var(--amber-dark);}
  .logo-mark{
    width:40px;height:40px;flex:none;
  }
  .logo-word{
    font-family:'Oswald',sans-serif;
    font-weight:700;
    font-size:27px;
    letter-spacing:0.02em;
    color:var(--ink);
    line-height:1;
  }
  .logo-tag{
    font-family:'JetBrains Mono',monospace;
    font-size:10.5px;
    letter-spacing:0.14em;
    color:var(--steel);
    text-transform:uppercase;
    margin-top:3px;
  }
  nav.primary{
    display:flex;
    align-items:center;
    gap:24px;
    flex:0 1 auto;
    min-width:0;
  }
  nav.primary a{
    font-size:14px;
    white-space:nowrap;
    font-weight:600;
    color:var(--ink-soft);
    position:relative;
    padding:6px 0;
    transition:color .15s;
  }
  nav.primary a:hover{color:var(--ink);}
  nav.primary a::after{
    content:"";
    position:absolute;left:0;bottom:0;
    width:0;height:2px;
    background:var(--amber);
    transition:width .2s;
  }
  nav.primary a:hover::after{width:100%;}

  /* ---------- Botón y megamenú del catálogo ---------- */
  .menu-abrir{
    display:flex;align-items:center;gap:9px;
    font-family:inherit;font-size:14px;font-weight:600;
    color:var(--ink-soft);background:none;border:0;padding:6px 0;cursor:pointer;
    transition:color .15s;
  }
  .menu-abrir:hover,.menu-abrir[aria-expanded="true"]{color:var(--ink);}
  .menu-abrir svg{width:15px;height:auto;}

  .mega{position:fixed;inset:0;z-index:200;}
  .mega[hidden]{display:none;}
  .mega-fondo{position:absolute;inset:0;background:rgba(21,32,41,.45);animation:megaFade .16s ease;}
  @keyframes megaFade{from{opacity:0;}to{opacity:1;}}

  /* El panel es fijo y ocupa el alto de la ventana: el scroll lo hace cada
     columna por dentro, no la página. */
  .mega-panel{
    position:absolute;top:0;left:0;bottom:0;
    width:min(980px,96vw);
    display:flex;flex-direction:column;
    background:var(--card);
    box-shadow:0 0 60px rgba(21,32,41,.3);
    animation:megaEntra .2s cubic-bezier(.2,.7,.3,1);
  }
  @keyframes megaEntra{from{transform:translateX(-24px);opacity:.4;}to{transform:none;opacity:1;}}

  .mega-cab{
    flex:none;display:flex;align-items:center;justify-content:space-between;
    background:var(--ink);color:#fff;padding:0 14px 0 26px;height:58px;
  }
  .mega-cab span{
    font-family:'JetBrains Mono',monospace;font-size:11.5px;
    letter-spacing:.14em;text-transform:uppercase;
  }
  .mega-x{
    background:none;border:0;color:#fff;font-size:27px;line-height:1;
    padding:4px 12px;cursor:pointer;opacity:.75;
  }
  .mega-x:hover{opacity:1;}

  .mega-cuerpo{flex:1;display:grid;grid-template-columns:288px minmax(0,1fr);min-height:0;}

  /* riel izquierdo: las 22 categorías */
  .mega-cats{
    list-style:none;margin:0;padding:6px 0;overflow-y:auto;
    border-right:1px solid var(--line);background:var(--paper);
  }
  .mega-cats button{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    width:100%;text-align:left;cursor:pointer;
    font-family:inherit;font-size:14px;font-weight:500;color:var(--ink-soft);
    background:none;border:0;border-left:3px solid transparent;
    padding:11px 18px 11px 23px;line-height:1.3;
  }
  .mega-cats button svg{width:7px;height:auto;flex:none;opacity:.45;transition:transform .15s;}
  .mega-cats button:hover{background:var(--card);color:var(--ink);}
  .mega-cats button[aria-selected="true"]{
    background:var(--card);color:var(--ink);font-weight:700;
    border-left-color:var(--amber);
  }
  .mega-cats button[aria-selected="true"] svg{opacity:1;transform:translateX(2px);}

  /* panel derecho: las subcategorías de la elegida */
  .mega-subs{overflow-y:auto;padding:24px 30px 30px;}
  .mega-grupo[hidden]{display:none;}
  .mega-grupo-cab{
    display:flex;align-items:baseline;justify-content:space-between;gap:18px;
    flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:16px;
  }
  /* el menú es navegación, no contenido: sus títulos son párrafos para no
     meter 22 h2 en el encabezado de cada página del sitio */
  .mega-grupo-t{
    font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;
    letter-spacing:.01em;font-size:20px;margin:0;color:var(--ink);
  }
  .mega-grupo-cab a{font-size:13px;font-weight:700;color:var(--amber-dark);}
  .mega-grupo-cab a:hover{text-decoration:underline;}
  .mega-lista{
    list-style:none;margin:0;padding:0;
    /* con 49 subcategorías hacen falta varias columnas para que se vean todas */
    columns:3;column-gap:26px;
  }
  .mega-lista li{break-inside:avoid;}
  .mega-lista a{
    display:block;padding:6px 0;font-size:13.5px;font-weight:500;
    color:var(--ink-soft);line-height:1.4;
  }
  .mega-lista a:hover{color:var(--amber-dark);}
  .mega-vacio{font-size:13.5px;color:var(--steel);}

  .mega-pie{
    flex:none;display:flex;gap:22px;align-items:center;flex-wrap:wrap;
    border-top:1px solid var(--line);padding:14px 26px;background:var(--paper);
  }
  .mega-pie a{font-size:13px;font-weight:600;color:var(--ink-soft);}
  .mega-pie a:hover{color:var(--amber-dark);}
  .mega-cta{
    margin-left:auto;background:var(--amber);color:var(--ink) !important;
    padding:9px 18px;font-weight:700;
  }
  .mega-cta:hover{background:var(--amber-dark);color:#fff !important;}

  @media (max-width:900px){
    .mega-panel{width:100vw;}
    .mega-cuerpo{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);}
    .mega-cats{
      display:flex;gap:4px;overflow-x:auto;overflow-y:hidden;padding:8px 12px;
      border-right:0;border-bottom:1px solid var(--line);
    }
    .mega-cats li{flex:none;}
    .mega-cats button{
      border-left:0;border-bottom:2px solid transparent;
      padding:8px 12px;white-space:nowrap;font-size:13.5px;
    }
    .mega-cats button svg{display:none;}
    .mega-cats button[aria-selected="true"]{border-bottom-color:var(--amber);}
    .mega-subs{padding:20px 18px 26px;}
    .mega-lista{columns:2;column-gap:18px;}
  }
  @media (max-width:520px){ .mega-lista{columns:1;} }

  .header-actions{display:flex;align-items:center;gap:16px;flex:none;}
  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:700;
    font-size:13.5px;
    letter-spacing:0.03em;
    text-transform:uppercase;
    padding:12px 22px;
    border-radius:var(--radius);
    border:1px solid transparent;
    transition:transform .15s, box-shadow .15s, background .15s;
  }
  .btn-primary{
    background:var(--amber);
    color:var(--ink);
  }
  .btn-primary:hover{background:var(--amber-dark);}
  .btn-ghost{
    border-color:var(--ink);
    color:var(--ink);
    background:transparent;
  }
  .btn-ghost:hover{background:var(--ink);color:var(--paper);}
  .btn-line{
    color:var(--steel-dark);
    font-weight:700;
    font-size:13.5px;
    border-bottom:1px solid var(--steel-dark);
    padding-bottom:2px;
  }
  /* ---------- Mobile nav toggle + panel ---------- */
  .nav-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:40px;
    height:40px;
    background:transparent;
    border:1px solid var(--line);
    border-radius:var(--radius);
    flex:none;
  }
  .nav-toggle span{
    width:18px;height:2px;
    background:var(--ink);
    transition:transform .2s ease, opacity .2s ease;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .mobile-menu{
    position:fixed;
    left:0;right:0;
    top:64px;
    bottom:0;
    background:var(--ink);
    z-index:90;
    padding:8px 24px 32px;
    display:none;
    flex-direction:column;
    overflow-y:auto;
    transform:translateY(-8px);
    opacity:0;
    transition:transform .18s ease, opacity .18s ease;
  }
  .mobile-menu.open{display:flex;transform:translateY(0);opacity:1;}
  .mobile-menu nav{display:flex;flex-direction:column;}
  .mobile-menu nav a{
    padding:16px 2px;
    font-size:16px;
    font-weight:600;
    color:#e7ebed;
    border-bottom:1px solid #26343d;
  }
  /* las subcategorías van más discretas que las secciones del menú */
  .mobile-menu nav a.mm-sub{
    padding:12px 2px 12px 14px;
    font-size:14.5px;
    font-weight:500;
    color:#aeb9c0;
  }
  .mobile-menu .btn-primary{
    width:100%;
    justify-content:center;
    margin-top:22px;
  }
  /* ---------- Hero ---------- */
  .hero{
    background:var(--ink);
    color:var(--paper);
    position:relative;
    overflow:hidden;
    isolation:isolate;
  }
  /* Banner: real photo of a Chilean city skyline at dusk, given by the client as the
     look-and-feel reference. Embedded as a data URI so the file stays a single
     drop-in paste with no separate image upload required. */
  .hero-photo{
    position:absolute;
    inset:0;
    z-index:0;
    background-image:url("hero-banner.webp");
    background-size:cover;
    background-position:center 22%;
    background-repeat:no-repeat;
  }
  .hero-overlay{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
      linear-gradient(100deg, rgba(21,32,41,0.97) 0%, rgba(21,32,41,0.9) 24%, rgba(21,32,41,0.52) 52%, rgba(21,32,41,0.3) 74%, rgba(21,32,41,0.58) 100%),
      linear-gradient(to top, rgba(14,22,28,0.96) 0%, rgba(14,22,28,0.12) 40%, rgba(14,22,28,0) 58%),
      linear-gradient(205deg, rgba(240,164,0,0.18) 0%, rgba(240,164,0,0) 42%);
  }
  .hero .wrap{
    position:relative;
    z-index:1;
  }
  .hero-grid{
    position:relative;
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:40px;
    padding:44px 0 0;
    align-items:end;
  }
  .hero-grid > div{min-width:0;}
  .hero-eyebrow{
    display:flex;
    align-items:flex-start;
    gap:10px;
    max-width:100%;
    font-family:'JetBrains Mono',monospace;
    font-size:12px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--amber);
    margin-bottom:22px;
  }
  .hero-eyebrow .eyebrow-text{
    min-width:0;
    flex:1 1 auto;
    padding-top:5px;
  }
  .hero-eyebrow::before{
    margin-top:11px;
    content:"";
    width:26px;height:1px;
    background:var(--amber);
  }
  /* El H1 es la keyword, no el titular: va al tamaño de un antetítulo para que
     el peso visual se lo lleve el claim, que es lo que engancha. */
  .hero h1{
    font-family:'JetBrains Mono',monospace;
    font-size:12.5px;
    font-weight:500;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--amber);
    margin:0 0 18px;
    line-height:1.4;
  }
  .hero .hero-claim{
    font-family:'Oswald',sans-serif;
    font-weight:700;
    font-size:56px;
    line-height:1.03;
    letter-spacing:0.005em;
    color:#fff;
    max-width:660px;
    margin:0;
  }
  .hero .hero-claim em{
    font-style:normal;
    color:var(--amber);
  }
  .hero p.lede{
    font-family:'Inter',sans-serif;
    text-transform:none;
    font-size:17px;
    line-height:1.65;
    color:#b7c1c8;
    max-width:500px;
    margin-top:24px;
    font-weight:400;
  }
  .hero-actions{
    display:flex;
    gap:14px;
    margin-top:34px;
  }
  .hero-actions .btn-ghost{
    border-color:rgba(255,255,255,0.6);
    color:#fff;
    background:rgba(21,32,41,0.45);
    backdrop-filter:blur(3px);
  }
  .hero-actions .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff;}
  /* Manifest panel: signature element */
  .manifest{
    position:relative;
    background:#0e1820;
    border:1px solid #2a3a44;
    border-radius:var(--radius);
    padding:0;
    margin-bottom:0;
    align-self:end;
    box-shadow:0 24px 48px -20px rgba(0,0,0,0.55);
  }
  .manifest-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 20px;
    border-bottom:1px dashed #33454f;
  }
  .manifest-head .mono{
    font-size:11px;
    letter-spacing:0.1em;
    color:#7d8f99;
    text-transform:uppercase;
  }
  .manifest-head .mono.stamp{
    color:var(--amber);
    border:1px solid var(--amber);
    padding:3px 8px;
    border-radius:2px;
  }
  .manifest-list{
    list-style:none;
    margin:0;padding:0;
  }
  .manifest-list li{
    display:flex;
    align-items:center;
    gap:14px;
    padding:11px 20px;
    border-bottom:1px solid #22323b;
    font-size:13.5px;
  }
  .manifest-list li:last-child{border-bottom:none;}
  .manifest-list .code{
    font-family:'JetBrains Mono',monospace;
    font-size:11.5px;
    color:var(--amber);
    width:32px;
    flex:none;
  }
  .manifest-list .name{color:#dfe6ea;font-weight:500;}
  .manifest-list .qty{
    margin-left:auto;
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    color:#66767f;
  }
  .manifest-foot{
    padding:14px 20px;
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    color:#66767f;
    display:flex;
    justify-content:space-between;
  }
  .hero-bottom-strip{
    position:relative;
    z-index:1;
    border-top:1px solid #263640;
    margin-top:56px;
  }
  .hero-bottom-strip .wrap{
    display:flex;
    padding:0;
  }
  .strip-item{
    flex:1;
    padding:20px 28px;
    border-right:1px solid #263640;
    background:rgba(13,21,27,0.62);
  }
  .strip-item:last-child{border-right:none;}
  .strip-item .num{
    font-family:'JetBrains Mono',monospace;
    font-size:22px;
    color:var(--amber);
    font-weight:600;
  }
  .strip-item .label{
    font-size:12px;
    color:#8b98a1;
    margin-top:4px;
    letter-spacing:0.02em;
  }
  /* ---------- Section shell ---------- */
  section{padding:88px 0;}
  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
    margin-bottom:48px;
    border-bottom:1px solid var(--line);
    padding-bottom:22px;
  }
  .section-head .eyebrow{
    font-family:'JetBrains Mono',monospace;
    font-size:12px;
    letter-spacing:0.14em;
    color:var(--steel);
    text-transform:uppercase;
    margin-bottom:10px;
    display:block;
  }
  .section-head h2{
    font-size:34px;
    color:var(--ink);
  }
  .section-head p{
    max-width:380px;
    font-size:14.5px;
    color:var(--ink-soft);
    line-height:1.55;
    font-family:'Inter',sans-serif;
  }
  /* ---------- Value props (featured, high-contrast) ---------- */
  .value-props{
    background:var(--ink);
    color:#fff;
    padding:96px 0 100px;
  }
  .vp-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:40px;
    margin-bottom:52px;
  }
  .vp-head .eyebrow{
    font-family:'JetBrains Mono',monospace;
    font-size:12px;
    letter-spacing:0.14em;
    color:var(--amber);
    text-transform:uppercase;
    margin-bottom:14px;
    display:block;
  }
  .vp-head h2{
    font-size:38px;
    color:#fff;
    max-width:620px;
    line-height:1.08;
  }
  .vp-head p{
    max-width:340px;
    font-size:14.5px;
    line-height:1.6;
    color:#9aa7ae;
    font-family:'Inter',sans-serif;
  }
  .values{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:1px;
    background:#26343d;
    border:1px solid #26343d;
  }
  .value-card{
    background:#1a2730;
    padding:30px 22px 26px;
    transition:background .15s, transform .15s;
  }
  .value-card .vnum{
    font-family:'JetBrains Mono',monospace;
    color:var(--amber);
    font-size:12.5px;
    margin-bottom:20px;
    display:block;
  }
  .value-card h3{
    font-size:16.5px;
    text-transform:none;
    font-family:'Inter',sans-serif;
    font-weight:700;
    margin-bottom:10px;
    color:#fff;
  }
  .value-card p{
    font-size:13.3px;
    line-height:1.55;
    color:#9aa7ae;
    margin:0;
  }
  /* the agility card is the signature highlight of this section */
  .value-card.featured{
    background:var(--amber);
    position:relative;
  }
  .value-card.featured .vnum{color:var(--ink);opacity:0.6;}
  .value-card.featured h3,
  .value-card.featured p{color:var(--ink);}
  .value-card.featured p{opacity:0.85;}
  /* ---------- Categories: index sheet ---------- */
  .categories{background:var(--card);}
  .cat-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    border:1px solid var(--line);
  }
  .cat-card{
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:26px 24px;
    display:flex;
    flex-direction:column;
    gap:14px;
    transition:background .15s;
    position:relative;
  }
  .cat-grid .cat-card:nth-child(3n){border-right:none;}
  .cat-card:hover{background:var(--paper);}
  .cat-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
  }
  .cat-code{
    font-family:'JetBrains Mono',monospace;
    font-size:12px;
    color:var(--amber-dark);
    font-weight:600;
  }
  .cat-arrow{
    font-size:16px;
    color:var(--ink-soft);
    transition:transform .15s;
  }
  .cat-card:hover .cat-arrow{transform:translateX(3px);color:var(--ink);}
  .cat-card h3{
    font-size:16.5px;
    text-transform:none;
    font-family:'Inter',sans-serif;
    font-weight:700;
    color:var(--ink);
  }
  .cat-card .cat-desc{
    font-size:13px;
    color:var(--ink-soft);
    line-height:1.5;
  }
  .cat-card .cat-brands{
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    color:#96a0a6;
    letter-spacing:0.02em;
    margin-top:auto;
    padding-top:8px;
    border-top:1px dashed var(--line);
  }
  /* ---------- Industrias ---------- */
  .industrias{background:var(--paper);}
  .ind-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .ind-card{
    background:var(--card);
    padding:22px 20px;
    display:flex;
    flex-direction:column;
    gap:8px;
    transition:background .15s;
  }
  .ind-card:hover{background:var(--paper);}
  .ind-card h3{
    font-size:15px;
    font-family:'Inter',sans-serif;
    font-weight:700;
    text-transform:none;
    color:var(--ink);
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:10px;
  }
  .ind-card p{
    font-size:13px;
    color:var(--ink-soft);
    line-height:1.5;
  }
  .ind-arrow{
    font-size:15px;
    color:var(--ink-soft);
    transition:transform .15s;
    flex:none;
  }
  .ind-card:hover .ind-arrow{transform:translateX(3px);color:var(--ink);}
  .ind-card-todas{background:var(--steel-dark);}
  .ind-card-todas h3{color:#fff;}
  .ind-card-todas p{color:#aebac2;}
  .ind-card-todas .ind-arrow{color:var(--amber);}
  .ind-card-todas:hover{background:#1d2d38;}
  /* ---------- Páginas de industria ---------- */
  .ind-head .eyebrow{display:block;margin-bottom:10px;}
  .ind-head h1{max-width:22ch;}
  .ind-valor{background:var(--card);}
  .ind-valor-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .ind-valor-card{background:var(--paper);padding:26px 24px;}
  .ind-valor-num{
    font-family:'JetBrains Mono',monospace;
    font-size:12px;
    font-weight:600;
    color:var(--amber-dark);
    display:block;
    margin-bottom:12px;
  }
  .ind-valor-card h3{
    font-size:16.5px;
    font-family:'Inter',sans-serif;
    font-weight:700;
    text-transform:none;
    color:var(--ink);
    margin-bottom:8px;
  }
  .ind-valor-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.6;}

  .ind-lineas{background:var(--paper);}
  .ind-lineas-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .ind-linea{
    background:var(--card);
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:6px;
    transition:background .15s;
  }
  .ind-linea:hover{background:var(--paper);}
  .ind-linea h3{
    font-size:15px;
    font-family:'Inter',sans-serif;
    font-weight:700;
    text-transform:none;
    color:var(--ink);
  }
  .ind-linea-n{
    font-family:'JetBrains Mono',monospace;
    font-size:11.5px;
    color:var(--ink-soft);
  }

  .ind-muestra{background:var(--card);}
  .ind-prod-grid{grid-template-columns:repeat(5,minmax(0,1fr));}
  .ind-muestra-pie{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:26px;
    justify-content:center;
  }

  .ind-marcas{background:var(--paper);}
  .ind-marcas h2{font-size:20px;margin-bottom:18px;}
  .ind-marcas-lista{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:0 0 18px;
    padding:0;
  }
  .ind-marcas-lista li{
    font-family:'JetBrains Mono',monospace;
    font-size:12px;
    letter-spacing:0.02em;
    color:var(--ink);
    background:var(--card);
    border:1px solid var(--line);
    padding:7px 12px;
  }
  .ind-marcas-cta{
    font-family:'JetBrains Mono',monospace;
    font-size:12px;
    color:var(--amber-dark);
    font-weight:600;
  }
  .ind-marcas-cta:hover{text-decoration:underline;}
  /* ---------- Process ---------- */
  .process{background:var(--steel-dark);color:#fff;}
  .process .section-head{border-bottom-color:#3a5162;}
  .process .section-head h2{color:#fff;}
  .process .section-head p{color:#aebac2;}
  .process .eyebrow{color:var(--amber);}
  .steps{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
  }
  .step{position:relative;padding-top:8px;}
  .step .snum{
    font-family:'Oswald',sans-serif;
    font-size:52px;
    font-weight:700;
    color:#33495a;
    line-height:1;
    display:block;
    margin-bottom:14px;
  }
  .step h3{
    font-size:18px;
    color:#fff;
    text-transform:none;
    font-family:'Inter',sans-serif;
    font-weight:700;
    margin-bottom:10px;
  }
  .step p{
    font-size:14px;
    color:#aebac2;
    line-height:1.6;
  }
  /* ---------- Trust / brands ---------- */
  .trust{padding:56px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .trust .wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    flex-wrap:wrap;
  }
  .trust-label{
    font-family:'JetBrains Mono',monospace;
    font-size:11.5px;
    letter-spacing:0.1em;
    color:var(--steel);
    text-transform:uppercase;
    flex:none;
    white-space:nowrap;
  }
  /* con veinte marcas el renglón único ya no da: se deja fluir y el bloque
     pasa a ocupar el ancho completo bajo la etiqueta */
  .trust .wrap{flex-direction:column;align-items:flex-start;gap:18px;}
  .trust-marks{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  .trust-cta{
    font-size:13.5px;font-weight:600;color:var(--amber-dark);
  }
  .trust-cta:hover{text-decoration:underline;}
  .trust-chip{
    font-family:'Oswald',sans-serif;
    font-weight:600;
    font-size:14.5px;
    letter-spacing:0.02em;
    color:var(--ink-soft);
    background:var(--card);
    border:1px solid var(--line);
    border-radius:999px;
    padding:9px 18px;
  }
  /* ---------- CTA banner ---------- */
  .cta-banner{
    background:var(--amber);
    color:var(--ink);
  }
  .cta-banner .wrap{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:52px 28px;
    gap:24px;
  }
  .cta-banner h2{
    font-size:30px;
    max-width:520px;
  }
  .cta-banner p{
    font-family:'Inter',sans-serif;
    text-transform:none;
    font-size:14.5px;
    margin-top:10px;
    max-width:480px;
    font-weight:500;
  }
  .cta-banner .btn-ghost{
    border-color:var(--ink);
    color:var(--ink);
    flex:none;
  }
  .cta-banner .btn-ghost:hover{background:var(--ink);color:var(--amber);}
  /* ---------- Footer ---------- */
  footer{background:var(--ink);color:#9aa5ab;padding:64px 0 0;}
  .footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:40px;
    padding-bottom:48px;
    border-bottom:1px solid #26343d;
  }
  .footer-brand .logo-word{color:#fff;}
  .footer-brand p{
    font-size:13.5px;
    line-height:1.65;
    margin-top:16px;
    max-width:270px;
    color:#8b969c;
  }
  .footer-col h4{
    font-family:'JetBrains Mono',monospace;
    font-size:11.5px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:#5c6b73;
    margin-bottom:16px;
  }
  .footer-col ul{list-style:none;margin:0;padding:0;}
  .footer-col li{margin-bottom:11px;}
  .footer-col a{
    font-size:13.5px;
    color:#c3cbcf;
    transition:color .15s;
  }
  .footer-col a:hover{color:var(--amber);}
  /* la columna de categorías es larga: va a dos columnas y más apretada */
  .footer-cats ul{columns:2;column-gap:26px;}
  .footer-cats li{margin-bottom:9px;break-inside:avoid;}
  .footer-cats a{font-size:13px;}
  .footer-mas{color:var(--amber) !important;font-weight:600;}
  @media (max-width:900px){ .footer-cats ul{columns:1;} }
  .footer-bottom{
    display:flex;
    justify-content:space-between;
    padding:22px 0;
    font-size:12px;
    color:#5c6b73;
  }
  .footer-bottom .mono{letter-spacing:0.02em;}
  .footer-legal{display:flex;gap:18px;}
  .footer-legal a{color:#5c6b73;text-decoration:none;}
  .footer-legal a:hover{color:var(--amber-dark);text-decoration:underline;}
  @media (max-width:640px){
    .footer-bottom{flex-direction:column;gap:10px;align-items:flex-start;}
  }
  /* ---------- Contact section: form + info/map ---------- */
  .contact-section{
    background:var(--card);
    padding:88px 0;
  }
  .contact-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,0.85fr);
    gap:0;
    border:1px solid var(--line);
  }
  .contact-grid > *{min-width:0;}
  .contact-form{
    padding:44px;
    border-right:1px solid var(--line);
  }
  .contact-form h3{
    font-size:22px;
    text-transform:none;
    font-family:'Inter',sans-serif;
    font-weight:800;
    color:var(--ink);
    margin-bottom:8px;
  }
  .contact-form .sub{
    font-size:14px;
    color:var(--ink-soft);
    margin-bottom:30px;
  }
  .form-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:18px;
    margin-bottom:18px;
  }
  .form-field{margin-bottom:18px;}
  .form-field label{
    display:block;
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--steel);
    margin-bottom:8px;
  }
  .form-field input,
  .form-field select,
  .form-field textarea{
    width:100%;
    border:1px solid var(--line);
    background:var(--paper);
    border-radius:var(--radius);
    padding:12px 14px;
    font-family:'Inter',sans-serif;
    font-size:14px;
    color:var(--ink);
  }
  .form-field input:focus,
  .form-field select:focus,
  .form-field textarea:focus{
    outline:none;
    border-color:var(--amber-dark);
    background:#fff;
  }
  .form-field textarea{resize:vertical;min-height:100px;}
  .contact-form .btn-primary{
    width:100%;
    justify-content:center;
    border:none;
    margin-top:6px;
  }
  .form-note{
    font-size:12px;
    color:#96a0a6;
    margin-top:12px;
    text-align:center;
  }
  .contact-info{
    background:var(--ink);
    color:#fff;
    padding:44px 40px;
    display:flex;
    flex-direction:column;
  }
  .contact-info h3{
    font-size:16px;
    text-transform:none;
    font-family:'Inter',sans-serif;
    font-weight:800;
    margin-bottom:22px;
  }
  .contact-info-row{
    display:flex;
    gap:14px;
    padding:16px 0;
    border-top:1px dashed #33454f;
  }
  .contact-info-row:first-of-type{border-top:none;}
  .contact-info-row .ci-label{
    font-family:'JetBrains Mono',monospace;
    font-size:10.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:#7d8f99;
    width:78px;
    flex:none;
    padding-top:2px;
  }
  .contact-info-row .ci-value{
    font-size:14px;
    color:#e7ebed;
    line-height:1.5;
  }
  .contact-info-row .ci-value a{color:#e7ebed;}
  .contact-info-row .ci-value a:hover{color:var(--amber);}
  .contact-map{
    margin-top:24px;
    border:1px solid #2a3a44;
    border-radius:var(--radius);
    overflow:hidden;
    flex:1;
    min-height:200px;
  }
  .contact-map iframe{width:100%;height:100%;min-height:200px;border:0;display:block;filter:grayscale(0.3) contrast(1.05);}
  /* ---------- WhatsApp floating button (dynamic: link built from a JS-set number) ---------- */
  .wa-float{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:80;
    display:flex;
    align-items:center;
    gap:10px;
    background:#25D366;
    color:#fff;
    padding:14px 18px 14px 14px;
    border-radius:999px;
    box-shadow:0 8px 22px rgba(20,30,25,0.28);
    font-family:'Inter',sans-serif;
    font-weight:700;
    font-size:14px;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .wa-float:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 26px rgba(20,30,25,0.34);
  }
  .wa-float svg{width:26px;height:26px;flex:none;}
  .wa-float .wa-text{white-space:nowrap;}
  @media (max-width:640px){
    .wa-float .wa-text{display:none;}
    .wa-float{padding:14px;}
  }
  @media (max-width:960px){
    nav.primary{display:none;}
    .nav-toggle{display:flex;}
    .hero-grid{grid-template-columns:1fr;padding-top:28px;}
    .hero .hero-claim{font-size:38px;}
    .values{grid-template-columns:repeat(2,minmax(0,1fr));}
    .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .cat-grid .cat-card:nth-child(3n){border-right:1px solid var(--line);}
    .cat-grid .cat-card:nth-child(2n){border-right:none;}
    .ind-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .ind-valor-grid{grid-template-columns:minmax(0,1fr);}
    .ind-lineas-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .ind-prod-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
    .steps{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
    .hero-bottom-strip .wrap{flex-wrap:wrap;}
    .strip-item{flex:1 1 50%;}
    .cta-banner .wrap{flex-direction:column;align-items:flex-start;}
    .contact-grid{grid-template-columns:minmax(0,1fr);}
    .contact-form{border-right:none;border-bottom:1px solid var(--line);}
    .form-row{grid-template-columns:minmax(0,1fr);}
    .hero-photo{background-position:center 18%;}
    .section-head, .vp-head{flex-direction:column;align-items:flex-start;gap:14px;}
    .section-head p, .vp-head p{max-width:none;}
  }
  @media (max-width:600px){
    .wrap{padding:0 16px;}
    .ind-grid{grid-template-columns:minmax(0,1fr);}
    .ind-lineas-grid{grid-template-columns:minmax(0,1fr);}
    .ind-prod-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .ind-muestra-pie .btn{flex:1 1 100%;justify-content:center;}
    header.main .wrap{height:64px;}
    .logo{gap:8px;}
    .logo-mark{width:30px;height:30px;}
    .logo-word{font-size:19px;}
    .logo-tag{display:none;}
    .header-actions{gap:8px;}
    .btn-line{display:none;}
    .header-actions .btn-primary{
      padding:9px 12px;
      font-size:11px;
      gap:0;
      white-space:nowrap;
    }
    .trust .wrap{justify-content:center;}
    .trust-label{width:100%;text-align:center;}
    .trust-marks{justify-content:center;}
    .hero .hero-claim{font-size:30px;}
    .hero h1{font-size:11.5px;letter-spacing:0.13em;}
    .hero-grid{padding-top:22px;}
  }

  /* ============ PÁGINAS DE CATÁLOGO (categoría / subcategoría) ============ */
  .pagina-head{
    background:var(--card);
    border-bottom:1px solid var(--line);
    padding:44px 0 52px;
  }
  .migas{
    font-family:'JetBrains Mono',monospace;
    font-size:11.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--steel);
    margin-bottom:20px;
  }
  .migas a{color:var(--steel);text-decoration:none;}
  .migas a:hover{color:var(--amber-dark);text-decoration:underline;}
  .migas [aria-current]{color:var(--ink-soft);}
  .migas-sep{margin:0 8px;color:var(--line);}
  .pagina-head .eyebrow{
    font-family:'JetBrains Mono',monospace;
    font-size:12px;
    letter-spacing:0.14em;
    color:var(--steel);
    text-transform:uppercase;
    margin-bottom:10px;
    display:block;
  }
  .pagina-head h1{
    font-family:'Oswald',sans-serif;
    font-weight:700;
    font-size:44px;
    line-height:1.1;
    margin:0 0 16px;
    /* 16ch encuadra bien un nombre de categoría —«Ferretería», «Zapatos de
       seguridad»—, pero estrangula el título de un artículo, que es una frase
       entera. Por eso el blog usa su propia medida. */
    max-width:16ch;
  }
  .pagina-head-ancha h1{max-width:30ch;font-size:42px;}
  .pagina-head-ancha .eyebrow{display:block;margin-bottom:10px;}
  .pagina-lead{
    font-size:17px;
    line-height:1.6;
    color:var(--ink-soft);
    max-width:62ch;
    margin:0 0 28px;
  }
  .pagina-acciones{display:flex;flex-wrap:wrap;gap:12px;}
  .pagina-texto{padding:64px 0;}
  .pagina-texto .wrap{max-width:760px;}
  .pagina-texto h2{font-family:'Oswald',sans-serif;font-size:27px;margin:38px 0 14px;}
  .pagina-texto h3{font-size:19px;margin:28px 0 10px;}
  .pagina-texto p,.pagina-texto li{font-size:16px;line-height:1.75;color:var(--ink-soft);}
  .pagina-texto ul,.pagina-texto ol{padding-left:22px;}
  /* las legales son texto largo y sin listado de productos que las corte */
  .pagina-legal li{margin-bottom:8px;}
  .pagina-legal code{font-family:'JetBrains Mono',monospace;font-size:14px;background:var(--card);padding:1px 5px;}
  .pagina-legal a{color:var(--amber-dark);}

  /* ---------- Preguntas frecuentes ---------- */
  .faq{padding:72px 0;border-top:1px solid var(--line);}
  .faq-lista{margin-top:8px;border-top:1px solid var(--line);}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-item summary{
    display:flex;align-items:center;gap:14px;
    padding:20px 0;cursor:pointer;list-style:none;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{
    content:"+";margin-left:auto;flex:none;
    font-family:'Oswald',sans-serif;font-size:24px;line-height:1;color:var(--steel);
    transition:transform .18s;
  }
  .faq-item[open] summary::after{content:"–";color:var(--amber-dark);}
  .faq-item summary h3{
    margin:0;font-family:'Oswald',sans-serif;font-weight:500;
    font-size:19px;line-height:1.35;color:var(--ink);
  }
  .faq-item summary:hover h3{color:var(--amber-dark);}
  .faq-r{padding:0 42px 24px 0;max-width:760px;}
  .faq-r p,.faq-r li{font-size:15.5px;line-height:1.7;color:var(--ink-soft);margin:0 0 12px;}
  .faq-r ul{margin:0 0 12px;padding-left:20px;}
  .faq-r li{margin-bottom:6px;}
  @media (max-width:640px){
    .faq{padding:52px 0;}
    .faq-item summary h3{font-size:17px;}
    .faq-r{padding-right:0;}
  }

  /* ---------- Blog ---------- */
  .blog-indice{padding:52px 0 8px;}
  .blog-grupo{margin-bottom:42px;}
  .blog-grupo h2{
    font-family:'Oswald',sans-serif;font-size:21px;margin:0 0 14px;
    display:flex;align-items:center;gap:10px;
    border-bottom:1px solid var(--line);padding-bottom:10px;
  }
  .blog-cuenta{
    font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;
    color:var(--steel);background:var(--card);padding:2px 7px;
  }
  .blog-tarjetas{
    list-style:none;margin:0;padding:0;
    display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:26px;
  }
  .blog-card{
    display:flex;flex-direction:column;background:var(--card);
    border:1px solid var(--line);transition:box-shadow .15s ease;
  }
  .blog-card:hover{box-shadow:inset 0 0 0 2px var(--amber);}
  .blog-card-media{display:block;aspect-ratio:16/10;background:var(--paper);line-height:0;}
  .blog-card-media img{width:100%;height:100%;object-fit:cover;}
  .blog-card-vacia{display:block;width:100%;height:100%;background:var(--paper);}
  .blog-card-cuerpo{padding:14px 16px 18px;border-top:1px solid var(--line);flex:1;}
  .blog-card-grupo{
    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--steel);
  }
  .blog-card h3{margin:8px 0 0;font-size:15.5px;line-height:1.4;font-weight:600;}
  .blog-card h3 a{color:var(--ink);text-decoration:none;}
  .blog-card h3 a:hover{color:var(--amber-dark);}

  /* portada del artículo, a lo ancho de la columna de lectura */
  .blog-portada{background:var(--card);border-bottom:1px solid var(--line);padding:0 0 8px;}
  .blog-portada .wrap{max-width:760px;}
  .blog-portada img{
    display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
    background:var(--paper);border:1px solid var(--line);
  }
  .blog-texto table{border-collapse:collapse;width:100%;margin:20px 0;font-size:15px;}
  .blog-texto th,.blog-texto td{border:1px solid var(--line);padding:9px 12px;text-align:left;}
  .blog-texto th{background:var(--card);font-weight:700;}
  .blog-texto a{color:var(--amber-dark);text-decoration:underline;}
  .blog-texto h2{scroll-margin-top:90px;}

  /* índice de contenidos */
  .blog-indice-contenidos{
    background:var(--card);border:1px solid var(--line);
    padding:20px 24px;margin:0 0 34px;
  }
  .bic-titulo{
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--steel);margin:0 0 12px;
  }
  .blog-indice-contenidos ol{margin:0;padding-left:20px;}
  .blog-indice-contenidos li{margin-bottom:7px;font-size:14.5px;line-height:1.45;}
  .blog-indice-contenidos a{color:var(--ink-soft);text-decoration:none;}
  .blog-indice-contenidos a:hover{color:var(--amber-dark);text-decoration:underline;}

  /* imágenes dentro del artículo */
  .blog-texto figure{margin:28px 0;}
  .blog-texto figure img{
    display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
    border:1px solid var(--line);background:#fff;
  }
  .blog-texto figure.contenida img{aspect-ratio:auto;max-height:340px;object-fit:contain;padding:18px;}
  .blog-texto figcaption{
    font-size:13px;color:var(--steel);margin-top:8px;line-height:1.5;
  }

  /* banner de conversión a mitad del artículo */
  .blog-banner{
    display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
    background:var(--ink);color:#fff;padding:26px 28px;margin:36px 0;
  }
  /* el texto del artículo pinta todos sus párrafos, así que el banner necesita
     ganarle con su propia especificidad o queda gris sobre fondo oscuro */
  .blog-texto .blog-banner-eyebrow{
    font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--amber);margin:0 0 8px;line-height:1.4;
  }
  .blog-texto .blog-banner-t{
    font-family:'Oswald',sans-serif;font-size:21px;line-height:1.3;
    margin:0 0 6px;color:#fff;
  }
  .blog-texto .blog-banner-s{font-size:14px;color:#c3cbcf;margin:0;max-width:52ch;line-height:1.55;}
  .blog-texto .blog-banner .btn{flex:none;text-decoration:none;color:var(--ink);}
  @media (max-width:640px){
    .blog-banner{padding:22px;}
    .blog-banner-t{font-size:19px;}
    .blog-banner .btn{width:100%;justify-content:center;}
  }

  /* ---------- Directorio de marcas ---------- */
  .marcas-dir{padding:52px 0 8px;}
  .marcas-grupo{margin-bottom:40px;}
  .marcas-grupo h2{
    font-family:'Oswald',sans-serif;font-size:21px;margin:0 0 14px;
    display:flex;align-items:center;gap:10px;
    border-bottom:1px solid var(--line);padding-bottom:10px;
  }
  .marcas-grupo h2 a{color:var(--ink);text-decoration:none;}
  .marcas-grupo h2 a:hover{color:var(--amber-dark);}
  .marcas-cuenta{
    font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;
    color:var(--steel);background:var(--card);padding:2px 7px;
  }
  .marcas-lista{
    list-style:none;margin:0;padding:0;
    display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px 18px;
  }
  .marcas-lista li{
    display:flex;align-items:baseline;justify-content:space-between;gap:8px;
    padding:6px 0;font-size:14px;border-bottom:1px solid var(--line);
  }
  /* una marca sin página propia se lista igual, como referencia */
  .marcas-lista span{color:var(--ink-soft);}
  .marcas-lista a{color:var(--ink);font-weight:600;text-decoration:none;}
  .marcas-lista a:hover{color:var(--amber-dark);text-decoration:underline;}
  .marcas-lista em{
    font-family:'JetBrains Mono',monospace;font-size:11px;font-style:normal;color:var(--steel);flex:none;
  }
  .relacionadas{background:var(--card);border-top:1px solid var(--line);padding:56px 0;}
  .relacionadas h2{font-family:'Oswald',sans-serif;font-size:24px;margin:0 0 22px;}
  .relacionadas h2 a{color:var(--steel);text-decoration:none;}
  .relacionadas h2 a:hover{color:var(--amber-dark);}
  .lista-hermanas{
    list-style:none;margin:0;padding:0;
    display:flex;flex-wrap:wrap;gap:10px;
  }
  .lista-hermanas a{
    display:inline-block;
    border:1px solid var(--line);
    padding:9px 15px;
    font-size:14px;
    color:var(--ink);
    text-decoration:none;
    background:var(--paper);
    transition:border-color .15s,color .15s;
  }
  .lista-hermanas a:hover{border-color:var(--amber);color:var(--amber-dark);}
  @media (max-width:760px){
    .pagina-head{padding:32px 0 38px;}
    .pagina-head h1{font-size:32px;max-width:none;}
    .pagina-head-ancha h1{font-size:30px;max-width:none;}
    .pagina-lead{font-size:15.5px;}
  }


  /* ============ FICHA DE PRODUCTO ============ */
  .ficha{background:var(--card);border-bottom:1px solid var(--line);padding:36px 0 56px;}
  .ficha-grid{
    display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);
    gap:48px;align-items:start;margin-top:6px;
  }
  /* Marco cuadrado: el surtido viene de catálogos distintos y trae de todo,
     desde un cartucho de 208x1000 hasta fotos apaisadas. Sin marco fijo, una
     foto vertical estiraba la ficha varias pantallas. */
  .ficha-media img{
    display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;
    padding:24px;border:1px solid var(--line);background:#fff;
  }
  .ficha-sin-foto{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:14px;aspect-ratio:1;
    border:1px dashed var(--line-strong,var(--line));background:var(--paper);
    color:var(--steel);
  }
  .ficha-sin-foto svg{width:64px;height:64px;}
  .ficha-sin-foto span{
    font-family:'JetBrains Mono',monospace;font-size:11px;
    letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
  }
  .ficha-marca{
    display:inline-block;font-family:'JetBrains Mono',monospace;
    font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--steel);margin-bottom:10px;
  }
  .ficha-datos h1{
    font-family:'Oswald',sans-serif;font-weight:700;
    font-size:33px;line-height:1.15;margin:0 0 24px;
  }
  .ficha-atributos{margin:0 0 28px;padding:0;border-top:1px solid var(--line);}
  .ficha-atributos > div{
    display:grid;grid-template-columns:130px minmax(0,1fr);
    gap:16px;padding:11px 0;border-bottom:1px solid var(--line);
  }
  .ficha-atributos dt{
    font-family:'JetBrains Mono',monospace;font-size:10.5px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
    padding-top:2px;
  }
  .ficha-atributos dd{margin:0;font-size:14.5px;color:var(--ink);}
  .ficha-stock{color:#2F6B46;font-weight:600;}
  .ficha-tallas{display:flex;flex-wrap:wrap;gap:5px;}
  .ficha-tallas span{
    font-family:'JetBrains Mono',monospace;font-size:11.5px;
    border:1px solid var(--line);padding:3px 7px;color:var(--ink-soft);
  }
  .ficha-nota{
    margin-top:16px;font-size:13.5px;color:var(--ink-soft);
    padding-left:12px;border-left:2px solid var(--amber);
  }
  a.prod-nombre{color:var(--ink);text-decoration:none;}
  a.prod-nombre:hover{color:var(--amber-dark);text-decoration:underline;}
  @media (max-width:860px){
    .ficha-grid{grid-template-columns:1fr;gap:28px;}
    .ficha-media{max-width:380px;}
    .ficha-datos h1{font-size:26px;}
    .ficha-atributos > div{grid-template-columns:110px minmax(0,1fr);gap:12px;}
  }

  /* ============ CATÁLOGO ============ */
  .catalogo{background:var(--paper-dim);border-top:1px solid var(--line);}
  .visually-hidden{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }


  /* dos columnas: filtros + parrilla */
  .catalogo-cuerpo{display:grid;grid-template-columns:232px minmax(0,1fr);gap:26px;align-items:start;}
  .filtros-caja{
    background:var(--card);border:1px solid var(--line);
    padding:18px 16px;position:sticky;top:16px;
  }
  .filtros-caja h3{
    font-family:'JetBrains Mono',monospace;font-size:11px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
    margin:0 0 14px;font-weight:400;
  }
  .filtro-buscar input{
    width:100%;font:inherit;font-size:13.5px;padding:8px 11px;
    border:1px solid var(--line);background:var(--paper);color:var(--ink);
  }
  .filtro-bloque{margin-top:18px;}
  .filtro-bloque h4{
    font-size:13.5px;margin:0 0 9px;font-weight:600;color:var(--ink);
  }
  .filtro-lista{list-style:none;margin:0;padding:0;max-height:320px;overflow-y:auto;}
  .filtro-lista label{
    display:flex;align-items:center;gap:8px;
    padding:5px 0;font-size:13px;color:var(--ink-soft);cursor:pointer;
  }
  .filtro-lista input{width:15px;height:15px;accent-color:var(--amber-dark);flex:none;margin:0;}
  .filtro-lista .f-nombre{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .filtro-lista .f-cuenta{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--steel);}
  .filtro-lista label:hover .f-nombre{color:var(--ink);}
  .btn-limpiar{
    margin-top:16px;width:100%;
    font-family:'JetBrains Mono',monospace;font-size:10.5px;
    letter-spacing:.08em;text-transform:uppercase;
    padding:8px;border:1px solid var(--line);
    background:transparent;color:var(--ink-soft);cursor:pointer;
  }
  .btn-limpiar:hover{border-color:var(--amber);color:var(--amber-dark);}

  /* barra de conteo y orden */
  .catalogo-barra{
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;flex-wrap:wrap;margin-bottom:14px;
  }
  .catalogo-barra .cuenta{font-size:13.5px;color:var(--ink-soft);}
  .catalogo-barra .cuenta strong{color:var(--ink);font-weight:600;}
  .catalogo-barra select{
    font:inherit;font-size:13px;padding:7px 10px;
    border:1px solid var(--line);background:var(--card);color:var(--ink);
  }

  /* tarjetas */
  .prod-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
    gap:1px;background:var(--line);border:1px solid var(--line);
  }
  .prod-card{
    display:flex;flex-direction:column;background:var(--card);
    transition:box-shadow .15s ease;
    /* el navegador no maquetea las tarjetas fuera de pantalla */
    content-visibility:auto;contain-intrinsic-size:auto 330px;
  }
  .prod-card:hover{box-shadow:inset 0 0 0 2px var(--amber);}
  .prod-media{position:relative;display:block;aspect-ratio:1;background:#fff;padding:14px;line-height:0;}
  .prod-media img{width:100%;height:100%;object-fit:contain;}
  .prod-media-vacia{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--steel);}
  .prod-media-vacia svg{width:54px;height:54px;}
  .prod-tag{
    position:absolute;top:10px;left:10px;z-index:1;
    font-family:'JetBrains Mono',monospace;font-size:9.5px;
    letter-spacing:.1em;text-transform:uppercase;
    background:#E3EDE6;color:#2F6B46;padding:3px 7px;
  }
  .prod-body{display:flex;flex-direction:column;gap:8px;padding:13px 14px 14px;border-top:1px solid var(--line);flex:1;}
  .prod-brand{
    font-family:'JetBrains Mono',monospace;font-size:10px;
    letter-spacing:.13em;text-transform:uppercase;color:var(--steel);
  }
  .prod-card h3{margin:0;font-size:14px;line-height:1.35;font-weight:600;}
  .prod-card h3 a{color:var(--ink);text-decoration:none;}
  .prod-card h3 a:hover{color:var(--amber-dark);}
  .prod-chips{display:flex;flex-wrap:wrap;gap:5px;}
  .chip-dato{
    font-family:'JetBrains Mono',monospace;font-size:10px;
    color:var(--ink-soft);border:1px solid var(--line);padding:3px 6px;
  }
  .prod-foot{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin-top:auto;padding-top:11px;border-top:1px solid var(--line);
  }
  .prod-sku{
    font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-soft);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .prod-quote{
    flex:none;font-family:'JetBrains Mono',monospace;font-size:10.5px;
    letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;
    text-decoration:none;color:var(--ink);background:var(--amber);
  }
  .prod-quote:hover{background:var(--ink);color:var(--amber);}
  .prod-vacio{margin-top:22px;font-size:14px;color:var(--ink-soft);}
  .enlace{background:none;border:none;padding:0;font:inherit;color:var(--steel);cursor:pointer;text-decoration:underline;}
  .productos-pie{margin-top:26px;font-size:14px;color:var(--ink-soft);}
  .productos-pie a{color:var(--steel);font-weight:500;}
  .productos-pie a:hover{color:var(--amber-dark);}

  @media (max-width:900px){
    .catalogo-cuerpo{grid-template-columns:1fr;gap:18px;}
    .filtros-caja{position:static;}
    .filtro-lista{max-height:200px;}
  }
  @media (max-width:560px){
    .prod-grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));}
    .prod-body{padding:11px 12px 12px;gap:6px;}
    .prod-card h3{font-size:12.5px;}
  }

  /* paginación y botones del filtro */
  .btn-aplicar{
    margin-top:16px;width:100%;
    font-family:'JetBrains Mono',monospace;font-size:10.5px;
    letter-spacing:.08em;text-transform:uppercase;
    padding:9px;border:1px solid var(--ink);
    background:var(--ink);color:var(--paper);cursor:pointer;
  }
  .btn-aplicar:hover{background:var(--amber);color:var(--ink);border-color:var(--amber);}
  a.btn-limpiar{
    display:block;margin-top:8px;text-align:center;text-decoration:none;
    line-height:normal;
  }
  .cuenta-pag{color:var(--ink-soft);}
  .paginacion{
    display:flex;flex-wrap:wrap;align-items:center;gap:5px;
    margin-top:26px;justify-content:center;
  }
  .pag{
    font-family:'JetBrains Mono',monospace;font-size:12px;
    min-width:36px;padding:8px 11px;text-align:center;
    border:1px solid var(--line);background:var(--card);
    color:var(--ink-soft);text-decoration:none;
  }
  a.pag:hover{border-color:var(--amber);color:var(--amber-dark);}
  .pag.activa{background:var(--ink);color:var(--paper);border-color:var(--ink);}
  .pag-sep{color:var(--ink-soft);padding:0 2px;}
  .prod-vacio a{color:var(--steel);}

  /* ============ ENLACES INTERNOS COMPACTOS ============ */
  .enlaces-int{background:var(--card);border-top:1px solid var(--line);padding:56px 0;}
  .enlaces-int .section-head{margin-bottom:26px;}
  .rejilla-enlaces{
    list-style:none;margin:0;padding:0;
    display:flex;flex-wrap:wrap;gap:6px;
  }
  .rejilla-enlaces a{
    display:inline-flex;align-items:baseline;gap:7px;
    padding:7px 11px;
    border:1px solid var(--line);background:var(--card);
    text-decoration:none;color:var(--ink);
    font-size:13.5px;line-height:1.25;
    transition:border-color .12s ease,color .12s ease;
  }
  .rejilla-enlaces a:hover{border-color:var(--amber);color:var(--amber-dark);}
  .re-nombre{font-weight:500;}
  .re-meta{
    font-family:'JetBrains Mono',monospace;font-size:10.5px;
    color:var(--steel);white-space:nowrap;
  }
  .rejilla-enlaces a:hover .re-meta{color:var(--amber-dark);}

  /* filtros: cabecera, listas largas y estado de carga */
  .filtros-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px;}
  .filtros-cab h3{margin:0;}
  .filtros-cab .limpiar{
    font-family:'JetBrains Mono',monospace;font-size:10px;
    letter-spacing:.08em;text-transform:uppercase;
    color:var(--steel);text-decoration:none;border-bottom:1px solid var(--line);
  }
  .filtros-cab .limpiar:hover{color:var(--amber-dark);border-color:var(--amber);}
  .filtro-bloque h4{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
  .f-total{
    font-family:'JetBrains Mono',monospace;font-size:10px;
    font-weight:400;color:var(--ink-soft);
  }
  .filtro-lista.alta{max-height:270px;overflow-y:auto;padding-right:4px;}
  .filtro-lista.alta::-webkit-scrollbar{width:6px;}
  .filtro-lista.alta::-webkit-scrollbar-thumb{background:var(--line);}
  #catalogo-resultados{transition:opacity .12s ease;}
  #catalogo-resultados.cargando{opacity:.45;pointer-events:none;}

  /* ---------- Buscador de productos ---------- */
  .buscador{
    position:relative;
    flex:1 1 180px;
    min-width:0;
    max-width:300px;
    display:flex;
    align-items:center;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:3px;
    padding:0 10px;
    height:38px;
  }
  .buscador:focus-within{border-color:var(--steel);box-shadow:0 0 0 3px rgba(51,84,106,.12);}
  .buscador-lupa{width:15px;height:15px;color:var(--ink-soft);flex:none;}
  .buscador input[type=search]{
    border:0;background:none;outline:none;
    width:100%;padding:0 8px;
    font-family:'Inter',sans-serif;font-size:13.5px;color:var(--ink);
  }
  .buscador input[type=search]::-webkit-search-cancel-button{cursor:pointer;}
  .buscador-sug{
    /* el desplegable no cabe en el ancho del campo: se ancla a la derecha
       y se hace tan ancho como el nombre del producto necesita */
    position:absolute;top:calc(100% + 6px);right:0;left:auto;
    width:min(420px,calc(100vw - 32px));
    background:var(--card);
    border:1px solid var(--line);
    box-shadow:0 12px 32px rgba(21,32,41,.14);
    z-index:60;
    max-height:min(70vh,440px);
    overflow-y:auto;
  }
  .bs-item{
    display:flex;align-items:center;gap:10px;
    padding:9px 12px;
    border-bottom:1px solid var(--line);
    text-decoration:none;
  }
  .bs-item:last-of-type{border-bottom:0;}
  .bs-item img{width:44px;height:44px;object-fit:contain;flex:none;background:#fff;}
  .bs-sinfoto{width:44px;height:44px;flex:none;background:var(--paper);}
  .bs-txt{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px;}
  .bs-marca,.bs-ref{
    font-family:'JetBrains Mono',monospace;font-size:10.5px;
    letter-spacing:.06em;text-transform:uppercase;color:var(--steel);
  }
  .bs-ref{color:#8c959b;text-transform:none;letter-spacing:.02em;}
  .bs-nombre{
    font-size:13px;line-height:1.35;color:var(--ink);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .bs-item:hover,.bs-item.activo{background:var(--paper);}
  .bs-item.activo .bs-nombre{color:var(--amber-dark);}
  .bs-todos,.bs-vacio{
    display:block;padding:11px 12px;
    font-family:'JetBrains Mono',monospace;font-size:11.5px;
    color:var(--amber-dark);font-weight:600;
    border-top:1px solid var(--line);
    background:var(--paper);
  }
  .bs-vacio{color:var(--ink-soft);font-weight:400;}
  .bs-vacio a{color:var(--amber-dark);font-weight:600;}

  /* el de la página de resultados es más grande y no lleva sugerencias */
  .buscador-pagina{max-width:520px;height:46px;margin-top:18px;padding:0 6px 0 12px;}
  .buscador-pagina input[type=search]{font-size:15px;}
  .buscador-pagina .btn{height:36px;padding:0 16px;flex:none;display:inline-flex;align-items:center;}

  .buscar-cats{background:var(--card);border-bottom:1px solid var(--line);padding:14px 0;}
  .buscar-cats .wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
  .buscar-cats-t{
    font-family:'JetBrains Mono',monospace;font-size:11px;
    letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
  }
  .buscar-cats ul{list-style:none;display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0;}
  .buscar-cats a{
    display:inline-block;padding:6px 11px;
    border:1px solid var(--line);background:var(--paper);
    font-size:12.5px;color:var(--ink);text-decoration:none;
  }
  .buscar-cats a:hover{border-color:var(--steel);}
  .buscar-cats a span{color:var(--ink-soft);font-family:'JetBrains Mono',monospace;font-size:11px;}

  @media (max-width:960px){
    .buscador{max-width:none;flex:1 1 120px;margin:0 10px;}
  }
  @media (max-width:600px){
    .buscador{order:3;flex:1 1 100%;margin:0 0 10px;max-width:none;}
    header.main .wrap{flex-wrap:wrap;height:auto;padding-top:12px;}
  }

  /* Con el buscador, la cabecera se queda sin aire antes de los 1200: el
     menú se va al mega y el buscador toma el espacio que deja. */
  @media (max-width:1100px) and (min-width:961px){
    nav.primary a{display:none;}
    nav.primary .menu-abrir{display:inline-flex;}
    .buscador{max-width:420px;}
  }

  /* ---------- Cantidad en la ficha de producto ---------- */
  .ficha-cantidad{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    margin:22px 0 18px;
    padding-top:18px;
    border-top:1px solid var(--line);
  }
  .ficha-cantidad label{
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
  .cant-caja{
    display:flex;
    align-items:stretch;
    border:1px solid var(--line);
    background:var(--card);
  }
  .cant-btn{
    width:40px;
    border:0;
    background:none;
    cursor:pointer;
    font-size:19px;
    line-height:1;
    color:var(--ink);
    transition:background .15s,color .15s;
  }
  .cant-btn:hover:not(:disabled){background:var(--paper);color:var(--amber-dark);}
  .cant-btn:disabled{color:#c2c7cb;cursor:not-allowed;}
  .cant-caja input[type=number]{
    width:66px;
    border:0;
    border-left:1px solid var(--line);
    border-right:1px solid var(--line);
    background:none;
    text-align:center;
    padding:9px 0;
    font-family:'JetBrains Mono',monospace;
    font-size:15px;
    font-weight:600;
    color:var(--ink);
    -moz-appearance:textfield;
  }
  .cant-caja input[type=number]::-webkit-outer-spin-button,
  .cant-caja input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
  .cant-caja input[type=number]:focus{outline:none;background:var(--paper);}
  .cant-caja:focus-within{border-color:var(--steel);box-shadow:0 0 0 3px rgba(51,84,106,.12);}
  .cant-nota{
    font-size:12.5px;
    color:var(--ink-soft);
    flex:1 1 220px;
    min-width:0;
  }
  @media (max-width:600px){
    .cant-nota{flex-basis:100%;}
  }

  /* iOS amplía la página al enfocar un campo cuya tipografía baja de 16px, y
     después la deja descuadrada. No se corrige con user-scalable —eso impide
     hacer zoom a mano, que sí hace falta—: se sube el tamaño del campo y ya.
     Vale para el buscador, la cantidad de la ficha, el filtro del catálogo y
     el formulario de contacto. */
  @media (max-width:860px){
    input[type=text],
    input[type=search],
    input[type=email],
    input[type=tel],
    input[type=number],
    select,
    textarea{font-size:16px;}
  }